@public-ui/components 2.1.7-rc.2 → 2.1.8-rc.0

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

@@ -1 +1 @@
-{"version":3,"names":["ModalService","constructor","this","lockedElements","Map","modalStack","lockElement","htmlElement","tabIndex","getAttribute","HTMLAnchorElement","HTMLButtonElement","HTMLInputElement","HTMLSelectElement","HTMLTextAreaElement","dataset","kolModal","undefined","set","setAttribute","style","userSelect","unlockElement","value","removeAttribute","delete","unlockLockedElements","forEach","bind","lockFocus","hostElement","excludeElement","HTMLElement","ShadowRoot","shadowRoot","i","children","length","error","renderModalIfExists","activeElement","has","get","timeout","setTimeout","clearTimeout","focus","size","modalKeys","Array","from","keys","modalRef","_value","display","getDocument","body","maxHeight","overflow","openModal","Log","warn","closeModal","_a","defaultStyleCss","KolModalDefaultStyle0","modalService","KolModal","onKeyDown","event","code","_activeElement","_label","_width","componentDidRender","state","disconnectedCallback","render","h","Host","key","class","ref","el","width","role","validateActiveElement","watchValidator","Set","defaultValue","hooks","afterPatch","_on","onClose","validateLabel","required","validateOn","featureHint","callbacks","setState","validateWidth","watchString","componentWillLoad"],"sources":["src/components/modal/service.ts","src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["import { Log, getDocument } from '../../schema';\n\ntype ModalContext = {\n\tactiveElement?: HTMLElement;\n};\n\ntype LockedElementContext = {\n\ttabIndex?: string;\n};\n\n/**\n * The modal service is only working client-side!\n */\nexport class ModalService {\n\tprivate lockedElements: Map<HTMLElement, LockedElementContext> = new Map();\n\tprivate modalStack: Map<HTMLElement, ModalContext> = new Map();\n\n\tprivate lockElement(htmlElement: HTMLElement) {\n\t\tconst tabIndex: string | null = htmlElement.getAttribute('tabindex');\n\t\tif (\n\t\t\thtmlElement instanceof HTMLAnchorElement ||\n\t\t\thtmlElement instanceof HTMLButtonElement ||\n\t\t\thtmlElement instanceof HTMLInputElement ||\n\t\t\thtmlElement instanceof HTMLSelectElement ||\n\t\t\thtmlElement instanceof HTMLTextAreaElement ||\n\t\t\ttypeof tabIndex === 'string' ||\n\t\t\thtmlElement.dataset.kolModal !== undefined\n\t\t) {\n\t\t\tif (typeof tabIndex === 'string') {\n\t\t\t\tthis.lockedElements.set(htmlElement, {\n\t\t\t\t\ttabIndex,\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tthis.lockedElements.set(htmlElement, {});\n\t\t\t}\n\t\t\thtmlElement.setAttribute('tabindex', '-1');\n\t\t\thtmlElement.setAttribute('aria-hidden', 'true');\n\t\t\thtmlElement.style.userSelect = 'none';\n\t\t}\n\t}\n\n\tprivate unlockElement(value: LockedElementContext, htmlElement: HTMLElement) {\n\t\tif (typeof value.tabIndex === 'string') {\n\t\t\thtmlElement.setAttribute('tabindex', value.tabIndex);\n\t\t} else {\n\t\t\thtmlElement.removeAttribute('tabindex');\n\t\t}\n\t\thtmlElement.removeAttribute('aria-hidden');\n\t\thtmlElement.style.userSelect = 'unset';\n\t\tthis.lockedElements.delete(htmlElement);\n\t}\n\n\tprivate unlockLockedElements(lockedElements: Map<HTMLElement, LockedElementContext>) {\n\t\tlockedElements.forEach(this.unlockElement.bind(this));\n\t}\n\n\tprivate lockFocus(hostElement: HTMLElement | ShadowRoot | null, excludeElement?: HTMLElement) {\n\t\ttry {\n\t\t\tif (hostElement !== excludeElement && (hostElement instanceof HTMLElement || hostElement instanceof ShadowRoot)) {\n\t\t\t\tif (hostElement instanceof HTMLElement) {\n\t\t\t\t\tthis.lockElement(hostElement);\n\t\t\t\t\tthis.lockFocus(hostElement.shadowRoot, excludeElement);\n\t\t\t\t}\n\t\t\t\tfor (let i = 0; i < hostElement.children.length; i++) {\n\t\t\t\t\tthis.lockFocus(hostElement.children[i] as HTMLElement, excludeElement);\n\t\t\t\t}\n\t\t\t}\n\t\t} catch (error) {\n\t\t\t/**\n\t\t\t * Try is needed for SSR.\n\t\t\t * - no HTMLElement is available\n\t\t\t * - no ShadowRoot is available\n\t\t\t */\n\t\t}\n\t}\n\n\tprivate renderModalIfExists(activeElement?: HTMLElement) {\n\t\tif (activeElement instanceof HTMLElement) {\n\t\t\tif (this.lockedElements.has(activeElement)) {\n\t\t\t\tthis.unlockElement(this.lockedElements.get(activeElement) as LockedElementContext, activeElement);\n\t\t\t}\n\t\t\tconst timeout = setTimeout(() => {\n\t\t\t\tclearTimeout(timeout);\n\t\t\t\tactiveElement.focus();\n\t\t\t}, 500);\n\t\t}\n\t\tthis.unlockLockedElements(this.lockedElements);\n\t\tif (this.modalStack.size > 0) {\n\t\t\tconst modalKeys = Array.from(this.modalStack.keys());\n\t\t\tconst modalRef = modalKeys[modalKeys.length - 1] as HTMLElement & {\n\t\t\t\t_activeElement: HTMLElement | null; // typo sugger\n\t\t\t};\n\t\t\tthis.modalStack.forEach((_value: ModalContext, htmlElement: HTMLElement) => {\n\t\t\t\tif (modalRef === htmlElement) {\n\t\t\t\t\thtmlElement.style.display = 'inline';\n\t\t\t\t} else {\n\t\t\t\t\thtmlElement.style.display = `none`;\n\t\t\t\t}\n\t\t\t});\n\t\t\tgetDocument().body.style.maxHeight = '100vh';\n\t\t\tgetDocument().body.style.overflow = 'hidden';\n\t\t\tthis.lockFocus(getDocument().body, modalRef);\n\t\t} else {\n\t\t\tgetDocument().body.style.maxHeight = 'unset';\n\t\t\tgetDocument().body.style.overflow = 'unset';\n\t\t}\n\t}\n\n\tpublic openModal(modalRef: HTMLElement, activeElement?: HTMLElement): void {\n\t\tif (modalRef instanceof HTMLElement === false) {\n\t\t\tLog.warn(`[KolModalService] The DOM reference of the modal is not valid.`);\n\t\t} else {\n\t\t\tthis.modalStack.set(modalRef, {\n\t\t\t\tactiveElement,\n\t\t\t});\n\t\t\tthis.renderModalIfExists();\n\t\t}\n\t}\n\n\tpublic closeModal(modalRef: HTMLElement): void {\n\t\tif (modalRef instanceof HTMLElement === false) {\n\t\t\tLog.warn(`[KolModalService] The DOM reference of the modal is not valid.`);\n\t\t} else {\n\t\t\tconst activeElement = this.modalStack.get(modalRef)?.activeElement;\n\t\t\tthis.modalStack.delete(modalRef);\n\t\t\tthis.renderModalIfExists(activeElement);\n\t\t}\n\t}\n}\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\t.overlay {\n\t\tbackground-color: rgba(0, 0, 0, 0.33);\n\t\tdisplay: flex;\n\t\theight: 100%;\n\t\tinset: 0;\n\t\tposition: fixed;\n\t\twidth: 100%;\n\t\tz-index: 100;\n\t}\n\n\t.modal {\n\t\tmargin: auto;\n\t\tmax-height: 100%;\n\t\tmax-width: 100%;\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { featureHint, setState, validateLabel, watchString, watchValidator } from '../../schema';\nimport { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\nimport { ModalService } from './service';\n\nconst modalService = new ModalService();\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n * @deprecated use the native <dialog> instead\n */\n\n/**\n * @slot - Der Inhalt des Modals.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\tprivate hostElement?: HTMLElement;\n\n\tpublic componentDidRender(): void {\n\t\tif (this.hostElement /* SSR instanceof HTMLElement */) {\n\t\t\tif (this.state._activeElement /* SSR instanceof HTMLElement */) {\n\t\t\t\tmodalService.openModal(this.hostElement, this.state._activeElement);\n\t\t\t} else {\n\t\t\t\tmodalService.closeModal(this.hostElement);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tif (this.hostElement /* SSR instanceof HTMLElement */) {\n\t\t\tmodalService.closeModal(this.hostElement);\n\t\t}\n\t}\n\n\tprivate readonly onKeyDown = (event: KeyboardEvent) => {\n\t\tif (event && event.code === 'Escape') {\n\t\t\tthis._activeElement = null;\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host\n\t\t\t\tclass=\"kol-modal\"\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.hostElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{this.state._activeElement /* SSR instanceof HTMLElement */ && (\n\t\t\t\t\t<div class=\"overlay\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"modal\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\twidth: this.state._width,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\taria-label={this.state._label}\n\t\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\t\tonKeyDown={this.onKeyDown}\n\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\tif (el /* SSR instanceof HTMLElement */) {\n\t\t\t\t\t\t\t\t\tel.setAttribute('tabindex', '0');\n\t\t\t\t\t\t\t\t\tsetTimeout(() => el.focus(), 250);\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<slot />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Gibt die Referenz auf das auslösende HTML-Element an, wodurch das Modal geöffnet wurde.\n\t */\n\t@Prop({ mutable: true }) public _activeElement?: HTMLElement | null;\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 * Gibt die EventCallback-Function für das Schließen des Modals an.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t@State() public state: ModalStates = {\n\t\t_activeElement: null,\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_activeElement')\n\tpublic validateActiveElement(value?: HTMLElement | null): void {\n\t\twatchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {\n\t\t\tdefaultValue: null,\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\t/* Call onClose event in the _activeElement watcher because activeElement can be set internally and from the outside and closes the modal when set to null. */\n\t\t\t\t\tif (this._activeElement === null && this.state._on?.onClose) {\n\t\t\t\t\t\tthis.state._on.onClose();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tfeatureHint('[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.');\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\twatchString(this, '_width', value, {\n\t\t\tdefaultValue: '100%',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActiveElement(this._activeElement);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t}\n}\n"],"mappings":";;;0PAaaA,EAAb,WAAAC,GACSC,KAAAC,eAAyD,IAAIC,IAC7DF,KAAAG,WAA6C,IAAID,G,CAEjD,WAAAE,CAAYC,GACnB,MAAMC,EAA0BD,EAAYE,aAAa,YACzD,GACCF,aAAuBG,mBACvBH,aAAuBI,mBACvBJ,aAAuBK,kBACvBL,aAAuBM,mBACvBN,aAAuBO,4BAChBN,IAAa,UACpBD,EAAYQ,QAAQC,WAAaC,UAChC,CACD,UAAWT,IAAa,SAAU,CACjCN,KAAKC,eAAee,IAAIX,EAAa,CACpCC,Y,KAEK,CACNN,KAAKC,eAAee,IAAIX,EAAa,G,CAEtCA,EAAYY,aAAa,WAAY,MACrCZ,EAAYY,aAAa,cAAe,QACxCZ,EAAYa,MAAMC,WAAa,M,EAIzB,aAAAC,CAAcC,EAA6BhB,GAClD,UAAWgB,EAAMf,WAAa,SAAU,CACvCD,EAAYY,aAAa,WAAYI,EAAMf,S,KACrC,CACND,EAAYiB,gBAAgB,W,CAE7BjB,EAAYiB,gBAAgB,eAC5BjB,EAAYa,MAAMC,WAAa,QAC/BnB,KAAKC,eAAesB,OAAOlB,E,CAGpB,oBAAAmB,CAAqBvB,GAC5BA,EAAewB,QAAQzB,KAAKoB,cAAcM,KAAK1B,M,CAGxC,SAAA2B,CAAUC,EAA8CC,GAC/D,IACC,GAAID,IAAgBC,IAAmBD,aAAuBE,aAAeF,aAAuBG,YAAa,CAChH,GAAIH,aAAuBE,YAAa,CACvC9B,KAAKI,YAAYwB,GACjB5B,KAAK2B,UAAUC,EAAYI,WAAYH,E,CAExC,IAAK,IAAII,EAAI,EAAGA,EAAIL,EAAYM,SAASC,OAAQF,IAAK,CACrDjC,KAAK2B,UAAUC,EAAYM,SAASD,GAAmBJ,E,GAGxD,MAAOO,G,EASF,mBAAAC,CAAoBC,GAC3B,GAAIA,aAAyBR,YAAa,CACzC,GAAI9B,KAAKC,eAAesC,IAAID,GAAgB,CAC3CtC,KAAKoB,cAAcpB,KAAKC,eAAeuC,IAAIF,GAAwCA,E,CAEpF,MAAMG,EAAUC,YAAW,KAC1BC,aAAaF,GACbH,EAAcM,OAAO,GACnB,I,CAEJ5C,KAAKwB,qBAAqBxB,KAAKC,gBAC/B,GAAID,KAAKG,WAAW0C,KAAO,EAAG,CAC7B,MAAMC,EAAYC,MAAMC,KAAKhD,KAAKG,WAAW8C,QAC7C,MAAMC,EAAWJ,EAAUA,EAAUX,OAAS,GAG9CnC,KAAKG,WAAWsB,SAAQ,CAAC0B,EAAsB9C,KAC9C,GAAI6C,IAAa7C,EAAa,CAC7BA,EAAYa,MAAMkC,QAAU,Q,KACtB,CACN/C,EAAYa,MAAMkC,QAAU,M,KAG9BC,IAAcC,KAAKpC,MAAMqC,UAAY,QACrCF,IAAcC,KAAKpC,MAAMsC,SAAW,SACpCxD,KAAK2B,UAAU0B,IAAcC,KAAMJ,E,KAC7B,CACNG,IAAcC,KAAKpC,MAAMqC,UAAY,QACrCF,IAAcC,KAAKpC,MAAMsC,SAAW,O,EAI/B,SAAAC,CAAUP,EAAuBZ,GACvC,GAAIY,aAAoBpB,cAAgB,MAAO,CAC9C4B,EAAIC,KAAK,iE,KACH,CACN3D,KAAKG,WAAWa,IAAIkC,EAAU,CAC7BZ,kBAEDtC,KAAKqC,qB,EAIA,UAAAuB,CAAWV,G,MACjB,GAAIA,aAAoBpB,cAAgB,MAAO,CAC9C4B,EAAIC,KAAK,iE,KACH,CACN,MAAMrB,GAAgBuB,EAAA7D,KAAKG,WAAWqC,IAAIU,MAAS,MAAAW,SAAA,SAAAA,EAAEvB,cACrDtC,KAAKG,WAAWoB,OAAO2B,GACvBlD,KAAKqC,oBAAoBC,E,GC7H5B,MAAMwB,EAAkB,60IACxB,MAAAC,EAAeD,ECOf,MAAME,EAAe,IAAIlE,E,MAiBZmE,EAAQ,M,yBAmBHjE,KAAAkE,UAAaC,IAC7B,GAAIA,GAASA,EAAMC,OAAS,SAAU,CACrCpE,KAAKqE,eAAiB,I,sFAwDS,O,WAEI,CACpCA,eAAgB,KAChBC,OAAQ,GACRC,OAAQ,O,CA/EF,kBAAAC,GACN,GAAIxE,KAAK4B,YAA8C,CACtD,GAAI5B,KAAKyE,MAAMJ,eAAiD,CAC/DL,EAAaP,UAAUzD,KAAK4B,YAAa5B,KAAKyE,MAAMJ,e,KAC9C,CACNL,EAAaJ,WAAW5D,KAAK4B,Y,GAKzB,oBAAA8C,GACN,GAAI1E,KAAK4B,YAA8C,CACtDoC,EAAaJ,WAAW5D,KAAK4B,Y,EAUxB,MAAA+C,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CACJC,MAAM,YACNC,IAAMC,IACLjF,KAAK4B,YAAcqD,CAAiB,GAGpCjF,KAAKyE,MAAMJ,gBACXO,EAAA,OAAAE,IAAA,2CAAKC,MAAM,WACVH,EAAA,OAAAE,IAAA,2CACCC,MAAM,QACN7D,MAAO,CACNgE,MAAOlF,KAAKyE,MAAMF,QAClB,aACWvE,KAAKyE,MAAMH,OAAM,aAClB,OACXa,KAAK,SACLjB,UAAWlE,KAAKkE,UAChBc,IAAMC,IACL,GAAIA,EAAqC,CACxCA,EAAGhE,aAAa,WAAY,KAC5ByB,YAAW,IAAMuC,EAAGrC,SAAS,I,IAI/BgC,EAAA,QAAAE,IAAA,+C,CAmCC,qBAAAM,CAAsB/D,GAC5BgE,EAAerF,KAAM,kBAAmBqB,UAA0BA,IAAU,UAAYA,IAAU,MAAM,IAAIiE,IAAI,CAAC,cAAe,SAAUjE,EAAO,CAChJkE,aAAc,KACdC,MAAO,CACNC,WAAY,K,MAEX,GAAIzF,KAAKqE,iBAAmB,QAAQR,EAAA7D,KAAKyE,MAAMiB,OAAG,MAAA7B,SAAA,SAAAA,EAAE8B,SAAS,CAC5D3F,KAAKyE,MAAMiB,IAAIC,S,MAQb,aAAAC,CAAcvE,GACpBuE,EAAc5F,KAAMqB,EAAO,CAC1BwE,SAAU,M,CAKL,UAAAC,CAAWzE,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChD0E,EAAY,2EACZ,MAAMC,EAAwC,GAC9C,UAAW3E,EAAMsE,UAAY,YAActE,EAAMsE,UAAY,KAAM,CAClEK,EAAUL,QAAUtE,EAAMsE,O,CAE3BM,EAAqCjG,KAAM,MAAOgG,E,EAK7C,aAAAE,CAAc7E,GACpB8E,EAAYnG,KAAM,SAAUqB,EAAO,CAClCkE,aAAc,Q,CAIT,iBAAAa,GACNpG,KAAKoF,sBAAsBpF,KAAKqE,gBAChCrE,KAAK4F,cAAc5F,KAAKsE,QACxBtE,KAAK8F,WAAW9F,KAAK0F,KACrB1F,KAAKkG,cAAclG,KAAKuE,O","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolModalDefaultStyle0","KolModal","_activeElement","_label","_width","componentDidRender","this","state","_a","refDialog","showModal","disconnectedCallback","closeModal","handleNativeCloseEvent","_b","_on","onClose","call","openModal","close","render","h","key","class","ref","el","style","width","bind","validateActiveElement","value","watchValidator","Set","defaultValue","hooks","afterPatch","validateLabel","required","validateOn","callbacks","setState","validateWidth","watchString","componentWillLoad"],"sources":["src/components/modal/style.scss?tag=kol-modal&mode=default&encapsulation=shadow","src/components/modal/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-modal {\n\t\tborder: 0;\n\t\tpadding: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgba(0, 0, 0, 0.33);\n\t\t}\n\t}\n}\n","import type { KoliBriModalEventCallbacks, LabelPropType, ModalAPI, ModalStates } from '../../schema';\nimport { setState, validateLabel, watchString, watchValidator } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Method } from '@stencil/core';\nimport { Component, h, Prop, State, Watch } from '@stencil/core';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @slot - The modal's contents.\n */\n@Component({\n\ttag: 'kol-modal',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolModal implements ModalAPI {\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic componentDidRender(): void {\n\t\tif (this.state._activeElement) {\n\t\t\tthis.refDialog?.showModal();\n\t\t}\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync openModal() {\n\t\tthis.refDialog?.showModal();\n\t}\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\n\t\tthis._activeElement = null;\n\n\t\t/* The optional chaining for the `close` method is not strictly necessary, but a simple/lazy workaround for HTMLDialog not being implemented in jsdom, causing Jest tests to fail. It may be removed in the future. */\n\t\tthis.refDialog?.close?.();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\tclass=\"kol-modal\"\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.refDialog = el;\n\t\t\t\t}}\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: this.state._width,\n\t\t\t\t}}\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\n\t\t\t>\n\t\t\t\t{/* It's necessary to have a block element container for cross-browser compatibility. The display property for the slot content is unknown and could be inline. */}\n\t\t\t\t<div>\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Legacy property - while set to an HTMLElement, the modal is open.\n\t * @deprecated Use methode `openModal` and `closeModal` instead.\n\t */\n\t@Prop({ mutable: true }) public _activeElement?: HTMLElement | null;\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 the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t/**\n\t * Defines the width of the modal. (max-width: 100%)\n\t */\n\t@Prop() public _width?: string = '100%';\n\n\t@State() public state: ModalStates = {\n\t\t_activeElement: null,\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\n\t};\n\n\t@Watch('_activeElement')\n\tpublic validateActiveElement(value?: HTMLElement | null): void {\n\t\twatchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {\n\t\t\tdefaultValue: null,\n\t\t\thooks: {\n\t\t\t\tafterPatch: () => {\n\t\t\t\t\tif (this.state._activeElement) {\n\t\t\t\t\t\tvoid this.openModal();\n\t\t\t\t\t} else {\n\t\t\t\t\t\tvoid this.closeModal();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriModalEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriModalEventCallbacks = {};\n\t\t\tif (typeof value.onClose === 'function' || value.onClose === true) {\n\t\t\t\tcallbacks.onClose = value.onClose;\n\t\t\t}\n\t\t\tsetState<KoliBriModalEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\twatchString(this, '_width', value, {\n\t\t\tdefaultValue: '100%',\n\t\t});\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateActiveElement(this._activeElement);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t}\n}\n"],"mappings":";;;mNAAA,MAAMA,EAAkB,6sIACxB,MAAAC,EAAeD,E,MCiBFE,EAAQ,M,4GAwEa,O,WAEI,CACpCC,eAAgB,KAChBC,OAAQ,GACRC,OAAQ,O,CA1EF,kBAAAC,G,MACN,GAAIC,KAAKC,MAAML,eAAgB,EAC9BM,EAAAF,KAAKG,aAAS,MAAAD,SAAA,SAAAA,EAAEE,W,EAIX,oBAAAC,QACDL,KAAKM,Y,CAGH,sBAAAC,G,SACPC,GAAAN,EAAAF,KAAKC,MAAMQ,OAAG,MAAAP,SAAA,SAAAA,EAAEQ,WAAO,MAAAF,SAAA,SAAAA,EAAAG,KAAAT,E,CAKxB,eAAMU,G,OACLV,EAAAF,KAAKG,aAAS,MAAAD,SAAA,SAAAA,EAAEE,W,CAKV,gBAAME,G,QACZN,KAAKJ,eAAiB,MAGtBY,GAAAN,EAAAF,KAAKG,aAAS,MAAAD,SAAA,SAAAA,EAAEW,SAAK,MAAAL,SAAA,SAAAA,EAAAG,KAAAT,E,CAGf,MAAAY,GACN,OACCC,EAAA,UAAAC,IAAA,2CACCC,MAAM,YACNC,IAAMC,IACLnB,KAAKG,UAAYgB,CAAE,EAEpBC,MAAO,CACNC,MAAOrB,KAAKC,MAAMH,QAClB,aACWE,KAAKC,MAAMJ,OACvBa,QAASV,KAAKO,uBAAuBe,KAAKtB,OAG1Ce,EAAA,OAAAC,IAAA,4CACCD,EAAA,QAAAC,IAAA,8C,CAkCG,qBAAAO,CAAsBC,GAC5BC,EAAezB,KAAM,kBAAmBwB,UAA0BA,IAAU,UAAYA,IAAU,MAAM,IAAIE,IAAI,CAAC,cAAe,SAAUF,EAAO,CAChJG,aAAc,KACdC,MAAO,CACNC,WAAY,KACX,GAAI7B,KAAKC,MAAML,eAAgB,MACzBI,KAAKY,W,KACJ,MACDZ,KAAKM,Y,MAQR,aAAAwB,CAAcN,GACpBM,EAAc9B,KAAMwB,EAAO,CAC1BO,SAAU,M,CAKL,UAAAC,CAAWR,GACjB,UAAWA,IAAU,UAAYA,IAAU,KAAM,CAChD,MAAMS,EAAwC,GAC9C,UAAWT,EAAMd,UAAY,YAAcc,EAAMd,UAAY,KAAM,CAClEuB,EAAUvB,QAAUc,EAAMd,O,CAE3BwB,EAAqClC,KAAM,MAAOiC,E,EAK7C,aAAAE,CAAcX,GACpBY,EAAYpC,KAAM,SAAUwB,EAAO,CAClCG,aAAc,Q,CAIT,iBAAAU,GACNrC,KAAKuB,sBAAsBvB,KAAKJ,gBAChCI,KAAK8B,cAAc9B,KAAKH,QACxBG,KAAKgC,WAAWhC,KAAKS,KACrBT,KAAKmC,cAAcnC,KAAKF,O","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-bd96e8df.js";import{t as i}from"./i18n-80da5843.js";import{r as a,a as s}from"./unique-nav-labels-768d04e9.js";import{w as o}from"./validation-381a4169.js";import{n as l,c as d,o as r}from"./component-names-3e0158fe.js";import{b as h,l as c,e as p,j as b,w as f}from"./prop.validators-f89d26b4.js";import{v as u}from"./hide-label-6424f890.js";import{v as m}from"./label-37acddfe.js";import"./i18n-ece780dd.js";import"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./index-db4aa6e4.js";const v=(e,n)=>{h(e,"_collapsible",n)},y=(e,n)=>{h(e,"_hasCompactButton",n)},w=(e,n)=>{h(e,"_hasIconsWhenExpanded",n)},k="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}",x=k,_=e=>"string"==typeof e._href,g=e=>{var n;return void 0===e._href&&"function"==typeof(null===(n=e._on)||void 0===n?void 0:n.onClick)},z=class{constructor(t){n(this,t),this.handleToggleExpansionClick=e=>{e&&(this.state._expandedChildren.includes(e)?this.collapseChildren(e):this.expandChildren(e))},this.linkList=n=>e("ul",{class:"list "+(0===n.deep&&"horizontal"===n.orientation?" horizontal":" vertical"),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,e]})}collapseChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((n=>n!=e))})}entry(n,t,i,a,s){const o=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return e("div",{class:{entry:!0,"hide-label":t}},_(a)?e(l,Object.assign({class:"entry-item"},a,{_hideLabel:t,_icons:o})):e(d,{class:"entry-item",_label:a._label,_hideLabel:t,_icons:o,_on:{onClick:(e,n)=>{g(a)&&"function"==typeof a._on.onClick?a._on.onClick(e,n):this.handleToggleExpansionClick(a._children)}}}),i?this.expandButton(n,a,s):"")}expandButton(n,t,a){return e(d,{class:"expand-button",_ariaExpanded:a,_disabled:!n,_icons:"codicon codicon-"+(a?"remove":"add"),_hideLabel:!0,_label:`${i(a?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:t._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(t._children)}})}li(n,t,i,a,l,s){const o=!!l._active,d=Array.isArray(l._children)&&l._children.length>0,r=Boolean(l._children&&this.state._expandedChildren.includes(l._children));return e("li",{class:{active:o,expanded:r,"has-children":d},key:a},this.entry(n,t,d,l,r),r&&e(this.linkList,{collapsible:n,hideLabel:t,deep:i+1,links:l._children||[],orientation:s}))}initializeExpandedChildren(){const e=n=>{if(n._active)return n._children&&this.expandChildren(n._children),!0;if(n._children)for(const t of n._children)if(e(t))return this.expandChildren(n._children),!0;return!1};this.state._links.forEach(e)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,c("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const a=!0===this.state._collapsible,l=!0===this.state._hideLabel,s=this.state._orientation;return e(t,{key:"92fd0640d0dfce31ce7b0726af5ab0afb5d44424",class:"kol-nav"},e("div",{key:"4a501282a8c55b0a326b81976f3b0d850a15666d",class:{nav:!0,[s]:!0,"is-compact":this.state._hideLabel}},e("nav",{key:"b0293a098f89ca720d5a89f56e4bffc4af0a616f","aria-label":this.state._label,id:"nav"},e(this.linkList,{key:"c95025f77fcadf0da90c6115dfb51d2b197e9c59",collapsible:a,hideLabel:l,deep:0,links:this.state._links,orientation:s})),n&&e("div",{key:"d29149b8603e87336a2faa98004b4c0a1d5138dc",class:"compact"},e(r,{key:"4f60faa72e2bbc3dd7ea458f559ead1abe3dc33b",_ariaControls:"nav",_ariaExpanded:!l,_icons:l?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:i(l?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(e){v(this,e)}validateHasCompactButton(e){y(this,e)}validateHasIconsWhenExpanded(e){w(this,e)}validateHideLabel(e){u(this,e)}validateLabel(e,n,t=!1){t||a(this.state._label),m(this,e,{required:!0}),p(e),s(this.state._label)}validateLinks(e){o("KolNav",this,e),b("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(e){f(this,"_orientation",(e=>"horizontal"===e||"vertical"===e),new Set(["Orientation {horizontal, vertical}"]),e,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};z.style={default:x};export{z as kol_nav};
+import{r as n,h as e,H as t}from"./index-cf24d1fe.js";import{t as i}from"./i18n-8640d789.js";import{r as a,a as s}from"./unique-nav-labels-768d04e9.js";import{w as o}from"./validation-d958b624.js";import{n as l,c as r,o as d}from"./component-names-0a8a1a6c.js";import{b as h,l as c,e as p,j as b,w as u}from"./prop.validators-5a58fa40.js";import{v as f}from"./hide-label-1d403517.js";import{v as m}from"./label-084ed1e7.js";import"./i18n-7ea9f137.js";import"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./index-5728f164.js";const v=(e,n)=>{h(e,"_collapsible",n)},y=(e,n)=>{h(e,"_hasCompactButton",n)},w=(e,n)=>{h(e,"_hasIconsWhenExpanded",n)},k="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  :host > div {\n    display: grid;\n    place-items: center;\n  }\n  :not(.is-compact) nav {\n    width: 100%;\n  }\n  .list {\n    display: flex;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .list.vertical {\n    flex-direction: column;\n  }\n  .entry {\n    display: flex;\n  }\n  .entry-item {\n    flex-grow: 1;\n  }\n}",x=k,_=e=>"string"==typeof e._href,g=e=>{var n;return void 0===e._href&&"function"==typeof(null===(n=e._on)||void 0===n?void 0:n.onClick)},z=class{constructor(t){n(this,t),this.handleToggleExpansionClick=e=>{e&&(this.state._expandedChildren.includes(e)?this.collapseChildren(e):this.expandChildren(e))},this.linkList=n=>e("ul",{class:"list "+(0===n.deep&&"horizontal"===n.orientation?" horizontal":" vertical"),"data-deep":n.deep},n.links.map(((e,t)=>this.li(n.collapsible,n.hideLabel,n.deep,t,e,n.orientation)))),this._collapsible=!0,this._hasCompactButton=!1,this._hasIconsWhenExpanded=!1,this._hideLabel=!1,this._label=void 0,this._links=void 0,this._orientation="vertical",this.state={_collapsible:!0,_hasCompactButton:!1,_hasIconsWhenExpanded:!1,_hideLabel:!1,_label:"",_links:[],_orientation:"vertical",_expandedChildren:[]}}expandChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:[...this.state._expandedChildren,e]})}collapseChildren(e){this.state=Object.assign(Object.assign({},this.state),{_expandedChildren:this.state._expandedChildren.filter((n=>n!=e))})}entry(n,t,i,a,s){const o=this.state._hasIconsWhenExpanded||this.state._hideLabel?a._icons||(this.state._hideLabel?"codicon codicon-symbol-method":void 0):void 0;return e("div",{class:{entry:!0,"hide-label":t}},_(a)?e(l,Object.assign({class:"entry-item"},a,{_hideLabel:t,_icons:o})):e(r,{class:"entry-item",_label:a._label,_hideLabel:t,_icons:o,_on:{onClick:(e,n)=>{g(a)&&"function"==typeof a._on.onClick?a._on.onClick(e,n):this.handleToggleExpansionClick(a._children)}}}),i?this.expandButton(n,a,s):"")}expandButton(n,t,a){return e(r,{class:"expand-button",_ariaExpanded:a,_disabled:!n,_icons:"codicon codicon-"+(a?"remove":"add"),_hideLabel:!0,_label:`${i(a?"kol-nav-label-close":"kol-nav-label-open",{placeholders:{label:t._label}})}`,_on:{onClick:()=>this.handleToggleExpansionClick(t._children)}})}li(n,t,i,a,l,s){const o=!!l._active,d=Array.isArray(l._children)&&l._children.length>0,r=Boolean(l._children&&this.state._expandedChildren.includes(l._children));return e("li",{class:{active:o,expanded:r,"has-children":d},key:a},this.entry(n,t,d,l,r),r&&e(this.linkList,{collapsible:n,hideLabel:t,deep:i+1,links:l._children||[],orientation:s}))}initializeExpandedChildren(){const e=n=>{if(n._active)return n._children&&this.expandChildren(n._children),!0;if(n._children)for(const t of n._children)if(e(t))return this.expandChildren(n._children),!0;return!1};this.state._links.forEach(e)}render(){let n=this.state._hasCompactButton;"horizontal"===this.state._orientation&&!0===this.state._hasCompactButton&&(n=!1,c("[KolNav] Wenn eine horizontale Navigation verwendet wird, kann die Option _hasCompactButton nicht aktiviert werden."));const a=!0===this.state._collapsible,l=!0===this.state._hideLabel,s=this.state._orientation;return e(t,{key:"e5df59a6b0f2955c7ffe0a1b8ae05828d089a03a",class:"kol-nav"},e("div",{key:"5d82a8a378240b280609a81899cb8252983ee0b9",class:{nav:!0,[s]:!0,"is-compact":this.state._hideLabel}},e("nav",{key:"10ccef9a51a0c52f74edeacca8c484cded85ccdd","aria-label":this.state._label,id:"nav"},e(this.linkList,{key:"64913625fc3f3d8ffd61edd3cb6c720b816e1d79",collapsible:a,hideLabel:l,deep:0,links:this.state._links,orientation:s})),n&&e("div",{key:"e6578b70620b8039bc1b9ec85eb994eac960d675",class:"compact"},e(d,{key:"9fa2d5bb11c1ae77020d7329cb0fd70050b4e58d",_ariaControls:"nav",_ariaExpanded:!l,_icons:l?"codicon codicon-chevron-right":"codicon codicon-chevron-left",_hideLabel:!0,_label:i(l?"kol-nav-maximize":"kol-nav-minimize"),_on:{onClick:()=>{this.state=Object.assign(Object.assign({},this.state),{_hideLabel:!1===this.state._hideLabel})}},_tooltipAlign:"right",_variant:"ghost"}))))}validateCollapsible(e){v(this,e)}validateHasCompactButton(e){y(this,e)}validateHasIconsWhenExpanded(e){w(this,e)}validateHideLabel(e){f(this,e)}validateLabel(e,n,t=!1){t||a(this.state._label),m(this,e,{required:!0}),p(e),s(this.state._label)}validateLinks(e){o("KolNav",this,e),b("[KolNav] The navigation structure is not yet validated recursively.")}validateOrientation(e){u(this,"_orientation",(e=>"horizontal"===e||"vertical"===e),new Set(["Orientation {horizontal, vertical}"]),e,{defaultValue:"vertical"})}componentWillLoad(){this.validateCollapsible(this._collapsible),this.validateHideLabel(this._hideLabel),this.validateHasCompactButton(this._hasCompactButton),this.validateHasIconsWhenExpanded(this._hasIconsWhenExpanded),this.validateLabel(this._label,void 0,!0),this.validateLinks(this._links),this.validateOrientation(this._orientation),this.initializeExpandedChildren()}disconnectedCallback(){a(this.state._label)}static get watchers(){return{_collapsible:["validateCollapsible"],_hasCompactButton:["validateHasCompactButton"],_hasIconsWhenExpanded:["validateHasIconsWhenExpanded"],_hideLabel:["validateHideLabel"],_label:["validateLabel"],_links:["validateLinks"],_orientation:["validateOrientation"]}}};z.style={default:x};export{z as kol_nav};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as n}from"./index-bd96e8df.js";import{t as i}from"./i18n-80da5843.js";import{n as s}from"./dev.utils-cb789c3d.js";import{r as o,a}from"./unique-nav-labels-768d04e9.js";import{p as l,c as r}from"./component-names-3e0158fe.js";import{S as h}from"./common-54bf85ba.js";import{v as d}from"./custom-class-2d443ea5.js";import{k as c,w as p,g as u,p as f}from"./prop.validators-f89d26b4.js";import{v as b}from"./label-37acddfe.js";import{v as m}from"./tooltip-align-b217e9d0.js";import"./i18n-ece780dd.js";import"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./index-db4aa6e4.js";import"./align-89a65800.js";const g=(t,e,n)=>{c(t,"_max",e,n)},_="@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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    align-items: center;\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}",v=_,y={left:"codicon codicon-debug-reverse-continue"},k={left:"codicon codicon-chevron-left"},x={right:"codicon codicon-chevron-right"},w={right:"codicon codicon-debug-continue"};function z(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const S=z(),C=new Intl.NumberFormat(S,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),j=class{constructor(e){t(this,e),this.nonce=s(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const i=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===n));n=void 0===t?i[0].value:t.value,e.set("_pageSize",n)}const a=e.has("_page")?e.get("_page"):this.state._page,s=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,a,e.get("_pageSize"),s)},this.syncPage=(t,e,n,i)=>{if(i>0){const a=this.calcCount(i,n);a>0&&(e>a?(t.set("_page",a),this.onChangePage(h,a)):e<1&&(t.set("_page",1),this.onChangePage(h,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:i("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",n),this.beforePageSize(n,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:i("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let a=!1;const o=this.getCount(),h=Array.from(Array(o).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>o-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,e("li",{key:s()},e("span",{class:"separator","aria-hidden":"true"}))):null));return e(n,{class:"kol-pagination"},e("nav",{"aria-label":this.state._label},e("ul",{class:"navigation-list"},this.state._hasButtons.first&&e("li",null,e(r,{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:i("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&e("li",null,e(r,{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:k,_hideLabel:!0,_label:i("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),h,this.state._hasButtons.next&&e("li",null,e(r,{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:o<=this.state._page,_icons:x,_hideLabel:!0,_label:i("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&e("li",null,e(r,{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:o<=this.state._page,_icons:w,_hideLabel:!0,_label:i("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&e(l,{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:i("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return e("li",{key:s()},e(r,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},e("span",{slot:"expert"},e("span",{class:"visually-hidden"},i("kol-page"))," ",C.format(t))))}getSelectedPageButton(t){return e("li",{key:s()},e(r,{class:"selected",_customClass:this.state._customClass,_disabled:!0,_label:""},e("span",{slot:"expert"},e("span",{class:"visually-hidden"},i("kol-page"))," ",C.format(t))))}validateBoundaryCount(t){c(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){d(this,t)}validateLabel(t,e,n=!1){n||o(this.state._label),b(this,t),a(this.state._label)}validateHasButtons(t){p(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=f(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){c(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,i=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,i)}}})}validatePageSize(t){c(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){u(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){c(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){g(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,i,t)}}})}validateTooltipAlign(t){m(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){o(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};j.style={default:v};export{j as kol_pagination};
+import{r as t,h as e,H as n}from"./index-cf24d1fe.js";import{t as i}from"./i18n-8640d789.js";import{n as s}from"./dev.utils-44ef1bde.js";import{r as o,a}from"./unique-nav-labels-768d04e9.js";import{p as l,c as r}from"./component-names-0a8a1a6c.js";import{S as h}from"./common-54bf85ba.js";import{v as d}from"./custom-class-1b4696e3.js";import{k as c,w as p,g as u,p as f}from"./prop.validators-5a58fa40.js";import{v as b}from"./label-084ed1e7.js";import{v as m}from"./tooltip-align-e140b328.js";import"./i18n-7ea9f137.js";import"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./index-5728f164.js";import"./align-78bab7b5.js";const g=(t,e,n)=>{c(t,"_max",e,n)},_="@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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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    align-items: center;\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    grid-template-columns: 1fr auto;\n  }\n  .navigation-list {\n    align-items: center;\n    display: inline-flex;\n    flex-wrap: wrap;\n    gap: 0.5em;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n  .separator:before {\n    content: \"•••\";\n  }\n}",v=_,y={left:"codicon codicon-debug-reverse-continue"},k={left:"codicon codicon-chevron-left"},x={right:"codicon codicon-chevron-right"},w={right:"codicon codicon-debug-continue"};function z(){const t=navigator.language||"de-DE";return t.includes("-")?t:`${t}-${t.toUpperCase()}`}const S=z(),C=new Intl.NumberFormat(S,{style:"decimal",minimumFractionDigits:0,maximumFractionDigits:0}),j=class{constructor(e){t(this,e),this.nonce=s(),this.calcCount=(t,e=1)=>Math.ceil(t/e),this.getCount=()=>this.calcCount(this.state._max,this.state._pageSize),this.onClick=(t,e)=>{"function"==typeof this.state._on.onClick&&this.state._on.onClick(t,e),this.onChangePage(t,e)},this.onChangePage=(t,e)=>{const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePage&&this.state._on.onChangePage(t,e)}))},this.onChangePageSize=(t,e)=>{if("number"==typeof(e=parseInt(e[0]))&&e>0&&this._pageSize!==e){this._pageSize=e;const n=setTimeout((()=>{clearTimeout(n),"function"==typeof this.state._on.onChangePageSize&&this.state._on.onChangePageSize(t,this._pageSize)}))}},this.onGoToFirst={onClick:t=>{this.onClick(t,1)}},this.onGoToEnd={onClick:t=>{this.onClick(t,this.getCount())}},this.onGoBackward={onClick:t=>{this.onClick(t,this.state._page-1)}},this.onGoForward={onClick:t=>{this.onClick(t,this.state._page+1)}},this.beforePageSize=(t,e)=>{let n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;const i=e.has("_pageSizeOptions")?e.get("_pageSizeOptions"):this.state._pageSizeOptions;if(Array.isArray(i)&&i.length>0){const t=i.find((t=>t.value===n));n=void 0===t?i[0].value:t.value,e.set("_pageSize",n)}const a=e.has("_page")?e.get("_page"):this.state._page,s=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,a,e.get("_pageSize"),s)},this.syncPage=(t,e,n,i)=>{if(i>0){const a=this.calcCount(i,n);a>0&&(e>a?(t.set("_page",a),this.onChangePage(h,a)):e<1&&(t.set("_page",1),this.onChangePage(h,1)))}},this.beforePageSizeOptions=(t,e)=>{const n=[];if(Array.isArray(t))for(const e of t)"number"==typeof e&&n.push({label:i("kol-page-per-site",{placeholders:{entries:`${e}`}}),value:e});e.set("_pageSizeOptions",n),this.beforePageSize(n,e)},this._boundaryCount=1,this._customClass=void 0,this._label=void 0,this._hasButtons=!0,this._page=void 0,this._pageSize=1,this._pageSizeOptions=[],this._on=void 0,this._siblingCount=1,this._tooltipAlign="top",this._max=void 0,this.state={_boundaryCount:1,_label:i("kol-pagination"),_hasButtons:{first:!0,last:!0,next:!0,previous:!0},_on:{onClick:()=>null},_page:0,_pageSize:1,_pageSizeOptions:[],_siblingCount:1,_max:0}}render(){var t;let a=!1;const o=this.getCount(),h=Array.from(Array(o).keys()).map((t=>t+1)).map((t=>t<=this.state._boundaryCount||t>o-this.state._boundaryCount||t>=this.state._page-this.state._siblingCount&&t<=this.state._page+this.state._siblingCount?(a=!0,this.state._page===t?this.getSelectedPageButton(t):this.getUnselectedPageButton(t)):!0===a?(a=!1,e("li",{key:s()},e("span",{class:"separator","aria-hidden":"true"}))):null));return e(n,{class:"kol-pagination"},e("nav",{"aria-label":this.state._label},e("ul",{class:"navigation-list"},this.state._hasButtons.first&&e("li",null,e(r,{class:"first",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:y,_hideLabel:!0,_label:i("kol-page-first"),_on:this.onGoToFirst,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.previous&&e("li",null,e(r,{class:"previous",exportparts:"icon",_customClass:this.state._customClass,_disabled:this.state._page<=1,_icons:k,_hideLabel:!0,_label:i("kol-page-back"),_on:this.onGoBackward,_tooltipAlign:this.state._tooltipAlign})),h,this.state._hasButtons.next&&e("li",null,e(r,{class:"next",exportparts:"icon",_customClass:this.state._customClass,_disabled:o<=this.state._page,_icons:x,_hideLabel:!0,_label:i("kol-page-next"),_on:this.onGoForward,_tooltipAlign:this.state._tooltipAlign})),this.state._hasButtons.last&&e("li",null,e(r,{class:"last",exportparts:"icon",_customClass:this.state._customClass,_disabled:o<=this.state._page,_icons:w,_hideLabel:!0,_label:i("kol-page-last"),_on:this.onGoToEnd,_tooltipAlign:this.state._tooltipAlign})))),(null===(t=this.state._pageSizeOptions)||void 0===t?void 0:t.length)>0&&e(l,{_hideLabel:!0,_id:`pagination-size-${this.nonce}`,_label:i("kol-entries-per-site"),_options:this.state._pageSizeOptions,_on:{onChange:this.onChangePageSize},_value:[this.state._pageSize]}))}getUnselectedPageButton(t){return e("li",{key:s()},e(r,{exportparts:"icon",_customClass:this.state._customClass,_label:"",_on:{onClick:e=>{this.onClick(e,t)}}},e("span",{slot:"expert"},e("span",{class:"visually-hidden"},i("kol-page"))," ",C.format(t))))}getSelectedPageButton(t){return e("li",{key:s()},e(r,{class:"selected",_customClass:this.state._customClass,_disabled:!0,_label:""},e("span",{slot:"expert"},e("span",{class:"visually-hidden"},i("kol-page"))," ",C.format(t))))}validateBoundaryCount(t){c(this,"_boundaryCount",Math.max(0,null!=t?t:1))}validateCustomClass(t){d(this,t)}validateLabel(t,e,n=!1){n||o(this.state._label),b(this,t),a(this.state._label)}validateHasButtons(t){p(this,"_hasButtons",(t=>"boolean"==typeof t||"string"==typeof t||"object"==typeof t&&null!==t),new Set(["Boolean","PaginationHasButton"]),t,{hooks:{beforePatch:(t,e)=>{if("boolean"==typeof t)e.set("_hasButtons",{first:t,last:t,next:t,previous:t});else{if("string"==typeof t)try{t=f(t)}catch(t){e.delete("_hasButtons")}"object"==typeof t&&null!==t&&e.set("_hasButtons",Object.assign(Object.assign({},this.state._hasButtons),{first:"boolean"==typeof t.first?!0===t.first:this.state._hasButtons.first,last:"boolean"==typeof t.last?!0===t.last:this.state._hasButtons.last,next:"boolean"==typeof t.next?!0===t.next:this.state._hasButtons.next,previous:"boolean"==typeof t.previous?!0===t.previous:this.state._hasButtons.previous}))}}}})}validateOn(t){"object"==typeof t&&null!==t&&(this.state=Object.assign(Object.assign({},this.state),{_on:t}))}validatePage(t){c(this,"_page",t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize,i=e.has("_max")?e.get("_max"):this.state._max;this.syncPage(e,t,n,i)}}})}validatePageSize(t){c(this,"_pageSize",t,{hooks:{beforePatch:this.beforePageSize}})}validatePageSizeOptions(t){u(this,"_pageSizeOptions",(t=>"number"==typeof t),t,void 0,{hooks:{beforePatch:this.beforePageSizeOptions}})}validateSiblingCount(t){c(this,"_siblingCount",Math.max(0,null!=t?t:1))}validateMax(t){g(this,t,{hooks:{beforePatch:(t,e)=>{const n=e.has("_page")?e.get("_page"):this.state._page,i=e.has("_pageSize")?e.get("_pageSize"):this.state._pageSize;this.syncPage(e,n,i,t)}}})}validateTooltipAlign(t){m(this,t)}componentWillLoad(){this.validateBoundaryCount(this._boundaryCount),this.validateCustomClass(this._customClass),this.validateHasButtons(this._hasButtons),this.validateLabel(this._label,void 0,!0),this.validateOn(this._on),this.validatePage(this._page),this.validatePageSize(this._pageSize),this.validatePageSizeOptions(this._pageSizeOptions),this.validateSiblingCount(this._siblingCount),this.validateTooltipAlign(this._tooltipAlign),this.validateMax(this._max),this.validatePage(this._page)}disconnectedCallback(){o(this.state._label)}static get watchers(){return{_boundaryCount:["validateBoundaryCount"],_customClass:["validateCustomClass"],_label:["validateLabel"],_hasButtons:["validateHasButtons"],_on:["validateOn"],_page:["validatePage"],_pageSize:["validatePageSize"],_pageSizeOptions:["validatePageSizeOptions"],_siblingCount:["validateSiblingCount"],_max:["validateMax"],_tooltipAlign:["validateTooltipAlign"]}}};j.style={default:v};export{j as kol_pagination};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-bd96e8df.js";import{a as i}from"./align-floating-elements-42e5ff04.js";import{g as o}from"./dev.utils-fab45cbc.js";import{a as s}from"./align-89a65800.js";import{v as a}from"./show-d234ff64.js";import"./reuse-523ba2ac.js";import"./prop.validators-f89d26b4.js";import"./index-db4aa6e4.js";const l="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .kol-popover {\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover .popover {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover .show {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover .disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover .arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}",r=l,h=class{constructor(e){n(this,e),this.hidePopoverByEscape=e=>{"Escape"===e.key&&this.hidePopover()},this.hidePopoverByClickOutside=e=>{this.host&&!this.host.contains(e.target)&&this.hidePopover()},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._show=!1,this.state={_align:"top",_show:!1,_visible:!1}}async showPopover(){this.addListenersToBody(),this.triggerElement&&this.popoverElement&&(await i({align:this._align,referenceElement:this.triggerElement,arrowElement:this.arrowElement,floatingElement:this.popoverElement}),this.state=Object.assign(Object.assign({},this.state),{_visible:!0}))}hidePopover(){var e;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(e=this.triggerElement)||void 0===e||e.focus(),this.removeListenersToBody()}addListenersToBody(){var e;const n=o().body;n.addEventListener("keyup",this.hidePopoverByEscape),n.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const n=o().body;n.removeEventListener("keyup",this.hidePopoverByEscape),n.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return e(t,{key:"5de137646cae05e306581df283dbace9dff598e9",ref:this.catchHostAndTriggerElement,class:"kol-popover-wc"},e("div",{key:"fa17d442659db5c85b1108194eb72fefa758366a",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},e("div",{key:"447b90068aea0ecacb700d1dcc2d3ba01ab148b8",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),e("slot",{key:"a1c9100277b4c48c9f10442f7eb3ef12726a8a0c"})))}validateAlign(e){s(this,e)}validateShow(e){a(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_show:["validateShow"]}}};h.style=r;export{h as kol_popover_wc};
+import{r as n,h as e,H as t}from"./index-cf24d1fe.js";import{a as i}from"./align-floating-elements-8dfecb37.js";import{w as o}from"./prop.validators-5a58fa40.js";import{g as s}from"./dev.utils-fab45cbc.js";import{a}from"./align-78bab7b5.js";import{v as l}from"./show-430cafc2.js";import"./reuse-523ba2ac.js";import"./index-5728f164.js";const r=(e,n)=>{o(e,"_on",(e=>"object"==typeof e&&null!==e),new Set(["PopoverCallbacksPropType {Events.onClose}"]),n)},h="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .kol-popover {\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover .popover {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover .show {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover .disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover .arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}",d=h,c=class{constructor(e){n(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 i({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 n,t,i;this.state=Object.assign(Object.assign({},this.state),{_visible:!1}),this._show=!1,null===(n=this.triggerElement)||void 0===n||n.focus(),this.removeListenersToBody(),null===(i=null===(t=this.state._on)||void 0===t?void 0:t.onClose)||void 0===i||i.call(t,e)}addListenersToBody(){var e;const n=s().body;n.addEventListener("keyup",this.hidePopoverByEscape),n.addEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.addEventListener("scroll",(()=>{this.showPopover()}),{passive:!0})}removeListenersToBody(){var e;const n=s().body;n.removeEventListener("keyup",this.hidePopoverByEscape),n.removeEventListener("click",this.hidePopoverByClickOutside),null===(e=document.scrollingElement)||void 0===e||e.removeEventListener("scroll",(()=>{this.showPopover()}))}render(){return e(t,{key:"08aee53cfe44cbf919c23ead27450c60503f3ae9",ref:this.catchHostAndTriggerElement,class:"kol-popover"},e("div",{key:"2d9e3ca85b144564023029ef1cd89d78059bea4b",class:{popover:!0,show:this.state._visible},ref:this.catchPopoverElement,hidden:!this.state._show},e("div",{key:"5174ee3c34a5ab1b130f0a2412cb595dd312fe9b",class:`arrow ${this.state._align}`,ref:this.catchArrowElement}),e("slot",{key:"a1756190c8f58cfbb7f318a1f93b494843f4c3db"})))}validateAlign(e){a(this,e)}validateOn(e){r(this,e)}validateShow(e){l(this,e),e&&this.showPopover()}componentWillLoad(){this.validateAlign(this._align),this.validateShow(this._show)}static get watchers(){return{_align:["validateAlign"],_on:["validateOn"],_show:["validateShow"]}}};c.style=d;export{c as kol_popover_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["styleCss","KolPopoverWcStyle0","KolPopover","this","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","element","triggerElement","previousElementSibling","catchPopoverElement","popoverElement","catchArrowElement","arrowElement","_align","_show","_visible","showPopover","addListenersToBody","alignFloatingElements","align","referenceElement","floatingElement","state","Object","assign","_a","focus","removeListenersToBody","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","show","hidden","validateAlign","value","validateShow","componentWillLoad"],"sources":["src/components/popover/style.scss?tag=kol-popover-wc","src/components/popover/component.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\t.kol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\t.kol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\t.kol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\t.kol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\n}\n","import type { AlignPropType, PopoverAPI, PopoverStates, ShowPropType } from '../../schema';\nimport { getDocument, validateAlign, 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 * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.scss',\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(): void {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_visible: false,\n\t\t};\n\t\tthis._show = false;\n\t\tthis.triggerElement?.focus();\n\t\tthis.removeListenersToBody();\n\t}\n\tprivate hidePopoverByEscape = (event: KeyboardEvent): void => {\n\t\tif (event.key === 'Escape') this.hidePopover();\n\t};\n\tprivate hidePopoverByClickOutside = (event: MouseEvent): void => {\n\t\tif (this.host && !this.host.contains(event.target as HTMLElement)) {\n\t\t\tthis.hidePopover();\n\t\t}\n\t};\n\n\t/* EventListener functions */\n\tprivate addListenersToBody(): void {\n\t\tconst body = getDocument().body;\n\t\tbody.addEventListener('keyup', this.hidePopoverByEscape);\n\t\tbody.addEventListener('click', this.hidePopoverByClickOutside);\n\t\tdocument.scrollingElement?.addEventListener(\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-wc\">\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 * 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_show: false,\n\t\t_visible: false,\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_show')\n\tpublic validateShow(value?: ShowPropType): void {\n\t\tvalidateShow(this, value);\n\t\tif (value) 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"],"mappings":";;;yUAAA,MAAMA,EAAW,mwJACjB,MAAAC,EAAeD,E,MCcFE,EAAU,M,yBA4BdC,KAAAC,oBAAuBC,IAC9B,GAAIA,EAAMC,MAAQ,SAAUH,KAAKI,aAAa,EAEvCJ,KAAAK,0BAA6BH,IACpC,GAAIF,KAAKM,OAASN,KAAKM,KAAKC,SAASL,EAAMM,QAAwB,CAClER,KAAKI,a,GA2BCJ,KAAAS,2BAA8BC,IACrC,GAAIA,EAAS,CACZV,KAAKM,KAAOI,EACZV,KAAKW,eAAiBD,EAAQE,sB,GAGxBZ,KAAAa,oBAAuBH,IAC9BV,KAAKc,eAAiBJ,CAAO,EAEtBV,KAAAe,kBAAqBL,IAC5BV,KAAKgB,aAAeN,CAAO,E,YAiBY,M,WAMyB,M,WAE1B,CACtCO,OAAQ,MACRC,MAAO,MACPC,SAAU,M,CA5FH,iBAAMC,GACbpB,KAAKqB,qBAEL,GAAIrB,KAAKW,gBAAkBX,KAAKc,eAAgB,OACzCQ,EAAsB,CAC3BC,MAAOvB,KAAKiB,OACZO,iBAAkBxB,KAAKW,eACvBK,aAAchB,KAAKgB,aACnBS,gBAAiBzB,KAAKc,iBAEvBd,KAAK0B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQ5B,KAAK0B,OAAK,CAAEP,SAAU,M,EAGlC,WAAAf,G,MACPJ,KAAK0B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACN5B,KAAK0B,OAAK,CACbP,SAAU,QAEXnB,KAAKkB,MAAQ,OACbW,EAAA7B,KAAKW,kBAAc,MAAAkB,SAAA,SAAAA,EAAEC,QACrB9B,KAAK+B,uB,CAYE,kBAAAV,G,MACP,MAAMW,EAAOC,IAAcD,KAC3BA,EAAKE,iBAAiB,QAASlC,KAAKC,qBACpC+B,EAAKE,iBAAiB,QAASlC,KAAKK,4BACpCwB,EAAAM,SAASC,oBAAgB,MAAAP,SAAA,SAAAA,EAAEK,iBAC1B,UACA,UACMlC,KAAKoB,aAAa,GAExB,CAAEiB,QAAS,M,CAGL,qBAAAN,G,MACP,MAAMC,EAAOC,IAAcD,KAC3BA,EAAKM,oBAAoB,QAAStC,KAAKC,qBACvC+B,EAAKM,oBAAoB,QAAStC,KAAKK,4BACvCwB,EAAAM,SAASC,oBAAgB,MAAAP,SAAA,SAAAA,EAAES,oBAAoB,UAAU,UACnDtC,KAAKoB,aAAa,G,CAkBlB,MAAAmB,GACN,OACCC,EAACC,EAAI,CAAAtC,IAAA,2CAACuC,IAAK1C,KAAKS,2BAA4BkC,MAAM,kBACjDH,EAAA,OAAArC,IAAA,2CAAKwC,MAAO,CAAEC,QAAS,KAAMC,KAAM7C,KAAK0B,MAAMP,UAAYuB,IAAK1C,KAAKa,oBAAqBiC,QAAS9C,KAAK0B,MAAMR,OAC5GsB,EAAA,OAAArC,IAAA,2CAAKwC,MAAO,SAAS3C,KAAK0B,MAAMT,SAAUyB,IAAK1C,KAAKe,oBACpDyB,EAAA,QAAArC,IAAA,8C,CAwBG,aAAA4C,CAAcC,GACpBD,EAAc/C,KAAMgD,E,CAId,YAAAC,CAAaD,GACnBC,EAAajD,KAAMgD,GACnB,GAAIA,OAAYhD,KAAKoB,a,CAGf,iBAAA8B,GACNlD,KAAK+C,cAAc/C,KAAKiB,QACxBjB,KAAKiD,aAAajD,KAAKkB,M","ignoreList":[]}
+{"version":3,"names":["validatePopoverCallbacks","component","value","watchValidator","Set","styleCss","KolPopoverWcStyle0","KolPopover","this","hidePopoverByEscape","event","key","hidePopover","hidePopoverByClickOutside","host","contains","target","catchHostAndTriggerElement","element","triggerElement","previousElementSibling","catchPopoverElement","popoverElement","catchArrowElement","arrowElement","_align","_on","_show","_visible","showPopover","addListenersToBody","alignFloatingElements","align","referenceElement","floatingElement","state","Object","assign","_a","focus","removeListenersToBody","_c","_b","onClose","call","body","getDocument","addEventListener","document","scrollingElement","passive","removeEventListener","render","h","Host","ref","class","popover","show","hidden","validateAlign","validateOn","validateShow","componentWillLoad"],"sources":["src/schema/props/popover-callbacks.ts","src/components/popover/style.scss?tag=kol-popover-wc","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 '../@shared/mixins';\n@import '../style';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.kol-popover {\n\t\theight: 0;\n\t\tposition: absolute;\n\t}\n\n\t.kol-popover .popover {\n\t\tbackground-color: #fff;\n\t\tmin-height: max-content;\n\t\tmin-width: max-content;\n\t\topacity: 0;\n\t\tposition: absolute;\n\t}\n\n\t.kol-popover .show {\n\t\tanimation: 0.3s ease-in forwards fadeInOpacity;\n\t}\n\n\t.kol-popover .disappear {\n\t\tanimation: 0.3s ease-in backwards fadeInOpacity;\n\t}\n\n\t.kol-popover .arrow {\n\t\tbackground-color: inherit;\n\t\theight: var(--font-size);\n\t\tposition: absolute;\n\t\trotate: 0.125turn;\n\t\twidth: var(--font-size);\n\t\tz-index: -1;\n\t}\n\n\t@keyframes fadeInOpacity {\n\t\t0% {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t100% {\n\t\t\topacity: 1;\n\t\t}\n\t}\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 * @slot - Der Inhalt des Popover.\n */\n@Component({\n\ttag: 'kol-popover-wc',\n\tstyleUrl: './style.scss',\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"],"mappings":";;;gVAkBO,MAAMA,EAA2B,CAACC,EAAsCC,KAC9EC,EAAeF,EAAW,OAAQC,UAAiBA,IAAU,UAAYA,IAAU,MAAM,IAAIE,IAAI,CAAC,8CAA+CF,EAAM,ECnBxJ,MAAMG,EAAW,mwJACjB,MAAAC,EAAeD,E,MCcFE,EAAU,M,yBA+BdC,KAAAC,oBAAuBC,IAC9B,GAAIA,EAAMC,MAAQ,SAAUH,KAAKI,YAAYF,EAAM,EAG5CF,KAAAK,0BAA6BH,IACpC,GAAIF,KAAKM,OAASN,KAAKM,KAAKC,SAASL,EAAMM,QAAwB,CAClER,KAAKI,YAAYF,E,GA2BXF,KAAAS,2BAA8BC,IACrC,GAAIA,EAAS,CACZV,KAAKM,KAAOI,EACZV,KAAKW,eAAiBD,EAAQE,sB,GAGxBZ,KAAAa,oBAAuBH,IAC9BV,KAAKc,eAAiBJ,CAAO,EAEtBV,KAAAe,kBAAqBL,IAC5BV,KAAKgB,aAAeN,CAAO,E,YAiBY,M,8BAWyB,M,WAE1B,CACtCO,OAAQ,MACRC,IAAK,GACLC,MAAO,MACPC,SAAU,M,CAtGH,iBAAMC,GACbrB,KAAKsB,qBAEL,GAAItB,KAAKW,gBAAkBX,KAAKc,eAAgB,OACzCS,EAAsB,CAC3BC,MAAOxB,KAAKiB,OACZQ,iBAAkBzB,KAAKW,eACvBK,aAAchB,KAAKgB,aACnBU,gBAAiB1B,KAAKc,iBAEvBd,KAAK2B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GAAQ7B,KAAK2B,OAAK,CAAEP,SAAU,M,EAGlC,WAAAhB,CAAYF,G,UACnBF,KAAK2B,MAAKC,OAAAC,OAAAD,OAAAC,OAAA,GACN7B,KAAK2B,OAAK,CACbP,SAAU,QAEXpB,KAAKmB,MAAQ,OACbW,EAAA9B,KAAKW,kBAAc,MAAAmB,SAAA,SAAAA,EAAEC,QACrB/B,KAAKgC,yBAELC,GAAAC,EAAAlC,KAAK2B,MAAMT,OAAG,MAAAgB,SAAA,SAAAA,EAAEC,WAAO,MAAAF,SAAA,SAAAA,EAAAG,KAAAF,EAAGhC,E,CAcnB,kBAAAoB,G,MACP,MAAMe,EAAOC,IAAcD,KAC3BA,EAAKE,iBAAiB,QAASvC,KAAKC,qBACpCoC,EAAKE,iBAAiB,QAASvC,KAAKK,4BACpCyB,EAAAU,SAASC,oBAAgB,MAAAX,SAAA,SAAAA,EAAES,iBAC1B,UACA,UACMvC,KAAKqB,aAAa,GAExB,CAAEqB,QAAS,M,CAGL,qBAAAV,G,MACP,MAAMK,EAAOC,IAAcD,KAC3BA,EAAKM,oBAAoB,QAAS3C,KAAKC,qBACvCoC,EAAKM,oBAAoB,QAAS3C,KAAKK,4BACvCyB,EAAAU,SAASC,oBAAgB,MAAAX,SAAA,SAAAA,EAAEa,oBAAoB,UAAU,UACnD3C,KAAKqB,aAAa,G,CAkBlB,MAAAuB,GACN,OACCC,EAACC,EAAI,CAAA3C,IAAA,2CAAC4C,IAAK/C,KAAKS,2BAA4BuC,MAAM,eACjDH,EAAA,OAAA1C,IAAA,2CAAK6C,MAAO,CAAEC,QAAS,KAAMC,KAAMlD,KAAK2B,MAAMP,UAAY2B,IAAK/C,KAAKa,oBAAqBsC,QAASnD,KAAK2B,MAAMR,OAC5G0B,EAAA,OAAA1C,IAAA,2CAAK6C,MAAO,SAAShD,KAAK2B,MAAMV,SAAU8B,IAAK/C,KAAKe,oBACpD8B,EAAA,QAAA1C,IAAA,8C,CA8BG,aAAAiD,CAAc1D,GACpB0D,EAAcpD,KAAMN,E,CAId,UAAA2D,CAAW3D,GACjBF,EAAyBQ,KAAMN,E,CAIzB,YAAA4D,CAAa5D,GACnB4D,EAAatD,KAAMN,GACnB,GAAIA,OAAYM,KAAKqB,a,CAGf,iBAAAkC,GACNvD,KAAKoD,cAAcpD,KAAKiB,QACxBjB,KAAKsD,aAAatD,KAAKmB,M","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-bd96e8df.js";import{v as r}from"./label-37acddfe.js";import{k as i,i as o,w as a}from"./prop.validators-f89d26b4.js";import"./index-db4aa6e4.js";import"./dev.utils-fab45cbc.js";var s;!function(e){e.bar="bar",e.cycle="cycle"}(s||(s={}));const l="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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: 150px;\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}",d=l,c=Object.keys(s),h=({state:t})=>{const n=t._label?"57%":"50%";return e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),e("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&e("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},t._label),e("text",{"aria-hidden":"true",x:"50%",y:n,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit))},u=({state:t})=>{const n="var(--kolibri-text-label-padding, 45px)",a=t._value/t._max*100;return e("div",{class:"bar"},t._label&&e("div",null,t._label),e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},e("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${n})`}}),e("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${n})`}}),e("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${a}% - 5px - (${n} / 100 * ${a}))`}}),e("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},t._value,t._unit)))},p=t=>{switch(t._variant){case"cycle":return e(h,{state:t});case"bar":return e(u,{state:t});default:throw new Error(`Progress variant ${t._variant} not implemented.`)}},b=class{constructor(e){n(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 e(t,{key:"68cd1579ff9628041564e8ea5d96ff47c46b2003",class:"kol-progress"},p(this.state),e("progress",{key:"d2ad880345dee53c60f9cec52a2c1711a97d5a02","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{key:"e14a064412d61232f253d20f8438ac3dbb7c99c8","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){r(this,e)}validateMax(e){"number"!=typeof e&&(e=100),i(this,"_max",e,{required:!0})}validateUnit(e){o(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),i(this,"_value",e,{required:!0})}validateVariant(e){a(this,"_variant",(e=>"string"==typeof e&&c.includes(e)),new Set(c),e)}componentWillLoad(){this.validateLabel(this._label),this.validateMax(this._max),this.validateUnit(this._unit),this.validateValue(this._value),this.validateVariant(this._variant),this.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"]}}};b.style={default:d};export{b as kol_progress};
+import{r as n,h as e,H as t}from"./index-cf24d1fe.js";import{v as r}from"./label-084ed1e7.js";import{k as i,i as o,w as a}from"./prop.validators-5a58fa40.js";import"./index-5728f164.js";import"./dev.utils-fab45cbc.js";var s;!function(e){e.bar="bar",e.cycle="cycle"}(s||(s={}));const l="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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: 150px;\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}",c=l,d=Object.keys(s),h=({state:t})=>{const n=t._label?"57%":"50%";return e("svg",{class:"cycle",width:"100",viewBox:"0 0 120 120",xmlns:"http://www.w3.org/2000/svg"},e("circle",{class:"background",cx:"60",cy:"60",r:"54.5",fill:"currentColor",stroke:"currentColor","stroke-width":"8"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"3"}),e("circle",{class:"border",cx:"60",cy:"60",r:"59",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"whitespace",cx:"60",cy:"60",r:"51",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"border",cx:"60",cy:"60",r:"50",fill:"currentColor",stroke:"currentColor","stroke-width":"1"}),e("circle",{class:"progress",fill:"currentColor",stroke:"currentColor","stroke-linecap":"round","stroke-dasharray":`${Math.round(t._value/t._max*342)}px 342px`,"stroke-width":"6",cx:"60",cy:"60",r:"54.5"}),t._label&&e("text",{"aria-hidden":"true",x:"50%",y:"43%","text-anchor":"middle",fill:"currentColor"},t._label),e("text",{"aria-hidden":"true",x:"50%",y:n,"text-anchor":"middle",fill:"currentColor"},t._value,t._unit))},u=({state:t})=>{const n="var(--kolibri-text-label-padding, 45px)",a=t._value/t._max*100;return e("div",{class:"bar"},t._label&&e("div",null,t._label),e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"100%",height:"12",overflow:"visible"},e("rect",{class:"background",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(100% - 2px - ${n})`}}),e("rect",{class:"border",x:"1",y:"1",height:"10",rx:"5",fill:"currentColor",stroke:"currentColor","stroke-width":"1",style:{width:`calc(100% - 2px - ${n})`}}),e("rect",{class:"progress",x:"2.5",y:"2.5",height:"7",rx:"3.5",fill:"currentColor",stroke:"currentColor","stroke-width":"3",style:{width:`calc(${a}% - 5px - (${n} / 100 * ${a}))`}}),e("text",{"aria-hidden":"true","text-anchor":"end","dominant-baseline":"middle",fill:"currentColor",x:"100%",y:"50%"},t._value,t._unit)))},p=t=>{switch(t._variant){case"cycle":return e(h,{state:t});case"bar":return e(u,{state:t});default:throw new Error(`Progress variant ${t._variant} not implemented.`)}},b=class{constructor(e){n(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 e(t,{key:"dd9bd33793492d68c12244d65bc496b3854a5ff8",class:"kol-progress"},p(this.state),e("progress",{key:"11bcc7740948e6cda74526ad8941166834771cde","aria-busy":this.state._value<this.state._max?"true":"false",max:this.state._max,value:this.state._value}),e("span",{key:"6bbf5a8e7dc9ac05f7e64f5a4e67241a48aa44b2","aria-live":"polite","aria-relevant":"removals text",class:"visually-hidden"},this.state._liveValue," von ",this.state._max," ",this.state._unit))}validateLabel(e){r(this,e)}validateMax(e){"number"!=typeof e&&(e=100),i(this,"_max",e,{required:!0})}validateUnit(e){o(this,"_unit",e)}validateValue(e){"number"!=typeof e&&(e=0),i(this,"_value",e,{required:!0})}validateVariant(e){a(this,"_variant",(e=>"string"==typeof e&&d.includes(e)),new Set(d),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"]}}};b.style={default:c};export{b as kol_progress};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-bd96e8df.js";import{h as i}from"./component-names-3e0158fe.js";import{v as o}from"./label-37acddfe.js";import{i as a,w as s}from"./prop.validators-f89d26b4.js";import{s as l}from"./reuse-523ba2ac.js";import"./index-db4aa6e4.js";import"./dev.utils-fab45cbc.js";const r=["block","inline"],d="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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}",h=d,c=class{constructor(e){n(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){o(this,e)}validateHref(e){a(this,"_href",e,{required:!0})}validateQuote(e){a(this,"_quote",e,{required:!0})}validateVariant(e){s(this,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set(r),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=l(this.state._quote);return e(t,{key:"2487e0efcc0b7eb36a0b22096be4c15eed465441",class:"kol-quote"},e("figure",{key:"de65c394fd574f4366f1db40bf1ca1b084336e4f",class:{[this.state._variant]:!0}},"block"===this.state._variant?e("blockquote",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"28f5771809da69cf3069d2e71efb958e390721d7"},e("cite",{key:"82927cf5f9cb3360963061a7e7fe999b5d69c0a9"},e(i,{key:"be75f2b39937cd74ff353abc353ad5e640279449",_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};c.style={default:h};export{c as kol_quote};
+import{r as n,h as e,H as t}from"./index-cf24d1fe.js";import{h as i}from"./component-names-0a8a1a6c.js";import{v as a}from"./label-084ed1e7.js";import{i as o,w as s}from"./prop.validators-5a58fa40.js";import{s as l}from"./reuse-523ba2ac.js";import"./index-5728f164.js";import"./dev.utils-fab45cbc.js";const r=["block","inline"],d="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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}",h=d,c=class{constructor(e){n(this,e),this._label=void 0,this._href=void 0,this._quote=void 0,this._variant="inline",this.state={_href:"",_quote:"",_variant:"inline"}}validateLabel(e){a(this,e)}validateHref(e){o(this,"_href",e,{required:!0})}validateQuote(e){o(this,"_quote",e,{required:!0})}validateVariant(e){s(this,"_variant",(e=>"string"==typeof e&&r.includes(e)),new Set(r),e)}componentWillLoad(){this.validateHref(this._href),this.validateLabel(this._label),this.validateQuote(this._quote),this.validateVariant(this._variant)}render(){const n=l(this.state._quote);return e(t,{key:"08232b44e1ee7d5f3acfc4fcd846fa85a9731b0f",class:"kol-quote"},e("figure",{key:"23b315c6c5b6ca342fa0c88b08c8d335ffb032d6",class:{[this.state._variant]:!0}},"block"===this.state._variant?e("blockquote",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))):e("q",{cite:this.state._href},this.state._quote,e("span",{"aria-hidden":n?void 0:"true",hidden:!n},e("slot",{name:"expert"}))),"string"==typeof this.state._label&&this.state._label.length>0&&e("figcaption",{key:"5c5b876fb1ec7230f478e3283e056ae72dfba220"},e("cite",{key:"b264ba94846f2b895d6d400b7d4f642445111cbf"},e(i,{key:"b32b9d1716549f5a3b3d9b96ac74e534eb03cf60",_href:this.state._href,_label:this.state._label,_target:"_blank"})))))}static get watchers(){return{_label:["validateLabel"],_href:["validateHref"],_quote:["validateQuote"],_variant:["validateVariant"]}}};c.style={default:h};export{c as kol_quote};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as n,H as t,r as i,g as a}from"./index-bd96e8df.js";import{n as s}from"./dev.utils-cb789c3d.js";import{t as o,s as l}from"./events-29e84d75.js";import{g as r}from"./controller-ec76e4bf.js";import{I as d}from"./InternalUnderlinedAccessKey-308bff0a.js";import{I as h}from"./controller-icon-e155a2b1.js";import{f as c,v as p}from"./controller-056d0f3b.js";import{v as u}from"./rows-9afeef27.js";import{b as f,g as b}from"./prop.validators-f89d26b4.js";import{l as m}from"./component-names-3e0158fe.js";import{p as y}from"./controller-ad9f8f69.js";import{s as v}from"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-8e2d43be.js";import"./hide-label-6424f890.js";import"./label-37acddfe.js";import"./tab-index-a117f598.js";import"./tooltip-align-b217e9d0.js";import"./align-89a65800.js";import"./icons-bd60f3a5.js";import"./common-54bf85ba.js";import"./index-db4aa6e4.js";class w extends h{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(),c(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){p(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){f(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){f(this.component,"_required",e)}validateRows(e){u(this.component,e)}validateValue(e){b(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 g="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .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}\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/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",k=g,x=(e,t)=>Array.isArray(e)&&e.includes(t),_=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(t,n){var i;return e("optgroup",{disabled:t.disabled,label:t.label},null===(i=t.options)||void 0===i?void 0:i.map(((t,i)=>{const a=`${n}-${i}`;return Array.isArray(t.options)?this.renderOptgroup(t,a):e("option",{disabled:t.disabled,key:a,selected:x(this.state._value,t.value),value:a},t.label)})))}render(){const{ariaDescribedBy:i}=r(this.state),a=v(this.state._label);return e(t,{key:"a3af086496c39dca6be776f6581a50430965119e",class:{"kol-select":!0,"has-value":this.state._hasValue}},e(m,{key:"5cd2a72c6ceb62c5a5dc75ad554682dd19d0b8b3",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_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,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"e8bd7c009018ea5fedc26608430e4676ac120860",slot:"label"},a?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(n,null,e(d,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"f4b2b7793efdb7db986f2e0ba14fd0b05ed40502",slot:"input"},e("form",{key:"e6da4dc84e269a0721f205d859b0e6c688f5f135",onSubmit:e=>{e.preventDefault(),y({form:this.host,ref:this.selectRef})}},e("input",{key:"1066dee3013b6c3b4d5ef8196dc2e1e142b473b2",type:"submit",hidden:!0}),e("select",Object.assign({key:"9a8db7a694b0570e14a85b15d1f68725a4d4ac0c",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this)}),this.state._options.map(((t,n)=>{const i=`-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,i):e("option",{disabled:t.disabled,key:i,selected:x(this.state._value,t.value),value:i},t.label)})))))))}constructor(e){i(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._alert=!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._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-${s()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new w(this,"select",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}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)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.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})),o("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;l(e),o("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 a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.style={default:k};export{_ as kol_select};
+import{h as e,F as n,H as t,r as i,g as a}from"./index-cf24d1fe.js";import{n as s}from"./dev.utils-44ef1bde.js";import{t as o,s as l}from"./events-29e84d75.js";import{g as r}from"./controller-ec60cfa6.js";import{I as d}from"./InternalUnderlinedAccessKey-b2266b5a.js";import{I as h}from"./controller-icon-78e12429.js";import{f as c,v as p}from"./controller-fe5a6b8d.js";import{v as u}from"./rows-c1ee8752.js";import{b as f,g as b}from"./prop.validators-5a58fa40.js";import{l as m}from"./component-names-0a8a1a6c.js";import{p as y}from"./controller-2a4348e1.js";import{s as v}from"./reuse-523ba2ac.js";import"./dev.utils-fab45cbc.js";import"./associated.controller-15cdd804.js";import"./hide-label-1d403517.js";import"./label-084ed1e7.js";import"./tab-index-86f3bbae.js";import"./tooltip-align-e140b328.js";import"./align-78bab7b5.js";import"./icons-b0b05e20.js";import"./common-54bf85ba.js";import"./index-5728f164.js";class w extends h{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(),c(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){p(this.component,e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateMultiple(e){f(this.component,"_multiple",e,{hooks:{afterPatch:this.afterPatchOptions,beforePatch:this.beforePatchOptions}})}validateRequired(e){f(this.component,"_required",e)}validateRows(e){u(this.component,e)}validateValue(e){b(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 g="/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .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}\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/*\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: 44px;\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 44px.\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: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\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  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid 1px;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",k=g,x=(e,t)=>Array.isArray(e)&&e.includes(t),_=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(t,n){var i;return e("optgroup",{disabled:t.disabled,label:t.label},null===(i=t.options)||void 0===i?void 0:i.map(((t,i)=>{const a=`${n}-${i}`;return Array.isArray(t.options)?this.renderOptgroup(t,a):e("option",{disabled:t.disabled,key:a,selected:x(this.state._value,t.value),value:a},t.label)})))}render(){const{ariaDescribedBy:i}=r(this.state),a=v(this.state._label);return e(t,{key:"5c65d97077bdf5a3d3464e1e99b1250ee73f5854",class:{"kol-select":!0,"has-value":this.state._hasValue}},e(m,{key:"a25c65cad1afdb4af663dc4f1f1d59953cb5541d",class:{"hide-label":!!this.state._hideLabel,select:!0},_accessKey:this.state._accessKey,_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,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.selectRef)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"e17163aa892c06a4cb4cc436646a9a6987426ba4",slot:"label"},a?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(n,null,e(d,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"6bb946f289f25dfb3eae4d59d090d6d087f90cce",slot:"input"},e("form",{key:"3779103b74a973a67e5c20f0882a78c3c0a84a01",onSubmit:e=>{e.preventDefault(),y({form:this.host,ref:this.selectRef})}},e("input",{key:"77a378acca5561f63e8ae062e0de4e068fd50b96",type:"submit",hidden:!0}),e("select",Object.assign({key:"89d75cef3db8e79fdb8a29948a23b88c4225eac5",ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":i.length>0?i.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,multiple:this.state._multiple,name:this.state._name,required:this.state._required,size:this.state._rows,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onChange:this.onChange.bind(this)}),this.state._options.map(((t,n)=>{const i=`-${n}`;return Array.isArray(t.options)?this.renderOptgroup(t,i):e("option",{disabled:t.disabled,key:i,selected:x(this.state._value,t.value),value:i},t.label)})))))))}constructor(e){i(this,e),this.catchRef=e=>{this.selectRef=e},this._accessKey=void 0,this._alert=!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._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-${s()}`,_label:"",_multiple:!1,_options:[],_value:[]},this.controller=new w(this,"select",this.host)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}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)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentWillLoad(){this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.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})),o("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;l(e),o("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 a(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_multiple:["validateMultiple"],_name:["validateName"],_on:["validateOn"],_options:["validateOptions"],_required:["validateRequired"],_rows:["validateRows"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.style={default:k};export{_ as kol_select};