@public-ui/components 1.7.6-rc.1 → 1.7.6

package/dist/kolibri/kol-popover-wc.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["styleCss","KolPopover","this","alignPopover","callBack","setTimeout","processEnv","triggerElement","popoverElement","trigger","popoverEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_align","then","x","y","middlewareData","setPosition","showPopover","addListenersToBody","Object","assign","_visible","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","previousElementSibling","catchPopoverElement","catchArrowElement","_show","oldPos","left","style","top","inset","translate","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","hidden","show","validateAlign","value","validateShow","componentWillLoad"],"sources":["src/components/popover/style.css?tag=kol-popover-wc","src/components/popover/component.tsx"],"sourcesContent":["@import url(../style.css);\nkol-popover {\n\theight: 0;\n\tposition: absolute;\n}\nkol-popover .popover {\n\tbackground-color: #fff;\n\tmin-height: max-content;\n\tmin-width: max-content;\n\topacity: 0;\n\tposition: absolute;\n}\nkol-popover .hidden {\n\tdisplay: none;\n}\nkol-popover .show {\n\tanimation: 0.3s ease-in forwards fadeInOpacity;\n}\nkol-popover .disappear {\n\tanimation: 0.3s ease-in backwards fadeInOpacity;\n}\nkol-popover .arrow {\n\tbackground-color: inherit;\n\theight: var(--font-size);\n\tposition: absolute;\n\trotate: 0.125turn;\n\twidth: var(--font-size);\n\tz-index: -1;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { arrow, computePosition, flip, MiddlewareData, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { API, States } from './types';\n\n/**\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\t/* Popover functions */\n\tprivate alignPopover = (callBack?: () => unknown): void => {\n\t\tsetTimeout(() => {\n\t\t\tif (processEnv !== 'test' && this.triggerElement && this.popoverElement) {\n\t\t\t\tconst trigger = this.triggerElement;\n\t\t\t\tconst popoverEl = this.popoverElement;\n\t\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t\t}\n\n\t\t\t\tvoid computePosition(trigger, popoverEl, {\n\t\t\t\t\tplacement: this.state._align,\n\t\t\t\t\tmiddleware: middleware,\n\t\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\t\tthis.setPosition(x, y, middlewareData, placement, callBack);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t};\n\tprivate setPosition(x: number, y: number, middlewareData: MiddlewareData, placement: Placement, callBack?: () => unknown) {\n\t\tif (this.popoverElement) {\n\t\t\tconst oldPos = {\n\t\t\t\tleft: this.popoverElement.style.left,\n\t\t\t\ttop: this.popoverElement.style.top,\n\t\t\t};\n\t\t\tObject.assign(this.popoverElement.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\n\t\t\tif (this.arrowElement && middlewareData.arrow) {\n\t\t\t\tswitch (placement) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 -50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '-50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {\n\t\t\t\tthis.alignPopover(callBack);\n\t\t\t} else if (typeof callBack === 'function') {\n\t\t\t\tcallBack();\n\t\t\t}\n\t\t}\n\t}\n\tprivate showPopover = (): void => {\n\t\tthis.addListenersToBody();\n\n\t\tthis.alignPopover(() => {\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t});\n\t};\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener('scroll', this.showPopover, { passive: true });\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', this.showPopover);\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._show, show: this.state._visible }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._align}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["styleCss","KolPopover","this","alignPopover","callBack","setTimeout","processEnv","triggerElement","popoverElement","trigger","popoverEl","arrowEl","arrowElement","middleware","offset","_a","offsetHeight","flip","shift","push","arrow","element","computePosition","placement","state","_align","then","x","y","middlewareData","setPosition","showPopover","addListenersToBody","Object","assign","_visible","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","previousElementSibling","catchPopoverElement","catchArrowElement","_show","oldPos","left","style","top","inset","translate","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","hidden","show","validateAlign","value","validateShow","componentWillLoad"],"sources":["src/components/popover/style.css?tag=kol-popover-wc","src/components/popover/component.tsx"],"sourcesContent":["@import url(../style.css);\nkol-popover {\n\theight: 0;\n\tposition: absolute;\n}\nkol-popover .popover {\n\tbackground-color: #fff;\n\tmin-height: max-content;\n\tmin-width: max-content;\n\topacity: 0;\n\tposition: absolute;\n}\nkol-popover .hidden {\n\tdisplay: none;\n}\nkol-popover .show {\n\tanimation: 0.3s ease-in forwards fadeInOpacity;\n}\nkol-popover .disappear {\n\tanimation: 0.3s ease-in backwards fadeInOpacity;\n}\nkol-popover .arrow {\n\tbackground-color: inherit;\n\theight: var(--font-size);\n\tposition: absolute;\n\trotate: 0.125turn;\n\twidth: var(--font-size);\n\tz-index: -1;\n}\n@keyframes fadeInOpacity {\n\t0% {\n\t\topacity: 0;\n\t}\n\t100% {\n\t\topacity: 1;\n\t}\n}\n","import { arrow, computePosition, flip, MiddlewareData, offset, Placement, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { AlignPropType, validateAlign } from '../../types/props/align';\nimport { ShowPropType, validateShow } from '../../types/props/show';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { API, States } from './types';\n\n/**\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolPopover implements API {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\t/* Popover functions */\n\tprivate alignPopover = (callBack?: () => unknown): void => {\n\t\tsetTimeout(() => {\n\t\t\tif (processEnv !== 'test' && this.triggerElement && this.popoverElement) {\n\t\t\t\tconst trigger = this.triggerElement;\n\t\t\t\tconst popoverEl = this.popoverElement;\n\t\t\t\tconst arrowEl = this.arrowElement;\n\n\t\t\t\tconst middleware = [offset(arrowEl?.offsetHeight ?? 10), flip(), shift()];\n\t\t\t\tif (arrowEl) {\n\t\t\t\t\tmiddleware.push(arrow({ element: arrowEl }));\n\t\t\t\t}\n\n\t\t\t\tvoid computePosition(trigger, popoverEl, {\n\t\t\t\t\tplacement: this.state._align,\n\t\t\t\t\tmiddleware: middleware,\n\t\t\t\t}).then(({ x, y, middlewareData, placement }) => {\n\t\t\t\t\tthis.setPosition(x, y, middlewareData, placement, callBack);\n\t\t\t\t});\n\t\t\t}\n\t\t});\n\t};\n\tprivate setPosition(x: number, y: number, middlewareData: MiddlewareData, placement: Placement, callBack?: () => unknown) {\n\t\tif (this.popoverElement) {\n\t\t\tconst oldPos = {\n\t\t\t\tleft: this.popoverElement.style.left,\n\t\t\t\ttop: this.popoverElement.style.top,\n\t\t\t};\n\t\t\tObject.assign(this.popoverElement.style, {\n\t\t\t\tleft: `${x}px`,\n\t\t\t\ttop: `${y}px`,\n\t\t\t});\n\n\t\t\tif (this.arrowElement && middlewareData.arrow) {\n\t\t\t\tswitch (placement) {\n\t\t\t\t\tcase 'top':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `100% auto auto ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 -50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'right':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px 100% auto auto`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'bottom':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `auto auto 100% ${middlewareData.arrow.x || 0}px`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '0 50%';\n\t\t\t\t\t\tbreak;\n\t\t\t\t\tcase 'left':\n\t\t\t\t\t\tthis.arrowElement.style.inset = `${middlewareData.arrow.y || 0}px auto auto 100%`;\n\t\t\t\t\t\tthis.arrowElement.style.translate = '-50% 0';\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (oldPos.left !== this.popoverElement.style.left || oldPos.top !== this.popoverElement.style.top) {\n\t\t\t\tthis.alignPopover(callBack);\n\t\t\t} else if (typeof callBack === 'function') {\n\t\t\t\tcallBack();\n\t\t\t}\n\t\t}\n\t}\n\tprivate showPopover = (): void => {\n\t\tthis.addListenersToBody();\n\n\t\tthis.alignPopover(() => {\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t});\n\t};\n\tprivate hidePopover(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener('scroll', this.showPopover, { passive: true });\n\t}\n\tprivate removeListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.removeEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.removeEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.removeEventListener('scroll', this.showPopover);\n\t}\n\n\t/* catchElement functions */\n\tprivate catchHostAndTriggerElement = (element: HTMLElement | null): void => {\n\t\tif (element) {\n\t\t\tthis.host = element;\n\t\t\tthis.triggerElement = element.previousElementSibling as HTMLElement | null;\n\t\t}\n\t};\n\tprivate catchPopoverElement = (element?: HTMLDivElement): void => {\n\t\tthis.popoverElement = element;\n\t};\n\tprivate catchArrowElement = (element?: HTMLDivElement): void => {\n\t\tthis.arrowElement = element;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host ref={this.catchHostAndTriggerElement}>\n\t\t\t\t<div class={{ popover: true, hidden: !this.state._show, show: this.state._visible }} ref={this.catchPopoverElement}>\n\t\t\t\t\t<div class={`arrow ${this.state._align}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: States = {\n\t\t_align: 'top',\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) this.showPopover();\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateShow(this._show);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as r}from"./index-0bc40dc4.js";import{v as i}from"./label-ad3a9360.js";import{e as a,d as s,w as l}from"./prop.validators-97a80d4e.js";import"./a11y.tipps-7098b947.js";import"./dev.utils-46002186.js";import"./reuse-b3566e4c.js";import"./index-d56bfd0f.js";var o;!function(e){e.bar="bar",e.cycle="cycle",e["cycle-value-label"]="cycle-value-label",e["cycle-label-value"]="cycle-label-value"}(o||(o={}));const n=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.bar .border{fill:transparent;stroke:black}.bar .background{fill:lightgray;stroke:white}.bar .progress{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}.cycle .background{fill:transparent;stroke:lightgray}.cycle .border{fill:transparent;stroke:black}.cycle .whitespace{fill:transparent;stroke:white}.cycle .progress{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}",c=Object.keys(o),d=t=>{let a="43%",r=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(a="57%",r="43%");case"cycle":case"cycle-label-value":return e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),e("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&e("text",{"aria-hidden":"true",x:"50%",y:a,"text-anchor":"middle",fill:"currentColor"},t._label),e("text",{"aria-hidden":"true",x:"50%",y:r,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return e("div",{class:"bar"},t._label&&e("div",null,t._label),e("div",{style:{display:"flex",gap:"0.3em"}},e("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},e("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),e("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),e("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),e("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},h=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return e(r,null,d(this.state),e("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){i(this,e)}validateMax(e){"number"!=typeof e&&(e=100),a(this,"_max",e,{required:!0})}validateType(e){this.validateVariant(e)}validateUnit(e){s(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),a(this,"_value",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&c.includes(e)),new Set(c),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};h.style={default:n};export{h as kol_progress};
+import{r as t,h as e,H as r}from"./index-e9d20d00.js";import{v as i}from"./label-485bdf3e.js";import{e as a,d as s,w as l}from"./prop.validators-8dc620b0.js";import"./a11y.tipps-42463a61.js";import"./dev.utils-808b02af.js";import"./reuse-d79ab469.js";import"./index-d56bfd0f.js";var o;!function(e){e.bar="bar",e.cycle="cycle",e["cycle-value-label"]="cycle-value-label",e["cycle-label-value"]="cycle-label-value"}(o||(o={}));const n=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.bar .border{fill:transparent;stroke:black}.bar .background{fill:lightgray;stroke:white}.bar .progress{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}.cycle .background{fill:transparent;stroke:lightgray}.cycle .border{fill:transparent;stroke:black}.cycle .whitespace{fill:transparent;stroke:white}.cycle .progress{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}",c=Object.keys(o),d=t=>{let a="43%",r=t._label?"57%":"50%";switch(t._variant){case"cycle-value-label":t._label&&(a="57%",r="43%");case"cycle":case"cycle-label-value":return e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),e("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&e("text",{"aria-hidden":"true",x:"50%",y:a,"text-anchor":"middle",fill:"currentColor"},t._label),e("text",{"aria-hidden":"true",x:"50%",y:r,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit));default:return e("div",{class:"bar"},t._label&&e("div",null,t._label),e("div",{style:{display:"flex",gap:"0.3em"}},e("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},e("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),e("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:t._value/t._max*95}),e("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),e("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit)))}},h=class{constructor(e){t(this,e),this._label=void 0,this._max=void 0,this._type=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return e(r,null,d(this.state),e("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){i(this,e)}validateMax(e){"number"!=typeof e&&(e=100),a(this,"_max",e,{required:!0})}validateType(e){this.validateVariant(e)}validateUnit(e){s(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),a(this,"_value",e,{required:!0})}validateVariant(e){l(this,"_variant",(e=>"string"==typeof e&&c.includes(e)),new Set(c),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant||this._type),this.interval=setInterval((()=>{this.state._liveValue!==this.state._value&&(this.state=Object.assign(Object.assign({},this.state),{_liveValue:this.state._value}))}),5e3)}disconnectedCallback(){clearInterval(this.interval)}static get watchers(){return{_label:["validateLabel"],_max:["validateMax"],_type:["validateType"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};h.style={default:n};export{h as kol_progress};

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

@@ -1 +1 @@
-{"version":3,"names":["KoliBriProgressVariantEnum","defaultStyleCss","VALID_VARIANTS","Object","keys","createProgressSVG","state","fullCircle","textPositionTop","textPositionBottom","labelY","valueY","_label","_variant","h","class","width","viewBox","xmlns","cx","cy","r","fill","stroke","Math","round","_value","_max","x","y","_unit","style","display","gap","height","rx","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","validateMax","watchNumber","required","validateType","validateVariant","validateUnit","watchString","validateValue","watchValidator","includes","Set","componentWillLoad","_type","interval","setInterval","assign","disconnectedCallback","clearInterval"],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.bar .background {\n\tfill: lightgray;\n\tstroke: white;\n}\n.bar .progress {\n\tfill: #0075ff;\n\tstroke: transparent;\n\ttransition: 250ms ease-in-out 50ms;\n}\n.cycle .background {\n\tfill: transparent;\n\tstroke: lightgray;\n}\n.cycle .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.cycle .whitespace {\n\tfill: transparent;\n\tstroke: white;\n}\n.cycle .progress {\n\tfill: transparent;\n\tstroke: #0075ff;\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n\ttransition: 250ms ease-in-out 50ms;\n}\n/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements API {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * 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 which variant should be used for presentation.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressVariantType;\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: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressVariantType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["KoliBriProgressVariantEnum","defaultStyleCss","VALID_VARIANTS","Object","keys","createProgressSVG","state","fullCircle","textPositionTop","textPositionBottom","labelY","valueY","_label","_variant","h","class","width","viewBox","xmlns","cx","cy","r","fill","stroke","Math","round","_value","_max","x","y","_unit","style","display","gap","height","rx","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","validateMax","watchNumber","required","validateType","validateVariant","validateUnit","watchString","validateValue","watchValidator","includes","Set","componentWillLoad","_type","interval","setInterval","assign","disconnectedCallback","clearInterval"],"sources":["src/types/progress.ts","src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","src/components/progress/component.tsx"],"sourcesContent":["export enum KoliBriProgressVariantEnum {\n\t'bar' = 'bar',\n\t'cycle' = 'cycle',\n\t'cycle-value-label' = 'cycle-value-label',\n\t'cycle-label-value' = 'cycle-label-value',\n}\n\nexport type KoliBriProgressVariantType = `${KoliBriProgressVariantEnum}`;\n","@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.bar .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.bar .background {\n\tfill: lightgray;\n\tstroke: white;\n}\n.bar .progress {\n\tfill: #0075ff;\n\tstroke: transparent;\n\ttransition: 250ms ease-in-out 50ms;\n}\n.cycle .background {\n\tfill: transparent;\n\tstroke: lightgray;\n}\n.cycle .border {\n\tfill: transparent;\n\tstroke: black;\n}\n.cycle .whitespace {\n\tfill: transparent;\n\tstroke: white;\n}\n.cycle .progress {\n\tfill: transparent;\n\tstroke: #0075ff;\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n\ttransition: 250ms ease-in-out 50ms;\n}\n/* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion */\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { KoliBriProgressVariantEnum, KoliBriProgressVariantType } from '../../types/progress';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchNumber, watchString, watchValidator } from '../../utils/prop.validators';\nimport { API, States } from './types';\n\nconst VALID_VARIANTS = Object.keys(KoliBriProgressVariantEnum);\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tconst fullCircle = 342;\n\tconst textPositionTop = '43%';\n\tconst textPositionBottom = '57%';\n\n\tlet labelY = textPositionTop;\n\tlet valueY = state._label ? textPositionBottom : '50%';\n\tswitch (state._variant) {\n\t\tcase 'cycle-value-label':\n\t\t\tif (state._label) {\n\t\t\t\tlabelY = textPositionBottom;\n\t\t\t\tvalueY = textPositionTop;\n\t\t\t}\n\t\t// eslint-disable-next-line no-fallthrough\n\t\tcase 'cycle':\n\t\tcase 'cycle-label-value':\n\t\t\treturn (\n\t\t\t\t<svg class=\"cycle\" width=\"100\" viewBox=\"0 0 120 120\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t<circle class=\"background\" cx=\"60\" cy=\"60\" r=\"54.5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"59\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"whitespace\" cx=\"60\" cy=\"60\" r=\"51\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle class=\"border\" cx=\"60\" cy=\"60\" r=\"50\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\"></circle>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * fullCircle)}px ${fullCircle}px`}\n\t\t\t\t\t\tstroke-width=\"6\"\n\t\t\t\t\t\tcx=\"60\"\n\t\t\t\t\t\tcy=\"60\"\n\t\t\t\t\t\tr=\"54.5\"\n\t\t\t\t\t></circle>\n\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={labelY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t)}\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y={valueY} text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements API {\n\tprivate interval?: number;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * 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 which variant should be used for presentation.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressVariantType;\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: States = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_max')\n\tpublic validateMax(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 100;\n\t\t}\n\t\twatchNumber(this, '_max', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t// @deprecated remove with v2\n\t@Watch('_type')\n\tpublic validateType(value?: KoliBriProgressVariantType): void {\n\t\tthis.validateVariant(value);\n\t}\n\n\t@Watch('_unit')\n\tpublic validateUnit(value?: string): void {\n\t\twatchString(this, '_unit', value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: number): void {\n\t\tif (typeof value !== 'number') {\n\t\t\tvalue = 0;\n\t\t}\n\t\twatchNumber(this, '_value', value, {\n\t\t\t// max: this._max, TODO as Function\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriProgressVariantType): void {\n\t\twatchValidator(this, '_variant', (value) => typeof value === 'string' && VALID_VARIANTS.includes(value), new Set(VALID_VARIANTS), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000) as unknown as number;\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as e}from"./index-0bc40dc4.js";import{v as n}from"./label-ad3a9360.js";import{d as a,w as o}from"./prop.validators-97a80d4e.js";import{s}from"./reuse-b3566e4c.js";import"./a11y.tipps-7098b947.js";import"./dev.utils-46002186.js";import"./index-d56bfd0f.js";const r=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",l=class{constructor(i){t(this,i),this._caption=void 0,this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){this.validateLabel(t)}validateLabel(t){n(this,t)}validateHref(t){a(this,"_href",t,{required:!0})}validateQuote(t){a(this,"_quote",t,{required:!0})}validateVariant(t){o(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const t=s(this.state._quote);return i(e,null,i("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?i("blockquote",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?void 0:"true",hidden:!t},i("slot",{name:"expert"}))):i("q",{cite:this.state._href},this.state._quote,i("span",{"aria-hidden":t?void 0:"true",hidden:!t},i("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&i("figcaption",null,i("cite",null,i("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};l.style={default:r};export{l as kol_quote};
+import{r as i,h as t,H as e}from"./index-e9d20d00.js";import{v as n}from"./label-485bdf3e.js";import{d as a,w as o}from"./prop.validators-8dc620b0.js";import{s}from"./reuse-d79ab469.js";import"./a11y.tipps-42463a61.js";import"./dev.utils-808b02af.js";import"./index-d56bfd0f.js";const r=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}cite,figure,q+figcaption{display:inline;margin:0;padding:0}blockquote:before{content:open-quote}blockquote::after{content:close-quote}cite:before{content:'—'}.block cite:before{padding-right:0.5em}.inline cite:before{padding:0.5em}",l=class{constructor(t){i(this,t),this._caption=void 0,this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"…",_quote:"…",_variant:"inline"}}validateCaption(t){this.validateLabel(t)}validateLabel(t){n(this,t)}validateHref(t){a(this,"_href",t,{required:!0})}validateQuote(t){a(this,"_quote",t,{required:!0})}validateVariant(t){o(this,"_variant",(t=>"block"===t||"inline"===t),new Set(["block","inline"]),t)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label||this._caption),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const i=s(this.state._quote);return t(e,null,t("figure",{class:{[this.state._variant]:!0}},"block"===this.state._variant?t("blockquote",{cite:this.state._href},this.state._quote,t("span",{"aria-hidden":i?void 0:"true",hidden:!i},t("slot",{name:"expert"}))):t("q",{cite:this.state._href},this.state._quote,t("span",{"aria-hidden":i?void 0:"true",hidden:!i},t("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&t("figcaption",null,t("cite",null,t("kol-link",{_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_caption:["validateCaption"],_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};l.style={default:r};export{l as kol_quote};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","this","validateLabel","validateHref","watchString","required","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_label","_caption","render","hasExpertSlot","showExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_target"],"sources":["src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { showExpertSlot } from '../../utils/reuse';\nimport { API, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements API {\n\t/**\n\t * Deprecated: Defines the visible caption of the component.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _caption?: string;\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?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label || this._caption);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;uRAAA,MAAMA,EAAkB,w2B,MCeXC,EAAQ,M,gIAyB4B,S,WAEhB,CAC/BC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJ,eAAAC,CAAgBC,GACtBC,KAAKC,cAAcF,E,CAIb,aAAAE,CAAcF,GACpBE,EAAcD,KAAMD,E,CAId,YAAAG,CAAaH,GACnBI,EAAYH,KAAM,QAASD,EAAO,CACjCK,SAAU,M,CAKL,aAAAC,CAAcN,GACpBI,EAAYH,KAAM,SAAUD,EAAO,CAClCK,SAAU,M,CAKL,eAAAE,CAAgBP,GACtBQ,EAAeP,KAAM,YAAaD,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIS,IAAI,CAAC,QAAS,WAAYT,E,CAG7G,iBAAAU,GACNT,KAAKE,aAAaF,KAAKL,OACvBK,KAAKC,cAAcD,KAAKU,QAAUV,KAAKW,UACvCX,KAAKK,cAAcL,KAAKJ,QACxBI,KAAKM,gBAAgBN,KAAKH,S,CAGpB,MAAAe,GACN,MAAMC,EAAgBC,EAAed,KAAKe,MAAMnB,QAChD,OACCoB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAAClB,KAAKe,MAAMlB,UAAW,OAGvBG,KAAKe,MAAMlB,WAAa,QACxBmB,EAAA,cAAYG,KAAMnB,KAAKe,MAAMpB,OAC3BK,KAAKe,MAAMnB,OACZoB,EAAA,uBAAoBH,EAAgB,OAASO,UAAWC,QAASR,GAChEG,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMnB,KAAKe,MAAMpB,OAClBK,KAAKe,MAAMnB,OACZoB,EAAA,uBAAoBH,EAAgB,OAASO,UAAWC,QAASR,GAChEG,EAAA,QAAMM,KAAK,oBAINtB,KAAKe,MAAML,SAAW,UAAYV,KAAKe,MAAML,OAAOa,OAAS,GACpEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUrB,MAAOK,KAAKe,MAAMpB,MAAOe,OAAQV,KAAKe,MAAML,OAAQc,QAAQ,c"}
+{"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","this","validateLabel","validateHref","watchString","required","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_label","_caption","render","hasExpertSlot","showExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_target"],"sources":["src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["@import url(../style.css);\ncite,\nfigure,\nq + figcaption {\n\tdisplay: inline;\n\tmargin: 0;\n\tpadding: 0;\n}\nblockquote:before {\n\tcontent: open-quote;\n}\nblockquote::after {\n\tcontent: close-quote;\n}\ncite:before {\n\tcontent: '—';\n}\n.block cite:before {\n\tpadding-right: 0.5em;\n}\n.inline cite:before {\n\tpadding: 0.5em;\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { HrefPropType } from '../../types/props/href';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { showExpertSlot } from '../../utils/reuse';\nimport { API, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements API {\n\t/**\n\t * Deprecated: Defines the visible caption of the component.\n\t * @deprecated Use _label.\n\t */\n\t@Prop() public _caption?: string;\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?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label || this._caption);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;uRAAA,MAAMA,EAAkB,2+B,MCeXC,EAAQ,M,gIAyB4B,S,WAEhB,CAC/BC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJ,eAAAC,CAAgBC,GACtBC,KAAKC,cAAcF,E,CAIb,aAAAE,CAAcF,GACpBE,EAAcD,KAAMD,E,CAId,YAAAG,CAAaH,GACnBI,EAAYH,KAAM,QAASD,EAAO,CACjCK,SAAU,M,CAKL,aAAAC,CAAcN,GACpBI,EAAYH,KAAM,SAAUD,EAAO,CAClCK,SAAU,M,CAKL,eAAAE,CAAgBP,GACtBQ,EAAeP,KAAM,YAAaD,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIS,IAAI,CAAC,QAAS,WAAYT,E,CAG7G,iBAAAU,GACNT,KAAKE,aAAaF,KAAKL,OACvBK,KAAKC,cAAcD,KAAKU,QAAUV,KAAKW,UACvCX,KAAKK,cAAcL,KAAKJ,QACxBI,KAAKM,gBAAgBN,KAAKH,S,CAGpB,MAAAe,GACN,MAAMC,EAAgBC,EAAed,KAAKe,MAAMnB,QAChD,OACCoB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAAClB,KAAKe,MAAMlB,UAAW,OAGvBG,KAAKe,MAAMlB,WAAa,QACxBmB,EAAA,cAAYG,KAAMnB,KAAKe,MAAMpB,OAC3BK,KAAKe,MAAMnB,OACZoB,EAAA,uBAAoBH,EAAgB,OAASO,UAAWC,QAASR,GAChEG,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMnB,KAAKe,MAAMpB,OAClBK,KAAKe,MAAMnB,OACZoB,EAAA,uBAAoBH,EAAgB,OAASO,UAAWC,QAASR,GAChEG,EAAA,QAAMM,KAAK,oBAINtB,KAAKe,MAAML,SAAW,UAAYV,KAAKe,MAAML,OAAOa,OAAS,GACpEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUrB,MAAOK,KAAKe,MAAMpB,MAAOe,OAAQV,KAAKe,MAAML,OAAQc,QAAQ,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as i,r as e,g as s}from"./index-0bc40dc4.js";import{n as a}from"./dev.utils-46002186.js";import{s as l,t as n}from"./events-2bb1065b.js";import{S as o,a as r,s as h}from"./reuse-b3566e4c.js";import{v as d,g as u}from"./controller-ab614e78.js";import{f as p,v as c}from"./controller-b4479bd5.js";import{v as f}from"./rows-017c611e.js";import{a as v}from"./a11y.tipps-7098b947.js";import{d as y,a as m,c as b}from"./prop.validators-97a80d4e.js";import{I as _}from"./controller-icon-7b948a46.js";import"./hide-label-7869187d.js";import"./label-ad3a9360.js";import"./tab-index-4633d0e1.js";import"./associated.controller-af5a2aca.js";import"./index-d56bfd0f.js";import"./icons-e2694dc5.js";class g extends _{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHideError(t){d(this.component,t,{hooks:{afterPatch:()=>{this.component.state._hideError&&v("Property hide-error for inputs: Only use when the error message is shown outside of the input component.")}}})}validateHeight(t){y(this.component,"_height",t)}validateOptions(t){c(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){m(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){m(this.component,"_required",t)}validateRows(t){f(this.component,t)}validateValue(t){b(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o)}))}},this.validateHeight(this.component._height),this.validateHideError(this.component._hideError),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const k=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",w=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const s=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,s):t("option",{disabled:e.disabled,key:s,selected:w(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:e}=u(this.state),a=h(this.state._label);return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",null):this.state._label),t("div",{slot:"input"},t("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",style:{height:this.state._height},onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:w(this.state._value,e.value),value:a},e.label)}))))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,r(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),l(t),n("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._height=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_hideError:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new g(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(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)}validateSize(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:k};export{x as kol_select};
+import{h as t,H as i,r as e,g as s}from"./index-e9d20d00.js";import{n as a}from"./dev.utils-808b02af.js";import{s as l,t as n}from"./events-fa760b68.js";import{S as o,a as h,s as r}from"./reuse-d79ab469.js";import{g as d}from"./controller-34e3505b.js";import{f as p,v as u}from"./controller-3436387a.js";import{v as c}from"./rows-8affe873.js";import{d as f,a as v,c as y}from"./prop.validators-8dc620b0.js";import{I as m}from"./controller-icon-e49f46ec.js";import"./hide-label-c1cd274b.js";import"./label-485bdf3e.js";import"./a11y.tipps-42463a61.js";import"./tab-index-ff0d1137.js";import"./associated.controller-4d29e8ed.js";import"./index-d56bfd0f.js";import"./icons-6c80b022.js";class b extends m{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchOptions=(t,e)=>{const i=e.has("_options")?e.get("_options"):this.component.state._options;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),p(this.keyOptionMap,i);const t=e.has("_value")?e.get("_value"):this.component.state._value,a=this.filterValuesInOptions(Array.isArray(t)&&t.length>0?t:[],i);!1===this.component._multiple&&0===a.length?(e.set("_value",[i[0].value]),this.onStateChange()):Array.isArray(t)&&a.length<t.length&&(e.set("_value",a),this.onStateChange())}},this.component=t}validateHeight(t){f(this.component,"_height",t)}validateOptions(t){u(this.component,t,{hooks:{beforePatch:this.beforePatchOptions}})}validateMultiple(t){v(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchOptions}})}validateRequired(t){v(this.component,"_required",t)}validateRows(t){c(this.component,t)}validateValue(t){y(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchOptions}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(o)}))}},this.validateHeight(this.component._height),this.validateOptions(this.component._options||this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows||this.component._size),this.validateValue(this.component._value)}}const _=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select,select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input .input-slot{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple],[size]){height:2.75em}input:focus,option:focus,select:focus,textarea:focus{outline:0}.input{display:flex;align-items:center}.input>kol-icon{display:grid;height:var(--a11y-min-size);place-items:center}kol-input.required .input-tooltip .span-label::after{content:'*'}.error.hidden{display:none}",g=(t,e)=>Array.isArray(t)&&t.includes(e),k=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const s=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,s):t("option",{disabled:e.disabled,key:s,selected:g(this.state._value,e.value),value:s},e.label)})))}render(){const{ariaDescribedBy:e}=d(this.state),a=r(this.state._label);return t(i,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{"hide-label":!!this.state._hideLabel,select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",null):this.state._label),t("div",{slot:"input"},t("select",{ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false",style:{height:this.state._height},onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus,onChange:this.onChange},this.state._options.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:e.disabled,key:a,selected:g(this.state._value,e.value),value:a},e.label)}))))))}constructor(t){e(this,t),this.catchRef=t=>{this.ref=t,h(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),l(t),n("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=!1,this._error=void 0,this._height=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icon=void 0,this._icons=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._rows=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_hideError:!1,_id:`id-${a()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new b(this,"select",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideError(t){this.controller.validateHideError(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.validateIcons(t)}validateIcons(t){this.controller.validateIcons(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.validateOptions(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)}validateSize(t){this.controller.validateRows(t)}validateSyncValueBySelector(t){this.controller.validateSyncValueBySelector(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((t=>this.state._hasValue=!!t))}get host(){return s(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_height:["validateHeight"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};k.style={default:_};export{k 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","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHideError","hooks","afterPatch","_hideError","a11yHint","validateHeight","watchString","validateOptions","validateOptionsWithOptgroup","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_list","_required","_rows","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","_hideLabel","select","_disabled","_error","_hint","_icons","_id","_tooltipAlign","_touched","onClick","ref","focus","slot","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","stopPropagation","tryToDispatchKoliBriEvent","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateList","validateName","validateOn","validateSize","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { HideErrorPropType, validateHideError } from '../../types/props/hide-error';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { a11yHint } from '../../utils/a11y.tipps';\nimport { watchBoolean, watchJsonArrayString, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[]\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tvalidateHideError(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.component.state._hideError) {\n\t\t\t\t\t\ta11yHint('Property hide-error for inputs: Only use when the error message is shown outside of the input component.');\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateHideError(this.component._hideError);\n\t\tthis.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.error.hidden {\n\tdisplay: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { API, States } from './types';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements API {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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_required={this.state._required}\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.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * 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 */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\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 */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Deprecated: Defines an individual height.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: 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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\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 * Deprecated: Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\n\t */\n\t@Prop() public _list?: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * 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 * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: 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: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(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('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: 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._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":";;;osBAeaA,UAAyBC,EAKrC,WAAAC,CAAmBC,EAA8CC,EAAcC,GAC9EC,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,SAC3CR,KAAKM,iBAAiBC,EAAQG,EAA4BF,SAC1D,UACEK,UAISb,KAAAc,sBAAwB,CAACC,EAAkBP,IACpDO,EAAOC,QAAQT,GAAUP,KAAKM,iBAAiBC,EAAOC,KAAaK,YAG1Db,KAAAiB,mBAAqB,CAACC,EAAiBC,KACvD,MAAMX,EAAUW,EAAUC,IAAI,YAAcD,EAAUd,IAAI,YAAcL,KAAKJ,UAAUyB,MAAMC,SAC7F,GAAIX,MAAMC,QAAQJ,IAAYA,EAAQe,OAAS,EAAG,CACjDvB,KAAKC,aAAauB,QAClBC,EAAiBzB,KAAKC,aAAcO,GACpC,MAAMD,EAAQY,EAAUC,IAAI,UAAYD,EAAUd,IAAI,UAAYL,KAAKJ,UAAUyB,MAAMH,OACvF,MAAMQ,EAAW1B,KAAKc,sBACrBH,MAAMC,QAAQL,IAAUA,EAAMgB,OAAS,EAAKhB,EAAqB,GACjEC,GAED,GAAIR,KAAKJ,UAAU+B,YAAc,OAASD,EAASH,SAAW,EAAG,CAChEJ,EAAUS,IAAI,SAAU,CAEtBpB,EAAQ,GAGPD,QAEHP,KAAK6B,e,MACC,GAAIlB,MAAMC,QAAQL,IAAUmB,EAASH,OAAShB,EAAMgB,OAAQ,CAClEJ,EAAUS,IAAI,SAAUF,GACxB1B,KAAK6B,e,IA1CP7B,KAAKJ,UAAYA,C,CA+CX,iBAAAkC,CAAkBvB,GACxBuB,EAAkB9B,KAAKJ,UAAWW,EAAO,CACxCwB,MAAO,CACNC,WAAY,KACX,GAAIhC,KAAKJ,UAAUyB,MAAMY,WAAY,CACpCC,EAAS,2G,MAWP,cAAAC,CAAe5B,GACrB6B,EAAYpC,KAAKJ,UAAW,UAAWW,E,CAGjC,eAAA8B,CAAgB9B,GACtB+B,EAA4BtC,KAAKJ,UAAWW,EAAO,CAClDwB,MAAO,CACNQ,YAAavC,KAAKiB,qB,CAKd,gBAAAuB,CAAiBjC,GACvBkC,EAAazC,KAAKJ,UAAW,YAAaW,EAAO,CAChDwB,MAAO,CACNQ,YAAavC,KAAKiB,qB,CAWd,gBAAAyB,CAAiBnC,GACvBkC,EAAazC,KAAKJ,UAAW,YAAaW,E,CAGpC,YAAAoC,CAAapC,GACnBoC,EAAa3C,KAAKJ,UAAWW,E,CAGvB,aAAAqC,CAAcrC,GACpBsC,EAAqB7C,KAAKJ,UAAW,UAAU,IAAM,MAAMW,EAAOM,UAAW,CAC5EkB,MAAO,CACNQ,YAAavC,KAAKiB,sBAGpBjB,KAAK8C,uBAAuB9C,KAAKJ,UAAUsB,O,CAGrC,iBAAA6B,CAAkBC,GACxBjD,MAAMgD,oBAEN/C,KAAK6B,cAAgB,KACpB,UAAWmB,IAAa,WAAY,CACnC,MAAMC,EAAUC,YAAW,KAC1BC,aAAaF,GACbD,EAASI,EAAmB,G,GAK/BpD,KAAKmC,eAAenC,KAAKJ,UAAUyD,SACnCrD,KAAK8B,kBAAkB9B,KAAKJ,UAAUqC,YACtCjC,KAAKqC,gBAAgBrC,KAAKJ,UAAU0B,UAAYtB,KAAKJ,UAAU0D,OAC/DtD,KAAKwC,iBAAiBxC,KAAKJ,UAAU+B,WACrC3B,KAAK0C,iBAAiB1C,KAAKJ,UAAU2D,WACrCvD,KAAK2C,aAAa3C,KAAKJ,UAAU4D,OAASxD,KAAKJ,UAAU6D,OACzDzD,KAAK4C,cAAc5C,KAAKJ,UAAUsB,O,EClJpC,MAAMwC,EAAkB,q3DCqBxB,MAAMC,EAAa,CAACC,EAA6BC,IACzClD,MAAMC,QAAQgD,IAAcA,EAAUE,SAASD,G,MAa1CE,EAAS,MASb,cAAAC,CAAeC,EAA4BC,G,MAClD,OACCC,EAAA,YAAUC,SAAUH,EAASG,SAAUC,MAAOJ,EAASI,QACrDC,EAAAL,EAASzD,WAAO,MAAA8D,SAAA,SAAAA,EAAEC,KAAI,CAAC7D,EAAqC8D,KAC5D,MAAMpE,EAAM,GAAG8D,KAAUM,IACzB,GAAI7D,MAAMC,QAASF,EAA4BF,SAAU,CACxD,OAAOR,KAAKgE,eAAetD,EAA4BN,E,KACjD,CACN,OACC+D,EAAA,UACCC,SAAU1D,EAAO0D,SACjBhE,IAAKA,EAELsB,SAAUiC,EAAW3D,KAAKqB,MAAMH,OAASR,EAAiCH,OAC1EA,MAAOH,GAENM,EAAO2D,M,MASR,MAAAI,GACN,MAAMC,gBAAEA,GAAoBC,EAAgB3E,KAAKqB,OACjD,MAAMuD,EAAgBC,EAAe7E,KAAKqB,MAAMyD,QAEhD,OACCX,EAACY,EAAI,CAACC,MAAO,CAAE,YAAahF,KAAKqB,MAAM4D,YACtCd,EAAA,aACCa,MAAO,CACN,eAAgBhF,KAAKqB,MAAM6D,WAC3BC,OAAQ,MAETC,UAAWpF,KAAKqB,MAAM+D,UACtBC,OAAQrF,KAAKqB,MAAMgE,OACnBpD,WAAYjC,KAAKqB,MAAMY,WACvBiD,WAAYlF,KAAKqB,MAAM6D,WACvBI,MAAOtF,KAAKqB,MAAMiE,MAClBC,OAAQvF,KAAKqB,MAAMkE,OACnBC,IAAKxF,KAAKqB,MAAMmE,IAChBV,OAAQ9E,KAAKqB,MAAMyD,OACnBvB,UAAWvD,KAAKqB,MAAMkC,UACtBkC,cAAezF,KAAKyF,cACpBC,SAAU1F,KAAKqB,MAAMqE,SACrBC,QAAS,SAAArB,EAAM,OAAAA,EAAAtE,KAAK4F,OAAG,MAAAtB,SAAA,SAAAA,EAAEuB,OAAO,GAGhC1B,EAAA,QAAM2B,KAAK,SAASlB,EAAgBT,EAAA,aAAgBnE,KAAKqB,MAAMyD,QAC/DX,EAAA,OAAK2B,KAAK,SACT3B,EAAA,UACCyB,IAAK5F,KAAK+F,SACVC,MAAM,GACNC,UAAWjG,KAAKqB,MAAM6E,WAAU,mBACdxB,EAAgBnD,OAAS,EAAImD,EAAgByB,KAAK,KAAOtF,UAAS,aACxEb,KAAKqB,MAAM6D,mBAAqBlF,KAAKqB,MAAMyD,SAAW,SAAW9E,KAAKqB,MAAMyD,OAASjE,UACjGuF,eAAe,MACfC,YAAY,MACZjC,SAAUpE,KAAKqB,MAAM+D,UACrBkB,GAAItG,KAAKqB,MAAMmE,IACfe,SAAUvG,KAAKqB,MAAMM,UACrB9B,KAAMG,KAAKqB,MAAMmF,MACjBC,SAAUzG,KAAKqB,MAAMkC,UACrBmD,KAAM1G,KAAKqB,MAAMmC,MACjBmD,WAAW,QACXC,MAAO,CACNC,OAAQ7G,KAAKqB,MAAMgC,SAGnBsC,QAAS3F,KAAK8G,WAAWC,SAASpB,QAClCqB,OAAQhH,KAAK8G,WAAWC,SAASC,OACjCC,QAASjH,KAAK8G,WAAWC,SAASE,QAEnCjE,SAAUhD,KAAKgD,UAEdhD,KAAKqB,MAAMC,SAASiD,KAAI,CAAC7D,EAAQ8D,KAMjC,MAAMpE,EAAM,IAAIoE,IAChB,GAAI7D,MAAMC,QAASF,EAAuCF,SAAU,CACnE,OAAOR,KAAKgE,eAAetD,EAAuCN,E,KAC5D,CACN,OACC+D,EAAA,UACCC,SAAU1D,EAAO0D,SACjBhE,IAAKA,EAELsB,SAAUiC,EAAW3D,KAAKqB,MAAMH,OAASR,EAA4CH,OACrFA,MAAOH,GAENM,EAAO2D,M,SAiKlB,WAAA1E,CAAAuH,G,UArQiBlH,KAAA+F,SAAYH,IAC5B5F,KAAK4F,IAAMA,EACXuB,EAAenH,KAAKF,KAAME,KAAK4F,IAAI,EAwY5B5F,KAAAgD,SAAYoE,I,QACnBpH,KAAKkB,OAASP,MAAM0G,OAAK/C,EAAAtE,KAAK4F,OAAG,MAAAtB,SAAA,SAAAA,EAAE9D,UAAW,IAC5CQ,QAAQN,GAAWA,EAAOgB,WAAa,OACvC6C,KAAK7D,IAAM,IAAA4D,EAAK,OAAAA,EAAAtE,KAAK8G,WAAW3G,eAAeO,EAAOH,UAAM,MAAA+D,SAAA,SAAAA,EAAE/D,KAAe,IAG/E+G,EAAgBF,GAChBG,EAA0B,SAAUvH,KAAKF,KAAME,KAAKkB,QAGpDlB,KAAK8G,WAAWhE,uBAAuB9C,KAAKkB,QAG5C,WAAWsG,EAAAxH,KAAKqB,MAAMoG,OAAG,MAAAD,SAAA,SAAAA,EAAExE,YAAa,WAAY,CACnDhD,KAAKqB,MAAMoG,IAAIzE,SAASoE,EAAOpH,KAAKkB,O,yCA9R4B,K,eAM7B,M,6DAkBiC,M,gBAOhC,M,WAKN,G,wHAgCK,M,+EAqBA,M,0HA0BiB,M,cAMc,M,iCAOpC,CAC/B+D,UAAW,MACX5B,QAAS,GACTpB,WAAY,MACZuD,IAAK,MAAMkC,MACX5C,OAAQ,GACRnD,UAAW,MACXL,SAAU,GACVJ,OAAQ,IAIRlB,KAAK8G,WAAa,IAAIrH,EAAiBO,KAAM,SAAUA,KAAKF,K,CAItD,iBAAA6H,CAAkBpH,GACxBP,KAAK8G,WAAWa,kBAAkBpH,E,CAI5B,aAAAqH,CAAcrH,GACpBP,KAAK8G,WAAWc,cAAcrH,E,CAIxB,gBAAAsH,CAAiBtH,GACvBP,KAAK8G,WAAWe,iBAAiBtH,E,CAI3B,aAAAuH,CAAcvH,GACpBP,KAAK8G,WAAWgB,cAAcvH,E,CAIxB,cAAA4B,CAAe5B,GACrBP,KAAK8G,WAAW3E,eAAe5B,E,CAIzB,iBAAAuB,CAAkBvB,GACxBP,KAAK8G,WAAWhF,kBAAkBvB,E,CAI5B,iBAAAwH,CAAkBxH,GACxBP,KAAK8G,WAAWiB,kBAAkBxH,E,CAI5B,YAAAyH,CAAazH,GACnBP,KAAK8G,WAAWkB,aAAazH,E,CAIvB,YAAA0H,CAAa1H,GACnBP,KAAKkI,cAAc3H,E,CAIb,aAAA2H,CAAc3H,GACpBP,KAAK8G,WAAWoB,cAAc3H,E,CAIxB,UAAA4H,CAAW5H,GACjBP,KAAK8G,WAAWqB,WAAW5H,E,CAIrB,aAAA6H,CAAc7H,GACpBP,KAAK8G,WAAWsB,cAAc7H,E,CAIxB,YAAA8H,CAAa9H,GACnBP,KAAKqC,gBAAgB9B,E,CAIf,gBAAAiC,CAAiBjC,GACvBP,KAAK8G,WAAWtE,iBAAiBjC,E,CAI3B,YAAA+H,CAAa/H,GACnBP,KAAK8G,WAAWwB,aAAa/H,E,CAIvB,UAAAgI,CAAWhI,GACjBP,KAAK8G,WAAWyB,WAAWhI,E,CAIrB,eAAA8B,CAAgB9B,GACtBP,KAAK8G,WAAWzE,gBAAgB9B,E,CAI1B,gBAAAmC,CAAiBnC,GACvBP,KAAK8G,WAAWpE,iBAAiBnC,E,CAI3B,YAAAoC,CAAapC,GACnBP,KAAK8G,WAAWnE,aAAapC,E,CAIvB,YAAAiI,CAAajI,GACnBP,KAAK8G,WAAWnE,aAAapC,E,CAIvB,2BAAAkI,CAA4BlI,GAClCP,KAAK8G,WAAW2B,4BAA4BlI,E,CAItC,gBAAAmI,CAAiBnI,GACvBP,KAAK8G,WAAW4B,iBAAiBnI,E,CAI3B,eAAAoI,CAAgBpI,GACtBP,KAAK8G,WAAW6B,gBAAgBpI,E,CAI1B,aAAAqC,CAAcrC,GACpBP,KAAK8G,WAAWlE,cAAcrC,E,CAGxB,iBAAAwC,GACN/C,KAAK4I,OAAS5I,KAAK4I,SAAW,KAC9B5I,KAAK0F,SAAW1F,KAAK0F,WAAa,KAClC1F,KAAK8G,WAAW/D,kBAAkB/C,KAAKgD,UAEvChD,KAAKqB,MAAM4D,YAAcjF,KAAKqB,MAAMH,OACpClB,KAAK8G,WAAW+B,wBAAwBC,GAAO9I,KAAKqB,MAAM4D,YAAc6D,G"}
+{"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","beforePatchOptions","_value","nextState","has","state","_options","length","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateOptions","validateOptionsWithOptgroup","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateRows","validateValue","watchJsonArrayString","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_list","_required","_rows","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","disabled","label","_a","map","index","render","ariaDescribedBy","getRenderStates","hasExpertSlot","showExpertSlot","_label","Host","class","_hasValue","_hideLabel","select","_disabled","_error","_hideError","_hint","_icons","_id","_tooltipAlign","_touched","onClick","ref","focus","slot","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","stopPropagation","tryToDispatchKoliBriEvent","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideError","validateHideLabel","validateHint","validateIcon","validateIcons","validateId","validateLabel","validateList","validateName","validateOn","validateSize","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["src/components/select/controller.ts","src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\n\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { OptionsWithOptgroupPropType, validateOptionsWithOptgroup } from '../../types/props/options';\nimport { RowsPropType, validateRows } from '../../types/props/rows';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[]\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateOptions(this.component._options || this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows || this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n.error.hidden {\n\tdisplay: none;\n}\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { KoliBriHorizontalIcons } from '../../types/icons';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { HideErrorPropType } from '../../types/props/hide-error';\nimport { IdPropType } from '../../types/props/id';\nimport { LabelWithExpertSlotPropType } from '../../types/props/label';\nimport { NamePropType } from '../../types/props/name';\nimport { OptionsWithOptgroupPropType } from '../../types/props/options';\nimport { RowsPropType } from '../../types/props/rows';\nimport { SyncValueBySelectorPropType } from '../../types/props/sync-value-by-selector';\nimport { TooltipAlignPropType } from '../../types/props/tooltip-align';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { propagateFocus, showExpertSlot } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { API, States } from './types';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements API {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'has-value': this.state._hasValue }}>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_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_required={this.state._required}\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.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t{/*  TODO: der folgende Slot ohne Name muss später entfernt werden */}\n\t\t\t\t\t<span slot=\"label\">{hasExpertSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<select\n\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * 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 */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\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 */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Deprecated: Defines an individual height.\n\t *\n\t * @deprecated Use _rows instead.\n\t */\n\t@Prop() public _height?: 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 * @deprecated Use _icons.\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcons>;\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 * Deprecated: Options the user can choose from, also supporting Optgroup.\n\t * @deprecated use _options\n\t */\n\t@Prop() public _list?: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * 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 * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: 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: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`, // ⚠ required\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_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('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.validateIcons(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('_list')\n\tpublic validateList(value?: Stringified<SelectOption<W3CInputValue>[]>): void {\n\t\tthis.validateOptions(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: 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._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-0bc40dc4.js";import{v as e}from"./label-ad3a9360.js";import{r as a,a as n}from"./unique-nav-labels-c6750f60.js";import{w as s}from"./validation-073e44a9.js";import"./a11y.tipps-7098b947.js";import"./dev.utils-46002186.js";import"./reuse-b3566e4c.js";import"./prop.validators-97a80d4e.js";import"./index-d56bfd0f.js";const o=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",l=class{constructor(a){i(this,a),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._label},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i,t,l=!1){l||a(this.state._label),e(this,i),n(this.state._label)}validateLinks(i){s("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};l.style={default:o};export{l as kol_skip_nav};
+import{r as i,h as t}from"./index-e9d20d00.js";import{v as e}from"./label-485bdf3e.js";import{r as a,a as n}from"./unique-nav-labels-62d9802d.js";import{w as s}from"./validation-32870760.js";import"./a11y.tipps-42463a61.js";import"./dev.utils-808b02af.js";import"./reuse-d79ab469.js";import"./prop.validators-8dc620b0.js";import"./index-d56bfd0f.js";const o=":host{--a11y-min-size:44px;font-family:Verdana}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",l=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._label=void 0,this._links=void 0,this.state={_label:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._label},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){this.validateLabel(i)}validateLabel(i,t,l=!1){l||a(this.state._label),e(this,i),n(this.state._label)}validateLinks(i){s("KolSkipNav",this,i)}componentWillLoad(){this.validateLabel(this._label||this._ariaLabel,void 0,!0),this.validateLinks(this._links)}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_label:["validateLabel"],_links:["validateLinks"]}}};l.style={default:o};export{l as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","validateLabel","_oldValue","initial","removeNavLabel","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","_ariaLabel","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\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; // TODO: required in v2\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;8VAAA,MAAMA,EAAkB,q2B,MCgBXC,EAAU,M,0GAkCU,CAC/BC,OAAQ,IACRC,OAAQ,G,CAnCF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAmCjB,iBAAAK,CAAkBC,GACxBT,KAAKU,cAAcD,E,CAIb,aAAAC,CAAcD,EAAuBE,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeb,KAAKC,MAAML,O,CAE3Bc,EAAcV,KAAMS,GACpBK,EAAYd,KAAKC,MAAML,O,CAIjB,aAAAmB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKU,cAAcV,KAAKJ,QAAUI,KAAKkB,WAAYC,UAAW,MAC9DnB,KAAKe,cAAcf,KAAKH,O,CAGlB,oBAAAuB,GACNP,EAAeb,KAAKC,MAAML,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_label","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","validateLabel","_oldValue","initial","removeNavLabel","addNavLabel","validateLinks","watchNavLinks","componentWillLoad","_ariaLabel","undefined","disconnectedCallback"],"sources":["src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Stringified } from '../../types/common';\nimport { LabelPropType, validateLabel } from '../../types/props/label';\nimport { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';\nimport { LinkProps } from '../link/types';\nimport { watchNavLinks } from '../nav/validation';\nimport { API, States } from './types';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements API {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._label}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Deprecated: Setzt die semantische Beschriftung der Komponente.\n\t *\n\t * @deprecated use _label instead\n\t */\n\t@Prop() public _ariaLabel?: string;\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; // TODO: required in v2\n\n\t/**\n\t * Defines the list of links combined with their labels to render.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_label: '…', // ⚠ required\n\t\t_links: [],\n\t};\n\n\t/**\n\t * @deprecated\n\t */\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\tthis.validateLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType, _oldValue?: LabelPropType, initial = false): void {\n\t\tif (!initial) {\n\t\t\tremoveNavLabel(this.state._label); // remove the current\n\t\t}\n\t\tvalidateLabel(this, value);\n\t\taddNavLabel(this.state._label); // add the state instead of prop, because the prop could be invalid and not set as new label\n\t}\n\n\t@Watch('_links')\n\tpublic validateLinks(value?: Stringified<LinkProps[]>): void {\n\t\twatchNavLinks('KolSkipNav', this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label || this._ariaLabel, undefined, true);\n\t\tthis.validateLinks(this._links);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tremoveNavLabel(this.state._label);\n\t}\n}\n"],"mappings":";;;8VAAA,MAAMA,EAAkB,w+B,MCgBXC,EAAU,M,0GAkCU,CAC/BC,OAAQ,IACRC,OAAQ,G,CAnCF,MAAAC,GACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,QAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAmCjB,iBAAAK,CAAkBC,GACxBT,KAAKU,cAAcD,E,CAIb,aAAAC,CAAcD,EAAuBE,EAA2BC,EAAU,OAChF,IAAKA,EAAS,CACbC,EAAeb,KAAKC,MAAML,O,CAE3Bc,EAAcV,KAAMS,GACpBK,EAAYd,KAAKC,MAAML,O,CAIjB,aAAAmB,CAAcN,GACpBO,EAAc,aAAchB,KAAMS,E,CAG5B,iBAAAQ,GACNjB,KAAKU,cAAcV,KAAKJ,QAAUI,KAAKkB,WAAYC,UAAW,MAC9DnB,KAAKe,cAAcf,KAAKH,O,CAGlB,oBAAAuB,GACNP,EAAeb,KAAKC,MAAML,O"}