@public-ui/components 3.1.0-rc.0 → 3.1.0

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-BuVNvMVh.js";import{i as KolPaginationWcTag,n as KolTableStatelessWcTag}from"./component-names-C3fyby67.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{d as watchBoolean,w as watchValidator,s as setState,O as emptyStringByArrayHandler,e as watchString,p as parseJson,o as objectObjectHandler,j as devHint}from"./common-Dd0zJQbD.js";import{v as validateTableData,a as validateTableDataFoot,b as validateHasSettingsMenu,c as validateTableSelection,d as validateTableStatefulCallbacks,e as validateTableSettings}from"./table-settings-DxLvhwRE.js";import{v as validateLabel}from"./label-Dnmzb2S_.js";import{C as Callback}from"./keyboard-D6PoWr38.js";import{K as KolEvent,d as dispatchDomEvent}from"./events-9-skLO0f.js";import"./i18n-CfLoIZ8T.js";const validateAllowMultiSort=(t,n,e={})=>{watchBoolean(t,"_allowMultiSort",n,Object.assign({defaultValue:!1},e))},paginationPositionPropTypeOptions=["top","bottom","both"],validatePaginationPosition=(t,n)=>{watchValidator(t,"_paginationPosition",t=>"string"==typeof t&&paginationPositionPropTypeOptions.includes(t),new Set([`PaginationPositionPropType {${paginationPositionPropTypeOptions.join(", ")}`]),n,{defaultValue:"bottom"})},defaultStyleCss='@charset "UTF-8";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: "​";\n  }\n  .kol-button__text {\n    width: 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: "";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n  .kol-alert {\n    display: grid;\n  }\n  .kol-alert__container {\n    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-select {\n    background-color: transparent;\n    width: 100%;\n  }\n  .kol-select:not(:disabled) {\n    cursor: pointer;\n  }\n  .kol-select:not([multiple], [size]) {\n    height: 2.75em;\n  }\n  .kol-select:focus {\n    outline: none;\n  }\n  .kol-select__option:checked::before {\n    content: "✓ ";\n  }\n  .kol-select {\n    /* needed hack for vertical alignment */\n  }\n  .kol-select[multiple] option {\n    padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;\n  }\n  .kol-pagination {\n    display: grid;\n    gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-template-columns: 1fr auto;\n  }\n  .kol-pagination__navigation-list {\n    display: inline-flex;\n    margin: 0;\n    padding: 0;\n    gap: 0.5em;\n    flex-wrap: wrap;\n    align-items: center;\n    list-style: none;\n  }\n  .kol-pagination__separator:before {\n    content: "•••";\n  }\n  .kol-pagination__page-size-select .kol-form-field-select {\n    align-items: center;\n    grid-template-columns: 1fr max-content;\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}',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._paginationPosition="bottom",this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!1},this.handlePagination={onClick:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onClick)&&this.state._pagination._on.onClick(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePage:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePage)&&this.state._pagination._on.onChangePage(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:n}))},onChangePageSize:(t,n)=>{var e;"function"==typeof(null===(e=this.state._pagination._on)||void 0===e?void 0:e.onChangePageSize)&&this.state._pagination._on.onChangePageSize(t,n),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_pageSize:n})),setState(this,"_pageSize",n)}},this.onSelectionChange=t=>{t.stopPropagation()},this.updateSortedData=()=>{if(this.disableSort)return void setState(this,"_sortedData",this.state._data);const t=[...this.state._data];this.sortData.length>0&&t.sort((t,n)=>{for(let e=0;e<this.sortData.length;e++){const i=this.sortData[e],a=i.compareFn(t,n,i.direction);if(0!==a)return"ASC"===i.direction?a:-a}return 0}),setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,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)}validateHasSettingsMenu(t){validateHasSettingsMenu(this,t)}changeCellSort(t){var n;if("function"==typeof t.compareFn){this.state._allowMultiSort||t.key===(null===(n=this.sortData[0])||void 0===n?void 0:n.key)||(this.sortData=[]);const e=this.sortData.findIndex(n=>n.key===t.key);if(e>=0){const t=this.sortData[e];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(e,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 n,e,i,a;const o=t=>{let n=!1;this.sortData=[],t.forEach(t=>{if("function"==typeof t.compareFn&&!t.key)return void devHint("[KolTableStateful] A sortable column requires the 'key' property.");const e=t.key;if(!e)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:e,compareFn:t.compareFn,direction:i}),n=!0)}),n&&setTimeout(()=>this.updateSortedData())},l=t;null===(n=l.horizontal)||void 0===n||n.forEach(o),null===(e=l.vertical)||void 0===e||e.forEach(o),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(a=l.vertical)||void 0===a?void 0:a.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)}validateTableSettings(t){validateTableSettings(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.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,n,e){return"number"==typeof n&&n>0&&"number"==typeof e&&e>0?(this.pageStartSlice=n*(e-1),this.pageEndSlice=n*e>t.length?t.length:n*e,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const n=translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${translate(`kol-pagination-position-${t}`)})`}});return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",{role:"status","aria-live":"polite"},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(KolPaginationWcTag,{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:n})))}getHeaderCellSortState(t){if(!this.disableSort&&"function"==typeof t.compareFn){if(t.key){const n=this.sortData.find(n=>n.key===t.key);if(null==n?void 0:n.direction)return n.direction}return"NOS"}}handleSort({key:t}){const n=[...(this.state._headers.horizontal||[]).flat(),...(this.state._headers.vertical||[]).flat()].find(n=>n.key===t);n&&this.changeCellSort(n)}getSelectedData(t){var n;const e=this.state._selection;if(e){const i=null!==(n=e.keyPropertyName)&&void 0!==n?n:"id",a=Array.isArray(t)?t:[t],o=new Set(a.map(String)),l=this.state._sortedData.filter(t=>o.has(String(t[i])));if(!1===(null==e?void 0:e.multiple))return l[0];if(i)return l}return null}handleSelectionChange(t,n){var e;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:Array.isArray(n)?n:[n]})}));const a=this.getSelectedData(n);"function"==typeof(null===(e=this.state._on)||void 0===e?void 0:e[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,a),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,a)}async getSelection(){var t;const n=(null===(t=this.state._selection)||void 0===t?void 0:t.selectedKeys)||[];return this.getSelectedData(n)}render(){var t,n,e,i,a,o;const l=this.selectDisplayedData(this.state._sortedData,this.showPagination?null!==(n=null===(t=this.state._pagination)||void 0===t?void 0:t._pageSize)&&void 0!==n?n:10:this.state._sortedData.length,this.state._pagination._page||1),s="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,d={horizontal:null!==(i=null===(e=this.state._headers.horizontal)||void 0===e?void 0:e.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==i?i:[],vertical:null!==(o=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)}))))&&void 0!==o?o:[]};return h(Host,{key:"5ab8ff5b83647e809cddeccf2245696887bd12b4",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,h(KolTableStatelessWcTag,{key:"a508c9984294f4be4f37b43ea4b8d5f7417c0818",ref:this.catchRef,_data:l,_headerCells:d,_label:this.state._label,_dataFoot:this.state._dataFoot,_minWidth:this.state._minWidth,_on:{onSort:(t,n)=>{this.handleSort(n)},onSelectionChange:(t,n)=>{this.handleSelectionChange(t,n)}},_selection:this.state._selection,_tableSettings:this.state._tableSettings,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return getElement(this)}static get watchers(){return{_allowMultiSort:["validateAllowMultiSort"],_data:["validateData"],_dataFoot:["validateDataFoot"],_paginationPosition:["validatePaginationPosition"],_hasSettingsMenu:["validateHasSettingsMenu"],_headers:["validateHeaders"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_selection:["validateSelection"],_on:["validateOn"],_tableSettings:["validateTableSettings"],_pagination:["validatePagination"]}}};KolTableStateful.style={default:defaultStyleCss};export{KolTableStateful as kol_table_stateful};
+import{r as registerInstance,h,H as Host,g as getElement}from"./index-BVfSKhpj.js";import{i as KolPaginationWcTag,n as KolTableStatelessWcTag}from"./component-names-C3fyby67.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{d as watchBoolean,w as watchValidator,s as setState,O as emptyStringByArrayHandler,e as watchString,p as parseJson,o as objectObjectHandler,j as devHint}from"./common-Dd0zJQbD.js";import{v as validateTableData,a as validateTableDataFoot,b as validateHasSettingsMenu,c as validateTableSelection,d as validateTableStatefulCallbacks,e as validateTableSettings}from"./table-settings-DxLvhwRE.js";import{v as validateLabel}from"./label-Dnmzb2S_.js";import{C as Callback}from"./keyboard-D6PoWr38.js";import{K as KolEvent,d as dispatchDomEvent}from"./events-9-skLO0f.js";import"./i18n-CfLoIZ8T.js";const validateAllowMultiSort=(t,e,a={})=>{watchBoolean(t,"_allowMultiSort",e,Object.assign({defaultValue:!1},a))},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=()=>'@charset "UTF-8";  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   :host {     display: inline-block;   }   .kol-button {     display: inline-flex;     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));     text-decoration-line: none;   }   .kol-button::before {          content: "​";   }   .kol-button__text {     width: 100%;   }   .kol-popover-button__button {     display: inline-block;   }   .kol-popover-button__popover {     margin: 0;     padding: 0;     border: 0;   }   .kol-popover-button--inline .kol-popover-button__button {     display: inline;   }   .kol-table-settings {     background: #fff;     position: absolute;     top: 0;     right: 0;     z-index: 1;   }   .kol-table-settings .kol-popover-button__popover {     background: #fff;     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);     border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     border: 1px solid #d1d5db;   }   .kol-table-settings__columns-container {     max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));     margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));     overflow: auto;   }   .kol-table-settings__columns {     display: grid;     gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     align-items: center;     grid-auto-rows: min-content;     grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;   }   .kol-table-settings__column {     display: contents;   }   .kol-table {     display: block;     position: relative;     max-width: 100%;   }   .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {          outline: 5px auto Highlight;     outline: 5px auto -webkit-focus-ring-color;     outline-offset: 2px;   }   .kol-table__scroll-container {     overflow-x: auto;     overflow-y: hidden;   }   .kol-table__table {     width: 100%;   }   .kol-table__caption {     min-height: var(--a11y-min-size);     padding-right: var(--a11y-min-size);     text-align: start;   }   .kol-table__sort-button .kol-button {     color: inherit;   }   .kol-table__body {     text-align: left;   }   .kol-table__body .kol-button__text {     justify-items: start;   }   .kol-table__cell--align-left {     text-align: left;   }   .kol-table__cell--align-left .kol-button__text {     align-items: start;   }   .kol-table__cell--align-center {     text-align: center;   }   .kol-table__cell--align-center .kol-button__text {     align-items: center;   }   .kol-table__cell--align-right {     text-align: right;   }   .kol-table__cell--align-right .kol-button__text {     align-items: end;   }   .kol-table__cell--selection {     width: var(--a11y-min-size);     height: var(--a11y-min-size);     white-space: nowrap;   }   .kol-table__spacer {     display: none;   }   .kol-table__selection-label {     display: flex;     position: relative;     width: var(--a11y-min-size);     height: var(--a11y-min-size);     align-items: center;     justify-content: center;     cursor: pointer;   }   .kol-table__selection-label--disabled {     cursor: not-allowed;   }   .kol-table__selection-icon {     display: block;     position: absolute;     inset: auto;     z-index: 1;   }   .kol-table__selection-input {     border-style: solid;     margin: 0;     appearance: none;     cursor: pointer;   }   .kol-table__selection-input:disabled {     cursor: not-allowed;   }   .kol-table__selection-input:before {     content: "";   }   .kol-table__selection-input--checkbox {     background-color: rgb(255, 255, 255);     display: flex;     position: relative;     width: calc(var(--a11y-min-size) / 2);     height: calc(var(--a11y-min-size) / 2);     border-width: 2px;     align-items: center;     justify-content: center;     line-height: 1.5;   }   .kol-table__selection-input--radio {     border-radius: 100%;     display: flex;     width: 1.5em;     min-width: 1.5em;     height: 1.5em;     min-height: 1.5em;     padding: 0;     border-width: 2px;   }   .kol-table__selection-input--radio:before {     border-radius: 100%;     width: 0.75em;     height: 0.75em;     margin: auto;   }   .kol-table__selection-input--radio:checked:before {     background-color: #000;   }   @media (forced-colors: active) {     .kol-table__selection-input--radio:checked:before {              background-color: selectedItem !important;     }   }   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-select {     background-color: transparent;     width: 100%;   }   .kol-select:not(:disabled) {     cursor: pointer;   }   .kol-select:not([multiple], [size]) {     height: 2.75em;   }   .kol-select:focus {     outline: none;   }   .kol-select__option:checked::before {     content: "✓ ";   }   .kol-select {        }   .kol-select[multiple] option {     padding: calc((var(--a11y-min-size) - 16 * 1rem / var(--kolibri-root-font-size, 16)) / 2) 0.5em;   }   .kol-pagination {     display: grid;     gap: calc(16 * 1rem / var(--kolibri-root-font-size, 16));     align-items: center;     grid-template-columns: 1fr auto;   }   .kol-pagination__navigation-list {     display: inline-flex;     margin: 0;     padding: 0;     gap: 0.5em;     flex-wrap: wrap;     align-items: center;     list-style: none;   }   .kol-pagination__separator:before {     content: "•••";   }   .kol-pagination__page-size-select .kol-form-field-select {     align-items: center;     grid-template-columns: 1fr max-content;   }   .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {     display: grid;     place-items: center;   }   @media (min-width: 1024px) {     .kol-table-stateful__pagination, .kol-table-stateful__pagination-wrapper {       grid-auto-flow: column;     }   }   .kol-pagination {     display: flex;     flex-wrap: wrap;   }   @media (min-width: 1024px) {     .kol-pagination {       display: flex;     }   }   @media (max-width: 1024px) {     .kol-pagination {       flex-direction: column;     }   } }',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._paginationPosition="bottom",this.state={_allowMultiSort:!1,_data:[],_dataFoot:[],_headers:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_pagination:{_page:1,_pageSize:10,_max:0},_sortedData:[],_paginationPosition:"bottom",_hasSettingsMenu:!1},this.handlePagination={onClick:(t,e)=>{var a;"function"==typeof(null===(a=this.state._pagination._on)||void 0===a?void 0:a.onClick)&&this.state._pagination._on.onClick(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePage:(t,e)=>{var a;"function"==typeof(null===(a=this.state._pagination._on)||void 0===a?void 0:a.onChangePage)&&this.state._pagination._on.onChangePage(t,e),setState(this,"_pagination",Object.assign(Object.assign({},this.state._pagination),{_page:e}))},onChangePageSize:(t,e)=>{var a;"function"==typeof(null===(a=this.state._pagination._on)||void 0===a?void 0:a.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);const t=[...this.state._data];this.sortData.length>0&&t.sort((t,e)=>{for(let a=0;a<this.sortData.length;a++){const i=this.sortData[a],o=i.compareFn(t,e,i.direction);if(0!==o)return"ASC"===i.direction?o:-o}return 0}),setState(this,"_sortedData",t)}}validateAllowMultiSort(t){validateAllowMultiSort(this,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)}validateHasSettingsMenu(t){validateHasSettingsMenu(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 a=this.sortData.findIndex(e=>e.key===t.key);if(a>=0){const t=this.sortData[a];switch(t.direction){case"ASC":t.direction="DESC";break;case"DESC":this.sortData.splice(a,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,a,i,o;const n=t=>{let e=!1;this.sortData=[],t.forEach(t=>{if("function"==typeof t.compareFn&&!t.key)return void devHint("[KolTableStateful] A sortable column requires the 'key' property.");const a=t.key;if(!a)return;const i=t.sortDirection;"ASC"!==i&&"DESC"!==i||"function"==typeof t.compareFn&&((this.state._allowMultiSort||0===this.sortData.length)&&this.sortData.push({label:t.label,key:a,compareFn:t.compareFn,direction:i}),e=!0)}),e&&setTimeout(()=>this.updateSortedData())},l=t;null===(e=l.horizontal)||void 0===e||e.forEach(n),null===(a=l.vertical)||void 0===a||a.forEach(n),l.horizontal&&l.vertical&&(null===(i=l.horizontal)||void 0===i?void 0:i.length)>0&&(null===(o=l.vertical)||void 0===o?void 0:o.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)}validateTableSettings(t){validateTableSettings(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.validateOn(this._on),this.validatePagination(this._pagination),this.validatePaginationPosition(this._paginationPosition),this.validateSelection(this._selection),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}selectDisplayedData(t,e,a){return"number"==typeof e&&e>0&&"number"==typeof a&&a>0?(this.pageStartSlice=e*(a-1),this.pageEndSlice=e*a>t.length?t.length:e*a,t.slice(this.pageStartSlice,this.pageEndSlice)):(this.pageStartSlice=0,this.pageEndSlice=t.length,t)}renderPagination(t){const e=translate("kol-table-pagination-label",{placeholders:{label:`${this.state._label} (${translate(`kol-pagination-position-${t}`)})`}});return h("div",{class:`kol-table-stateful__pagination kol-table-stateful__pagination--${this.state._paginationPosition}`},h("span",{role:"status","aria-live":"polite"},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(KolPaginationWcTag,{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:e})))}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 a=this.state._selection;if(a){const i=null!==(e=a.keyPropertyName)&&void 0!==e?e:"id",o=Array.isArray(t)?t:[t],n=new Set(o.map(String)),l=this.state._sortedData.filter(t=>n.has(String(t[i])));if(!1===(null==a?void 0:a.multiple))return l[0];if(i)return l}return null}handleSelectionChange(t,e){var a;const i=this.state._selection;i&&(this.state=Object.assign(Object.assign({},this.state),{_selection:Object.assign(Object.assign({},i),{selectedKeys:Array.isArray(e)?e:[e]})}));const o=this.getSelectedData(e);"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](t,o),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,o)}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,a,i,o,n;const l=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),s="top"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("top"):null,r="bottom"===this._paginationPosition||"both"===this._paginationPosition?this.renderPagination("bottom"):null,d={horizontal:null!==(i=null===(a=this.state._headers.horizontal)||void 0===a?void 0:a.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==i?i:[],vertical:null!==(n=null===(o=this.state._headers.vertical)||void 0===o?void 0:o.map(t=>t.map(t=>Object.assign(Object.assign({},t),{sortDirection:this.getHeaderCellSortState(t)}))))&&void 0!==n?n:[]};return h(Host,{key:"5ab8ff5b83647e809cddeccf2245696887bd12b4",class:"kol-table-stateful"},this.pageEndSlice>0&&this.showPagination&&s,h(KolTableStatelessWcTag,{key:"a508c9984294f4be4f37b43ea4b8d5f7417c0818",ref:this.catchRef,_data:l,_headerCells:d,_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,_tableSettings:this.state._tableSettings,_hasSettingsMenu:this.state._hasSettingsMenu}),this.pageEndSlice>0&&this.showPagination&&r)}get host(){return getElement(this)}static get watchers(){return{_allowMultiSort:[{validateAllowMultiSort:0}],_data:[{validateData:0}],_dataFoot:[{validateDataFoot:0}],_paginationPosition:[{validatePaginationPosition:0}],_hasSettingsMenu:[{validateHasSettingsMenu:0}],_headers:[{validateHeaders:0}],_label:[{validateLabel:0}],_minWidth:[{validateMinWidth:0}],_selection:[{validateSelection:0}],_on:[{validateOn:0}],_tableSettings:[{validateTableSettings:0}],_pagination:[{validatePagination:0}]}}};KolTableStateful.style={default:defaultStyleCss()};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-BuVNvMVh.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{e as KolIconTag,a as KolTooltipWcTag,d as KolButtonWcTag,w as KolTableSettingsWcTag}from"./component-names-C3fyby67.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{O as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,w as watchValidator,s as setState}from"./common-Dd0zJQbD.js";import{b as validateHasSettingsMenu,v as validateTableData,a as validateTableDataFoot,f as validateTableCallbacks,c as validateTableSelection,e as validateTableSettings}from"./table-settings-DxLvhwRE.js";import{v as validateLabel}from"./label-Dnmzb2S_.js";import{C as Callback}from"./keyboard-D6PoWr38.js";import{n as nonce}from"./dev.utils-Bl9mUZR6.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-9-skLO0f.js";import{i as isObject,c as baseGetTag,r as root,a as isObjectLike,f as freeGlobal,b as isArray,S as Symbol}from"./isObject-DvSELytj.js";import"./i18n-CfLoIZ8T.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)})})};var asyncTag="[object AsyncFunction]",funcTag$1="[object Function]",genTag="[object GeneratorFunction]",proxyTag="[object Proxy]";function isFunction(e){if(!isObject(e))return!1;var t=baseGetTag(e);return t==funcTag$1||t==genTag||t==asyncTag||t==proxyTag}var coreJsData=root["__core-js_shared__"],maskSrcKey=function(){var e=/[^.]+$/.exec(coreJsData&&coreJsData.keys&&coreJsData.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function isMasked(e){return!!maskSrcKey&&maskSrcKey in e}var funcProto$1=Function.prototype,funcToString$1=funcProto$1.toString;function toSource(e){if(null!=e){try{return funcToString$1.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var reRegExpChar=/[\\^$.*+?()[\]{}|]/g,reIsHostCtor=/^\[object .+?Constructor\]$/,funcProto=Function.prototype,objectProto$9=Object.prototype,funcToString=funcProto.toString,hasOwnProperty$7=objectProto$9.hasOwnProperty,reIsNative=RegExp("^"+funcToString.call(hasOwnProperty$7).replace(reRegExpChar,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function baseIsNative(e){return!(!isObject(e)||isMasked(e))&&(isFunction(e)?reIsNative:reIsHostCtor).test(toSource(e))}function getValue(e,t){return null==e?void 0:e[t]}function getNative(e,t){var a=getValue(e,t);return baseIsNative(a)?a:void 0}var WeakMap=getNative(root,"WeakMap"),MAX_SAFE_INTEGER$1=9007199254740991,reIsUint=/^(?:0|[1-9]\d*)$/;function isIndex(e,t){var a=typeof e;return!!(t=null==t?MAX_SAFE_INTEGER$1:t)&&("number"==a||"symbol"!=a&&reIsUint.test(e))&&e>-1&&e%1==0&&e<t}function eq(e,t){return e===t||e!=e&&t!=t}var MAX_SAFE_INTEGER=9007199254740991;function isLength(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=MAX_SAFE_INTEGER}function isArrayLike(e){return null!=e&&isLength(e.length)&&!isFunction(e)}var objectProto$8=Object.prototype;function isPrototype(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||objectProto$8)}function baseTimes(e,t){for(var a=-1,r=Array(e);++a<e;)r[a]=t(a);return r}var argsTag$2="[object Arguments]";function baseIsArguments(e){return isObjectLike(e)&&baseGetTag(e)==argsTag$2}var objectProto$7=Object.prototype,hasOwnProperty$6=objectProto$7.hasOwnProperty,propertyIsEnumerable$1=objectProto$7.propertyIsEnumerable,isArguments=baseIsArguments(function(){return arguments}())?baseIsArguments:function(e){return isObjectLike(e)&&hasOwnProperty$6.call(e,"callee")&&!propertyIsEnumerable$1.call(e,"callee")};function stubFalse(){return!1}var freeExports$1="object"==typeof exports&&exports&&!exports.nodeType&&exports,freeModule$1=freeExports$1&&"object"==typeof module&&module&&!module.nodeType&&module,moduleExports$1=freeModule$1&&freeModule$1.exports===freeExports$1,Buffer=moduleExports$1?root.Buffer:void 0,nativeIsBuffer=Buffer?Buffer.isBuffer:void 0,isBuffer=nativeIsBuffer||stubFalse,argsTag$1="[object Arguments]",arrayTag$1="[object Array]",boolTag$1="[object Boolean]",dateTag$1="[object Date]",errorTag$1="[object Error]",funcTag="[object Function]",mapTag$2="[object Map]",numberTag$1="[object Number]",objectTag$2="[object Object]",regexpTag$1="[object RegExp]",setTag$2="[object Set]",stringTag$1="[object String]",weakMapTag$1="[object WeakMap]",arrayBufferTag$1="[object ArrayBuffer]",dataViewTag$2="[object DataView]",float32Tag="[object Float32Array]",float64Tag="[object Float64Array]",int8Tag="[object Int8Array]",int16Tag="[object Int16Array]",int32Tag="[object Int32Array]",uint8Tag="[object Uint8Array]",uint8ClampedTag="[object Uint8ClampedArray]",uint16Tag="[object Uint16Array]",uint32Tag="[object Uint32Array]",typedArrayTags={};function baseIsTypedArray(e){return isObjectLike(e)&&isLength(e.length)&&!!typedArrayTags[baseGetTag(e)]}function baseUnary(e){return function(t){return e(t)}}typedArrayTags[float32Tag]=typedArrayTags[float64Tag]=typedArrayTags[int8Tag]=typedArrayTags[int16Tag]=typedArrayTags[int32Tag]=typedArrayTags[uint8Tag]=typedArrayTags[uint8ClampedTag]=typedArrayTags[uint16Tag]=typedArrayTags[uint32Tag]=!0,typedArrayTags[argsTag$1]=typedArrayTags[arrayTag$1]=typedArrayTags[arrayBufferTag$1]=typedArrayTags[boolTag$1]=typedArrayTags[dataViewTag$2]=typedArrayTags[dateTag$1]=typedArrayTags[errorTag$1]=typedArrayTags[funcTag]=typedArrayTags[mapTag$2]=typedArrayTags[numberTag$1]=typedArrayTags[objectTag$2]=typedArrayTags[regexpTag$1]=typedArrayTags[setTag$2]=typedArrayTags[stringTag$1]=typedArrayTags[weakMapTag$1]=!1;var freeExports="object"==typeof exports&&exports&&!exports.nodeType&&exports,freeModule=freeExports&&"object"==typeof module&&module&&!module.nodeType&&module,moduleExports=freeModule&&freeModule.exports===freeExports,freeProcess=moduleExports&&freeGlobal.process,nodeUtil=function(){try{var e=freeModule&&freeModule.require&&freeModule.require("util").types;return e||freeProcess&&freeProcess.binding&&freeProcess.binding("util")}catch(e){}}(),nodeIsTypedArray=nodeUtil&&nodeUtil.isTypedArray,isTypedArray=nodeIsTypedArray?baseUnary(nodeIsTypedArray):baseIsTypedArray,objectProto$6=Object.prototype,hasOwnProperty$5=objectProto$6.hasOwnProperty;function arrayLikeKeys(e,t){var a=isArray(e),r=!a&&isArguments(e),o=!a&&!r&&isBuffer(e),s=!a&&!r&&!o&&isTypedArray(e),i=a||r||o||s,n=i?baseTimes(e.length,String):[],l=n.length;for(var c in e)!hasOwnProperty$5.call(e,c)||i&&("length"==c||o&&("offset"==c||"parent"==c)||s&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||isIndex(c,l))||n.push(c);return n}function overArg(e,t){return function(a){return e(t(a))}}var nativeKeys=overArg(Object.keys,Object),objectProto$5=Object.prototype,hasOwnProperty$4=objectProto$5.hasOwnProperty;function baseKeys(e){if(!isPrototype(e))return nativeKeys(e);var t=[];for(var a in Object(e))hasOwnProperty$4.call(e,a)&&"constructor"!=a&&t.push(a);return t}function keys(e){return isArrayLike(e)?arrayLikeKeys(e):baseKeys(e)}var nativeCreate=getNative(Object,"create");function hashClear(){this.__data__=nativeCreate?nativeCreate(null):{},this.size=0}function hashDelete(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var HASH_UNDEFINED$2="__lodash_hash_undefined__",objectProto$4=Object.prototype,hasOwnProperty$3=objectProto$4.hasOwnProperty;function hashGet(e){var t=this.__data__;if(nativeCreate){var a=t[e];return a===HASH_UNDEFINED$2?void 0:a}return hasOwnProperty$3.call(t,e)?t[e]:void 0}var objectProto$3=Object.prototype,hasOwnProperty$2=objectProto$3.hasOwnProperty;function hashHas(e){var t=this.__data__;return nativeCreate?void 0!==t[e]:hasOwnProperty$2.call(t,e)}var HASH_UNDEFINED$1="__lodash_hash_undefined__";function hashSet(e,t){var a=this.__data__;return this.size+=this.has(e)?0:1,a[e]=nativeCreate&&void 0===t?HASH_UNDEFINED$1:t,this}function Hash(e){var t=-1,a=null==e?0:e.length;for(this.clear();++t<a;){var r=e[t];this.set(r[0],r[1])}}function listCacheClear(){this.__data__=[],this.size=0}function assocIndexOf(e,t){for(var a=e.length;a--;)if(eq(e[a][0],t))return a;return-1}Hash.prototype.clear=hashClear,Hash.prototype.delete=hashDelete,Hash.prototype.get=hashGet,Hash.prototype.has=hashHas,Hash.prototype.set=hashSet;var arrayProto=Array.prototype,splice=arrayProto.splice;function listCacheDelete(e){var t=this.__data__,a=assocIndexOf(t,e);return!(a<0)&&(a==t.length-1?t.pop():splice.call(t,a,1),--this.size,!0)}function listCacheGet(e){var t=this.__data__,a=assocIndexOf(t,e);return a<0?void 0:t[a][1]}function listCacheHas(e){return assocIndexOf(this.__data__,e)>-1}function listCacheSet(e,t){var a=this.__data__,r=assocIndexOf(a,e);return r<0?(++this.size,a.push([e,t])):a[r][1]=t,this}function ListCache(e){var t=-1,a=null==e?0:e.length;for(this.clear();++t<a;){var r=e[t];this.set(r[0],r[1])}}ListCache.prototype.clear=listCacheClear,ListCache.prototype.delete=listCacheDelete,ListCache.prototype.get=listCacheGet,ListCache.prototype.has=listCacheHas,ListCache.prototype.set=listCacheSet;var Map$1=getNative(root,"Map");function mapCacheClear(){this.size=0,this.__data__={hash:new Hash,map:new(Map$1||ListCache),string:new Hash}}function isKeyable(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function getMapData(e,t){var a=e.__data__;return isKeyable(t)?a["string"==typeof t?"string":"hash"]:a.map}function mapCacheDelete(e){var t=getMapData(this,e).delete(e);return this.size-=t?1:0,t}function mapCacheGet(e){return getMapData(this,e).get(e)}function mapCacheHas(e){return getMapData(this,e).has(e)}function mapCacheSet(e,t){var a=getMapData(this,e),r=a.size;return a.set(e,t),this.size+=a.size==r?0:1,this}function MapCache(e){var t=-1,a=null==e?0:e.length;for(this.clear();++t<a;){var r=e[t];this.set(r[0],r[1])}}function arrayPush(e,t){for(var a=-1,r=t.length,o=e.length;++a<r;)e[o+a]=t[a];return e}function stackClear(){this.__data__=new ListCache,this.size=0}function stackDelete(e){var t=this.__data__,a=t.delete(e);return this.size=t.size,a}function stackGet(e){return this.__data__.get(e)}function stackHas(e){return this.__data__.has(e)}MapCache.prototype.clear=mapCacheClear,MapCache.prototype.delete=mapCacheDelete,MapCache.prototype.get=mapCacheGet,MapCache.prototype.has=mapCacheHas,MapCache.prototype.set=mapCacheSet;var LARGE_ARRAY_SIZE=200;function stackSet(e,t){var a=this.__data__;if(a instanceof ListCache){var r=a.__data__;if(!Map$1||r.length<LARGE_ARRAY_SIZE-1)return r.push([e,t]),this.size=++a.size,this;a=this.__data__=new MapCache(r)}return a.set(e,t),this.size=a.size,this}function Stack(e){var t=this.__data__=new ListCache(e);this.size=t.size}function arrayFilter(e,t){for(var a=-1,r=null==e?0:e.length,o=0,s=[];++a<r;){var i=e[a];t(i,a,e)&&(s[o++]=i)}return s}function stubArray(){return[]}Stack.prototype.clear=stackClear,Stack.prototype.delete=stackDelete,Stack.prototype.get=stackGet,Stack.prototype.has=stackHas,Stack.prototype.set=stackSet;var objectProto$2=Object.prototype,propertyIsEnumerable=objectProto$2.propertyIsEnumerable,nativeGetSymbols=Object.getOwnPropertySymbols,getSymbols=nativeGetSymbols?function(e){return null==e?[]:(e=Object(e),arrayFilter(nativeGetSymbols(e),function(t){return propertyIsEnumerable.call(e,t)}))}:stubArray;function baseGetAllKeys(e,t,a){var r=t(e);return isArray(e)?r:arrayPush(r,a(e))}function getAllKeys(e){return baseGetAllKeys(e,keys,getSymbols)}var DataView=getNative(root,"DataView"),Promise$1=getNative(root,"Promise"),Set$1=getNative(root,"Set"),mapTag$1="[object Map]",objectTag$1="[object Object]",promiseTag="[object Promise]",setTag$1="[object Set]",weakMapTag="[object WeakMap]",dataViewTag$1="[object DataView]",dataViewCtorString=toSource(DataView),mapCtorString=toSource(Map$1),promiseCtorString=toSource(Promise$1),setCtorString=toSource(Set$1),weakMapCtorString=toSource(WeakMap),getTag=baseGetTag;(DataView&&getTag(new DataView(new ArrayBuffer(1)))!=dataViewTag$1||Map$1&&getTag(new Map$1)!=mapTag$1||Promise$1&&getTag(Promise$1.resolve())!=promiseTag||Set$1&&getTag(new Set$1)!=setTag$1||WeakMap&&getTag(new WeakMap)!=weakMapTag)&&(getTag=function(e){var t=baseGetTag(e),a=t==objectTag$1?e.constructor:void 0,r=a?toSource(a):"";if(r)switch(r){case dataViewCtorString:return dataViewTag$1;case mapCtorString:return mapTag$1;case promiseCtorString:return promiseTag;case setCtorString:return setTag$1;case weakMapCtorString:return weakMapTag}return t});var Uint8Array=root.Uint8Array,HASH_UNDEFINED="__lodash_hash_undefined__";function setCacheAdd(e){return this.__data__.set(e,HASH_UNDEFINED),this}function setCacheHas(e){return this.__data__.has(e)}function SetCache(e){var t=-1,a=null==e?0:e.length;for(this.__data__=new MapCache;++t<a;)this.add(e[t])}function arraySome(e,t){for(var a=-1,r=null==e?0:e.length;++a<r;)if(t(e[a],a,e))return!0;return!1}function cacheHas(e,t){return e.has(t)}SetCache.prototype.add=SetCache.prototype.push=setCacheAdd,SetCache.prototype.has=setCacheHas;var COMPARE_PARTIAL_FLAG$3=1,COMPARE_UNORDERED_FLAG$1=2;function equalArrays(e,t,a,r,o,s){var i=a&COMPARE_PARTIAL_FLAG$3,n=e.length,l=t.length;if(n!=l&&!(i&&l>n))return!1;var c=s.get(e),h=s.get(t);if(c&&h)return c==t&&h==e;var d=-1,u=!0,b=a&COMPARE_UNORDERED_FLAG$1?new SetCache:void 0;for(s.set(e,t),s.set(t,e);++d<n;){var y=e[d],p=t[d];if(r)var g=i?r(p,y,d,t,e,s):r(y,p,d,e,t,s);if(void 0!==g){if(g)continue;u=!1;break}if(b){if(!arraySome(t,function(e,t){if(!cacheHas(b,t)&&(y===e||o(y,e,a,r,s)))return b.push(t)})){u=!1;break}}else if(y!==p&&!o(y,p,a,r,s)){u=!1;break}}return s.delete(e),s.delete(t),u}function mapToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e,r){a[++t]=[r,e]}),a}function setToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e){a[++t]=e}),a}var COMPARE_PARTIAL_FLAG$2=1,COMPARE_UNORDERED_FLAG=2,boolTag="[object Boolean]",dateTag="[object Date]",errorTag="[object Error]",mapTag="[object Map]",numberTag="[object Number]",regexpTag="[object RegExp]",setTag="[object Set]",stringTag="[object String]",symbolTag="[object Symbol]",arrayBufferTag="[object ArrayBuffer]",dataViewTag="[object DataView]",symbolProto=Symbol?Symbol.prototype:void 0,symbolValueOf=symbolProto?symbolProto.valueOf:void 0;function equalByTag(e,t,a,r,o,s,i){switch(a){case dataViewTag:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case arrayBufferTag:return!(e.byteLength!=t.byteLength||!s(new Uint8Array(e),new Uint8Array(t)));case boolTag:case dateTag:case numberTag:return eq(+e,+t);case errorTag:return e.name==t.name&&e.message==t.message;case regexpTag:case stringTag:return e==t+"";case mapTag:var n=mapToArray;case setTag:var l=r&COMPARE_PARTIAL_FLAG$2;if(n||(n=setToArray),e.size!=t.size&&!l)return!1;var c=i.get(e);if(c)return c==t;r|=COMPARE_UNORDERED_FLAG,i.set(e,t);var h=equalArrays(n(e),n(t),r,o,s,i);return i.delete(e),h;case symbolTag:if(symbolValueOf)return symbolValueOf.call(e)==symbolValueOf.call(t)}return!1}var COMPARE_PARTIAL_FLAG$1=1,objectProto$1=Object.prototype,hasOwnProperty$1=objectProto$1.hasOwnProperty;function equalObjects(e,t,a,r,o,s){var i=a&COMPARE_PARTIAL_FLAG$1,n=getAllKeys(e),l=n.length;if(l!=getAllKeys(t).length&&!i)return!1;for(var c=l;c--;){var h=n[c];if(!(i?h in t:hasOwnProperty$1.call(t,h)))return!1}var d=s.get(e),u=s.get(t);if(d&&u)return d==t&&u==e;var b=!0;s.set(e,t),s.set(t,e);for(var y=i;++c<l;){var p=e[h=n[c]],g=t[h];if(r)var f=i?r(g,p,h,t,e,s):r(p,g,h,e,t,s);if(!(void 0===f?p===g||o(p,g,a,r,s):f)){b=!1;break}y||(y="constructor"==h)}if(b&&!y){var _=e.constructor,v=t.constructor;_==v||!("constructor"in e)||!("constructor"in t)||"function"==typeof _&&_ instanceof _&&"function"==typeof v&&v instanceof v||(b=!1)}return s.delete(e),s.delete(t),b}var COMPARE_PARTIAL_FLAG=1,argsTag="[object Arguments]",arrayTag="[object Array]",objectTag="[object Object]",objectProto=Object.prototype,hasOwnProperty=objectProto.hasOwnProperty;function baseIsEqualDeep(e,t,a,r,o,s){var i=isArray(e),n=isArray(t),l=i?arrayTag:getTag(e),c=n?arrayTag:getTag(t),h=(l=l==argsTag?objectTag:l)==objectTag,d=(c=c==argsTag?objectTag:c)==objectTag,u=l==c;if(u&&isBuffer(e)){if(!isBuffer(t))return!1;i=!0,h=!1}if(u&&!h)return s||(s=new Stack),i||isTypedArray(e)?equalArrays(e,t,a,r,o,s):equalByTag(e,t,l,a,r,o,s);if(!(a&COMPARE_PARTIAL_FLAG)){var b=h&&hasOwnProperty.call(e,"__wrapped__"),y=d&&hasOwnProperty.call(t,"__wrapped__");if(b||y){var p=b?e.value():e,g=y?t.value():t;return s||(s=new Stack),o(p,g,a,r,s)}}return!!u&&(s||(s=new Stack),equalObjects(e,t,a,r,o,s))}function baseIsEqual(e,t,a,r,o){return e===t||(null==e||null==t||!isObjectLike(e)&&!isObjectLike(t)?e!=e&&t!=t:baseIsEqualDeep(e,t,a,r,baseIsEqual,o))}function isEqual(e,t){return baseIsEqual(e,t)}const HEADER_CELL_WIDTH_VALIDATOR=/^\d+(\.\d+)?([a-z]+|%)?$/,validateMinWidth=(e,t,a)=>{watchValidator(e,"_minWidth",e=>"string"==typeof e&&HEADER_CELL_WIDTH_VALIDATOR.test(e),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,a)},KolTableStateless=class{constructor(e){registerInstance(this,e),this.translateNoEntries=translate("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=translate("kol-sort"),this.tableDivElementHasScrollbar=!1,this.renderTableRow=(e,t,a,r=!1)=>{var o,s;let i=String(t);return this.horizontal&&(null===(o=e[0])||void 0===o?void 0:o.data)&&(i=null!==(s=this.getDataKey(e[0].data))&&void 0!==s?s:i),h("tr",{class:clsx("kol-table__row",{"kol-table__row--body":!r,"kol-table__row--footer":r}),key:`row-${i}`},this.renderSelectionCell(e,t),e.map((e,r)=>this.renderTableCell(e,t,r,a)))},this.renderTableCell=(e,t,a,r)=>{const o=this.getColumnSettings(e);if(o&&!o.visible)return"";let s=`${t}-${a}-${e.label}`;if(e.data){const r=this.getDataKey(e.data);s=r?`${r}-${this.horizontal?a:t}`:s}if(e.headerCell)return this.renderHeadingCell(e,t,a,r);{const t="function"!=typeof e.render&&e.label===this.translateNoEntries;return h("td",{key:`cell-${s}`,class:clsx("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),"aria-atomic":t?"false":void 0,"aria-live":t?"polite":void 0,"aria-relevant":t?"text":void 0,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")}}}validateHasSettingsMenu(e){validateHasSettingsMenu(this,e)}validateData(e){validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e),isEqual(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){validateLabel(this,e,{required:!0})}validateMinWidth(e){validateMinWidth(this,e)}validateOn(e){validateTableCallbacks(this,e)}validateSelection(e){validateTableSelection(this,e)}validateTableSettings(e){validateTableSettings(this,this.normalizeTableSettings(e))}normalizeTableSettings(e){if(!e||"object"!=typeof e)return e;const t=Array.isArray(e.columns)?e.columns:[];return Object.assign(Object.assign({},e),{columns:t.map(({hidable:e,key:t,label:a,resizable:r,sortable:o,visible:s,width:i})=>({hidable:!1!==e,key:null!=t?t:nonce(),label:a,resizable:!1!==r,sortable:!1!==o,visible:!1!==s,width:i}))})}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const a=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let r=this.checkboxRefs.indexOf(a);r>-1&&(e.preventDefault(),"ArrowDown"===e.key?(r=(r+1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()):"ArrowUp"===e.key&&(e.preventDefault(),r=(r+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){setState(this,"_tableSettings",e.detail)}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,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)})}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 a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}})))}getNumberOfCols(e,t){let a=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1}),a<t&&(a=t)}),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let r=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1}),r<t&&(r=t)}),0===r?r=t.length:r-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,r}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,a;let r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===r.length&&(r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(a=e.vertical)&&void 0!==a?a:[]),r.length>0&&(this.horizontal=!1)),r}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach((e,a)=>{t.set(e.key,a)}),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return e.map((e,t)=>({column:e,index:t})).sort((e,a)=>{var r,o,s,i;const n=null!==(o=t.get(null!==(r=e.column.key)&&void 0!==r?r:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER,l=null!==(i=t.get(null!==(s=a.column.key)&&void 0!==s?s:""))&&void 0!==i?i:Number.MAX_SAFE_INTEGER;return n!==l?n-l:e.index-a.index}).map(({column:e})=>e)}createDataField(e,t,a){var r;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 o=this.getPrimaryHeaders(t),s=this.getNumberOfCols(t.horizontal,e);let i=this.getNumberOfRows(t.vertical,e),n=0;a&&(n=i,i+=(null===(r=this.state._dataFoot)||void 0===r?void 0:r.length)||0);const l=[],c=[],h=[];t.vertical.forEach((e,t)=>{c[t]=0,h[t]=[]});const d=this.sortByColumnPosition(o);for(let r=n;r<i;r++){const o=[];t.vertical.forEach((e,t)=>{let a=0;if(h[t].forEach(e=>a+=e),a<=r){const s=e[r-a+c[t]];if("object"==typeof s){o.push(Object.assign(Object.assign({},s),{headerCell:!0,data:{}}));let e=1;if("number"==typeof s.rowSpan&&s.rowSpan>1&&(e=s.rowSpan),h[t].push(e),"number"==typeof s.colSpan&&s.colSpan>1)for(let a=1;a<s.colSpan;a++)h[t+a].push(e);c[t]++}}});for(let t=0;t<s;t++)if(!0===this.horizontal){const s=a&&this.state._dataFoot?this.state._dataFoot[r-n]:e[r];"object"!=typeof d[t]||null===d[t]||"object"!=typeof s||null===s||"string"!=typeof d[t].key&&"function"!=typeof d[t].render||o.push(Object.assign(Object.assign({},d[t]),{colSpan:void 0,data:s,label:s[d[t].key],rowSpan:void 0}))}else"object"!=typeof d[r]||null===d[r]||"object"!=typeof e[t]||null===e[t]||"string"!=typeof d[r].key&&"function"!=typeof d[r].render||o.push(Object.assign(Object.assign({},d[r]),{colSpan:void 0,data:e[t],label:e[t][d[r].key],rowSpan:void 0}));l.push(o)}if(0===e.length){let e=0,a=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=>{a+=e.rowSpan||1}));const r={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(a,1)};0===l.length?l.push([r]):l[0].push(r)}return l}handleSelectionChangeCallbackAndEvent(e,t){var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](e,t),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter(e=>e.key).map(e=>{var t;return{hidable:!1!==e.hidable,sortable:!1!==e.sortable,resizable:!1!==e.resizable,key:null!==(t=e.key)&&void 0!==t?t:nonce(),label:e.label,visible:!0}})}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),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(e,t){var a;const r=this.state._selection;if(!r)return"";const o=this.getSelectionKeyPropertyName(),s=null===(a=e[0])||void 0===a?void 0:a.data;if(!s)return"";const i=s[o],n=r.multiple||void 0===r.multiple,l=(()=>{const e=null==r?void 0:r.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(i))})(),c=(()=>{const e=null==r?void 0:r.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(i))})(),d=r.label(s),u={name:"selection",checked:l,disabled:c,id:String(i),"aria-label":d};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":l})},n?h("label",{class:clsx("kol-table__selection-label",{"kol-table__selection-label--disabled":c})},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(l?"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)},u,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==r?void 0:r.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),a=l?t.filter(e=>String(e)!==String(i)):[...t,i];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")},u,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,i)}}))),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${i}-label`,_label:d})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find(t=>t.key===e.key)}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 a;const r=null===(a=this.state._selection)||void 0===a?void 0:a.disabledKeys;return!(void 0===r?[]:Array.isArray(r)?r:[r]).some(a=>String(a)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const a=this.getSelectionKeyPropertyName(),r=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&r.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[a])),r}getTableMinWidth(){var e,t;const a=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter(e=>e.visible).reduce((e,t)=>{var a;return e+(null!==(a=t.width)&&void 0!==a?a:0)},0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${a}ch`:`max(${this.state._minWidth}, ${a}ch)`}renderHeadingSelectionCell(){var e,t;const a=this.state._selection;if(!a)return h("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===a.multiple)return h("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const r=null!==(t=null===(e=this.getSelectedKeysWithoutDisabledKeys())||void 0===e?void 0:e.length)&&void 0!==t?t:0,o=r===this.getDataWithSelectionEnabled().length,s=0!==r&&!o;let i="kol-table-selection-indeterminate";o&&!s&&(i="kol-table-selection-none"),0===r&&(i="kol-table-selection-all");const n=translate(i);return h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--indeterminate":s,"kol-table__selection--checked":o})},h("label",{class:"kol-table__selection-label"},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(s?"codicon-remove":o?"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:o&&!s,indeterminate:s,"aria-label":n,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!o))}})),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${i}-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,a,r){const o=this.getColumnSettings(e);if(o&&!o.visible)return"";const s=!1!==(null==o?void 0:o.sortable),i="string"==typeof e.sortDirection,n=s&&i;let l="none",c="codicon codicon-fold";if(n&&e.sortDirection)switch(e.sortDirection){case"ASC":c="codicon codicon-chevron-up",l="ascending";break;case"DESC":c="codicon codicon-chevron-down",l="descending";break;default:l="none"}const d=r?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return h("th",{key:`${t}-${a}-${e.label}`,class:clsx("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${l}`]:l}),scope:d,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:e.width},"aria-sort":l,"data-sort":n&&e.sortDirection?`sort-${e.sortDirection}`:void 0},n&&e.sortDirection?h(KolButtonWcTag,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:e.label,_ariaDescription:this.translateSort,_on:{onClick:t=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.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 a,r;const o=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,s=null===(r=null==t?void 0:t[0])||void 0===r?void 0:r.reduce((e,t)=>e+(t.colSpan||1),0),i=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:o+s+i}))}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(){var e;const t=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const a=null===(e=this.state._headerCells.horizontal)||void 0===e?void 0:e.map(e=>this.sortByColumnPosition(e));return h("div",{key:"a66eb9f22e8267d1bfcc00b2429b8234e07beb51",class:"kol-table"},this.state._hasSettingsMenu&&h(KolTableSettingsWcTag,{key:"8c5bfcc3f01813773d07912fcf2fa78455efac06",_tableSettings:this.state._tableSettings}),h("div",{key:"6f9ac777bae4c27c80052aeeae5678ddff56a6bc",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},h("table",{key:"89710649cdcd7fcca523656de8f8b13fc3d9509f",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},h("caption",{key:"0f5550f8377daed2043a18de8c2cdb5b6e45f554",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(a)&&h("thead",{key:"83577b101b26b8ee80bc81ccd12526fb78f576c4",class:"kol-table__head"},[a.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,a)=>this.renderHeadingCell(e,t,a,!1)))),this.renderSpacer("head",a)]),h("tbody",{key:"6fe763adb26ca11ebea14f035200df42c970d5cd",class:"kol-table__body"},t.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return getElement(this)}static get watchers(){return{_hasSettingsMenu:["validateHasSettingsMenu"],_data:["validateData"],_dataFoot:["validateDataFoot"],_headerCells:["validateHeaderCells"],_label:["validateLabel"],_minWidth:["validateMinWidth"],_on:["validateOn"],_selection:["validateSelection"],_tableSettings:["validateTableSettings"]}}};export{KolTableStateless as kol_table_stateless_wc};
+import{r as registerInstance,h,F as Fragment,g as getElement}from"./index-BVfSKhpj.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{e as KolIconTag,a as KolTooltipWcTag,d as KolButtonWcTag,w as KolTableSettingsWcTag}from"./component-names-C3fyby67.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{O as emptyStringByArrayHandler,o as objectObjectHandler,p as parseJson,w as watchValidator,s as setState}from"./common-Dd0zJQbD.js";import{b as validateHasSettingsMenu,v as validateTableData,a as validateTableDataFoot,f as validateTableCallbacks,c as validateTableSelection,e as validateTableSettings}from"./table-settings-DxLvhwRE.js";import{v as validateLabel}from"./label-Dnmzb2S_.js";import{C as Callback}from"./keyboard-D6PoWr38.js";import{n as nonce}from"./dev.utils-CT0IU26V.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-9-skLO0f.js";import{i as isObject,c as baseGetTag,r as root,a as isObjectLike,f as freeGlobal,b as isArray,S as Symbol}from"./isObject-DvSELytj.js";import"./i18n-CfLoIZ8T.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)})})};var asyncTag="[object AsyncFunction]",funcTag$1="[object Function]",genTag="[object GeneratorFunction]",proxyTag="[object Proxy]";function isFunction(e){if(!isObject(e))return!1;var t=baseGetTag(e);return t==funcTag$1||t==genTag||t==asyncTag||t==proxyTag}var coreJsData=root["__core-js_shared__"],maskSrcKey=function(){var e=/[^.]+$/.exec(coreJsData&&coreJsData.keys&&coreJsData.keys.IE_PROTO||"");return e?"Symbol(src)_1."+e:""}();function isMasked(e){return!!maskSrcKey&&maskSrcKey in e}var funcProto$1=Function.prototype,funcToString$1=funcProto$1.toString;function toSource(e){if(null!=e){try{return funcToString$1.call(e)}catch(e){}try{return e+""}catch(e){}}return""}var reRegExpChar=/[\\^$.*+?()[\]{}|]/g,reIsHostCtor=/^\[object .+?Constructor\]$/,funcProto=Function.prototype,objectProto$9=Object.prototype,funcToString=funcProto.toString,hasOwnProperty$7=objectProto$9.hasOwnProperty,reIsNative=RegExp("^"+funcToString.call(hasOwnProperty$7).replace(reRegExpChar,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");function baseIsNative(e){return!(!isObject(e)||isMasked(e))&&(isFunction(e)?reIsNative:reIsHostCtor).test(toSource(e))}function getValue(e,t){return null==e?void 0:e[t]}function getNative(e,t){var a=getValue(e,t);return baseIsNative(a)?a:void 0}var WeakMap=getNative(root,"WeakMap"),MAX_SAFE_INTEGER$1=9007199254740991,reIsUint=/^(?:0|[1-9]\d*)$/;function isIndex(e,t){var a=typeof e;return!!(t=null==t?MAX_SAFE_INTEGER$1:t)&&("number"==a||"symbol"!=a&&reIsUint.test(e))&&e>-1&&e%1==0&&e<t}function eq(e,t){return e===t||e!=e&&t!=t}var MAX_SAFE_INTEGER=9007199254740991;function isLength(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=MAX_SAFE_INTEGER}function isArrayLike(e){return null!=e&&isLength(e.length)&&!isFunction(e)}var objectProto$8=Object.prototype;function isPrototype(e){var t=e&&e.constructor;return e===("function"==typeof t&&t.prototype||objectProto$8)}function baseTimes(e,t){for(var a=-1,r=Array(e);++a<e;)r[a]=t(a);return r}var argsTag$2="[object Arguments]";function baseIsArguments(e){return isObjectLike(e)&&baseGetTag(e)==argsTag$2}var objectProto$7=Object.prototype,hasOwnProperty$6=objectProto$7.hasOwnProperty,propertyIsEnumerable$1=objectProto$7.propertyIsEnumerable,isArguments=baseIsArguments(function(){return arguments}())?baseIsArguments:function(e){return isObjectLike(e)&&hasOwnProperty$6.call(e,"callee")&&!propertyIsEnumerable$1.call(e,"callee")};function stubFalse(){return!1}var freeExports$1="object"==typeof exports&&exports&&!exports.nodeType&&exports,freeModule$1=freeExports$1&&"object"==typeof module&&module&&!module.nodeType&&module,moduleExports$1=freeModule$1&&freeModule$1.exports===freeExports$1,Buffer=moduleExports$1?root.Buffer:void 0,nativeIsBuffer=Buffer?Buffer.isBuffer:void 0,isBuffer=nativeIsBuffer||stubFalse,argsTag$1="[object Arguments]",arrayTag$1="[object Array]",boolTag$1="[object Boolean]",dateTag$1="[object Date]",errorTag$1="[object Error]",funcTag="[object Function]",mapTag$2="[object Map]",numberTag$1="[object Number]",objectTag$2="[object Object]",regexpTag$1="[object RegExp]",setTag$2="[object Set]",stringTag$1="[object String]",weakMapTag$1="[object WeakMap]",arrayBufferTag$1="[object ArrayBuffer]",dataViewTag$2="[object DataView]",float32Tag="[object Float32Array]",float64Tag="[object Float64Array]",int8Tag="[object Int8Array]",int16Tag="[object Int16Array]",int32Tag="[object Int32Array]",uint8Tag="[object Uint8Array]",uint8ClampedTag="[object Uint8ClampedArray]",uint16Tag="[object Uint16Array]",uint32Tag="[object Uint32Array]",typedArrayTags={};function baseIsTypedArray(e){return isObjectLike(e)&&isLength(e.length)&&!!typedArrayTags[baseGetTag(e)]}function baseUnary(e){return function(t){return e(t)}}typedArrayTags[float32Tag]=typedArrayTags[float64Tag]=typedArrayTags[int8Tag]=typedArrayTags[int16Tag]=typedArrayTags[int32Tag]=typedArrayTags[uint8Tag]=typedArrayTags[uint8ClampedTag]=typedArrayTags[uint16Tag]=typedArrayTags[uint32Tag]=!0,typedArrayTags[argsTag$1]=typedArrayTags[arrayTag$1]=typedArrayTags[arrayBufferTag$1]=typedArrayTags[boolTag$1]=typedArrayTags[dataViewTag$2]=typedArrayTags[dateTag$1]=typedArrayTags[errorTag$1]=typedArrayTags[funcTag]=typedArrayTags[mapTag$2]=typedArrayTags[numberTag$1]=typedArrayTags[objectTag$2]=typedArrayTags[regexpTag$1]=typedArrayTags[setTag$2]=typedArrayTags[stringTag$1]=typedArrayTags[weakMapTag$1]=!1;var freeExports="object"==typeof exports&&exports&&!exports.nodeType&&exports,freeModule=freeExports&&"object"==typeof module&&module&&!module.nodeType&&module,moduleExports=freeModule&&freeModule.exports===freeExports,freeProcess=moduleExports&&freeGlobal.process,nodeUtil=function(){try{var e=freeModule&&freeModule.require&&freeModule.require("util").types;return e||freeProcess&&freeProcess.binding&&freeProcess.binding("util")}catch(e){}}(),nodeIsTypedArray=nodeUtil&&nodeUtil.isTypedArray,isTypedArray=nodeIsTypedArray?baseUnary(nodeIsTypedArray):baseIsTypedArray,objectProto$6=Object.prototype,hasOwnProperty$5=objectProto$6.hasOwnProperty;function arrayLikeKeys(e,t){var a=isArray(e),r=!a&&isArguments(e),o=!a&&!r&&isBuffer(e),s=!a&&!r&&!o&&isTypedArray(e),i=a||r||o||s,n=i?baseTimes(e.length,String):[],l=n.length;for(var c in e)!hasOwnProperty$5.call(e,c)||i&&("length"==c||o&&("offset"==c||"parent"==c)||s&&("buffer"==c||"byteLength"==c||"byteOffset"==c)||isIndex(c,l))||n.push(c);return n}function overArg(e,t){return function(a){return e(t(a))}}var nativeKeys=overArg(Object.keys,Object),objectProto$5=Object.prototype,hasOwnProperty$4=objectProto$5.hasOwnProperty;function baseKeys(e){if(!isPrototype(e))return nativeKeys(e);var t=[];for(var a in Object(e))hasOwnProperty$4.call(e,a)&&"constructor"!=a&&t.push(a);return t}function keys(e){return isArrayLike(e)?arrayLikeKeys(e):baseKeys(e)}var nativeCreate=getNative(Object,"create");function hashClear(){this.__data__=nativeCreate?nativeCreate(null):{},this.size=0}function hashDelete(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t}var HASH_UNDEFINED$2="__lodash_hash_undefined__",objectProto$4=Object.prototype,hasOwnProperty$3=objectProto$4.hasOwnProperty;function hashGet(e){var t=this.__data__;if(nativeCreate){var a=t[e];return a===HASH_UNDEFINED$2?void 0:a}return hasOwnProperty$3.call(t,e)?t[e]:void 0}var objectProto$3=Object.prototype,hasOwnProperty$2=objectProto$3.hasOwnProperty;function hashHas(e){var t=this.__data__;return nativeCreate?void 0!==t[e]:hasOwnProperty$2.call(t,e)}var HASH_UNDEFINED$1="__lodash_hash_undefined__";function hashSet(e,t){var a=this.__data__;return this.size+=this.has(e)?0:1,a[e]=nativeCreate&&void 0===t?HASH_UNDEFINED$1:t,this}function Hash(e){var t=-1,a=null==e?0:e.length;for(this.clear();++t<a;){var r=e[t];this.set(r[0],r[1])}}function listCacheClear(){this.__data__=[],this.size=0}function assocIndexOf(e,t){for(var a=e.length;a--;)if(eq(e[a][0],t))return a;return-1}Hash.prototype.clear=hashClear,Hash.prototype.delete=hashDelete,Hash.prototype.get=hashGet,Hash.prototype.has=hashHas,Hash.prototype.set=hashSet;var arrayProto=Array.prototype,splice=arrayProto.splice;function listCacheDelete(e){var t=this.__data__,a=assocIndexOf(t,e);return!(a<0)&&(a==t.length-1?t.pop():splice.call(t,a,1),--this.size,!0)}function listCacheGet(e){var t=this.__data__,a=assocIndexOf(t,e);return a<0?void 0:t[a][1]}function listCacheHas(e){return assocIndexOf(this.__data__,e)>-1}function listCacheSet(e,t){var a=this.__data__,r=assocIndexOf(a,e);return r<0?(++this.size,a.push([e,t])):a[r][1]=t,this}function ListCache(e){var t=-1,a=null==e?0:e.length;for(this.clear();++t<a;){var r=e[t];this.set(r[0],r[1])}}ListCache.prototype.clear=listCacheClear,ListCache.prototype.delete=listCacheDelete,ListCache.prototype.get=listCacheGet,ListCache.prototype.has=listCacheHas,ListCache.prototype.set=listCacheSet;var Map$1=getNative(root,"Map");function mapCacheClear(){this.size=0,this.__data__={hash:new Hash,map:new(Map$1||ListCache),string:new Hash}}function isKeyable(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e}function getMapData(e,t){var a=e.__data__;return isKeyable(t)?a["string"==typeof t?"string":"hash"]:a.map}function mapCacheDelete(e){var t=getMapData(this,e).delete(e);return this.size-=t?1:0,t}function mapCacheGet(e){return getMapData(this,e).get(e)}function mapCacheHas(e){return getMapData(this,e).has(e)}function mapCacheSet(e,t){var a=getMapData(this,e),r=a.size;return a.set(e,t),this.size+=a.size==r?0:1,this}function MapCache(e){var t=-1,a=null==e?0:e.length;for(this.clear();++t<a;){var r=e[t];this.set(r[0],r[1])}}function arrayPush(e,t){for(var a=-1,r=t.length,o=e.length;++a<r;)e[o+a]=t[a];return e}function stackClear(){this.__data__=new ListCache,this.size=0}function stackDelete(e){var t=this.__data__,a=t.delete(e);return this.size=t.size,a}function stackGet(e){return this.__data__.get(e)}function stackHas(e){return this.__data__.has(e)}MapCache.prototype.clear=mapCacheClear,MapCache.prototype.delete=mapCacheDelete,MapCache.prototype.get=mapCacheGet,MapCache.prototype.has=mapCacheHas,MapCache.prototype.set=mapCacheSet;var LARGE_ARRAY_SIZE=200;function stackSet(e,t){var a=this.__data__;if(a instanceof ListCache){var r=a.__data__;if(!Map$1||r.length<LARGE_ARRAY_SIZE-1)return r.push([e,t]),this.size=++a.size,this;a=this.__data__=new MapCache(r)}return a.set(e,t),this.size=a.size,this}function Stack(e){var t=this.__data__=new ListCache(e);this.size=t.size}function arrayFilter(e,t){for(var a=-1,r=null==e?0:e.length,o=0,s=[];++a<r;){var i=e[a];t(i,a,e)&&(s[o++]=i)}return s}function stubArray(){return[]}Stack.prototype.clear=stackClear,Stack.prototype.delete=stackDelete,Stack.prototype.get=stackGet,Stack.prototype.has=stackHas,Stack.prototype.set=stackSet;var objectProto$2=Object.prototype,propertyIsEnumerable=objectProto$2.propertyIsEnumerable,nativeGetSymbols=Object.getOwnPropertySymbols,getSymbols=nativeGetSymbols?function(e){return null==e?[]:(e=Object(e),arrayFilter(nativeGetSymbols(e),function(t){return propertyIsEnumerable.call(e,t)}))}:stubArray;function baseGetAllKeys(e,t,a){var r=t(e);return isArray(e)?r:arrayPush(r,a(e))}function getAllKeys(e){return baseGetAllKeys(e,keys,getSymbols)}var DataView=getNative(root,"DataView"),Promise$1=getNative(root,"Promise"),Set$1=getNative(root,"Set"),mapTag$1="[object Map]",objectTag$1="[object Object]",promiseTag="[object Promise]",setTag$1="[object Set]",weakMapTag="[object WeakMap]",dataViewTag$1="[object DataView]",dataViewCtorString=toSource(DataView),mapCtorString=toSource(Map$1),promiseCtorString=toSource(Promise$1),setCtorString=toSource(Set$1),weakMapCtorString=toSource(WeakMap),getTag=baseGetTag;(DataView&&getTag(new DataView(new ArrayBuffer(1)))!=dataViewTag$1||Map$1&&getTag(new Map$1)!=mapTag$1||Promise$1&&getTag(Promise$1.resolve())!=promiseTag||Set$1&&getTag(new Set$1)!=setTag$1||WeakMap&&getTag(new WeakMap)!=weakMapTag)&&(getTag=function(e){var t=baseGetTag(e),a=t==objectTag$1?e.constructor:void 0,r=a?toSource(a):"";if(r)switch(r){case dataViewCtorString:return dataViewTag$1;case mapCtorString:return mapTag$1;case promiseCtorString:return promiseTag;case setCtorString:return setTag$1;case weakMapCtorString:return weakMapTag}return t});var Uint8Array=root.Uint8Array,HASH_UNDEFINED="__lodash_hash_undefined__";function setCacheAdd(e){return this.__data__.set(e,HASH_UNDEFINED),this}function setCacheHas(e){return this.__data__.has(e)}function SetCache(e){var t=-1,a=null==e?0:e.length;for(this.__data__=new MapCache;++t<a;)this.add(e[t])}function arraySome(e,t){for(var a=-1,r=null==e?0:e.length;++a<r;)if(t(e[a],a,e))return!0;return!1}function cacheHas(e,t){return e.has(t)}SetCache.prototype.add=SetCache.prototype.push=setCacheAdd,SetCache.prototype.has=setCacheHas;var COMPARE_PARTIAL_FLAG$3=1,COMPARE_UNORDERED_FLAG$1=2;function equalArrays(e,t,a,r,o,s){var i=a&COMPARE_PARTIAL_FLAG$3,n=e.length,l=t.length;if(n!=l&&!(i&&l>n))return!1;var c=s.get(e),h=s.get(t);if(c&&h)return c==t&&h==e;var d=-1,u=!0,b=a&COMPARE_UNORDERED_FLAG$1?new SetCache:void 0;for(s.set(e,t),s.set(t,e);++d<n;){var y=e[d],p=t[d];if(r)var g=i?r(p,y,d,t,e,s):r(y,p,d,e,t,s);if(void 0!==g){if(g)continue;u=!1;break}if(b){if(!arraySome(t,function(e,t){if(!cacheHas(b,t)&&(y===e||o(y,e,a,r,s)))return b.push(t)})){u=!1;break}}else if(y!==p&&!o(y,p,a,r,s)){u=!1;break}}return s.delete(e),s.delete(t),u}function mapToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e,r){a[++t]=[r,e]}),a}function setToArray(e){var t=-1,a=Array(e.size);return e.forEach(function(e){a[++t]=e}),a}var COMPARE_PARTIAL_FLAG$2=1,COMPARE_UNORDERED_FLAG=2,boolTag="[object Boolean]",dateTag="[object Date]",errorTag="[object Error]",mapTag="[object Map]",numberTag="[object Number]",regexpTag="[object RegExp]",setTag="[object Set]",stringTag="[object String]",symbolTag="[object Symbol]",arrayBufferTag="[object ArrayBuffer]",dataViewTag="[object DataView]",symbolProto=Symbol?Symbol.prototype:void 0,symbolValueOf=symbolProto?symbolProto.valueOf:void 0;function equalByTag(e,t,a,r,o,s,i){switch(a){case dataViewTag:if(e.byteLength!=t.byteLength||e.byteOffset!=t.byteOffset)return!1;e=e.buffer,t=t.buffer;case arrayBufferTag:return!(e.byteLength!=t.byteLength||!s(new Uint8Array(e),new Uint8Array(t)));case boolTag:case dateTag:case numberTag:return eq(+e,+t);case errorTag:return e.name==t.name&&e.message==t.message;case regexpTag:case stringTag:return e==t+"";case mapTag:var n=mapToArray;case setTag:var l=r&COMPARE_PARTIAL_FLAG$2;if(n||(n=setToArray),e.size!=t.size&&!l)return!1;var c=i.get(e);if(c)return c==t;r|=COMPARE_UNORDERED_FLAG,i.set(e,t);var h=equalArrays(n(e),n(t),r,o,s,i);return i.delete(e),h;case symbolTag:if(symbolValueOf)return symbolValueOf.call(e)==symbolValueOf.call(t)}return!1}var COMPARE_PARTIAL_FLAG$1=1,objectProto$1=Object.prototype,hasOwnProperty$1=objectProto$1.hasOwnProperty;function equalObjects(e,t,a,r,o,s){var i=a&COMPARE_PARTIAL_FLAG$1,n=getAllKeys(e),l=n.length;if(l!=getAllKeys(t).length&&!i)return!1;for(var c=l;c--;){var h=n[c];if(!(i?h in t:hasOwnProperty$1.call(t,h)))return!1}var d=s.get(e),u=s.get(t);if(d&&u)return d==t&&u==e;var b=!0;s.set(e,t),s.set(t,e);for(var y=i;++c<l;){var p=e[h=n[c]],g=t[h];if(r)var f=i?r(g,p,h,t,e,s):r(p,g,h,e,t,s);if(!(void 0===f?p===g||o(p,g,a,r,s):f)){b=!1;break}y||(y="constructor"==h)}if(b&&!y){var _=e.constructor,v=t.constructor;_==v||!("constructor"in e)||!("constructor"in t)||"function"==typeof _&&_ instanceof _&&"function"==typeof v&&v instanceof v||(b=!1)}return s.delete(e),s.delete(t),b}var COMPARE_PARTIAL_FLAG=1,argsTag="[object Arguments]",arrayTag="[object Array]",objectTag="[object Object]",objectProto=Object.prototype,hasOwnProperty=objectProto.hasOwnProperty;function baseIsEqualDeep(e,t,a,r,o,s){var i=isArray(e),n=isArray(t),l=i?arrayTag:getTag(e),c=n?arrayTag:getTag(t),h=(l=l==argsTag?objectTag:l)==objectTag,d=(c=c==argsTag?objectTag:c)==objectTag,u=l==c;if(u&&isBuffer(e)){if(!isBuffer(t))return!1;i=!0,h=!1}if(u&&!h)return s||(s=new Stack),i||isTypedArray(e)?equalArrays(e,t,a,r,o,s):equalByTag(e,t,l,a,r,o,s);if(!(a&COMPARE_PARTIAL_FLAG)){var b=h&&hasOwnProperty.call(e,"__wrapped__"),y=d&&hasOwnProperty.call(t,"__wrapped__");if(b||y){var p=b?e.value():e,g=y?t.value():t;return s||(s=new Stack),o(p,g,a,r,s)}}return!!u&&(s||(s=new Stack),equalObjects(e,t,a,r,o,s))}function baseIsEqual(e,t,a,r,o){return e===t||(null==e||null==t||!isObjectLike(e)&&!isObjectLike(t)?e!=e&&t!=t:baseIsEqualDeep(e,t,a,r,baseIsEqual,o))}function isEqual(e,t){return baseIsEqual(e,t)}const HEADER_CELL_WIDTH_VALIDATOR=/^\d+(\.\d+)?([a-z]+|%)?$/,validateMinWidth=(e,t,a)=>{watchValidator(e,"_minWidth",e=>"string"==typeof e&&HEADER_CELL_WIDTH_VALIDATOR.test(e),new Set(["String","/^\\d+(\\.\\d+)?([a-z]+|%)?$/"]),t,a)},KolTableStateless=class{constructor(e){registerInstance(this,e),this.translateNoEntries=translate("kol-no-entries"),this.state={_data:[],_headerCells:{horizontal:[],vertical:[]},_label:"",_minWidth:"auto",_hasSettingsMenu:!1},this.horizontal=!0,this.cellsToRenderTimeouts=new Map,this.dataToKeyMap=new Map,this.checkboxRefs=[],this.translateSort=translate("kol-sort"),this.tableDivElementHasScrollbar=!1,this.renderTableRow=(e,t,a,r=!1)=>{var o,s;let i=String(t);return this.horizontal&&(null===(o=e[0])||void 0===o?void 0:o.data)&&(i=null!==(s=this.getDataKey(e[0].data))&&void 0!==s?s:i),h("tr",{class:clsx("kol-table__row",{"kol-table__row--body":!r,"kol-table__row--footer":r}),key:`row-${i}`},this.renderSelectionCell(e,t),e.map((e,r)=>this.renderTableCell(e,t,r,a)))},this.renderTableCell=(e,t,a,r)=>{const o=this.getColumnSettings(e);if(o&&!o.visible)return"";let s=`${t}-${a}-${e.label}`;if(e.data){const r=this.getDataKey(e.data);s=r?`${r}-${this.horizontal?a:t}`:s}if(e.headerCell)return this.renderHeadingCell(e,t,a,r);{const t="function"!=typeof e.render&&e.label===this.translateNoEntries;return h("td",{key:`cell-${s}`,class:clsx("kol-table__cell kol-table__cell--body",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign}),"aria-atomic":t?"false":void 0,"aria-live":t?"polite":void 0,"aria-relevant":t?"text":void 0,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{textAlign:e.textAlign,width:(null==o?void 0:o.width)?`${o.width}ch`:e.width},ref:"function"==typeof e.render?t=>{this.cellRender(e,t)}:void 0},"function"!=typeof e.render?e.label:"")}}}validateHasSettingsMenu(e){validateHasSettingsMenu(this,e)}validateData(e){validateTableData(this,e,{beforePatch:e=>{this.updateDataToKeyMap(e)}})}validateDataFoot(e){validateTableDataFoot(this,e)}validateHeaderCells(e){validateTableHeaderCells(this,e),isEqual(this.previousHeaderCells,this.state._headerCells)||this.initializeTableSettings(),this.previousHeaderCells=this.state._headerCells}validateLabel(e){validateLabel(this,e,{required:!0})}validateMinWidth(e){validateMinWidth(this,e)}validateOn(e){validateTableCallbacks(this,e)}validateSelection(e){validateTableSelection(this,e)}validateTableSettings(e){validateTableSettings(this,this.normalizeTableSettings(e))}normalizeTableSettings(e){if(!e||"object"!=typeof e)return e;const t=Array.isArray(e.columns)?e.columns:[];return Object.assign(Object.assign({},e),{columns:t.map(({hidable:e,key:t,label:a,resizable:r,sortable:o,visible:s,width:i})=>({hidable:!1!==e,key:null!=t?t:nonce(),label:a,resizable:!1!==r,sortable:!1!==o,visible:!1!==s,width:i}))})}handleKeyDown(e){var t;if("ArrowUp"===e.key||"ArrowDown"===e.key){const a=null===(t=this.tableDivElement)||void 0===t?void 0:t.querySelector(":focus");let r=this.checkboxRefs.indexOf(a);r>-1&&(e.preventDefault(),"ArrowDown"===e.key?(r=(r+1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()):"ArrowUp"===e.key&&(e.preventDefault(),r=(r+this.checkboxRefs.length-1)%this.checkboxRefs.length,this.checkboxRefs[r].focus()))}}componentDidRender(){this.checkDivElementScrollbar()}componentDidLoad(){this.tableDivElement&&ResizeObserver&&(this.tableDivElementResizeObserver=new ResizeObserver(this.checkDivElementScrollbar.bind(this)),this.tableDivElementResizeObserver.observe(this.tableDivElement))}handleSettingsChange(e){setState(this,"_tableSettings",e.detail)}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,a)=>{e.includes(a)||this.dataToKeyMap.delete(a)})}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 a=e.render(t,e,e.data,this.state._data);"string"==typeof a&&(t.textContent=a)}})))}getNumberOfCols(e,t){let a=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var a;return t+=null!==(a=e.colSpan)&&void 0!==a?a:1}),a<t&&(a=t)}),0===a&&(a=t.length),a}getNumberOfRows(e,t){var a;let r=0;return e.forEach(e=>{let t=0;Array.isArray(e)&&e.forEach(e=>{var a;return t+=null!==(a=e.rowSpan)&&void 0!==a?a:1}),r<t&&(r=t)}),0===r?r=t.length:r-=(null===(a=this.state._dataFoot)||void 0===a?void 0:a.length)||0,r}getThePrimaryHeadersWithKeyOrRenderFunction(e){const t=[];return e.forEach(e=>{e.forEach(e=>{"string"!=typeof e.key&&"function"!=typeof e.render||t.push(e)})}),t}getPrimaryHeaders(e){var t,a;let r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(t=e.horizontal)&&void 0!==t?t:[]);return this.horizontal=!0,0===r.length&&(r=this.getThePrimaryHeadersWithKeyOrRenderFunction(null!==(a=e.vertical)&&void 0!==a?a:[]),r.length>0&&(this.horizontal=!1)),r}getColumnPositionMap(){var e;const t=new Map;return null===(e=this.state._tableSettings)||void 0===e||e.columns.forEach((e,a)=>{t.set(e.key,a)}),t}sortByColumnPosition(e){const t=this.getColumnPositionMap();return e.map((e,t)=>({column:e,index:t})).sort((e,a)=>{var r,o,s,i;const n=null!==(o=t.get(null!==(r=e.column.key)&&void 0!==r?r:""))&&void 0!==o?o:Number.MAX_SAFE_INTEGER,l=null!==(i=t.get(null!==(s=a.column.key)&&void 0!==s?s:""))&&void 0!==i?i:Number.MAX_SAFE_INTEGER;return n!==l?n-l:e.index-a.index}).map(({column:e})=>e)}createDataField(e,t,a){var r;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 o=this.getPrimaryHeaders(t),s=this.getNumberOfCols(t.horizontal,e);let i=this.getNumberOfRows(t.vertical,e),n=0;a&&(n=i,i+=(null===(r=this.state._dataFoot)||void 0===r?void 0:r.length)||0);const l=[],c=[],h=[];t.vertical.forEach((e,t)=>{c[t]=0,h[t]=[]});const d=this.sortByColumnPosition(o);for(let r=n;r<i;r++){const o=[];t.vertical.forEach((e,t)=>{let a=0;if(h[t].forEach(e=>a+=e),a<=r){const s=e[r-a+c[t]];if("object"==typeof s){o.push(Object.assign(Object.assign({},s),{headerCell:!0,data:{}}));let e=1;if("number"==typeof s.rowSpan&&s.rowSpan>1&&(e=s.rowSpan),h[t].push(e),"number"==typeof s.colSpan&&s.colSpan>1)for(let a=1;a<s.colSpan;a++)h[t+a].push(e);c[t]++}}});for(let t=0;t<s;t++)if(!0===this.horizontal){const s=a&&this.state._dataFoot?this.state._dataFoot[r-n]:e[r];"object"!=typeof d[t]||null===d[t]||"object"!=typeof s||null===s||"string"!=typeof d[t].key&&"function"!=typeof d[t].render||o.push(Object.assign(Object.assign({},d[t]),{colSpan:void 0,data:s,label:s[d[t].key],rowSpan:void 0}))}else"object"!=typeof d[r]||null===d[r]||"object"!=typeof e[t]||null===e[t]||"string"!=typeof d[r].key&&"function"!=typeof d[r].render||o.push(Object.assign(Object.assign({},d[r]),{colSpan:void 0,data:e[t],label:e[t][d[r].key],rowSpan:void 0}));l.push(o)}if(0===e.length){let e=0,a=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=>{a+=e.rowSpan||1}));const r={colSpan:e,label:this.translateNoEntries,render:void 0,rowSpan:Math.max(a,1)};0===l.length?l.push([r]):l[0].push(r)}return l}handleSelectionChangeCallbackAndEvent(e,t){var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a[Callback.onSelectionChange])&&this.state._on[Callback.onSelectionChange](e,t),this.host&&dispatchDomEvent(this.host,KolEvent.selectionChange,t)}initializeTableSettings(){if(this._tableSettings)return;const e=this.getPrimaryHeaders(this.state._headerCells);this.state._tableSettings||(this.state._tableSettings={columns:[]}),this.state._tableSettings.columns=e.filter(e=>e.key).map(e=>{var t;return{hidable:!1!==e.hidable,sortable:!1!==e.sortable,resizable:!1!==e.resizable,key:null!==(t=e.key)&&void 0!==t?t:nonce(),label:e.label,visible:!0}})}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),this.validateTableSettings(this._tableSettings),this.validateHasSettingsMenu(this._hasSettingsMenu)}renderSelectionCell(e,t){var a;const r=this.state._selection;if(!r)return"";const o=this.getSelectionKeyPropertyName(),s=null===(a=e[0])||void 0===a?void 0:a.data;if(!s)return"";const i=s[o],n=r.multiple||void 0===r.multiple,l=(()=>{const e=null==r?void 0:r.selectedKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(i))})(),c=(()=>{const e=null==r?void 0:r.disabledKeys;return(void 0===e?[]:Array.isArray(e)?e:[e]).some(e=>String(e)===String(i))})(),d=r.label(s),u={name:"selection",checked:l,disabled:c,id:String(i),"aria-label":d};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":l})},n?h("label",{class:clsx("kol-table__selection-label",{"kol-table__selection-label--disabled":c})},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(l?"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)},u,{type:"checkbox",onInput:e=>{const t=(()=>{const e=null==r?void 0:r.selectedKeys;return void 0===e?[]:Array.isArray(e)?e:[e]})(),a=l?t.filter(e=>String(e)!==String(i)):[...t,i];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")},u,{type:"radio",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,i)}}))),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${i}-label`,_label:d})))}getColumnSettings(e){var t;return null===(t=this.state._tableSettings)||void 0===t?void 0:t.columns.find(t=>t.key===e.key)}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 a;const r=null===(a=this.state._selection)||void 0===a?void 0:a.disabledKeys;return!(void 0===r?[]:Array.isArray(r)?r:[r]).some(a=>String(a)===String(t[e]))})}getSelectedKeysWithoutDisabledKeys(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>!t.some(t=>String(t)===String(e)))}getSelectedKeysWithDisabledKeysOnly(){const e=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.selectedKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})(),t=(()=>{var e;const t=null===(e=this.state._selection)||void 0===e?void 0:e.disabledKeys;return void 0===t?[]:Array.isArray(t)?t:[t]})();return e.filter(e=>t.some(t=>String(t)===String(e)))}getRevertedSelection(e){var t;const a=this.getSelectionKeyPropertyName(),r=null!==(t=this.getSelectedKeysWithDisabledKeysOnly())&&void 0!==t?t:[];return e&&r.push(...this.getDataWithSelectionEnabled().map(e=>null==e?void 0:e[a])),r}getTableMinWidth(){var e,t;const a=null!==(t=null===(e=this.state._tableSettings)||void 0===e?void 0:e.columns.filter(e=>e.visible).reduce((e,t)=>{var a;return e+(null!==(a=t.width)&&void 0!==a?a:0)},0))&&void 0!==t?t:0;return"auto"===this.state._minWidth?`${a}ch`:`max(${this.state._minWidth}, ${a}ch)`}renderHeadingSelectionCell(){var e,t;const a=this.state._selection;if(!a)return h("th",{class:"kol-table__cell kol-table__cell--header",key:"thead-0"});if(!1===a.multiple)return h("td",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"});const r=null!==(t=null===(e=this.getSelectedKeysWithoutDisabledKeys())||void 0===e?void 0:e.length)&&void 0!==t?t:0,o=r===this.getDataWithSelectionEnabled().length,s=0!==r&&!o;let i="kol-table-selection-indeterminate";o&&!s&&(i="kol-table-selection-none"),0===r&&(i="kol-table-selection-all");const n=translate(i);return h("th",{key:"thead-0-selection",class:"kol-table__cell kol-table__cell--header kol-table__cell--selection"},h("div",{class:clsx("kol-table__selection",{"kol-table__selection--indeterminate":s,"kol-table__selection--checked":o})},h("label",{class:"kol-table__selection-label"},h(KolIconTag,{class:"kol-table__selection-icon",_icons:"codicon "+(s?"codicon-remove":o?"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:o&&!s,indeterminate:s,"aria-label":n,type:"checkbox",onInput:e=>{this.handleSelectionChangeCallbackAndEvent(e,this.getRevertedSelection(!o))}})),h(KolTooltipWcTag,{"aria-hidden":"true",class:"kol-table__selection-input-tooltip",_align:"right",_id:`${i}-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,a,r){const o=this.getColumnSettings(e);if(o&&!o.visible)return"";const s=!1!==(null==o?void 0:o.sortable),i="string"==typeof e.sortDirection,n=s&&i;let l="none",c="codicon codicon-fold";if(n&&e.sortDirection)switch(e.sortDirection){case"ASC":c="codicon codicon-chevron-up",l="ascending";break;case"DESC":c="codicon codicon-chevron-down",l="descending";break;default:l="none"}const d=r?"row":"number"==typeof e.colSpan&&e.colSpan>1?"colgroup":"col";return h("th",{key:`${t}-${a}-${e.label}`,class:clsx("kol-table__cell kol-table__cell--header",{[`kol-table__cell--align-${e.textAlign}`]:e.textAlign,[`kol-table__cell--${l}`]:l}),scope:d,colSpan:e.colSpan,rowSpan:e.rowSpan,style:{width:(null==o?void 0:o.width)?`${o.width}ch`:e.width},"aria-sort":l,"data-sort":n&&e.sortDirection?`sort-${e.sortDirection}`:void 0},n&&e.sortDirection?h(KolButtonWcTag,{class:"kol-table__sort-button",exportparts:"icon",_icons:{right:c},_label:e.label,_ariaDescription:this.translateSort,_on:{onClick:t=>{var a;"function"==typeof(null===(a=this.state._on)||void 0===a?void 0:a.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 a,r;const o=(null===(a=this.state._headerCells.vertical)||void 0===a?void 0:a.length)||0,s=null===(r=null==t?void 0:t[0])||void 0===r?void 0:r.reduce((e,t)=>e+(t.colSpan||1),0),i=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:o+s+i}))}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(){var e;const t=this.createDataField(this.state._data,this.state._headerCells);this.checkboxRefs=[];const a=null===(e=this.state._headerCells.horizontal)||void 0===e?void 0:e.map(e=>this.sortByColumnPosition(e));return h("div",{key:"a66eb9f22e8267d1bfcc00b2429b8234e07beb51",class:"kol-table"},this.state._hasSettingsMenu&&h(KolTableSettingsWcTag,{key:"8c5bfcc3f01813773d07912fcf2fa78455efac06",_tableSettings:this.state._tableSettings}),h("div",{key:"6f9ac777bae4c27c80052aeeae5678ddff56a6bc",ref:e=>this.tableDivElement=e,class:"kol-table__scroll-container",tabindex:this.tableDivElementHasScrollbar?"-1":void 0},h("table",{key:"89710649cdcd7fcca523656de8f8b13fc3d9509f",class:"kol-table__table",style:{minWidth:this.getTableMinWidth()}},h("caption",{key:"0f5550f8377daed2043a18de8c2cdb5b6e45f554",class:"kol-table__focus-element kol-table__caption",id:"caption",tabindex:this.tableDivElementHasScrollbar?"0":void 0},this.state._label),Array.isArray(a)&&h("thead",{key:"83577b101b26b8ee80bc81ccd12526fb78f576c4",class:"kol-table__head"},[a.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,a)=>this.renderHeadingCell(e,t,a,!1)))),this.renderSpacer("head",a)]),h("tbody",{key:"6fe763adb26ca11ebea14f035200df42c970d5cd",class:"kol-table__body"},t.map((e,t)=>this.renderTableRow(e,t,!0))),this.renderFoot())))}get host(){return getElement(this)}static get watchers(){return{_hasSettingsMenu:[{validateHasSettingsMenu:0}],_data:[{validateData:0}],_dataFoot:[{validateDataFoot:0}],_headerCells:[{validateHeaderCells:0}],_label:[{validateLabel:0}],_minWidth:[{validateMinWidth:0}],_on:[{validateOn:0}],_selection:[{validateSelection:0}],_tableSettings:[{validateTableSettings:0}]}}};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-BuVNvMVh.js";import{n as KolTableStatelessWcTag}from"./component-names-C3fyby67.js";import"./common-Dd0zJQbD.js";const defaultStyleCss="@charset \"UTF-8\";\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: inline-block;\n  }\n  .kol-button {\n    display: inline-flex;\n    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    text-decoration-line: none;\n  }\n  .kol-button::before {\n    /* Render zero-width character as first element to set the baseline correctly. */\n    content: \"​\";\n  }\n  .kol-button__text {\n    width: 100%;\n  }\n  .kol-popover-button__button {\n    display: inline-block;\n  }\n  .kol-popover-button__popover {\n    margin: 0;\n    padding: 0;\n    border: 0;\n  }\n  .kol-popover-button--inline .kol-popover-button__button {\n    display: inline;\n  }\n  .kol-table-settings {\n    background: #fff;\n    position: absolute;\n    top: 0;\n    right: 0;\n    z-index: 1;\n  }\n  .kol-table-settings .kol-popover-button__popover {\n    background: #fff;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n    border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    border: 1px solid #d1d5db;\n  }\n  .kol-table-settings__columns-container {\n    max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));\n    margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n    overflow: auto;\n  }\n  .kol-table-settings__columns {\n    display: grid;\n    gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    align-items: center;\n    grid-auto-rows: min-content;\n    grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;\n  }\n  .kol-table-settings__column {\n    display: contents;\n  }\n  .kol-table {\n    display: block;\n    position: relative;\n    max-width: 100%;\n  }\n  .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {\n    /* @see https://remysharp.com/til/css/focus-ring-default-styles */\n    outline: 5px auto Highlight;\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n  .kol-table__scroll-container {\n    overflow-x: auto;\n    overflow-y: hidden;\n  }\n  .kol-table__table {\n    width: 100%;\n  }\n  .kol-table__caption {\n    min-height: var(--a11y-min-size);\n    padding-right: var(--a11y-min-size);\n    text-align: start;\n  }\n  .kol-table__sort-button .kol-button {\n    color: inherit;\n  }\n  .kol-table__body {\n    text-align: left;\n  }\n  .kol-table__body .kol-button__text {\n    justify-items: start;\n  }\n  .kol-table__cell--align-left {\n    text-align: left;\n  }\n  .kol-table__cell--align-left .kol-button__text {\n    align-items: start;\n  }\n  .kol-table__cell--align-center {\n    text-align: center;\n  }\n  .kol-table__cell--align-center .kol-button__text {\n    align-items: center;\n  }\n  .kol-table__cell--align-right {\n    text-align: right;\n  }\n  .kol-table__cell--align-right .kol-button__text {\n    align-items: end;\n  }\n  .kol-table__cell--selection {\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    white-space: nowrap;\n  }\n  .kol-table__spacer {\n    display: none;\n  }\n  .kol-table__selection-label {\n    display: flex;\n    position: relative;\n    width: var(--a11y-min-size);\n    height: var(--a11y-min-size);\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n  }\n  .kol-table__selection-label--disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-icon {\n    display: block;\n    position: absolute;\n    inset: auto;\n    z-index: 1;\n  }\n  .kol-table__selection-input {\n    border-style: solid;\n    margin: 0;\n    appearance: none;\n    cursor: pointer;\n  }\n  .kol-table__selection-input:disabled {\n    cursor: not-allowed;\n  }\n  .kol-table__selection-input:before {\n    content: \"\";\n  }\n  .kol-table__selection-input--checkbox {\n    background-color: rgb(255, 255, 255);\n    display: flex;\n    position: relative;\n    width: calc(var(--a11y-min-size) / 2);\n    height: calc(var(--a11y-min-size) / 2);\n    border-width: 2px;\n    align-items: center;\n    justify-content: center;\n    line-height: 1.5;\n  }\n  .kol-table__selection-input--radio {\n    border-radius: 100%;\n    display: flex;\n    width: 1.5em;\n    min-width: 1.5em;\n    height: 1.5em;\n    min-height: 1.5em;\n    padding: 0;\n    border-width: 2px;\n  }\n  .kol-table__selection-input--radio:before {\n    border-radius: 100%;\n    width: 0.75em;\n    height: 0.75em;\n    margin: auto;\n  }\n  .kol-table__selection-input--radio:checked:before {\n    background-color: #000;\n  }\n  @media (forced-colors: active) {\n    .kol-table__selection-input--radio:checked:before {\n      /* Give it a visible background in forced colors mode */\n      background-color: selectedItem !important;\n    }\n  }\n}",KolTableStateless=class{constructor(n){registerInstance(this,n)}render(){return h(KolTableStatelessWcTag,{key:"0bb344f2ce9af4bfcfe4f075b4a86343b33f275f",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings,_hasSettingsMenu:this._hasSettingsMenu})}};KolTableStateless.style={default:defaultStyleCss};export{KolTableStateless as kol_table_stateless};
+import{r as registerInstance,h}from"./index-BVfSKhpj.js";import{n as KolTableStatelessWcTag}from"./component-names-C3fyby67.js";import"./common-Dd0zJQbD.js";const defaultStyleCss=()=>'@charset "UTF-8";  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   :host {     display: inline-block;   }   .kol-button {     display: inline-flex;     font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));     text-decoration-line: none;   }   .kol-button::before {          content: "​";   }   .kol-button__text {     width: 100%;   }   .kol-popover-button__button {     display: inline-block;   }   .kol-popover-button__popover {     margin: 0;     padding: 0;     border: 0;   }   .kol-popover-button--inline .kol-popover-button__button {     display: inline;   }   .kol-table-settings {     background: #fff;     position: absolute;     top: 0;     right: 0;     z-index: 1;   }   .kol-table-settings .kol-popover-button__popover {     background: #fff;     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);     border-radius: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     border: 1px solid #d1d5db;   }   .kol-table-settings__columns-container {     max-height: calc(200 * 1rem / var(--kolibri-root-font-size, 16));     margin-top: calc(16 * 1rem / var(--kolibri-root-font-size, 16));     overflow: auto;   }   .kol-table-settings__columns {     display: grid;     gap: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     align-items: center;     grid-auto-rows: min-content;     grid-template-columns: min-content minmax(max-content, 1fr) calc(100 * 1rem / var(--kolibri-root-font-size, 16)) auto auto;   }   .kol-table-settings__column {     display: contents;   }   .kol-table {     display: block;     position: relative;     max-width: 100%;   }   .kol-table:has(.kol-table__focus-element:focus) .kol-table__scroll-container {          outline: 5px auto Highlight;     outline: 5px auto -webkit-focus-ring-color;     outline-offset: 2px;   }   .kol-table__scroll-container {     overflow-x: auto;     overflow-y: hidden;   }   .kol-table__table {     width: 100%;   }   .kol-table__caption {     min-height: var(--a11y-min-size);     padding-right: var(--a11y-min-size);     text-align: start;   }   .kol-table__sort-button .kol-button {     color: inherit;   }   .kol-table__body {     text-align: left;   }   .kol-table__body .kol-button__text {     justify-items: start;   }   .kol-table__cell--align-left {     text-align: left;   }   .kol-table__cell--align-left .kol-button__text {     align-items: start;   }   .kol-table__cell--align-center {     text-align: center;   }   .kol-table__cell--align-center .kol-button__text {     align-items: center;   }   .kol-table__cell--align-right {     text-align: right;   }   .kol-table__cell--align-right .kol-button__text {     align-items: end;   }   .kol-table__cell--selection {     width: var(--a11y-min-size);     height: var(--a11y-min-size);     white-space: nowrap;   }   .kol-table__spacer {     display: none;   }   .kol-table__selection-label {     display: flex;     position: relative;     width: var(--a11y-min-size);     height: var(--a11y-min-size);     align-items: center;     justify-content: center;     cursor: pointer;   }   .kol-table__selection-label--disabled {     cursor: not-allowed;   }   .kol-table__selection-icon {     display: block;     position: absolute;     inset: auto;     z-index: 1;   }   .kol-table__selection-input {     border-style: solid;     margin: 0;     appearance: none;     cursor: pointer;   }   .kol-table__selection-input:disabled {     cursor: not-allowed;   }   .kol-table__selection-input:before {     content: "";   }   .kol-table__selection-input--checkbox {     background-color: rgb(255, 255, 255);     display: flex;     position: relative;     width: calc(var(--a11y-min-size) / 2);     height: calc(var(--a11y-min-size) / 2);     border-width: 2px;     align-items: center;     justify-content: center;     line-height: 1.5;   }   .kol-table__selection-input--radio {     border-radius: 100%;     display: flex;     width: 1.5em;     min-width: 1.5em;     height: 1.5em;     min-height: 1.5em;     padding: 0;     border-width: 2px;   }   .kol-table__selection-input--radio:before {     border-radius: 100%;     width: 0.75em;     height: 0.75em;     margin: auto;   }   .kol-table__selection-input--radio:checked:before {     background-color: #000;   }   @media (forced-colors: active) {     .kol-table__selection-input--radio:checked:before {              background-color: selectedItem !important;     }   } }',KolTableStateless=class{constructor(t){registerInstance(this,t)}render(){return h(KolTableStatelessWcTag,{key:"0bb344f2ce9af4bfcfe4f075b4a86343b33f275f",_data:this._data,_dataFoot:this._dataFoot,_headerCells:this._headerCells,_label:this._label,_minWidth:this._minWidth,_on:this._on,_selection:this._selection,_tableSettings:this._tableSettings,_hasSettingsMenu:this._hasSettingsMenu})}};KolTableStateless.style={default:defaultStyleCss()};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-BuVNvMVh.js";import{w as watchValidator,d as watchBoolean,j as devHint,s as setState,N as watchNumber,H as watchJsonArrayString,I as uiUxHintMillerscheZahl,P as koliBriQuerySelector}from"./common-Dd0zJQbD.js";import{v as validateAlign}from"./align-D-ifSKu8.js";import{v as validateLabel}from"./label-Dnmzb2S_.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{d as KolButtonWcTag}from"./component-names-C3fyby67.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{K as KeyboardKey}from"./keyboard-D6PoWr38.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-9-skLO0f.js";import"./i18n-CfLoIZ8T.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(t,e)=>{watchValidator(t,"_behavior",t=>"string"==typeof t&&tabBehaviorPropTypeOptions.includes(t),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),e)},validateHasCreateButton=(t,e)=>{watchBoolean(t,"_hasCreateButton",e)},defaultStyleCss="/* forward the rem function */\n/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n}\n@layer kol-component {\n  .kol-tabs {\n    display: var(--display);\n    grid-template-columns: var(--grid-template-columns);\n    grid-template-rows: var(--grid-template-rows);\n  }\n  .kol-tabs--align-right {\n    --display: grid;\n    --grid-template-columns: 1fr auto;\n    --button-group-flex-direction: column;\n    --button-group-order: 2;\n  }\n  .kol-tabs--align-left {\n    --display: grid;\n    --grid-template-columns: auto 1fr;\n    --button-group-flex-direction: column;\n    --button-group-order: 0;\n  }\n  .kol-tabs--align-bottom {\n    --display: grid;\n    --grid-template-rows: 1fr auto;\n    --button-group-order: 2;\n  }\n  .kol-tabs__tabs-align-top {\n    --display: grid;\n    --grid-template-rows: auto 1fr;\n    --button-group-order: 0;\n  }\n  .kol-tabs__button-group {\n    display: flex;\n    order: var(--button-group-order);\n    flex-direction: var(--button-group-flex-direction);\n    flex-wrap: wrap;\n  }\n  .kol-tabs__button-group .kol-button {\n    border-bottom-color: transparent;\n    display: block;\n    border-bottom-style: solid;\n  }\n  .kol-tabs__panel {\n    height: 100%;\n  }\n}",KolTabs=class{constructor(t){registerInstance(this,t),this.onCreateLabel=`${translate("kol-new")} …`,this.nextPossibleTabIndex=(t,e,n=1)=>{const o=e+n;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,n+1):o:e},this.prevPossibleTabIndex=(t,e,n=1)=>{const o=e-n;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,n+1):o:e},this.onKeyDown=t=>{switch(t.key){case KeyboardKey.ArrowRight:this.goToNextTab(t);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(t);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,e,n=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===n){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,n=!1}if(!1===n){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,n,o)=>{let a,i;a="_selected"===o?t:this.state._selected,i="_tabs"===o?t:this.state._tabs,i.length>0&&e.set("_selected",this.selectNextNotDisabledTab(a,i))},this.refreshTabPanels=()=>{var t,e,n,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let a=0;a<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);a++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${a}`),t.setAttribute("id",`tabpanel-${a}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const i=document.createElement("slot");i.setAttribute("name",`tabpanel-slot-${a}`),t.appendChild(i),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(n=this.host)||void 0===n?void 0:n.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[a])&&this.host.children[a].setAttribute("slot",`tabpanel-slot-${a}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var e,n;t.preventDefault(),null===(n=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===n||n.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,n="activateCompletely"){var o,a;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===n){this._selected=e;null===(a=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===a||a.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((t,e)=>h(KolButtonWcTag,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e})),this.state._hasCreateButton&&h(KolButtonWcTag,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return h("div",{key:"5ff105f158763851589016d153653f9082038b09",ref:t=>{this.tabPanelsElement=t},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"f474721466208ada0a986ba4e00863b025195fb4",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){validateAlign(this,t)}validateBehavior(t){validateTabBehavior(this,t)}validateHasCreateButton(t){validateHasCreateButton(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),setState(this,"_on",e)}}validateSelected(t){watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){watchJsonArrayString(this,"_tabs",t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0,t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var n,o;null===(o=null===(n=this._on)||void 0===n?void 0:n.onSelect)||void 0===o||o.call(n,t,e),this.host&&dispatchDomEvent(this.host,KolEvent.select,e),this.focusTabById(e)}get host(){return getElement(this)}static get watchers(){return{_align:["validateAlign"],_behavior:["validateBehavior"],_hasCreateButton:["validateHasCreateButton"],_label:["validateLabel"],_on:["validateOn"],_selected:["validateSelected"],_tabs:["validateTabs"]}}};KolTabs.style={default:defaultStyleCss};export{KolTabs as kol_tabs};
+import{r as registerInstance,h,g as getElement}from"./index-BVfSKhpj.js";import{w as watchValidator,d as watchBoolean,j as devHint,s as setState,N as watchNumber,H as watchJsonArrayString,I as uiUxHintMillerscheZahl,P as koliBriQuerySelector}from"./common-Dd0zJQbD.js";import{v as validateAlign}from"./align-D-ifSKu8.js";import{v as validateLabel}from"./label-Dnmzb2S_.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{d as KolButtonWcTag}from"./component-names-C3fyby67.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{K as KeyboardKey}from"./keyboard-D6PoWr38.js";import{d as dispatchDomEvent,K as KolEvent}from"./events-9-skLO0f.js";import"./i18n-CfLoIZ8T.js";const tabBehaviorPropTypeOptions=["select-automatic","select-manual"],validateTabBehavior=(t,e)=>{watchValidator(t,"_behavior",t=>"string"==typeof t&&tabBehaviorPropTypeOptions.includes(t),new Set([`KoliBriTabBehavior {${tabBehaviorPropTypeOptions.join(", ")}`]),e)},validateHasCreateButton=(t,e)=>{watchBoolean(t,"_hasCreateButton",e)},defaultStyleCss=()=>"  @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;  @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-tabs {     display: var(--display);     grid-template-columns: var(--grid-template-columns);     grid-template-rows: var(--grid-template-rows);   }   .kol-tabs--align-right {     --display: grid;     --grid-template-columns: 1fr auto;     --button-group-flex-direction: column;     --button-group-order: 2;   }   .kol-tabs--align-left {     --display: grid;     --grid-template-columns: auto 1fr;     --button-group-flex-direction: column;     --button-group-order: 0;   }   .kol-tabs--align-bottom {     --display: grid;     --grid-template-rows: 1fr auto;     --button-group-order: 2;   }   .kol-tabs__tabs-align-top {     --display: grid;     --grid-template-rows: auto 1fr;     --button-group-order: 0;   }   .kol-tabs__button-group {     display: flex;     order: var(--button-group-order);     flex-direction: var(--button-group-flex-direction);     flex-wrap: wrap;   }   .kol-tabs__button-group .kol-button {     border-bottom-color: transparent;     display: block;     border-bottom-style: solid;   }   .kol-tabs__panel {     height: 100%;   } }",KolTabs=class{constructor(t){registerInstance(this,t),this.onCreateLabel=`${translate("kol-new")} …`,this.nextPossibleTabIndex=(t,e,a=1)=>{const o=e+a;return o<t.length?t[o]._disabled?this.nextPossibleTabIndex(t,e,a+1):o:e},this.prevPossibleTabIndex=(t,e,a=1)=>{const o=e-a;return o>=0?t[o]._disabled?this.prevPossibleTabIndex(t,e,a+1):o:e},this.onKeyDown=t=>{switch(t.key){case KeyboardKey.ArrowRight:this.goToNextTab(t);break;case KeyboardKey.ArrowLeft:this.goToPreviousTab(t);break;case KeyboardKey.Space:case KeyboardKey.Enter:this.activateFocusedTab(t)}},this.onClickSelect=(t,e)=>{this.selectNextTabEvent(t,e)},this.onMouseDown=t=>{t.preventDefault()},this.callbacks={onClick:this.onClickSelect,onMouseDown:this.onMouseDown},this.catchTabPanelHost=t=>{this.tabPanelHost=t},this._align="top",this._hasCreateButton=!1,this._selected=0,this.state={_align:"top",_label:"",_selected:0,_tabs:[]},this.selectNextNotDisabledTab=(t,e,a=!0,o)=>{if(t>e.length-1&&(t=e.length-1),t<0&&(t=0),Array.isArray(e)&&e[t]&&e[t]._disabled){if(!0===a){if(t<e.length-1)return this.selectNextNotDisabledTab(t+1,e,!0,o||t);t=o||t,a=!1}if(!1===a){if(t>0)return this.selectNextNotDisabledTab(t-1,e,!1,o||t);devHint("[KolTabs] All tabs are disabled, and therefore no tab can be displayed.")}}return t},this.syncSelectedAndTabs=(t,e,a,o)=>{let i,s;i="_selected"===o?t:this.state._selected,s="_tabs"===o?t:this.state._tabs,s.length>0&&e.set("_selected",this.selectNextNotDisabledTab(i,s))},this.refreshTabPanels=()=>{var t,e,a,o;if(this.tabPanelHost){for(;this.tabPanelHost.firstChild;)this.tabPanelHost.removeChild(this.tabPanelHost.firstChild);for(let i=0;i<(null===(t=this.state._tabs)||void 0===t?void 0:t.length);i++){const t=document.createElement("div");t.setAttribute("aria-labelledby",`${this.state._label.replace(/\s/g,"-")}-tab-${i}`),t.setAttribute("id",`tabpanel-${i}`),t.setAttribute("role","tabpanel"),t.setAttribute("hidden","");const s=document.createElement("slot");s.setAttribute("name",`tabpanel-slot-${i}`),t.appendChild(s),null===(e=this.tabPanelHost)||void 0===e||e.appendChild(t),"undefined"!=typeof HTMLCollection&&(null===(a=this.host)||void 0===a?void 0:a.children)instanceof HTMLCollection&&(null===(o=this.host)||void 0===o?void 0:o.children[i])&&this.host.children[i].setAttribute("slot",`tabpanel-slot-${i}`)}this.updateVisiblePanel()}},this.updateVisiblePanel=()=>{this.tabPanelHost&&Array.from(this.tabPanelHost.children).forEach((t,e)=>{e===this.state._selected?t.removeAttribute("hidden"):t.setAttribute("hidden","")})},this.onCreate=t=>{var e,a;t.preventDefault(),null===(a=null===(e=this.state._on)||void 0===e?void 0:e.onCreate)||void 0===a||a.call(e,t),this.host&&dispatchDomEvent(this.host,KolEvent.create)},this.onBlur=()=>{this.currentFocusIndex=void 0}}getCurrentFocusIndex(){return"number"==typeof this.currentFocusIndex?this.currentFocusIndex:this.state._selected}getKeyboardTabChangeMode(){return"select-manual"===this._behavior?"selectFocusOnly":"activateCompletely"}goToNextTab(t){const e=this.nextPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}goToPreviousTab(t){const e=this.prevPossibleTabIndex(this.state._tabs,this.getCurrentFocusIndex());this.selectNextTabEvent(t,e,this.getKeyboardTabChangeMode())}activateFocusedTab(t){"number"==typeof this.currentFocusIndex&&this.onSelect(t,this.currentFocusIndex)}selectNextTabEvent(t,e,a="activateCompletely"){var o,i;if(this.currentFocusIndex=e,this.focusTabById(e),"activateCompletely"===a){this._selected=e;null===(i=null===(o=this.state._tabs[e]._on)||void 0===o?void 0:o.onSelect)||void 0===i||i.call(o,t,e),this.onSelect(t,e)}}renderButtonGroup(){return h("div",{"aria-label":this.state._label,class:"kol-tabs__button-group",role:"tablist",onKeyDown:this.onKeyDown,onBlur:this.onBlur},this.state._tabs.map((t,e)=>h(KolButtonWcTag,{_disabled:t._disabled,_icons:t._icons,_hideLabel:t._hideLabel,_label:t._label,_on:this.callbacks,_tabIndex:this.state._selected===e?0:-1,_tooltipAlign:t._tooltipAlign,_buttonVariant:this.state._selected===e?"custom":void 0,_customClass:this.state._selected===e?"selected":void 0,_ariaControls:`tabpanel-${e}`,_ariaSelected:this.state._selected===e,_id:`${this.state._label.replace(/\s/g,"-")}-tab-${e}`,_role:"tab",_value:e})),this.state._hasCreateButton&&h(KolButtonWcTag,{class:"kol-tabs__button-create",_label:this.onCreateLabel,_on:{onClick:this.onCreate},_icons:"codicon codicon-plus","data-testid":"tabs-create-button"}))}render(){return h("div",{key:"5ff105f158763851589016d153653f9082038b09",ref:t=>{this.tabPanelsElement=t},class:clsx("kol-tabs",`kol-tabs--align-${this.state._align}`)},this.renderButtonGroup(),h("div",{key:"f474721466208ada0a986ba4e00863b025195fb4",class:"kol-tabs__content",ref:this.catchTabPanelHost}))}validateAlign(t){validateAlign(this,t)}validateBehavior(t){validateTabBehavior(this,t)}validateHasCreateButton(t){validateHasCreateButton(this,t)}validateLabel(t){validateLabel(this,t,{required:!0})}validateOn(t){if("object"==typeof t&&null!==t){const e={};"function"==typeof t.onCreate&&(e.onCreate=t.onCreate),"function"==typeof t.onSelect&&(e.onSelect=t.onSelect),setState(this,"_on",e)}}validateSelected(t){watchNumber(this,"_selected",t,{hooks:{beforePatch:this.syncSelectedAndTabs}})}validateTabs(t){watchJsonArrayString(this,"_tabs",t=>"object"==typeof t&&null!==t&&"string"==typeof t._label&&t._label.length>0,t,void 0,{hooks:{beforePatch:this.syncSelectedAndTabs,afterPatch:this.refreshTabPanels}}),uiUxHintMillerscheZahl("KolTabs",this.state._tabs.length)}componentWillLoad(){this.validateAlign(this._align),this.validateLabel(this._label),this.validateOn(this._on),this.validateSelected(this._selected),this.validateTabs(this._tabs),this.validateBehavior(this._behavior),this.validateHasCreateButton(this._hasCreateButton)}componentDidRender(){this.refreshTabPanels()}focusTabById(t){if(this.tabPanelsElement){const e=koliBriQuerySelector(`button#${this.state._label.replace(/\s/g,"-")}-tab-${t}`,this.tabPanelsElement);null==e||e.focus()}}onSelect(t,e){var a,o;null===(o=null===(a=this._on)||void 0===a?void 0:a.onSelect)||void 0===o||o.call(a,t,e),this.host&&dispatchDomEvent(this.host,KolEvent.select,e),this.focusTabById(e)}get host(){return getElement(this)}static get watchers(){return{_align:[{validateAlign:0}],_behavior:[{validateBehavior:0}],_hasCreateButton:[{validateHasCreateButton:0}],_label:[{validateLabel:0}],_on:[{validateOn:0}],_selected:[{validateSelected:0}],_tabs:[{validateTabs:0}]}}};KolTabs.style={default:defaultStyleCss()};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-BuVNvMVh.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{d as getDefaultProps,c as checkHasMsg,g as getRenderStates,F as FormFieldStateWrapper}from"./FormFieldStateWrapper-Bs6adxNw.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon-s2Mrr-X3.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{w as watchValidator,e as watchString}from"./common-Dd0zJQbD.js";import{n as nonce}from"./dev.utils-Bl9mUZR6.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior-nTw1Zuyf.js";import{v as validatePlaceholder}from"./placeholder-BVhy3BzI.js";import{v as validateReadOnly}from"./read-only-BetTuumR.js";import{v as validateRequired}from"./required-CnTTpFCN.js";import{v as validateRows}from"./rows-DtS-0sp9.js";import{v as validateSpellCheck}from"./spell-check-B9ot-4t-.js";import"./access-and-short-key-B37XLwy2.js";import"./disabled-BhpAFgSp.js";import"./hide-label-B9FhGrWP.js";import"./label-Dnmzb2S_.js";import"./tooltip-align-Cnin7S26.js";import"./align-D-ifSKu8.js";import"./events-9-skLO0f.js";import"./associated.controller-B9GDDaFL.js";import"./bootstrap-DcyDkVEo.js";import"./component-names-C3fyby67.js";import"./i18n-CfLoIZ8T.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-LBpyQ66X.js";import"./InternalUnderlinedBadgeText-CNjTZsLo.js";import"./Alert-DFxK42_b.js";import"./bem-C27SfH6w.js";import"./browser-DiRe0qUf.js";import"./Heading-DqCQ4tvo.js";import"./Icon-qDQ9VVcv.js";import"./icons-DNTuScEN.js";const textareaResizeOptions=["vertical","none"],isTextareaResizePropType=e=>"string"==typeof e&&textareaResizeOptions.includes(e),validateResizeTextarea=(e,t)=>{watchValidator(e,"_resize",isTextareaResizePropType,new Set(textareaResizeOptions),t,{defaultValue:"vertical"})},TextAreaFc=e=>{const{class:t,msg:n,touched:a,readonly:i,disabled:o,required:l,ariaDescribedBy:r,hideLabel:s,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),p=checkHasMsg(n,a),m="string"==typeof n?"error":null==n?void 0:n._type,u={"kol-textarea--disabled":Boolean(o),"kol-textarea--required":Boolean(l),"kol-textarea--touched":Boolean(a),"kol-textarea--readonly":Boolean(i),[`kol-textarea--${m||"error"}`]:p},v=Object.assign(Object.assign({class:clsx("kol-textarea",u,t),required:l,disabled:o,readonly:i},getDefaultProps({ariaDescribedBy:r,hideLabel:s,label:d})),c);return h("textarea",Object.assign({},v))};function getTextAreaProps(e,t){var n;const a=[...getRenderStates(e).ariaDescribedBy,...null!==(n=t.ariaDescribedBy)&&void 0!==n?n:[]],i=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:a});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(i.maxLength=e._maxLength),"_shortKey"in e&&(i["aria-keyshortcuts"]=e._shortKey),i}const TextAreaStateWrapper=e=>{var{state:t}=e,n=__rest(e,["state"]);return h(TextAreaFc,Object.assign({},getTextAreaProps(t,n)))};class TextareaController extends InputIconController{constructor(e,t,n){super(e,t,n),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e)}validateMaxLengthBehavior(e){validateMaxLengthBehavior(this.component,e)}validateMaxLength(e){validateMaxLength(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateResize(e){validateResizeTextarea(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateSpellCheck(e){validateSpellCheck(this.component,e)}validateValue(e){watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss='/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type=\'checkbox\'], [type=\'radio\'], [type=\'range\']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don\'t want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-form-field {\n    display: grid;\n  }\n  .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {\n    cursor: pointer;\n  }\n  .kol-form-field--disabled .kol-form-field__label {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__label-text::after {\n    content: "*"/"";\n  }\n  .kol-form-field--disabled .kol-form-field__hint {\n    opacity: 0.5;\n  }\n  .kol-form-field--required .kol-form-field__tooltip .span-label::after {\n    content: "*"/"";\n  }\n  .kol-input-container {\n    background-color: transparent;\n    display: grid;\n    width: 100%;\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n    align-items: center;\n    grid-template-columns: 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start) {\n    grid-template-columns: auto 1fr;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--end) {\n    grid-template-columns: 1fr auto;\n  }\n  .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {\n    grid-template-columns: auto 1fr auto;\n  }\n  .kol-input-container__container {\n    position: relative;\n  }\n  .kol-input-container__adornment {\n    display: flex;\n    align-items: center;\n  }\n  .kol-input-container__adornment .kol-icon {\n    display: grid;\n    height: var(--a11y-min-size);\n    place-items: center;\n  }\n  .kol-textarea {\n    width: 100%;\n  }\n  .kol-textarea:focus {\n    outline: none;\n  }\n}',increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,n=e.clientHeight/t;e.rows=1;const a=Math.round(e.scrollHeight/n);return e.rows=t,a},KolTextarea=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.textareaRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getFormFieldProps(){return{state:this.state,class:clsx("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return h(FormFieldStateWrapper,Object.assign({key:"8c0e36e0f3518438ad47719a0487838b50458bfa"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"46550d2a7fe6d389b92205e55da49cd30e525fb3",state:this.state},h(TextAreaStateWrapper,Object.assign({key:"95bfd7318945abbd30a807e2f705946d8e2dabf1"},this.getTextAreaProps()))))}constructor(e){registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)},0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return getElement(this)}static get watchers(){return{_accessKey:["validateAccessKey"],_adjustHeight:["validateAdjustHeight"],_disabled:["validateDisabled"],_hideMsg:["validateHideMsg"],_hideLabel:["validateHideLabel"],_hasCounter:["validateHasCounter"],_hint:["validateHint"],_icons:["validateIcons"],_id:["validateId"],_label:["validateLabel"],_maxLength:["validateMaxLength"],_maxLengthBehavior:["validateMaxLengthBehavior"],_msg:["validateMsg"],_name:["validateName"],_on:["validateOn"],_placeholder:["validatePlaceholder"],_readOnly:["validateReadOnly"],_resize:["validateResize"],_required:["validateRequired"],_rows:["validateRows"],_shortKey:["validateShortKey"],_spellCheck:["validateSpellCheck"],_syncValueBySelector:["validateSyncValueBySelector"],_touched:["validateTouched"],_value:["validateValue"]}}};KolTextarea.style={default:defaultStyleCss};export{KolTextarea as kol_textarea};
+import{h,r as registerInstance,g as getElement}from"./index-BVfSKhpj.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import{d as getDefaultProps,c as checkHasMsg,g as getRenderStates,F as FormFieldStateWrapper}from"./FormFieldStateWrapper-BD6_Aq_y.js";import{I as InputIconController,a as InputContainerStateWrapperFc}from"./controller-icon-z0j8meAS.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{w as watchValidator,e as watchString}from"./common-Dd0zJQbD.js";import{n as nonce}from"./dev.utils-CT0IU26V.js";import{a as validateHasCounter,v as validateMaxLengthBehavior,b as validateMaxLength}from"./max-length-behavior-nTw1Zuyf.js";import{v as validatePlaceholder}from"./placeholder-BVhy3BzI.js";import{v as validateReadOnly}from"./read-only-BetTuumR.js";import{v as validateRequired}from"./required-CnTTpFCN.js";import{v as validateRows}from"./rows-DtS-0sp9.js";import{v as validateSpellCheck}from"./spell-check-B9ot-4t-.js";import"./access-and-short-key-B37XLwy2.js";import"./disabled-BhpAFgSp.js";import"./hide-label-B9FhGrWP.js";import"./label-Dnmzb2S_.js";import"./tooltip-align-Cnin7S26.js";import"./align-D-ifSKu8.js";import"./events-9-skLO0f.js";import"./associated.controller-B9GDDaFL.js";import"./bootstrap-DcyDkVEo.js";import"./component-names-C3fyby67.js";import"./i18n-CfLoIZ8T.js";import"./isObject-DvSELytj.js";import"./reuse-CX4AQDkS.js";import"./i18n-LBpyQ66X.js";import"./InternalUnderlinedBadgeText-BXMEPoNX.js";import"./Alert-I3c2hFqL.js";import"./bem-Dj4gWVFO.js";import"./browser-DiRe0qUf.js";import"./Heading-DwQEABii.js";import"./Icon-DazIQvDi.js";import"./icons-DNTuScEN.js";const textareaResizeOptions=["vertical","none"],isTextareaResizePropType=e=>"string"==typeof e&&textareaResizeOptions.includes(e),validateResizeTextarea=(e,t)=>{watchValidator(e,"_resize",isTextareaResizePropType,new Set(textareaResizeOptions),t,{defaultValue:"vertical"})},TextAreaFc=e=>{const{class:t,msg:a,touched:i,readonly:o,disabled:l,required:r,ariaDescribedBy:s,hideLabel:n,label:d}=e,c=__rest(e,["class","msg","touched","readonly","disabled","required","ariaDescribedBy","hideLabel","label"]),p=checkHasMsg(a,i),u="string"==typeof a?"error":null==a?void 0:a._type,m={"kol-textarea--disabled":Boolean(l),"kol-textarea--required":Boolean(r),"kol-textarea--touched":Boolean(i),"kol-textarea--readonly":Boolean(o),[`kol-textarea--${u||"error"}`]:p},v=Object.assign(Object.assign({class:clsx("kol-textarea",m,t),required:r,disabled:l,readonly:o},getDefaultProps({ariaDescribedBy:s,hideLabel:n,label:d})),c);return h("textarea",Object.assign({},v))};function getTextAreaProps(e,t){var a;const i=[...getRenderStates(e).ariaDescribedBy,...null!==(a=t.ariaDescribedBy)&&void 0!==a?a:[]],o=Object.assign(Object.assign({id:e._id,hideLabel:e._hideLabel,label:e._label,value:e._value,accessKey:e._accessKey,disabled:e._disabled,name:e._name,rows:e._rows,readonly:e._readOnly,required:e._required,placeholder:e._placeholder,touched:e._touched,msg:e._msg},t),{ariaDescribedBy:i});return"_maxLength"in e&&"_maxLengthBehavior"in e&&"hard"===e._maxLengthBehavior&&(o.maxLength=e._maxLength),"_shortKey"in e&&(o["aria-keyshortcuts"]=e._shortKey),o}const TextAreaStateWrapper=e=>{var{state:t}=e,a=__rest(e,["state"]);return h(TextAreaFc,Object.assign({},getTextAreaProps(t,a)))};class TextareaController extends InputIconController{constructor(e,t,a){super(e,t,a),this.afterSyncCharCounter=()=>{"string"==typeof this.component._value&&(this.component.state._currentLength=this.component._value.length,this.updateCurrentLengthDebounced(this.component._value.length))},this.component=e}validateHasCounter(e){validateHasCounter(this.component,e)}validateMaxLengthBehavior(e){validateMaxLengthBehavior(this.component,e)}validateMaxLength(e){validateMaxLength(this.component,e,{hooks:{afterPatch:this.afterSyncCharCounter}})}validatePlaceholder(e){validatePlaceholder(this.component,e)}validateReadOnly(e){validateReadOnly(this.component,e)}validateResize(e){validateResizeTextarea(this.component,e)}validateRequired(e){validateRequired(this.component,e)}validateRows(e){validateRows(this.component,e)}validateSpellCheck(e){validateSpellCheck(this.component,e)}validateValue(e){watchString(this.component,"_value",e,{hooks:{afterPatch:this.afterSyncCharCounter}}),this.setFormAssociatedValue(this.component._value)}componentWillLoad(){super.componentWillLoad(),this.validateHasCounter(this.component._hasCounter),this.validateMaxLengthBehavior(this.component._maxLengthBehavior),this.validateMaxLength(this.component._maxLength),this.validatePlaceholder(this.component._placeholder),this.validateReadOnly(this.component._readOnly),this.validateRequired(this.component._required),this.validateResize(this.component._resize),this.validateRows(this.component._rows),this.validateSpellCheck(this.component._spellCheck),this.validateValue(this.component._value)}}const defaultStyleCss=()=>' @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-form-field {     display: grid;   }   .kol-form-field:not(.kol-form-field--disabled) .kol-form-field__label {     cursor: pointer;   }   .kol-form-field--disabled .kol-form-field__label {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__label-text::after {     content: "*"/"";   }   .kol-form-field--disabled .kol-form-field__hint {     opacity: 0.5;   }   .kol-form-field--required .kol-form-field__tooltip .span-label::after {     content: "*"/"";   }   .kol-input-container {     background-color: transparent;     display: grid;     width: 100%;     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);     align-items: center;     grid-template-columns: 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--start) {     grid-template-columns: auto 1fr;   }   .kol-input-container:has(> .kol-input-container__adornment--end) {     grid-template-columns: 1fr auto;   }   .kol-input-container:has(> .kol-input-container__adornment--start):has(> .kol-input-container__adornment--end) {     grid-template-columns: auto 1fr auto;   }   .kol-input-container__container {     position: relative;   }   .kol-input-container__adornment {     display: flex;     align-items: center;   }   .kol-input-container__adornment .kol-icon {     display: grid;     height: var(--a11y-min-size);     place-items: center;   }   .kol-textarea {     width: 100%;   }   .kol-textarea:focus {     outline: none;   } }',increaseTextareaHeight=e=>{e.style.overflow="hidden";const t=e.rows,a=e.clientHeight/t;e.rows=1;const i=Math.round(e.scrollHeight/a);return e.rows=t,i},KolTextarea=class{async getValue(){var e;return null===(e=this.textareaRef)||void 0===e?void 0:e.value}async focus(){var e;return Promise.resolve(null===(e=this.textareaRef)||void 0===e?void 0:e.focus())}async kolFocus(){return this.focus()}getFormFieldProps(){return{state:this.state,class:clsx("kol-form-field-textarea",{"kol-form-field--has-value":this.state._hasValue,"kol-form-field--has-counter":this.controller.hasSoftCharacterLimit()||this.controller.hasCounter()}),tooltipAlign:this._tooltipAlign,alert:this.showAsAlert()}}getTextAreaProps(){const e="number"==typeof this.state._maxLength?[`${this.state._id}-character-limit-hint`]:void 0;return Object.assign(Object.assign({ref:this.catchRef,state:this.state,style:{resize:this.state._resize},ariaDescribedBy:e},this.controller.onFacade),{onInput:this.onInput,onFocus:e=>{this.controller.onFacade.onFocus(e),this.inputHasFocus=!0},onBlur:e=>{this.controller.onFacade.onBlur(e),this.inputHasFocus=!1}})}render(){return h(FormFieldStateWrapper,Object.assign({key:"8c0e36e0f3518438ad47719a0487838b50458bfa"},this.getFormFieldProps()),h(InputContainerStateWrapperFc,{key:"46550d2a7fe6d389b92205e55da49cd30e525fb3",state:this.state},h(TextAreaStateWrapper,Object.assign({key:"95bfd7318945abbd30a807e2f705946d8e2dabf1"},this.getTextAreaProps()))))}constructor(e){registerInstance(this,e),this.catchRef=e=>{this.textareaRef=e},this._adjustHeight=!1,this._disabled=!1,this._hideMsg=!1,this._hideLabel=!1,this._hint="",this._hasCounter=!1,this._maxLengthBehavior="hard",this._readOnly=!1,this._resize="vertical",this._required=!1,this._tooltipAlign="top",this._touched=!1,this.state={_adjustHeight:!1,_currentLength:0,_currentLengthDebounced:0,_hasValue:!1,_hideMsg:!1,_id:`id-${nonce()}`,_label:"",_resize:"vertical"},this.inputHasFocus=!1,this.onInput=e=>{this.textareaRef instanceof HTMLTextAreaElement&&(this._value=this.textareaRef.value,this.state._adjustHeight&&(this._rows=increaseTextareaHeight(this.textareaRef)),this.controller.onFacade.onInput(e))},this.controller=new TextareaController(this,"textarea",this.host)}showAsAlert(){return Boolean(this.state._touched)&&!this.inputHasFocus}validateAccessKey(e){this.controller.validateAccessKey(e)}validateAdjustHeight(e){this.controller.validateAdjustHeight(e)}validateDisabled(e){this.controller.validateDisabled(e)}validateHideMsg(e){this.controller.validateHideMsg(e)}validateHideLabel(e){this.controller.validateHideLabel(e)}validateHasCounter(e){this.controller.validateHasCounter(e)}validateHint(e){this.controller.validateHint(e)}validateIcons(e){this.controller.validateIcons(e)}validateId(e){this.controller.validateId(e)}validateLabel(e){this.controller.validateLabel(e)}validateMaxLength(e){this.controller.validateMaxLength(e)}validateMaxLengthBehavior(e){this.controller.validateMaxLengthBehavior(e)}validateMsg(e){this.controller.validateMsg(e)}validateName(e){this.controller.validateName(e)}validateOn(e){this.controller.validateOn(e)}validatePlaceholder(e){this.controller.validatePlaceholder(e)}validateReadOnly(e){this.controller.validateReadOnly(e)}validateResize(e){this.controller.validateResize(e)}validateRequired(e){this.controller.validateRequired(e)}validateRows(e){this.controller.validateRows(e)}validateShortKey(e){this.controller.validateShortKey(e)}validateSpellCheck(e){this.controller.validateSpellCheck(e)}validateSyncValueBySelector(e){this.controller.validateSyncValueBySelector(e)}validateTouched(e){this.controller.validateTouched(e)}validateValue(e){this.controller.validateValue(e)}componentDidLoad(){setTimeout(()=>{var e;!0===this._adjustHeight&&this.textareaRef?this._rows=(null===(e=this.state)||void 0===e?void 0:e._rows)&&this.state._rows>increaseTextareaHeight(this.textareaRef)?this.state._rows:increaseTextareaHeight(this.textareaRef):this._rows||(this._rows=1)},0)}componentWillLoad(){this._touched=!0===this._touched,this.controller.componentWillLoad(),this.state._hasValue=!!this.state._value,this.controller.addValueChangeListener(e=>this.state._hasValue=!!e)}get host(){return getElement(this)}static get watchers(){return{_accessKey:[{validateAccessKey:0}],_adjustHeight:[{validateAdjustHeight:0}],_disabled:[{validateDisabled:0}],_hideMsg:[{validateHideMsg:0}],_hideLabel:[{validateHideLabel:0}],_hasCounter:[{validateHasCounter:0}],_hint:[{validateHint:0}],_icons:[{validateIcons:0}],_id:[{validateId:0}],_label:[{validateLabel:0}],_maxLength:[{validateMaxLength:0}],_maxLengthBehavior:[{validateMaxLengthBehavior:0}],_msg:[{validateMsg:0}],_name:[{validateName:0}],_on:[{validateOn:0}],_placeholder:[{validatePlaceholder:0}],_readOnly:[{validateReadOnly:0}],_resize:[{validateResize:0}],_required:[{validateRequired:0}],_rows:[{validateRows:0}],_shortKey:[{validateShortKey:0}],_spellCheck:[{validateSpellCheck:0}],_syncValueBySelector:[{validateSyncValueBySelector:0}],_touched:[{validateTouched:0}],_value:[{validateValue:0}]}}};KolTextarea.style={default:defaultStyleCss()};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-BuVNvMVh.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{n as nonce}from"./dev.utils-Bl9mUZR6.js";import{o as KolButtonTag}from"./component-names-C3fyby67.js";import{K as KolAlertFc}from"./Alert-DFxK42_b.js";import"./common-Dd0zJQbD.js";import"./markdown-BSkXjaSn.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import"./i18n-CfLoIZ8T.js";import"./bem-C27SfH6w.js";import"./browser-DiRe0qUf.js";import"./Heading-DqCQ4tvo.js";const ToastItemFc=t=>{var{status:n,toast:e,onClose:o}=t,s=__rest(t,["status","toast","onClose"]);const{type:i,label:a,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:a,level:0,hasCloser:!0,type:i,variant:r||"card",onCloserClick:o},h("div",Object.assign({},s),l)))},defaultStyleCss="/*\n* This file defines the layer order for all CSS layers used in KoliBri.\n* The order is important as it determines the cascade priority.\n*\n* Layer order (lowest to highest priority):\n* 1. kol-a11y - Accessibility defaults and requirements\n* 2. kol-global - Global component styles and resets\n* 3. kol-component - Component-specific styles\n* 4. kol-theme-global - Theme-specific global styles\n* 5. kol-theme-component - Theme-specific component styles\n*/\n@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;\n/* forward the rem function */\n/*\n * This file contains all rules for accessibility.\n */\n@layer kol-a11y {\n  :host {\n    /*\n                   * Minimum size of interactive elements.\n                   */\n    --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));\n    /*\n     * No element should be used without verifying the contrast ratio of its background and font colors.\n     * By initially setting the background color to white and the font color to black,\n     * the contrast ratio is ensured and explicit adjustment is forced.\n     */\n    color: black;\n    background-color: white;\n    /*\n     * Verdana is an accessible font that can be used without requiring additional loading time.\n     */\n    font-family: Verdana;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n    /*\n     * Text should be aligned left by default to provide a predictable starting point.\n     */\n    text-align: left;\n  }\n  * {\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    hyphens: auto;\n    /*\n     * This rule enables the word dividing for all texts. That is important for high zoom levels.\n     */\n    word-break: break-word;\n  }\n  /*\n   * All interactive elements should have a minimum size of to-rem(44).\n   */\n  /* input:not([type='checkbox'], [type='radio'], [type='range']), */\n  /* option, */\n  /* select, */\n  /* textarea, */\n  button,\n  .kol-input .input {\n    min-width: var(--a11y-min-size);\n    min-height: var(--a11y-min-size);\n  }\n  /*\n   * Some interactive elements should not inherit the font-family and font-size.\n   */\n  a,\n  button,\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6,\n  input,\n  option,\n  select,\n  textarea {\n    /*\n     * All elements should inherit the text color from his parent element.\n     */\n    color: inherit;\n    /*\n     * All elements should inherit the font family from his parent element.\n     */\n    font-family: inherit;\n    /*\n     * All elements should inherit the font size from his parent element.\n     */\n    font-size: inherit;\n    /*\n     * Letter spacing is required for all texts.\n     */\n    letter-spacing: inherit;\n    /*\n     * Word spacing is required for all texts.\n     */\n    word-spacing: inherit;\n  }\n  /**\n  * Sometimes we need the semantic element for accessibility reasons,\n  * but we don't want to show it.\n  *\n  * - https://www.a11yproject.com/posts/how-to-hide-content/\n  */\n  .visually-hidden {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    white-space: nowrap;\n    clip-path: inset(50%);\n  }\n}\n@layer kol-global {\n  /*\n   * Dieses CSS stellt sicher, dass der Standard-Style\n   * von A und Button resettet werden.\n   */\n  :is(a, button) {\n    background-color: transparent;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    border: none;\n    /* 100% needed for custom width from outside */\n  }\n  /*\n   * Ensure elements with hidden attribute to be actually not visible\n   * @see https://meowni.ca/hidden.is.a.lie.html\n   */\n  [hidden] {\n    display: none !important;\n  }\n  .badge-text-hint {\n    color: black;\n    background-color: lightgray;\n  }\n}\n@layer kol-global {\n  :host {\n    /*\n     * The max-width is needed to prevent the table from overflowing the\n     * parent node, if the table is wider than the parent node.\n     */\n    max-width: 100%;\n    font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  * {\n    /*\n     * We prefer to box-sizing: border-box for all elements.\n     */\n    box-sizing: border-box;\n  }\n  .kol-span {\n    /* KolSpan is a layout component with icons in all directions and a label text in the middle. */\n    display: flex;\n    flex-flow: column;\n    align-items: center;\n    justify-content: 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    align-items: center;\n  }\n  a,\n  button {\n    cursor: pointer;\n  }\n  .kol-span .kol-span__label--hide-label .kol-span__label {\n    display: none;\n  }\n  /* Reset browser agent style. */\n  button:disabled {\n    color: unset;\n  }\n  .disabled label,\n  .disabled:focus-within label,\n  [aria-disabled=true],\n  [aria-disabled=true]:focus,\n  [disabled],\n  [disabled]:focus {\n    opacity: 0.5;\n    outline: none;\n    cursor: not-allowed;\n  }\n  [aria-disabled=true]:focus .kol-span,\n  [disabled]:focus .kol-span {\n    outline: none !important;\n  }\n}\n@layer kol-component {\n  :host {\n    display: block;\n  }\n}\n@layer kol-component {\n  .kol-tooltip {\n    display: contents;\n  }\n  .kol-tooltip__floating {\n    opacity: 0;\n    display: none;\n    position: fixed;\n    /* Avoid layout interference - see https://floating-ui.com/docs/computePosition */\n    top: 0;\n    left: 0;\n    /* Can be used to specify the tooltip-width from the outside. Unset by default.  */\n    width: var(--kol-tooltip-width, max-content);\n    min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));\n    max-width: 90vw;\n    max-height: 90vh;\n    animation-direction: normal;\n    /* Can be used to specify the animation duration from the outside. 250ms by default. */\n    animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);\n    animation-fill-mode: forwards;\n    animation-iteration-count: 1;\n    animation-timing-function: ease-in;\n  }\n  .kol-tooltip__floating.hide {\n    animation-name: hideTooltip;\n  }\n  .kol-tooltip__floating.show {\n    animation-name: showTooltip;\n  }\n  .kol-tooltip__arrow {\n    transform: rotate(45deg);\n    color: #000;\n    background-color: #fff;\n    position: absolute;\n    z-index: 999;\n    width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n    height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  .kol-tooltip__content {\n    color: #000;\n    background-color: #fff;\n    position: relative;\n    z-index: 1000;\n  }\n  @keyframes hideTooltip {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n      display: none;\n    }\n  }\n  @keyframes showTooltip {\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    display: flex;\n    place-items: center;\n  }\n  .kol-alert__container-content {\n    flex-grow: 1;\n  }\n  .kol-alert__closer {\n    /* Visible with forced colors */\n    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));\n  }\n  :host {\n    display: flex;\n    position: fixed;\n    z-index: 200;\n    max-width: 90vw;\n    flex-direction: column;\n  }\n  .kol-toast-container__close-all {\n    align-self: flex-end;\n  }\n}",TRANSITION_TIMEOUT=300,KolToastContainer=class{constructor(t){registerInstance(this,t),this.state={_toastStates:[]},this.translateToastCloseAll=translate("kol-toast-close-all"),this.knownRenderFunctions=new Set}async enqueue(t){const n={toast:Object.assign(Object.assign({},t),{variant:"card"}),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(()=>{var n,e;this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(n=>n.id!==t.id)}),null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)},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))}),t.forEach(t=>{var n,e;null===(e=(n=t.toast).onClose)||void 0===e||e.call(n)})},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:"05182cc920080f5bc3c06bb647a1bf59c58fae8d",class:"kol-toast-container"},this.state._toastStates.length>1&&h(KolButtonTag,{key:"e4e196489dd617e994ba8c11c38893dd505db1e1",_label:this.translateToastCloseAll,class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map(t=>h(ToastItemFc,{key:t.id,onClose:()=>this.handleClose(t),ref:n=>this.handleToastRef(t,n),toast:t.toast,status:t.status})))}};KolToastContainer.style={default:defaultStyleCss};export{KolToastContainer as kol_toast_container};
+import{h,r as registerInstance,H as Host}from"./index-BVfSKhpj.js";import{t as translate}from"./i18n-LBpyQ66X.js";import{n as nonce}from"./dev.utils-CT0IU26V.js";import{o as KolButtonTag}from"./component-names-C3fyby67.js";import{K as KolAlertFc}from"./Alert-I3c2hFqL.js";import"./common-Dd0zJQbD.js";import"./markdown-BSkXjaSn.js";import{_ as __rest}from"./tslib.es6-CxX45GIN.js";import{c as clsx}from"./clsx-eK3rPvPS.js";import"./i18n-CfLoIZ8T.js";import"./bem-Dj4gWVFO.js";import"./browser-DiRe0qUf.js";import"./Heading-DwQEABii.js";const ToastItemFc=t=>{var{status:o,toast:e,onClose:a}=t,s=__rest(t,["status","toast","onClose"]);const{type:i,label:n,description:l,variant:r}=e;return h("div",{class:clsx("kol-toast-item",`kol-toast-item--${o}`)},h(KolAlertFc,{class:"kol-toast-item__alert",alert:!0,label:n,level:0,hasCloser:!0,type:i,variant:r||"card",onCloserClick:a},h("div",Object.assign({},s),l)))},defaultStyleCss=()=>" @layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;   @layer kol-a11y {   :host {          --a11y-min-size: calc(44 * 1rem / var(--kolibri-root-font-size, 16));          color: black;     background-color: white;          font-family: Verdana;          letter-spacing: inherit;          word-spacing: inherit;          text-align: left;   }   * {          hyphens: auto;          word-break: break-word;   }                  button,   .kol-input .input {     min-width: var(--a11y-min-size);     min-height: var(--a11y-min-size);   }      a,   button,   h1,   h2,   h3,   h4,   h5,   h6,   input,   option,   select,   textarea {          color: inherit;          font-family: inherit;          font-size: inherit;          letter-spacing: inherit;          word-spacing: inherit;   }      .visually-hidden {     position: fixed;     top: 0;     left: 0;     width: 1px;     height: 1px;     overflow: hidden;     white-space: nowrap;     clip-path: inset(50%);   } } @layer kol-global {      :is(a, button) {     background-color: transparent;     width: 100%;     margin: 0;     padding: 0;     border: none;        }      [hidden] {     display: none !important;   }   .badge-text-hint {     color: black;     background-color: lightgray;   } } @layer kol-global {   :host {          max-width: 100%;     font-size: calc(16 * 1rem / var(--kolibri-root-font-size, 16));   }   * {          box-sizing: border-box;   }   .kol-span {          display: flex;     flex-flow: column;     align-items: center;     justify-content: center;        }   .kol-span__container {     display: flex;     align-items: center;   }   a,   button {     cursor: pointer;   }   .kol-span .kol-span__label--hide-label .kol-span__label {     display: none;   }      button:disabled {     color: unset;   }   .disabled label,   .disabled:focus-within label,   [aria-disabled=true],   [aria-disabled=true]:focus,   [disabled],   [disabled]:focus {     opacity: 0.5;     outline: none;     cursor: not-allowed;   }   [aria-disabled=true]:focus .kol-span,   [disabled]:focus .kol-span {     outline: none !important;   } } @layer kol-component {   :host {     display: block;   } } @layer kol-component {   .kol-tooltip {     display: contents;   }   .kol-tooltip__floating {     opacity: 0;     display: none;     position: fixed;          top: 0;     left: 0;          width: var(--kol-tooltip-width, max-content);     min-width: calc(8 * 1rem / var(--kolibri-root-font-size, 16));     max-width: 90vw;     max-height: 90vh;     animation-direction: normal;          animation-duration: var(--kolibri-tooltip-animation-duration, 250ms);     animation-fill-mode: forwards;     animation-iteration-count: 1;     animation-timing-function: ease-in;   }   .kol-tooltip__floating.hide {     animation-name: hideTooltip;   }   .kol-tooltip__floating.show {     animation-name: showTooltip;   }   .kol-tooltip__arrow {     transform: rotate(45deg);     color: #000;     background-color: #fff;     position: absolute;     z-index: 999;     width: calc(10 * 1rem / var(--kolibri-root-font-size, 16));     height: calc(10 * 1rem / var(--kolibri-root-font-size, 16));   }   .kol-tooltip__content {     color: #000;     background-color: #fff;     position: relative;     z-index: 1000;   }   @keyframes hideTooltip {     0% {       opacity: 1;     }     100% {       opacity: 0;       display: none;     }   }   @keyframes showTooltip {     0% {       opacity: 0;     }     100% {       opacity: 1;     }   } } @layer kol-component {   .kol-alert {     display: grid;   }   .kol-alert__container {     display: flex;     place-items: center;   }   .kol-alert__container-content {     flex-grow: 1;   }   .kol-alert__closer {          outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));   }   :host {     display: flex;     position: fixed;     z-index: 200;     max-width: 90vw;     flex-direction: column;   }   .kol-toast-container__close-all {     align-self: flex-end;   } }",TRANSITION_TIMEOUT=300,KolToastContainer=class{constructor(t){registerInstance(this,t),this.state={_toastStates:[]},this.translateToastCloseAll=translate("kol-toast-close-all"),this.knownRenderFunctions=new Set}async enqueue(t){const o={toast:Object.assign(Object.assign({},t),{variant:"card"}),status:"adding",id:`toast-${nonce()}`};return this.state=Object.assign(Object.assign({},this.state),{_toastStates:[o,...this.state._toastStates]}),setTimeout(()=>{this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(t=>t.id===o.id&&"removing"!==t.status?Object.assign(Object.assign({},t),{status:"settled"}):t)})},300),()=>{this.handleClose(o)}}handleClose(t){this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.map(o=>(o.id===t.id&&(o.status="removing"),o))}),setTimeout(()=>{var o,e;this.state=Object.assign(Object.assign({},this.state),{_toastStates:this.state._toastStates.filter(o=>o.id!==t.id)}),null===(e=(o=t.toast).onClose)||void 0===e||e.call(o)},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(o=>t.every(t=>t.id!==o.id))}),t.forEach(t=>{var o,e;null===(e=(o=t.toast).onClose)||void 0===e||e.call(o)})},300)}}handleToastRef(t,o){o&&"function"==typeof t.toast.render&&!this.knownRenderFunctions.has(t.toast.render)&&(this.knownRenderFunctions.add(t.toast.render),t.toast.render(o,{close:()=>this.handleClose(t)}))}render(){return h(Host,{key:"05182cc920080f5bc3c06bb647a1bf59c58fae8d",class:"kol-toast-container"},this.state._toastStates.length>1&&h(KolButtonTag,{key:"e4e196489dd617e994ba8c11c38893dd505db1e1",_label:this.translateToastCloseAll,class:"kol-toast-container__button-close-all",_on:{onClick:()=>{this.closeAll()}}}),this.state._toastStates.map(t=>h(ToastItemFc,{key:t.id,onClose:()=>this.handleClose(t),ref:o=>this.handleToastRef(t,o),toast:t.toast,status:t.status})))}};KolToastContainer.style={default:defaultStyleCss()};export{KolToastContainer as kol_toast_container};