@ui5/webcomponents 2.0.0-rc.5 → 2.0.0

package/dist/TableCellBase.js

@@ -0,0 +1,64 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TableCellBase_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import TableCellBaseStyles from "./generated/themes/TableCellBase.css.js";
+/**
+ * @class
+ * A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.
+ * @constructor
+ * @abstract
+ * @extends UI5Element
+ * @since 2.0
+ * @public
+ */
+let TableCellBase = TableCellBase_1 = class TableCellBase extends UI5Element {
+    constructor() {
+        super(...arguments);
+        this._popin = false;
+        this.ariaRole = "gridcell";
+    }
+    static async onDefine() {
+        TableCellBase_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    onEnterDOM() {
+        this.toggleAttribute("ui5-table-cell-base", true);
+    }
+    onBeforeRendering() {
+        if (this._popin) {
+            this.removeAttribute("role");
+        }
+        else {
+            this.setAttribute("role", this.ariaRole);
+        }
+    }
+    getFocusDomRef() {
+        return this;
+    }
+    isTableCellBase() {
+        return true;
+    }
+};
+__decorate([
+    slot({ type: Node, "default": true })
+], TableCellBase.prototype, "content", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableCellBase.prototype, "_popin", void 0);
+TableCellBase = TableCellBase_1 = __decorate([
+    customElement({
+        renderer: litRender,
+        styles: TableCellBaseStyles,
+    })
+], TableCellBase);
+export default TableCellBase;
+//# sourceMappingURL=TableCellBase.js.map

package/dist/TableCellBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableCellBase.js","sourceRoot":"","sources":["../src/TableCellBase.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAE3E,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,mBAAmB,MAAM,yCAAyC,CAAC;AAE1E;;;;;;;;GAQG;AAKH,IAAe,aAAa,qBAA5B,MAAe,aAAc,SAAQ,UAAU;IAA/C;;QASC,WAAM,GAAG,KAAK,CAAC;QAEL,aAAQ,GAAW,UAAU,CAAC;IA0BzC,CAAC;IAvBA,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,eAAa,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACtE,CAAC;IAED,UAAU;QACT,IAAI,CAAC,eAAe,CAAC,qBAAqB,EAAE,IAAI,CAAC,CAAC;IACnD,CAAC;IAED,iBAAiB;QAChB,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;SAC7B;aAAM;YACN,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;SACzC;IACF,CAAC;IAED,cAAc;QACb,OAAO,IAAI,CAAC;IACb,CAAC;IAED,eAAe;QACd,OAAO,IAAI,CAAC;IACb,CAAC;CACD,CAAA;AA/BA;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAChB;AAGtB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACb;AATD,aAAa;IAJ3B,aAAa,CAAC;QACd,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,mBAAmB;KAC3B,CAAC;GACa,aAAa,CAqC3B;AAED,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport TableCellBaseStyles from \"./generated/themes/TableCellBase.css.js\";\n\n/**\n * @class\n * A class to serve as a foundation for the `TableCell` and `TableHeaderCell` classes.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @since 2.0\n * @public\n */\n@customElement({\n\trenderer: litRender,\n\tstyles: TableCellBaseStyles,\n})\nabstract class TableCellBase extends UI5Element {\n\t/**\n\t * Defines the content of the component.\n\t * @public\n\t */\n\t@slot({ type: Node, \"default\": true })\n\tcontent!: Array<Node>;\n\n\t@property({ type: Boolean })\n\t_popin = false;\n\n\tprotected ariaRole: string = \"gridcell\";\n\n\tstatic i18nBundle: I18nBundle;\n\tstatic async onDefine() {\n\t\tTableCellBase.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tonEnterDOM() {\n\t\tthis.toggleAttribute(\"ui5-table-cell-base\", true);\n\t}\n\n\tonBeforeRendering() {\n\t\tif (this._popin) {\n\t\t\tthis.removeAttribute(\"role\");\n\t\t} else {\n\t\t\tthis.setAttribute(\"role\", this.ariaRole);\n\t\t}\n\t}\n\n\tgetFocusDomRef() {\n\t\treturn this;\n\t}\n\n\tisTableCellBase() {\n\t\treturn true;\n\t}\n}\n\nexport default TableCellBase;\n"]}

