@public-ui/components 4.1.4-rc.6 → 4.1.5-rc.0

package/dist/kolibri/kol-dialog-wc.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-dialog-wc.entry.esm.js","sources":["src/schema/props/width.ts","src/schema/props/variant/dialog.ts","src/components/dialog/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst DialogVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type DialogVariantPropType = (typeof DialogVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Dialog.\n */\nexport type PropDialogVariant = {\n\tvariant: DialogVariantPropType;\n};\n\n/* validator */\nexport const validateDialogVariant = (component: Generic.Element.Component, value?: DialogVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value),\n\t\tnew Set(DialogVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { DialogAPI, DialogStates, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport clsx from '../../utils/clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @internal\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog-wc',\n\tshadow: false,\n})\nexport class KolDialogWc implements DialogAPI {\n\t@Element() private readonly host?: HTMLKolDialogWcElement;\n\tprivate refDialog?: HTMLDialogElement;\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.closeModal();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the modal dialog.\n\t */\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/**\n\t * Closes the modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async closeModal() {\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\tprivate readonly on = {\n\t\tonClose: async () => {\n\t\t\tawait this.closeModal();\n\t\t},\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\taria-label={this.state._label}\n\t\t\t\tclass={clsx('kol-dialog', 'kol-modal', {\n\t\t\t\t\t'kol-dialog__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-dialog__card': this.state._variant === 'card',\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonCancel={handleCancelOverlay}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\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>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _label={this.state._label} _hasCloser _on={this.on}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriDialogEventCallbacks;\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/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: DialogStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\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?: KoliBriDialogEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriDialogEventCallbacks = {};\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<KoliBriDialogEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"names":["validateModalVariant"],"mappings":"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"}
+{"version":3,"file":"kol-dialog-wc.entry.esm.js","sources":["src/schema/props/width.ts","src/schema/props/variant/dialog.ts","src/components/dialog/component.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { WatchStringOptions } from '../utils';\nimport { watchString } from '../utils';\n\n/* types */\nexport type WidthPropType = string;\n\n/**\n * Defines the width of the component. (max-width: 100%)\n */\nexport interface PropWidth {\n\twidth: WidthPropType;\n}\n\n/* validator */\nexport const validateWidth = (component: Generic.Element.Component, value?: WidthPropType, options?: WatchStringOptions): void => {\n\twatchString(component, '_width', value, { defaultValue: '100%', ...options });\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../../utils/prop.validators';\n\nconst DialogVariantPropTypeOptions = ['blank', 'card'] as const;\nexport type DialogVariantPropType = (typeof DialogVariantPropTypeOptions)[number];\n\n/**\n * Defines the different variants for displaying the Dialog.\n */\nexport type PropDialogVariant = {\n\tvariant: DialogVariantPropType;\n};\n\n/* validator */\nexport const validateDialogVariant = (component: Generic.Element.Component, value?: DialogVariantPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'_variant',\n\t\t(value) => typeof value === 'string' && DialogVariantPropTypeOptions.includes(value),\n\t\tnew Set(DialogVariantPropTypeOptions),\n\t\tvalue,\n\t);\n};\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { DialogAPI, DialogStates, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateLabel, validateWidth } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\nimport { validateModalVariant } from '../../schema/props/variant/modal';\nimport clsx from '../../utils/clsx';\nimport { nonce } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * https://en.wikipedia.org/wiki/Modal_window\n *\n * @internal\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog-wc',\n\tshadow: false,\n})\nexport class KolDialogWc implements DialogAPI {\n\t@Element() private readonly host?: HTMLKolDialogWcElement;\n\tprivate refDialog?: HTMLDialogElement;\n\tprivate readonly cardHeadingId = nonce();\n\n\t@State() private isModal: boolean = true;\n\n\tprivate readonly _cardOn = { onClose: () => void this.close() };\n\n\tpublic disconnectedCallback(): void {\n\t\tvoid this.close();\n\t}\n\n\tprivate handleNativeCloseEvent() {\n\t\tthis.state._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\t/**\n\t * Opens the dialog. Pass true to open as a modal dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async show(modal: boolean = false): Promise<void> {\n\t\tif (this.refDialog?.open) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isModal = modal;\n\t\tif (modal) {\n\t\t\tthis.refDialog?.showModal?.();\n\t\t} else {\n\t\t\tthis.refDialog?.show?.();\n\t\t}\n\t}\n\n\t/**\n\t * Opens the dialog as a modal.\n\t */\n\t@Method()\n\tpublic showModal(): Promise<void> {\n\t\treturn this.show(true);\n\t}\n\n\t/**\n\t * Opens the dialog as a modal.\n\t * @deprecated Use showModal() instead.\n\t */\n\t@Method()\n\tpublic openModal(): Promise<void> {\n\t\treturn this.showModal();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async close(): Promise<void> {\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\t/**\n\t * Closes the dialog.\n\t * @deprecated Use close() instead.\n\t */\n\t@Method()\n\tpublic closeModal(): Promise<void> {\n\t\treturn this.close();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<dialog\n\t\t\t\taria-label={this.state._variant === 'blank' ? this.state._label : undefined}\n\t\t\t\taria-labelledby={this.state._variant === 'card' ? this.cardHeadingId : undefined}\n\t\t\t\taria-modal={this.isModal ? 'true' : 'false'}\n\t\t\t\tclass={clsx('kol-dialog', 'kol-modal', {\n\t\t\t\t\t'kol-dialog__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-dialog__card': this.state._variant === 'card',\n\t\t\t\t\t'kol-modal__blank': this.state._variant === 'blank',\n\t\t\t\t\t'kol-modal__card': this.state._variant === 'card',\n\t\t\t\t})}\n\t\t\t\tonCancel={handleCancelOverlay}\n\t\t\t\tonClose={this.handleNativeCloseEvent.bind(this)}\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>\n\t\t\t\t{this.state._variant === 'blank' && <slot />}\n\t\t\t\t{this.state._variant === 'card' && (\n\t\t\t\t\t<KolCardWcTag _hasCloser _headingId={this.cardHeadingId} _label={this.state._label} _level={this._level} _on={this._cardOn}>\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</KolCardWcTag>\n\t\t\t\t)}\n\t\t\t</dialog>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriDialogEventCallbacks;\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/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n\n\t@State() public state: DialogStates = {\n\t\t_label: '', // ⚠ required\n\t\t_width: '100%',\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('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriDialogEventCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriDialogEventCallbacks = {};\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<KoliBriDialogEventCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_width')\n\tpublic validateWidth(value?: string): void {\n\t\tvalidateWidth(this, value);\n\t}\n\n\t@Watch('_variant')\n\tpublic validateVariant(value?: ModalVariantPropType): void {\n\t\tvalidateModalVariant(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateWidth(this._width);\n\t\tthis.validateVariant(this._variant);\n\t}\n}\n"],"names":["validateModalVariant"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as a,g as i}from"./index-Cr4ko_DT.js";import{d as s}from"./component-names-Dy77vq43.js";import{g as o,b as l,s as e}from"./common-BqV6Zb30.js";import{v as d}from"./label-vxVEH2gH.js";import{c as n}from"./clsx-COFh-Vc8.js";import{d as r,K as h}from"./events-DHTi_wtD.js";import{h as c}from"./tooltip-open-tracking-D3tCiiGP.js";const b=(a,t,i)=>{o(a,"_width",t,Object.assign({defaultValue:"100%"},i))},f=["blank","card"],v=(a,t)=>{l(a,"_variant",a=>"string"==typeof a&&f.includes(a),new Set(f),t)},_=class{constructor(a){t(this,a),this.on={onClose:async()=>{await this.closeModal()}},this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.closeModal()}handleNativeCloseEvent(){var a,t;null===(t=null===(a=this.state._on)||void 0===a?void 0:a.onClose)||void 0===t||t.call(a),this.host&&r(this.host,h.close)}async openModal(){var a;null===(a=this.refDialog)||void 0===a||a.showModal()}async closeModal(){var a,t;null===(t=null===(a=this.refDialog)||void 0===a?void 0:a.close)||void 0===t||t.call(a)}render(){return a("dialog",{key:"2fbbca8fb299ff20a891a1b9745f1898e41e8842","aria-label":this.state._label,class:n("kol-dialog","kol-modal",{"kol-dialog__blank":"blank"===this.state._variant,"kol-dialog__card":"card"===this.state._variant,"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onCancel:c,onClose:this.handleNativeCloseEvent.bind(this),ref:a=>{this.refDialog=a},style:{width:this.state._width}},"blank"===this.state._variant&&a("slot",{key:"33d72b4014bb7cfbf77befee0333819065abd02b"}),"card"===this.state._variant&&a(s,{key:"1db808d95fb269977d6de4989190174db2bc111d",_label:this.state._label,_hasCloser:!0,_on:this.on},a("slot",{key:"bd4a40e55c4d8f0af5b6468f43f7acb38f31502c"})))}validateLabel(a){d(this,a,{required:!0})}validateOn(a){if("object"==typeof a&&null!==a){const t={};"function"!=typeof a.onClose&&!0!==a.onClose||(t.onClose=a.onClose),e(this,"_on",t)}}validateWidth(a){b(this,a)}validateVariant(a){v(this,a)}componentWillLoad(){this.validateLabel(this._label),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return i(this)}static get watchers(){return{_label:["validateLabel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};export{_ as kol_dialog_wc};
+import{r as i,h as t,g as s}from"./index-CwE7Ckxk.js";import{d as a}from"./component-names-Dy77vq43.js";import{g as e,b as l,s as o}from"./common-BqV6Zb30.js";import{v as d}from"./label-vxVEH2gH.js";import{c as r}from"./clsx-COFh-Vc8.js";import{n}from"./dev.utils-BA_rOknz.js";import{d as h,K as v}from"./events-DHTi_wtD.js";import{h as c}from"./tooltip-open-tracking-D3tCiiGP.js";import{w as f}from"./validation-CH4ZrnXs.js";import"./level-C9aFQZkd.js";import"./normalizers-C14RETgU.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const b=(a,t,i)=>{e(a,"_width",t,Object.assign({defaultValue:"100%"},i))},m=["blank","card"],u=(a,t)=>{l(a,"_variant",a=>"string"==typeof a&&m.includes(a),new Set(m),t)},_=class{constructor(a){i(this,a),this.cardHeadingId=n(),this.isModal=!0,this._cardOn={onClose:()=>{this.close()}},this._level=0,this._width="100%",this._variant="blank",this.state={_label:"",_width:"100%"}}disconnectedCallback(){this.close()}handleNativeCloseEvent(){var a,t;null===(t=null===(a=this.state._on)||void 0===a?void 0:a.onClose)||void 0===t||t.call(a),this.host&&h(this.host,v.close)}async show(a=!1){var t,i,l,s,e;(null===(t=this.refDialog)||void 0===t?void 0:t.open)||(this.isModal=a,a?null===(l=null===(i=this.refDialog)||void 0===i?void 0:i.showModal)||void 0===l||l.call(i):null===(e=null===(s=this.refDialog)||void 0===s?void 0:s.show)||void 0===e||e.call(s))}showModal(){return this.show(!0)}openModal(){return this.showModal()}async close(){var a,t;null===(t=null===(a=this.refDialog)||void 0===a?void 0:a.close)||void 0===t||t.call(a)}closeModal(){return this.close()}render(){return t("dialog",{key:"1c0bfcd62e80d0f55e1e3e3a09b5a20df0dbf960","aria-label":"blank"===this.state._variant?this.state._label:void 0,"aria-labelledby":"card"===this.state._variant?this.cardHeadingId:void 0,"aria-modal":this.isModal?"true":"false",class:r("kol-dialog","kol-modal",{"kol-dialog__blank":"blank"===this.state._variant,"kol-dialog__card":"card"===this.state._variant,"kol-modal__blank":"blank"===this.state._variant,"kol-modal__card":"card"===this.state._variant}),onCancel:c,onClose:this.handleNativeCloseEvent.bind(this),ref:a=>{this.refDialog=a},style:{width:this.state._width}},"blank"===this.state._variant&&t("slot",{key:"9cc0bdd38098f8626499eb783310150c4df1919f"}),"card"===this.state._variant&&t(a,{key:"e0ccde80ffd9be5fba304a2746433fb201971c14",_hasCloser:!0,_headingId:this.cardHeadingId,_label:this.state._label,_level:this._level,_on:this._cardOn},t("slot",{key:"62d89798591e499f11bd3b5b6e3468eaca1a6f17"})))}validateLabel(a){d(this,a,{required:!0})}validateLevel(a){f(this,a)}validateOn(a){if("object"==typeof a&&null!==a){const t={};"function"!=typeof a.onClose&&!0!==a.onClose||(t.onClose=a.onClose),o(this,"_on",t)}}validateWidth(a){b(this,a)}validateVariant(a){u(this,a)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on),this.validateWidth(this._width),this.validateVariant(this._variant)}get host(){return s(this)}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_on:["validateOn"],_width:["validateWidth"],_variant:["validateVariant"]}}};export{_ as kol_dialog_wc};

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

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","getElement","KolCardWcTag","watchString","watchValidator","setState","validateLabel","clsx","dispatchDomEvent","KolEvent","handleCancelOverlay","validateWidth","component","value","options","Object","assign","defaultValue","DialogVariantPropTypeOptions","validateDialogVariant","includes","Set","KolDialogWc","constructor","hostRef","this","on","onClose","async","closeModal","_width","_variant","state","_label","disconnectedCallback","handleNativeCloseEvent","_a","_b","_on","call","host","close","openModal","refDialog","showModal","render","key","class","onCancel","bind","ref","el","style","width","_hasCloser","required","validateOn","callbacks","validateVariant","componentWillLoad","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","getElement","KolCardWcTag","watchString","watchValidator","setState","validateLabel","clsx","nonce","dispatchDomEvent","KolEvent","handleCancelOverlay","watchHeadingLevel","validateWidth","component","value","options","Object","assign","defaultValue","DialogVariantPropTypeOptions","validateDialogVariant","includes","Set","KolDialogWc","constructor","hostRef","this","cardHeadingId","isModal","_cardOn","onClose","close","_level","_width","_variant","state","_label","disconnectedCallback","handleNativeCloseEvent","_a","_b","_on","call","host","show","modal","_c","_d","_e","refDialog","open","showModal","openModal","closeModal","render","key","undefined","class","onCancel","bind","ref","el","style","width","_hasCloser","_headingId","required","validateLevel","validateOn","callbacks","validateVariant","componentWillLoad","watchers"],"sources":["0"],"mappings":"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","ignoreList":[]}

package/dist/kolibri/kol-dialog.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-dialog.entry.esm.js","sources":["src/components/dialog/style.scss?tag=kol-dialog&mode=default&encapsulation=shadow","src/components/dialog/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@include kol-card;\n\n@layer kol-component {\n\t.kol-dialog,\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\n\t\t&::backdrop {\n\t\t\tbackground-color: rgb(0, 0, 0, 0.1);\n\t\t}\n\t}\n\n\t.kol-dialog__close-button,\n\t.kol-modal__close-button {\n\t\tposition: absolute;\n\t\ttop: to-rem(1);\n\t\tright: to-rem(1);\n\t\tz-index: 1;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolDialogWcTag } from '../../core/component-names';\nimport type { DialogProps, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\n\n/**\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDialog implements DialogProps {\n\tprivate dialogRef?: HTMLKolDialogWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolDialogWcElement) => {\n\t\tthis.dialogRef = ref;\n\t};\n\n\t/**\n\t * Opens the dialog.\n\t */\n\t@Method()\n\tpublic async openModal() {\n\t\tawait this.dialogRef?.openModal();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t */\n\t@Method()\n\tpublic async closeModal() {\n\t\tawait this.dialogRef?.closeModal();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolDialogWcTag ref={this.catchRef} _label={this._label} _on={this._on} _variant={this._variant} _width={this._width}>\n\t\t\t\t<slot />\n\t\t\t</KolDialogWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriDialogEventCallbacks;\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/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,0gWAA0gW;;MCgBrhW,SAAS,GAAA,MAAA;AAPtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACrB,SAAC;AAuCc,QAAA,IAAM,CAAA,MAAA,GAAY,MAAM;AAKxB,QAAA,IAAQ,CAAA,QAAA,GAA0B,OAAO;AACxD;AAvCO,IAAA,MAAM,SAAS,GAAA;;AACrB,QAAA,OAAM,MAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,SAAS,EAAE,CAAA;;AAO3B,IAAA,MAAM,UAAU,GAAA;;AACtB,QAAA,OAAM,MAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE,CAAA;;IAG5B,MAAM,GAAA;QACZ,QACC,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EACnH,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACQ;;;;;;;;;"}
+{"version":3,"file":"kol-dialog.entry.esm.js","sources":["src/components/dialog/style.scss?tag=kol-dialog&mode=default&encapsulation=shadow","src/components/dialog/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-dialog,\n\t.kol-modal {\n\t\tmin-height: var(--a11y-min-size);\n\t\tpadding: 0;\n\t\tborder: 0;\n\t}\n\n\t.kol-dialog__close-button,\n\t.kol-modal__close-button {\n\t\tposition: absolute;\n\t\ttop: to-rem(1);\n\t\tright: to-rem(1);\n\t\tz-index: 1;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Method, Prop } from '@stencil/core';\nimport { KolDialogWcTag } from '../../core/component-names';\nimport type { DialogProps, HeadingLevel, KoliBriDialogEventCallbacks, LabelPropType } from '../../schema';\nimport type { ModalVariantPropType } from '../../schema/props/variant/modal';\n\n/**\n * @slot - The dialog's contents.\n */\n@Component({\n\ttag: 'kol-dialog',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDialog implements DialogProps {\n\tprivate dialogRef?: HTMLKolDialogWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolDialogWcElement) => {\n\t\tthis.dialogRef = ref;\n\t};\n\n\t/**\n\t * Opens the dialog.\n\t * @deprecated Use showModal() instead.\n\t */\n\t@Method()\n\tpublic openModal(): Promise<void> {\n\t\treturn this.showModal();\n\t}\n\n\t/**\n\t * Opens the dialog as a modal.\n\t */\n\t@Method()\n\tpublic showModal(): Promise<void> {\n\t\treturn this.dialogRef?.showModal() ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Opens the dialog. Pass true to open as a modal dialog.\n\t */\n\t@Method()\n\tpublic show(modal: boolean = false): Promise<void> {\n\t\treturn this.dialogRef?.show(modal) ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t */\n\t@Method()\n\tpublic close(): Promise<void> {\n\t\treturn this.dialogRef?.close() ?? Promise.resolve();\n\t}\n\n\t/**\n\t * Closes the dialog.\n\t * @deprecated Use close() instead.\n\t */\n\t@Method()\n\tpublic closeModal(): Promise<void> {\n\t\treturn this.close();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolDialogWcTag ref={this.catchRef} _label={this._label} _level={this._level} _on={this._on} _variant={this._variant} _width={this._width}>\n\t\t\t\t<slot />\n\t\t\t</KolDialogWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Defines the modal callback functions.\n\t */\n\t@Prop() public _on?: KoliBriDialogEventCallbacks;\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/**\n\t * Defines the variant of the modal.\n\t */\n\t@Prop() public _variant?: ModalVariantPropType = 'blank';\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,wgWAAwgW;;MCgBnhW,SAAS,GAAA,MAAA;AAPtB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAUkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACrB,SAAC;AA4Dc,QAAA,IAAM,CAAA,MAAA,GAAkB,CAAC;AAUzB,QAAA,IAAM,CAAA,MAAA,GAAY,MAAM;AAKxB,QAAA,IAAQ,CAAA,QAAA,GAA0B,OAAO;AACxD;IArEO,SAAS,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,SAAS,EAAE;;IAOjB,SAAS,GAAA;;QACf,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,SAAS,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAOjD,IAAI,CAAC,QAAiB,KAAK,EAAA;;QACjC,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAI,CAAC,KAAK,CAAC,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAOjD,KAAK,GAAA;;QACX,OAAO,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAI,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,OAAO,CAAC,OAAO,EAAE;;IAQ7C,UAAU,GAAA;AAChB,QAAA,OAAO,IAAI,CAAC,KAAK,EAAE;;IAGb,MAAM,GAAA;QACZ,QACC,CAAC,CAAA,cAAc,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EACxI,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACQ;;;;;;;;;"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-Cr4ko_DT.js";import{e as o}from"./component-names-Dy77vq43.js";import"./common-BqV6Zb30.js";const t='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777369141075"); /* IE9*/\n  src: url("kolicons.eot?t=1777369141075#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777369141075") format("woff2"), url("kolicons.woff?t=1777369141075") format("woff"), url("kolicons.ttf?t=1777369141075") format("truetype"), url("kolicons.svg?t=1777369141075#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n.kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n\n.kol-card .kol-icon {\n  color: inherit;\n  display: inline-block;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: inherit;\n}\n.kol-card :host {\n  display: inline-block;\n}\n.kol-card .kol-button {\n  display: flex;\n  min-height: var(--a11y-min-size);\n  font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  text-decoration-line: none;\n}\n.kol-card .kol-button::before {\n  /* Render zero-width character as first element to set the baseline correctly. */\n  content: "​";\n}\n.kol-card .kol-button__text {\n  flex: 1 0 100%;\n}\n.kol-card {\n  /* Visible with forced colors  */\n  outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  display: grid;\n  height: 100%;\n  overflow: visible;\n  grid-template-areas: "header  close" "content content";\n  grid-template-columns: 1fr min-content;\n  grid-template-rows: min-content 1fr;\n}\n.kol-card__header {\n  align-self: start;\n  grid-area: header;\n}\n.kol-card__content {\n  align-self: stretch;\n  grid-area: content;\n}\n.kol-card__close-button {\n  grid-area: close;\n}\n\n@layer kol-component {\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog::backdrop,\n  .kol-modal::backdrop {\n    background-color: rgba(0, 0, 0, 0.1);\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}',i=class{constructor(e){n(this,e),this.catchRef=n=>{this.dialogRef=n},this._width="100%",this._variant="blank"}async openModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.openModal())}async closeModal(){var n;await(null===(n=this.dialogRef)||void 0===n?void 0:n.closeModal())}render(){return e(o,{key:"ccdb18f556791832adc0f9ff26d970bb674b8ce0",ref:this.catchRef,_label:this._label,_on:this._on,_variant:this._variant,_width:this._width},e("slot",{key:"471ada8b81782aeb23902f1c4f113b07ba9d8686"}))}};i.style={default:t};export{i as kol_dialog};
+import{r as n,h as e}from"./index-CwE7Ckxk.js";import{e as o}from"./component-names-Dy77vq43.js";import"./common-BqV6Zb30.js";const t='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: white;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1778148144850"); /* IE9*/\n  src: url("kolicons.eot?t=1778148144850#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1778148144850") format("woff2"), url("kolicons.woff?t=1778148144850") format("woff"), url("kolicons.ttf?t=1778148144850") format("truetype"), url("kolicons.svg?t=1778148144850#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    grid-template-areas: "header  close" "content content";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-dialog,\n  .kol-modal {\n    min-height: var(--a11y-min-size);\n    padding: 0;\n    border: 0;\n  }\n  .kol-dialog__close-button,\n  .kol-modal__close-button {\n    position: absolute;\n    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n  }\n}',i=class{constructor(e){n(this,e),this.catchRef=n=>{this.dialogRef=n},this._level=0,this._width="100%",this._variant="blank"}openModal(){return this.showModal()}showModal(){var n,e;return null!==(e=null===(n=this.dialogRef)||void 0===n?void 0:n.showModal())&&void 0!==e?e:Promise.resolve()}show(n=!1){var e,o;return null!==(o=null===(e=this.dialogRef)||void 0===e?void 0:e.show(n))&&void 0!==o?o:Promise.resolve()}close(){var n,e;return null!==(e=null===(n=this.dialogRef)||void 0===n?void 0:n.close())&&void 0!==e?e:Promise.resolve()}closeModal(){return this.close()}render(){return e(o,{key:"a17abd1f58ac28397c5645822518998209c455e9",ref:this.catchRef,_label:this._label,_level:this._level,_on:this._on,_variant:this._variant,_width:this._width},e("slot",{key:"bc9895ef49e81444df9ce3d2634ae950bfc0f115"}))}};i.style={default:t};export{i as kol_dialog};

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

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","KolDialogWcTag","defaultStyleCss","KolDialog","constructor","hostRef","this","catchRef","ref","dialogRef","_width","_variant","openModal","_a","closeModal","render","key","_label","_on","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,MAAS,kCAC3BC,MAAsB,sCAC7B,uBAEP,MAAMC,EAAkB,w7VAExB,MAAMC,EAAY,MACd,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,SAAYC,IACbF,KAAKG,UAAYD,CAAG,EAExBF,KAAKI,OAAS,OACdJ,KAAKK,SAAW,OACpB,CACA,eAAMC,GACF,IAAIC,SACIA,EAAKP,KAAKG,aAAe,MAAQI,SAAY,OAAS,EAAIA,EAAGD,YACzE,CACA,gBAAME,GACF,IAAID,SACIA,EAAKP,KAAKG,aAAe,MAAQI,SAAY,OAAS,EAAIA,EAAGC,aACzE,CACA,MAAAC,GACI,OAAQf,EAAEC,EAAgB,CAAEe,IAAK,2CAA4CR,IAAKF,KAAKC,SAAUU,OAAQX,KAAKW,OAAQC,IAAKZ,KAAKY,IAAKP,SAAUL,KAAKK,SAAUD,OAAQJ,KAAKI,QAAUV,EAAE,OAAQ,CAAEgB,IAAK,6CAC1M,GAEJb,EAAUgB,MAAQ,CACdC,QAASlB,UAGJC","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","KolDialogWcTag","defaultStyleCss","KolDialog","constructor","hostRef","this","catchRef","ref","dialogRef","_level","_width","_variant","openModal","showModal","_a","_b","Promise","resolve","show","modal","close","closeModal","render","key","_label","_on","style","default"],"sources":["0"],"mappings":";;;YAGcA,OAAkBC,MAAS,kCAC3BC,MAAsB,sCAC7B,uBAEP,MAAMC,EAAkB,s7VAExB,MAAMC,EAAY,MACd,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,SAAYC,IACbF,KAAKG,UAAYD,CAAG,EAExBF,KAAKI,OAAS,EACdJ,KAAKK,OAAS,OACdL,KAAKM,SAAW,OACpB,CACA,SAAAC,GACI,OAAOP,KAAKQ,WAChB,CACA,SAAAA,GACI,IAAIC,EAAIC,EACR,OAAQA,GAAMD,EAAKT,KAAKG,aAAe,MAAQM,SAAY,OAAS,EAAIA,EAAGD,eAAiB,MAAQE,SAAY,EAAIA,EAAKC,QAAQC,SACrI,CACA,IAAAC,CAAKC,EAAQ,OACT,IAAIL,EAAIC,EACR,OAAQA,GAAMD,EAAKT,KAAKG,aAAe,MAAQM,SAAY,OAAS,EAAIA,EAAGI,KAAKC,MAAY,MAAQJ,SAAY,EAAIA,EAAKC,QAAQC,SACrI,CACA,KAAAG,GACI,IAAIN,EAAIC,EACR,OAAQA,GAAMD,EAAKT,KAAKG,aAAe,MAAQM,SAAY,OAAS,EAAIA,EAAGM,WAAa,MAAQL,SAAY,EAAIA,EAAKC,QAAQC,SACjI,CACA,UAAAI,GACI,OAAOhB,KAAKe,OAChB,CACA,MAAAE,GACI,OAAQvB,EAAEC,EAAgB,CAAEuB,IAAK,2CAA4ChB,IAAKF,KAAKC,SAAUkB,OAAQnB,KAAKmB,OAAQf,OAAQJ,KAAKI,OAAQgB,IAAKpB,KAAKoB,IAAKd,SAAUN,KAAKM,SAAUD,OAAQL,KAAKK,QAAUX,EAAE,OAAQ,CAAEwB,IAAK,6CAC/N,GAEJrB,EAAUwB,MAAQ,CACdC,QAAS1B,UAGJC","ignoreList":[]}

package/dist/kolibri/kol-drawer.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-drawer.entry.esm.js","sources":["src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-drawer {\n\t\t$root: &;\n\n\t\t&__dialog {\n\t\t\tpadding: 0;\n\t\t\tborder: none;\n\t\t}\n\n\t\t&__wrapper {\n\t\t\tposition: fixed;\n\t\t\toverflow: auto;\n\n\t\t\t&--left,\n\t\t\t&--right {\n\t\t\t\ttop: 0;\n\t\t\t\tmax-width: 100vw;\n\t\t\t\theight: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--left {\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&--right {\n\t\t\t\tright: 0;\n\t\t\t}\n\n\t\t\t&--bottom,\n\t\t\t&--top {\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\tmax-height: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--bottom {\n\t\t\t\tbottom: 0;\n\t\t\t}\n\n\t\t\t&--top {\n\t\t\t\ttop: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__content {\n\t\t\tposition: relative;\n\t\t}\n\t}\n\n\t.kol-drawer__dialog .kol-card__content {\n\t\toverflow-y: auto;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type { AlignPropType, DrawerAPI, DrawerStates, HasCloserPropType, KoliBriModalEventCallbacks, LabelPropType, OpenPropType } from '../../schema';\nimport { setState, validateAlign, validateHasCloser, validateLabel, validateOpen } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\n\n/**\n * @slot - The Content of drawer.\n */\n@Component({\n\ttag: 'kol-drawer',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDrawer implements DrawerAPI {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLKolCardWcElement;\n\n\t/**\n\t * Opens the drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync open() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: true,\n\t\t};\n\t\tthis.dialogElement?.showModal();\n\t}\n\n\t/**\n\t * Closes the drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tasync close() {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: false,\n\t\t};\n\t\tconst wrapper = this.dialogWrapperElement;\n\t\tif (!wrapper) return;\n\t\tconst computedStyle = window.getComputedStyle(wrapper);\n\t\tif (computedStyle.animationName === 'none') {\n\t\t\tthis.handleCloseDialog();\n\t\t}\n\t}\n\n\tprivate getWrapperRef = (el: HTMLKolCardWcElement | undefined) => (this.dialogWrapperElement = el as HTMLKolCardWcElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<KolCardWcTag\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {\n\t\t\t\t\t'kol-drawer__wrapper--open': this.state._open,\n\t\t\t\t\t'kol-drawer__wrapper--is-closing': this.state._open === false,\n\t\t\t\t})}\n\t\t\t\t_label={this.state._label}\n\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t_on={{\n\t\t\t\t\tonClose: () => {\n\t\t\t\t\t\tvoid this.close();\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div class=\"kol-drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => {\n\t\tthis.dialogElement = el as HTMLDialogElement;\n\t\tsetTimeout(() => {\n\t\t\tvoid this.openOrCloseBasedOnState(); // handle initial state as soon as element is ready\n\t\t});\n\t};\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-drawer\">\n\t\t\t\t<dialog aria-label={this.state._label} class=\"kol-drawer__dialog\" onCancel={handleCancelOverlay} ref={this.getRef}>\n\t\t\t\t\t{this.renderDialogContent()}\n\t\t\t\t</dialog>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() public _open?: OpenPropType;\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\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 * Specifies the EventCallback function to be called when the drawer is closing.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t@State() public state: DrawerStates = {\n\t\t_label: '', // ⚠ required\n\t\t_open: false,\n\t\t_align: 'left',\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('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType) {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\n\t\t\tif (this.dialogElement) {\n\t\t\t\t// handle property changes but not the initial validateOpen call\n\t\t\t\tvoid this.openOrCloseBasedOnState();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openOrCloseBasedOnState() {\n\t\tif (this.state._open) {\n\t\t\tawait this.open();\n\t\t} else {\n\t\t\tawait this.close();\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') {\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\tprivate handleCloseDialog() {\n\t\tthis.dialogElement?.close();\n\t\tthis._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate handleClose() {\n\t\tvoid (async () => {\n\t\t\tawait this.close();\n\t\t\tthis.handleCloseDialog();\n\t\t})();\n\t}\n\n\tprivate handleAnimationEnd(e: Event): void {\n\t\tconst animationEvent = e as AnimationEvent;\n\t\tif (animationEvent.animationName.includes('slideOut')) {\n\t\t\tthis.handleCloseDialog();\n\t\t}\n\t}\n\n\tpublic componentDidLoad(): void {\n\t\tthis.dialogElement?.addEventListener('animationend', this.handleAnimationEnd.bind(this));\n\t\tthis.dialogElement?.addEventListener('close', this.handleClose.bind(this));\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.dialogElement?.removeEventListener('animationend', this.handleAnimationEnd.bind(this));\n\t\tthis.dialogElement?.removeEventListener('close', this.handleClose.bind(this));\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-drawer.entry.esm.js","sources":["src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["@use '../@shared/global' as *;\n@use '../@shared/card.mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n\n\t.kol-drawer {\n\t\t$root: &;\n\n\t\t&__dialog {\n\t\t\tpadding: 0;\n\t\t\tborder: none;\n\t\t}\n\n\t\t&__wrapper {\n\t\t\tposition: fixed;\n\t\t\toverflow: auto;\n\n\t\t\t&--left,\n\t\t\t&--right {\n\t\t\t\ttop: 0;\n\t\t\t\tmax-width: 100vw;\n\t\t\t\theight: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\theight: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--left {\n\t\t\t\tleft: 0;\n\t\t\t}\n\n\t\t\t&--right {\n\t\t\t\tright: 0;\n\t\t\t}\n\n\t\t\t&--bottom,\n\t\t\t&--top {\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100vw;\n\t\t\t\tmax-height: 100vh;\n\n\t\t\t\t#{$root}__content {\n\t\t\t\t\twidth: 100%;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t&--bottom {\n\t\t\t\tbottom: 0;\n\t\t\t}\n\n\t\t\t&--top {\n\t\t\t\ttop: 0;\n\t\t\t}\n\t\t}\n\n\t\t&__content {\n\t\t\tposition: relative;\n\t\t}\n\t}\n\n\t.kol-drawer__dialog .kol-card__content {\n\t\toverflow-y: auto;\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { KolCardWcTag } from '../../core/component-names';\nimport type {\n\tAlignPropType,\n\tDrawerAPI,\n\tDrawerStates,\n\tHasCloserPropType,\n\tHeadingLevel,\n\tKoliBriModalEventCallbacks,\n\tLabelPropType,\n\tOpenPropType,\n} from '../../schema';\nimport { setState, validateAlign, validateHasCloser, validateLabel, validateOpen } from '../../schema';\nimport clsx from '../../utils/clsx';\nimport { nonce } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { handleCancelOverlay } from '../../utils/tooltip-open-tracking';\nimport { watchHeadingLevel } from '../heading/validation';\n\n/**\n * @slot - The Content of drawer.\n */\n@Component({\n\ttag: 'kol-drawer',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDrawer implements DrawerAPI {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLKolCardWcElement;\n\tprivate readonly cardHeadingId = nonce();\n\n\t@State() private isModal: boolean = true;\n\n\t/**\n\t * Opens the drawer. Pass true to open as a modal drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async show(modal: boolean = false): Promise<void> {\n\t\tif (this.dialogElement?.open) {\n\t\t\treturn;\n\t\t}\n\t\tthis.isModal = modal;\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: true,\n\t\t};\n\t\tif (modal) {\n\t\t\tthis.dialogElement?.showModal?.();\n\t\t} else {\n\t\t\tthis.dialogElement?.show?.();\n\t\t}\n\t}\n\n\t/**\n\t * Opens the drawer as a modal.\n\t */\n\t@Method()\n\tpublic showModal(): Promise<void> {\n\t\treturn this.show(true);\n\t}\n\n\t/**\n\t * Opens the drawer.\n\t * @deprecated Use show() or showModal() instead.\n\t */\n\t@Method()\n\tpublic open(): Promise<void> {\n\t\treturn this.show(false);\n\t}\n\n\t/**\n\t * Closes the drawer.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async close(): Promise<void> {\n\t\tthis.state = {\n\t\t\t...this.state,\n\t\t\t_open: false,\n\t\t};\n\t\tconst wrapper = this.dialogWrapperElement;\n\t\tif (!wrapper) {\n\t\t\treturn;\n\t\t}\n\t\tif (window.getComputedStyle(wrapper).animationName === 'none') {\n\t\t\tthis.dialogElement?.close?.();\n\t\t}\n\t}\n\n\tprivate readonly _cardOn = { onClose: () => void this.close() };\n\n\tprivate getWrapperRef = (el: HTMLKolCardWcElement | undefined) => (this.dialogWrapperElement = el as HTMLKolCardWcElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<KolCardWcTag\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {\n\t\t\t\t\t'kol-drawer__wrapper--open': this.state._open,\n\t\t\t\t\t'kol-drawer__wrapper--is-closing': this.state._open === false,\n\t\t\t\t})}\n\t\t\t\t_hasCloser={this.state._hasCloser}\n\t\t\t\t_headingId={this.cardHeadingId}\n\t\t\t\t_label={this.state._label}\n\t\t\t\t_level={this._level}\n\t\t\t\t_on={this._cardOn}\n\t\t\t>\n\t\t\t\t<div class=\"kol-drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => {\n\t\tthis.dialogElement = el as HTMLDialogElement;\n\t\tsetTimeout(() => {\n\t\t\tvoid this.openOrCloseBasedOnState(); // handle initial state as soon as element is ready\n\t\t});\n\t};\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-drawer\">\n\t\t\t\t<dialog\n\t\t\t\t\taria-labelledby={this.cardHeadingId}\n\t\t\t\t\taria-modal={this.isModal ? 'true' : 'false'}\n\t\t\t\t\tclass=\"kol-drawer__dialog\"\n\t\t\t\t\tonCancel={handleCancelOverlay}\n\t\t\t\t\tref={this.getRef}\n\t\t\t\t>\n\t\t\t\t\t{this.renderDialogContent()}\n\t\t\t\t</dialog>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t */\n\t@Prop() public _open?: OpenPropType;\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\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 which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t/**\n\t * Specifies the EventCallback function to be called when the drawer is closing.\n\t */\n\t@Prop() public _on?: KoliBriModalEventCallbacks;\n\n\t@State() public state: DrawerStates = {\n\t\t_label: '', // ⚠ required\n\t\t_open: false,\n\t\t_align: 'left',\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('_align')\n\tpublic validateAlign(value?: AlignPropType): void {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: OpenPropType) {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\n\t\t\tif (this.dialogElement) {\n\t\t\t\t// handle property changes but not the initial validateOpen call\n\t\t\t\tvoid this.openOrCloseBasedOnState();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate async openOrCloseBasedOnState() {\n\t\tif (this.state._open) {\n\t\t\tawait this.show(this.isModal);\n\t\t} else {\n\t\t\tawait this.close();\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') {\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\tprivate handleCloseDialog() {\n\t\tthis._on?.onClose?.();\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t}\n\n\tprivate readonly handleClose = () => {\n\t\tvoid (async () => {\n\t\t\tawait this.close();\n\t\t\tthis.handleCloseDialog();\n\t\t})();\n\t};\n\n\tprivate readonly handleAnimationEnd = (e: Event): void => {\n\t\tconst animationEvent = e as AnimationEvent;\n\t\tif (animationEvent.animationName.includes('slideOut')) {\n\t\t\tthis.dialogElement?.close?.();\n\t\t}\n\t};\n\n\tpublic componentDidLoad(): void {\n\t\tthis.dialogElement?.addEventListener('animationend', this.handleAnimationEnd);\n\t\tthis.dialogElement?.addEventListener('close', this.handleClose);\n\t}\n\n\tpublic disconnectedCallback(): void {\n\t\tthis.dialogElement?.removeEventListener('animationend', this.handleAnimationEnd);\n\t\tthis.dialogElement?.removeEventListener('close', this.handleClose);\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOpen(this._open);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as o,g as t}from"./index-Cr4ko_DT.js";import{d as i}from"./component-names-Dy77vq43.js";import{s as a}from"./common-BqV6Zb30.js";import{v as l}from"./align-D3Z54kEL.js";import{v as r}from"./has-closer-CfUBQHmY.js";import{v as s}from"./label-vxVEH2gH.js";import{v as c}from"./open-BMZVrISI.js";import{c as d}from"./clsx-COFh-Vc8.js";import{d as h,K as f}from"./events-DHTi_wtD.js";import{h as p}from"./tooltip-open-tracking-D3tCiiGP.js";const m='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777369141075"); /* IE9*/\n  src: url("kolicons.eot?t=1777369141075#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777369141075") format("woff2"), url("kolicons.woff?t=1777369141075") format("woff"), url("kolicons.ttf?t=1777369141075") format("truetype"), url("kolicons.svg?t=1777369141075#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    grid-template-areas: "header  close" "content content";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n  .kol-drawer__dialog .kol-card__content {\n    overflow-y: auto;\n  }\n}',b=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout(()=>{this.openOrCloseBasedOnState()})},this._hasCloser=!1,this.state={_label:"",_open:!1,_align:"left"}}async open(){var n;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(n=this.dialogElement)||void 0===n||n.showModal()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e(i,{ref:this.getWrapperRef,class:d("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),_label:this.state._label,_hasCloser:this.state._hasCloser,_on:{onClose:()=>{this.close()}}},e("div",{class:"kol-drawer__content"},e("slot",null)))}render(){return e(o,{key:"ecfa984c8b857de6070a7a812880d421842098b3",class:"kol-drawer"},e("dialog",{key:"7c71d619787a68eadc7cd897013b593d7c6a43a3","aria-label":this.state._label,class:"kol-drawer__dialog",onCancel:p,ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){l(this,n)}validateHasCloser(n){r(this,n)}validateOpen(n){"boolean"==typeof n&&(c(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}async openOrCloseBasedOnState(){this.state._open?await this.open():await this.close()}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),a(this,"_on",e)}}handleCloseDialog(){var n,e,o;null===(n=this.dialogElement)||void 0===n||n.close(),null===(o=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===o||o.call(e),this.host&&h(this.host,f.close)}handleClose(){(async()=>{await this.close(),this.handleCloseDialog()})()}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}componentWillLoad(){this.validateLabel(this._label),this.validateOpen(this._open),this.validateAlign(this._align),this.validateHasCloser(this._hasCloser),this.validateOn(this._on)}get host(){return t(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_hasCloser:["validateHasCloser"],_open:["validateOpen"],_on:["validateOn"]}}};b.style={default:m};export{b as kol_drawer};
+import{r as n,h as e,H as o,g as t}from"./index-CwE7Ckxk.js";import{d as i}from"./component-names-Dy77vq43.js";import{s as l}from"./common-BqV6Zb30.js";import{v as r}from"./align-D3Z54kEL.js";import{v as a}from"./has-closer-CfUBQHmY.js";import{v as s}from"./label-vxVEH2gH.js";import{v as d}from"./open-BMZVrISI.js";import{c}from"./clsx-COFh-Vc8.js";import{n as h}from"./dev.utils-BA_rOknz.js";import{d as f,K as p}from"./events-DHTi_wtD.js";import{h as m}from"./tooltip-open-tracking-D3tCiiGP.js";import{w as k}from"./validation-CH4ZrnXs.js";import"./level-C9aFQZkd.js";import"./normalizers-C14RETgU.js";import"./_Uint8Array-kJHDjtoP.js";import"./isArray-CcrBs4JM.js";const b='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: white;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1778148144850"); /* IE9*/\n  src: url("kolicons.eot?t=1778148144850#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1778148144850") format("woff2"), url("kolicons.woff?t=1778148144850") format("woff"), url("kolicons.ttf?t=1778148144850") format("truetype"), url("kolicons.svg?t=1778148144850#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-card :host {\n    display: inline-block;\n  }\n  .kol-card .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-card .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-card .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    display: grid;\n    height: 100%;\n    overflow: visible;\n    grid-template-areas: "header  close" "content content";\n    grid-template-columns: 1fr min-content;\n    grid-template-rows: min-content 1fr;\n  }\n  .kol-card__header {\n    align-self: start;\n    grid-area: header;\n  }\n  .kol-card__content {\n    align-self: stretch;\n    grid-area: content;\n  }\n  .kol-card__close-button {\n    grid-area: close;\n  }\n  .kol-drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .kol-drawer__wrapper {\n    position: fixed;\n    overflow: auto;\n  }\n  .kol-drawer__wrapper--left, .kol-drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .kol-drawer__wrapper--left .kol-drawer__content, .kol-drawer__wrapper--right .kol-drawer__content {\n    height: 100%;\n  }\n  .kol-drawer__wrapper--left {\n    left: 0;\n  }\n  .kol-drawer__wrapper--right {\n    right: 0;\n  }\n  .kol-drawer__wrapper--bottom, .kol-drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .kol-drawer__wrapper--bottom .kol-drawer__content, .kol-drawer__wrapper--top .kol-drawer__content {\n    width: 100%;\n  }\n  .kol-drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .kol-drawer__wrapper--top {\n    top: 0;\n  }\n  .kol-drawer__content {\n    position: relative;\n  }\n  .kol-drawer__dialog .kol-card__content {\n    overflow-y: auto;\n  }\n}',u=class{constructor(e){n(this,e),this.cardHeadingId=h(),this.isModal=!0,this._cardOn={onClose:()=>{this.close()}},this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>{this.dialogElement=n,setTimeout(()=>{this.openOrCloseBasedOnState()})},this._hasCloser=!1,this._level=0,this.state={_label:"",_open:!1,_align:"left"},this.handleClose=()=>{(async()=>{await this.close(),this.handleCloseDialog()})()},this.handleAnimationEnd=n=>{var e,o;n.animationName.includes("slideOut")&&(null===(o=null===(e=this.dialogElement)||void 0===e?void 0:e.close)||void 0===o||o.call(e))}}async show(n=!1){var e,o,t,i,l;(null===(e=this.dialogElement)||void 0===e?void 0:e.open)||(this.isModal=n,this.state=Object.assign(Object.assign({},this.state),{_open:!0}),n?null===(t=null===(o=this.dialogElement)||void 0===o?void 0:o.showModal)||void 0===t||t.call(o):null===(l=null===(i=this.dialogElement)||void 0===i?void 0:i.show)||void 0===l||l.call(i))}showModal(){return this.show(!0)}open(){return this.show(!1)}async close(){var n,e;this.state=Object.assign(Object.assign({},this.state),{_open:!1});const o=this.dialogWrapperElement;o&&"none"===window.getComputedStyle(o).animationName&&(null===(e=null===(n=this.dialogElement)||void 0===n?void 0:n.close)||void 0===e||e.call(n))}renderDialogContent(){const n=this.state._align;return e(i,{ref:this.getWrapperRef,class:c("kol-drawer__wrapper",`kol-drawer__wrapper--${n}`,{"kol-drawer__wrapper--open":this.state._open,"kol-drawer__wrapper--is-closing":!1===this.state._open}),_hasCloser:this.state._hasCloser,_headingId:this.cardHeadingId,_label:this.state._label,_level:this._level,_on:this._cardOn},e("div",{class:"kol-drawer__content"},e("slot",null)))}render(){return e(o,{key:"9b72c62ef475018f0f13e4df3ff1caf940463e53",class:"kol-drawer"},e("dialog",{key:"0a42c935119e2ed8cb95c675ec425b1717a8679d","aria-labelledby":this.cardHeadingId,"aria-modal":this.isModal?"true":"false",class:"kol-drawer__dialog",onCancel:m,ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){r(this,n)}validateHasCloser(n){a(this,n)}validateLevel(n){k(this,n)}validateOpen(n){"boolean"==typeof n&&(d(this,n),this.dialogElement&&this.openOrCloseBasedOnState())}async openOrCloseBasedOnState(){this.state._open?await this.show(this.isModal):await this.close()}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),l(this,"_on",e)}}handleCloseDialog(){var n,e;null===(e=null===(n=this._on)||void 0===n?void 0:n.onClose)||void 0===e||e.call(n),this.host&&f(this.host,p.close)}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose)}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose)}componentWillLoad(){this.validateAlign(this._align),this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateOpen(this._open),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return t(this)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_hasCloser:["validateHasCloser"],_level:["validateLevel"],_open:["validateOpen"],_on:["validateOn"]}}};u.style={default:b};export{u as kol_drawer};

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

@@ -1 +1 @@
-{"version":3,"names":["registerInstance","h","Host","getElement","KolCardWcTag","setState","validateAlign","validateHasCloser","validateLabel","validateOpen","clsx","dispatchDomEvent","KolEvent","handleCancelOverlay","defaultStyleCss","KolDrawer","constructor","hostRef","this","getWrapperRef","el","dialogWrapperElement","getRef","dialogElement","setTimeout","openOrCloseBasedOnState","_hasCloser","state","_label","_open","_align","open","_a","Object","assign","showModal","close","wrapper","computedStyle","window","getComputedStyle","animationName","handleCloseDialog","renderDialogContent","align","ref","class","_on","onClose","render","key","onCancel","value","required","validateOn","callbacks","_b","_c","call","host","handleClose","handleAnimationEnd","e","animationEvent","includes","componentDidLoad","addEventListener","bind","disconnectedCallback","removeEventListener","componentWillLoad","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["registerInstance","h","Host","getElement","KolCardWcTag","setState","validateAlign","validateHasCloser","validateLabel","validateOpen","clsx","nonce","dispatchDomEvent","KolEvent","handleCancelOverlay","watchHeadingLevel","defaultStyleCss","KolDrawer","constructor","hostRef","this","cardHeadingId","isModal","_cardOn","onClose","close","getWrapperRef","el","dialogWrapperElement","getRef","dialogElement","setTimeout","openOrCloseBasedOnState","_hasCloser","_level","state","_label","_open","_align","handleClose","handleCloseDialog","handleAnimationEnd","e","_a","_b","animationEvent","animationName","includes","call","show","modal","_c","_d","_e","open","Object","assign","showModal","wrapper","window","getComputedStyle","renderDialogContent","align","ref","class","_headingId","_on","render","key","onCancel","value","required","validateLevel","validateOn","callbacks","host","componentDidLoad","addEventListener","disconnectedCallback","removeEventListener","componentWillLoad","watchers","style","default"],"sources":["0"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as o,g as t}from"./index-Cr4ko_DT.js";import{b as i,e as l,g as r}from"./common-BqV6Zb30.js";import{t as a}from"./i18n-BVaUp6qp.js";import{c as s}from"./component-names-Dy77vq43.js";import{K as c}from"./Alert-C2H3wE4_.js";import{d,K as h}from"./events-DHTi_wtD.js";import"./i18n-B2d_exHc.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./bem-registry-Bux_TllX.js";import"./component-CAUcMKfc.js";import"./Heading-BUjPChHT.js";const f=(n,e)=>{i(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),e)},m='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1777369141075"); /* IE9*/\n  src: url("kolicons.eot?t=1777369141075#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1777369141075") format("woff2"), url("kolicons.woff?t=1777369141075") format("woff"), url("kolicons.ttf?t=1777369141075") format("truetype"), url("kolicons.svg?t=1777369141075#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}',p=class{constructor(e){n(this,e),this.translateErrorListMessage=a("kol-error-list-message"),this.translateErrorList=a("kol-error-list"),this.translateFormDescription=a("kol-form-description"),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&d(this.host,h.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&d(this.host,h.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return e(c,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},e("nav",{"aria-label":this.translateErrorList},e("ul",null,null==n?void 0:n.map((n,t)=>e("li",{key:t},e(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===t?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return e("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,e("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return e(o,{key:"d002ea1e6be732b787b8e9823fb7812dd43abbc7"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):r(this,"_requiredText",n)}validateErrorList(n){f(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return t(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:m};export{p as kol_form};
+import{r as n,h as e,H as t,g as o}from"./index-CwE7Ckxk.js";import{b as i,e as l,g as r}from"./common-BqV6Zb30.js";import{t as a}from"./i18n-BVaUp6qp.js";import{c as s}from"./component-names-Dy77vq43.js";import{K as c}from"./Alert-plRuFotW.js";import{d,K as h}from"./events-DHTi_wtD.js";import"./i18n-B2d_exHc.js";import"./tslib.es6-CxX45GIN.js";import"./clsx-COFh-Vc8.js";import"./bem-registry-Bux_TllX.js";import"./component-_7fsHLXz.js";import"./Heading-DyUaqHzi.js";const f=(n,e)=>{i(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),e)},m='@charset "UTF-8";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\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     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: 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 text color from his parent element.\n     */\n    color: inherit;\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     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\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    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\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    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 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  .badge-text-hint {\n    color: black;\n    background-color: white;\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    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n  .hastooltip {\n    z-index: 900 !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@font-face {\n  font-family: "kolicons";\n  src: url("kolicons.eot?t=1778148144850"); /* IE9*/\n  src: url("kolicons.eot?t=1778148144850#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1778148144850") format("woff2"), url("kolicons.woff?t=1778148144850") format("woff"), url("kolicons.ttf?t=1778148144850") format("truetype"), url("kolicons.svg?t=1778148144850#kolicons") format("svg"); /* iOS 4.1- */\n}\n@layer kol-component {\n  [class^=kolicon-], [class*=" kolicon-"] {\n    font-family: "kolicons";\n    font-style: normal;\n    font-weight: 400;\n    line-height: 1em;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  .kolicon-alert-error::before {\n    content: "\\ea01";\n  }\n  .kolicon-alert-info::before {\n    content: "\\ea02";\n  }\n  .kolicon-alert-success::before {\n    content: "\\ea03";\n  }\n  .kolicon-alert-warning::before {\n    content: "\\ea04";\n  }\n  .kolicon-check::before {\n    content: "\\ea05";\n  }\n  .kolicon-chevron-double-left::before {\n    content: "\\ea06";\n  }\n  .kolicon-chevron-double-right::before {\n    content: "\\ea07";\n  }\n  .kolicon-chevron-down::before {\n    content: "\\ea08";\n  }\n  .kolicon-chevron-left::before {\n    content: "\\ea09";\n  }\n  .kolicon-chevron-right::before {\n    content: "\\ea0a";\n  }\n  .kolicon-chevron-up::before {\n    content: "\\ea0b";\n  }\n  .kolicon-cogwheel::before {\n    content: "\\ea0c";\n  }\n  .kolicon-cross::before {\n    content: "\\ea0d";\n  }\n  .kolicon-eye-closed::before {\n    content: "\\ea0e";\n  }\n  .kolicon-eye::before {\n    content: "\\ea0f";\n  }\n  .kolicon-house::before {\n    content: "\\ea10";\n  }\n  .kolicon-kolibri::before {\n    content: "\\ea11";\n  }\n  .kolicon-link-external::before {\n    content: "\\ea12";\n  }\n  .kolicon-link::before {\n    content: "\\ea13";\n  }\n  .kolicon-minus::before {\n    content: "\\ea14";\n  }\n  .kolicon-plus::before {\n    content: "\\ea15";\n  }\n  .kolicon-settings::before {\n    content: "\\ea16";\n  }\n  .kolicon-sort-asc::before {\n    content: "\\ea17";\n  }\n  .kolicon-sort-desc::before {\n    content: "\\ea18";\n  }\n  .kolicon-sort-neutral::before {\n    content: "\\ea19";\n  }\n  .kolicon-up::before {\n    content: "\\ea1a";\n  }\n  .kolicon-version::before {\n    content: "\\ea1b";\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: black;\n    background-color: white;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: black;\n    background-color: white;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-link {\n    display: inline-flex;\n    max-width: fit-content;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  .kol-link--standalone {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: stretch;\n  }\n  .kol-link--standalone .kol-link__text {\n    display: inline-flex;\n    flex: 1 1 100%;\n    place-items: center;\n  }\n  .kol-link .kol-span__label {\n    text-decoration-line: underline;\n  }\n  .kol-link:focus:not([aria-disabled], [disabled]) .kol-span__label, .kol-link:hover:not([aria-disabled], [disabled]) .kol-span__label {\n    text-decoration-thickness: 0.2em;\n  }\n  .kol-link__icon {\n    display: inline-flex;\n  }\n  .kol-alert .kol-icon {\n    color: inherit;\n    display: inline-block;\n    font-size: inherit;\n    font-weight: inherit;\n    line-height: inherit;\n  }\n  .kol-alert :host {\n    display: inline-block;\n  }\n  .kol-alert .kol-button {\n    display: flex;\n    min-height: var(--a11y-min-size);\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-alert .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-alert .kol-button__text {\n    flex: 1 0 100%;\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n}',p=class{constructor(e){n(this,e),this.translateErrorListMessage=a("kol-error-list-message"),this.translateErrorList=a("kol-error-list"),this.translateFormDescription=a("kol-form-description"),this.onSubmit=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onSubmit)&&(null===(t=this.state._on)||void 0===t||t.onSubmit(n)),this.host&&d(this.host,h.submit)},this.onReset=n=>{var e,t;n.preventDefault(),"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e.onReset)&&(null===(t=this.state._on)||void 0===t||t.onReset(n)),this.host&&d(this.host,h.reset)},this.handleLinkClick=n=>{const e=document.querySelector(n);e&&"function"==typeof e.focus&&(e.scrollIntoView({behavior:"smooth"}),e.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._requiredText=!0,this.state={}}renderErrorList(n){return e(c,{class:"kol-form__alert",ref:this.setBlockElement,type:"error",variant:"card",label:this.translateErrorListMessage},e("nav",{"aria-label":this.translateErrorList},e("ul",null,null==n?void 0:n.map((n,t)=>e("li",{key:t},e(s,{class:"kol-form__link",_href:"",_label:n.message,_on:{onClick:"string"==typeof n.selector?()=>this.handleLinkClick(String(n.selector)):n.selector},ref:0===t?this.setFirstLinkElement:void 0}))))))}renderFormElement(){return e("form",{class:"kol-form",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.translateFormDescription)):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e("div",{class:"kol-form__mandatory-fields-hint"},this.state._requiredText)):null,e("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return e(t,{key:"d002ea1e6be732b787b8e9823fb7812dd43abbc7"},n&&this.renderErrorList(this._errorList),this.renderFormElement())}scrollToErrorList(){var n;null===(n=this.errorListBlock)||void 0===n||n.scrollIntoView({behavior:"smooth",block:"start"}),setTimeout(()=>{var n,e;null===(e=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===e||e.focus()},250)}async focusErrorList(){return this.scrollToErrorList(),Promise.resolve()}validateOn(n){"object"==typeof n&&null!==n&&(this.state=Object.assign(Object.assign({},this.state),{_on:n}))}validateRequiredText(n){"boolean"==typeof n?l(this,"_requiredText",n):r(this,"_requiredText",n)}validateErrorList(n){f(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}get host(){return o(this)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};p.style={default:m};export{p as kol_form};

package/dist/kolibri/kol-heading.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-heading.entry.esm.js","sources":["src/internal/props/label-with-expert-slot.ts","src/internal/props/secondary-headline.ts","src/internal/functional-components/heading/component.tsx","src/internal/functional-components/heading/api.tsx","src/internal/functional-components/heading/controller.ts","src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type LabelWithExpertSlotProp = SimpleProp<'label', string>;\nexport const labelWithExpertSlotProp = createPropDefinition<LabelWithExpertSlotProp>('label', '', normalizeString);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type SecondaryHeadlineProp = SimpleProp<'secondaryHeadline', string>;\nexport const secondaryHeadlineProp = createPropDefinition<SecondaryHeadlineProp>('secondaryHeadline', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport clsx from '../../../utils/clsx';\nimport type { HeadingLevel } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { HeadingApi } from './api';\n\ntype HeadlineTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong';\n\nfunction getHeadlineTag(level: HeadingLevel | number): HeadlineTag {\n\treturn level >= 1 && level <= 6 ? (`h${level}` as HeadlineTag) : 'strong';\n}\n\nexport const HeadingFC: FC<FunctionalComponentProps<HeadingApi>> = (props) => {\n\tconst { label, level, secondaryHeadline } = props;\n\tconst HeadlineTag = getHeadlineTag(level);\n\n\tif (!secondaryHeadline) {\n\t\treturn (\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--single')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t);\n\t}\n\n\treturn (\n\t\t<hgroup class=\"kol-heading-group\">\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--group', 'kol-headline--primary')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t\t<p class=\"kol-headline kol-headline--group kol-headline--secondary\">{secondaryHeadline}</p>\n\t\t</hgroup>\n\t);\n};\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const headingPropsConfig = {\n\toptional: [levelProp, secondaryHeadlineProp],\n\trequired: [labelWithExpertSlotProp],\n} as const satisfies PropsConfigShape;\n\nexport type HeadingApi = ApiFromConfig<typeof headingPropsConfig>;\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { HeadingApi } from './api';\nimport { headingPropsConfig } from './api';\n\nexport class HeadingController extends BaseController<HeadingApi> implements ControllerInterface<HeadingApi> {\n\tpublic constructor(stateAccess: StateAccess<HeadingApi>) {\n\t\tsuper(stateAccess, headingPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<HeadingApi>): void {\n\t\tconst { label, level, secondaryHeadline } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchLevel(level);\n\t\tthis.watchSecondaryHeadline(secondaryHeadline);\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelWithExpertSlotProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchLevel(value?: number): void {\n\t\tlevelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('level', v);\n\t\t});\n\t}\n\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tsecondaryHeadlineProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('secondaryHeadline', v);\n\t\t});\n\t}\n}\n","@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-headline {\n\t\t&--secondary {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\n\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { HeadingApi } from '../../internal/functional-components/heading/api';\nimport { HeadingFC } from '../../internal/functional-components/heading/component';\nimport { HeadingController } from '../../internal/functional-components/heading/controller';\nimport type { HeadingLevel, LabelWithExpertSlotPropType } from '../../schema';\n\n/**\n *\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements WebComponentInterface<HeadingApi> {\n\tprivate readonly ctrl = new HeadingController(BaseWebComponent.stateLess);\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t@Watch('_level')\n\tpublic watchLevel(value?: HeadingLevel): void {\n\t\tthis.ctrl.watchLevel(value);\n\t}\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t@Watch('_secondaryHeadline')\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tthis.ctrl.watchSecondaryHeadline(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tlevel: this._level,\n\t\t\tsecondaryHeadline: this._secondaryHeadline,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<HeadingFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tlevel={this.ctrl.getRenderProp('level')}\n\t\t\t\t\tsecondaryHeadline={this.ctrl.getRenderProp('secondaryHeadline')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-heading.entry.esm.js","sources":["src/internal/props/label-with-expert-slot.ts","src/internal/props/secondary-headline.ts","src/internal/functional-components/heading/component.tsx","src/internal/functional-components/heading/api.tsx","src/internal/functional-components/heading/controller.ts","src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/component.tsx"],"sourcesContent":["import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type LabelWithExpertSlotProp = SimpleProp<'label', string>;\nexport const labelWithExpertSlotProp = createPropDefinition<LabelWithExpertSlotProp>('label', '', normalizeString);\n","import type { SimpleProp } from './helpers/factory';\nimport { createPropDefinition } from './helpers/factory';\nimport { normalizeString } from './helpers/normalizers';\n\nexport type SecondaryHeadlineProp = SimpleProp<'secondaryHeadline', string>;\nexport const secondaryHeadlineProp = createPropDefinition<SecondaryHeadlineProp>('secondaryHeadline', '', normalizeString);\n","import type { FunctionalComponent as FC } from '@stencil/core';\nimport { h } from '@stencil/core';\n\nimport clsx from '../../../utils/clsx';\nimport type { HeadingLevel } from '../../props';\nimport type { FunctionalComponentProps } from '../generic-types';\nimport type { HeadingApi } from './api';\n\ntype HeadlineTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong';\n\nfunction getHeadlineTag(level: HeadingLevel | number): HeadlineTag {\n\treturn level >= 1 && level <= 6 ? (`h${level}` as HeadlineTag) : 'strong';\n}\n\nexport const HeadingFC: FC<FunctionalComponentProps<HeadingApi>> = (props) => {\n\tconst { label, level, secondaryHeadline } = props;\n\tconst HeadlineTag = getHeadlineTag(level);\n\n\tif (!secondaryHeadline) {\n\t\treturn (\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--single')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t);\n\t}\n\n\treturn (\n\t\t<hgroup class=\"kol-heading-group\">\n\t\t\t<HeadlineTag class={clsx('kol-headline', `kol-headline--${HeadlineTag}`, 'kol-headline--group', 'kol-headline--primary')}>\n\t\t\t\t{label}\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</HeadlineTag>\n\t\t\t<p class=\"kol-headline kol-headline--group kol-headline--secondary\">{secondaryHeadline}</p>\n\t\t</hgroup>\n\t);\n};\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport type { ApiFromConfig, PropsConfigShape } from '../generic-types';\n\nexport const headingPropsConfig = {\n\toptional: [levelProp, secondaryHeadlineProp],\n\trequired: [labelWithExpertSlotProp],\n} as const satisfies PropsConfigShape;\n\nexport type HeadingApi = ApiFromConfig<typeof headingPropsConfig>;\n","import { labelWithExpertSlotProp, levelProp, secondaryHeadlineProp } from '../../props';\nimport { BaseController } from '../base-controller';\nimport type { ControllerInterface, ResolvedInputProps, StateAccess } from '../generic-types';\nimport type { HeadingApi } from './api';\nimport { headingPropsConfig } from './api';\n\nexport class HeadingController extends BaseController<HeadingApi> implements ControllerInterface<HeadingApi> {\n\tpublic constructor(stateAccess: StateAccess<HeadingApi>) {\n\t\tsuper(stateAccess, headingPropsConfig);\n\t}\n\n\tpublic componentWillLoad(props: ResolvedInputProps<HeadingApi>): void {\n\t\tconst { label, level, secondaryHeadline } = props;\n\t\tthis.watchLabel(label);\n\t\tthis.watchLevel(level);\n\t\tthis.watchSecondaryHeadline(secondaryHeadline);\n\t}\n\n\tpublic watchLabel(value?: string): void {\n\t\tlabelWithExpertSlotProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('label', v);\n\t\t});\n\t}\n\n\tpublic watchLevel(value?: number): void {\n\t\tlevelProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('level', v);\n\t\t});\n\t}\n\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tsecondaryHeadlineProp.apply(value, (v) => {\n\t\t\tthis.setRenderProp('secondaryHeadline', v);\n\t\t});\n\t}\n}\n","@use '../@shared/global' as *;\n\n@layer kol-component {\n\t.kol-headline {\n\t\t&--secondary {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Prop, Watch } from '@stencil/core';\n\nimport { BaseWebComponent } from '../../internal/functional-components/base-web-component';\nimport type { WebComponentInterface } from '../../internal/functional-components/generic-types';\nimport type { HeadingApi } from '../../internal/functional-components/heading/api';\nimport { HeadingFC } from '../../internal/functional-components/heading/component';\nimport { HeadingController } from '../../internal/functional-components/heading/controller';\nimport type { HeadingLevel, LabelWithExpertSlotPropType } from '../../schema';\n\n/**\n *\n * @slot - Inhalt der Überschrift.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements WebComponentInterface<HeadingApi> {\n\tprivate readonly ctrl = new HeadingController(BaseWebComponent.stateLess);\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t@Watch('_label')\n\tpublic watchLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.ctrl.watchLabel(value);\n\t}\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t@Watch('_level')\n\tpublic watchLevel(value?: HeadingLevel): void {\n\t\tthis.ctrl.watchLevel(value);\n\t}\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t@Watch('_secondaryHeadline')\n\tpublic watchSecondaryHeadline(value?: string): void {\n\t\tthis.ctrl.watchSecondaryHeadline(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.ctrl.componentWillLoad({\n\t\t\tlabel: this._label,\n\t\t\tlevel: this._level,\n\t\t\tsecondaryHeadline: this._secondaryHeadline,\n\t\t});\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t<HeadingFC\n\t\t\t\t\tlabel={this.ctrl.getRenderProp('label')}\n\t\t\t\t\tlevel={this.ctrl.getRenderProp('level')}\n\t\t\t\t\tsecondaryHeadline={this.ctrl.getRenderProp('secondaryHeadline')}\n\t\t\t\t/>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":"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"}