@public-ui/components 2.2.15-rc.1 → 2.2.16-rc.0

package/dist/components/kol-details.js.map

@@ -1 +1 @@
-{"file":"kol-details.js","mappings":"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","names":["KolDetails"],"sources":["src/schema/props/details-callbacks.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Events } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\nimport { isObject } from '../validators';\n\n/* types */\nexport type DetailsCallbacksPropType<T> = {\n\t[Events.onToggle]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for detail events.\n */\nexport type PropDetailsCallbacks<T> = {\n\ton: DetailsCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateDetailsCallbacks = (component: Generic.Element.Component, value?: DetailsCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => isObject(value), new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);\n};\n","@use '../style' as *;\n@use '../host-display-block' as *;\n@use '../../functional-components/Collapsible/collapsible' as *;\n\n@layer kol-component {\n\t.details {\n\t\t&__heading-button {\n\t\t\tdisplay: flex;\n\n\t\t\tbutton {\n\t\t\t\tmin-height: auto;\n\t\t\t}\n\n\t\t\tbutton .kol-span-wc .span-label {\n\t\t\t\tborder-bottom-color: grey;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t}\n\t\t}\n\n\t\t.open &__heading-button {\n\t\t\t.kol-icon::part(icon) {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop, State, Watch, type JSX } from '@stencil/core';\nimport type { DetailsCallbacksPropType, DetailsAPI, DetailsStates, DisabledPropType, FocusableElement, HeadingLevel, LabelPropType } from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements DetailsAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly nonce = nonce();\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t/**\n\t * Programmatically focuses the collapsible button.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\n\t\tconst rootClass = 'details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.nonce,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.catchRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'codicon codicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<Host class=\"kol-details\">\n\t\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolCollapsibleFc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\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(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"version":3}
+{"file":"kol-details.js","mappings":"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","names":["KolDetails"],"sources":["src/schema/props/details-callbacks.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { Events } from '../enums';\nimport type { EventValueOrEventCallback } from '../types/callbacks';\nimport { watchValidator } from '../utils';\nimport { isObject } from '../validators';\n\n/* types */\nexport type DetailsCallbacksPropType<T> = {\n\t[Events.onToggle]?: EventValueOrEventCallback<MouseEvent, T>;\n};\n\n/**\n * Defines the callback functions for detail events.\n */\nexport type PropDetailsCallbacks<T> = {\n\ton: DetailsCallbacksPropType<T>;\n};\n\n/* validator */\nexport const validateDetailsCallbacks = (component: Generic.Element.Component, value?: DetailsCallbacksPropType<boolean>): void => {\n\twatchValidator(component, `_on`, (value) => isObject(value), new Set(['DetailsCallbacksPropType {Events.onToggle}']), value);\n};\n","@use '../style' as *;\n@use '../host-display-block' as *;\n@use '../../functional-components/Collapsible/collapsible' as *;\n\n@layer kol-component {\n\t.details {\n\t\t&__heading-button {\n\t\t\tdisplay: flex;\n\n\t\t\tbutton {\n\t\t\t\tmin-height: auto;\n\t\t\t}\n\n\t\t\tbutton .kol-span-wc .span-label {\n\t\t\t\tborder-bottom-color: grey;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t}\n\t\t}\n\n\t\t.open &__heading-button {\n\t\t\t.kol-icon::part(icon) {\n\t\t\t\ttransform: rotate(90deg);\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, Element, h, Host, Method, Prop, State, Watch, type JSX } from '@stencil/core';\nimport type { DetailsCallbacksPropType, DetailsAPI, DetailsStates, DisabledPropType, FocusableElement, HeadingLevel, LabelPropType } from '../../schema';\nimport { validateDetailsCallbacks, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport KolCollapsibleFc, { type CollapsibleProps } from '../../functional-components/Collapsible';\nimport { nonce } from '../../utils/dev.utils';\nimport { watchHeadingLevel } from '../heading/validation';\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\n\n/**\n * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.\n */\n@Component({\n\ttag: 'kol-details',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolDetails implements DetailsAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\n\tprivate readonly nonce = nonce();\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t/**\n\t * Programmatically focuses the collapsible button.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleOnClick = (event: MouseEvent) => {\n\t\tthis._open = !this._open;\n\n\t\t/**\n\t\t * Der Timeout wird benötigt, damit das Event\n\t\t * vom Button- auf das Accordion-Event wechselt.\n\t\t * So ist es dem Anwendenden möglich das _open-\n\t\t * Attribute abzufragen.\n\t\t */\n\n\t\tclearTimeout(this.toggleTimeout);\n\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\tthis.state._on?.onToggle?.(event, Boolean(this._open));\n\t\t}, 25);\n\t};\n\n\tpublic render(): JSX.Element {\n\t\tconst { _open, _label, _disabled, _level } = this.state;\n\n\t\tconst rootClass = 'details';\n\n\t\tconst props: CollapsibleProps = {\n\t\t\tid: this.nonce,\n\t\t\tlabel: _label,\n\t\t\topen: _open,\n\t\t\tdisabled: _disabled,\n\t\t\tlevel: _level,\n\t\t\tonClick: this.handleOnClick,\n\t\t\tclass: rootClass,\n\t\t\tHeadingProps: { class: `${rootClass}__heading` },\n\t\t\tHeadingButtonProps: {\n\t\t\t\tref: this.catchRef,\n\t\t\t\tclass: `${rootClass}__heading-button`,\n\t\t\t\t_icons: 'codicon codicon-chevron-right',\n\t\t\t},\n\t\t\tContentProps: {\n\t\t\t\tclass: `${rootClass}__content indented-text`,\n\t\t\t\twrapperClass: `${rootClass}__wrapper`,\n\t\t\t\tanimationClass: `${rootClass}__wrapper-animation`,\n\t\t\t},\n\t\t};\n\n\t\treturn (\n\t\t\t<Host class=\"kol-details\">\n\t\t\t\t<KolCollapsibleFc {...props}>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolCollapsibleFc>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\n\t@Prop() public _disabled?: 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 * Defines the callback functions for details.\n\t */\n\t@Prop() public _on?: DetailsCallbacksPropType<boolean>;\n\n\t/**\n\t * Opens/expands the element when truthy, closes/collapses when falsy.\n\t * @TODO: Change type back to `OpenPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _open?: boolean = false;\n\n\t@State() public state: DetailsStates = {\n\t\t_label: '', // ⚠ required\n\t\t_level: 0,\n\t\t_on: {},\n\t};\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tvalidateDisabled(this, value);\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(on?: DetailsCallbacksPropType<boolean>) {\n\t\tvalidateDetailsCallbacks(this, on);\n\t}\n\n\t@Watch('_open')\n\tpublic validateOpen(value?: boolean): void {\n\t\tvalidateOpen(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateDisabled(this._disabled);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n}\n"],"version":3}

package/dist/components/kol-drawer.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{l as setState}from"./index2.js";import{a as validateAlign}from"./align.js";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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: absolute;\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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    background-color: white;\n    position: fixed;\n    overflow: auto;\n  }\n  .drawer__wrapper--left, .drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .drawer__wrapper--left .drawer__content, .drawer__wrapper--right .drawer__content {\n    height: 100%;\n  }\n  .drawer__wrapper--left {\n    left: 0;\n  }\n  .drawer__wrapper--right {\n    right: 0;\n  }\n  .drawer__wrapper--bottom, .drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .drawer__wrapper--bottom .drawer__content, .drawer__wrapper--top .drawer__content {\n    width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .drawer__wrapper--top {\n    top: 0;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolDrawerDefaultStyle0=defaultStyleCss,KolDrawer$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.getWrapperRef=e=>this.dialogWrapperElement=e,this.getRef=e=>this.dialogElement=e,this._open=void 0,this._align=void 0,this._label=void 0,this._modal=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}async open(){var e;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(e=this.dialogElement)||void 0===e||e.showModal()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const e=this.dialogWrapperElement;if(!e)return;"none"===window.getComputedStyle(e).animationName&&this.handleCloseDialog()}renderDialogContent(){const e=this.state._align;return h("div",{ref:this.getWrapperRef,class:`drawer__wrapper drawer__wrapper--${e} ${this.state._open?"drawer__wrapper--open":"is-closing"}`,"aria-label":this.state._label},h("div",{class:"drawer__content"},h("slot",null)))}render(){return h(Host,{key:"91b5f45b2ab196fa2149af9354744051bd1b35f1",class:"kol-drawer drawer",ref:e=>this.hostElement=e},h("dialog",{key:"d06fea157a405d95dbbfb7a8984628c49adf9af9",class:"drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(e){validateLabel(this,e,{required:!0})}validateAlign(e){validateAlign(this,e)}async validateOpen(e){"boolean"==typeof e&&(validateOpen(this,e),e?await this.open():await this.close())}validateOn(e){if("object"==typeof e&&null!==e){const n={};"function"==typeof e.onClose&&(n.onClose=e.onClose),setState(this,"_on",n)}}handleCloseDialog(){var e,n,t;null===(e=this.dialogElement)||void 0===e||e.close(),null===(t=null===(n=this._on)||void 0===n?void 0:n.onClose)||void 0===t||t.call(n)}handleClose(){}handleAnimationEnd(e){e.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var e,n;null===(e=this.dialogElement)||void 0===e||e.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(n=this.dialogElement)||void 0===n||n.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var e,n;null===(e=this.dialogElement)||void 0===e||e.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(n=this.dialogElement)||void 0===n||n.removeEventListener("close",this.handleClose.bind(this))}async componentWillLoad(){this.validateLabel(this._label),await this.validateOpen(this._open),this.validateAlign(this._align),this.validateOn(this._on)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}}static get style(){return{default:KolDrawerDefaultStyle0}}},[33,"kol-drawer",{_open:[4],_align:[1],_label:[1],_modal:[4],_on:[16],state:[32],open:[64],close:[64]},void 0,{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-drawer"].forEach(e=>{if("kol-drawer"===e)customElements.get(e)||customElements.define(e,KolDrawer$1)})}const KolDrawer=KolDrawer$1,defineCustomElement=defineCustomElement$1;export{KolDrawer,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{l as setState}from"./index2.js";import{a as validateAlign}from"./align.js";import{v as validateLabel}from"./label.js";import{v as validateOpen}from"./open.js";const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    background-color: white;\n    position: fixed;\n    overflow: auto;\n  }\n  .drawer__wrapper--left, .drawer__wrapper--right {\n    top: 0;\n    max-width: 100vw;\n    height: 100vh;\n  }\n  .drawer__wrapper--left .drawer__content, .drawer__wrapper--right .drawer__content {\n    height: 100%;\n  }\n  .drawer__wrapper--left {\n    left: 0;\n  }\n  .drawer__wrapper--right {\n    right: 0;\n  }\n  .drawer__wrapper--bottom, .drawer__wrapper--top {\n    left: 0;\n    width: 100vw;\n    max-height: 100vh;\n  }\n  .drawer__wrapper--bottom .drawer__content, .drawer__wrapper--top .drawer__content {\n    width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    bottom: 0;\n  }\n  .drawer__wrapper--top {\n    top: 0;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolDrawerDefaultStyle0=defaultStyleCss,KolDrawer$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.getWrapperRef=e=>this.dialogWrapperElement=e,this.getRef=e=>this.dialogElement=e,this._open=void 0,this._align=void 0,this._label=void 0,this._modal=void 0,this._on=void 0,this.state={_label:"",_open:!1,_align:"left"}}async open(){var e;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),null===(e=this.dialogElement)||void 0===e||e.showModal()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const e=this.dialogWrapperElement;if(!e)return;"none"===window.getComputedStyle(e).animationName&&this.handleCloseDialog()}renderDialogContent(){const e=this.state._align;return h("div",{ref:this.getWrapperRef,class:`drawer__wrapper drawer__wrapper--${e} ${this.state._open?"drawer__wrapper--open":"is-closing"}`,"aria-label":this.state._label},h("div",{class:"drawer__content"},h("slot",null)))}render(){return h(Host,{key:"91b5f45b2ab196fa2149af9354744051bd1b35f1",class:"kol-drawer drawer",ref:e=>this.hostElement=e},h("dialog",{key:"d06fea157a405d95dbbfb7a8984628c49adf9af9",class:"drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(e){validateLabel(this,e,{required:!0})}validateAlign(e){validateAlign(this,e)}async validateOpen(e){"boolean"==typeof e&&(validateOpen(this,e),e?await this.open():await this.close())}validateOn(e){if("object"==typeof e&&null!==e){const n={};"function"==typeof e.onClose&&(n.onClose=e.onClose),setState(this,"_on",n)}}handleCloseDialog(){var e,n,t;null===(e=this.dialogElement)||void 0===e||e.close(),null===(t=null===(n=this._on)||void 0===n?void 0:n.onClose)||void 0===t||t.call(n)}handleClose(){}handleAnimationEnd(e){e.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var e,n;null===(e=this.dialogElement)||void 0===e||e.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(n=this.dialogElement)||void 0===n||n.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var e,n;null===(e=this.dialogElement)||void 0===e||e.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(n=this.dialogElement)||void 0===n||n.removeEventListener("close",this.handleClose.bind(this))}async componentWillLoad(){this.validateLabel(this._label),await this.validateOpen(this._open),this.validateAlign(this._align),this.validateOn(this._on)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}}static get style(){return{default:KolDrawerDefaultStyle0}}},[33,"kol-drawer",{_open:[4],_align:[1],_label:[1],_modal:[4],_on:[16],state:[32],open:[64],close:[64]},void 0,{_label:["validateLabel"],_align:["validateAlign"],_open:["validateOpen"],_on:["validateOn"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-drawer"].forEach(e=>{if("kol-drawer"===e)customElements.get(e)||customElements.define(e,KolDrawer$1)})}const KolDrawer=KolDrawer$1,defineCustomElement=defineCustomElement$1;export{KolDrawer,defineCustomElement};

package/dist/components/kol-drawer.js.map

@@ -1 +1 @@
-{"file":"kol-drawer.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,suKAAsuK,CAAC;AAC/vK,+BAAe,eAAe;;MCgBjBA,WAAS;;;;;QAoCb,kBAAa,GAAG,CAAC,EAA8B,MAAM,IAAI,CAAC,oBAAoB,GAAG,EAAoB,CAAC,CAAC;QAgBvG,WAAM,GAAG,CAAC,EAAiC,MAAM,IAAI,CAAC,aAAa,GAAG,EAAuB,CAAC,CAAC;;;;;;qBAqCjE;YACrC,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,MAAM;SACd;;IAnFD,MAAM,IAAI;;QACT,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,KAAK,EAAE,IAAI,GACX,CAAC;QACF,MAAA,IAAI,CAAC,aAAa,0CAAE,SAAS,EAAE,CAAC;KAChC;IAOD,MAAM,KAAK;QACV,IAAI,CAAC,KAAK,mCACN,IAAI,CAAC,KAAK,KACb,KAAK,EAAE,KAAK,GACZ,CAAC;QACF,MAAM,OAAO,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAC1C,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,aAAa,GAAG,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC;QACvD,IAAI,aAAa,CAAC,aAAa,KAAK,MAAM,EAAE;YAC3C,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACzB;KACD;IAGO,mBAAmB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAgB,CAAC;QAC1C,QACC,WACC,GAAG,EAAE,IAAI,CAAC,aAAa,EACvB,KAAK,EAAE,oCAAoC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,uBAAuB,GAAG,YAAY,EAAE,gBACnG,IAAI,CAAC,KAAK,CAAC,MAAM,IAE7B,WAAK,KAAK,EAAC,iBAAiB,IAC3B,eAAQ,CACH,CACD,EACL;KACF;IAGM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,IACpF,+DAAQ,KAAK,EAAC,gBAAgB,EAAC,GAAG,EAAE,IAAI,CAAC,MAAM,IAC7C,IAAI,CAAC,mBAAmB,EAAE,CACnB,CACH,EACN;KACF;IAmCM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC3B;IAGM,MAAM,YAAY,CAAC,KAAoB;QAC7C,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;YAC/B,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC1B,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,EAAE,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;SAC/C;KACD;IAGM,UAAU,CAAC,KAAkC;QACnD,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,EAAE;YAChD,MAAM,SAAS,GAA+B,EAAE,CAAC;YACjD,IAAI,OAAO,KAAK,CAAC,OAAO,KAAK,UAAU,EAAE;gBACxC,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;aAClC;YACD,QAAQ,CAA6B,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC;SAC7D;KACD;IAEO,iBAAiB;;QACxB,MAAA,IAAI,CAAC,aAAa,0CAAE,KAAK,EAAE,CAAC;QAC5B,MAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,kDAAI,CAAC;KACtB;IAEO,WAAW;KAKlB;IAEO,kBAAkB,CAAC,CAAQ;QAClC,MAAM,cAAc,GAAG,CAAmB,CAAC;QAC3C,IAAI,cAAc,CAAC,aAAa,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE;YACtD,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACzB;KACD;IAEM,gBAAgB;;QACtB,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QACzF,MAAA,IAAI,CAAC,aAAa,0CAAE,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC3E;IAEM,oBAAoB;;QAC1B,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,cAAc,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5F,MAAA,IAAI,CAAC,aAAa,0CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;KAC9E;IAEM,MAAM,iBAAiB;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,MAAM,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolDrawer"],"sources":["src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t.drawer {\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\tbackground-color: white;\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.drawer__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.drawer__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\tpadding: to-rem(16);\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport type { KoliBriModalEventCallbacks, LabelPropType, DrawerAPI, AlignPropType, OpenPropType, ModalPropType, DrawerStates } from '../../schema';\nimport { setState, validateLabel, validateOpen, validateAlign } from '../../schema';\nimport { Component, Host, Method, Prop, State, Watch, h } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\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\tpublic hostElement?: HTMLElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLDivElement;\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: HTMLDivElement | undefined) => (this.dialogWrapperElement = el as HTMLDivElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={`drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`}\n\t\t\t\taria-label={this.state._label}\n\t\t\t>\n\t\t\t\t<div class=\"drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => (this.dialogElement = el as HTMLDialogElement);\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class={`kol-drawer drawer`} ref={(el) => (this.hostElement = el as HTMLElement)}>\n\t\t\t\t<dialog class=\"drawer__dialog\" 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 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 * @deprecated\n\t * Indicates whether the drawer is a modal.\n\t */\n\t@Prop() public _modal?: ModalPropType;\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('_open')\n\tpublic async validateOpen(value?: OpenPropType): Promise<void> {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\t\t\tvalue ? await this.open() : await 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}\n\n\tprivate handleClose(): void {\n\t\tasync () => {\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 async componentWillLoad(): Promise<void> {\n\t\tthis.validateLabel(this._label);\n\t\tawait this.validateOpen(this._open);\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}
+{"file":"kol-drawer.js","mappings":"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","names":["KolDrawer"],"sources":["src/components/drawer/style.scss?tag=kol-drawer&mode=default&encapsulation=shadow","src/components/drawer/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t.drawer {\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\tbackground-color: white;\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.drawer__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.drawer__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\tpadding: to-rem(16);\n\t\t}\n\t}\n}\n","/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport type { KoliBriModalEventCallbacks, LabelPropType, DrawerAPI, AlignPropType, OpenPropType, ModalPropType, DrawerStates } from '../../schema';\nimport { setState, validateLabel, validateOpen, validateAlign } from '../../schema';\nimport { Component, Host, Method, Prop, State, Watch, h } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\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\tpublic hostElement?: HTMLElement;\n\tprivate dialogElement?: HTMLDialogElement;\n\tprivate dialogWrapperElement?: HTMLDivElement;\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: HTMLDivElement | undefined) => (this.dialogWrapperElement = el as HTMLDivElement);\n\tprivate renderDialogContent() {\n\t\tconst align = this.state._align as string;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={this.getWrapperRef}\n\t\t\t\tclass={`drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`}\n\t\t\t\taria-label={this.state._label}\n\t\t\t>\n\t\t\t\t<div class=\"drawer__content\">\n\t\t\t\t\t<slot />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate getRef = (el: HTMLDialogElement | undefined) => (this.dialogElement = el as HTMLDialogElement);\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class={`kol-drawer drawer`} ref={(el) => (this.hostElement = el as HTMLElement)}>\n\t\t\t\t<dialog class=\"drawer__dialog\" 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 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 * @deprecated\n\t * Indicates whether the drawer is a modal.\n\t */\n\t@Prop() public _modal?: ModalPropType;\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('_open')\n\tpublic async validateOpen(value?: OpenPropType): Promise<void> {\n\t\tif (typeof value === 'boolean') {\n\t\t\tvalidateOpen(this, value);\n\t\t\tvalue ? await this.open() : await 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}\n\n\tprivate handleClose(): void {\n\t\tasync () => {\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 async componentWillLoad(): Promise<void> {\n\t\tthis.validateLabel(this._label);\n\t\tawait this.validateOpen(this._open);\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}

package/dist/components/kol-form.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchValidator,j as watchBoolean,m as watchString}from"./index2.js";import{t as translate}from"./i18n2.js";import{l as KolLinkWcTag}from"./component-names.js";import{K as KolAlertFc}from"./Alert.js";const validateErrorList=(n,t)=>{watchValidator(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),t)},defaultStyleCss="@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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: absolute;\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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    position: absolute;\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .skip:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n    padding: 1em;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolFormDefaultStyle0=defaultStyleCss,KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onSubmit=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(e=this.state._on)||void 0===e||e.onSubmit(n))},this.onReset=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(e=this.state._on)||void 0===e||e.onReset(n))},this.handleLinkClick=n=>{const t=document.querySelector(n);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}renderErrorList(n){return h(KolAlertFc,{ref:this.setBlockElement,type:"error",variant:"card",label:translate("kol-error-list-message")},h("nav",{"aria-label":translate("kol-error-list")},h("ul",null,null==n?void 0:n.map((n,t)=>h("li",{key:t},h(KolLinkWcTag,{_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 h("form",{autoComplete:"off",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?h("p",null,h("div",{class:"mandatory-fields-hint"},translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("div",{class:"mandatory-fields-hint"},this.state._requiredText)):null,h("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return h(Host,{key:"3a493a940da663c5350b450ab4ac5fb5f5ffdff1",class:"kol-form"},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,t;null===(t=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===t||t.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?watchBoolean(this,"_requiredText",n):watchString(this,"_requiredText",n)}validateErrorList(n){validateErrorList(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}static get style(){return{default:KolFormDefaultStyle0}}},[33,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],_errorList:[16],state:[32],focusErrorList:[64]},void 0,{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form"].forEach(n=>{if("kol-form"===n)customElements.get(n)||customElements.define(n,KolForm$1)})}const KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchValidator,j as watchBoolean,m as watchString}from"./index2.js";import{t as translate}from"./i18n2.js";import{l as KolLinkWcTag}from"./component-names.js";import{K as KolAlertFc}from"./Alert.js";const validateErrorList=(n,t)=>{watchValidator(n,"errorList",n=>Array.isArray(n)&&void 0===n.find(n=>!("string"==typeof n||"function"==typeof n)),new Set(["string","function"]),t)},defaultStyleCss="@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    align-items: baseline;\n    place-items: center;\n    text-align: left;\n    text-decoration-line: none;\n  }\n  :is(a, button) .kol-span-wc .span-label {\n    text-decoration-line: underline;\n  }\n  a:is(:focus, :hover):not([aria-disabled]) .kol-span-wc .span-label,\n  button:is(:focus, :hover):not([disabled]) .kol-span-wc .span-label {\n    text-decoration-thickness: 0.2em;\n  }\n  .skip {\n    position: absolute;\n    left: calc(-99999rem / var(--kolibri-root-font-size, 16));\n    z-index: 9999999;\n    line-height: 1;\n  }\n  .skip:focus {\n    background-color: #fff;\n    position: unset;\n    left: unset;\n    padding: 1em;\n  }\n  .kol-icon.external-link-icon {\n    display: inline-flex;\n    margin-left: calc(8rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}",KolFormDefaultStyle0=defaultStyleCss,KolForm$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.onSubmit=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(e=this.state._on)||void 0===e||e.onSubmit(n))},this.onReset=n=>{var t,e;n.preventDefault(),n.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(e=this.state._on)||void 0===e||e.onReset(n))},this.handleLinkClick=n=>{const t=document.querySelector(n);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())},this.setBlockElement=n=>this.errorListBlock=n,this.setFirstLinkElement=n=>this.errorListFirstLink=n,this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}renderErrorList(n){return h(KolAlertFc,{ref:this.setBlockElement,type:"error",variant:"card",label:translate("kol-error-list-message")},h("nav",{"aria-label":translate("kol-error-list")},h("ul",null,null==n?void 0:n.map((n,t)=>h("li",{key:t},h(KolLinkWcTag,{_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 h("form",{autoComplete:"off",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,noValidate:!0},!0===this.state._requiredText?h("p",null,h("div",{class:"mandatory-fields-hint"},translate("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?h("p",null,h("div",{class:"mandatory-fields-hint"},this.state._requiredText)):null,h("slot",null))}render(){const n=Array.isArray(this._errorList)&&this._errorList.length>0;return h(Host,{key:"3a493a940da663c5350b450ab4ac5fb5f5ffdff1",class:"kol-form"},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,t;null===(t=null===(n=this.errorListFirstLink)||void 0===n?void 0:n.querySelector("a"))||void 0===t||t.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?watchBoolean(this,"_requiredText",n):watchString(this,"_requiredText",n)}validateErrorList(n){validateErrorList(this,n)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}static get style(){return{default:KolFormDefaultStyle0}}},[33,"kol-form",{_on:[16],_requiredText:[8,"_required-text"],_errorList:[16],state:[32],focusErrorList:[64]},void 0,{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-form"].forEach(n=>{if("kol-form"===n)customElements.get(n)||customElements.define(n,KolForm$1)})}const KolForm=KolForm$1,defineCustomElement=defineCustomElement$1;export{KolForm,defineCustomElement};

package/dist/components/kol-form.js.map

@@ -1 +1 @@
-{"file":"kol-form.js","mappings":"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","names":["KolForm"],"sources":["src/schema/props/error-list.ts","src/components/form/style.scss?tag=kol-form&mode=default&encapsulation=shadow","src/components/form/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { EventCallback } from '../types';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string | EventCallback<Event>;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'errorList',\n\t\t(value): boolean => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined,\n\t\tnew Set(['string', 'function']),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/kol-alert-mixin' as *;\n@use '../style' as *;\n@use '../link' as *;\n\n@include kol-alert-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';\n\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\ttargetElement.focus();\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLElement) => (this.errorListFirstLink = el);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc ref={this.setBlockElement} type=\"error\" variant=\"card\" label={translate('kol-error-list-message')}>\n\t\t\t\t<nav aria-label={translate('kol-error-list')}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form\n\t\t\t\tautoComplete=\"off\" /* disable browser's not accessible autocomplete popup */\n\t\t\t\tmethod=\"post\"\n\t\t\t\tonSubmit={this.onSubmit}\n\t\t\t\tonReset={this.onReset}\n\t\t\t\tnoValidate\n\t\t\t>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"mandatory-fields-hint\">{translate('kol-form-description')}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host class=\"kol-form\">\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(): void {\n\t\tthis.errorListBlock?.scrollIntoView({\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'start',\n\t\t});\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus();\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses its first link.\n\t */\n\t@Method()\n\tasync focusErrorList(): Promise<void> {\n\t\tthis.scrollToErrorList();\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"version":3}
+{"file":"kol-form.js","mappings":"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","names":["KolForm"],"sources":["src/schema/props/error-list.ts","src/components/form/style.scss?tag=kol-form&mode=default&encapsulation=shadow","src/components/form/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport type { EventCallback } from '../types';\nimport { watchValidator } from '../utils';\n\n/* types */\nexport type ErrorListPropType = {\n\tmessage: string;\n\tselector: string | EventCallback<Event>;\n};\n\nexport type PropErrorList = {\n\terrorList: ErrorListPropType[];\n};\n\n/* validator */\nexport const validateErrorList = (component: Generic.Element.Component, value?: ErrorListPropType[]): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t'errorList',\n\t\t(value): boolean => Array.isArray(value) && value.find((v) => !(typeof v === 'string' || typeof v === 'function')) === undefined,\n\t\tnew Set(['string', 'function']),\n\t\tvalue,\n\t);\n};\n","@use '../@shared/kol-alert-mixin' as *;\n@use '../style' as *;\n@use '../link' as *;\n\n@include kol-alert-styles;\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop, State, Watch } from '@stencil/core';\nimport { validateErrorList, watchBoolean, watchString } from '../../schema';\n\nimport { translate } from '../../i18n';\n\nimport { KolLinkWcTag } from '../../core/component-names';\nimport KolAlertFc from '../../functional-components/Alert';\nimport type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '../../schema';\n\n/**\n * @slot - Inhalt der Form.\n */\n@Component({\n\ttag: 'kol-form',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolForm implements FormAPI {\n\terrorListBlock?: HTMLElement;\n\terrorListFirstLink?: HTMLElement;\n\n\t/* Hint: This method may not be used at all while events are handled in form/controller#propagateSubmitEventToForm */\n\tprivate readonly onSubmit = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onSubmit === 'function') {\n\t\t\tthis.state._on?.onSubmit(event as SubmitEvent);\n\t\t}\n\t};\n\n\tprivate readonly onReset = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tevent.stopPropagation();\n\t\tif (typeof this.state._on?.onReset === 'function') {\n\t\t\tthis.state._on?.onReset(event);\n\t\t}\n\t};\n\n\tprivate readonly handleLinkClick = (selector: string) => {\n\t\tconst targetElement = document.querySelector<HTMLElement>(selector);\n\t\tif (targetElement && typeof targetElement.focus === 'function') {\n\t\t\ttargetElement.scrollIntoView({ behavior: 'smooth' });\n\t\t\ttargetElement.focus();\n\t\t}\n\t};\n\n\tprivate readonly setBlockElement = (el?: HTMLElement) => (this.errorListBlock = el);\n\n\tprivate readonly setFirstLinkElement = (el?: HTMLElement) => (this.errorListFirstLink = el);\n\n\tprivate renderErrorList(errorList?: ErrorListPropType[]): JSX.Element {\n\t\treturn (\n\t\t\t<KolAlertFc ref={this.setBlockElement} type=\"error\" variant=\"card\" label={translate('kol-error-list-message')}>\n\t\t\t\t<nav aria-label={translate('kol-error-list')}>\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{errorList?.map((error, index) => (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<KolLinkWcTag\n\t\t\t\t\t\t\t\t\t_href=\"\"\n\t\t\t\t\t\t\t\t\t_label={error.message}\n\t\t\t\t\t\t\t\t\t_on={{ onClick: typeof error.selector === 'string' ? () => this.handleLinkClick(String(error.selector)) : error.selector }}\n\t\t\t\t\t\t\t\t\tref={index === 0 ? this.setFirstLinkElement : undefined}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</ul>\n\t\t\t\t</nav>\n\t\t\t</KolAlertFc>\n\t\t);\n\t}\n\n\tprivate renderFormElement(): JSX.Element {\n\t\treturn (\n\t\t\t<form\n\t\t\t\tautoComplete=\"off\" /* disable browser's not accessible autocomplete popup */\n\t\t\t\tmethod=\"post\"\n\t\t\t\tonSubmit={this.onSubmit}\n\t\t\t\tonReset={this.onReset}\n\t\t\t\tnoValidate\n\t\t\t>\n\t\t\t\t{this.state._requiredText === true ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"mandatory-fields-hint\">{translate('kol-form-description')}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (\n\t\t\t\t\t<p>\n\t\t\t\t\t\t<div class=\"mandatory-fields-hint\">{this.state._requiredText}</div>\n\t\t\t\t\t</p>\n\t\t\t\t) : null}\n\t\t\t\t<slot />\n\t\t\t</form>\n\t\t);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasErrorList = Array.isArray(this._errorList) && this._errorList.length > 0;\n\n\t\treturn (\n\t\t\t<Host class=\"kol-form\">\n\t\t\t\t{hasErrorList && this.renderErrorList(this._errorList)}\n\t\t\t\t{this.renderFormElement()}\n\t\t\t</Host>\n\t\t);\n\t}\n\n\tprivate scrollToErrorList(): void {\n\t\tthis.errorListBlock?.scrollIntoView({\n\t\t\tbehavior: 'smooth',\n\t\t\tblock: 'start',\n\t\t});\n\t\tsetTimeout(() => {\n\t\t\tthis.errorListFirstLink?.querySelector('a')?.focus();\n\t\t}, 250);\n\t}\n\n\t/**\n\t * Scrolls to the error list and focuses its first link.\n\t */\n\t@Method()\n\tasync focusErrorList(): Promise<void> {\n\t\tthis.scrollToErrorList();\n\t\treturn Promise.resolve();\n\t}\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für die Form-Events an.\n\t */\n\t@Prop() public _on?: KoliBriFormCallbacks;\n\n\t/**\n\t * Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.\n\t */\n\t@Prop() public _requiredText?: Stringified<boolean> = true;\n\t/**\n\t * A list of error objects that each describe an issue encountered in the form.\n\t * Each error object contains a message and a selector for identifying the form element related to the error.\n\t */\n\t@Prop() public _errorList?: ErrorListPropType[];\n\n\t@State() public state: FormStates = {};\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriFormCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tthis.state = {\n\t\t\t\t...this.state,\n\t\t\t\t_on: value,\n\t\t\t};\n\t\t}\n\t}\n\n\t@Watch('_requiredText')\n\tpublic validateRequiredText(value?: Stringified<boolean>): void {\n\t\tif (typeof value === 'boolean') {\n\t\t\twatchBoolean(this, '_requiredText', value);\n\t\t} else {\n\t\t\twatchString(this, '_requiredText', value);\n\t\t}\n\t}\n\n\t@Watch('_errorList')\n\tpublic validateErrorList(value?: ErrorListPropType[]): void {\n\t\tvalidateErrorList(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateOn(this._on);\n\t\tthis.validateRequiredText(this._requiredText);\n\t\tthis.validateErrorList(this._errorList);\n\t}\n}\n"],"version":3}

package/dist/components/kol-heading.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{b as KolHeadingWcTag}from"./component-names.js";const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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: absolute;\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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n.secondary-headline {\n  margin: 0;\n}",KolHeadingDefaultStyle0=defaultStyleCss,KolHeading$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._level=void 0,this._secondaryHeadline=void 0,this._variant=void 0}render(){return h(KolHeadingWcTag,{key:"85aab4ce030b9cb15fc1d4a46d8130c57172c4bf",_label:this._label,_level:this._level,_secondaryHeadline:this._secondaryHeadline,_variant:this._variant,class:"kol-heading"},h("slot",{key:"f03f102a4e88053e50e93e26f25bde84f3e32a69",name:"expert",slot:"expert"}))}static get style(){return{default:KolHeadingDefaultStyle0}}},[33,"kol-heading",{_label:[1],_level:[2],_secondaryHeadline:[1,"_secondary-headline"],_variant:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-heading"].forEach(n=>{if("kol-heading"===n)customElements.get(n)||customElements.define(n,KolHeading$1)})}const KolHeading=KolHeading$1,defineCustomElement=defineCustomElement$1;export{KolHeading,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{b as KolHeadingWcTag}from"./component-names.js";const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n.secondary-headline {\n  margin: 0;\n}",KolHeadingDefaultStyle0=defaultStyleCss,KolHeading$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._label=void 0,this._level=void 0,this._secondaryHeadline=void 0,this._variant=void 0}render(){return h(KolHeadingWcTag,{key:"85aab4ce030b9cb15fc1d4a46d8130c57172c4bf",_label:this._label,_level:this._level,_secondaryHeadline:this._secondaryHeadline,_variant:this._variant,class:"kol-heading"},h("slot",{key:"f03f102a4e88053e50e93e26f25bde84f3e32a69",name:"expert",slot:"expert"}))}static get style(){return{default:KolHeadingDefaultStyle0}}},[33,"kol-heading",{_label:[1],_level:[2],_secondaryHeadline:[1,"_secondary-headline"],_variant:[1]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-heading"].forEach(n=>{if("kol-heading"===n)customElements.get(n)||customElements.define(n,KolHeading$1)})}const KolHeading=KolHeading$1,defineCustomElement=defineCustomElement$1;export{KolHeading,defineCustomElement};

package/dist/components/kol-heading.js.map

@@ -1 +1 @@
-{"file":"kol-heading.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,41IAA41I,CAAC;AACr3I,gCAAe,eAAe;;MCcjBA,YAAU;;;;;;;;;;IACf,MAAM;QACZ,QACC,EAAC,eAAe,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,aAAa,IACnJ,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACnB,EACjB;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolHeading"],"sources":["src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n\n.secondary-headline {\n\tmargin: 0;\n}\n","import type { HeadingLevel, HeadingProps, HeadingVariantPropType, LabelWithExpertSlotPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolHeadingWcTag } from '../../core/component-names';\n\n/**\n * @slot headline - Content of the headline.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements HeadingProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolHeadingWcTag _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} _variant={this._variant} class=\"kol-heading\">\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</KolHeadingWcTag>\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.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\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;\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t * @deprecated Removed in v3. Use CSS custom properties instead.\n\t */\n\t@Prop() public _variant?: HeadingVariantPropType;\n}\n"],"version":3}
+{"file":"kol-heading.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,o3IAAo3I,CAAC;AAC74I,gCAAe,eAAe;;MCcjBA,YAAU;;;;;;;;;;IACf,MAAM;QACZ,QACC,EAAC,eAAe,qDAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAC,aAAa,IACnJ,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAG,CACnB,EACjB;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolHeading"],"sources":["src/components/heading/style.scss?tag=kol-heading&mode=default&encapsulation=shadow","src/components/heading/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n\n.secondary-headline {\n\tmargin: 0;\n}\n","import type { HeadingLevel, HeadingProps, HeadingVariantPropType, LabelWithExpertSlotPropType } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolHeadingWcTag } from '../../core/component-names';\n\n/**\n * @slot headline - Content of the headline.\n */\n@Component({\n\ttag: 'kol-heading',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolHeading implements HeadingProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolHeadingWcTag _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} _variant={this._variant} class=\"kol-heading\">\n\t\t\t\t<slot name=\"expert\" slot=\"expert\" />\n\t\t\t</KolHeadingWcTag>\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.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\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;\n\n\t/**\n\t * Defines the text of the secondary headline.\n\t */\n\t@Prop() public _secondaryHeadline?: string;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t * @deprecated Removed in v3. Use CSS custom properties instead.\n\t */\n\t@Prop() public _variant?: HeadingVariantPropType;\n}\n"],"version":3}

package/dist/components/kol-image.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchValidator,m as watchString}from"./index2.js";import{v as validateImageSource}from"./image-source.js";const loadingOptions=["eager","lazy"];function validateLoading(e,n){watchValidator(e,"_loading",e=>"string"==typeof e&&loadingOptions.includes(e),new Set(loadingOptions),n)}const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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: absolute;\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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n}",KolImageDefaultStyle0=defaultStyleCss,KolImage$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(e){watchString(this,"_alt",e,{required:!0})}validateLoading(e){validateLoading(this,e)}validateSizes(e){watchString(this,"_sizes",e)}validateSrc(e){validateImageSource(this,e,{required:!0})}validateSrcset(e){watchString(this,"_srcset",e)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return h(Host,{key:"9fc1a0a8052bb08041949a39eaab150581fa2b24",class:"kol-image"},h("img",{key:"0d7a5985107cd31609adf2dd78f8e11cd09217e3",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}static get style(){return{default:KolImageDefaultStyle0}}},[33,"kol-image",{_alt:[1],_loading:[1],_sizes:[1],_src:[1],_srcset:[1],state:[32]},void 0,{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-image"].forEach(e=>{if("kol-image"===e)customElements.get(e)||customElements.define(e,KolImage$1)})}const KolImage=KolImage$1,defineCustomElement=defineCustomElement$1;export{KolImage,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{w as watchValidator,m as watchString}from"./index2.js";import{v as validateImageSource}from"./image-source.js";const loadingOptions=["eager","lazy"];function validateLoading(e,n){watchValidator(e,"_loading",e=>"string"==typeof e&&loadingOptions.includes(e),new Set(loadingOptions),n)}const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  img {\n    max-width: 100%;\n    max-height: 100%;\n  }\n}",KolImageDefaultStyle0=defaultStyleCss,KolImage$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this._alt=void 0,this._loading="lazy",this._sizes=void 0,this._src=void 0,this._srcset=void 0,this.state={_alt:"",_loading:"lazy",_src:""}}validateAlt(e){watchString(this,"_alt",e,{required:!0})}validateLoading(e){validateLoading(this,e)}validateSizes(e){watchString(this,"_sizes",e)}validateSrc(e){validateImageSource(this,e,{required:!0})}validateSrcset(e){watchString(this,"_srcset",e)}componentWillLoad(){this.validateAlt(this._alt),this.validateLoading(this._loading),this.validateSizes(this._sizes),this.validateSrc(this._src),this.validateSrcset(this._srcset)}render(){return h(Host,{key:"9fc1a0a8052bb08041949a39eaab150581fa2b24",class:"kol-image"},h("img",{key:"0d7a5985107cd31609adf2dd78f8e11cd09217e3",alt:this.state._alt,loading:this.state._loading,sizes:this.state._sizes,src:this.state._src,srcset:this.state._srcset}))}static get watchers(){return{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}}static get style(){return{default:KolImageDefaultStyle0}}},[33,"kol-image",{_alt:[1],_loading:[1],_sizes:[1],_src:[1],_srcset:[1],state:[32]},void 0,{_alt:["validateAlt"],_loading:["validateLoading"],_sizes:["validateSizes"],_src:["validateSrc"],_srcset:["validateSrcset"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-image"].forEach(e=>{if("kol-image"===e)customElements.get(e)||customElements.define(e,KolImage$1)})}const KolImage=KolImage$1,defineCustomElement=defineCustomElement$1;export{KolImage,defineCustomElement};