package/dist/TableExtension.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Base class for the extensions of <code>ui5-table</code> components.
+ * @private
+ */
+export default abstract class TableExtension {
+}

package/dist/TableExtension.js

@@ -0,0 +1,7 @@
+/**
+ * Base class for the extensions of <code>ui5-table</code> components.
+ * @private
+ */
+export default class TableExtension {
+}
+//# sourceMappingURL=TableExtension.js.map

package/dist/TableExtension.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableExtension.js","sourceRoot":"","sources":["../src/TableExtension.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAgB,cAAc;CAAG","sourcesContent":["/**\n * Base class for the extensions of <code>ui5-table</code> components.\n * @private\n */\nexport default abstract class TableExtension {}\n"]}

package/dist/TableGrowing.d.ts

@@ -0,0 +1,126 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type Table from "./Table.js";
+import type { ITableGrowing } from "./Table.js";
+import TableGrowingMode from "./types/TableGrowingMode.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities
+ * to the table.
+ *
+ * The component offers two options:
+ * * Button - a More button is displayed, clicking it will load more data.
+ * * Scroll - additional data is loaded automatically when the user scrolls to the end of the table.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.
+ * It has to be slotted inside the `ui5-table` in the `features` slot.
+ * The component is not intended to be used as a standalone component.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-growing type="Button" growing-text="More" slot="features"></ui5-table-growing>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableGrowing.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0
+ * @public
+ * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
+ */
+declare class TableGrowing extends UI5Element implements ITableGrowing {
+    /**
+     * Defines the mode of the <code>ui5-table</code> growing.
+     *
+     * Available options are:
+     *
+     * Button - Shows a More button at the bottom of the table, pressing it will load more rows.
+     *
+     * Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.
+     * @default "Button"
+     * @public
+     */
+    type: `${TableGrowingMode}`;
+    /**
+     * Defines the text that will be displayed inside the growing button.
+     * Has no effect when type is set to `Scroll`.
+     *
+     * **Note:** When not provided and the type is set to Button, a default text is displayed, corresponding to the
+     * current language.
+     *
+     * @default undefined
+     * @public
+     */
+    growingText?: string;
+    /**
+     * Defines the text that will be displayed below the `growingText` inside the growing button.
+     * Has no effect when type is set to Scroll.
+     *
+     * @default undefined
+     * @public
+     */
+    growingSubText?: string;
+    /**
+     * Disables the growing feature.
+     */
+    disabled: boolean;
+    /**
+     * Defines the active state of the growing button.
+     * Used for keyboard interaction.
+     * @private
+     */
+    _activeState: boolean;
+    _table?: Table;
+    _observer?: IntersectionObserver;
+    _individualSlot?: string;
+    _currentLastRow?: HTMLElement;
+    _shouldFocusRow?: boolean;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    onTableActivate(table: Table): void;
+    onTableRendered(): void;
+    onExitDOM(): void;
+    onBeforeRendering(): void;
+    hasGrowingComponent(): boolean;
+    /**
+     * An event handler that can be used by the Table to notify the TableGrowing that
+     * the Table is growing either by pressing the load more button or by scrolling to the end of the table.
+     */
+    loadMore(): void;
+    _hasScrollToLoad(): boolean;
+    /**
+     * Observes the end of the table.
+     * @private
+     */
+    _observeTableEnd(): void;
+    /**
+     * Returns the IntersectionObserver instance. If it does not exist, it will be created.
+     * The observer will call the loadMore function when the end of the table is reached.
+     * @private
+     */
+    _getIntersectionObserver(): IntersectionObserver;
+    _onIntersection(entries: Array<IntersectionObserverEntry>): void;
+    _invalidateTable(): void;
+    /**
+     * Handles the keydown event on the growing button.
+     *
+     * Calls the loadMore function when the Enter and Space keys are pressed.
+     * @private
+     */
+    _onKeydown(e: KeyboardEvent): void;
+    _onKeyup(e: KeyboardEvent): void;
+    _onFocusout(): void;
+    get _growingButtonText(): string;
+    get _growingButtonDescription(): string;
+    get _hasGrowingButton(): boolean;
+}
+export default TableGrowing;

