@ui5/webcomponents-compat 0.0.0-da0d3eb88 → 0.0.0-ebd9a4db3

package/dist/Table.js

@@ -8,29 +8,25 @@ var Table_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
-import { isTabNext, isTabPrevious, isSpace, isEnter, isCtrlA, isUpAlt, isDownAlt, isUpShift, isDownShift, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isTabNext, isTabPrevious, isSpace, isEnter, isDown, isCtrlA, isUpAlt, isDownAlt, isUpShift, isDownShift, isHomeCtrl, isEndCtrl, isHomeShift, isEndShift, } from "@ui5/webcomponents-base/dist/Keys.js";
 import getNormalizedTarget from "@ui5/webcomponents-base/dist/util/getNormalizedTarget.js";
 import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
 import { getLastTabbableElement, getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
-import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
-import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js";
 import debounce from "@ui5/webcomponents-base/dist/util/debounce.js";
-import isElementInView from "@ui5/webcomponents-base/dist/util/isElementInView.js";
-import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
-import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
 import TableGrowingMode from "./types/TableGrowingMode.js";
 import TableMode from "./types/TableMode.js";
 // Texts
 import { LOAD_MORE_TEXT, ARIA_LABEL_SELECT_ALL_CHECKBOX, TABLE_HEADER_ROW_INFORMATION, TABLE_ROW_POSITION, } from "./generated/i18n/i18n-defaults.js";
 // Template
-import TableTemplate from "./generated/templates/TableTemplate.lit.js";
+import TableTemplate from "./TableTemplate.js";
 // Styles
 import tableStyles from "./generated/themes/Table.css.js";
 const GROWING_WITH_SCROLL_DEBOUNCE_RATE = 250; // ms
@@ -103,11 +99,91 @@ var TableFocusTargetElement;
  * @public
  */
 let Table = Table_1 = class Table extends UI5Element {
-    static async onDefine() {
-        Table_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
-    }
     constructor() {
         super();
+        /**
+         * Defines if the value of `noDataText` will be diplayed when there is no rows present in the table.
+         * @default false
+         * @public
+         * @since 2.0.0
+         */
+        this.hideNoData = false;
+        /**
+         * Defines whether the table will have growing capability either by pressing a `More` button,
+         * or via user scroll. In both cases `load-more` event is fired.
+         *
+         * Available options:
+         *
+         * `Button` - Shows a `More` button at the bottom of the table, pressing of which triggers the `load-more` event.
+         *
+         * `Scroll` - The `load-more` event is triggered when the user scrolls to the bottom of the table;
+         *
+         * `None` (default) - The growing is off.
+         *
+         * **Restrictions:** `growing="Scroll"` is not supported for Internet Explorer,
+         * and the component will fallback to `growing="Button"`.
+         * @default "None"
+         * @since 2.0.0
+         * @public
+         */
+        this.growing = "None";
+        /**
+         * Defines if the table is in busy state.
+         *
+         * In this state the component's opacity is reduced
+         * and busy indicator is displayed at the bottom of the table.
+         * @default false
+         * @since 2.0.0
+         * @public
+         */
+        this.busy = false;
+        /**
+         * Defines the delay in milliseconds, after which the busy indicator will show up for this component.
+         * @default 1000
+         * @public
+         */
+        this.busyDelay = 1000;
+        /**
+         * Determines whether the column headers remain fixed at the top of the page during
+         * vertical scrolling as long as the Web Component is in the viewport.
+         *
+         * **Restrictions:**
+         *
+         * - Browsers that do not support this feature:
+         *
+         * - Internet Explorer
+         * - Microsoft Edge lower than version 41 (EdgeHTML 16)
+         * - Mozilla Firefox lower than version 59
+         *
+         * - Scrolling behavior:
+         *
+         * - If the Web Component is placed in layout containers that have the `overflow: hidden`
+         * or `overflow: auto` style definition, this can
+         * prevent the sticky elements of the Web Component from becoming fixed at the top of the viewport.
+         * @default false
+         * @public
+         */
+        this.stickyColumnHeader = false;
+        /**
+         * Defines the mode of the component.
+         * @default "None"
+         * @since 2.0.0
+         * @public
+         */
+        this.mode = "None";
+        this._noDataDisplayed = false;
+        /**
+         * Defines the active state of the `More` button.
+         * @private
+         */
+        this._loadMoreActive = false;
+        /**
+         * Defines whether all rows are selected or not when table is in MultiSelect mode.
+         * @default false
+         * @since 2.0.0
+         * @private
+         */
+        this._allRowsSelected = false;
         this.visibleColumns = []; // template loop should always have a defined array
         // The ItemNavigation requires each item to 1) have a "forcedTabIndex" property and 2) be either a UI5Element, or have an id property (to find it in the component's shadow DOM by)
         this._columnHeader = {
@@ -153,7 +229,7 @@ let Table = Table_1 = class Table extends UI5Element {
             row.mode = this.mode;
         });
         this.visibleColumns = this.columns.filter((column, index) => {
-            return !this._hiddenColumns[index];
+            return !this._hiddenColumns?.[index];
         });
         this._noDataDisplayed = !this.rows.length && !this.hideNoData;
         this.visibleColumnsCount = this.visibleColumns.length;
@@ -168,7 +244,6 @@ let Table = Table_1 = class Table extends UI5Element {
         if (this.growsOnScroll) {
             this.observeTableEnd();
         }
-        this.checkTableInViewport();
     }
     onEnterDOM() {
         this.growingIntersectionObserver = this.getIntersectionObserver();
@@ -277,7 +352,7 @@ let Table = Table_1 = class Table extends UI5Element {
             nextItem.focus();
         }
         const selectedRows = this.selectedRows;
-        this.fireEvent("selection-change", {
+        this.fireDecoratorEvent("selection-change", {
             selectedRows,
             previouslySelectedRows,
         });
@@ -303,7 +378,7 @@ let Table = Table_1 = class Table extends UI5Element {
             rows[rows.length - 1].focus();
         }
         const selectedRows = this.selectedRows;
-        this.fireEvent("selection-change", {
+        this.fireDecoratorEvent("selection-change", {
             selectedRows,
             previouslySelectedRows,
         });
@@ -450,6 +525,11 @@ let Table = Table_1 = class Table extends UI5Element {
     onRowFocused(e) {
         this._itemNavigation.setCurrentItem(e.target);
     }
+    onRowKeyDown(e) {
+        if (this.growing === "Scroll" && isDown(e) && this.currentItemIdx === this.rows.length - 1) {
+            debounce(this.loadMore.bind(this), GROWING_WITH_SCROLL_DEBOUNCE_RATE);
+        }
+    }
     _onColumnHeaderFocused() {
         this._itemNavigation.setCurrentItem(this._columnHeader);
     }
@@ -485,8 +565,14 @@ let Table = Table_1 = class Table extends UI5Element {
         }
         this._loadMoreActive = false;
     }
+    onInvalidation(change) {
+        if (change.type === "property" && change.name === "growing") {
+            this.tableEndObserved = false;
+            this.getIntersectionObserver().disconnect();
+        }
+    }
     _onLoadMoreClick() {
-        this.fireEvent("load-more");
+        this.fireDecoratorEvent("load-more");
     }
     observeTableEnd() {
         if (!this.tableEndObserved) {
@@ -504,7 +590,7 @@ let Table = Table_1 = class Table extends UI5Element {
         }
     }
     loadMore() {
-        this.fireEvent("load-more");
+        this.fireDecoratorEvent("load-more");
     }
     _handleSingleSelect(e) {
         const row = this.getRowParent(e.target);
@@ -519,7 +605,7 @@ let Table = Table_1 = class Table extends UI5Element {
                 }
             });
             row.selected = true;
-            this.fireEvent("selection-change", {
+            this.fireDecoratorEvent("selection-change", {
                 selectedRows: [row],
                 previouslySelectedRows,
             });
@@ -539,7 +625,7 @@ let Table = Table_1 = class Table extends UI5Element {
         else {
             this._allRowsSelected = false;
         }
-        this.fireEvent("selection-change", {
+        this.fireDecoratorEvent("selection-change", {
             selectedRows,
             previouslySelectedRows,
         });
@@ -561,7 +647,7 @@ let Table = Table_1 = class Table extends UI5Element {
             row.selected = bAllSelected;
         });
         const selectedRows = bAllSelected ? this.rows : [];
-        this.fireEvent("selection-change", {
+        this.fireDecoratorEvent("selection-change", {
             selectedRows,
             previouslySelectedRows,
         });
@@ -591,12 +677,8 @@ let Table = Table_1 = class Table extends UI5Element {
         return null;
     }
     handleResize() {
-        this.checkTableInViewport();
         this.popinContent();
     }
-    checkTableInViewport() {
-        this._inViewport = isElementInView(this.getDomRef());
-    }
     popinContent() {
         const clientRect = this.getDomRef().getBoundingClientRect();
         const tableWidth = clientRect.width;
@@ -621,12 +703,12 @@ let Table = Table_1 = class Table extends UI5Element {
             }
             this.columns[visibleColumnsIndexes[visibleColumnsIndexes.length - 1]].last = true;
         }
-        const hiddenColumnsChange = (this._hiddenColumns.length !== hiddenColumns.length) || this._hiddenColumns.some((column, index) => column !== hiddenColumns[index]);
+        const hiddenColumnsChange = (this._hiddenColumns?.length !== hiddenColumns.length) || this._hiddenColumns?.some((column, index) => column !== hiddenColumns[index]);
         const shownColumnsChange = hiddenColumns.length === 0;
         // invalidate if hidden columns count has changed or columns are shown
         if (hiddenColumnsChange || shownColumnsChange) {
             this._hiddenColumns = hiddenColumns;
-            this.fireEvent("popin-change", {
+            this.fireDecoratorEvent("popin-change", {
                 poppedColumns: this._hiddenColumns,
             });
         }
@@ -643,7 +725,7 @@ let Table = Table_1 = class Table extends UI5Element {
                 text: column.textContent,
                 popinText: column.popinText,
                 popinDisplay: column.popinDisplay,
-                visible: !this._hiddenColumns[index],
+                visible: !this._hiddenColumns?.[index],
             };
         }, this);
     }
@@ -657,13 +739,6 @@ let Table = Table_1 = class Table extends UI5Element {
         }
         return this.growingIntersectionObserver;
     }
-    get styles() {
-        return {
-            busy: {
-                position: this.busyIndPosition,
-            },
-        };
-    }
     get growsWithButton() {
         return this.growing === TableGrowingMode.Button;
     }
@@ -688,7 +763,7 @@ let Table = Table_1 = class Table extends UI5Element {
         return Table_1.i18nBundle.getText(ARIA_LABEL_SELECT_ALL_CHECKBOX);
     }
     get loadMoreAriaLabelledBy() {
-        if (this.moreDataText) {
+        if (this.growingButtonSubtext) {
             return `${this._id}-growingButton-text ${this._id}-growingButton-subtext`;
         }
         return `${this._id}-growingButton-text`;
@@ -696,9 +771,6 @@ let Table = Table_1 = class Table extends UI5Element {
     get tableEndDOM() {
         return this.shadowRoot.querySelector(".ui5-table-end-marker");
     }
-    get busyIndPosition() {
-        return this._inViewport ? "absolute" : "sticky";
-    }
     get isMultiSelect() {
         return this.mode === TableMode.MultiSelect;
     }
@@ -737,28 +809,28 @@ __decorate([
     property({ type: Boolean })
 ], Table.prototype, "hideNoData", void 0);
 __decorate([
-    property({ type: TableGrowingMode, defaultValue: TableGrowingMode.None })
+    property()
 ], Table.prototype, "growing", void 0);
 __decorate([
     property({ type: Boolean })
 ], Table.prototype, "busy", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 1000 })
+    property({ type: Number })
 ], Table.prototype, "busyDelay", void 0);
 __decorate([
     property({ type: Boolean })
 ], Table.prototype, "stickyColumnHeader", void 0);
 __decorate([
-    property({ type: TableMode, defaultValue: TableMode.None })
+    property()
 ], Table.prototype, "mode", void 0);
 __decorate([
-    property({ defaultValue: undefined })
+    property()
 ], Table.prototype, "accessibleName", void 0);
 __decorate([
-    property({ defaultValue: "" })
+    property()
 ], Table.prototype, "accessibleNameRef", void 0);
 __decorate([
-    property({ type: Object, multiple: true })
+    property({ type: Array })
 ], Table.prototype, "_hiddenColumns", void 0);
 __decorate([
     property({ type: Boolean })
@@ -769,9 +841,6 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], Table.prototype, "_columnHeader", void 0);
-__decorate([
-    property({ type: Boolean })
-], Table.prototype, "_inViewport", void 0);
 __decorate([
     property({ type: Boolean })
 ], Table.prototype, "_allRowsSelected", void 0);
@@ -793,14 +862,16 @@ __decorate([
         },
     })
 ], Table.prototype, "columns", void 0);
+__decorate([
+    i18n("@ui5/webcomponents")
+], Table, "i18nBundle", void 0);
 Table = Table_1 = __decorate([
     customElement({
         tag: "ui5-table",
         fastNavigation: true,
         styles: tableStyles,
-        renderer: litRender,
+        renderer: jsxRenderer,
         template: TableTemplate,
-        dependencies: [BusyIndicator, CheckBox],
     })
     /** Fired when a row in `Active` mode is clicked or `Enter` key is pressed.
      * @param {HTMLElement} row the activated row.
@@ -808,12 +879,7 @@ Table = Table_1 = __decorate([
      */
     ,
     event("row-click", {
-        detail: {
-            /**
-            * @public
-            */
-            row: { type: HTMLElement },
-        },
+        bubbles: true,
     })
     /**
      * Fired when `ui5-table-column` is shown as a pop-in instead of hiding it.
@@ -823,14 +889,7 @@ Table = Table_1 = __decorate([
      */
     ,
     event("popin-change", {
-        detail: {
-            /**
-            * @public
-            */
-            poppedColumns: {
-                type: Array,
-            },
-        },
+        bubbles: true,
     })
     /**
      * Fired when the user presses the `More` button or scrolls to the table's end.
@@ -840,7 +899,9 @@ Table = Table_1 = __decorate([
      * @since 2.0.0
      */
     ,
-    event("load-more")
+    event("load-more", {
+        bubbles: true,
+    })
     /**
      * Fired when selection is changed by user interaction
      * in `SingleSelect` and `MultiSelect` modes.
@@ -851,16 +912,7 @@ Table = Table_1 = __decorate([
      */
     ,
     event("selection-change", {
-        detail: {
-            /**
-             * @public
-             */
-            selectedRows: { type: Array },
-            /**
-             * @public
-             */
-            previouslySelectedRows: { type: Array },
-        },
+        bubbles: true,
     })
 ], Table);
 Table.define();