@public-ui/components 3.0.5 → 3.0.6-rc.1

package/dist/esm/kol-table-stateless.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-DDeBcUIu.js";import{m as KolTableStatelessWcTag}from"./component-names-CkE54Ym7.js";import"./common-zXZUsQ7l.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\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(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    contain: layout;\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);\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16rem / 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  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    overflow: hidden;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",KolTableStateless=class{constructor(n){registerInstance(this,n)}render(){return h(KolTableStatelessWcTag,{key:"8c15043ee319bd85b3aeb21cfc3760d6ae8ca434",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings})}};KolTableStateless.style={default:defaultStyleCss};export{KolTableStateless as kol_table_stateless};
+import{r as registerInstance,h}from"./index-DOWoBMgb.js";import{m as KolTableStatelessWcTag}from"./component-names-CkE54Ym7.js";import"./common-8fBdMvJM.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / 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(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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);\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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(1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    place-items: center;\n    font-style: calc(16rem / 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  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    overflow: hidden;\n    gap: calc(8rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content 1fr calc(100rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    justify-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    justify-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",KolTableStateless=class{constructor(n){registerInstance(this,n)}render(){return h(KolTableStatelessWcTag,{key:"8c15043ee319bd85b3aeb21cfc3760d6ae8ca434",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings})}};KolTableStateless.style={default:defaultStyleCss};export{KolTableStateless as kol_table_stateless};

package/dist/esm/kol-table-stateless.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-table-stateless.entry.js","sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../@shared/kol-table-stateless-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\t@include kol-table-stateless-styles;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessProps,\n} from '../../schema';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\nimport type { TableSettingsPropType } from '../../schema/props/table-settings';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\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!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\t/**\n\t * Defines the table settings including column visibility, order and width.\n\t */\n\t@Prop() public _tableSettings?: TableSettingsPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t\t_tableSettings={this._tableSettings}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,q9VAAq9V;;MCqBh+V,iBAAiB,GAAA,MAAA;;;;IAyCtB,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,sBAAsB,EACtB,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,cAAc,EAAE,IAAI,CAAC,cAAc,EAClC,CAAA;;;;;;;;;"}
+{"version":3,"file":"kol-table-stateless.entry.js","sources":["src/components/table-stateless/style.scss?tag=kol-table-stateless&mode=default&encapsulation=shadow","src/components/table-stateless/shadow.tsx"],"sourcesContent":["@use '../../styles/global' as *;\n@use '../../styles/kol-alert-mixin' as *;\n@use '../@shared/kol-button-mixin' as *;\n@use '../@shared/kol-popover-button-mixin' as *;\n@use '../@shared/kol-table-stateless-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-button-styles('kol-button');\n\t@include kol-popover-button-styles;\n\t@include kol-table-stateless-styles;\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, h, Prop } from '@stencil/core';\nimport { KolTableStatelessWcTag } from '../../core/component-names';\nimport type {\n\tTableCallbacksPropType,\n\tTableDataFootPropType,\n\tTableDataPropType,\n\tTableHeaderCellsPropType,\n\tTableSelectionPropType,\n\tTableStatelessProps,\n} from '../../schema';\nimport type { MinWidthPropType } from '../../schema/props/min-width';\nimport type { TableSettingsPropType } from '../../schema/props/table-settings';\n\n@Component({\n\ttag: 'kol-table-stateless',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTableStateless implements TableStatelessProps {\n\t/**\n\t * Defines the primary table data.\n\t */\n\t@Prop() public _data!: TableDataPropType;\n\n\t/**\n\t * Defines the data for the table footer.\n\t */\n\t@Prop() public _dataFoot?: TableDataFootPropType;\n\n\t/**\n\t * Defines the horizontal and vertical table headers.\n\t */\n\t@Prop() public _headerCells!: TableHeaderCellsPropType;\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!: string;\n\n\t/**\n\t * Defines the table min-width (CSS width values).\n\t */\n\t@Prop() public _minWidth!: MinWidthPropType;\n\n\t/**\n\t * Defines the callback functions for table events.\n\t */\n\t@Prop() public _on?: TableCallbacksPropType;\n\n\t/**\n\t * Defines how rows can be selected and the current selection.\n\t */\n\t@Prop() public _selection?: TableSelectionPropType;\n\n\t/**\n\t * Defines the table settings including column visibility, order and width.\n\t */\n\t@Prop() public _tableSettings?: TableSettingsPropType;\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolTableStatelessWcTag\n\t\t\t\t_data={this._data}\n\t\t\t\t_dataFoot={this._dataFoot}\n\t\t\t\t_headerCells={this._headerCells}\n\t\t\t\t_label={this._label}\n\t\t\t\t_minWidth={this._minWidth}\n\t\t\t\t_on={this._on}\n\t\t\t\t_selection={this._selection}\n\t\t\t\t_tableSettings={this._tableSettings}\n\t\t\t/>\n\t\t);\n\t}\n}\n"],"names":[],"mappings":";;;;;;;AAAA,MAAM,eAAe,GAAG,u9VAAu9V;;MCqBl+V,iBAAiB,GAAA,MAAA;;;;IAyCtB,MAAM,GAAA;AACZ,QAAA,QACC,CAAC,CAAA,sBAAsB,EACtB,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,cAAc,EAAE,IAAI,CAAC,cAAc,EAClC,CAAA;;;;;;;;;"}

package/dist/esm/kol-tabs.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,g as getElement}from"./index-DDeBcUIu.js";import{w as watchValidator,d as watchBoolean,j as devHint,s as setState,N as watchNumber,H as watchJsonArrayString,I as uiUxHintMillerscheZahl,P as koliBriQuerySelector}from"./common-zXZUsQ7l.js";import{v as validateAlign}from"./align-BU6S1qiO.js";import{v as validateLabel}from"./label-DGzuU0HV.js";import{t as translate}from"./i18n-C7ZsbK5l.js";import{d as KolButtonWcTag}from"./component-names-CkE54Ym7.js";import{K as KeyboardKey}from"./keyboard-D6PoWr38.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-CoPFQEiC.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import"./i18n-ZF6JbdVP.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(t,e)=>{watchValidator(t,"_behavior",t=>"string"==typeof t&&tabBehaviorPropTypeOptions.includes(t),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),e)},validateHasCreateButton=(t,e)=>{watchBoolean(t,"_hasCreateButton",e)},defaultStyleCss="/* 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(44rem / 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\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(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    contain: layout;\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);\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",KolTabs=class{constructor(t){registerInstance(this,t),this.onCreateLabel=`${translate("kol-new")} …`,this.nextPossibleTabIndex=(t,e,n=1)=>{const a=e+n;return a<t.length?t[a]._disabled?this.nextPossibleTabIndex(t,e,n+1):a:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const a=e-n;return a>=0?t[a]._disabled?this.prevPossibleTabIndex(t,e,n+1):a:e},this.onKeyDown=t=>{switch(t.key){case KeyboardKey.ArrowRight:this.goToNextTab(t);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(t);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,e,n=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let o,i;o="_selected"===a?t:this.state._selected,i="_tabs"===a?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,i))},this.refreshTabPanels=()=>{var t,e,n,a;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);o++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),t.setAttribute("id",`tabpanel-${o}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),t.appendChild(i),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(a=this.host)||void 0===a?void 0:a.children[o])&&this.host.children[o].setAttribute("slot",`tabpanel-slot-${o}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var e,n;t.preventDefault(),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===n||n.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var a,o;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(o=null===(a=this.state._tabs[e]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,t,e),this.onSelect(t,e)}}renderButtonGroup(){return h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((t,e)=>h(KolButtonWcTag,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e})),this.state._hasCreateButton&&h(KolButtonWcTag,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return h("div",{key:"c90d53464702512863a3483602ed15645a6c0484",ref:t=>{this.tabPanelsElement=t},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"3e172f4835867233726b1ae2081e3a6729eb3b83",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){validateAlign(this,t)}validateBehavior(t){validateTabBehavior(this,t)}validateHasCreateButton(t){validateHasCreateButton(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),setState(this,"_on",e)}}validateSelected(t){watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){watchJsonArrayString(this,"_tabs",t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0,t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,t,e),this.host&&dispatchDomEvent(this.host,KolEvent.select,e),this.focusTabById(e)}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:defaultStyleCss};export{KolTabs as kol_tabs};
+import{r as registerInstance,h,g as getElement}from"./index-DOWoBMgb.js";import{w as watchValidator,d as watchBoolean,j as devHint,s as setState,N as watchNumber,H as watchJsonArrayString,I as uiUxHintMillerscheZahl,P as koliBriQuerySelector}from"./common-8fBdMvJM.js";import{v as validateAlign}from"./align-CyK0wp7d.js";import{v as validateLabel}from"./label-CdtNxOKu.js";import{t as translate}from"./i18n-CdSCDnmA.js";import{d as KolButtonWcTag}from"./component-names-CkE54Ym7.js";import{K as KeyboardKey}from"./keyboard-D6PoWr38.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-CoPFQEiC.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import"./i18n-ZF6JbdVP.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(t,e)=>{watchValidator(t,"_behavior",t=>"string"==typeof t&&tabBehaviorPropTypeOptions.includes(t),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),e)},validateHasCreateButton=(t,e)=>{watchBoolean(t,"_hasCreateButton",e)},defaultStyleCss="/* 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(44rem / 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(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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);\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",KolTabs=class{constructor(t){registerInstance(this,t),this.onCreateLabel=`${translate("kol-new")} …`,this.nextPossibleTabIndex=(t,e,n=1)=>{const a=e+n;return a<t.length?t[a]._disabled?this.nextPossibleTabIndex(t,e,n+1):a:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const a=e-n;return a>=0?t[a]._disabled?this.prevPossibleTabIndex(t,e,n+1):a:e},this.onKeyDown=t=>{switch(t.key){case KeyboardKey.ArrowRight:this.goToNextTab(t);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(t);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,e,n=!0,a)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,a||t);t=a||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,a||t);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,a)=>{let o,i;o="_selected"===a?t:this.state._selected,i="_tabs"===a?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(o,i))},this.refreshTabPanels=()=>{var t,e,n,a;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);o++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),t.setAttribute("id",`tabpanel-${o}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),t.appendChild(i),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(a=this.host)||void 0===a?void 0:a.children[o])&&this.host.children[o].setAttribute("slot",`tabpanel-slot-${o}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var e,n;t.preventDefault(),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===n||n.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var a,o;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(o=null===(a=this.state._tabs[e]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,t,e),this.onSelect(t,e)}}renderButtonGroup(){return h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((t,e)=>h(KolButtonWcTag,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e})),this.state._hasCreateButton&&h(KolButtonWcTag,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return h("div",{key:"c90d53464702512863a3483602ed15645a6c0484",ref:t=>{this.tabPanelsElement=t},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"3e172f4835867233726b1ae2081e3a6729eb3b83",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){validateAlign(this,t)}validateBehavior(t){validateTabBehavior(this,t)}validateHasCreateButton(t){validateHasCreateButton(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),setState(this,"_on",e)}}validateSelected(t){watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){watchJsonArrayString(this,"_tabs",t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0,t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,t,e),this.host&&dispatchDomEvent(this.host,KolEvent.select,e),this.focusTabById(e)}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:defaultStyleCss};export{KolTabs as kol_tabs};