package/dist/TableGrowing.js

@@ -0,0 +1,248 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var TableGrowing_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.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 { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isSpace, isEnter, } from "@ui5/webcomponents-base/dist/Keys.js";
+import TableGrowingMode from "./types/TableGrowingMode.js";
+import TableGrowingTemplate from "./generated/templates/TableGrowingTemplate.lit.js";
+import TableGrowingCss from "./generated/themes/TableGrowing.css.js";
+import { TABLE_MORE, TABLE_MORE_DESCRIPTION, } from "./generated/i18n/i18n-defaults.js";
+// The documentation should be similar to the Table.ts class documentation!
+// Please only use that style where it uses markdown and the documentation is more readable.
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities
+ * to the table.
+ *
+ * The component offers two options:
+ * * Button - a More button is displayed, clicking it will load more data.
+ * * Scroll - additional data is loaded automatically when the user scrolls to the end of the table.
+ *
+ * ### Usage
+ *
+ * The `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.
+ * It has to be slotted inside the `ui5-table` in the `features` slot.
+ * The component is not intended to be used as a standalone component.
+ *
+ * ```html
+ * <ui5-table>
+ * 	<ui5-table-growing type="Button" growing-text="More" slot="features"></ui5-table-growing>
+ * </ui5-table>
+ * ```
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableGrowing.js";`
+ *
+ * @constructor
+ * @extends UI5Element
+ * @since 2.0
+ * @public
+ * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
+ */
+let TableGrowing = TableGrowing_1 = class TableGrowing extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the mode of the <code>ui5-table</code> growing.
+         *
+         * Available options are:
+         *
+         * Button - Shows a More button at the bottom of the table, pressing it will load more rows.
+         *
+         * Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.
+         * @default "Button"
+         * @public
+         */
+        this.type = "Button";
+        /**
+         * Disables the growing feature.
+         */
+        this.disabled = false;
+        /**
+         * Defines the active state of the growing button.
+         * Used for keyboard interaction.
+         * @private
+         */
+        this._activeState = false;
+    }
+    static async onDefine() {
+        TableGrowing_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    onTableActivate(table) {
+        this._table = table;
+        this._shouldFocusRow = false;
+        if (this._hasScrollToLoad()) {
+            this._observeTableEnd();
+        }
+    }
+    onTableRendered() {
+        // Focus the first row after growing, when the growing button is used
+        if (this._shouldFocusRow) {
+            this._shouldFocusRow = false;
+            let focusRow = this._currentLastRow?.nextElementSibling;
+            if (this.hasGrowingComponent()) {
+                focusRow ||= this.getFocusDomRef();
+            }
+            focusRow ||= this._table?.rows[0];
+            focusRow?.focus();
+        }
+        if (this.disabled) {
+            return;
+        }
+        if (this._hasScrollToLoad()) {
+            this._observeTableEnd();
+        }
+    }
+    onExitDOM() {
+        this._table = undefined;
+        this._observer?.disconnect();
+        this._observer = undefined;
+        this._currentLastRow = undefined;
+    }
+    onBeforeRendering() {
+        this._observer?.disconnect();
+        this._observer = undefined;
+        this._currentLastRow = undefined;
+        this._invalidateTable();
+    }
+    hasGrowingComponent() {
+        if (this._hasScrollToLoad()) {
+            return !(this._table && this._table._scrollContainer.scrollHeight > this._table._scrollContainer.clientHeight) ?? true;
+        }
+        return this.type === TableGrowingMode.Button && !this.disabled;
+    }
+    /**
+     * An event handler that can be used by the Table to notify the TableGrowing that
+     * the Table is growing either by pressing the load more button or by scrolling to the end of the table.
+     */
+    loadMore() {
+        // remembers the last row. only do this when the table has a growing component rendered.
+        if (this._table && this.hasGrowingComponent()) {
+            this._currentLastRow = this._table.rows[this._table.rows.length - 1];
+        }
+        this._shouldFocusRow = true;
+        this.fireEvent("load-more");
+    }
+    _hasScrollToLoad() {
+        return this.type === TableGrowingMode.Scroll;
+    }
+    /**
+     * Observes the end of the table.
+     * @private
+     */
+    _observeTableEnd() {
+        if (!this._table) {
+            return;
+        }
+        const lastElement = this._table.shadowRoot?.querySelector("#table-end-row");
+        if (lastElement) {
+            this._getIntersectionObserver().observe(lastElement);
+        }
+    }
+    /**
+     * Returns the IntersectionObserver instance. If it does not exist, it will be created.
+     * The observer will call the loadMore function when the end of the table is reached.
+     * @private
+     */
+    _getIntersectionObserver() {
+        if (!this._observer) {
+            this._observer = new IntersectionObserver(this._onIntersection.bind(this), {
+                root: document,
+                rootMargin: "10px",
+                threshold: 1.0,
+            });
+        }
+        return this._observer;
+    }
+    _onIntersection(entries) {
+        if (entries.some(entry => entry.isIntersecting)) {
+            this.loadMore();
+        }
+    }
+    _invalidateTable() {
+        if (!this._table) {
+            return;
+        }
+        this._table._invalidate++;
+    }
+    /**
+     * Handles the keydown event on the growing button.
+     *
+     * Calls the loadMore function when the Enter and Space keys are pressed.
+     * @private
+     */
+    _onKeydown(e) {
+        if (isSpace(e)) {
+            e.preventDefault();
+            this._activeState = true;
+        }
+        if (isEnter(e)) {
+            this.loadMore();
+            this._activeState = true;
+        }
+    }
+    _onKeyup(e) {
+        if (isSpace(e)) {
+            this.loadMore();
+        }
+        this._activeState = false;
+    }
+    _onFocusout() {
+        this._activeState = false;
+    }
+    get _growingButtonText() {
+        return this.growingText || TableGrowing_1.i18nBundle.getText(TABLE_MORE);
+    }
+    get _growingButtonDescription() {
+        return TableGrowing_1.i18nBundle.getText(TABLE_MORE_DESCRIPTION);
+    }
+    get _hasGrowingButton() {
+        return this.hasGrowingComponent();
+    }
+};
+__decorate([
+    property()
+], TableGrowing.prototype, "type", void 0);
+__decorate([
+    property()
+], TableGrowing.prototype, "growingText", void 0);
+__decorate([
+    property()
+], TableGrowing.prototype, "growingSubText", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableGrowing.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableGrowing.prototype, "_activeState", void 0);
+TableGrowing = TableGrowing_1 = __decorate([
+    customElement({
+        tag: "ui5-table-growing",
+        renderer: litRender,
+        template: TableGrowingTemplate,
+        styles: TableGrowingCss,
+    })
+    /**
+     * Fired when the growing button is pressed or the user scrolls to the end of the table.
+     *
+     * @public
+     */
+    ,
+    event("load-more")
+], TableGrowing);
+TableGrowing.define();
+export default TableGrowing;
+//# sourceMappingURL=TableGrowing.js.map

