@public-ui/components 4.0.0-alpha.0 → 4.0.0-alpha.1

package/dist/components/kol-button.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{a as KolButtonWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-style: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: inline-block;\n  }\n  :is(a, button) {\n    display: inline-flex;\n    place-items: center;\n    text-align: center;\n    text-decoration-line: none;\n  }\n  :is(a, button)::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  /* TODO: Why we need this? */\n  :is(a, button) > .kol-span-wc {\n    margin: auto;\n    width: 100%;\n  }\n}",KolButtonDefaultStyle0=defaultStyleCss,KolButton$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.buttonWcRef=n},this._accessKey=void 0,this._ariaControls=void 0,this._ariaDescription=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal"}async getValue(){return this._value}async focus(){await this.kolFocus()}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return h(Host,{key:"c4f5ff46653f2942fa26dd1840395b23792a2ef0",class:"kol-button"},h(KolButtonWcTag,{key:"87b1a42f8afeba148a47a7392737d980727be7b1",ref:this.catchRef,class:{button:!0,[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0},_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_role:this._role,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tabIndex:this._tabIndex,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant},h("slot",{key:"15e025998e347f99b5e416c3e8723709993ffe61",name:"expert",slot:"expert"})))}static get delegatesFocus(){return!0}static get style(){return{default:KolButtonDefaultStyle0}}},[49,"kol-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],getValue:[64],focus:[64],kolFocus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button"].forEach((n=>{if("kol-button"===n)customElements.get(n)||customElements.define(n,KolButton$1)}))}const KolButton=KolButton$1,defineCustomElement=defineCustomElement$1;export{KolButton,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{d as KolButtonWcTag}from"./component-names.js";const defaultStyleCss="@charset \"UTF-8\";\n/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-align: center;\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    width: 100%;\n    margin: auto;\n  }\n}",KolButton$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.catchRef=n=>{this.buttonWcRef=n},this._disabled=!1,this._hideLabel=!1,this._tooltipAlign="top",this._type="button",this._variant="normal"}async getValue(){return this._value}async kolFocus(){var n;await(null===(n=this.buttonWcRef)||void 0===n?void 0:n.kolFocus())}render(){return h(KolButtonWcTag,{key:"8c405cbeb41ae185d1702795d6d51e70bb7a0986",ref:this.catchRef,_accessKey:this._accessKey,_ariaControls:this._ariaControls,_ariaDescription:this._ariaDescription,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_hideLabel:this._hideLabel,_icons:this._icons,_id:this._id,_label:this._label,_name:this._name,_on:this._on,_shortKey:this._shortKey,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_buttonVariant:this._variant},h("slot",{key:"7a936c98516119f25ef1c20b3c04777820a1cb1e",name:"expert",slot:"expert"}))}static get delegatesFocus(){return!0}static get style(){return{default:defaultStyleCss}}},[305,"kol-button",{_accessKey:[1,"_access-key"],_ariaControls:[1,"_aria-controls"],_ariaDescription:[1,"_aria-description"],_ariaExpanded:[4,"_aria-expanded"],_ariaSelected:[4,"_aria-selected"],_customClass:[1,"_custom-class"],_disabled:[4],_hideLabel:[4,"_hide-label"],_icons:[1],_id:[1],_label:[1],_name:[1],_on:[16],_role:[1],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_type:[1],_value:[8],_variant:[1],getValue:[64],kolFocus:[64]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-button"].forEach(n=>{if("kol-button"===n)customElements.get(n)||customElements.define(n,KolButton$1)})}const KolButton=KolButton$1,defineCustomElement=defineCustomElement$1;export{KolButton,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,i5LAAi5L,CAAC;AAC16L,+BAAe,eAAe;;MC8BjBA,WAAS;;;;;QAGJ,aAAQ,GAAG,CAAC,GAA4B;YACxD,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;SACvB,CAAC;;;;;;;yBA4FmC,KAAK;0BAOJ,KAAK;;;;;;;;;;6BAmDW,KAAK;qBAKf,QAAQ;;wBAUF,QAAQ;;IAjKnD,MAAM,QAAQ;QACpB,OAAO,IAAI,CAAC,MAAM,CAAC;KACnB;IAMM,MAAM,KAAK;QACjB,MAAM,IAAI,CAAC,QAAQ,EAAE,CAAC;KACtB;IAGM,MAAM,QAAQ;;QACpB,OAAM,MAAA,IAAI,CAAC,WAAW,0CAAE,QAAQ,EAAE,CAAA,CAAC;KACnC;IAEM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,YAAY,IACvB,EAAC,cAAc,qDACd,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,KAAK,EAAE;gBACN,MAAM,EAAE,IAAI;gBACZ,CAAC,IAAI,CAAC,QAAkB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ;gBACrD,CAAC,IAAI,CAAC,YAAsB,GAAG,IAAI,CAAC,QAAQ,KAAK,QAAQ,IAAI,OAAO,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,GAAG,CAAC;aAClI,EACD,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAEvB,6DAAM,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,GAAQ,CACzB,CACX,EACN;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButton"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../button';\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\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: {\n\t\tdelegatesFocus: true,\n\t},\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_ariaDescription={this._ariaDescription}\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_shortKey={this._shortKey}\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 * Defines the elements short key.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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"],"version":3}
+{"file":"kol-button.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,0iNAA0iN;;MC8BrjNA,WAAS,GAAAC,kBAAA,CAAA,MAAA,SAAA,SAAA,WAAA,CAAA;AATtB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAYkB,QAAA,IAAA,CAAA,QAAQ,GAAG,CAAC,GAA4B,KAAI;AAC5D,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG;AACvB,SAAC;AAiFc,QAAA,IAAS,CAAA,SAAA,GAAa,KAAK;AAO3B,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAiD5B,QAAA,IAAa,CAAA,aAAA,GAA0B,KAAK;AAK5C,QAAA,IAAK,CAAA,KAAA,GAAwB,QAAQ;AAUrC,QAAA,IAAQ,CAAA,QAAA,GAA2B,QAAQ;AAC1D;AAlJO,IAAA,MAAM,QAAQ,GAAA;QACpB,OAAO,IAAI,CAAC,MAAM;;AAOZ,IAAA,MAAM,QAAQ,GAAA;;AACpB,QAAA,OAAM,MAAA,IAAI,CAAC,WAAW,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE,CAAA;;IAG5B,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,cAAc,EACd,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,gBAAgB,EAAE,IAAI,CAAC,gBAAgB,EACvC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,oBAAoB,EAAE,IAAI,CAAC,oBAAoB,EAC/C,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,cAAc,EAAE,IAAI,CAAC,QAAQ,EAAA,EAE7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,CAAQ,CACzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolButton","__stencil_proxyCustomElement"],"sources":["src/components/button/style.scss?tag=kol-button&mode=default&encapsulation=shadow","src/components/button/shadow.tsx"],"sourcesContent":["@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../@shared/kol-button-mixin' as *;\n\n@layer kol-component {\n\t@include kol-button-styles('kol-button');\n}\n","import type {\n\tAccessKeyPropType,\n\tAlternativeButtonLinkRolePropType,\n\tAriaDescriptionPropType,\n\tButtonCallbacksPropType,\n\tButtonProps,\n\tButtonTypePropType,\n\tButtonVariantPropType,\n\tCustomClassPropType,\n\tFocusableElement,\n\tIconsPropType,\n\tLabelWithExpertSlotPropType,\n\tShortKeyPropType,\n\tStencilUnknown,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, h, 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: {\n\t\tdelegatesFocus: true,\n\t},\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/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<StencilUnknown> {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\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<KolButtonWcTag\n\t\t\t\tref={this.catchRef}\n\t\t\t\t_accessKey={this._accessKey}\n\t\t\t\t_ariaControls={this._ariaControls}\n\t\t\t\t_ariaDescription={this._ariaDescription}\n\t\t\t\t_ariaExpanded={this._ariaExpanded}\n\t\t\t\t_ariaSelected={this._ariaSelected}\n\t\t\t\t_customClass={this._customClass}\n\t\t\t\t_disabled={this._disabled}\n\t\t\t\t_hideLabel={this._hideLabel}\n\t\t\t\t_icons={this._icons}\n\t\t\t\t_id={this._id}\n\t\t\t\t_label={this._label}\n\t\t\t\t_name={this._name}\n\t\t\t\t_on={this._on}\n\t\t\t\t_shortKey={this._shortKey}\n\t\t\t\t_syncValueBySelector={this._syncValueBySelector}\n\t\t\t\t_tooltipAlign={this._tooltipAlign}\n\t\t\t\t_type={this._type}\n\t\t\t\t_value={this._value}\n\t\t\t\t_buttonVariant={this._variant}\n\t\t\t>\n\t\t\t\t<slot name=\"expert\" slot=\"expert\"></slot>\n\t\t\t</KolButtonWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the key combination that can be used to trigger or focus the component’s interactive element.\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 the value for the aria-description attribute.\n\t */\n\t@Prop() public _ariaDescription?: AriaDescriptionPropType;\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 * @deprecated Will be removed in the next major version.\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 * @deprecated We prefer the semantic role of the HTML element and do not allow for customization. We will remove this prop in the future.\n\t */\n\t@Prop() public _role?: AlternativeButtonLinkRolePropType;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 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?: 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"],"version":3}

package/dist/components/kol-card-wc.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface KolCardWc extends Components.KolCardWc, HTMLElement {}
+export const KolCardWc: {
+    prototype: KolCardWc;
+    new (): KolCardWc;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/kol-card-wc.js

@@ -0,0 +1,4 @@
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{s as setState}from"./common.js";import{v as validateHasCloser}from"./has-closer.js";import{v as validateLabel}from"./label.js";import{t as translate}from"./i18n.js";import{w as watchHeadingLevel}from"./validation.js";import{d as KolButtonWcTag}from"./component-names.js";import"./Alert.js";import{K as KolHeadingFc}from"./Heading.js";import"./markdown.js";import{n as nonce}from"./dev.utils.js";import{d as dispatchDomEvent,K as KolEvent}from"./events.js";const KolCardWc$1=proxyCustomElement(class extends HTMLElement{constructor(e){super(),!1!==e&&this.__registerHost(),this.nonce=nonce(),this.translateClose=translate("kol-close"),this.close=()=>{var e;void 0!==(null===(e=this._on)||void 0===e?void 0:e.onClose)&&this._on.onClose(new Event("Close")),this.host&&dispatchDomEvent(this.host,KolEvent.close)},this.on={onClick:this.close},this._hasCloser=!1,this._level=0,this.state={_label:""},this.validateOnValue=e=>"object"==typeof e&&null!==e&&"function"==typeof e.onClose}render(){return h(Host,{key:"e2e32f376bd12f7fc8beb4df8f76facb80f5e7a5"},h("div",{key:"0ef931bd24c643b575342f434506483f0b3ebca8","aria-labelledby":this.nonce,class:"kol-card",role:"group"},h(KolHeadingFc,{key:"ce924a0307338f9d6beaa3ea24051fbb3173d83e",class:"kol-card__header",id:this.nonce,level:this.state._level},this.state._label),h("div",{key:"2d004878aedb826c78acb8834d79144b05ae4d1b",class:"kol-card__content"},h("slot",{key:"c5075d61a16c46bdf3c8c5ffea3ca70cd02c4d8c"})),this.state._hasCloser&&h(KolButtonWcTag,{key:"89d83b4fb181fb2bd43b7b5a4dfedba1660395b4",class:"kol-card__close-button","data-testid":"card-close-button",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:this.translateClose,_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){validateHasCloser(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateLevel(e){watchHeadingLevel(this,e)}componentWillLoad(){this.validateHasCloser(this._hasCloser),this.validateLabel(this._label),this.validateLevel(this._level),this.validateOn(this._on)}get host(){return this}static get watchers(){return{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}}},[260,"kol-card-wc",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],state:[32]},void 0,{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card-wc"].forEach(e=>{if("kol-card-wc"===e)customElements.get(e)||customElements.define(e,KolCardWc$1)})}const KolCardWc=KolCardWc$1,defineCustomElement=defineCustomElement$1;export{KolCardWc,defineCustomElement};

package/dist/components/kol-card-wc.js.map

@@ -0,0 +1 @@
+{"file":"kol-card-wc.js","mappings":"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","names":["KolCardWc","__stencil_proxyCustomElement"],"sources":["src/components/card/component.tsx"],"sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { CardAPI, CardStates, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateHasCloser, validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KolHeadingFc } from '../../functional-components';\nimport { nonce } from '../../utils/dev.utils';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card-wc',\n\tshadow: false,\n})\nexport class KolCardWc implements CardAPI {\n\t@Element() private readonly host?: HTMLKolCardElement;\n\tprivate readonly nonce = nonce();\n\tprivate readonly translateClose = translate('kol-close');\n\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.close);\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host>\n\t\t\t\t{/*\n\t\t\t\t\tUsing a <div> with role=\"group\" instead of <section> prevents assistive technologies\n\t\t\t\t\tfrom turning each card with a heading into a landmark region. This avoids cluttering\n\t\t\t\t\tpage navigation when many cards are present.\n\t\t\t\t*/}\n\t\t\t\t<div aria-labelledby={this.nonce} class=\"kol-card\" role=\"group\">\n\t\t\t\t\t<KolHeadingFc class=\"kol-card__header\" id={this.nonce} level={this.state._level}>\n\t\t\t\t\t\t{this.state._label}\n\t\t\t\t\t</KolHeadingFc>\n\t\t\t\t\t<div class=\"kol-card__content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"kol-card__close-button\"\n\t\t\t\t\t\t\tdata-testid=\"card-close-button\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\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_label={this.translateClose}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n\n\t@State() public state: CardStates = {\n\t\t_label: '', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}

package/dist/components/kol-card.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host}from"@stencil/core/internal/client";import{t as translate}from"./i18n2.js";import{w as watchHeadingLevel}from"./validation.js";import{a as KolButtonWcTag}from"./component-names.js";import{K as KolHeadingFc}from"./Heading.js";import{s as setState}from"./prop.validators.js";import{v as validateHasCloser}from"./has-closer.js";import{v as validateLabel}from"./label.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :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 calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n  .close {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",KolCardDefaultStyle0=defaultStyleCss,KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(){super(),this.__registerHost(),this.__attachShadow(),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 h(Host,{key:"052e67450cacfa152ebc9d50f5e10484a0308db1",class:"kol-card"},h("div",{key:"f3941c8745be8be0607fcd0d29e6c8d8d4105898",class:"card"},h("div",{key:"43e5b2d3b5e1d35a2a03c0c3260f383b65b92d60",class:"header"},h(KolHeadingFc,{key:"e50f3d9a169160873169da33331348e084050b2c",level:this.state._level},this.state._label)),h("div",{key:"de46fd2d7a5341e9bb3022946ff6701a0a3bfa73",class:"content"},h("slot",{key:"ee5b57605053ff71ec2d68fa0dba766e94da230f"})),this.state._hasCloser&&h(KolButtonWcTag,{key:"331ea94e23553ed728a35a24a9873d0fd22dccfe",class:"close",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:translate("kol-close"),_on:this.on,_tooltipAlign:"left"})))}validateOn(e){this.validateOnValue(e)&&setState(this,"_on",{onClose:e.onClose})}validateHasCloser(e){validateHasCloser(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateLevel(e){watchHeadingLevel(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"]}}static get style(){return{default:KolCardDefaultStyle0}}},[33,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2],state:[32]},void 0,{_on:["validateOn"],_hasCloser:["validateHasCloser"],_label:["validateLabel"],_level:["validateLevel"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card"].forEach((e=>{if("kol-card"===e)customElements.get(e)||customElements.define(e,KolCard$1)}))}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{g as KolCardWcTag}from"./component-names.js";const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-card {\n    /* Visible with forced colors  */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n    height: 100%;\n  }\n  .kol-card__close-button {\n    position: absolute;\n    top: 0;\n    right: 0;\n  }\n}",KolCard$1=proxyCustomElement(class extends HTMLElement{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this._hasCloser=!1,this._level=0}render(){return h(KolCardWcTag,{key:"db950a543bc2f41a1e0786c9ac3d4cb0fce5cf97",_on:this._on,_hasCloser:this._hasCloser,_label:this._label,_level:this._level},h("slot",{key:"f7ad1dd60427b5e2ae00f0e2260309a025d1ed44"}))}static get style(){return{default:defaultStyleCss}}},[289,"kol-card",{_on:[16],_hasCloser:[4,"_has-closer"],_label:[1],_level:[2]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-card"].forEach(n=>{if("kol-card"===n)customElements.get(n)||customElements.define(n,KolCard$1)})}const KolCard=KolCard$1,defineCustomElement=defineCustomElement$1;export{KolCard,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-card.js","mappings":";;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,guLAAguL,CAAC;AACzvL,6BAAe,eAAe;;MCoBjBA,SAAO;;;;;QACF,UAAK,GAAG;;YACxB,IAAI,CAAA,MAAA,IAAI,CAAC,GAAG,0CAAE,OAAO,MAAK,SAAS,EAAE;gBACpC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;aACrC;SACD,CAAC;QAEe,OAAE,GAAG;YACrB,OAAO,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC;QAwDM,oBAAe,GAAG,CAAC,KAAc,KACxC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,KAAK,IAAI,IAAI,OAAQ,KAAmC,CAAC,OAAO,KAAK,UAAU,CAAC;;0BAjB7E,KAAK;;sBAUJ,CAAC;qBAEJ;YACnC,MAAM,EAAE,EAAE;SACV;;IApDM,MAAM;QACZ,QACC,EAAC,IAAI,qDAAC,KAAK,EAAC,UAAU,IACrB,4DAAK,KAAK,EAAC,MAAM,IAChB,4DAAK,KAAK,EAAC,QAAQ,IAClB,EAAC,YAAY,qDAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,IAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAgB,CACrE,EACN,4DAAK,KAAK,EAAC,SAAS,IACnB,8DAAQ,CACH,EACL,IAAI,CAAC,KAAK,CAAC,UAAU,KACrB,EAAC,cAAc,qDACd,KAAK,EAAC,OAAO,EACb,UAAU,QACV,MAAM,EAAE;gBACP,IAAI,EAAE;oBACL,IAAI,EAAE,uBAAuB;iBAC7B;aACD,EACD,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,EAC9B,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,aAAa,EAAC,MAAM,GACH,CAClB,CACI,CACA,EACN;KACF;IA+BM,UAAU,CAAC,KAAiC;QAClD,IAAI,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAE;YAChC,QAAQ,CAA4B,IAAI,EAAE,KAAK,EAAE;gBAChD,OAAO,EAAG,KAAoC,CAAC,OAAO;aACtD,CAAC,CAAC;SACH;KACD;IAGM,iBAAiB,CAAC,KAAyB;QACjD,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC/B;IAGM,aAAa,CAAC,KAAqB;QACzC,aAAa,CAAC,IAAI,EAAE,KAAK,EAAE;YAC1B,QAAQ,EAAE,IAAI;SACd,CAAC,CAAC;KACH;IAGM,aAAa,CAAC,KAAoB;QACxC,iBAAiB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;KAC/B;IAEM,iBAAiB;QACvB,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACxC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KAC1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolCard"],"sources":["src/components/card/style.scss?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/shadow.tsx"],"sourcesContent":["@import '../@shared/mixins';\n@import '../style';\n@import '../tooltip/style.scss';\n\n@layer kol-component {\n\t:host {\n\t\tfont-size: rem(16);\n\t}\n\n\t:host > div.card {\n\t\theight: 100%;\n\t\tposition: relative;\n\t\t/* Visible with forced colors  */\n\t\toutline: transparent solid rem(1);\n\t}\n\n\t.close {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tright: 0;\n\t}\n}\n","import { Component, h, Host, Prop, State, Watch } from '@stencil/core';\nimport type { JSX } from '@stencil/core';\nimport type { CardAPI, CardStates, HasCloserPropType, HeadingLevel, KoliBriAlertEventCallbacks, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';\nimport { setState, validateHasCloser, validateLabel } from '../../schema';\n\nimport { translate } from '../../i18n';\nimport { watchHeadingLevel } from '../heading/validation';\n\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KolHeadingFc } from '../../functional-components';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements CardAPI {\n\tprivate readonly close = () => {\n\t\tif (this._on?.onClose !== undefined) {\n\t\t\tthis._on.onClose(new Event('Close'));\n\t\t}\n\t};\n\n\tprivate readonly on = {\n\t\tonClick: this.close,\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<Host class=\"kol-card\">\n\t\t\t\t<div class=\"card\">\n\t\t\t\t\t<div class=\"header\">\n\t\t\t\t\t\t<KolHeadingFc level={this.state._level}>{this.state._label}</KolHeadingFc>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"content\">\n\t\t\t\t\t\t<slot />\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.state._hasCloser && (\n\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\tclass=\"close\"\n\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t_icons={{\n\t\t\t\t\t\t\t\tleft: {\n\t\t\t\t\t\t\t\t\ticon: 'codicon codicon-close',\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_label={translate('kol-close')}\n\t\t\t\t\t\t\t_on={this.on}\n\t\t\t\t\t\t\t_tooltipAlign=\"left\"\n\t\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 1;\n\n\t@State() public state: CardStates = {\n\t\t_label: '', // ⚠ required\n\t};\n\n\tprivate validateOnValue = (value: unknown): boolean =>\n\t\ttypeof value === 'object' && value !== null && typeof (value as KoliBriCardEventCallbacks).onClose === 'function';\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriCardEventCallbacks): void {\n\t\tif (this.validateOnValue(value)) {\n\t\t\tsetState<KoliBriCardEventCallbacks>(this, '_on', {\n\t\t\t\tonClose: (value as KoliBriAlertEventCallbacks).onClose,\n\t\t\t});\n\t\t}\n\t}\n\n\t@Watch('_hasCloser')\n\tpublic validateHasCloser(value?: HasCloserPropType): void {\n\t\tvalidateHasCloser(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_level')\n\tpublic validateLevel(value?: HeadingLevel): void {\n\t\twatchHeadingLevel(this, value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateHasCloser(this._hasCloser);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateLevel(this._level);\n\t\tthis.validateOn(this._on);\n\t}\n}\n"],"version":3}
+{"file":"kol-card.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,q2MAAq2M;;MCgBh3MA,SAAO,GAAAC,kBAAA,CAAA,MAAA,OAAA,SAAA,WAAA,CAAA;AAPpB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;AAyBgB,QAAA,IAAU,CAAA,UAAA,GAAa,KAAK;AAU5B,QAAA,IAAM,CAAA,MAAA,GAAkB,CAAC;AACxC;IA5BO,MAAM,GAAA;QACZ,QACC,CAAC,CAAA,YAAY,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAA,EACjG,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["KolCard","__stencil_proxyCustomElement"],"sources":["src/components/card/style.scss?tag=kol-card&mode=default&encapsulation=shadow","src/components/card/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-card-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t@include kol-card;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport type { CardProps, HeadingLevel, KoliBriCardEventCallbacks, LabelPropType } from '../../schema';\n\nimport { KolCardWcTag } from '../../core/component-names';\n\n/**\n * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.\n */\n@Component({\n\ttag: 'kol-card',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolCard implements CardProps {\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolCardWcTag _on={this._on} _hasCloser={this._hasCloser} _label={this._label} _level={this._level}>\n\t\t\t\t<slot />\n\t\t\t</KolCardWcTag>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the event callback functions for the component.\n\t */\n\t@Prop() public _on?: KoliBriCardEventCallbacks;\n\n\t/**\n\t * Defines whether the element can be closed.\n\t * @TODO: Change type back to `HasCloserPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hasCloser?: boolean = false;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).\n\t */\n\t@Prop() public _label!: LabelPropType;\n\n\t/**\n\t * Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.\n\t */\n\t@Prop() public _level?: HeadingLevel = 0;\n}\n"],"version":3}

package/dist/components/kol-combobox.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{proxyCustomElement,HTMLElement,h,Host,Fragment}from"@stencil/core/internal/client";import{n as nonce}from"./dev.utils2.js";import{s as stopPropagation,t as tryToDispatchKoliBriEvent}from"./events.js";import{I as InputIconController}from"./controller-icon.js";import{v as validateSuggestions}from"./suggestions.js";import{e as watchString,c as watchBoolean}from"./prop.validators.js";import{i as KolInputTag,c as KolIconTag}from"./component-names.js";import{g as getRenderStates}from"./controller2.js";import{t as translate}from"./i18n2.js";import{c as clsx}from"./clsx.js";import{I as InternalUnderlinedBadgeText}from"./InternalUnderlinedBadgeText.js";import{s as showExpertSlot,b as buildBadgeTextString}from"./reuse.js";class ComboboxController extends InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){watchString(this.component,"_placeholder",e)}validateRequired(e){watchBoolean(this.component,"_required",e)}validateSuggestions(e){validateSuggestions(this.component,e)}validateValue(e){watchString(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]),\n  .kol-input .input {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n  .kol-span-wc {\n    display: grid;\n    place-items: center;\n  }\n  /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  .kol-span-wc > span {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  /* This is the text label. */\n  .hide-label > .kol-span-wc > span > span {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span-wc,\n  [disabled]:focus .kol-span-wc {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip-wc {\n    display: contents;\n  }\n  .kol-tooltip-wc .tooltip-floating {\n    animation-duration: 0.5s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  /* Shared between content and arrow */\n  .kol-tooltip-wc .tooltip-area {\n    background-color: #fff;\n    color: #000;\n  }\n  .kol-tooltip-wc .tooltip-arrow {\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip-wc .tooltip-content {\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .required label > span::after,\n  .required legend > span::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  input,\n  textarea {\n    cursor: text;\n  }\n  input[type=checkbox],\n  input[type=color],\n  input[type=file],\n  input[type=radio],\n  input[type=range],\n  label,\n  option,\n  select {\n    cursor: pointer;\n  }\n  /* input[type='checkbox'], */\n  /* input[type='radio'], */\n  /* input[type='range'], */\n  input[type=color],\n  input[type=date],\n  input[type=datetime-local],\n  input[type=email],\n  input[type=file],\n  input[type=month],\n  input[type=number],\n  input[type=password],\n  input[type=search],\n  input[type=tel],\n  input[type=text],\n  input[type=time],\n  input[type=url],\n  input[type=week],\n  select,\n  select[multiple] option,\n  textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  /* needed hack for vertical alignment */\n  input[type=file] {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 10) 0.5em;\n  }\n  /* needed hack for vertical alignment */\n  select[multiple] option {\n    padding: calc((var(--a11y-min-size) - (16rem / var(--kolibri-root-font-size, 16))) / 2) 0.5em;\n  }\n  .input {\n    background-color: white;\n  }\n}\n@layer kol-component {\n  .kol-input {\n    display: grid;\n  }\n  .kol-input .input-slot {\n    flex-grow: 1;\n  }\n  input:not([type=checkbox], [type=radio]),\n  select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  input:focus,\n  option:focus,\n  select:focus,\n  textarea:focus {\n    outline: 0;\n  }\n  .input {\n    display: flex;\n    align-items: center;\n  }\n  .input > .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input.required .input-tooltip .span-label::after {\n    content: \"*\";\n  }\n}\n@layer kol-component {\n  :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__icon {\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    width: var(--a11y-min-size);\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  .combobox__item {\n    cursor: pointer;\n  }\n  .combobox__listbox--cursor-hidden .combobox__item {\n    cursor: none !important;\n  }\n}",KolComboboxDefaultStyle0=defaultStyleCss,KolCombobox$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}selectOption(e,t){var n;this.controller.onFacade.onInput(e,!0,t),this.controller.onFacade.onChange(e,t),this.controller.setFormAssociatedValue(t),this.state._value=t,null===(n=this.refInput)||void 0===n||n.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=Array.isArray(this._suggestions)?this._suggestions.filter((t=>t.toLowerCase().includes(e.toLowerCase()))):this._filteredSuggestions,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 e=showExpertSlot(this.state._label),{ariaDescribedBy:t}=getRenderStates(this.state);return h(Host,{key:"c582c7ea460408d5092d339f8c354948ade0ace8",class:"kol-combobox"},h("div",{key:"449497a4ee717f7b7a9a234b06523dcdcd7fe15e",class:clsx("combobox",this.state._disabled&&"combobox--disabled")},h(KolInputTag,{key:"c4a306c636ea1489fa24e68639a82e240012a421",_accessKey:this.state._accessKey,_alert:this.showAsAlert(),_disabled:this.state._disabled,_hideError:this.state._hideError,_hideLabel:this.state._hideLabel,_hint:this.state._hint,_icons:this.state._icons,_id:this.state._id,_label:this.state._label,_msg:this.state._msg,_required:this.state._required,_shortKey:this.state._shortKey,_tooltipAlign:this._tooltipAlign,_touched:this.state._touched,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},role:"presentation"},h("span",{key:"b4d1279c194cf29ad53f826bb1caffb64867ce5b",slot:"label"},e?h("slot",{name:"expert"}):"string"==typeof this.state._accessKey||"string"==typeof this.state._shortKey?h(Fragment,null,h(InternalUnderlinedBadgeText,{badgeText:buildBadgeTextString(this.state._accessKey,this.state._shortKey),label:this.state._label})," ",h("span",{class:"access-key-hint","aria-hidden":"true"},buildBadgeTextString(this.state._accessKey,this.state._shortKey))):h("span",null,this.state._label)),h("div",{key:"d2fdc0250f343437d5c3214e37849b36af724fa7",slot:"input"},h("div",{key:"999e8c651d2443c743c2e610b6c2781dd7132e3b",class:"combobox__group"},h("input",Object.assign({key:"111e6973eec55e0904cea83641c315d2bf5d0444",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":t.length>0?t.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,{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})),h("button",{key:"84199174f7e26dff86b32f1cfce56263b84dfc90",tabindex:"-1",class:"combobox__icon",onClick:this.toggleListbox.bind(this),disabled:this.state._disabled},h(KolIconTag,{key:"0c1ddd3951e85d229c24262d1cb6537c6aab6dec",_icons:"codicon codicon-triangle-down",_label:translate("kol-dropdown")}))),this._isOpen&&!(!0===this.state._disabled)&&h("ul",{key:"25f7c5ea63432722e958965cf484973d0d0aff05",role:"listbox",class:clsx("combobox__listbox",this.blockSuggestionMouseOver&&"combobox__listbox--cursor-hidden"),onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map(((e,t)=>h("li",{id:`option-${t}`,key:`-${t}`,ref:e=>{e&&(this.refSuggestions[t]=e)},"data-index":t,tabIndex:-1,role:"option","aria-selected":this.state._value===e,onClick:t=>{this.selectOption(t,e),this.toggleListbox()},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},class:"combobox__item",onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(t,e),this.toggleListbox(),t.preventDefault())}},e))))))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(1)));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,(()=>this.moveFocus(-1)));break;case"Tab":this._isOpen&&(this._isOpen=!this._isOpen,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":i(!1),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this.toggleListbox();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(0)}));break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,(()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)}));break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(-10)));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,(()=>this._isOpen&&this.moveFocus(10)))}}handleWindowClick(e){null==this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(){super(),this.__registerHost(),this.__attachShadow(),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus(),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.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._filteredSuggestions=void 0,this._accessKey=void 0,this._placeholder=void 0,this._alert=void 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._shortKey=void 0,this._syncValueBySelector=void 0,this._tabIndex=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_hasValue:!1,_hideError:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new ComboboxController(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return void 0===this.state._alert?Boolean(this.state._touched)&&!this.inputHasFocus:this.state._alert}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)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=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._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}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout((()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()}),0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){var t;stopPropagation(e),tryToDispatchKoliBriEvent("change",this.host,this.state._value),this.controller.setFormAssociatedValue(this.state._value),"function"!=typeof(null===(t=this.state._on)||void 0===t?void 0:t.onChange)||this._isOpen||this.state._on.onChange(e,this.state._value)}static get delegatesFocus(){return!0}get host(){return 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"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:KolComboboxDefaultStyle0}}},[49,"kol-combobox",{_accessKey:[1,"_access-key"],_placeholder:[1],_alert:[1540],_disabled:[4],_hideError:[1540,"_hide-error"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_suggestions:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tabIndex:[2,"_tab-index"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1025],blockSuggestionMouseOver:[32],_isOpen:[32],_filteredSuggestions:[32],state:[32],inputHasFocus:[32],getValue:[64],kolFocus:[64]},[[0,"keydown","handleKeyDown"],[8,"click","handleWindowClick"],[1,"mousemove","handleMouseEvent"],[8,"focusout","handleFocusOut"],[8,"blur","handleWindowBlur"]],{_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"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_tabIndex:["validateTabIndex"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-combobox"].forEach((e=>{if("kol-combobox"===e)customElements.get(e)||customElements.define(e,KolCombobox$1)}))}const KolCombobox=KolCombobox$1,defineCustomElement=defineCustomElement$1;export{KolCombobox,defineCustomElement};
+import{proxyCustomElement,HTMLElement,h}from"@stencil/core/internal/client";import{c as clsx}from"./clsx.js";import{g as getRenderStates,F as FormFieldStateWrapper}from"./controller2.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon.js";import{I as InputStateWrapper}from"./InputStateWrapper.js";import{C as CustomSuggestionsToggleFc,a as CustomSuggestionsOptionsGroupFc,b as CustomSuggestionsOptionFc}from"./CustomSuggestionsToggle.js";import{n as nonce}from"./dev.utils.js";import{h as watchString}from"./common.js";import{v as validatePlaceholder}from"./placeholder.js";import{v as validateRequired}from"./required.js";import{v as validateSuggestions}from"./suggestions.js";class ComboboxController extends InputIconController{constructor(e,t,n){super(e,t,n),this.component=e}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateSuggestions(e){validateSuggestions(this.component,e)}validateValue(e){watchString(this.component,"_value",e)}componentWillLoad(){super.componentWillLoad(),this.validatePlaceholder(this.component._placeholder),this.validateRequired(this.component._required),this.validateSuggestions(this.component._suggestions),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: grid;\n    place-items: center;\n    /* The sub span in KolSpan is the horizontal span with icon left and right and the label text in the middle. */\n  }\n  .kol-span__container {\n    display: flex;\n    place-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    visibility: hidden;\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-custom-suggestions-option {\n    line-height: 1.5;\n    white-space: normal;\n    cursor: pointer;\n    overflow-wrap: break-word;\n  }\n  .kol-custom-suggestions-options-group--cursor-hidden .kol-custom-suggestions-option {\n    cursor: none !important;\n  }\n  .kol-custom-suggestions-options-group {\n    background-color: white;\n    display: block;\n    position: absolute;\n    z-index: 2;\n    max-height: calc(250 * 1rem / var(--kolibri-root-font-size, 16));\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: auto;\n    list-style-type: none;\n  }\n  .kol-custom-suggestions-toggle {\n    display: flex;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n  }\n  .kol-custom-suggestions-toggle:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: \"*\";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: \"*\";\n  }\n  .kol-input-container {\n    background-color: white;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-input {\n    width: 100%;\n    min-width: var(--a11y-min-size);\n  }\n  .kol-input:focus {\n    outline: none;\n  }\n}",KolCombobox$1=proxyCustomElement(class extends HTMLElement{async getValue(){return this.state._value}async kolFocus(){var e;null===(e=this.refInput)||void 0===e||e.focus()}selectOption(e){var t;this.controller.onFacade.onInput(new CustomEvent("input",{bubbles:!0,detail:{name:this.state._name,value:e}}),!0,e),this.controller.onFacade.onChange(new CustomEvent("change",{bubbles:!0,detail:{name:this.state._name,value:e}}),e),this.controller.setFormAssociatedValue(e),this.state._value=e,null===(t=this.refInput)||void 0===t||t.focus()}onInput(e){const t=e.target;this.state._value=t.value,this._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=Array.isArray(this._suggestions)?this._suggestions.filter(t=>t.toLowerCase().includes(e.toLowerCase())):this._filteredSuggestions,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)}getFormFieldProps(){return{state:this.state,class:clsx("kol-combobox",{"has-value":this.state._hasValue}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.refInput)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getInputProps(){const{ariaDescribedBy:e}=getRenderStates(this.state),t=!0===this.state._disabled;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,class:"kol-combobox__input",type:"text",role:"combobox","aria-activedescendant":this._isOpen&&this._focusedOptionIndex>=0?`option-${this._focusedOptionIndex}`:void 0,"aria-autocomplete":"both","aria-controls":"listbox","aria-describedby":e.length>0?e.join(" "):void 0,"aria-expanded":this._isOpen?"true":"false","aria-label":this.state._hideLabel&&"string"==typeof this.state._label?this.state._label:void 0,"aria-labelledby":this.state._id,"aria-keyshortcuts":this.state._shortKey,value:this.state._value,accessKey:this.state._accessKey,autocapitalize:"off",autocorrect:"off",disabled:t,customSuggestions:!0,id:this.state._id,name:this.state._name,required:this.state._required},this.controller.onFacade),{onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1},onChange:this.onChange.bind(this),onInput:this.onInput.bind(this),placeholder:this.state._placeholder})}render(){const e=!0===this.state._disabled;return h(FormFieldStateWrapper,Object.assign({key:"b5a6f7b326f51416cc1c1c5791cef34552433327"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"801cdf53218006019828f3328f0eccfccacc1132",state:this.state},h("div",{key:"354db1547eba447cddefb456802b512efc807d54",class:"kol-combobox__group"},h(InputStateWrapper,Object.assign({key:"d231adf62c4e893a50ab45f55dfa2b709c492e48"},this.getInputProps())),h(CustomSuggestionsToggleFc,{key:"d61b92fad3dd59b99a2342ba9fd5091ba813bde2",onClick:this.toggleListbox.bind(this),disabled:e})),this._isOpen&&!e&&h(CustomSuggestionsOptionsGroupFc,{key:"dec96f5306ae54cc5c9561b04bf8ef09f1e2baee",blockSuggestionMouseOver:this.blockSuggestionMouseOver,onKeyDown:this.handleKeyDownDropdown.bind(this)},Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0&&this._filteredSuggestions.map((e,t)=>h(CustomSuggestionsOptionFc,{index:t,option:e,searchTerm:this.state._value,ref:e=>{e&&(this.refSuggestions[t]=e)},selected:this.state._value===e,onClick:()=>{this.selectOption(e),this.toggleListbox(),this._isOpen=!1,this._hasOpened=!1},onMouseOver:()=>{this.blockSuggestionMouseOver||this.focusOption(t)},onFocus:()=>{this.focusOption(t)},onKeyDown:t=>{"Enter"!==t.key&&"NumpadEnter"!==t.key||(this.selectOption(e),this.toggleListbox(),t.preventDefault())}})))))}handleKeyDown(e){var t,n;const i=(t,n)=>{var i;e.preventDefault(),void 0!==t&&(this._isOpen=t,t||null===(i=this.refInput)||void 0===i||i.focus()),null==n||n()};switch(e.key){case"Down":case"ArrowDown":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(1));break;case"Up":case"ArrowUp":this.blockSuggestionMouseOver=!0,i(!0,()=>this.moveFocus(-1));break;case"Tab":this._isOpen&&(this._isOpen=!1,null===(t=this.refInput)||void 0===t||t.focus());break;case"Esc":case"Escape":this._hasOpened=!1,this._isOpen=!1,e.preventDefault(),null===(n=this.refInput)||void 0===n||n.focus();break;case"NumpadEnter":case"Enter":this._isOpen&&this._focusedOptionIndex>=0?(this._filteredSuggestions&&this.selectOption(this._filteredSuggestions[this._focusedOptionIndex]),this._isOpen=!1,this._hasOpened=!1):this.toggleListbox(),e.preventDefault();break;case"Home":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(0)});break;case"End":this.blockSuggestionMouseOver=!0,i(void 0,()=>{this._isOpen&&this.focusOption(this._filteredSuggestions?this._filteredSuggestions.length-1:0)});break;case"PageUp":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(-10));break;case"PageDown":this.blockSuggestionMouseOver=!0,i(void 0,()=>this._isOpen&&this.moveFocus(10))}}handleWindowClick(e){void 0===this.host||this.host.contains(e.target)||(this._isOpen=!1)}constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.refSuggestions=[],this._focusedOptionIndex=-1,this.toggleListbox=()=>{var e;if(!0===this.state._disabled)this._isOpen=!1;else if(null===(e=this.refInput)||void 0===e||e.focus(),!this._hasOpened&&Array.isArray(this._filteredSuggestions)&&this._filteredSuggestions.length>0){this._isOpen=!0,this._hasOpened=!0;const e=this._filteredSuggestions.findIndex(e=>e===this.state._value);this._focusedOptionIndex=e>=0?e:-1,this.focusOption(this._focusedOptionIndex)}},this.catchRef=e=>{this.refInput=e},this.blockSuggestionMouseOver=!1,this._isOpen=!1,this._hasOpened=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_suggestions:[],_value:""},this.inputHasFocus=!1,this.controller=new ComboboxController(this,"combobox",this.host),this.onInput=this.onInput.bind(this)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateAccessKey(e){this.controller.validateAccessKey(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSuggestions(e){this.controller.validateSuggestions(e),this._filteredSuggestions=e}validateRequired(e){this.controller.validateRequired(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e),this.controller.setFormAssociatedValue(e)}componentWillLoad(){this.refSuggestions=[],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}handleMouseEvent(){this.blockSuggestionMouseOver=!1}handleFocusOut(){setTimeout(()=>{var e;(null===(e=this.host)||void 0===e?void 0:e.contains(document.activeElement))||this.onBlur()},0)}handleWindowBlur(){this.onBlur()}onBlur(){var e;this._hasOpened=!1,this._isOpen&&(this._isOpen=!this._isOpen,null===(e=this.refInput)||void 0===e||e.focus())}onChange(e){this.controller.onFacade.onChange(e),this.controller.setFormAssociatedValue(this.state._value)}static get delegatesFocus(){return!0}get host(){return this}static get watchers(){return{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}static get style(){return{default:defaultStyleCss}}},[305,"kol-combobox",{_accessKey:[1,"_access-key"],_placeholder:[1],_disabled:[4],_hideMsg:[4,"_hide-msg"],_hideLabel:[4,"_hide-label"],_hint:[1],_icons:[1],_id:[1],_label:[1],_msg:[1],_name:[1],_on:[16],_suggestions:[1],_required:[4],_shortKey:[1,"_short-key"],_syncValueBySelector:[1,"_sync-value-by-selector"],_tooltipAlign:[1,"_tooltip-align"],_touched:[1540],_value:[1537],blockSuggestionMouseOver:[32],_isOpen:[32],_filteredSuggestions:[32],_hasOpened:[32],state:[32],inputHasFocus:[32],getValue:[64],kolFocus:[64]},[[0,"keydown","handleKeyDown"],[8,"click","handleWindowClick"],[1,"mousemove","handleMouseEvent"],[8,"focusout","handleFocusOut"],[8,"blur","handleWindowBlur"]],{_placeholder:["validatePlaceholder"],_accessKey:["validateAccessKey"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_shortKey:["validateShortKey"],_suggestions:["validateSuggestions"],_required:["validateRequired"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}]);function defineCustomElement$1(){if("undefined"==typeof customElements)return;["kol-combobox"].forEach(e=>{if("kol-combobox"===e)customElements.get(e)||customElements.define(e,KolCombobox$1)})}const KolCombobox=KolCombobox$1,defineCustomElement=defineCustomElement$1;export{KolCombobox,defineCustomElement};

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

@@ -1 +1 @@
-{"file":"kol-combobox.js","mappings":"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","names":["KolCombobox"],"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 } from '../../schema';\nimport { watchBoolean, validateSuggestions, watchString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\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 validatePlaceholder(value?: string): void {\n\t\twatchString(this.component, '_placeholder', value);\n\t}\n\tpublic validateRequired(value?: boolean): void {\n\t\twatchBoolean(this.component, '_required', value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@import '../@shared/mixins';\n@import '../style';\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\n\t\t&--disabled,\n\t\t&--disabled * {\n\t\t\tcursor: not-allowed !important;\n\t\t}\n\n\t\t&--disabled {\n\t\t\topacity: 0.5;\n\t\t\toutline: none;\n\t\t}\n\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&__icon {\n\t\t\talign-items: center;\n\t\t\tcursor: pointer;\n\t\t\tdisplay: flex;\n\t\t\theight: var(--a11y-min-size);\n\t\t\twidth: var(--a11y-min-size);\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\n\t\t&__item {\n\t\t\tcursor: pointer;\n\n\t\t\t.combobox__listbox--cursor-hidden & {\n\t\t\t\tcursor: none !important;\n\t\t\t}\n\t\t}\n\t}\n}\n","import type {\n\tComboboxAPI,\n\tComboboxStates,\n\tHideErrorPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tKoliBriHorizontalIcons,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport { buildBadgeTextString, showExpertSlot } from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, Fragment, h, Host, Listen, Method, Prop, State, Watch } from '@stencil/core';\n\nimport { nonce } from '../../utils/dev.utils';\nimport { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';\nimport { ComboboxController } from './controller';\nimport { KolIconTag, KolInputTag } from '../../core/component-names';\nimport { InternalUnderlinedBadgeText } from '../../functional-components';\nimport { getRenderStates } from '../input/controller';\nimport { translate } from '../../i18n';\nimport clsx from 'clsx';\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: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolCombobox implements ComboboxAPI {\n\t@Element() private readonly host?: HTMLKolComboboxElement;\n\tprivate refInput?: 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\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\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\tthis.refInput?.focus();\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.refInput = 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.refInput?.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 = Array.isArray(this._suggestions)\n\t\t\t\t? this._suggestions.filter((option: W3CInputValue) => {\n\t\t\t\t\t\treturn (option as string).toLowerCase().includes(query.toLowerCase());\n\t\t\t\t\t})\n\t\t\t\t: this._filteredSuggestions;\n\n\t\t\tthis._isOpen = this._filteredSuggestions && this._filteredSuggestions.length > 0 ? true : false;\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\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={clsx('combobox', this.state._disabled && 'combobox--disabled')}>\n\t\t\t\t\t<KolInputTag\n\t\t\t\t\t\t_accessKey={this.state._accessKey}\n\t\t\t\t\t\t_alert={this.showAsAlert()}\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_shortKey={this.state._shortKey}\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.refInput?.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' || typeof this.state._shortKey === 'string' ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<InternalUnderlinedBadgeText badgeText={buildBadgeTextString(this.state._accessKey, this.state._shortKey)} label={this.state._label} />{' '}\n\t\t\t\t\t\t\t\t\t<span class=\"access-key-hint\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t\t\t\t{buildBadgeTextString(this.state._accessKey, this.state._shortKey)}\n\t\t\t\t\t\t\t\t\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\tonFocus={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = true;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonBlur={(event) => {\n\t\t\t\t\t\t\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\t\t\t\t\t\t\tthis.inputHasFocus = false;\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonChange={this.onChange.bind(this)}\n\t\t\t\t\t\t\t\t\tonInput={this.onInput.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<button tabindex=\"-1\" class=\"combobox__icon\" onClick={this.toggleListbox.bind(this)} disabled={this.state._disabled}>\n\t\t\t\t\t\t\t\t\t<KolIconTag _icons=\"codicon codicon-triangle-down\" _label={translate('kol-dropdown')} />\n\t\t\t\t\t\t\t\t</button>\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\n\t\t\t\t\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\t\t\t\t\tclass={clsx('combobox__listbox', this.blockSuggestionMouseOver && 'combobox__listbox--cursor-hidden')}\n\t\t\t\t\t\t\t\t\tonKeyDown={this.handleKeyDownDropdown.bind(this)}\n\t\t\t\t\t\t\t\t>\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={-1}\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\tif (!this.blockSuggestionMouseOver) {\n\t\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\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\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</KolInputTag>\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.refInput?.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\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = !this._isOpen;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\thandleEvent(false);\n\t\t\t\tthis.refInput?.focus();\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\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\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 blockSuggestionMouseOver: boolean = false;\n\t@State()\n\tprivate _isOpen: boolean = 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 * @deprecated Will be removed in v3. Use automatic behaviour instead.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _alert?: boolean;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t */\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?: Stringified<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!: SuggestionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual short key hint to the component.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\n\n\t/**\n\t * 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\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new ComboboxController(this, 'combobox', this.host);\n\t\tthis.onInput = this.onInput.bind(this);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\tif (this.state._alert === undefined) {\n\t\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t\t}\n\t\treturn this.state._alert;\n\t}\n\n\t@Watch('_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?: Stringified<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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t\tthis._filteredSuggestions = 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._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\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\tprivate onBlur() {\n\t\tif (this._isOpen) {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tthis.refInput?.focus();\n\t\t}\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.state._value);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this.state._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.state._value);\n\t\t}\n\t}\n}\n"],"version":3}
+{"file":"kol-combobox.js","mappings":"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","names":["KolCombobox","__stencil_proxyCustomElement","KolFormFieldStateWrapperFc","KolInputContainerFc","KolInputStateWrapperFc"],"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 { ComboboxProps, ComboboxWatches, PlaceholderPropType, RequiredPropType, SuggestionsPropType } from '../../schema';\nimport { validatePlaceholder, validateRequired, validateSuggestions, watchString } from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\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 validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tvalidateSuggestions(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateSuggestions(this.component._suggestions);\n\t\tthis.validateValue(this.component._value);\n\t}\n}\n","@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../../styles/kol-custom-suggestions-option' as *;\n@use '../../styles/kol-custom-suggestions-options-group' as *;\n@use '../../styles/kol-custom-suggestions-toggle' as *;\n@use '../../styles/kol-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../../styles/kol-input-mixin' as *;\n@use '../@shared/mixins' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-custom-suggestions-option;\n\t@include kol-custom-suggestions-options-group;\n\t@include kol-custom-suggestions-toggle;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\t@include kol-input;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Listen, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\nimport { getRenderStates } from '../../functional-component-wrappers/_helpers/getRenderStates';\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport type { InputStateWrapperProps } from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport KolInputStateWrapperFc from '../../functional-component-wrappers/InputStateWrapper/InputStateWrapper';\nimport CustomSuggestionsOptionFc from '../../functional-components/CustomSuggestionsOption/CustomSuggestionsOption';\nimport CustomSuggestionsOptionsGroupFc from '../../functional-components/CustomSuggestionsOptionsGroup';\nimport CustomSuggestionsToggleFc from '../../functional-components/CustomSuggestionsToggle';\nimport type {\n\tComboboxAPI,\n\tComboboxStates,\n\tDisabledPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tRequiredPropType,\n\tShortKeyPropType,\n\tStringified,\n\tSuggestionsPropType,\n\tSyncValueBySelectorPropType,\n\tTooltipAlignPropType,\n\tW3CInputValue,\n} from '../../schema';\nimport type { EventDetail } from '../../schema/interfaces/EventDetail';\nimport { nonce } from '../../utils/dev.utils';\nimport { ComboboxController } from './controller';\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: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolCombobox implements ComboboxAPI {\n\t@Element() private readonly host?: HTMLKolComboboxElement;\n\tprivate refInput?: HTMLInputElement;\n\tprivate refSuggestions: HTMLLIElement[] = [];\n\tprivate _focusedOptionIndex: number = -1;\n\n\t/**\n\t * Returns the current value.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async getValue(): Promise<string> {\n\t\treturn this.state._value;\n\t}\n\n\t/**\n\t * Sets focus on the internal element.\n\t */\n\t@Method()\n\t// eslint-disable-next-line @typescript-eslint/require-await\n\tpublic async kolFocus() {\n\t\tthis.refInput?.focus();\n\t}\n\n\tprivate toggleListbox = () => {\n\t\tconst isDisabled = this.state._disabled === true;\n\t\tif (isDisabled) {\n\t\t\tthis._isOpen = false;\n\t\t} else {\n\t\t\tthis.refInput?.focus();\n\t\t\tif (!this._hasOpened && Array.isArray(this._filteredSuggestions) && this._filteredSuggestions.length > 0) {\n\t\t\t\tthis._isOpen = true;\n\t\t\t\tthis._hasOpened = true;\n\t\t\t\tconst selectedIndex = this._filteredSuggestions.findIndex((option) => option === this.state._value);\n\t\t\t\tthis._focusedOptionIndex = selectedIndex >= 0 ? selectedIndex : -1;\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.refInput = ref;\n\t};\n\n\tprivate selectOption(option: string) {\n\t\tthis.controller.onFacade.onInput(\n\t\t\tnew CustomEvent<EventDetail>('input', { bubbles: true, detail: { name: this.state._name as string, value: option } }),\n\t\t\ttrue,\n\t\t\toption,\n\t\t);\n\t\tthis.controller.onFacade.onChange(\n\t\t\tnew CustomEvent<EventDetail>('change', { bubbles: true, detail: { name: this.state._name as string, value: option } }),\n\t\t\toption,\n\t\t);\n\t\tthis.controller.setFormAssociatedValue(option);\n\t\tthis.state._value = option;\n\t\tthis.refInput?.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._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 = Array.isArray(this._suggestions)\n\t\t\t\t? this._suggestions.filter((option: W3CInputValue) => {\n\t\t\t\t\t\treturn (option as string).toLowerCase().includes(query.toLowerCase());\n\t\t\t\t\t})\n\t\t\t\t: this._filteredSuggestions;\n\n\t\t\tthis._isOpen = this._filteredSuggestions && this._filteredSuggestions.length > 0 ? true : false;\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\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\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-combobox', {\n\t\t\t\t'has-value': this.state._hasValue,\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.refInput?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getInputProps(): InputStateWrapperProps {\n\t\tconst { ariaDescribedBy } = getRenderStates(this.state);\n\t\tconst isDisabled = this.state._disabled === true;\n\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\tclass: 'kol-combobox__input',\n\t\t\ttype: 'text',\n\t\t\trole: 'combobox',\n\t\t\t'aria-activedescendant': this._isOpen && this._focusedOptionIndex >= 0 ? `option-${this._focusedOptionIndex}` : undefined,\n\t\t\t'aria-autocomplete': 'both',\n\t\t\t'aria-controls': 'listbox',\n\t\t\t'aria-describedby': ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined,\n\t\t\t'aria-expanded': this._isOpen ? 'true' : 'false',\n\t\t\t'aria-label': this.state._hideLabel && typeof this.state._label === 'string' ? this.state._label : undefined,\n\t\t\t'aria-labelledby': this.state._id,\n\t\t\t'aria-keyshortcuts': this.state._shortKey,\n\t\t\tvalue: this.state._value,\n\t\t\taccessKey: this.state._accessKey,\n\t\t\tautocapitalize: 'off',\n\t\t\tautocorrect: 'off',\n\t\t\tdisabled: isDisabled,\n\t\t\tcustomSuggestions: true,\n\t\t\tid: this.state._id,\n\t\t\tname: this.state._name,\n\t\t\trequired: this.state._required,\n\t\t\t...this.controller.onFacade,\n\t\t\tonFocus: (event) => {\n\t\t\t\tthis.controller.onFacade.onFocus(event);\n\t\t\t\tthis.inputHasFocus = true;\n\t\t\t},\n\t\t\tonBlur: (event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t\tonChange: this.onChange.bind(this),\n\t\t\tonInput: this.onInput.bind(this),\n\t\t\tplaceholder: this.state._placeholder,\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst isDisabled = this.state._disabled === true;\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerFc state={this.state}>\n\t\t\t\t\t<div class=\"kol-combobox__group\">\n\t\t\t\t\t\t<KolInputStateWrapperFc {...this.getInputProps()} />\n\t\t\t\t\t\t<CustomSuggestionsToggleFc onClick={this.toggleListbox.bind(this)} disabled={isDisabled} />\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{this._isOpen && !isDisabled && (\n\t\t\t\t\t\t<CustomSuggestionsOptionsGroupFc blockSuggestionMouseOver={this.blockSuggestionMouseOver} onKeyDown={this.handleKeyDownDropdown.bind(this)}>\n\t\t\t\t\t\t\t{Array.isArray(this._filteredSuggestions) &&\n\t\t\t\t\t\t\t\tthis._filteredSuggestions.length > 0 &&\n\t\t\t\t\t\t\t\tthis._filteredSuggestions.map((option, index) => (\n\t\t\t\t\t\t\t\t\t<CustomSuggestionsOptionFc\n\t\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\t\tsearchTerm={this.state._value}\n\t\t\t\t\t\t\t\t\t\tref={(el) => {\n\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}}\n\t\t\t\t\t\t\t\t\t\tselected={this.state._value === option}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis.selectOption(option as string);\n\t\t\t\t\t\t\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t\t\t\t\t\t\t\tthis._isOpen = false;\n\t\t\t\t\t\t\t\t\t\t\tthis._hasOpened = false;\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (!this.blockSuggestionMouseOver) {\n\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}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonFocus={() => {\n\t\t\t\t\t\t\t\t\t\t\tthis.focusOption(index);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={(e) => {\n\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\tthis.selectOption(option as string);\n\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\te.preventDefault();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</CustomSuggestionsOptionsGroupFc>\n\t\t\t\t\t)}\n\t\t\t\t</KolInputContainerFc>\n\t\t\t</KolFormFieldStateWrapperFc>\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.refInput?.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\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\n\t\t\t\thandleEvent(true, () => this.moveFocus(-1));\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Tab':\n\t\t\t\tif (this._isOpen) {\n\t\t\t\t\tthis._isOpen = false;\n\t\t\t\t\tthis.refInput?.focus();\n\t\t\t\t}\n\t\t\t\tbreak;\n\t\t\tcase 'Esc':\n\t\t\tcase 'Escape': {\n\t\t\t\tthis._hasOpened = false;\n\t\t\t\tthis._isOpen = false;\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.refInput?.focus();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'NumpadEnter':\n\t\t\tcase 'Enter': {\n\t\t\t\tif (this._isOpen && this._focusedOptionIndex >= 0) {\n\t\t\t\t\tthis._filteredSuggestions && this.selectOption(this._filteredSuggestions[this._focusedOptionIndex] as string);\n\t\t\t\t\tthis._isOpen = false;\n\t\t\t\t\tthis._hasOpened = false;\n\t\t\t\t} else {\n\t\t\t\t\tthis.toggleListbox();\n\t\t\t\t}\n\t\t\t\tevent.preventDefault();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'Home': {\n\t\t\t\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\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\tthis.blockSuggestionMouseOver = true;\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 blockSuggestionMouseOver: boolean = false;\n\t@State()\n\tprivate _isOpen: boolean = false;\n\t@State()\n\tprivate _filteredSuggestions?: SuggestionsPropType;\n\t@State()\n\tprivate _hasOpened = false;\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 the key combination that can be used to trigger or focus the component’s interactive element.\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 * 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 `HideMsgPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideMsg?: boolean = false;\n\n\t/**\n\t * Hides the caption by default and displays the caption text with a tooltip when the\n\t * interactive element is focused or the mouse is over it.\n\t * @TODO: Change type back to `HideLabelPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _hideLabel?: boolean = false;\n\n\t/**\n\t * Defines the hint text.\n\t */\n\t@Prop() public _hint?: string = '';\n\n\t/**\n\t * Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).\n\t */\n\t@Prop() public _icons?: IconsHorizontalPropType;\n\n\t/**\n\t * Defines the internal ID of the primary component element.\n\t * @deprecated Will be removed in the next major version.\n\t */\n\t@Prop() public _id?: IdPropType;\n\n\t/**\n\t * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.\n\t */\n\t@Prop() public _label!: LabelWithExpertSlotPropType;\n\n\t/**\n\t * Defines the properties for a message rendered as Alert component.\n\t */\n\t@Prop() public _msg?: Stringified<MsgPropType>;\n\n\t/**\n\t * 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 to provide for the input.\n\t */\n\t@Prop() public _suggestions!: SuggestionsPropType;\n\n\t/**\n\t * Makes the input element required.\n\t * @TODO: Change type back to `RequiredPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _required?: boolean = false;\n\n\t/**\n\t * Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.\n\t */\n\t@Prop() public _shortKey?: ShortKeyPropType;\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 where to show the Tooltip preferably: top, right, bottom or left.\n\t */\n\t@Prop() public _tooltipAlign?: TooltipAlignPropType = 'top';\n\n\t/**\n\t * Shows if the input was touched by a user.\n\t * @TODO: Change type back to `TouchedPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _touched?: boolean = false;\n\n\t/**\n\t * Defines the value of the input.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _value?: string;\n\n\t@State() public state: ComboboxStates = {\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_suggestions: [],\n\t\t_value: '',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new ComboboxController(this, 'combobox', this.host);\n\t\tthis.onInput = this.onInput.bind(this);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\n\t}\n\n\t@Watch('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): 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('_disabled')\n\tpublic validateDisabled(value?: DisabledPropType): void {\n\t\tthis.controller.validateDisabled(value);\n\t}\n\n\t@Watch('_hideMsg')\n\tpublic validateHideMsg(value?: HideMsgPropType): void {\n\t\tthis.controller.validateHideMsg(value);\n\t}\n\n\t@Watch('_hideLabel')\n\tpublic validateHideLabel(value?: HideLabelPropType): void {\n\t\tthis.controller.validateHideLabel(value);\n\t}\n\n\t@Watch('_hint')\n\tpublic validateHint(value?: HintPropType): void {\n\t\tthis.controller.validateHint(value);\n\t}\n\n\t@Watch('_icons')\n\tpublic validateIcons(value?: IconsHorizontalPropType): void {\n\t\tthis.controller.validateIcons(value);\n\t}\n\n\t@Watch('_id')\n\tpublic validateId(value?: string): void {\n\t\tthis.controller.validateId(value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelWithExpertSlotPropType): void {\n\t\tthis.controller.validateLabel(value);\n\t}\n\n\t@Watch('_msg')\n\tpublic validateMsg(value?: Stringified<MsgPropType>): void {\n\t\tthis.controller.validateMsg(value);\n\t}\n\n\t@Watch('_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('_shortKey')\n\tpublic validateShortKey(value?: ShortKeyPropType): void {\n\t\tthis.controller.validateShortKey(value);\n\t}\n\n\t@Watch('_suggestions')\n\tpublic validateSuggestions(value?: SuggestionsPropType): void {\n\t\tthis.controller.validateSuggestions(value);\n\t\tthis._filteredSuggestions = value;\n\t}\n\n\t@Watch('_required')\n\tpublic validateRequired(value?: RequiredPropType): 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('_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._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\t@Listen('mousemove')\n\tpublic handleMouseEvent() {\n\t\tthis.blockSuggestionMouseOver = false;\n\t}\n\n\t@Listen('focusout', { target: 'window' })\n\tpublic handleFocusOut() {\n\t\tsetTimeout(() => {\n\t\t\tif (!this.host?.contains(document.activeElement)) {\n\t\t\t\tthis.onBlur();\n\t\t\t}\n\t\t}, 0);\n\t}\n\t@Listen('blur', { target: 'window' })\n\tpublic handleWindowBlur() {\n\t\tthis.onBlur();\n\t}\n\n\tprivate onBlur() {\n\t\tthis._hasOpened = false;\n\t\tif (this._isOpen) {\n\t\t\tthis._isOpen = !this._isOpen;\n\t\t\tthis.refInput?.focus();\n\t\t}\n\t}\n\n\tprivate onChange(event: Event): void {\n\t\tthis.controller.onFacade.onChange(event);\n\n\t\t// Static form handling\n\t\tthis.controller.setFormAssociatedValue(this.state._value as unknown as string);\n\t}\n}\n"],"version":3}