@public-ui/components 3.0.0-rc.1 → 3.0.0-rc.2

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

@@ -1 +1 @@
-{"version":3,"names":["KoliBriProgressVariantEnum","defaultStyleCss","KolProgressDefaultStyle0","VALID_VARIANTS","Object","keys","CycleSvg","state","fullCircle","textPositionTop","textPositionBottom","valueY","_label","h","class","width","viewBox","xmlns","cx","cy","r","fill","stroke","Math","round","_value","_max","x","y","_unit","BarSvg","textLabelPadding","percentage","height","overflow","rx","style","createProgressSVG","_variant","Error","KolProcess","_liveValue","render","Host","key","this","max","value","validateLabel","validateMax","watchNumber","required","validateUnit","watchString","validateValue","validateVariant","watchValidator","includes","Set","componentWillLoad","interval","setInterval","assign","disconnectedCallback","clearInterval"],"sources":["src/schema/types/progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tprogress {\n\t\tdisplay: block;\n\t\theight: 0;\n\t\toverflow: hidden;\n\t\twidth: 0;\n\t}\n\n\t.bar {\n\t\twidth: rem(150);\n\n\t\t.border {\n\t\t\tfill: transparent;\n\t\t\tstroke: black;\n\t\t}\n\n\t\t.background {\n\t\t\tfill: lightgray;\n\t\t\tstroke: white;\n\t\t}\n\n\t\t.progress {\n\t\t\tfill: #0075ff;\n\t\t\tstroke: transparent;\n\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t}\n\t}\n\n\t.cycle .background {\n\t\tfill: transparent;\n\t\tstroke: lightgray;\n\t}\n\n\t.cycle .border {\n\t\tfill: transparent;\n\t\tstroke: black;\n\t}\n\n\t.cycle .whitespace {\n\t\tfill: transparent;\n\t\tstroke: white;\n\t}\n\n\t.cycle .progress {\n\t\tfill: transparent;\n\t\tstroke: #0075ff;\n\t\ttransform-origin: 50% 50%;\n\t\ttransform: rotate(-90deg);\n\t\ttransition: 250ms ease-in-out 50ms;\n\t}\n\n\t/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n\t@media (prefers-reduced-motion) {\n\t\t.progress {\n\t\t\ttransition-duration: 0s;\n\t\t\ttransition-delay: 0s;\n\t\t}\n\t}\n}\n","import type { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\tconst valueY = state._label ? textPositionBottom : '50%';\n\n\treturn (\n\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\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<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle\n\t\t\t\tclass=\"progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t\t{state._label && (\n\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={textPositionTop} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t{state._label}\n\t\t\t\t</text>\n\t\t\t)}\n\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t{state._value}\n\t\t\t\t{state._unit}\n\t\t\t</text>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';\n\tconst percentage = 100 * (state._value / state._max);\n\n\treturn (\n\t\t<div class=\"bar\">\n\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"background\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"border\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"1\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\theight=\"7\"\n\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(${percentage}% - 5px - (${textLabelPadding} / 100 * ${percentage}))` }}\n\t\t\t\t></rect>\n\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"end\" dominant-baseline=\"middle\" fill=\"currentColor\" x=\"100%\" y=\"50%\">\n\t\t\t\t\t{state._value}\n\t\t\t\t\t{state._unit}\n\t\t\t\t</text>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nconst createProgressSVG = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements ProgressAPI {\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 class=\"kol-progress\">\n\t\t\t\t{createProgressSVG(this.state)}\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\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\" class=\"visually-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 * Defines 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 * Defines at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\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@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);\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["KoliBriProgressVariantEnum","defaultStyleCss","KolProgressDefaultStyle0","VALID_VARIANTS","Object","keys","CycleSvg","state","fullCircle","textPositionTop","textPositionBottom","valueY","_label","h","class","width","viewBox","xmlns","cx","cy","r","fill","stroke","Math","round","_value","_max","x","y","_unit","BarSvg","textLabelPadding","percentage","height","overflow","rx","style","createProgressSVG","_variant","Error","KolProcess","_liveValue","render","key","this","max","value","validateLabel","validateMax","watchNumber","required","validateUnit","watchString","validateValue","validateVariant","watchValidator","includes","Set","componentWillLoad","interval","setInterval","assign","disconnectedCallback","clearInterval"],"sources":["src/schema/types/progress.ts","src/components/progress/style.scss?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/shadow.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t.kol-progress {\n\t\tfont-size: rem(16);\n\n\t\t&__bar {\n\t\t\twidth: rem(150);\n\t\t}\n\n\t\t&__bar-border {\n\t\t\tfill: transparent;\n\t\t\tstroke: black;\n\t\t}\n\n\t\t&__bar-background {\n\t\t\tfill: lightgray;\n\t\t\tstroke: white;\n\t\t}\n\n\t\t&__bar-progress {\n\t\t\tfill: #0075ff;\n\t\t\tstroke: transparent;\n\n\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t}\n\t\t}\n\n\t\t&__cycle-background {\n\t\t\tfill: transparent;\n\t\t\tstroke: lightgray;\n\t\t}\n\n\t\t&__cycle-border {\n\t\t\tfill: transparent;\n\t\t\tstroke: black;\n\t\t}\n\n\t\t&__cycle-whitespace {\n\t\t\tfill: transparent;\n\t\t\tstroke: white;\n\t\t}\n\n\t\t&__cycle-progress {\n\t\t\tfill: transparent;\n\t\t\tstroke: #0075ff;\n\t\t\ttransform-origin: 50% 50%;\n\t\t\ttransform: rotate(-90deg);\n\n\t\t\t@media (prefers-reduced-motion: no-preference) {\n\t\t\t\ttransition: 250ms ease-in-out 50ms;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { KoliBriProgressVariantType, LabelPropType, ProgressAPI, ProgressStates } from '../../schema';\nimport { KoliBriProgressVariantEnum, validateLabel, watchNumber, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\nconst CycleSvg = ({ state }: { state: ProgressStates }) => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\tconst valueY = state._label ? textPositionBottom : '50%';\n\n\treturn (\n\t\t<svg class=\"kol-progress__cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t<circle class=\"kol-progress__cycle-background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle class=\"kol-progress__cycle-border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t<circle\n\t\t\t\tclass=\"kol-progress__cycle-progress\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tstroke=\"currentColor\"\n\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\tstroke-width=\"6\"\n\t\t\t\tcx=\"60\"\n\t\t\t\tcy=\"60\"\n\t\t\t\tr=\"54.5\"\n\t\t\t></circle>\n\t\t\t{state._label && (\n\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={textPositionTop} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t{state._label}\n\t\t\t\t</text>\n\t\t\t)}\n\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t{state._value}\n\t\t\t\t{state._unit}\n\t\t\t</text>\n\t\t</svg>\n\t);\n};\n\nconst BarSvg = ({ state }: { state: ProgressStates }) => {\n\tconst textLabelPadding = 'var(--kolibri-text-label-padding, 45px)';\n\tconst percentage = 100 * (state._value / state._max);\n\n\treturn (\n\t\t<div class=\"kol-progress__bar\">\n\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"12\" overflow=\"visible\">\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-background\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-border\"\n\t\t\t\t\tx=\"1\"\n\t\t\t\t\ty=\"1\"\n\t\t\t\t\theight=\"10\"\n\t\t\t\t\trx=\"5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"1\"\n\t\t\t\t\tstyle={{ width: `calc(100% - 2px - ${textLabelPadding})` }}\n\t\t\t\t></rect>\n\t\t\t\t<rect\n\t\t\t\t\tclass=\"kol-progress__bar-progress\"\n\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\theight=\"7\"\n\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\tstyle={{ width: `calc(${percentage}% - 5px - (${textLabelPadding} / 100 * ${percentage}))` }}\n\t\t\t\t></rect>\n\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"end\" dominant-baseline=\"middle\" fill=\"currentColor\" x=\"100%\" y=\"50%\">\n\t\t\t\t\t{state._value}\n\t\t\t\t\t{state._unit}\n\t\t\t\t</text>\n\t\t\t</svg>\n\t\t</div>\n\t);\n};\n\nconst createProgressSVG = (state: ProgressStates): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\n\t\t\treturn <CycleSvg state={state} />;\n\t\tcase 'bar':\n\t\t\treturn <BarSvg state={state} />;\n\t\tdefault:\n\t\t\tthrow new Error(`Progress variant ${state._variant} not implemented.`);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements ProgressAPI {\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<div class=\"kol-progress\">\n\t\t\t\t{createProgressSVG(this.state)}\n\n\t\t\t\t{/* https://css-tricks.com/html5-progress-element/ */}\n\t\t\t\t<progress\n\t\t\t\t\tclass=\"visually-hidden\"\n\t\t\t\t\taria-busy={this.state._value < this.state._max ? 'true' : 'false'}\n\t\t\t\t\tmax={this.state._max}\n\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" class=\"visually-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</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines 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 * Defines at which value the progress display is completed.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Defines the unit of the step values (not shown).\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Defines the progress.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriProgressVariantType;\n\n\t@State() public state: ProgressStates = {\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@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);\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"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-336d0fea.js";import{e as t}from"./component-names-aa3cbc3c.js";import{c as i}from"./clsx-09a06a12.js";import{v as o}from"./label-d70e7c34.js";import{i as a,w as l}from"./prop.validators-c5e6ad2d.js";import{s}from"./reuse-32931294.js";import"./index-541b643a.js";import"./dev.utils-fab45cbc.js";const r=["block","inline"],d="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",c=d,h=class{constructor(e){n(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){o(this,e)}validateHref(e){a(this,"_href",e,{required:!0})}validateQuote(e){a(this,"_quote",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set(r),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=s(this.state._quote);return e("figure",{key:"3f3b958000fa6b3e4c4f088299a7bcd5362d76c1",class:i("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?e("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"362fc0a28a32ff5a281c578ff13f236a7ad598f3",class:"kol-quote__figcaption"},e("cite",{key:"ce66bd634d686e9b226cd72057031bef5b6e926b",class:"kol-quote__cite"},e(t,{key:"c202533205f65fe78d66cde35944e2a955160fa7",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};h.style={default:c};export{h as kol_quote};
+import{r as n,h as e}from"./index-8a5f476c.js";import{e as t}from"./component-names-50e16b86.js";import{c as i}from"./clsx-09a06a12.js";import{v as o}from"./label-d0315384.js";import{i as a,w as l}from"./prop.validators-9feb1d92.js";import{s}from"./reuse-32931294.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const r=["block","inline"],d="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",h=d,c=class{constructor(e){n(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){o(this,e)}validateHref(e){a(this,"_href",e,{required:!0})}validateQuote(e){a(this,"_quote",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set(r),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=s(this.state._quote);return e("figure",{key:"48709ad26e47dba761f8ba16b0b05573fe47d3a2",class:i("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?e("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"7bb7d1b9b1ea41c60e5d747e694954cf82042cd3",class:"kol-quote__figcaption"},e("cite",{key:"0bf3d26428fb8142b445a37be332ef4923c1cbfa",class:"kol-quote__cite"},e(t,{key:"c675259f5e14f0ad9f5236c81855ac44e2f39816",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};c.style={default:h};export{c as kol_quote};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as n,r as i,g as a}from"./index-336d0fea.js";import{n as o}from"./dev.utils-945026e6.js";import{t as s,s as l}from"./events-29e84d75.js";import{g as r}from"./controller-64301c42.js";import{I as d}from"./controller-icon-e20e2d63.js";import{f as h,v as c}from"./controller-506a6c81.js";import{v as p}from"./rows-64f9b5cb.js";import{b as u,g as f}from"./prop.validators-c5e6ad2d.js";import{i as m}from"./component-names-aa3cbc3c.js";import{p as b}from"./controller-6c2714a5.js";import{I as v}from"./InternalUnderlinedBadgeText-9ed66543.js";import{s as y,b as k}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./common-54bf85ba.js";import"./label-d70e7c34.js";import"./icons-f3b7aabd.js";import"./index-541b643a.js";class g extends d{constructor(t,e,n){super(t,e,n),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.afterPatchOptions=(t,e,n,i)=>{"_value"===i&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const n=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),h(this.keyOptionMap,n);const t=e.has("_value")?e.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],n);!1===this.component._multiple&&0===i.length?e.set("_value",[n[0].value]):Array.isArray(t)&&i.length<t.length&&e.set("_value",i)}},this.component=t}validateOptions(t){c(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(t){u(this.component,"_multiple",t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){u(this.component,"_required",t)}validateRows(t){p(this.component,t)}validateValue(t){f(this.component,"_value",(()=>!0),t,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const w="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .kol-span__label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host option:checked::before {\n    content: \"✓ \";\n  }\n}",_=w,x=(t,e)=>Array.isArray(t)&&t.includes(e),z=class{async getValue(){return this.state._value}async focus(){await this.kolFocus()}async kolFocus(){var t;null===(t=this.selectRef)||void 0===t||t.focus()}renderOptgroup(e,n){var i;return t("optgroup",{disabled:e.disabled,label:e.label},null===(i=e.options)||void 0===i?void 0:i.map(((e,i)=>{const a=`${n}-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:x(this.state._value,e.value),value:a},e.label)})))}render(){const{ariaDescribedBy:i}=r(this.state),a=y(this.state._label);return t(n,{key:"804755ea3789f03a21bc74826bc5e5683efca83e",class:{"kol-select":!0,"has-value":this.state._hasValue}},t(m,{key:"be615650dd6130e80d755b4f6123f5491c867f9b",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.selectRef)||void 0===t?void 0:t.focus()},role:"presentation"},t("span",{key:"d7adb59366aaa291d3bd95176477797083446826",slot:"label"},a?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(v,{badgeText:k(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},k(this.state._accessKey,this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"cd5d7a6a87ce62692c5ce25cea58c14c19f6ae4b",slot:"input"},t("form",{key:"1cd8c8ddd5ba51ca3acc7c4aacc7e03df2014377",onSubmit:t=>{t.preventDefault(),b({form:this.host,ref:this.selectRef})}},t("input",{key:"bb6e248fcef27c08e7ba3ebffb635d957a01438a",type:"submit",hidden:!0}),t("select",Object.assign({key:"5f2d9afebfc1ff794d33946a2d3a19c76a12511d",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",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},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1}}),this.state._options.map(((e,n)=>{const i=`-${n}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):t("option",{disabled:e.disabled,key:i,selected:x(this.state._value,e.value),value:i},e.label)})))))))}constructor(t){i(this,t),this.catchRef=t=>{this.selectRef=t},this._accessKey=void 0,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${o()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new g(this,"select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t)}validateRequired(t){this.controller.validateRequired(t)}validateRows(t){this.controller.validateRows(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}onInput(t){var e,n,i;this._value=Array.from((null===(e=this.selectRef)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),s("input",this.host,this._value),null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onInput)||void 0===i||i.call(n,t,this._value)}onChange(t){var e,n;l(t),s("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onChange)||void 0===n||n.call(e,t,this._value)}get host(){return a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:_};export{z as kol_select};
+import{h as e,F as t,r as n,g as i}from"./index-8a5f476c.js";import{c as o}from"./clsx-09a06a12.js";import{n as a}from"./dev.utils-47d07d5b.js";import{I as s}from"./controller-icon-ebd41784.js";import{f as l,v as r}from"./controller-4af5f563.js";import{v as d}from"./rows-26af6558.js";import{b as c,g as h}from"./prop.validators-9feb1d92.js";import{p}from"./controller-e3f702f2.js";import{K as u}from"./InputContainerStateWrapper-a321a9b8.js";import{_ as f}from"./tslib.es6-1173d062.js";import{g as b,a as m,K as v}from"./getRenderStates-b24b4a43.js";import"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./controller-cc41fe9f.js";import"./events-5adf6b62.js";import"./associated.controller-52d302aa.js";import"./access-and-short-key-9cca88b8.js";import"./tooltip-align-8e0fa436.js";import"./align-4719d626.js";import"./hide-label-429a15ea.js";import"./msg-93978a32.js";import"./common-54bf85ba.js";import"./label-d0315384.js";import"./icons-199f1746.js";import"./index-da3e0c00.js";import"./component-names-50e16b86.js";import"./isString-5af96894.js";import"./isObject-ffcbbb76.js";import"./Icon-5d99f9b6.js";import"./InternalUnderlinedBadgeText-f618013b.js";import"./i18n-5fe08f1c.js";import"./i18n-7ea9f137.js";import"./FormFieldMsg-6dafd67d.js";import"./Alert-210f80e8.js";import"./Heading-def0af88.js";class y extends s{constructor(e,t,n){super(e,t,n),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.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),l(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){r(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){c(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){c(this.component,"_required",e)}validateRows(e){d(this.component,e)}validateValue(e){h(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const k=t=>{var{index:n,selectedValue:i,selected:o,value:a,label:l}=t,s=f(t,["index","selectedValue","selected","value","label"]);return i?Array.isArray(i)||(i=[i]):i=[],e("option",Object.assign({selected:o||i.includes(a),value:n||a},s),l)},g=k,w=({preKey:n,options:i,value:o,OptionProps:a={},OptionGroupProps:l={}})=>(null==i?void 0:i.length)?e(t,null,i.map(((t,s)=>{const r=[n,`-${s}`].join("");if("options"in t){if(!i.length)return null;const{label:n}=t,s=f(t,["label"]);return e("optgroup",Object.assign({key:r},l,{label:null==n?void 0:n.toString()}),e(w,Object.assign({OptionGroupProps:l,OptionProps:a,value:o,preKey:r},s)))}return"value"in t?e(g,Object.assign({key:r},a,{index:r,selectedValue:o},t)):null}))):null,_=w,j=t=>{const{options:n,value:i,OptionProps:o,OptionGroupProps:a,ariaDescribedBy:l,hideLabel:s,label:r}=t,d=f(t,["options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),c=Object.assign(Object.assign({},b({ariaDescribedBy:l,hideLabel:s,label:r})),d);return e("select",Object.assign({},c),e(_,{options:n,value:i,OptionGroupProps:a,OptionProps:o}))},x=j;function z(e){const{ariaDescribedBy:t}=m(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required}}const O=t=>{var{state:n}=t,i=f(t,["state"]);return e(x,Object.assign({},z(n),i))},S=O,P="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .kol-span__label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host option:checked::before {\n    content: \"✓ \";\n  }\n}",A=P,I=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:o("kol-select","select",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return e(v,Object.assign({key:"d460bb69572d71c5911684f2f458bbcf59304aff"},this.getFormFieldProps()),e(u,{key:"7bdb9d0f96e75d0450c7de2139b3a8fa89610b7b",state:this.state},e("form",{key:"4aadbe940daf955f8637c02e56ea7690475dd421",class:"input-slot",onSubmit:e=>{e.preventDefault(),p({form:this.host,ref:this.selectRef})}},e("input",{key:"ec42426e92e2f0713795ab2f9953e43d2fe6bfc4",type:"submit",hidden:!0}),e(S,Object.assign({key:"a6e486d2e71ee96b89c1e31edab0b3b3151741d3"},this.getSelectProps())))))}constructor(e){n(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new y(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(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)}validateShortKey(e){this.controller.validateShortKey(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._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t;this._value=Array.from((null===(t=this.selectRef)||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})),this.controller.onFacade.onInput(e,!0,this._value)}onChange(e){this.controller.onFacade.onChange(e,this._value)}get host(){return i(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};I.style={default:A};export{I as kol_select};

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

@@ -1 +1 @@
-{"version":3,"names":["SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","options","find","option","Array","isArray","undefined","filterValuesInOptions","values","filter","afterPatchOptions","_state","_component","setFormAssociatedValue","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","validateOptions","validateOptionsWithOptgroup","hooks","afterPatch","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","componentWillLoad","_required","_rows","defaultStyleCss","KolSelectDefaultStyle0","isSelected","valueList","optionValue","includes","KolSelect","getValue","focus","kolFocus","_a","selectRef","renderOptgroup","optgroup","preKey","h","disabled","label","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","KolInputTag","_hideLabel","select","_accessKey","_alert","showAsAlert","_disabled","_hideError","_hint","_icons","_id","_msg","_shortKey","_tooltipAlign","_touched","onClick","role","slot","Fragment","InternalUnderlinedBadgeText","badgeText","buildBadgeTextString","onSubmit","event","preventDefault","propagateSubmitEventToForm","form","ref","type","hidden","Object","assign","catchRef","title","accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","controller","onFacade","onInput","bind","onChange","onFocus","inputHasFocus","onBlur","hostRef","nonce","Boolean","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v","from","tryToDispatchKoliBriEvent","_c","_b","_on","call","stopPropagation"],"sources":["src/components/select/controller.ts","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '../../schema';\nimport { validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, 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\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\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\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\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} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\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\tafterPatch: this.afterPatchOptions,\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] Currently, multiple selection is not yet supported. We are working on implementing it to be functional, as there are some gaps in the browser standard.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] For multiple selections, the list length (size) should also be set.');\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\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../input-line';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\n\t\toption:checked::before {\n\t\t\tcontent: '✓ ';\n\t\t}\n\t}\n}\n","import type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectOption,\n\tSelectStates,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../../functional-components';\nimport { SelectController } from './controller';\nimport { KolInputTag } from '../../core/component-names';\nimport { propagateSubmitEventToForm } from '../form/controller';\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.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate selectRef?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.selectRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.selectRef?.focus();\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 = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-select': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\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_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\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_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.selectRef?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<form\n\t\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\t\tref: this.selectRef,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t\t<select\n\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\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\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t\t/**\n\t\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\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\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\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\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\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t);\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</select>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\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('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(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('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(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('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tthis._value = Array.from(this.selectRef?.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\ttryToDispatchKoliBriEvent('input', this.host, this._value);\n\n\t\t// Callback\n\t\tthis.state._on?.onInput?.(event, this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\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\tthis.state._on?.onChange?.(event, this._value);\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","options","find","option","Array","isArray","undefined","filterValuesInOptions","values","filter","afterPatchOptions","_state","_component","setFormAssociatedValue","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","validateOptions","validateOptionsWithOptgroup","hooks","afterPatch","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","componentWillLoad","_required","_rows","NativeOptionFc","_a","index","selectedValue","label","other","__rest","h","Object","assign","includes","NativeOptionFc$1","NativeOptionListFc","preKey","OptionProps","OptionGroupProps","Fragment","map","join","toString","NativeOptionListFc$1","NativeSelectFc","props","ariaDescribedBy","hideLabel","inputProps","getDefaultProps","KolSelectFc","getSelectProps","getRenderStates","id","_id","_hideLabel","_label","accessKey","_accessKey","disabled","_disabled","_name","size","multiple","required","SelectStateWrapper","KolSelectStateWrapperFc","defaultStyleCss","KolSelectDefaultStyle0","KolSelect","getValue","kolFocus","selectRef","focus","getFormFieldProps","class","clsx","_hasValue","tooltipAlign","_tooltipAlign","onClick","alert","showAsAlert","ref","catchRef","controller","onFacade","onInput","bind","onChange","onFocus","event","inputHasFocus","onBlur","render","KolFormFieldStateWrapperFc","KolInputContainerFc","onSubmit","preventDefault","propagateSubmitEventToForm","form","type","hidden","hostRef","_hideError","nonce","Boolean","_touched","validateAccessKey","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateMsg","validateName","validateOn","validateShortKey","validateSyncValueBySelector","validateTabIndex","validateTouched","addValueChangeListener","v","from"],"sources":["src/components/select/controller.ts","src/functional-components/inputs/NativeOption/NativeOption.tsx","src/functional-components/inputs/NativeOptionList/NativeOptionList.tsx","src/functional-components/inputs/NativeSelect/NativeSelect.tsx","src/functional-component-wrappers/SelectStateWrapper/SelectStateWrapper.tsx","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '../../schema';\nimport { validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, 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\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\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\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\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} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\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\tafterPatch: this.afterPatchOptions,\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] Currently, multiple selection is not yet supported. We are working on implementing it to be functional, as there are some gaps in the browser standard.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] For multiple selections, the list length (size) should also be set.');\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\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport type { W3CInputValue } from '../../../schema';\n\nexport type NativeOptionProps = Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'> & {\n\tselectedValue?: W3CInputValue | W3CInputValue[];\n\tvalue: W3CInputValue;\n\tlabel: W3CInputValue;\n\tindex?: string | number;\n};\n\nconst NativeOptionFc: FC<NativeOptionProps> = ({ index, selectedValue, selected, value, label, ...other }) => {\n\tif (!selectedValue) {\n\t\tselectedValue = [];\n\t} else if (!Array.isArray(selectedValue)) {\n\t\tselectedValue = [selectedValue];\n\t}\n\n\treturn (\n\t\t<option selected={selected || selectedValue.includes(value)} value={index || value} {...other}>\n\t\t\t{label}\n\t\t</option>\n\t);\n};\n\nexport default NativeOptionFc;\n","import { h, Fragment, type FunctionalComponent as FC } from '@stencil/core';\nimport type { SelectOption, W3CInputValue } from '../../../schema';\nimport NativeOptionFc from '../NativeOption/NativeOption';\nimport type { JSXBase } from '@stencil/core/internal';\n\nexport type NativeOptionListProps = {\n\tpreKey?: string;\n\tdisabled?: boolean;\n\tvalue?: W3CInputValue | W3CInputValue[];\n\toptions?: SelectOption<W3CInputValue>[];\n\n\tOptionProps?: Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'>;\n\tOptionGroupProps?: Omit<JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>, 'label'>;\n};\n\nconst NativeOptionListFc: FC<NativeOptionListProps> = ({ preKey, options, value: selectedValue, OptionProps = {}, OptionGroupProps = {} }) => {\n\tif (!options?.length) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tconst key = [preKey, `-${index}`].join('');\n\n\t\t\t\tif ('options' in option) {\n\t\t\t\t\tif (!options.length) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst { label, ...other } = option;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<optgroup key={key} {...OptionGroupProps} label={label?.toString()}>\n\t\t\t\t\t\t\t<NativeOptionListFc OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} value={selectedValue} preKey={key} {...other} />\n\t\t\t\t\t\t</optgroup>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn <NativeOptionFc key={key} {...OptionProps} index={key} selectedValue={selectedValue} {...option} />;\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default NativeOptionListFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport { getDefaultProps } from '../_helpers/getDefaultProps';\nimport type { DefaultInputProps } from '../_types';\nimport NativeOptionListFc, { type NativeOptionListProps } from '../NativeOptionList';\n\ntype SelectAttributes = JSXBase.SelectHTMLAttributes<HTMLSelectElement>;\n\nexport type SelectProps = DefaultInputProps<SelectAttributes> & NativeOptionListProps;\n\nconst NativeSelectFc: FC<SelectProps> = (props) => {\n\tconst { options, value, OptionProps, OptionGroupProps, ariaDescribedBy, hideLabel, label, ...other } = props;\n\n\tconst inputProps: SelectAttributes = {\n\t\t...getDefaultProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<select {...inputProps}>\n\t\t\t<NativeOptionListFc options={options} value={value} OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} />\n\t\t</select>\n\t);\n};\n\nexport default NativeSelectFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolSelectFc, { type SelectProps } from '../../functional-components/inputs/NativeSelect';\n\nimport type { SelectStates } from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\nexport type SelectStateWrapperProps = Partial<SelectProps> & {\n\tstate: SelectStates;\n};\n\nfunction getSelectProps(state: SelectStates): SelectProps {\n\tconst { ariaDescribedBy } = getRenderStates(state);\n\n\tconst props: SelectProps = {\n\t\tid: state._id,\n\t\thideLabel: state._hideLabel,\n\t\tlabel: state._label,\n\t\tvalue: state._value,\n\t\toptions: state._options,\n\t\taccessKey: state._accessKey,\n\t\tdisabled: state._disabled,\n\t\tname: state._name,\n\t\tariaDescribedBy: ariaDescribedBy,\n\t\tsize: state._rows,\n\t\tmultiple: state._multiple,\n\t\trequired: state._required,\n\t};\n\n\treturn props;\n}\n\nconst SelectStateWrapper: FC<SelectStateWrapperProps> = ({ state, ...other }) => {\n\treturn <KolSelectFc {...getSelectProps(state)} {...other} />;\n};\n\nexport default SelectStateWrapper;\n","@import '../@shared/mixins';\n@import '../style';\n@import '../input-line';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\n\t\toption:checked::before {\n\t\t\tcontent: '✓ ';\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectStates,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { SelectController } from './controller';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolSelectStateWrapperFc, { type SelectStateWrapperProps } from '../../functional-component-wrappers/SelectStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate selectRef?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.selectRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.selectRef?.focus();\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-select', 'select', {\n\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.selectRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getSelectProps(): SelectStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t{/* deprecated: remove from theme and replace/refactor 'flex-grow: 1;' */}\n\t\t\t\t\t<form\n\t\t\t\t\t\tclass=\"input-slot\"\n\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\tref: this.selectRef,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t<KolSelectStateWrapperFc {...this.getSelectProps()} />\n\t\t\t\t\t</form>\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\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('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(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('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(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('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tthis._value = Array.from(this.selectRef?.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\tthis.controller.onFacade.onInput(event, true, this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tthis.controller.onFacade.onChange(event, this._value);\n\t}\n}\n"],"mappings":";;;8yCAiBaA,UAAyBC,EAIrC,WAAAC,CAAmBC,EAAoDC,EAAcC,GACpFC,MAAMH,EAAWC,EAAMC,GAHPE,KAAAC,aAAe,IAAIC,IAOpBF,KAAAG,eAAkBC,GAAmDJ,KAAKC,aAAaI,IAAID,GAE1FJ,KAAAM,iBAAmB,CAACC,EAAeC,IAElDA,EAAQC,MAAMC,UACLA,EAAiCH,QAAU,SAC/CG,EAAiCH,QAAUA,EAC5CI,MAAMC,QAASF,EAA4BF,SAC1CR,KAAKM,iBAAiBC,EAAQG,EAA4BF,SAC1D,UACCK,UAISb,KAAAc,sBAAwB,CAACC,EAAkBP,IACpDO,EAAOC,QAAQT,GAAUP,KAAKM,iBAAiBC,EAAOC,KAAaK,YAGxDb,KAAAiB,kBAAoB,CAACV,EAAgBW,EAAiCC,EAAuCf,KAC/H,GAAIA,IAAQ,SAAU,CACrBJ,KAAKoB,uBAAuBb,E,GAIbP,KAAAqB,mBAAqB,CAACC,EAAiBC,KACvD,MAAMf,EAAUe,EAAUC,IAAI,YAAcD,EAAUlB,IAAI,YAAcL,KAAKJ,UAAU6B,MAAMC,SAC7F,GAAIf,MAAMC,QAAQJ,IAAYA,EAAQmB,OAAS,EAAG,CACjD3B,KAAKC,aAAa2B,QAClBC,EAAiB7B,KAAKC,aAAcO,GACpC,MAAMD,EAAQgB,EAAUC,IAAI,UAAYD,EAAUlB,IAAI,UAAYL,KAAKJ,UAAU6B,MAAMH,OACvF,MAAMQ,EAAW9B,KAAKc,sBACrBH,MAAMC,QAAQL,IAAUA,EAAMoB,OAAS,EAAKpB,EAAqB,GACjEC,GAED,GAAIR,KAAKJ,UAAUmC,YAAc,OAASD,EAASH,SAAW,EAAG,CAChEJ,EAAUS,IAAI,SAAU,CAEtBxB,EAAQ,GAGPD,O,MAEG,GAAII,MAAMC,QAAQL,IAAUuB,EAASH,OAASpB,EAAMoB,OAAQ,CAClEJ,EAAUS,IAAI,SAAUF,E,IA9C1B9B,KAAKJ,UAAYA,C,CAmDX,eAAAqC,CAAgB1B,GACtB2B,EAA4BlC,KAAKJ,UAAWW,EAAO,CAClD4B,MAAO,CACNC,WAAYpC,KAAKiB,kBACjBoB,YAAarC,KAAKqB,qB,CAKd,gBAAAiB,CAAiB/B,GACvBgC,EAAavC,KAAKJ,UAAW,YAAaW,EAAO,CAChD4B,MAAO,CACNC,WAAYpC,KAAKiB,kBACjBoB,YAAarC,KAAKqB,qB,CAWd,gBAAAmB,CAAiBjC,GACvBgC,EAAavC,KAAKJ,UAAW,YAAaW,E,CAGpC,YAAAkC,CAAalC,GACnBkC,EAAazC,KAAKJ,UAAWW,E,CAGvB,aAAAmC,CAAcnC,GACpBoC,EAAqB3C,KAAKJ,UAAW,UAAU,IAAM,MAAMW,EAAOM,UAAW,CAC5EsB,MAAO,CACNC,WAAYpC,KAAKiB,kBACjBoB,YAAarC,KAAKqB,qB,CAKd,iBAAAuB,GACN7C,MAAM6C,oBACN5C,KAAKiC,gBAAgBjC,KAAKJ,UAAU8B,UACpC1B,KAAKsC,iBAAiBtC,KAAKJ,UAAUmC,WACrC/B,KAAKwC,iBAAiBxC,KAAKJ,UAAUiD,WACrC7C,KAAKyC,aAAazC,KAAKJ,UAAUkD,OACjC9C,KAAK0C,cAAc1C,KAAKJ,UAAU0B,O,EC9GpC,MAAMyB,EAAyCC,I,IAAAC,MAAEA,EAAKC,cAAEA,EAAapB,SAAEA,EAAQvB,MAAEA,EAAK4C,MAAEA,GAAKH,EAAKI,EAAKC,EAAAL,EAAxD,sDAC9C,IAAKE,EAAe,CACnBA,EAAgB,E,MACV,IAAKvC,MAAMC,QAAQsC,GAAgB,CACzCA,EAAgB,CAACA,E,CAGlB,OACCI,EAAA,SAAAC,OAAAC,OAAA,CAAQ1B,SAAUA,GAAYoB,EAAcO,SAASlD,GAAQA,MAAO0C,GAAS1C,GAAW6C,GACtFD,EACO,EAIX,MAAAO,EAAeX,ECVf,MAAMY,EAAgD,EAAGC,SAAQpD,UAASD,MAAO2C,EAAeW,cAAc,GAAIC,mBAAmB,OACpI,KAAKtD,IAAO,MAAPA,SAAO,SAAPA,EAASmB,QAAQ,CACrB,OAAO,I,CAGR,OACC2B,EAAAS,EAAA,KACEvD,EAAQwD,KAAI,CAACtD,EAAQuC,KACrB,MAAM7C,EAAM,CAACwD,EAAQ,IAAIX,KAASgB,KAAK,IAEvC,GAAI,YAAavD,EAAQ,CACxB,IAAKF,EAAQmB,OAAQ,CACpB,OAAO,I,CAGR,MAAMwB,MAAEA,GAAoBzC,EAAV0C,EAAKC,EAAK3C,EAAtB,WAEN,OACC4C,EAAA,WAAAC,OAAAC,OAAA,CAAUpD,IAAKA,GAAS0D,EAAgB,CAAEX,MAAOA,IAAK,MAALA,SAAK,SAALA,EAAOe,aACvDZ,EAACK,EAAkBJ,OAAAC,OAAA,CAACM,iBAAkBA,EAAkBD,YAAaA,EAAatD,MAAO2C,EAAeU,OAAQxD,GAASgD,I,CAK5H,GAAI,UAAW1C,EAAQ,CACtB,OAAO4C,EAACP,EAAcQ,OAAAC,OAAA,CAACpD,IAAKA,GAASyD,EAAW,CAAEZ,MAAO7C,EAAK8C,cAAeA,GAAmBxC,G,CAGjG,OAAO,IAAI,IAEV,EAIL,MAAAyD,EAAeR,ECvCf,MAAMS,EAAmCC,IACxC,MAAM7D,QAAEA,EAAOD,MAAEA,EAAKsD,YAAEA,EAAWC,iBAAEA,EAAgBQ,gBAAEA,EAAeC,UAAEA,EAASpB,MAAEA,GAAoBkB,EAAVjB,EAAKC,EAAKgB,EAAjG,4FAEN,MAAMG,EAAUjB,OAAAC,OAAAD,OAAAC,OAAA,GACZiB,EAAgB,CAAEH,kBAAiBC,YAAWpB,WAC9CC,GAGJ,OACCE,EAAA,SAAAC,OAAAC,OAAA,GAAYgB,GACXlB,EAACK,EAAkB,CAACnD,QAASA,EAASD,MAAOA,EAAOuD,iBAAkBA,EAAkBD,YAAaA,IAC7F,EAIX,MAAAa,EAAeN,ECff,SAASO,EAAelD,GACvB,MAAM6C,gBAAEA,GAAoBM,EAAgBnD,GAE5C,MAAM4C,EAAqB,CAC1BQ,GAAIpD,EAAMqD,IACVP,UAAW9C,EAAMsD,WACjB5B,MAAO1B,EAAMuD,OACbzE,MAAOkB,EAAMH,OACbd,QAASiB,EAAMC,SACfuD,UAAWxD,EAAMyD,WACjBC,SAAU1D,EAAM2D,UAChBvF,KAAM4B,EAAM4D,MACZf,gBAAiBA,EACjBgB,KAAM7D,EAAMqB,MACZyC,SAAU9D,EAAMM,UAChByD,SAAU/D,EAAMoB,WAGjB,OAAOwB,CACR,CAEA,MAAMoB,EAAmDzC,I,IAAAvB,MAAEA,GAAKuB,EAAKI,EAAKC,EAAAL,EAAjB,WACxD,OAAOM,EAACoB,EAAWnB,OAAAC,OAAA,GAAKmB,EAAelD,GAAY2B,GAAS,EAG7D,MAAAsC,EAAeD,ECnCf,MAAME,EAAkB,gyPACxB,MAAAC,EAAeD,E,MCwCFE,EAAS,MAUd,cAAMC,GACZ,OAAO9F,KAAKyB,MAAMH,M,CAKZ,cAAMyE,G,OACZ/C,EAAAhD,KAAKgG,aAAS,MAAAhD,SAAA,SAAAA,EAAEiD,O,CAGT,iBAAAC,GACP,MAAO,CACNzE,MAAOzB,KAAKyB,MACZ0E,MAAOC,EAAK,aAAc,SAAU,CACnC,YAAapG,KAAKyB,MAAM4E,YAEzBC,aAActG,KAAKuG,cACnBC,QAAS,SAAAxD,EAAM,OAAAA,EAAAhD,KAAKgG,aAAS,MAAAhD,SAAA,SAAAA,EAAEiD,OAAO,EACtCQ,MAAOzG,KAAK0G,c,CAIN,cAAA/B,GACP,OAAApB,OAAAC,OAAAD,OAAAC,OAAA,CACCmD,IAAK3G,KAAK4G,SACVnF,MAAOzB,KAAKyB,OACTzB,KAAK6G,WAAWC,UAAQ,CAC3BC,QAAS/G,KAAK+G,QAAQC,KAAKhH,MAC3BiH,SAAUjH,KAAKiH,SAASD,KAAKhH,MAC7BkH,QAAUC,IACTnH,KAAK6G,WAAWC,SAASI,QAAQC,GACjCnH,KAAKoH,cAAgB,IAAI,EAE1BC,OAASF,IACRnH,KAAK6G,WAAWC,SAASO,OAAOF,GAChCnH,KAAKoH,cAAgB,KAAK,G,CAKtB,MAAAE,GACN,OACChE,EAACiE,EAA0BhE,OAAAC,OAAA,CAAApD,IAAA,4CAAKJ,KAAKkG,qBACpC5C,EAACkE,EAAmB,CAAApH,IAAA,2CAACqB,MAAOzB,KAAKyB,OAEhC6B,EAAA,QAAAlD,IAAA,2CACC+F,MAAM,aACNsB,SAAWN,IACVA,EAAMO,iBACNC,EAA2B,CAC1BC,KAAM5H,KAAKF,KACX6G,IAAK3G,KAAKgG,WACT,GAGH1C,EAAA,SAAAlD,IAAA,2CAAOyH,KAAK,SAASC,OAAM,OAC3BxE,EAACoC,EAAuBnC,OAAAC,OAAA,CAAApD,IAAA,4CAAKJ,KAAK2E,qB,CAsIvC,WAAAhF,CAAAoI,G,UApMiB/H,KAAA4G,SAAYD,IAC5B3G,KAAKgG,UAAYW,CAAG,E,yCA+EgB,M,gBAMiC,M,gBAOhC,M,WAKN,G,kGA0BK,M,+EAqBA,M,8HA0BiB,M,cAMc,M,iCAO9B,CACrCN,UAAW,MACX2B,WAAY,MACZlD,IAAK,MAAMmD,MACXjD,OAAQ,GACRjD,UAAW,MACXL,SAAU,GACVJ,OAAQ,I,mBAGwB,MAGhCtB,KAAK6G,WAAa,IAAIpH,EAAiBO,KAAM,SAAUA,KAAKF,K,CAGrD,WAAA4G,GACP,OAAOwB,QAAQlI,KAAKyB,MAAM0G,YAAcnI,KAAKoH,a,CAIvC,iBAAAgB,CAAkB7H,GACxBP,KAAK6G,WAAWuB,kBAAkB7H,E,CAI5B,gBAAA8H,CAAiB9H,GACvBP,KAAK6G,WAAWwB,iBAAiB9H,E,CAI3B,iBAAA+H,CAAkB/H,GACxBP,KAAK6G,WAAWyB,kBAAkB/H,E,CAI5B,iBAAAgI,CAAkBhI,GACxBP,KAAK6G,WAAW0B,kBAAkBhI,E,CAI5B,YAAAiI,CAAajI,GACnBP,KAAK6G,WAAW2B,aAAajI,E,CAIvB,aAAAkI,CAAclI,GACpBP,KAAK6G,WAAW4B,cAAclI,E,CAIxB,UAAAmI,CAAWnI,GACjBP,KAAK6G,WAAW6B,WAAWnI,E,CAIrB,aAAAoI,CAAcpI,GACpBP,KAAK6G,WAAW8B,cAAcpI,E,CAIxB,WAAAqI,CAAYrI,GAClBP,KAAK6G,WAAW+B,YAAYrI,E,CAItB,gBAAA+B,CAAiB/B,GACvBP,KAAK6G,WAAWvE,iBAAiB/B,E,CAI3B,YAAAsI,CAAatI,GACnBP,KAAK6G,WAAWgC,aAAatI,E,CAIvB,UAAAuI,CAAWvI,GACjBP,KAAK6G,WAAWiC,WAAWvI,E,CAIrB,eAAA0B,CAAgB1B,GACtBP,KAAK6G,WAAW5E,gBAAgB1B,E,CAI1B,gBAAAiC,CAAiBjC,GACvBP,KAAK6G,WAAWrE,iBAAiBjC,E,CAI3B,YAAAkC,CAAalC,GACnBP,KAAK6G,WAAWpE,aAAalC,E,CAIvB,gBAAAwI,CAAiBxI,GACvBP,KAAK6G,WAAWkC,iBAAiBxI,E,CAI3B,2BAAAyI,CAA4BzI,GAClCP,KAAK6G,WAAWmC,4BAA4BzI,E,CAItC,gBAAA0I,CAAiB1I,GACvBP,KAAK6G,WAAWoC,iBAAiB1I,E,CAI3B,eAAA2I,CAAgB3I,GACtBP,KAAK6G,WAAWqC,gBAAgB3I,E,CAI1B,aAAAmC,CAAcnC,GACpBP,KAAK6G,WAAWnE,cAAcnC,E,CAGxB,iBAAAqC,GACN5C,KAAKmI,SAAWnI,KAAKmI,WAAa,KAClCnI,KAAK6G,WAAWjE,oBAEhB5C,KAAKyB,MAAM4E,YAAcrG,KAAKyB,MAAMH,OACpCtB,KAAK6G,WAAWsC,wBAAwBC,GAAOpJ,KAAKyB,MAAM4E,YAAc+C,G,CAGjE,OAAArC,CAAQI,G,MACfnH,KAAKsB,OAASX,MAAM0I,OAAKrG,EAAAhD,KAAKgG,aAAS,MAAAhD,SAAA,SAAAA,EAAExC,UAAW,IAClDQ,QAAQN,GAAWA,EAAOoB,WAAa,OACvCkC,KAAKtD,IAAM,IAAAsC,EAAK,OAAAA,EAAAhD,KAAK6G,WAAW1G,eAAeO,EAAOH,UAAM,MAAAyC,SAAA,SAAAA,EAAEzC,KAAe,IAE/EP,KAAK6G,WAAWC,SAASC,QAAQI,EAAO,KAAMnH,KAAKsB,O,CAG5C,QAAA2F,CAASE,GAChBnH,KAAK6G,WAAWC,SAASG,SAASE,EAAOnH,KAAKsB,O","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,F as e,H as i,r as n,g as s}from"./index-336d0fea.js";import{n as o}from"./dev.utils-945026e6.js";import{s as a,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-e20e2d63.js";import{f as h,b as d}from"./controller-506a6c81.js";import{b as c,i as u}from"./prop.validators-c5e6ad2d.js";import{i as p,d as f}from"./component-names-aa3cbc3c.js";import{g as b}from"./controller-64301c42.js";import{t as m}from"./i18n-5fe08f1c.js";import{c as v}from"./clsx-09a06a12.js";import{I as y}from"./InternalUnderlinedBadgeText-9ed66543.js";import{s as g,b as k}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./icons-f3b7aabd.js";import"./common-54bf85ba.js";import"./label-d70e7c34.js";import"./index-541b643a.js";import"./associated.controller-bce3d721.js";import"./access-and-short-key-864aafba.js";import"./tooltip-align-c001aae2.js";import"./align-3f029493.js";import"./hide-label-db0db59c.js";import"./i18n-7ea9f137.js";class _ extends r{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.afterPatchOptions=(t,e,i,n)=>{"_value"===n&&this.setFormAssociatedValue(t)},this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),h(this.keyOptionMap,i))},this.component=t}validateOptions(t){d(this.component,t,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(t){c(this.component,"_required",t)}validateValue(t){u(this.component,"_value",t)}validatePlaceholder(t){u(this.component,"_placeholder",t)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const w="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .kol-span__label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .single-select__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n}",x=w,z=class{async getValue(){return this.state._value}async kolFocus(){var t;null===(t=this.refInput)||void 0===t||t.focus()}onBlur(){var t;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((t=>t.label===this._inputValue))&&(this._inputValue=null===(t=this.state._options.find((t=>t.value===this.state._value)))||void 0===t?void 0:t.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this.state._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value))}selectOption(t,e){this.state._value=e.value,this._inputValue=e.label,this.controller.onFacade.onChange(t,e.value),this.controller.onFacade.onInput(t,!1,e.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this.state._value)}onInput(t){const e=t.target;this._inputValue=e.value,this._isOpen=!0,this.setFilteredOptionsByQuery(e.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(t){1===t.key.length&&/[a-z0-9]/i.test(t.key)&&(t.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(t.key))}setFilteredOptionsByQuery(t){""===(null==t?void 0:t.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&t.length>0&&(this._filteredOptions=this.state._options.filter((e=>{var i,n;return null===(n=null===(i=e.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==t?void 0:t.toLowerCase())})))}moveFocus(t){if(!this._filteredOptions)return;let e=this._focusedOptionIndex+t;e>=this._filteredOptions.length&&(e=0),e<0&&(e=this._filteredOptions.length-1),this._focusedOptionIndex=e,this.focusOption(this._focusedOptionIndex)}focusOption(t){if(this.refOptions){const e=this.refOptions[t];null==e||e.focus()}}focusSuggestionStartingWith(t){const e=t.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((t=>t.label.toLowerCase().startsWith(e)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const n=g(this.state._label),{ariaDescribedBy:s}=b(this.state);return t(i,{key:"b2c5f92bc15264d4fb4c26a94709b834c07ca543",class:"kol-single-select"},t("div",{key:"7ae8e12b0eb4d304124f4ce495ed083fe4896d75",class:`single-select ${!0===this.state._disabled?"disabled":""} `},t(p,{key:"5f2bc79008648e94e9834b96713cb2e993fc0be1",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},t("span",{key:"bc4269a76c3c922dcb7a3f99109e57c0cb4816e0",slot:"label"},n?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(y,{badgeText:k(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},k(this.state._accessKey||this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"f7c4ee29ce52700a702a3bb9c0cd03841cc005cb",slot:"input"},t("div",{key:"edfd9ee5c36a4ce899d0a019d509259293d0cea5",class:"single-select__group"},t("input",Object.assign({key:"ca285b21c58e4bf7f7a61757c0e2f1e734e1f71e",ref:this.catchRef,class:"single-select__input",type:"text","aria-autocomplete":"both","aria-controls":"listbox",value:this._inputValue,accessKey:this.state._accessKey,"aria-describedby":s.length>0?s.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,name:this.state._name,required:this.state._required},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.toggleListbox.bind(this),onFocus:t=>{this.controller.onFacade.onFocus(t),this.inputHasFocus=!0},onBlur:t=>{this.controller.onFacade.onBlur(t),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&t(f,{key:"7f3fa7ff84364adb2b65f8478b3497684f26d15e",_icons:"codicon codicon-close",_label:m("kol-delete-selection"),onClick:()=>{var t;this.clearSelection(),null===(t=this.refInput)||void 0===t||t.focus()},class:"single-select__delete"}),t("button",{key:"aabce42fe73b9855f941ef2b504828259074e150",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(f,{key:"5c41faf3821709e45fffa9154939bf26e3199dc7",_icons:"codicon codicon-triangle-down",_label:m("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"efeddbf75793c64a7471fe90cf64ccc3a41d2465",role:"listbox",class:v("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,i)=>t("li",{id:`option-${i}`,key:`-${i}`,ref:t=>{t&&(this.refOptions[i]=t)},tabIndex:-1,role:"option","aria-selected":this.state._value===e.value?"true":void 0,onClick:t=>{var i;this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:t=>{var i;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}},t("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:e.value,checked:this.state._value===e.value||i===this._focusedOptionIndex}),t("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},e.label)))):t("li",{class:"single-select__no-results-message"},m("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout((()=>{var t;(null===(t=this.host)||void 0===t?void 0:t.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(t){var e,i;const n=(e,i)=>{var n;t.preventDefault(),void 0!==e&&(this._isOpen=e,e||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(t.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(t,this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(t);break;case"NumpadEnter":case"Enter":this.toggleListbox(t);break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(t){n(this,t),this.refOptions=[],this.catchRef=t=>{this.refInput=t},this.toggleListbox=t=>{var e;if(null==t||t.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(e=this.refInput)||void 0===e||e.focus();const t=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((t=>t.label===this._inputValue)):-1;this._focusedOptionIndex=t>=0?t:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${o()}`,_label:"",_options:[],_value:""},this.inputHasFocus=!1,this.controller=new _(this,"single-select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validatePlaceholder(t){this.controller.validatePlaceholder(t)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateMsg(t){this.controller.validateMsg(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateOptions(t){this.controller.validateOptions(t),this._filteredOptions=t,this.updateInputValue(this._value)}validateRequired(t){this.controller.validateRequired(t)}validateShortKey(t){this.controller.validateShortKey(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t),this.oldValue=t,this.updateInputValue(t)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(t){if(Array.isArray(this._options)){const e=this._options.find((e=>e.value===t));this._inputValue=e?e.label:""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this._options,this.updateInputValue(this._value)}onChange(t){var e,i,n,s;this.oldValue!==(null===(e=this.refInput)||void 0===e?void 0:e.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),a(t),l("change",this.host,this._value),"function"!=typeof(null===(n=this.state._on)||void 0===n?void 0:n.onChange)||this._isOpen||this.state._on.onChange(t,this._value&&this.oldValue!==(null===(s=this.refInput)||void 0===s?void 0:s.value))}static get delegatesFocus(){return!0}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};z.style={default:x};export{z as kol_single_select};
+import{h as t,F as e,H as i,r as n,g as s}from"./index-8a5f476c.js";import{n as o}from"./dev.utils-47d07d5b.js";import{I as a}from"./controller-icon-ebd41784.js";import{f as l,b as r}from"./controller-4af5f563.js";import{b as h,i as d}from"./prop.validators-9feb1d92.js";import{q as c,d as u}from"./component-names-50e16b86.js";import{g as p}from"./controller-654e5ee7.js";import{t as f}from"./i18n-5fe08f1c.js";import{c as b}from"./clsx-09a06a12.js";import{I as m}from"./InternalUnderlinedBadgeText-f618013b.js";import{s as v,b as y}from"./reuse-32931294.js";import"./dev.utils-fab45cbc.js";import"./controller-cc41fe9f.js";import"./events-5adf6b62.js";import"./associated.controller-52d302aa.js";import"./access-and-short-key-9cca88b8.js";import"./tooltip-align-8e0fa436.js";import"./align-4719d626.js";import"./hide-label-429a15ea.js";import"./msg-93978a32.js";import"./common-54bf85ba.js";import"./label-d0315384.js";import"./icons-199f1746.js";import"./index-da3e0c00.js";import"./i18n-7ea9f137.js";class g extends a{constructor(e,t,i){super(e,t,i),this.keyOptionMap=new Map,this.afterPatchOptions=(e,t,i,n)=>{"_value"===n&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const i=t.has("_options")?t.get("_options"):this.component.state._options;Array.isArray(i)&&i.length>0&&(this.keyOptionMap.clear(),l(this.keyOptionMap,i))},this.component=e}validateOptions(e){r(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){h(this.component,"_required",e)}validateValue(e){d(this.component,"_value",e)}validatePlaceholder(e){d(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const k="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .kol-span__label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select {\n    position: relative;\n  }\n  .single-select.disabled, .single-select.disabled * {\n    cursor: not-allowed !important;\n  }\n  .single-select__group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .single-select__input {\n    flex-grow: 1;\n  }\n  .single-select__button {\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\n  }\n  .single-select__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n  .single-select__item.highlighted {\n    background-color: #f0f0f0;\n  }\n  .single-select__listbox--cursor-hidden .single-select__item {\n    cursor: none !important;\n  }\n  .single-select__no-results-message {\n    cursor: default;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: calc(50rem / var(--kolibri-root-font-size, 16));\n  }\n}",_=k,w=class{async getValue(){return this._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}onBlur(){var e;Array.isArray(this.state._options)&&this.state._options.length>0&&!this.state._options.some((e=>e.label===this._inputValue))&&(this._inputValue=null===(e=this.state._options.find((e=>e.value===this._value)))||void 0===e?void 0:e.label,this._filteredOptions=[...this.state._options]),this._isOpen=!1}clearSelection(){this.state._disabled||(this._focusedOptionIndex=-1,this._value="",this._inputValue="",this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value))}selectOption(e,t){this._value=t.value,this._inputValue=t.label,this.controller.onFacade.onChange(e,t.value),this.controller.onFacade.onInput(e,!1,t.value),this._filteredOptions=[...this.state._options],this.controller.setFormAssociatedValue(this._value)}onInput(e){const t=e.target;this._inputValue=t.value,this._isOpen=!0,this.setFilteredOptionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(e.preventDefault(),this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredOptionsByQuery(e){""===(null==e?void 0:e.trim())?this._filteredOptions=[...this.state._options]:Array.isArray(this.state._options)&&this.state._options.length>0&&e.length>0&&(this._filteredOptions=this.state._options.filter((t=>{var i,n;return null===(n=null===(i=t.label)||void 0===i?void 0:i.toLowerCase())||void 0===n?void 0:n.includes(null==e?void 0:e.toLowerCase())})))}moveFocus(e){if(!this._filteredOptions)return;let t=this._focusedOptionIndex+e;t>=this._filteredOptions.length&&(t=0),t<0&&(t=this._filteredOptions.length-1),this._focusedOptionIndex=t,this.focusOption(this._focusedOptionIndex)}focusOption(e){if(this.refOptions){const t=this.refOptions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),i=Array.isArray(this._filteredOptions)&&this._filteredOptions.findIndex((e=>e.label.toLowerCase().startsWith(t)));"number"==typeof i&&(this._focusedOptionIndex=i,this.focusOption(i))}render(){const n=v(this.state._label),{ariaDescribedBy:s}=p(this.state);return t(i,{key:"e8e74f25713505d97fc43c01b86142d3426471d3",class:"kol-single-select"},t("div",{key:"bf78da02ce13114f62adab75d9ee906bc5560ebe",class:`single-select ${!0===this.state._disabled?"disabled":""} `},t(c,{key:"c200c191a7c9efcad49cd38538394749cdc758ed",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},t("span",{key:"8a759850f42082cfe288769ff9bd405d0d9f9398",slot:"label"},n?t("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?t(e,null,t(m,{badgeText:y(this.state._accessKey||this.state._shortKey),label:this.state._label})," ",t("span",{class:"access-key-hint","aria-hidden":"true"},y(this.state._accessKey||this.state._shortKey))):t("span",null,this.state._label)),t("div",{key:"dadc5392610660ba671c7788b42b5ddda3b07b24",slot:"input"},t("div",{key:"f9fc32efdd2d178f4660b1749e1c60b426f066f4",class:"single-select__group"},t("input",Object.assign({key:"2e3cf3cfece8b69dd6e8e054338c22476634923d",ref:this.catchRef,class:"single-select__input",type:"text","aria-autocomplete":"both","aria-controls":"listbox",value:this._inputValue,accessKey:this.state._accessKey,"aria-describedby":s.length>0?s.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,name:this.state._name,required:this.state._required},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onClick:this.onClick.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},placeholder:this.state._placeholder})),this._inputValue&&t(u,{key:"0c58593caa96d931db99dece10e3612616e27c91",_icons:"codicon codicon-close",_label:f("kol-delete-selection"),onClick:()=>{var e;this.clearSelection(),null===(e=this.refInput)||void 0===e||e.focus()},class:"single-select__delete"}),t("button",{key:"1f86b3bf58584b704d5e2b8ef2bbf32643407b33",tabindex:"-1",class:"single-select__button",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},t(u,{key:"5b5f7c4bd76f8e6bf133bd56fb42cf0636a363d8",_icons:"codicon codicon-triangle-down",_label:f("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&t("ul",{key:"f7790534dcb88a13dd56e2f054ff13f650fa0317",role:"listbox",class:b("single-select__listbox",this.blockSuggestionMouseOver&&"single-select__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0?this._filteredOptions.map(((e,i)=>t("li",{id:`option-${i}`,key:`-${i}`,ref:e=>{e&&(this.refOptions[i]=e)},tabIndex:-1,role:"option","aria-selected":this._value===e.value?"true":void 0,onClick:t=>{var i;this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t)},onMouseOver:()=>{this.blockSuggestionMouseOver||(this._focusedOptionIndex=i,this.focusOption(i))},onFocus:()=>{this._focusedOptionIndex=i,this.focusOption(i)},class:"single-select__item",onKeyDown:t=>{var i;"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),null===(i=this.refInput)||void 0===i||i.focus(),this.toggleListbox(t),t.preventDefault())}},t("input",{class:"visually-hidden",type:"radio",name:"options",id:`option-radio-${i}`,value:e.value,checked:this._value===e.value||i===this._focusedOptionIndex}),t("label",{htmlFor:`option-radio-${i}`,class:"radio-label"},e.label)))):t("li",{class:"single-select__no-results-message"},f("kol-no-results-message")," "))))))}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}handleKeyDown(e){var t,i;const n=(t,i)=>{var n;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(n=this.refInput)||void 0===n||n.focus()),null==i||i()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,n(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":n(!1);break;case" ":this._isOpen?Array.isArray(this._filteredOptions)&&this._filteredOptions.length>0&&(this.selectOption(e,this._filteredOptions[this._focusedOptionIndex]),null===(i=this.refInput)||void 0===i||i.focus(),n(!1)):this.toggleListbox(e);break;case"NumpadEnter":case"Enter":this.toggleListbox(e);break;case"Home":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=0,this.focusOption(this._focusedOptionIndex))}));break;case"End":this.blockSuggestionMouseOver=!0,n(void 0,(()=>{this._isOpen&&(this._focusedOptionIndex=this._filteredOptions?this._filteredOptions.length-1:0,this.focusOption(this._focusedOptionIndex))}));break;case"PageUp":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,n(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}constructor(e){n(this,e),this.refOptions=[],this.catchRef=e=>{this.refInput=e},this.toggleListbox=e=>{var t;if(null==e||e.preventDefault(),!this.state._disabled&&(this._isOpen=!this._isOpen,this._isOpen)){null===(t=this.refInput)||void 0===t||t.focus();const e=Array.isArray(this._filteredOptions)?this._filteredOptions.findIndex((e=>e.label===this._inputValue)):-1;this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this._focusedOptionIndex=-1,this._isOpen=!1,this._filteredOptions=[],this._inputValue="",this.blockSuggestionMouseOver=!1,this._accessKey=void 0,this._placeholder=void 0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hideError:!1,_id:`id-${o()}`,_label:"",_options:[]},this.inputHasFocus=!1,this.controller=new g(this,"single-select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e),this._filteredOptions=e,this.updateInputValue(this._value)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(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),this.oldValue=e,this.updateInputValue(e)}handleMouseEvent(){this.blockSuggestionMouseOver=!1}updateInputValue(e){if(Array.isArray(this._options)){const t=this._options.find((t=>t.value===e));this._inputValue=t?t.label:""}}componentWillLoad(){this.refOptions=[],this._touched=!0===this._touched,this.controller.componentWillLoad(),this.oldValue=this._value,this._filteredOptions=this.state._options,this.updateInputValue(this._value)}onChange(e){var t,i;this.oldValue!==(null===(t=this.refInput)||void 0===t?void 0:t.value)&&(this.oldValue=null===(i=this.refInput)||void 0===i?void 0:i.value),this._isOpen||this.controller.onFacade.onChange(e,this._value)}onClick(e){this.toggleListbox(e),this.controller.onFacade.onClick(e)}static get delegatesFocus(){return!0}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};w.style={default:_};export{w as kol_single_select};