package/dist/TableGrowing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableGrowing.js","sourceRoot":"","sources":["../src/TableGrowing.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\n\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n\tisSpace,\n\tisEnter,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\n\nimport type Table from \"./Table.js\";\nimport type { ITableGrowing } from \"./Table.js\";\nimport TableGrowingMode from \"./types/TableGrowingMode.js\";\nimport TableGrowingTemplate from \"./generated/templates/TableGrowingTemplate.lit.js\";\nimport TableGrowingCss from \"./generated/themes/TableGrowing.css.js\";\nimport {\n\tTABLE_MORE,\n\tTABLE_MORE_DESCRIPTION,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// The documentation should be similar to the Table.ts class documentation!\n// Please only use that style where it uses markdown and the documentation is more readable.\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-growing` component is used inside the `ui5-table` to add a growing/data loading functionalities\n * to the table.\n *\n * The component offers two options:\n * * Button - a More button is displayed, clicking it will load more data.\n * * Scroll - additional data is loaded automatically when the user scrolls to the end of the table.\n *\n * ### Usage\n *\n * The `ui5-table-growing` component is only used inside the `ui5-table` component as a feature.\n * It has to be slotted inside the `ui5-table` in the `features` slot.\n * The component is not intended to be used as a standalone component.\n *\n * ```html\n * <ui5-table>\n * \t<ui5-table-growing type=\"Button\" growing-text=\"More\" slot=\"features\"></ui5-table-growing>\n * </ui5-table>\n * ```\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableGrowing.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @since 2.0\n * @public\n * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.\n */\n@customElement({\n\ttag: \"ui5-table-growing\",\n\trenderer: litRender,\n\ttemplate: TableGrowingTemplate,\n\tstyles: TableGrowingCss,\n})\n\n/**\n * Fired when the growing button is pressed or the user scrolls to the end of the table.\n *\n * @public\n */\n@event(\"load-more\")\n\nclass TableGrowing extends UI5Element implements ITableGrowing {\n\t/**\n\t * Defines the mode of the <code>ui5-table</code> growing.\n\t *\n\t * Available options are:\n\t *\n\t * Button - Shows a More button at the bottom of the table, pressing it will load more rows.\n\t *\n\t * Scroll - The rows are loaded automatically by scrolling to the bottom of the table. If the table is not scrollable, this option is the same as the Button.\n\t * @default \"Button\"\n\t * @public\n\t */\n\t@property()\n\ttype: `${TableGrowingMode}` = \"Button\";\n\n\t/**\n\t * Defines the text that will be displayed inside the growing button.\n\t * Has no effect when type is set to `Scroll`.\n\t *\n\t * **Note:** When not provided and the type is set to Button, a default text is displayed, corresponding to the\n\t * current language.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tgrowingText?: string;\n\n\t/**\n\t * Defines the text that will be displayed below the `growingText` inside the growing button.\n\t * Has no effect when type is set to Scroll.\n\t *\n\t * @default undefined\n\t * @public\n\t */\n\t@property()\n\tgrowingSubText?: string;\n\n\t/**\n\t * Disables the growing feature.\n\t */\n\t@property({ type: Boolean })\n\tdisabled = false;\n\n\t/**\n\t * Defines the active state of the growing button.\n\t * Used for keyboard interaction.\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_activeState = false;\n\n\t_table?: Table;\n\t_observer?: IntersectionObserver;\n\t_individualSlot?: string;\n\t_currentLastRow?: HTMLElement;\n\t_shouldFocusRow?: boolean;\n\n\tstatic i18nBundle: I18nBundle;\n\n\tstatic async onDefine() {\n\t\tTableGrowing.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n\t}\n\n\tonTableActivate(table: Table): void {\n\t\tthis._table = table;\n\t\tthis._shouldFocusRow = false;\n\t\tif (this._hasScrollToLoad()) {\n\t\t\tthis._observeTableEnd();\n\t\t}\n\t}\n\n\tonTableRendered(): void {\n\t\t// Focus the first row after growing, when the growing button is used\n\t\tif (this._shouldFocusRow) {\n\t\t\tthis._shouldFocusRow = false;\n\t\t\tlet focusRow = this._currentLastRow?.nextElementSibling as HTMLElement;\n\n\t\t\tif (this.hasGrowingComponent()) {\n\t\t\t\tfocusRow ||= this.getFocusDomRef() as HTMLElement;\n\t\t\t}\n\n\t\t\tfocusRow ||= this._table?.rows[0] as HTMLElement;\n\n\t\t\tfocusRow?.focus();\n\t\t}\n\n\t\tif (this.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._hasScrollToLoad()) {\n\t\t\tthis._observeTableEnd();\n\t\t}\n\t}\n\n\tonExitDOM(): void {\n\t\tthis._table = undefined;\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t\tthis._currentLastRow = undefined;\n\t}\n\n\tonBeforeRendering(): void {\n\t\tthis._observer?.disconnect();\n\t\tthis._observer = undefined;\n\t\tthis._currentLastRow = undefined;\n\t\tthis._invalidateTable();\n\t}\n\n\thasGrowingComponent(): boolean {\n\t\tif (this._hasScrollToLoad()) {\n\t\t\treturn !(this._table && this._table._scrollContainer.scrollHeight > this._table._scrollContainer.clientHeight) ?? true;\n\t\t}\n\n\t\treturn this.type === TableGrowingMode.Button && !this.disabled;\n\t}\n\n\t/**\n\t * An event handler that can be used by the Table to notify the TableGrowing that\n\t * the Table is growing either by pressing the load more button or by scrolling to the end of the table.\n\t */\n\tloadMore(): void {\n\t\t// remembers the last row. only do this when the table has a growing component rendered.\n\t\tif (this._table && this.hasGrowingComponent()) {\n\t\t\tthis._currentLastRow = this._table.rows[this._table.rows.length - 1];\n\t\t}\n\t\tthis._shouldFocusRow = true;\n\n\t\tthis.fireEvent(\"load-more\");\n\t}\n\n\t_hasScrollToLoad() {\n\t\treturn this.type === TableGrowingMode.Scroll;\n\t}\n\n\t/**\n\t * Observes the end of the table.\n\t * @private\n\t */\n\t_observeTableEnd(): void {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst lastElement = this._table.shadowRoot?.querySelector(\"#table-end-row\");\n\t\tif (lastElement) {\n\t\t\tthis._getIntersectionObserver().observe(lastElement);\n\t\t}\n\t}\n\n\t/**\n\t * Returns the IntersectionObserver instance. If it does not exist, it will be created.\n\t * The observer will call the loadMore function when the end of the table is reached.\n\t * @private\n\t */\n\t_getIntersectionObserver(): IntersectionObserver {\n\t\tif (!this._observer) {\n\t\t\tthis._observer = new IntersectionObserver(this._onIntersection.bind(this), {\n\t\t\t\troot: document,\n\t\t\t\trootMargin: \"10px\",\n\t\t\t\tthreshold: 1.0,\n\t\t\t});\n\t\t}\n\t\treturn this._observer;\n\t}\n\n\t_onIntersection(entries: Array<IntersectionObserverEntry>) {\n\t\tif (entries.some(entry => entry.isIntersecting)) {\n\t\t\tthis.loadMore();\n\t\t}\n\t}\n\n\t_invalidateTable() {\n\t\tif (!this._table) {\n\t\t\treturn;\n\t\t}\n\t\tthis._table._invalidate++;\n\t}\n\n\t/**\n\t * Handles the keydown event on the growing button.\n\t *\n\t * Calls the loadMore function when the Enter and Space keys are pressed.\n\t * @private\n\t */\n\t_onKeydown(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\te.preventDefault();\n\t\t\tthis._activeState = true;\n\t\t}\n\n\t\tif (isEnter(e)) {\n\t\t\tthis.loadMore();\n\t\t\tthis._activeState = true;\n\t\t}\n\t}\n\n\t_onKeyup(e: KeyboardEvent) {\n\t\tif (isSpace(e)) {\n\t\t\tthis.loadMore();\n\t\t}\n\t\tthis._activeState = false;\n\t}\n\n\t_onFocusout() {\n\t\tthis._activeState = false;\n\t}\n\n\tget _growingButtonText() {\n\t\treturn this.growingText || TableGrowing.i18nBundle.getText(TABLE_MORE);\n\t}\n\n\tget _growingButtonDescription() {\n\t\treturn TableGrowing.i18nBundle.getText(TABLE_MORE_DESCRIPTION);\n\t}\n\n\tget _hasGrowingButton() {\n\t\treturn this.hasGrowingComponent();\n\t}\n}\n\nTableGrowing.define();\n\nexport default TableGrowing;\n"]}