package/dist/components/kol-image.js.map

@@ -1 +1 @@
-{"file":"kol-image.js","mappings":";;;;;;;AAGA,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;SAGlC,eAAe,CAAC,SAAoC,EAAE,KAAe;IACpF,cAAc,CAAU,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC;AACxJ;;ACRA,MAAM,eAAe,GAAG,s7IAAs7I,CAAC;AAC/8I,8BAAe,eAAe;;MCWjBA,UAAQ;;;;;;wBASgB,MAAM;;;;qBAiBL;YACpC,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,MAAM;YAChB,IAAI,EAAE,EAAE;SACR;;IAGM,WAAW,CAAC,KAAc;QAChC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;YAChC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAAe;QACrC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC7B;IAGM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;KACnC;IAGM,WAAW,CAAC,KAA2B;QAC7C,mBAAmB,CAAC,IAAI,EAAE,KAAK,EAAE;YAChC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,cAAc,CAAC,KAAc;QACnC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;KACpC;IAEM,iBAAiB;QACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;IAEM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,WAAW,IACtB,4DAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,CACrI,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolImage"],"sources":["src/schema/props/loading.ts","src/components/image/style.scss?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst loadingOptions = ['eager', 'lazy'] as const;\nexport type Loading = (typeof loadingOptions)[number];\n\nexport function validateLoading(component: Generic.Element.Component, value?: Loading): void {\n\twatchValidator<Loading>(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);\n}\n","@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\timg {\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n}\n","import type { ImageAPI, ImageSourcePropType, ImageStates, Loading } from '../../schema';\nimport { validateImageSource, validateLoading, watchString } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements ImageAPI {\n\t/**\n\t * Setzt den alternativen Text.\n\t */\n\t@Prop() public _alt!: string;\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop() public _loading?: Loading = 'lazy';\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop() public _sizes?: string;\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src!: ImageSourcePropType;\n\n\t/**\n\t * Setzt eine Liste von Quell-URLs mit Breiten der Bilder.\n\t */\n\t@Prop() public _srcset?: string;\n\n\t@State() public state: ImageStates = {\n\t\t_alt: '', // ⚠ required\n\t\t_loading: 'lazy',\n\t\t_src: '', // ⚠ required\n\t};\n\n\t@Watch('_alt')\n\tpublic validateAlt(value?: string): void {\n\t\twatchString(this, '_alt', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_loading')\n\tpublic validateLoading(value?: Loading): void {\n\t\tvalidateLoading(this, value);\n\t}\n\n\t@Watch('_sizes')\n\tpublic validateSizes(value?: string): void {\n\t\twatchString(this, '_sizes', value);\n\t}\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_srcset')\n\tpublic validateSrcset(value?: string): void {\n\t\twatchString(this, '_srcset', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlt(this._alt);\n\t\tthis.validateLoading(this._loading);\n\t\tthis.validateSizes(this._sizes);\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateSrcset(this._srcset);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-image\">\n\t\t\t\t<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-image.js","mappings":";;;;;;;AAGA,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,MAAM,CAAU,CAAC;SAGlC,eAAe,CAAC,SAAoC,EAAE,KAAe;IACpF,cAAc,CAAU,SAAS,EAAE,UAAU,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ,IAAI,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAC;AACxJ;;ACRA,MAAM,eAAe,GAAG,88IAA88I,CAAC;AACv+I,8BAAe,eAAe;;MCWjBA,UAAQ;;;;;;wBASgB,MAAM;;;;qBAiBL;YACpC,IAAI,EAAE,EAAE;YACR,QAAQ,EAAE,MAAM;YAChB,IAAI,EAAE,EAAE;SACR;;IAGM,WAAW,CAAC,KAAc;QAChC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE;YAChC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,eAAe,CAAC,KAAe;QACrC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC7B;IAGM,aAAa,CAAC,KAAc;QAClC,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,CAAC,CAAC;KACnC;IAGM,WAAW,CAAC,KAA2B;QAC7C,mBAAmB,CAAC,IAAI,EAAE,KAAK,EAAE;YAChC,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,cAAc,CAAC,KAAc;QACnC,WAAW,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;KACpC;IAEM,iBAAiB;QACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC5B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KAClC;IAEM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,WAAW,IACtB,4DAAK,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,GAAQ,CACrI,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolImage"],"sources":["src/schema/props/loading.ts","src/components/image/style.scss?tag=kol-image&mode=default&encapsulation=shadow","src/components/image/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst loadingOptions = ['eager', 'lazy'] as const;\nexport type Loading = (typeof loadingOptions)[number];\n\nexport function validateLoading(component: Generic.Element.Component, value?: Loading): void {\n\twatchValidator<Loading>(component, '_loading', (value) => typeof value === 'string' && loadingOptions.includes(value), new Set(loadingOptions), value);\n}\n","@use '../@shared/mixins' as *;\n@use '../style' as *;\n\n@layer kol-component {\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\timg {\n\t\tmax-width: 100%;\n\t\tmax-height: 100%;\n\t}\n}\n","import type { ImageAPI, ImageSourcePropType, ImageStates, Loading } from '../../schema';\nimport { validateImageSource, validateLoading, watchString } from '../../schema';\nimport { Component, h, Host, Prop, State, Watch } from '@stencil/core';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-image',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolImage implements ImageAPI {\n\t/**\n\t * Setzt den alternativen Text.\n\t */\n\t@Prop() public _alt!: string;\n\n\t/**\n\t * Defines the loading mode for the image.\n\t */\n\t@Prop() public _loading?: Loading = 'lazy';\n\n\t/**\n\t * Defines the image sizes for different screen resolutions, supporting _srcset.\n\t */\n\t@Prop() public _sizes?: string;\n\n\t/**\n\t * Sets the image `src` attribute to the given string.\n\t */\n\t@Prop() public _src!: ImageSourcePropType;\n\n\t/**\n\t * Setzt eine Liste von Quell-URLs mit Breiten der Bilder.\n\t */\n\t@Prop() public _srcset?: string;\n\n\t@State() public state: ImageStates = {\n\t\t_alt: '', // ⚠ required\n\t\t_loading: 'lazy',\n\t\t_src: '', // ⚠ required\n\t};\n\n\t@Watch('_alt')\n\tpublic validateAlt(value?: string): void {\n\t\twatchString(this, '_alt', value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_loading')\n\tpublic validateLoading(value?: Loading): void {\n\t\tvalidateLoading(this, value);\n\t}\n\n\t@Watch('_sizes')\n\tpublic validateSizes(value?: string): void {\n\t\twatchString(this, '_sizes', value);\n\t}\n\n\t@Watch('_src')\n\tpublic validateSrc(value?: ImageSourcePropType): void {\n\t\tvalidateImageSource(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_srcset')\n\tpublic validateSrcset(value?: string): void {\n\t\twatchString(this, '_srcset', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlt(this._alt);\n\t\tthis.validateLoading(this._loading);\n\t\tthis.validateSizes(this._sizes);\n\t\tthis.validateSrc(this._src);\n\t\tthis.validateSrcset(this._srcset);\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-image\">\n\t\t\t\t<img alt={this.state._alt} loading={this.state._loading} sizes={this.state._sizes} src={this.state._src} srcset={this.state._srcset}></img>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-indented-text.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{m as KolIndentedTextWcTag}from"./component-names.js";const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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: absolute;\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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host > div {\n    padding-left: 0.5em;\n    border-left-style: solid;\n  }\n}",KolIndentedTextDefaultStyle0=defaultStyleCss,KolIndentedText$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}render(){return h(Host,{key:"a0365bb15e5fe94f7daebb1decba3624e1837bf5",class:"kol-indented-text"},h(KolIndentedTextWcTag,{key:"f6767e315045f11786e3380e0b3fbec05b6a616e"},h("slot",{key:"089cf599da9538a390d89fa101518644f44c56eb"})))}static get style(){return{default:KolIndentedTextDefaultStyle0}}},[33,"kol-indented-text"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-indented-text"].forEach(n=>{if("kol-indented-text"===n)customElements.get(n)||customElements.define(n,KolIndentedText$1)})}const KolIndentedText=KolIndentedText$1,defineCustomElement=defineCustomElement$1;export{KolIndentedText,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{m as KolIndentedTextWcTag}from"./component-names.js";const defaultStyleCss="/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host > div {\n    padding-left: 0.5em;\n    border-left-style: solid;\n  }\n}",KolIndentedTextDefaultStyle0=defaultStyleCss,KolIndentedText$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow()}render(){return h(Host,{key:"a0365bb15e5fe94f7daebb1decba3624e1837bf5",class:"kol-indented-text"},h(KolIndentedTextWcTag,{key:"f6767e315045f11786e3380e0b3fbec05b6a616e"},h("slot",{key:"089cf599da9538a390d89fa101518644f44c56eb"})))}static get style(){return{default:KolIndentedTextDefaultStyle0}}},[33,"kol-indented-text"]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-indented-text"].forEach(n=>{if("kol-indented-text"===n)customElements.get(n)||customElements.define(n,KolIndentedText$1)})}const KolIndentedText=KolIndentedText$1,defineCustomElement=defineCustomElement$1;export{KolIndentedText,defineCustomElement};

