@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/cypress/specs/TableGrowing.cy.ts

@@ -1,280 +0,0 @@
-import { html } from "lit";
-
-import "../../src/Table.js";
-import "../../src/TableHeaderRow.js";
-import "../../src/TableCell.js";
-import "../../src/TableRow.js";
-import "../../src/TableGrowing.js";
-
-import type TableGrowing from "../../src/TableGrowing.js";
-
-describe("TableGrowing - Button", () => {
-	function mountTable() {
-		cy.mount(html`
-			<ui5-table id="table">
-				<ui5-table-growing slot="features"></ui5-table-growing>
-				<ui5-table-header-row slot="headerRow">
-					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-				</ui5-table-header-row>
-				<ui5-table-row>
-					<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-				</ui5-table-row>
-			</ui5-table>
-		`);
-	}
-	describe("Rendering", () => {
-		it("tests button is rendered", () => {
-			mountTable();
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-button")
-				.should("exist")
-				.should("have.attr", "role", "button")
-				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
-
-			cy.get("[ui5-table")
-				.shadow()
-				.find("#growing-row")
-				.should("exist");
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-text")
-				.should("have.text", "More");
-		});
-
-		it("tests correct custom texts are rendered", () => {
-			const growingText = "My Custom Growing Text",
-				growingSubtext = "My Custom Growing Subtext";
-			cy.mount(html`
-				<ui5-table>
-					<ui5-table-growing slot="features" growing-text="${growingText}" growing-sub-text="${growingSubtext}"/>
-					<ui5-table-header-row slot="headerRow">
-						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-					</ui5-table-header-row>
-					<ui5-table-row>
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-					</ui5-table-row>
-				</ui5-table>
-			`);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-button")
-				.should("exist")
-				.should("have.attr", "role", "button")
-				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-text")
-				.should("have.text", growingText);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-subtext")
-				.should("have.text", growingSubtext);
-		});
-
-		it("tests growing button not shown when no data", () => {
-			cy.mount(html`
-				<ui5-table>
-					<ui5-table-growing slot="features"></ui5-table-growing>
-					<ui5-table-header-row slot="headerRow">
-						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-					</ui5-table-header-row>
-				</ui5-table>
-			`);
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("not.exist");
-		});
-	});
-
-	describe("Event & Focus", () => {
-		it("tests loadMore event fired upon pressing button", () => {
-			mountTable();
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
-				.click();
-
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
-		});
-
-		it("test loadMore event fired upon pressing Enter", () => {
-			mountTable();
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
-				.shadow()
-				.find("#growing-button")
-				.focus();
-
-			cy.realPress("Enter");
-
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-button")
-				.focus();
-
-			cy.realPress("Space");
-
-			cy.get("@loadMore")
-				.should("have.been.calledTwice");
-		});
-
-		it("tests focus is set to first newly added row", () => {
-			mountTable();
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => {
-					tableGrowing.get(0).addEventListener("load-more", () => {
-						const table = document.getElementById("table");
-						const row = document.createElement("ui5-table-row");
-						row.id = "new-row";
-						row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
-						table!.appendChild(row);
-					});
-				})
-				.click();
-
-			cy.get("[ui5-table]")
-				.children("ui5-table-row")
-				.should("have.length", 2);
-
-			cy.get("#new-row")
-				.should("exist")
-				.should("have.focus");
-		});
-
-		it("tests focus is set to growing button when no new rows are added", () => {
-			mountTable();
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.click();
-
-			cy.get("[ui5-table-growing]")
-				.should("have.focus");
-		});
-	});
-});
-
-describe("TableGrowing - Scroll", () => {
-	function mountTable(rowCount: number = 10, overflow = false) {
-		cy.mount(html`
-			<div id="wrapper" style="height: 200px; ${overflow ? "overflow: auto" : ""}">
-			<ui5-table id="table">
-				<ui5-table-growing slot="features" type="Scroll"></ui5-table-growing>
-				<ui5-table-header-row slot="headerRow">
-					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-				</ui5-table-header-row>
-				${Array.from({ length: rowCount }).map(() => html`
-					<ui5-table-row>
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-					</ui5-table-row>
-				`)}
-			</ui5-table>
-			</div>
-		`);
-	}
-
-	describe("Rendering", () => {
-		it("tests no button shown, when scrollable", () => {
-			mountTable(10, true);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-button")
-				.should("not.exist");
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("not.exist");
-		});
-
-		it("tests button shown when not scrollable", () => {
-			mountTable(1, false);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-button")
-				.should("exist");
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("exist");
-		});
-	});
-
-	describe("Event", () => {
-		it("tests loadMore event fire upon scrolling to table end", () => {
-			mountTable(10, true);
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
-
-			cy.get("[ui5-table-row]:last-child")
-				.scrollIntoView();
-
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
-		});
-
-		it("tests button fires load-more, button vanishes, scroll to end fires load-more", () => {
-			mountTable(1, true);
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => {
-					tableGrowing.get(0).addEventListener("load-more", () => {
-						const table = document.getElementById("table");
-						Array.from({ length: 10 }).forEach(() => {
-							const row = document.createElement("ui5-table-row");
-							row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
-							table!.appendChild(row);
-						});
-					});
-					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
-				})
-				.click();
-
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
-
-			cy.get("[ui5-table]")
-				.children("ui5-table-row")
-				.should("have.length", 11);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#growing-button")
-				.should("not.exist");
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("not.exist");
-
-			for (let i = 2; i <= 6; i++) {
-				cy.get("#wrapper")
-					.scrollTo("bottom", { duration: 300 });
-
-				cy.get("@loadMore")
-					.should("have.callCount", i);
-
-				cy.get("[ui5-table]")
-					.children("ui5-table-row")
-					.should("have.length", 1 + 10 * i);
-			}
-		});
-	});
-});