package/dist/TableHeaderCell.d.ts

@@ -0,0 +1,63 @@
+import TableCellBase from "./TableCellBase.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-cell` component represents a column in the `ui5-table`.
+ *
+ * As it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`
+ * to ensure correct layout and design.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderCell.js";`
+ *
+ * @constructor
+ * @extends TableCellBase
+ * @since 2.0
+ * @public
+ * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
+ */
+declare class TableHeaderCell extends TableCellBase {
+    /**
+     * Defines the width of column.
+     *
+     * @default "auto"
+     * @public
+     */
+    width: string;
+    /**
+     * Defines the minimum width of the column.
+     *
+     * If the table is in `Popin` mode, the column will move into the popin when
+     * when the minimum width does not fit anymore.
+     *
+     * @default "auto"
+     * @public
+     */
+    minWidth: string;
+    /**
+     * Defines the maximum width of the column.
+     *
+     * @default "auto"
+     * @public
+     */
+    maxWidth: string;
+    /**
+     * Defines the importance of the column.
+     *
+     * This property affects the popin behaviour.
+     * Columns with higher importance will move into the popin area later then less important
+     * columns.
+     *
+     * @default 0
+     * @public
+     */
+    importance: number;
+    _popin: boolean;
+    protected ariaRole: string;
+    _popinWidth: number;
+    onEnterDOM(): void;
+}
+export default TableHeaderCell;

