@public-ui/components 3.0.0-alpha.1 → 3.0.0-ec88c9a9f00b83411c02bb7c1e982732e1259613.0

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-80062b8e.js"),alignFloatingElements=require("./align-floating-elements-fdc6eb39.js"),prop_validators=require("./prop.validators-37d21dea.js"),dev_utils=require("./dev.utils-58fde089.js"),align=require("./align-f4f3dfb6.js"),show=require("./show-f204ce41.js");require("./reuse-8cfefa9b.js"),require("./index-bf4a6924.js");const validatePopoverCallbacks=(e,t)=>{prop_validators.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=class{constructor(e){index.registerInstance(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,i,s;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(s=null===(i=this.state._on)||void 0===i?void 0:i.onClose)||void 0===s||s.call(i,e)}addListenersToBody(){var e;const t=dev_utils.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=dev_utils.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return index.h(index.Host,{key:"5badcc8b4335e176aee76f8afa6dc6fe083576af",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index.h("div",{key:"c99512f0c51a59e5610d17ba5e2aca422ba19235",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},index.h("div",{key:"f0bbe17c357ece2313b611c30c2ba01fca90465f",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),index.h("slot",{key:"665066282b1a91caab5eb2ff875c0f49aeb56d7b"})))}validateAlign(e){align.validateAlign(this,e)}validateOn(e){validatePopoverCallbacks(this,e)}validateShow(e){show.validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};exports.kol_popover_wc=KolPopover;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-6fe799e1.js"),alignFloatingElements=require("./align-floating-elements-1d37261b.js"),clsx=require("./clsx-dd4d6dd1.js"),events=require("./events-fc641593.js"),prop_validators=require("./prop.validators-96dfedce.js"),dev_utils=require("./dev.utils-58fde089.js"),align=require("./align-b9732b91.js"),show=require("./show-5b2be58e.js");require("./reuse-8cfefa9b.js"),require("./index-38f5f0b2.js");const validatePopoverCallbacks=(e,t)=>{prop_validators.watchValidator(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),t)},KolPopover=class{constructor(e){index.registerInstance(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover(e)},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover(e)},this.catchHostAndTriggerElement=e=>{e&&(this.host=e,this.triggerElement=e.previousElementSibling)},this.catchPopoverElement=e=>{this.popoverElement=e},this.catchArrowElement=e=>{this.arrowElement=e},this._align="top",this._on=void 0,this._show=!1,this.state={_align:"top",_on:{},_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await alignFloatingElements.alignFloatingElements({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(e){var t,s,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(t=this.triggerElement)||void 0===t||t.focus(),this.removeListenersToBody(),null===(i=null===(s=this.state._on)||void 0===s?void 0:s.onClose)||void 0===i||i.call(s,e),this.host&&events.dispatchDomEvent(this.host,events.KolEvent.close)}addListenersToBody(){var e;const t=dev_utils.getDocument().body;t.addEventListener("keyup",this.hidePopoverByEscape),t.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const t=dev_utils.getDocument().body;t.removeEventListener("keyup",this.hidePopoverByEscape),t.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return index.h(index.Host,{key:"8816a39ab0a1baf1856f092c16c52e049fd63b62",ref:this.catchHostAndTriggerElement,class:"kol-popover"},index.h("div",{key:"bfbe0f9a2971f4faef66425cb32f74f407a38389",class:clsx.clsx("kol-popover__content",{"kol-popover__content--visible":this.state._visible}),ref:this.catchPopoverElement,hidden:!this.state._show},index.h("div",{key:"43226580fbfe1aeeaee168844c29879e36715157",class:clsx.clsx("kol-popover__arrow",`kol-popover__arrow--${this.state._align}`),ref:this.catchArrowElement}),index.h("slot",{key:"9b511360efed361f79afd0ad87561a78bdac34ad"})))}validateAlign(e){align.validateAlign(this,e)}validateOn(e){validatePopoverCallbacks(this,e)}validateShow(e){show.validateShow(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};exports.kol_popover_wc=KolPopover;

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

@@ -1 +1 @@
-{"file":"kol-popover-wc.entry.cjs.js","mappings":"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","names":["watchValidator","alignFloatingElements","getDocument","h","Host","validateAlign","validateShow"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Events } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Events.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\n\nimport type { JSX } from '@stencil/core';\n\n/**\n * @internal\n * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(event: MouseEvent | KeyboardEvent): 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\n\t\tthis.state._on?.onClose?.(event);\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\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(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true },\n\t\t);\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', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\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} class=\"kol-popover\">\n\t\t\t\t<div class={{ popover: true, show: this.state._visible }} ref={this.catchPopoverElement} hidden={!this.state._show}>\n\t\t\t\t\t<div class={`arrow ${this.state._align}`} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_on: {},\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void 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"],"version":3}
+{"file":"kol-popover-wc.entry.cjs.js","mappings":"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","names":["watchValidator","alignFloatingElements","dispatchDomEvent","KolEvent","getDocument","h","Host","clsx","validateAlign","validateShow"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Callback } from '../enums';\nimport type { EventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type PopoverCallbacksPropType = {\n\t[Callback.onClose]?: EventCallback<MouseEvent | KeyboardEvent>;\n};\n\n/**\n * Defines the callback functions for popover events.\n */\nexport type PropPopoverCallbacks = {\n\ton: PopoverCallbacksPropType;\n};\n\n/* validator */\nexport const validatePopoverCallbacks = (component: Generic.Element.Component, value?: PopoverCallbacksPropType): void => {\n\twatchValidator(component, `_on`, (value) => typeof value === 'object' && value !== null, new Set(['PopoverCallbacksPropType {Events.onClose}']), value);\n};\n","import type { AlignPropType, PopoverAPI, PopoverCallbacksPropType, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, validatePopoverCallbacks, validateShow } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { alignFloatingElements } from '../../utils/align-floating-elements';\nimport clsx from 'clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @internal\n * @slot - The popover content.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tshadow: false,\n})\nexport class KolPopover implements PopoverAPI {\n\tprivate arrowElement?: HTMLDivElement;\n\tprivate popoverElement?: HTMLDivElement;\n\tprivate triggerElement?: HTMLElement | null;\n\tprivate host?: HTMLElement;\n\n\tprivate async showPopover(): Promise<void> {\n\t\tthis.addListenersToBody();\n\n\t\tif (this.triggerElement && this.popoverElement) {\n\t\t\tawait alignFloatingElements({\n\t\t\t\talign: this._align,\n\t\t\t\treferenceElement: this.triggerElement,\n\t\t\t\tarrowElement: this.arrowElement,\n\t\t\t\tfloatingElement: this.popoverElement,\n\t\t\t});\n\t\t\tthis.state = { ...this.state, _visible: true };\n\t\t}\n\t}\n\tprivate hidePopover(event: MouseEvent | KeyboardEvent): 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\n\t\tthis.state._on?.onClose?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover(event);\n\t};\n\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover(event);\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(\n\t\t\t'scroll',\n\t\t\t() => {\n\t\t\t\tvoid this.showPopover();\n\t\t\t},\n\t\t\t{ passive: true },\n\t\t);\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', () => {\n\t\t\tvoid this.showPopover();\n\t\t});\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} class=\"kol-popover\">\n\t\t\t\t<div\n\t\t\t\t\tclass={clsx('kol-popover__content', { 'kol-popover__content--visible': this.state._visible })}\n\t\t\t\t\tref={this.catchPopoverElement}\n\t\t\t\t\thidden={!this.state._show}\n\t\t\t\t>\n\t\t\t\t\t<div class={clsx('kol-popover__arrow', `kol-popover__arrow--${this.state._align}`)} ref={this.catchArrowElement} />\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the alignment of the tooltip, popover or tabs in relation to the element.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines the callback functions for popover events.\n\t */\n\t@Prop() public _on?: PopoverCallbacksPropType;\n\n\t/**\n\t * Makes the element show up.\n\t * @TODO: Change type back to `ShowPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _show?: boolean = false;\n\n\t@State() public state: PopoverStates = {\n\t\t_align: 'top',\n\t\t_on: {},\n\t\t_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: PopoverCallbacksPropType): void {\n\t\tvalidatePopoverCallbacks(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) void 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"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-80062b8e.js"),label=require("./label-d84e4f92.js"),prop_validators=require("./prop.validators-37d21dea.js");var KoliBriProgressVariantEnum;require("./index-bf4a6924.js"),require("./dev.utils-58fde089.js"),function(e){e.bar="bar",e.cycle="cycle"}(KoliBriProgressVariantEnum||(KoliBriProgressVariantEnum={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  progress {\n    display: block;\n    height: 0;\n    overflow: hidden;\n    width: 0;\n  }\n  .bar {\n    width: calc(150rem / var(--kolibri-root-font-size, 16));\n  }\n  .bar .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .bar .background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .bar .progress {\n    fill: #0075ff;\n    stroke: transparent;\n    transition: 250ms ease-in-out 50ms;\n  }\n  .cycle .background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .cycle .border {\n    fill: transparent;\n    stroke: black;\n  }\n  .cycle .whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .cycle .progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n    transition: 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    .progress {\n      transition-duration: 0s;\n      transition-delay: 0s;\n    }\n  }\n}",KolProgressDefaultStyle0=defaultStyleCss,VALID_VARIANTS=Object.keys(KoliBriProgressVariantEnum),CycleSvg=({state:e})=>{const n=e._label?"57%":"50%";return index.h("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&index.h("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},e._label),index.h("text",{"aria-hidden":"true",x:"50%",y:n,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit))},BarSvg=({state:e})=>{const n="var(--kolibri-text-label-padding, 45px)",t=e._value/e._max*100;return index.h("div",{class:"bar"},e._label&&index.h("div",null,e._label),index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${n})`}}),index.h("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${n})`}}),index.h("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 5px - (${n} / 100 * ${t}))`}}),index.h("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},e._value,e._unit)))},createProgressSVG=e=>{switch(e._variant){case"cycle":return index.h(CycleSvg,{state:e});case"bar":return index.h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProcess=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return index.h(index.Host,{key:"d80b24e15f2af2d2763325801890f78f7bfa2041",class:"kol-progress"},createProgressSVG(this.state),index.h("progress",{key:"3d0333e79f90125d765e46925596aa91bbc18651","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{key:"695e4169b97f3354da1cc905c2097955568678f9","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),prop_validators.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){prop_validators.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),prop_validators.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.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"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProcess.style={default:KolProgressDefaultStyle0},exports.kol_progress=KolProcess;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-6fe799e1.js"),label=require("./label-b8654499.js"),prop_validators=require("./prop.validators-96dfedce.js");var KoliBriProgressVariantEnum;require("./index-38f5f0b2.js"),require("./dev.utils-58fde089.js"),function(e){e.bar="bar",e.cycle="cycle"}(KoliBriProgressVariantEnum||(KoliBriProgressVariantEnum={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-progress {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar {\n    width: calc(150rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-progress__bar-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__bar-background {\n    fill: lightgray;\n    stroke: white;\n  }\n  .kol-progress__bar-progress {\n    fill: #0075ff;\n    stroke: transparent;\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__bar-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n  .kol-progress__cycle-background {\n    fill: transparent;\n    stroke: lightgray;\n  }\n  .kol-progress__cycle-border {\n    fill: transparent;\n    stroke: black;\n  }\n  .kol-progress__cycle-whitespace {\n    fill: transparent;\n    stroke: white;\n  }\n  .kol-progress__cycle-progress {\n    fill: transparent;\n    stroke: #0075ff;\n    transform-origin: 50% 50%;\n    transform: rotate(-90deg);\n  }\n  @media (prefers-reduced-motion: no-preference) {\n    .kol-progress__cycle-progress {\n      transition: 250ms ease-in-out 50ms;\n    }\n  }\n}",KolProgressDefaultStyle0=defaultStyleCss,VALID_VARIANTS=Object.keys(KoliBriProgressVariantEnum),CycleSvg=({state:e})=>{const n=e._label?"57%":"50%";return index.h("svg",{class:"kol-progress__cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},index.h("circle",{class:"kol-progress__cycle-background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),index.h("circle",{class:"kol-progress__cycle-progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(e._value/e._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),e._label&&index.h("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},e._label),index.h("text",{"aria-hidden":"true",x:"50%",y:n,"text-anchor":"middle",fill:"currentColor"},e._value,e._unit))},BarSvg=({state:e})=>{const n="var(--kolibri-text-label-padding, 45px)",t=e._value/e._max*100;return index.h("div",{class:"kol-progress__bar"},e._label&&index.h("div",null,e._label),index.h("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},index.h("rect",{class:"kol-progress__bar-background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${n})`}}),index.h("rect",{class:"kol-progress__bar-border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${n})`}}),index.h("rect",{class:"kol-progress__bar-progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${t}% - 5px - (${n} / 100 * ${t}))`}}),index.h("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},e._value,e._unit)))},createProgressSVG=e=>{switch(e._variant){case"cycle":return index.h(CycleSvg,{state:e});case"bar":return index.h(BarSvg,{state:e});default:throw new Error(`Progress variant ${e._variant} not implemented.`)}},KolProcess=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._max=void 0,this._unit="%",this._value=void 0,this._variant=void 0,this.state={_max:100,_unit:"%",_value:0,_variant:"bar",_liveValue:0}}render(){return index.h("div",{key:"7394164996f2940b5dc2c66e8032acd948b13547",class:"kol-progress"},createProgressSVG(this.state),index.h("progress",{key:"abf2a4ce52832dd609f35e9599a0f201ff50b4a2",class:"visually-hidden","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),index.h("span",{key:"029017824f0e4e6db2f31d75a55db3e321bda902","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){label.validateLabel(this,e)}validateMax(e){"number"!=typeof e&&(e=100),prop_validators.watchNumber(this,"_max",e,{required:!0})}validateUnit(e){prop_validators.watchString(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),prop_validators.watchNumber(this,"_value",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&VALID_VARIANTS.includes(e)),new Set(VALID_VARIANTS),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.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"],_unit:["validateUnit"],_value:["validateValue"],_variant:["validateVariant"]}}};KolProcess.style={default:KolProgressDefaultStyle0},exports.kol_progress=KolProcess;

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

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

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-80062b8e.js"),componentNames=require("./component-names-7808fb62.js"),label=require("./label-d84e4f92.js"),prop_validators=require("./prop.validators-37d21dea.js"),reuse=require("./reuse-8cfefa9b.js");require("./index-bf4a6924.js"),require("./dev.utils-58fde089.js");const koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  cite,\n  figure,\n  q + figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  blockquote:before {\n    content: open-quote;\n  }\n  blockquote::after {\n    content: close-quote;\n  }\n  cite:before {\n    content: \"—\";\n  }\n  .block cite:before {\n    padding-right: 0.5em;\n  }\n  .inline cite:before {\n    padding: 0.5em;\n  }\n}",KolQuoteDefaultStyle0=defaultStyleCss,KolQuote=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){prop_validators.watchString(this,"_href",e,{required:!0})}validateQuote(e){prop_validators.watchString(this,"_quote",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&koliBriQuoteVariantOptions.includes(e)),new Set(koliBriQuoteVariantOptions),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=reuse.showExpertSlot(this.state._quote);return index.h(index.Host,{key:"977bc0bfe90a8081e9349fb75450bc145c83a672",class:"kol-quote"},index.h("figure",{key:"e32c0be4cca5595c4227d942d3864d90d728e451",class:{[this.state._variant]:!0}},"block"===this.state._variant?index.h("blockquote",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"df0f6039b57a4efc3f9020749ca9ffa569d8ecf3"},index.h("cite",{key:"ce80d9b009f33e635b8aa6bea847af5365639716"},index.h(componentNames.KolLinkTag,{key:"de80361265c2dfc3e261f6f9ffb168819663627c",_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:KolQuoteDefaultStyle0},exports.kol_quote=KolQuote;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-6fe799e1.js"),componentNames=require("./component-names-74abfa2e.js"),clsx=require("./clsx-dd4d6dd1.js"),label=require("./label-b8654499.js"),prop_validators=require("./prop.validators-96dfedce.js"),reuse=require("./reuse-8cfefa9b.js");require("./index-38f5f0b2.js"),require("./dev.utils-58fde089.js");const koliBriQuoteVariantOptions=["block","inline"],defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-quote {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__cite::before {\n    content: \"—\";\n  }\n  .kol-quote--block .kol-quote__cite::before {\n    padding-right: 0.5em;\n  }\n  .kol-quote--inline .kol-quote__cite::before {\n    padding: 0.5em;\n  }\n  .kol-quote--block .kol-quote__figcaption {\n    display: inline;\n    margin: 0;\n    padding: 0;\n  }\n  .kol-quote__blockquote::before {\n    content: open-quote;\n  }\n  .kol-quote__blockquote::after {\n    content: close-quote;\n  }\n}",KolQuoteDefaultStyle0=defaultStyleCss,KolQuote=class{constructor(e){index.registerInstance(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){label.validateLabel(this,e)}validateHref(e){prop_validators.watchString(this,"_href",e,{required:!0})}validateQuote(e){prop_validators.watchString(this,"_quote",e,{required:!0})}validateVariant(e){prop_validators.watchValidator(this,"_variant",(e=>"string"==typeof e&&koliBriQuoteVariantOptions.includes(e)),new Set(koliBriQuoteVariantOptions),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const e=reuse.showExpertSlot(this.state._quote);return index.h("figure",{key:"67e3698e3ee9149cf2a6e68d3648edd67c7466e0",class:clsx.clsx("kol-quote",`kol-quote--${this.state._variant}`)},"block"===this.state._variant?index.h("blockquote",{class:"kol-quote__blockquote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))):index.h("q",{class:"kol-quote__quote",cite:this.state._href},this.state._quote,index.h("span",{"aria-hidden":e?void 0:"true",hidden:!e},index.h("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&index.h("figcaption",{key:"a9ba792641f9c21d475d1c39d98e8f626bebf0d8",class:"kol-quote__figcaption"},index.h("cite",{key:"b2a01b4d79fae6af0817525ec19b975a468958c8",class:"kol-quote__cite"},index.h(componentNames.KolLinkTag,{key:"49faa4b2dcd8f68923860871545251a92459ba7f",_href:this.state._href,_label:this.state._label,_target:"_blank"}))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};KolQuote.style={default:KolQuoteDefaultStyle0},exports.kol_quote=KolQuote;

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

@@ -1 +1 @@
-{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;;;AAIO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACJtE,MAAM,eAAe,GAAG,2kJAA2kJ,CAAC;AACpmJ,8BAAe,eAAe;;MCYjB,QAAQ;;;;;;wBAmB4B,QAAQ;qBAEnB;YACpC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzCA,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvCC,2BAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClCA,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjDC,8BAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAGC,oBAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACCC,QAACC,UAAI,qDAAC,KAAK,EAAC,WAAW,IACtBD,qEACC,KAAK,EAAE;gBACN,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI;aAC3B,IAEA,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BA,wBAAY,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvB,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrEA,2EACCA,qEACCA,QAACE,yBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,CACH,EACN;KACF;;;;;;;;;;;;;;","names":["validateLabel","watchString","watchValidator","showExpertSlot","h","Host","KolLinkTag"],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tcite,\n\tfigure,\n\tq + figcaption {\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\n\tblockquote:before {\n\t\tcontent: open-quote;\n\t}\n\n\tblockquote::after {\n\t\tcontent: close-quote;\n\t}\n\n\tcite:before {\n\t\tcontent: '—';\n\t}\n\n\t.block cite:before {\n\t\tpadding-right: 0.5em;\n\t}\n\n\t.inline cite:before {\n\t\tpadding: 0.5em;\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<Host class=\"kol-quote\">\n\t\t\t\t<figure\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t[this.state._variant]: true,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t\t<blockquote cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</blockquote>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<q cite={this.state._href}>\n\t\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</q>\n\t\t\t\t\t)}\n\t\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t\t<figcaption>\n\t\t\t\t\t\t\t<cite>\n\t\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t\t</cite>\n\t\t\t\t\t\t</figcaption>\n\t\t\t\t\t)}\n\t\t\t\t</figure>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-quote.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAIO,MAAM,0BAA0B,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAU;;ACJtE,MAAM,eAAe,GAAG,urJAAurJ,CAAC;AAChtJ,8BAAe,eAAe;;MCajB,QAAQ;;;;;;wBAmB4B,QAAQ;qBAEnB;YACpC,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,QAAQ,EAAE,QAAQ;SAClB;;IAGM,aAAa,CAAC,KAAqB;QACzCA,mBAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,YAAY,CAAC,KAAoB;QACvCC,2BAAW,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE;YACjC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAc;QAClCA,2BAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE;YAClC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAA2B;QACjDC,8BAAc,CACb,IAAI,EACJ,UAAU,EACV,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,0BAA0B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAClF,IAAI,GAAG,CAAC,0BAA0B,CAAC,EACnC,KAAK,CACL,CAAC;KACF;IAEM,iBAAiB;QACvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KACpC;IAEM,MAAM;QACZ,MAAM,aAAa,GAAGC,oBAAc,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxD,QACCC,qEAAQ,KAAK,EAAEC,SAAI,CAAC,WAAW,EAAE,cAAc,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,IACnE,IAAI,CAAC,KAAK,CAAC,QAAQ,KAAK,OAAO,IAC/BD,wBAAY,KAAK,EAAC,uBAAuB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAC9D,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACK,KAEbA,eAAG,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IAChD,IAAI,CAAC,KAAK,CAAC,MAAM,EAClBA,iCAAmB,CAAC,aAAa,GAAG,MAAM,GAAG,SAAS,EAAE,MAAM,EAAE,CAAC,aAAa,IAC7EA,kBAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACJ,CACJ,EACA,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,KACrEA,yEAAY,KAAK,EAAC,uBAAuB,IACxCA,mEAAM,KAAK,EAAC,iBAAiB,IAC5BA,QAACE,yBAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,EAAC,QAAQ,GAAG,CAC7E,CACK,CACb,CACO,EACR;KACF;;;;;;;;;;;;;;","names":["validateLabel","watchString","watchValidator","showExpertSlot","h","clsx","KolLinkTag"],"sources":["src/schema/components/quote.ts","src/components/quote/style.scss?tag=kol-quote&mode=default&encapsulation=shadow","src/components/quote/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport type { PropHref, PropLabel } from '../props';\n\nexport const koliBriQuoteVariantOptions = ['block', 'inline'] as const;\nexport type KoliBriQuoteVariant = (typeof koliBriQuoteVariantOptions)[number];\n\ntype RequiredProps = {\n\tquote: string;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalProps = {\n\tvariant: KoliBriQuoteVariant;\n} & PropLabel;\n\ntype RequiredStates = {\n\tquote: string;\n\tvariant: KoliBriQuoteVariant;\n} & PropHref; // URL to the source of the quote (cite)\ntype OptionalStates = PropLabel;\n\nexport type QuoteProps = Generic.Element.Members<RequiredProps, OptionalProps>;\nexport type QuoteStates = Generic.Element.Members<RequiredStates, OptionalStates>;\nexport type QuoteAPI = Generic.Element.ComponentApi<RequiredProps, OptionalProps, RequiredStates, OptionalStates>;\n","@import '../@shared/mixins';\n@import '../../styles/global';\n\n@layer kol-component {\n\t.kol-quote {\n\t\t$root: &;\n\t\tfont-size: rem(16);\n\t\tdisplay: inline;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&__cite {\n\t\t\t&::before {\n\t\t\t\tcontent: '—';\n\n\t\t\t\t@at-root #{$root}--block & {\n\t\t\t\t\tpadding-right: 0.5em;\n\t\t\t\t}\n\n\t\t\t\t@at-root #{$root}--inline & {\n\t\t\t\t\tpadding: 0.5em;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t&__figcaption {\n\t\t\t@at-root #{$root}--block & {\n\t\t\t\tdisplay: inline;\n\t\t\t\tmargin: 0;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__blockquote {\n\t\t\t&::before {\n\t\t\t\tcontent: open-quote;\n\t\t\t}\n\n\t\t\t&::after {\n\t\t\t\tcontent: close-quote;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type { HrefPropType, KoliBriQuoteVariant, LabelPropType, QuoteAPI, QuoteStates } from '../../schema';\nimport { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { KolLinkTag } from '../../core/component-names';\nimport clsx from 'clsx';\n@Component({\n\ttag: 'kol-quote',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolQuote implements QuoteAPI {\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label?: string;\n\n\t/**\n\t * Sets the target URI of the link or citation source.\n\t */\n\t@Prop() public _href!: HrefPropType;\n\n\t/**\n\t * Defines the text of the quote.\n\t */\n\t@Prop() public _quote!: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: KoliBriQuoteVariant = 'inline';\n\n\t@State() public state: QuoteStates = {\n\t\t_href: '', // ⚠ required\n\t\t_quote: '', // ⚠ required\n\t\t_variant: 'inline',\n\t};\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value);\n\t}\n\n\t@Watch('_href')\n\tpublic validateHref(value?: HrefPropType): void {\n\t\twatchString(this, '_href', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_quote')\n\tpublic validateQuote(value?: string): void {\n\t\twatchString(this, '_quote', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: KoliBriQuoteVariant): void {\n\t\twatchValidator(\n\t\t\tthis,\n\t\t\t'_variant',\n\t\t\t(value) => typeof value === 'string' && koliBriQuoteVariantOptions.includes(value),\n\t\t\tnew Set(koliBriQuoteVariantOptions),\n\t\t\tvalue,\n\t\t);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHref(this._href);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateQuote(this._quote);\n\t\tthis.validateVariant(this._variant);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._quote); // _quote instead of _caption as _label\n\t\treturn (\n\t\t\t<figure class={clsx('kol-quote', `kol-quote--${this.state._variant}`)}>\n\t\t\t\t{this.state._variant === 'block' ? (\n\t\t\t\t\t<blockquote class=\"kol-quote__blockquote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</blockquote>\n\t\t\t\t) : (\n\t\t\t\t\t<q class=\"kol-quote__quote\" cite={this.state._href}>\n\t\t\t\t\t\t{this.state._quote}\n\t\t\t\t\t\t<span aria-hidden={!hasExpertSlot ? 'true' : undefined} hidden={!hasExpertSlot}>\n\t\t\t\t\t\t\t<slot name=\"expert\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</q>\n\t\t\t\t)}\n\t\t\t\t{typeof this.state._label === 'string' && this.state._label.length > 0 && (\n\t\t\t\t\t<figcaption class=\"kol-quote__figcaption\">\n\t\t\t\t\t\t<cite class=\"kol-quote__cite\">\n\t\t\t\t\t\t\t<KolLinkTag _href={this.state._href} _label={this.state._label} _target=\"_blank\" />\n\t\t\t\t\t\t</cite>\n\t\t\t\t\t</figcaption>\n\t\t\t\t)}\n\t\t\t</figure>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-80062b8e.js"),dev_utils=require("./dev.utils-91b818ef.js"),events=require("./events-221fcb43.js"),controller$1=require("./controller-c08f0c47.js"),controllerIcon=require("./controller-icon-0a07b9d4.js"),controller=require("./controller-4ad095de.js"),rows=require("./rows-fd18fa20.js"),prop_validators=require("./prop.validators-37d21dea.js"),componentNames=require("./component-names-7808fb62.js"),controller$2=require("./controller-59d57d18.js"),InternalUnderlinedBadgeText=require("./InternalUnderlinedBadgeText-1c6598a7.js"),reuse=require("./reuse-8cfefa9b.js");require("./dev.utils-58fde089.js"),require("./associated.controller-e7a1e9af.js"),require("./access-and-short-key-4b185f62.js"),require("./tooltip-align-70093437.js"),require("./align-f4f3dfb6.js"),require("./hide-label-1783d2a4.js"),require("./common-1ab929ac.js"),require("./label-d84e4f92.js"),require("./icons-3917f9e0.js"),require("./index-bf4a6924.js");class SelectController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host option:checked::before {\n    content: \"✓ \";\n  }\n}",KolSelectDefaultStyle0=defaultStyleCss,isSelected=(e,t)=>Array.isArray(e)&&e.includes(t),KolSelect=class{async getValue(){return this.state._value}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}renderOptgroup(e,t){var n;return index.h("optgroup",{disabled:e.disabled,label:e.label},null===(n=e.options)||void 0===n?void 0:n.map(((e,n)=>{const i=`${t}-${n}`;return Array.isArray(e.options)?this.renderOptgroup(e,i):index.h("option",{disabled:e.disabled,key:i,selected:isSelected(this.state._value,e.value),value:i},e.label)})))}render(){const{ariaDescribedBy:e}=controller$1.getRenderStates(this.state),t=reuse.showExpertSlot(this.state._label);return index.h(index.Host,{key:"ba2c0f8702fedaee9cb639f6f8ed54b68bf2cbb3",class:{"kol-select":!0,"has-value":this.state._hasValue}},index.h(componentNames.KolInputTag,{key:"455f7e16906b52721be9b1e79a5015a101f2d849",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},role:"presentation"},index.h("span",{key:"fa12f9428a693206a0e0450b9d588bc28da335cd",slot:"label"},t?index.h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?index.h(index.Fragment,null,index.h(InternalUnderlinedBadgeText.InternalUnderlinedBadgeText,{badgeText:reuse.buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",index.h("span",{class:"access-key-hint","aria-hidden":"true"},reuse.buildBadgeTextString(this.state._accessKey,this.state._shortKey))):index.h("span",null,this.state._label)),index.h("div",{key:"6f6b2c5104e6d9165f919fdbac2a2fd10d56b9a9",slot:"input"},index.h("form",{key:"6859a1a8a1a425d2fbd898afab3234e3b86c57e2",onSubmit:e=>{e.preventDefault(),controller$2.propagateSubmitEventToForm({form:this.host,ref:this.selectRef})}},index.h("input",{key:"26e5874b3f93ff7e46ffb1a89bd8ed4595bfc99b",type:"submit",hidden:!0}),index.h("select",Object.assign({key:"8fbf4647f4600c9fadb0c0ba87b7c029c26c480e",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}}),this.state._options.map(((e,t)=>{const n=`-${t}`;return Array.isArray(e.options)?this.renderOptgroup(e,n):index.h("option",{disabled:e.disabled,key:n,selected:isSelected(this.state._value,e.value),value:n},e.label)})))))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._alert=void 0,this._disabled=!1,this._error=void 0,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t,n,i;this._value=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),events.tryToDispatchKoliBriEvent("input",this.host,this._value),null===(i=null===(n=this.state._on)||void 0===n?void 0:n.onInput)||void 0===i||i.call(n,e,this._value)}onChange(e){var t,n;events.stopPropagation(e),events.tryToDispatchKoliBriEvent("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),null===(n=null===(t=this.state._on)||void 0===t?void 0:t.onChange)||void 0===n||n.call(t,e,this._value)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:KolSelectDefaultStyle0},exports.kol_select=KolSelect;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const index=require("./index-6fe799e1.js"),clsx=require("./clsx-dd4d6dd1.js"),dev_utils=require("./dev.utils-1ab24221.js"),controllerIcon=require("./controller-icon-f079b97d.js"),controller=require("./controller-690dfcd2.js"),rows=require("./rows-782313b6.js"),prop_validators=require("./prop.validators-96dfedce.js"),controller$1=require("./controller-fcd5edcb.js"),tslib_es6=require("./tslib.es6-5e301284.js"),getRenderStates=require("./getRenderStates-7aec1839.js"),FormFieldMsg=require("./FormFieldMsg-b0536cb6.js");require("./reuse-8cfefa9b.js"),require("./dev.utils-58fde089.js"),require("./InternalUnderlinedBadgeText-9b9a760a.js"),require("./isObject-6090b636.js"),require("./component-names-74abfa2e.js"),require("./Icon-76e90c07.js"),require("./icons-310a07cc.js"),require("./common-1ab929ac.js"),require("./label-b8654499.js"),require("./index-38f5f0b2.js"),require("./events-fc641593.js"),require("./associated.controller-5e3fde43.js"),require("./access-and-short-key-12a097ab.js"),require("./tooltip-align-3b9a6bde.js"),require("./align-b9732b91.js"),require("./hide-label-b0063224.js"),require("./i18n-1d085d07.js"),require("./i18n-737701e2.js"),require("./Alert-23922b64.js"),require("./Heading-f7677881.js");class SelectController extends controllerIcon.InputIconController{constructor(e,t,n){super(e,t,n),this.keyOptionMap=new Map,this.getOptionByKey=e=>this.keyOptionMap.get(e),this.isValueInOptions=(e,t)=>void 0!==t.find((t=>"string"==typeof t.value?t.value===e:!!Array.isArray(t.options)&&this.isValueInOptions(e,t.options))),this.filterValuesInOptions=(e,t)=>e.filter((e=>void 0!==this.isValueInOptions(e,t))),this.afterPatchOptions=(e,t,n,i)=>{"_value"===i&&this.setFormAssociatedValue(e)},this.beforePatchOptions=(e,t)=>{const n=t.has("_options")?t.get("_options"):this.component.state._options;if(Array.isArray(n)&&n.length>0){this.keyOptionMap.clear(),controller.fillKeyOptionMap(this.keyOptionMap,n);const e=t.has("_value")?t.get("_value"):this.component.state._value,i=this.filterValuesInOptions(Array.isArray(e)&&e.length>0?e:[],n);!1===this.component._multiple&&0===i.length?t.set("_value",[n[0].value]):Array.isArray(e)&&i.length<e.length&&t.set("_value",i)}},this.component=e}validateOptions(e){controller.validateOptionsWithOptgroup(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){prop_validators.watchBoolean(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){prop_validators.watchBoolean(this.component,"_required",e)}validateRows(e){rows.validateRows(this.component,e)}validateValue(e){prop_validators.watchJsonArrayString(this.component,"_value",(()=>!0),e,void 0,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}componentWillLoad(){super.componentWillLoad(),this.validateOptions(this.component._options),this.validateMultiple(this.component._multiple),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateValue(this.component._value)}}const NativeOptionFc=e=>{var{baseClassName:t="kol-select",class:n,index:i,selectedValue:o,selected:l,value:a,label:s,disabled:r}=e,d=tslib_es6.__rest(e,["baseClassName","class","index","selectedValue","selected","value","label","disabled"]);o?Array.isArray(o)||(o=[o]):o=[];const c=l||o.includes(a);return index.h("option",Object.assign({class:clsx.clsx(`${t}__option`,{[`${t}__option--selected`]:c,[`${t}__option--disabled`]:r},n),selected:c,disabled:r,value:i||a},d),s)},NativeOptionFc$1=NativeOptionFc,NativeOptionListFc=({baseClassName:e,preKey:t,options:n,disabled:i,value:o,OptionProps:l={},OptionGroupProps:a={}})=>(null==n?void 0:n.length)?index.h(index.Fragment,null,n.map(((s,r)=>{const d=[t,`-${r}`].join("");if("options"in s){if(!n.length)return null;const{label:t}=s,r=tslib_es6.__rest(s,["label"]);return index.h("optgroup",Object.assign({class:clsx.clsx(`${e}__optgroup`,{[`${e}__optgroup--disabled`]:i}),key:d},a,{label:null==t?void 0:t.toString(),disabled:i}),index.h(NativeOptionListFc,Object.assign({baseClassName:e,OptionGroupProps:a,OptionProps:l,value:o,preKey:d},r)))}return"value"in s?index.h(NativeOptionFc$1,Object.assign({key:d,baseClassName:e},l,{index:d,selectedValue:o},s)):null}))):null,NativeOptionListFc$1=NativeOptionListFc,NativeSelectFc=e=>{const{class:t,msg:n,touched:i,disabled:o,required:l,options:a,value:s,OptionProps:r,OptionGroupProps:d,ariaDescribedBy:c,hideLabel:h,label:u}=e,p=tslib_es6.__rest(e,["class","msg","touched","disabled","required","options","value","OptionProps","OptionGroupProps","ariaDescribedBy","hideLabel","label"]),b=FormFieldMsg.checkHasError(n,i),v={"kol-select--disabled":Boolean(o),"kol-select--required":Boolean(l),"kol-select--touched":Boolean(i),[`kol-select--${(null==n?void 0:n.type)||"error"}`]:b},m=Object.assign(Object.assign({class:clsx.clsx("kol-select",v,t),required:l,disabled:o},getRenderStates.getDefaultProps({ariaDescribedBy:c,hideLabel:h,label:u})),p);return index.h("select",Object.assign({},m),index.h(NativeOptionListFc$1,{baseClassName:"kol-select",options:a,value:s,OptionGroupProps:d,OptionProps:r}))},KolSelectFc=NativeSelectFc;function getSelectProps(e){const{ariaDescribedBy:t}=getRenderStates.getRenderStates(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,options:e._options,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,size:e._rows,multiple:e._multiple,required:e._required,touched:e._touched,msg:FormFieldMsg.convertMsgToInternMsg(e._msg)}}const SelectStateWrapper=e=>{var{state:t}=e,n=tslib_es6.__rest(e,["state"]);return index.h(KolSelectFc,Object.assign({},getSelectProps(t),n))},KolSelectStateWrapperFc=SelectStateWrapper,defaultStyleCss='@charset "UTF-8";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don\'t want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n}\n@layer kol-component {\n  .kol-select {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    cursor: pointer;\n    width: 100%;\n    /* needed hack for vertical alignment */\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}',KolSelectDefaultStyle0=defaultStyleCss,KolSelect=class{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.selectRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx.clsx("kol-form-field-select",{"kol-form-field--has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getSelectProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state},this.controller.onFacade),{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return index.h(getRenderStates.KolFormFieldStateWrapperFc,Object.assign({key:"cb24688d5f50efd212da1951d0725fc665380756"},this.getFormFieldProps()),index.h(controllerIcon.KolInputContainerFc,{key:"6f9768fad819964b5c1e11bd61999df9bd7ee701",state:this.state},index.h("form",{key:"fdd0c32b3f2ba907f5d000f1a549e65061c03fda",onSubmit:e=>{e.preventDefault(),controller$1.propagateSubmitEventToForm({form:this.host,ref:this.selectRef})}},index.h("input",{key:"617fb6776a517574b4b145c05336bf9b1c9e22c0",type:"submit",hidden:!0}),index.h(KolSelectStateWrapperFc,Object.assign({key:"83d2b64238a53f79b1c902092e0169f9a3a6c61d"},this.getSelectProps())))))}constructor(e){index.registerInstance(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._multiple=!1,this._name=void 0,this._on=void 0,this._options=void 0,this._required=!1,this._shortKey=void 0,this._rows=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${dev_utils.nonce()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.inputHasFocus=!1,this.controller=new SelectController(this,"select",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateMultiple(e){this.controller.validateMultiple(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateOptions(e){this.controller.validateOptions(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e))}onInput(e){var t;this._value=Array.from((null===(t=this.selectRef)||void 0===t?void 0:t.options)||[]).filter((e=>!0===e.selected)).map((e=>{var t;return null===(t=this.controller.getOptionByKey(e.value))||void 0===t?void 0:t.value})),this.controller.onFacade.onInput(e,!0,this._value)}onChange(e){this.controller.onFacade.onChange(e,this._value)}get host(){return index.getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};KolSelect.style={default:KolSelectDefaultStyle0},exports.kol_select=KolSelect;

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

@@ -1 +1 @@
-{"file":"kol-select.entry.cjs.js","mappings":"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","names":["InputIconController","fillKeyOptionMap","validateOptionsWithOptgroup","watchBoolean","validateRows","watchJsonArrayString","h","index","getRenderStates","showExpertSlot","Host","KolInputTag","InternalUnderlinedBadgeText","buildBadgeTextString","propagateSubmitEventToForm","nonce","tryToDispatchKoliBriEvent","stopPropagation"],"sources":["src/components/select/controller.ts","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '../../schema';\nimport { validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t\t: false,\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[],\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Currently, multiple selection is not yet supported. We are working on implementing it to be functional, as there are some gaps in the browser standard.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] For multiple selections, the list length (size) should also be set.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../input-line';\n\n@include kol-alert-styles;\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\n\t\toption:checked::before {\n\t\t\tcontent: '✓ ';\n\t\t}\n\t}\n}\n","import type {\n\tFocusableElement,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectOption,\n\tSelectStates,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { getRenderStates } from '../input/controller';\nimport { InternalUnderlinedBadgeText } from '../../functional-components';\nimport { SelectController } from './controller';\nimport { KolInputTag } from '../../core/component-names';\nimport { propagateSubmitEventToForm } from '../form/controller';\n\nconst isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {\n\treturn Array.isArray(valueList) && valueList.includes(optionValue);\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate selectRef?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.selectRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.selectRef?.focus();\n\t}\n\n\tprivate renderOptgroup(optgroup: Optgroup<string>, preKey: string): JSX.Element {\n\t\treturn (\n\t\t\t<optgroup disabled={optgroup.disabled} label={optgroup.label}>\n\t\t\t\t{optgroup.options?.map((option: SelectOption<W3CInputValue>, index: number) => {\n\t\t\t\t\tconst key = `${preKey}-${index}`;\n\t\t\t\t\tif (Array.isArray((option as Optgroup<string>).options)) {\n\t\t\t\t\t\treturn this.renderOptgroup(option as Optgroup<string>, key);\n\t\t\t\t\t} else {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</optgroup>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\n\t\treturn (\n\t\t\t<Host class={{ 'kol-select': true, 'has-value': this.state._hasValue }}>\n\t\t\t\t<KolInputTag\n\t\t\t\t\tclass={{\n\t\t\t\t\t\t'hide-label': !!this.state._hideLabel,\n\t\t\t\t\t\tselect: true,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t_alert={this.showAsAlert()}\n\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t_shortKey={this.state._shortKey}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\tonClick={() => this.selectRef?.focus()}\n\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t>\n\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</span>\n\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t<form\n\t\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\t\tref: this.selectRef,\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t\t<select\n\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\ttitle=\"\"\n\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\tmultiple={this.state._multiple}\n\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\tsize={this.state._rows}\n\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{this.state._options.map((option, index) => {\n\t\t\t\t\t\t\t\t\t/**\n\t\t\t\t\t\t\t\t\t * Damit der Value einer Option ein beliebigen Typ haben kann\n\t\t\t\t\t\t\t\t\t * muss man auf HTML-Ebene den Value auf einen String-Wert\n\t\t\t\t\t\t\t\t\t * mappen. Das tun wir mittels der Map.\n\t\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t\tconst key = `-${index}`;\n\t\t\t\t\t\t\t\t\tif (Array.isArray((option as unknown as Optgroup<string>).options)) {\n\t\t\t\t\t\t\t\t\t\treturn this.renderOptgroup(option as unknown as Optgroup<string>, key);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t\t\t\t\t\t// label={option.label}\n\t\t\t\t\t\t\t\t\t\t\t\tselected={isSelected(this.state._value, (option as unknown as Option<W3CInputValue>).value)}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={key}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</select>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</div>\n\t\t\t\t</KolInputTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Defines the error message text.\n\t * @deprecated Will be removed in v3. Use `msg` instead.\n\t */\n\t@Prop() public _error?: string;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_error')\n\tpublic validateError(value?: string): void {\n\t\tthis.controller.validateError(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tthis._value = Array.from(this.selectRef?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\t// Event handling\n\t\ttryToDispatchKoliBriEvent('input', this.host, this._value);\n\n\t\t// Callback\n\t\tthis.state._on?.onInput?.(event, this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tthis.state._on?.onChange?.(event, this._value);\n\t}\n}\n"],"version":3}
+{"file":"kol-select.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAiBa,gBAAiB,SAAQA,kCAAmB;IAIxD,YAAmB,SAAkD,EAAE,IAAY,EAAE,IAAkB;QACtG,KAAK,CAAC,SAAS,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAHb,iBAAY,GAAG,IAAI,GAAG,EAAiC,CAAC;QAOzD,mBAAc,GAAG,CAAC,GAAW,KAAwC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAE/F,qBAAgB,GAAG,CAAC,KAAa,EAAE,OAAsC;YACzF,QACC,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,KACnB,OAAQ,MAAgC,CAAC,KAAK,KAAK,QAAQ;kBACvD,MAAgC,CAAC,KAAK,KAAK,KAAK;kBACjD,KAAK,CAAC,OAAO,CAAE,MAA2B,CAAC,OAAO,CAAC;sBAClD,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAG,MAA2B,CAAC,OAAO,CAAC;sBAClE,KAAK,CACT,KAAK,SAAS,EACd;SACF,CAAC;QAEe,0BAAqB,GAAG,CAAC,MAAgB,EAAE,OAAsC;YACjG,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,SAAS,CAAC,CAAC;SACrF,CAAC;QAEiB,sBAAiB,GAAG,CAAC,KAAc,EAAE,MAA+B,EAAE,UAAqC,EAAE,GAAW;YAC1I,IAAI,GAAG,KAAK,QAAQ,EAAE;gBACrB,IAAI,CAAC,sBAAsB,CAAC,KAAe,CAAC,CAAC;aAC7C;SACD,CAAC;QAEe,uBAAkB,GAAG,CAAC,MAAe,EAAE,SAA+B;YACtF,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAC;YACtG,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,CAAC,MAAM,GAAG,CAAC,EAAE;gBACjD,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;gBAC1BC,2BAAgB,CAAC,IAAI,CAAC,YAAY,EAAE,OAAwC,CAAC,CAAC;gBAC9E,MAAM,KAAK,GAAG,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;gBAC9F,MAAM,QAAQ,GAAG,IAAI,CAAC,qBAAqB,CAC1C,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,GAAI,KAAkB,GAAG,EAAE,EACnE,OAAwC,CACxC,CAAC;gBACF,IAAI,IAAI,CAAC,SAAS,CAAC,SAAS,KAAK,KAAK,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC,EAAE;oBAChE,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE;wBAEtB,OAAO,CAAC,CAAC,CAGT,CAAC,KAAK;qBACP,CAAC,CAAC;iBACH;qBAAM,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,QAAQ,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,EAAE;oBAClE,SAAS,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;iBAClC;aACD;SACD,CAAC;QAjDD,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC3B;IAkDM,eAAe,CAAC,KAAmC;QACzDC,sCAA2B,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE;YAClD,KAAK,EAAE;gBACN,UAAU,EAAE,IAAI,CAAC,iBAAiB;gBAClC,WAAW,EAAE,IAAI,CAAC,kBAAkB;aACpC;SACD,CAAC,CAAC;KACH;IAEM,gBAAgB,CAAC,KAAe;QACtCC,4BAAY,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE;YAChD,KAAK,EAAE;gBACN,UAAU,EAAE,IAAI,CAAC,iBAAiB;gBAClC,WAAW,EAAE,IAAI,CAAC,kBAAkB;aACpC;SACD,CAAC,CAAC;KAOH;IAEM,gBAAgB,CAAC,KAAe;QACtCA,4BAAY,CAAC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,KAAK,CAAC,CAAC;KACjD;IAEM,YAAY,CAAC,KAAoB;QACvCC,iBAAY,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;KACpC;IAEM,aAAa,CAAC,KAAoC;QACxDC,oCAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE;YAC5E,KAAK,EAAE;gBACN,UAAU,EAAE,IAAI,CAAC,iBAAiB;gBAClC,WAAW,EAAE,IAAI,CAAC,kBAAkB;aACpC;SACD,CAAC,CAAC;KACH;IAEM,iBAAiB;QACvB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;KAC1C;;;AC7GF,MAAM,cAAc,GAA0B,CAAC,EAU9C;QAV8C,EAC9C,aAAa,GAAG,YAAY,EAC5B,KAAK,EAAE,UAAU,SACjBC,OAAK,EACL,aAAa,EACb,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAQ,OAER,EADG,KAAK,wBATsC,8FAU9C,CADQ;IAER,IAAI,CAAC,aAAa,EAAE;QACnB,aAAa,GAAG,EAAE,CAAC;KACnB;SAAM,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE;QACzC,aAAa,GAAG,CAAC,aAAa,CAAC,CAAC;KAChC;IAED,MAAM,UAAU,GAAG,QAAQ,IAAI,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE7D,QACCC,kCACC,KAAK,EAAEC,SAAI,CACV,GAAG,aAAa,UAAU,EAC1B;YACC,CAAC,GAAG,aAAa,oBAAoB,GAAG,UAAU;YAClD,CAAC,GAAG,aAAa,oBAAoB,GAAG,QAAQ;SAChD,EACD,UAAU,CACV,EACD,QAAQ,EAAE,UAAU,EACpB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAEF,OAAK,IAAI,KAAK,IACjB,KAAK,GAER,KAAK,CACE,EACR;AACH,CAAC,CAAC;AAEF,yBAAe,cAAc;;AClC7B,MAAM,kBAAkB,GAA8B,CAAC,EACtD,aAAa,EACb,MAAM,EACN,OAAO,EACP,QAAQ,EACR,KAAK,EAAE,aAAa,EACpB,WAAW,GAAG,EAAE,EAChB,gBAAgB,GAAG,EAAE,GACrB;IACA,IAAI,EAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA,EAAE;QACrB,OAAO,IAAI,CAAC;KACZ;IAED,QACCC,8BACE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAED,OAAK;QAC1B,MAAM,GAAG,GAAG,CAAC,MAAM,EAAE,IAAIA,OAAK,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAE3C,IAAI,SAAS,IAAI,MAAM,EAAE;YACxB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE;gBACpB,OAAO,IAAI,CAAC;aACZ;YAED,MAAM,EAAE,KAAK,KAAe,MAAM,EAAhB,KAAK,oBAAK,MAAM,EAA5B,SAAmB,CAAS,CAAC;YAEnC,QACCC,oCACC,KAAK,EAAEC,SAAI,CAAC,GAAG,aAAa,YAAY,EAAE,EAAE,CAAC,GAAG,aAAa,sBAAsB,GAAG,QAAQ,EAAE,CAAC,EACjG,GAAG,EAAE,GAAG,IACJ,gBAAgB,IACpB,KAAK,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,EAAE,EACxB,QAAQ,EAAE,QAAQ;gBAElBD,QAAC,kBAAkB,kBAClB,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,aAAa,EACpB,MAAM,EAAE,GAAG,IACP,KAAK,EACR,CACQ,EACV;SACF;QAED,IAAI,OAAO,IAAI,MAAM,EAAE;YACtB,OAAOA,QAACE,gBAAc,kBAAC,GAAG,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,IAAM,WAAW,IAAE,KAAK,EAAE,GAAG,EAAE,aAAa,EAAE,aAAa,IAAM,MAAM,EAAI,CAAC;SACzI;QAED,OAAO,IAAI,CAAC;KACZ,CAAC,CACA,EACF;AACH,CAAC,CAAC;AAEF,6BAAe,kBAAkB;;ACzDjC,MAAM,cAAc,GAAoB,CAAC,KAAK;IAC7C,MAAM,EACL,KAAK,EAAE,UAAU,EACjB,GAAG,EACH,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,KAAK,KAEF,KAAK,EADL,KAAK,oBACL,KAAK,EAdH,mJAcL,CAAQ,CAAC;IAEV,MAAM,OAAO,GAAGC,0BAAa,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;IAE5C,MAAM,eAAe,GAAG;QACvB,CAAC,sBAAsB,GAAG,OAAO,CAAC,QAAQ,CAAC;QAC3C,CAAC,sBAAsB,GAAG,OAAO,CAAC,QAAQ,CAAC;QAC3C,CAAC,qBAAqB,GAAG,OAAO,CAAC,OAAO,CAAC;QACzC,CAAC,eAAe,CAAA,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,IAAI,KAAI,OAAO,EAAE,GAAG,OAAO;KAChD,CAAC;IAEF,MAAM,UAAU,iCACf,KAAK,EAAEF,SAAI,CAAC,YAAY,EAAE,eAAe,EAAE,UAAU,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IACfG,+BAAe,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,GACtD,KAAK,CACR,CAAC;IAEF,QACCJ,oCAAY,UAAU;QACrBA,QAACK,oBAAkB,IAAC,aAAa,EAAC,YAAY,EAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,WAAW,EAAE,WAAW,GAAI,CACvI,EACR;AACH,CAAC,CAAC;AAEF,oBAAe,cAAc;;AC/C7B,SAAS,cAAc,CAAC,KAAmB;IAC1C,MAAM,EAAE,eAAe,EAAE,GAAGC,+BAAe,CAAC,KAAK,CAAC,CAAC;IAEnD,MAAM,KAAK,GAAgB;QAC1B,EAAE,EAAE,KAAK,CAAC,GAAG;QACb,SAAS,EAAE,KAAK,CAAC,UAAU;QAC3B,KAAK,EAAE,KAAK,CAAC,MAAM;QACnB,KAAK,EAAE,KAAK,CAAC,MAAM;QACnB,OAAO,EAAE,KAAK,CAAC,QAAQ;QACvB,SAAS,EAAE,KAAK,CAAC,UAAU;QAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS;QACzB,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,eAAe,EAAE,eAAe;QAChC,IAAI,EAAE,KAAK,CAAC,KAAK;QACjB,QAAQ,EAAE,KAAK,CAAC,SAAS;QACzB,QAAQ,EAAE,KAAK,CAAC,SAAS;QACzB,OAAO,EAAE,KAAK,CAAC,QAAQ;QACvB,GAAG,EAAEC,kCAAqB,CAAC,KAAK,CAAC,IAAI,CAAC;KACtC,CAAC;IAEF,OAAO,KAAK,CAAC;AACd,CAAC;AAED,MAAM,kBAAkB,GAAgC,CAAC,EAAmB;QAAnB,EAAE,KAAK,OAAY,EAAP,KAAK,wBAAjB,SAAmB,CAAF;IACzE,OAAOP,QAAC,WAAW,oBAAK,cAAc,CAAC,KAAK,CAAC,EAAM,KAAK,EAAI,CAAC;AAC9D,CAAC,CAAC;AAEF,gCAAe,kBAAkB;;ACrCjC,MAAM,eAAe,GAAG,ktPAAktP,CAAC;AAC3uP,+BAAe,eAAe;;MCwCjB,SAAS;IAUd,MAAM,QAAQ;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;KACzB;IAIM,MAAM,QAAQ;;QACpB,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAC;KACxB;IAEO,iBAAiB;QACxB,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,KAAK,EAAEC,SAAI,CAAC,uBAAuB,EAAE;gBACpC,2BAA2B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS;aACjD,CAAC;YACF,YAAY,EAAE,IAAI,CAAC,aAAa;YAChC,OAAO,EAAE,gBAAM,OAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,KAAK,EAAE,CAAA,EAAA;YACtC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE;SACzB,CAAC;KACF;IAEO,cAAc;QACrB,qCACC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,IACd,IAAI,CAAC,UAAU,CAAC,QAAQ,KAC3B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAClC,OAAO,EAAE,CAAC,KAAY;gBACrB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;aAC1B,EACD,MAAM,EAAE,CAAC,KAAY;gBACpB,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACvC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;aAC3B,IACA;KACF;IAEM,MAAM;QACZ,QACCD,QAACQ,0CAA0B,qEAAK,IAAI,CAAC,iBAAiB,EAAE,GACvDR,QAACS,kCAAmB,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IACrCT,mEACC,QAAQ,EAAE,CAAC,KAAK;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvBU,uCAA0B,CAAC;oBAC1B,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,GAAG,EAAE,IAAI,CAAC,SAAS;iBACnB,CAAC,CAAC;aACH,IAEDV,oEAAO,IAAI,EAAC,QAAQ,EAAC,MAAM,SAAG,EAC9BA,QAAC,uBAAuB,qEAAK,IAAI,CAAC,cAAc,EAAE,EAAI,CAChD,CACc,CACM,EAC5B;KACF;IAiID;;QAlMiB,aAAQ,GAAG,CAAC,GAAuB;YACnD,IAAI,CAAC,SAAS,GAAG,GAAG,CAAC;SACrB,CAAC;;yBA4EmC,KAAK;wBAM0B,KAAK;0BAOnC,KAAK;qBAKX,EAAE;;;;;yBA0BG,KAAK;;;;yBAqBL,KAAK;;;;;6BA0BY,KAAK;wBAMS,KAAK;;qBAOnC;YACrC,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,KAAK;YACf,GAAG,EAAE,MAAMW,eAAK,EAAE,EAAE;YACpB,MAAM,EAAE,EAAE;YACV,SAAS,EAAE,KAAK;YAChB,QAAQ,EAAE,EAAE;YACZ,MAAM,EAAE,EAAE;SACV;6BAEgC,KAAK;QAGrC,IAAI,CAAC,UAAU,GAAG,IAAI,gBAAgB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;KAClE;IAEO,WAAW;QAClB,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;KAC3D;IAGM,iBAAiB,CAAC,KAAc;QACtC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,eAAe,CAAC,KAAuB;QAC7C,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,iBAAiB,CAAC,KAAe;QACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;KACzC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,aAAa,CAAC,KAA2C;QAC/D,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,UAAU,CAAC,KAAc;QAC/B,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,aAAa,CAAC,KAAmC;QACvD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAGM,WAAW,CAAC,KAAgC;QAClD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;KACnC;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,YAAY,CAAC,KAAc;QACjC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,UAAU,CAAC,KAA0B;QAC3C,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;KAClC;IAGM,eAAe,CAAC,KAAmC;QACzD,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,gBAAgB,CAAC,KAAe;QACtC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,YAAY,CAAC,KAAoB;QACvC,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;KACpC;IAGM,gBAAgB,CAAC,KAAwB;QAC/C,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,2BAA2B,CAAC,KAAmC;QACrE,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,KAAK,CAAC,CAAC;KACnD;IAGM,gBAAgB,CAAC,KAAc;QACrC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAGM,eAAe,CAAC,KAAe;QACrC,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;KACvC;IAGM,aAAa,CAAC,KAAoC;QACxD,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;KACrC;IAEM,iBAAiB;QACvB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC;QACvC,IAAI,CAAC,UAAU,CAAC,iBAAiB,EAAE,CAAC;QAEpC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAC3C,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC5E;IAEO,OAAO,CAAC,KAAY;;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,SAAS,0CAAE,OAAO,KAAI,EAAE,CAAC;aACrD,MAAM,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,KAAK,IAAI,CAAC;aAC5C,GAAG,CAAC,CAAC,MAAM,eAAK,OAAA,MAAA,IAAI,CAAC,UAAU,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,0CAAE,KAAe,CAAA,EAAA,CAAC,CAAC;QAEjF,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KAC3D;IAEO,QAAQ,CAAC,KAAY;QAC5B,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["InputIconController","fillKeyOptionMap","validateOptionsWithOptgroup","watchBoolean","validateRows","watchJsonArrayString","index","h","clsx","NativeOptionFc","checkHasError","getDefaultProps","NativeOptionListFc","getRenderStates","convertMsgToInternMsg","KolFormFieldStateWrapperFc","KolInputContainerFc","propagateSubmitEventToForm","nonce"],"sources":["src/components/select/controller.ts","src/functional-components/inputs/NativeOption/NativeOption.tsx","src/functional-components/inputs/NativeOptionList/NativeOptionList.tsx","src/functional-components/inputs/NativeSelect/NativeSelect.tsx","src/functional-component-wrappers/SelectStateWrapper/SelectStateWrapper.tsx","src/components/select/style.scss?tag=kol-select&mode=default&encapsulation=shadow","src/components/select/shadow.tsx"],"sourcesContent":["import type {\n\tOptgroup,\n\tOption,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectOption,\n\tSelectProps,\n\tSelectWatches,\n\tStringified,\n\tW3CInputValue,\n} from '../../schema';\nimport { validateOptionsWithOptgroup, validateRows, watchBoolean, watchJsonArrayString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\nimport { fillKeyOptionMap } from '../input-radio/controller';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class SelectController extends InputIconController implements SelectWatches {\n\tprotected readonly component: Generic.Element.Component & SelectProps;\n\tprivate readonly keyOptionMap = new Map<string, Option<W3CInputValue>>();\n\n\tpublic constructor(component: Generic.Element.Component & SelectProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic readonly getOptionByKey = (key: string): Option<W3CInputValue> | undefined => this.keyOptionMap.get(key);\n\n\tprivate readonly isValueInOptions = (value: string, options: SelectOption<W3CInputValue>[]): boolean => {\n\t\treturn (\n\t\t\toptions.find((option) =>\n\t\t\t\ttypeof (option as Option<W3CInputValue>).value === 'string'\n\t\t\t\t\t? (option as Option<W3CInputValue>).value === value\n\t\t\t\t\t: Array.isArray((option as Optgroup<string>).options)\n\t\t\t\t\t\t? this.isValueInOptions(value, (option as Optgroup<string>).options)\n\t\t\t\t\t\t: false,\n\t\t\t) !== undefined\n\t\t);\n\t};\n\n\tprivate readonly filterValuesInOptions = (values: string[], options: SelectOption<W3CInputValue>[]): string[] => {\n\t\treturn values.filter((value) => this.isValueInOptions(value, options) !== undefined);\n\t};\n\n\tprotected readonly afterPatchOptions = (value: unknown, _state: Record<string, unknown>, _component: Generic.Element.Component, key: string): void => {\n\t\tif (key === '_value') {\n\t\t\tthis.setFormAssociatedValue(value as string);\n\t\t}\n\t};\n\n\tprivate readonly beforePatchOptions = (_value: unknown, nextState: Map<string, unknown>): void => {\n\t\tconst options = nextState.has('_options') ? nextState.get('_options') : this.component.state._options;\n\t\tif (Array.isArray(options) && options.length > 0) {\n\t\t\tthis.keyOptionMap.clear();\n\t\t\tfillKeyOptionMap(this.keyOptionMap, options as SelectOption<W3CInputValue>[]);\n\t\t\tconst value = nextState.has('_value') ? nextState.get('_value') : this.component.state._value;\n\t\t\tconst selected = this.filterValuesInOptions(\n\t\t\t\tArray.isArray(value) && value.length > 0 ? (value as string[]) : [],\n\t\t\t\toptions as SelectOption<W3CInputValue>[],\n\t\t\t);\n\t\t\tif (this.component._multiple === false && selected.length === 0) {\n\t\t\t\tnextState.set('_value', [\n\t\t\t\t\t(\n\t\t\t\t\t\toptions[0] as {\n\t\t\t\t\t\t\tvalue: string;\n\t\t\t\t\t\t}\n\t\t\t\t\t).value,\n\t\t\t\t]);\n\t\t\t} else if (Array.isArray(value) && selected.length < value.length) {\n\t\t\t\tnextState.set('_value', selected);\n\t\t\t}\n\t\t}\n\t};\n\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tvalidateOptionsWithOptgroup(this.component, value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic validateMultiple(value?: boolean): void {\n\t\twatchBoolean(this.component, '_multiple', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t\t// if (value === true) {\n\t\t// \tdevHint(\n\t\t// \t\t'[KolSelect] Currently, multiple selection is not yet supported. We are working on implementing it to be functional, as there are some gaps in the browser standard.'\n\t\t// \t);\n\t\t// \tdevHint('[KolSelect] For multiple selections, the list length (size) should also be set.');\n\t\t// }\n\t}\n\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType) {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\twatchJsonArrayString(this.component, '_value', () => true, value, undefined, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterPatchOptions,\n\t\t\t\tbeforePatch: this.beforePatchOptions,\n\t\t\t},\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateOptions(this.component._options);\n\t\tthis.validateMultiple(this.component._multiple);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport type { W3CInputValue } from '../../../schema';\nimport clsx from 'clsx';\n\nexport type NativeOptionProps = Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'> & {\n\tselectedValue?: W3CInputValue | W3CInputValue[];\n\tvalue: W3CInputValue;\n\tlabel: W3CInputValue;\n\tindex?: string | number;\n\tbaseClassName?: 'kol-select' | 'kol-datalist';\n};\n\nconst NativeOptionFc: FC<NativeOptionProps> = ({\n\tbaseClassName = 'kol-select',\n\tclass: classNames,\n\tindex,\n\tselectedValue,\n\tselected,\n\tvalue,\n\tlabel,\n\tdisabled,\n\t...other\n}) => {\n\tif (!selectedValue) {\n\t\tselectedValue = [];\n\t} else if (!Array.isArray(selectedValue)) {\n\t\tselectedValue = [selectedValue];\n\t}\n\n\tconst isSelected = selected || selectedValue.includes(value);\n\n\treturn (\n\t\t<option\n\t\t\tclass={clsx(\n\t\t\t\t`${baseClassName}__option`,\n\t\t\t\t{\n\t\t\t\t\t[`${baseClassName}__option--selected`]: isSelected,\n\t\t\t\t\t[`${baseClassName}__option--disabled`]: disabled,\n\t\t\t\t},\n\t\t\t\tclassNames,\n\t\t\t)}\n\t\t\tselected={isSelected}\n\t\t\tdisabled={disabled}\n\t\t\tvalue={index || value}\n\t\t\t{...other}\n\t\t>\n\t\t\t{label}\n\t\t</option>\n\t);\n};\n\nexport default NativeOptionFc;\n","import { h, Fragment, type FunctionalComponent as FC } from '@stencil/core';\nimport clsx from 'clsx';\nimport type { SelectOption, W3CInputValue } from '../../../schema';\nimport NativeOptionFc from '../NativeOption/NativeOption';\nimport type { JSXBase } from '@stencil/core/internal';\n\nexport type NativeOptionListProps = {\n\tpreKey?: string;\n\tdisabled?: boolean;\n\tvalue?: W3CInputValue | W3CInputValue[];\n\toptions?: SelectOption<W3CInputValue>[];\n\n\tOptionProps?: Omit<JSXBase.OptionHTMLAttributes<HTMLOptionElement>, 'value' | 'label'>;\n\tOptionGroupProps?: Omit<JSXBase.OptgroupHTMLAttributes<HTMLOptGroupElement>, 'label'>;\n\n\tbaseClassName?: 'kol-select';\n};\n\nconst NativeOptionListFc: FC<NativeOptionListProps> = ({\n\tbaseClassName,\n\tpreKey,\n\toptions,\n\tdisabled,\n\tvalue: selectedValue,\n\tOptionProps = {},\n\tOptionGroupProps = {},\n}) => {\n\tif (!options?.length) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tconst key = [preKey, `-${index}`].join('');\n\n\t\t\t\tif ('options' in option) {\n\t\t\t\t\tif (!options.length) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst { label, ...other } = option;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<optgroup\n\t\t\t\t\t\t\tclass={clsx(`${baseClassName}__optgroup`, { [`${baseClassName}__optgroup--disabled`]: disabled })}\n\t\t\t\t\t\t\tkey={key}\n\t\t\t\t\t\t\t{...OptionGroupProps}\n\t\t\t\t\t\t\tlabel={label?.toString()}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<NativeOptionListFc\n\t\t\t\t\t\t\t\tbaseClassName={baseClassName}\n\t\t\t\t\t\t\t\tOptionGroupProps={OptionGroupProps}\n\t\t\t\t\t\t\t\tOptionProps={OptionProps}\n\t\t\t\t\t\t\t\tvalue={selectedValue}\n\t\t\t\t\t\t\t\tpreKey={key}\n\t\t\t\t\t\t\t\t{...other}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</optgroup>\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn <NativeOptionFc key={key} baseClassName={baseClassName} {...OptionProps} index={key} selectedValue={selectedValue} {...option} />;\n\t\t\t\t}\n\n\t\t\t\treturn null;\n\t\t\t})}\n\t\t</>\n\t);\n};\n\nexport default NativeOptionListFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { getDefaultProps } from '../_helpers/getDefaultProps';\nimport type { DefaultInputProps } from '../_types';\nimport NativeOptionListFc, { type NativeOptionListProps } from '../NativeOptionList';\nimport { checkHasError, type InternMsgPropType } from '../../../schema';\n\ntype SelectAttributes = JSXBase.SelectHTMLAttributes<HTMLSelectElement>;\n\nexport type SelectProps = DefaultInputProps<SelectAttributes> &\n\tNativeOptionListProps & {\n\t\ttouched?: boolean;\n\t\tmsg?: InternMsgPropType;\n\t};\n\nconst NativeSelectFc: FC<SelectProps> = (props) => {\n\tconst {\n\t\tclass: classNames,\n\t\tmsg,\n\t\ttouched,\n\t\tdisabled,\n\t\trequired,\n\t\toptions,\n\t\tvalue,\n\t\tOptionProps,\n\t\tOptionGroupProps,\n\t\tariaDescribedBy,\n\t\thideLabel,\n\t\tlabel,\n\t\t...other\n\t} = props;\n\n\tconst showMsg = checkHasError(msg, touched);\n\n\tconst stateCssClasses = {\n\t\t['kol-select--disabled']: Boolean(disabled),\n\t\t['kol-select--required']: Boolean(required),\n\t\t['kol-select--touched']: Boolean(touched),\n\t\t[`kol-select--${msg?.type || 'error'}`]: showMsg,\n\t};\n\n\tconst inputProps: SelectAttributes = {\n\t\tclass: clsx('kol-select', stateCssClasses, classNames),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\t...getDefaultProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn (\n\t\t<select {...inputProps}>\n\t\t\t<NativeOptionListFc baseClassName=\"kol-select\" options={options} value={value} OptionGroupProps={OptionGroupProps} OptionProps={OptionProps} />\n\t\t</select>\n\t);\n};\n\nexport default NativeSelectFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolSelectFc, { type SelectProps } from '../../functional-components/inputs/NativeSelect';\n\nimport { convertMsgToInternMsg, type SelectStates } from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\nexport type SelectStateWrapperProps = Partial<SelectProps> & {\n\tstate: SelectStates;\n};\n\nfunction getSelectProps(state: SelectStates): SelectProps {\n\tconst { ariaDescribedBy } = getRenderStates(state);\n\n\tconst props: SelectProps = {\n\t\tid: state._id,\n\t\thideLabel: state._hideLabel,\n\t\tlabel: state._label,\n\t\tvalue: state._value,\n\t\toptions: state._options,\n\t\taccessKey: state._accessKey,\n\t\tdisabled: state._disabled,\n\t\tname: state._name,\n\t\tariaDescribedBy: ariaDescribedBy,\n\t\tsize: state._rows,\n\t\tmultiple: state._multiple,\n\t\trequired: state._required,\n\t\ttouched: state._touched,\n\t\tmsg: convertMsgToInternMsg(state._msg),\n\t};\n\n\treturn props;\n}\n\nconst SelectStateWrapper: FC<SelectStateWrapperProps> = ({ state, ...other }) => {\n\treturn <KolSelectFc {...getSelectProps(state)} {...other} />;\n};\n\nexport default SelectStateWrapper;\n","@import '../../styles/global';\n@import '../../styles/kol-alert-mixin';\n@import '../../styles/kol-form-field-mixin';\n@import '../../styles/kol-input-container-mixin';\n@import '../../styles/kol-input-mixin';\n@import '../@shared/mixins';\n\n@include kol-alert;\n@include kol-form-field;\n@include kol-input-container;\n\n@layer kol-component {\n\t.kol-select {\n\t\tfont-size: rem(16);\n\t\tcursor: pointer;\n\t\twidth: 100%;\n\n\t\t&:not([multiple], [size]) {\n\t\t\theight: 2.75em;\n\t\t}\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\n\t\t&__option:checked::before {\n\t\t\tcontent: '✓ ';\n\t\t}\n\n\t\t/* needed hack for vertical alignment */\n\t\t&[multiple] option {\n\t\t\tpadding: calc((var(--a11y-min-size) - rem(16)) / 2) 0.5em;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tFocusableElement,\n\tHideMsgPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tOptionsWithOptgroupPropType,\n\tRowsPropType,\n\tSelectAPI,\n\tSelectStates,\n\tShortKeyPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { SelectController } from './controller';\nimport { propagateSubmitEventToForm } from '../form/controller';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper';\nimport KolSelectStateWrapperFc, { type SelectStateWrapperProps } from '../../functional-component-wrappers/SelectStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-select',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolSelect implements SelectAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolSelectElement;\n\tprivate selectRef?: HTMLSelectElement;\n\n\tprivate readonly catchRef = (ref?: HTMLSelectElement) => {\n\t\tthis.selectRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<W3CInputValue[]> | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.selectRef?.focus();\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-select', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.selectRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getSelectProps(): SelectStateWrapperProps {\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonFocus: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={(event) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\tpropagateSubmitEventToForm({\n\t\t\t\t\t\t\t\tform: this.host,\n\t\t\t\t\t\t\t\tref: this.selectRef,\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<input type=\"submit\" hidden />\n\t\t\t\t\t\t<KolSelectStateWrapperFc {...this.getSelectProps()} />\n\t\t\t\t\t</form>\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: SelectController;\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _disabled?: boolean = false;\n\n\t/**\n\t * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * Makes the input accept multiple inputs.\n\t * @TODO: Change type back to `MultiplePropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _multiple?: boolean = false;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Options the user can choose from, also supporting Optgroup.\n\t */\n\t@Prop() public _options?: OptionsWithOptgroupPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * Defines how many rows of options should be visible at the same time.\n\t */\n\t@Prop() public _rows?: RowsPropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: Stringified<W3CInputValue[]>;\n\n\t@State() public state: SelectStates = {\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_multiple: false,\n\t\t_options: [],\n\t\t_value: [],\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new SelectController(this, 'select', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_multiple')\n\tpublic validateMultiple(value?: boolean): void {\n\t\tthis.controller.validateMultiple(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_options')\n\tpublic validateOptions(value?: OptionsWithOptgroupPropType): void {\n\t\tthis.controller.validateOptions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(value);\n\t}\n\n\t@Watch('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: Stringified<W3CInputValue[]>): void {\n\t\tthis.controller.validateValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate onInput(event: Event): void {\n\t\tthis._value = Array.from(this.selectRef?.options || [])\n\t\t\t.filter((option) => option.selected === true)\n\t\t\t.map((option) => this.controller.getOptionByKey(option.value)?.value as string);\n\n\t\tthis.controller.onFacade.onInput(event, true, this._value);\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tthis.controller.onFacade.onChange(event, this._value);\n\t}\n}\n"],"version":3}