package/dist/esm/kol-tabs.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-tabs.entry.js","sources":["src/schema/props/tab-behavior.ts","src/schema/props/has-create-button.ts","src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'] as const;\nexport type TabBehaviorPropType = (typeof tabBehaviorPropTypeOptions)[number];\n\n/**\n * Defines which behavior is active.\n */\nexport type PropTabBehavior = {\n\tbehavior: TabBehaviorPropType;\n};\n\n/* validator */\nexport const validateTabBehavior = (component: Generic.Element.Component, value?: TabBehaviorPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_behavior`,\n\t\t(value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasCreateButtonPropType = boolean;\n\n/**\n * Defines whether the element has a create button.\n */\nexport type PropHasCreateButton = {\n\thasCreateButton: HasCreateButtonPropType;\n};\n\n/* validator */\nexport const validateHasCreateButton = (component: Generic.Element.Component, value?: HasCreateButtonPropType): void => {\n\twatchBoolean(component, '_hasCreateButton', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-tabs {\n\t\tdisplay: var(--display);\n\t\tgrid-template-columns: var(--grid-template-columns);\n\t\tgrid-template-rows: var(--grid-template-rows);\n\n\t\t&--align-right {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: 1fr auto;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&--align-left {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: auto 1fr;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&--align-bottom {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: 1fr auto;\n\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&__tabs-align-top {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: auto 1fr;\n\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&__button-group {\n\t\t\tdisplay: flex;\n\t\t\torder: var(--button-group-order);\n\n\t\t\tflex-direction: var(--button-group-flex-direction);\n\t\t\tflex-wrap: wrap;\n\n\t\t\t.kol-button {\n\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\tdisplay: block;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t}\n\t\t}\n\n\t\t&__panel {\n\t\t\theight: 100%;\n\t\t}\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tkoliBriQuerySelector,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KeyboardKey } from '../../schema/enums';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport clsx from 'clsx';\nimport type { HasCreateButtonPropType } from '../../schema/props/has-create-button';\nimport { validateHasCreateButton } from '../../schema/props/has-create-button';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate currentFocusIndex: number | undefined;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\n\t}\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"kol-tabs__button-group\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_buttonVariant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.state._hasCreateButton && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-tabs__button-create\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_icons=\"codicon codicon-plus\"\n\t\t\t\t\t\tdata-testid=\"tabs-create-button\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t\tclass={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}\n\t\t\t>\n\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t<div class=\"kol-tabs__content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\n\n\t/**\n\t * Defines whether the element has a create button.\n\t */\n\t@Prop() public _hasCreateButton?: HasCreateButtonPropType = 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 * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\n\t}\n\n\t@Watch('_hasCreateButton')\n\tpublic validateHasCreateButton(value?: HasCreateButtonPropType) {\n\t\tvalidateHasCreateButton(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function') {\n\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t\tafterPatch: this.refreshTabPanels,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\n\t\tthis.validateHasCreateButton(this._hasCreateButton);\n\t}\n\n\tprivate refreshTabPanels = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\t// Clear existing panels\n\t\twhile (this.tabPanelHost.firstChild) {\n\t\t\tthis.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n\t\t}\n\t\tfor (let i = 0; i < this.state._tabs?.length; i++) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\tdiv.setAttribute('hidden', '');\n\t\t\tconst slot = document.createElement('slot');\n\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\tdiv.appendChild(slot);\n\t\t\tthis.tabPanelHost?.appendChild(div);\n\n\t\t\tif (typeof HTMLCollection !== 'undefined' && this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t}\n\t\t}\n\t\tthis.updateVisiblePanel();\n\t};\n\n\tprivate updateVisiblePanel = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\tArray.from(this.tabPanelHost.children).forEach((child, i) => {\n\t\t\tif (i === this.state._selected) {\n\t\t\t\tchild.removeAttribute('hidden');\n\t\t\t} else {\n\t\t\t\tchild.setAttribute('hidden', '');\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.refreshTabPanels();\n\t}\n\n\tprivate focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.select, index);\n\t\t}\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tthis.state._on?.onCreate?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.create);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kol-tabs.entry.js","sources":["src/schema/props/tab-behavior.ts","src/schema/props/has-create-button.ts","src/components/tabs/style.scss?tag=kol-tabs&mode=default&encapsulation=shadow","src/components/tabs/shadow.tsx"],"sourcesContent":["/* types */\nimport type { Generic } from 'adopted-style-sheets';\nimport { watchValidator } from '../utils';\n\nconst tabBehaviorPropTypeOptions = ['select-automatic', 'select-manual'] as const;\nexport type TabBehaviorPropType = (typeof tabBehaviorPropTypeOptions)[number];\n\n/**\n * Defines which behavior is active.\n */\nexport type PropTabBehavior = {\n\tbehavior: TabBehaviorPropType;\n};\n\n/* validator */\nexport const validateTabBehavior = (component: Generic.Element.Component, value?: TabBehaviorPropType): void => {\n\twatchValidator(\n\t\tcomponent,\n\t\t`_behavior`,\n\t\t(value) => typeof value === 'string' && tabBehaviorPropTypeOptions.includes(value),\n\t\tnew Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(', ')}`]),\n\t\tvalue,\n\t);\n};\n","import type { Generic } from 'adopted-style-sheets';\n\nimport { watchBoolean } from '../utils';\n\n/* types */\nexport type HasCreateButtonPropType = boolean;\n\n/**\n * Defines whether the element has a create button.\n */\nexport type PropHasCreateButton = {\n\thasCreateButton: HasCreateButtonPropType;\n};\n\n/* validator */\nexport const validateHasCreateButton = (component: Generic.Element.Component, value?: HasCreateButtonPropType): void => {\n\twatchBoolean(component, '_hasCreateButton', value);\n};\n","@use '../@shared/mixins' as *;\n@use '../../styles/global' as *;\n@use '../host-display-block' as *;\n@use '../tooltip/style.scss' as *;\n\n@layer kol-component {\n\t.kol-tabs {\n\t\tdisplay: var(--display);\n\t\tgrid-template-columns: var(--grid-template-columns);\n\t\tgrid-template-rows: var(--grid-template-rows);\n\n\t\t&--align-right {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: 1fr auto;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&--align-left {\n\t\t\t--display: grid;\n\t\t\t--grid-template-columns: auto 1fr;\n\n\t\t\t--button-group-flex-direction: column;\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&--align-bottom {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: 1fr auto;\n\n\t\t\t--button-group-order: 2;\n\t\t}\n\n\t\t&__tabs-align-top {\n\t\t\t--display: grid;\n\t\t\t--grid-template-rows: auto 1fr;\n\n\t\t\t--button-group-order: 0;\n\t\t}\n\n\t\t&__button-group {\n\t\t\tdisplay: flex;\n\t\t\torder: var(--button-group-order);\n\n\t\t\tflex-direction: var(--button-group-flex-direction);\n\t\t\tflex-wrap: wrap;\n\n\t\t\t.kol-button {\n\t\t\t\tborder-bottom-color: transparent;\n\t\t\t\tdisplay: block;\n\t\t\t\tborder-bottom-style: solid;\n\t\t\t}\n\t\t}\n\n\t\t&__panel {\n\t\t\theight: 100%;\n\t\t}\n\t}\n}\n","import type {\n\tAlignPropType,\n\tButtonCallbacksPropType,\n\tKoliBriTabsCallbacks,\n\tLabelPropType,\n\tStencilUnknown,\n\tStringified,\n\tTabBehaviorPropType,\n\tTabButtonProps,\n\tTabsAPI,\n\tTabsStates,\n} from '../../schema';\nimport {\n\tdevHint,\n\tkoliBriQuerySelector,\n\tsetState,\n\tuiUxHintMillerscheZahl,\n\tvalidateAlign,\n\tvalidateLabel,\n\tvalidateTabBehavior,\n\twatchJsonArrayString,\n\twatchNumber,\n} from '../../schema';\nimport type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\nimport { translate } from '../../i18n';\nimport type { Generic } from 'adopted-style-sheets';\nimport { KolButtonWcTag } from '../../core/component-names';\nimport { KeyboardKey } from '../../schema/enums';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport clsx from 'clsx';\nimport type { HasCreateButtonPropType } from '../../schema/props/has-create-button';\nimport { validateHasCreateButton } from '../../schema/props/has-create-button';\n// https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html\n\n@Component({\n\ttag: 'kol-tabs',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: true,\n})\nexport class KolTabs implements TabsAPI {\n\t@Element() private readonly host?: HTMLKolTabsElement;\n\tprivate tabPanelsElement?: HTMLElement;\n\tprivate onCreateLabel = `${translate('kol-new')} …`;\n\tprivate currentFocusIndex: number | undefined;\n\n\tprivate nextPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset + step;\n\n\t\tif (nextOffset < tabs.length) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.nextPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate prevPossibleTabIndex = (tabs: TabButtonProps[], offset: number, step = 1): number => {\n\t\tconst nextOffset = offset - step;\n\n\t\tif (nextOffset >= 0) {\n\t\t\tif (tabs[nextOffset]._disabled) {\n\t\t\t\treturn this.prevPossibleTabIndex(tabs, offset, step + 1);\n\t\t\t}\n\t\t\treturn nextOffset;\n\t\t}\n\n\t\treturn offset;\n\t};\n\n\tprivate onKeyDown = (event: KeyboardEvent) => {\n\t\tswitch (event.key as KeyboardKey) {\n\t\t\tcase KeyboardKey.ArrowRight:\n\t\t\t\tthis.goToNextTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.ArrowLeft:\n\t\t\t\tthis.goToPreviousTab(event);\n\t\t\t\tbreak;\n\t\t\tcase KeyboardKey.Space:\n\t\t\tcase KeyboardKey.Enter:\n\t\t\t\tthis.activateFocusedTab(event);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate getCurrentFocusIndex(): number {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\treturn this.currentFocusIndex;\n\t\t}\n\n\t\treturn this.state._selected;\n\t}\n\n\tprivate getKeyboardTabChangeMode(): 'selectFocusOnly' | 'activateCompletely' {\n\t\tif (this._behavior === 'select-manual') {\n\t\t\treturn 'selectFocusOnly';\n\t\t}\n\n\t\treturn 'activateCompletely';\n\t}\n\n\tprivate goToNextTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.nextPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate goToPreviousTab(event: KeyboardEvent) {\n\t\tconst nextFocusIndex = this.prevPossibleTabIndex(this.state._tabs, this.getCurrentFocusIndex());\n\t\tthis.selectNextTabEvent(event, nextFocusIndex, this.getKeyboardTabChangeMode());\n\t}\n\n\tprivate activateFocusedTab(event: KeyboardEvent) {\n\t\tif (typeof this.currentFocusIndex === 'number') {\n\t\t\tthis.onSelect(event, this.currentFocusIndex);\n\t\t}\n\t}\n\n\tprivate readonly onClickSelect = (event: MouseEvent, index: number): void => {\n\t\tthis.selectNextTabEvent(event, index);\n\t};\n\n\tprivate selectNextTabEvent(\n\t\tevent: KeyboardEvent | MouseEvent,\n\t\tnextTabIndex: number,\n\t\tchangeMode: 'selectFocusOnly' | 'activateCompletely' = 'activateCompletely',\n\t): void {\n\t\tthis.currentFocusIndex = nextTabIndex;\n\n\t\tthis.focusTabById(nextTabIndex);\n\n\t\tif (changeMode === 'activateCompletely') {\n\t\t\tthis._selected = nextTabIndex;\n\n\t\t\tconst tab = this.state._tabs[nextTabIndex];\n\t\t\ttab._on?.onSelect?.(event, nextTabIndex);\n\n\t\t\tthis.onSelect(event, nextTabIndex);\n\t\t}\n\t}\n\n\tprivate readonly onMouseDown = (event: Event): void => {\n\t\tevent.preventDefault();\n\t};\n\n\tprivate readonly callbacks: ButtonCallbacksPropType<number> = {\n\t\tonClick: this.onClickSelect,\n\t\tonMouseDown: this.onMouseDown,\n\t};\n\n\tprivate renderButtonGroup() {\n\t\treturn (\n\t\t\t// Rule is disabled, because KolButtonWc is focusable.\n\t\t\t// eslint-disable-next-line jsx-a11y/interactive-supports-focus\n\t\t\t<div aria-label={this.state._label} class=\"kol-tabs__button-group\" role=\"tablist\" onKeyDown={this.onKeyDown} onBlur={this.onBlur}>\n\t\t\t\t{this.state._tabs.map((button: TabButtonProps, index: number) => (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t_disabled={button._disabled}\n\t\t\t\t\t\t_icons={button._icons}\n\t\t\t\t\t\t_hideLabel={button._hideLabel}\n\t\t\t\t\t\t_label={button._label} // TODO: ariaLabel-Konzept prüfen\n\t\t\t\t\t\t_on={this.callbacks as ButtonCallbacksPropType<StencilUnknown>}\n\t\t\t\t\t\t_tabIndex={this.state._selected === index ? 0 : -1}\n\t\t\t\t\t\t_tooltipAlign={button._tooltipAlign}\n\t\t\t\t\t\t_buttonVariant={this.state._selected === index ? 'custom' : undefined}\n\t\t\t\t\t\t_customClass={this.state._selected === index ? 'selected' : undefined}\n\t\t\t\t\t\t_ariaControls={`tabpanel-${index}`}\n\t\t\t\t\t\t_ariaSelected={this.state._selected === index}\n\t\t\t\t\t\t_id={`${this.state._label.replace(/\\s/g, '-')}-tab-${index}`}\n\t\t\t\t\t\t_role=\"tab\"\n\t\t\t\t\t\t_value={index}\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t))}\n\t\t\t\t{this.state._hasCreateButton && (\n\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\tclass=\"kol-tabs__button-create\"\n\t\t\t\t\t\t_label={this.onCreateLabel}\n\t\t\t\t\t\t_on={{\n\t\t\t\t\t\t\tonClick: this.onCreate,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t_icons=\"codicon codicon-plus\"\n\t\t\t\t\t\tdata-testid=\"tabs-create-button\"\n\t\t\t\t\t></KolButtonWcTag>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tprivate tabPanelHost?: HTMLDivElement;\n\n\tprivate readonly catchTabPanelHost = (el?: HTMLDivElement) => {\n\t\tthis.tabPanelHost = el;\n\t};\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(el) => {\n\t\t\t\t\tthis.tabPanelsElement = el as HTMLElement;\n\t\t\t\t}}\n\t\t\t\tclass={clsx('kol-tabs', `kol-tabs--align-${this.state._align}`)}\n\t\t\t>\n\t\t\t\t{this.renderButtonGroup()}\n\t\t\t\t<div class=\"kol-tabs__content\" ref={this.catchTabPanelHost}>\n\t\t\t\t\t{/* <slot /> */}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * Defines the visual orientation of the component.\n\t */\n\t@Prop() public _align?: AlignPropType = 'top';\n\n\t/**\n\t * Defines which behavior is active.\n\t */\n\t@Prop() public _behavior?: TabBehaviorPropType;\n\n\t/**\n\t * Defines whether the element has a create button.\n\t */\n\t@Prop() public _hasCreateButton?: HasCreateButtonPropType = 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 * Gibt die Liste der Callback-Funktionen an, die auf Events aufgerufen werden sollen.\n\t */\n\t@Prop() public _on?: KoliBriTabsCallbacks;\n\n\t/**\n\t * Defines which tab is active.\n\t */\n\t@Prop({ mutable: true, reflect: true }) public _selected?: number = 0;\n\n\t/**\n\t * Defines the tab captions.\n\t */\n\t@Prop() public _tabs!: Stringified<TabButtonProps[]>;\n\n\t@State() public state: TabsStates = {\n\t\t_align: 'top',\n\t\t_label: '', // ⚠ required\n\t\t_selected: 0,\n\t\t_tabs: [],\n\t};\n\n\tprivate selectNextNotDisabledTab = (selected: number, tabs: TabButtonProps[], upOrDown = true, initialSelected?: number): number => {\n\t\tif (selected > tabs.length - 1) {\n\t\t\tselected = tabs.length - 1;\n\t\t}\n\t\tif (selected < 0) {\n\t\t\tselected = 0;\n\t\t}\n\t\tif (Array.isArray(tabs) && tabs[selected]) {\n\t\t\tif (tabs[selected]._disabled) {\n\t\t\t\tif (upOrDown === true) {\n\t\t\t\t\tif (selected < tabs.length - 1) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected + 1, tabs, true, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tselected = initialSelected || selected;\n\t\t\t\t\t\tupOrDown = false;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\tif (upOrDown === false) {\n\t\t\t\t\tif (selected > 0) {\n\t\t\t\t\t\treturn this.selectNextNotDisabledTab(selected - 1, tabs, false, initialSelected || selected);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tdevHint(`[KolTabs] All tabs are disabled, and therefore no tab can be displayed.`);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn selected;\n\t};\n\n\tprivate syncSelectedAndTabs = (nextValue: unknown, nextState: Map<string, unknown>, _component: Generic.Element.Component, key: string) => {\n\t\tlet selected: number;\n\t\tif (key === '_selected') {\n\t\t\tselected = nextValue as number;\n\t\t} else {\n\t\t\tselected = this.state._selected;\n\t\t}\n\t\tlet tabs: TabButtonProps[];\n\t\tif (key === '_tabs') {\n\t\t\ttabs = nextValue as TabButtonProps[];\n\t\t} else {\n\t\t\ttabs = this.state._tabs;\n\t\t}\n\t\tif (tabs.length > 0) {\n\t\t\tnextState.set('_selected', this.selectNextNotDisabledTab(selected, tabs));\n\t\t}\n\t};\n\n\t@Watch('_align')\n\tpublic validateAlign(value?: AlignPropType) {\n\t\tvalidateAlign(this, value);\n\t}\n\n\t@Watch('_behavior')\n\tpublic validateBehavior(value?: TabBehaviorPropType) {\n\t\tvalidateTabBehavior(this, value);\n\t}\n\n\t@Watch('_hasCreateButton')\n\tpublic validateHasCreateButton(value?: HasCreateButtonPropType) {\n\t\tvalidateHasCreateButton(this, value);\n\t}\n\n\t@Watch('_label')\n\tpublic validateLabel(value?: LabelPropType): void {\n\t\tvalidateLabel(this, value, {\n\t\t\trequired: true,\n\t\t});\n\t}\n\n\t@Watch('_on')\n\tpublic validateOn(value?: KoliBriTabsCallbacks): void {\n\t\tif (typeof value === 'object' && value !== null) {\n\t\t\tconst callbacks: KoliBriTabsCallbacks = {};\n\t\t\tif (typeof value.onCreate === 'function') {\n\t\t\t\tcallbacks.onCreate = value.onCreate;\n\t\t\t}\n\t\t\tif (typeof value.onSelect === 'function') {\n\t\t\t\tcallbacks.onSelect = value.onSelect;\n\t\t\t}\n\t\t\tsetState<KoliBriTabsCallbacks>(this, '_on', callbacks);\n\t\t}\n\t}\n\n\t@Watch('_selected')\n\tpublic validateSelected(value?: number): void {\n\t\twatchNumber(this, '_selected', value, {\n\t\t\thooks: {\n\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t},\n\t\t});\n\t}\n\n\t@Watch('_tabs')\n\tpublic validateTabs(value?: Stringified<TabButtonProps[]>): void {\n\t\twatchJsonArrayString(\n\t\t\tthis,\n\t\t\t'_tabs',\n\t\t\t(item: TabButtonProps) => typeof item === 'object' && item !== null && typeof item._label === 'string' && item._label.length > 0,\n\t\t\tvalue,\n\t\t\tundefined,\n\t\t\t{\n\t\t\t\thooks: {\n\t\t\t\t\tbeforePatch: this.syncSelectedAndTabs,\n\t\t\t\t\tafterPatch: this.refreshTabPanels,\n\t\t\t\t},\n\t\t\t},\n\t\t);\n\t\tuiUxHintMillerscheZahl('KolTabs', this.state._tabs.length);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis.validateAlign(this._align);\n\t\tthis.validateLabel(this._label);\n\t\tthis.validateOn(this._on);\n\t\tthis.validateSelected(this._selected);\n\t\tthis.validateTabs(this._tabs);\n\t\tthis.validateBehavior(this._behavior);\n\t\tthis.validateHasCreateButton(this._hasCreateButton);\n\t}\n\n\tprivate refreshTabPanels = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\t// Clear existing panels\n\t\twhile (this.tabPanelHost.firstChild) {\n\t\t\tthis.tabPanelHost.removeChild(this.tabPanelHost.firstChild);\n\t\t}\n\t\tfor (let i = 0; i < this.state._tabs?.length; i++) {\n\t\t\tconst div = document.createElement('div');\n\t\t\tdiv.setAttribute('aria-labelledby', `${this.state._label.replace(/\\s/g, '-')}-tab-${i}`);\n\t\t\tdiv.setAttribute('id', `tabpanel-${i}`);\n\t\t\tdiv.setAttribute('role', 'tabpanel');\n\t\t\tdiv.setAttribute('hidden', '');\n\t\t\tconst slot = document.createElement('slot');\n\t\t\tslot.setAttribute('name', `tabpanel-slot-${i}`);\n\t\t\tdiv.appendChild(slot);\n\t\t\tthis.tabPanelHost?.appendChild(div);\n\n\t\t\tif (typeof HTMLCollection !== 'undefined' && this.host?.children instanceof HTMLCollection && this.host?.children[i] /* SSR instanceof HTMLElement */) {\n\t\t\t\tthis.host.children[i].setAttribute('slot', `tabpanel-slot-${i}`);\n\t\t\t}\n\t\t}\n\t\tthis.updateVisiblePanel();\n\t};\n\n\tprivate updateVisiblePanel = () => {\n\t\tif (!this.tabPanelHost) return;\n\t\tArray.from(this.tabPanelHost.children).forEach((child, i) => {\n\t\t\tif (i === this.state._selected) {\n\t\t\t\tchild.removeAttribute('hidden');\n\t\t\t} else {\n\t\t\t\tchild.setAttribute('hidden', '');\n\t\t\t}\n\t\t});\n\t};\n\n\tpublic componentDidRender(): void {\n\t\tthis.refreshTabPanels();\n\t}\n\n\tprivate focusTabById(index: number): void {\n\t\tif (this.tabPanelsElement /* SSR instanceof HTMLElement */) {\n\t\t\tconst button: HTMLElement | null = koliBriQuerySelector(`button#${this.state._label.replace(/\\s/g, '-')}-tab-${index}`, this.tabPanelsElement);\n\t\t\tbutton?.focus();\n\t\t}\n\t}\n\n\tprivate onSelect(event: CustomEvent | KeyboardEvent | MouseEvent | PointerEvent, index: number): void {\n\t\tthis._on?.onSelect?.(event, index);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.select, index);\n\t\t}\n\n\t\tthis.focusTabById(index);\n\t}\n\n\tprivate onCreate = (event: Event) => {\n\t\tevent.preventDefault();\n\t\tthis.state._on?.onCreate?.(event);\n\t\tif (this.host) {\n\t\t\tdispatchDomEvent(this.host, KolEvent.create);\n\t\t}\n\t};\n\n\tprivate onBlur = () => {\n\t\tthis.currentFocusIndex = undefined;\n\t};\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/kol-textarea.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,r as registerInstance,g as getElement}from"./index-DDeBcUIu.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{e as getDefaultProps,c as checkHasMsg,g as getRenderStates,a as convertMsgToInternMsg,F as FormFieldStateWrapper}from"./FormFieldStateWrapper-CzqloNmW.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon-DPQVqWJI.js";import{_ as __rest}from"./Heading-BikkZxGQ.js";import{w as watchValidator,e as watchString}from"./common-zXZUsQ7l.js";import{n as nonce}from"./dev.utils-dJsH-7gE.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior-DCUK2Rvw.js";import{v as validatePlaceholder}from"./placeholder-CKKvVrmb.js";import{v as validateReadOnly}from"./read-only-D2aPahKx.js";import{v as validateRequired}from"./required-DZ-b_DWV.js";import{v as validateRows}from"./rows-DZqgM5RX.js";import{v as validateSpellCheck}from"./spell-check-Chr2J8Ox.js";import"./access-and-short-key-CBDgF26-.js";import"./disabled-oePQqAfy.js";import"./hide-label-BmYpplzr.js";import"./label-DGzuU0HV.js";import"./tooltip-align-CmSyNCv5.js";import"./align-BU6S1qiO.js";import"./events-CoPFQEiC.js";import"./associated.controller-BVXWSO2G.js";import"./bootstrap-YDZ8Qb_h.js";import"./component-names-CkE54Ym7.js";import"./i18n-ZF6JbdVP.js";import"./isObject-DvSELytj.js";import"./Alert-DDLWH-ai.js";import"./i18n-C7ZsbK5l.js";import"./bem-DqV0swL_.js";import"./browser-DAVbNx-f.js";import"./InternalUnderlinedBadgeText-BvL2GxIT.js";import"./reuse-CX4AQDkS.js";import"./Icon-K-RxFeQH.js";import"./icons-CH_AgdgO.js";const textareaResizeOptions=["vertical","none"],isTextareaResizePropType=e=>"string"==typeof e&&textareaResizeOptions.includes(e),validateResizeTextarea=(e,t)=>{watchValidator(e,"_resize",isTextareaResizePropType,new Set(textareaResizeOptions),t,{defaultValue:"vertical"})},TextAreaFc=e=>{const{class:t,msg:n,touched:a,readonly:i,disabled:o,required:l,ariaDescribedBy:r,hideLabel:s,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),p=checkHasMsg(n,a),u={"kol-textarea--disabled":Boolean(o),"kol-textarea--required":Boolean(l),"kol-textarea--touched":Boolean(a),"kol-textarea--readonly":Boolean(i),[`kol-textarea--${(null==n?void 0:n.type)||"error"}`]:p},m=Object.assign(Object.assign({class:clsx("kol-textarea",u,t),required:l,disabled:o,readonly:i},getDefaultProps({ariaDescribedBy:r,hideLabel:s,label:d})),c);return h("textarea",Object.assign({},m))};function getTextAreaProps(e,t){var n;const a=[...getRenderStates(e).ariaDescribedBy,...null!==(n=t.ariaDescribedBy)&&void 0!==n?n:[]],i=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:convertMsgToInternMsg(e._msg)},t),{ariaDescribedBy:a});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(i.maxLength=e._maxLength),i}const TextAreaStateWrapper=e=>{var{state:t}=e,n=__rest(e,["state"]);return h(TextAreaFc,Object.assign({},getTextAreaProps(t,n)))};class TextareaController extends InputIconController{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e)}validateMaxLengthBehavior(e){validateMaxLengthBehavior(this.component,e)}validateMaxLength(e){validateMaxLength(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateResize(e){validateResizeTextarea(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateSpellCheck(e){validateSpellCheck(this.component,e)}validateValue(e){watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),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(44rem / 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: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\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(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    contain: layout;\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);\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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(1rem / var(--kolibri-root-font-size, 16));\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-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},KolTextarea=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return h(FormFieldStateWrapper,Object.assign({key:"a04967ea2fecb1a7c6f238600d52f2d4d4b4cc72"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"db4f3ed0dfa745c109a3a21346df79722b0f7595",state:this.state},h(TextAreaStateWrapper,Object.assign({key:"71376e1ff01a524c589632fff16023da5bb9774b"},this.getTextAreaProps()))))}constructor(e){registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(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)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)},0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}static get delegatesFocus(){return!0}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss};export{KolTextarea as kol_textarea};
+import{h,r as registerInstance,g as getElement}from"./index-DOWoBMgb.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{d as getDefaultProps,c as checkHasMsg,g as getRenderStates,F as FormFieldStateWrapper}from"./FormFieldStateWrapper-DiolLYSq.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon-bVTIf-z3.js";import{_ as __rest}from"./Heading-BX2W3g7O.js";import{w as watchValidator,e as watchString}from"./common-8fBdMvJM.js";import{n as nonce}from"./dev.utils-BxUNRHGK.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior-BmNWss6T.js";import{v as validatePlaceholder}from"./placeholder-6URRds0_.js";import{v as validateReadOnly}from"./read-only-CcRldJ9w.js";import{v as validateRequired}from"./required-G86n77y0.js";import{v as validateRows}from"./rows-P4l3PNiA.js";import{v as validateSpellCheck}from"./spell-check-DIsLAYgk.js";import"./access-and-short-key-bcID78Ha.js";import"./disabled-BydergHu.js";import"./hide-label-DRunOux4.js";import"./label-CdtNxOKu.js";import"./tooltip-align-_VI7LehI.js";import"./align-CyK0wp7d.js";import"./events-CoPFQEiC.js";import"./associated.controller-BKIODHIT.js";import"./bootstrap-BiRnv4fV.js";import"./component-names-CkE54Ym7.js";import"./i18n-ZF6JbdVP.js";import"./isObject-DvSELytj.js";import"./Alert-B377MRFO.js";import"./i18n-CdSCDnmA.js";import"./bem-DhwfdDrM.js";import"./browser-DeS_gcJV.js";import"./InternalUnderlinedBadgeText-CLrx-9jT.js";import"./reuse-CX4AQDkS.js";import"./Icon-Dh17fWbe.js";import"./icons-72ER78AW.js";const textareaResizeOptions=["vertical","none"],isTextareaResizePropType=e=>"string"==typeof e&&textareaResizeOptions.includes(e),validateResizeTextarea=(e,t)=>{watchValidator(e,"_resize",isTextareaResizePropType,new Set(textareaResizeOptions),t,{defaultValue:"vertical"})},TextAreaFc=e=>{const{class:t,msg:n,touched:a,readonly:i,disabled:o,required:l,ariaDescribedBy:r,hideLabel:s,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),p=checkHasMsg(n,a),u="string"==typeof n?"error":null==n?void 0:n._type,m={"kol-textarea--disabled":Boolean(o),"kol-textarea--required":Boolean(l),"kol-textarea--touched":Boolean(a),"kol-textarea--readonly":Boolean(i),[`kol-textarea--${u||"error"}`]:p},v=Object.assign(Object.assign({class:clsx("kol-textarea",m,t),required:l,disabled:o,readonly:i},getDefaultProps({ariaDescribedBy:r,hideLabel:s,label:d})),c);return h("textarea",Object.assign({},v))};function getTextAreaProps(e,t){var n;const a=[...getRenderStates(e).ariaDescribedBy,...null!==(n=t.ariaDescribedBy)&&void 0!==n?n:[]],i=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:a});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(i.maxLength=e._maxLength),i}const TextAreaStateWrapper=e=>{var{state:t}=e,n=__rest(e,["state"]);return h(TextAreaFc,Object.assign({},getTextAreaProps(t,n)))};class TextareaController extends InputIconController{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e)}validateMaxLengthBehavior(e){validateMaxLengthBehavior(this.component,e)}validateMaxLength(e){validateMaxLength(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateResize(e){validateResizeTextarea(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateSpellCheck(e){validateSpellCheck(this.component,e)}validateValue(e){watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),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(44rem / 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(16rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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);\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(10rem / var(--kolibri-root-font-size, 16));\n    height: calc(10rem / 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(1rem / var(--kolibri-root-font-size, 16));\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-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},KolTextarea=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async kolFocus(){var e;null===(e=this.textareaRef)||void 0===e||e.focus()}getFormFieldProps(){return{state:this.state,class:clsx("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return h(FormFieldStateWrapper,Object.assign({key:"a04967ea2fecb1a7c6f238600d52f2d4d4b4cc72"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"db4f3ed0dfa745c109a3a21346df79722b0f7595",state:this.state},h(TextAreaStateWrapper,Object.assign({key:"71376e1ff01a524c589632fff16023da5bb9774b"},this.getTextAreaProps()))))}constructor(e){registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(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)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)},0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}static get delegatesFocus(){return!0}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss};export{KolTextarea as kol_textarea};