package/dist/TableHeaderCell.js

@@ -0,0 +1,105 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import TableCellBase from "./TableCellBase.js";
+import TableHeaderCellTemplate from "./generated/templates/TableHeaderCellTemplate.lit.js";
+import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-cell` component represents a column in the `ui5-table`.
+ *
+ * As it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`
+ * to ensure correct layout and design.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderCell.js";`
+ *
+ * @constructor
+ * @extends TableCellBase
+ * @since 2.0
+ * @public
+ * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.
+ */
+let TableHeaderCell = class TableHeaderCell extends TableCellBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the width of column.
+         *
+         * @default "auto"
+         * @public
+         */
+        this.width = "auto";
+        /**
+         * Defines the minimum width of the column.
+         *
+         * If the table is in `Popin` mode, the column will move into the popin when
+         * when the minimum width does not fit anymore.
+         *
+         * @default "auto"
+         * @public
+         */
+        this.minWidth = "auto";
+        /**
+         * Defines the maximum width of the column.
+         *
+         * @default "auto"
+         * @public
+         */
+        this.maxWidth = "auto";
+        /**
+         * Defines the importance of the column.
+         *
+         * This property affects the popin behaviour.
+         * Columns with higher importance will move into the popin area later then less important
+         * columns.
+         *
+         * @default 0
+         * @public
+         */
+        this.importance = 0;
+        this._popin = false;
+        this.ariaRole = "columnheader";
+        this._popinWidth = 0;
+    }
+    onEnterDOM() {
+        super.onEnterDOM();
+        this.style.minWidth = this.minWidth;
+        this.style.maxWidth = this.maxWidth;
+        this.style.width = this.width;
+    }
+};
+__decorate([
+    property()
+], TableHeaderCell.prototype, "width", void 0);
+__decorate([
+    property()
+], TableHeaderCell.prototype, "minWidth", void 0);
+__decorate([
+    property()
+], TableHeaderCell.prototype, "maxWidth", void 0);
+__decorate([
+    property({ type: Number })
+], TableHeaderCell.prototype, "importance", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TableHeaderCell.prototype, "_popin", void 0);
+TableHeaderCell = __decorate([
+    customElement({
+        tag: "ui5-table-header-cell",
+        styles: [TableCellBase.styles, TableHeaderCellStyles],
+        template: TableHeaderCellTemplate,
+    })
+], TableHeaderCell);
+TableHeaderCell.define();
+export default TableHeaderCell;
+//# sourceMappingURL=TableHeaderCell.js.map

