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

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

@@ -1 +1 @@
-{"version":3,"names":["validateAlign","component","value","watchString","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","validateShow","componentWillLoad"],"sources":["./src/types/props/align.ts","./src/components/popover/style.css?tag=kol-popover","./src/components/popover/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert das Element als ausgewähltes/aktiviertes. Kann folgende Werte annehmen: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\n\n/** en\n * Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\ntype HorizontalAlign = 'left' | 'right';\ntype VerticalAlign = 'top' | 'bottom';\nexport type Align = HorizontalAlign | VerticalAlign;\nexport type PropAlign = {\n\talign: Align;\n};\n\n/* validator */\nexport const validateAlign = (component: Generic.Element.Component, value?: Align): void => {\n\twatchString(component, '_align', value);\n};\n","@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 { MiddlewareData, Placement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { Align, PropAlign, PropShow, validateAlign, validateShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropAlign & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropAlign & PropShow & { visible: boolean };\ntype OptionalStates = unknown;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\ntype API = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n\n/**\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover',\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 * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.\n\t */\n\t@Prop() public _align?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.\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?: Align): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): 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":["validateAlign","component","value","watchString","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","validateShow","componentWillLoad"],"sources":["./src/types/props/align.ts","./src/components/popover/style.css?tag=kol-popover","./src/components/popover/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchString } from '../../utils/prop.validators';\n\n/* types */\n/** de\n * Markiert das Element als ausgewähltes/aktiviertes. Kann folgende Werte annehmen: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\n\n/** en\n * Marks the element as the selected in a group of related elements. Can be one of the following: `date` | `location` | `page` | `step` | `time` | `true`.\n *  (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)\n */\ntype HorizontalAlign = 'left' | 'right';\ntype VerticalAlign = 'top' | 'bottom';\nexport type Align = HorizontalAlign | VerticalAlign;\nexport type PropAlign = {\n\talign: Align;\n};\n\n/* validator */\nexport const validateAlign = (component: Generic.Element.Component, value?: Align): void => {\n\twatchString(component, '_align', value);\n};\n","@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 { MiddlewareData, Placement, arrow, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { getDocument } from '../../utils/dev.utils';\nimport { processEnv } from '../../utils/reuse';\nimport { Align, validateAlign, validateShow } from '../../types/props';\nimport { KoliBriPopoverAPI, KoliBriPopoverStates } from './types';\n\n/**\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover',\n\tstyleUrl: './style.css',\n\tshadow: false,\n})\nexport class KolPopover implements KoliBriPopoverAPI {\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 * Setzt die Ausrichtung des Popovers in Relation zum Triggerelement.\n\t */\n\t@Prop() public _align?: Align = 'top';\n\n\t/**\n\t * Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: KoliBriPopoverStates = {\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?: Align): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): 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 i}from"./index-6ad587d0.js";import{w as a,e as s}from"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const r=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.progress{transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}.cycle .progress{transform-origin:50% 50%;transform:rotate(-90deg)}",n=t=>"cycle"===t._variant?e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{fill:"none",stroke:"#000",cx:"60px",cy:"60px",r:"50px","stroke-width":"10"}),e("circle",{fill:"none",stroke:"#ddd",cx:"60px",cy:"60px",r:"50px","stroke-width":"8"}),e("text",{"aria-hidden":"true",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},t._label&&e("tspan",{"text-anchor":"middle",x:"50%",dy:"-5em"},t._label),e("tspan",{"text-anchor":"middle",x:"50%",dy:t._label?"10em":"0em"},t._value,t._unit)),e("circle",{class:"progress","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*320)}px 320px`,"stroke-width":"8",fill:"none",stroke:"#0075ff",cx:"60px",cy:"60px",r:"50px"})):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",{x:"1",y:"1",height:"8",rx:"4",fill:"#efefef",stroke:"#000000",width:"100"}),e("rect",{x:"1",y:"2",height:"6",rx:"4",fill:"#0075ff",stroke:"#0075ff",width:t._value/t._max*100,class:"progress"})),e("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit))),o=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(i,null,n(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(t){a(this,"_label",t)}validateMax(t){"number"!=typeof t&&(t=100),s(this,"_max",t,{required:!0})}validateType(t){this.validateVariant(t)}validateUnit(t){a(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),s(this,"_value",t,{required:!0})}validateVariant(t){!t&&this._type&&(t=this._type),"cycle"!==t&&(t="bar"),this.state=Object.assign(Object.assign({},this.state),{_variant:t})}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"]}}};o.style={default:r};export{o as kol_progress};
+import{r as t,h as r,H as e}from"./index-6ad587d0.js";import{w as i,e as s}from"./prop.validators-f81af56e.js";import"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const a=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}progress{display:block;height:0;overflow:hidden;width:0}.bar .border{fill:transparent;stroke:black}.bar .background{fill:lightgray;stroke:white}.bar .progress{fill:#0075ff;stroke:transparent;transition:250ms ease-in-out 50ms}.cycle .background{fill:transparent;stroke:lightgray}.cycle .border{fill:transparent;stroke:black}.cycle .whitespace{fill:transparent;stroke:white}.cycle .progress{fill:transparent;stroke:#0075ff;transform-origin:50% 50%;transform:rotate(-90deg);transition:250ms ease-in-out 50ms}@media (prefers-reduced-motion){.progress{transition-duration:0s;transition-delay:0s}}",o=t=>"cycle"===t._variant?r("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},r("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),r("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),r("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),r("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),r("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),r("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"}),r("text",{"aria-hidden":"true",x:"50%",y:"50%","text-anchor":"middle",fill:"currentColor"},t._label&&r("tspan",null,t._label),r("tspan",null,t._value,t._unit))):r("div",{class:"bar"},t._label&&r("div",null,t._label),r("div",{style:{display:"flex",gap:"0.3em"}},r("svg",{width:"100",viewBox:"0 0 102 8",xmlns:"http://www.w3.org/2000/svg"},r("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",width:"100"}),r("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}),r("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",width:"100"})),r("text",{"aria-hidden":"true","text-anchor":"middle","dominant-baseline":"central",fill:"currentColor"},t._value,t._unit))),l=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 r(e,null,o(this.state),r("progress",{"aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),r("span",{"aria-live":"polite","aria-relevant":"removals text",hidden:!0},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(t){i(this,"_label",t)}validateMax(t){"number"!=typeof t&&(t=100),s(this,"_max",t,{required:!0})}validateType(t){this.validateVariant(t)}validateUnit(t){i(this,"_unit",t)}validateValue(t){"number"!=typeof t&&(t=0),s(this,"_value",t,{required:!0})}validateVariant(t){!t&&this._type&&(t=this._type),"cycle"!==t&&(t="bar"),this.state=Object.assign(Object.assign({},this.state),{_variant:t})}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"]}}};l.style={default:a};export{l as kol_progress};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","createProgressSVG","state","_variant","h","class","width","viewBox","xmlns","fill","stroke","cx","cy","r","x","y","_label","dy","_value","_unit","Math","round","_max","style","display","gap","height","rx","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","watchString","validateMax","watchNumber","required","validateType","validateVariant","validateUnit","validateValue","_type","Object","assign","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import url(../style.css);\nprogress {\n\tdisplay: block;\n\theight: 0;\n\toverflow: hidden;\n\twidth: 0;\n}\n.progress {\n\ttransition: 250ms ease-in-out 50ms;\n}\n@media (prefers-reduced-motion) {\n\t.progress {\n\t\ttransition-duration: 0s;\n\t\ttransition-delay: 0s;\n\t}\n}\n.cycle .progress {\n\ttransform-origin: 50% 50%;\n\ttransform: rotate(-90deg);\n}\n","import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { KoliBriProgressType } from '../../types/progress';\nimport { PropLabel } from '../../types/props';\nimport { watchNumber, watchString } from '../../utils/prop.validators';\n\ntype RequiredProps = {\n\tmax: number;\n\tvalue: number;\n};\ntype OptionalProps = PropLabel & {\n\ttype: KoliBriProgressType; // @deprecated\n\tunit: string;\n\tvariant: KoliBriProgressType;\n};\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = RequiredProps & {\n\tliveValue: number;\n};\ntype OptionalStates = PropLabel & {\n\tunit: string;\n\tvariant: KoliBriProgressType;\n};\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: States): JSX.Element => {\n\tswitch (state._variant) {\n\t\tcase 'cycle':\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 fill=\"none\" stroke=\"#000\" cx=\"60px\" cy=\"60px\" r=\"50px\" stroke-width=\"10\"></circle>\n\t\t\t\t\t<circle fill=\"none\" stroke=\"#ddd\" cx=\"60px\" cy=\"60px\" r=\"50px\" stroke-width=\"8\"></circle>\n\t\t\t\t\t<text aria-hidden=\"true\" x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._label && (\n\t\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy=\"-5em\">\n\t\t\t\t\t\t\t\t{state._label}\n\t\t\t\t\t\t\t</tspan>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<tspan text-anchor=\"middle\" x=\"50%\" dy={state._label ? '10em' : '0em'}>\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</tspan>\n\t\t\t\t\t</text>\n\t\t\t\t\t<circle\n\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\tstroke-linecap=\"round\"\n\t\t\t\t\t\tstroke-dasharray={`${Math.round((state._value / state._max) * 320)}px 320px`}\n\t\t\t\t\t\tstroke-width=\"8\"\n\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\tstroke=\"#0075ff\"\n\t\t\t\t\t\tcx=\"60px\"\n\t\t\t\t\t\tcy=\"60px\"\n\t\t\t\t\t\tr=\"50px\"\n\t\t\t\t\t></circle>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<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 x=\"1\" y=\"1\" height=\"8\" rx=\"4\" fill=\"#efefef\" stroke=\"#000000\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect x=\"1\" y=\"2\" height=\"6\" rx=\"4\" fill=\"#0075ff\" stroke=\"#0075ff\" width={100 * (state._value / state._max)} class=\"progress\"></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 Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriProgressType;\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?: string): void {\n\t\twatchString(this, '_label', 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?: KoliBriProgressType): 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?: KoliBriProgressType): void {\n\t\tif (!value && this._type) {\n\t\t\t// remove with v2\n\t\t\tvalue = this._type;\n\t\t}\n\t\tif (value !== 'cycle') {\n\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_variant: value,\n\t\t};\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"names":["defaultStyleCss","createProgressSVG","state","fullCircle","_variant","h","class","width","viewBox","xmlns","cx","cy","r","fill","stroke","Math","round","_value","_max","x","y","_label","_unit","style","display","gap","height","rx","KolProcess","_liveValue","render","Host","this","max","value","hidden","validateLabel","watchString","validateMax","watchNumber","required","validateType","validateVariant","validateUnit","validateValue","_type","Object","assign","componentWillLoad","interval","setInterval","disconnectedCallback","clearInterval"],"sources":["./src/components/progress/style.css?tag=kol-progress&mode=default&encapsulation=shadow","./src/components/progress/component.tsx"],"sourcesContent":["@import 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 { watchNumber, watchString } from '../../utils/prop.validators';\nimport { KoliBriProgressAPI, KoliBriProgressStates } from './types';\nimport { KoliBriProgressType } from '../../types/progress';\n\n// https://css-tricks.com/html5-progress-element/\nconst createProgressSVG = (state: KoliBriProgressStates): JSX.Element => {\n\tconst fullCircle = 342;\n\tswitch (state._variant) {\n\t\tcase 'cycle':\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<text aria-hidden=\"true\" x=\"50%\" y=\"50%\" text-anchor=\"middle\" fill=\"currentColor\">\n\t\t\t\t\t\t{state._label && <tspan>{state._label}</tspan>}\n\t\t\t\t\t\t<tspan>\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</tspan>\n\t\t\t\t\t</text>\n\t\t\t\t</svg>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<div class=\"bar\">\n\t\t\t\t\t{state._label && <div>{state._label}</div>}\n\t\t\t\t\t<div style={{ display: 'flex', gap: '0.3em' }}>\n\t\t\t\t\t\t<svg width=\"100\" viewBox=\"0 0 102 8\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t<rect class=\"background\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"3\" width=\"100\"></rect>\n\t\t\t\t\t\t\t<rect\n\t\t\t\t\t\t\t\tclass=\"progress\"\n\t\t\t\t\t\t\t\tx=\"2.5\"\n\t\t\t\t\t\t\t\ty=\"2.5\"\n\t\t\t\t\t\t\t\theight=\"7\"\n\t\t\t\t\t\t\t\trx=\"3.5\"\n\t\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tstroke-width=\"3\"\n\t\t\t\t\t\t\t\twidth={95 * (state._value / state._max)}\n\t\t\t\t\t\t\t></rect>\n\t\t\t\t\t\t\t<rect class=\"border\" x=\"1\" y=\"1\" height=\"10\" rx=\"5\" fill=\"currentColor\" stroke=\"currentColor\" stroke-width=\"1\" width=\"100\"></rect>\n\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t<text aria-hidden=\"true\" text-anchor=\"middle\" dominant-baseline=\"central\" fill=\"currentColor\">\n\t\t\t\t\t\t\t{state._value}\n\t\t\t\t\t\t\t{state._unit}\n\t\t\t\t\t\t</text>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t}\n};\n\n@Component({\n\ttag: 'kol-progress',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolProcess implements KoliBriProgressAPI {\n\tprivate interval?: NodeJS.Timer;\n\n\t// https://dequeuniversity.com/library/aria/progress-bar-bounded\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{createProgressSVG(this.state)}\n\t\t\t\t<progress aria-busy={this.state._value < this.state._max ? 'true' : 'false'} max={this.state._max} value={this.state._value}></progress>\n\t\t\t\t<span aria-live=\"polite\" aria-relevant=\"removals text\" hidden>\n\t\t\t\t\t{this.state._liveValue} von {this.state._max} {this.state._unit}\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Gibt an, bei welchem Wert die Fortschrittsanzeige abgeschlossen ist.\n\t */\n\t@Prop() public _max!: number;\n\n\t/**\n\t * Deprecated: Gibt an, ob der Prozess als Balken oder Kreis dargestellt wird.\n\t * @deprecated will be removed in v2, use _variant\n\t */\n\t@Prop() public _type?: KoliBriProgressType;\n\n\t/**\n\t * Setzt die Einheit der Fortschrittswerte. (wird nicht angezeigt)\n\t */\n\t@Prop() public _unit?: string = '%';\n\n\t/**\n\t * Gibt an, wie weit die Anzeige fortgeschritten ist.\n\t */\n\t@Prop() public _value!: number;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriProgressType;\n\n\t@State() public state: KoliBriProgressStates = {\n\t\t_max: 100,\n\t\t_unit: '%',\n\t\t_value: 0,\n\t\t_variant: 'bar',\n\t\t_liveValue: 0,\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\twatchString(this, '_label', 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?: KoliBriProgressType): 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?: KoliBriProgressType): void {\n\t\tif (!value && this._type) {\n\t\t\t// remove with v2\n\t\t\tvalue = this._type;\n\t\t}\n\t\tif (value !== 'cycle') {\n\t\t\tvalue = 'bar';\n\t\t}\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_variant: value as KoliBriProgressType,\n\t\t};\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateMax(this._max);\n\t\tthis.validateUnit(this._unit);\n\t\tthis.validateValue(this._value);\n\t\tthis.validateVariant(this._variant || this._type);\n\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state._liveValue !== this.state._value) {\n\t\t\t\tthis.state = {\n\t\t\t\t\t...this.state,\n\t\t\t\t\t_liveValue: this.state._value,\n\t\t\t\t};\n\t\t\t}\n\t\t}, 5000);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tclearInterval(this.interval);\n\t}\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","watchString","this","validateHref","required","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_caption","render","hideExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_label","_target"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/shadow.tsx"],"sourcesContent":["@import 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 { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { ComponentApi, KoliBriQuoteVariant, States } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements ComponentApi {\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * Gibt den Link zur Quelle des Zitates an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt den Text, also das Zitat selbst.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: States = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mOAAA,MAAMA,EAAkB,85B,MCWXC,EAAQ,M,0GAmB4B,S,WAEhB,CAC/BC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJC,gBAAgBC,GACtBC,EAAYC,KAAM,WAAYF,E,CAIxBG,aAAaH,GACnBC,EAAYC,KAAM,QAASF,EAAO,CACjCI,SAAU,M,CAKLC,cAAcL,GACpBC,EAAYC,KAAM,SAAUF,EAAO,CAClCI,SAAU,M,CAKLE,gBAAgBN,GACtBO,EAAeL,KAAM,YAAaF,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIQ,IAAI,CAAC,QAAS,WAAYR,E,CAG7GS,oBACNP,KAAKH,gBAAgBG,KAAKQ,UAC1BR,KAAKC,aAAaD,KAAKN,OACvBM,KAAKG,cAAcH,KAAKL,QACxBK,KAAKI,gBAAgBJ,KAAKJ,S,CAGpBa,SACN,MAAMC,EAAiBV,KAAKW,MAAMhB,SAAW,GAC7C,OACCiB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAACd,KAAKW,MAAMf,UAAW,OAGvBI,KAAKW,MAAMf,WAAa,QACxBgB,EAAA,cAAYG,KAAMf,KAAKW,MAAMjB,OAC3BM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMf,KAAKW,MAAMjB,OAClBM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,oBAINlB,KAAKW,MAAMH,WAAa,UAAYR,KAAKW,MAAMH,SAASW,OAAS,GACxEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUlB,MAAOM,KAAKW,MAAMjB,MAAO0B,OAAQpB,KAAKW,MAAMH,SAAUa,QAAQ,c"}
+{"version":3,"names":["defaultStyleCss","KolQuote","_href","_quote","_variant","validateCaption","value","watchString","this","validateHref","required","validateQuote","validateVariant","watchValidator","Set","componentWillLoad","_caption","render","hideExpertSlot","state","h","Host","class","cite","undefined","hidden","name","length","_label","_target"],"sources":["./src/components/quote/style.css?tag=kol-quote&mode=default&encapsulation=shadow","./src/components/quote/shadow.tsx"],"sourcesContent":["@import 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 { h, Component, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { watchString, watchValidator } from '../../utils/prop.validators';\nimport { KoliBriQuoteApi, KoliBriQuoteStates, KoliBriQuoteVariant } from './types';\n\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements KoliBriQuoteApi {\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _caption?: string;\n\n\t/**\n\t * Gibt den Link zur Quelle des Zitates an.\n\t */\n\t@Prop() public _href!: string;\n\n\t/**\n\t * Setzt den Text, also das Zitat selbst.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: KoliBriQuoteStates = {\n\t\t_href: '…', // ⚠ required\n\t\t_quote: '…', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_caption')\n\tpublic validateCaption(value?: string): void {\n\t\twatchString(this, '_caption', value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: string): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(this, '_variant', (value) => value === 'block' || value === 'inline', new Set(['block', 'inline']), value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateCaption(this._caption);\n\t\tthis.validateHref(this._href);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._quote !== '';\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._caption === 'string' && this.state._caption.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<kol-link _href={this.state._href} _label={this.state._caption} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"mappings":";;;mOAAA,MAAMA,EAAkB,85B,MCWXC,EAAQ,M,0GAmB4B,S,WAEJ,CAC3CC,MAAO,IACPC,OAAQ,IACRC,SAAU,S,CAIJC,gBAAgBC,GACtBC,EAAYC,KAAM,WAAYF,E,CAIxBG,aAAaH,GACnBC,EAAYC,KAAM,QAASF,EAAO,CACjCI,SAAU,M,CAKLC,cAAcL,GACpBC,EAAYC,KAAM,SAAUF,EAAO,CAClCI,SAAU,M,CAKLE,gBAAgBN,GACtBO,EAAeL,KAAM,YAAaF,GAAUA,IAAU,SAAWA,IAAU,UAAU,IAAIQ,IAAI,CAAC,QAAS,WAAYR,E,CAG7GS,oBACNP,KAAKH,gBAAgBG,KAAKQ,UAC1BR,KAAKC,aAAaD,KAAKN,OACvBM,KAAKG,cAAcH,KAAKL,QACxBK,KAAKI,gBAAgBJ,KAAKJ,S,CAGpBa,SACN,MAAMC,EAAiBV,KAAKW,MAAMhB,SAAW,GAC7C,OACCiB,EAACC,EAAI,KACJD,EAAA,UACCE,MAAO,CACN,CAACd,KAAKW,MAAMf,UAAW,OAGvBI,KAAKW,MAAMf,WAAa,QACxBgB,EAAA,cAAYG,KAAMf,KAAKW,MAAMjB,OAC3BM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,aAIbN,EAAA,KAAGG,KAAMf,KAAKW,MAAMjB,OAClBM,KAAKW,MAAMhB,OACZiB,EAAA,sBAAmBF,EAAiB,OAASM,UAAWC,OAAQP,GAC/DE,EAAA,QAAMM,KAAK,oBAINlB,KAAKW,MAAMH,WAAa,UAAYR,KAAKW,MAAMH,SAASW,OAAS,GACxEP,EAAA,kBACCA,EAAA,YACCA,EAAA,YAAUlB,MAAOM,KAAKW,MAAMjB,MAAO0B,OAAQpB,KAAKW,MAAMH,SAAUa,QAAQ,c"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as t,H as e,r as i,g as s}from"./index-6ad587d0.js";import{n as a}from"./dev.utils-157f0499.js";import{S as n,a as l}from"./reuse-3a02afb9.js";import{g as r}from"./controller-cc18d25f.js";import{w as o,d as h,b as d,e as u}from"./prop.validators-f81af56e.js";import{I as p}from"./controller-icon-65f3377a.js";import{f as c}from"./controller-5a459788.js";import{a as f}from"./a11y.tipps-2e27f8e6.js";import{h as v,c as b}from"./label-559ca626.js";import"./tab-index-ff5374b8.js";import"./index-ff788b4b.js";import"./icon-83ced735.js";const m=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===v(t.label,3)&&!1===b(t.label)&&f(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===m(t)));if("number"==typeof t.label)return!0}return!1};class y extends p{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),c(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){o(this.component,"_height",t)}validateList(t){h(this.component,"_list",m,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){d(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){d(this.component,"_required",t)}validateSize(t){u(this.component,"_size",t,{min:1})}validateValue(t){h(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(n)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const _=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){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}",g=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const l=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,l):t("option",{disabled:!0===e.disabled,key:l,selected:g(this.state._value,e.value),value:l},e.label)})))}render(){const{ariaDescribedBy:i}=r(this.state),a=""===this.state._label,l="…"===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):l?t("slot",null):this.state._label),t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:g(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,l(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:a(),_label:"…",_list:[],_multiple:!1,_value:[]},this.controller=new y(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}validateTabIndex(t){this.controller.validateTabIndex(t)}validateTouched(t){this.controller.validateTouched(t)}validateValue(t){this.controller.validateValue(t)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(this.onChange),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"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:_};export{x as kol_select};
+import{h as t,H as e,r as i,g as s}from"./index-6ad587d0.js";import{n as a}from"./dev.utils-157f0499.js";import{S as l,a as n}from"./reuse-3a02afb9.js";import{g as r}from"./controller-8fc78dec.js";import{w as o,d as h,b as d,e as u}from"./prop.validators-f81af56e.js";import{I as p}from"./controller-icon-7e3b404f.js";import{f as c}from"./controller-60d1d5f4.js";import{a as f}from"./a11y.tipps-2e27f8e6.js";import{h as v,c as y}from"./label-559ca626.js";import"./tab-index-ff5374b8.js";import"./index-ff788b4b.js";import"./icon-83ced735.js";const b=t=>{if("object"==typeof t&&null!==t){if("string"==typeof t.label&&t.label.length>0)return t.disabled=!0===t.disabled,t.label=`${t.label}`.trim(),!1===v(t.label,3)&&!1===y(t.label)&&f(`Ein abweichendes Aria-Label (${t.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`),!Array.isArray(t.options)||void 0===t.options.find((t=>!1===b(t)));if("number"==typeof t.label)return!0}return!1};class m extends p{constructor(t,e,i){super(t,e,i),this.keyOptionMap=new Map,this.getOptionByKey=t=>this.keyOptionMap.get(t),this.isValueInOptions=(t,e)=>void 0!==e.find((e=>"string"==typeof e.value?e.value===t:!!Array.isArray(e.options)&&this.isValueInOptions(t,e.options))),this.filterValuesInOptions=(t,e)=>t.filter((t=>void 0!==this.isValueInOptions(t,e))),this.beforePatchListValue=(t,e)=>{const i=e.has("_list")?e.get("_list"):this.component.state._list;if(Array.isArray(i)&&i.length>0){this.keyOptionMap.clear(),c(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){o(this.component,"_height",t)}validateList(t){h(this.component,"_list",b,t,void 0,{hooks:{beforePatch:this.beforePatchListValue}})}validateMultiple(t){d(this.component,"_multiple",t,{hooks:{beforePatch:this.beforePatchListValue}})}validateRequired(t){d(this.component,"_required",t)}validateSize(t){u(this.component,"_size",t,{min:1})}validateValue(t){h(this.component,"_value",(()=>!0),t,void 0,{hooks:{beforePatch:this.beforePatchListValue}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(t){super.componentWillLoad(),this.onStateChange=()=>{if("function"==typeof t){const e=setTimeout((()=>{clearTimeout(e),t(l)}))}},this.validateHeight(this.component._height),this.validateList(this.component._list),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateSize(this.component._size),this.validateValue(this.component._value)}}const _=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}.required label>span::after,.required legend>span::after{content:'*'}:host{display:block}input,textarea{cursor:text}input[type='checkbox'],input[type='color'],input[type='file'],input[type='radio'],input[type='range'],label,option,select{cursor:pointer}input[type='color'],input[type='date'],input[type='datetime-local'],input[type='email'],input[type='file'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='time'],input[type='url'],input[type='week'],select:not([multiple]),select[multiple] option,textarea{font-size:1rem;width:100%}input[type='file']{padding:calc((var(--a11y-min-size) - 1rem) / 10) 0.5em}select[multiple] option{padding:calc((var(--a11y-min-size) - 1rem) / 2) 0.5em}kol-input.disabled :is(button,input,label,option,select,textarea){cursor:not-allowed;opacity:0.5}kol-input{display:grid}kol-input [slot='input']{flex-grow:1}input:not([type='checkbox'],[type='radio']),select:not([multiple]){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}",g=(t,e)=>Array.isArray(t)&&t.includes(e),x=class{renderOptgroup(e,i){var a;return t("optgroup",{disabled:!0===e.disabled,label:e.label},null===(a=e.options)||void 0===a?void 0:a.map(((e,a)=>{const l=`${i}-${a}`;return Array.isArray(e.options)?this.renderOptgroup(e,l):t("option",{disabled:!0===e.disabled,key:l,selected:g(this.state._value,e.value),value:l},e.label)})))}render(){const{ariaDescribedBy:i}=r(this.state),a=""===this.state._label,l="…"===this.state._label;return t(e,{class:{"has-value":this.state._hasValue}},t("kol-input",{class:{select:!0},_disabled:this.state._disabled,_error:this.state._error,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icon:this.state._icon,_id:this.state._id,_required:this.state._required,_touched:this.state._touched,onClick:()=>{var t;return null===(t=this.ref)||void 0===t?void 0:t.focus()}},t("span",{slot:"label"},a?t("slot",{name:"expert"}):l?t("slot",null):this.state._label),t("select",Object.assign({ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-labelledby":`${this.state._id}-label`,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._size,slot:"input",spellcheck:"false",style:{height:this.state._height}},{onClick:this.controller.onFacade.onClick,onBlur:this.controller.onFacade.onBlur,onFocus:this.controller.onFacade.onFocus},{onChange:this.onChange}),this.state._list.map(((e,i)=>{const a=`-${i}`;return Array.isArray(e.options)?this.renderOptgroup(e,a):t("option",{disabled:!0===e.disabled,key:a,selected:g(this.state._value,e.value),value:a},e.label)})))))}constructor(t){i(this,t),this.catchRef=t=>{this.ref=t,n(this.host,this.ref)},this.onChange=t=>{var e,i;this._value=Array.from((null===(e=this.ref)||void 0===e?void 0:e.options)||[]).filter((t=>!0===t.selected)).map((t=>{var e;return null===(e=this.controller.getOptionByKey(t.value))||void 0===e?void 0:e.value})),this.controller.setFormAssociatedValue(this._value),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onChange)&&this.state._on.onChange(t,this._value)},this._accessKey=void 0,this._alert=!0,this._disabled=void 0,this._error=void 0,this._height=void 0,this._hideLabel=void 0,this._hint="",this._icon=void 0,this._id=void 0,this._label=void 0,this._list=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._required=void 0,this._size=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_height:"",_id:a(),_label:"…",_list:[],_multiple:!1,_value:[]},this.controller=new m(this,"textarea",this.host)}validateAccessKey(t){this.controller.validateAccessKey(t)}validateAlert(t){this.controller.validateAlert(t)}validateDisabled(t){this.controller.validateDisabled(t)}validateError(t){this.controller.validateError(t)}validateHeight(t){this.controller.validateHeight(t)}validateHideLabel(t){this.controller.validateHideLabel(t)}validateHint(t){this.controller.validateHint(t)}validateIcon(t){this.controller.validateIcon(t)}validateId(t){this.controller.validateId(t)}validateLabel(t){this.controller.validateLabel(t)}validateList(t){this.controller.validateList(t)}validateMultiple(t){this.controller.validateMultiple(t)}validateName(t){this.controller.validateName(t)}validateOn(t){this.controller.validateOn(t)}validateRequired(t){this.controller.validateRequired(t)}validateSize(t){this.controller.validateSize(t)}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"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icon:["validateIcon"],_id:["validateId"],_label:["validateLabel"],_list:["validateList"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_size:["validateSize"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};x.style={default:_};export{x as kol_select};

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

