@ui5/webcomponents-compat 0.0.0-b132dd7b9 → 0.0.0-b3a4f8020

package/src/themes/base/Table-parameters.css

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--ui5_table_focus_outline_offset: 0.125rem;
 	--ui5_table_bottom_border: 1px solid var(--sapList_BorderColor);
 	--ui5_table_header_row_outline_width: 1px;

package/src/themes/base/TableColumn-parameters.css

@@ -1,3 +1,3 @@
-:root {
+:host {
 	--ui5_table_header_row_font_weight: normal;
 }

package/src/themes/base/TableGroupRow-parameters.css

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--ui5_table_group_row_font-weight: normal;
 	--ui5_table_border_width: 0 0 1px 0;
 }

package/src/themes/base/TableRow-parameters.css

@@ -1,4 +1,4 @@
-:root {
+:host {
 	--ui5_table_row_outline_width: 1px;
 	--ui5_table_multiselect_popin_row_padding: 3.25rem;
 }

package/src/themes/base/sizes-parameters.css

@@ -1,21 +1,21 @@
-:root {
+:host {
 	/* Table */
 
 	--_ui5_load_more_text_height: 2.75rem;
 	--_ui5_load_more_text_font_size: var(--sapFontMediumSize);
-	--_ui5_load_more_desc_padding:  0.375rem 2rem 0.875rem 2rem;
+	--_ui5_load_more_desc_padding: 0.375rem 2rem 0.875rem 2rem;
 	--ui5_table_header_row_height: 2.75rem;
 	--ui5_table_row_height: 2.75rem;
 	--ui5_table_group_row_height: 2rem;
 }
 
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
-	/* Table */
-	--_ui5_load_more_text_height: 2.625rem;
-	--_ui5_load_more_text_font_size: var(--sapFontSize);
-	--_ui5_load_more_desc_padding: 0 2rem 0.875rem 2rem;
-	--ui5_table_header_row_height: 2rem;
-	--ui5_table_row_height: 2rem;
-}
+@container style(--ui5_content_density: compact) {
+	:host {
+		/* Table */
+		--_ui5_load_more_text_height: 2.625rem;
+		--_ui5_load_more_text_font_size: var(--sapFontSize);
+		--_ui5_load_more_desc_padding: 0 2rem 0.875rem 2rem;
+		--ui5_table_header_row_height: 2rem;
+		--ui5_table_row_height: 2rem;
+	}
+}

package/src/themes/sap_fiori_3_hcb/GrowingButton-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_padding: 0.25rem;
 	--_ui5_load_more_border: 1px solid var(--sapButton_BorderColor);
 	--_ui5_load_more_border_radius: 0.375rem;

package/src/themes/sap_fiori_3_hcb/Table-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/Table-parameters.css";
 
-:root {
+:host {
 	--ui5_table_header_row_outline_width: 0.125rem;
 }

package/src/themes/sap_fiori_3_hcb/TableRow-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/TableRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_row_outline_width: 0.125rem;
 }

package/src/themes/sap_fiori_3_hcw/GrowingButton-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_padding: 0.25rem;
 	--_ui5_load_more_border: 1px solid var(--sapButton_BorderColor);
 	--_ui5_load_more_border_radius: 0.375rem;

package/src/themes/sap_fiori_3_hcw/Table-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/Table-parameters.css";
 
-:root {
+:host {
 	--ui5_table_header_row_outline_width: 0.125rem;
 }

package/src/themes/sap_fiori_3_hcw/TableRow-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/TableRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_row_outline_width: 0.125rem;
 }

package/src/themes/sap_horizon/GrowingButton-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_outline_width: var(--sapContent_FocusWidth);
 	--_ui5_load_more_border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }

package/src/themes/sap_horizon/Table-parameters.css

@@ -1,8 +1,7 @@
 @import "../base/Table-parameters.css";
 
-:root {
+:host {
 	--ui5_table_header_row_outline_width: var(--sapContent_FocusWidth);
 	--ui5_table_header_row_font_family:  var(--sapFontSemiboldDuplexFamily);
-	--ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor);
 	--ui5_table_focus_outline_offset: 0.1875rem;
 }

package/src/themes/sap_horizon/TableGroupRow-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/TableGroupRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_group_row_font-weight: bold;
 	--ui5_table_border_width: 1px 0 1px 0;
 }