package/dist/TableHeaderCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCell.js","sourceRoot":"","sources":["../src/TableHeaderCell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,uBAAuB,MAAM,sDAAsD,CAAC;AAC3F,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;GAmBG;AAMH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;IAA3C;;QACC;;;;;WAKG;QAEH,UAAK,GAAG,MAAM,CAAC;QAEf;;;;;;;;WAQG;QAEH,aAAQ,GAAG,MAAM,CAAC;QAElB;;;;;WAKG;QAEH,aAAQ,GAAG,MAAM,CAAC;QAElB;;;;;;;;;WASG;QAEH,eAAU,GAAG,CAAC,CAAC;QAGf,WAAM,GAAG,KAAK,CAAC;QAEL,aAAQ,GAAW,cAAc,CAAC;QAC5C,gBAAW,GAAW,CAAC,CAAC;IAQzB,CAAC;IANA,UAAU;QACT,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QACpC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAC/B,CAAC;CACD,CAAA;AAhDA;IADC,QAAQ,EAAE;8CACI;AAYf;IADC,QAAQ,EAAE;iDACO;AASlB;IADC,QAAQ,EAAE;iDACO;AAalB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AAGf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;+CAChC;AA7CV,eAAe;IALpB,aAAa,CAAC;QACd,GAAG,EAAE,uBAAuB;QAC5B,MAAM,EAAE,CAAC,aAAa,CAAC,MAAM,EAAE,qBAAqB,CAAC;QACrD,QAAQ,EAAE,uBAAuB;KACjC,CAAC;GACI,eAAe,CAwDpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport TableCellBase from \"./TableCellBase.js\";\nimport TableHeaderCellTemplate from \"./generated/templates/TableHeaderCellTemplate.lit.js\";\nimport TableHeaderCellStyles from \"./generated/themes/TableHeaderCell.css.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-header-cell` component represents a column in the `ui5-table`.\n *\n * As it is tightly coupled to the `ui5-table`, it should only be used in the `ui5-table-header-row`\n * to ensure correct layout and design.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableHeaderCell.js\";`\n *\n * @constructor\n * @extends TableCellBase\n * @since 2.0\n * @public\n * @experimental This web component is available since 2.0 with an experimental flag and its API and behavior are subject to change.\n */\n@customElement({\n\ttag: \"ui5-table-header-cell\",\n\tstyles: [TableCellBase.styles, TableHeaderCellStyles],\n\ttemplate: TableHeaderCellTemplate,\n})\nclass TableHeaderCell extends TableCellBase {\n\t/**\n\t * Defines the width of column.\n\t *\n\t * @default \"auto\"\n\t * @public\n\t */\n\t@property()\n\twidth = \"auto\";\n\n\t/**\n \t * Defines the minimum width of the column.\n\t *\n\t * If the table is in `Popin` mode, the column will move into the popin when\n\t * when the minimum width does not fit anymore.\n\t *\n\t * @default \"auto\"\n\t * @public\n\t */\n\t@property()\n\tminWidth = \"auto\";\n\n\t/**\n\t * Defines the maximum width of the column.\n\t *\n\t * @default \"auto\"\n\t * @public\n\t */\n\t@property()\n\tmaxWidth = \"auto\";\n\n\t/**\n\t * Defines the importance of the column.\n\t *\n\t * This property affects the popin behaviour.\n\t * Columns with higher importance will move into the popin area later then less important\n\t * columns.\n\t *\n\t * @default 0\n\t * @public\n\t */\n\t@property({ type: Number })\n\timportance = 0;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_popin = false;\n\n\tprotected ariaRole: string = \"columnheader\";\n\t_popinWidth: number = 0;\n\n\tonEnterDOM() {\n\t\tsuper.onEnterDOM();\n\t\tthis.style.minWidth = this.minWidth;\n\t\tthis.style.maxWidth = this.maxWidth;\n\t\tthis.style.width = this.width;\n\t}\n}\n\nTableHeaderCell.define();\n\nexport default TableHeaderCell;\n"]}