package/cypress/specs/TableLoading.cy.ts

@@ -1,44 +0,0 @@
-import { html } from "lit";
-import "../../src/Table.js";
-import "../../src/TableHeaderRow.js";
-import "../../src/TableCell.js";
-import "../../src/TableRow.js";
-
-describe("Table - loading", () => {
-	it("tests busy indicator is displayed", () => {
-		cy.mount(html`
-		<input id="before">
-		<ui5-table loading loading-delay="0">
-		<ui5-table-header-row slot="headerRow">
-			<ui5-table-header-cell ><span>ColumnA</span></ui5-table-header-cell>
-		</ui5-table-header-row>
-		<ui5-table-row>
-			<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-		</ui5-table-row>
-	</ui5-table>
-	<input id="after">`);
-
-		cy.get("[ui5-table]")
-			.shadow()
-			.find("#loading")
-			.shadow()
-			.find(".ui5-busy-indicator-busy-area")
-			.should("exist");
-
-		cy.get("#before")
-			.realClick();
-
-		cy.get("#before")
-			.should("be.focused");
-
-		cy.realPress("Tab");
-
-		cy.focused()
-			.should("have.class", "ui5-busy-indicator-busy-area");
-
-		cy.realPress("Tab");
-
-		cy.get("#after")
-			.should("be.focused");
-	});
-});

package/cypress/specs/TableUtils.cy.ts

@@ -1,26 +0,0 @@
-import { isInstanceOfTable } from "../../src/TableUtils.js";
-import Table from "../../src/Table.js";
-import TableRow from "../../src/TableRow.js";
-
-describe("#isInstanceOfTable", () => {
-	it("object is Table", () => {
-		const obj = new Table();
-		cy.wrap({ isInstanceOfTable })
-			.invoke("isInstanceOfTable", obj)
-			.should("be.true");
-	});
-
-	it("object is not Table", () => {
-		const obj = new TableRow();
-		cy.wrap({ isInstanceOfTable })
-			.invoke("isInstanceOfTable", obj)
-			.should("be.false");
-	});
-
-	it("object is undefined", () => {
-		const obj = undefined;
-		cy.wrap({ isInstanceOfTable })
-			.invoke("isInstanceOfTable", obj)
-			.should("be.false");
-	});
-});