package/src/themes/sap_horizon/TableRow-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/TableRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_row_outline_width: var(--sapContent_FocusWidth);
 }

package/src/themes/sap_horizon_dark/GrowingButton-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_outline_width: var(--sapContent_FocusWidth);
 	--_ui5_load_more_border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);
 }

package/src/themes/sap_horizon_dark/Table-parameters.css

@@ -1,8 +1,7 @@
 @import "../base/Table-parameters.css";
 
-:root {
+:host {
 	--ui5_table_header_row_outline_width: var(--sapContent_FocusWidth);
 	--ui5_table_header_row_font_family:  var(--sapFontSemiboldDuplexFamily);
-	--ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor);
 	--ui5_table_focus_outline_offset: 0.1875rem;
 }

package/src/themes/sap_horizon_dark/TableGroupRow-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/TableGroupRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_group_row_font-weight: bold;
 	--ui5_table_border_width: 1px 0 1px 0;
 }

package/src/themes/sap_horizon_dark/TableRow-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/TableRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_row_outline_width: var(--sapContent_FocusWidth);
 }

package/src/themes/sap_horizon_hcb/GrowingButton-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_padding: 0.25rem;
 	--_ui5_load_more_border: 1px solid var(--sapButton_BorderColor);
 	--_ui5_load_more_border_radius: 0.375rem;

package/src/themes/sap_horizon_hcb/Table-parameters.css

@@ -1,9 +1,8 @@
 @import "../base/Table-parameters.css";
 
-:root {
+:host {
 	--ui5_table_header_row_outline_width: 0.125rem;
 	--ui5_table_header_row_font_family:  var(--sapFontSemiboldDuplexFamily);
-	--ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor);
 	--ui5_table_focus_outline_offset: 0.25rem;
 	--ui5_table_header_row_border_width: 0.1875rem;
 }

package/src/themes/sap_horizon_hcb/TableGroupRow-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/TableGroupRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_group_row_font-weight: bold;
 	--ui5_table_border_width: 1px 0 1px 0;
 }

package/src/themes/sap_horizon_hcb/TableRow-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/TableRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_row_outline_width: 0.125rem;
 }

package/src/themes/sap_horizon_hcw/GrowingButton-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/GrowingButton-parameters.css";
 
