@ui5/webcomponents 0.0.0-9195c41b9 → 0.0.0-9261ac932

package/dist/TableGrowing.js

@@ -0,0 +1,251 @@
+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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.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.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;
+        this.identifier = "TableGrowing";
+    }
+    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);
+        }
+        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.fireDecoratorEvent("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);
+__decorate([
+    i18n("@ui5/webcomponents")
+], TableGrowing, "i18nBundle", 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", {
+        bubbles: true,
+    })
+], 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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.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.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\tbubbles: true,\n})\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\treadonly identifier = \"TableGrowing\";\n\t_table?: Table;\n\t_observer?: IntersectionObserver;\n\t_individualSlot?: string;\n\t_currentLastRow?: HTMLElement;\n\t_shouldFocusRow?: boolean;\n\n\t@i18n(\"@ui5/webcomponents\")\n\tstatic i18nBundle: I18nBundle;\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);\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.fireDecoratorEvent(\"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,64 @@
+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.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;
+    onBeforeRendering(): void;
+}
+export default TableHeaderCell;

package/dist/TableHeaderCell.js

@@ -0,0 +1,110 @@
+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.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;
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        // overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable
+        this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+    }
+};
+__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;IAczB,CAAC;IAZA,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;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,+FAA+F;QAC/F,IAAI,CAAC,KAAK,CAAC,cAAc,GAAG,0BAA0B,IAAI,CAAC,eAAe,GAAG,CAAC;IAC/E,CAAC;CACD,CAAA;AAtDA;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,CA8DpB;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.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\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\t// overwrite setting of TableCellBase so that the TableHeaderCell always uses the slot variable\n\t\tthis.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;\n\t}\n}\n\nTableHeaderCell.define();\n\nexport default TableHeaderCell;\n"]}

package/dist/TableHeaderRow.d.ts

@@ -0,0 +1,48 @@
+import TableRowBase from "./TableRowBase.js";
+import TableHeaderCell from "./TableHeaderCell.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-row` component represents the table headers of a `ui5-table`.
+ *
+ * It is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.
+ * The header row is placed in the `headerRow` slot of the table.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderRow.js";`
+ *
+ * @constructor
+ * @extends TableRowBase
+ * @since 2.0.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 TableHeaderRow extends TableRowBase {
+    /**
+     * Defines the cells of the component.
+     *
+     * **Note:** Use `ui5-table-header-cell` for the intended design.
+     *
+     * @public
+     */
+    cells: Array<TableHeaderCell>;
+    /**
+     * Sticks the `ui5-table-header-row` to the top of a table.
+     *
+     * Note: If used in combination with overflowMode "Scroll", the table needs a defined height for the sticky header to work as expected.
+     *
+     * @default false
+     * @public
+     */
+    sticky: boolean;
+    onBeforeRendering(): void;
+    isHeaderRow(): boolean;
+    get _isSelectable(): boolean | undefined;
+    get _isSelected(): boolean | undefined;
+    get _i18nSelection(): string;
+    get _i18nRowPopin(): string;
+}
+export default TableHeaderRow;

package/dist/TableHeaderRow.js

