@ui5/webcomponents 0.0.0-e7dd012d7 → 0.0.0-ebd9a4db3

package/dist/TableHeaderCellActionBase.js

@@ -0,0 +1,57 @@
+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 UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { customElement, eventStrict } from "@ui5/webcomponents-base/dist/decorators.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import TableHeaderCellActionBaseTemplate from "./TableHeaderCellActionBaseTemplate.js";
+import TableHeaderCellActionBaseStyles from "./generated/themes/TableHeaderCellActionBase.css.js";
+/**
+ * Fired when a header cell action is clicked.
+ *
+ * @param {HTMLElement} targetRef The reference to the element that triggered the event
+ * @public
+ * @since 2.8.0
+ */
+let TableHeaderCellActionBase = class TableHeaderCellActionBase extends UI5Element {
+    onBeforeRendering() {
+        this.toggleAttribute("_popin", !this.parentElement);
+    }
+    _onClick(e) {
+        // Retrieve the real action (if parent is header cell this instance is fine, otherwise retrieve it from the header cell)
+        const action = this.parentElement?.hasAttribute("ui5-table-header-cell") ? this : this.getRootNode().host._headerCell.action[0];
+        action.fireDecoratorEvent("click", { targetRef: e.target });
+        e.stopPropagation();
+    }
+    get _tooltip() {
+        return this.getRenderInfo().tooltip;
+    }
+    get _icon() {
+        return this.getRenderInfo().icon;
+    }
+};
+TableHeaderCellActionBase = __decorate([
+    eventStrict("click", {
+        bubbles: false,
+    })
+    /**
+     * @class
+     * The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.
+     * @constructor
+     * @abstract
+     * @extends UI5Element
+     * @since 2.8.0
+     * @public
+     */
+    ,
+    customElement({
+        renderer: jsxRenderer,
+        styles: TableHeaderCellActionBaseStyles,
+        template: TableHeaderCellActionBaseTemplate,
+    })
+], TableHeaderCellActionBase);
+export default TableHeaderCellActionBase;
+//# sourceMappingURL=TableHeaderCellActionBase.js.map

