@public-ui/components 2.1.4-alpha.1 → 2.1.5-rc.0

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

@@ -1 +1 @@
-{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","propagateFocus","host","getValue","_value","render","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import '../button';\n\n* {\n\tcolor: hotpink !important;\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport { propagateFocus } from '../../schema';\nimport { Component, Element, h, Host, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\nimport type { JSX } from '@stencil/core';\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps {\n\t@Element() private readonly host?: HTMLKolButtonElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tpropagateFocus(this.host, ref);\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;uJAAA,MAAMA,EAAkB,uiJACxB,MAAAC,EAAeD,E,MC0BFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BC,EAAeH,KAAKI,KAAMF,EAAI,E,4JAyEM,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,Q,CAxI3C,cAAMG,GACZ,OAAOL,KAAKM,M,CAGN,MAAAC,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CACdR,IAAKF,KAAKC,SACVU,MAAO,CACNE,OAAQ,KACR,CAACb,KAAKc,UAAqBd,KAAKc,WAAa,SAC7C,CAACd,KAAKe,cAAyBf,KAAKc,WAAa,iBAAmBd,KAAKe,eAAiB,UAAYf,KAAKe,aAAaC,OAAS,GAElIC,WAAYjB,KAAKiB,WACjBC,cAAelB,KAAKkB,cACpBC,cAAenB,KAAKmB,cACpBC,cAAepB,KAAKoB,cACpBL,aAAcf,KAAKe,aACnBM,UAAWrB,KAAKqB,UAChBC,WAAYtB,KAAKsB,WACjBC,OAAQvB,KAAKuB,OACbC,IAAKxB,KAAKwB,IACVC,OAAQzB,KAAKyB,OACbC,MAAO1B,KAAK0B,MACZC,IAAK3B,KAAK2B,IACVC,MAAO5B,KAAK4B,MACZC,qBAAsB7B,KAAK6B,qBAC3BC,UAAW9B,KAAK8B,UAChBC,cAAe/B,KAAK+B,cACpBC,MAAOhC,KAAKgC,MACZ1B,OAAQN,KAAKM,OACbQ,SAAUd,KAAKc,UAEfN,EAAA,QAAAE,IAAA,2CAAMuB,KAAK,SAASC,KAAK,Y","ignoreList":[]}
+{"version":3,"names":["defaultStyleCss","KolButtonDefaultStyle0","KolButton","this","catchRef","ref","buttonWcRef","getValue","_value","focus","kolFocus","_a","render","h","Host","key","class","KolButtonWcTag","button","_variant","_customClass","length","_accessKey","_ariaControls","_ariaExpanded","_ariaSelected","_disabled","_hideLabel","_icons","_id","_label","_name","_on","_role","_syncValueBySelector","_tabIndex","_tooltipAlign","_type","name","slot"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import '../button';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tStencilUnknown,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, Host, Method, Prop } from '@stencil/core';\nimport { KolButtonWcTag } from '../../core/component-names';\n\n@Component({\n\ttag: 'kol-button',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolButton implements ButtonProps, FocusableElement {\n\tprivate buttonWcRef?: HTMLKolButtonWcElement;\n\n\tprivate readonly catchRef = (ref?: HTMLKolButtonWcElement) => {\n\t\tthis.buttonWcRef = ref;\n\t};\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<Stringified<StencilUnknown> | undefined> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated Use kolFocus instead.\n\t */\n\t@Method()\n\tpublic async focus() {\n\t\tawait this.kolFocus();\n\t}\n\n\t@Method()\n\tpublic async kolFocus() {\n\t\tawait this.buttonWcRef?.kolFocus();\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-button\">\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tbutton: true,\n\t\t\t\t\t\t[this._variant as string]: this._variant !== 'custom',\n\t\t\t\t\t\t[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,\n\t\t\t\t\t}}\n\t\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t\t_customClass={this._customClass}\n\t\t\t\t\t_disabled={this._disabled}\n\t\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t\t_icons={this._icons}\n\t\t\t\t\t_id={this._id}\n\t\t\t\t\t_label={this._label}\n\t\t\t\t\t_name={this._name}\n\t\t\t\t\t_on={this._on}\n\t\t\t\t\t_role={this._role}\n\t\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t\t_tabIndex={this._tabIndex}\n\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t_type={this._type}\n\t\t\t\t\t_value={this._value}\n\t\t\t\t\t_variant={this._variant}\n\t\t\t\t>\n\t\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t\t</KolButtonWcTag>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the elements access key.\n\t */\n\t@Prop() public _accessKey?: AccessKeyPropType;\n\n\t/**\n\t * Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)\n\t */\n\t@Prop() public _ariaControls?: string;\n\n\t/**\n\t * Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)\n\t */\n\t@Prop() public _ariaExpanded?: boolean;\n\n\t/**\n\t * Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)\n\t */\n\t@Prop() public _ariaSelected?: boolean;\n\n\t/**\n\t * Defines the custom class attribute if _variant=\"custom\" is set.\n\t */\n\t@Prop() public _customClass?: CustomClassPropType;\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 * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: string;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: string;\n\n\t/**\n\t * Defines the callback functions for button events.\n\t */\n\t@Prop() public _on?: ButtonCallbacksPropType<StencilUnknown>;\n\n\t/**\n\t * Defines the role of the components primary element.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Defines either the type of the component or of the components interactive element.\n\t */\n\t@Prop() public _type?: ButtonTypePropType = 'button';\n\n\t/**\n\t * Defines the value that the button emits on click.\n\t */\n\t@Prop() public _value?: Stringified<StencilUnknown>;\n\n\t/**\n\t * Defines which variant should be used for presentation.\n\t */\n\t@Prop() public _variant?: ButtonVariantPropType = 'normal';\n}\n"],"mappings":";;;wGAAA,MAAMA,EAAkB,igJACxB,MAAAC,EAAeD,E,MC0BFE,EAAS,M,yBAGJC,KAAAC,SAAYC,IAC5BF,KAAKG,YAAcD,CAAG,E,4JAsFc,M,gBAOC,M,4MA8CgB,M,WAKV,S,oCAUM,Q,CArJ3C,cAAME,GACZ,OAAOJ,KAAKK,M,CAON,WAAMC,SACNN,KAAKO,U,CAIL,cAAMA,G,aACNC,EAAAR,KAAKG,eAAW,MAAAK,SAAA,SAAAA,EAAED,W,CAGlB,MAAAE,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,cACXH,EAACI,EAAc,CAAAF,IAAA,2CACdV,IAAKF,KAAKC,SACVY,MAAO,CACNE,OAAQ,KACR,CAACf,KAAKgB,UAAqBhB,KAAKgB,WAAa,SAC7C,CAAChB,KAAKiB,cAAyBjB,KAAKgB,WAAa,iBAAmBhB,KAAKiB,eAAiB,UAAYjB,KAAKiB,aAAaC,OAAS,GAElIC,WAAYnB,KAAKmB,WACjBC,cAAepB,KAAKoB,cACpBC,cAAerB,KAAKqB,cACpBC,cAAetB,KAAKsB,cACpBL,aAAcjB,KAAKiB,aACnBM,UAAWvB,KAAKuB,UAChBC,WAAYxB,KAAKwB,WACjBC,OAAQzB,KAAKyB,OACbC,IAAK1B,KAAK0B,IACVC,OAAQ3B,KAAK2B,OACbC,MAAO5B,KAAK4B,MACZC,IAAK7B,KAAK6B,IACVC,MAAO9B,KAAK8B,MACZC,qBAAsB/B,KAAK+B,qBAC3BC,UAAWhC,KAAKgC,UAChBC,cAAejC,KAAKiC,cACpBC,MAAOlC,KAAKkC,MACZ7B,OAAQL,KAAKK,OACbW,SAAUhB,KAAKgB,UAEfN,EAAA,QAAAE,IAAA,2CAAMuB,KAAK,SAASC,KAAK,Y","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-b2c61df0.js";import{t as i}from"./i18n-112381e9.js";import{w as o}from"./validation-e2c07abd.js";import{b as a,c as s}from"./component-names-068dc2ae.js";import{v as l}from"./has-closer-5575cc91.js";import{s as r}from"./prop.validators-db70e3c4.js";import{v as d}from"./label-20475610.js";import"./i18n-66b52d13.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div.card {\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",c=h,b=class{constructor(e){n(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return e(t,{key:"6a075e6c225c33dbfab5bbc6e78751eb1a2ee474",class:"kol-card"},e("div",{key:"a3aee1a0c51e4aadd5bab63252686a9adfa7cfb6",class:"card"},e("div",{key:"1f73f4e0302ba9bb5b7fb5e0cbc6b00e7a3abdde",class:"header"},e(a,{key:"0d077a8431e89744ed58c51d5e645f445e009169",_label:this.state._label,_level:this.state._level})),e("div",{key:"aef0ace6767b8978efd6a14967d51808660cdcad",class:"content"},e("slot",{key:"7fe022672f6e418364f63cb0a72dfbed09207c8e"})),this.state._hasCloser&&e(s,{key:"ff59bb6a947d9d435f4c2a2cf968daa5064ec2d3",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&r(this,"_on",{onClose:e.onClose})}validateHasCloser(e){l(this,e)}validateLabel(e){d(this,e,{required:!0})}validateLevel(e){o(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};b.style={default:c};export{b as kol_card};
+import{r as n,h as e,H as t}from"./index-22a31dab.js";import{t as i}from"./i18n-59fb5a46.js";import{w as a}from"./validation-e2c07abd.js";import{b as o,c as s}from"./component-names-3f4a13bb.js";import{v as l}from"./has-closer-5575cc91.js";import{s as r}from"./prop.validators-db70e3c4.js";import{v as d}from"./label-20475610.js";import"./i18n-3dcfca85.js";import"./reuse-108ee8f5.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const h="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  :host > div.card {\n    height: 100%;\n    position: relative;\n    /* Visible with forced colors  */\n    outline: transparent solid 1px;\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",c=h,b=class{constructor(e){n(this,e),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close"))},this.on={onClick:this.close},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose,this._on=void 0,this._hasCloser=!1,this._label=void 0,this._level=1,this.state={_label:""}}render(){return e(t,{key:"6a075e6c225c33dbfab5bbc6e78751eb1a2ee474",class:"kol-card"},e("div",{key:"a3aee1a0c51e4aadd5bab63252686a9adfa7cfb6",class:"card"},e("div",{key:"1f73f4e0302ba9bb5b7fb5e0cbc6b00e7a3abdde",class:"header"},e(o,{key:"0d077a8431e89744ed58c51d5e645f445e009169",_label:this.state._label,_level:this.state._level})),e("div",{key:"aef0ace6767b8978efd6a14967d51808660cdcad",class:"content"},e("slot",{key:"7fe022672f6e418364f63cb0a72dfbed09207c8e"})),this.state._hasCloser&&e(s,{key:"ff59bb6a947d9d435f4c2a2cf968daa5064ec2d3",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&r(this,"_on",{onClose:e.onClose})}validateHasCloser(e){l(this,e)}validateLabel(e){d(this,e,{required:!0})}validateLevel(e){a(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}};b.style={default:c};export{b as kol_card};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h as e,F as t,H as n,r as i,g as s}from"./index-b2c61df0.js";import{n as a}from"./dev.utils-a14ff412.js";import{s as o,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-b6046f95.js";import{v as d}from"./suggestions-bca6edb5.js";import{b as h,i as c}from"./prop.validators-db70e3c4.js";import{v as p,g as u}from"./controller-fd9ca791.js";import{l as b,g as f}from"./component-names-068dc2ae.js";import{I as m}from"./InternalUnderlinedAccessKey-fd8927df.js";import{t as y}from"./i18n-112381e9.js";import{s as v}from"./reuse-b66836de.js";import"./dev.utils-1ca991a2.js";import"./icons-e32ba753.js";import"./index-db4aa6e4.js";import"./associated.controller-ebcb5051.js";import"./hide-label-e6a77887.js";import"./label-20475610.js";import"./tab-index-48c227c3.js";import"./tooltip-align-6e87b293.js";import"./align-6c0a2935.js";import"./i18n-66b52d13.js";class g extends r{constructor(e,t,n){super(e,t,n),this.component=e}validateSuggestions(e){d(this.component,e)}validateRequired(e){h(this.component,"_required",e)}validateValue(e){c(this.component,"_value",e)}validateMsg(e){p(this.component,e)}validatePlaceholder(e){c(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const k="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox.disabled, .combobox.disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox.disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}",x=k,w=class{async getValue(){return this._value}selectOption(e,t){this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t}onInput(e){const t=e.target;this._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value)}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))),this._isOpen=this._filteredSuggestions&&this._filteredSuggestions.length>0)}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),n=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof n&&this.focusOption(n)}render(){const i=v(this.state._label),{ariaDescribedBy:s}=u(this.state);return e(n,{key:"6ec722d9e87bf898fb08ec7d1d41b87726d5906d",class:"kol-combobox"},e("div",{key:"469969bc4d8c1b90bebf05439d6fb1b3979cf31d",class:`combobox ${!0===this.state._disabled?"disabled":""} `},e(b,{key:"26f31df5cb2e7904a0b8210aecf705af57547cb4",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.ref)||void 0===e?void 0:e.focus()},role:"presentation"},e("span",{key:"64b9e44d46c9a8907ee3b6fd7be928f02253766f",slot:"label"},i?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(m,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"f57ea642aca3caf12523a190d439f3fd60996d4c",slot:"input"},e("div",{key:"9201b3aeb83d656da51d525e81698f3679c61267",class:"combobox__group"},e("input",Object.assign({key:"8a054f8e64e5a0573d4bda19a2fe6b201f7e2dec",class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":s.length>0?s.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onClick:this.toggleListbox.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder})),e("span",{key:"2388a17109c311a0bca3c08ba12928b794f0eb7c",class:{combobox__icon:!0}},e(f,{key:"c1161b16e198e7c4e16d267066affd78a5c7ac67",_icons:"codicon codicon-triangle-down",_label:y("kol-dropdown"),onClick:this.toggleListbox.bind(this)}))),this._isOpen&&!(!0===this.state._disabled)&&e("ul",{key:"43a849ac87f34878ded4b37e21f9836d56f53b8f",role:"listbox","aria-label":"",class:{combobox__listbox:!0},onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((t,n)=>e("li",{id:`option-${n}`,key:`-${n}`,ref:e=>{e&&(this.refSuggestions[n]=e)},"data-index":n,tabIndex:0,role:"option","aria-selected":this.state._value===t,onClick:e=>{this.selectOption(e,t),this.toggleListbox()},onMouseOver:()=>{this.focusOption(n)},onFocus:()=>{this.focusOption(n)},class:"combobox__item",onKeyDown:e=>{"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(e,t),this.toggleListbox(),e.preventDefault())}},t))))))))}handleKeyDown(e){const t=(t,n)=>{e.preventDefault(),void 0!==t&&(this._isOpen=t),null==n||n()};switch(e.key){case"Down":case"ArrowDown":t(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":t(!0,(()=>this.moveFocus(-1)));break;case"Esc":case"Escape":t(!1);break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":t(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":t(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":t(void 0,(()=>this._isOpen&&this.moveFocus(10)));break;case"PageDown":t(void 0,(()=>this._isOpen&&this.moveFocus(-10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){i(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this._value));this.focusOption(e>=0?e:0)}},this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=!0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_suggestions:[],_value:""},this.controller=new g(this,"select",this.host),this.onInput=this.onInput.bind(this)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateRequired(e){this.controller.validateRequired(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),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}onChange(e){var t;o(e),l("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this._value)}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};w.style={default:x};export{w as kol_combobox};
+import{h as e,F as t,H as i,r as n,g as s}from"./index-22a31dab.js";import{n as a}from"./dev.utils-167104e2.js";import{s as o,t as l}from"./events-29e84d75.js";import{I as r}from"./controller-icon-1fda7e70.js";import{v as d}from"./suggestions-bca6edb5.js";import{b as h,i as c}from"./prop.validators-db70e3c4.js";import{v as p,g as u}from"./controller-fd9ca791.js";import{l as b,g as f}from"./component-names-3f4a13bb.js";import{I as m}from"./InternalUnderlinedAccessKey-5c8d29fc.js";import{t as y}from"./i18n-59fb5a46.js";import{s as v,c as g}from"./reuse-108ee8f5.js";import"./dev.utils-1ca991a2.js";import"./icons-05788852.js";import"./index-db4aa6e4.js";import"./associated.controller-ebcb5051.js";import"./hide-label-e6a77887.js";import"./label-20475610.js";import"./tab-index-48c227c3.js";import"./tooltip-align-6e87b293.js";import"./align-6c0a2935.js";import"./i18n-3dcfca85.js";class k extends r{constructor(e,t,i){super(e,t,i),this.component=e}validateSuggestions(e){d(this.component,e)}validateRequired(e){h(this.component,"_required",e)}validateValue(e){c(this.component,"_value",e)}validateMsg(e){p(this.component,e)}validatePlaceholder(e){c(this.component,"_placeholder",e)}componentWillLoad(){super.componentWillLoad(),this.validateSuggestions(this.component._suggestions),this.validateRequired(this.component._required),this.validateValue(this.component._value),this.validatePlaceholder(this.component._placeholder)}}const x="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .combobox {\n    position: relative;\n  }\n  .combobox.disabled, .combobox.disabled * {\n    cursor: not-allowed !important;\n  }\n  .combobox.disabled {\n    opacity: 0.5;\n    outline: none;\n  }\n  .combobox__group {\n    display: inline-flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .combobox__input {\n    flex-grow: 1;\n  }\n  .combobox__listbox {\n    display: block;\n    position: absolute;\n    list-style-type: none;\n    margin: 0;\n    padding: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    z-index: 2;\n    background-color: white;\n    max-height: calc(250rem / var(--kolibri-root-font-size, 16));\n  }\n}",w=x,_=class{async getValue(){return this.state._value}selectOption(e,t){var i;this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t,null===(i=this.ref)||void 0===i||i.focus()}onInput(e){const t=e.target;this.state._value=t.value,this.controller.onFacade.onInput(e),this.setFilteredSuggestionsByQuery(t.value),this._focusedOptionIndex=-1}handleKeyDownDropdown(e){1===e.key.length&&/[a-z0-9]/i.test(e.key)&&(this._isOpen=!0,this.focusSuggestionStartingWith(e.key))}setFilteredSuggestionsByQuery(e){""===e.trim()?this._filteredSuggestions=[...this._suggestions]:(this._filteredSuggestions=this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))),this._isOpen=this._filteredSuggestions&&this._filteredSuggestions.length>0)}moveFocus(e){if(!this._filteredSuggestions)return;let t=this._focusedOptionIndex+e;t>=this._filteredSuggestions.length&&(t=0),t<0&&(t=this._filteredSuggestions.length-1),this.focusOption(t)}focusOption(e){if(this._focusedOptionIndex=e,this.refSuggestions){const t=this.refSuggestions[e];null==t||t.focus()}}focusSuggestionStartingWith(e){const t=e.toLowerCase(),i=Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.findIndex((e=>e.toLowerCase().startsWith(t)));"number"==typeof i&&this.focusOption(i)}render(){const n=v(this.state._label),{ariaDescribedBy:s}=u(this.state);return e(i,{key:"1152548ec37450afa0a2f0febc181cd47aa5763a",class:"kol-combobox"},e("div",{key:"44b22f52b41ba0966a34d78640b6fb4f2f9eaf67",class:`combobox ${!0===this.state._disabled?"disabled":""} `},e(b,{key:"3ad621df9bcc30796264d466e25ac3c49c47c41d",_accessKey:this.state._accessKey,_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,role:"presentation"},e("span",{key:"f72d2f867f23a75f797b716a3fcc0a6631666a44",slot:"label"},n?e("slot",{name:"expert"}):"string"==typeof this.state._accessKey?e(t,null,e(m,{accessKey:this.state._accessKey,label:this.state._label})," ",e("span",{class:"access-key-hint","aria-hidden":"true"},this.state._accessKey)):e("span",null,this.state._label)),e("div",{key:"2d0fb751ecf1494ee7bc19717651eb119000de03",slot:"input"},e("div",{key:"671cca0562f708df81cc3184a928525f19d22043",class:"combobox__group"},e("input",Object.assign({key:"ec6a7451591d74cdf8b004e2da45f6dced84c55f",ref:this.catchRef,class:"combobox__input",type:"text",role:"combobox","aria-autocomplete":"both","aria-expanded":this._isOpen?"true":"false","aria-controls":"listbox",value:this.state._value,accessKey:this.state._accessKey,"aria-describedby":s.length>0?s.join(" "):void 0,"aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,autoCapitalize:"off",autoCorrect:"off",disabled:this.state._disabled,id:this.state._id,name:this.state._name,required:this.state._required,spellcheck:"false"},this.controller.onFacade,{onInput:this.onInput.bind(this),onClick:this.toggleListbox.bind(this),onChange:this.onChange.bind(this),placeholder:this.state._placeholder})),e("span",{key:"64c05c0163cda6e266010e6319ef5ff2c2834048",class:{combobox__icon:!0}},e(f,{key:"26221707bc765f3c0dd6a1d9be33768453694d4f",_icons:"codicon codicon-triangle-down",_label:y("kol-dropdown"),onClick:this.toggleListbox.bind(this)}))),this._isOpen&&!(!0===this.state._disabled)&&e("ul",{key:"069b526a726fa264bc6b5ae6cde1623c5380db20",role:"listbox","aria-label":"",class:{combobox__listbox:!0},onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((t,i)=>e("li",{id:`option-${i}`,key:`-${i}`,ref:e=>{e&&(this.refSuggestions[i]=e)},"data-index":i,tabIndex:0,role:"option","aria-selected":this.state._value===t,onClick:e=>{this.selectOption(e,t),this.toggleListbox()},onMouseOver:()=>{this.focusOption(i)},onFocus:()=>{this.focusOption(i)},class:"combobox__item",onKeyDown:e=>{"Enter"!==e.key&&"NumpadEnter"!==e.key||(this.selectOption(e,t),this.toggleListbox(),e.preventDefault())}},t))))))))}handleKeyDown(e){const t=(t,i)=>{var n;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(n=this.ref)||void 0===n||n.focus()),null==i||i()};switch(e.key){case"Down":case"ArrowDown":t(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":t(!0,(()=>this.moveFocus(-1)));break;case"Esc":case"Escape":t(!1);break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":t(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":t(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":t(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":t(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){n(this,e),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,this._isOpen&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){const e=this._filteredSuggestions.findIndex((e=>e===this.state._value));this._focusedOptionIndex=e>=0?e:0,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.ref=e,g(this.host,this.ref)},this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=!0,this._disabled=!1,this._hideError=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._suggestions=void 0,this._required=!1,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${a()}`,_label:"",_suggestions:[],_value:""},this.controller=new k(this,"select",this.host),this.onInput=this.onInput.bind(this)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAlert(e){this.controller.validateAlert(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideError(e){this.controller.validateHideError(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateSuggestions(e){this.controller.validateSuggestions(e)}validateRequired(e){this.controller.validateRequired(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),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],this._alert=!0===this._alert,this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener((e=>this.state._hasValue=!!e)),this._filteredSuggestions=this.state._suggestions}onChange(e){var t;o(e),l("change",this.host,this._value),this.controller.setFormAssociatedValue(this._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this._value)}get host(){return s(this)}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_alert:["validateAlert"],_disabled:["validateDisabled"],_hideError:["validateHideError"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}};_.style={default:w};export{_ as kol_combobox};

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

@@ -1 +1 @@
-{"version":3,"names":["ComboboxController","InputIconController","constructor","component","name","host","super","this","validateSuggestions","value","validateRequired","watchBoolean","validateValue","watchString","validateMsg","validatePlaceholder","componentWillLoad","_suggestions","_required","_value","_placeholder","defaultStyleCss","KolComboboxDefaultStyle0","KolCombobox","getValue","selectOption","event","option","controller","onFacade","onInput","onChange","setFormAssociatedValue","state","target","setFilteredSuggestionsByQuery","handleKeyDownDropdown","key","length","test","_isOpen","focusSuggestionStartingWith","query","trim","_filteredSuggestions","filter","toLowerCase","includes","moveFocus","delta","newIndex","_focusedOptionIndex","focusOption","index","refSuggestions","optionElement","focus","char","charLowerCase","Array","isArray","findIndex","startsWith","render","hasExpertSlot","showExpertSlot","_label","ariaDescribedBy","getRenderStates","h","Host","class","_disabled","KolInputWcTag","_accessKey","_hideError","_hideLabel","_hint","_icons","_id","_msg","_tooltipAlign","_touched","onClick","_a","ref","role","slot","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","type","join","undefined","autoCapitalize","autoCorrect","disabled","id","_name","required","spellcheck","bind","toggleListbox","placeholder","combobox__icon","KolIconTag","translate","combobox__listbox","onKeyDown","map","el","tabIndex","e","onMouseOver","onFocus","preventDefault","handleKeyDown","handleEvent","isOpen","callback","handleWindowClick","contains","hostRef","selectedIndex","_hasValue","nonce","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v","stopPropagation","tryToDispatchKoliBriEvent","_on"],"sources":["src/components/combobox/controller.ts","src/components/combobox/style.scss?tag=kol-combobox&mode=default&encapsulation=shadow","src/components/combobox/shadow.tsx"],"sourcesContent":["import type { ComboboxWatches, ComboboxProps, SuggestionsPropType, MsgPropType } from '../../schema';\nimport { watchBoolean, validateSuggestions, watchString, validateMsg } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class ComboboxController extends InputIconController implements ComboboxWatches {\n\tprotected readonly component: Generic.Element.Component & ComboboxProps;\n\n\tpublic constructor(component: Generic.Element.Component & ComboboxProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tvalidateMsg(this.component, value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../input-line';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.combobox {\n\t\tposition: relative;\n\t\t&.disabled,\n\t\t&.disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\t\t&.disabled {\n\t\t\topacity: 0.5;\n\t\t\toutline: none;\n\t\t}\n\t\t&__group {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&__input {\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__listbox {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\toverflow-y: auto;\n\t\t\toverflow-x: hidden;\n\t\t\tz-index: 2;\n\t\t\tbackground-color: white;\n\t\t\tmax-height: rem(250);\n\t\t}\n\t}\n}\n","import type {\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tComboboxAPI,\n\tComboboxStates,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tSuggestionsPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { Component, Element, h, Host, Method, Prop, State, Watch, Fragment, Listen } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { ComboboxController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolInputWcTag } from '../../core/component-names';\nimport { showExpertSlot } from '../../schema';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { getRenderStates } from '../input/controller';\nimport { translate } from '../../i18n';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-combobox',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCombobox implements ComboboxAPI {\n\t@Element() private readonly host?: HTMLKolComboboxElement;\n\tprivate ref?: HTMLSelectElement;\n\tprivate refSuggestions: HTMLLIElement[] = [];\n\tprivate _focusedOptionIndex: number = -1;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this._value;\n\t}\n\n\tprivate toggleListbox = () => {\n\t\tif (this.state._disabled === true) {\n\t\t\tthis._isOpen = false;\n\t\t} else {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tif (this._isOpen && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {\n\t\t\t\tconst selectedIndex = this._filteredSuggestions.findIndex((option) => option === this._value);\n\t\t\t\tthis.focusOption(selectedIndex >= 0 ? selectedIndex : 0);\n\t\t\t}\n\t\t}\n\t};\n\n\tprivate selectOption(event: Event, option: string) {\n\t\tthis.controller.onFacade.onInput(event, true, option);\n\t\tthis.controller.onFacade.onChange(event, option);\n\t\tthis.controller.setFormAssociatedValue(option);\n\t\tthis.state._value = option;\n\t}\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis._value = target.value;\n\t\tthis.controller.onFacade.onInput(event);\n\t\tthis.setFilteredSuggestionsByQuery(target.value);\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredSuggestionsByQuery(query: string) {\n\t\tif (query.trim() === '') {\n\t\t\tthis._filteredSuggestions = [...this._suggestions];\n\t\t} else {\n\t\t\tthis._filteredSuggestions = this._suggestions.filter((option: string) => {\n\t\t\t\treturn option.toLowerCase().includes(query.toLowerCase());\n\t\t\t});\n\n\t\t\tthis._isOpen = this._filteredSuggestions && this._filteredSuggestions.length > 0;\n\t\t}\n\t}\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredSuggestions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredSuggestions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredSuggestions.length - 1;\n\t\t}\n\n\t\tthis.focusOption(newIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tthis._focusedOptionIndex = index;\n\t\tif (this.refSuggestions) {\n\t\t\tconst optionElement = this.refSuggestions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredSuggestions) &&\n\t\t\tthis._filteredSuggestions.length > 0 &&\n\t\t\tthis._filteredSuggestions.findIndex((option: W3CInputValue) => (option as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-combobox\">\n\t\t\t\t<div class={`combobox ${this.state._disabled === true ? 'disabled' : ''} `}>\n\t\t\t\t\t<KolInputWcTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\tonClick={() => this.ref?.focus()}\n\t\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t<div class=\"combobox__group\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tclass=\"combobox__input\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\t\t\taria-expanded={this._isOpen ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\taria-controls=\"listbox\"\n\t\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\t\taria-labelledby={this.state._id}\n\t\t\t\t\t\t\t\t\taria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}\n\t\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\t\tonClick={this.toggleListbox.bind(this)}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<span class={{ combobox__icon: true }}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} onClick={this.toggleListbox.bind(this)} />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t\t\t<ul role=\"listbox\" aria-label=\"\" class={{ combobox__listbox: true }} onKeyDown={this.handleKeyDownDropdown.bind(this)}>\n\t\t\t\t\t\t\t\t\t{Array.isArray(this._filteredSuggestions) &&\n\t\t\t\t\t\t\t\t\t\tthis._filteredSuggestions.length > 0 &&\n\t\t\t\t\t\t\t\t\t\tthis._filteredSuggestions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tid={`option-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) this.refSuggestions[index] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-selected={this.state._value === option}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as string);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"combobox__item\"\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as string);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolInputWcTag>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis.focusOption(0);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: ComboboxController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _filteredSuggestions?: SuggestionsPropType;\n\n\t@Listen('click', { target: 'window' })\n\thandleWindowClick(event: MouseEvent) {\n\t\tif (this.host != undefined && !this.host.contains(event.target as Node)) {\n\t\t\tthis._isOpen = false;\n\t\t}\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\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 * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Suggestions the user can choose from.\n\t */\n\t@Prop() public _suggestions!: string[];\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: ComboboxStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_value: '',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new ComboboxController(this, 'select', this.host);\n\t\tthis.onInput = this.onInput.bind(this);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.controller.setFormAssociatedValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refSuggestions = [];\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t\tthis._filteredSuggestions = this.state._suggestions;\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function' && !this._isOpen) {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["ComboboxController","InputIconController","constructor","component","name","host","super","this","validateSuggestions","value","validateRequired","watchBoolean","validateValue","watchString","validateMsg","validatePlaceholder","componentWillLoad","_suggestions","_required","_value","_placeholder","defaultStyleCss","KolComboboxDefaultStyle0","KolCombobox","getValue","state","selectOption","event","option","controller","onFacade","onInput","onChange","setFormAssociatedValue","_a","ref","focus","target","setFilteredSuggestionsByQuery","_focusedOptionIndex","handleKeyDownDropdown","key","length","test","_isOpen","focusSuggestionStartingWith","query","trim","_filteredSuggestions","filter","toLowerCase","includes","moveFocus","delta","newIndex","focusOption","index","refSuggestions","optionElement","char","charLowerCase","Array","isArray","findIndex","startsWith","render","hasExpertSlot","showExpertSlot","_label","ariaDescribedBy","getRenderStates","h","Host","class","_disabled","KolInputWcTag","_accessKey","_hideError","_hideLabel","_hint","_icons","_id","_msg","_tooltipAlign","_touched","role","slot","Fragment","InternalUnderlinedAccessKey","accessKey","label","Object","assign","catchRef","type","join","undefined","autoCapitalize","autoCorrect","disabled","id","_name","required","spellcheck","bind","onClick","toggleListbox","placeholder","combobox__icon","KolIconTag","translate","combobox__listbox","onKeyDown","map","el","tabIndex","e","onMouseOver","onFocus","preventDefault","handleKeyDown","handleEvent","isOpen","callback","handleWindowClick","contains","hostRef","selectedIndex","propagateFocus","_hasValue","nonce","validateAccessKey","validateAlert","validateDisabled","validateHideError","validateHideLabel","validateHint","validateIcons","validateId","validateLabel","validateName","validateOn","validateSyncValueBySelector","validateTabIndex","validateTouched","_alert","addValueChangeListener","v","stopPropagation","tryToDispatchKoliBriEvent","_on"],"sources":["src/components/combobox/controller.ts","src/components/combobox/style.scss?tag=kol-combobox&mode=default&encapsulation=shadow","src/components/combobox/shadow.tsx"],"sourcesContent":["import type { ComboboxWatches, ComboboxProps, SuggestionsPropType, MsgPropType } from '../../schema';\nimport { watchBoolean, validateSuggestions, watchString, validateMsg } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\nexport class ComboboxController extends InputIconController implements ComboboxWatches {\n\tprotected readonly component: Generic.Element.Component & ComboboxProps;\n\n\tpublic constructor(component: Generic.Element.Component & ComboboxProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tvalidateMsg(this.component, value);\n\t}\n\n\tpublic validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateValue(this.component._value);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../input-line';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t.combobox {\n\t\tposition: relative;\n\t\t&.disabled,\n\t\t&.disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\t\t&.disabled {\n\t\t\topacity: 0.5;\n\t\t\toutline: none;\n\t\t}\n\t\t&__group {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tcursor: pointer;\n\t\t}\n\n\t\t&__input {\n\t\t\tflex-grow: 1;\n\t\t}\n\n\t\t&__listbox {\n\t\t\tdisplay: block;\n\t\t\tposition: absolute;\n\t\t\tlist-style-type: none;\n\t\t\tmargin: 0;\n\t\t\tpadding: 0;\n\t\t\toverflow-y: auto;\n\t\t\toverflow-x: hidden;\n\t\t\tz-index: 2;\n\t\t\tbackground-color: white;\n\t\t\tmax-height: rem(250);\n\t\t}\n\t}\n}\n","import type {\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tComboboxAPI,\n\tComboboxStates,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tSuggestionsPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { Component, Element, h, Host, Method, Prop, State, Watch, Fragment, Listen } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { ComboboxController } from './controller';\n\nimport type { JSX } from '@stencil/core';\nimport { KolIconTag, KolInputWcTag } from '../../core/component-names';\nimport { propagateFocus, showExpertSlot } from '../../schema';\nimport { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey';\nimport { getRenderStates } from '../input/controller';\nimport { translate } from '../../i18n';\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-combobox',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCombobox implements ComboboxAPI {\n\t@Element() private readonly host?: HTMLKolComboboxElement;\n\tprivate ref?: HTMLInputElement;\n\tprivate refSuggestions: HTMLLIElement[] = [];\n\tprivate _focusedOptionIndex: number = -1;\n\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string | undefined> {\n\t\treturn this.state._value;\n\t}\n\n\tprivate toggleListbox = () => {\n\t\tif (this.state._disabled === true) {\n\t\t\tthis._isOpen = false;\n\t\t} else {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tif (this._isOpen && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {\n\t\t\t\tconst selectedIndex = this._filteredSuggestions.findIndex((option) => option === this.state._value);\n\t\t\t\tthis._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : 0;\n\t\t\t\tthis.focusOption(this._focusedOptionIndex);\n\t\t\t}\n\t\t}\n\t};\n\tprivate readonly catchRef = (ref?: HTMLInputElement) => {\n\t\tthis.ref = ref;\n\t\tpropagateFocus(this.host, this.ref);\n\t};\n\n\tprivate selectOption(event: Event, option: string) {\n\t\tthis.controller.onFacade.onInput(event, true, option);\n\t\tthis.controller.onFacade.onChange(event, option);\n\t\tthis.controller.setFormAssociatedValue(option);\n\t\tthis.state._value = option;\n\t\tthis.ref?.focus();\n\t}\n\tprivate onInput(event: Event) {\n\t\tconst target = event.target as HTMLInputElement;\n\t\tthis.state._value = target.value;\n\t\tthis.controller.onFacade.onInput(event);\n\t\tthis.setFilteredSuggestionsByQuery(target.value);\n\t\tthis._focusedOptionIndex = -1;\n\t}\n\n\tprivate handleKeyDownDropdown(event: KeyboardEvent) {\n\t\tif (event.key.length === 1 && /[a-z0-9]/i.test(event.key)) {\n\t\t\tthis._isOpen = true;\n\t\t\tthis.focusSuggestionStartingWith(event.key);\n\t\t}\n\t}\n\n\tprivate setFilteredSuggestionsByQuery(query: string) {\n\t\tif (query.trim() === '') {\n\t\t\tthis._filteredSuggestions = [...this._suggestions];\n\t\t} else {\n\t\t\tthis._filteredSuggestions = this._suggestions.filter((option: string) => {\n\t\t\t\treturn option.toLowerCase().includes(query.toLowerCase());\n\t\t\t});\n\n\t\t\tthis._isOpen = this._filteredSuggestions && this._filteredSuggestions.length > 0;\n\t\t}\n\t}\n\n\tprivate moveFocus(delta: number) {\n\t\tif (!this._filteredSuggestions) {\n\t\t\treturn;\n\t\t}\n\t\tlet newIndex = this._focusedOptionIndex + delta;\n\n\t\tif (newIndex >= this._filteredSuggestions.length) {\n\t\t\tnewIndex = 0;\n\t\t}\n\n\t\tif (newIndex < 0) {\n\t\t\tnewIndex = this._filteredSuggestions.length - 1;\n\t\t}\n\n\t\tthis.focusOption(newIndex);\n\t}\n\n\tprivate focusOption(index: number) {\n\t\tthis._focusedOptionIndex = index;\n\t\tif (this.refSuggestions) {\n\t\t\tconst optionElement = this.refSuggestions[index];\n\t\t\toptionElement?.focus();\n\t\t}\n\t}\n\n\tprivate focusSuggestionStartingWith(char: string) {\n\t\tconst charLowerCase = char.toLowerCase();\n\n\t\tconst index =\n\t\t\tArray.isArray(this._filteredSuggestions) &&\n\t\t\tthis._filteredSuggestions.length > 0 &&\n\t\t\tthis._filteredSuggestions.findIndex((option: W3CInputValue) => (option as string).toLowerCase().startsWith(charLowerCase));\n\n\t\tif (typeof index === 'number') {\n\t\t\tthis.focusOption(index);\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst hasExpertSlot = showExpertSlot(this.state._label);\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\n\t\treturn (\n\t\t\t<Host class=\"kol-combobox\">\n\t\t\t\t<div class={`combobox ${this.state._disabled === true ? 'disabled' : ''} `}>\n\t\t\t\t\t<KolInputWcTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_disabled={this.state._disabled}\n\t\t\t\t\t\t_hideError={this.state._hideError}\n\t\t\t\t\t\t_hideLabel={this.state._hideLabel}\n\t\t\t\t\t\t_hint={this.state._hint}\n\t\t\t\t\t\t_icons={this.state._icons}\n\t\t\t\t\t\t_id={this.state._id}\n\t\t\t\t\t\t_label={this.state._label}\n\t\t\t\t\t\t_msg={this.state._msg}\n\t\t\t\t\t\t_required={this.state._required}\n\t\t\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t\t\t_touched={this.state._touched}\n\t\t\t\t\t\trole={`presentation` /* Avoid element being read as 'clickable' in NVDA */}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span slot=\"label\">\n\t\t\t\t\t\t\t{hasExpertSlot ? (\n\t\t\t\t\t\t\t\t<slot name=\"expert\"></slot>\n\t\t\t\t\t\t\t) : typeof this.state._accessKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedAccessKey accessKey={this.state._accessKey} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{this.state._accessKey}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<div slot=\"input\">\n\t\t\t\t\t\t\t<div class=\"combobox__group\">\n\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\tref={this.catchRef}\n\t\t\t\t\t\t\t\t\tclass=\"combobox__input\"\n\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t\t\t\taria-autocomplete=\"both\"\n\t\t\t\t\t\t\t\t\taria-expanded={this._isOpen ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\taria-controls=\"listbox\"\n\t\t\t\t\t\t\t\t\tvalue={this.state._value}\n\t\t\t\t\t\t\t\t\taccessKey={this.state._accessKey}\n\t\t\t\t\t\t\t\t\taria-describedby={ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined}\n\t\t\t\t\t\t\t\t\taria-label={this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined}\n\t\t\t\t\t\t\t\t\taria-labelledby={this.state._id}\n\t\t\t\t\t\t\t\t\taria-activedescendant={this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined}\n\t\t\t\t\t\t\t\t\tautoCapitalize=\"off\"\n\t\t\t\t\t\t\t\t\tautoCorrect=\"off\"\n\t\t\t\t\t\t\t\t\tdisabled={this.state._disabled}\n\t\t\t\t\t\t\t\t\tid={this.state._id}\n\t\t\t\t\t\t\t\t\tname={this.state._name}\n\t\t\t\t\t\t\t\t\trequired={this.state._required}\n\t\t\t\t\t\t\t\t\tspellcheck=\"false\"\n\t\t\t\t\t\t\t\t\t{...this.controller.onFacade}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.bind(this)}\n\t\t\t\t\t\t\t\t\tonClick={this.toggleListbox.bind(this)}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tplaceholder={this.state._placeholder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<span class={{ combobox__icon: true }}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} onClick={this.toggleListbox.bind(this)} />\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{this._isOpen && !(this.state._disabled === true) && (\n\t\t\t\t\t\t\t\t<ul role=\"listbox\" aria-label=\"\" class={{ combobox__listbox: true }} onKeyDown={this.handleKeyDownDropdown.bind(this)}>\n\t\t\t\t\t\t\t\t\t{Array.isArray(this._filteredSuggestions) &&\n\t\t\t\t\t\t\t\t\t\tthis._filteredSuggestions.length > 0 &&\n\t\t\t\t\t\t\t\t\t\tthis._filteredSuggestions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\tid={`option-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={`-${index}`}\n\t\t\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (el) this.refSuggestions[index] = el;\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-index={index}\n\t\t\t\t\t\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-selected={this.state._value === option}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as string);\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"combobox__item\"\n\t\t\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (e.key === 'Enter' || e.key === 'NumpadEnter') {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(e, option as string);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t\t\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</KolInputWcTag>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t@Listen('keydown')\n\tpublic handleKeyDown(event: KeyboardEvent) {\n\t\tconst handleEvent = (isOpen?: boolean, callback?: () => void): void => {\n\t\t\tevent.preventDefault();\n\t\t\tif (isOpen !== undefined) {\n\t\t\t\tthis._isOpen = isOpen;\n\t\t\t\tif (!isOpen) {\n\t\t\t\t\tthis.ref?.focus();\n\t\t\t\t}\n\t\t\t}\n\t\t\tcallback?.();\n\t\t};\n\t\tswitch (event.key) {\n\t\t\tcase 'Down':\n\t\t\tcase 'ArrowDown': {\n\t\t\t\thandleEvent(true, () => this.moveFocus(1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Up':\n\t\t\tcase 'ArrowUp': {\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\thandleEvent(false);\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tthis.toggleListbox();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis.focusOption(0);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'End': {\n\t\t\t\thandleEvent(undefined, () => {\n\t\t\t\t\tif (this._isOpen) {\n\t\t\t\t\t\tthis.focusOption(this._filteredSuggestions ? this._filteredSuggestions.length - 1 : 0);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageUp': {\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(-10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'PageDown': {\n\t\t\t\thandleEvent(undefined, () => this._isOpen && this.moveFocus(10));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly controller: ComboboxController;\n\t@State()\n\tprivate _isOpen = false;\n\t@State()\n\tprivate _filteredSuggestions?: SuggestionsPropType;\n\n\t@Listen('click', { target: 'window' })\n\thandleWindowClick(event: MouseEvent) {\n\t\tif (this.host != undefined && !this.host.contains(event.target as Node)) {\n\t\t\tthis._isOpen = false;\n\t\t}\n\t}\n\n\t/**\n\t * Defines which key combination can be used to trigger or focus the interactive element of the component.\n\t */\n\t@Prop() public _accessKey?: string;\n\n\t/**\n\t * Defines the placeholder for input field. To be shown when there's no value.\n\t */\n\t@Prop() public _placeholder?: string;\n\n\t/**\n\t * Defines whether the screen-readers should read out the notification.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean = true;\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 * Hides the error message but leaves it in the DOM for the input's aria-describedby.\n\t * @TODO: Change type back to `HideErrorPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _hideError?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: Stringified<KoliBriHorizontalIcons>;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: MsgPropType;\n\n\t/**\n\t * Defines the technical name of an input field.\n\t */\n\t@Prop() public _name?: NamePropType;\n\n\t/**\n\t * Gibt die EventCallback-Funktionen für das Input-Event an.\n\t */\n\t@Prop() public _on?: InputTypeOnDefault;\n\n\t/**\n\t * Suggestions the user can choose from.\n\t */\n\t@Prop() public _suggestions!: string[];\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Selector for synchronizing the value with another input element.\n\t * @internal\n\t */\n\t@Prop() public _syncValueBySelector?: SyncValueBySelectorPropType;\n\n\t/**\n\t * Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)\n\t */\n\t@Prop() public _tabIndex?: number;\n\n\t/**\n\t * Defines where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true }) public _value?: string;\n\n\t@State() public state: ComboboxStates = {\n\t\t_hasValue: false,\n\t\t_hideError: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_value: '',\n\t};\n\n\tpublic constructor() {\n\t\tthis.controller = new ComboboxController(this, 'select', this.host);\n\t\tthis.onInput = this.onInput.bind(this);\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: string): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_accessKey')\n\tpublic validateAccessKey(value?: string): void {\n\t\tthis.controller.validateAccessKey(value);\n\t}\n\n\t@Watch('_alert')\n\tpublic validateAlert(value?: boolean): void {\n\t\tthis.controller.validateAlert(value);\n\t}\n\n\t@Watch('_disabled')\n\tpublic validateDisabled(value?: boolean): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideError')\n\tpublic validateHideError(value?: HideErrorPropType): void {\n\t\tthis.controller.validateHideError(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: boolean): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: string): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: Stringified<KoliBriHorizontalIcons>): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: MsgPropType): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_name')\n\tpublic validateName(value?: string): void {\n\t\tthis.controller.validateName(value);\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: InputTypeOnDefault): void {\n\t\tthis.controller.validateOn(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: boolean): void {\n\t\tthis.controller.validateRequired(value);\n\t}\n\n\t@Watch('_syncValueBySelector')\n\tpublic validateSyncValueBySelector(value?: SyncValueBySelectorPropType): void {\n\t\tthis.controller.validateSyncValueBySelector(value);\n\t}\n\n\t@Watch('_tabIndex')\n\tpublic validateTabIndex(value?: number): void {\n\t\tthis.controller.validateTabIndex(value);\n\t}\n\n\t@Watch('_touched')\n\tpublic validateTouched(value?: boolean): void {\n\t\tthis.controller.validateTouched(value);\n\t}\n\n\t@Watch('_value')\n\tpublic validateValue(value?: string): void {\n\t\tthis.controller.validateValue(value);\n\t\tthis.controller.setFormAssociatedValue(value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.refSuggestions = [];\n\t\tthis._alert = this._alert === true;\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t\tthis._filteredSuggestions = this.state._suggestions;\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\t// Event handling\n\t\tstopPropagation(event);\n\t\ttryToDispatchKoliBriEvent('change', this.host, this._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this._value as unknown as string);\n\n\t\t// Callback\n\t\tif (typeof this.state._on?.onChange === 'function' && !this._isOpen) {\n\t\t\tthis.state._on.onChange(event, this._value);\n\t\t}\n\t}\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t,g as i}from"./index-b2c61df0.js";import{p as s,t as o}from"./events-29e84d75.js";import{g as a,j as l}from"./component-names-068dc2ae.js";import{a as d}from"./reuse-b66836de.js";import{v as r}from"./disabled-ecc9abfc.js";import{v as h}from"./label-20475610.js";import{s as c}from"./prop.validators-db70e3c4.js";import{v as p}from"./open-5b527658.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";class f{constructor(e,n,t){this.detailsElement=e,this.summaryElement=n,this.contentElement=t,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(e){e.preventDefault(),this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateContentHeight("expand")}collapse(){this.isClosing=!0,this.animateContentHeight("collapse")}animateContentHeight(e){let n="expand"===e?0:this.contentElement.offsetHeight,t="expand"===e?this.contentElement.offsetHeight:0;this.animation&&(n=this.contentElement.offsetHeight,this.animation.cancel(),"expand"===e&&(t=this.contentElement.offsetHeight)),this.animation=this.contentElement.animate({height:[`${n}px`,`${t}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===e?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1}}const m="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  details {\n    display: grid;\n  }\n  details > summary {\n    cursor: pointer;\n    display: flex;\n    place-items: center;\n  }\n  details > summary > span {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  details > summary:focus > span,\n  details > summary:hover > span,\n  details[open] > summary > span {\n    border-bottom-color: #000;\n  }\n  .content {\n    overflow: hidden;\n  }\n  details > .kol-indented-text {\n    margin: 0.25em 0 0 0.5em;\n  }\n  .icon.is-open::part(icon) {\n    transform: rotate(90deg);\n  }\n}",u=m,b=class{constructor(e){n(this,e),this.catchDetails=e=>{this.detailsElement=e},this.catchSummary=e=>{this.summaryElement=e,d(this.host,this.summaryElement)},this.preventToggleIfDisabled=e=>{!0===this.state._disabled&&s(e)},this.handleToggle=e=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var n,t,i,s;Boolean(null===(n=this.detailsElement)||void 0===n?void 0:n.open)!==this.state._open&&(this._open=Boolean(null===(t=this.detailsElement)||void 0===t?void 0:t.open),o("toggle",this.host,this._open),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onToggle)&&(null===(s=this.state._on)||void 0===s||s.onToggle(e,this._open)))}),25)},this._disabled=!1,this._label=void 0,this._on=void 0,this._open=!1,this.state={_label:"",_on:{}}}render(){return e(t,{key:"4ad8208280a549ec10c547b20ddb003e04e68f01",class:"kol-details"},e("details",{key:"229ce17a1772bed26309a249a4326152edbe4e6e",ref:this.catchDetails,class:{disabled:!0===this.state._disabled,open:!0===this.state._open},onToggle:this.handleToggle},e("summary",{key:"727bb07a088a3138ff4fc29ee6fe43bcf9543379",ref:this.catchSummary,"aria-disabled":this.state._disabled?"true":void 0,onClick:this.preventToggleIfDisabled,onKeyPress:this.preventToggleIfDisabled,tabIndex:this.state._disabled?-1:void 0},e(a,{key:"5ecf957e42408222a4fbd78c2a9974c6c6880bc9",_label:"",_icons:"codicon codicon-chevron-right",class:"icon "+(this.state._open?"is-open":"")}),e("span",{key:"2efa00fd37325648edd0c430db88a1d6f73d270c"},this.state._label)),e("div",{key:"1d527e8caeb3c9458ecde81c4c779c505ed19dc4","aria-hidden":!1===this.state._open?"true":void 0,class:"content",ref:e=>this.contentElement=e},e(l,{key:"6f57d85524db46b0a381e535b7e280ca92483ce7"},e("slot",{key:"518dd2d74ae80a0de06efcbd1097aa8e72de5db1"})))))}validateDisabled(e){r(this,e)}validateLabel(e){h(this,e,{required:!0})}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onToggle&&c(this,"_on",e)}validateOpen(e){p(this,e)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const e=new f(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&e.open()}}get host(){return i(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"]}}};b.style={default:u};export{b as kol_details};
+import{r as n,h as e,H as t,g as i}from"./index-22a31dab.js";import{p as s,t as a}from"./events-29e84d75.js";import{g as o,j as l}from"./component-names-3f4a13bb.js";import{v as r}from"./disabled-ecc9abfc.js";import{v as d}from"./label-20475610.js";import{s as h}from"./prop.validators-db70e3c4.js";import{v as c}from"./open-5b527658.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";class f{constructor(e,n,t){this.detailsElement=e,this.summaryElement=n,this.contentElement=t,this.isClosing=!1,this.isExpanding=!1,this.summaryElement.addEventListener("click",this.handleSummaryClick.bind(this))}handleSummaryClick(e){e.preventDefault(),this.isClosing||!this.detailsElement.open?this.open():(this.isExpanding||this.detailsElement.open)&&this.collapse()}open(){this.detailsElement.open=!0,window.requestAnimationFrame(this.expand.bind(this))}expand(){this.isExpanding=!0,this.animateContentHeight("expand")}collapse(){this.isClosing=!0,this.animateContentHeight("collapse")}animateContentHeight(e){let n="expand"===e?0:this.contentElement.offsetHeight,t="expand"===e?this.contentElement.offsetHeight:0;this.animation&&(n=this.contentElement.offsetHeight,this.animation.cancel(),"expand"===e&&(t=this.contentElement.offsetHeight)),this.animation=this.contentElement.animate({height:[`${n}px`,`${t}px`]},{duration:matchMedia("(prefers-reduced-motion)").matches?0:250,easing:"ease-out"}),this.animation.addEventListener("finish",(()=>{this.onAnimationFinish()}),{once:!0}),this.animation.addEventListener("cancel",(()=>{"expand"===e?this.isExpanding=!1:this.isClosing=!1}),{once:!0})}onAnimationFinish(){this.detailsElement.open=this.isExpanding,this.animation=void 0,this.isClosing=!1,this.isExpanding=!1}}const p="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  details {\n    display: grid;\n  }\n  details > summary {\n    cursor: pointer;\n    display: flex;\n    place-items: center;\n  }\n  details > summary > span {\n    border-bottom-color: grey;\n    border-bottom-style: solid;\n  }\n  details > summary:focus > span,\n  details > summary:hover > span,\n  details[open] > summary > span {\n    border-bottom-color: #000;\n  }\n  .content {\n    overflow: hidden;\n  }\n  details > .kol-indented-text {\n    margin: 0.25em 0 0 0.5em;\n  }\n  .icon.is-open::part(icon) {\n    transform: rotate(90deg);\n  }\n}",u=p,b=class{constructor(e){n(this,e),this.catchDetails=e=>{this.detailsElement=e},this.catchSummary=e=>{this.summaryElement=e},this.preventToggleIfDisabled=e=>{!0===this.state._disabled&&s(e)},this.handleToggle=e=>{clearTimeout(this.toggleTimeout),this.toggleTimeout=setTimeout((()=>{var n,t,i,s;Boolean(null===(n=this.detailsElement)||void 0===n?void 0:n.open)!==this.state._open&&(this._open=Boolean(null===(t=this.detailsElement)||void 0===t?void 0:t.open),a("toggle",this.host,this._open),"function"==typeof(null===(i=this.state._on)||void 0===i?void 0:i.onToggle)&&(null===(s=this.state._on)||void 0===s||s.onToggle(e,this._open)))}),25)},this._disabled=!1,this._label=void 0,this._on=void 0,this._open=!1,this.state={_label:"",_on:{}}}async focus(){await this.kolFocus()}async kolFocus(){var e;null===(e=this.summaryElement)||void 0===e||e.focus()}render(){return e(t,{key:"c81f22ea30774221c48f71dba31670c1a227ff05",class:"kol-details"},e("details",{key:"1f638cd9c47d989195b15708096a9c2652a3b97a",ref:this.catchDetails,class:{disabled:!0===this.state._disabled,open:!0===this.state._open},onToggle:this.handleToggle},e("summary",{key:"b78004a89667175bf308f0a239780c15b39d313c",ref:this.catchSummary,"aria-disabled":this.state._disabled?"true":void 0,onClick:this.preventToggleIfDisabled,onKeyPress:this.preventToggleIfDisabled,tabIndex:this.state._disabled?-1:void 0},e(o,{key:"69310b844d6f1b5feba60fc77aec6b4b3ba3ed3f",_label:"",_icons:"codicon codicon-chevron-right",class:"icon "+(this.state._open?"is-open":"")}),e("span",{key:"b2cfadced810939b201c79a31051a854a276375a"},this.state._label)),e("div",{key:"3f237b2a06e1f72f11879d3d96c3557efb14810c","aria-hidden":!1===this.state._open?"true":void 0,class:"content",ref:e=>this.contentElement=e},e(l,{key:"85386e4ed2bd9566df2c2cbea897fc67985b0d3f"},e("slot",{key:"06ae87dccb0fcc5833d28d56887a7f5eefb82211"})))))}validateDisabled(e){r(this,e)}validateLabel(e){d(this,e,{required:!0})}validateOn(e){"object"==typeof e&&null!==e&&"function"==typeof e.onToggle&&h(this,"_on",e)}validateOpen(e){c(this,e)}componentWillLoad(){this.validateDisabled(this._disabled),this.validateLabel(this._label),this.validateOn(this._on),this.validateOpen(this._open)}componentDidLoad(){if(this.detailsElement&&this.summaryElement&&this.contentElement){const e=new f(this.detailsElement,this.summaryElement,this.contentElement);this.state._open&&e.open()}}get host(){return i(this)}static get watchers(){return{_disabled:["validateDisabled"],_label:["validateLabel"],_on:["validateOn"],_open:["validateOpen"]}}};b.style={default:u};export{b as kol_details};

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

@@ -1 +1 @@
-{"version":3,"names":["DetailsAnimationController","constructor","detailsElement","summaryElement","contentElement","this","isClosing","isExpanding","addEventListener","handleSummaryClick","bind","event","preventDefault","open","collapse","window","requestAnimationFrame","expand","animateContentHeight","direction","startHeight","offsetHeight","endHeight","animation","cancel","animate","height","duration","matchMedia","matches","easing","onAnimationFinish","once","undefined","defaultStyleCss","KolDetailsDefaultStyle0","KolDetails","catchDetails","ref","catchSummary","propagateFocus","host","preventToggleIfDisabled","state","_disabled","preventDefaultAndStopPropagation","handleToggle","clearTimeout","toggleTimeout","setTimeout","Boolean","_a","_open","_b","tryToDispatchKoliBriEvent","_c","_on","onToggle","_d","_label","render","h","Host","key","class","disabled","onClick","onKeyPress","tabIndex","KolIconTag","_icons","element","KolIndentedTextTag","validateDisabled","value","validateLabel","required","validateOn","on","setState","validateOpen","componentWillLoad","componentDidLoad","animationController"],"sources":["src/components/details/DetailsAnimationController.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["/* Heavily inspired by: https://codepen.io/Mamboleoo/pen/QWEpLqm  */\n\nexport class DetailsAnimationController {\n\tprivate animation?: Animation;\n\tprivate isClosing = false;\n\tprivate isExpanding = false;\n\n\tconstructor(\n\t\tprivate detailsElement: HTMLDetailsElement,\n\t\tprivate summaryElement: HTMLElement,\n\t\tprivate contentElement: HTMLElement,\n\t) {\n\t\tthis.summaryElement.addEventListener('click', this.handleSummaryClick.bind(this));\n\t}\n\n\tprivate handleSummaryClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\n\t\tif (this.isClosing || !this.detailsElement.open) {\n\t\t\tthis.open();\n\t\t} else if (this.isExpanding || this.detailsElement.open) {\n\t\t\tthis.collapse();\n\t\t}\n\t}\n\n\tpublic open() {\n\t\tthis.detailsElement.open = true;\n\t\twindow.requestAnimationFrame(this.expand.bind(this));\n\t}\n\n\tprivate expand() {\n\t\tthis.isExpanding = true;\n\t\tthis.animateContentHeight('expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateContentHeight('collapse');\n\t}\n\n\tprivate animateContentHeight(direction: 'expand' | 'collapse') {\n\t\tlet startHeight = direction === 'expand' ? 0 : this.contentElement.offsetHeight;\n\t\tlet endHeight = direction === 'expand' ? this.contentElement.offsetHeight : 0;\n\n\t\t/**\n\t\t * Override start and end height, when an animation is ongoing. During the animation, offsetHeight reflects the actual current height as it's being animated.\n\t\t * After canceling the animation, it reverts to the full height of the content container.\n\t\t */\n\t\tif (this.animation) {\n\t\t\tstartHeight = this.contentElement.offsetHeight;\n\t\t\tthis.animation.cancel();\n\t\t\tif (direction === 'expand') {\n\t\t\t\tendHeight = this.contentElement.offsetHeight;\n\t\t\t}\n\t\t}\n\n\t\tthis.animation = this.contentElement.animate(\n\t\t\t{\n\t\t\t\theight: [`${startHeight}px`, `${endHeight}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: matchMedia('(prefers-reduced-motion)').matches ? 0 : 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t},\n\t\t);\n\n\t\tthis.animation.addEventListener(\n\t\t\t'finish',\n\t\t\t() => {\n\t\t\t\tthis.onAnimationFinish();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t\tthis.animation.addEventListener(\n\t\t\t'cancel',\n\t\t\t() => {\n\t\t\t\tif (direction === 'expand') {\n\t\t\t\t\tthis.isExpanding = false;\n\t\t\t\t} else {\n\t\t\t\t\tthis.isClosing = false;\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprivate onAnimationFinish() {\n\t\tthis.detailsElement.open = this.isExpanding;\n\t\tthis.animation = undefined;\n\t\tthis.isClosing = false;\n\t\tthis.isExpanding = false;\n\t}\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tdetails {\n\t\tdisplay: grid;\n\t}\n\n\tdetails > summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tdetails > summary > span {\n\t\tborder-bottom-color: grey;\n\t\tborder-bottom-style: solid;\n\t}\n\n\tdetails > summary:focus > span,\n\tdetails > summary:hover > span,\n\tdetails[open] > summary > span {\n\t\tborder-bottom-color: #000;\n\t}\n\n\t.content {\n\t\toverflow: hidden;\n\t}\n\n\tdetails > .kol-indented-text {\n\t\tmargin: 0.25em 0 0 0.5em;\n\t}\n\n\t.icon.is-open::part(icon) {\n\t\ttransform: rotate(90deg);\n\t}\n}\n","import type { DetailsAPI, DetailsStates, EventCallbacks, LabelPropType } from '../../schema';\nimport { propagateFocus, setState, validateLabel, validateOpen } from '../../schema';\nimport { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';\n\nimport { tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { DetailsAnimationController } from './DetailsAnimationController';\n\nimport type { DisabledPropType } from '../../schema';\nimport { validateDisabled } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { preventDefaultAndStopPropagation } from '../../utils/events';\nimport { KolIconTag, KolIndentedTextTag } from '../../core/component-names';\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 {\n\t@Element() private readonly host?: HTMLKolDetailsElement;\n\tprivate detailsElement?: HTMLDetailsElement;\n\tprivate summaryElement?: HTMLElement;\n\tprivate contentElement?: HTMLElement;\n\n\tprivate readonly catchDetails = (ref?: HTMLElement) => {\n\t\tthis.detailsElement = ref as HTMLDetailsElement;\n\t};\n\n\tprivate readonly catchSummary = (ref?: HTMLElement) => {\n\t\tthis.summaryElement = ref;\n\t\tpropagateFocus(this.host, this.summaryElement);\n\t};\n\n\t/**\n\t * Handle disabled, because the toggle event is to late.\n\t */\n\tprivate readonly preventToggleIfDisabled = (event: Event) => {\n\t\tif (this.state._disabled === true) {\n\t\t\tpreventDefaultAndStopPropagation(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-details\">\n\t\t\t\t<details\n\t\t\t\t\tref={this.catchDetails}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t}}\n\t\t\t\t\tonToggle={this.handleToggle}\n\t\t\t\t>\n\t\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n\t\t\t\t\t<summary\n\t\t\t\t\t\tref={this.catchSummary}\n\t\t\t\t\t\taria-disabled={this.state._disabled ? 'true' : undefined}\n\t\t\t\t\t\tonClick={this.preventToggleIfDisabled}\n\t\t\t\t\t\tonKeyPress={this.preventToggleIfDisabled}\n\t\t\t\t\t\ttabIndex={this.state._disabled ? -1 : undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" class={`icon ${this.state._open ? 'is-open' : ''}`} />\n\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" ref={(element) => (this.contentElement = element)}>\n\t\t\t\t\t\t<KolIndentedTextTag>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</KolIndentedTextTag>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\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 the callback functions for details.\n\t */\n\t@Prop() public _on?: EventCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\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_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('_on')\n\tpublic validateOn(on?: EventCallbacks) {\n\t\tif (typeof on === 'object' && on !== null && typeof on.onToggle === 'function') {\n\t\t\tsetState<EventCallbacks>(this, '_on', on);\n\t\t}\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.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.detailsElement && this.summaryElement && this.contentElement) {\n\t\t\tconst animationController = new DetailsAnimationController(this.detailsElement, this.summaryElement, this.contentElement);\n\t\t\tif (this.state._open) {\n\t\t\t\tanimationController.open();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleToggle = (event: Event) => {\n\t\tclearTimeout(this.toggleTimeout);\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tconst open = Boolean(this.detailsElement?.open);\n\t\t\tif (open !== this.state._open) {\n\t\t\t\t// Update state\n\t\t\t\tthis._open = Boolean(this.detailsElement?.open);\n\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onToggle === 'function') {\n\t\t\t\t\tthis.state._on?.onToggle(event, this._open);\n\t\t\t\t}\n\t\t\t}\n\t\t}, 25);\n\t};\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["DetailsAnimationController","constructor","detailsElement","summaryElement","contentElement","this","isClosing","isExpanding","addEventListener","handleSummaryClick","bind","event","preventDefault","open","collapse","window","requestAnimationFrame","expand","animateContentHeight","direction","startHeight","offsetHeight","endHeight","animation","cancel","animate","height","duration","matchMedia","matches","easing","onAnimationFinish","once","undefined","defaultStyleCss","KolDetailsDefaultStyle0","KolDetails","catchDetails","ref","catchSummary","preventToggleIfDisabled","state","_disabled","preventDefaultAndStopPropagation","handleToggle","clearTimeout","toggleTimeout","setTimeout","Boolean","_a","_open","_b","tryToDispatchKoliBriEvent","host","_c","_on","onToggle","_d","_label","focus","kolFocus","render","h","Host","key","class","disabled","onClick","onKeyPress","tabIndex","KolIconTag","_icons","element","KolIndentedTextTag","validateDisabled","value","validateLabel","required","validateOn","on","setState","validateOpen","componentWillLoad","componentDidLoad","animationController"],"sources":["src/components/details/DetailsAnimationController.ts","src/components/details/style.scss?tag=kol-details&mode=default&encapsulation=shadow","src/components/details/shadow.tsx"],"sourcesContent":["/* Heavily inspired by: https://codepen.io/Mamboleoo/pen/QWEpLqm  */\n\nexport class DetailsAnimationController {\n\tprivate animation?: Animation;\n\tprivate isClosing = false;\n\tprivate isExpanding = false;\n\n\tconstructor(\n\t\tprivate detailsElement: HTMLDetailsElement,\n\t\tprivate summaryElement: HTMLElement,\n\t\tprivate contentElement: HTMLElement,\n\t) {\n\t\tthis.summaryElement.addEventListener('click', this.handleSummaryClick.bind(this));\n\t}\n\n\tprivate handleSummaryClick(event: MouseEvent) {\n\t\tevent.preventDefault();\n\n\t\tif (this.isClosing || !this.detailsElement.open) {\n\t\t\tthis.open();\n\t\t} else if (this.isExpanding || this.detailsElement.open) {\n\t\t\tthis.collapse();\n\t\t}\n\t}\n\n\tpublic open() {\n\t\tthis.detailsElement.open = true;\n\t\twindow.requestAnimationFrame(this.expand.bind(this));\n\t}\n\n\tprivate expand() {\n\t\tthis.isExpanding = true;\n\t\tthis.animateContentHeight('expand');\n\t}\n\n\tprivate collapse() {\n\t\tthis.isClosing = true;\n\t\tthis.animateContentHeight('collapse');\n\t}\n\n\tprivate animateContentHeight(direction: 'expand' | 'collapse') {\n\t\tlet startHeight = direction === 'expand' ? 0 : this.contentElement.offsetHeight;\n\t\tlet endHeight = direction === 'expand' ? this.contentElement.offsetHeight : 0;\n\n\t\t/**\n\t\t * Override start and end height, when an animation is ongoing. During the animation, offsetHeight reflects the actual current height as it's being animated.\n\t\t * After canceling the animation, it reverts to the full height of the content container.\n\t\t */\n\t\tif (this.animation) {\n\t\t\tstartHeight = this.contentElement.offsetHeight;\n\t\t\tthis.animation.cancel();\n\t\t\tif (direction === 'expand') {\n\t\t\t\tendHeight = this.contentElement.offsetHeight;\n\t\t\t}\n\t\t}\n\n\t\tthis.animation = this.contentElement.animate(\n\t\t\t{\n\t\t\t\theight: [`${startHeight}px`, `${endHeight}px`],\n\t\t\t},\n\t\t\t{\n\t\t\t\tduration: matchMedia('(prefers-reduced-motion)').matches ? 0 : 250,\n\t\t\t\teasing: 'ease-out',\n\t\t\t},\n\t\t);\n\n\t\tthis.animation.addEventListener(\n\t\t\t'finish',\n\t\t\t() => {\n\t\t\t\tthis.onAnimationFinish();\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t\tthis.animation.addEventListener(\n\t\t\t'cancel',\n\t\t\t() => {\n\t\t\t\tif (direction === 'expand') {\n\t\t\t\t\tthis.isExpanding = false;\n\t\t\t\t} else {\n\t\t\t\t\tthis.isClosing = false;\n\t\t\t\t}\n\t\t\t},\n\t\t\t{ once: true },\n\t\t);\n\t}\n\n\tprivate onAnimationFinish() {\n\t\tthis.detailsElement.open = this.isExpanding;\n\t\tthis.animation = undefined;\n\t\tthis.isClosing = false;\n\t\tthis.isExpanding = false;\n\t}\n}\n","@import '../@shared/mixins';\n@import '../style';\n@import '../host-display-block';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\tdetails {\n\t\tdisplay: grid;\n\t}\n\n\tdetails > summary {\n\t\tcursor: pointer;\n\t\tdisplay: flex;\n\t\tplace-items: center;\n\t}\n\n\tdetails > summary > span {\n\t\tborder-bottom-color: grey;\n\t\tborder-bottom-style: solid;\n\t}\n\n\tdetails > summary:focus > span,\n\tdetails > summary:hover > span,\n\tdetails[open] > summary > span {\n\t\tborder-bottom-color: #000;\n\t}\n\n\t.content {\n\t\toverflow: hidden;\n\t}\n\n\tdetails > .kol-indented-text {\n\t\tmargin: 0.25em 0 0 0.5em;\n\t}\n\n\t.icon.is-open::part(icon) {\n\t\ttransform: rotate(90deg);\n\t}\n}\n","import type { DetailsAPI, DetailsStates, DisabledPropType, EventCallbacks, FocusableElement, LabelPropType } from '../../schema';\nimport { setState, validateDisabled, validateLabel, validateOpen } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { preventDefaultAndStopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { DetailsAnimationController } from './DetailsAnimationController';\nimport { KolIconTag, KolIndentedTextTag } from '../../core/component-names';\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\tprivate detailsElement?: HTMLDetailsElement;\n\tprivate summaryElement?: HTMLElement;\n\tprivate contentElement?: HTMLElement;\n\n\tprivate readonly catchDetails = (ref?: HTMLElement) => {\n\t\tthis.detailsElement = ref as HTMLDetailsElement;\n\t};\n\n\tprivate readonly catchSummary = (ref?: HTMLElement) => {\n\t\tthis.summaryElement = 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@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.summaryElement?.focus();\n\t}\n\n\t/**\n\t * Handle disabled, because the toggle event is to late.\n\t */\n\tprivate readonly preventToggleIfDisabled = (event: Event) => {\n\t\tif (this.state._disabled === true) {\n\t\t\tpreventDefaultAndStopPropagation(event);\n\t\t}\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-details\">\n\t\t\t\t<details\n\t\t\t\t\tref={this.catchDetails}\n\t\t\t\t\tclass={{\n\t\t\t\t\t\tdisabled: this.state._disabled === true,\n\t\t\t\t\t\topen: this.state._open === true,\n\t\t\t\t\t}}\n\t\t\t\t\tonToggle={this.handleToggle}\n\t\t\t\t>\n\t\t\t\t\t{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n\t\t\t\t\t<summary\n\t\t\t\t\t\tref={this.catchSummary}\n\t\t\t\t\t\taria-disabled={this.state._disabled ? 'true' : undefined}\n\t\t\t\t\t\tonClick={this.preventToggleIfDisabled}\n\t\t\t\t\t\tonKeyPress={this.preventToggleIfDisabled}\n\t\t\t\t\t\ttabIndex={this.state._disabled ? -1 : undefined}\n\t\t\t\t\t>\n\t\t\t\t\t\t<KolIconTag _label=\"\" _icons=\"codicon codicon-chevron-right\" class={`icon ${this.state._open ? 'is-open' : ''}`} />\n\t\t\t\t\t\t<span>{this.state._label}</span>\n\t\t\t\t\t</summary>\n\t\t\t\t\t<div aria-hidden={this.state._open === false ? 'true' : undefined} class=\"content\" ref={(element) => (this.contentElement = element)}>\n\t\t\t\t\t\t<KolIndentedTextTag>\n\t\t\t\t\t\t\t<slot />\n\t\t\t\t\t\t</KolIndentedTextTag>\n\t\t\t\t\t</div>\n\t\t\t\t</details>\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 the callback functions for details.\n\t */\n\t@Prop() public _on?: EventCallbacks;\n\n\t/**\n\t * If set (to true) opens/expands the element, closes if not set (or set to false).\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_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('_on')\n\tpublic validateOn(on?: EventCallbacks) {\n\t\tif (typeof on === 'object' && on !== null && typeof on.onToggle === 'function') {\n\t\t\tsetState<EventCallbacks>(this, '_on', on);\n\t\t}\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.validateOn(this._on);\n\t\tthis.validateOpen(this._open);\n\t}\n\n\tpublic componentDidLoad() {\n\t\tif (this.detailsElement && this.summaryElement && this.contentElement) {\n\t\t\tconst animationController = new DetailsAnimationController(this.detailsElement, this.summaryElement, this.contentElement);\n\t\t\tif (this.state._open) {\n\t\t\t\tanimationController.open();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate toggleTimeout?: ReturnType<typeof setTimeout>;\n\n\tprivate handleToggle = (event: Event) => {\n\t\tclearTimeout(this.toggleTimeout);\n\t\tthis.toggleTimeout = setTimeout(() => {\n\t\t\tconst open = Boolean(this.detailsElement?.open);\n\t\t\tif (open !== this.state._open) {\n\t\t\t\t// Update state\n\t\t\t\tthis._open = Boolean(this.detailsElement?.open);\n\n\t\t\t\t// Event handling\n\t\t\t\ttryToDispatchKoliBriEvent('toggle', this.host, this._open);\n\n\t\t\t\t// Callback\n\t\t\t\tif (typeof this.state._on?.onToggle === 'function') {\n\t\t\t\t\tthis.state._on?.onToggle(event, this._open);\n\t\t\t\t}\n\t\t\t}\n\t\t}, 25);\n\t};\n}\n"],"mappings":";;;oZAEaA,EAKZ,WAAAC,CACSC,EACAC,EACAC,GAFAC,KAAAH,iBACAG,KAAAF,iBACAE,KAAAD,iBANDC,KAAAC,UAAY,MACZD,KAAAE,YAAc,MAOrBF,KAAKF,eAAeK,iBAAiB,QAASH,KAAKI,mBAAmBC,KAAKL,M,CAGpE,kBAAAI,CAAmBE,GAC1BA,EAAMC,iBAEN,GAAIP,KAAKC,YAAcD,KAAKH,eAAeW,KAAM,CAChDR,KAAKQ,M,MACC,GAAIR,KAAKE,aAAeF,KAAKH,eAAeW,KAAM,CACxDR,KAAKS,U,EAIA,IAAAD,GACNR,KAAKH,eAAeW,KAAO,KAC3BE,OAAOC,sBAAsBX,KAAKY,OAAOP,KAAKL,M,CAGvC,MAAAY,GACPZ,KAAKE,YAAc,KACnBF,KAAKa,qBAAqB,S,CAGnB,QAAAJ,GACPT,KAAKC,UAAY,KACjBD,KAAKa,qBAAqB,W,CAGnB,oBAAAA,CAAqBC,GAC5B,IAAIC,EAAcD,IAAc,SAAW,EAAId,KAAKD,eAAeiB,aACnE,IAAIC,EAAYH,IAAc,SAAWd,KAAKD,eAAeiB,aAAe,EAM5E,GAAIhB,KAAKkB,UAAW,CACnBH,EAAcf,KAAKD,eAAeiB,aAClChB,KAAKkB,UAAUC,SACf,GAAIL,IAAc,SAAU,CAC3BG,EAAYjB,KAAKD,eAAeiB,Y,EAIlChB,KAAKkB,UAAYlB,KAAKD,eAAeqB,QACpC,CACCC,OAAQ,CAAC,GAAGN,MAAiB,GAAGE,QAEjC,CACCK,SAAUC,WAAW,4BAA4BC,QAAU,EAAI,IAC/DC,OAAQ,aAIVzB,KAAKkB,UAAUf,iBACd,UACA,KACCH,KAAK0B,mBAAmB,GAEzB,CAAEC,KAAM,OAET3B,KAAKkB,UAAUf,iBACd,UACA,KACC,GAAIW,IAAc,SAAU,CAC3Bd,KAAKE,YAAc,K,KACb,CACNF,KAAKC,UAAY,K,IAGnB,CAAE0B,KAAM,M,CAIF,iBAAAD,GACP1B,KAAKH,eAAeW,KAAOR,KAAKE,YAChCF,KAAKkB,UAAYU,UACjB5B,KAAKC,UAAY,MACjBD,KAAKE,YAAc,K,EC1FrB,MAAM2B,EAAkB,wrJACxB,MAAAC,EAAeD,E,MCkBFE,EAAU,M,yBAML/B,KAAAgC,aAAgBC,IAChCjC,KAAKH,eAAiBoC,CAAyB,EAG/BjC,KAAAkC,aAAgBD,IAChCjC,KAAKF,eAAiBmC,CAAG,EAoBTjC,KAAAmC,wBAA2B7B,IAC3C,GAAIN,KAAKoC,MAAMC,YAAc,KAAM,CAClCC,EAAiChC,E,GAwG3BN,KAAAuC,aAAgBjC,IACvBkC,aAAaxC,KAAKyC,eAClBzC,KAAKyC,cAAgBC,YAAW,K,YAC/B,MAAMlC,EAAOmC,SAAQC,EAAA5C,KAAKH,kBAAc,MAAA+C,SAAA,SAAAA,EAAEpC,MAC1C,GAAIA,IAASR,KAAKoC,MAAMS,MAAO,CAE9B7C,KAAK6C,MAAQF,SAAQG,EAAA9C,KAAKH,kBAAc,MAAAiD,SAAA,SAAAA,EAAEtC,MAG1CuC,EAA0B,SAAU/C,KAAKgD,KAAMhD,KAAK6C,OAGpD,WAAWI,EAAAjD,KAAKoC,MAAMc,OAAG,MAAAD,SAAA,SAAAA,EAAEE,YAAa,WAAY,EACnDC,EAAApD,KAAKoC,MAAMc,OAAG,MAAAE,SAAA,SAAAA,EAAED,SAAS7C,EAAON,KAAK6C,M,KAGrC,GAAG,E,eAjF8B,M,oDAgB4B,M,WAE1B,CACtCQ,OAAQ,GACRH,IAAK,G,CA1EC,WAAMI,SACNtD,KAAKuD,U,CAKL,cAAMA,G,OACZX,EAAA5C,KAAKF,kBAAc,MAAA8C,SAAA,SAAAA,EAAEU,O,CAYf,MAAAE,GACN,OACCC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAM,eACXH,EAAA,WAAAE,IAAA,2CACC1B,IAAKjC,KAAKgC,aACV4B,MAAO,CACNC,SAAU7D,KAAKoC,MAAMC,YAAc,KACnC7B,KAAMR,KAAKoC,MAAMS,QAAU,MAE5BM,SAAUnD,KAAKuC,cAGfkB,EAAA,WAAAE,IAAA,2CACC1B,IAAKjC,KAAKkC,aAAY,gBACPlC,KAAKoC,MAAMC,UAAY,OAAST,UAC/CkC,QAAS9D,KAAKmC,wBACd4B,WAAY/D,KAAKmC,wBACjB6B,SAAUhE,KAAKoC,MAAMC,WAAa,EAAIT,WAEtC6B,EAACQ,EAAU,CAAAN,IAAA,2CAACN,OAAO,GAAGa,OAAO,gCAAgCN,MAAO,QAAQ5D,KAAKoC,MAAMS,MAAQ,UAAY,OAC3GY,EAAA,QAAAE,IAAA,4CAAO3D,KAAKoC,MAAMiB,SAEnBI,EAAA,OAAAE,IAAA,yDAAkB3D,KAAKoC,MAAMS,QAAU,MAAQ,OAASjB,UAAWgC,MAAM,UAAU3B,IAAMkC,GAAanE,KAAKD,eAAiBoE,GAC3HV,EAACW,EAAkB,CAAAT,IAAA,4CAClBF,EAAA,QAAAE,IAAA,gD,CAmCC,gBAAAU,CAAiBC,GACvBD,EAAiBrE,KAAMsE,E,CAIjB,aAAAC,CAAcD,GACpBC,EAAcvE,KAAMsE,EAAO,CAC1BE,SAAU,M,CAKL,UAAAC,CAAWC,GACjB,UAAWA,IAAO,UAAYA,IAAO,aAAeA,EAAGvB,WAAa,WAAY,CAC/EwB,EAAyB3E,KAAM,MAAO0E,E,EAKjC,YAAAE,CAAaN,GACnBM,EAAa5E,KAAMsE,E,CAGb,iBAAAO,GACN7E,KAAKqE,iBAAiBrE,KAAKqC,WAC3BrC,KAAKuE,cAAcvE,KAAKqD,QACxBrD,KAAKyE,WAAWzE,KAAKkD,KACrBlD,KAAK4E,aAAa5E,KAAK6C,M,CAGjB,gBAAAiC,GACN,GAAI9E,KAAKH,gBAAkBG,KAAKF,gBAAkBE,KAAKD,eAAgB,CACtE,MAAMgF,EAAsB,IAAIpF,EAA2BK,KAAKH,eAAgBG,KAAKF,eAAgBE,KAAKD,gBAC1G,GAAIC,KAAKoC,MAAMS,MAAO,CACrBkC,EAAoBvE,M","ignoreList":[]}

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e,H as t}from"./index-b2c61df0.js";import{a as i}from"./align-6c0a2935.js";import{b as o,s as a}from"./prop.validators-db70e3c4.js";import{v as s}from"./label-20475610.js";import{v as l}from"./open-5b527658.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const r=(n,e)=>{o(n,"_modal",e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background: white;\n  }\n  .drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",h=d,c=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>this.dialogElement=n,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 n,e;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),this.state._modal?null===(n=this.dialogElement)||void 0===n||n.showModal():null===(e=this.dialogElement)||void 0===e||e.show()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e("div",{ref:this.getWrapperRef,class:`drawer__wrapper drawer__wrapper--${n} ${this.state._open?"drawer__wrapper--open":"is-closing"}`,"aria-label":this.state._label},e("div",{class:"drawer__content"},e("slot",null)))}render(){const n=this.state._modal;return e(t,{key:"002834bc0b77fb80001f8a7c5b565b9e45c8de03",class:"kol-drawer drawer "+(n?"drawer--modal":""),ref:n=>this.hostElement=n},e("dialog",{key:"5d27b28c355b4eb6ab1c3e3d21f4c3a6746a7fbf",class:"drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){i(this,n)}validateModal(n){r(this,n)}async validateOpen(n){"boolean"==typeof n&&(l(this,n),n?await this.open():await this.close())}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),a(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e)}handleClose(){}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}async componentWillLoad(){this.validateLabel(this._label),await this.validateOpen(this._open),this.validateAlign(this._align),this.validateModal(this._modal),this.validateOn(this._on)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_modal:["validateModal"],_open:["validateOpen"],_on:["validateOn"]}}};c.style={default:h};export{c as kol_drawer};
+import{r as n,h as e,H as t}from"./index-22a31dab.js";import{a as i}from"./align-6c0a2935.js";import{b as a,s as o}from"./prop.validators-db70e3c4.js";import{v as s}from"./label-20475610.js";import{v as l}from"./open-5b527658.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const r=(n,e)=>{a(n,"_modal",e)},d="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .drawer__dialog {\n    padding: 0;\n    border: none;\n  }\n  .drawer__wrapper {\n    position: fixed;\n    width: auto;\n    overflow: auto;\n    background: white;\n  }\n  .drawer__wrapper--left {\n    top: 0;\n    left: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--right {\n    top: 0;\n    right: 0;\n    height: 100vh;\n    max-height: 100%;\n  }\n  .drawer__wrapper--top {\n    left: 0;\n    top: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__wrapper--bottom {\n    left: 0;\n    bottom: 0;\n    width: 100vw;\n    max-width: 100%;\n  }\n  .drawer__content {\n    position: relative;\n    padding: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",h=d,c=class{constructor(e){n(this,e),this.getWrapperRef=n=>this.dialogWrapperElement=n,this.getRef=n=>this.dialogElement=n,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 n,e;this.state=Object.assign(Object.assign({},this.state),{_open:!0}),this.state._modal?null===(n=this.dialogElement)||void 0===n||n.showModal():null===(e=this.dialogElement)||void 0===e||e.show()}async close(){this.state=Object.assign(Object.assign({},this.state),{_open:!1});const n=this.dialogWrapperElement;if(!n)return;"none"===window.getComputedStyle(n).animationName&&this.handleCloseDialog()}renderDialogContent(){const n=this.state._align;return e("div",{ref:this.getWrapperRef,class:`drawer__wrapper drawer__wrapper--${n} ${this.state._open?"drawer__wrapper--open":"is-closing"}`,"aria-label":this.state._label},e("div",{class:"drawer__content"},e("slot",null)))}render(){const n=this.state._modal;return e(t,{key:"002834bc0b77fb80001f8a7c5b565b9e45c8de03",class:"kol-drawer drawer "+(n?"drawer--modal":""),ref:n=>this.hostElement=n},e("dialog",{key:"5d27b28c355b4eb6ab1c3e3d21f4c3a6746a7fbf",class:"drawer__dialog",ref:this.getRef},this.renderDialogContent()))}validateLabel(n){s(this,n,{required:!0})}validateAlign(n){i(this,n)}validateModal(n){r(this,n)}async validateOpen(n){"boolean"==typeof n&&(l(this,n),n?await this.open():await this.close())}validateOn(n){if("object"==typeof n&&null!==n){const e={};"function"==typeof n.onClose&&(e.onClose=n.onClose),o(this,"_on",e)}}handleCloseDialog(){var n,e,t;null===(n=this.dialogElement)||void 0===n||n.close(),null===(t=null===(e=this._on)||void 0===e?void 0:e.onClose)||void 0===t||t.call(e)}handleClose(){}handleAnimationEnd(n){n.animationName.includes("slideOut")&&this.handleCloseDialog()}componentDidLoad(){var n,e;null===(n=this.dialogElement)||void 0===n||n.addEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.addEventListener("close",this.handleClose.bind(this))}disconnectedCallback(){var n,e;null===(n=this.dialogElement)||void 0===n||n.removeEventListener("animationend",this.handleAnimationEnd.bind(this)),null===(e=this.dialogElement)||void 0===e||e.removeEventListener("close",this.handleClose.bind(this))}async componentWillLoad(){this.validateLabel(this._label),await this.validateOpen(this._open),this.validateAlign(this._align),this.validateModal(this._modal),this.validateOn(this._on)}static get watchers(){return{_label:["validateLabel"],_align:["validateAlign"],_modal:["validateModal"],_open:["validateOpen"],_on:["validateOn"]}}};c.style={default:h};export{c as kol_drawer};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as t,h as e,H as i}from"./index-b2c61df0.js";import{t as o}from"./i18n-112381e9.js";import{j as s,k as r,h as a}from"./component-names-068dc2ae.js";import{w as n,b as d,i as l}from"./prop.validators-db70e3c4.js";import"./i18n-66b52d13.js";import"./reuse-b66836de.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const f=(e,t)=>{n(e,"errorList",(e=>"object"==typeof e),new Set(["Object"]),t)},c=class{constructor(e){t(this,e),this.onSubmit=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(e))},this.onReset=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(e))},this.handleLinkClick=e=>{var t;const i=null===(t=e.target)||void 0===t?void 0:t.href;if(i){const e=new URL(i),t=document.querySelector(e.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return e(i,{key:"005270f9d4c739b5f2b399546d91dc8559bb45db",class:"kol-form"},this._errorList&&this._errorList.length>0&&e(r,{key:"7acdf57b3f0954ee26df575334f7521d1898a597",_type:"error"},o("kol-error-list-message"),e("nav",{key:"f16799bcbb7f60baec798674acb9f38c28424ce0","aria-label":o("kol-error-list")},e("ul",{key:"8c86a5fa750031073142d383d1806bcae7a9eec6"},this._errorList.map(((t,i)=>e("li",{key:i},e(a,{_href:t.selector,_label:t.message,_on:{onClick:this.handleLinkClick},ref:e=>{0===i&&(this.errorListElement=e)}}))))))),e("form",{key:"a626ea1dc80b465abfc4153b4c2217a462e3faf0",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?e("p",null,e(s,null,o("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e(s,null,this.state._requiredText)):null,e("slot",{key:"05b129e368edc5151a8e3b19bc696b749be3db2a"})))}async focusErrorList(){return setTimeout((()=>{var e;this._errorList&&this._errorList.length>0&&(null===(e=this.errorListElement)||void 0===e||e.focus())}),300),Promise.resolve()}validateOn(e){"object"==typeof e&&null!==e&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validateRequiredText(e){"boolean"==typeof e?d(this,"_requiredText",e):l(this,"_requiredText",e)}validateErrorList(e){f(this,e)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};export{c as kol_form};
+import{r as t,h as e,H as i}from"./index-22a31dab.js";import{t as o}from"./i18n-59fb5a46.js";import{j as s,k as r,h as a}from"./component-names-3f4a13bb.js";import{w as n,b as l,i as d}from"./prop.validators-db70e3c4.js";import"./i18n-3dcfca85.js";import"./reuse-108ee8f5.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const f=(e,t)=>{n(e,"errorList",(e=>"object"==typeof e),new Set(["Object"]),t)},c=class{constructor(e){t(this,e),this.onSubmit=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onSubmit)&&(null===(i=this.state._on)||void 0===i||i.onSubmit(e))},this.onReset=e=>{var t,i;e.preventDefault(),e.stopPropagation(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onReset)&&(null===(i=this.state._on)||void 0===i||i.onReset(e))},this.handleLinkClick=e=>{var t;const i=null===(t=e.target)||void 0===t?void 0:t.href;if(i){const e=new URL(i),t=document.querySelector(e.hash);t&&"function"==typeof t.focus&&(t.scrollIntoView({behavior:"smooth"}),t.focus())}},this._on=void 0,this._requiredText=!0,this._errorList=void 0,this.state={}}render(){return e(i,{key:"005270f9d4c739b5f2b399546d91dc8559bb45db",class:"kol-form"},this._errorList&&this._errorList.length>0&&e(r,{key:"7acdf57b3f0954ee26df575334f7521d1898a597",_type:"error"},o("kol-error-list-message"),e("nav",{key:"f16799bcbb7f60baec798674acb9f38c28424ce0","aria-label":o("kol-error-list")},e("ul",{key:"8c86a5fa750031073142d383d1806bcae7a9eec6"},this._errorList.map(((t,i)=>e("li",{key:i},e(a,{_href:t.selector,_label:t.message,_on:{onClick:this.handleLinkClick},ref:e=>{0===i&&(this.errorListElement=e)}}))))))),e("form",{key:"a626ea1dc80b465abfc4153b4c2217a462e3faf0",method:"post",onSubmit:this.onSubmit,onReset:this.onReset,autoComplete:"off",noValidate:!0},!0===this.state._requiredText?e("p",null,e(s,null,o("kol-form-description"))):"string"==typeof this.state._requiredText&&this.state._requiredText.length>0?e("p",null,e(s,null,this.state._requiredText)):null,e("slot",{key:"05b129e368edc5151a8e3b19bc696b749be3db2a"})))}async focusErrorList(){return setTimeout((()=>{var e;this._errorList&&this._errorList.length>0&&(null===(e=this.errorListElement)||void 0===e||e.focus())}),300),Promise.resolve()}validateOn(e){"object"==typeof e&&null!==e&&(this.state=Object.assign(Object.assign({},this.state),{_on:e}))}validateRequiredText(e){"boolean"==typeof e?l(this,"_requiredText",e):d(this,"_requiredText",e)}validateErrorList(e){f(this,e)}componentWillLoad(){this.validateOn(this._on),this.validateRequiredText(this._requiredText),this.validateErrorList(this._errorList)}static get watchers(){return{_on:["validateOn"],_requiredText:["validateRequiredText"],_errorList:["validateErrorList"]}}};export{c as kol_form};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as e,h as a,H as s}from"./index-b2c61df0.js";import{w as t}from"./validation-e2c07abd.js";import{w as i,i as n}from"./prop.validators-db70e3c4.js";import{a as r}from"./label-20475610.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const h=["h1","h2","h3","h4","h5","h6","strong"],l=(e,a)=>{i(e,"_variant",(e=>"string"==typeof e&&h.includes(e)),new Set([`KoliBriHeadingVariant {${h.join(", ")}`]),a)},d=class{constructor(t){e(this,t),this.renderHeadline=(e,t)=>{const s="number"==typeof t&&t>0&&t<=6?`h${t}`:"strong",i=this._variant||s;return a(s,{class:{headline:!0,[`headline-${i}`]:!0}},e,a("slot",{name:"expert"}))},this.renderSecondaryHeadline=(e,t)=>{switch(t){case 1:return a("span",{class:"secondary-headline"},e);case 2:return a("h2",{class:"secondary-headline"},e);case 3:return a("h3",{class:"secondary-headline"},e);case 4:return a("h4",{class:"secondary-headline"},e);case 5:return a("h5",{class:"secondary-headline"},e);case 6:return a("h6",{class:"secondary-headline"},e);default:return a("strong",{class:"secondary-headline"},e)}},this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this._variant=void 0,this.state={_label:"",_level:1}}validateLabel(e){r(this,e)}validateLevel(e){t(this,e)}validateSecondaryHeadline(e){n(this,"_secondaryHeadline",e)}validateVariant(e){l(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline),this.validateVariant(this._variant)}render(){return a(s,{key:"16152887a63517d019bee1e1aa4669c32a581a37",class:"kol-heading-wc"},"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?a("hgroup",null,this.renderHeadline(this.state._label,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._label,this.state._level))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"],_variant:["validateVariant"]}}};export{d as kol_heading_wc};
+import{r as e,h as a,H as s}from"./index-22a31dab.js";import{w as t}from"./validation-e2c07abd.js";import{w as i,i as n}from"./prop.validators-db70e3c4.js";import{a as r}from"./label-20475610.js";import"./index-db4aa6e4.js";import"./dev.utils-1ca991a2.js";const h=["h1","h2","h3","h4","h5","h6","strong"],l=(e,a)=>{i(e,"_variant",(e=>"string"==typeof e&&h.includes(e)),new Set([`KoliBriHeadingVariant {${h.join(", ")}`]),a)},d=class{constructor(t){e(this,t),this.renderHeadline=(e,t)=>{const s="number"==typeof t&&t>0&&t<=6?`h${t}`:"strong",i=this._variant||s;return a(s,{class:{headline:!0,[`headline-${i}`]:!0}},e,a("slot",{name:"expert"}))},this.renderSecondaryHeadline=(e,t)=>{switch(t){case 1:return a("span",{class:"secondary-headline"},e);case 2:return a("h2",{class:"secondary-headline"},e);case 3:return a("h3",{class:"secondary-headline"},e);case 4:return a("h4",{class:"secondary-headline"},e);case 5:return a("h5",{class:"secondary-headline"},e);case 6:return a("h6",{class:"secondary-headline"},e);default:return a("strong",{class:"secondary-headline"},e)}},this._label=void 0,this._level=1,this._secondaryHeadline=void 0,this._variant=void 0,this.state={_label:"",_level:1}}validateLabel(e){r(this,e)}validateLevel(e){t(this,e)}validateSecondaryHeadline(e){n(this,"_secondaryHeadline",e)}validateVariant(e){l(this,e)}componentWillLoad(){this.validateLabel(this._label),this.validateLevel(this._level),this.validateSecondaryHeadline(this._secondaryHeadline),this.validateVariant(this._variant)}render(){return a(s,{key:"16152887a63517d019bee1e1aa4669c32a581a37",class:"kol-heading-wc"},"string"==typeof this.state._secondaryHeadline&&this.state._secondaryHeadline.length>0?a("hgroup",null,this.renderHeadline(this.state._label,this.state._level),this.state._secondaryHeadline&&this.renderSecondaryHeadline(this.state._secondaryHeadline,this.state._level+1)):this.renderHeadline(this.state._label,this.state._level))}static get watchers(){return{_label:["validateLabel"],_level:["validateLevel"],_secondaryHeadline:["validateSecondaryHeadline"],_variant:["validateVariant"]}}};export{d as kol_heading_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as n,h as e}from"./index-b2c61df0.js";import{b as t}from"./component-names-068dc2ae.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",o=i,a=class{constructor(e){n(this,e),this._label=void 0,this._level=void 0,this._secondaryHeadline=void 0,this._variant=void 0}render(){return e(t,{key:"6ad0f63801b30d55ce6a1c5c5bafc2c9ec623752",_label:this._label,_level:this._level,_secondaryHeadline:this._secondaryHeadline,_variant:this._variant,class:"kol-heading"},e("slot",{key:"38aed341a23661c627cd84fa0f16f3d424541713",name:"expert",slot:"expert"}))}};a.style={default:o};export{a as kol_heading};
+import{r as n,h as e}from"./index-22a31dab.js";import{b as t}from"./component-names-3f4a13bb.js";const i="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: 44px;\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of 44px.\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n}",o=i,a=class{constructor(e){n(this,e),this._label=void 0,this._level=void 0,this._secondaryHeadline=void 0,this._variant=void 0}render(){return e(t,{key:"6ad0f63801b30d55ce6a1c5c5bafc2c9ec623752",_label:this._label,_level:this._level,_secondaryHeadline:this._secondaryHeadline,_variant:this._variant,class:"kol-heading"},e("slot",{key:"38aed341a23661c627cd84fa0f16f3d424541713",name:"expert",slot:"expert"}))}};a.style={default:o};export{a as kol_heading};