@public-ui/components 3.0.0-887b7986b55acd713750f46753265f8330a1342a.0 → 3.0.0-a9055785014025fc4c165147816a14a28ccaa855.0

package/dist/esm/kol-split-button.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-5ec1eac2.js";import{t as translate}from"./i18n-005310a7.js";import{k as KolPopoverWcTag,a as KolButtonWcTag}from"./component-names-545d6582.js";import{c as clsx}from"./clsx-09a06a12.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton=class{constructor(n){registerInstance(this,n),this.clickButtonHandler={onClick:n=>{var t,o;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(o=this._on)||void 0===o||o.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return h("div",{key:"8664ae7759dd4cb7d8c5477d20ab215ee97c818e",class:"kol-split-button"},h("div",{key:"845da58929b4ae57bf7c669bdbd075e9c54c5b25",class:"kol-split-button__root"},h(KolButtonWcTag,{key:"3baa6c9734b6fad135ac3fe356456a64604303b7",class:clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{key:"69977b0689cc052c17ba02c8318123c22aa7f714",class:"kol-split-button__horizontal-line"}),h(KolButtonWcTag,{key:"b68d4897bd234cf268036f26aecdffde859b0406",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?translate(`${n}-close`):translate(`${n}-open`),_on:this.clickToggleHandler})),h(KolPopoverWcTag,{key:"46e3f5ebfe9e81c0228918441c8da74af810b607",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},h("slot",{key:"11e9744c98e4ff6433df16437b4336a5616342f5"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};KolSplitButton.style={default:KolSplitButtonDefaultStyle0};export{KolSplitButton as kol_split_button};
+import{r as registerInstance,h}from"./index-c184720f.js";import{t as translate}from"./i18n-005310a7.js";import{k as KolPopoverWcTag,a as KolButtonWcTag}from"./component-names-545d6582.js";import{c as clsx}from"./clsx-09a06a12.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  .kol-popover {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    height: 0;\n    position: absolute;\n  }\n  .kol-popover__content {\n    background-color: #fff;\n    min-height: max-content;\n    min-width: max-content;\n    opacity: 0;\n    position: absolute;\n  }\n  .kol-popover__content--visible {\n    animation: 0.3s ease-in forwards fadeInOpacity;\n  }\n  .kol-popover__content--disappear {\n    animation: 0.3s ease-in backwards fadeInOpacity;\n  }\n  .kol-popover__arrow {\n    background-color: inherit;\n    height: var(--font-size);\n    position: absolute;\n    rotate: 0.125turn;\n    width: var(--font-size);\n    z-index: -1;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-split-button {\n    display: flex;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: relative;\n  }\n  .kol-split-button__root {\n    display: flex;\n    position: relative;\n  }\n  .kol-split-button__button {\n    flex-grow: 1;\n    text-align: left;\n  }\n  .kol-split-button .kol-popover__content {\n    margin-top: calc(2rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-split-button .kol-popover__arrow {\n    display: none;\n  }\n}",KolSplitButtonDefaultStyle0=defaultStyleCss,KolSplitButton=class{constructor(n){registerInstance(this,n),this.clickButtonHandler={onClick:n=>{var t,o;n.stopPropagation(),"function"==typeof(null===(t=this._on)||void 0===t?void 0:t.onClick)?null===(o=this._on)||void 0===o||o.onClick(n,this._value):this.toggleDropdown()}},this.clickToggleHandler={onClick:n=>{n.stopPropagation(),this.toggleDropdown()}},this.toggleDropdown=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!this.state._show})},this.handleOnClose=()=>{this.state=Object.assign(Object.assign({},this.state),{_show:!1})},this._ariaControls=void 0,this._ariaExpanded=void 0,this._ariaSelected=void 0,this._customClass=void 0,this._disabled=!1,this._hideLabel=!1,this._icons=void 0,this._id=void 0,this._label=void 0,this._name=void 0,this._on=void 0,this._role=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._type="button",this._value=void 0,this._variant="normal",this.state={_show:!1}}render(){const n="kol-split-button-dropdown-label";return h("div",{key:"8664ae7759dd4cb7d8c5477d20ab215ee97c818e",class:"kol-split-button"},h("div",{key:"845da58929b4ae57bf7c669bdbd075e9c54c5b25",class:"kol-split-button__root"},h(KolButtonWcTag,{key:"3baa6c9734b6fad135ac3fe356456a64604303b7",class:clsx("kol-split-button__button",{[this._variant]:"custom"!==this._variant,[this._customClass]:"custom"===this._variant&&"string"==typeof this._customClass&&this._customClass.length>0}),_ariaControls:this._ariaControls,_ariaExpanded:this._ariaExpanded,_ariaSelected:this._ariaSelected,_customClass:this._customClass,_disabled:this._disabled,_icons:this._icons,_hideLabel:this._hideLabel,_label:this._label,_name:this._name,_on:this.clickButtonHandler,_role:this._role,_syncValueBySelector:this._syncValueBySelector,_tooltipAlign:this._tooltipAlign,_type:this._type,_value:this._value,_variant:this._variant}),h("div",{key:"69977b0689cc052c17ba02c8318123c22aa7f714",class:"kol-split-button__horizontal-line"}),h(KolButtonWcTag,{key:"b68d4897bd234cf268036f26aecdffde859b0406",class:"kol-split-button__secondary-button",_disabled:this._disabled,_hideLabel:!0,_icons:"codicon codicon-triangle-down",_label:this.state._show?translate(`${n}-close`):translate(`${n}-open`),_on:this.clickToggleHandler})),h(KolPopoverWcTag,{key:"46e3f5ebfe9e81c0228918441c8da74af810b607",_show:this.state._show,_on:{onClose:this.handleOnClose},_align:"bottom"},h("slot",{key:"11e9744c98e4ff6433df16437b4336a5616342f5"})))}async closePopup(){return this.handleOnClose(),Promise.resolve()}static get delegatesFocus(){return!0}};KolSplitButton.style={default:KolSplitButtonDefaultStyle0};export{KolSplitButton as kol_split_button};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-5ec1eac2.js";import{l as KolPaginationTag,m as KolTableStatelessWcTag}from"./component-names-545d6582.js";import{t as translate}from"./i18n-005310a7.js";import{K as KolEvent,d as dispatchDomEvent}from"./events-5adf6b62.js";import{v as validateTableData,a as validateTableDataFoot,b as validateTableSelection,c as validateTableStatefulCallbacks,C as Callback}from"./callback-2c4e1e78.js";import{w as watchValidator,s as setState,q as emptyStringByArrayHandler,i as watchString,p as parseJson,o as objectObjectHandler,j as devHint}from"./prop.validators-64749272.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./common-54bf85ba.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,e)=>{watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),e,{defaultValue:"bottom"})},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\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__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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\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    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",KolTableStatefulDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),setState(this,"_pageSize",e)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);let t=this.state._data;this.sortData.length>0&&(t=this.state._data.sort(((t,e)=>{for(let n=0;n<this.sortData.length;n++){const a=this.sortData[n],i=a.compareFn(t,e);if(0!==i)return"ASC"===a.direction?i:-i}return 0}))),setState(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){watchValidator(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const n=this.sortData.findIndex((e=>e.key===t.key));if(n>=0){const t=this.sortData[n];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(n,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,a,i;const o=t=>{let e=!1;t.forEach((t=>{const n=t.key;if(!n)return;const a=t.sortDirection;"ASC"!==a&&"DESC"!==a||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:n,compareFn:t.compareFn,direction:a}),e=!0)})),e&&setTimeout((()=>this.updateSortedData()))},l=t;null===(e=l.horizontal)||void 0===e||e.forEach(o),null===(n=l.vertical)||void 0===n||n.forEach(o),l.horizontal&&l.vertical&&(null===(a=l.horizontal)||void 0===a?void 0:a.length)>0&&(null===(i=l.vertical)||void 0===i?void 0:i.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",{class:"kol-table-stateful__pagination-wrapper"},h(KolPaginationTag,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const e=this.sortData.find((e=>e.key===t.key));if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((e=>e.key===t));e&&this.changeCellSort(e)}getSelectedData(t){var e;const n=this.state._selection;if(n){const a=null!==(e=n.keyPropertyName)&&void 0!==e?e:"id",i=this.state._sortedData.filter((e=>t.includes(e[a])));if(!1===(null==n?void 0:n.multiple))return i[0];if(a)return i}return null}handleSelectionChange(t,e){var n;const a=this.state._selection;a&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},a),{selectedKeys:"object"==typeof e?e:[e]})}));const i=this.getSelectedData(e);"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,i),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,i)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,n,a;const i=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),o="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,l="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,s={horizontal:null===(n=this.state._headers.horizontal)||void 0===n?void 0:n.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(a=this.state._headers.vertical)||void 0===a?void 0:a.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return h(Host,{key:"918c775559ae9b707dbdfff227cf41a91e15a5c9",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&o,h(KolTableStatelessWcTag,{key:"78afe40143ab93577d9d19d111768a4874d4475b",ref:this.catchRef,_data:i,_headerCells:s,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&l)}get host(){return getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:KolTableStatefulDefaultStyle0};export{KolTableStateful as kol_table_stateful};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-c184720f.js";import{l as KolPaginationTag,m as KolTableStatelessWcTag}from"./component-names-545d6582.js";import{t as translate}from"./i18n-005310a7.js";import{K as KolEvent,d as dispatchDomEvent}from"./events-5adf6b62.js";import{v as validateTableData,a as validateTableDataFoot,b as validateTableSelection,c as validateTableStatefulCallbacks,C as Callback}from"./callback-2c4e1e78.js";import{w as watchValidator,s as setState,q as emptyStringByArrayHandler,i as watchString,p as parseJson,o as objectObjectHandler,j as devHint}from"./prop.validators-64749272.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./common-54bf85ba.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,e)=>{watchValidator(t,"_paginationPosition",(t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t)),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),e,{defaultValue:"bottom"})},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\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__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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\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    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}\n@layer kol-component {\n  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n    display: grid;\n    place-items: center;\n  }\n  @media (min-width: 1024px) {\n    .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {\n      grid-auto-flow: column;\n    }\n  }\n  .kol-pagination {\n    display: flex;\n    flex-wrap: wrap;\n  }\n  @media (min-width: 1024px) {\n    .kol-pagination {\n      display: flex;\n    }\n  }\n  @media (max-width: 1024px) {\n    .kol-pagination {\n      flex-direction: column;\n    }\n  }\n}",KolTableStatefulDefaultStyle0=defaultStyleCss,PAGINATION_OPTIONS=[10,20,50,100],paginationValidator=t=>!0===t||""===t||"object"==typeof t&&null!==t,KolTableStateful=class{constructor(t){registerInstance(this,t),this.catchRef=t=>{this.tableWcRef=t},this.sortData=[],this.showPagination=!1,this.pageStartSlice=0,this.pageEndSlice=10,this.disableSort=!1,this.handlePagination={onClick:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onClick)&&this.state._pagination._on.onClick(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePage)&&this.state._pagination._on.onChangePage(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var n;"function"==typeof(null===(n=this.state._pagination._on)||void 0===n?void 0:n.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:e})),setState(this,"_pageSize",e)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);let t=this.state._data;this.sortData.length>0&&(t=this.state._data.sort(((t,e)=>{for(let n=0;n<this.sortData.length;n++){const a=this.sortData[n],i=a.compareFn(t,e);if(0!==i)return"ASC"===a.direction?i:-i}return 0}))),setState(this,"_sortedData",t)},this._allowMultiSort=void 0,this._data=void 0,this._dataFoot=void 0,this._headers=void 0,this._label=void 0,this._minWidth=void 0,this._pagination=void 0,this._paginationPosition="bottom",this._selection=void 0,this._on=void 0,this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom"}}validateAllowMultiSort(t){watchValidator(this,"_allowMultiSort",(()=>!0),new Set(["boolean"]),t,{defaultValue:!1})}validateData(t){validateTableData(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validateDataFoot(t){validateTableDataFoot(this,t,{afterPatch:()=>{setTimeout(this.updateSortedData)}})}validatePaginationPosition(t){validatePaginationPosition(this,t)}changeCellSort(t){var e;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key==(null===(e=this.sortData[0])||void 0===e?void 0:e.key)||(this.sortData=[]);const n=this.sortData.findIndex((e=>e.key===t.key));if(n>=0){const t=this.sortData[n];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(n,1);break;default:t.direction="ASC"}}else t.key&&this.sortData.push({label:t.label,key:t.key,compareFn:t.compareFn,direction:"ASC"});this.updateSortedData()}}validateHeaders(t){emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(t){}watchValidator(this,"_headers",(t=>"object"==typeof t&&null!==t),new Set(["KoliBriTableHeaders"]),t,{hooks:{beforePatch:t=>{var e,n,a,i;const o=t=>{let e=!1;t.forEach((t=>{const n=t.key;if(!n)return;const a=t.sortDirection;"ASC"!==a&&"DESC"!==a||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:n,compareFn:t.compareFn,direction:a}),e=!0)})),e&&setTimeout((()=>this.updateSortedData()))},l=t;null===(e=l.horizontal)||void 0===e||e.forEach(o),null===(n=l.vertical)||void 0===n||n.forEach(o),l.horizontal&&l.vertical&&(null===(a=l.horizontal)||void 0===a?void 0:a.length)>0&&(null===(i=l.vertical)||void 0===i?void 0:i.length)>0&&(this.disableSort=!0,devHint("Table: You can not sort the table data, if horizontal and vertical headers are defined at the same time. (https://github.com/public-ui/kolibri/issues/2372)"))}}})}))}))}validateLabel(t){validateLabel(this,t,{required:!0})}validateMinWidth(t){watchString(this,"_minWidth",t,{defaultValue:void 0})}validateSelection(t){validateTableSelection(this,t)}validateOn(t){validateTableStatefulCallbacks(this,t)}validatePagination(t){try{t=parseJson(t)}catch(t){}this.showPagination=paginationValidator(t),watchValidator(this,"_pagination",paginationValidator,new Set(["boolean","KoliBriTablePagination"]),t,{defaultValue:{_page:1,_pageSize:10,_max:0}})}componentDidLoad(){var t;null===(t=this.tableWcRef)||void 0===t||t.addEventListener(KolEvent.selectionChange,this.onSelectionChange)}disconnectedCallback(){var t;null===(t=this.tableWcRef)||void 0===t||t.removeEventListener(KolEvent.selectionChange,this.onSelectionChange)}componentWillLoad(){this.validateAllowMultiSort(this._allowMultiSort),this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaders(this._headers),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateOn(this._on)}selectDisplayedData(t,e,n){return"number"==typeof e&&e>0&&"number"==typeof n&&n>0?(this.pageStartSlice=e*(n-1),this.pageEndSlice=e*n>t.length?t.length:e*n,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(){return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",null,translate("kol-table-visible-range",{placeholders:{start:this.pageEndSlice>0?(this.pageStartSlice+1).toString():"0",end:this.pageEndSlice.toString(),total:this.state._pagination&&this.state._pagination._max>0?this.state._pagination._max.toString():Array.isArray(this.state._data)?this.state._data.length.toString():"0"}})),h("div",{class:"kol-table-stateful__pagination-wrapper"},h(KolPaginationTag,{class:"test",_boundaryCount:this.state._pagination._boundaryCount,_customClass:this.state._pagination._customClass,_on:this.handlePagination,_page:this.state._pagination._page,_pageSize:this.state._pagination._pageSize,_pageSizeOptions:this.state._pagination._pageSizeOptions||PAGINATION_OPTIONS,_siblingCount:this.state._pagination._siblingCount,_tooltipAlign:"bottom",_max:this.state._pagination._max||this.state._pagination._max||this.state._data.length,_label:translate("kol-table-pagination-label",{placeholders:{label:this.state._label}})})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const e=this.sortData.find((e=>e.key===t.key));if(null==e?void 0:e.direction)return e.direction}return"NOS"}}handleSort({key:t}){const e=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find((e=>e.key===t));e&&this.changeCellSort(e)}getSelectedData(t){var e;const n=this.state._selection;if(n){const a=null!==(e=n.keyPropertyName)&&void 0!==e?e:"id",i=this.state._sortedData.filter((e=>t.includes(e[a])));if(!1===(null==n?void 0:n.multiple))return i[0];if(a)return i}return null}handleSelectionChange(t,e){var n;const a=this.state._selection;a&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},a),{selectedKeys:"object"==typeof e?e:[e]})}));const i=this.getSelectedData(e);"function"==typeof(null===(n=this.state._on)||void 0===n?void 0:n[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,i),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,i)}async getSelection(){var t;const e=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(e)}render(){var t,e,n,a;const i=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(e=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==e?e:10:this.state._sortedData.length,this.state._pagination._page||1),o="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,l="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination():null,s={horizontal:null===(n=this.state._headers.horizontal)||void 0===n?void 0:n.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))),vertical:null===(a=this.state._headers.vertical)||void 0===a?void 0:a.map((t=>t.map((t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)})))))};return h(Host,{key:"918c775559ae9b707dbdfff227cf41a91e15a5c9",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&o,h(KolTableStatelessWcTag,{key:"78afe40143ab93577d9d19d111768a4874d4475b",ref:this.catchRef,_data:i,_headerCells:s,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,e)=>{this.handleSort(e)},onSelectionChange:(t,e)=>{this.handleSelectionChange(t,e)}},_selection:this.state._selection}),this.pageEndSlice>0&&this.showPagination&&l)}get host(){return getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:KolTableStatefulDefaultStyle0};export{KolTableStateful as kol_table_stateful};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,F as Fragment,g as getElement}from"./index-5ec1eac2.js";import{c as clsx}from"./clsx-09a06a12.js";import{d as KolIconTag,g as KolTooltipWcTag,a as KolButtonWcTag}from"./component-names-545d6582.js";import{t as translate}from"./i18n-005310a7.js";import{q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,w as watchValidator}from"./prop.validators-64749272.js";import{n as nonce}from"./dev.utils-930d9493.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-5adf6b62.js";import{v as validateTableData,a as validateTableDataFoot,d as validateTableCallbacks,b as validateTableSelection,C as Callback}from"./callback-2c4e1e78.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";import"./common-54bf85ba.js";const validateTableHeaderCells=(e,t)=>{emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(e){}watchValidator(e,"_headerCells",(e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find((e=>!Array.isArray(e))))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find((e=>!Array.isArray(e))))&&!0),new Set(["TableHeaderCellsPropType"]),t)}))}))},HEADER_CELL_WIDTH_VALIDATOR=/^\d+(\.\d+)?([a-z]+|%)?$/,validateMinWidth=(e,t,l)=>{watchValidator(e,"_minWidth",(e=>"string"==typeof e&&HEADER_CELL_WIDTH_VALIDATOR.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,l)},KolTableStateless=class{constructor(e){registerInstance(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t,l,a=!1)=>{var i,o;let s=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(s=null!==(o=this.getDataKey(e[0].data))&&void 0!==o?o:s),h("tr",{class:clsx("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(e,t),e.map(((e,a)=>this.renderTableCell(e,t,a,l))))},this.renderTableCell=(e,t,l,a)=>{let i=`${t}-${l}-${e.label}`;if(e.data){const a=this.getDataKey(e.data);i=a?`${a}-${this.horizontal?l:t}`:i}return e.headerCell?this.renderHeadingCell(e,t,l,a):h("td",{key:`cell-${i}`,class:clsx("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateMinWidth(e){validateMinWidth(this,e)}validateOn(e){validateTableCallbacks(this,e)}validateSelection(e){validateTableSelection(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const l=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let a=this.checkboxRefs.indexOf(l);a>-1&&(e.preventDefault(),"ArrowDown"===e.key?(a=(a+1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()):"ArrowUp"===e.key&&(e.preventDefault(),a=(a+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,nonce())})),this.dataToKeyMap.forEach(((t,l)=>{e.includes(l)||this.dataToKeyMap.delete(l)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const l=e.render(t,e,e.data,this.state._data);"string"==typeof l&&(t.textContent=l)}}))))}getNumberOfCols(e,t){let l=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.colSpan)&&void 0!==l?l:1})),l<t&&(l=t)})),0===l&&(l=t.length),l}getNumberOfRows(e,t){var l;let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.rowSpan)&&void 0!==l?l:1})),a<t&&(a=t)})),0===a?a=t.length:a-=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0,a}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,l;let a=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===a.length&&(a=this.getThePrimaryHeadersWithKeysIfExists(null!==(l=e.vertical)&&void 0!==l?l:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(e,t,l){var a;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const i=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),n=0;l&&(n=s,s+=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0);const r=[],c=[],d=[];t.vertical.forEach(((e,t)=>{c[t]=0,d[t]=[]}));for(let a=n;a<s;a++){const s=[];t.vertical.forEach(((e,t)=>{let l=0;if(d[t].forEach((e=>l+=e)),l<=a){const i=e[a-l+c[t]];if("object"==typeof i){s.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),d[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let l=1;l<i.colSpan;l++)d[t+l].push(e);c[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=l&&this.state._dataFoot?this.state._dataFoot[a-n]:e[a];"object"==typeof i[t]&&null!==i[t]&&"string"==typeof i[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},i[t]),{colSpan:void 0,data:o,label:o[i[t].key],rowSpan:void 0}))}else"object"==typeof i[a]&&null!==i[a]&&"string"==typeof i[a].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},i[a]),{colSpan:void 0,data:e[t],label:e[t][i[a].key],rowSpan:void 0}));r.push(s)}if(0===e.length){let e=0,l=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{l+=e.rowSpan||1})));const a={colSpan:e,label:translate("kol-no-entries"),render:void 0,rowSpan:Math.max(l,1)};0===r.length?r.push([a]):r[0].push(a)}return r}handleSelectionChangeCallbackAndEvent(e,t){var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](e,t),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,t)}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,t){var l,a,i;const o=this.state._selection;if(!o)return"";const s=this.getSelectionKeyPropertyName(),n=null===(l=e[0])||void 0===l?void 0:l.data;if(!n)return"";const r=n[s],c=o.multiple||void 0===o.multiple,d=null===(a=null==o?void 0:o.selectedKeys)||void 0===a?void 0:a.includes(r),b=null===(i=null==o?void 0:o.disabledKeys)||void 0===i?void 0:i.includes(r),v=o.label(n),_={name:"selection",checked:d,disabled:b,id:r,"aria-label":v};return h("td",{key:`tbody-${t}-selection`,class:"kol-table__cell kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--checked":d})},c?h("label",{class:clsx("kol-table__selection-label",{"kol-table__selection-label--disabled":b})},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-check":""),_label:""}),h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},_,{type:"checkbox",onInput:e=>{var t,l;const a=d?null===(l=null==o?void 0:o.selectedKeys)||void 0===l?void 0:l.filter((e=>e!==r)):[...null!==(t=null==o?void 0:o.selectedKeys)&&void 0!==t?t:[],r];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):h("label",{class:"kol-table__selection-label"},h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--radio")},_,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,r)}}))),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${r}-label`,_label:v})))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter((t=>{var l,a;return!(null===(a=null===(l=this.state._selection)||void 0===l?void 0:l.disabledKeys)||void 0===a?void 0:a.includes(t[e]))}))}getSelectedKeysWithoutDisabledKeys(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,l;return!(null===(l=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===l?void 0:l.includes(e))}))}getSelectedKeysWithDisabledKeysOnly(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,l;return null===(l=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===l?void 0:l.includes(e)}))}getRevertedSelection(e){var t;const l=this.getSelectionKeyPropertyName(),a=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&a.push(...this.getDataWithSelectionEnabled().map((e=>null==e?void 0:e[l]))),a}renderHeadingSelectionCell(){var e,t;const l=this.state._selection;if(!l||!l.multiple&&void 0!==l.multiple)return h("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const a=null!==(t=null===(e=this.getSelectedKeysWithoutDisabledKeys())||void 0===e?void 0:e.length)&&void 0!==t?t:0,i=a===this.getDataWithSelectionEnabled().length,o=0!==a&&!i;let s="kol-table-selection-indeterminate";i&&!o&&(s="kol-table-selection-none"),0===a&&(s="kol-table-selection-all");const n=translate(s);return h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--indeterminate":o,"kol-table__selection--checked":i})},h("label",{class:"kol-table__selection-label"},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(o?"codicon-remove":i?"codicon-check":""),_label:""}),h("input",{class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:i&&!o,indeterminate:o,"aria-label":n,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!i))}})),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${s}-label`,_label:n})))}renderHeaderTdCell(){return h(Fragment,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&h("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,t,l,a){let i,o="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":o="codicon codicon-chevron-up",i="ascending";break;case"DESC":o="codicon codicon-chevron-down",i="descending"}const s=a?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return h("th",{key:`${t}-${l}-${e.label}`,class:clsx("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${i}`]:i}),scope:s,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":i,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?h(KolButtonWcTag,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:o},_label:e.label,_on:{onClick:t=>{var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection}),this.host&&dispatchDomEvent(this.host,KolEvent.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){var l,a;const i=(null===(l=this.state._headerCells.vertical)||void 0===l?void 0:l.length)||0,o=null===(a=null==t?void 0:t[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return h("tr",{"aria-hidden":"true",class:clsx("kol-table__spacer",`kol-table__spacer--${e}`)},h("td",{class:clsx(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:i+o+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return h("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],h("div",{key:"1ac04635486fff8f0456beb99c6b96654248f9e4",ref:e=>this.tableDivElement=e,class:"kol-table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},h("table",{key:"e4457e9e80dd358d4caffcbcc6f7990bbf36ca20",class:"kol-table__table",style:{minWidth:this.state._minWidth}},h("div",{key:"905b4322a63f51170cfcdb0b458c6b6cb129d4ad",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),h("caption",{key:"4003583d910f3471e6d3d5bc585e83d3a2e0ec9a",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&h("thead",{key:"cf7cb9cb892f50e4ba149a4c7b1c0695d23c1d62",class:"kol-table__head"},[this.state._headerCells.horizontal.map(((e,t)=>h("tr",{class:"kol-table__head-row",key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,l)=>this.renderHeadingCell(e,t,l,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),h("tbody",{key:"d83f3334e830da14222a9e44ce1682005171d755",class:"kol-table__body"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot()))}get host(){return getElement(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{KolTableStateless as kol_table_stateless_wc};
+import{r as registerInstance,h,F as Fragment,g as getElement}from"./index-c184720f.js";import{c as clsx}from"./clsx-09a06a12.js";import{d as KolIconTag,g as KolTooltipWcTag,a as KolButtonWcTag}from"./component-names-545d6582.js";import{t as translate}from"./i18n-005310a7.js";import{q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,w as watchValidator}from"./prop.validators-64749272.js";import{n as nonce}from"./dev.utils-f00e16fa.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-5adf6b62.js";import{v as validateTableData,a as validateTableDataFoot,d as validateTableCallbacks,b as validateTableSelection,C as Callback}from"./callback-2c4e1e78.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";import"./common-54bf85ba.js";const validateTableHeaderCells=(e,t)=>{emptyStringByArrayHandler(t,(()=>{objectObjectHandler(t,(()=>{try{t=parseJson(t)}catch(e){}watchValidator(e,"_headerCells",(e=>"object"==typeof e&&null!==e&&(void 0===e.horizontal||Array.isArray(e.horizontal)&&void 0===e.horizontal.find((e=>!Array.isArray(e))))&&(void 0===e.vertical||Array.isArray(e.vertical)&&void 0===e.vertical.find((e=>!Array.isArray(e))))&&!0),new Set(["TableHeaderCellsPropType"]),t)}))}))},HEADER_CELL_WIDTH_VALIDATOR=/^\d+(\.\d+)?([a-z]+|%)?$/,validateMinWidth=(e,t,l)=>{watchValidator(e,"_minWidth",(e=>"string"==typeof e&&HEADER_CELL_WIDTH_VALIDATOR.test(e)),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,l)},KolTableStateless=class{constructor(e){registerInstance(this,e),this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.renderTableRow=(e,t,l,a=!1)=>{var i,o;let s=String(t);return this.horizontal&&(null===(i=e[0])||void 0===i?void 0:i.data)&&(s=null!==(o=this.getDataKey(e[0].data))&&void 0!==o?o:s),h("tr",{class:clsx("kol-table__row",{"kol-table__row--body":!a,"kol-table__row--footer":a}),key:`row-${s}`},this.renderSelectionCell(e,t),e.map(((e,a)=>this.renderTableCell(e,t,a,l))))},this.renderTableCell=(e,t,l,a)=>{let i=`${t}-${l}-${e.label}`;if(e.data){const a=this.getDataKey(e.data);i=a?`${a}-${this.horizontal?l:t}`:i}return e.headerCell?this.renderHeadingCell(e,t,l,a):h("td",{key:`cell-${i}`,class:clsx("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")},this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto"},this.tableDivElementHasScrollbar=!1,this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}validateData(e){validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateMinWidth(e){validateMinWidth(this,e)}validateOn(e){validateTableCallbacks(this,e)}validateSelection(e){validateTableSelection(this,e)}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const l=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let a=this.checkboxRefs.indexOf(l);a>-1&&(e.preventDefault(),"ArrowDown"===e.key?(a=(a+1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()):"ArrowUp"===e.key&&(e.preventDefault(),a=(a+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[a].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}disconnectedCallback(){var e;null===(e=this.tableDivElementResizeObserver)||void 0===e||e.disconnect()}checkDivElementScrollbar(){this.tableDivElement&&(this.tableDivElementHasScrollbar=this.tableDivElement.scrollWidth>this.tableDivElement.clientWidth)}updateDataToKeyMap(e){e.forEach((e=>{this.dataToKeyMap.has(e)||this.dataToKeyMap.set(e,nonce())})),this.dataToKeyMap.forEach(((t,l)=>{e.includes(l)||this.dataToKeyMap.delete(l)}))}getDataKey(e){return this.dataToKeyMap.get(e)}cellRender(e,t){t&&(clearTimeout(this.cellsToRenderTimeouts.get(t)),this.cellsToRenderTimeouts.set(t,setTimeout((()=>{if("function"==typeof e.render){const l=e.render(t,e,e.data,this.state._data);"string"==typeof l&&(t.textContent=l)}}))))}getNumberOfCols(e,t){let l=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.colSpan)&&void 0!==l?l:1})),l<t&&(l=t)})),0===l&&(l=t.length),l}getNumberOfRows(e,t){var l;let a=0;return e.forEach((e=>{let t=0;Array.isArray(e)&&e.forEach((e=>{var l;return t+=null!==(l=e.rowSpan)&&void 0!==l?l:1})),a<t&&(a=t)})),0===a?a=t.length:a-=(null===(l=this.state._dataFoot)||void 0===l?void 0:l.length)||0,a}getThePrimaryHeadersWithKeysIfExists(e){const t=[];return e.forEach((e=>{e.forEach((e=>{"string"==typeof e.key&&t.push(e)}))})),t}getPrimaryHeaders(e){var t,l;let a=this.getThePrimaryHeadersWithKeysIfExists(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===a.length&&(a=this.getThePrimaryHeadersWithKeysIfExists(null!==(l=e.vertical)&&void 0!==l?l:[]),a.length>0&&(this.horizontal=!1)),a}createDataField(e,t,l){var a;t.horizontal=Array.isArray(null==t?void 0:t.horizontal)?t.horizontal:[],t.vertical=Array.isArray(null==t?void 0:t.vertical)?t.vertical:[];const i=this.getPrimaryHeaders(t),o=this.getNumberOfCols(t.horizontal,e);let s=this.getNumberOfRows(t.vertical,e),n=0;l&&(n=s,s+=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0);const r=[],c=[],d=[];t.vertical.forEach(((e,t)=>{c[t]=0,d[t]=[]}));for(let a=n;a<s;a++){const s=[];t.vertical.forEach(((e,t)=>{let l=0;if(d[t].forEach((e=>l+=e)),l<=a){const i=e[a-l+c[t]];if("object"==typeof i){s.push(Object.assign(Object.assign({},i),{headerCell:!0,data:{}}));let e=1;if("number"==typeof i.rowSpan&&i.rowSpan>1&&(e=i.rowSpan),d[t].push(e),"number"==typeof i.colSpan&&i.colSpan>1)for(let l=1;l<i.colSpan;l++)d[t+l].push(e);c[t]++}}}));for(let t=0;t<o;t++)if(!0===this.horizontal){const o=l&&this.state._dataFoot?this.state._dataFoot[a-n]:e[a];"object"==typeof i[t]&&null!==i[t]&&"string"==typeof i[t].key&&"object"==typeof o&&null!==o&&s.push(Object.assign(Object.assign({},i[t]),{colSpan:void 0,data:o,label:o[i[t].key],rowSpan:void 0}))}else"object"==typeof i[a]&&null!==i[a]&&"string"==typeof i[a].key&&"object"==typeof e[t]&&null!==e[t]&&s.push(Object.assign(Object.assign({},i[a]),{colSpan:void 0,data:e[t],label:e[t][i[a].key],rowSpan:void 0}));r.push(s)}if(0===e.length){let e=0,l=0;Array.isArray(t.horizontal)&&t.horizontal.length>0&&t.horizontal[0].forEach((t=>{e+=t.colSpan||1})),Array.isArray(t.vertical)&&t.vertical.length>0&&(e-=t.vertical.length,t.vertical[0].forEach((e=>{l+=e.rowSpan||1})));const a={colSpan:e,label:translate("kol-no-entries"),render:void 0,rowSpan:Math.max(l,1)};0===r.length?r.push([a]):r[0].push(a)}return r}handleSelectionChangeCallbackAndEvent(e,t){var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](e,t),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,t)}componentWillLoad(){this.validateData(this._data),this.validateDataFoot(this._dataFoot),this.validateHeaderCells(this._headerCells),this.validateLabel(this._label),this.validateMinWidth(this._minWidth),this.validateOn(this._on),this.validateSelection(this._selection)}renderSelectionCell(e,t){var l,a,i;const o=this.state._selection;if(!o)return"";const s=this.getSelectionKeyPropertyName(),n=null===(l=e[0])||void 0===l?void 0:l.data;if(!n)return"";const r=n[s],c=o.multiple||void 0===o.multiple,d=null===(a=null==o?void 0:o.selectedKeys)||void 0===a?void 0:a.includes(r),b=null===(i=null==o?void 0:o.disabledKeys)||void 0===i?void 0:i.includes(r),v=o.label(n),_={name:"selection",checked:d,disabled:b,id:r,"aria-label":v};return h("td",{key:`tbody-${t}-selection`,class:"kol-table__cell kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--checked":d})},c?h("label",{class:clsx("kol-table__selection-label",{"kol-table__selection-label--disabled":b})},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(d?"codicon-check":""),_label:""}),h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),ref:e=>e&&this.checkboxRefs.push(e)},_,{type:"checkbox",onInput:e=>{var t,l;const a=d?null===(l=null==o?void 0:o.selectedKeys)||void 0===l?void 0:l.filter((e=>e!==r)):[...null!==(t=null==o?void 0:o.selectedKeys)&&void 0!==t?t:[],r];this.handleSelectionChangeCallbackAndEvent(e,null!=a?a:[])}}))):h("label",{class:"kol-table__selection-label"},h("input",Object.assign({class:clsx("kol-table__selection-input kol-table__selection-input--radio")},_,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,r)}}))),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${r}-label`,_label:v})))}getSelectionKeyPropertyName(){var e,t;return null!==(t=null===(e=this.state._selection)||void 0===e?void 0:e.keyPropertyName)&&void 0!==t?t:"id"}getDataWithSelectionEnabled(){const e=this.getSelectionKeyPropertyName();return this.state._data.filter((t=>{var l,a;return!(null===(a=null===(l=this.state._selection)||void 0===l?void 0:l.disabledKeys)||void 0===a?void 0:a.includes(t[e]))}))}getSelectedKeysWithoutDisabledKeys(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,l;return!(null===(l=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===l?void 0:l.includes(e))}))}getSelectedKeysWithDisabledKeysOnly(){var e,t;return null===(t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys)||void 0===t?void 0:t.filter((e=>{var t,l;return null===(l=null===(t=this.state._selection)||void 0===t?void 0:t.disabledKeys)||void 0===l?void 0:l.includes(e)}))}getRevertedSelection(e){var t;const l=this.getSelectionKeyPropertyName(),a=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&a.push(...this.getDataWithSelectionEnabled().map((e=>null==e?void 0:e[l]))),a}renderHeadingSelectionCell(){var e,t;const l=this.state._selection;if(!l||!l.multiple&&void 0!==l.multiple)return h("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});const a=null!==(t=null===(e=this.getSelectedKeysWithoutDisabledKeys())||void 0===e?void 0:e.length)&&void 0!==t?t:0,i=a===this.getDataWithSelectionEnabled().length,o=0!==a&&!i;let s="kol-table-selection-indeterminate";i&&!o&&(s="kol-table-selection-none"),0===a&&(s="kol-table-selection-all");const n=translate(s);return h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--indeterminate":o,"kol-table__selection--checked":i})},h("label",{class:"kol-table__selection-label"},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(o?"codicon-remove":i?"codicon-check":""),_label:""}),h("input",{class:clsx("kol-table__selection-input kol-table__selection-input--checkbox"),"data-testid":"selection-checkbox-all",ref:e=>e&&this.checkboxRefs.push(e),name:"selection",checked:i&&!o,indeterminate:o,"aria-label":n,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!i))}})),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${s}-label`,_label:n})))}renderHeaderTdCell(){return h(Fragment,null,Array.isArray(this.state._headerCells.horizontal)&&this.state._headerCells.horizontal.length>0&&Array.isArray(this.state._headerCells.vertical)&&this.state._headerCells.vertical.length>0&&Array.isArray(this.state._headerCells.horizontal)&&h("td",{"aria-hidden":"true",colSpan:this.state._headerCells.vertical.length,rowSpan:this.state._headerCells.horizontal.length}))}renderHeadingCell(e,t,l,a){let i,o="codicon codicon-fold";if(e.sortDirection)switch(e.sortDirection){case"ASC":o="codicon codicon-chevron-up",i="ascending";break;case"DESC":o="codicon codicon-chevron-down",i="descending"}const s=a?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return h("th",{key:`${t}-${l}-${e.label}`,class:clsx("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${i}`]:i}),scope:s,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:e.width},"aria-sort":i,"data-sort":`sort-${e.sortDirection}`},e.sortDirection?h(KolButtonWcTag,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:o},_label:e.label,_on:{onClick:t=>{var l;"function"==typeof(null===(l=this.state._on)||void 0===l?void 0:l.onSort)&&e.key&&e.sortDirection&&this.state._on.onSort(t,{key:e.key,currentSortDirection:e.sortDirection}),this.host&&dispatchDomEvent(this.host,KolEvent.sort,{key:e.key,currentSortDirection:e.sortDirection})}}}):e.label)}renderSpacer(e,t){var l,a;const i=(null===(l=this.state._headerCells.vertical)||void 0===l?void 0:l.length)||0,o=null===(a=null==t?void 0:t[0])||void 0===a?void 0:a.reduce(((e,t)=>e+(t.colSpan||1)),0),s=this.state._selection?1:0;return h("tr",{"aria-hidden":"true",class:clsx("kol-table__spacer",`kol-table__spacer--${e}`)},h("td",{class:clsx(`kol-table__spacer-line kol-table__spacer-line--${e}`),colSpan:i+o+s}))}renderFoot(){if(!this.state._dataFoot||0===this.state._dataFoot.length)return null;const e=this.createDataField(this.state._dataFoot,this.state._headerCells,!0);return h("tfoot",{class:"kol-table__footer"},[this.renderSpacer("foot",e),e.map(((e,t)=>this.renderTableRow(e,t,!0,!0)))])}render(){const e=this.createDataField(this.state._data,this.state._headerCells);return this.checkboxRefs=[],h("div",{key:"1ac04635486fff8f0456beb99c6b96654248f9e4",ref:e=>this.tableDivElement=e,class:"kol-table",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},h("table",{key:"e4457e9e80dd358d4caffcbcc6f7990bbf36ca20",class:"kol-table__table",style:{minWidth:this.state._minWidth}},h("div",{key:"905b4322a63f51170cfcdb0b458c6b6cb129d4ad",class:"kol-table__focus-element",tabindex:this.tableDivElementHasScrollbar?"0":void 0,"aria-describedby":"caption"}," "),h("caption",{key:"4003583d910f3471e6d3d5bc585e83d3a2e0ec9a",class:"kol-table__caption",id:"caption"},this.state._label),Array.isArray(this.state._headerCells.horizontal)&&h("thead",{key:"cf7cb9cb892f50e4ba149a4c7b1c0695d23c1d62",class:"kol-table__head"},[this.state._headerCells.horizontal.map(((e,t)=>h("tr",{class:"kol-table__head-row",key:`thead-${t}`},this.state._selection&&this.renderHeadingSelectionCell(),0===t&&this.renderHeaderTdCell(),Array.isArray(e)&&e.map(((e,l)=>this.renderHeadingCell(e,t,l,!1)))))),this.renderSpacer("head",this.state._headerCells.horizontal)]),h("tbody",{key:"d83f3334e830da14222a9e44ce1682005171d755",class:"kol-table__body"},e.map(((e,t)=>this.renderTableRow(e,t,!0)))),this.renderFoot()))}get host(){return getElement(this)}static get watchers(){return{_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"]}}};export{KolTableStateless as kol_table_stateless_wc};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h}from"./index-5ec1eac2.js";import{m as KolTableStatelessWcTag}from"./component-names-545d6582.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\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__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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\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    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}",KolTableStatelessDefaultStyle0=defaultStyleCss,KolTableStateless=class{constructor(n){registerInstance(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return h(KolTableStatelessWcTag,{key:"eb182937b833b381bd5bcdaa991456dd13d1e1a7",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection})}};KolTableStateless.style={default:KolTableStatelessDefaultStyle0};export{KolTableStateless as kol_table_stateless};
+import{r as registerInstance,h}from"./index-c184720f.js";import{m as KolTableStatelessWcTag}from"./component-names-545d6582.js";const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-table {\n    display: block;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    max-width: 100%;\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    text-align: start;\n  }\n  .kol-table__focus-element {\n    font-size: 0;\n  }\n  .kol-table__focus-element:focus {\n    outline: 0 !important;\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__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    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: var(--a11y-min-size);\n    justify-content: center;\n    position: relative;\n    width: var(--a11y-min-size);\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    inset: auto;\n    position: absolute;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    appearance: none;\n    border-style: solid;\n    cursor: pointer;\n    margin: 0;\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    position: relative;\n    display: flex;\n    height: calc(var(--a11y-min-size) / 2);\n    width: calc(var(--a11y-min-size) / 2);\n    align-items: center;\n    justify-content: center;\n    background-color: rgb(255, 255, 255);\n    border-width: 2px;\n    line-height: 1.5;\n    transition: all 0.5s ease 0s;\n  }\n  .kol-table__selection-input--radio {\n    display: flex;\n    border-width: 2px;\n    border-radius: 100%;\n    height: 1.5em;\n    min-height: 1.5em;\n    min-width: 1.5em;\n    padding: 0;\n    width: 1.5em;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    margin: auto;\n    height: 0.75em;\n    width: 0.75em;\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}",KolTableStatelessDefaultStyle0=defaultStyleCss,KolTableStateless=class{constructor(n){registerInstance(this,n),this._data=void 0,this._dataFoot=void 0,this._headerCells=void 0,this._label=void 0,this._minWidth=void 0,this._on=void 0,this._selection=void 0}render(){return h(KolTableStatelessWcTag,{key:"eb182937b833b381bd5bcdaa991456dd13d1e1a7",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection})}};KolTableStateless.style={default:KolTableStatelessDefaultStyle0};export{KolTableStateless as kol_table_stateless};

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-5ec1eac2.js";import{t as translate}from"./i18n-005310a7.js";import{a as KolButtonWcTag}from"./component-names-545d6582.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-5adf6b62.js";import{c as clsx}from"./clsx-09a06a12.js";import{w as watchValidator,j as devHint,f as featureHint,s as setState,k as watchNumber,g as watchJsonArrayString,h as uiUxHintMillerscheZahl,t as koliBriQuerySelector}from"./prop.validators-64749272.js";import{v as validateAlign}from"./align-60c95351.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import{L as Log}from"./dev.utils-fab45cbc.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./index-da3e0c00.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(e,t)=>{watchValidator(e,"_behavior",(e=>"string"==typeof e&&tabBehaviorPropTypeOptions.includes(e)),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),t)};var KeyboardKey;!function(e){e.ArrowDown="ArrowDown",e.ArrowLeft="ArrowLeft",e.ArrowRight="ArrowRight",e.ArrowUp="ArrowUp",e.Enter="Enter",e.Space=" "}(KeyboardKey||(KeyboardKey={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\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__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(e){registerInstance(this,e),this.onCreateLabel=`${translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(e,t,n=1)=>{const a=t+n;return a<e.length?e[a]._disabled?this.nextPossibleTabIndex(e,t,n+1):a:t},this.prevPossibleTabIndex=(e,t,n=1)=>{const a=t-n;return a>=0?e[a]._disabled?this.prevPossibleTabIndex(e,t,n+1):a:t},this.onKeyDown=e=>{switch(e.key){case KeyboardKey.ArrowRight:this.goToNextTab(e);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(e);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(e)}},this.onClickSelect=(e,t)=>{this.selectNextTabEvent(e,t)},this.onMouseDown=e=>{e.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=e=>{this.tabPanelHost=e},this.selectNextNotDisabledTab=(e,t,n=!0,a)=>{if(e>t.length-1&&(e=t.length-1),e<0&&(e=0),Array.isArray(t)&&t[e]&&t[e]._disabled){if(!0===n){if(e<t.length-1)return this.selectNextNotDisabledTab(e+1,t,!0,a||e);e=a||e,n=!1}if(!1===n){if(e>0)return this.selectNextNotDisabledTab(e-1,t,!1,a||e);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return e},this.syncSelectedAndTabs=(e,t,n,a)=>{let o,i;o="_selected"===a?e:this.state._selected,i="_tabs"===a?e:this.state._tabs,i.length>0&&t.set("_selected",this.selectNextNotDisabledTab(o,i))},this.refreshTabPanels=()=>{var e,t,n,a;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<(null===(e=this.state._tabs)||void 0===e?void 0:e.length);o++){const e=document.createElement("div");e.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),e.setAttribute("id",`tabpanel-${o}`),e.setAttribute("role","tabpanel"),e.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),e.appendChild(i),null===(t=this.tabPanelHost)||void 0===t||t.appendChild(e),"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(((e,t)=>{t===this.state._selected?e.removeAttribute("hidden"):e.setAttribute("hidden","")}))},this.onCreate=e=>{var t,n;e.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(e))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){"number"==typeof this.currentFocusIndex&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var a,o;if(this.currentFocusIndex=t,this.focusTabById(t),"activateCompletely"===n){this._selected=t;null===(o=null===(a=this.state._tabs[t]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,e,t),this.onSelect(e,t)}}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(((e,t)=>h(KolButtonWcTag,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t}))),this.showCreateTab&&h(KolButtonWcTag,{class:"kol-tabs_button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return h("div",{key:"9ff9dfe0a05d073e21d4272052505b74386dbee9",ref:e=>{this.tabPanelsElement=e},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"be475a72b9b037fb1ad6c6b78d05495572a917fb",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){validateAlign(this,e)}validateBehavior(e){validateTabBehavior(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof e.onCreate&&"object"!=typeof e.onCreate||("object"==typeof e.onCreate?("string"==typeof e.onCreate.label&&e.onCreate.label.length>0?this.onCreateLabel=e.onCreate.label:Log.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof e.onCreate.callback?t.onCreate=e.onCreate.callback:Log.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):t.onCreate=e.onCreate,this.showCreateTab="function"==typeof t.onCreate),"function"==typeof e.onSelect&&(t.onSelect=e.onSelect),setState(this,"_on",t)}}validateSelected(e){watchNumber(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){watchJsonArrayString(this,"_tabs",(e=>"object"==typeof e&&null!==e&&"string"==typeof e._label&&e._label.length>0),e,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)}componentDidRender(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}onSelect(e,t){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,e,t),this.host&&dispatchDomEvent(this.host,KolEvent.select,t),this.focusTabById(t)}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:KolTabsDefaultStyle0};export{KolTabs as kol_tabs};
+import{r as registerInstance,h,g as getElement}from"./index-c184720f.js";import{t as translate}from"./i18n-005310a7.js";import{a as KolButtonWcTag}from"./component-names-545d6582.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-5adf6b62.js";import{c as clsx}from"./clsx-09a06a12.js";import{w as watchValidator,j as devHint,f as featureHint,s as setState,k as watchNumber,g as watchJsonArrayString,h as uiUxHintMillerscheZahl,t as koliBriQuerySelector}from"./prop.validators-64749272.js";import{v as validateAlign}from"./align-60c95351.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import{L as Log}from"./dev.utils-fab45cbc.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./index-da3e0c00.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(e,t)=>{watchValidator(e,"_behavior",(e=>"string"==typeof e&&tabBehaviorPropTypeOptions.includes(e)),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),t)};var KeyboardKey;!function(e){e.ArrowDown="ArrowDown",e.ArrowLeft="ArrowLeft",e.ArrowRight="ArrowRight",e.ArrowUp="ArrowUp",e.Enter="Enter",e.Space=" "}(KeyboardKey||(KeyboardKey={}));const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: var(--display);\n    grid-template-rows: var(--grid-template-rows);\n    grid-template-columns: var(--grid-template-columns);\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__content {\n    overflow: auto;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    flex-wrap: wrap;\n    flex-direction: var(--button-group-flex-direction);\n    order: var(--button-group-order);\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    border-bottom-style: solid;\n    display: block;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",KolTabsDefaultStyle0=defaultStyleCss,KolTabs=class{constructor(e){registerInstance(this,e),this.onCreateLabel=`${translate("kol-new")} …`,this.showCreateTab=!1,this.nextPossibleTabIndex=(e,t,n=1)=>{const a=t+n;return a<e.length?e[a]._disabled?this.nextPossibleTabIndex(e,t,n+1):a:t},this.prevPossibleTabIndex=(e,t,n=1)=>{const a=t-n;return a>=0?e[a]._disabled?this.prevPossibleTabIndex(e,t,n+1):a:t},this.onKeyDown=e=>{switch(e.key){case KeyboardKey.ArrowRight:this.goToNextTab(e);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(e);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(e)}},this.onClickSelect=(e,t)=>{this.selectNextTabEvent(e,t)},this.onMouseDown=e=>{e.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=e=>{this.tabPanelHost=e},this.selectNextNotDisabledTab=(e,t,n=!0,a)=>{if(e>t.length-1&&(e=t.length-1),e<0&&(e=0),Array.isArray(t)&&t[e]&&t[e]._disabled){if(!0===n){if(e<t.length-1)return this.selectNextNotDisabledTab(e+1,t,!0,a||e);e=a||e,n=!1}if(!1===n){if(e>0)return this.selectNextNotDisabledTab(e-1,t,!1,a||e);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return e},this.syncSelectedAndTabs=(e,t,n,a)=>{let o,i;o="_selected"===a?e:this.state._selected,i="_tabs"===a?e:this.state._tabs,i.length>0&&t.set("_selected",this.selectNextNotDisabledTab(o,i))},this.refreshTabPanels=()=>{var e,t,n,a;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let o=0;o<(null===(e=this.state._tabs)||void 0===e?void 0:e.length);o++){const e=document.createElement("div");e.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${o}`),e.setAttribute("id",`tabpanel-${o}`),e.setAttribute("role","tabpanel"),e.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${o}`),e.appendChild(i),null===(t=this.tabPanelHost)||void 0===t||t.appendChild(e),"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(((e,t)=>{t===this.state._selected?e.removeAttribute("hidden"):e.setAttribute("hidden","")}))},this.onCreate=e=>{var t,n;e.preventDefault(),"function"==typeof(null===(t=this.state._on)||void 0===t?void 0:t.onCreate)&&(null===(n=this.state._on)||void 0===n||n.onCreate(e))},this.onBlur=()=>{this.currentFocusIndex=void 0},this._align="top",this._behavior=void 0,this._label=void 0,this._on=void 0,this._selected=0,this._tabs=void 0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(e){const t=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}goToPreviousTab(e){const t=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(e,t,this.getKeyboardTabChangeMode())}activateFocusedTab(e){"number"==typeof this.currentFocusIndex&&this.onSelect(e,this.currentFocusIndex)}selectNextTabEvent(e,t,n="activateCompletely"){var a,o;if(this.currentFocusIndex=t,this.focusTabById(t),"activateCompletely"===n){this._selected=t;null===(o=null===(a=this.state._tabs[t]._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,e,t),this.onSelect(e,t)}}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(((e,t)=>h(KolButtonWcTag,{_disabled:e._disabled,_icons:e._icons,_hideLabel:e._hideLabel,_label:e._label,_on:this.callbacks,_tabIndex:this.state._selected===t?0:-1,_tooltipAlign:e._tooltipAlign,_variant:this.state._selected===t?"custom":void 0,_customClass:this.state._selected===t?"selected":void 0,_ariaControls:`tabpanel-${t}`,_ariaSelected:this.state._selected===t,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${t}`,_role:"tab",_value:t}))),this.showCreateTab&&h(KolButtonWcTag,{class:"kol-tabs_button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate}}))}render(){return h("div",{key:"9ff9dfe0a05d073e21d4272052505b74386dbee9",ref:e=>{this.tabPanelsElement=e},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"be475a72b9b037fb1ad6c6b78d05495572a917fb",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(e){validateAlign(this,e)}validateBehavior(e){validateTabBehavior(this,e)}validateLabel(e){validateLabel(this,e,{required:!0})}validateOn(e){if("object"==typeof e&&null!==e){featureHint("[KolTabs] Prüfen, wie man auch einen EventCallback einzeln ändern kann.");const t={};"function"!=typeof e.onCreate&&"object"!=typeof e.onCreate||("object"==typeof e.onCreate?("string"==typeof e.onCreate.label&&e.onCreate.label.length>0?this.onCreateLabel=e.onCreate.label:Log.debug("[KolTabs] The label text for New in {\n  onCreate: {\n    label: string (!),\n    callback: Function\n  }\n} is not set correctly."),"function"==typeof e.onCreate.callback?t.onCreate=e.onCreate.callback:Log.debug("[KolTabs] The onCreate callback function for New in {\n  onCreate: {\n    label: string,\n    callback: Function (!)\n  }\n} is not set correctly.")):t.onCreate=e.onCreate,this.showCreateTab="function"==typeof t.onCreate),"function"==typeof e.onSelect&&(t.onSelect=e.onSelect),setState(this,"_on",t)}}validateSelected(e){watchNumber(this,"_selected",e,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(e){watchJsonArrayString(this,"_tabs",(e=>"object"==typeof e&&null!==e&&"string"==typeof e._label&&e._label.length>0),e,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)}componentDidRender(){this.refreshTabPanels()}focusTabById(e){if(this.tabPanelsElement){const t=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${e}`,this.tabPanelsElement);null==t||t.focus()}}onSelect(e,t){var n,a;null===(a=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===a||a.call(n,e,t),this.host&&dispatchDomEvent(this.host,KolEvent.select,t),this.focusTabById(t)}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:KolTabsDefaultStyle0};export{KolTabs as kol_tabs};

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-5ec1eac2.js";import{c as clsx}from"./clsx-09a06a12.js";import{n as nonce}from"./dev.utils-930d9493.js";import{I as InputIconController,K as KolInputContainerFc}from"./controller-icon-4031c3ea.js";import{v as validateHasCounter}from"./has-counter-23a7a06b.js";import{k as watchNumber,i as watchString,b as watchBoolean,w as watchValidator,s as setState}from"./prop.validators-64749272.js";import{v as validateRows}from"./rows-3e585d8f.js";import{v as validateSpellCheck}from"./spell-check-cb87a985.js";import{_ as __rest}from"./tslib.es6-1173d062.js";import{f as getDefaultProps,c as checkHasMsg,g as getRenderStates,a as convertMsgToInternMsg,K as KolFormFieldStateWrapperFc}from"./getRenderStates-8a9e5504.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./InternalUnderlinedBadgeText-f50a35ad.js";import"./isObject-ffcbbb76.js";import"./component-names-545d6582.js";import"./Icon-461f168a.js";import"./icons-458eee6a.js";import"./common-54bf85ba.js";import"./index-da3e0c00.js";import"./events-5adf6b62.js";import"./associated.controller-5bee50ee.js";import"./access-and-short-key-e094398d.js";import"./tooltip-align-c6eb75ce.js";import"./align-60c95351.js";import"./hide-label-8c202307.js";import"./label-e8ec0e3a.js";import"./Alert-0f69eea1.js";import"./i18n-005310a7.js";import"./i18n-c120df5c.js";import"./Heading-a618bdb4.js";const cssResizeOptions=["vertical","none"],TextAreaFc=e=>{const{class:t,msg:n,touched:a,readonly:i,disabled:o,required:l,ariaDescribedBy:s,hideLabel:r,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),u=checkHasMsg(n,a),p={"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"}`]:u},m=Object.assign(Object.assign({class:clsx("kol-textarea",p,t),required:l,disabled:o,readonly:i},getDefaultProps({ariaDescribedBy:s,hideLabel:r,label:d})),c);return h("textarea",Object.assign({},m))},KolTextAreaFc=TextAreaFc;function getTextAreaProps(e){const{ariaDescribedBy:t}=getRenderStates(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,maxLength:e._maxLength,touched:e._touched,msg:convertMsgToInternMsg(e._msg)}}const TextAreaStateWrapper=e=>{var{state:t}=e,n=__rest(e,["state"]);return h(KolTextAreaFc,Object.assign({},getTextAreaProps(t),n))},KolTextAreaStateWrapperFc=TextAreaStateWrapper;class TextareaController extends InputIconController{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){watchString(this.component,"_placeholder",e)}validateReadOnly(e){watchBoolean(this.component,"_readOnly",e)}validateResize(e){watchValidator(this.component,"_resize",(e=>"string"==typeof e&&cssResizeOptions.includes(e)),new Set(`String {${cssResizeOptions.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){watchBoolean(this.component,"_required",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.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\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}\n@layer kol-component {\n  .kol-textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",KolTextareaDefaultStyle0=defaultStyleCss,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.state._hasCounter}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize}},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(KolFormFieldStateWrapperFc,Object.assign({key:"e3a13e495ab24faabac001d83e45f1be38574755"},this.getFormFieldProps()),h(KolInputContainerFc,{key:"fed37c3c3481e90d9c361722b9b063537a7b61ae",state:this.state},h(KolTextAreaStateWrapperFc,Object.assign({key:"02f52e10e7f1cc372b01efa467170e5c87643975"},this.getTextAreaProps()))))}constructor(e){registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{if(this.textareaRef instanceof HTMLTextAreaElement){const t=this.textareaRef.value;setState(this,"_currentLength",t.length),this._value=t,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e)}},this._accessKey=void 0,this._adjustHeight=!1,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._spellCheck=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,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)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(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"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_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:KolTextareaDefaultStyle0};export{KolTextarea as kol_textarea};
+import{h,r as registerInstance,g as getElement}from"./index-c184720f.js";import{c as clsx}from"./clsx-09a06a12.js";import{n as nonce}from"./dev.utils-f00e16fa.js";import{I as InputIconController,K as KolInputContainerFc}from"./controller-icon-739e3e18.js";import{v as validateHasCounter}from"./has-counter-23a7a06b.js";import{k as watchNumber,i as watchString,b as watchBoolean,w as watchValidator,s as setState}from"./prop.validators-64749272.js";import{v as validateRows}from"./rows-3e585d8f.js";import{v as validateSpellCheck}from"./spell-check-cb87a985.js";import{_ as __rest}from"./tslib.es6-1173d062.js";import{f as getDefaultProps,c as checkHasMsg,g as getRenderStates,a as convertMsgToInternMsg,K as KolFormFieldStateWrapperFc}from"./getRenderStates-4a74e7c9.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./InternalUnderlinedBadgeText-5aa0e9c0.js";import"./isObject-ffcbbb76.js";import"./component-names-545d6582.js";import"./Icon-1d60408f.js";import"./icons-458eee6a.js";import"./common-54bf85ba.js";import"./index-da3e0c00.js";import"./events-5adf6b62.js";import"./associated.controller-5bee50ee.js";import"./access-and-short-key-e094398d.js";import"./tooltip-align-c6eb75ce.js";import"./align-60c95351.js";import"./hide-label-8c202307.js";import"./label-e8ec0e3a.js";import"./Alert-436d48e1.js";import"./i18n-005310a7.js";import"./i18n-c120df5c.js";import"./Heading-631d01a3.js";const cssResizeOptions=["vertical","none"],TextAreaFc=e=>{const{class:t,msg:n,touched:a,readonly:i,disabled:o,required:l,ariaDescribedBy:s,hideLabel:r,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),u=checkHasMsg(n,a),p={"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"}`]:u},m=Object.assign(Object.assign({class:clsx("kol-textarea",p,t),required:l,disabled:o,readonly:i},getDefaultProps({ariaDescribedBy:s,hideLabel:r,label:d})),c);return h("textarea",Object.assign({},m))},KolTextAreaFc=TextAreaFc;function getTextAreaProps(e){const{ariaDescribedBy:t}=getRenderStates(e);return{id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,ariaDescribedBy:t,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,maxLength:e._maxLength,touched:e._touched,msg:convertMsgToInternMsg(e._msg)}}const TextAreaStateWrapper=e=>{var{state:t}=e,n=__rest(e,["state"]);return h(KolTextAreaFc,Object.assign({},getTextAreaProps(t),n))},KolTextAreaStateWrapperFc=TextAreaStateWrapper;class TextareaController extends InputIconController{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&this.component._value.length>0&&(this.component.state._currentLength=this.component._value.length)},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validateMaxLength(e){watchNumber(this.component,"_maxLength",e,{hooks:{afterPatch:this.afterSyncCharCounter},min:0})}validatePlaceholder(e){watchString(this.component,"_placeholder",e)}validateReadOnly(e){watchBoolean(this.component,"_readOnly",e)}validateResize(e){watchValidator(this.component,"_resize",(e=>"string"==typeof e&&cssResizeOptions.includes(e)),new Set(`String {${cssResizeOptions.join(", ")}`),e,{defaultValue:"vertical"})}validateRequired(e){watchBoolean(this.component,"_required",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.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateResize(this.component._resize),this.validateRequired(this.component._required),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  .kol-form-field {\n    display: grid;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\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}\n@layer kol-component {\n  .kol-input-container {\n    align-items: center;\n    background-color: white;\n    cursor: pointer;\n    display: grid;\n    grid-template-columns: 1fr;\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n    width: 100%;\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}\n@layer kol-component {\n  .kol-textarea {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}",KolTextareaDefaultStyle0=defaultStyleCss,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.state._hasCounter}),tooltipAlign:this._tooltipAlign,onClick:()=>{var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.focus()},alert:this.showAsAlert()}}getTextAreaProps(){return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize}},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(KolFormFieldStateWrapperFc,Object.assign({key:"e3a13e495ab24faabac001d83e45f1be38574755"},this.getFormFieldProps()),h(KolInputContainerFc,{key:"fed37c3c3481e90d9c361722b9b063537a7b61ae",state:this.state},h(KolTextAreaStateWrapperFc,Object.assign({key:"02f52e10e7f1cc372b01efa467170e5c87643975"},this.getTextAreaProps()))))}constructor(e){registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this.onInput=e=>{if(this.textareaRef instanceof HTMLTextAreaElement){const t=this.textareaRef.value;setState(this,"_currentLength",t.length),this._value=t,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e)}},this._accessKey=void 0,this._adjustHeight=!1,this._disabled=!1,this._hasCounter=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._icons=void 0,this._id=void 0,this._label=void 0,this._maxLength=void 0,this._msg=void 0,this._name=void 0,this._on=void 0,this._placeholder=void 0,this._readOnly=!1,this._resize="vertical",this._required=!1,this._rows=void 0,this._shortKey=void 0,this._spellCheck=void 0,this._syncValueBySelector=void 0,this._tooltipAlign="top",this._touched=!1,this._value=void 0,this.state={_adjustHeight:!1,_currentLength:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,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)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(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"],_hasCounter:["validateHasCounter"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_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:KolTextareaDefaultStyle0};export{KolTextarea as kol_textarea};

package/dist/esm/kol-toast-container.entry.js

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{h,r as registerInstance,H as Host}from"./index-5ec1eac2.js";import{t as translate}from"./i18n-005310a7.js";import{n as nonce}from"./dev.utils-930d9493.js";import{i as KolButtonTag}from"./component-names-545d6582.js";import{_ as __rest}from"./tslib.es6-1173d062.js";import{c as clsx}from"./clsx-09a06a12.js";import{K as KolAlertFc}from"./Alert-0f69eea1.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./Heading-a618bdb4.js";const ToastItemFc=t=>{var{status:n,toast:e,onClose:o}=t,s=__rest(t,["status","toast","onClose"]);const{type:a,label:i,description:l,variant:r}=e;return h("div",{class:clsx("kol-toast-item",`kol-toast-item--${n}`)},h(KolAlertFc,{class:"kol-toast-item__alert",alert:!0,label:i,level:0,hasCloser:!0,type:a,variant:r||"card",onCloserClick:o},h("div",Object.assign({},s),l)))},KolToastItemFc=ToastItemFc,defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",KolToastContainerDefaultStyle0=defaultStyleCss,TRANSITION_TIMEOUT=300,KolToastContainer=class{constructor(t){registerInstance(this,t),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const n={toast:t,status:"adding",id:`toast-${nonce()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),300),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((n=>(n.id===t.id&&(n.status="removing"),n)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>n.id!==t.id))})}),300)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>t.every((t=>t.id!==n.id))))})}),300)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return h(Host,{key:"55fa134e2ab24c27732607e6d7eabe4037496ec9",class:"kol-toast-container"},this.state._toastStates.length>1&&h(KolButtonTag,{key:"e0ca6068b37ced7ef9fa67ac1d16fd1605b7e0dd",_label:translate("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>h(KolToastItemFc,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status}))))}};KolToastContainer.style={default:KolToastContainerDefaultStyle0};export{KolToastContainer as kol_toast_container};
+import{h,r as registerInstance,H as Host}from"./index-c184720f.js";import{t as translate}from"./i18n-005310a7.js";import{n as nonce}from"./dev.utils-f00e16fa.js";import{i as KolButtonTag}from"./component-names-545d6582.js";import{_ as __rest}from"./tslib.es6-1173d062.js";import{c as clsx}from"./clsx-09a06a12.js";import{K as KolAlertFc}from"./Alert-436d48e1.js";import"./i18n-c120df5c.js";import"./reuse-f46e7e35.js";import"./dev.utils-fab45cbc.js";import"./Heading-631d01a3.js";const ToastItemFc=t=>{var{status:n,toast:e,onClose:o}=t,s=__rest(t,["status","toast","onClose"]);const{type:a,label:i,description:l,variant:r}=e;return h("div",{class:clsx("kol-toast-item",`kol-toast-item--${n}`)},h(KolAlertFc,{class:"kol-toast-item__alert",alert:!0,label:i,level:0,hasCloser:!0,type:a,variant:r||"card",onCloserClick:o},h("div",Object.assign({},s),l)))},KolToastItemFc=ToastItemFc,defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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  :host {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    place-items: center;\n    display: flex;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__close-button {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1rem / var(--kolibri-root-font-size, 16));\n  }\n}\n@layer kol-component {\n  :host {\n    display: flex;\n    flex-direction: column;\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    position: fixed;\n    z-index: 200;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",KolToastContainerDefaultStyle0=defaultStyleCss,TRANSITION_TIMEOUT=300,KolToastContainer=class{constructor(t){registerInstance(this,t),this.knownRenderFunctions=new Set,this.state={_toastStates:[]}}async enqueue(t){const n={toast:t,status:"adding",id:`toast-${nonce()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[n,...this.state._toastStates]}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((t=>t.id===n.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t))})}),300),()=>{this.handleClose(n)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map((n=>(n.id===t.id&&(n.status="removing"),n)))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>n.id!==t.id))})}),300)}async closeAll(t=!1){if(t)this.state=Object.assign(Object.assign({},this.state),{_toastStates:[]});else{const t=[...this.state._toastStates];this.state=Object.assign(Object.assign({},this.state),{_toastStates:t.map((t=>Object.assign(Object.assign({},t),{status:"removing"})))}),setTimeout((()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter((n=>t.every((t=>t.id!==n.id))))})}),300)}}handleToastRef(t,n){n&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(n,{close:()=>this.handleClose(t)}))}render(){return h(Host,{key:"55fa134e2ab24c27732607e6d7eabe4037496ec9",class:"kol-toast-container"},this.state._toastStates.length>1&&h(KolButtonTag,{key:"e0ca6068b37ced7ef9fa67ac1d16fd1605b7e0dd",_label:translate("kol-toast-close-all"),class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map((t=>h(KolToastItemFc,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status}))))}};KolToastContainer.style={default:KolToastContainerDefaultStyle0};export{KolToastContainer as kol_toast_container};

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

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-import{r as registerInstance,h,g as getElement}from"./index-5ec1eac2.js";import{f as KolLinkWcTag,a as KolButtonWcTag}from"./component-names-545d6582.js";import{q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,s as setState}from"./prop.validators-64749272.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const validateToolbarItems=(n,e)=>{emptyStringByArrayHandler(e,(()=>{objectObjectHandler(e,(()=>{void 0===e&&(e=[]);try{e=parseJson(e)}catch(n){}Array.isArray(e)&&e.every((n=>"object"==typeof n&&null!==n))&&setState(n,"_items",e)}))}))},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-toolbar {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: flex;\n    align-items: center;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolToolbarDefaultStyle0=defaultStyleCss,KolToolbar=class{constructor(n){registerInstance(this,n),this.indexToElement=new Map,this.renderItem=(n,e)=>{const t=e!==this.currentIndex||(null==n?void 0:n._disabled)?-1:0,o={key:e,class:"button normal kol-toolbar__item",_tabIndex:t},i=n=>{n&&this.indexToElement.set(e,n)};return h("_href"in n?KolLinkWcTag:KolButtonWcTag,Object.assign({},n,o,{ref:i}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0}render(){return h("div",{key:"aab24777402d87ca0c539b44af6650f34279f3ea",class:"kol-toolbar",role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){validateLabel(this,n)}validateItems(n){validateToolbarItems(this,n)}getCurrentToolbarItem(n){return"number"==typeof n?this.indexToElement.get(n):void 0}setFirstEnabledItemIndex(){var n;this.currentIndex=null===(n=this.state._items)||void 0===n?void 0:n.findIndex((n=>!n._disabled))}handleKeyDown(n){var e,t;if(!("ArrowRight"===n.code||"ArrowLeft"===n.code))return;n.preventDefault();const o=(null===(e=this._items)||void 0===e?void 0:e.length)-1,i=this.currentIndex;let a=0;switch(n.code){case"ArrowLeft":a=i!==a?i-1:o;break;case"ArrowRight":o!==i&&(a=i+1)}i!==a&&(this.currentIndex=a,null===(t=this.getCurrentToolbarItem(a))||void 0===t||t.kolFocus())}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.setFirstEnabledItemIndex()}get host(){return getElement(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"]}}};KolToolbar.style={default:KolToolbarDefaultStyle0};export{KolToolbar as kol_toolbar};
+import{r as registerInstance,h,g as getElement}from"./index-c184720f.js";import{f as KolLinkWcTag,a as KolButtonWcTag}from"./component-names-545d6582.js";import{q as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,s as setState}from"./prop.validators-64749272.js";import{v as validateLabel}from"./label-e8ec0e3a.js";import"./index-da3e0c00.js";import"./dev.utils-fab45cbc.js";const validateToolbarItems=(n,e)=>{emptyStringByArrayHandler(e,(()=>{objectObjectHandler(e,(()=>{void 0===e&&(e=[]);try{e=parseJson(e)}catch(n){}Array.isArray(e)&&e.every((n=>"object"==typeof n&&null!==n))&&setState(n,"_items",e)}))}))},defaultStyleCss="/*\n * This file contains all rules for accessibility.\n */\n@layer kol-global {\n  :host {\n    /*\n     * Minimum size of interactive elements.\n     */\n    --a11y-min-size: calc(44rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without a background and font color whose contrast ratio has\n     * not been checked. By initially setting the background color to white and the font color\n     * to black, the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    background-color: white;\n    color: black;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /*\n   * All interactive elements should have a minimum size of rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  [role=button],\n  button:not([role=link]) {\n    min-height: var(--a11y-min-size);\n    min-width: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n  }\n}\n/**\n * Sometimes we need the semantic element for accessibility reasons,\n * but we don't want to show it.\n *\n * - https://www.a11yproject.com/posts/how-to-hide-content/\n */\n.visually-hidden {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: calc(1rem / var(--kolibri-root-font-size, 16));\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: calc(1rem / var(--kolibri-root-font-size, 16));\n}\n\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    border: none;\n    margin: 0;\n    padding: 0;\n    width: 100%; /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .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    cursor: not-allowed;\n    opacity: 0.5;\n    outline: none;\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    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    animation-duration: 0.25s;\n    animation-iteration-count: 1;\n    animation-name: fadeInOpacity;\n    animation-timing-function: ease-in;\n    box-sizing: border-box;\n    display: none;\n    position: fixed;\n    visibility: hidden;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    max-width: 90vw;\n    max-height: 90vh;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width);\n  }\n  .kol-tooltip__arrow {\n    background-color: #fff;\n    color: #000;\n    height: calc(10rem / var(--kolibri-root-font-size, 16));\n    position: absolute;\n    transform: rotate(45deg);\n    width: calc(10rem / var(--kolibri-root-font-size, 16));\n    z-index: 999;\n  }\n  .kol-tooltip__content {\n    background-color: #fff;\n    color: #000;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes fadeInOpacity {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-toolbar {\n    font-size: calc(16rem / var(--kolibri-root-font-size, 16));\n    display: flex;\n    align-items: center;\n    gap: calc(16rem / var(--kolibri-root-font-size, 16));\n    flex-wrap: wrap;\n  }\n  .kol-toolbar:focus-within {\n    outline: 1px solid;\n    outline-offset: 2px;\n  }\n}",KolToolbarDefaultStyle0=defaultStyleCss,KolToolbar=class{constructor(n){registerInstance(this,n),this.indexToElement=new Map,this.renderItem=(n,e)=>{const t=e!==this.currentIndex||(null==n?void 0:n._disabled)?-1:0,o={key:e,class:"button normal kol-toolbar__item",_tabIndex:t},i=n=>{n&&this.indexToElement.set(e,n)};return h("_href"in n?KolLinkWcTag:KolButtonWcTag,Object.assign({},n,o,{ref:i}))},this.state={_label:"",_items:[]},this.currentIndex=0,this._label=void 0,this._items=void 0}render(){return h("div",{key:"aab24777402d87ca0c539b44af6650f34279f3ea",class:"kol-toolbar",role:"toolbar","aria-label":this.state._label},this.state._items.map(this.renderItem))}validateLabel(n){validateLabel(this,n)}validateItems(n){validateToolbarItems(this,n)}getCurrentToolbarItem(n){return"number"==typeof n?this.indexToElement.get(n):void 0}setFirstEnabledItemIndex(){var n;this.currentIndex=null===(n=this.state._items)||void 0===n?void 0:n.findIndex((n=>!n._disabled))}handleKeyDown(n){var e,t;if(!("ArrowRight"===n.code||"ArrowLeft"===n.code))return;n.preventDefault();const o=(null===(e=this._items)||void 0===e?void 0:e.length)-1,i=this.currentIndex;let a=0;switch(n.code){case"ArrowLeft":a=i!==a?i-1:o;break;case"ArrowRight":o!==i&&(a=i+1)}i!==a&&(this.currentIndex=a,null===(t=this.getCurrentToolbarItem(a))||void 0===t||t.kolFocus())}handleBlur(n){n.target===this.host&&this.setFirstEnabledItemIndex()}componentWillLoad(){this.validateLabel(this._label),this.validateItems(this._items),this.setFirstEnabledItemIndex()}get host(){return getElement(this)}static get watchers(){return{_label:["validateLabel"],_items:["validateItems"]}}};KolToolbar.style={default:KolToolbarDefaultStyle0};export{KolToolbar as kol_toolbar};