@ui5/webcomponents-compat 0.0.0-0dd36ca4b → 0.0.0-38f83ffef

package/dist/Table.d.ts

@@ -1,4 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
 import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
@@ -13,13 +14,13 @@ import TableMode from "./types/TableMode.js";
  * Interface for components that may be slotted inside a `ui5-table` as rows
  * @public
  */
-interface ITableRow extends HTMLElement, ITabbable {
+interface ITableRow extends UI5Element, ITabbable {
     mode: `${TableMode}`;
     selected: boolean;
     forcedBusy: boolean;
-    forcedAriaPosition: string;
+    forcedAriaPosition?: string;
     _columnsInfoString: string;
-    _columnsInfo: Array<TableColumnInfo>;
+    _columnsInfo?: Array<TableColumnInfo>;
     tabbableElements: Array<HTMLElement>;
 }
 type TableColumnInfo = {
@@ -109,12 +110,18 @@ declare enum TableFocusTargetElement {
  * @public
  */
 declare class Table extends UI5Element {
+    eventDetails: {
+        "row-click": TableRowClickEventDetail;
+        "popin-change": TablePopinChangeEventDetail;
+        "load-more": void;
+        "selection-change": TableSelectionChangeEventDetail;
+    };
     /**
      * Defines the text that will be displayed when there is no data and `hideNoData` is not present.
-     * @default ""
+     * @default undefined
      * @public
      */
-    noDataText: string;
+    noDataText?: string;
     /**
      * Defines the text that will be displayed inside the growing button at the bottom of the table,
      * meant for loading more rows upon press.
@@ -122,20 +129,20 @@ declare class Table extends UI5Element {
      * **Note:** If not specified a built-in text will be displayed.
      *
      * **Note:** This property takes effect if `growing` is set to `Button`.
-     * @default ""
+     * @default undefined
      * @since 2.0.0
      * @public
      */
-    growingButtonText: string;
+    growingButtonText?: string;
     /**
      * Defines the subtext that will be displayed under the `growingButtonText`.
      *
      * **Note:** This property takes effect if `growing` is set to `Button`.
-     * @default ""
+     * @default undefined
      * @since 2.0.0
      * @public
      */
-    growingButtonSubtext: string;
+    growingButtonSubtext?: string;
     /**
      * Defines if the value of `noDataText` will be diplayed when there is no rows present in the table.
      * @default false
@@ -215,12 +222,12 @@ declare class Table extends UI5Element {
     accessibleName?: string;
     /**
      * Receives id(or many ids) of the elements that label the component.
-     * @default ""
+     * @default undefined
      * @public
      * @since 2.0.0
      */
-    accessibleNameRef: string;
-    _hiddenColumns: Array<TableColumnInfo>;
+    accessibleNameRef?: string;
+    _hiddenColumns?: Array<TableColumnInfo>;
     _noDataDisplayed: boolean;
     /**
      * Defines the active state of the `More` button.
@@ -232,11 +239,6 @@ declare class Table extends UI5Element {
      * @private
      */
     _columnHeader: TableColumnHeaderInfo;
-    /**
-     * Defines if the entire table is in view port.
-     * @private
-     */
-    _inViewport: boolean;
     /**
      * Defines whether all rows are selected or not when table is in MultiSelect mode.
      * @default false
@@ -258,12 +260,10 @@ declare class Table extends UI5Element {
      * @public
      */
     columns: Array<TableColumn>;
-    static onDefine(): Promise<void>;
     static i18nBundle: I18nBundle;
     fnHandleF7: (e: CustomEvent) => void;
     fnOnRowFocused: (e: CustomEvent) => void;
     _handleResize: ResizeObserverCallback;
-    moreDataText?: string;
     tableEndObserved: boolean;
     visibleColumns: Array<TableColumn>;
     visibleColumnsCount?: number;
@@ -291,7 +291,7 @@ declare class Table extends UI5Element {
      * Switches focus between column header, last focused item, and "More" button (if applicable).
      * @private
      */
-    _handleArrowAlt(e: KeyboardEvent): void;
+    _handleArrowAlt(e: KeyboardEvent): void | Promise<void>;
     /**
      * Determines the type of the currently focused element.
      * @private
@@ -311,11 +311,13 @@ declare class Table extends UI5Element {
     _getAfterForwardElement(): HTMLElement;
     _getBeforeForwardElement(): HTMLElement;
     onRowFocused(e: CustomEvent): void;
+    onRowKeyDown(e: KeyboardEvent): void;
     _onColumnHeaderFocused(): void;
     _onColumnHeaderClick(e: MouseEvent | KeyboardEvent): void;
     _onColumnHeaderKeydown(e: KeyboardEvent): void;
     _onLoadMoreKeydown(e: KeyboardEvent): void;
     _onLoadMoreKeyup(e: KeyboardEvent): void;
+    onInvalidation(change: ChangeInfo): void;
     _onLoadMoreClick(): void;
     observeTableEnd(): void;
     onInteresection(entries: Array<IntersectionObserverEntry>): void;
@@ -328,18 +330,12 @@ declare class Table extends UI5Element {
     get columnHeader(): HTMLElement | null;
     get morеBtn(): HTMLElement | null;
     handleResize(): void;
-    checkTableInViewport(): void;
     popinContent(): void;
     /**
      * Gets settings to be propagated from columns to rows.
      */
     getColumnPropagationSettings(): Array<TableColumnInfo>;
     getIntersectionObserver(): IntersectionObserver;
-    get styles(): {
-        busy: {
-            position: string;
-        };
-    };
     get growsWithButton(): boolean;
     get growsOnScroll(): boolean;
     get _growingButtonText(): string;
@@ -348,7 +344,6 @@ declare class Table extends UI5Element {
     get ariaLabelSelectAllText(): string;
     get loadMoreAriaLabelledBy(): string;
     get tableEndDOM(): Element;
-    get busyIndPosition(): string;
     get isMultiSelect(): boolean;
     get isSingleSelect(): boolean;
     get selectedRows(): Array<ITableRow>;

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();