@@ -1 +1 @@
-{"version":3,"names":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDescribedBy","getRenderStates","showExpertSlot","_label","showDefaultSlot","Host","class","_hasValue","select","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","onClick","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\tlist[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})}\n\t\t\t\t\t</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop({ reflect: true }) public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop({ reflect: true }) public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Macht das Eingabeelement zu einem Pflichtfeld.\n\t */\n\t@Prop({ reflect: true }) public _required?: boolean;\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 * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): 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.controller.validateList(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(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\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":";;;8hBAIO,MAAMA,EAA8BC,IAC1C,UAAWA,IAAW,UAAYA,IAAW,KAAM,CAClD,UAAWA,EAAOC,QAAU,UAAYD,EAAOC,MAAMC,OAAS,EAAG,CAChEF,EAAOG,SAAWH,EAAOG,WAAa,KACtCH,EAAOC,MAAQ,GAAGD,EAAOC,QAAQG,OACjC,GAAIC,EAAuBL,EAAOC,MAAO,KAAO,OAASK,EAAoBN,EAAOC,SAAW,MAAO,CACrGM,EACC,gCAAgCP,EAAOC,mH,CAGzC,GAAIO,MAAMC,QAAST,EAAuBU,SAAU,CACnD,OACEV,EAAuBU,QAAQC,MAAMC,GAC9Bb,EAAwBa,KAAU,UACnCC,S,CAGT,OAAO,I,MACD,UAAWb,EAAOC,QAAU,SAAU,CAC5C,OAAO,I,EAGT,OAAO,KAAK,E,MCfAa,UAAyBC,EAKrCC,YAAmBC,EAA8CC,EAAcC,GAC9EC,MAAMH,EAAWC,EAAMC,GAHPE,KAAAC,aAAe,IAAIC,IAOpBF,KAAAG,eAAkBC,GAAmDJ,KAAKC,aAAaI,IAAID,GAE1FJ,KAAAM,iBAAmB,CAACC,EAAelB,IAElDA,EAAQC,MAAMX,UACLA,EAAiC4B,QAAU,SAC/C5B,EAAiC4B,QAAUA,EAC5CpB,MAAMC,QAAST,EAA4BU,SAC3CW,KAAKM,iBAAiBC,EAAQ5B,EAA4BU,SAC1D,UACEG,UAISQ,KAAAQ,sBAAwB,CAACC,EAAkBpB,IACpDoB,EAAOC,QAAQH,GAAUP,KAAKM,iBAAiBC,EAAOlB,KAAaG,YAG1DQ,KAAAW,qBAAuB,CAACC,EAAiBC,KACzD,MAAMC,EAAOD,EAAUE,IAAI,SAAWF,EAAUR,IAAI,SAAWL,KAAKJ,UAAUoB,MAAMC,MACpF,GAAI9B,MAAMC,QAAQ0B,IAASA,EAAKjC,OAAS,EAAG,CAC3CmB,KAAKC,aAAaiB,QAClBC,EAAiBnB,KAAKC,aAAca,GACpC,MAAMP,EAAQM,EAAUE,IAAI,UAAYF,EAAUR,IAAI,UAAYL,KAAKJ,UAAUoB,MAAMJ,OACvF,MAAMQ,EAAWpB,KAAKQ,sBAAsBrB,MAAMC,QAAQmB,IAAUA,EAAM1B,OAAS,EAAK0B,EAAqB,GAAIO,GACjH,GAAId,KAAKJ,UAAUyB,YAAc,OAASD,EAASvC,SAAW,EAAG,CAChEgC,EAAUS,IAAI,SAAU,CAEtBR,EAAK,GAGJP,QAEHP,KAAKuB,e,MACC,GAAIpC,MAAMC,QAAQmB,IAAUa,EAASvC,OAAS0B,EAAM1B,OAAQ,CAClEgC,EAAUS,IAAI,SAAUF,GACxBpB,KAAKuB,e,IAvCPvB,KAAKJ,UAAYA,C,CAgDX4B,eAAejB,GACrBkB,EAAYzB,KAAKJ,UAAW,UAAWW,E,CAGjCmB,aAAgBnB,GACtBoB,EAAqB3B,KAAKJ,UAAW,QAASlB,EAAyB6B,EAAOf,UAAW,CACxFoC,MAAO,CACNC,YAAa7B,KAAKW,uB,CAKdmB,iBAAiBvB,GACvBwB,EAAa/B,KAAKJ,UAAW,YAAaW,EAAO,CAChDqB,MAAO,CACNC,YAAa7B,KAAKW,uB,CAWdqB,iBAAiBzB,GACvBwB,EAAa/B,KAAKJ,UAAW,YAAaW,E,CAGpC0B,aAAa1B,GACnB2B,EAAYlC,KAAKJ,UAAW,QAASW,EAAO,CAC3C4B,IAAK,G,CAIAC,cAAc7B,GACpBoB,EAAqB3B,KAAKJ,UAAW,UAAU,IAAM,MAAMW,EAAOf,UAAW,CAC5EoC,MAAO,CACNC,YAAa7B,KAAKW,wBAGpBX,KAAKqC,uBAAuBrC,KAAKJ,UAAUgB,O,CAGrC0B,kBAAkBC,GACxBxC,MAAMuC,oBAENtC,KAAKuB,cAAgB,KACpB,UAAWgB,IAAa,WAAY,CACnC,MAAMC,EAAUC,YAAW,KAC1BC,aAAaF,GACbD,EAASI,EAAmB,G,GAK/B3C,KAAKwB,eAAexB,KAAKJ,UAAUgD,SACnC5C,KAAK0B,aAAa1B,KAAKJ,UAAUqB,OACjCjB,KAAK8B,iBAAiB9B,KAAKJ,UAAUyB,WACrCrB,KAAKgC,iBAAiBhC,KAAKJ,UAAUiD,WACrC7C,KAAKiC,aAAajC,KAAKJ,UAAUkD,OACjC9C,KAAKoC,cAAcpC,KAAKJ,UAAUgB,O,EChIpC,MAAMmC,EAAkB,21DCYxB,MAAMC,EAAa,CAACC,EAA6BC,IACzC/D,MAAMC,QAAQ6D,IAAcA,EAAUE,SAASD,G,MAa1CE,EAAS,MASbC,eAAeC,EAA4BC,G,MAClD,OACCC,EAAA,YAAU1E,SAAUwE,EAASxE,WAAa,KAAMF,MAAO0E,EAAS1E,QAC9D6E,EAAAH,EAASjE,WAAO,MAAAoE,SAAA,SAAAA,EAAEC,KAAI,CAAC/E,EAAqCgF,KAC5D,MAAMvD,EAAM,GAAGmD,KAAUI,IACzB,GAAIxE,MAAMC,QAAST,EAA4BU,SAAU,CACxD,OAAOW,KAAKqD,eAAe1E,EAA4ByB,E,KACjD,CACN,OACCoD,EAAA,UACC1E,SAAUH,EAAOG,WAAa,KAC9BsB,IAAKA,EAELgB,SAAU4B,EAAWhD,KAAKgB,MAAMJ,OAASjC,EAAiC4B,OAC1EA,MAAOH,GAENzB,EAAOC,M,MASRgF,SACN,MAAMC,gBAAEA,GAAoBC,EAAgB9D,KAAKgB,OACjD,MAAM+C,EAAiB/D,KAAKgB,MAAMgD,SAAW,GAC7C,MAAMC,EAAkBjE,KAAKgB,MAAMgD,SAAW,IAC9C,OACCR,EAACU,EAAI,CACJC,MAAO,CACN,YAAanE,KAAKgB,MAAMoD,YAGzBZ,EAAA,aACCW,MAAO,CACNE,OAAQ,MAETC,UAAWtE,KAAKgB,MAAMsD,UACtBC,OAAQvE,KAAKgB,MAAMuD,OACnBC,WAAYxE,KAAKgB,MAAMwD,WACvBC,MAAOzE,KAAKgB,MAAMyD,MAClBC,MAAO1E,KAAKgB,MAAM0D,MAClBC,IAAK3E,KAAKgB,MAAM2D,IAChB9B,UAAW7C,KAAKgB,MAAM6B,UACtB+B,SAAU5E,KAAKgB,MAAM4D,SACrBC,QAAS,SAAApB,EAAM,OAAAA,EAAAzD,KAAK8E,OAAG,MAAArB,SAAA,SAAAA,EAAEsB,OAAO,GAEhCvB,EAAA,QAAMwB,KAAK,SAASjB,EAAiBP,EAAA,QAAM3D,KAAK,WAAmBoE,EAAkBT,EAAA,aAAgBxD,KAAKgB,MAAMgD,QAChHR,EAAA,SAAAyB,OAAAC,OAAA,CACCJ,IAAK9E,KAAKmF,SACVC,MAAM,GACNC,UAAWrF,KAAKgB,MAAMsE,WAAU,mBACdzB,EAAgBhF,OAAS,EAAIgF,EAAgB0B,KAAK,KAAO/F,UAAS,kBACnE,GAAGQ,KAAKgB,MAAM2D,YAC/Ba,eAAe,MACfC,YAAY,MACZ3G,SAAUkB,KAAKgB,MAAMsD,UACrBoB,GAAI1F,KAAKgB,MAAM2D,IACfgB,SAAU3F,KAAKgB,MAAMK,UACrBxB,KAAMG,KAAKgB,MAAM4E,MACjBC,SAAU7F,KAAKgB,MAAM6B,UACrBiD,KAAM9F,KAAKgB,MAAM8B,MACjBkC,KAAK,QACLe,WAAW,QACXC,MAAO,CACNC,OAAQjG,KAAKgB,MAAM4B,UAEhB,CACHiC,QAAS7E,KAAKkG,WAAWC,SAAStB,QAClCuB,OAAQpG,KAAKkG,WAAWC,SAASC,OACjCC,QAASrG,KAAKkG,WAAWC,SAASE,SAClC,CACD9D,SAAUvC,KAAKuC,WAEdvC,KAAKgB,MAAMC,MAAMyC,KAAI,CAAC/E,EAAQgF,KAM9B,MAAMvD,EAAM,IAAIuD,IAChB,GAAIxE,MAAMC,QAAST,EAAuCU,SAAU,CACnE,OAAOW,KAAKqD,eAAe1E,EAAuCyB,E,KAC5D,CACN,OACCoD,EAAA,UACC1E,SAAUH,EAAOG,WAAa,KAC9BsB,IAAKA,EAELgB,SAAU4B,EAAWhD,KAAKgB,MAAMJ,OAASjC,EAA4C4B,OACrFA,MAAOH,GAENzB,EAAOC,M,QAwHjBe,YAAA2G,G,UA3NiBtG,KAAAmF,SAAYL,IAC5B9E,KAAK8E,IAAMA,EACXyB,EAAevG,KAAKF,KAAME,KAAK8E,IAAI,EAqU5B9E,KAAAuC,SAAYiE,I,QAInBxG,KAAKY,OAASzB,MAAMsH,OAAKhD,EAAAzD,KAAK8E,OAAG,MAAArB,SAAA,SAAAA,EAAEpE,UAAW,IAC5CqB,QAAQ/B,GAAWA,EAAOyC,WAAa,OACvCsC,KAAK/E,IAAM,IAAA8E,EAAK,OAAAA,EAAAzD,KAAKkG,WAAW/F,eAAexB,EAAO4B,UAAM,MAAAkD,SAAA,SAAAA,EAAElD,KAAe,IAC/EP,KAAKkG,WAAW7D,uBAAuBrC,KAAKY,QAC5C,WAAW8F,EAAA1G,KAAKgB,MAAM2F,OAAG,MAAAD,SAAA,SAAAA,EAAEnE,YAAa,WAAY,CACnDvC,KAAKgB,MAAM2F,IAAIpE,SAASiE,EAAOxG,KAAKY,O,yCAxN4B,K,2GA2BlC,G,kGAyBsB,M,6HA8Bc,M,iCAOpC,CAC/BwD,UAAW,MACXxB,QAAS,GACT+B,IAAKiC,IACL5C,OAAQ,IACR/C,MAAO,GACPI,UAAW,MACXT,OAAQ,IAIRZ,KAAKkG,WAAa,IAAIzG,EAAiBO,KAAM,WAAYA,KAAKF,K,CAIxD+G,kBAAkBtG,GACxBP,KAAKkG,WAAWW,kBAAkBtG,E,CAI5BuG,cAAcvG,GACpBP,KAAKkG,WAAWY,cAAcvG,E,CAIxBwG,iBAAiBxG,GACvBP,KAAKkG,WAAWa,iBAAiBxG,E,CAI3ByG,cAAczG,GACpBP,KAAKkG,WAAWc,cAAczG,E,CAIxBiB,eAAejB,GACrBP,KAAKkG,WAAW1E,eAAejB,E,CAIzB0G,kBAAkB1G,GACxBP,KAAKkG,WAAWe,kBAAkB1G,E,CAI5B2G,aAAa3G,GACnBP,KAAKkG,WAAWgB,aAAa3G,E,CAIvB4G,aAAa5G,GACnBP,KAAKkG,WAAWiB,aAAa5G,E,CAIvB6G,WAAW7G,GACjBP,KAAKkG,WAAWkB,WAAW7G,E,CAIrB8G,cAAc9G,GACpBP,KAAKkG,WAAWmB,cAAc9G,E,CAIxBmB,aAAanB,GACnBP,KAAKkG,WAAWxE,aAAanB,E,CAIvBuB,iBAAiBvB,GACvBP,KAAKkG,WAAWpE,iBAAiBvB,E,CAI3B+G,aAAa/G,GACnBP,KAAKkG,WAAWoB,aAAa/G,E,CAIvBgH,WAAWhH,GACjBP,KAAKkG,WAAWqB,WAAWhH,E,CAIrByB,iBAAiBzB,GACvBP,KAAKkG,WAAWlE,iBAAiBzB,E,CAI3B0B,aAAa1B,GACnBP,KAAKkG,WAAWjE,aAAa1B,E,CAIvBiH,iBAAiBjH,GACvBP,KAAKkG,WAAWsB,iBAAiBjH,E,CAI3BkH,gBAAgBlH,GACtBP,KAAKkG,WAAWuB,gBAAgBlH,E,CAI1B6B,cAAc7B,GACpBP,KAAKkG,WAAW9D,cAAc7B,E,CAGxB+B,oBACNtC,KAAK0H,OAAS1H,KAAK0H,SAAW,KAC9B1H,KAAK4E,SAAW5E,KAAK4E,WAAa,KAClC5E,KAAKkG,WAAW5D,kBAAkBtC,KAAKuC,UAEvCvC,KAAKgB,MAAMoD,YAAcpE,KAAKgB,MAAMJ,OACpCZ,KAAKkG,WAAWyB,wBAAwBC,GAAO5H,KAAKgB,MAAMoD,YAAcwD,G"}
+{"version":3,"names":["validateInputSelectList","option","label","length","disabled","trim","hasEnoughReadableChars","containsOnlyNumbers","a11yHint","Array","isArray","options","find","item","undefined","SelectController","InputIconController","constructor","component","name","host","super","this","keyOptionMap","Map","getOptionByKey","key","get","isValueInOptions","value","filterValuesInOptions","values","filter","beforePatchListValue","_value","nextState","list","has","state","_list","clear","fillKeyOptionMap","selected","_multiple","set","onStateChange","validateHeight","watchString","validateList","watchJsonArrayString","hooks","beforePatch","validateMultiple","watchBoolean","validateRequired","validateSize","watchNumber","min","validateValue","setFormAssociatedValue","componentWillLoad","onChange","timeout","setTimeout","clearTimeout","STATE_CHANGE_EVENT","_height","_required","_size","defaultStyleCss","isSelected","valueList","optionValue","includes","KolSelect","renderOptgroup","optgroup","preKey","h","_a","map","index","render","ariaDescribedBy","getRenderStates","showExpertSlot","_label","showDefaultSlot","Host","class","_hasValue","select","_disabled","_error","_hideLabel","_hint","_icon","_id","_touched","onClick","ref","focus","slot","Object","assign","catchRef","title","accessKey","_accessKey","join","autoCapitalize","autoCorrect","id","multiple","_name","required","size","spellcheck","style","height","controller","onFacade","onBlur","onFocus","hostRef","propagateFocus","event","from","_b","_on","nonce","validateAccessKey","validateAlert","validateDisabled","validateError","validateHideLabel","validateHint","validateIcon","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v"],"sources":["./src/utils/validators/list.ts","./src/components/select/controller.ts","./src/components/select/style.css?tag=kol-select&mode=default&encapsulation=shadow","./src/components/select/component.tsx"],"sourcesContent":["import { Optgroup, SelectOption } from '../../types/input/types';\nimport { a11yHint } from '../a11y.tipps';\nimport { containsOnlyNumbers, hasEnoughReadableChars } from '../../types/props/label';\n\nexport const validateInputSelectList = <T>(option: SelectOption<T>): boolean => {\n\tif (typeof option === 'object' && option !== null) {\n\t\tif (typeof option.label === 'string' && option.label.length > 0) {\n\t\t\toption.disabled = option.disabled === true;\n\t\t\toption.label = `${option.label}`.trim();\n\t\t\tif (hasEnoughReadableChars(option.label, 3) === false && containsOnlyNumbers(option.label) === false) {\n\t\t\t\ta11yHint(\n\t\t\t\t\t`Ein abweichendes Aria-Label (${option.label}) ist nicht barrierefrei. Ein abweichendes Aria-Label sollte aus mindestens drei lesbaren Zeichen bestehen.`\n\t\t\t\t);\n\t\t\t}\n\t\t\tif (Array.isArray((option as Optgroup<T>).options)) {\n\t\t\t\treturn (\n\t\t\t\t\t(option as Optgroup<T>).options.find((item) => {\n\t\t\t\t\t\treturn validateInputSelectList(item) === false;\n\t\t\t\t\t}) === undefined\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn true;\n\t\t} else if (typeof option.label === 'number') {\n\t\t\treturn true;\n\t\t}\n\t}\n\treturn false;\n};\n","import { Generic } from '@a11y-ui/core';\nimport { Stringified } from '../../types/common';\nimport { Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { watchBoolean, watchJsonArrayString, watchNumber, watchString } from '../../utils/prop.validators';\nimport { STATE_CHANGE_EVENT } from '../../utils/validator';\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\nimport { Props, Watches } from './types';\nimport { validateInputSelectList } from '../../utils/validators/list';\n\nexport class SelectController extends InputIconController implements Watches {\n\tprotected readonly component: Generic.Element.Component & Props;\n\tprivate onStateChange!: () => void;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & Props, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t: false\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprivate readonly beforePatchListValue = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst list = nextState.has('_list') ? nextState.get('_list') : this.component.state._list;\n\t\tif (Array.isArray(list) && list.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, list as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(Array.isArray(value) && value.length > 0 ? (value as string[]) : [], list as SelectOption<W3CInputValue>[]);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\tlist[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t\tthis.onStateChange();\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t\tthis.onStateChange();\n\t\t\t}\n\t\t}\n\t};\n\n\t/**\n\t * @see: components/abbr/component.tsx (@Watch)\n\t * @deprecated Use _size instead.\n\t */\n\tpublic validateHeight(value?: string): void {\n\t\twatchString(this.component, '_height', value);\n\t}\n\n\tpublic validateList<T>(value?: SelectOption<T>[] | string): void {\n\t\twatchJsonArrayString(this.component, '_list', validateInputSelectList, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Aktuell wird die Mehrfachauswahl noch nicht unterstützt. Wir sind dran die Mehrfachauswahl funktionsfähig zu implementieren, da der Browser-Standard hier ein paar Lücken hat.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] Bei der Mehrfachauswahl sollte zusätzlich auch die Listenlänge (size) gesetzt werden.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateSize(value?: number): void {\n\t\twatchNumber(this.component, '_size', value, {\n\t\t\tmin: 1,\n\t\t});\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.beforePatchListValue,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value as string);\n\t}\n\n\tpublic componentWillLoad(onChange?: (event: Event) => void): void {\n\t\tsuper.componentWillLoad();\n\n\t\tthis.onStateChange = () => {\n\t\t\tif (typeof onChange === 'function') {\n\t\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\t\tclearTimeout(timeout);\n\t\t\t\t\tonChange(STATE_CHANGE_EVENT);\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tthis.validateHeight(this.component._height);\n\t\tthis.validateList(this.component._list);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSize(this.component._size);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import url(../input-line.css);\n","import { Component, Element, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriHorizontalIcon } from '../../types/icon';\nimport { InputTypeOnDefault, Optgroup, Option, SelectOption } from '../../types/input/types';\nimport { W3CInputValue } from '../../types/w3c';\nimport { nonce } from '../../utils/dev.utils';\nimport { propagateFocus } from '../../utils/reuse';\nimport { getRenderStates } from '../input/controller';\nimport { SelectController } from './controller';\nimport { ComponentApi, States } from './types';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements ComponentApi {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate ref?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled === true} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst showExpertSlot = this.state._label === ''; // _label=\"\" or _label\n\t\tconst showDefaultSlot = this.state._label === '…'; // deprecated: default slot will be removed in v2.0.0\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<kol-input\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_error={this.state._error}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icon={this.state._icon}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">{showExpertSlot ? <slot name=\"expert\"></slot> : showDefaultSlot ? <slot></slot> : this.state._label}</span>\n\t\t\t\t\t<select\n\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\taria-labelledby={`${this.state._id}-label`}\n\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\tsize={this.state._size}\n\t\t\t\t\t\tslot=\"input\"\n\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: this.state._height,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t{...{\n\t\t\t\t\t\t\tonClick: this.controller.onFacade.onClick,\n\t\t\t\t\t\t\tonBlur: this.controller.onFacade.onBlur,\n\t\t\t\t\t\t\tonFocus: this.controller.onFacade.onFocus,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonChange={this.onChange}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.state._list.map((option, index) => {\n\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled === true}\n\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t})}\n\t\t\t\t\t</select>\n\t\t\t\t</kol-input>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Gibt an, mit welcher Tastenkombination man das interaktive Element der Komponente auslösen oder fokussieren kann.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\n\n\t/**\n\t * Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.\n\t */\n\t@Prop() public _disabled?: boolean;\n\n\t/**\n\t * Gibt den Text für eine Fehlermeldung an.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Gibt an, ob eine individuelle Höhe übergeben werden soll.\n\t *\n\t * @deprecated Use _size instead.\n\t */\n\t@Prop() public _height?: string;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean;\n\n\t/**\n\t * Gibt den Hinweistext an.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriHorizontalIcon>;\n\n\t/**\n\t * Gibt die interne ID des primären Elements in der Komponente an.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _list!: Stringified<SelectOption<W3CInputValue>[]>;\n\n\t/**\n\t * Gibt an, ob mehrere Werte eingegeben werden können.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Gibt den technischen Namen des Eingabefeldes an.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Macht das Eingabeelementzu einem Pflichtfeld.\n\t */\n\t@Prop() public _required?: boolean;\n\n\t/**\n\t * Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.\n\t */\n\t@Prop() public _size?: number;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: string;\n\n\t/**\n\t * Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Gibt an, ob dieses Eingabefeld von Nutzer:innen einmal besucht/berührt wurde.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Gibt den Wert des Eingabefeldes an.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: States = {\n\t\t_hasValue: false,\n\t\t_height: '',\n\t\t_id: nonce(), // ⚠ required\n\t\t_label: '…', // ⚠ required\n\t\t_list: [],\n\t\t_multiple: false,\n\t\t_value: [],\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'textarea', this.host);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_height')\n\tpublic validateHeight(value?: string): void {\n\t\tthis.controller.validateHeight(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: Stringified<KoliBriHorizontalIcon>): void {\n\t\tthis.controller.validateIcon(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): 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.controller.validateList(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('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_size')\n\tpublic validateSize(value?: number): void {\n\t\tthis.controller.validateSize(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: string): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad(this.onChange);\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onChange = (event: Event): void => {\n\t\t/**\n\t\t * TODO: Find values via value keys.\n\t\t */\n\t\tthis._value = Array.from(this.ref?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\t\tif (typeof this.state._on?.onChange === 'function') {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t};\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as i,h as t}from"./index-6ad587d0.js";import{b as e}from"./a11y.tipps-2e27f8e6.js";import{w as n}from"./prop.validators-f81af56e.js";import{w as a}from"./validation-b0e97f6c.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",s=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._ariaLabel},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){n(this,"_ariaLabel",i,{required:!0}),e(i)}validateLinks(i){a("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};s.style={default:o};export{s as kol_skip_nav};
+import{r as i,h as t}from"./index-6ad587d0.js";import{w as e}from"./validation-b0e97f6c.js";import{w as n}from"./prop.validators-f81af56e.js";import{b as a}from"./a11y.tipps-2e27f8e6.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const o=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}ul{display:grid;list-style:none;place-items:center}ul li{height:0}kol-link-wc a{left:-99999px;overflow:hidden;position:absolute;z-index:9999999;line-height:1em}kol-link-wc a:focus{background-color:#fff;left:unset;position:unset}",s=class{constructor(t){i(this,t),this._ariaLabel=void 0,this._links=void 0,this.state={_ariaLabel:"…",_links:[]}}render(){return t("nav",{"aria-label":this.state._ariaLabel},t("ul",null,this.state._links.map(((i,a)=>t("li",{key:a},t("kol-link-wc",Object.assign({},i)))))))}validateAriaLabel(i){n(this,"_ariaLabel",i,{required:!0}),a(i)}validateLinks(i){e("KolSkipNav",this,i)}componentWillLoad(){this.validateAriaLabel(this._ariaLabel),this.validateLinks(this._links)}static get watchers(){return{_ariaLabel:["validateAriaLabel"],_links:["validateLinks"]}}};s.style={default:o};export{s as kol_skip_nav};

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import 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 { Generic } from '@a11y-ui/core';\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\nimport { watchString } from '../../utils/prop.validators';\nimport { watchNavLinks } from '../nav/validation';\n\ntype RequiredProps = {\n\tariaLabel: string;\n\tlinks: Stringified<LinkProps[]>;\n};\ntype OptionalProps = unknown;\n// type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\tariaLabel: string;\n\tlinks: LinkProps[];\n};\ntype OptionalStates = OptionalProps;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: States = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@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.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,25B,MC8BXC,EAAU,M,oFA2BU,CAC/BC,WAAY,IACZC,OAAQ,G,CA5BFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAyBjBK,kBAAkBC,GACxBC,EAAYV,KAAM,aAAcS,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAIpBI,cAAcJ,GACpBK,EAAc,aAAcd,KAAMS,E,CAG5BM,oBACNf,KAAKQ,kBAAkBR,KAAKJ,YAC5BI,KAAKa,cAAcb,KAAKH,O"}
+{"version":3,"names":["defaultStyleCss","KolSkipNav","_ariaLabel","_links","render","h","this","state","map","link","index","key","Object","assign","validateAriaLabel","value","watchString","required","a11yHintLabelingLandmarks","validateLinks","watchNavLinks","componentWillLoad"],"sources":["./src/components/skip-nav/style.css?tag=kol-skip-nav&mode=default&encapsulation=shadow","./src/components/skip-nav/component.tsx"],"sourcesContent":["@import url(../style.css);\nul {\n\tdisplay: grid;\n\tlist-style: none;\n\tplace-items: center;\n}\nul li {\n\theight: 0;\n}\nkol-link-wc a {\n\tleft: -99999px;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: 9999999;\n\tline-height: 1em;\n}\nkol-link-wc a:focus {\n\tbackground-color: #fff;\n\tleft: unset;\n\tposition: unset;\n}\n","import { Component, h, JSX, Prop, State, Watch } from '@stencil/core';\n\nimport { LinkProps } from '../../types/button-link';\nimport { Stringified } from '../../types/common';\nimport { watchNavLinks } from '../nav/validation';\nimport { KoliBriSkipNavAPI, KoliBriSkipNavStates } from './types';\nimport { watchString } from '../../utils/prop.validators';\nimport { a11yHintLabelingLandmarks } from '../../utils/a11y.tipps';\n\n@Component({\n\ttag: 'kol-skip-nav',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSkipNav implements KoliBriSkipNavAPI {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<nav aria-label={this.state._ariaLabel}>\n\t\t\t\t<ul>\n\t\t\t\t\t{this.state._links.map((link: LinkProps, index: number) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<kol-link-wc {...link}></kol-link-wc>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ul>\n\t\t\t</nav>\n\t\t);\n\t}\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _ariaLabel!: string;\n\n\t/**\n\t * Gibt die Liste der darzustellenden Button, Links oder Texte an.\n\t */\n\t@Prop() public _links!: Stringified<LinkProps[]>;\n\n\t@State() public state: KoliBriSkipNavStates = {\n\t\t_ariaLabel: '…', // '⚠'\n\t\t_links: [],\n\t};\n\n\t@Watch('_ariaLabel')\n\tpublic validateAriaLabel(value?: string): void {\n\t\twatchString(this, '_ariaLabel', value, {\n\t\t\trequired: true,\n\t\t});\n\t\ta11yHintLabelingLandmarks(value);\n\t}\n\n\t@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.validateAriaLabel(this._ariaLabel);\n\t\tthis.validateLinks(this._links);\n\t}\n}\n"],"mappings":";;;mRAAA,MAAMA,EAAkB,25B,MCgBXC,EAAU,M,oFA2BwB,CAC7CC,WAAY,IACZC,OAAQ,G,CA5BFC,SACN,OACCC,EAAA,oBAAiBC,KAAKC,MAAML,YAC3BG,EAAA,UACEC,KAAKC,MAAMJ,OAAOK,KAAI,CAACC,EAAiBC,IAEvCL,EAAA,MAAIM,IAAKD,GACRL,EAAA,cAAAO,OAAAC,OAAA,GAAiBJ,Q,CAyBjBK,kBAAkBC,GACxBC,EAAYV,KAAM,aAAcS,EAAO,CACtCE,SAAU,OAEXC,EAA0BH,E,CAIpBI,cAAcJ,GACpBK,EAAc,aAAcd,KAAMS,E,CAG5BM,oBACNf,KAAKQ,kBAAkBR,KAAKJ,YAC5BI,KAAKa,cAAcb,KAAKH,O"}

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

@@ -1 +1 @@
-{"version":3,"names":["KolSpanWc","_hideLabel","_icon","_iconOnly","_label","render","hideExpertSlot","this","state","length","h","Host","class","top","style","_ariaLabel","icon","left","undefined","hidden","name","right","bottom","validateHideLabel","value","validateIcon","validateIconOnly","validateLabel","validateLabelWithAriaLabel","componentWillLoad"],"sources":["./src/components/span/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriCustomIcon, KoliBriIconProp } from '../../types/icon';\nimport { validateIcon } from '../../types/props/icon';\nimport { validateLabelWithAriaLabel } from '../../types/props/label';\nimport { PropHideLabel, validateHideLabel } from '../../types/props';\n\ntype RequiredProps = {\n\tlabel: string;\n};\ntype OptionalProps = {\n\ticon: Stringified<KoliBriIconProp>;\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\ticonOnly: boolean;\n} & PropHideLabel;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = {\n\ticon: {\n\t\ttop?: KoliBriCustomIcon;\n\t\tright?: KoliBriCustomIcon;\n\t\tbottom?: KoliBriCustomIcon;\n\t\tleft?: KoliBriCustomIcon;\n\t};\n\tlabel: string;\n};\ntype OptionalStates = {\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\ticonOnly: boolean;\n} & PropHideLabel;\nexport type States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _ariaLabel=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _ariaLabel=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{this.state._hideLabel !== true && this.state._label.length > 0 ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _ariaLabel=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _ariaLabel=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n\n\t@State() public state: States = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_iconOnly: false,\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;uVA6CaA,EAAS,M,yCA2BkC,M,+EAkBvB,CAC/BC,WAAY,MACZC,MAAO,GACPC,UAAW,MACXC,OAAQ,I,CAhDFC,SACN,MAAMC,EAAiBC,KAAKC,MAAMJ,OAAOK,OAAS,EAClD,OACCC,EAACC,EAAI,CACJC,MAAO,CACN,cAAeL,KAAKC,MAAMP,WAC1B,eAAgBM,KAAKC,MAAMP,aAG3BM,KAAKC,MAAMN,MAAMW,KAAOH,EAAA,YAAUE,MAAM,WAAWE,MAAOP,KAAKC,MAAMN,MAAMW,IAAIC,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMW,IAAIG,OACjIN,EAAA,YACEH,KAAKC,MAAMN,MAAMe,MAAQP,EAAA,YAAUE,MAAM,YAAYE,MAAOP,KAAKC,MAAMN,MAAMe,KAAKH,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMe,KAAKD,OACpIT,KAAKC,MAAMP,aAAe,MAAQM,KAAKC,MAAMJ,OAAOK,OAAS,EAAIC,EAAA,YAAOH,KAAKC,MAAMJ,QAAiB,GACrGM,EAAA,sBAAmBJ,EAAiB,OAASY,UAAWC,OAAQb,GAC/DI,EAAA,QAAMU,KAAK,YAEXb,KAAKC,MAAMN,MAAMmB,OAASX,EAAA,YAAUE,MAAM,aAAaE,MAAOP,KAAKC,MAAMN,MAAMmB,MAAMP,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMmB,MAAML,QAEzIT,KAAKC,MAAMN,MAAMoB,QAAUZ,EAAA,YAAUE,MAAM,cAAcE,MAAOP,KAAKC,MAAMN,MAAMoB,OAAOR,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMoB,OAAON,O,CAkCzIO,kBAAkBC,GACxBD,EAAkBhB,KAAMiB,E,CAIlBC,aAAaD,GACnBC,EAAalB,KAAMiB,E,CAObE,iBAAiBF,GACvBjB,KAAKgB,kBAAkBC,E,CAIjBG,cAAcH,GACpBI,EAA2BrB,KAAMiB,E,CAG3BK,oBACNtB,KAAKgB,kBAAkBhB,KAAKN,YAAcM,KAAKJ,WAC/CI,KAAKkB,aAAalB,KAAKL,OACvBK,KAAKoB,cAAcpB,KAAKH,O"}
+{"version":3,"names":["KolSpanWc","_hideLabel","_icon","_iconOnly","_label","render","hideExpertSlot","this","state","length","h","Host","class","top","style","_ariaLabel","icon","left","undefined","hidden","name","right","bottom","validateHideLabel","value","validateIcon","validateIconOnly","validateLabel","validateLabelWithAriaLabel","componentWillLoad"],"sources":["./src/components/span/component.tsx"],"sourcesContent":["import { Component, h, Host, JSX, Prop, State, Watch } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { validateIcon } from '../../types/props/icon';\nimport { validateHideLabel } from '../../types/props';\nimport { KolibriSpanAPI, KolibriSpanStates } from './types';\nimport { validateLabelWithAriaLabel } from '../../types/props/label';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-span-wc',\n\tshadow: false,\n})\nexport class KolSpanWc implements KolibriSpanAPI {\n\tpublic render(): JSX.Element {\n\t\tconst hideExpertSlot = this.state._label.length > 0;\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass={{\n\t\t\t\t\t'icon-only': !!this.state._hideLabel, // @deprecated in v2\n\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._icon.top && <kol-icon class=\"icon top\" style={this.state._icon.top.style} _ariaLabel=\"\" _icon={this.state._icon.top.icon} />}\n\t\t\t\t<span>\n\t\t\t\t\t{this.state._icon.left && <kol-icon class=\"icon left\" style={this.state._icon.left.style} _ariaLabel=\"\" _icon={this.state._icon.left.icon} />}\n\t\t\t\t\t{this.state._hideLabel !== true && this.state._label.length > 0 ? <span>{this.state._label}</span> : ''}\n\t\t\t\t\t<span aria-hidden={hideExpertSlot ? 'true' : undefined} hidden={hideExpertSlot}>\n\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.state._icon.right && <kol-icon class=\"icon right\" style={this.state._icon.right.style} _ariaLabel=\"\" _icon={this.state._icon.right.icon} />}\n\t\t\t\t</span>\n\t\t\t\t{this.state._icon.bottom && <kol-icon class=\"icon bottom\" style={this.state._icon.bottom.style} _ariaLabel=\"\" _icon={this.state._icon.bottom.icon} />}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n\n\t@State() public state: KolibriSpanStates = {\n\t\t_hideLabel: false,\n\t\t_icon: {},\n\t\t_iconOnly: false,\n\t\t_label: '…', // ⚠ required\n\t};\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tvalidateHideLabel(this, value);\n\t}\n\n\t@Watch('_icon')\n\tpublic validateIcon(value?: KoliBriIconProp): void {\n\t\tvalidateIcon(this, value);\n\t}\n\n\t/**\n\t * @deprecated use _hide-label\n\t */\n\t@Watch('_iconOnly')\n\tpublic validateIconOnly(value?: boolean): void {\n\t\tthis.validateHideLabel(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: string): void {\n\t\tvalidateLabelWithAriaLabel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHideLabel(this._hideLabel || this._iconOnly);\n\t\tthis.validateIcon(this._icon);\n\t\tthis.validateLabel(this._label);\n\t}\n}\n"],"mappings":";;;uVAgBaA,EAAS,M,yCA2BiB,M,+EAkBK,CAC1CC,WAAY,MACZC,MAAO,GACPC,UAAW,MACXC,OAAQ,I,CAhDFC,SACN,MAAMC,EAAiBC,KAAKC,MAAMJ,OAAOK,OAAS,EAClD,OACCC,EAACC,EAAI,CACJC,MAAO,CACN,cAAeL,KAAKC,MAAMP,WAC1B,eAAgBM,KAAKC,MAAMP,aAG3BM,KAAKC,MAAMN,MAAMW,KAAOH,EAAA,YAAUE,MAAM,WAAWE,MAAOP,KAAKC,MAAMN,MAAMW,IAAIC,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMW,IAAIG,OACjIN,EAAA,YACEH,KAAKC,MAAMN,MAAMe,MAAQP,EAAA,YAAUE,MAAM,YAAYE,MAAOP,KAAKC,MAAMN,MAAMe,KAAKH,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMe,KAAKD,OACpIT,KAAKC,MAAMP,aAAe,MAAQM,KAAKC,MAAMJ,OAAOK,OAAS,EAAIC,EAAA,YAAOH,KAAKC,MAAMJ,QAAiB,GACrGM,EAAA,sBAAmBJ,EAAiB,OAASY,UAAWC,OAAQb,GAC/DI,EAAA,QAAMU,KAAK,YAEXb,KAAKC,MAAMN,MAAMmB,OAASX,EAAA,YAAUE,MAAM,aAAaE,MAAOP,KAAKC,MAAMN,MAAMmB,MAAMP,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMmB,MAAML,QAEzIT,KAAKC,MAAMN,MAAMoB,QAAUZ,EAAA,YAAUE,MAAM,cAAcE,MAAOP,KAAKC,MAAMN,MAAMoB,OAAOR,MAAOC,WAAW,GAAGb,MAAOK,KAAKC,MAAMN,MAAMoB,OAAON,O,CAkCzIO,kBAAkBC,GACxBD,EAAkBhB,KAAMiB,E,CAIlBC,aAAaD,GACnBC,EAAalB,KAAMiB,E,CAObE,iBAAiBF,GACvBjB,KAAKgB,kBAAkBC,E,CAIjBG,cAAcH,GACpBI,EAA2BrB,KAAMiB,E,CAG3BK,oBACNtB,KAAKgB,kBAAkBhB,KAAKN,YAAcM,KAAKJ,WAC/CI,KAAKkB,aAAalB,KAAKL,OACvBK,KAAKoB,cAAcpB,KAAKH,O"}

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_hideLabel","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { Props } from './component';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements Props {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop({ reflect: true }) public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop({ reflect: true }) public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,urB,MCaXC,EAAO,M,yCAYoC,M,oEAXhDC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,WAAYD,KAAKC,WAAYC,OAAQF,KAAKE,QACzEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}
+{"version":3,"names":["defaultStyleCss","KolSpan","render","h","_icon","this","_hideLabel","_label","name","slot"],"sources":["./src/components/span/style.css?tag=kol-span&mode=default&encapsulation=shadow","./src/components/span/shadow.tsx"],"sourcesContent":["@import url(../style.css);\n","import { Component, h, JSX, Prop } from '@stencil/core';\nimport { Stringified } from '../../types/common';\n\nimport { KoliBriIconProp } from '../../types/icon';\nimport { KolibriSpanProps } from './types';\n\n@Component({\n\ttag: 'kol-span',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpan implements KolibriSpanProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<kol-span-wc _icon={this._icon} _hideLabel={this._hideLabel} _label={this._label}>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</kol-span-wc>\n\t\t);\n\t}\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Setzt die Iconklasse (z.B.: `_icon=\"codicon codicon-home`).\n\t */\n\t@Prop() public _icon?: Stringified<KoliBriIconProp>;\n\n\t/**\n\t * Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.\n\t * @deprecated use _hide-label\n\t */\n\t@Prop() public _iconOnly?: boolean;\n\n\t/**\n\t * Setzt die sichtbare oder semantische Beschriftung der Komponente (z.B. Aria-Label, Label, Headline, Caption, Summary usw.).\n\t */\n\t@Prop() public _label!: string;\n}\n"],"mappings":";;;+CAAA,MAAMA,EAAkB,urB,MCaXC,EAAO,M,yCAYmB,M,oEAX/BC,SACN,OACCC,EAAA,eAAaC,MAAOC,KAAKD,MAAOE,WAAYD,KAAKC,WAAYC,OAAQF,KAAKE,QACzEJ,EAAA,QAAMK,KAAK,SAASC,KAAK,W"}

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

@@ -1 +1 @@
-{"version":3,"names":["validateSpinVariant","component","value","watchValidator","Set","defaultStyleCss","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","state","_show","translate","spin","role","validateShow","watchBoolean","validateVariant","componentWillLoad"],"sources":["./src/types/props/variant/spin.ts","./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'cycle' | 'dot' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { Generic } from '@a11y-ui/core';\nimport { translate } from '../../i18n';\nimport { PropSpinVariant, SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { PropShow } from '../../types/props';\n\ntype RequiredProps = unknown;\ntype OptionalProps = PropSpinVariant & PropShow;\nexport type Props = Generic.Element.Members<RequiredProps, OptionalProps>;\n\ntype RequiredStates = PropSpinVariant;\ntype OptionalStates = PropShow;\ntype States = Generic.Element.Members<RequiredStates, OptionalStates>;\n\nfunction renderSpin(variant: SpinVariant): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates> {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/* [`spin--${this.state._variant}`]: true, witch benefit have this notation? */\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.\n\t */\n\t@Prop({ reflect: true }) public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'dot';\n\n\t@State() public state: States = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;6SAqBO,MAAMA,EAAsB,CAACC,EAAsCC,KACzEC,EAAeF,EAAW,YAAaC,GAAUA,IAAU,SAAWA,IAAU,OAASA,IAAU,QAAQ,IAAIE,IAAI,CAAC,QAAS,MAAO,SAAUF,EAAM,ECtBrJ,MAAMG,EAAkB,0nFCgBxB,SAASC,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,WACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAACG,EAAQ,KACRH,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,gBAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA6B4B,M,cAKV,M,WAER,CAC/BC,SAAU,M,CAnCJC,SACN,OACCR,EAACS,EAAI,KACHJ,KAAKK,MAAMC,MACXX,EAAA,oBACW,OAAM,aACJY,EAAU,sBAAqB,YACjC,SACVX,MAAO,CACNY,KAAM,KACN,CAACR,KAAKK,MAAMH,UAAW,MAGxBO,KAAK,SAEJhB,EAAWO,KAAKK,MAAMH,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBY,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAqB3GC,aAAarB,GACnBW,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DK,EAAaX,KAAM,QAASX,E,CAItBuB,gBAAgBvB,GACtBF,EAAoBa,KAAMX,E,CAGpBwB,oBACNb,KAAKU,aAAaV,KAAKM,OACvBN,KAAKY,gBAAgBZ,KAAKE,S"}
+{"version":3,"names":["validateSpinVariant","component","value","watchValidator","Set","defaultStyleCss","renderSpin","variant","h","class","name","Fragment","KolSpin","this","showToggled","_variant","render","Host","state","_show","translate","spin","role","validateShow","watchBoolean","validateVariant","componentWillLoad"],"sources":["./src/types/props/variant/spin.ts","./src/components/spin/style.css?tag=kol-spin&mode=default&encapsulation=shadow","./src/components/spin/component.tsx"],"sourcesContent":["import { Generic } from '@a11y-ui/core';\nimport { watchValidator } from '../../../utils/prop.validators';\n\n/* types */\n/**\n * Loadingspinner\n * - https://github.com/vineethtrv/css-loader\n */\nexport type SpinVariant = 'cycle' | 'dot' | 'none';\n\n/** de\n * Macht die Fehlermeldung dieses Elements von Screenreadern lesbar.\n */\n/** en\n * Makes hints readable for screenreaders.\n */\nexport type PropSpinVariant = {\n\tvariant: SpinVariant;\n};\n\n/* validator */\nexport const validateSpinVariant = (component: Generic.Element.Component, value?: SpinVariant): void => {\n\twatchValidator(component, '_variant', (value) => value === 'cycle' || value === 'dot' || value === 'none', new Set(['cycle', 'dot', 'none']), value);\n};\n","@import url(../style.css);\n@import url(cycle.css);\n@import url(dot.css);\n.spin {\n\tdisplay: block;\n\tpadding: 0.125rem;\n\tposition: relative;\n}\n","import { Component, Fragment, Host, JSX, Prop, State, Watch, h } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport { SpinVariant, validateSpinVariant } from '../../types/props/variant/spin';\nimport { watchBoolean } from '../../utils/prop.validators';\nimport { KoliBriSpinAPI, KoliBriSpinStates } from './types';\n\nfunction renderSpin(variant: SpinVariant): JSX.Element {\n\tswitch (variant) {\n\t\tcase 'cycle':\n\t\t\treturn <span class=\"loader\"></span>;\n\t\tcase 'none':\n\t\t\treturn <slot name=\"expert\"></slot>;\n\t\tdefault:\n\t\t\treturn (\n\t\t\t\t<Fragment>\n\t\t\t\t\t<span class=\"bg-spin-1\"></span>\n\t\t\t\t\t<span class=\"bg-spin-2\"></span>\n\t\t\t\t\t<span class=\"bg-spin-3\"></span>\n\t\t\t\t\t<span class=\"bg-neutral\"></span>\n\t\t\t\t</Fragment>\n\t\t\t);\n\t}\n}\n\n@Component({\n\ttag: 'kol-spin',\n\tstyleUrls: {\n\t\tdefault: './style.css',\n\t},\n\tshadow: true,\n})\nexport class KolSpin implements KoliBriSpinAPI {\n\tprivate showToggled = false;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{this.state._show ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-busy=\"true\"\n\t\t\t\t\t\taria-label={translate('kol-action-running')}\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\tclass={{\n\t\t\t\t\t\t\tspin: true,\n\t\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t\t\t/* [`spin--${this.state._variant}`]: true, witch benefit have this notation? */\n\t\t\t\t\t\t}}\n\t\t\t\t\t\trole=\"alert\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderSpin(this.state._variant)}\n\t\t\t\t\t</span>\n\t\t\t\t) : (\n\t\t\t\t\tthis.showToggled && <span aria-label={translate('kol-action-done')} aria-busy=\"false\" aria-live=\"polite\" role=\"alert\"></span>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt an, ob die Komponente entweder ein- oder ausgeblendet ist.\n\t */\n\t@Prop() public _show?: boolean = false;\n\n\t/**\n\t * Gibt an, welche Variante der Darstellung genutzt werden soll.\n\t */\n\t@Prop() public _variant?: SpinVariant = 'dot';\n\n\t@State() public state: KoliBriSpinStates = {\n\t\t_variant: 'dot',\n\t};\n\n\t@Watch('_show')\n\tpublic validateShow(value?: boolean): void {\n\t\tthis.showToggled = this.state._show === true && this._show === false;\n\t\twatchBoolean(this, '_show', value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: SpinVariant): void {\n\t\tvalidateSpinVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateShow(this._show);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"mappings":";;;6SAqBO,MAAMA,EAAsB,CAACC,EAAsCC,KACzEC,EAAeF,EAAW,YAAaC,GAAUA,IAAU,SAAWA,IAAU,OAASA,IAAU,QAAQ,IAAIE,IAAI,CAAC,QAAS,MAAO,SAAUF,EAAM,ECtBrJ,MAAMG,EAAkB,0nFCOxB,SAASC,EAAWC,GACnB,OAAQA,GACP,IAAK,QACJ,OAAOC,EAAA,QAAMC,MAAM,WACpB,IAAK,OACJ,OAAOD,EAAA,QAAME,KAAK,WACnB,QACC,OACCF,EAACG,EAAQ,KACRH,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,cACZD,EAAA,QAAMC,MAAM,gBAIjB,C,MASaG,EAAO,M,yBACXC,KAAAC,YAAc,M,WA6BW,M,cAKO,M,WAEG,CAC1CC,SAAU,M,CAnCJC,SACN,OACCR,EAACS,EAAI,KACHJ,KAAKK,MAAMC,MACXX,EAAA,oBACW,OAAM,aACJY,EAAU,sBAAqB,YACjC,SACVX,MAAO,CACNY,KAAM,KACN,CAACR,KAAKK,MAAMH,UAAW,MAGxBO,KAAK,SAEJhB,EAAWO,KAAKK,MAAMH,WAGxBF,KAAKC,aAAeN,EAAA,qBAAkBY,EAAU,mBAAkB,YAAY,QAAO,YAAW,SAASE,KAAK,U,CAqB3GC,aAAarB,GACnBW,KAAKC,YAAcD,KAAKK,MAAMC,QAAU,MAAQN,KAAKM,QAAU,MAC/DK,EAAaX,KAAM,QAASX,E,CAItBuB,gBAAgBvB,GACtBF,EAAoBa,KAAMX,E,CAGpBwB,oBACNb,KAAKU,aAAaV,KAAKM,OACvBN,KAAKY,gBAAgBZ,KAAKE,S"}

package/dist/kolibri/kol-split-button.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as i,H as s}from"./index-6ad587d0.js";import{w as e,b as a,s as o}from"./prop.validators-f81af56e.js";import{a as n,b as h}from"./label-559ca626.js";import{g as l}from"./a11y.tipps-2e27f8e6.js";import{v as d}from"./tab-index-ff5374b8.js";import{w as r}from"./button-link-283b2d32.js";import{a as c,w as p}from"./controller-ec771280.js";import{v as u,a as b}from"./aria-selected-efb464e1.js";import{v as f,a as v}from"./disabled-6200e69c.js";import{v as _}from"./hide-label-2baeb5c5.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const m=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",w=class{constructor(i){t(this,i),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateAccessKey(t){e(this,"_accessKey",t)}validateAriaControls(t){e(this,"_ariaControls",t)}validateAriaCurrent(t){u(this,t)}validateAriaExpanded(t){f(this,t)}validateAriaLabel(t){n(this,t)}validateAriaSelected(t){b(this,t)}validateCustomClass(t){e(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){v(this,t),t&&l()}validateHideLabel(t){_(this,t)}validateIcon(t){e(this,"_icon",t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){h(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){e(this,"_role",t)}validateShowDropdown(t){a(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){d(this,t)}validateTooltipAlign(t){r(this,"_tooltipAlign",t)}validateType(t){c(this,"_type",t)}validateValue(t){o(this,"_value",t)}validateVariant(t){p(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};w.style={default:m};export{w as kol_split_button};
+import{r as t,h as i,H as s}from"./index-6ad587d0.js";import{w as e,b as a,s as o}from"./prop.validators-f81af56e.js";import{g as n}from"./a11y.tipps-2e27f8e6.js";import{v as h}from"./tab-index-ff5374b8.js";import{w as l}from"./button-link-283b2d32.js";import{a as d,w as r}from"./controller-ec771280.js";import{a as c,b as p}from"./label-559ca626.js";import{v as u,a as b}from"./aria-selected-efb464e1.js";import{v as f,a as v}from"./disabled-6200e69c.js";import{v as _}from"./hide-label-2baeb5c5.js";import"./dev.utils-157f0499.js";import"./reuse-3a02afb9.js";import"./index-ff788b4b.js";const m=":host{--a11y-min-size:44px;font-size:inherit}*{hyphens:auto;letter-spacing:inherit;word-break:break-word;word-spacing:inherit}[role='button'],button:not([role='link']),kol-input .input{min-height:var(--a11y-min-size);min-width:var(--a11y-min-size)}a,button,h1,h2,h3,h4,h5,h6,input,option,select,textarea{font-family:inherit;font-size:inherit}:is(a,button){background-color:transparent;border:none;margin:0;padding:0;width:100%;}:host{max-width:100%}*{box-sizing:border-box}kol-span-wc{display:grid;place-items:center}kol-span-wc>span{display:flex;place-items:center}a,button{cursor:pointer}button,input,option,select,textarea{font-family:inherit}.icon-only>kol-span-wc>span>span{display:none}:host{display:flex;position:relative}.main-button{flex-grow:1;text-align:left}.main-button kol-span-wc{place-items:start}.secondary-button button{height:100%}.horizontal-line{background-color:rgba(0, 0, 0, 0.2);border-radius:2px;height:70%;margin-block:auto;width:1px}.popover{height:0;left:0;min-width:100%;overflow:hidden;position:absolute;top:100%;transition:height 0.3s ease-in-out}.popover-content{inset:0 0 auto 0;min-width:100%;position:absolute}",w=class{constructor(i){t(this,i),this.clickHandler=t=>{"function"==typeof this.state._on.onClick?this.state._on.onClick(t):this.toggleDropdown()},this.openDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height=`${this.dropdownContent.clientHeight}px`,this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!0}))},this.closeDropdown=()=>{this.dropdown&&this.dropdownContent&&(this.dropdown.style.height="",this.state=Object.assign(Object.assign({},this.state),{_showDropdown:!1}))},this.toggleDropdown=t=>{("boolean"==typeof t?t:!this.state._showDropdown)?this.openDropdown():this.closeDropdown()},this.forceCounter=100,this.forceOpenDropdown=()=>{var t;this.forceCounter>0&&((null===(t=this.dropdownContent)||void 0===t?void 0:t.clientHeight)?this.openDropdown():setTimeout(this.forceOpenDropdown,10),this.forceCounter--)},this.catchDropdownElements=t=>{t&&(this.dropdown=t,setTimeout((()=>{this.dropdownContent=t.firstChild,this._showDropdown&&this.forceOpenDropdown()})))},this._accessKey=void 0,this._ariaControls=void 0,this._ariaCurrent=void 0,this._ariaExpanded=void 0,this._ariaLabel=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icon=void 0,this._iconOnly=void 0,this._label=void 0,this._on=void 0,this._role=void 0,this._showDropdown=!1,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_icon:"",_label:"",_on:{},_showDropdown:!1}}render(){return i(s,null,i("kol-button-wc",{class:{"main-button":!0,button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaCurrent:this._ariaCurrent,_ariaExpanded:this._ariaExpanded,_ariaLabel:this._ariaLabel,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icon:this._icon,_hideLabel:this._hideLabel,_label:this._label,_on:{onClick:this.clickHandler},_role:this._role,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),i("div",{class:"horizontal-line"}),i("kol-button-wc",{class:"secondary-button",_disabled:this._disabled,_hideLabel:!0,_icon:"codicon codicon-triangle-down",_label:"dropdown "+(this.state._showDropdown?"schließen":"öffnen"),_on:{onClick:()=>this.toggleDropdown()}}),i("div",{class:"popover",ref:this.catchDropdownElements},i("div",{class:"popover-content"},i("slot",null))))}validateAccessKey(t){e(this,"_accessKey",t)}validateAriaControls(t){e(this,"_ariaControls",t)}validateAriaCurrent(t){u(this,t)}validateAriaExpanded(t){f(this,t)}validateAriaLabel(t){c(this,t)}validateAriaSelected(t){b(this,t)}validateCustomClass(t){e(this,"_customClass",t,{defaultValue:void 0})}validateDisabled(t){v(this,t),t&&n()}validateHideLabel(t){_(this,t)}validateIcon(t){e(this,"_icon",t)}validateIconOnly(t){this.validateHideLabel(t)}validateLabel(t){p(this,t)}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validateRole(t){e(this,"_role",t)}validateShowDropdown(t){a(this,"_showDropdown",t),this.toggleDropdown(t)}validateTabIndex(t){h(this,t)}validateTooltipAlign(t){l(this,"_tooltipAlign",t)}validateType(t){d(this,"_type",t)}validateValue(t){o(this,"_value",t)}validateVariant(t){r(this,"_variant",t)}componentWillLoad(){this.validateAccessKey(this._accessKey),this.validateAriaControls(this._ariaControls),this.validateAriaCurrent(this._ariaCurrent),this.validateAriaExpanded(this._ariaExpanded),this.validateAriaLabel(this._ariaLabel),this.validateAriaSelected(this._ariaSelected),this.validateCustomClass(this._customClass),this.validateDisabled(this._disabled),this.validateHideLabel(this._hideLabel||this._iconOnly),this.validateIcon(this._icon),this.validateLabel(this._label),this.validateOn(this._on),this.validateRole(this._role),this.validateShowDropdown(this._showDropdown),this.validateTabIndex(this._tabIndex),this.validateTooltipAlign(this._tooltipAlign),this.validateType(this._type),this.validateValue(this._value),this.validateVariant(this._variant)}static get watchers(){return{_accessKey:["validateAccessKey"],_ariaControls:["validateAriaControls"],_ariaCurrent:["validateAriaCurrent"],_ariaExpanded:["validateAriaExpanded"],_ariaLabel:["validateAriaLabel"],_ariaSelected:["validateAriaSelected"],_customClass:["validateCustomClass"],_disabled:["validateDisabled"],_hideLabel:["validateHideLabel"],_icon:["validateIcon"],_iconOnly:["validateIconOnly"],_label:["validateLabel"],_on:["validateOn"],_role:["validateRole"],_showDropdown:["validateShowDropdown"],_tabIndex:["validateTabIndex"],_tooltipAlign:["validateTooltipAlign"],_type:["validateType"],_value:["validateValue"],_variant:["validateVariant"]}}};w.style={default:m};export{w as kol_split_button};