package/dist/TableHeaderCellActionBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCellActionBase.js","sourceRoot":"","sources":["../src/TableHeaderCellActionBase.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACxF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,iCAAiC,MAAM,wCAAwC,CAAC;AACvF,OAAO,+BAA+B,MAAM,qDAAqD,CAAC;AAelG;;;;;;GAMG;AAmBH,IAAe,yBAAyB,GAAxC,MAAe,yBAA0B,SAAQ,UAAU;IAU1D,iBAAiB;QAChB,IAAI,CAAC,eAAe,CAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC;IAED,QAAQ,CAAC,CAAkC;QAC1C,wHAAwH;QACxH,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,YAAY,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAG,IAAI,CAAC,WAAW,EAAiB,CAAC,IAAkB,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAS,CAAC;QACvK,MAAM,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC,MAAqB,EAAE,CAAC,CAAC;QAC3E,CAAC,CAAC,eAAe,EAAE,CAAC;IACrB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,OAAO,CAAC;IACrC,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC;IAClC,CAAC;CACD,CAAA;AA5Bc,yBAAyB;IAlBvC,WAAW,CAAC,OAAO,EAAE;QACrB,OAAO,EAAE,KAAK;KACd,CAAC;IAEF;;;;;;;;OAQG;;IACF,aAAa,CAAC;QACd,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,+BAA+B;QACvC,QAAQ,EAAE,iCAAiC;KAC3C,CAAC;GACa,yBAAyB,CA4BvC;AAED,eAAe,yBAAyB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { customElement, eventStrict } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport TableHeaderCellActionBaseTemplate from \"./TableHeaderCellActionBaseTemplate.js\";\nimport TableHeaderCellActionBaseStyles from \"./generated/themes/TableHeaderCellActionBase.css.js\";\nimport type TableCell from \"./TableCell.js\";\nimport type Button from \"./Button.js\";\n\n/**\n * Fired when a header cell action is clicked.\n *\n * @param {HTMLElement} targetRef The reference to the element that triggered the event\n * @public\n * @since 2.8.0\n */\ntype TableHeaderCellActionClickEventDetail = {\n\ttargetRef: HTMLElement;\n};\n\n/**\n * Fired when a header cell action is clicked.\n *\n * @param {HTMLElement} targetRef The reference to the element that triggered the event\n * @public\n * @since 2.8.0\n */\n@eventStrict(\"click\", {\n\tbubbles: false,\n})\n\n/**\n * @class\n * The `TableHeaderCellActionBase` class serves as a foundation for table header cell actions.\n * @constructor\n * @abstract\n * @extends UI5Element\n * @since 2.8.0\n * @public\n */\n@customElement({\n\trenderer: jsxRenderer,\n\tstyles: TableHeaderCellActionBaseStyles,\n\ttemplate: TableHeaderCellActionBaseTemplate,\n})\nabstract class TableHeaderCellActionBase extends UI5Element {\n\teventDetails!: {\n\t\t\"click\": TableHeaderCellActionClickEventDetail,\n\t}\n\n\tabstract getRenderInfo(): {\n\t\ticon: string;\n\t\ttooltip: string;\n\t};\n\n\tonBeforeRendering() {\n\t\tthis.toggleAttribute(\"_popin\", !this.parentElement);\n\t}\n\n\t_onClick(e: UI5CustomEvent<Button, \"click\">) {\n\t\t// Retrieve the real action (if parent is header cell this instance is fine, otherwise retrieve it from the header cell)\n\t\tconst action = this.parentElement?.hasAttribute(\"ui5-table-header-cell\") ? this : ((this.getRootNode() as ShadowRoot).host as TableCell)._headerCell.action[0] as this;\n\t\taction.fireDecoratorEvent(\"click\", { targetRef: e.target as HTMLElement });\n\t\te.stopPropagation();\n\t}\n\n\tget _tooltip() {\n\t\treturn this.getRenderInfo().tooltip;\n\t}\n\n\tget _icon() {\n\t\treturn this.getRenderInfo().icon;\n\t}\n}\n\nexport default TableHeaderCellActionBase;\n\nexport type {\n\tTableHeaderCellActionClickEventDetail,\n};\n"]}

package/dist/TableHeaderCellActionBaseTemplate.d.ts

@@ -0,0 +1,2 @@
+import type TableHeaderCellActionBase from "./TableHeaderCellActionBase.js";
+export default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TableHeaderCellActionBaseTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import Button from "./Button.js";
+import ButtonDesign from "./types/ButtonDesign.js";
+export default function TableHeaderCellActionBaseTemplate() {
+    return (_jsx(Button, { icon: this._icon, tooltip: this._tooltip, onClick: this._onClick, design: ButtonDesign.Transparent }));
+}
+//# sourceMappingURL=TableHeaderCellActionBaseTemplate.js.map

package/dist/TableHeaderCellActionBaseTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCellActionBaseTemplate.js","sourceRoot":"","sources":["../src/TableHeaderCellActionBaseTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,YAAY,MAAM,yBAAyB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,iCAAiC;IACxD,OAAO,CACN,KAAC,MAAM,IACN,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,MAAM,EAAE,YAAY,CAAC,WAAW,GACvB,CACV,CAAC;AACH,CAAC","sourcesContent":["import Button from \"./Button.js\";\nimport ButtonDesign from \"./types/ButtonDesign.js\";\nimport type TableHeaderCellActionBase from \"./TableHeaderCellActionBase.js\";\n\nexport default function TableHeaderCellActionBaseTemplate(this: TableHeaderCellActionBase) {\n\treturn (\n\t\t<Button\n\t\t\ticon={this._icon}\n\t\t\ttooltip={this._tooltip}\n\t\t\tonClick={this._onClick}\n\t\t\tdesign={ButtonDesign.Transparent}\n\t\t></Button>\n\t);\n}\n"]}

package/dist/TableHeaderCellTemplate.d.ts