-:root {
+:host {
 	--_ui5_load_more_padding: 0.25rem;
 	--_ui5_load_more_border: 1px solid var(--sapButton_BorderColor);
 	--_ui5_load_more_border_radius: 0.375rem;

package/src/themes/sap_horizon_hcw/Table-parameters.css

@@ -1,9 +1,8 @@
 @import "../base/Table-parameters.css";
 
-:root {
+:host {
 	--ui5_table_header_row_outline_width: 0.125rem;
 	--ui5_table_header_row_font_family:  var(--sapFontSemiboldDuplexFamily);
-	--ui5_table_header_row_border_bottom_color: var(--sapList_HeaderBorderColor);
 	--ui5_table_focus_outline_offset: 0.25rem;
 	--ui5_table_header_row_border_width: 0.1875rem;
 }

package/src/themes/sap_horizon_hcw/TableGroupRow-parameters.css

@@ -1,6 +1,6 @@
 @import "../base/TableGroupRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_group_row_font-weight: bold;
 	--ui5_table_border_width: 1px 0 1px 0;
 }

package/src/themes/sap_horizon_hcw/TableRow-parameters.css

@@ -1,5 +1,5 @@
 @import "../base/TableRow-parameters.css";
 
-:root {
+:host {
 	--ui5_table_row_outline_width: 0.125rem;
 }

package/tsconfig.json

@@ -7,9 +7,12 @@
 	"compilerOptions": {
 		"outDir": "dist",
 		"experimentalDecorators": true,
-		"verbatimModuleSyntax": true,
+		"composite": true,
+		"rootDir": "src",
+		"tsBuildInfoFile": "dist/.tsbuildinfo",
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
+		"verbatimModuleSyntax": true,
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../base/src/*"
@@ -17,10 +20,22 @@
 			"@ui5/webcomponents/dist/*": [
 				"../main/src/*"
 			],
+			"@ui5/webcomponents-localization/dist/*": [
+				"../localization/src/*"
+			],
 			"@ui5/webcomponents-theming/dist/*": [
 				"../theming/src/*"
 			],
-		},
+			"@ui5/webcomponents-icons/dist/*": [
+				"../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../icons-tnt/src/*"
+			]
+		}
 	},
 	"references": [
 		{
@@ -29,8 +44,20 @@
 		{
 			"path": "../main"
 		},
+		{
+			"path": "../localization"
+		},
 		{
 			"path": "../theming"
 		},
+		{
+			"path": "../icons"
+		},
+		{
+			"path": "../icons-business-suite"
+		},
+		{
+			"path": "../icons-tnt"
+		}
 	]
 }

package/cypress/specs/Table.cy.tsx

@@ -1,155 +0,0 @@
-import Label from "@ui5/webcomponents/dist/Label.js";
-import Table from "../../src/Table.js";
-import TableCell from "../../src/TableCell.js";
-import TableRow from "../../src/TableRow.js";
-import TableColumn from "../../src/TableColumn.js";
-
-describe("Table", () => {
-	it("tests doesn't fire loadMore with ArrowDown on last row", () => {
-		cy.mount(
-			<Table>
-				<TableColumn slot="columns" minWidth={350}>
-					<Label>Product</Label>
-				</TableColumn>
-
-				<TableColumn slot="columns" minWidth={800} popinText="Supplier">
-					<Label>Supplier</Label>
-				</TableColumn>
-
-				<TableColumn slot="columns" minWidth={600} popinText="Dimensions" demandPopin>
-					<Label>Dimensions</Label>
-				</TableColumn>
-
-				<TableRow>
-					<TableCell>
-						<Label>Product 1</Label>
-					</TableCell>
-					<TableCell>
-						<Label>Supplier 1</Label>
-					</TableCell>
-					<TableCell>
-						<Label>10x20x30</Label>
-					</TableCell>
-				</TableRow>
-
-				<TableRow>
-					<TableCell>
-						<Label>Product 2</Label>
-					</TableCell>
-					<TableCell>
-						<Label>Supplier 2</Label>
-					</TableCell>
-					<TableCell>
-						<Label>15x25x35</Label>
-					</TableCell>
-				</TableRow>
-
-				<TableRow id="row-3">
-					<TableCell>
-						<Label>Product 3</Label>
-					</TableCell>
-					<TableCell>
-						<Label>Supplier 3</Label>
-					</TableCell>
-					<TableCell>
-						<Label>20x30x40</Label>
-					</TableCell>
-				</TableRow>
-			</Table>
-		);
-
-		cy.get("[ui5-table]")
-			.then(table => table.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
-
-		cy.get("#row-3")
-			.shadow()
-			.find(".ui5-table-row-root")
-			.as("lastRow")
-
-		cy.get("@lastRow")
-			.realClick();
-
-		cy.get("@lastRow")
-			.should("be.focused");
-
-		cy.get("@lastRow")
-			.realPress("ArrowDown");
-			
-		cy.get("@loadMore")
-			.should("not.have.been.calledOnce");
-	});
-
-	it("tests fire loadMore with ArrowDown on last row", () => {
-		cy.mount(
-			<Table growing="Scroll">
-				<TableColumn slot="columns" minWidth={350}>
-					<Label>Product</Label>
-				</TableColumn>
-
-				<TableColumn slot="columns" minWidth={800} popinText="Supplier">
-					<Label>Supplier</Label>
-				</TableColumn>
-
-				<TableColumn slot="columns" minWidth={600} popinText="Dimensions" demandPopin>
-					<Label>Dimensions</Label>
-				</TableColumn>
-
-				<TableRow>
-					<TableCell>
-						<Label>Product 1</Label>
-					</TableCell>
-					<TableCell>
-						<Label>Supplier 1</Label>
-					</TableCell>
-					<TableCell>
-						<Label>10x20x30</Label>
-					</TableCell>
-				</TableRow>
-
-				<TableRow>
-					<TableCell>
-						<Label>Product 2</Label>
-					</TableCell>
-					<TableCell>
-						<Label>Supplier 2</Label>
-					</TableCell>
-					<TableCell>
-						<Label>15x25x35</Label>
-					</TableCell>
-				</TableRow>
-
-				<TableRow id="row-3">
-					<TableCell>
-						<Label>Product 3</Label>
-					</TableCell>
-					<TableCell>
-						<Label>Supplier 3</Label>
-					</TableCell>
-					<TableCell>
-						<Label>20x30x40</Label>
-					</TableCell>
-				</TableRow>
-			</Table>
-		);
-
-		cy.get("[ui5-table]")
-			.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
-
-		cy.get("#row-3")
-			.shadow()
-			.find(".ui5-table-row-root")
-			.as("lastRow")
-
-		cy.get("@lastRow")
-			.realClick();
-
-		cy.get("@lastRow")
-			.should("be.focused");
-
-		cy.get("@lastRow")
-			.realPress("ArrowDown");
-			
-		cy.get("@loadMore")
-			.should("have.been.calledOnce");
-	});
-});

package/cypress/support/commands.ts

@@ -1,40 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
-
-import "@ui5/cypress-internal/commands.js";
-import "../../../main/cypress/support/commands.js";

package/cypress/support/component-index.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

package/cypress/support/component.ts

@@ -1,17 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'

package/cypress/tsconfig.json

@@ -1,47 +0,0 @@
-{
-	"include": [
-		"./**/*"
-	],
-	"compilerOptions": {
-		"jsx": "react-jsx",
-		"jsxImportSource": "@ui5/webcomponents-base",
-		"module": "NodeNext",
-		"moduleResolution": "nodenext",
-		"types": [
-			"cypress",
-			"cypress-real-events",
-			"cypress-axe",
-		],
-		"paths": {
-			"@ui5/webcomponents-base/dist/*": [
-				"../../base/src/*"
-			],
-			"@ui5/webcomponents/dist/*": [
-				"../../main/src/*"
-			],
-			"@ui5/webcomponents-localization/dist/*": [
-				"../../localization/src/*"
-			],
-			"@ui5/webcomponents-theming/dist/*": [
-				"../../theming/src/*"
-			],
-			"@ui5/webcomponents-icons/dist/*": [
-				"../../icons/src/*"
-			],
-			"@ui5/webcomponents-icons-business-suite/dist/*": [
-				"../../icons-business-suite/src/*"
-			],
-			"@ui5/webcomponents-icons-tnt/dist/*": [
-				"../../icons-tnt/src/*"
-			]
-		},
-	},
-	"references": [
-		{
-			"path": "../"
-		},
-		{
-			"path": "../../main/cypress"
-		}
-	]
-}

package/dist/tsconfig.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../src/Assets.ts","../src/Table.ts","../src/TableCell.ts","../src/TableCellTemplate.tsx","../src/TableColumn.ts","../src/TableColumnTemplate.tsx","../src/TableGroupRow.ts","../src/TableGroupRowTemplate.tsx","../src/TableRow.ts","../src/TableRowTemplate.tsx","../src/TableTemplate.tsx","../src/bundle.common.bootstrap.ts","../src/bundle.esm.ts","../src/bundle.scoped.config.ts","../src/bundle.scoped.esm.ts","../src/generated/i18n/i18n-defaults.ts","../src/generated/json-imports/Themes-fetch.ts","../src/generated/json-imports/Themes.ts","../src/generated/json-imports/i18n-fetch.ts","../src/generated/json-imports/i18n.ts","../src/generated/themes/GrowingButton.css.ts","../src/generated/themes/Table.css.ts","../src/generated/themes/TableCell.css.ts","../src/generated/themes/TableColumn.css.ts","../src/generated/themes/TableGroupRow.css.ts","../src/generated/themes/TableRow.css.ts","../src/generated/themes/sap_fiori_3/parameters-bundle.css.ts","../src/generated/themes/sap_fiori_3_dark/parameters-bundle.css.ts","../src/generated/themes/sap_fiori_3_hcb/parameters-bundle.css.ts","../src/generated/themes/sap_fiori_3_hcw/parameters-bundle.css.ts","../src/generated/themes/sap_horizon/parameters-bundle.css.ts","../src/generated/themes/sap_horizon_dark/parameters-bundle.css.ts","../src/generated/themes/sap_horizon_hcb/parameters-bundle.css.ts","../src/generated/themes/sap_horizon_hcw/parameters-bundle.css.ts","../src/types/TableColumnPopinDisplay.ts","../src/types/TableGrowingMode.ts","../src/types/TableMode.ts","../src/types/TableRowType.ts"],"version":"5.6.2"}