package/cypress/specs/Tokenizer.cy.ts

@@ -1,114 +0,0 @@
-import { html } from "lit";
-import "../../src/Tokenizer.js";
-import type Tokenizer from "../../src/Tokenizer.js";
-
-describe("Tokenizer - multi-line and Clear All", () => {
-	it("'Clear All' link is rendered for multi-line tokenizer and show-clear-all set to true", () => {
-		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
-			<ui5-token text="Andora"></ui5-token>
-			<ui5-token text="Bulgaria"></ui5-token>
-			<ui5-token text="Canada"></ui5-token>
-			<ui5-token text="Denmark"></ui5-token>
-			<ui5-token text="Estonia"></ui5-token>
-			<ui5-token text="Finland"></ui5-token>
-			<ui5-token text="Germany"></ui5-token>
-		</ui5-tokenizer>`);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("exist");
-	});
-
-	it("'Clear All' link is rendered even for 1 token when in multi-line mode", () => {
-		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
-			<ui5-token text="Andora"></ui5-token>
-		</ui5-tokenizer>`);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("exist");
-	});
-
-	it("'Clear All' link is not rendered for single-line tokenizer even when show-clear-all is set to true", () => {
-		cy.mount(html`<ui5-tokenizer show-clear-all>
-						<ui5-token text="Andora"></ui5-token>
-					</ui5-tokenizer>`);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("not.exist");
-	});
-
-	it("'Clear All' link is not rendered for multi-line tokenizer when show-clear-all is set to false", () => {
-		cy.mount(html`<ui5-tokenizer multi-line>
-			<ui5-token text="Andora"></ui5-token>
-			<ui5-token text="Bulgaria"></ui5-token>
-			<ui5-token text="Canada"></ui5-token>
-			<ui5-token text="Denmark"></ui5-token>
-			<ui5-token text="Estonia"></ui5-token>
-			<ui5-token text="Finland"></ui5-token>
-			<ui5-token text="Germany"></ui5-token>
-		</ui5-tokenizer>`);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("not.exist");
-	});
-
-	it("'Clear All' link is not rendered for multi-line readonly tokenizer when show-clear-all 'true'", () => {
-		cy.mount(html`<ui5-tokenizer multi-line show-clear-all readonly>
-			<ui5-token text="Andora"></ui5-token>
-			<ui5-token text="Bulgaria"></ui5-token>
-			<ui5-token text="Canada"></ui5-token>
-			<ui5-token text="Denmark"></ui5-token>
-			<ui5-token text="Estonia"></ui5-token>
-			<ui5-token text="Finland"></ui5-token>
-			<ui5-token text="Germany"></ui5-token>
-		</ui5-tokenizer>`);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.should("not.exist");
-	});
-
-	it("'n-more' link is not rendered for multi-line tokenizer", () => {
-		cy.mount(html`<ui5-tokenizer multi-line style="width: 100px;">
-			<ui5-token text="Andora"></ui5-token>
-			<ui5-token text="Bulgaria"></ui5-token>
-			<ui5-token text="Canada"></ui5-token>
-			<ui5-token text="Denmark"></ui5-token>
-			<ui5-token text="Estonia"></ui5-token>
-			<ui5-token text="Finland"></ui5-token>
-			<ui5-token text="Germany"></ui5-token>
-		</ui5-tokenizer>`);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--more-text")
-			.should("not.exist");
-	});
-
-	it("Pressing 'Clear All' link fires token-delete event", () => {
-		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
-			<ui5-token text="Andora"></ui5-token>
-			<ui5-token text="Bulgaria"></ui5-token>
-			<ui5-token text="Canada"></ui5-token>
-		</ui5-tokenizer>`);
-
-		cy.get<Tokenizer>("[ui5-tokenizer]").then($tokenizer => $tokenizer.get(0).addEventListener("token-delete", cy.stub().as("delete")));
-
-		cy.get<Tokenizer>("[ui5-tokenizer]")
-			.shadow()
-			.find(".ui5-tokenizer--clear-all")
-			.eq(0)
-			.click();
-
-		cy.get("@delete")
-			.should("have.been.calledOnce");
-	});
-});

package/cypress/specs/Toolbar.cy.ts

@@ -1,99 +0,0 @@
-import { html } from "lit";
-import "../../src/Toolbar.js";
-import "../../src/ToolbarButton.js";
-import "../../src/ToolbarSelect.js";
-import "../../src/ToolbarSelectOption.js";
-import "../../src/ToolbarSeparator.js";
-import "../../src/ToolbarSpacer.js";
-import "../../src/Popover.js";
-import type ToolbarItem from "../../src/ToolbarItem.js";
-import "@ui5/webcomponents-icons/dist/add.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/employee.js";
-
-describe("Toolbar general interaction", () => {
-	it.skip("Should not return null upon calling getDomRef for all direct child items", () => {
-		cy.mount(html`
-			<ui5-toolbar id="otb_standard">
-				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 2"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 3"></ui5-toolbar-button>
-				<ui5-toolbar-select>
-					<ui5-toolbar-select-option>1</ui5-toolbar-select-option>
-					<ui5-toolbar-select-option>2</ui5-toolbar-select-option>
-					<ui5-toolbar-select-option>3</ui5-toolbar-select-option>
-				</ui5-toolbar-select>
-				<ui5-toolbar-separator></ui5-toolbar-separator>
-				<ui5-toolbar-button text="Button 4"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 5"></ui5-toolbar-button>
-				<ui5-toolbar-button text="Button 6"></ui5-toolbar-button>
-			</ui5-toolbar>
-		`);
-
-		cy.get("#otb_standard")
-			.as("toolbar");
-
-		cy.get("@toolbar")
-			.should("exist");
-
-		cy.get("@toolbar")
-			.children()
-			.each($el => {
-				const toolbarItem = $el[0] as ToolbarItem;
-				cy.wrap(toolbarItem.getDomRef())
-					.should("not.be.null")
-					.should("not.be.undefined");
-			});
-	});
-
-	it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => {
-		cy.mount(html`
-			<ui5-toolbar id="otb_spacer">
-				<ui5-toolbar-button icon="add" text="Plus" design="Default"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="employee" text="Hire"></ui5-toolbar-button>
-				<ui5-toolbar-separator></ui5-toolbar-separator>
-				<ui5-toolbar-button icon="add" text="Add"></ui5-toolbar-button>
-				<ui5-toolbar-button icon="decline" text="Decline"></ui5-toolbar-button>
-				<ui5-toolbar-spacer></ui5-toolbar-spacer>
-				<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
-			</ui5-toolbar>
-		`);
-
-		cy.get("#otb_spacer")
-			.as("toolbar");
-
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(500);
-
-		cy.get("@toolbar")
-			.shadow()
-			.find(".ui5-tb-overflow-btn-hidden")
-			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
-	});
-
-	it("shouldn't show overflow button if there is enough space", () => {
-		cy.mount(html`
-			<ui5-toolbar style="width:fit-content;max-width:100%;">
-				<ui5-toolbar-button icon="decline">
-				</ui5-toolbar-button>
-
-				<ui5-toolbar-button icon="add">
-				</ui5-toolbar-button>
-
-				<ui5-toolbar-button icon="employee">
-				</ui5-toolbar-button>
-			</ui5-toolbar>
-		`);
-
-		cy.get("[ui5-toolbar]")
-			.as("toolbar");
-
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(500);
-
-		cy.get("@toolbar")
-			.shadow()
-			.find(".ui5-tb-overflow-btn-hidden")
-			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
-	});
-});

package/cypress/specs/Tree.cy.ts

@@ -1,29 +0,0 @@
-import { html } from "lit";
-import "../../src/Tree.js";
-import "../../src/TreeItem.js";
-
-describe("Tree Tests", () => {
-	it("tests accessibility properties forwarded to the list", () => {
-		cy.mount(html`
-		<ui5-tree
-			accessible-name="Tree"
-			accessible-name-ref="lblDesc1"
-			accessible-description="Description"
-			accessible-description-ref="lblDesc2"
-		></ui5-tree>
-		<div id="lblDesc1">Tree</div>
-		<div id="lblDesc2">Description</div>
-		`);
-
-		cy.get("[ui5-tree]")
-			.as("tree");
-
-		cy.get("@tree")
-			.shadow()
-			.find(".ui5-tree-root")
-			.should("have.attr", "accessible-name", "Tree")
-			.and("have.attr", "accessible-name-ref", "lblDesc1")
-			.and("have.attr", "accessible-description", "Description")
-			.and("have.attr", "accessible-description-ref", "lblDesc2");
-	});
-});

package/cypress/specs/base/Tooltips.cy.ts

@@ -1,55 +0,0 @@
-import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
-import { html } from "lit";
-import "../../../src/Icon.js";
-import "../../../src/Button.js";
-import "../../../src/ToggleButton.js";
-import "../../../src/SegmentedButton.js";
-import "../../../src/SegmentedButtonItem.js";
-import "../../../src/RatingIndicator.js";
-
-setEnableDefaultTooltips(false);
-
-describe("Default Tooltips", () => {
-	it("tests navigation", () => {
-		cy.mount(html`
-	<ui5-icon id="ic" name="settings"></ui5-icon>
-	<ui5-button id="btn" icon="settings"></ui5-button>
-	<ui5-rating-indicator id="rt" icon="settings"></ui5-rating-indicator>
-	<ui5-toggle-button id="togglebtn" icon="settings"></ui5-toggle-button>
-	<ui5-segmented-button id="segBtn">
-		<ui5-segmented-button-item id="segBtnItem" icon="add"></ui5-segmented-button-item>
-		<ui5-segmented-button-item id="segBtnItem2" icon="settings"></ui5-segmented-button-item>
-		<ui5-segmented-button-item id="segBtnItem3" icon="activate"></ui5-segmented-button-item>
-	</ui5-segmented-button>`);
-
-		cy.get("#ic")
-			.shadow()
-			.find("title")
-			.should("not.exist");
-
-		cy.get("#btn")
-			.shadow()
-			.find(".ui5-button-icon")
-			.should("not.have.attr", "title");
-
-		cy.get("#togglebtn")
-			.shadow()
-			.find(".ui5-button-icon")
-			.should("not.have.attr", "title");
-
-		cy.get("#rt")
-			.shadow()
-			.find(".ui5-rating-indicator-root")
-			.should("not.have.attr", "title");
-
-		cy.get("#segBtnItem")
-			.shadow()
-			.find(".ui5-segmented-button-item-root")
-			.should("not.have.attr", "title");
-
-		cy.get("#segBtnItem")
-			.shadow()
-			.find(".ui5-segmented-button-item-icon")
-			.should("not.have.attr", "title");
-	});
-});

package/dist/MyDemo.d.ts

@@ -1,34 +0,0 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-/**
- * @class
- *
- * <h3 class="comment-api-title">Overview</h3>
- *
- *
- * <h3>Usage</h3>
- *
- * For the <code>my-demo</code>
- * <h3>ES6 Module Import</h3>
- *
- * <code>import "@ui5/webcomponents/dist/MyDemo.js";</code>
- *
- * @constructor
- * @extends UI5Element
- * @public
- */
-declare class MyDemo extends UI5Element {
-    /**
-     * Defines the value of the component.
-     *
-     * @default ""
-     * @public
-     */
-    value?: string;
-    /**
-     * Defines the text of the component.
-     *
-     * @public
-     */
-    text: Array<Node>;
-}
-export default MyDemo;