@public-ui/components 4.3.1-rc.5 → 4.4.0-rc.0

package/dist/collection/components/table-stateful/style.css

@@ -9,8 +9,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /* forward the rem function */
 /*
  * This file contains all rules for accessibility.
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style
@@ -215,8 +255,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1788342613987"); /* IE9*/
-  src: url("kolicons.eot?t=1788342613987#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788342613987") format("woff2"), url("kolicons.woff?t=1788342613987") format("woff"), url("kolicons.ttf?t=1788342613987") format("truetype"), url("kolicons.svg?t=1788342613987#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1788788973815"); /* IE9*/
+  src: url("kolicons.eot?t=1788788973815#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788788973815") format("woff2"), url("kolicons.woff?t=1788788973815") format("woff"), url("kolicons.ttf?t=1788788973815") format("truetype"), url("kolicons.svg?t=1788788973815#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -511,6 +551,102 @@
   }
 }
 @layer kol-component {
+  .kol-icon {
+    color: inherit;
+    display: inline-block;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+  .kol-card .kol-icon {
+    color: inherit;
+    display: inline-block;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+  .kol-card :host {
+    display: inline-block;
+  }
+  .kol-card .kol-button {
+    display: flex;
+    height: 100%;
+    min-height: var(--a11y-min-size);
+    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
+    text-decoration-line: none;
+  }
+  .kol-card .kol-button::before {
+    /* Render zero-width character as first element to set the baseline correctly. */
+    content: "​";
+  }
+  .kol-card .kol-button__text {
+    flex: 1 0 100%;
+  }
+  .kol-card .kol-button {
+    /* The link skeleton renders the anchor as `.kol-link__anchor` inside the `.kol-link`
+       wrapper. The UA default underline sits on the anchor itself, so suppressing
+       `text-decoration` on the wrapper alone is not enough. The remaining declarations
+       restore the box the root element was before the skeleton migration. */
+  }
+  .kol-card .kol-button__anchor {
+    display: flex;
+    text-align: left;
+    text-decoration-line: none;
+    /* The zero-width baseline character used to live on the root element, which was the
+       flex container positioning the text. In the link skeleton the anchor is that
+       container, so the character has to move with it — otherwise the text sits 1px off. */
+  }
+  .kol-card .kol-button__anchor::before {
+    content: "​";
+  }
+  .kol-card .kol-button--external-link > .kolicon-link-external::before, .kol-card .kol-button--external-link .kol-button__anchor > .kolicon-link-external::before {
+    content: none;
+  }
+  .kol-card {
+    /* Visible with forced colors  */
+    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    display: grid;
+    height: 100%;
+    overflow: visible;
+    grid-template-areas: "header  close" "content content";
+    grid-template-columns: 1fr min-content;
+    grid-template-rows: min-content 1fr;
+  }
+  .kol-card__header {
+    align-self: start;
+    grid-area: header;
+  }
+  .kol-card__content {
+    align-self: stretch;
+    grid-area: content;
+  }
+  .kol-card__close-button {
+    grid-area: close;
+  }
+  .kol-card:has(.kol-card__link) {
+    position: relative;
+  }
+  .kol-card__link::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    cursor: pointer;
+  }
+  .kol-dialog,
+  .kol-modal {
+    min-height: var(--a11y-min-size);
+    padding: 0;
+    border: 0;
+    /* Prevent scroll chaining from scrollable dialog content to the page. */
+    overscroll-behavior: contain;
+  }
+  .kol-dialog__close-button,
+  .kol-modal__close-button {
+    position: absolute;
+    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    z-index: 1;
+  }
   .kol-alert .kol-icon {
     color: inherit;
     display: inline-block;
@@ -728,20 +864,28 @@
   .kol-table__cell--align-left {
     text-align: left;
   }
-  .kol-table__cell--align-left .kol-button__text {
+  .kol-table__cell--align-left .kol-table__sort-button .kol-button__text {
     align-items: start;
+    text-align: start;
+  }
+  .kol-table__cell--align-left .kol-table__cell-actions {
+    justify-content: flex-start;
   }
   .kol-table__cell--align-center {
     text-align: center;
   }
-  .kol-table__cell--align-center .kol-button__text {
+  .kol-table__cell--align-center .kol-table__sort-button .kol-button__text {
     align-items: center;
   }
   .kol-table__cell--align-right {
     text-align: right;
   }
-  .kol-table__cell--align-right .kol-button__text {
+  .kol-table__cell--align-right .kol-table__sort-button .kol-button__text {
     align-items: end;
+    text-align: end;
+  }
+  .kol-table__cell--align-right .kol-table__cell-actions {
+    justify-content: flex-end;
   }
   .kol-table__cell--selection {
     background-color: white;
@@ -1054,7 +1198,7 @@
     align-items: flex-start;
     justify-content: flex-start;
   }
-  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden])::after,
+  .kol-form-field--required .kol-form-field__label-text:has(.kol-span__slot[hidden]) .kol-span__label::after,
   .kol-form-field--required .kol-form-field .kol-tooltip__content .kol-span__label::after {
     content: "*"/"";
   }

package/dist/collection/components/table-stateless/component.js

@@ -740,17 +740,17 @@ export class KolTableStatelessWc {
         this.checkboxRefs = [];
         const horizontalHeaders = this.state._headerCells.horizontal;
         const showInternalCaption = !((_a = this.externalLabelElements) === null || _a === void 0 ? void 0 : _a.length);
-        return (h("div", { key: 'f232abaa4a662134c933b25a4c6c3cafaf69d128', class: clsx('kol-table', {
+        return (h("div", { key: 'a343ce728398208cc73ddc585fb0a679e5943289', class: clsx('kol-table', {
                 [classNameFromVariant(this.state._variant, 'table')]: this.state._variant !== undefined,
-            }) }, this.state._hasSettingsMenu && h(KolTableSettingsWcTag, { key: 'e03c7af55fe829bfe8fd54601573e877ccb71a97', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), h("div", { key: '82be33452bf78587e0e145836882dca71f3887fb', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? (showInternalCaption ? '-1' : '0') : undefined }, h("table", { key: 'b9c42f56265fa0f061f605d8588ab0ed369f8cb6', ref: (el) => {
+            }) }, this.state._hasSettingsMenu && h(KolTableSettingsWcTag, { key: '189aef8ba3b0cfeaeac45a38d72ff7d8e2a13fae', _horizontalHeaderCells: horizontalHeaders !== null && horizontalHeaders !== void 0 ? horizontalHeaders : [] }), h("div", { key: '2d2fa1bea3d55c35310691a599a164a7a3db7782', ref: (element) => (this.tableDivElement = element), class: "kol-table__scroll-container", tabindex: this.tableDivElementHasScrollbar ? (showInternalCaption ? '-1' : '0') : undefined }, h("table", { key: '7f000fa48a601f7093a1c6a5a686e6d0496ed2b0', ref: (el) => {
                 this.tableRef = el;
                 this.syncTableLabel(this.externalLabelElements);
             }, "aria-labelledby": showInternalCaption ? 'caption' : undefined, class: "kol-table__table", style: {
                 minWidth: this.getTableMinWidth(),
-            } }, showInternalCaption && (h("caption", { key: 'f7d273bba88bbc4d3ab4940ce9acb5ed0b59b0ae', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label)), Array.isArray(horizontalHeaders) && (h("thead", { key: 'dff5630d4834417474318a4043950b56821349b9', class: "kol-table__head" }, [
+            } }, showInternalCaption && (h("caption", { key: '15268cbfcfa61820b8467b7044c4d5c31b10a5b3', class: "kol-table__focus-element kol-table__caption", id: "caption", tabindex: this.tableDivElementHasScrollbar ? '0' : undefined }, this.state._label)), Array.isArray(horizontalHeaders) && (h("thead", { key: '41a67e4f67cbe115872f24550e3398215926bea7', class: "kol-table__head" }, [
             horizontalHeaders.map((cols, rowIndex) => (h("tr", { class: "kol-table__head-row", key: `thead-${rowIndex}` }, this.state._selection && this.renderHeadingSelectionCell(), rowIndex === 0 && this.renderHeaderTdCell(), Array.isArray(cols) && cols.map((cell, colIndex) => this.renderHeadingCell(cell, rowIndex, colIndex, false))))),
             this.renderSpacer('head', horizontalHeaders),
-        ])), h("tbody", { key: '00b6afd1196648d37584a2a823edb714fd791509', class: "kol-table__body" }, h("div", { key: '6a192afb74de3b02929174993307d6337fce4e3d', class: clsx(this.state._loading && 'kol-table__loader--shown') }, h(SpinFC, { key: '1057d4e704c8c181c370a67a30ebcaa9775ad7af', label: this.state._loading
+        ])), h("tbody", { key: '7e489c3abc07fdcbad467bd49418f37b08bdc114', class: "kol-table__body" }, h("div", { key: '17002a8303c76961cfc9c13071d6efae2680c41a', class: clsx(this.state._loading && 'kol-table__loader--shown') }, h(SpinFC, { key: 'c2d3edd87d28468ed8546800ef5847d8e7f372ca', label: this.state._loading
                 ? this.translateDataLoading.replace('{{caption}}', this.state._label)
                 : this.translateDataLoaded.replace('{{caption}}', this.state._label), show: !!this.state._loading, variant: "cycle" })), dataField.map((row, rowIndex) => this.renderTableRow(row, rowIndex, true))), this.renderFoot()))));
     }

package/dist/collection/components/table-stateless/shadow.js

@@ -25,7 +25,7 @@ export class KolTableStateless {
         }
     }
     render() {
-        return (h(KolTableStatelessWcTag, { key: 'e41dc9f826610b599734d1ad7dedcdb7d740a228', externalLabelElements: this.resolvedElements, _data: this._data, _dataFoot: this._dataFoot, _fixedCols: this._fixedCols, _headerCells: this._headerCells, _label: this._label, _loading: this._loading, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu, _variant: this._variant }));
+        return (h(KolTableStatelessWcTag, { key: '3fd0b44bb0bdaafc3c5d1a44f2c04b92acd4de52', externalLabelElements: this.resolvedElements, _data: this._data, _dataFoot: this._dataFoot, _fixedCols: this._fixedCols, _headerCells: this._headerCells, _label: this._label, _loading: this._loading, _on: this._on, _selection: this._selection, _hasSettingsMenu: this._hasSettingsMenu, _variant: this._variant }));
     }
     static get is() { return "kol-table-stateless"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/table-stateless/style.css

@@ -9,8 +9,10 @@
 * 3. kol-component - Component-specific styles
 * 4. kol-theme-global - Theme-specific global styles
 * 5. kol-theme-component - Theme-specific component styles
+* 6. kol-forced-colors - Defaults for forced colors and high contrast modes
+* 7. kol-theme-forced-colors - Theme-specific styles for forced colors and high contrast modes
 */
-@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component;
+@layer kol-a11y, kol-global, kol-component, kol-theme-global, kol-theme-component, kol-forced-colors, kol-theme-forced-colors;
 /* forward the rem function */
 /*
  * This file contains all rules for accessibility.
@@ -128,6 +130,44 @@
     clip-path: inset(50%);
   }
 }
+/*
+ * This file contains all rules for forced-colors and highcontrast modes
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/system-color to see all color keywords the browsers are providing
+ */
+@layer kol-forced-colors {
+  @media (forced-colors: active) {
+    .kol-button__text {
+      color: ButtonText;
+      background-color: ButtonFace;
+      border: 2px solid ButtonBorder;
+    }
+    .kol-button--disabled .kol-button__text {
+      color: GrayText;
+      border-color: GrayText;
+    }
+    .kol-card,
+    .kol-dialog,
+    .kol-modal,
+    .kol-drawer {
+      color: CanvasText;
+      background-color: Canvas;
+      border: 1px solid ButtonBorder;
+    }
+    .kol-pagination__button--selected .kol-button {
+      opacity: 1;
+    }
+    .kol-pagination__button--selected .kol-button__text {
+      color: SelectedItemText;
+      background-color: SelectedItem;
+    }
+    /* focus styles */
+    .kol-button:focus-visible,
+    .kol-link__anchor:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+  }
+}
 @layer kol-global {
   /*
    * Dieses CSS stellt sicher, dass der Standard-Style
@@ -215,8 +255,8 @@
 }
 @font-face {
   font-family: "kolicons";
-  src: url("kolicons.eot?t=1788342613987"); /* IE9*/
-  src: url("kolicons.eot?t=1788342613987#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788342613987") format("woff2"), url("kolicons.woff?t=1788342613987") format("woff"), url("kolicons.ttf?t=1788342613987") format("truetype"), url("kolicons.svg?t=1788342613987#kolicons") format("svg"); /* iOS 4.1- */
+  src: url("kolicons.eot?t=1788788973815"); /* IE9*/
+  src: url("kolicons.eot?t=1788788973815#iefix") format("embedded-opentype"), url("kolicons.woff2?t=1788788973815") format("woff2"), url("kolicons.woff?t=1788788973815") format("woff"), url("kolicons.ttf?t=1788788973815") format("truetype"), url("kolicons.svg?t=1788788973815#kolicons") format("svg"); /* iOS 4.1- */
 }
 @layer kol-component {
   [class^=kolicon-], [class*=" kolicon-"] {
@@ -511,6 +551,102 @@
   }
 }
 @layer kol-component {
+  .kol-icon {
+    color: inherit;
+    display: inline-block;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+  .kol-card .kol-icon {
+    color: inherit;
+    display: inline-block;
+    font-size: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+  }
+  .kol-card :host {
+    display: inline-block;
+  }
+  .kol-card .kol-button {
+    display: flex;
+    height: 100%;
+    min-height: var(--a11y-min-size);
+    font-style: calc(16 * 1rem / var(--kolibri-root-font-size, 16));
+    text-decoration-line: none;
+  }
+  .kol-card .kol-button::before {
+    /* Render zero-width character as first element to set the baseline correctly. */
+    content: "​";
+  }
+  .kol-card .kol-button__text {
+    flex: 1 0 100%;
+  }
+  .kol-card .kol-button {
+    /* The link skeleton renders the anchor as `.kol-link__anchor` inside the `.kol-link`
+       wrapper. The UA default underline sits on the anchor itself, so suppressing
+       `text-decoration` on the wrapper alone is not enough. The remaining declarations
+       restore the box the root element was before the skeleton migration. */
+  }
+  .kol-card .kol-button__anchor {
+    display: flex;
+    text-align: left;
+    text-decoration-line: none;
+    /* The zero-width baseline character used to live on the root element, which was the
+       flex container positioning the text. In the link skeleton the anchor is that
+       container, so the character has to move with it — otherwise the text sits 1px off. */
+  }
+  .kol-card .kol-button__anchor::before {
+    content: "​";
+  }
+  .kol-card .kol-button--external-link > .kolicon-link-external::before, .kol-card .kol-button--external-link .kol-button__anchor > .kolicon-link-external::before {
+    content: none;
+  }
+  .kol-card {
+    /* Visible with forced colors  */
+    outline: transparent solid calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    display: grid;
+    height: 100%;
+    overflow: visible;
+    grid-template-areas: "header  close" "content content";
+    grid-template-columns: 1fr min-content;
+    grid-template-rows: min-content 1fr;
+  }
+  .kol-card__header {
+    align-self: start;
+    grid-area: header;
+  }
+  .kol-card__content {
+    align-self: stretch;
+    grid-area: content;
+  }
+  .kol-card__close-button {
+    grid-area: close;
+  }
+  .kol-card:has(.kol-card__link) {
+    position: relative;
+  }
+  .kol-card__link::after {
+    position: absolute;
+    inset: 0;
+    content: "";
+    cursor: pointer;
+  }
+  .kol-dialog,
+  .kol-modal {
+    min-height: var(--a11y-min-size);
+    padding: 0;
+    border: 0;
+    /* Prevent scroll chaining from scrollable dialog content to the page. */
+    overscroll-behavior: contain;
+  }
+  .kol-dialog__close-button,
+  .kol-modal__close-button {
+    position: absolute;
+    top: calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    right: calc(1 * 1rem / var(--kolibri-root-font-size, 16));
+    z-index: 1;
+  }
   .kol-alert .kol-icon {
     color: inherit;
     display: inline-block;
@@ -728,20 +864,28 @@
   .kol-table__cell--align-left {
     text-align: left;
   }
-  .kol-table__cell--align-left .kol-button__text {
+  .kol-table__cell--align-left .kol-table__sort-button .kol-button__text {
     align-items: start;
+    text-align: start;
+  }
+  .kol-table__cell--align-left .kol-table__cell-actions {
+    justify-content: flex-start;
   }
   .kol-table__cell--align-center {
     text-align: center;
   }
-  .kol-table__cell--align-center .kol-button__text {
+  .kol-table__cell--align-center .kol-table__sort-button .kol-button__text {
     align-items: center;
   }
   .kol-table__cell--align-right {
     text-align: right;
   }
-  .kol-table__cell--align-right .kol-button__text {
+  .kol-table__cell--align-right .kol-table__sort-button .kol-button__text {
     align-items: end;
+    text-align: end;
+  }
+  .kol-table__cell--align-right .kol-table__cell-actions {
+    justify-content: flex-end;
   }
   .kol-table__cell--selection {
     background-color: white;

package/dist/collection/components/table-stateless/table-settings.js

@@ -3,7 +3,7 @@
  */
 import { __rest } from "tslib";
 import { h } from "@stencil/core";
-import { KolAlertWcTag, KolButtonWcTag, KolHeadingTag, KolInputCheckboxTag, KolInputNumberTag, KolPopoverButtonWcTag } from "../../core/component-names";
+import { KolAlertWcTag, KolButtonWcTag, KolDialogWcTag, KolInputCheckboxTag, KolInputNumberTag } from "../../core/component-names";
 import { translate } from "../../i18n";
 import { dispatchDomEvent, KolEvent } from "../../utils/events";
 import { parseColumnWidth } from "./controller";
@@ -65,7 +65,7 @@ export class KolTableSettings {
         var _a;
         this.editingHeaderCells = this.headerCells.map((row) => [...row]);
         this.errorMessage = null;
-        void ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
+        void ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close());
     }
     handleSubmit(event) {
         var _a;
@@ -95,18 +95,21 @@ export class KolTableSettings {
                 return cell;
             }));
             dispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);
-            void ((_a = this.popoverRef) === null || _a === void 0 ? void 0 : _a.hidePopover());
+            void ((_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.close());
         }
     }
     render() {
         const columns = this.getPrimaryRow();
-        return (h(KolPopoverButtonWcTag, { key: '1e1265f79fd8f69d35984da2862020efa8a8ba6b', ref: (el) => (this.popoverRef = el), class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _popoverAlign: "top", _hideLabel: true }, h("div", { key: 'b34f46a1cef82c74b67678b3cd15da7d3cc6152f', class: "kol-table-settings__content" }, h(KolHeadingTag, { key: '66f350f67e9f65cd5a6f8fa8a979fa8f59c5c594', _label: this.translateTableSettings, _level: 0 }), this.errorMessage && h(KolAlertWcTag, { key: '2a0b1571197cb2664ab0c29b72405decf3c1a51e', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), h("form", { key: '6f488781e1f85147d3f112442d4eb1d03785329a', onSubmit: this.handleSubmit.bind(this) }, h("div", { key: '5b6e2af8ffbb5e6c3d4092831311910374e5d637', class: "kol-table-settings__columns" }, columns.map((column, index) => (h("div", { key: column.key, class: "kol-table-settings__column" }, h(KolInputCheckboxTag, { _checked: column.visible !== false, _label: column.hidable
+        const onOpenDialog = {
+            onClick: () => { var _a; return (_a = this.dialogRef) === null || _a === void 0 ? void 0 : _a.showModal(); },
+        };
+        return (h("div", { key: '44a8d6968edf05923489a760c334df308e100d45' }, h(KolButtonWcTag, { key: 'f3f3cf7d45448ca7513953697ee91800ed5bcd8c', class: "kol-table-settings", _icons: "kolicon-settings", _label: this.translateTableSettings, _hideLabel: true, _on: onOpenDialog }), h(KolDialogWcTag, { key: '807825a32a0e11af249a51e257d791f9558d9c0c', _label: this.translateTableSettings, _variant: "card", ref: (el) => (this.dialogRef = el), _width: "fit-content" }, h("div", { key: 'a4553872be9da42062ce93b85367d86845c5e0e6', class: "kol-table-settings__content" }, this.errorMessage && h(KolAlertWcTag, { key: 'c5557d75ec11e1bf6c585b53efe400c5ccb45b77', _type: "error", _label: this.errorMessage, _variant: "msg", class: "kol-table-settings__error-message" }), h("form", { key: 'b72f947c448bd6695dbfc8e352ea4a1d51c255a5', onSubmit: this.handleSubmit.bind(this) }, h("div", { key: '5ae19989bb7116028e6cf98b04640721cdc4200e', class: "kol-table-settings__columns" }, columns.map((column, index) => (h("div", { key: column.key, class: "kol-table-settings__column" }, h(KolInputCheckboxTag, { _checked: column.visible !== false, _label: column.hidable
                 ? translate('kol-table-settings-column-hidable', { placeholders: { column: column.label } })
                 : translate('kol-table-settings-column-not-hidable', { placeholders: { column: column.label } }), _value: true, _hideLabel: true, _disabled: column.hidable === false, _on: { onInput: (_, value) => { var _a; return this.handleVisibilityChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h("span", { class: "kol-table-settings__column-label" }, column.label), h(KolInputNumberTag, { _hideLabel: true, _value: parseColumnWidth(column.width), _label: translate('kol-table-settings-column-width', { placeholders: { column: column.label } }), _min: 1, _disabled: column.resizable === false, _on: { onInput: (_, value) => { var _a; return this.handleWidthChange((_a = column.key) !== null && _a !== void 0 ? _a : '', value); } } }), h(KolButtonWcTag, { _icons: "kolicon-chevron-up", _label: column.sortable === false || index === 0
                 ? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })
                 : translate('kol-table-settings-move-up', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'up'); } }, _disabled: column.sortable === false || index === 0, "data-testid": "table-settings-move-up" }), h(KolButtonWcTag, { _icons: "kolicon-chevron-down", _label: column.sortable === false || index === columns.length - 1
                 ? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })
-                : translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" }))))), h("div", { key: '0ee11cc578d728f6ad8ee453ad79f45417d552c2', class: "kol-table-settings__actions" }, h(KolButtonWcTag, { key: 'fcb03ed1e43a7861620e4b1a059786879a9cfd92', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), h(KolButtonWcTag, { key: 'cbe42d521401180e38188e30451ce808c8b67478', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" }))))));
+                : translate('kol-table-settings-move-down', { placeholders: { column: column.label } }), _hideLabel: true, _variant: "ghost", _on: { onClick: () => { var _a; return this.moveColumn((_a = column.key) !== null && _a !== void 0 ? _a : '', 'down'); } }, _disabled: column.sortable === false || index === columns.length - 1, "data-testid": "table-settings-move-down" }))))), h("div", { key: '97eded2b81ac73aee1586d3d5eae15e6465c3e4c', class: "kol-table-settings__actions" }, h(KolButtonWcTag, { key: '07a475b56d11261c6ddd21ba1eafdcb2b9d7cc60', _label: this.translateTableSettingsCancel, _variant: "secondary", _on: { onClick: () => this.handleCancel() }, "data-testid": "table-settings-cancel" }), h(KolButtonWcTag, { key: '538ae0b53cbd870ecc586f34d1132e9909768752', _label: this.translateTableSettingsApply, _variant: "primary", _type: "submit", "data-testid": "table-settings-apply" })))))));
     }
     static get is() { return "kol-table-settings-wc"; }
     static get properties() {

package/dist/collection/components/table-stateless/table-settings.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-settings.js","sourceRoot":"","sources":["../../../src/components/table-stateless/table-settings.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,aAAa,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AACzJ,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,MAAM,OAAO,gBAAgB;IAJ7B;QAMU,gBAAW,GAA+B,EAAE,CAAC;QAC7C,uBAAkB,GAA+B,EAAE,CAAC;QACpD,iBAAY,GAAkB,IAAI,CAAC;QAC3B,2BAAsB,GAAG,SAAS,CAAC,oBAAoB,CAAC,CAAC;QACzD,iCAA4B,GAAG,SAAS,CAAC,2BAA2B,CAAC,CAAC;QACtE,gCAA2B,GAAG,SAAS,CAAC,0BAA0B,CAAC,CAAC;QACpE,+BAA0B,GAAG,SAAS,CAAC,wCAAwC,CAAC,CAAC;QAK1F,2BAAsB,GAA+B,EAAE,CAAC;KAyLhE;IAtLA,uBAAuB,CAAC,QAAoC;QAC3D,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACnD,IAAI,CAAC,kBAAkB,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,mBAAM,IAAI,EAAG,CAAC,CAAC,CAAC;IACnF,CAAC;IAEM,iBAAiB;QACvB,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAC;IAC3D,CAAC;IAIO,aAAa;;QACpB,OAAO,MAAA,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC,mCAAI,EAAE,CAAC;IAC1E,CAAC;IAEO,gBAAgB,CAAC,MAAgC;QACxD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IACvH,CAAC;IAEO,UAAU,CAAC,QAAgB,EAAE,SAAwB;QAC5D,MAAM,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACtC,MAAM,WAAW,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,CAAC;QACjE,IAAI,WAAW,KAAK,CAAC,CAAC;YAAE,OAAO;QAE/B,IAAI,WAAmB,CAAC;QACxB,IAAI,SAAS,KAAK,IAAI,EAAE,CAAC;YACxB,IAAI,WAAW,KAAK,CAAC;gBAAE,OAAO;YAC9B,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;QAC/B,CAAC;aAAM,CAAC;YACP,IAAI,WAAW,KAAK,GAAG,CAAC,MAAM,GAAG,CAAC;gBAAE,OAAO;YAC3C,WAAW,GAAG,WAAW,GAAG,CAAC,CAAC;QAC/B,CAAC;QAGD,MAAM,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAC5C,GAAG,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,MAAM,CAAC,CAAC;QACnC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEO,sBAAsB,CAAC,GAAW,EAAE,OAAgB;QAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC,iCAAM,GAAG,KAAE,OAAO,EAAE,OAAO,CAAC,OAAO,CAAC,IAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACxI,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEO,iBAAiB,CAAC,GAAW,EAAE,KAAc;QAIpD,MAAM,WAAW,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QACpD,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,GAAG,IAAI,GAAG,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC,iCAAM,GAAG,KAAE,KAAK,EAAE,WAAW,IAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;QACnI,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC;IAEO,YAAY;;QACnB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAClE,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,KAAK,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,EAAE,CAAA,CAAC;IACrC,CAAC;IAEO,YAAY,CAAC,KAAY;;QAChC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,UAAU,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QACxC,MAAM,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,KAAK,KAAK,CAAC,CAAC;QAE/E,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACvB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,0BAA0B,CAAC;YACpD,OAAO;QACR,CAAC;aAAM,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YAEzB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,mBAAM,IAAI,EAAG,CAAC,CAAC,CAAC;YAM1F,MAAM,oBAAoB,GAAG,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAChE,GAAG,CAAC,GAAG,CAAC,CAAC,MAAM,EAAuB,EAAE;gBACvC,MAAM,KAA4D,MAAyD,EAArH,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,OAAuE,EAAlE,IAAI,cAAvD,wDAAyD,CAA4D,CAAC;gBAC5H,MAAM,IAAI,qBAA6B,IAAI,CAAE,CAAC;gBAE9C,IAAI,OAAO,KAAK,SAAS;oBAAE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;gBAClD,IAAI,OAAO,KAAK,SAAS;oBAAE,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;gBAClD,IAAI,QAAQ,KAAK,SAAS;oBAAE,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;gBACrD,IAAI,SAAS,KAAK,SAAS;oBAAE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;gBACxD,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI;oBAAE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;gBAE9D,OAAO,IAAI,CAAC;YACb,CAAC,CAAC,CACF,CAAC;YACF,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC;YAC9E,KAAK,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,WAAW,EAAE,CAAA,CAAC;QACrC,CAAC;IACF,CAAC;IAEM,MAAM;QACZ,MAAM,OAAO,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;QAErC,OAAO,CACN,EAAC,qBAAqB,qDACrB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC,EACnC,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAC,kBAAkB,EACzB,MAAM,EAAE,IAAI,CAAC,sBAAsB,EACnC,aAAa,EAAC,KAAK,EACnB,UAAU;YAEV,4DAAK,KAAK,EAAC,6BAA6B;gBACvC,EAAC,aAAa,qDAAC,MAAM,EAAE,IAAI,CAAC,sBAAsB,EAAE,MAAM,EAAE,CAAC,GAAI;gBAEhE,IAAI,CAAC,YAAY,IAAI,EAAC,aAAa,qDAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,QAAQ,EAAC,KAAK,EAAC,KAAK,EAAC,mCAAmC,GAAG;gBAEzI,6DAAM,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC;oBAC3C,4DAAK,KAAK,EAAC,6BAA6B,IACtC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,WAAK,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,KAAK,EAAC,4BAA4B;wBACvD,EAAC,mBAAmB,IACnB,QAAQ,EAAE,MAAM,CAAC,OAAO,KAAK,KAAK,EAClC,MAAM,EACL,MAAM,CAAC,OAAO;gCACb,CAAC,CAAC,SAAS,CAAC,mCAAmC,EAAE,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;gCAC5F,CAAC,CAAC,SAAS,CAAC,uCAAuC,EAAE,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAElG,MAAM,EAAE,IAAI,EACZ,UAAU,QACV,SAAS,EAAE,MAAM,CAAC,OAAO,KAAK,KAAK,EACnC,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,KAAc,EAAE,EAAE,WAAC,OAAA,IAAI,CAAC,sBAAsB,CAAC,MAAA,MAAM,CAAC,GAAG,mCAAI,EAAE,EAAE,KAAK,CAAC,CAAA,EAAA,EAAE,GAC5F;wBACF,YAAM,KAAK,EAAC,kCAAkC,IAAE,MAAM,CAAC,KAAK,CAAQ;wBACpE,EAAC,iBAAiB,IACjB,UAAU,QACV,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC,KAAK,CAAC,EACtC,MAAM,EAAE,SAAS,CAAC,iCAAiC,EAAE,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAChG,IAAI,EAAE,CAAC,EACP,SAAS,EAAE,MAAM,CAAC,SAAS,KAAK,KAAK,EACrC,GAAG,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,KAAc,EAAE,EAAE,WAAC,OAAA,IAAI,CAAC,iBAAiB,CAAC,MAAA,MAAM,CAAC,GAAG,mCAAI,EAAE,EAAE,KAAK,CAAC,CAAA,EAAA,EAAE,GACvF;wBACF,EAAC,cAAc,IACd,MAAM,EAAC,oBAAoB,EAC3B,MAAM,EACL,MAAM,CAAC,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC;gCACvC,CAAC,CAAC,SAAS,CAAC,6BAA6B,EAAE,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;gCACtF,CAAC,CAAC,SAAS,CAAC,4BAA4B,EAAE,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAEvF,UAAU,QACV,QAAQ,EAAC,OAAO,EAChB,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,IAAI,CAAC,UAAU,CAAC,MAAA,MAAM,CAAC,GAAG,mCAAI,EAAE,EAAE,IAAI,CAAC,CAAA,EAAA,EAAE,EAC/D,SAAS,EAAE,MAAM,CAAC,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC,iBACvC,wBAAwB,GACnC;wBACF,EAAC,cAAc,IACd,MAAM,EAAC,sBAAsB,EAC7B,MAAM,EACL,MAAM,CAAC,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC;gCACxD,CAAC,CAAC,SAAS,CAAC,6BAA6B,EAAE,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;gCACtF,CAAC,CAAC,SAAS,CAAC,8BAA8B,EAAE,EAAE,YAAY,EAAE,EAAE,MAAM,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,EAEzF,UAAU,QACV,QAAQ,EAAC,OAAO,EAChB,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,IAAI,CAAC,UAAU,CAAC,MAAA,MAAM,CAAC,GAAG,mCAAI,EAAE,EAAE,MAAM,CAAC,CAAA,EAAA,EAAE,EACjE,SAAS,EAAE,MAAM,CAAC,QAAQ,KAAK,KAAK,IAAI,KAAK,KAAK,OAAO,CAAC,MAAM,GAAG,CAAC,iBACxD,0BAA0B,GACrC,CACG,CACN,CAAC,CACG;oBAEN,4DAAK,KAAK,EAAC,6BAA6B;wBACvC,EAAC,cAAc,qDACd,MAAM,EAAE,IAAI,CAAC,4BAA4B,EACzC,QAAQ,EAAC,WAAW,EACpB,GAAG,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,iBAC/B,uBAAuB,GAClC;wBACF,EAAC,cAAc,qDAAC,MAAM,EAAE,IAAI,CAAC,2BAA2B,EAAE,QAAQ,EAAC,SAAS,EAAC,KAAK,EAAC,QAAQ,iBAAa,sBAAsB,GAAG,CAC5H,CACA,CACF,CACiB,CACxB,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { KolAlertWcTag, KolButtonWcTag, KolHeadingTag, KolInputCheckboxTag, KolInputNumberTag, KolPopoverButtonWcTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { KoliBriTableHeaderCell } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { parseColumnWidth } from './controller';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-table-settings-wc',\n\tshadow: false,\n})\nexport class KolTableSettings {\n\t@Element() private readonly host?: HTMLKolTableSettingsWcElement;\n\t@State() headerCells: KoliBriTableHeaderCell[][] = [];\n\t@State() editingHeaderCells: KoliBriTableHeaderCell[][] = [];\n\t@State() errorMessage: string | null = null;\n\tprivate readonly translateTableSettings = translate('kol-table-settings');\n\tprivate readonly translateTableSettingsCancel = translate('kol-table-settings-cancel');\n\tprivate readonly translateTableSettingsApply = translate('kol-table-settings-apply');\n\tprivate readonly translateErrorAllInvisible = translate('kol-table-settings-error-all-invisible');\n\n\t/**\n\t * The horizontal header cells configuration for the table.\n\t */\n\t@Prop() _horizontalHeaderCells: KoliBriTableHeaderCell[][] = [];\n\n\t@Watch('_horizontalHeaderCells')\n\thandleHeaderCellsChange(newValue: KoliBriTableHeaderCell[][]) {\n\t\tthis.headerCells = newValue.map((row) => [...row]);\n\t\tthis.editingHeaderCells = newValue.map((row) => row.map((cell) => ({ ...cell })));\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.handleHeaderCellsChange(this._horizontalHeaderCells);\n\t}\n\n\tprivate popoverRef: HTMLKolPopoverButtonWcElement | undefined;\n\n\tprivate getPrimaryRow(): KoliBriTableHeaderCell[] {\n\t\treturn this.editingHeaderCells[this.editingHeaderCells.length - 1] ?? [];\n\t}\n\n\tprivate updatePrimaryRow(newRow: KoliBriTableHeaderCell[]): void {\n\t\tthis.editingHeaderCells = this.editingHeaderCells.map((row, index, arr) => (index === arr.length - 1 ? newRow : row));\n\t}\n\n\tprivate moveColumn(columnId: string, direction: 'up' | 'down'): void {\n\t\tconst row = [...this.getPrimaryRow()];\n\t\tconst sourceIndex = row.findIndex((col) => col.key === columnId);\n\t\tif (sourceIndex === -1) return;\n\n\t\tlet targetIndex: number;\n\t\tif (direction === 'up') {\n\t\t\tif (sourceIndex === 0) return; // Cannot move first column up\n\t\t\ttargetIndex = sourceIndex - 1;\n\t\t} else {\n\t\t\tif (sourceIndex === row.length - 1) return; // Cannot move last column down\n\t\t\ttargetIndex = sourceIndex + 1;\n\t\t}\n\n\t\t// Swap with target\n\t\tconst [source] = row.splice(sourceIndex, 1);\n\t\trow.splice(targetIndex, 0, source);\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleVisibilityChange(key: string, visible: unknown): void {\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.hidable !== false ? { ...col, visible: Boolean(visible) } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleWidthChange(key: string, width: unknown): void {\n\t\t// Clearing/invalid input must not collapse the column: parseColumnWidth maps\n\t\t// non-positive or non-finite values (e.g. an emptied field => 0) back to undefined,\n\t\t// which renders as an auto-width column instead of a 0px/1px sliver.\n\t\tconst parsedWidth = parseColumnWidth(Number(width));\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? { ...col, width: parsedWidth } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleCancel() {\n\t\tthis.editingHeaderCells = this.headerCells.map((row) => [...row]);\n\t\tthis.errorMessage = null;\n\t\tvoid this.popoverRef?.hidePopover();\n\t}\n\n\tprivate handleSubmit(event: Event): void {\n\t\tevent.preventDefault();\n\n\t\tconst primaryRow = this.getPrimaryRow();\n\t\tconst hasVisibleColumn = primaryRow.some((column) => column.visible !== false);\n\n\t\tif (!hasVisibleColumn) {\n\t\t\tthis.errorMessage = this.translateErrorAllInvisible;\n\t\t\treturn;\n\t\t} else if (this.host) {\n\t\t\tthis.errorMessage = null;\n\t\t\t// Update headerCells with the edited values\n\t\t\tthis.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => ({ ...cell })));\n\n\t\t\t// Type for sanitized cells where optional properties are truly omitted\n\t\t\ttype SanitizedHeaderCell = Omit<KoliBriTableHeaderCell, 'hidable' | 'position' | 'resizable' | 'sortable' | 'visible' | 'width'> &\n\t\t\t\tPartial<Pick<KoliBriTableHeaderCell, 'hidable' | 'resizable' | 'sortable' | 'visible' | 'width'>>;\n\n\t\t\tconst sanitizedHeaderCells = this.editingHeaderCells.map((row) =>\n\t\t\t\trow.map((column): SanitizedHeaderCell => {\n\t\t\t\t\tconst { hidable, resizable, sortable, visible, width, ...rest } = column as KoliBriTableHeaderCell & { position?: unknown };\n\t\t\t\t\tconst cell: SanitizedHeaderCell = { ...rest };\n\n\t\t\t\t\tif (visible !== undefined) cell.visible = visible;\n\t\t\t\t\tif (hidable !== undefined) cell.hidable = hidable;\n\t\t\t\t\tif (sortable !== undefined) cell.sortable = sortable;\n\t\t\t\t\tif (resizable !== undefined) cell.resizable = resizable;\n\t\t\t\t\tif (width !== undefined && width !== null) cell.width = width;\n\n\t\t\t\t\treturn cell;\n\t\t\t\t}),\n\t\t\t);\n\t\t\tdispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);\n\t\t\tvoid this.popoverRef?.hidePopover();\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst columns = this.getPrimaryRow();\n\n\t\treturn (\n\t\t\t<KolPopoverButtonWcTag\n\t\t\t\tref={(el) => (this.popoverRef = el)}\n\t\t\t\tclass=\"kol-table-settings\"\n\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t_label={this.translateTableSettings}\n\t\t\t\t_popoverAlign=\"top\"\n\t\t\t\t_hideLabel\n\t\t\t>\n\t\t\t\t<div class=\"kol-table-settings__content\">\n\t\t\t\t\t<KolHeadingTag _label={this.translateTableSettings} _level={0} />\n\n\t\t\t\t\t{this.errorMessage && <KolAlertWcTag _type=\"error\" _label={this.errorMessage} _variant=\"msg\" class=\"kol-table-settings__error-message\" />}\n\n\t\t\t\t\t<form onSubmit={this.handleSubmit.bind(this)}>\n\t\t\t\t\t\t<div class=\"kol-table-settings__columns\">\n\t\t\t\t\t\t\t{columns.map((column, index) => (\n\t\t\t\t\t\t\t\t<div key={column.key} class=\"kol-table-settings__column\">\n\t\t\t\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t\t\t\t_checked={column.visible !== false}\n\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\tcolumn.hidable\n\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-column-hidable', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-column-not-hidable', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t_value={true}\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_disabled={column.hidable === false}\n\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleVisibilityChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<span class=\"kol-table-settings__column-label\">{column.label}</span>\n\t\t\t\t\t\t\t\t\t<KolInputNumberTag\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_value={parseColumnWidth(column.width)}\n\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-column-width', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t_min={1}\n\t\t\t\t\t\t\t\t\t\t_disabled={column.resizable === false}\n\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleWidthChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-up\"\n\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\tcolumn.sortable === false || index === 0\n\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-move-up', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'up') }}\n\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false || index === 0}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-up\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-down\"\n\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\tcolumn.sortable === false || index === columns.length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-move-down', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'down') }}\n\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false || index === columns.length - 1}\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-down\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div class=\"kol-table-settings__actions\">\n\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t_label={this.translateTableSettingsCancel}\n\t\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t\t_on={{ onClick: () => this.handleCancel() }}\n\t\t\t\t\t\t\t\tdata-testid=\"table-settings-cancel\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<KolButtonWcTag _label={this.translateTableSettingsApply} _variant=\"primary\" _type=\"submit\" data-testid=\"table-settings-apply\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</form>\n\t\t\t\t</div>\n\t\t\t</KolPopoverButtonWcTag>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"table-settings.js","sourceRoot":"","sources":["../../../src/components/table-stateless/table-settings.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { JSX } from '@stencil/core';\nimport { Component, Element, h, Prop, State, Watch } from '@stencil/core';\nimport { KolAlertWcTag, KolButtonWcTag, KolDialogWcTag, KolInputCheckboxTag, KolInputNumberTag } from '../../core/component-names';\nimport { translate } from '../../i18n';\nimport type { KoliBriTableHeaderCell } from '../../schema';\nimport { dispatchDomEvent, KolEvent } from '../../utils/events';\nimport { parseColumnWidth } from './controller';\n\n/**\n * @internal\n */\n@Component({\n\ttag: 'kol-table-settings-wc',\n\tshadow: false,\n})\nexport class KolTableSettings {\n\t@Element() private readonly host?: HTMLKolTableSettingsWcElement;\n\t@State() headerCells: KoliBriTableHeaderCell[][] = [];\n\t@State() editingHeaderCells: KoliBriTableHeaderCell[][] = [];\n\t@State() errorMessage: string | null = null;\n\tprivate readonly translateTableSettings = translate('kol-table-settings');\n\tprivate readonly translateTableSettingsCancel = translate('kol-table-settings-cancel');\n\tprivate readonly translateTableSettingsApply = translate('kol-table-settings-apply');\n\tprivate readonly translateErrorAllInvisible = translate('kol-table-settings-error-all-invisible');\n\n\t/**\n\t * The horizontal header cells configuration for the table.\n\t */\n\t@Prop() _horizontalHeaderCells: KoliBriTableHeaderCell[][] = [];\n\n\t@Watch('_horizontalHeaderCells')\n\thandleHeaderCellsChange(newValue: KoliBriTableHeaderCell[][]) {\n\t\tthis.headerCells = newValue.map((row) => [...row]);\n\t\tthis.editingHeaderCells = newValue.map((row) => row.map((cell) => ({ ...cell })));\n\t}\n\n\tpublic componentWillLoad() {\n\t\tthis.handleHeaderCellsChange(this._horizontalHeaderCells);\n\t}\n\n\tprivate dialogRef: HTMLKolDialogWcElement | undefined;\n\n\tprivate getPrimaryRow(): KoliBriTableHeaderCell[] {\n\t\treturn this.editingHeaderCells[this.editingHeaderCells.length - 1] ?? [];\n\t}\n\n\tprivate updatePrimaryRow(newRow: KoliBriTableHeaderCell[]): void {\n\t\tthis.editingHeaderCells = this.editingHeaderCells.map((row, index, arr) => (index === arr.length - 1 ? newRow : row));\n\t}\n\n\tprivate moveColumn(columnId: string, direction: 'up' | 'down'): void {\n\t\tconst row = [...this.getPrimaryRow()];\n\t\tconst sourceIndex = row.findIndex((col) => col.key === columnId);\n\t\tif (sourceIndex === -1) return;\n\n\t\tlet targetIndex: number;\n\t\tif (direction === 'up') {\n\t\t\tif (sourceIndex === 0) return; // Cannot move first column up\n\t\t\ttargetIndex = sourceIndex - 1;\n\t\t} else {\n\t\t\tif (sourceIndex === row.length - 1) return; // Cannot move last column down\n\t\t\ttargetIndex = sourceIndex + 1;\n\t\t}\n\n\t\t// Swap with target\n\t\tconst [source] = row.splice(sourceIndex, 1);\n\t\trow.splice(targetIndex, 0, source);\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleVisibilityChange(key: string, visible: unknown): void {\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.hidable !== false ? { ...col, visible: Boolean(visible) } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleWidthChange(key: string, width: unknown): void {\n\t\t// Clearing/invalid input must not collapse the column: parseColumnWidth maps\n\t\t// non-positive or non-finite values (e.g. an emptied field => 0) back to undefined,\n\t\t// which renders as an auto-width column instead of a 0px/1px sliver.\n\t\tconst parsedWidth = parseColumnWidth(Number(width));\n\t\tconst row = this.getPrimaryRow().map((col) => (col.key === key && col.resizable !== false ? { ...col, width: parsedWidth } : col));\n\t\tthis.updatePrimaryRow(row);\n\t}\n\n\tprivate handleCancel() {\n\t\tthis.editingHeaderCells = this.headerCells.map((row) => [...row]);\n\t\tthis.errorMessage = null;\n\t\tvoid this.dialogRef?.close();\n\t}\n\n\tprivate handleSubmit(event: Event): void {\n\t\tevent.preventDefault();\n\n\t\tconst primaryRow = this.getPrimaryRow();\n\t\tconst hasVisibleColumn = primaryRow.some((column) => column.visible !== false);\n\n\t\tif (!hasVisibleColumn) {\n\t\t\tthis.errorMessage = this.translateErrorAllInvisible;\n\t\t\treturn;\n\t\t} else if (this.host) {\n\t\t\tthis.errorMessage = null;\n\t\t\t// Update headerCells with the edited values\n\t\t\tthis.headerCells = this.editingHeaderCells.map((row) => row.map((cell) => ({ ...cell })));\n\n\t\t\t// Type for sanitized cells where optional properties are truly omitted\n\t\t\ttype SanitizedHeaderCell = Omit<KoliBriTableHeaderCell, 'hidable' | 'position' | 'resizable' | 'sortable' | 'visible' | 'width'> &\n\t\t\t\tPartial<Pick<KoliBriTableHeaderCell, 'hidable' | 'resizable' | 'sortable' | 'visible' | 'width'>>;\n\n\t\t\tconst sanitizedHeaderCells = this.editingHeaderCells.map((row) =>\n\t\t\t\trow.map((column): SanitizedHeaderCell => {\n\t\t\t\t\tconst { hidable, resizable, sortable, visible, width, ...rest } = column as KoliBriTableHeaderCell & { position?: unknown };\n\t\t\t\t\tconst cell: SanitizedHeaderCell = { ...rest };\n\n\t\t\t\t\tif (visible !== undefined) cell.visible = visible;\n\t\t\t\t\tif (hidable !== undefined) cell.hidable = hidable;\n\t\t\t\t\tif (sortable !== undefined) cell.sortable = sortable;\n\t\t\t\t\tif (resizable !== undefined) cell.resizable = resizable;\n\t\t\t\t\tif (width !== undefined && width !== null) cell.width = width;\n\n\t\t\t\t\treturn cell;\n\t\t\t\t}),\n\t\t\t);\n\t\t\tdispatchDomEvent(this.host, KolEvent.changeHeaderCells, sanitizedHeaderCells);\n\t\t\tvoid this.dialogRef?.close();\n\t\t}\n\t}\n\n\tpublic render(): JSX.Element {\n\t\tconst columns = this.getPrimaryRow();\n\n\t\tconst onOpenDialog = {\n\t\t\tonClick: () => this.dialogRef?.showModal(),\n\t\t};\n\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<KolButtonWcTag\n\t\t\t\t\tclass=\"kol-table-settings\"\n\t\t\t\t\t_icons=\"kolicon-settings\"\n\t\t\t\t\t_label={this.translateTableSettings}\n\t\t\t\t\t_hideLabel\n\t\t\t\t\t_on={onOpenDialog}\n\t\t\t\t></KolButtonWcTag>\n\n\t\t\t\t<KolDialogWcTag _label={this.translateTableSettings} _variant=\"card\" ref={(el) => (this.dialogRef = el)} _width=\"fit-content\">\n\t\t\t\t\t<div class=\"kol-table-settings__content\">\n\t\t\t\t\t\t{this.errorMessage && <KolAlertWcTag _type=\"error\" _label={this.errorMessage} _variant=\"msg\" class=\"kol-table-settings__error-message\" />}\n\n\t\t\t\t\t\t<form onSubmit={this.handleSubmit.bind(this)}>\n\t\t\t\t\t\t\t<div class=\"kol-table-settings__columns\">\n\t\t\t\t\t\t\t\t{columns.map((column, index) => (\n\t\t\t\t\t\t\t\t\t<div key={column.key} class=\"kol-table-settings__column\">\n\t\t\t\t\t\t\t\t\t\t<KolInputCheckboxTag\n\t\t\t\t\t\t\t\t\t\t\t_checked={column.visible !== false}\n\t\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn.hidable\n\t\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-column-hidable', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-column-not-hidable', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t_value={true}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.hidable === false}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleVisibilityChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<span class=\"kol-table-settings__column-label\">{column.label}</span>\n\t\t\t\t\t\t\t\t\t\t<KolInputNumberTag\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_value={parseColumnWidth(column.width)}\n\t\t\t\t\t\t\t\t\t\t\t_label={translate('kol-table-settings-column-width', { placeholders: { column: column.label } })}\n\t\t\t\t\t\t\t\t\t\t\t_min={1}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.resizable === false}\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onInput: (_, value: unknown) => this.handleWidthChange(column.key ?? '', value) }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-up\"\n\t\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn.sortable === false || index === 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-move-up', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'up') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false || index === 0}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-up\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t\t\t_icons=\"kolicon-chevron-down\"\n\t\t\t\t\t\t\t\t\t\t\t_label={\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn.sortable === false || index === columns.length - 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t? translate('kol-table-settings-not-move', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t\t\t: translate('kol-table-settings-move-down', { placeholders: { column: column.label } })\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t_hideLabel\n\t\t\t\t\t\t\t\t\t\t\t_variant=\"ghost\"\n\t\t\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.moveColumn(column.key ?? '', 'down') }}\n\t\t\t\t\t\t\t\t\t\t\t_disabled={column.sortable === false || index === columns.length - 1}\n\t\t\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-move-down\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t<div class=\"kol-table-settings__actions\">\n\t\t\t\t\t\t\t\t<KolButtonWcTag\n\t\t\t\t\t\t\t\t\t_label={this.translateTableSettingsCancel}\n\t\t\t\t\t\t\t\t\t_variant=\"secondary\"\n\t\t\t\t\t\t\t\t\t_on={{ onClick: () => this.handleCancel() }}\n\t\t\t\t\t\t\t\t\tdata-testid=\"table-settings-cancel\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<KolButtonWcTag _label={this.translateTableSettingsApply} _variant=\"primary\" _type=\"submit\" data-testid=\"table-settings-apply\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</form>\n\t\t\t\t\t</div>\n\t\t\t\t</KolDialogWcTag>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/tabs/shadow.js

@@ -213,9 +213,9 @@ export class KolTabs {
             }, _icons: "kolicon-plus", "data-testid": "tabs-create-button" }))));
     }
     render() {
-        return (h("div", { key: 'f32bc164a5eba3ff12fe8fd5725f70563da3474f', ref: (el) => {
+        return (h("div", { key: '8ce1e59e95c3f484ca4ba3c84f352759fae39d88', ref: (el) => {
                 this.tabPanelsElement = el;
-            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), h("div", { key: '787234589e842aa173e04dc67bbcf43b0a0fe9ed', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
+            }, class: clsx('kol-tabs', `kol-tabs--align-${this.state._align}`) }, this.renderButtonGroup(), h("div", { key: '2fc039601986c0205c8775fdcf9b640cc6f77bd3', class: "kol-tabs__content", ref: this.catchTabPanelHost })));
     }
     validateAlign(value) {
         validateAlign(this, value);