@@ -0,0 +1,108 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import TableRowBase from "./TableRowBase.js";
+import TableHeaderRowTemplate from "./generated/templates/TableHeaderRowTemplate.lit.js";
+import TableHeaderRowStyles from "./generated/themes/TableHeaderRow.css.js";
+import TableHeaderCell from "./TableHeaderCell.js";
+import { TABLE_SELECTION, TABLE_ROW_POPIN, } from "./generated/i18n/i18n-defaults.js";
+/**
+ * @class
+ *
+ * ### Overview
+ *
+ * The `ui5-table-header-row` component represents the table headers of a `ui5-table`.
+ *
+ * It is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.
+ * The header row is placed in the `headerRow` slot of the table.
+ *
+ * ### ES6 Module Import
+ *
+ * `import "@ui5/webcomponents/dist/TableHeaderRow.js";`
+ *
+ * @constructor
+ * @extends TableRowBase
+ * @since 2.0.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 TableHeaderRow = 
+/**
+ * Example custom event.
+ * Please keep in mind that all public events should be documented in the API Reference as shown below.
+ *
+ * @public
+ */
+class TableHeaderRow extends TableRowBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sticks the `ui5-table-header-row` to the top of a table.
+         *
+         * Note: If used in combination with overflowMode "Scroll", the table needs a defined height for the sticky header to work as expected.
+         *
+         * @default false
+         * @public
+         */
+        this.sticky = false;
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        if (this._table) {
+            this.style.top = this._table.stickyTop;
+        }
+    }
+    isHeaderRow() {
+        return true;
+    }
+    get _isSelectable() {
+        return this._isMultiSelect;
+    }
+    get _isSelected() {
+        return this._tableSelection?.areAllRowsSelected();
+    }
+    get _i18nSelection() {
+        return TableRowBase.i18nBundle.getText(TABLE_SELECTION);
+    }
+    get _i18nRowPopin() {
+        return TableRowBase.i18nBundle.getText(TABLE_ROW_POPIN);
+    }
+};
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        invalidateOnChildChange: {
+            properties: ["width", "_popin", "horizontalAlign"],
+            slots: false,
+        },
+        individualSlots: true,
+    })
+], TableHeaderRow.prototype, "cells", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableHeaderRow.prototype, "sticky", void 0);
+TableHeaderRow = __decorate([
+    customElement({
+        tag: "ui5-table-header-row",
+        languageAware: true,
+        styles: [TableRowBase.styles, TableHeaderRowStyles],
+        template: TableHeaderRowTemplate,
+        dependencies: [...TableRowBase.dependencies, TableHeaderCell],
+    })
+    /**
+     * Example custom event.
+     * Please keep in mind that all public events should be documented in the API Reference as shown below.
+     *
+     * @public
+     */
+], TableHeaderRow);
+TableHeaderRow.define();
+export default TableHeaderRow;
+//# sourceMappingURL=TableHeaderRow.js.map