package/dist/components/kol-indented-text.js.map

@@ -1 +1 @@
-{"file":"kol-indented-text.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,89IAA89I,CAAC;AACv/I,qCAAe,eAAe;;MCejBA,iBAAe;;;;;;IACpB,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,IAC9B,EAAC,oBAAoB,uDACpB,8DAAQ,CACc,CACjB,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolIndentedText"],"sources":["src/components/indented-text/style.scss?tag=kol-indented-text&mode=default&encapsulation=shadow","src/components/indented-text/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t:host > div {\n\t\tpadding-left: 0.5em;\n\t\tborder-left-style: solid;\n\t}\n}\n","import type { IndentedTextProps } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host } from '@stencil/core';\nimport { KolIndentedTextWcTag } from '../../core/component-names';\n\n/**\n * @deprecated Will be removed in v3. Replace with custom HTML and styling.\n * @slot - Der Text.\n */\n@Component({\n\ttag: 'kol-indented-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolIndentedText implements IndentedTextProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-indented-text\">\n\t\t\t\t<KolIndentedTextWcTag>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolIndentedTextWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}
+{"file":"kol-indented-text.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,s/IAAs/I,CAAC;AAC/gJ,qCAAe,eAAe;;MCejBA,iBAAe;;;;;;IACpB,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,IAC9B,EAAC,oBAAoB,uDACpB,8DAAQ,CACc,CACjB,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolIndentedText"],"sources":["src/components/indented-text/style.scss?tag=kol-indented-text&mode=default&encapsulation=shadow","src/components/indented-text/shadow.tsx"],"sourcesContent":["@use '../style' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t:host > div {\n\t\tpadding-left: 0.5em;\n\t\tborder-left-style: solid;\n\t}\n}\n","import type { IndentedTextProps } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host } from '@stencil/core';\nimport { KolIndentedTextWcTag } from '../../core/component-names';\n\n/**\n * @deprecated Will be removed in v3. Replace with custom HTML and styling.\n * @slot - Der Text.\n */\n@Component({\n\ttag: 'kol-indented-text',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolIndentedText implements IndentedTextProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-indented-text\">\n\t\t\t\t<KolIndentedTextWcTag>\n\t\t\t\t\t<slot />\n\t\t\t\t</KolIndentedTextWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/kol-input-checkbox.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{j as watchBoolean,w as watchValidator,H as isString,l as setState,J as buildBadgeTextString,C as showExpertSlot}from"./index2.js";import{n as nonce}from"./dev.utils.js";import{t as tryToDispatchKoliBriEvent}from"./events.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputCheckboxRadioController}from"./controller3.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{k as KolInputTag,e as KolIconTag}from"./component-names.js";const inputCheckboxVariantOptions=["button","default","switch"],validateChecked=(e,t)=>{watchBoolean(e,"_checked",t)},validateIndeterminate=(e,t)=>{watchBoolean(e,"_indeterminate",t)},labelAlignPropTypeOptions=["left","right"],validateLabelAlign=(e,t)=>{watchValidator(e,"_labelAlign",e=>"string"==typeof e&&labelAlignPropTypeOptions.includes(e),new Set([`KoliBriLabelAlign {${labelAlignPropTypeOptions.join(", ")}`]),t)};class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,n){super(e,t,n),this.setFormAssociatedCheckboxValue=e=>{this.component._checked?this.setFormAssociatedValue(e):this.setFormAssociatedValue(null)},this.component=e}validateChecked(e){validateChecked(this.component,e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateIcons(e){watchValidator(this.component,"_icons",e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1)),new Set(["InputCheckboxIcons"]),e,{hooks:{beforePatch:(e,t,n)=>{t.set("_icons",Object.assign(Object.assign({},n.state._icons),e))}}})}validateIndeterminate(e){validateIndeterminate(this.component,e)}validateLabelAlign(e){validateLabelAlign(this.component,e)}validateValue(e){setState(this.component,"_value",e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(e){watchValidator(this.component,"_variant",e=>"string"==typeof e&&inputCheckboxVariantOptions.includes(e),new Set([`String {${inputCheckboxVariantOptions.join(", ")}`]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcons(this.component._icons),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant),this.validateLabelAlign(this.component._labelAlign)}}const defaultStyleCss='@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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: absolute;\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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type=\'checkbox\'], */\n  /* input[type=\'radio\'], */\n  /* input[type=\'range\'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  label {\n    cursor: pointer;\n  }\n  .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n  }\n  .kol-input.default,\n  .kol-input.switch {\n    grid-template-areas: "input label";\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input.default[data-label-align=left]:not(.hide-label),\n  .kol-input.switch[data-label-align=left]:not(.hide-label) {\n    grid-template-areas: "label input";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input .input {\n    display: grid;\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-input .input div {\n    display: inline-flex;\n  }\n  .kol-input .input input {\n    margin: 0;\n  }\n  .kol-input label {\n    grid-area: label;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert {\n    grid-column: span 2;\n  }\n  .kol-input .kol-alert.error {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n  }\n  input {\n    border-style: solid;\n    border-width: 2px;\n    line-height: 1.5;\n  }\n  input[type=checkbox] {\n    background-color: #fff;\n    appearance: none;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  input[type=checkbox]:before {\n    content: "";\n    cursor: pointer;\n  }\n  input[type=checkbox]:disabled:before {\n    cursor: not-allowed;\n  }\n  .kol-input.required .tooltip-content .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .button {\n    display: grid;\n    grid-template-areas: "error error" "input label" "hint hint";\n    grid-template-columns: var(--a11y-min-size) auto;\n  }\n  .button[data-label-align=left]:not(.hide-label) {\n    grid-template-areas: "error error" "label input" "hint hint";\n    grid-template-columns: auto var(--a11y-min-size);\n  }\n  .button:focus-within {\n    outline-color: black;\n    outline-style: solid;\n    /* override global `[tabindex]:focus` style */\n    cursor: inherit;\n  }\n  .button > .error {\n    grid-area: error;\n  }\n  .button > label {\n    grid-area: label;\n  }\n  .button > .input {\n    grid-area: input;\n  }\n  .button > .hint {\n    grid-area: hint;\n  }\n  .button .icon {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n}\n@layer kol-component {\n  .default .checkbox-container {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .default .icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .default:not(.checked, .indeterminate) .icon::part(icon) {\n    display: none;\n  }\n  .default .checkbox-input-element {\n    width: calc(22rem / var(--kolibri-root-font-size, 16));\n    height: calc(22rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .switch .input {\n    position: relative;\n  }\n  .switch input[type=checkbox] {\n    display: inline-block;\n    position: relative;\n    width: 3.2em;\n    min-width: 3.2em;\n    height: 1.7em;\n  }\n  .switch input[type=checkbox]::before {\n    background-color: #000;\n    position: absolute;\n    top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    left: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    width: 1.2em;\n    height: 1.2em;\n    transition: 0.5s;\n  }\n  .switch input[type=checkbox]:checked::before {\n    transform: translateX(1.5em);\n  }\n  .switch input[type=checkbox]:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .switch .icon {\n    transform: translate(0, -50%);\n    color: #000;\n    display: flex;\n    position: absolute;\n    top: 50%;\n    left: calc(4rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    width: 1.2em;\n    height: 1.2em;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  .switch.checked .icon {\n    transform: translate(1.5em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(0.75em, -50%);\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}',KolInputCheckboxDefaultStyle0=defaultStyleCss,KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{getModelValue(){return this._checked?this.state._value:null}async getValue(){return this.getModelValue()}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=showExpertSlot(this.state._label);return h(Host,{key:"9a465a030dc9bb39c496b2a66743ba42bc2079a0",class:"kol-input-checkbox"},h(KolInputTag,{key:"746ec593e6f1acb35bcb4ad475a646d010413827",class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel,checked:this.state._checked,indeterminate:this.state._indeterminate},"data-label-align":this.state._labelAlign||"right","data-role":"button"===this.state._variant?"button":void 0,_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{key:"bbe43013b8f71788d12b4e8c1505dd5b086748a9",slot:"label"},t?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("kbd",{class:"badge-text-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey||this.state._shortKey))):h("span",null,this.state._label)),h("label",{key:"9cd520c111970d4f0ac428d26e5a30f50cd9d269",slot:"input",class:"checkbox-container"},h(KolIconTag,{key:"1d799224fe7de743f2905a1442dd872d72098338",class:"icon",_icons:this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked,_label:""}),h("input",Object.assign({key:"34244306b752fdbc33d2d0ace377a5d0492f5991",class:"checkbox-input-element"+("button"===this.state._variant?" visually-hidden":""),ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onInput:this.onInput,onChange:this.onChange,onKeyDown:this.onKeyDown.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onClick:void 0})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;this._checked=!this._checked,this._indeterminate=!1;const n=this.getModelValue();tryToDispatchKoliBriEvent("input",this.host,n),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onInput)&&this._on.onInput(e,n)},this.onChange=e=>{var t;const n=this.getModelValue();tryToDispatchKoliBriEvent("change",this.host,n),this.controller.setFormAssociatedCheckboxValue(n),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onChange)&&this._on.onChange(e,n)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._checked=!1,this._hideError=!1,this._disabled=!1,this._error=void 0,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._labelAlign="right",this._msg=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=!0,this._variant="default",this.state={_checked:!1,_hideError:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-close"},_id:`id-${nonce()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default",_labelAlign:"right"},this.inputHasFocus=!1,this.controller=new InputCheckboxController(this,"checkbox",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateLabel(e){this.controller.validateLabel(e)}validateLabelAlign(e){this.controller.validateLabelAlign(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_labelAlign:["validateLabelAlign"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:KolInputCheckboxDefaultStyle0}}},[49,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_hideError:[1540,"_hide-error"],_disabled:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_indeterminate:[1540],_label:[1],_labelAlign:[1,"_label-align"],_msg:[1],_name:[1],_on:[16],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[8],_variant:[1],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_labelAlign:["validateLabelAlign"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox"].forEach(e=>{if("kol-input-checkbox"===e)customElements.get(e)||customElements.define(e,KolInputCheckbox$1)})}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{j as watchBoolean,w as watchValidator,H as isString,l as setState,J as buildBadgeTextString,C as showExpertSlot}from"./index2.js";import{n as nonce}from"./dev.utils.js";import{t as tryToDispatchKoliBriEvent}from"./events.js";import{g as getRenderStates}from"./controller2.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{I as InputCheckboxRadioController}from"./controller3.js";import{p as propagateSubmitEventToForm}from"./controller.js";import{k as KolInputTag,e as KolIconTag}from"./component-names.js";const inputCheckboxVariantOptions=["button","default","switch"],validateChecked=(e,t)=>{watchBoolean(e,"_checked",t)},validateIndeterminate=(e,t)=>{watchBoolean(e,"_indeterminate",t)},labelAlignPropTypeOptions=["left","right"],validateLabelAlign=(e,t)=>{watchValidator(e,"_labelAlign",e=>"string"==typeof e&&labelAlignPropTypeOptions.includes(e),new Set([`KoliBriLabelAlign {${labelAlignPropTypeOptions.join(", ")}`]),t)};class InputCheckboxController extends InputCheckboxRadioController{constructor(e,t,n){super(e,t,n),this.setFormAssociatedCheckboxValue=e=>{this.component._checked?this.setFormAssociatedValue(e):this.setFormAssociatedValue(null)},this.component=e}validateChecked(e){validateChecked(this.component,e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateIcons(e){watchValidator(this.component,"_icons",e=>"object"==typeof e&&null!==e&&(isString(e.checked,1)||isString(e.indeterminate,1)||isString(e.unchecked,1)),new Set(["InputCheckboxIcons"]),e,{hooks:{beforePatch:(e,t,n)=>{t.set("_icons",Object.assign(Object.assign({},n.state._icons),e))}}})}validateIndeterminate(e){validateIndeterminate(this.component,e)}validateLabelAlign(e){validateLabelAlign(this.component,e)}validateValue(e){setState(this.component,"_value",e),this.setFormAssociatedCheckboxValue(this.component.state._value)}validateVariant(e){watchValidator(this.component,"_variant",e=>"string"==typeof e&&inputCheckboxVariantOptions.includes(e),new Set([`String {${inputCheckboxVariantOptions.join(", ")}`]),e)}componentWillLoad(){super.componentWillLoad(),this.validateChecked(this.component._checked),this.validateIcons(this.component._icons),this.validateIndeterminate(this.component._indeterminate),this.validateValue(this.component._value),this.validateVariant(this.component._variant),this.validateLabelAlign(this.component._labelAlign)}}const defaultStyleCss='@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip-wc {\n    display: contents;\n    contain: layout;\n  }\n  .kol-tooltip-wc .tooltip-floating {\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);\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    color: #000;\n    background-color: #fff;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    transform: rotate(45deg);\n    position: absolute;\n    z-index: 999;\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n/*\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(44rem / var(--kolibri-root-font-size, 16));\n    color: black;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    /*\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  * {\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 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 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%; /* 100% needed for custom width from outside */\n    margin: 0;\n    padding: 0;\n    border: none;\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16rem / 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  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type=\'checkbox\'], */\n  /* input[type=\'radio\'], */\n  /* input[type=\'range\'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  option,\n  select,\n  textarea {\n    background-color: transparent;\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  label {\n    cursor: pointer;\n  }\n  .kol-input {\n    display: grid;\n    align-items: center;\n    justify-items: left;\n  }\n  .kol-input.default,\n  .kol-input.switch {\n    grid-template-areas: "input label";\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input.default[data-label-align=left]:not(.hide-label),\n  .kol-input.switch[data-label-align=left]:not(.hide-label) {\n    grid-template-areas: "label input";\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input .input {\n    display: grid;\n    align-items: center;\n    grid-area: input;\n  }\n  .kol-input .input div {\n    display: inline-flex;\n  }\n  .kol-input .input input {\n    margin: 0;\n  }\n  .kol-input label {\n    grid-area: label;\n  }\n  .kol-input .hint,\n  .kol-input.error > .kol-alert {\n    grid-column: span 2;\n  }\n  .kol-input .kol-alert.error {\n    order: 3;\n  }\n  .kol-input .hint {\n    order: 4;\n  }\n  input {\n    border-style: solid;\n    border-width: 2px;\n    line-height: 1.5;\n  }\n  input[type=checkbox] {\n    background-color: #fff;\n    appearance: none;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  input[type=checkbox]:before {\n    content: "";\n    cursor: pointer;\n  }\n  input[type=checkbox]:disabled:before {\n    cursor: not-allowed;\n  }\n  .kol-input.required .tooltip-content .span-label::after {\n    content: "*";\n  }\n}\n@layer kol-component {\n  .button {\n    display: grid;\n    grid-template-areas: "error error" "input label" "hint hint";\n    grid-template-columns: var(--a11y-min-size) auto;\n  }\n  .button[data-label-align=left]:not(.hide-label) {\n    grid-template-areas: "error error" "label input" "hint hint";\n    grid-template-columns: auto var(--a11y-min-size);\n  }\n  .button:focus-within {\n    outline-color: black;\n    outline-style: solid;\n    /* override global `[tabindex]:focus` style */\n    cursor: inherit;\n  }\n  .button > .error {\n    grid-area: error;\n  }\n  .button > label {\n    grid-area: label;\n  }\n  .button > .input {\n    grid-area: input;\n  }\n  .button > .hint {\n    grid-area: hint;\n  }\n  .button .icon {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n}\n@layer kol-component {\n  .default .checkbox-container {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n  }\n  .default .icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .default:not(.checked, .indeterminate) .icon::part(icon) {\n    display: none;\n  }\n  .default .checkbox-input-element {\n    width: calc(22rem / var(--kolibri-root-font-size, 16));\n    height: calc(22rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .switch .input {\n    position: relative;\n  }\n  .switch input[type=checkbox] {\n    display: inline-block;\n    position: relative;\n    width: 3.2em;\n    min-width: 3.2em;\n    height: 1.7em;\n  }\n  .switch input[type=checkbox]::before {\n    background-color: #000;\n    position: absolute;\n    top: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    left: calc(0.25em - (2rem / var(--kolibri-root-font-size, 16)));\n    width: 1.2em;\n    height: 1.2em;\n    transition: 0.5s;\n  }\n  .switch input[type=checkbox]:checked::before {\n    transform: translateX(1.5em);\n  }\n  .switch input[type=checkbox]:indeterminate::before {\n    transform: translateX(0.75em);\n  }\n  .switch .icon {\n    transform: translate(0, -50%);\n    color: #000;\n    display: flex;\n    position: absolute;\n    top: 50%;\n    left: calc(4rem / var(--kolibri-root-font-size, 16));\n    z-index: 1;\n    width: 1.2em;\n    height: 1.2em;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    transition: 0.5s;\n  }\n  .switch.checked .icon {\n    transform: translate(1.5em, -50%);\n  }\n  .switch.indeterminate .icon {\n    transform: translate(0.75em, -50%);\n  }\n}\n@layer kol-component {\n  .kol-alert-wc {\n    display: grid;\n  }\n  .kol-alert-wc .heading {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert-wc .heading > div {\n    flex-grow: 1;\n  }\n  .close {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}',KolInputCheckboxDefaultStyle0=defaultStyleCss,KolInputCheckbox$1=proxyCustomElement(class extends HTMLElement{getModelValue(){return this._checked?this.state._value:null}async getValue(){return this.getModelValue()}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.inputRef)||void 0===e||e.focus()}render(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=showExpertSlot(this.state._label);return h(Host,{key:"9a465a030dc9bb39c496b2a66743ba42bc2079a0",class:"kol-input-checkbox"},h(KolInputTag,{key:"746ec593e6f1acb35bcb4ad475a646d010413827",class:{checkbox:!0,[this.state._variant]:!0,"hide-label":!!this.state._hideLabel,checked:this.state._checked,indeterminate:this.state._indeterminate},"data-label-align":this.state._labelAlign||"right","data-role":"button"===this.state._variant?"button":void 0,_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_msg:this.state._msg,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_id:this.state._id,_label:this.state._label,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched},h("span",{key:"bbe43013b8f71788d12b4e8c1505dd5b086748a9",slot:"label"},t?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("kbd",{class:"badge-text-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey||this.state._shortKey))):h("span",null,this.state._label)),h("label",{key:"9cd520c111970d4f0ac428d26e5a30f50cd9d269",slot:"input",class:"checkbox-container"},h(KolIconTag,{key:"1d799224fe7de743f2905a1442dd872d72098338",class:"icon",_icons:this.state._indeterminate?this.state._icons.indeterminate:this.state._checked?this.state._icons.checked:this.state._icons.unchecked,_label:""}),h("input",Object.assign({key:"34244306b752fdbc33d2d0ace377a5d0492f5991",class:"checkbox-input-element"+("button"===this.state._variant?" visually-hidden":""),ref:this.catchRef,title:"",accessKey:this.state._accessKey,"aria-describedby":e.length>0?e.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,checked:this.state._checked,disabled:this.state._disabled,id:this.state._id,indeterminate:this.state._indeterminate,name:this.state._name,required:this.state._required,tabIndex:this.state._tabIndex,type:"checkbox"},this.controller.onFacade,{onInput:this.onInput,onChange:this.onChange,onKeyDown:this.onKeyDown.bind(this),onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onClick:void 0})))))}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=e=>{this.inputRef=e},this.onInput=e=>{var t;this._checked=!this._checked,this._indeterminate=!1;const n=this.getModelValue();tryToDispatchKoliBriEvent("input",this.host,n),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onInput)&&this._on.onInput(e,n)},this.onChange=e=>{var t;const n=this.getModelValue();tryToDispatchKoliBriEvent("change",this.host,n),this.controller.setFormAssociatedCheckboxValue(n),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onChange)&&this._on.onChange(e,n)},this.onKeyDown=e=>{"Enter"!==e.code&&"NumpadEnter"!==e.code||propagateSubmitEventToForm({form:this.host,ref:this.inputRef})},this._accessKey=void 0,this._alert=void 0,this._checked=!1,this._hideError=!1,this._disabled=!1,this._error=void 0,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._indeterminate=void 0,this._label=void 0,this._labelAlign="right",this._msg=void 0,this._name=void 0,this._on=void 0,this._required=!1,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=!0,this._variant="default",this.state={_checked:!1,_hideError:!1,_icons:{checked:"codicon codicon-check",indeterminate:"codicon codicon-remove",unchecked:"codicon codicon-close"},_id:`id-${nonce()}`,_indeterminate:!1,_label:"",_value:!0,_variant:"default",_labelAlign:"right"},this.inputHasFocus=!1,this.controller=new InputCheckboxController(this,"checkbox",this.host)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateChecked(e){this.controller.validateChecked(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateError(e){this.controller.validateError(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateIndeterminate(e){this.controller.validateIndeterminate(e)}validateLabel(e){this.controller.validateLabel(e)}validateLabelAlign(e){this.controller.validateLabelAlign(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateRequired(e){this.controller.validateRequired(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTabIndex(e){this.controller.validateTabIndex(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}validateVariant(e){this.controller.validateVariant(e)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad()}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_labelAlign:["validateLabelAlign"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}}static get style(){return{default:KolInputCheckboxDefaultStyle0}}},[49,"kol-input-checkbox",{_accessKey:[1,"_access-key"],_alert:[1540],_checked:[1540],_hideError:[1540,"_hide-error"],_disabled:[4],_error:[1],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_indeterminate:[1540],_label:[1],_labelAlign:[1,"_label-align"],_msg:[1],_name:[1],_on:[16],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[8],_variant:[1],state:[32],inputHasFocus:[32],getValue:[64],focus:[64],kolFocus:[64]},void 0,{_accessKey:["validateAccessKey"],_alert:["validateAlert"],_checked:["validateChecked"],_disabled:["validateDisabled"],_error:["validateError"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_indeterminate:["validateIndeterminate"],_label:["validateLabel"],_labelAlign:["validateLabelAlign"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_required:["validateRequired"],_shortKey:["validateShortKey"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"],_variant:["validateVariant"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-input-checkbox"].forEach(e=>{if("kol-input-checkbox"===e)customElements.get(e)||customElements.define(e,KolInputCheckbox$1)})}const KolInputCheckbox=KolInputCheckbox$1,defineCustomElement=defineCustomElement$1;export{KolInputCheckbox,defineCustomElement};