@@ -0,0 +1,2 @@
+import type TableHeaderCell from "./TableHeaderCell.js";
+export default function TableHeaderCellTemplate(this: TableHeaderCell): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TableHeaderCellTemplate.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import Icon from "./Icon.js";
+import SortOrder from "@ui5/webcomponents-base/dist/types/SortOrder.js";
+import SortAscending from "@ui5/webcomponents-icons/dist/sort-ascending.js";
+import SortDescending from "@ui5/webcomponents-icons/dist/sort-descending.js";
+export default function TableHeaderCellTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsx("slot", { name: "action" }), _jsx("slot", {}), sortIcon.call(this)] }));
+}
+function sortIcon() {
+    switch (this.sortIndicator) {
+        case SortOrder.Ascending:
+            return _jsx(Icon, { name: SortAscending });
+        case SortOrder.Descending:
+            return _jsx(Icon, { name: SortDescending });
+        default:
+            return _jsx(_Fragment, {});
+    }
+}
+//# sourceMappingURL=TableHeaderCellTemplate.js.map

package/dist/TableHeaderCellTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderCellTemplate.js","sourceRoot":"","sources":["../src/TableHeaderCellTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,SAAS,MAAM,iDAAiD,CAAC;AACxE,OAAO,aAAa,MAAM,iDAAiD,CAAC;AAC5E,OAAO,cAAc,MAAM,kDAAkD,CAAC;AAG9E,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC9C,OAAO,CACN,8BACC,eAAM,IAAI,EAAC,QAAQ,GAAQ,EAC3B,gBAAa,EACX,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IACnB,CACH,CAAC;AACH,CAAC;AAED,SAAS,QAAQ;IAChB,QAAQ,IAAI,CAAC,aAAa,EAAE,CAAC;QAC7B,KAAK,SAAS,CAAC,SAAS;YACvB,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,aAAa,GAAS,CAAC;QAC3C,KAAK,SAAS,CAAC,UAAU;YACxB,OAAO,KAAC,IAAI,IAAC,IAAI,EAAE,cAAc,GAAS,CAAC;QAC5C;YACC,OAAO,mBAAK,CAAC;IACd,CAAC;AACF,CAAC","sourcesContent":["import Icon from \"./Icon.js\";\nimport SortOrder from \"@ui5/webcomponents-base/dist/types/SortOrder.js\";\nimport SortAscending from \"@ui5/webcomponents-icons/dist/sort-ascending.js\";\nimport SortDescending from \"@ui5/webcomponents-icons/dist/sort-descending.js\";\nimport type TableHeaderCell from \"./TableHeaderCell.js\";\n\nexport default function TableHeaderCellTemplate(this: TableHeaderCell) {\n\treturn (\n\t\t<>\n\t\t\t<slot name=\"action\"></slot>\n\t\t\t<slot></slot>\n\t\t\t{ sortIcon.call(this) }\n\t\t</>\n\t);\n}\n\nfunction sortIcon(this: TableHeaderCell) {\n\tswitch (this.sortIndicator) {\n\tcase SortOrder.Ascending:\n\t\treturn <Icon name={SortAscending}></Icon>;\n\tcase SortOrder.Descending:\n\t\treturn <Icon name={SortDescending}></Icon>;\n\tdefault:\n\t\treturn <></>;\n\t}\n}\n"]}

package/dist/TableHeaderRow.d.ts