package/dist/TableHeaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderRow.js","sourceRoot":"","sources":["../src/TableHeaderRow.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,sBAAsB,MAAM,qDAAqD,CAAC;AACzF,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAC5E,OAAO,eAAe,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACN,eAAe,EACf,eAAe,GACf,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;AAeH,IAAM,cAAc;AANpB;;;;;GAKG;AACH,MAAM,cAAe,SAAQ,YAAY;IAAzC;;QAmBC;;;;;;;WAOG;QAEH,WAAM,GAAG,KAAK,CAAC;IA4BhB,CAAC;IA1BA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;QACxC,CAAC;IACF,CAAC;IAED,WAAW;QACV,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,IAAI,CAAC,cAAc,CAAC;IAC5B,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACnD,CAAC;IAED,IAAI,cAAc;QACjB,OAAO,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACzD,CAAC;IAED,IAAI,aAAa;QAChB,OAAO,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;IACzD,CAAC;CACD,CAAA;AAvCA;IATC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE;YACxB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,iBAAiB,CAAC;YAClD,KAAK,EAAE,KAAK;SACZ;QACD,eAAe,EAAE,IAAI;KACrB,CAAC;6CAC6B;AAW/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACb;AA5BV,cAAc;IAdnB,aAAa,CAAC;QACd,GAAG,EAAE,sBAAsB;QAC3B,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC;QACnD,QAAQ,EAAE,sBAAsB;QAChC,YAAY,EAAE,CAAC,GAAG,YAAY,CAAC,YAAY,EAAE,eAAe,CAAC;KAC7D,CAAC;IAEF;;;;;OAKG;GACG,cAAc,CAwDnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport TableRowBase from \"./TableRowBase.js\";\nimport TableHeaderRowTemplate from \"./generated/templates/TableHeaderRowTemplate.lit.js\";\nimport TableHeaderRowStyles from \"./generated/themes/TableHeaderRow.css.js\";\nimport TableHeaderCell from \"./TableHeaderCell.js\";\nimport {\n\tTABLE_SELECTION,\n\tTABLE_ROW_POPIN,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-header-row` component represents the table headers of a `ui5-table`.\n *\n * It is tightly coupled to the `ui5-table` and should therefore be used in the `ui5-table` only.\n * The header row is placed in the `headerRow` slot of the table.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableHeaderRow.js\";`\n *\n * @constructor\n * @extends TableRowBase\n * @since 2.0.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-row\",\n\tlanguageAware: true,\n\tstyles: [TableRowBase.styles, TableHeaderRowStyles],\n\ttemplate: TableHeaderRowTemplate,\n\tdependencies: [...TableRowBase.dependencies, TableHeaderCell],\n})\n\n/**\n * Example custom event.\n * Please keep in mind that all public events should be documented in the API Reference as shown below.\n *\n * @public\n */\nclass TableHeaderRow extends TableRowBase {\n\t/**\n\t * Defines the cells of the component.\n\t *\n\t * **Note:** Use `ui5-table-header-cell` for the intended design.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\t\"default\": true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: [\"width\", \"_popin\", \"horizontalAlign\"],\n\t\t\tslots: false,\n\t\t},\n\t\tindividualSlots: true,\n\t})\n\tcells!: Array<TableHeaderCell>;\n\n\t/**\n\t * Sticks the `ui5-table-header-row` to the top of a table.\n\t *\n\t * Note: If used in combination with overflowMode \"Scroll\", the table needs a defined height for the sticky header to work as expected.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tsticky = false;\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tif (this._table) {\n\t\t\tthis.style.top = this._table.stickyTop;\n\t\t}\n\t}\n\n\tisHeaderRow(): boolean {\n\t\treturn true;\n\t}\n\n\tget _isSelectable() {\n\t\treturn this._isMultiSelect;\n\t}\n\n\tget _isSelected() {\n\t\treturn this._tableSelection?.areAllRowsSelected();\n\t}\n\n\tget _i18nSelection() {\n\t\treturn TableRowBase.i18nBundle.getText(TABLE_SELECTION);\n\t}\n\n\tget _i18nRowPopin() {\n\t\treturn TableRowBase.i18nBundle.getText(TABLE_ROW_POPIN);\n\t}\n}\n\nTableHeaderRow.define();\n\nexport default TableHeaderRow;\n"]}

package/dist/TableNavigation.d.ts

@@ -0,0 +1,38 @@
+import type Table from "./Table.js";
+import type TableRowBase from "./TableRowBase.js";
+import TableExtension from "./TableExtension.js";
+import GridWalker from "./GridWalker.js";
+/**
+ * Handles the keyboard navigation for the ui5-table.
+ *
+ * @class
+ * @private
+ */
+declare class TableNavigation extends TableExtension {
+    _table: Table;
+    _gridWalker: GridWalker;
+    _colPosition: number;
+    _tabPosition: number;
+    _ignoreFocusIn?: boolean;
+    _lastFocusedItem?: HTMLElement;
+    _onKeyDownCaptureBound: (e: KeyboardEvent) => void;
+    constructor(table: Table);
+    _getNavigationItemsOfRow(row: TableRowBase): HTMLElement[];
+    _getNavigationItemsOfGrid(): (HTMLElement | undefined)[][];
+    _setCurrentItem(e: Event, callback?: (currentItem: HTMLElement) => void): void;
+    _isEventFromCurrentItem(e: Event): boolean;
+    _focusElement(element: HTMLElement, ignoreFocusIn?: boolean): void;
+    _focusCurrentItem(): void;
+    _handleEnter(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    _handleF2(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    _handleF7(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    _handleTab(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    _handleArrowUpDown(e: KeyboardEvent, eventOrigin: HTMLElement, direction: -1 | 1): boolean;
+    _handleArrowUp(e: KeyboardEvent, eventOrigin: HTMLElement): boolean;
+    _handleArrowDown(e: KeyboardEvent, eventOrigin: HTMLElement): boolean;
+    _onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement): void;
+    _onclick(e: PointerEvent): void;
+    _onfocusin(e: FocusEvent, eventOrigin: HTMLElement): void;
+    _onKeyDownCapture(e: KeyboardEvent): void;
+}
+export default TableNavigation;