@ui5/webcomponents 2.0.0-rc.6 → 2.0.1

package/dist/TableGrowing.js.map

@@ -1 +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 */\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({ type: TableGrowingMode, defaultValue: TableGrowingMode.Button })\n\ttype!: `${TableGrowingMode}`;\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 \"\"\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 \"\"\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!: boolean;\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?: boolean;\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"]}
+{"version":3,"file":"TableGrowing.js","sourceRoot":"","sources":["../src/TableGrowing.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,kDAAkD,CAAC;AAGrE,OAAO,EAAE,aAAa,EAAE,MAAM,4CAA4C,CAAC;AAC3E,OAAO,EACN,OAAO,EACP,OAAO,GACP,MAAM,sCAAsC,CAAC;AAI9C,OAAO,gBAAgB,MAAM,6BAA6B,CAAC;AAC3D,OAAO,oBAAoB,MAAM,mDAAmD,CAAC;AACrF,OAAO,eAAe,MAAM,wCAAwC,CAAC;AACrE,OAAO,EACN,UAAU,EACV,sBAAsB,GACtB,MAAM,mCAAmC,CAAC;AAE3C,2EAA2E;AAC3E,4FAA4F;AAE5F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAeH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QACC;;;;;;;;;;WAUG;QAEH,SAAI,GAA0B,QAAQ,CAAC;QAyBvC;;WAEG;QAEH,aAAQ,GAAG,KAAK,CAAC;QAEjB;;;;WAIG;QAEH,iBAAY,GAAG,KAAK,CAAC;QAEZ,eAAU,GAAG,cAAc,CAAC;IAyKtC,CAAC;IAhKA,MAAM,CAAC,KAAK,CAAC,QAAQ;QACpB,cAAY,CAAC,UAAU,GAAG,MAAM,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACrE,CAAC;IAED,eAAe,CAAC,KAAY;QAC3B,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;YAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACxB;IACF,CAAC;IAED,eAAe;QACd,qEAAqE;QACrE,IAAI,IAAI,CAAC,eAAe,EAAE;YACzB,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;YAC7B,IAAI,QAAQ,GAAG,IAAI,CAAC,eAAe,EAAE,kBAAiC,CAAC;YAEvE,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE;gBAC/B,QAAQ,KAAK,IAAI,CAAC,cAAc,EAAiB,CAAC;aAClD;YAED,QAAQ,KAAK,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAgB,CAAC;YAEjD,QAAQ,EAAE,KAAK,EAAE,CAAC;SAClB;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,OAAO;SACP;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;YAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACxB;IACF,CAAC;IAED,SAAS;QACR,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QACxB,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;IAClC,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;QAC7B,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;QAC3B,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACjC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,mBAAmB;QAClB,IAAI,IAAI,CAAC,gBAAgB,EAAE,EAAE;YAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC;SACvH;QAED,OAAO,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAChE,CAAC;IAED;;;OAGG;IACH,QAAQ;QACP,wFAAwF;QACxF,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,mBAAmB,EAAE,EAAE;YAC9C,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;SACrE;QACD,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAE5B,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACf,OAAO,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,MAAM,CAAC;IAC9C,CAAC;IAED;;;OAGG;IACH,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACjB,OAAO;SACP;QAED,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC5E,IAAI,WAAW,EAAE;YAChB,IAAI,CAAC,wBAAwB,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;SACrD;IACF,CAAC;IAED;;;;OAIG;IACH,wBAAwB;QACvB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACpB,IAAI,CAAC,SAAS,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBAC1E,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE,MAAM;gBAClB,SAAS,EAAE,GAAG;aACd,CAAC,CAAC;SACH;QACD,OAAO,IAAI,CAAC,SAAS,CAAC;IACvB,CAAC;IAED,eAAe,CAAC,OAAyC;QACxD,IAAI,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE;YAChD,IAAI,CAAC,QAAQ,EAAE,CAAC;SAChB;IACF,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YACjB,OAAO;SACP;QACD,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC;IAC3B,CAAC;IAED;;;;;OAKG;IACH,UAAU,CAAC,CAAgB;QAC1B,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SACzB;QAED,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACf,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;SACzB;IACF,CAAC;IAED,QAAQ,CAAC,CAAgB;QACxB,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE;YACf,IAAI,CAAC,QAAQ,EAAE,CAAC;SAChB;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,WAAW;QACV,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;IAC3B,CAAC;IAED,IAAI,kBAAkB;QACrB,OAAO,IAAI,CAAC,WAAW,IAAI,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACxE,CAAC;IAED,IAAI,yBAAyB;QAC5B,OAAO,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,sBAAsB,CAAC,CAAC;IAChE,CAAC;IAED,IAAI,iBAAiB;QACpB,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;IACnC,CAAC;CACD,CAAA;AAhNA;IADC,QAAQ,EAAE;0CAC4B;AAavC;IADC,QAAQ,EAAE;iDACU;AAUrB;IADC,QAAQ,EAAE;oDACa;AAMxB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACX;AAQjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDACP;AAlDhB,YAAY;IAdjB,aAAa,CAAC;QACd,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,SAAS;QACnB,QAAQ,EAAE,oBAAoB;QAC9B,MAAM,EAAE,eAAe;KACvB,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,WAAW,CAAC;GAEb,YAAY,CA6NjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","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\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\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

@@ -17,6 +17,7 @@ import TableCellBase from "./TableCellBase.js";
  * @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 {
     /**

package/dist/TableHeaderCell.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import TableCellBase from "./TableCellBase.js";
 import TableHeaderCellTemplate from "./generated/templates/TableHeaderCellTemplate.lit.js";
 import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
@@ -28,30 +27,68 @@ import TableHeaderCellStyles from "./generated/themes/TableHeaderCell.css.js";
  * @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({ type: String, defaultValue: "auto" })
+    property()
 ], TableHeaderCell.prototype, "width", void 0);
 __decorate([
-    property({ type: String, defaultValue: "auto" })
+    property()
 ], TableHeaderCell.prototype, "minWidth", void 0);
 __decorate([
-    property({ type: String, defaultValue: "auto" })
+    property()
 ], TableHeaderCell.prototype, "maxWidth", void 0);
 __decorate([
-    property({ validator: Integer, defaultValue: 0 })
+    property({ type: Number })
 ], TableHeaderCell.prototype, "importance", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })

package/dist/TableHeaderCell.js.map

@@ -1 +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,OAAO,MAAM,+CAA+C,CAAC;AACpE,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,uBAAuB,MAAM,sDAAsD,CAAC;AAC3F,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAE9E;;;;;;;;;;;;;;;;;;GAkBG;AAMH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,aAAa;IAA3C;;QA+CW,aAAQ,GAAW,cAAc,CAAC;QAC5C,gBAAW,GAAW,CAAC,CAAC;IAOzB,CAAC;IALA,UAAU;QACT,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;AA/CA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;8CAClC;AAYf;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;iDAC/B;AASlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,CAAC;iDAC/B;AAalB;IADC,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,CAAC;mDAC9B;AAGpB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;+CAC9B;AA7CZ,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,CAuDpB;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 Integer from \"@ui5/webcomponents-base/dist/types/Integer.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 */\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({ type: String, defaultValue: \"auto\" })\n\twidth!: string;\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({ type: String, defaultValue: \"auto\" })\n\tminWidth!: string;\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({ type: String, defaultValue: \"auto\" })\n\tmaxWidth!: string;\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({ validator: Integer, defaultValue: 0 })\n\timportance!: number;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_popin!: boolean;\n\n\tprotected ariaRole: string = \"columnheader\";\n\t_popinWidth: number = 0;\n\n\tonEnterDOM() {\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"]}
+{"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"]}

package/dist/TableHeaderRow.d.ts

@@ -18,6 +18,7 @@ import TableHeaderCell from "./TableHeaderCell.js";
  * @extends TableRowBase
  * @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 TableHeaderRow extends TableRowBase {
     /**

package/dist/TableHeaderRow.js

@@ -30,6 +30,7 @@ import { TABLE_SELECTION, TABLE_ROW_POPIN, } from "./generated/i18n/i18n-default
  * @extends TableRowBase
  * @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 TableHeaderRow = 
 /**
@@ -39,6 +40,16 @@ let TableHeaderRow =
  * @public
  */
 class TableHeaderRow extends TableRowBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sticks the `ui5-table-header-row` to the top of a table.
+         *
+         * @default false
+         * @public
+         */
+        this.sticky = false;
+    }
     onBeforeRendering() {
         super.onBeforeRendering();
         if (this._table) {

package/dist/TableHeaderRow.js.map

@@ -1 +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;;;;;;;;;;;;;;;;;;GAkBG;AAeH,IAAM,cAAc;AANpB;;;;;GAKG;AACH,MAAM,cAAe,SAAQ,YAAY;IA4BxC,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;SACvC;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;AArCA;IATC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE;YACxB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;YAC/B,KAAK,EAAE,KAAK;SACZ;QACD,eAAe,EAAE,IAAI;KACrB,CAAC;6CAC6B;AAS/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACX;AA1BZ,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,CAsDnB;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\n * @public\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\"],\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 * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tsticky!: boolean;\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() {\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"]}
+{"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;;;;;WAKG;QAEH,WAAM,GAAG,KAAK,CAAC;IA4BhB,CAAC;IA1BA,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC;SACvC;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;AArCA;IATC,IAAI,CAAC;QACL,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,IAAI;QACf,uBAAuB,EAAE;YACxB,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;YAC/B,KAAK,EAAE,KAAK;SACZ;QACD,eAAe,EAAE,IAAI;KACrB,CAAC;6CAC6B;AAS/B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CACb;AA1BV,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,CAsDnB;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\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\"],\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 * @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

@@ -1,5 +1,5 @@
 import type Table from "./Table.js";
-import TableRowBase from "./TableRowBase.js";
+import type TableRowBase from "./TableRowBase.js";
 import TableExtension from "./TableExtension.js";
 import GridWalker from "./GridWalker.js";
 /**
@@ -15,6 +15,7 @@ declare class TableNavigation extends TableExtension {
     _tabPosition: number;
     _ignoreFocusIn?: boolean;
     _lastFocusedItem?: HTMLElement;
+    _onKeyDownCaptureBound: (e: KeyboardEvent) => void;
     constructor(table: Table);
     _getNavigationItemsOfRow(row: TableRowBase): HTMLElement[];
     _getNavigationItemsOfGrid(): (HTMLElement | undefined)[][];
@@ -32,5 +33,6 @@ declare class TableNavigation extends TableExtension {
     _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

@@ -1,10 +1,8 @@
-import { isUp, isDown, isLeft, isRight, isPageUp, isPageDown, isHome, isEnd, } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isUp, isUpShift, isDown, isDownShift, isLeft, isRight, isPageUp, isPageDown, isHome, isEnd, isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.js";
 import isElementClickable from "@ui5/webcomponents-base/dist/util/isElementClickable.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 TableRowBase from "./TableRowBase.js";
-import TableCellBase from "./TableCellBase.js";
 import TableExtension from "./TableExtension.js";
 import GridWalker from "./GridWalker.js";
 /**
@@ -21,6 +19,10 @@ class TableNavigation extends TableExtension {
         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 => {
@@ -91,7 +93,7 @@ class TableNavigation extends TableExtension {
         this._focusElement(this._gridWalker.getCurrent());
     }
     _handleEnter(e, eventOrigin) {
-        if (eventOrigin instanceof TableCellBase) {
+        if (eventOrigin.hasAttribute("ui5-table-cell-base")) {
             this._handleF2(e, eventOrigin);
         }
     }
@@ -106,7 +108,7 @@ class TableNavigation extends TableExtension {
         e.preventDefault();
     }
     _handleF7(e, eventOrigin) {
-        if (eventOrigin instanceof TableRowBase) {
+        if (eventOrigin.hasAttribute("ui5-table-row-base")) {
             this._gridWalker.setColPos(this._colPosition);
             let elementToFocus = this._gridWalker.getCurrent();
             if (this._tabPosition > -1) {
@@ -181,10 +183,10 @@ class TableNavigation extends TableExtension {
         else if (isRight(e)) {
             this._gridWalker[this._table.effectiveDir === "rtl" ? "left" : "right"]();
         }
-        else if (isUp(e)) {
+        else if (isUp(e) || isUpShift(e)) {
             this._gridWalker.up();
         }
-        else if (isDown(e)) {
+        else if (isDown(e) || isDownShift(e)) {
             this._gridWalker.down();
         }
         else if (isHome(e)) {
@@ -239,13 +241,27 @@ class TableNavigation extends TableExtension {
             return;
         }
         if (eventOrigin === this._table._beforeElement || eventOrigin === this._table._afterElement) {
-            this._gridWalker.setColPos(0);
-            this._focusCurrentItem();
+            if (this._table.loading) {
+                this._table._loadingElement.focus();
+            }
+            else {
+                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

package/dist/TableNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableNavigation.js","sourceRoot":"","sources":["../src/TableNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tisUp,\n\tisDown,\n\tisLeft,\n\tisRight,\n\tisPageUp,\n\tisPageDown,\n\tisHome,\n\tisEnd,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport isElementClickable from \"@ui5/webcomponents-base/dist/util/isElementClickable.js\";\nimport isElementHidden from \"@ui5/webcomponents-base/dist/util/isElementHidden.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport type Table from \"./Table.js\";\nimport TableRowBase from \"./TableRowBase.js\";\nimport TableCellBase from \"./TableCellBase.js\";\nimport TableExtension from \"./TableExtension.js\";\nimport GridWalker from \"./GridWalker.js\";\n\n/**\n * Handles the keyboard navigation for the ui5-table.\n *\n * @class\n * @private\n */\nclass TableNavigation extends TableExtension {\n\t_table: Table;\n\t_gridWalker: GridWalker;\n\t_colPosition: number = 0;\n\t_tabPosition: number = 0;\n\t_ignoreFocusIn?: boolean;\n\t_lastFocusedItem?: HTMLElement;\n\n\tconstructor(table: Table) {\n\t\tsuper();\n\t\tthis._table = table;\n\t\tthis._gridWalker = new GridWalker();\n\t\tthis._gridWalker.setGrid(this._getNavigationItemsOfGrid());\n\t}\n\n\t_getNavigationItemsOfRow(row: TableRowBase) {\n\t\treturn [row, ...row.shadowRoot!.children].map(element => {\n\t\t\treturn element.localName === \"slot\" ? (element as HTMLSlotElement).assignedElements() : element;\n\t\t}).flat().filter(element => {\n\t\t\treturn element.localName.includes(\"ui5-table-\") && !element.hasAttribute(\"excluded-from-navigation\");\n\t\t}) as HTMLElement[];\n\t}\n\n\t_getNavigationItemsOfGrid() {\n\t\tconst items = [];\n\t\tif (this._table.headerRow[0] && !isElementHidden(this._table.headerRow[0])) {\n\t\t\titems.push(this._getNavigationItemsOfRow(this._table.headerRow[0]));\n\t\t\tthis._gridWalker.setFirstRowPos(1);\n\t\t} else {\n\t\t\tthis._gridWalker.setFirstRowPos(0);\n\t\t}\n\n\t\tif (this._table.rows.length) {\n\t\t\tthis._table.rows.forEach(row => items.push(this._getNavigationItemsOfRow(row)));\n\t\t} else {\n\t\t\titems.push(this._getNavigationItemsOfRow(this._table._nodataRow));\n\t\t}\n\n\t\tif (this._table._shouldRenderGrowing) {\n\t\t\titems.push([this._table._growing.getFocusDomRef()]);\n\t\t\tthis._gridWalker.setLastRowPos(-1);\n\t\t} else {\n\t\t\tthis._gridWalker.setLastRowPos(0);\n\t\t}\n\n\t\tif (!this._gridWalker.getCurrent()) {\n\t\t\tthis._gridWalker.setRowPos(this._gridWalker.getFirstRowPos());\n\t\t}\n\n\t\tthis._gridWalker.setGrid(items);\n\t\treturn items;\n\t}\n\n\t_setCurrentItem(e: Event, callback?: (currentItem: HTMLElement) => void) {\n\t\tconst navigationItems = this._getNavigationItemsOfGrid().flat();\n\t\tconst navigationItem = e.composedPath().find(target => navigationItems.includes(target as HTMLElement)) as HTMLElement;\n\t\tif (navigationItem) {\n\t\t\tthis._gridWalker.setCurrent(navigationItem);\n\t\t\tcallback && callback(navigationItem);\n\t\t}\n\t}\n\n\t_isEventFromCurrentItem(e: Event) {\n\t\treturn e.composedPath()[0] === this._gridWalker.getCurrent();\n\t}\n\n\t_focusElement(element: HTMLElement, ignoreFocusIn: boolean = true) {\n\t\tif (!element || element === getActiveElement()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst navigationItems = this._getNavigationItemsOfGrid().flat();\n\t\tif (navigationItems.includes(this._lastFocusedItem)) {\n\t\t\tthis._lastFocusedItem?.removeAttribute(\"tabindex\");\n\t\t}\n\n\t\tif (navigationItems.includes(element)) {\n\t\t\telement.setAttribute(\"tabindex\", \"-1\");\n\t\t\tthis._lastFocusedItem = element;\n\t\t}\n\n\t\tthis._ignoreFocusIn = ignoreFocusIn;\n\t\telement.focus();\n\t\tif (element instanceof HTMLInputElement) {\n\t\t\telement.select();\n\t\t}\n\t\tthis._ignoreFocusIn = false;\n\t}\n\n\t_focusCurrentItem() {\n\t\tthis._focusElement(this._gridWalker.getCurrent() as HTMLElement);\n\t}\n\n\t_handleEnter(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (eventOrigin instanceof TableCellBase) {\n\t\t\tthis._handleF2(e, eventOrigin);\n\t\t}\n\t}\n\n\t_handleF2(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (this._isEventFromCurrentItem(e)) {\n\t\t\tconst firstTabbable = getTabbableElements(eventOrigin)[0];\n\t\t\tthis._focusElement(firstTabbable);\n\t\t} else {\n\t\t\tthis._setCurrentItem(e, () => this._focusCurrentItem());\n\t\t}\n\t\te.preventDefault();\n\t}\n\n\t_handleF7(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (eventOrigin instanceof TableRowBase) {\n\t\t\tthis._gridWalker.setColPos(this._colPosition);\n\t\t\tlet elementToFocus = this._gridWalker.getCurrent() as HTMLElement;\n\t\t\tif (this._tabPosition > -1) {\n\t\t\t\tconst tabbables = getTabbableElements(elementToFocus);\n\t\t\t\telementToFocus = tabbables[this._tabPosition] || tabbables.pop() || elementToFocus;\n\t\t\t}\n\t\t\tthis._focusElement(elementToFocus);\n\t\t} else {\n\t\t\tthis._setCurrentItem(e, currentItem => {\n\t\t\t\tthis._tabPosition = getTabbableElements(currentItem).indexOf(eventOrigin);\n\t\t\t\tthis._colPosition = this._gridWalker.getColPos();\n\t\t\t\tthis._gridWalker.setColPos(0);\n\t\t\t\tthis._focusCurrentItem();\n\t\t\t});\n\t\t}\n\t\te.preventDefault();\n\t}\n\n\t_handleTab(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (this._isEventFromCurrentItem(e)) {\n\t\t\tthis._focusElement(e.shiftKey ? this._table._beforeElement : this._table._afterElement);\n\t\t} else {\n\t\t\tconst tabbables = getTabbableElements(this._table._tableElement);\n\t\t\tif (e.shiftKey && tabbables[0] === eventOrigin) {\n\t\t\t\tthis._focusElement(this._table._beforeElement);\n\t\t\t}\n\t\t\tif (!e.shiftKey && tabbables[tabbables.length - 1] === eventOrigin) {\n\t\t\t\tthis._focusElement(this._table._afterElement);\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleArrowUpDown(e: KeyboardEvent, eventOrigin: HTMLElement, direction: -1 | 1) {\n\t\tif (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey || e.defaultPrevented || this._isEventFromCurrentItem(e) || /^(input|textarea)$/i.test(eventOrigin.nodeName)) {\n\t\t\treturn false;\n\t\t}\n\n\t\tthis._setCurrentItem(e, currentItem => {\n\t\t\tthis._tabPosition = getTabbableElements(currentItem).indexOf(eventOrigin);\n\t\t\tthis._gridWalker.setRowPos(this._gridWalker.getRowPos() + direction);\n\t\t\tlet elementToFocus = this._gridWalker.getCurrent() as HTMLElement;\n\t\t\tconst tabbables = getTabbableElements(elementToFocus);\n\t\t\telementToFocus = tabbables[this._tabPosition] || tabbables.pop() || elementToFocus;\n\t\t\tthis._focusElement(elementToFocus);\n\t\t\te.preventDefault();\n\t\t});\n\t\treturn false;\n\t}\n\n\t_handleArrowUp(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\treturn this._handleArrowUpDown(e, eventOrigin, -1);\n\t}\n\n\t_handleArrowDown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\treturn this._handleArrowUpDown(e, eventOrigin, 1);\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (e.defaultPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._isEventFromCurrentItem(e) && this._getNavigationItemsOfGrid().flat().includes(eventOrigin)) {\n\t\t\tthis._gridWalker.setCurrent(eventOrigin);\n\t\t}\n\n\t\tconst keydownHandlerName = `_handle${e.code}` as keyof TableNavigation;\n\t\tconst keydownHandler = this[keydownHandlerName] as (e: KeyboardEvent, eventOrigin: HTMLElement) => void | false;\n\t\tif (typeof keydownHandler === \"function\" && keydownHandler.call(this, e, eventOrigin) === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._isEventFromCurrentItem(e)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isLeft(e)) {\n\t\t\tthis._gridWalker[this._table.effectiveDir === \"rtl\" ? \"right\" : \"left\"]();\n\t\t} else if (isRight(e)) {\n\t\t\tthis._gridWalker[this._table.effectiveDir === \"rtl\" ? \"left\" : \"right\"]();\n\t\t} else if (isUp(e)) {\n\t\t\tthis._gridWalker.up();\n\t\t} else if (isDown(e)) {\n\t\t\tthis._gridWalker.down();\n\t\t} else if (isHome(e)) {\n\t\t\tthis._gridWalker.home();\n\t\t} else if (isEnd(e)) {\n\t\t\tthis._gridWalker.end();\n\t\t} else if (isPageUp(e)) {\n\t\t\tthis._gridWalker.pageup();\n\t\t} else if (isPageDown(e)) {\n\t\t\tthis._gridWalker.pagedown();\n\t\t} else {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._focusCurrentItem();\n\t\te.preventDefault();\n\t}\n\n\t_onclick(e: PointerEvent) {\n\t\tconst navigationItems = this._getNavigationItemsOfGrid();\n\t\tconst flatNavigationItems = navigationItems.flat();\n\t\tlet navigationItem = null;\n\t\tlet focusableElement = null;\n\n\t\t// eslint-disable-next-line no-restricted-syntax\n\t\tfor (const target of e.composedPath() as any[]) {\n\t\t\tif (target.nodeType === Node.ELEMENT_NODE) {\n\t\t\t\tconst element = target as HTMLElement;\n\t\t\t\tif (element.getAttribute(\"tabindex\") === \"-1\" || isElementClickable(element)) {\n\t\t\t\t\tfocusableElement = element;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tif (flatNavigationItems.includes(element)) {\n\t\t\t\t\tnavigationItem = element;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (focusableElement && focusableElement !== this._lastFocusedItem) {\n\t\t\tthis._lastFocusedItem?.removeAttribute(\"tabindex\");\n\t\t\tthis._lastFocusedItem = undefined;\n\t\t} else if (navigationItem) {\n\t\t\tthis._gridWalker.setCurrent(navigationItem);\n\t\t\tthis._gridWalker.setColPos(0);\n\t\t\tthis._focusCurrentItem();\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent, eventOrigin: HTMLElement) {\n\t\tif (this._ignoreFocusIn) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (eventOrigin === this._table._beforeElement || eventOrigin === this._table._afterElement) {\n\t\t\tthis._gridWalker.setColPos(0);\n\t\t\tthis._focusCurrentItem();\n\t\t} else if (eventOrigin !== this._lastFocusedItem && this._getNavigationItemsOfGrid().flat().includes(eventOrigin)) {\n\t\t\tthis._lastFocusedItem = eventOrigin;\n\t\t}\n\t}\n}\n\nexport default TableNavigation;\n"]}
+{"version":3,"file":"TableNavigation.js","sourceRoot":"","sources":["../src/TableNavigation.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tisUp,\n\tisUpShift,\n\tisDown,\n\tisDownShift,\n\tisLeft,\n\tisRight,\n\tisPageUp,\n\tisPageDown,\n\tisHome,\n\tisEnd,\n\tisTabNext,\n\tisTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport isElementClickable from \"@ui5/webcomponents-base/dist/util/isElementClickable.js\";\nimport isElementHidden from \"@ui5/webcomponents-base/dist/util/isElementHidden.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport { getTabbableElements } from \"@ui5/webcomponents-base/dist/util/TabbableElements.js\";\nimport type Table from \"./Table.js\";\nimport type TableRowBase from \"./TableRowBase.js\";\nimport TableExtension from \"./TableExtension.js\";\nimport GridWalker from \"./GridWalker.js\";\n\n/**\n * Handles the keyboard navigation for the ui5-table.\n *\n * @class\n * @private\n */\nclass TableNavigation extends TableExtension {\n\t_table: Table;\n\t_gridWalker: GridWalker;\n\t_colPosition: number = 0;\n\t_tabPosition: number = 0;\n\t_ignoreFocusIn?: boolean;\n\t_lastFocusedItem?: HTMLElement;\n\t_onKeyDownCaptureBound: (e: KeyboardEvent) => void;\n\n\tconstructor(table: Table) {\n\t\tsuper();\n\t\tthis._table = table;\n\t\tthis._gridWalker = new GridWalker();\n\t\tthis._gridWalker.setGrid(this._getNavigationItemsOfGrid());\n\t\tthis._onKeyDownCaptureBound = this._onKeyDownCapture.bind(this);\n\n\t\t// we register the keydown handler on the table element at the capturing phase since the\n\t\t// busy indicator stops the propagation of the keydown event and it never reaches the table\n\t\tthis._table.addEventListener(\"keydown\", this._onKeyDownCaptureBound, { capture: true });\n\t}\n\n\t_getNavigationItemsOfRow(row: TableRowBase) {\n\t\treturn [row, ...row.shadowRoot!.children].map(element => {\n\t\t\treturn element.localName === \"slot\" ? (element as HTMLSlotElement).assignedElements() : element;\n\t\t}).flat().filter(element => {\n\t\t\treturn element.localName.includes(\"ui5-table-\") && !element.hasAttribute(\"excluded-from-navigation\");\n\t\t}) as HTMLElement[];\n\t}\n\n\t_getNavigationItemsOfGrid() {\n\t\tconst items = [];\n\t\tif (this._table.headerRow[0] && !isElementHidden(this._table.headerRow[0])) {\n\t\t\titems.push(this._getNavigationItemsOfRow(this._table.headerRow[0]));\n\t\t\tthis._gridWalker.setFirstRowPos(1);\n\t\t} else {\n\t\t\tthis._gridWalker.setFirstRowPos(0);\n\t\t}\n\n\t\tif (this._table.rows.length) {\n\t\t\tthis._table.rows.forEach(row => items.push(this._getNavigationItemsOfRow(row)));\n\t\t} else {\n\t\t\titems.push(this._getNavigationItemsOfRow(this._table._nodataRow));\n\t\t}\n\n\t\tif (this._table._shouldRenderGrowing) {\n\t\t\titems.push([this._table._growing.getFocusDomRef()]);\n\t\t\tthis._gridWalker.setLastRowPos(-1);\n\t\t} else {\n\t\t\tthis._gridWalker.setLastRowPos(0);\n\t\t}\n\n\t\tif (!this._gridWalker.getCurrent()) {\n\t\t\tthis._gridWalker.setRowPos(this._gridWalker.getFirstRowPos());\n\t\t}\n\n\t\tthis._gridWalker.setGrid(items);\n\t\treturn items;\n\t}\n\n\t_setCurrentItem(e: Event, callback?: (currentItem: HTMLElement) => void) {\n\t\tconst navigationItems = this._getNavigationItemsOfGrid().flat();\n\t\tconst navigationItem = e.composedPath().find(target => navigationItems.includes(target as HTMLElement)) as HTMLElement;\n\t\tif (navigationItem) {\n\t\t\tthis._gridWalker.setCurrent(navigationItem);\n\t\t\tcallback && callback(navigationItem);\n\t\t}\n\t}\n\n\t_isEventFromCurrentItem(e: Event) {\n\t\treturn e.composedPath()[0] === this._gridWalker.getCurrent();\n\t}\n\n\t_focusElement(element: HTMLElement, ignoreFocusIn: boolean = true) {\n\t\tif (!element || element === getActiveElement()) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst navigationItems = this._getNavigationItemsOfGrid().flat();\n\t\tif (navigationItems.includes(this._lastFocusedItem)) {\n\t\t\tthis._lastFocusedItem?.removeAttribute(\"tabindex\");\n\t\t}\n\n\t\tif (navigationItems.includes(element)) {\n\t\t\telement.setAttribute(\"tabindex\", \"-1\");\n\t\t\tthis._lastFocusedItem = element;\n\t\t}\n\n\t\tthis._ignoreFocusIn = ignoreFocusIn;\n\t\telement.focus();\n\t\tif (element instanceof HTMLInputElement) {\n\t\t\telement.select();\n\t\t}\n\t\tthis._ignoreFocusIn = false;\n\t}\n\n\t_focusCurrentItem() {\n\t\tthis._focusElement(this._gridWalker.getCurrent() as HTMLElement);\n\t}\n\n\t_handleEnter(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (eventOrigin.hasAttribute(\"ui5-table-cell-base\")) {\n\t\t\tthis._handleF2(e, eventOrigin);\n\t\t}\n\t}\n\n\t_handleF2(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (this._isEventFromCurrentItem(e)) {\n\t\t\tconst firstTabbable = getTabbableElements(eventOrigin)[0];\n\t\t\tthis._focusElement(firstTabbable);\n\t\t} else {\n\t\t\tthis._setCurrentItem(e, () => this._focusCurrentItem());\n\t\t}\n\t\te.preventDefault();\n\t}\n\n\t_handleF7(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (eventOrigin.hasAttribute(\"ui5-table-row-base\")) {\n\t\t\tthis._gridWalker.setColPos(this._colPosition);\n\t\t\tlet elementToFocus = this._gridWalker.getCurrent() as HTMLElement;\n\t\t\tif (this._tabPosition > -1) {\n\t\t\t\tconst tabbables = getTabbableElements(elementToFocus);\n\t\t\t\telementToFocus = tabbables[this._tabPosition] || tabbables.pop() || elementToFocus;\n\t\t\t}\n\t\t\tthis._focusElement(elementToFocus);\n\t\t} else {\n\t\t\tthis._setCurrentItem(e, currentItem => {\n\t\t\t\tthis._tabPosition = getTabbableElements(currentItem).indexOf(eventOrigin);\n\t\t\t\tthis._colPosition = this._gridWalker.getColPos();\n\t\t\t\tthis._gridWalker.setColPos(0);\n\t\t\t\tthis._focusCurrentItem();\n\t\t\t});\n\t\t}\n\t\te.preventDefault();\n\t}\n\n\t_handleTab(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (this._isEventFromCurrentItem(e)) {\n\t\t\tthis._focusElement(e.shiftKey ? this._table._beforeElement : this._table._afterElement);\n\t\t} else {\n\t\t\tconst tabbables = getTabbableElements(this._table._tableElement);\n\t\t\tif (e.shiftKey && tabbables[0] === eventOrigin) {\n\t\t\t\tthis._focusElement(this._table._beforeElement);\n\t\t\t}\n\t\t\tif (!e.shiftKey && tabbables[tabbables.length - 1] === eventOrigin) {\n\t\t\t\tthis._focusElement(this._table._afterElement);\n\t\t\t}\n\t\t}\n\t}\n\n\t_handleArrowUpDown(e: KeyboardEvent, eventOrigin: HTMLElement, direction: -1 | 1) {\n\t\tif (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey || e.defaultPrevented || this._isEventFromCurrentItem(e) || /^(input|textarea)$/i.test(eventOrigin.nodeName)) {\n\t\t\treturn false;\n\t\t}\n\n\t\tthis._setCurrentItem(e, currentItem => {\n\t\t\tthis._tabPosition = getTabbableElements(currentItem).indexOf(eventOrigin);\n\t\t\tthis._gridWalker.setRowPos(this._gridWalker.getRowPos() + direction);\n\t\t\tlet elementToFocus = this._gridWalker.getCurrent() as HTMLElement;\n\t\t\tconst tabbables = getTabbableElements(elementToFocus);\n\t\t\telementToFocus = tabbables[this._tabPosition] || tabbables.pop() || elementToFocus;\n\t\t\tthis._focusElement(elementToFocus);\n\t\t\te.preventDefault();\n\t\t});\n\t\treturn false;\n\t}\n\n\t_handleArrowUp(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\treturn this._handleArrowUpDown(e, eventOrigin, -1);\n\t}\n\n\t_handleArrowDown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\treturn this._handleArrowUpDown(e, eventOrigin, 1);\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tif (e.defaultPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._isEventFromCurrentItem(e) && this._getNavigationItemsOfGrid().flat().includes(eventOrigin)) {\n\t\t\tthis._gridWalker.setCurrent(eventOrigin);\n\t\t}\n\n\t\tconst keydownHandlerName = `_handle${e.code}` as keyof TableNavigation;\n\t\tconst keydownHandler = this[keydownHandlerName] as (e: KeyboardEvent, eventOrigin: HTMLElement) => void | false;\n\t\tif (typeof keydownHandler === \"function\" && keydownHandler.call(this, e, eventOrigin) === undefined) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!this._isEventFromCurrentItem(e)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isLeft(e)) {\n\t\t\tthis._gridWalker[this._table.effectiveDir === \"rtl\" ? \"right\" : \"left\"]();\n\t\t} else if (isRight(e)) {\n\t\t\tthis._gridWalker[this._table.effectiveDir === \"rtl\" ? \"left\" : \"right\"]();\n\t\t} else if (isUp(e) || isUpShift(e)) {\n\t\t\tthis._gridWalker.up();\n\t\t} else if (isDown(e) || isDownShift(e)) {\n\t\t\tthis._gridWalker.down();\n\t\t} else if (isHome(e)) {\n\t\t\tthis._gridWalker.home();\n\t\t} else if (isEnd(e)) {\n\t\t\tthis._gridWalker.end();\n\t\t} else if (isPageUp(e)) {\n\t\t\tthis._gridWalker.pageup();\n\t\t} else if (isPageDown(e)) {\n\t\t\tthis._gridWalker.pagedown();\n\t\t} else {\n\t\t\treturn;\n\t\t}\n\n\t\tthis._focusCurrentItem();\n\t\te.preventDefault();\n\t}\n\n\t_onclick(e: PointerEvent) {\n\t\tconst navigationItems = this._getNavigationItemsOfGrid();\n\t\tconst flatNavigationItems = navigationItems.flat();\n\t\tlet navigationItem = null;\n\t\tlet focusableElement = null;\n\n\t\t// eslint-disable-next-line no-restricted-syntax\n\t\tfor (const target of e.composedPath() as any[]) {\n\t\t\tif (target.nodeType === Node.ELEMENT_NODE) {\n\t\t\t\tconst element = target as HTMLElement;\n\t\t\t\tif (element.getAttribute(\"tabindex\") === \"-1\" || isElementClickable(element)) {\n\t\t\t\t\tfocusableElement = element;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t\tif (flatNavigationItems.includes(element)) {\n\t\t\t\t\tnavigationItem = element;\n\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (focusableElement && focusableElement !== this._lastFocusedItem) {\n\t\t\tthis._lastFocusedItem?.removeAttribute(\"tabindex\");\n\t\t\tthis._lastFocusedItem = undefined;\n\t\t} else if (navigationItem) {\n\t\t\tthis._gridWalker.setCurrent(navigationItem);\n\t\t\tthis._gridWalker.setColPos(0);\n\t\t\tthis._focusCurrentItem();\n\t\t}\n\t}\n\n\t_onfocusin(e: FocusEvent, eventOrigin: HTMLElement) {\n\t\tif (this._ignoreFocusIn) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (eventOrigin === this._table._beforeElement || eventOrigin === this._table._afterElement) {\n\t\t\tif (this._table.loading) {\n\t\t\t\tthis._table._loadingElement.focus();\n\t\t\t} else {\n\t\t\t\tthis._gridWalker.setColPos(0);\n\t\t\t\tthis._focusCurrentItem();\n\t\t\t}\n\t\t} else if (eventOrigin !== this._lastFocusedItem && this._getNavigationItemsOfGrid().flat().includes(eventOrigin)) {\n\t\t\tthis._lastFocusedItem = eventOrigin;\n\t\t}\n\t}\n\n\t_onKeyDownCapture(e: KeyboardEvent) {\n\t\tif (!this._table.loading) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isTabNext(e) || isTabPrevious(e)) {\n\t\t\tthis._focusElement(e.shiftKey ? this._table._beforeElement : this._table._afterElement);\n\t\t\te.stopImmediatePropagation();\n\t\t}\n\t}\n}\n\nexport default TableNavigation;\n"]}

package/dist/TableRow.d.ts

@@ -15,6 +15,7 @@ import TableCell from "./TableCell.js";
  * @extends TableRowBase
  * @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 TableRow extends TableRowBase {
     /**
@@ -26,12 +27,12 @@ declare class TableRow extends TableRowBase {
      */
     cells: Array<TableCell>;
     /**
-     * Unique identifier of the component.
+     * Unique identifier of the row.
      *
      * @default ""
      * @public
      */
-    key: string;
+    rowKey: string;
     /**
      * Defines the interactive state of the row.
      *
@@ -39,6 +40,14 @@ declare class TableRow extends TableRowBase {
      * @public
      */
     interactive: boolean;
+    /**
+     * Defines the navigated state of the row.
+     *
+     * @default false
+     * @public
+     */
+    navigated: boolean;
+    _renderNavigated: boolean;
     static onDefine(): Promise<void>;
     onBeforeRendering(): void;
     focus(focusOptions?: FocusOptions | undefined): Promise<void>;

package/dist/TableRow.js

@@ -30,8 +30,34 @@ import RadioButton from "./RadioButton.js";
  * @extends TableRowBase
  * @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 TableRow = class TableRow extends TableRowBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * Unique identifier of the row.
+         *
+         * @default ""
+         * @public
+         */
+        this.rowKey = "";
+        /**
+         * Defines the interactive state of the row.
+         *
+         * @default false
+         * @public
+         */
+        this.interactive = false;
+        /**
+         * Defines the navigated state of the row.
+         *
+         * @default false
+         * @public
+         */
+        this.navigated = false;
+        this._renderNavigated = false;
+    }
     static async onDefine() {
         await super.onDefine();
         if (isSafari() && isIOS()) {
@@ -42,6 +68,12 @@ let TableRow = class TableRow extends TableRowBase {
     onBeforeRendering() {
         super.onBeforeRendering();
         this.toggleAttribute("_interactive", this._isInteractive);
+        if (this._renderNavigated && this.navigated) {
+            this.setAttribute("aria-current", "true");
+        }
+        else {
+            this.removeAttribute("aria-current");
+        }
     }
     async focus(focusOptions) {
         this.setAttribute("tabindex", "-1");
@@ -86,10 +118,16 @@ __decorate([
 ], TableRow.prototype, "cells", void 0);
 __decorate([
     property()
-], TableRow.prototype, "key", void 0);
+], TableRow.prototype, "rowKey", void 0);
 __decorate([
     property({ type: Boolean })
 ], TableRow.prototype, "interactive", void 0);
+__decorate([
+    property({ type: Boolean })
+], TableRow.prototype, "navigated", void 0);
+__decorate([
+    property({ type: Boolean, noAttribute: true })
+], TableRow.prototype, "_renderNavigated", void 0);
 TableRow = __decorate([
     customElement({
         tag: "ui5-table-row",

package/dist/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../src/TableRow.ts"],"names":[],"mappings":"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","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 { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isIOS, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport TableRowTemplate from \"./generated/templates/TableRowTemplate.lit.js\";\nimport TableRowBase from \"./TableRowBase.js\";\nimport TableRowCss from \"./generated/themes/TableRow.css.js\";\nimport TableCell from \"./TableCell.js\";\nimport RadioButton from \"./RadioButton.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-row` component represents a row in the `ui5-table`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableRow.js\";`\n *\n * @constructor\n * @extends TableRowBase\n * @since 2.0\n * @public\n */\n@customElement({\n\ttag: \"ui5-table-row\",\n\tstyles: [TableRowBase.styles, TableRowCss],\n\ttemplate: TableRowTemplate,\n\tdependencies: [...TableRowBase.dependencies, RadioButton, TableCell],\n})\nclass TableRow extends TableRowBase {\n\t/**\n\t * Defines the cells of the component.\n\t *\n\t * **Note:** Use `ui5-table-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\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: [\"_popin\"],\n\t\t\tslots: false,\n\t\t},\n\t})\n\tcells!: Array<TableCell>;\n\n\t/**\n\t * Unique identifier of the component.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\tkey!: string;\n\n\t/**\n\t * Defines the interactive state of the row.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tinteractive!: boolean;\n\n\tstatic async onDefine() {\n\t\tawait super.onDefine();\n\t\tif (isSafari() && isIOS()) {\n\t\t\t// Safari on iOS does not use the :active state unless there is a touchstart event handler on the <body> element\n\t\t\tdocument.body.addEventListener(\"touchstart\", () => {});\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.toggleAttribute(\"_interactive\", this._isInteractive);\n\t}\n\n\tasync focus(focusOptions?: FocusOptions | undefined): Promise<void> {\n\t\tthis.setAttribute(\"tabindex\", \"-1\");\n\t\tHTMLElement.prototype.focus.call(this, focusOptions);\n\t\treturn Promise.resolve();\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tsuper._onkeydown(e, eventOrigin);\n\t\tif (e.defaultPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (eventOrigin === this && this._isInteractive && isEnter(e)) {\n\t\t\tthis.toggleAttribute(\"_active\", true);\n\t\t\tthis._table?._onRowPress(this);\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tif (this._isInteractive && this === getActiveElement()) {\n\t\t\tthis._table?._onRowPress(this);\n\t\t}\n\t}\n\n\t_onkeyup() {\n\t\tthis.removeAttribute(\"_active\");\n\t}\n\n\t_onfocusout() {\n\t\tthis.removeAttribute(\"_active\");\n\t}\n\n\tget _isInteractive() {\n\t\treturn this.interactive;\n\t}\n}\n\nTableRow.define();\n\nexport default TableRow;\n"]}
+{"version":3,"file":"TableRow.js","sourceRoot":"","sources":["../src/TableRow.ts"],"names":[],"mappings":"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","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 { isEnter } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isIOS, isSafari } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport getActiveElement from \"@ui5/webcomponents-base/dist/util/getActiveElement.js\";\nimport TableRowTemplate from \"./generated/templates/TableRowTemplate.lit.js\";\nimport TableRowBase from \"./TableRowBase.js\";\nimport TableRowCss from \"./generated/themes/TableRow.css.js\";\nimport TableCell from \"./TableCell.js\";\nimport RadioButton from \"./RadioButton.js\";\n\n/**\n * @class\n *\n * ### Overview\n *\n * The `ui5-table-row` component represents a row in the `ui5-table`.\n *\n * ### ES6 Module Import\n *\n * `import \"@ui5/webcomponents/dist/TableRow.js\";`\n *\n * @constructor\n * @extends TableRowBase\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-row\",\n\tstyles: [TableRowBase.styles, TableRowCss],\n\ttemplate: TableRowTemplate,\n\tdependencies: [...TableRowBase.dependencies, RadioButton, TableCell],\n})\nclass TableRow extends TableRowBase {\n\t/**\n\t * Defines the cells of the component.\n\t *\n\t * **Note:** Use `ui5-table-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\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: [\"_popin\"],\n\t\t\tslots: false,\n\t\t},\n\t})\n\tcells!: Array<TableCell>;\n\n\t/**\n\t * Unique identifier of the row.\n\t *\n\t * @default \"\"\n\t * @public\n\t */\n\t@property()\n\trowKey = \"\";\n\n\t/**\n\t * Defines the interactive state of the row.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tinteractive = false;\n\n\t/**\n\t * Defines the navigated state of the row.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tnavigated = false;\n\n\t@property({ type: Boolean, noAttribute: true })\n\t_renderNavigated = false;\n\n\tstatic async onDefine() {\n\t\tawait super.onDefine();\n\t\tif (isSafari() && isIOS()) {\n\t\t\t// Safari on iOS does not use the :active state unless there is a touchstart event handler on the <body> element\n\t\t\tdocument.body.addEventListener(\"touchstart\", () => {});\n\t\t}\n\t}\n\n\tonBeforeRendering() {\n\t\tsuper.onBeforeRendering();\n\t\tthis.toggleAttribute(\"_interactive\", this._isInteractive);\n\t\tif (this._renderNavigated && this.navigated) {\n\t\t\tthis.setAttribute(\"aria-current\", \"true\");\n\t\t} else {\n\t\t\tthis.removeAttribute(\"aria-current\");\n\t\t}\n\t}\n\n\tasync focus(focusOptions?: FocusOptions | undefined): Promise<void> {\n\t\tthis.setAttribute(\"tabindex\", \"-1\");\n\t\tHTMLElement.prototype.focus.call(this, focusOptions);\n\t\treturn Promise.resolve();\n\t}\n\n\t_onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement) {\n\t\tsuper._onkeydown(e, eventOrigin);\n\t\tif (e.defaultPrevented) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (eventOrigin === this && this._isInteractive && isEnter(e)) {\n\t\t\tthis.toggleAttribute(\"_active\", true);\n\t\t\tthis._table?._onRowPress(this);\n\t\t}\n\t}\n\n\t_onclick() {\n\t\tif (this._isInteractive && this === getActiveElement()) {\n\t\t\tthis._table?._onRowPress(this);\n\t\t}\n\t}\n\n\t_onkeyup() {\n\t\tthis.removeAttribute(\"_active\");\n\t}\n\n\t_onfocusout() {\n\t\tthis.removeAttribute(\"_active\");\n\t}\n\n\tget _isInteractive() {\n\t\treturn this.interactive;\n\t}\n}\n\nTableRow.define();\n\nexport default TableRow;\n"]}

package/dist/TableRowBase.d.ts

@@ -1,7 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type TableCellBase from "./TableCellBase.js";
-import Table from "./Table.js";
+import type Table from "./Table.js";
 /**
  * @class
  * A class to serve as a foundation for the `TableRow` and `TableHeaderRow` classes.
@@ -19,8 +19,8 @@ declare abstract class TableRowBase extends UI5Element {
     onEnterDOM(): void;
     onBeforeRendering(): void;
     getFocusDomRef(): this;
-    isHeaderRow(): boolean;
     _informSelectionChange(): void;
+    isHeaderRow(): boolean;
     _onkeydown(e: KeyboardEvent, eventOrigin: HTMLElement): void;
     get _table(): Table | undefined;
     get _tableId(): string | undefined;
@@ -33,5 +33,6 @@ declare abstract class TableRowBase extends UI5Element {
     get _visibleCells(): TableCellBase[];
     get _popinCells(): TableCellBase[];
     get _i18nRowSelector(): string;
+    get isTableRowBase(): boolean;
 }
 export default TableRowBase;