@@ -0,0 +1,49 @@
+import TableRowBase from "./TableRowBase.js";
+import type 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;
+    onEnterDOM(): void;
+    onBeforeRendering(): void;
+    isHeaderRow(): boolean;
+    get _isSelectable(): boolean;
+    get _i18nSelection(): string;
+    get _i18nRowPopin(): string;
+    get _i18nRowActions(): 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, slot, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import TableRowBase from "./TableRowBase.js";
+import TableHeaderRowTemplate from "./TableHeaderRowTemplate.js";
+import TableHeaderRowStyles from "./generated/themes/TableHeaderRow.css.js";
+import { TABLE_SELECTION, TABLE_ROW_POPIN, TABLE_ROW_ACTIONS, TABLE_COLUMN_HEADER_ROW, } 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;
+    }
+    onEnterDOM() {
+        super.onEnterDOM();
+        this.setAttribute("aria-roledescription", TableRowBase.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW));
+    }
+    onBeforeRendering() {
+        super.onBeforeRendering();
+        if (this._table) {
+            this.style.top = this._table.stickyTop;
+        }
+    }
+    isHeaderRow() {
+        return true;
+    }
+    get _isSelectable() {
+        return this._isMultiSelect;
+    }
+    get _i18nSelection() {
+        return TableRowBase.i18nBundle.getText(TABLE_SELECTION);
+    }
+    get _i18nRowPopin() {
+        return TableRowBase.i18nBundle.getText(TABLE_ROW_POPIN);
+    }
+    get _i18nRowActions() {
+        return TableRowBase.i18nBundle.getText(TABLE_ROW_ACTIONS);
+    }
+};
+__decorate([
+    slot({
+        type: HTMLElement,
+        "default": true,
+        invalidateOnChildChange: {
+            properties: ["width", "_popin", "horizontalAlign", "popinHidden"],
+            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,
+    })
+    /**
+     * 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,EAAE,aAAa,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,4CAA4C,CAAC;AAC3F,OAAO,YAAY,MAAM,mBAAmB,CAAC;AAC7C,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AACjE,OAAO,oBAAoB,MAAM,0CAA0C,CAAC;AAE5E,OAAO,EACN,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,uBAAuB,GACvB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;;GAmBG;AAcH,IAAM,cAAc;AANpB;;;;;GAKG;AACH,MAAM,cAAe,SAAQ,YAAY;IAAzC;;QAmBC;;;;;;;WAOG;QAEH,WAAM,GAAG,KAAK,CAAC;IAgChB,CAAC;IA9BA,UAAU;QACT,KAAK,CAAC,UAAU,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,uBAAuB,CAAC,CAAC,CAAC;IACrG,CAAC;IAED,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,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;IACD,IAAI,eAAe;QAClB,OAAO,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAC3D,CAAC;CACD,CAAA;AA3CA;IATC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE;YACxB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,aAAa,CAAC;YACjE,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;IAbnB,aAAa,CAAC;QACd,GAAG,EAAE,sBAAsB;QAC3B,aAAa,EAAE,IAAI;QACnB,MAAM,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,oBAAoB,CAAC;QACnD,QAAQ,EAAE,sBAAsB;KAChC,CAAC;IAEF;;;;;OAKG;GACG,cAAc,CA4DnB;AAED,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import { customElement, slot, property } from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport TableRowBase from \"./TableRowBase.js\";\nimport TableHeaderRowTemplate from \"./TableHeaderRowTemplate.js\";\nimport TableHeaderRowStyles from \"./generated/themes/TableHeaderRow.css.js\";\nimport type TableHeaderCell from \"./TableHeaderCell.js\";\nimport {\n\tTABLE_SELECTION,\n\tTABLE_ROW_POPIN,\n\tTABLE_ROW_ACTIONS,\n\tTABLE_COLUMN_HEADER_ROW,\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})\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\", \"popinHidden\"],\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\tonEnterDOM(): void {\n\t\tsuper.onEnterDOM();\n\t\tthis.setAttribute(\"aria-roledescription\", TableRowBase.i18nBundle.getText(TABLE_COLUMN_HEADER_ROW));\n\t}\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 _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\tget _i18nRowActions() {\n\t\treturn TableRowBase.i18nBundle.getText(TABLE_ROW_ACTIONS);\n\t}\n}\n\nTableHeaderRow.define();\n\nexport default TableHeaderRow;\n"]}

package/dist/TableHeaderRowTemplate.d.ts

@@ -0,0 +1,2 @@
+import type TableHeaderRow from "./TableHeaderRow.js";
+export default function TableHeaderRowTemplate(this: TableHeaderRow): import("@ui5/webcomponents-base/jsx-runtime").JSX.Element;

package/dist/TableHeaderRowTemplate.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import CheckBox from "./CheckBox.js";
+import TableHeaderCell from "./TableHeaderCell.js";
+export default function TableHeaderRowTemplate() {
+    return (_jsxs(_Fragment, { children: [this._hasRowSelector &&
+                _jsx(TableHeaderCell, { id: "selection-cell", "aria-selected": this._isSelected, "aria-label": this._i18nSelection, "data-ui5-table-cell-fixed": true, "data-ui5-table-selection-component": true, children: this._isMultiSelect &&
+                        _jsx(CheckBox, { id: "selection-component", tabindex: -1, checked: this._isSelected, onChange: this._onSelectionChange, accessibleName: this._i18nRowSelector }) }), this._visibleCells.map(cell => (_jsx("slot", { name: cell._individualSlot }, cell._individualSlot))), this._rowActionCount > 0 &&
+                _jsx(TableHeaderCell, { id: "actions-cell", "aria-label": this._i18nRowActions }), this._popinCells.length > 0 &&
+                _jsx(TableHeaderCell, { id: "popin-cell", "aria-label": this._i18nRowPopin, "data-excluded-from-navigation": true })] }));
+}
+//# sourceMappingURL=TableHeaderRowTemplate.js.map

package/dist/TableHeaderRowTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderRowTemplate.js","sourceRoot":"","sources":["../src/TableHeaderRowTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,eAAe,CAAC;AACrC,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAGnD,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC7C,OAAO,CACN,8BACG,IAAI,CAAC,eAAe;gBACrB,KAAC,eAAe,IAAC,EAAE,EAAC,gBAAgB,mBACpB,IAAI,CAAC,WAAW,gBACnB,IAAI,CAAC,cAAc,2FAI7B,IAAI,CAAC,cAAc;wBACpB,KAAC,QAAQ,IAAC,EAAE,EAAC,qBAAqB,EACjC,QAAQ,EAAE,CAAC,CAAC,EACZ,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,kBAAkB,EACjC,cAAc,EAAE,IAAI,CAAC,gBAAgB,GAC1B,GAEI,EAGjB,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAChC,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,IAAO,IAAI,CAAC,eAAe,CAAS,CACpE,CAAC,EAEA,IAAI,CAAC,eAAe,GAAG,CAAC;gBACzB,KAAC,eAAe,IAAC,EAAE,EAAC,cAAc,gBACrB,IAAI,CAAC,eAAe,GACd,EAGlB,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC;gBAC5B,KAAC,eAAe,IAAC,EAAE,EAAC,YAAY,gBACnB,IAAI,CAAC,aAAa,0CAEZ,IAElB,CACH,CAAC;AACH,CAAC","sourcesContent":["import CheckBox from \"./CheckBox.js\";\nimport TableHeaderCell from \"./TableHeaderCell.js\";\nimport type TableHeaderRow from \"./TableHeaderRow.js\";\n\nexport default function TableHeaderRowTemplate(this: TableHeaderRow) {\n\treturn (\n\t\t<>\n\t\t\t{ this._hasRowSelector &&\n\t\t\t\t<TableHeaderCell id=\"selection-cell\"\n\t\t\t\t\taria-selected={this._isSelected}\n\t\t\t\t\taria-label={this._i18nSelection}\n\t\t\t\t\tdata-ui5-table-cell-fixed\n\t\t\t\t\tdata-ui5-table-selection-component\n\t\t\t\t>\n\t\t\t\t\t{ this._isMultiSelect &&\n\t\t\t\t\t\t<CheckBox id=\"selection-component\"\n\t\t\t\t\t\t\ttabindex={-1}\n\t\t\t\t\t\t\tchecked={this._isSelected}\n\t\t\t\t\t\t\tonChange={this._onSelectionChange}\n\t\t\t\t\t\t\taccessibleName={this._i18nRowSelector}\n\t\t\t\t\t\t></CheckBox>\n\t\t\t\t\t}\n\t\t\t\t</TableHeaderCell>\n\t\t\t}\n\n\t\t\t{ this._visibleCells.map(cell => (\n\t\t\t\t<slot name={cell._individualSlot} key={cell._individualSlot}></slot>\n\t\t\t))}\n\n\t\t\t{ this._rowActionCount > 0 &&\n\t\t\t\t<TableHeaderCell id=\"actions-cell\"\n\t\t\t\t\taria-label={this._i18nRowActions}\n\t\t\t\t></TableHeaderCell>\n\t\t\t}\n\n\t\t\t{ this._popinCells.length > 0 &&\n\t\t\t\t<TableHeaderCell id=\"popin-cell\"\n\t\t\t\t\taria-label={this._i18nRowPopin}\n\t\t\t\t\tdata-excluded-from-navigation\n\t\t\t\t></TableHeaderCell>\n\t\t\t}\n\t\t</>\n\t);\n}\n"]}

package/dist/TableNavigation.d.ts

@@ -0,0 +1,38 @@
+import TableExtension from "./TableExtension.js";
+import GridWalker from "./GridWalker.js";
+import type TableRowBase from "./TableRowBase.js";
+import type Table from "./Table.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;

package/dist/TableNavigation.js

@@ -0,0 +1,271 @@
+import { isUp, isUpShift, isDown, isDownShift, isLeft, isRight, isPageUp, isPageDown, isHome, isEnd, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
+import isElementHidden from "@ui5/webcomponents-base/dist/util/isElementHidden.js";
+import getActiveElement from "@ui5/webcomponents-base/dist/util/getActiveElement.js";
+import { getTabbableElements } from "@ui5/webcomponents-base/dist/util/TabbableElements.js";
+import TableExtension from "./TableExtension.js";
+import GridWalker from "./GridWalker.js";
+/**
+ * Handles the keyboard navigation for the ui5-table.
+ *
+ * @class
+ * @private
+ */
+class TableNavigation extends TableExtension {
+    constructor(table) {
+        super();
+        this._colPosition = 0;
+        this._tabPosition = 0;
+        this._table = table;
+        this._gridWalker = new GridWalker();
+        this._gridWalker.setGrid(this._getNavigationItemsOfGrid());
+        this._onKeyDownCaptureBound = this._onKeyDownCapture.bind(this);
+        // we register the keydown handler on the table element at the capturing phase since the
+        // busy indicator stops the propagation of the keydown event and it never reaches the table
+        this._table.addEventListener("keydown", this._onKeyDownCaptureBound, { capture: true });
+    }
+    _getNavigationItemsOfRow(row) {
+        return [row, ...row.shadowRoot.children].map(element => {
+            return element.localName === "slot" ? element.assignedElements() : element;
+        }).flat().filter(element => {
+            return element.localName.includes("ui5-table-") && !element.hasAttribute("data-excluded-from-navigation");
+        });
+    }
+    _getNavigationItemsOfGrid() {
+        const items = [];
+        if (this._table.headerRow[0] && !isElementHidden(this._table.headerRow[0])) {
+            items.push(this._getNavigationItemsOfRow(this._table.headerRow[0]));
+            this._gridWalker.setFirstRowPos(1);
+        }
+        else {
+            this._gridWalker.setFirstRowPos(0);
+        }
+        if (this._table.rows.length) {
+            this._table.rows.forEach(row => items.push(this._getNavigationItemsOfRow(row)));
+        }
+        else if (this._table._noDataRow) {
+            items.push(this._getNavigationItemsOfRow(this._table._noDataRow));
+        }
+        if (this._table.rows.length > 0 && this._table._getGrowing()?.hasGrowingComponent()) {
+            items.push([this._table._getGrowing()?.getFocusDomRef()]);
+            this._gridWalker.setLastRowPos(-1);
+        }
+        else {
+            this._gridWalker.setLastRowPos(0);
+        }
+        if (!this._gridWalker.getCurrent()) {
+            this._gridWalker.setRowPos(this._gridWalker.getFirstRowPos());
+        }
+        this._gridWalker.setGrid(items);
+        return items;
+    }
+    _setCurrentItem(e, callback) {
+        const navigationItems = this._getNavigationItemsOfGrid().flat();
+        const navigationItem = e.composedPath().find(target => navigationItems.includes(target));
+        if (navigationItem) {
+            this._gridWalker.setCurrent(navigationItem);
+            callback && callback(navigationItem);
+        }
+    }
+    _isEventFromCurrentItem(e) {
+        return e.composedPath()[0] === this._gridWalker.getCurrent();
+    }
+    _focusElement(element, ignoreFocusIn = true) {
+        if (!element || element === getActiveElement()) {
+            return;
+        }
+        const navigationItems = this._getNavigationItemsOfGrid().flat();
+        if (navigationItems.includes(this._lastFocusedItem)) {
+            this._lastFocusedItem?.removeAttribute("tabindex");
+        }
+        if (navigationItems.includes(element)) {
+            element.setAttribute("tabindex", "-1");
+            this._lastFocusedItem = element;
+        }
+        this._ignoreFocusIn = ignoreFocusIn;
+        element.focus({ preventScroll: element === this._table._beforeElement || element === this._table._afterElement });
+        if (element instanceof HTMLInputElement) {
+            element.select();
+        }
+        this._ignoreFocusIn = false;
+    }
+    _focusCurrentItem() {
+        this._focusElement(this._gridWalker.getCurrent());
+    }
+    _handleEnter(e, eventOrigin) {
+        if (eventOrigin.hasAttribute("ui5-table-cell-base")) {
+            this._handleF2(e, eventOrigin);
+        }
+    }
+    _handleF2(e, eventOrigin) {
+        if (this._isEventFromCurrentItem(e)) {
+            const firstTabbable = getTabbableElements(eventOrigin)[0];
+            this._focusElement(firstTabbable);
+        }
+        else {
+            this._setCurrentItem(e, () => this._focusCurrentItem());
+        }
+        e.preventDefault();
+    }
+    _handleF7(e, eventOrigin) {
+        if (eventOrigin.hasAttribute("ui5-table-row-base")) {
+            this._gridWalker.setColPos(this._colPosition);
+            let elementToFocus = this._gridWalker.getCurrent();
+            if (this._tabPosition > -1) {
+                const tabbables = getTabbableElements(elementToFocus);
+                elementToFocus = tabbables[this._tabPosition] || tabbables.pop() || elementToFocus;
+            }
+            this._focusElement(elementToFocus);
+        }
+        else {
+            this._setCurrentItem(e, currentItem => {
+                this._tabPosition = getTabbableElements(currentItem).indexOf(eventOrigin);
+                this._colPosition = this._gridWalker.getColPos();
+                this._gridWalker.setColPos(0);
+                this._focusCurrentItem();
+            });
+        }
+        e.preventDefault();
+    }
+    _handleTab(e, eventOrigin) {
+        if (this._isEventFromCurrentItem(e)) {
+            this._focusElement(e.shiftKey ? this._table._beforeElement : this._table._afterElement);
+        }
+        else {
+            const tabbables = getTabbableElements(this._table._tableElement);
+            if (e.shiftKey && tabbables[0] === eventOrigin) {
+                this._focusElement(this._table._beforeElement);
+            }
+            if (!e.shiftKey && tabbables[tabbables.length - 1] === eventOrigin) {
+                this._focusElement(this._table._afterElement);
+            }
+        }
+    }
+    _handleArrowUpDown(e, eventOrigin, direction) {
+        if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey || e.defaultPrevented || this._isEventFromCurrentItem(e) || /^(input|textarea)$/i.test(eventOrigin.nodeName)) {
+            return false;
+        }
+        this._setCurrentItem(e, currentItem => {
+            this._tabPosition = getTabbableElements(currentItem).indexOf(eventOrigin);
+            this._gridWalker.setRowPos(this._gridWalker.getRowPos() + direction);
+            let elementToFocus = this._gridWalker.getCurrent();
+            const tabbables = getTabbableElements(elementToFocus);
+            elementToFocus = tabbables[this._tabPosition] || tabbables.pop() || elementToFocus;
+            this._focusElement(elementToFocus);
+            e.preventDefault();
+        });
+        return false;
+    }
+    _handleArrowUp(e, eventOrigin) {
+        return this._handleArrowUpDown(e, eventOrigin, -1);
+    }
+    _handleArrowDown(e, eventOrigin) {
+        return this._handleArrowUpDown(e, eventOrigin, 1);
+    }
+    _onkeydown(e, eventOrigin) {
+        if (e.defaultPrevented) {
+            return;
+        }
+        if (!this._isEventFromCurrentItem(e) && this._getNavigationItemsOfGrid().flat().includes(eventOrigin)) {
+            this._gridWalker.setCurrent(eventOrigin);
+        }
+        this._table._getVirtualizer()?._onKeyDown(e);
+        if (e.defaultPrevented) {
+            return;
+        }
+        const keydownHandlerName = `_handle${e.code}`;
+        const keydownHandler = this[keydownHandlerName];
+        if (typeof keydownHandler === "function" && keydownHandler.call(this, e, eventOrigin) === undefined) {
+            return;
+        }
+        if (!this._isEventFromCurrentItem(e)) {
+            return;
+        }
+        if (isLeft(e)) {
+            this._gridWalker[this._table.effectiveDir === "rtl" ? "right" : "left"]();
+        }
+        else if (isRight(e)) {
+            this._gridWalker[this._table.effectiveDir === "rtl" ? "left" : "right"]();
+        }
+        else if (isUp(e) || isUpShift(e)) {
+            this._gridWalker.up();
+        }
+        else if (isDown(e) || isDownShift(e)) {
+            this._gridWalker.down();
+        }
+        else if (isHome(e)) {
+            this._gridWalker.home();
+        }
+        else if (isEnd(e)) {
+            this._gridWalker.end();
+        }
+        else if (isPageUp(e)) {
+            this._gridWalker.pageup();
+        }
+        else if (isPageDown(e)) {
+            this._gridWalker.pagedown();
+        }
+        else {
+            return;
+        }
+        this._focusCurrentItem();
+        e.preventDefault();
+    }
+    _onclick(e) {
+        const navigationItems = this._getNavigationItemsOfGrid();
+        const flatNavigationItems = navigationItems.flat();
+        let navigationItem = null;
+        let focusableElement = null;
+        // eslint-disable-next-line no-restricted-syntax
+        for (const target of e.composedPath()) {
+            if (target.nodeType === Node.ELEMENT_NODE) {
+                const element = target;
+                if (element.matches(":focus-within")) {
+                    focusableElement = element;
+                    break;
+                }
+                if (flatNavigationItems.includes(element)) {
+                    navigationItem = element;
+                    break;
+                }
+            }
+        }
+        if (focusableElement && focusableElement !== this._lastFocusedItem) {
+            this._lastFocusedItem?.removeAttribute("tabindex");
+            this._lastFocusedItem = undefined;
+        }
+        else if (navigationItem) {
+            this._gridWalker.setCurrent(navigationItem);
+            this._gridWalker.setColPos(0);
+            this._focusCurrentItem();
+        }
+    }
+    _onfocusin(e, eventOrigin) {
+        if (this._ignoreFocusIn) {
+            return;
+        }
+        if (eventOrigin === this._table._beforeElement || eventOrigin === this._table._afterElement) {
+            if (this._table.loading) {
+                this._table._loadingElement.focus();
+            }
+            else {
+                this._getNavigationItemsOfGrid();
+                this._gridWalker.setColPos(0);
+                this._focusCurrentItem();
+            }
+        }
+        else if (eventOrigin !== this._lastFocusedItem && this._getNavigationItemsOfGrid().flat().includes(eventOrigin)) {
+            this._lastFocusedItem = eventOrigin;
+        }
+    }
+    _onKeyDownCapture(e) {
+        if (!this._table.loading) {
+            return;
+        }
+        if (isTabNext(e) || isTabPrevious(e)) {
+            this._focusElement(e.shiftKey ? this._table._beforeElement : this._table._afterElement);
+            e.stopImmediatePropagation();
+        }
+    }
+}
+export default TableNavigation;
+//# sourceMappingURL=TableNavigation.js.map