package/dist/esm/kol-textarea.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"kol-textarea.entry.js","sources":["src/schema/props/resize-textarea.ts","src/functional-components/inputs/TextArea/TextArea.tsx","src/functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper.tsx","src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const textareaResizeOptions = ['vertical', 'none'] as const;\nexport type TextareaResizePropType = (typeof textareaResizeOptions)[number];\n\n/**\n * Defines how the textarea can be resized by the user.\n */\nexport type PropResizeTextarea = {\n\tresize: TextareaResizePropType;\n};\n\nconst isTextareaResizePropType = (value: unknown): value is TextareaResizePropType => {\n\treturn typeof value === 'string' && textareaResizeOptions.includes(value as TextareaResizePropType);\n};\n\nexport const validateResizeTextarea = (component: Generic.Element.Component, value?: TextareaResizePropType): void => {\n\twatchValidator(component, '_resize', isTextareaResizePropType, new Set(textareaResizeOptions), value, {\n\t\tdefaultValue: 'vertical',\n\t});\n};\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { getDefaultProps } from '../_helpers/getDefaultProps';\nimport type { DefaultInputProps } from '../_types';\nimport { checkHasMsg, type InternMsgPropType } from '../../../schema';\n\nexport type TextAreaProps = DefaultInputProps<JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>> & {\n\tvalue: string;\n\ttouched?: boolean;\n\tmsg?: InternMsgPropType;\n};\n\nconst TextAreaFc: FC<TextAreaProps> = (props) => {\n\tconst { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label, ...other } = props;\n\n\tconst showMsg = checkHasMsg(msg, touched);\n\n\tconst stateCssClasses = {\n\t\t['kol-textarea--disabled']: Boolean(disabled),\n\t\t['kol-textarea--required']: Boolean(required),\n\t\t['kol-textarea--touched']: Boolean(touched),\n\t\t['kol-textarea--readonly']: Boolean(readonly),\n\t\t[`kol-textarea--${msg?.type || 'error'}`]: showMsg,\n\t};\n\n\tconst inputProps: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> = {\n\t\tclass: clsx('kol-textarea', stateCssClasses, classNames),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\treadonly: readonly,\n\t\t...getDefaultProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn <textarea {...inputProps} />;\n};\n\nexport default TextAreaFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolTextAreaFc, { type TextAreaProps } from '../../functional-components/inputs/TextArea';\n\nimport { convertMsgToInternMsg, type TextareaStates } from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\nexport type TextAreaStateWrapperProps = Partial<TextAreaProps> & {\n\tstate: TextareaStates;\n};\n\nfunction getTextAreaProps(state: TextareaStates, other: Partial<TextAreaProps>): TextAreaProps {\n\tconst renderStates = getRenderStates(state);\n\tconst ariaDescribedBy = [...renderStates.ariaDescribedBy, ...(other.ariaDescribedBy ?? [])];\n\n\tconst props: TextAreaProps = {\n\t\tid: state._id,\n\t\thideLabel: state._hideLabel,\n\t\tlabel: state._label,\n\t\tvalue: state._value as string,\n\t\taccessKey: state._accessKey,\n\t\tdisabled: state._disabled,\n\t\tname: state._name,\n\t\trows: state._rows,\n\t\treadonly: state._readOnly,\n\t\trequired: state._required,\n\t\tplaceholder: state._placeholder,\n\t\ttouched: state._touched,\n\t\tmsg: convertMsgToInternMsg(state._msg),\n\t\t...other,\n\t\tariaDescribedBy,\n\t};\n\n\tif ('_maxLength' in state && '_maxLengthBehavior' in state && state._maxLengthBehavior === 'hard') {\n\t\tprops.maxLength = state._maxLength;\n\t}\n\n\treturn props;\n}\n\nconst TextAreaStateWrapper: FC<TextAreaStateWrapperProps> = ({ state, ...other }) => {\n\treturn <KolTextAreaFc {...getTextAreaProps(state, other)} />;\n};\n\nexport default TextAreaStateWrapper;\n","import type {\n\tHasCounterPropType,\n\tMaxLengthBehaviorPropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tSpellCheckPropType,\n\tTextareaProps,\n\tTextareaResizePropType,\n\tTextareaWatches,\n} from '../../schema';\nimport {\n\tvalidateHasCounter,\n\tvalidateMaxLength,\n\tvalidateMaxLengthBehavior,\n\tvalidatePlaceholder,\n\tvalidateReadOnly,\n\tvalidateRequired,\n\tvalidateResizeTextarea,\n\tvalidateRows,\n\tvalidateSpellCheck,\n\twatchString,\n} from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class TextareaController extends InputIconController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string') {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t\tthis.updateCurrentLengthDebounced(this.component._value.length);\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tvalidateHasCounter(this.component, value);\n\t}\n\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tvalidateMaxLengthBehavior(this.component, value);\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\tvalidateMaxLength(this.component, value, {\n\t\t\thooks: { afterPatch: this.afterSyncCharCounter },\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tvalidateReadOnly(this.component, value);\n\t}\n\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tvalidateResizeTextarea(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tvalidateSpellCheck(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLengthBehavior(this.component._maxLengthBehavior);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateSpellCheck(this.component._spellCheck);\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-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\n\t.kol-textarea {\n\t\twidth: 100%;\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAdjustHeightPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport { nonce } from '../../utils/dev.utils';\nimport { TextareaController } from './controller';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolTextarea implements TextareaAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate textareaRef?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.textareaRef = 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<string | undefined> {\n\t\treturn this.textareaRef?.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.textareaRef?.focus();\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.textareaRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy = typeof this.state._maxLength === 'number' ? [`${this.state._id}-character-limit-hint`] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.\n\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: 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: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\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 * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\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({ mutable: true, reflect: true }) 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 */\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 maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\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 * 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 input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\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 * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\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 * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\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: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_currentLengthDebounced: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\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('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(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('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(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('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(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('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(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('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(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('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(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}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.textareaRef /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows =\n\t\t\t\t\tthis.state?._rows && this.state._rows > increaseTextareaHeight(this.textareaRef) ? this.state._rows : increaseTextareaHeight(this.textareaRef);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.textareaRef instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.textareaRef.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.textareaRef);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"names":["KolTextAreaFc","KolFormFieldStateWrapperFc","KolInputContainerStateWrapperFc","KolTextAreaStateWrapperFc"],"mappings":"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"}
+{"version":3,"file":"kol-textarea.entry.js","sources":["src/schema/props/resize-textarea.ts","src/functional-components/inputs/TextArea/TextArea.tsx","src/functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper.tsx","src/components/textarea/controller.ts","src/components/textarea/style.scss?tag=kol-textarea&mode=default&encapsulation=shadow","src/components/textarea/shadow.tsx"],"sourcesContent":["import type { Generic } from 'adopted-style-sheets';\n\nimport { watchValidator } from '../utils';\n\nexport const textareaResizeOptions = ['vertical', 'none'] as const;\nexport type TextareaResizePropType = (typeof textareaResizeOptions)[number];\n\n/**\n * Defines how the textarea can be resized by the user.\n */\nexport type PropResizeTextarea = {\n\tresize: TextareaResizePropType;\n};\n\nconst isTextareaResizePropType = (value: unknown): value is TextareaResizePropType => {\n\treturn typeof value === 'string' && textareaResizeOptions.includes(value as TextareaResizePropType);\n};\n\nexport const validateResizeTextarea = (component: Generic.Element.Component, value?: TextareaResizePropType): void => {\n\twatchValidator(component, '_resize', isTextareaResizePropType, new Set(textareaResizeOptions), value, {\n\t\tdefaultValue: 'vertical',\n\t});\n};\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport type { JSXBase } from '@stencil/core/internal';\nimport clsx from 'clsx';\nimport { getDefaultProps } from '../_helpers/getDefaultProps';\nimport type { DefaultInputProps } from '../_types';\nimport { checkHasMsg, type MsgPropType, type Stringified } from '../../../schema';\n\nexport type TextAreaProps = DefaultInputProps<JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement>> & {\n\tvalue: string;\n\ttouched?: boolean;\n\tmsg?: Stringified<MsgPropType>;\n};\n\nconst TextAreaFc: FC<TextAreaProps> = (props) => {\n\tconst { class: classNames, msg, touched, readonly, disabled, required, ariaDescribedBy, hideLabel, label, ...other } = props;\n\n\tconst showMsg = checkHasMsg(msg, touched);\n\tconst msgType = typeof msg === 'string' ? 'error' : msg?._type;\n\n\tconst stateCssClasses = {\n\t\t['kol-textarea--disabled']: Boolean(disabled),\n\t\t['kol-textarea--required']: Boolean(required),\n\t\t['kol-textarea--touched']: Boolean(touched),\n\t\t['kol-textarea--readonly']: Boolean(readonly),\n\t\t[`kol-textarea--${msgType || 'error'}`]: showMsg,\n\t};\n\n\tconst inputProps: JSXBase.TextareaHTMLAttributes<HTMLTextAreaElement> = {\n\t\tclass: clsx('kol-textarea', stateCssClasses, classNames),\n\t\trequired: required,\n\t\tdisabled: disabled,\n\t\treadonly: readonly,\n\t\t...getDefaultProps({ ariaDescribedBy, hideLabel, label }),\n\t\t...other,\n\t};\n\n\treturn <textarea {...inputProps} />;\n};\n\nexport default TextAreaFc;\n","import { h, type FunctionalComponent as FC } from '@stencil/core';\nimport KolTextAreaFc, { type TextAreaProps } from '../../functional-components/inputs/TextArea';\n\nimport { type TextareaStates, type MsgPropType } from '../../schema';\nimport { getRenderStates } from '../_helpers/getRenderStates';\n\nexport type TextAreaStateWrapperProps = Partial<TextAreaProps> & {\n\tstate: TextareaStates;\n};\n\nfunction getTextAreaProps(state: TextareaStates, other: Partial<TextAreaProps>): TextAreaProps {\n\tconst renderStates = getRenderStates(state);\n\tconst ariaDescribedBy = [...renderStates.ariaDescribedBy, ...(other.ariaDescribedBy ?? [])];\n\n\tconst props: TextAreaProps = {\n\t\tid: state._id,\n\t\thideLabel: state._hideLabel,\n\t\tlabel: state._label,\n\t\tvalue: state._value as string,\n\t\taccessKey: state._accessKey,\n\t\tdisabled: state._disabled,\n\t\tname: state._name,\n\t\trows: state._rows,\n\t\treadonly: state._readOnly,\n\t\trequired: state._required,\n\t\tplaceholder: state._placeholder,\n\t\ttouched: state._touched,\n\t\tmsg: state._msg as MsgPropType,\n\t\t...other,\n\t\tariaDescribedBy,\n\t};\n\n\tif ('_maxLength' in state && '_maxLengthBehavior' in state && state._maxLengthBehavior === 'hard') {\n\t\tprops.maxLength = state._maxLength;\n\t}\n\n\treturn props;\n}\n\nconst TextAreaStateWrapper: FC<TextAreaStateWrapperProps> = ({ state, ...other }) => {\n\treturn <KolTextAreaFc {...getTextAreaProps(state, other)} />;\n};\n\nexport default TextAreaStateWrapper;\n","import type {\n\tHasCounterPropType,\n\tMaxLengthBehaviorPropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tSpellCheckPropType,\n\tTextareaProps,\n\tTextareaResizePropType,\n\tTextareaWatches,\n} from '../../schema';\nimport {\n\tvalidateHasCounter,\n\tvalidateMaxLength,\n\tvalidateMaxLengthBehavior,\n\tvalidatePlaceholder,\n\tvalidateReadOnly,\n\tvalidateRequired,\n\tvalidateResizeTextarea,\n\tvalidateRows,\n\tvalidateSpellCheck,\n\twatchString,\n} from '../../schema';\n\nimport { InputIconController } from '../@deprecated/input/controller-icon';\n\nimport type { Generic } from 'adopted-style-sheets';\n\nexport class TextareaController extends InputIconController implements TextareaWatches {\n\tprotected readonly component: Generic.Element.Component & TextareaProps;\n\n\tpublic constructor(component: Generic.Element.Component & TextareaProps, name: string, host?: HTMLElement) {\n\t\tsuper(component, name, host);\n\t\tthis.component = component;\n\t}\n\n\tprivate afterSyncCharCounter = () => {\n\t\tif (typeof this.component._value === 'string') {\n\t\t\tthis.component.state._currentLength = this.component._value.length;\n\t\t\tthis.updateCurrentLengthDebounced(this.component._value.length);\n\t\t}\n\t};\n\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tvalidateHasCounter(this.component, value);\n\t}\n\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tvalidateMaxLengthBehavior(this.component, value);\n\t}\n\n\tpublic validateMaxLength(value?: number): void {\n\t\tvalidateMaxLength(this.component, value, {\n\t\t\thooks: { afterPatch: this.afterSyncCharCounter },\n\t\t});\n\t}\n\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tvalidatePlaceholder(this.component, value);\n\t}\n\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tvalidateReadOnly(this.component, value);\n\t}\n\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tvalidateResizeTextarea(this.component, value);\n\t}\n\n\tpublic validateRequired(value?: RequiredPropType): void {\n\t\tvalidateRequired(this.component, value);\n\t}\n\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tvalidateRows(this.component, value);\n\t}\n\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tvalidateSpellCheck(this.component, value);\n\t}\n\n\tpublic validateValue(value?: string): void {\n\t\twatchString(this.component, '_value', value, {\n\t\t\thooks: {\n\t\t\t\tafterPatch: this.afterSyncCharCounter,\n\t\t\t},\n\t\t});\n\t\tthis.setFormAssociatedValue(this.component._value);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tsuper.componentWillLoad();\n\t\tthis.validateHasCounter(this.component._hasCounter);\n\t\tthis.validateMaxLengthBehavior(this.component._maxLengthBehavior);\n\t\tthis.validateMaxLength(this.component._maxLength);\n\t\tthis.validatePlaceholder(this.component._placeholder);\n\t\tthis.validateReadOnly(this.component._readOnly);\n\t\tthis.validateRequired(this.component._required);\n\t\tthis.validateResize(this.component._resize);\n\t\tthis.validateRows(this.component._rows);\n\t\tthis.validateSpellCheck(this.component._spellCheck);\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-form-field-mixin' as *;\n@use '../../styles/kol-input-container-mixin' as *;\n@use '../@shared/mixins' as *;\n@use '../host-display-block' as *;\n\n@layer kol-component {\n\t@include kol-alert;\n\t@include kol-form-field;\n\t@include kol-input-container;\n\n\t.kol-textarea {\n\t\twidth: 100%;\n\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n}\n","import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Method, Prop, State, Watch } from '@stencil/core';\nimport clsx from 'clsx';\n\nimport type {\n\tAdjustHeightPropType,\n\tDisabledPropType,\n\tFocusableElement,\n\tHasCounterPropType,\n\tHideLabelPropType,\n\tHideMsgPropType,\n\tHintPropType,\n\tIconsHorizontalPropType,\n\tIdPropType,\n\tInputTypeOnDefault,\n\tLabelWithExpertSlotPropType,\n\tMaxLengthBehaviorPropType,\n\tMsgPropType,\n\tNamePropType,\n\tPlaceholderPropType,\n\tReadOnlyPropType,\n\tRequiredPropType,\n\tRowsPropType,\n\tShortKeyPropType,\n\tSpellCheckPropType,\n\tStringified,\n\tSyncValueBySelectorPropType,\n\tTextareaAPI,\n\tTextareaResizePropType,\n\tTextareaStates,\n\tTooltipAlignPropType,\n} from '../../schema';\n\nimport KolFormFieldStateWrapperFc, { type FormFieldStateWrapperProps } from '../../functional-component-wrappers/FormFieldStateWrapper/FormFieldStateWrapper';\nimport KolInputContainerStateWrapperFc from '../../functional-component-wrappers/InputContainerStateWrapper/InputContainerStateWrapper';\nimport KolTextAreaStateWrapperFc, { type TextAreaStateWrapperProps } from '../../functional-component-wrappers/TextAreaStateWrapper/TextAreaStateWrapper';\nimport { nonce } from '../../utils/dev.utils';\nimport { TextareaController } from './controller';\n\n/**\n * https://stackoverflow.com/questions/17772260/textarea-auto-height\n */\nconst increaseTextareaHeight = (el: HTMLTextAreaElement): number => {\n\tel.style.overflow = 'hidden'; // verhindert, dass ein Scrollbalken kurz angezeigt wird\n\tconst currentRows = el.rows;\n\tconst rowHeight = el.clientHeight / currentRows;\n\tel.rows = 1;\n\tconst nextRows = Math.round(el.scrollHeight / rowHeight);\n\tel.rows = currentRows;\n\treturn nextRows;\n};\n\n/**\n * @slot - Die Beschriftung des Eingabefeldes.\n */\n@Component({\n\ttag: 'kol-textarea',\n\tstyleUrls: {\n\t\tdefault: './style.scss',\n\t},\n\tshadow: {\n\t\tdelegatesFocus: true,\n\t},\n})\nexport class KolTextarea implements TextareaAPI, FocusableElement {\n\t@Element() private readonly host?: HTMLKolTextareaElement;\n\tprivate textareaRef?: HTMLTextAreaElement;\n\n\tprivate readonly catchRef = (ref?: HTMLTextAreaElement) => {\n\t\tthis.textareaRef = 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<string | undefined> {\n\t\treturn this.textareaRef?.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.textareaRef?.focus();\n\t}\n\n\tprivate getFormFieldProps(): FormFieldStateWrapperProps {\n\t\treturn {\n\t\t\tstate: this.state,\n\t\t\tclass: clsx('kol-form-field-textarea', {\n\t\t\t\t'kol-form-field--has-value': this.state._hasValue,\n\t\t\t\t'kol-form-field--has-counter': this.controller.hasSoftCharacterLimit() || this.controller.hasCounter(),\n\t\t\t}),\n\t\t\ttooltipAlign: this._tooltipAlign,\n\t\t\tonClick: () => this.textareaRef?.focus(),\n\t\t\talert: this.showAsAlert(),\n\t\t};\n\t}\n\n\tprivate getTextAreaProps(): TextAreaStateWrapperProps {\n\t\tconst ariaDescribedBy = typeof this.state._maxLength === 'number' ? [`${this.state._id}-character-limit-hint`] : undefined; // When a character limit is defined, we provide an additional hint referenced by aria-describedby.\n\n\t\treturn {\n\t\t\tref: this.catchRef,\n\t\t\tstate: this.state,\n\t\t\tstyle: {\n\t\t\t\tresize: this.state._resize,\n\t\t\t},\n\t\t\tariaDescribedBy,\n\t\t\t...this.controller.onFacade,\n\t\t\tonInput: this.onInput,\n\t\t\tonFocus: (event: 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: Event) => {\n\t\t\t\tthis.controller.onFacade.onBlur(event);\n\t\t\t\tthis.inputHasFocus = false;\n\t\t\t},\n\t\t};\n\t}\n\n\tpublic render(): JSX.Element {\n\t\treturn (\n\t\t\t<KolFormFieldStateWrapperFc {...this.getFormFieldProps()}>\n\t\t\t\t<KolInputContainerStateWrapperFc state={this.state}>\n\t\t\t\t\t<KolTextAreaStateWrapperFc {...this.getTextAreaProps()} />\n\t\t\t\t</KolInputContainerStateWrapperFc>\n\t\t\t</KolFormFieldStateWrapperFc>\n\t\t);\n\t}\n\n\tprivate readonly controller: TextareaController;\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 * Adjusts the height of the element to its content.\n\t * @TODO: change back to AdjustHeightPropType after stencil #4663 has been resolved\n\t */\n\t@Prop() public _adjustHeight?: boolean = false;\n\n\t/**\n\t * Makes the element not focusable and ignore all events.\n\t * @TODO: Change type back to `DisabledPropType` after Stencil#4663 has been resolved.\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({ mutable: true, reflect: true }) 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 maximum number of input characters.\n\t */\n\t@Prop() public _maxLength?: number;\n\n\t/**\n\t * Shows a character counter for the input element.\n\t */\n\t@Prop() public _hasCounter?: boolean = false;\n\n\t/**\n\t * Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.\n\t */\n\t@Prop() public _maxLengthBehavior?: MaxLengthBehaviorPropType = 'hard';\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 * 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 input element read only.\n\t * @TODO: Change type back to `ReadOnlyPropType` after Stencil#4663 has been resolved.\n\t */\n\t@Prop() public _readOnly?: boolean = false;\n\n\t/**\n\t * Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\n\t * In version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.\n\t */\n\t@Prop() public _resize?: TextareaResizePropType = 'vertical';\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 * Defines how many rows of text should be visible at the same time.\n\t */\n\t@Prop({ mutable: true, reflect: false }) public _rows?: RowsPropType;\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 * Defines whether the browser should check the spelling and grammar.\n\t */\n\t@Prop() public _spellCheck?: SpellCheckPropType;\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: TextareaStates = {\n\t\t_adjustHeight: false,\n\t\t_currentLength: 0,\n\t\t_currentLengthDebounced: 0,\n\t\t_hasValue: false,\n\t\t_hideMsg: false,\n\t\t_id: `id-${nonce()}`,\n\t\t_label: '', // ⚠ required\n\t\t_resize: 'vertical',\n\t};\n\n\t@State() private inputHasFocus = false;\n\n\tpublic constructor() {\n\t\tthis.controller = new TextareaController(this, 'textarea', this.host);\n\t}\n\n\tprivate showAsAlert(): boolean {\n\t\treturn Boolean(this.state._touched) && !this.inputHasFocus;\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('_adjustHeight')\n\tpublic validateAdjustHeight(value?: AdjustHeightPropType): void {\n\t\tthis.controller.validateAdjustHeight(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('_hasCounter')\n\tpublic validateHasCounter(value?: HasCounterPropType): void {\n\t\tthis.controller.validateHasCounter(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('_maxLength')\n\tpublic validateMaxLength(value?: number): void {\n\t\tthis.controller.validateMaxLength(value);\n\t}\n\n\t@Watch('_maxLengthBehavior')\n\tpublic validateMaxLengthBehavior(value?: MaxLengthBehaviorPropType): void {\n\t\tthis.controller.validateMaxLengthBehavior(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('_placeholder')\n\tpublic validatePlaceholder(value?: PlaceholderPropType): void {\n\t\tthis.controller.validatePlaceholder(value);\n\t}\n\n\t@Watch('_readOnly')\n\tpublic validateReadOnly(value?: ReadOnlyPropType): void {\n\t\tthis.controller.validateReadOnly(value);\n\t}\n\n\t@Watch('_resize')\n\tpublic validateResize(value?: TextareaResizePropType): void {\n\t\tthis.controller.validateResize(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('_rows')\n\tpublic validateRows(value?: RowsPropType): void {\n\t\tthis.controller.validateRows(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('_spellCheck')\n\tpublic validateSpellCheck(value?: SpellCheckPropType): void {\n\t\tthis.controller.validateSpellCheck(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}\n\n\tpublic componentDidLoad(): void {\n\t\tsetTimeout(() => {\n\t\t\tif (this._adjustHeight === true && this.textareaRef /* SSR instanceof HTMLTextAreaElement */) {\n\t\t\t\tthis._rows =\n\t\t\t\t\tthis.state?._rows && this.state._rows > increaseTextareaHeight(this.textareaRef) ? this.state._rows : increaseTextareaHeight(this.textareaRef);\n\t\t\t} else if (!this._rows) {\n\t\t\t\tthis._rows = 1;\n\t\t\t}\n\t\t}, 0);\n\t}\n\n\tpublic componentWillLoad(): void {\n\t\tthis._touched = this._touched === true;\n\t\tthis.controller.componentWillLoad();\n\t\tthis.state._hasValue = !!this.state._value;\n\t\tthis.controller.addValueChangeListener((v) => (this.state._hasValue = !!v));\n\t}\n\n\tprivate readonly onInput = (event: InputEvent) => {\n\t\tif (this.textareaRef instanceof HTMLTextAreaElement) {\n\t\t\tthis._value = this.textareaRef.value;\n\t\t\tif (this.state._adjustHeight) {\n\t\t\t\tthis._rows = increaseTextareaHeight(this.textareaRef);\n\t\t\t}\n\t\t\tthis.controller.onFacade.onInput(event);\n\t\t}\n\t};\n}\n"],"names":["KolTextAreaFc","KolFormFieldStateWrapperFc","KolInputContainerStateWrapperFc","KolTextAreaStateWrapperFc"],"mappings":"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"}