@@ -145,7 +145,7 @@
From 62d235d40a8ee3faddd86c3e95983e65522dd1f5 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Fri, 22 Mar 2024 16:36:16 +0200
Subject: [PATCH 08/60] refactor(framework): remove render method (#8501)
Removed the deprecated `UI5Element#render` method of the UI5Element class and replaced it with `UI5Element#renderer`.
BREAKING CHANGE: Removed `UI5Element#render` method in favour of `UI5Element#renderer`. If you previously used "render"
```js
class MyClass extends UI5Element {
static get render() {
return litRenderer;
}
}
```
start using "renderer"
```ts
class MyClass extends UI5Element {
static get renderer() {
return litRenderer;
}
}
```
Related to [#8461](https://github.com/SAP/ui5-webcomponents/issues/8461)
---
.../02-custom-UI5-Web-Components.md | 18 +++++++++---------
.../07-typescript-in-UI5-Web-Components.md | 2 --
packages/base/src/UI5Element.ts | 6 +-----
packages/base/src/decorators/customElement.ts | 5 ++---
packages/base/src/updateShadowRoot.ts | 7 +------
packages/base/test/elements/Child.js | 2 +-
packages/base/test/elements/Generic.js | 2 +-
packages/base/test/elements/Parent.js | 2 +-
.../base/test/elements/WithComplexTemplate.js | 2 +-
packages/base/test/elements/WithStaticArea.js | 2 +-
packages/main/src/SliderBase.ts | 2 +-
11 files changed, 19 insertions(+), 31 deletions(-)
diff --git a/docs/5-development/02-custom-UI5-Web-Components.md b/docs/5-development/02-custom-UI5-Web-Components.md
index ec543f0f9e75..264e506cd4cf 100644
--- a/docs/5-development/02-custom-UI5-Web-Components.md
+++ b/docs/5-development/02-custom-UI5-Web-Components.md
@@ -34,7 +34,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
@@ -108,7 +108,7 @@ For a complete reference to all metadata entities, click [here](./03-understandi
UI5 Web Components are agnostic of the DOM render engine used. However, all standard UI5 Web Components (`@ui5/webcomponents`, `@ui5/webcomponents-fiori`, etc.)
use [lit-html](https://github.com/Polymer/lit-html) as the rendering technology of choice.
-The render engine is defined via the `render` static getter:
+The render engine is defined via the `renderer` static getter:
```js
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
@@ -129,7 +129,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
}
@@ -167,7 +167,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
@@ -216,7 +216,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
@@ -280,7 +280,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
@@ -331,7 +331,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
@@ -398,7 +398,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
@@ -455,7 +455,7 @@ class Demo extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
diff --git a/docs/5-development/07-typescript-in-UI5-Web-Components.md b/docs/5-development/07-typescript-in-UI5-Web-Components.md
index 285b2cbeb61e..c0dbe7542271 100644
--- a/docs/5-development/07-typescript-in-UI5-Web-Components.md
+++ b/docs/5-development/07-typescript-in-UI5-Web-Components.md
@@ -70,8 +70,6 @@ class MyElement extends UI5Element {
}
```
-**Note**: the `static get render()` that we use when developing in JavaScript (still supported for backward compatibility) is replaced with **`renderer`** in the `@customElement` decorator.
-
### Property decorators
These are used inside the class and are associated with accessors (class members).
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
index 74de658f820a..93529993abe9 100644
--- a/packages/base/src/UI5Element.ts
+++ b/packages/base/src/UI5Element.ts
@@ -108,11 +108,7 @@ abstract class UI5Element extends HTMLElement {
static staticAreaTemplate?: TemplateFunction;
static _metadata: UI5ElementMetadata;
- /**
- * @deprecated
- */
- static render: Renderer;
- static renderer?: Renderer;
+ static renderer: Renderer;
constructor() {
super();
diff --git a/packages/base/src/decorators/customElement.ts b/packages/base/src/decorators/customElement.ts
index 6fa8ecc80ba9..163813675592 100644
--- a/packages/base/src/decorators/customElement.ts
+++ b/packages/base/src/decorators/customElement.ts
@@ -49,9 +49,8 @@ const customElement = (tagNameOrComponentSettings: string | {
target.metadata.fastNavigation = fastNavigation;
}
- ["render", "renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity: string) => {
- const _customElementEntity = customElementEntity === "render" ? "renderer" : customElementEntity;
- const customElementEntityValue = tagNameOrComponentSettings[_customElementEntity as keyof typeof tag];
+ ["renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity: string) => {
+ const customElementEntityValue = tagNameOrComponentSettings[customElementEntity as keyof typeof tag];
customElementEntityValue && Object.defineProperty(target, customElementEntity, {
get: () => customElementEntityValue,
diff --git a/packages/base/src/updateShadowRoot.ts b/packages/base/src/updateShadowRoot.ts
index d624c19100fb..6a4c1fba880d 100644
--- a/packages/base/src/updateShadowRoot.ts
+++ b/packages/base/src/updateShadowRoot.ts
@@ -23,12 +23,7 @@ const updateShadowRoot = (element: UI5Element, forStaticArea = false) => {
shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
- if (ctor.renderer) {
- ctor.renderer(renderResult, shadowRoot, forStaticArea, { host: element });
- return;
- }
-
- ctor.render(renderResult, shadowRoot, forStaticArea, { host: element });
+ ctor.renderer(renderResult, shadowRoot, forStaticArea, { host: element });
};
export default updateShadowRoot;
diff --git a/packages/base/test/elements/Child.js b/packages/base/test/elements/Child.js
index 6fa39d5a1d5e..15162ec6a290 100644
--- a/packages/base/test/elements/Child.js
+++ b/packages/base/test/elements/Child.js
@@ -21,7 +21,7 @@ class Child extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
diff --git a/packages/base/test/elements/Generic.js b/packages/base/test/elements/Generic.js
index a65ce1eb5964..0c3d42a31b44 100644
--- a/packages/base/test/elements/Generic.js
+++ b/packages/base/test/elements/Generic.js
@@ -50,7 +50,7 @@ class Generic extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
diff --git a/packages/base/test/elements/Parent.js b/packages/base/test/elements/Parent.js
index f5497dab3443..d720114e2155 100644
--- a/packages/base/test/elements/Parent.js
+++ b/packages/base/test/elements/Parent.js
@@ -25,7 +25,7 @@ class Parent extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
diff --git a/packages/base/test/elements/WithComplexTemplate.js b/packages/base/test/elements/WithComplexTemplate.js
index 6771e13596bb..40e899206c2e 100644
--- a/packages/base/test/elements/WithComplexTemplate.js
+++ b/packages/base/test/elements/WithComplexTemplate.js
@@ -9,7 +9,7 @@ class WithComplexTemplate extends UI5Element {
};
}
- static get render() {
+ static get renderer() {
return litRender;
}
diff --git a/packages/base/test/elements/WithStaticArea.js b/packages/base/test/elements/WithStaticArea.js
index 021bd03e6b54..eba6e0d642a7 100644
--- a/packages/base/test/elements/WithStaticArea.js
+++ b/packages/base/test/elements/WithStaticArea.js
@@ -21,7 +21,7 @@ class WithStaticArea extends UI5Element {
return metadata;
}
- static get render() {
+ static get renderer() {
return litRender;
}
diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts
index cf0927835a0f..ae7f443f9762 100644
--- a/packages/main/src/SliderBase.ts
+++ b/packages/main/src/SliderBase.ts
@@ -213,7 +213,7 @@ abstract class SliderBase extends UI5Element {
};
}
- static get render() {
+ static get renderer() {
return litRender;
}
From 17ae15215cde68d9e1dcb67eea9d9ad1f71103f0 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Fri, 22 Mar 2024 16:41:51 +0200
Subject: [PATCH 09/60] refactor(tools): remove js option from generation
templates (#8503)
With the release of version 2.0, we strongly encourage component development to be done in TypeScript. Consequently, we are discontinuing the option to generate JavaScript projects and components, as the tooling will no longer support them by default.
BREAKING CHANGE: Remove JavaScript template option from @ui5/create-webcomponents-package
Previously `npm init @ui5/webcomponents-package` used to create JS-based project, however now it will be TypeScript-based project.
If you previously used `npm init @ui5/webcomponents-package --enable-typescript` to create TypeScript-based project, now it's by default, e.g `npm init @ui5/webcomponents-package` and `--enable-typescript` is removed.
Related to [#8461](https://github.com/SAP/ui5-webcomponents/issues/8461)
---
packages/create-package/README.md | 2 -
packages/create-package/create-package.js | 46 +----------
.../template/package-scripts.js | 2 +-
.../create-package/template/src/Assets.js | 5 --
.../template/src/MyFirstComponent.js | 82 -------------------
.../tools/lib/create-new-component/index.js | 15 +---
.../jsFileContentTemplate.js | 73 -----------------
7 files changed, 9 insertions(+), 216 deletions(-)
delete mode 100644 packages/create-package/template/src/Assets.js
delete mode 100644 packages/create-package/template/src/MyFirstComponent.js
delete mode 100644 packages/tools/lib/create-new-component/jsFileContentTemplate.js
diff --git a/packages/create-package/README.md b/packages/create-package/README.md
index ba06ab8fde02..28368f15c274 100644
--- a/packages/create-package/README.md
+++ b/packages/create-package/README.md
@@ -21,7 +21,6 @@ Options:
--name Overview
- * - * TheINIT_PACKAGE_VAR_TAG component is a demo component that displays some text.
- *
- * @constructor
- * @alias INIT_PACKAGE_VAR_NAMESPACE.INIT_PACKAGE_VAR_CLASS_NAME
- * @extends sap.ui.webc.base.UI5Element
- * @tagname INIT_PACKAGE_VAR_TAG
- * @public
- */
-class INIT_PACKAGE_VAR_CLASS_NAME extends UI5Element {
- static get metadata() {
- return metadata;
- }
-
- static get render() {
- return litRender;
- }
-
- static get template() {
- return INIT_PACKAGE_VAR_CLASS_NAMETemplate;
- }
-
- static get styles() {
- return INIT_PACKAGE_VAR_CLASS_NAMECss;
- }
-
- static async onDefine() {
- INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
- }
-
- onClick() {
- this.count++;
- }
-
- get counterText() {
- return INIT_PACKAGE_VAR_CLASS_NAME.i18nBundle.getText(COUNT);
- }
-}
-
-INIT_PACKAGE_VAR_CLASS_NAME.define();
-
-export default INIT_PACKAGE_VAR_CLASS_NAME;
diff --git a/packages/tools/lib/create-new-component/index.js b/packages/tools/lib/create-new-component/index.js
index b9eaa7dda9e4..574776617883 100644
--- a/packages/tools/lib/create-new-component/index.js
+++ b/packages/tools/lib/create-new-component/index.js
@@ -58,21 +58,15 @@ const getLibraryName = packageName => {
return packageName.substr("webcomponents-".length);
};
-const generateFiles = (componentName, tagName, library, packageName, isTypeScript) => {
+const generateFiles = (componentName, tagName, library, packageName) => {
componentName = capitalizeFirstLetter(componentName);
const filePaths = {
- "main": isTypeScript
- ? `./src/${componentName}.ts`
- : `./src/${componentName}.js`,
+ "main": `./src/${componentName}.ts`,
"css": `./src/themes/${componentName}.css`,
"template": `./src/${componentName}.hbs`,
};
- const FileContentTemplate = isTypeScript
- ? tsFileContentTemplate(componentName, tagName, library, packageName)
- : jsFileContentTemplate(componentName, tagName, library, packageName);
-
- fs.writeFileSync(filePaths.main, FileContentTemplate, { flag: "wx+" });
+ fs.writeFileSync(filePaths.main, tsFileContentTemplate(componentName, tagName, library, packageName), { flag: "wx+" });
fs.writeFileSync(filePaths.css, "", { flag: "wx+" });
fs.writeFileSync(filePaths.template, "Overview
- * - * - *Usage
- * - * For the${tagName}
- * ES6 Module Import
- * - *import "${packageName}/dist/${componentName}.js";
- *
- * @constructor
- * @author SAP SE
- * @alias sap.ui.webc.${library}.${componentName}
- * @extends sap.ui.webc.base.UI5Element
- * @tagname ${tagName}
- * @public
- */
-class ${componentName} extends UI5Element {
- static get metadata() {
- return metadata;
- }
-
- static get render() {
- return litRender;
- }
-
- static get styles() {
- return ${componentName}Css;
- }
-
- static get template() {
- return ${componentName}Template;
- }
-
- static get dependencies() {
- return [];
- }
-}
-
-${componentName}.define();
-
-export default ${componentName};
-`;
-};
-
-module.exports = jsFileContentTemplate;
From 0789c344131bd0150d69c237a4b2fe9b102385ee Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Fri, 22 Mar 2024 16:51:59 +0200
Subject: [PATCH 10/60] chore: remove unused command (#8506)
---
package.json | 13 ++++++-------
1 file changed, 6 insertions(+), 7 deletions(-)
diff --git a/package.json b/package.json
index dbf4e65523b4..e06714241928 100644
--- a/package.json
+++ b/package.json
@@ -19,14 +19,14 @@
"watch:base": "yarn workspace @ui5/webcomponents-base nps watch",
"watch:main": "yarn workspace @ui5/webcomponents nps watch",
"watch:fiori": "yarn workspace @ui5/webcomponents-fiori nps watch",
- "watch:allWithDelay": "node -e \"setTimeout(function(){}, 5000)\" && npm-run-all --parallel copy-css watch:base watch:main watch:fiori",
+ "watch:allWithDelay": "node -e \"setTimeout(function(){}, 5000)\" && npm-run-all --parallel watch:base watch:main watch:fiori",
"scopeWatch:main": "yarn workspace @ui5/webcomponents nps scope.watch",
"scopeWatch:fiori": "yarn workspace @ui5/webcomponents-fiori nps scope.watch",
- "startWithScope": "npm-run-all --sequential generate scopePrepare:main scopePrepare:fiori copy-css scopeStart:all",
+ "startWithScope": "npm-run-all --sequential generate scopePrepare:main scopePrepare:fiori scopeStart:all",
"start:all": "npm-run-all --parallel watch:allWithDelay dev",
"dev": "node packages/tools/lib/dev-server/dev-server.js",
"scopeStart:all": "npm-run-all --parallel watch:base scopeWatch:main scopeWatch:fiori dev",
- "start:storybook": "yarn ci:releasebuild && yarn copy-css && yarn workspace @ui5/webcomponents-playground start",
+ "start:storybook": "yarn ci:releasebuild && yarn workspace @ui5/webcomponents-playground start",
"start:website": "yarn ci:releasebuild && yarn workspace @ui5/webcomponents-website start",
"start": "npm-run-all --sequential generate start:all",
@@ -36,9 +36,9 @@
"ci:releasebuild": "npm-run-all --sequential generate ts generateAPI",
"ci:lint": "npm-run-all --sequential generate lint",
"ci:testbuild": "npm-run-all --sequential generate ts bundle",
- "ci:deploybuild": "yarn ci:testbuild && yarn generateAPI && yarn copy-css && yarn workspace @ui5/webcomponents-playground build",
- "ci:deploy": "yarn ci:testbuild && yarn generateAPI && yarn copy-css && yarn workspace @ui5/webcomponents-website ci:build",
- "ci:deploy:nightly": "yarn ci:testbuild && yarn generateAPI && yarn copy-css && yarn workspace @ui5/webcomponents-website ci:build:nightly",
+ "ci:deploybuild": "yarn ci:testbuild && yarn generateAPI && yarn workspace @ui5/webcomponents-playground build",
+ "ci:deploy": "yarn ci:testbuild && yarn generateAPI && yarn workspace @ui5/webcomponents-website ci:build",
+ "ci:deploy:nightly": "yarn ci:testbuild && yarn generateAPI && yarn workspace @ui5/webcomponents-website ci:build:nightly",
"ci:test:base": "yarn workspace @ui5/webcomponents-base test",
"ci:test:main:suite-1": "yarn workspace @ui5/webcomponents test:ssr && yarn workspace @ui5/webcomponents test:suite-1",
@@ -49,7 +49,6 @@
"lint:scope": "wsrun --exclude-missing lint:scope",
"link-all": "wsrun link",
"unlink-all": "wsrun unlink",
- "copy-css": "copy-and-watch \"packages/base/dist/css/**/*\" packages/main/test/pages/resources/css/base/ && copy-and-watch \"packages/theming/dist/css/**/*\" packages/main/test/pages/resources/css/theming/ && copy-and-watch \"packages/main/dist/css/**/*\" packages/main/test/pages/resources/css/main/ && copy-and-watch \"packages/base/dist/css/**/*\" packages/fiori/test/pages/resources/css/base/ && copy-and-watch \"packages/theming/dist/css/**/*\" packages/fiori/test/pages/resources/css/theming/ && copy-and-watch \"packages/fiori/dist/css/**/*\" packages/fiori/test/pages/resources/css/fiori/ && copy-and-watch \"packages/main/dist/css/**/*\" packages/fiori/test/pages/resources/css/main/",
"release": "node ./.github/actions/release.js",
"prepare": "husky install",
"husky:commit-msg": "commitlint -e",
From d6f2836a39281184be6b017b4fb348cda983113c Mon Sep 17 00:00:00 2001
From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com>
Date: Mon, 25 Mar 2024 11:48:59 +0200
Subject: [PATCH 11/60] refactor(ui5-popover): rename PopoverHorizontalAlign
and PopoverPlacementType values (#8502)
Renames the `Left` and `Right` values of `PopoverHorizontalAlign` and `PopoverPlacementType` to `Start` and `End`.
BREAKING CHANGE: The `Left` and `Right` options option have been renamed. If you previously used them to set the placement or the alignment of the popover:
```html
-
No space on the Right, try Left, Bottom, Top
+No space on the End, try Start, Bottom, Top
-
No space on the right, try Left, Bottom, Top and if nothing works, the target will be overlapped
+No space on the End, try Start, Bottom, Top and if nothing works, the target will be overlapped
-
No space on the Left, try Right, Bottom, Top
+No space on the Start, try End, Bottom, Top
-
No space on the right, try Right, Bottom, Top and if nothing works, the target will be overlapped
+No space on the Start, try End, Bottom, Top and if nothing works, the target will be overlapped
Right-aligned Popover, wider than button, arrow should be centered on the button
+End-aligned Popover, wider than button, arrow should be centered on the button
Horizontal Align
Web Component
Web Component
mSettings that defines initial",
- "property values, aggregated and associated objects as well as event handlers.",
- "See {@link sap.ui.base.ManagedObject#constructor} for a general description of the syntax of the settings object."
- );
- }
-
- // add the settings section only if there are any settings
- if ( !isEmpty(oClassInfo.properties)
- || !isEmpty(oClassInfo.aggregations)
- || !isEmpty(oClassInfo.associations)
- || !isEmpty(oClassInfo.events) ) {
-
- lines.push(
- "",
- includeSettings ? "" : "@ui5-settings",
- "The supported settings are:",
- "- "
- );
- if ( !isEmpty(oClassInfo.properties) ) {
- lines.push("
- Properties");
- lines.push("
- ");
- for (n in oClassInfo.properties) {
- lines.push("
- {@link " + rname("get", n) + " " + n + "} : " + oClassInfo.properties[n].type + (oClassInfo.properties[n].defaultValue !== null ? " (default: " + oClassInfo.properties[n].defaultValue + ")" : "") + (oClassInfo.defaultProperty == n ? " (default)" : "") + " "); - } - lines.push("
");
- }
- if ( !isEmpty(oClassInfo.aggregations) ) {
- lines.push(" - Aggregations");
- lines.push("
- ");
- for (n in oClassInfo.aggregations) {
- if ( oClassInfo.aggregations[n].visibility !== "hidden" ) {
- lines.push("
- {@link " + rname("get", n) + " " + n + "} : " + makeTypeString(oClassInfo.aggregations[n]) + (oClassInfo.defaultAggregation == n ? " (default)" : "") + " "); - } - } - lines.push("
");
- }
- if ( !isEmpty(oClassInfo.associations) ) {
- lines.push(" - Associations");
- lines.push("
- ");
- for (n in oClassInfo.associations) {
- lines.push("
- {@link " + rname("get", n) + " " + n + "} : (sap.ui.core.ID | " + oClassInfo.associations[n].type + ")" + (oClassInfo.associations[n].cardinality === "0..n" ? "[]" : "") + " "); - } - lines.push("
");
- }
- if ( !isEmpty(oClassInfo.events) ) {
- lines.push(" - Events");
- lines.push("
- ");
- for (n in oClassInfo.events) {
- lines.push("
- {@link " + "#event:" + n + " " + n + "} : fnListenerFunction or [fnListenerFunction, oListenerObject] or [oData, fnListenerFunction, oListenerObject] "); - } - lines.push("
");
- }
- lines.push("
sClassName",
- "and enriches it with the information contained in oClassInfo.",
- "",
- "oClassInfo might contain the same kind of information as described in {@link " + (oClassInfo.baseType ? oClassInfo.baseType + ".extend" : "sap.ui.base.Object.extend Object.extend") + "}.",
- "",
- "@param {string} sClassName Name of the class being created",
- "@param {object} [oClassInfo] Object literal with information about the class",
- "@param {function} [FNMetaImpl] Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata",
- "@returns {function} Created class / constructor function",
- "@public",
- "@static",
- "@name " + name("extend", "", true),
- "@function"
- ]);
- }
-
- for (n in oClassInfo.properties ) {
- info = oClassInfo.properties[n];
- if ( info.visibility === 'hidden' ) {
- continue;
- }
- // link = newStyle ? "{@link #setting:" + n + " " + n + "}" : "" + n + "";
- link = "{@link " + (newStyle ? "#setting:" + n : rname("get", n)) + " " + n + "}";
- newJSDoc([
- "Gets current value of property " + link + ".",
- "",
- !newStyle && info.doc ? info.doc : "",
- "",
- info.defaultValue !== null ? "Default value is " + (info.defaultValue === "" ? "empty string" : info.defaultValue) + "." : "",
- "@returns {" + info.type + "} Value of property " + n + "",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("get",n),
- "@function"
- ]);
- newJSDoc([
- "Sets a new value for property " + link + ".",
- "",
- !newStyle && info.doc ? info.doc : "",
- "",
- "When called with a value of null or undefined, the default value of the property will be restored.",
- "",
- info.defaultValue !== null ? "Default value is " + (info.defaultValue === "" ? "empty string" : info.defaultValue) + "." : "",
- "@param {" + info.type + "} " + varname(n,info.type,true) + " New value for property " + n + "",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("set",n),
- "@function"
- ]);
- if ( info.bindable ) {
- newJSDoc([
- "Binds property " + link + " to model data.",
- "",
- "See {@link sap.ui.base.ManagedObject#bindProperty ManagedObject.bindProperty} for a ",
- "detailed description of the possible properties of oBindingInfo",
- "@param {object} oBindingInfo The binding information",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("bind",n),
- "@function"
- ]);
- newJSDoc([
- "Unbinds property " + link + " from model data.",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("unbind",n),
- "@function"
- ]);
- }
- }
-
- for (n in oClassInfo.aggregations ) {
- info = oClassInfo.aggregations[n];
- if ( info.visibility === 'hidden' ) {
- continue;
- }
- // link = newStyle ? "{@link #setting:" + n + " " + n + "}" : "" + n + "";
- link = "{@link " + (newStyle ? "#setting:" + n : rname("get", n)) + " " + n + "}";
- newJSDoc([
- "Gets content of aggregation " + link + ".",
- "",
- !newStyle && info.doc ? info.doc : "",
- "",
- n === info.defaultAggregation ? "Note: this is the default aggregation for " + n + "." : "",
- "@returns {" + makeTypeString(info) + "}",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("get",n),
- "@function"
- ]);
- if ( info.cardinality == "0..n" ) {
- n1 = info.singularName;
- newJSDoc([
- "Inserts a " + n1 + " into the aggregation " + link + ".",
- "",
- "@param {" + makeTypeString(info, true) + "}",
- " " + varname(n1,info.altTypes ? "variant" : info.type) + " The " + n1 + " to insert; if empty, nothing is inserted",
- "@param {int}",
- " iIndex The 0-based index the " + n1 + " should be inserted at; for",
- " a negative value of iIndex, the " + n1 + " is inserted at position 0; for a value",
- " greater than the current size of the aggregation, the " + n1 + " is inserted at",
- " the last position",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("insert",n1),
- "@function"
- ]);
- newJSDoc([
- "Adds some " + n1 + " to the aggregation " + link + ".",
-
- "@param {" + makeTypeString(info, true) + "}",
- " " + varname(n1,info.altTypes ? "variant" : info.type) + " The " + n1 + " to add; if empty, nothing is inserted",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("add",n1),
- "@function"
- ]);
- newJSDoc([
- "Removes a " + n1 + " from the aggregation " + link + ".",
- "",
- "@param {int | string | " + makeTypeString(info, true) + "} " + varname(n1,"variant") + " The " + n1 + " to remove or its index or id",
- "@returns {" + makeTypeString(info, true) + "} The removed " + n1 + " or null",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("remove", n1),
- "@function"
- ]);
- newJSDoc([
- "Removes all the controls from the aggregation " + link + ".",
- "",
- "Additionally, it unregisters them from the hosting UIArea.",
- "@returns {" + makeTypeString(info) + "} An array of the removed elements (might be empty)",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("removeAll", n),
- "@function"
- ]);
- newJSDoc([
- "Checks for the provided " + info.type + " in the aggregation " + link + ".",
- "and returns its index if found or -1 otherwise.",
- "@param {" + makeTypeString(info, true) + "}",
- " " + varname(n1, info.altTypes ? "variant" : info.type) + " The " + n1 + " whose index is looked for",
- "@returns {int} The index of the provided control in the aggregation if found, or -1 otherwise",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("indexOf", n1),
- "@function"
- ]);
- } else {
- newJSDoc([
- "Sets the aggregated " + link + ".",
- "@param {" + makeTypeString(info) + "} " + varname(n, info.altTypes ? "variant" : info.type) + " The " + n + " to set",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("set", n),
- "@function"
- ]);
- }
- newJSDoc([
- "Destroys " + (info.cardinality === "0..n" ? "all " : "") + "the " + n + " in the aggregation " + link + ".",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("destroy", n),
- "@function"
- ]);
- if ( info.bindable ) {
- newJSDoc([
- "Binds aggregation " + link + " to model data.",
- "",
- "See {@link sap.ui.base.ManagedObject#bindAggregation ManagedObject.bindAggregation} for a ",
- "detailed description of the possible properties of oBindingInfo.",
- "@param {object} oBindingInfo The binding information",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("bind",n),
- "@function"
- ]);
- newJSDoc([
- "Unbinds aggregation " + link + " from model data.",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("unbind",n),
- "@function"
- ]);
- }
- }
-
- for (n in oClassInfo.associations ) {
- info = oClassInfo.associations[n];
- if ( info.visibility === 'hidden' ) {
- continue;
- }
- // link = newStyle ? "{@link #setting:" + n + " " + n + "}" : "" + n + "";
- link = "{@link " + (newStyle ? "#setting:" + n : rname("get", n)) + " " + n + "}";
- newJSDoc([
- info.cardinality === "0..n" ?
- "Returns array of IDs of the elements which are the current targets of the association " + link + "." :
- "ID of the element which is the current target of the association " + link + ", or null.",
- "",
- newStyle && info.doc ? info.doc : "",
- "",
- "@returns {sap.ui.core.ID" + (info.cardinality === "0..n" ? "[]" : "") + "}",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("get",n),
- "@function"
- ]);
- if ( info.cardinality === "0..n" ) {
- n1 = info.singularName;
- newJSDoc([
- "Adds some " + n1 + " into the association " + link + ".",
- "",
- "@param {sap.ui.core.ID | " + info.type + "} " + varname(n1, "variant") + " The " + n + " to add; if empty, nothing is inserted",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("add",n1),
- "@function"
- ]);
- newJSDoc([
- "Removes an " + n1 + " from the association named " + link + ".",
- "@param {int | sap.ui.core.ID | " + info.type + "} " + varname(n1,"variant") + " The " + n1 + " to be removed or its index or ID",
- "@returns {sap.ui.core.ID} The removed " + n1 + " or null",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("remove", n1),
- "@function"
- ]);
- newJSDoc([
- "Removes all the controls in the association named " + link + ".",
- "@returns {sap.ui.core.ID[]} An array of the removed elements (might be empty)",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("removeAll", n),
- "@function"
- ]);
- } else {
- newJSDoc([
- "Sets the associated " + link + ".",
- "@param {sap.ui.core.ID | " + info.type + "} " + varname(n, info.type) + " ID of an element which becomes the new target of this " + n + " association; alternatively, an element instance may be given",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("set", n),
- "@function"
- ]);
- }
- }
-
- for (n in oClassInfo.events ) {
- info = oClassInfo.events[n];
- //link = newStyle ? "{@link #event:" + n + " " + n + "}" : "" + n + "";
- link = "{@link #event:" + n + " " + n + "}";
-
- lines = [
- info.doc ? info.doc : "",
- "",
- "@name " + oClassInfo.name + "#" + n,
- "@event",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@param {sap.ui.base.Event} oControlEvent",
- "@param {sap.ui.base.EventProvider} oControlEvent.getSource",
- "@param {object} oControlEvent.getParameters"
- ];
- for (pName in info.parameters ) {
- lines.push(
- "@param {" + (info.parameters[pName].type || "") + "} oControlEvent.getParameters." + pName + " " + (info.parameters[pName].doc || "")
- );
- }
- lines.push("@public");
- newJSDoc(lines);
-
- newJSDoc([
- "Attaches event handler fnFunction to the " + link + " event of this " + oClassInfo.name + ".",
- "",
- "When called, the context of the event handler (its this) will be bound to oListener if specified, ",
- "otherwise it will be bound to this " + oClassInfo.name + " itself.",
- "",
- !newStyle && info.doc ? info.doc : "",
- "",
- "@param {object}",
- " [oData] An application-specific payload object that will be passed to the event handler along with the event object when firing the event",
- "@param {function}",
- " fnFunction The function to be called when the event occurs",
- "@param {object}",
- " [oListener] Context object to call the event handler with. Defaults to this " + oClassInfo.name + " itself",
- "",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- "@public",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@name " + name("attach", n),
- "@function"
- ]);
- newJSDoc([
- "Detaches event handler fnFunction from the " + link + " event of this " + oClassInfo.name + ".",
- "",
- "The passed function and listener object must match the ones used for event registration.",
- "",
- "@param {function}",
- " fnFunction The function to be called, when the event occurs",
- "@param {object}",
- " oListener Context object on which the given function had to be called",
- "@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@public",
- "@name " + name("detach", n),
- "@function"
- ]);
-
- // build documentation for fireEvent. It contains conditional parts which makes it a bit more complicated
- lines = [
- "Fires event " + link + " to attached listeners."
- ];
- if ( info.allowPreventDefault ) {
- lines.push(
- "",
- "Listeners may prevent the default action of this event by using the preventDefault-method on the event object.",
- "");
- }
- lines.push(
- "",
- "@param {object} [mParameters] Parameters to pass along with the event"
- );
- if ( !isEmpty(info.parameters) ) {
- for (pName in info.parameters) {
- lines.push(
- "@param {" + (info.parameters[pName].type || "any") + "} [mParameters." + pName + "] " + (info.parameters[pName].doc || "")
- );
- }
- lines.push("");
- }
- if ( info.allowPreventDefault ) {
- lines.push("@returns {boolean} Whether or not to prevent the default action");
- } else {
- lines.push("@returns {" + oClassInfo.name + "} Reference to this in order to allow method chaining");
- }
- lines.push(
- "@protected",
- info.since ? "@since " + info.since : "",
- info.deprecation ? "@deprecated " + info.deprecation : "",
- info.experimental ? "@experimental " + info.experimental : "",
- "@name " + name("fire", n),
- "@function"
- );
- newJSDoc(lines);
- }
-
-}
-
-function createDataTypeAutoDoc(oTypeInfo, classComment, node, parser, filename) {
-}
-
-/**
- * Creates a human readable location info for a given doclet.
- * @param doclet
- * @returns {String}
- */
-function location(doclet) {
- var filename = (doclet.meta && doclet.meta.filename) || "unknown";
- return " #" + ui5data(doclet).id + "@" + filename + (doclet.meta.lineno != null ? ":" + doclet.meta.lineno : "") + (doclet.synthetic ? "(synthetic)" : "");
-}
-
-// ---- Comment handling ---------------------------------------------------------------------------
-
-// --- comment related functions that depend on the JSdoc version (e.g. on the used parser)
-
-var isDocComment;
-var getLeadingCommentNode;
-
-// JSDoc added the node type Syntax.File with the same change that activated Babylon
-// See https://github.com/jsdoc3/jsdoc/commit/ffec4a42291de6d68e6240f304b68d6abb82a869
-if ( Syntax.File === 'File' ) {
-
- // JSDoc starting with version 3.5.0
-
- isDocComment = function isDocCommentBabylon(comment) {
- return comment && comment.type === 'CommentBlock' && comment.value && comment.value.charAt(0) === '*';
- }
-
- getLeadingCommentNode = function getLeadingCommentNodeBabylon(node, longname) {
- var leadingComments = node.leadingComments;
- if ( Array.isArray(leadingComments) ) {
- // in babylon, all comments are already attached to the node
- // and the last one is the closest one and should win
- // non-block comments have to be filtered out
- leadingComments = leadingComments.filter(isDocComment);
- if ( leadingComments.length > 0 ) {
- return leadingComments[leadingComments.length - 1];
- }
- }
- }
-
-} else {
-
- // JSDoc versions before 3.5.0
-
- isDocComment = function isDoccommentEsprima(comment) {
- return comment && comment.type === 'Block';
- };
-
- getLeadingCommentNode = function getLeadingCommentNodeEsprima(node, longname) {
- var comment,
- leadingComments = node.leadingComments;
-
- // when espree is used, JSDOc attached the leading comment and the first one was picked
- if (Array.isArray(leadingComments) && leadingComments.length && leadingComments[0].raw) {
- comment = leadingComments[0];
- }
-
- // also check all comments attached to the Program node (if found) whether they refer to the same longname
- // TODO check why any matches here override the direct leading comment from above
- if ( longname && currentProgram && currentProgram.leadingComments && currentProgram.leadingComments.length ) {
- leadingComments = currentProgram.leadingComments;
- var rLongname = new RegExp("@(name|alias|class|namespace)\\s+" + longname.replace(/\./g, '\\.'));
- for ( var i = 0; i < leadingComments.length; i++ ) {
- var raw = getRawComment(leadingComments[i]);
- if ( /^\/\*\*[\s\S]*\*\/$/.test(raw) && rLongname.test(raw) ) {
- comment = leadingComments[i];
- // console.log("\n\n**** alternative comment found for " + longname + " on program level\n\n", comment);
- break;
- }
- }
- }
-
- return comment;
- }
-}
-
-//--- comment related functions that are independent from the JSdoc version
-
-function getLeadingComment(node) {
- var comment = getLeadingCommentNode(node);
- return comment ? getRawComment(comment) : null;
-}
-
-function getLeadingDoclet(node, preprocess) {
- var comment = getLeadingComment(node)
- if ( comment && preprocess ) {
- comment = preprocessComment({comment:comment, lineno: node.loc.start.line });
- }
- return comment ? new Doclet(comment, {}) : null;
-}
-
-/**
- * Determines the raw comment string (source code form, including leading and trailing comment markers / *...* /) from a comment node.
- * Works for Esprima and Babylon based JSDoc versions.
- * @param commentNode
- * @returns
- */
-function getRawComment(commentNode) {
- // in esprima, there's a 'raw' property, in babylon, the 'raw' string has to be reconstructed from the 'value' by adding the markers
- return commentNode ? commentNode.raw ||Â '/*' + commentNode.value + '*/' : '';
-}
-
-function setRawComment(commentNode, newRawComment) {
- if ( commentNode.raw ) {
- commentNode.raw = newRawComment;
- }
- commentNode.value = newRawComment.slice(2, -2);
-}
-
-/**
- * Removes the mandatory comment markers and the optional but common asterisks at the beginning of each JSDoc comment line.
- *
- * The result is easier to parse/analyze.
- *
- * Implementation is a 1:1 copy from JSDoc's lib/jsdoc/doclet.js (closure function, not directly reusable)
- *
- * @param {string} docletSrc the source comment with or without block comment markers
- * @returns {string} the unwrapped content of the JSDoc comment
- *
- */
-function unwrap(docletSrc) {
- if (!docletSrc) { return ''; }
-
- // note: keep trailing whitespace for @examples
- // extra opening/closing stars are ignored
- // left margin is considered a star and a space
- // use the /m flag on regex to avoid having to guess what this platform's newline is
- docletSrc =
- docletSrc.replace(/^\/\*\*+/, '') // remove opening slash+stars
- .replace(/\**\*\/$/, "\\Z") // replace closing star slash with end-marker
- .replace(/^\s*(\* ?|\\Z)/gm, '') // remove left margin like: spaces+star or spaces+end-marker
- .replace(/\s*\\Z$/g, ''); // remove end-marker
-
- return docletSrc;
-}
-
-/**
- * Inverse operation of unwrap.
- *
- * The prefix for lines is fixed to be " * ", lines are separated with '\n', independent from the platform.
- */
-function wrap(lines) {
- if ( typeof lines === "string" ) {
- lines = lines.split(/\r\n?|\n/);
- }
- return "/**\n * " + lines.join('\n * ') + "\n */";
-}
-
-/**
- * Preprocesses a JSDoc comment string to ensure some UI5 standards.
- *
- * @param {event} e Event for the new comment
- * @returns {event}
- */
-function preprocessComment(e) {
-
- var src = e.comment;
-
- // add a default visibility
- if ( !/@private|@public|@protected|@sap-restricted|@ui5-restricted/.test(src) ) {
- src = unwrap(src);
- src = src + "\n@private";
- src = wrap(src);
- // console.log("added default visibility to '" + src + "'");
- }
-
- if ( /@class/.test(src) && /@static/.test(src) ) {
- warning("combination of @class and @static is no longer supported with jsdoc3, converting it to @namespace and @classdesc: (line " + e.lineno + ")");
- src = unwrap(src);
- src = src.replace(/@class/, "@classdesc").replace(/@static/, "@namespace");
- src = wrap(src);
- //console.log(src);
- }
-
- return src;
-
-}
-
-// ---- other functionality ---------------------------------------------------------------------------
-
-// HACK: override cli.exit() to avoid that JSDoc3 exits the VM
-if ( pluginConfig.noExit ) {
- info("disabling exit() call");
- require( path.join(global.env.dirname, 'cli') ).exit = function(retval) {
- info("cli.exit(): do nothing (ret val=" + retval + ")");
- };
-}
-
-
-// ---- exports ----------------------------------------------------------------------------------------
-
-exports.defineTags = function(dictionary) {
-
- /**
- * a special value that is not 'falsy' but results in an empty string when output
- * Used for the disclaimer and experimental tag
- */
- var EMPTY = {
- toString: function() { return ""; }
- };
-
- /**
- * A sapui5 specific tag to add a disclaimer to a symbol
- */
- dictionary.defineTag('disclaimer', {
- // value is optional
- onTagged: function(doclet, tag) {
- doclet.disclaimer = tag.value || EMPTY;
- }
- });
-
- /**
- * A sapui5 specific tag to mark a symbol as experimental.
- */
- dictionary.defineTag('experimental', {
- // value is optional
- onTagged: function(doclet, tag) {
- doclet.experimental = tag.value || EMPTY;
- }
- });
-
- /**
- * Re-introduce the deprecated 'final tag. JSDoc used it as a synonym for readonly, but we use it to mark classes as final
- */
- dictionary.defineTag('final', {
- mustNotHaveValue: true,
- onTagged: function(doclet, tag) {
- doclet.final_ = true;
- }
- });
-
- /**
- * Introduce a new kind of symbol: 'interface'
- * 'interface' is like 'class', but without a constructor.
- * Support for 'interface' might not be complete (only standard UI5 use cases tested)
- */
- dictionary.defineTag('interface', {
- //mustNotHaveValue: true,
- onTagged: function(doclet, tag) {
- // debug("setting kind of " + doclet.name + " to 'interface'");
- doclet.kind = 'interface';
- if ( tag.value ) {
- doclet.classdesc = tag.value;
- }
- }
- });
-
- /**
- * Classes can declare that they implement a set of interfaces
- */
- dictionary.defineTag('implements', {
- mustHaveValue: true,
- onTagged: function(doclet, tag) {
- // console.log("setting implements of " + doclet.name + " to 'interface'");
- if ( tag.value ) {
- doclet.implements = doclet.implements || [];
- tag.value.split(/\s*,\s*/g).forEach(function($) {
- if ( doclet.implements.indexOf($) < 0 ) {
- doclet.implements.push($);
- }
- });
- }
- }
- });
-
- /**
- * Set the visibility of a doclet to 'restricted'.
- */
- dictionary.defineTag('ui5-restricted', {
- onTagged: function(doclet, tag) {
- doclet.access = 'restricted';
- if ( tag.value ) {
- ui5data(doclet).stakeholders = tag.value.trim().split(/(?:\s*,\s*|\s+)/);
- }
- }
- });
- dictionary.defineSynonym('ui5-restricted', 'sap-restricted');
-
- /**
- * Mark a doclet as synthetic.
- *
- * Used for doclets that the autodoc generation creates. This helps the template
- * later to recognize such doclets and maybe filter them out.
- */
- dictionary.defineTag('synthetic', {
- mustNotHaveValue: true,
- onTagged: function(doclet, tag) {
- doclet.synthetic = true;
- }
- });
-
- /**
- * Mark a doclet that intentionally updates a previous doclet
- */
- dictionary.defineTag('ui5-updated-doclet', {
- mustNotHaveValue: true,
- onTagged: function(doclet, tag) {
- ui5data(doclet).updatedDoclet = true;
- }
- });
-
- /**
- * The @hideconstructor tag tells JSDoc that the generated documentation should not display the constructor for a class.
- * Note: this tag will be natively available in JSDoc >= 3.5.0
- */
- dictionary.defineTag('hideconstructor', {
- mustNotHaveValue: true,
- onTagged: function(doclet, tag) {
- doclet.hideconstructor = true;
- }
- });
-
- dictionary.defineTag('slot', {
- onTagged: function(doclet, tag) {
- doclet.slot = true;
- if (tag.value) {
- doclet.propertyName = tag.value;
- }
- }
- });
-
- dictionary.defineTag('appenddocs', {
- mustHaveValue: false,
- onTagged: function(doclet, tag) {
- doclet.appenddocs = tag.value;
- }
- });
-
- dictionary.defineTag('tagname', {
- mustHaveValue: true,
- onTagged: function(doclet, tag) {
- doclet.tagname = tag.value;
- }
- });
-
- dictionary.defineTag('allowPreventDefault', {
- mustHaveValue: false,
- onTagged: function(doclet, tag) {
- doclet.allowPreventDefault = true;
- }
- });
-
- dictionary.defineTag('native', {
- mustHaveValue: false,
- onTagged: function(doclet, tag) {
- doclet.native = true;
- }
- });
-
- dictionary.defineTag('noattribute', {
- mustHaveValue: false,
- onTagged: function(doclet, tag) {
- doclet.noattribute = true;
- }
- });
-
- dictionary.defineTag('formEvents', {
- mustHaveValue: false,
- onTagged: function(doclet, tag) {
- if (tag.value) {
- doclet.formEvents = doclet.formEvents || [];
- tag.value.split(" ").forEach(function($) {
- if ( doclet.formEvents.indexOf($) < 0 ) {
- doclet.formEvents.push($);
- }
- });
- }
- }
- });
-
- dictionary.defineTag('formProperty', {
- mustHaveValue: false,
- onTagged: function(doclet, tag) {
- doclet.formProperty = true;
- }
- });
-
- dictionary.defineTag('formAssociated', {
- mustHaveValue: false,
- onTagged: function(doclet, tag) {
- doclet.formAssociated = doclet.formAssociated || true;
- }
- });
-};
-
-exports.handlers = {
-
- /**
- * Before all files are parsed, determine the common path prefix of all filenames
- */
- parseBegin : function(e) {
-
- pathPrefixes = env.opts._.reduce(function(result, fileOrDir) {
- fileOrDir = path.resolve( path.normalize(fileOrDir) );
- if ( fs.statSync(fileOrDir).isDirectory() ) {
- // ensure a trailing path separator
- if ( fileOrDir.indexOf(path.sep, fileOrDir.length - path.sep.length) < 0 ) {
- fileOrDir += path.sep;
- }
- result.push(fileOrDir);
- }
- return result;
- }, []);
- resourceNamePrefixes = pluginConfig.resourceNamePrefixes || [];
- if ( !Array.isArray(resourceNamePrefixes) ) {
- resourceNamePrefixes = [resourceNamePrefixes];
- }
- resourceNamePrefixes.forEach(ensureEndingSlash);
- while ( resourceNamePrefixes.length < pathPrefixes.length ) {
- resourceNamePrefixes.push('');
- }
-
- debug("path prefixes " + JSON.stringify(pathPrefixes));
- debug("resource name prefixes " + JSON.stringify(resourceNamePrefixes));
- },
-
- /**
- * Log each file before it is parsed
- */
- fileBegin: function (e) {
- currentProgram = undefined;
- currentModule = {
- name: null,
- resource: getResourceName(e.filename),
- module: getModuleName(getResourceName(e.filename)),
- localNames: Object.create(null)
- };
- },
-
- fileComplete: function (e) {
- // debug("module info after parsing: ", currentModule);
- currentSource = undefined;
- currentProgram = undefined;
- currentModule = undefined;
- },
-
- jsdocCommentFound: function(e) {
- // console.log("jsdocCommentFound: " + e.comment);
- e.comment = preprocessComment(e);
- },
-
- symbolFound: function(e) {
- // console.log("symbolFound: " + e.comment);
- },
-
- newDoclet: function(e) {
-
- var _ui5data = ui5data(e.doclet);
-
- // remove code: this is a try to reduce the required heap size
- if ( e.doclet.meta ) {
- if ( e.doclet.meta.code ) {
- e.doclet.meta.code = {};
- }
- var filepath = (e.doclet.meta.path && e.doclet.meta.path !== 'null' ) ? path.join(e.doclet.meta.path, e.doclet.meta.filename) : e.doclet.meta.filename;
- e.doclet.meta.__shortpath = getRelativePath(filepath);
- _ui5data.resource = currentModule.resource;
- _ui5data.module = currentModule.name || currentModule.module;
- }
-
-
- // JSDoc 3 has a bug when it encounters a property in an object literal with an empty string as name
- // (e.g. { "" : something } will result in a doclet without longname
- if ( !e.doclet.longname ) {
- if ( e.doclet.memberof ) {
- e.doclet.longname = e.doclet.memberof + "." + e.doclet.name; // TODO '.' depends on scope?
- warning("found doclet without longname, derived longname: " + e.doclet.longname + " " + location(e.doclet));
- } else {
- error("found doclet without longname, could not derive longname " + location(e.doclet));
- }
- return;
- }
-
- // try to detect misused memberof
- if ( e.doclet.memberof && e.doclet.longname.indexOf(e.doclet.memberof) !== 0 ) {
- warning("potentially unsupported use of @name and @memberof " + location(e.doclet));
- //console.log(e.doclet);
- }
-
- if ( e.doclet.returns
- && e.doclet.returns.length > 0
- && e.doclet.returns[0]
- && e.doclet.returns[0].type
- && e.doclet.returns[0].type.names
- && e.doclet.returns[0].type.names[0] === 'this'
- && e.doclet.memberof ) {
- warning("fixing return type 'this' with " + e.doclet.memberof);
- e.doclet.returns[0].type.names[0] = e.doclet.memberof;
- }
- },
-
- beforeParse : function(e) {
- msgHeader("parsing " + getRelativePath(e.filename));
- currentSource = e.source;
- },
-
- parseComplete : function(e) {
-
- var doclets = e.doclets;
- var l = doclets.length,i,j,doclet;
- //var noprivate = !env.opts.private;
- var rAnonymous = /^new) or as a normal function.
- * It always returns an immutable Version instance.
- *
- * The parts of the version number (major, minor, patch, suffix) can be provided in several ways:
- * -
- *
- Version("1.2.3-SNAPSHOT") - as a dot-separated string. Any non-numerical char or a dot followed by a non-numerical char starts the suffix portion. - * Any missing major, minor or patch versions will be set to 0. - *
- Version(1,2,3,"-SNAPSHOT") - as individual parameters. Major, minor and patch must be integer numbers or empty, suffix must be a string not starting with digits. - *
- Version([1,2,3,"-SNAPSHOT"]) - as an array with the individual parts. The same type restrictions apply as before. - *
- Version(otherVersion) - as a Version instance (cast operation). Returns the given instance instead of creating a new one. - *
tag, whitespace is preserved
- *
- * Whitespace inside an element tag is not touched (although it could be normalized as well)
- * @param {string} content raw HTML file
- * @returns {string} HTML file with normalized whitespace
- */
-function normalizeWhitespace(content) {
- var compressed = '',
- preformatted = 0,
- p = 0, m, text;
-
- REGEXP_TAG.lastIndex = 0;
- while ( m = REGEXP_TAG.exec(content) ) {
- if ( m.index > p ) {
- text = content.slice(p, m.index);
- if ( preformatted ) {
- compressed += text;
- // console.log(' "' + text + '" (preformatted)');
- } else {
- text = text.replace(/\s+/g,' ');
- if ( text.trim() ) {
- compressed += text;
- }
- // console.log(' "' + text + '" (trimmed)');
- }
- }
-
- compressed += m[0];
- // console.log(' "' + m[0] + '" (tag)');
- p = m.index + m[0].length;
-
- if ( /^pre$/i.test(m[1]) ) {
- preformatted++;
- } else if ( /^\/pre$/i.test(m[1]) && preformatted ) {
- preformatted--;
- }
-
- }
-
- if ( content.length > p ) {
- text = content.slice(p, content.length);
- if ( preformatted ) {
- compressed += text;
- // console.log(' "' + text + '" (preformatted)');
- } else {
- text = text.replace(/\s+/g,' ');
- if ( text.trim() ) {
- compressed += text;
- }
- // console.log(' "' + text + '" (trimmed)');
- }
- }
-
- return compressed;
-}
-
-function makeLinkToSymbolFile(longname) {
- return Link.baseSymbols + __uniqueFilenames[longname] + conf.ext;
-}
-
-function simpleNameOf(longname) {
- longname = String(longname);
- var p = longname.lastIndexOf('.');
- return p < 0 ? longname : longname.slice(p + 1);
-}
-
-function bySimpleName(a,b) {
- if ( a === b ) {
- return 0;
- }
- var simpleA = simpleNameOf(a);
- var simpleB = simpleNameOf(b);
- if ( simpleA === simpleB ) {
- return a < b ? -1 : 1;
- } else {
- return simpleA < simpleB ? -1 : 1;
- }
-}
-
-/** Build output for displaying function parameters. */
-function makeSignature(params) {
- var r = ['('], desc;
- if ( params ) {
- for (var i = 0, p; p = params[i]; i++) {
- // ignore @param tags for 'virtual' params that are used to document members of config-like params
- // (e.g. like "@param param1.key ...")
- if (p.name && p.name.indexOf('.') == -1) {
- if (i > 0)
- r.push(', ');
-
- r.push('');
- r.push(p.name);
- r.push('');
- if ( p.optional )
- r.push('?');
- }
- }
- }
- r.push(')');
- return r.join('');
-}
-
-
-/*
- * regexp to recognize important places in the text
- *
- * Capturing groups of the RegExp:
- * group 1: begin of a pre block
- * group 2: end of a pre block
- * group 3: begin of a header/ul/ol/table, implicitly ends a paragraph
- * group 4: end of a header/ul/ol/table, implicitly starts a new paragraph
- * group 5: target portion of an inline @link tag
- * group 6: (optional) text portion of an inline link tag
- * group 7: an empty line which implicitly starts a new paragraph
- *
- * [------- block -------] [----------------------- some flow content -----------------------] [---- an inline {@link ...} tag ----] [---------- an empty line ---------] */
-var rFormatText = /(]*)?>)|(<\/pre>)|(<(?:h[\d+]|ul|ol|table)(?:\s[^>]*)?>)|(<\/(?:h[\d+]|ul|ol|table)>)|\{@link\s+([^}\s]+)(?:\s+([^\}]*))?\}|((?:\r\n|\r|\n)[ \t]*(?:\r\n|\r|\n))/gi;
-
-function formatText(text) {
-
- if ( !text ) {
- return '';
- }
-
- var inpre = false,
- paragraphs = 0;
-
- text = String(text).replace(rFormatText, function(match, pre, endpre, flow, endflow, linkTarget, linkText, emptyline) {
- if ( pre ) {
- inpre = true;
- return pre.replace(//gi, "").replace(//gi, "");
- } else if ( endpre ) {
- inpre = false;
- } else if ( flow ) {
- if ( !inpre ) {
- paragraphs++;
- return '' + match;
- }
- } else if ( endflow ) {
- if ( !inpre ) {
- paragraphs++;
- return match + '';
- }
- } else if ( emptyline ) {
- if ( !inpre ) {
- paragraphs++;
- return '
';
- }
- } else if ( linkTarget ) {
- if ( !inpre ) {
- // convert to a hyperlink
- var link = new Link().toSymbol(linkTarget);
- // if link tag contained a replacement text, use it
- if ( linkText && linkText.trim()) {
- link = link.withText(linkText.trim());
- }
- return link.toString();
- }
- }
- return match;
- });
-
- if ( paragraphs > 0 ) {
- text = '
' + text + '
';
- }
-
- // remove empty paragraphs
- text = text.replace(/\s*<\/p>/g, '');
-
- return text;
-}
-
-
-//console.log("#### samples");
-//console.log(formatText(summarize("This is a first\n\nparagraph with empty \n \n \nlines in it. This is the remainder.")));
-
-function childrenOfKind(data, kind) {
- /* old version based on TaffyDB (slow)
- var oChildren = symbolSet({kind: kind, memberof: data.longname === GLOBAL_LONGNAME ? {isUndefined: true} : data.longname}).filter(function() { return conf.filter(this); });
- return {
- own : oChildren.filter({inherited: {isUndefined:true}}).get().sort(makeSortby("!deprecated","static","name")),
- borrowed : groupByContributors(data, oChildren.filter({inherited: true}).get().sort(makeSortby("name")))
- } */
- var oResult = {
- own: [],
- borrowed: []
- };
- //console.log("calculating kind " + kind + " from " + data.longname);
- //console.log(data);
- var fnFilter;
- switch (kind) {
- case 'property':
- fnFilter = function($) {
- return $.kind === 'constant' || ($.kind === 'member' && !$.isEnum);
- }
- break;
- case 'event':
- fnFilter = function($) {
- return $.kind === 'event';
- }
- break;
- case 'method':
- fnFilter = function($) {
- return $.kind === 'function';
- }
- break;
- default:
- // default: none
- fnFilter = function($) { return false; };
- break;
- }
-
- if ( data.__ui5.members ) {
- data.__ui5.members.forEach(function($) {
- if ( fnFilter($) && conf.filter($) ) {
- oResult[$.inherited ? 'borrowed' : 'own'].push($);
- }
- });
- }
- oResult.own.sort(makeSortby("!deprecated","static","name"));
- oResult.borrowed = groupByContributors(data, oResult.borrowed);
-
- return oResult;
-}
-
-/**
- * Determines the set of contributors of the given borrowed members.
- * The contributors are sorted according to the inheritance hierarchy:
- * first the base class of symbol, then the base class of the base class etc.
- * Any contributors that can not be found in the hierarchy are appended
- * to the set.
- *
- * @param symbol of which these are the members
- * @param borrowedMembers set of borrowed members to determine the contributors for
- * @return sorted array of contributors
- */
-function groupByContributors(symbol, aBorrowedMembers) {
-
- var MAX_ORDER = 1000, // a sufficiently large number
- mContributors = {},
- aSortedContributors = [],
- i,order;
-
- aBorrowedMembers.forEach(function($) {
- $ = lookup($.inherits);
- if ($ && mContributors[$.memberof] == null) {
- mContributors[$.memberof] = { order : MAX_ORDER, items : [$] };
- } else {
- mContributors[$.memberof].items.push($);
- }
- });
-
- // order contributors according to their distance in the inheritance hierarchy
- order = 0;
- (function handleAugments(oSymbol) {
- var i,oTarget,aParentsToVisit;
- if ( oSymbol.augments ) {
- aParentsToVisit = [];
- // first assign an order
- for (i = 0; i < oSymbol.augments.length; i++) {
- if ( mContributors[oSymbol.augments[i]] != null && mContributors[oSymbol.augments[i]].order === MAX_ORDER ) {
- mContributors[oSymbol.augments[i]].order = ++order;
- aParentsToVisit.push(oSymbol.augments[i]);
- }
- }
- // only then dive into parents (breadth first search)
- for (i = 0; i < aParentsToVisit.length; i++) {
- oTarget = lookup(aParentsToVisit);
- if ( oTarget ) {
- handleAugments(oTarget);
- }
- }
- }
- }(symbol));
-
- // convert to an array and sort by order
- for (i in mContributors) {
- aSortedContributors.push(mContributors[i]);
- }
- aSortedContributors.sort(function (a,b) { return a.order - b.order; });
-
- return aSortedContributors;
-
-}
-
-function makeLinkList(aSymbols) {
- return aSymbols
- .sort(makeSortby("name"))
- .map(function($) { return new Link().toSymbol($.longname).withText($.name); })
- .join(", ");
-}
-
-// ---- type parsing ---------------------------------------------------------------------------------------------
-
-function TypeParser(defaultBuilder) {
-
- /* TODO
- * - function(this:) // type of this
- * - function(new:) // constructor
- */
- var rLexer = /\s*(Array\.?<|Object\.?<|Set\.?<|Promise\.?<|function\(|\{|:|\(|\||\}|>|\)|,|\[\]|\*|\?|!|\.\.\.)|\s*((?:module:)?\w+(?:[\/.#~]\w+)*)|./g;
-
- var input,
- builder,
- token,
- tokenStr;
-
- function next(expected) {
- if ( expected !== undefined && token !== expected ) {
- throw new SyntaxError("TypeParser: expected '" + expected + "', but found '" + tokenStr + "' (pos: " + rLexer.lastIndex + ", input='" + input + "')");
- }
- var match = rLexer.exec(input);
- if ( match ) {
- tokenStr = match[1] ||Â match[2];
- token = match[1] || (match[2] && 'symbol');
- if ( !token ) {
- throw new SyntaxError("TypeParser: unexpected '" + tokenStr + "' (pos: " + match.index + ", input='" + input + "')");
- }
- } else {
- tokenStr = token = null;
- }
- }
-
- function parseType() {
- var nullable = false;
- var mandatory = false;
- if ( token === '?' ) {
- next();
- nullable = true;
- } else if ( token === '!' ) {
- next();
- mandatory = true;
- }
-
- var type;
-
- if ( token === 'Array.<' ||Â token === 'Array<' ) {
- next();
- var componentType = parseType();
- next('>');
- type = builder.array(componentType);
- } else if ( token === 'Object.<' ||Â token === 'Object<' ) {
- next();
- var keyType;
- var valueType = parseType();
- if ( token === ',' ) {
- next();
- keyType = valueType;
- valueType = parseType();
- } else {
- keyType = builder.synthetic(builder.simpleType('string'));
- }
- next('>');
- type = builder.object(keyType, valueType);
- } else if ( token === 'Set.<' ||Â token === 'Set<' ) {
- next();
- var elementType = parseType();
- next('>');
- type = builder.set(elementType);
- } else if ( token === 'Promise.<' ||Â token === 'Promise<' ) {
- next();
- var elementType = parseType();
- next('>');
- type = builder.promise(elementType);
- } else if ( token === 'function(' ) {
- next();
- var thisType, constructorType, paramTypes = [], returnType;
- if ( tokenStr === 'this' ) {
- next();
- next(':');
- thisType = parseType();
- if ( token === ',' ) {
- next();
- }
- } else if ( tokenStr === 'new' ) {
- next();
- next(':');
- constructorType = parseType();
- if ( token === ',' ) {
- next();
- }
- }
- while ( token === 'symbol' || token === '...' ) {
- var repeatable = token === '...';
- if ( repeatable) {
- next();
- }
- var paramType = parseType();
- if ( repeatable ) {
- paramType = builder.repeatable(paramType);
- }
- paramTypes.push(paramType);
- if ( token === ',' ) {
- if ( repeatable ) {
- throw new SyntaxError("TypeParser: only the last parameter of a function can be repeatable (pos: " + rLexer.lastIndex + ", input='" + input + "')");
- }
- next();
- }
- }
- next(')');
- if ( token === ':' ) {
- next(':');
- returnType = parseType();
- }
- type = builder.function(paramTypes, returnType, thisType, constructorType);
- } else if ( token === '{' ) {
- var structure = Object.create(null);
- var propName,propType;
- next();
- do {
- propName = tokenStr;
- if ( !/^\w+$/.test(propName) ) {
- throw new SyntaxError("TypeParser: structure field must have a simple name (pos: " + rLexer.lastIndex + ", input='" + input + "', field:'" + propName + "')");
- }
- next('symbol');
- if ( token === ':' ) {
- next();
- propType = parseType();
- } else {
- propType = builder.synthetic(builder.simpleType('any'));
- }
- structure[propName] = propType;
- if ( token === '}' ) {
- break;
- }
- next(',');
- } while (token);
- next('}');
- type = builder.structure(structure);
- } else if ( token === '(' ) {
- next();
- type = parseTypes();
- next(')');
- } else if ( token === '*' ) {
- next();
- type = builder.simpleType('*');
- } else {
- type = builder.simpleType(tokenStr);
- next('symbol');
- while ( token === '[]' ) {
- next();
- type = builder.array(type);
- }
- }
- if ( nullable ) {
- type = builder.nullable(type);
- }
- if ( mandatory ) {
- type = builder.mandatory(type);
- }
- return type;
- }
-
- function parseTypes() {
- var types = [];
- do {
- types.push(parseType());
- if ( token !== '|' ) {
- break;
- }
- next();
- } while (token);
- return types.length === 1 ? types[0] : builder.union(types);
- }
-
- this.parse = function(typeStr, tempBuilder) {
- builder = tempBuilder ||Â defaultBuilder ||Â TypeParser.ASTBuilder;
- input = String(typeStr);
- rLexer.lastIndex = 0;
- next();
- var type = parseTypes();
- next(null);
- return type;
- }
-
-}
-
-TypeParser.ASTBuilder = {
- simpleType: function(type) {
- return {
- type: 'simpleType',
- name: type
- };
- },
- array: function(componentType) {
- return {
- type: 'array',
- component: componentType
- };
- },
- object: function(keyType, valueType) {
- return {
- type: 'object',
- key: keyType,
- value: valueType
- };
- },
- set: function(elementType) {
- return {
- type: 'set',
- element: elementType
- };
- },
- promise: function(fulfillmentType) {
- return {
- type: 'promise',
- fulfill: fulfillmentType
- };
- },
- function: function(paramTypes, returnType, thisType, constructorType) {
- return {
- type: 'function',
- params: paramTypes,
- return: returnType,
- this: thisType,
- constructor: constructorType
- };
- },
- structure: function(structure) {
- return {
- type: 'structure',
- fields: structure
- };
- },
- union: function(types) {
- return {
- type: 'union',
- types: types
- };
- },
- synthetic: function(type) {
- type.synthetic = true;
- return type;
- },
- nullable: function(type) {
- type.nullable = true;
- return type;
- },
- mandatory: function(type) {
- type.mandatory = true;
- return type;
- },
- repeatable: function(type) {
- type.repeatable = true;
- return type;
- }
-};
-
-TypeParser.LinkBuilder = function(style, encoded) {
- this.linkStyle = style;
- this.lt = encoded ? "<" : "<";
- this.gt = encoded ? ">" : ">";
-};
-TypeParser.LinkBuilder.prototype = {
- safe: function(type) {
- return type.needsParenthesis ? "(" + type.str + ")" : type.str;
- },
- simpleType: function(type) {
- if ( this.linkStyle === 'text' ) {
- return {
- str: type
- };
- }
- var link = new Link().toSymbol(type);
- if ( this.linkStyle === 'short' ) {
- link.withText(simpleNameOf(type)).withTooltip(type);
- }
- return {
- str: link.toString()
- };
- },
- array: function(componentType) {
- if ( componentType.needsParenthesis ) {
- return {
- str: "Array.<" + componentType.str + ">"
- };
- }
- return {
- str: componentType.str + "[]"
- };
- },
- object: function(keyType, valueType) {
- if ( keyType.synthetic ) {
- return {
- str: "Object." + this.lt + valueType.str + this.gt
- };
- }
- return {
- str: "Object." + this.lt + keyType.str + "," + valueType.str + this.gt
- };
- },
- set: function(elementType) {
- return {
- str: 'Set.' + this.lt + elementType.str + this.gt
- };
- },
- promise: function(fulfillmentType) {
- return {
- str: 'Promise.' + this.lt + fulfillmentType.str + this.gt
- };
- },
- function: function(paramTypes, returnType) {
- return {
- str: "function(" + paramTypes.map(function(type) {Â return type.str; }).join(',') + ")" + ( returnType ? " : " + this.safe(returnType) : "")
- };
- },
- structure: function(structure) {
- var r = [];
- for ( var fieldName in structure ) {
- if ( structure[fieldName].synthetic ) {
- r.push(fieldName);
- } else {
- r.push(fieldName + ":" + structure[fieldName].str);
- }
- }
- return {
- str: "{" + r.join(",") + "}"
- };
- },
- union: function(types) {
- return {
- needsParenthesis: true,
- str: types.map( this.safe.bind(this) ).join('|')
- };
- },
- synthetic: function(type) {
- type.synthetic = true;
- return type;
- },
- nullable: function(type) {
- type.str = "?" + type.str;
- return type;
- },
- mandatory: function(type) {
- type.str = "!" + type.str;
- return type;
- },
- repeatable: function(type) {
- type.str = "..." + type.str;
- return type;
- }
-};
-
-var typeParser = new TypeParser();
-var _SHORT_BUILDER = new TypeParser.LinkBuilder('short', true);
-var _LONG_BUILDER = new TypeParser.LinkBuilder('long', true);
-var _TEXT_BUILDER = new TypeParser.LinkBuilder('text', false);
-var _TEXT_BUILDER_ENCODED = new TypeParser.LinkBuilder('text', true);
-
-/*
-function testTypeParser(type) {
- console.log("Type: '" + type + "' gives AST");
- try {
- console.log(typeParser.parse(type));
- } catch (e) {
- console.log("**** throws: " + e);
- }
-}
-
-testTypeParser("Array.");
-testTypeParser("Array");
-testTypeParser("Object.");
-testTypeParser("Object");
-testTypeParser("function(...string):Set");
-testTypeParser("{a:int,b,c:float,d,e}");
-*/
-
-function _processTypeString(type, builder) {
- if ( type && Array.isArray(type.names) ) {
- type = type.names.join('|');
- }
- if ( type ) {
- try {
- return typeParser.parse( type, builder ).str;
- }Â catch (e) {
- error("failed to parse type string '" + type + "': " + e);
- return type;
- }
- }
-}
-
-function listTypes(type, encoded) {
- return _processTypeString(type, encoded ? _TEXT_BUILDER_ENCODED : _TEXT_BUILDER);
-}
-
-function linkTypes(type, short) {
- return _processTypeString(type, short ? _SHORT_BUILDER : _LONG_BUILDER );
-}
-
-function isArrayType(type) {
- if ( type && Array.isArray(type.names) ) {
- type = type.names.join('|');
- }
- if ( type ) {
- try {
- var ast = typeParser.parse( type, TypeParser.ASTBuilder );
- return ( ast.type === 'array' || (ast.type === 'union' && ast.types.some( function(subtype) { return subtype.type === 'array'; })) );
- }Â catch (e) {
- error("failed to parse type string '" + type + "': " + e);
- }
- }
- return false;
-}
-
-/**
- * Reduces the given text to a summary and removes all tags links etc. and escapes double quotes.
- * The result therefore should be suitable as content for an HTML tag attribute (e.g. title).
- * @param sText
- * @return summarized, plain attribute
- */
-function asPlainSummary(sText) {
- return sText ? summarize(sText).replace(/<.*?>/g, '').replace(/\{\@link\s*(.*?)\}/g, '$1').replace(/"/g,""") : '';
-}
-
-function getNSClass(item) {
- if (item.kind === 'interface') {
- return " interface";
- } else if (item.kind === 'namespace') {
- return " namespace";
- } else if (item.kind === 'typedef' ) {
- return " typedef";
- } else if (item.kind === 'member' && item.isEnum ) {
- return " enum";
- } else {
- return "";
- }
-}
-
-/*
- * regexp to recognize important places in the text
- *
- * Capturing groups of the RegExp:
- * group 1: begin of a pre block
- * group 2: end of a pre block
- * group 3: an empty line + surrounding whitespace (implicitly starts a new paragraph)
- * group 4: an isolated line feed + surrounding whitespace
- *
- * [------- block -------] [---- an empty line and surrounding whitespace ----] [---- new line or whitespaces ----] */
-var rNormalizeText = /(]*)?>)|(<\/pre>)|([ \t]*(?:\r\n|\r|\n)[ \t]*(?:\r\n|\r|\n)[ \t\r\n]*)|([ \t]*(?:\r\n|\r|\n)[ \t]*|[ \t]+)/gi;
-
-function normalizeWS(text) {
- if ( text == null ) {
- return text;
- }
-
- var inpre = false;
- return String(text).replace(rNormalizeText, function(match, pre, endpre, emptyline, ws) {
- if ( pre ) {
- inpre = true;
- return pre;
- } else if ( endpre ) {
- inpre = false;
- return endpre;
- } else if ( emptyline ) {
- return inpre ? emptyline : '\n\n';
- } else if ( ws ) {
- return inpre ? ws : ' ';
- }
- return match;
- });
-
-}
-
-//---- add on: API JSON -----------------------------------------------------------------
-
-function createAPIJSON(symbols, filename) {
-
- var api = {
- "$schema-ref": "http://schemas.sap.com/sapui5/designtime/api.json/1.0"
- }
-
- if ( templateConf.version ) {
- api.version = templateConf.version.replace(/-SNAPSHOT$/,"");
- }
- if ( templateConf.uilib ) {
- api.library = templateConf.uilib;
- }
-
- api.symbols = [];
- // sort only a copy(!) of the symbols, otherwise the SymbolSet lookup is broken
- symbols.slice(0).sort(sortByAlias).forEach(function(symbol) {
- if ( isFirstClassSymbol(symbol) && !symbol.synthetic ) { // dump a symbol if it as a class symbol and if it is not a synthetic symbol
- api.symbols.push(createAPIJSON4Symbol(symbol, false));
- }
- });
-
- postProcessAPIJSON(api);
-
- fs.mkPath(path.dirname(filename));
- fs.writeFileSync(filename, JSON.stringify(api), 'utf8');
- info(" apiJson saved as " + filename);
-}
-
-function createAPIJSON4Symbol(symbol, omitDefaults) {
-
- var obj = [];
- var curr = obj;
- var attribForKind = 'kind';
- var stack = [];
-
- function isEmpty(obj) {
- if ( !obj ) {
- return true;
- }
- for (var n in obj) {
- if ( obj.hasOwnProperty(n) ) {
- return false;
- }
- }
- return true;
- }
-
- function tag(name, value, omitEmpty) {
-
- if ( omitEmpty && !value ) {
- return;
- }
- if ( arguments.length === 1 ) { // opening tag
- stack.push(curr);
- stack.push(attribForKind);
- var obj = {};
- if ( Array.isArray(curr) ) {
- if ( attribForKind != null ) {
- obj[attribForKind] = name;
- }
- curr.push(obj);
- } else {
- curr[name] = obj;
- }
- curr = obj;
- attribForKind = null;
- return;
- }
- if ( value == null ) {
- curr[name] = true;
- } else {
- curr[name] = String(value);
- }
- }
-
- function attrib(name, value, defaultValue, raw) {
- var emptyTag = arguments.length === 1;
- if ( omitDefaults && arguments.length >= 3 && value === defaultValue ) {
- return;
- }
- curr[name] = emptyTag ? true : (raw ? value : String(value));
- }
-
- function closeTag(name, noIndent) {
- attribForKind = stack.pop();
- curr = stack.pop();
- }
-
- function collection(name, attribForKind) {
- stack.push(curr);
- stack.push(attribForKind);
- // TODO only supported if this.curr was an object check or fully implement
- curr = curr[name] = [];
- attribForKind = attribForKind || null;
- }
-
- function endCollection(name) {
- attribForKind = stack.pop();
- curr = stack.pop();
- }
-
- function tagWithSince(name, value) {
-
- if ( !value ) {
- return;
- }
-
- var info = extractSince(value);
-
- tag(name);
- if ( info.since ) {
- attrib("since", info.since);
- }
- if ( info.value ) {
- curr["text"] = normalizeWS(info.value);
- }
- closeTag(name, true);
-
- }
-
- function examples(symbol) {
- var j, example;
-
- if ( symbol.examples && symbol.examples.length ) {
- collection("examples");
- for ( j = 0; j < symbol.examples.length; j++) {
- example = makeExample(symbol.examples[j]);
- tag("example");
- if ( example.caption ) {
- attrib("caption", example.caption);
- }
- attrib("text", example.example);
- closeTag("example");
- }
- endCollection("examples");
- }
- }
-
- function referencesList(symbol) {
- if ( symbol.see && symbol.see.length ) {
- curr["references"] = symbol.see.slice();
- }
- }
-
- function visibility($) {
- if ( $.access === 'protected' ) {
- return "protected";
- } else if ( $.access === 'restricted' ) {
- return "restricted";
- } else if ( $.access === 'private' ) {
- return "private";
- } else {
- return "public";
- }
- }
-
- function exceptions(symbol) {
- var array = symbol.exceptions,
- j, exception;
-
- if ( Array.isArray(array) ) {
- array = array.filter( function (ex) {
- return (ex.type && listTypes(ex.type)) || (ex.description && ex.description.trim());
- });
- }
- if ( array == null ||Â array.length === 0 ) {
- return;
- }
-
- collection("throws");
- for (j = 0; j < array.length; j++) {
- exception = array[j];
- tag("exception");
- if ( exception.type !== undefined ) {
- attrib("type", listTypes(exception.type));
- }
- tag("description", normalizeWS(exception.description), true);
- closeTag("exception");
- }
- endCollection("throws");
- }
-
- function methodList(tagname, methods) {
- methods = methods && Object.keys(methods).map(function(key) { return methods[key]; });
- if ( methods != null && methods.length > 0 ) {
- curr[tagname] = methods;
- }
- }
-
- function interfaceList(tagname, interfaces) {
- if ( interfaces != null && interfaces.length > 0 ) {
- curr[tagname] = interfaces.slice();
- }
- }
-
- function hasSettings($, visited) {
-
- visited = visited || {};
-
- if ( $.augments && $.augments.length > 0 ) {
- var baseSymbol = $.augments[0];
- if ( visited.hasOwnProperty(baseSymbol) ) {
- error("detected cyclic inheritance when looking at " + $.longname + ": " + JSON.stringify(visited));
- return false;
- }
- visited[baseSymbol] = true;
- baseSymbol = lookup(baseSymbol) ;
- if ( hasSettings(baseSymbol, visited) ) {
- return true;
- }
- }
-
- var metadata = $.__ui5.metadata;
- return metadata &&
- (
- !isEmpty(metadata.specialSettings)
- || !isEmpty(metadata.properties)
- || !isEmpty(metadata.aggregations)
- || !isEmpty(metadata.associations)
- || !isEmpty(metadata.annotations)
- || !isEmpty(metadata.events)
- );
- }
-
- function writeMetadata($) {
-
- var metadata = $.__ui5.metadata;
- if ( !metadata ) {
- return;
- }
-
- var n;
-
- if ( metadata.specialSettings && Object.keys(metadata.specialSettings).length > 0 ) {
- collection("specialSettings");
- for ( n in metadata.specialSettings ) {
- var special = metadata.specialSettings[n];
- tag("specialSetting");
- attrib("name", special.name);
- attrib("type", special.type);
- attrib("visibility", special.visibility, 'public');
- if ( special.since ) {
- attrib("since", extractVersion(special.since));
- }
- tag("description", normalizeWS(special.doc), true);
- tagWithSince("experimental", special.experimental);
- tagWithSince("deprecated", special.deprecation);
- methodList("method", special.methods);
- closeTag("specialSetting");
- }
- endCollection("specialSettings");
- }
-
- if ( metadata.properties && Object.keys(metadata.properties).length > 0 ) {
- collection("properties");
- for ( n in metadata.properties ) {
- var prop = metadata.properties[n];
- tag("property");
- attrib("name", prop.name);
- attrib("type", prop.type, 'string');
- attrib("defaultValue", prop.defaultValue, null, /* raw = */true);
- attrib("group", prop.group, 'Misc');
- attrib("readonly", prop.readonly);
- attrib("visibility", prop.visibility, 'public');
- if ( prop.since ) {
- attrib("since", extractVersion(prop.since));
- }
- if ( prop.bindable ) {
- attrib("bindable", prop.bindable, false, /* raw = */true);
- }
- tag("description", normalizeWS(prop.doc), true);
- tagWithSince("experimental", prop.experimental);
- tagWithSince("deprecated", prop.deprecation);
- methodList("methods", prop.methods);
- closeTag("property");
- }
- endCollection("properties");
- }
-
- if ( metadata.defaultProperty ) {
- tag("defaultProperty", metadata.defaultProperty);
- }
-
- if ( metadata.dnd ) {
- curr.dnd = metadata.dnd;
- }
-
- if ( metadata.aggregations && Object.keys(metadata.aggregations).length > 0 ) {
- collection("aggregations");
- for ( n in metadata.aggregations ) {
- var aggr = metadata.aggregations[n];
- tag("aggregation");
- attrib("name", aggr.name);
- attrib("singularName", aggr.singularName); // TODO omit default?
- attrib("type", aggr.type, 'sap.ui.core.Control');
- if ( aggr.altTypes ) {
- curr.altTypes = aggr.altTypes.slice();
- }
- attrib("cardinality", aggr.cardinality, '0..n');
- attrib("visibility", aggr.visibility, 'public');
- if ( aggr.since ) {
- attrib("since", extractVersion(aggr.since));
- }
- if ( aggr.bindable ) {
- attrib("bindable", aggr.bindable, false, /* raw = */true);
- }
- if ( aggr.dnd ) {
- curr.dnd = aggr.dnd;
- }
- tag("description", normalizeWS(aggr.doc), true);
- tagWithSince("experimental", aggr.experimental);
- tagWithSince("deprecated", aggr.deprecation);
- methodList("methods", aggr.methods);
- closeTag("aggregation");
- }
- endCollection("aggregations");
- }
-
- if ( metadata.defaultAggregation ) {
- tag("defaultAggregation", metadata.defaultAggregation);
- }
-
- if ( metadata.associations && Object.keys(metadata.associations).length > 0 ) {
- collection("associations");
- for ( n in metadata.associations ) {
- var assoc = metadata.associations[n];
- tag("association");
- attrib("name", assoc.name);
- attrib("singularName", assoc.singularName); // TODO omit default?
- attrib("type", assoc.type, 'sap.ui.core.Control');
- attrib("cardinality", assoc.cardinality, '0..1');
- attrib("visibility", assoc.visibility, 'public');
- if ( assoc.since ) {
- attrib("since", extractVersion(assoc.since));
- }
- tag("description", normalizeWS(assoc.doc), true);
- tagWithSince("experimental", assoc.experimental);
- tagWithSince("deprecated", assoc.deprecation);
- methodList("methods", assoc.methods);
- closeTag("association");
- }
- endCollection("associations");
- }
-
- if ( metadata.events && Object.keys(metadata.events).length > 0 ) {
- collection("events");
- for ( n in metadata.events ) {
- var event = metadata.events[n];
- tag("event");
- attrib("name", event.name);
- attrib("visibility", event.visibility, 'public');
- if ( event.since ) {
- attrib("since", extractVersion(event.since));
- }
- tag("description", normalizeWS(event.doc), true);
- tagWithSince("experimental", event.experimental);
- tagWithSince("deprecated", event.deprecation);
- if ( event.parameters && Object.keys(event.parameters).length > 0 ) {
- tag("parameters");
- for ( var pn in event.parameters ) {
- if ( event.parameters.hasOwnProperty(pn) ) {
- var param = event.parameters[pn];
- tag(pn);
- attrib("name", pn);
- attrib("type", param.type);
- if ( param.since ) {
- attrib("since", extractVersion(param.since));
- }
- tag("description", normalizeWS(param.doc), true);
- tagWithSince("experimental", param.experimental);
- tagWithSince("deprecated", param.deprecation);
- closeTag(pn);
- }
- }
- closeTag("parameters");
- }
- methodList("methods", event.methods);
- closeTag("event");
- }
- endCollection("events");
- }
-
- if ( metadata.annotations && Object.keys(metadata.annotations).length > 0 ) {
- collection("annotations");
- for ( n in metadata.annotations ) {
- var anno = metadata.annotations[n];
- tag("annotation");
- attrib("name", anno.name);
- attrib("namespace", anno.namespace);
- if ( anno.target && anno.target.length > 0 ) {
- curr.target = anno.target.slice();
- }
- attrib("annotation", anno.annotation);
- attrib("defaultValue", anno.defaultValue);
- if ( anno.appliesTo && anno.appliesTo.length > 0 ) {
- curr.appliesTo = anno.appliesTo.slice();
- }
- if ( anno.since ) {
- attrib("since", extractVersion(anno.since));
- }
- tag("description", normalizeWS(anno.doc), true);
- tagWithSince("deprecated", anno.deprecation);
- closeTag("annotation");
- }
- endCollection("annotations");
- }
-
- if ( metadata.designtime ) { // don't write falsy values
- tag("designtime", metadata.designtime);
- }
-
- }
-
- function writeParameterProperties(param, params) {
- var prefix = param.name + '.',
- altPrefix = isArrayType(param.type) ? param.name + '[].' : null,
- count = 0,
- i;
-
- for ( i = 0; i < params.length; i++ ) {
-
- var name = params[i].name;
- if ( altPrefix && name.lastIndexOf(altPrefix, 0) === 0 ) { // startsWith
- name = name.slice(altPrefix.length);
- } else if ( name.lastIndexOf(prefix, 0) === 0 ) { // startsWith
- if ( altPrefix ) {
- warning("Nested @param tag in the context of an array type is used without []-suffix", name);
- }
- name = name.slice(prefix.length);
- } else {
- continue;
- }
-
- if ( name.indexOf('.') >= 0 ) {
- continue;
- }
-
- if ( count === 0 ) {
- tag("parameterProperties");
- }
-
- count++;
-
- tag(name);
- attrib("name", name);
- attrib("type", listTypes(params[i].type));
- attrib("optional", !!params[i].optional, false, /* raw = */true);
- if ( params[i].defaultvalue !== undefined ) {
- attrib("defaultValue", params[i].defaultvalue, undefined, /* raw = */true);
- }
- if ( params[i].since ) {
- attrib("since", extractVersion(params[i].since));
- }
-
- writeParameterProperties(params[i], params);
-
- tag("description", normalizeWS(params[i].description), true);
- tagWithSince("experimental", params[i].experimental);
- tagWithSince("deprecated", params[i].deprecated);
-
- closeTag(name);
- }
-
- if ( count > 0 ) {
- closeTag("parameterProperties");
- }
- }
-
- function methodSignature(member) {
- var returns = member.returns && member.returns.length && member.returns[0];
- var type = member.type || (returns && returns.type);
- type = listTypes(type);
- //if ( type && type !== 'void' ) {
- // attrib("type", type, 'void');
- //}
- if ( type && type !== 'void' || returns && returns.description ) {
- tag("returnValue");
- if ( type && type !== 'void' ) {
- attrib("type", type);
- }
- if ( returns && returns.description ) {
- attrib("description", normalizeWS(returns.description));
- }
- closeTag("returnValue");
- }
-
- if ( member.params && member.params.length > 0 ) {
- collection("parameters");
- for ( j = 0; j < member.params.length; j++) {
- param = member.params[j];
- if ( param.name.indexOf('.') >= 0 ) {
- continue;
- }
- tag("parameter");
- attrib("name", param.name);
- attrib("type", listTypes(param.type));
- attrib("optional", !!param.optional, false, /* raw = */true);
- if ( param.defaultvalue !== undefined ) {
- attrib("defaultValue", param.defaultvalue, undefined, /* raw = */true);
- }
- if ( param.since ) {
- attrib("since", extractVersion(param.since));
- }
- writeParameterProperties(param, member.params);
- tag("description", normalizeWS(param.description), true);
- tagWithSince("experimental", param.experimental);
- tagWithSince("deprecated", param.deprecated);
- closeTag("parameter");
- }
- endCollection("parameters");
- }
-
- exceptions(member);
-
- }
-
- function writeMethod(member, name) {
- tag("method");
- attrib("name", name || member.name);
- if ( member.__ui5.module && member.__ui5.module !== symbol.__ui5.module ) {
- attrib("module", member.__ui5.module);
- attrib("export", undefined, '', true);
- }
- attrib("visibility", visibility(member), 'public');
- if ( member.scope === 'static' ) {
- attrib("static", true, false, /* raw = */true);
- }
- if ( member.since ) {
- attrib("since", extractVersion(member.since));
- }
- if ( member.tags && member.tags.some(function(tag) { return tag.title === 'ui5-metamodel'; }) ) {
- attrib('ui5-metamodel', true, false, /* raw = */true);
- }
-
- methodSignature(member);
-
- tag("description", normalizeWS(member.description), true);
- tagWithSince("experimental", member.experimental);
- tagWithSince("deprecated", member.deprecated);
- examples(member);
- referencesList(member);
- //secTags(member);
- if ( member.__ui5.resource && member.__ui5.resource !== symbol.__ui5.resource ) {
- attrib("resource", member.__ui5.resource);
- }
- closeTag("method");
-
- }
-
- /*
- var rSplitSecTag = /^\s*\{([^\}]*)\}/;
-
- function secTags($) {
- if ( true ) {
- return;
- }
- var aTags = $.tags;
- if ( !aTags ) {
- return;
- }
- for (var iTag = 0; iTag < A_SECURITY_TAGS.length; iTag++ ) {
- var oTagDef = A_SECURITY_TAGS[iTag];
- for (var j = 0; j < aTags.length; j++ ) {
- if ( aTags[j].title.toLowerCase() === oTagDef.name.toLowerCase() ) {
- tag(oTagDef.name);
- var m = rSplitSecTag.exec(aTags[j].text);
- if ( m && m[1].trim() ) {
- var aParams = m[1].trim().split(/\s*\|\s* /); <-- remember to remove the space!
- for (var iParam = 0; iParam < aParams.length; iParam++ ) {
- tag(oTagDef.params[iParam], aParams[iParam]);
- }
- }
- var sDesc = aTags[j].description;
- tag("description", sDesc, true);
- closeTag(oTagDef.name);
- }
- }
- }
- }
- */
-
- var kind = (symbol.kind === 'member' && symbol.isEnum) ? "enum" : symbol.kind; // handle pseudo-kind 'enum'
-
- tag(kind);
-
- attrib("name", symbol.longname);
- attrib("basename", symbol.name);
- if (symbol.tagname) {
- attrib("tagname", symbol.tagname);
- }
- if (symbol.appenddocs) {
- attrib("appenddocs", symbol.appenddocs);
- }
- if ( symbol.__ui5.resource ) {
- attrib("resource", symbol.__ui5.resource);
- }
- if ( symbol.__ui5.module ) {
- attrib("module", symbol.__ui5.module);
- attrib("export", undefined, '', true);
- }
- if ( symbol.virtual ) {
- attrib("abstract", true, false, /* raw = */true);
- }
- if ( symbol.final_ ) {
- attrib("final", true, false, /* raw = */true);
- }
- if ( symbol.scope === 'static' ) {
- attrib("static", true, false, /* raw = */true);
- }
- attrib("visibility", visibility(symbol), 'public');
- if ( symbol.since ) {
- attrib("since", extractVersion(symbol.since));
- }
- if ( symbol.augments && symbol.augments.length ) {
- tag("extends", symbol.augments.sort().join(",")); // TODO what about multiple inheritance?
- }
- interfaceList("implements", symbol.implements);
- tag("description", normalizeWS(symbol.classdesc || (symbol.kind === 'class' ? '' : symbol.description)), true);
- tagWithSince("experimental", symbol.experimental);
- tagWithSince("deprecated", symbol.deprecated);
- if ( symbol.tags && symbol.tags.some(function(tag) { return tag.title === 'ui5-metamodel'; }) ) {
- attrib('ui5-metamodel', true, false, /* raw = */true);
- }
-
- var skipMembers = false;
- var i, j, member, param;
-
- if ( kind === 'class' ) {
-
- if ( symbol.__ui5.stereotype || hasSettings(symbol) ) {
-
- tag("ui5-metadata");
-
- if ( symbol.__ui5.stereotype ) {
- attrib("stereotype", symbol.__ui5.stereotype);
- }
-
- writeMetadata(symbol);
-
- closeTag("ui5-metadata");
- }
-
-
- // IF @hideconstructor tag is present we omit the whole constructor
- if ( !symbol.hideconstructor ) {
-
- tag("constructor");
- attrib("visibility", visibility(symbol));
- if (symbol.params && symbol.params.length > 0) {
- collection("parameters");
- for (j = 0; j < symbol.params.length; j++) {
- param = symbol.params[j];
- if (param.name.indexOf('.') >= 0) {
- continue;
- }
- tag("parameter");
- attrib("name", param.name);
- attrib("type", listTypes(param.type));
- attrib("optional", !!param.optional, false, /* raw = */true);
- if (param.defaultvalue !== undefined) {
- attrib("defaultValue", param.defaultvalue, undefined, /* raw = */true);
- }
- if (param.since) {
- attrib("since", extractVersion(param.since));
- }
-
- writeParameterProperties(param, symbol.params);
- tag("description", normalizeWS(param.description), true);
- tagWithSince("experimental", param.experimental);
- tagWithSince("deprecated", param.deprecated);
- closeTag("parameter");
- }
- endCollection("parameters");
- }
- exceptions(symbol);
- tag("description", normalizeWS(symbol.description), true);
- // tagWithSince("experimental", symbol.experimental); // TODO repeat from class?
- // tagWithSince("deprecated", symbol.deprecated); // TODO repeat from class?
- examples(symbol); // TODO here or for class?
- referencesList(symbol); // TODO here or for class?
- // secTags(symbol); // TODO repeat from class?
- closeTag("constructor");
-
- }
- } else if ( kind === 'namespace' ) {
- if ( symbol.__ui5.stereotype || symbol.__ui5.metadata ) {
- tag("ui5-metadata");
-
- if ( symbol.__ui5.stereotype ) {
- attrib("stereotype", symbol.__ui5.stereotype);
- }
-
- if ( symbol.__ui5.metadata && symbol.__ui5.metadata.basetype ) {
- attrib("basetype", symbol.__ui5.metadata.basetype);
- }
-
- if ( symbol.__ui5.metadata && symbol.__ui5.metadata.pattern ) {
- attrib("pattern", symbol.__ui5.metadata.pattern);
- }
-
- if ( symbol.__ui5.metadata && symbol.__ui5.metadata.range ) {
- attrib("range", symbol.__ui5.metadata.range, null, /* raw = */ true);
- }
-
- closeTag("ui5-metadata");
- }
- } else if ( kind === 'typedef' ) {
- // typedefs have their own property structure
- skipMembers = true;
- if ( symbol.properties && symbol.properties.length > 0 ) {
- collection("properties");
- symbol.properties.forEach(function(prop) {
- tag("property");
- attrib("name", prop.name);
- attrib("type", listTypes(prop.type));
- attrib("readonly", prop.readonly);
- attrib("visibility", visibility(symbol), 'public'); // properties inherit visibility of typedef
- tag("description", normalizeWS(prop.description), true);
- closeTag("property")
- });
- endCollection("properties");
- }
- } else if ( kind === 'function' ) {
- methodSignature(symbol);
- }
-
- if ( !skipMembers ) {
- var ownProperties = childrenOfKind(symbol, "property").own.sort(sortByAlias);
- if ( ownProperties.length > 0 ) {
- collection("properties");
- for ( i = 0; i < ownProperties.length; i++ ) {
- member = ownProperties[i];
- if (!member.slot) {
- tag("property");
- attrib("name", member.name);
- if ( member.__ui5.module && member.__ui5.module !== symbol.__ui5.module ) {
- attrib("module", member.__ui5.module);
- attrib("export", undefined, '', true);
- }
-
- if (member.noattribute) {
- attrib("noattribute", true);
- }
-
- if (member.readonly) {
- attrib("readonly", member.readonly, null);
- }
-
- attrib("visibility", visibility(member), 'public');
- if ( member.scope === 'static' ) {
- attrib("static", true, false, /* raw = */true);
- }
- if ( member.since ) {
- attrib("since", extractVersion(member.since));
- }
-
- if ( member.formEvents ) {
- attrib("formEvents", member.formEvents);
- }
-
- if ( member.formEvents ) {
- attrib("formProperty", member.formProperty);
- }
-
- var type = listTypes(member.type);
- attrib("type", type);
-
- if ((type === "object" || type === "Object") && visibility(member) === "public") {
- attrib("noattribute", true);
- }
-
- tag("description", normalizeWS(member.description), true);
- if (member.defaultvalue) {
- attrib("defaultValue", member.defaultvalue);
- }
-
- tagWithSince("experimental", member.experimental);
- tagWithSince("deprecated", member.deprecated);
- examples(member);
- referencesList(member);
- if ( member.__ui5.resource && member.__ui5.resource !== symbol.__ui5.resource ) {
- attrib("resource", member.__ui5.resource);
- }
- closeTag("property");
- }
- }
- endCollection("properties");
- collection("slots");
- for (i = 0; i < ownProperties.length; i++) {
- member = ownProperties[i];
- if (member.slot) {
- tag("property");
- attrib("name", member.name);
- if (member.propertyName) {
- attrib("propertyName", member.propertyName);
- }
- if (member.__ui5.module && member.__ui5.module !== symbol.__ui5.module) {
- attrib("module", member.__ui5.module);
- attrib("export", undefined, '', true);
- }
- attrib("visibility", visibility(member), 'public');
- if (member.scope === 'static') {
- attrib("static", true, false, /* raw = */true);
- }
- if (member.since) {
- attrib("since", extractVersion(member.since));
- }
- attrib("type", listTypes(member.type));
- tag("description", normalizeWS(member.description), true);
- if (member.defaultvalue) {
- attrib("defaultValue", member.defaultvalue);
- }
-
- tagWithSince("experimental", member.experimental);
- tagWithSince("deprecated", member.deprecated);
- examples(member);
- referencesList(member);
- if (member.__ui5.resource && member.__ui5.resource !== symbol.__ui5.resource) {
- attrib("resource", member.__ui5.resource);
- }
- closeTag("property");
- }
- }
- endCollection("slots");
- }
-
- var ownEvents = childrenOfKind(symbol, 'event').own.sort(sortByAlias);
- if ( ownEvents.length > 0 ) {
- collection("events");
- for (i = 0; i < ownEvents.length; i++ ) {
- member = ownEvents[i];
- tag("event");
- attrib("name", member.name);
- if ( member.__ui5.module && member.__ui5.module !== symbol.__ui5.module ) {
- attrib("module", member.__ui5.module);
- attrib("export", undefined, '', true);
- }
- if (member.allowPreventDefault) {
- attrib("allowPreventDefault", true);
- }
- if (member.native) {
- attrib("native", true);
- }
- attrib("visibility", visibility(member), 'public');
- if ( member.scope === 'static' ) {
- attrib("static", true, false, /* raw = */true);
- }
- if ( member.since ) {
- attrib("since", extractVersion(member.since));
- }
-
- if ( member.params && member.params.length > 0 ) {
- collection("parameters");
- for (j = 0; j < member.params.length; j++) {
- param = member.params[j];
- if ( param.name.indexOf('.') >= 0 ) {
- continue;
- }
-
- tag("parameter");
- attrib("name", param.name);
- attrib("type", listTypes(param.type));
- if ( param.since ) {
- attrib("since", extractVersion(param.since));
- }
- writeParameterProperties(param, member.params);
- tag("description", normalizeWS(param.description), true);
- tagWithSince("experimental", param.experimental);
- tagWithSince("deprecated", param.deprecated);
- closeTag("parameter");
- }
- endCollection("parameters");
- }
- tag("description", normalizeWS(member.description), true);
- tagWithSince("deprecated", member.deprecated);
- tagWithSince("experimental", member.experimental);
- examples(member);
- referencesList(member);
- //secTags(member);
- if ( member.__ui5.resource && member.__ui5.resource !== symbol.__ui5.resource ) {
- attrib("resource", member.__ui5.resource);
- }
- closeTag("event");
- }
- endCollection("events");
- }
-
- var ownMethods = childrenOfKind(symbol, 'method').own.sort(sortByAlias);
- if ( ownMethods.length > 0 ) {
- collection("methods");
- for ( i = 0; i < ownMethods.length; i++ ) {
- member = ownMethods[i];
- writeMethod(member);
- if ( member.__ui5.members ) {
- // HACK: export nested static functions as siblings of the current function
- // A correct representation has to be discussed with the SDK / WebIDE
- member.__ui5.members.forEach(function($) {
- if ( $.kind === 'function' && $.scope === 'static'
- && conf.filter($) && !$.inherited ) {
- console.error("exporting nested function '" + member.name + "." + $.name + "'");
- writeMethod($, member.name + "." + $.name);
- }
- });
- }
- }
- endCollection("methods");
- }
-
- // if ( roots && symbol.__ui5.children && symbol.__ui5.children.length ) {
- // collection("children", "kind");
- // symbol.__ui5.children.forEach(writeSymbol);
- // endCollection("children");
- // }
- }
-
- closeTag(kind);
-
- return obj[0];
-}
-
-function postProcessAPIJSON(api) {
- var modules = {};
- var symbols = api.symbols;
- var i,j,n,symbol,defaultExport;
-
- // collect modules and the symbols that refer to them
- for ( i = 0; i < symbols.length; i++) {
- symbol = symbols[i];
- if ( symbol.module ) {
- modules[symbol.module] = modules[symbol.module] ||Â [];
- modules[symbol.module].push({
- name: symbol.name,
- symbol: symbol
- });
- }
- if ( symbol.properties ) {
- for ( j = 0; j < symbol.properties.length; j++ ) {
- if ( symbol.properties[j].static && symbol.properties[j].module ) {
- modules[symbol.properties[j].module] = modules[symbol.properties[j].module] ||Â [];
- modules[symbol.properties[j].module].push({
- name: symbol.name + "." + symbol.properties[j].name,
- symbol: symbol.properties[j]
- });
- }
- }
- }
- if ( symbol.methods ) {
- for ( j = 0; j < symbol.methods.length; j++ ) {
- if ( symbol.methods[j].static && symbol.methods[j].module ) {
- modules[symbol.methods[j].module] = modules[symbol.methods[j].module] ||Â [];
- modules[symbol.methods[j].module].push({
- name: symbol.name + "." + symbol.methods[j].name,
- symbol: symbol.methods[j]
- });
- }
- }
- }
- }
-
- for ( n in modules ) {
-
- symbols = modules[n].sort(function(a,b) {
- if ( a.name === b.name ) {
- return 0;
- }
- return a.name < b.name ? -1 : 1;
- });
-
- // info('resolving exports of ' + n + ": " + symbols.map(function(symbol) { return symbol.name; } ));
- var moduleNamePath = "module:" + n;
- if ( /^jquery\.sap\./.test(n) ) {
- // the jquery.sap.* modules all export 'jQuery'.
- // any API from those modules is reachable via 'jQuery.*'
- defaultExport = 'jQuery';
- } else {
- // library.js modules export the library namespace; for all other modules, the assumed default export
- // is identical to the name of the module (converted to a 'dot' name)
- defaultExport = n.replace(/\/library$/, "").replace(/\//g, ".");
- }
-
- symbols.forEach(function(symbol) {
- // console.log("check ", symbol.name, "against", defaultExport, "and", moduleNamePath);
- if ( symbol.name === moduleNamePath ) {
- // symbol name is the same as the module namepath -> symbol is the default export
- symbol.symbol.export = "";
- } else if ( symbol.name.lastIndexOf(moduleNamePath + ".", 0) === 0 ) {
- // symbol name starts with the module namepath and a dot -> symbol is a named export (static)
- symbol.symbol.export = symbol.name.slice(moduleNamePath.length + 1);
- } else if ( symbol.name === defaultExport ) {
- // default export equals the symbol name
- symbol.symbol.export = "";
- //console.log(" (default):" + defaultExport);
- } else if (Â symbol.name.lastIndexOf(defaultExport + ".", 0) === 0 ) {
- // default export is a prefix of the symbol name
- symbol.symbol.export = symbol.name.slice(defaultExport.length + 1);
- //console.log(" " + symbol.name.slice(defaultExport.length + 1) + ":" + symbol.name);
- } else {
-
- // default export is not a prefix of the symbol name -> no way to access it in AMD
- symbol.symbol.export = undefined;
- if ( symbol.symbol.kind !== "namespace"
- || (symbol.symbol.properties &&Â symbol.symbol.properties.length > 0)
- || (symbol.symbol.methods &&Â symbol.symbol.methods.length > 0) ) {
- error("could not identify export name of '" + symbol.name + "', contained in module '" + n + "'");
- } else {
- debug("could not identify export name of namespace '" + symbol.name + "', contained in module '" + n + "'");
- }
- }
- });
-
- }
-}
-
-//---- add on: API XML -----------------------------------------------------------------
-
-function createAPIXML(symbols, filename, options) {
-
- options = options || {};
- var roots = options.roots || null;
- var legacyContent = !!options.legacyContent;
- var omitDefaults = !!options.omitDefaults;
- var addRedundancy = !!options.resolveInheritance;
-
- var indent = 0;
- var output = [];
- var sIndent = "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
- var tags = [];
- var ENUM = legacyContent ? "namespace" : "enum" ;
- var BASETYPE = legacyContent ? "baseType" : "extends";
- var PROPERTY = legacyContent ? "parameter" : "property";
- var unclosedStartTag = false;
-
- function getAPIJSON(name) {
-
- var symbol = lookup(name);
- if ( symbol && !symbol.synthetic ) {
- return createAPIJSON4Symbol(symbol, false);
- }
- if ( addRedundancy && externalSymbols[name] ) {
- debug(" using " + name + " from external dependency");
- return externalSymbols[name];
- }
- return symbol;
- }
-
- function encode(s) {
- return s ? s.replace(/&/g, "&").replace(/ 0 )
- output.push(sIndent.slice(0,indent));
- if ( arguments.length ) {
- for (var i = 0; i < arguments.length; i++)
- output.push(arguments[i]);
- }
- output.push("\n");
- }
-
- function rootTag(name) {
- tags = [];
- unclosedStartTag = false;
- tag(name);
- }
-
- function closeRootTag(name) {
- closeTag(name);
- }
-
- function namespace(alias, namespace) {
- attrib(alias, namespace);
- }
-
- function tag(name, value, omitEmpty) {
-
- if ( omitEmpty && !value ) {
- return;
- }
- if ( unclosedStartTag ) {
- unclosedStartTag = false;
- write('>\n');
- }
- if ( arguments.length === 1 ) { // opening tag
- if ( indent > 0 ) {
- output.push(sIndent.slice(0,indent));
- }
- write("<", name);
- unclosedStartTag = true;
- if ( legacyContent ) {
- unclosedStartTag = false;
- write(">\n");
- }
- tags.push(name);
- indent++;
- return;
- }
- if ( value == null ) {
- writeln("<", name, "/>");
- } else {
- writeln("<", name, ">", encode(String(value)), "");
- }
- }
-
- function attrib(name, value, defaultValue) {
- var emptyTag = arguments.length === 1;
- if ( omitDefaults && arguments.length === 3 && value === defaultValue ) {
- return;
- }
-
- if ( !legacyContent ) {
- write(" " + name + "=\"");
- write(emptyTag ? "true" : encode(String(value)).replace(/"/g, """));
- write("\"");
- } else {
- if ( emptyTag ) {
- writeln("<", name, "/>");
- } else {
- writeln("<", name, ">", encode(String(value)), "");
- }
- }
- }
-
- function closeTag(name, noIndent) {
-
- indent--;
- var top = tags.pop();
- if ( top != name ) {
- // ERROR?
- }
-
- if ( unclosedStartTag ) {
- unclosedStartTag = false;
- write("/>\n");
- } else if ( noIndent ) {
- write("\n");
- } else {
- writeln("");
- }
- }
-
- function textContent(text) {
- if ( unclosedStartTag ) {
- unclosedStartTag = false;
- write('>');
- }
- write(encode(text));
- }
-
- function tagWithSince(tagName, prop) {
- if ( prop ) {
- tag(tagName);
- if ( prop.since ) {
- attrib("since", prop.since);
- }
- if ( prop.text && prop.text.trim() ) {
- textContent(prop.text);
- }
- closeTag(tagName, true);
- }
- }
-
- function getAsString() {
- return output.join("");
- }
-
- function writeMetadata(symbolAPI, inherited) {
-
- var ui5Metadata = symbolAPI["ui5-metadata"];
- if ( !ui5Metadata ) {
- return;
- }
-
- if ( addRedundancy && symbolAPI["extends"] ) {
- var baseSymbolAPI = getAPIJSON(symbolAPI["extends"]);
- if ( baseSymbolAPI ) {
- writeMetadata(baseSymbolAPI, true);
- }
- }
-
- if ( ui5Metadata.specialSettings ) {
- ui5Metadata.specialSettings.forEach(function(special) {
- tag("specialSetting");
- attrib("name", special.name);
- attrib("type", special.type);
- attrib("visibility", special.visibility, 'public');
- if ( special.since ) {
- attrib("since", special.since);
- }
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", special.description, true);
- tagWithSince("experimental", special.experimental);
- tagWithSince("deprecated", special.deprecated);
- tag("methods", special.methods);
- closeTag("specialSetting");
- });
- }
-
- if ( ui5Metadata.properties ) {
- ui5Metadata.properties.forEach(function(prop) {
- tag("property");
- attrib("name", prop.name);
- attrib("type", prop.type, 'string');
- if ( prop.defaultValue !== null ) {
- attrib("defaultValue", prop.defaultValue, null);
- }
- attrib("readonly", prop.readonly);
- attrib("visibility", prop.visibility, 'public');
- if ( prop.since ) {
- attrib("since", prop.since);
- }
- if ( prop.bindable ) {
- attrib("bindable", prop.bindable);
- }
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", prop.description, true);
- tagWithSince("experimental", prop.experimental);
- tagWithSince("deprecated", prop.deprecated);
- tag("methods", prop.methods);
- closeTag("property");
- });
- }
-
- if ( ui5Metadata.defaultProperty ) {
- tag("defaultProperty", ui5Metadata.defaultProperty);
- }
-
- if ( ui5Metadata.aggregations ) {
- ui5Metadata.aggregations.forEach(function(aggr) {
- tag("aggregation");
- attrib("name", aggr.name);
- attrib("singularName", aggr.singularName); // TODO omit default?
- attrib("type", aggr.type, 'sap.ui.core.Control');
- if ( aggr.altTypes ) {
- attrib("altTypes", aggr.altTypes.join(","));
- }
- attrib("cardinality", aggr.cardinality, '0..n');
- attrib("visibility", aggr.visibility, 'public');
- if ( aggr.since ) {
- attrib("since", aggr.since);
- }
- if ( aggr.bindable ) {
- attrib("bindable", aggr.bindable);
- }
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", aggr.description, true);
- tagWithSince("experimental", aggr.experimental);
- tagWithSince("deprecated", aggr.deprecated);
- tag("methods", aggr.methods);
- closeTag("aggregation");
- });
- }
-
- if ( ui5Metadata.defaultAggregation ) {
- tag("defaultAggregation", ui5Metadata.defaultAggregation);
- }
-
- if ( ui5Metadata.associations ) {
- ui5Metadata.associations.forEach(function(assoc) {
- tag("association");
- attrib("name", assoc.name);
- attrib("singularName", assoc.singularName); // TODO omit default?
- attrib("type", assoc.type, 'sap.ui.core.Control');
- attrib("cardinality", assoc.cardinality, '0..1');
- attrib("visibility", assoc.visibility, 'public');
- if ( assoc.since ) {
- attrib("since", assoc.since);
- }
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", assoc.description, true);
- tagWithSince("experimental", assoc.experimental);
- tagWithSince("deprecated", assoc.deprecated);
- tag("methods", assoc.methods);
- closeTag("association");
- });
- }
-
- if ( ui5Metadata.events ) {
- ui5Metadata.events.forEach(function(event) {
- tag("event");
- attrib("name", event.name);
- attrib("visibility", event.visibility, 'public');
- if ( event.since ) {
- attrib("since", event.since);
- }
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", event.description, true);
- tagWithSince("experimental", event.experimental);
- tagWithSince("deprecated", event.deprecated);
- if ( event.parameters ) {
- tag("parameters");
- for ( var pn in event.parameters ) {
- if ( event.parameters.hasOwnProperty(pn) ) {
- var param = event.parameters[pn];
-
- tag("parameter");
- attrib("name", param.name);
- attrib("type", param.type);
- if ( param.since ) {
- attrib("since", param.since);
- }
- tag("description", param.description, true);
- tagWithSince("experimental", param.experimental);
- tagWithSince("deprecated", param.deprecated);
- closeTag("parameter");
- }
- }
- closeTag("parameters");
- }
- tag("methods", event.methods, true);
- closeTag("event");
- });
- }
-
- if ( ui5Metadata.annotations ) {
- ui5Metadata.annotations.forEach(function(anno) {
- tag("annotation");
- attrib("name", anno.name);
- attrib("namespace", anno.namespace); // TODO omit default?
- attrib("target", anno.target);
- attrib("annotation", anno.annotation);
- attrib("appliesTo", anno.appliesTo);
- if ( anno.since ) {
- attrib("since", anno.since);
- }
- tag("description", anno.description, true);
- tagWithSince("deprecated", anno.deprecated);
- closeTag("annotation");
- });
- }
-
- }
-
- function writeParameterPropertiesForMSettings(symbolAPI, inherited) {
-
- var ui5Metadata = symbolAPI["ui5-metadata"];
- if ( !ui5Metadata ) {
- return;
- }
-
- if ( symbolAPI["extends"] ) {
- var baseSymbolAPI = getAPIJSON(symbolAPI["extends"]);
- writeParameterPropertiesForMSettings(baseSymbolAPI, true);
- }
-
- if ( ui5Metadata.specialSettings ) {
- ui5Metadata.specialSettings.forEach(function(special) {
- if ( special.visibility !== 'hidden' ) {
- tag("property");
- attrib("name", special.name);
- attrib("type", special.type);
- attrib("optional");
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", special.description, true);
- closeTag("property");
- }
- });
- }
-
- if ( ui5Metadata.properties ) {
- ui5Metadata.properties.forEach(function(prop) {
- tag("property");
- attrib("name", prop.name);
- attrib("type", prop.type);
- attrib("group", prop.group, 'Misc');
- if ( prop.defaultValue !== null ) {
- attrib("defaultValue", typeof prop.defaultValue === 'string' ? "\"" + prop.defaultValue + "\"" : prop.defaultValue);
- }
- attrib("readonly", prop.readonly);
- attrib("optional");
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", prop.description, true);
- closeTag("property");
- });
- }
-
- if ( ui5Metadata.aggregations ) {
- ui5Metadata.aggregations.forEach(function(aggr) {
- if ( aggr.visibility !== "hidden" ) {
- tag("property");
- attrib("name", aggr.name);
- attrib("type", aggr.type + (aggr.cardinality === '0..1' ? "" : "[]"));
- if ( aggr.altTypes ) {
- attrib("altTypes", aggr.altTypes.join(","));
- }
- attrib("optional");
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", aggr.description, true);
- closeTag("property");
- }
- });
- }
-
- if ( ui5Metadata.associations ) {
- ui5Metadata.associations.forEach(function(assoc) {
- if ( assoc.visibility !== "hidden" ) {
- tag("property");
- attrib("name", assoc.name);
- attrib("type", "(" + assoc.type + "|" + "string)" + (assoc.cardinality === '0..1' ? "" : "[]"));
- attrib("optional");
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", assoc.description, true);
- closeTag("property");
- }
- });
- }
-
- if ( ui5Metadata.events ) {
- ui5Metadata.events.forEach(function(event) {
- tag("property");
- attrib("name", event.name);
- attrib("type", "function|array");
- attrib("optional");
- if ( inherited ) {
- attrib("origin", symbolAPI.name);
- }
- tag("description", event.description, true);
- closeTag("property");
- });
- }
-
- }
-
- function writeParameterProperties(param, paramName) {
- var props = param.parameterProperties,
- prefix = paramName + '.',
- count = 0;
-
- if ( props ) {
- for (var n in props ) {
- if ( props.hasOwnProperty(n) ) {
-
- param = props[n];
-
- if ( !legacyContent && count === 0 ) {
- tag("parameterProperties");
- }
-
- count++;
-
- tag(PROPERTY);
- attrib("name", legacyContent ? prefix + n : n);
- attrib("type", param.type);
- if ( param.since ) {
- attrib("since", param.since);
- }
- if ( param.optional ) {
- attrib("optional", param.optional);
- }
-
- if ( !legacyContent ) {
- writeParameterProperties(param, prefix + n);
- }
-
- tag("description", param.description, true);
- tagWithSince("experimental", param.experimental);
- tagWithSince("deprecated", param.deprecated);
-
- closeTag(PROPERTY);
-
- if ( legacyContent ) {
- writeParameterProperties(param, prefix + n);
- }
- }
- }
- }
-
- if ( !legacyContent && count > 0 ) {
- closeTag("parameterProperties");
- }
- }
-
- /*
- var rSplitSecTag = /^\s*\{([^\}]*)\}/;
-
- function secTags($) {
- if ( !legacyContent ) {
- return;
- }
- var aTags = $.tags;
- if ( !aTags ) {
- return;
- }
- for (var iTag = 0; iTag < A_SECURITY_TAGS.length; iTag++ ) {
- var oTagDef = A_SECURITY_TAGS[iTag];
- for (var j = 0; j < aTags.length; j++ ) {
- if ( aTags[j].title.toLowerCase() === oTagDef.name.toLowerCase() ) {
- tag(oTagDef.name);
- var m = rSplitSecTag.exec(aTags[j].text);
- if ( m && m[1].trim() ) {
- var aParams = m[1].trim().split(/\s*\|\s* /); <-- remove the blank!
- for (var iParam = 0; iParam < aParams.length; iParam++ ) {
- tag(oTagDef.params[iParam], aParams[iParam]);
- }
- }
- var sDesc = aTags[j].description;
- tag("description", sDesc, true);
- closeTag(oTagDef.name);
- }
- }
- }
- }
- */
-
- function writeSymbol(symbol) {
-
- var kind;
-
- if ( isFirstClassSymbol(symbol) && (roots || !symbol.synthetic) ) { // dump a symbol if it as a class symbol and if either hierarchies are dumped or if it is not a synthetic symbol
-
- // for the hierarchy we use only the local information
- var symbolAPI = createAPIJSON4Symbol(symbol);
-
- kind = symbolAPI.kind === 'enum' ? ENUM : symbolAPI.kind;
-
- tag(kind);
-
- attrib("name", symbolAPI.name);
- attrib("basename", symbolAPI.basename);
-// if ( symbolAPI["resource"] ) {
-// attrib("resource");
-// }
- if ( symbolAPI["module"] ) {
- attrib("module", symbolAPI["module"]);
- }
- if ( symbolAPI["abstract"] ) {
- attrib("abstract");
- }
- if ( symbolAPI["final"] ) {
- attrib("final");
- }
- if ( symbolAPI["static"] ) {
- attrib("static");
- }
- attrib("visibility", symbolAPI.visibility, 'public');
- if ( symbolAPI.since ) {
- attrib("since", symbolAPI.since);
- }
- if ( symbolAPI["extends"] ) {
- tag(BASETYPE, symbolAPI["extends"]); // TODO what about multiple inheritance?
- }
- tag("description", symbolAPI.description, true);
- tagWithSince("experimental", symbolAPI.experimental);
- tagWithSince("deprecated", symbolAPI.deprecated);
-
- if ( kind === 'class' ) {
-
- var hasSettings = symbolAPI["ui5-metadata"];
-
- if ( !legacyContent && symbolAPI["ui5-metadata"] ) {
-
- tag("ui5-metadata");
-
- if ( symbolAPI["ui5-metadata"].stereotype ) {
- attrib("stereotype", symbolAPI["ui5-metadata"].stereotype);
- }
-
- writeMetadata(symbolAPI);
-
- closeTag("ui5-metadata");
-
- }
-
- tag("constructor");
- if ( legacyContent ) {
- attrib("name", symbolAPI.basename);
- }
- attrib("visibility", symbolAPI.visibility, 'public');
- if ( symbolAPI.constructor.parameters ) {
- symbolAPI.constructor.parameters.forEach(function(param, j) {
-
- tag("parameter");
- attrib("name", param.name);
- attrib("type", param.type);
- attrib("optional", param.optional, false);
- if ( param.defaultValue !== undefined ) {
- attrib("defaultValue", param.defaultValue);
- }
- if ( param.since ) {
- attrib("since", param.since);
- }
-
- if ( !legacyContent ) {
- if ( hasSettings && j == 1 && /setting/i.test(param.name) && /object/i.test(param.type) ) {
- if ( addRedundancy ) {
- tag("parameterProperties");
- writeParameterPropertiesForMSettings(symbolAPI);
- closeTag("parameterProperties");
- }
- } else {
- writeParameterProperties(param, param.name);
- }
- }
- tag("description", param.description, true);
- tagWithSince("experimental", param.experimental);
- tagWithSince("deprecated", param.deprecated);
- closeTag("parameter");
- if ( legacyContent ) {
- writeParameterProperties(param, param.name);
- }
- });
- }
-
- tag("description", getConstructorDescription(symbol), true);
- // tagWithSince("experimental", symbol.experimental); // TODO repeat from class?
- // tagWithSince("deprecated", symbol.deprecated); // TODO repeat from class?
- // secTags(symbol); // TODO repeat from class?
- closeTag("constructor");
- }
-
- /* TODO MIGRATE or remove, if not needed
- var ownSubspaces = ( symbol.__ui5.children || [] ).filter(function($) { return $.kind === 'namespace' }).sort(sortByAlias);
- for (var i=0; i");
- rootTag("api");
- if ( !legacyContent ) {
- namespace("xmlns", "http://www.sap.com/sap.ui.library.api.xsd");
- attrib("_version", "1.0.0");
- if ( templateConf.version ) {
- attrib("version", templateConf.version.replace(/-SNAPSHOT$/,""));
- }
- if ( templateConf.uilib ) {
- attrib("library", templateConf.uilib);
- }
- }
-
- if ( roots ) {
- roots.forEach(writeSymbol);
- } else {
- // sort only a copy(!) of the symbols, otherwise the SymbolSet lookup is broken
- symbols.slice(0).sort(sortByAlias).forEach(writeSymbol);
- }
-
- closeRootTag("api");
-
- fs.mkPath(path.dirname(filename));
- fs.writeFileSync(filename, getAsString(), 'utf8');
-}
-
-//---- add on: API JS -----------------------------------------------------------------
-
-function createAPIJS(symbols, filename) {
-
- var output = [];
-
- var rkeywords = /^(?:abstract|as|boolean|break|byte|case|catch|char|class|continue|const|debugger|default|delete|do|double|else|enum|export|extends|false|final|finally|float|for|function|formEvents|formProperty|goto|if|implements|import|in|instanceof|int|interface|is|long|namespace|native|new|null|noattribute|package|private|protected|public|return|short|static|super|switch|synchronized|this|throw|throws|transient|true|try|typeof|use|var|void|volatile|while|with)$/;
-
- function isNoKeyword($) { return !rkeywords.test($.name); }
-
- function isAPI($) { return $.access === 'public' || $.access === 'protected' || !$.access }
-
- function writeln(args) {
- if ( arguments.length ) {
- for (var i = 0; i < arguments.length; i++)
- output.push(arguments[i]);
- }
- output.push("\n");
- }
-
- function unwrap(docletSrc) {
- if (!docletSrc) { return ''; }
-
- // note: keep trailing whitespace for @examples
- // extra opening/closing stars are ignored
- // left margin is considered a star and a space
- // use the /m flag on regex to avoid having to guess what this platform's newline is
- docletSrc =
- docletSrc.replace(/^\/\*\*+/, '') // remove opening slash+stars
- .replace(/\**\*\/$/, "\\Z") // replace closing star slash with end-marker
- .replace(/^\s*(\* ?|\\Z)/gm, '') // remove left margin like: spaces+star or spaces+end-marker
- .replace(/\s*\\Z$/g, ''); // remove end-marker
-
- return docletSrc;
- }
-
- function comment($, sMetaType) {
-
- var s = unwrap($.comment.toString());
-
- // remove the @desc tag
- s = s.replace(/(\r\n|\r|\n)/gm, "\n");
- s = s.replace(/^\s*@desc\s*/gm, "");
- s = s.replace(/^\s*@alias[^\r\n]*(\r\n|\r|\n)?/gm, "");
- s = s.replace(/^\s*@name[^\r\n]*(\r\n|\r|\n)?/gm, "");
- s = s.replace(/^\s*@function[^\r\n]*(\r\n|\r|\n)?/gm, "");
- s = s.replace(/^\s*@author[^\r\n]*(\r\n|\r|\n)?/gm, "");
- s = s.replace(/^\s*@synthetic[^\r\n]*(\r\n|\r|\n)?/gm, "");
- s = s.replace(/^\s*<\/p>\s*(\r\n|\r|\n)?/gm, "\n");
- // skip empty documentation
- if ( !s ) return;
-
- // for namespaces, enforce the @.memberof tag
- if ( sMetaType === "namespace" && $.memberof && s.indexOf("@memberof") < 0 ) {
- s = s + "\n@memberof " + $.memberof;
- }
-
- writeln("/**\n * " + s.replace(/\n/g, "\n * ") + "\n */");
-
- /*
- writeln("/**");
- writeln(s.split(/\r\n|\r|\n/g).map(function($) { return " * " + $;}).join("\r\n"));
- writeln(" * /");
- */
-
- }
-
- function signature($) {
- var p = $.params,
- r = [],
- i;
- if ( p ) {
- for (i = 0; i < p.length; i++) {
- // ignore @param tags for 'virtual' params that are used to document members of config-like params
- // (e.g. like "@param param1.key ...")
- if (p[i].name && p[i].name.indexOf('.') < 0) {
- r.push(p[i].name);
- }
- }
- }
- return r.join(',');
- }
-
- function qname(member,parent) {
- var r = member.memberof;
- if ( member.scope !== 'static' ) {
- r += ".prototype";
- }
- return (r ? r + "." : "") + member.name;
- }
-
- var mValues = {
- "boolean" : "false",
- "int" : "0",
- "float" : "0.0",
- "number" : "0.0",
- "string" : "\"\"",
- "object" : "new Object()",
- "function" : "function() {}"
- };
-
- function valueForType(type) {
- if ( type && type.names && type.names[0] ) {
- type = type.names[0];
- if ( REGEXP_ARRAY_TYPE.test(type) || type.indexOf("[]") > 0 ) {
- return "new Array()";
- } else if ( mValues[type] ) {
- return mValues[type];
- } else if ( type.indexOf(".") > 0 ) {
- return "new " + type + "()";
- } else {
- // return "/* unsupported type: " + member.type + " */ null";
- return "null";
- }
- }
- }
-
- function value(member) {
- return valueForType(member.type);
- }
-
- function retvalue(member) {
- //console.log(member);
- var r = valueForType(member.type || (member.returns && member.returns.length && member.returns[0] && member.returns[0].type && member.returns[0].type));
- if ( r ) {
- return "return " + r + ";";
- }
- return "";
- }
-
- var sortedSymbols = symbols.slice(0).filter(function($) { return isaClass($) && isAPI($) && !$.synthetic; }).sort(sortByAlias); // sort only a copy(!) of the symbols, otherwise the SymbolSet lookup is broken
- sortedSymbols.forEach(function(symbol) {
-
- var sMetaType = (symbol.kind === 'member' && symbol.isEnum) ? 'enum' : symbol.kind;
- if ( sMetaType ) {
-
- writeln("");
- writeln("// ---- " + symbol.longname + " --------------------------------------------------------------------------");
- writeln("");
-
- var memberId, member;
-
- var ownProperties = childrenOfKind(symbol, 'property').own.filter(isNoKeyword).sort(sortByAlias);
- if ( sMetaType === "class" ) {
- comment(symbol, sMetaType);
- writeln(symbol.longname + " = function(" + signature(symbol) + ") {};");
- for ( memberId in ownProperties ) {
- member = ownProperties[memberId];
- comment(member, sMetaType);
- writeln(qname(member, symbol) + " = " + value(member));
- writeln("");
- }
- } else if ( sMetaType === 'namespace' || sMetaType === 'enum' ) {
- //console.log("found namespace " + symbol.longname);
- //console.log(ownProperties);
- if ( ownProperties.length ) {
- writeln("// dummy function to make Eclipse aware of namespace");
- writeln(symbol.longname + ".toString = function() { return \"\"; };");
- }
- }
-
- var ownEvents = childrenOfKind(symbol, 'event').own.filter(isNoKeyword).sort(sortByAlias);
- if ( ownEvents.length ) {
- for ( memberId in ownEvents ) {
- member = ownEvents[memberId];
- comment(member, sMetaType);
- writeln(qname(member, symbol) + " = function(" + signature(member) + ") { " + retvalue(member) + " };");
- writeln("");
- }
- }
-
- var ownMethods = childrenOfKind(symbol, 'method').own.filter(isNoKeyword).sort(sortByAlias);
- if ( ownMethods.length ) {
- for ( memberId in ownMethods ) {
- member = ownMethods[memberId];
- comment(member, sMetaType);
- writeln(qname(member, symbol) + " = function(" + signature(member) + ") { " + retvalue(member) + " };");
- writeln("");
- }
- }
-
- }
- });
-
- writeln("// ---- static fields of namespaces ---------------------------------------------------------------------");
-
- sortedSymbols.forEach(function(symbol) {
-
- var sMetaType = (symbol.kind === 'member' && symbol.isEnum) ? 'enum' : symbol.kind;
-
- if ( sMetaType === 'namespace' || sMetaType === 'enum' ) {
-
- var ownProperties = childrenOfKind(symbol, 'property').own.filter(isNoKeyword).sort(sortByAlias);
- if ( ownProperties.length ) {
- writeln("");
- writeln("// ---- " + symbol.longname + " --------------------------------------------------------------------------");
- writeln("");
-
- for (var memberId in ownProperties ) {
- var member = ownProperties[memberId];
- comment(member, sMetaType);
- writeln(qname(member, symbol) + " = " + value(member) + ";");
- writeln("");
- }
- }
- }
-
- });
-
- fs.mkPath(path.dirname(filename));
- fs.writeFileSync(filename, output.join(""), 'utf8');
- info(" saved as " + filename);
-}
-
-// Description + Settings
-
-function getConstructorDescription(symbol) {
- var description = symbol.description;
- var tags = symbol.tags;
- if ( tags ) {
- for (var i = 0; i < tags.length; i++) {
- if ( tags[i].title === "ui5-settings" && tags[i].text) {
- description += "\n
\n" + tags[i].text;
- break;
- }
- }
- }
- return description;
-}
-
-
-// Example
-
-function makeExample(example) {
- var result = {
- caption: null,
- example: example
- },
- match = /^\s*
([\s\S]+?)<\/caption>(?:[ \t]*[\n\r]*)([\s\S]+)$/i.exec(example);
-
- if ( match ) {
- result.caption = match[1];
- result.example = match[2];
- }
-
- return result;
-}
-
-/* ---- exports ---- */
-
-exports.publish = publish;
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 22d1bb791df9..0e4e32beaf78 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -52,7 +52,6 @@
"globby": "^13.1.1",
"handlebars": "^4.7.7",
"is-port-reachable": "^3.1.0",
- "jsdoc": "^3.6.6",
"json-beautify": "^1.1.1",
"mkdirp": "^1.0.4",
"nps": "^5.10.0",
From d7bb8ac67d07228e4c72811bb8a5ea93684b30fd Mon Sep 17 00:00:00 2001
From: ilhan orhan
Date: Mon, 25 Mar 2024 14:00:41 +0200
Subject: [PATCH 16/60] refactor: remove all Assets-static.js modules (#8526)
Remove all Assets-static.js modules in favour of their dynamic counterparts - the Assets.js modules.
BREAKING CHANGE: All Assets-static.js modules are removed. If you previously imported any Assets-static.js module from any package:
```ts
import "@ui5/webcomponents/dist/Assets-static.js";
import "@ui5/webcomponents-icons/dist/Assets-static.js"
```
use the dynamic equivalent of it:
```ts
import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/Assets.js"
```
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
---
packages/fiori/src/Assets-static.ts | 6 ------
packages/icons-business-suite/src/Assets-static.ts | 0
packages/icons-business-suite/src/json-imports/Icons.ts | 2 +-
packages/icons-tnt/src/Assets-static.ts | 0
packages/icons-tnt/src/json-imports/Icons.ts | 2 +-
packages/icons/src/Assets-static.ts | 1 -
packages/icons/src/json-imports/Icons.ts | 2 +-
packages/localization/lib/generate-json-imports/cldr.js | 2 +-
packages/localization/src/Assets-static.ts | 2 --
packages/main/src/Assets-static.ts | 6 ------
packages/theming/src/Assets-static.ts | 2 --
packages/tools/lib/generate-json-imports/i18n.js | 2 +-
packages/tools/lib/generate-json-imports/themes.js | 2 +-
13 files changed, 6 insertions(+), 23 deletions(-)
delete mode 100644 packages/fiori/src/Assets-static.ts
delete mode 100644 packages/icons-business-suite/src/Assets-static.ts
delete mode 100644 packages/icons-tnt/src/Assets-static.ts
delete mode 100644 packages/icons/src/Assets-static.ts
delete mode 100644 packages/localization/src/Assets-static.ts
delete mode 100644 packages/main/src/Assets-static.ts
delete mode 100644 packages/theming/src/Assets-static.ts
diff --git a/packages/fiori/src/Assets-static.ts b/packages/fiori/src/Assets-static.ts
deleted file mode 100644
index 06b7321eba26..000000000000
--- a/packages/fiori/src/Assets-static.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// main package assets (transitively base and theming)
-import "@ui5/webcomponents/dist/Assets-static.js";
-
-// own fiori package assets
-import "./generated/json-imports/Themes-static.js";
-import "./generated/json-imports/i18n-static.js";
diff --git a/packages/icons-business-suite/src/Assets-static.ts b/packages/icons-business-suite/src/Assets-static.ts
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/icons-business-suite/src/json-imports/Icons.ts b/packages/icons-business-suite/src/json-imports/Icons.ts
index 3a47716cb26b..273b5e514ad0 100644
--- a/packages/icons-business-suite/src/json-imports/Icons.ts
+++ b/packages/icons-business-suite/src/json-imports/Icons.ts
@@ -10,7 +10,7 @@ const loadIconsBundle = async (collection: string): Promise => {
}
if (typeof iconData === "string" && (iconData as string).endsWith(".json")) {
- throw new Error("[icons-business-suite] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons-business-suite/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
+ throw new Error("[icons-business-suite] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.");
}
return iconData;
}
diff --git a/packages/icons-tnt/src/Assets-static.ts b/packages/icons-tnt/src/Assets-static.ts
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/icons-tnt/src/json-imports/Icons.ts b/packages/icons-tnt/src/json-imports/Icons.ts
index ba996281fb2c..034022a89756 100644
--- a/packages/icons-tnt/src/json-imports/Icons.ts
+++ b/packages/icons-tnt/src/json-imports/Icons.ts
@@ -10,7 +10,7 @@ const loadIconsBundle = async (collection: string): Promise => {
}
if (typeof iconData === "string" && (iconData as string).endsWith(".json")) {
- throw new Error("[icons-tnt] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons-tnt/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
+ throw new Error("[icons-tnt] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.");
}
return iconData;
}
diff --git a/packages/icons/src/Assets-static.ts b/packages/icons/src/Assets-static.ts
deleted file mode 100644
index c49e620bb353..000000000000
--- a/packages/icons/src/Assets-static.ts
+++ /dev/null
@@ -1 +0,0 @@
-import "./generated/json-imports/i18n-static.js";
diff --git a/packages/icons/src/json-imports/Icons.ts b/packages/icons/src/json-imports/Icons.ts
index 99ee8cecd86a..0d58e07a4264 100644
--- a/packages/icons/src/json-imports/Icons.ts
+++ b/packages/icons/src/json-imports/Icons.ts
@@ -10,7 +10,7 @@ const loadIconsBundle = async (collection: string): Promise => {
}
if (typeof iconData === "string" && (iconData as string).endsWith(".json")) {
- throw new Error("[icons] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use `import \"@ui5/webcomponents-icons/dist/Assets-static.js\". Check the \"Assets\" documentation for more information.");
+ throw new Error("[icons] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.");
}
return iconData;
}
diff --git a/packages/localization/lib/generate-json-imports/cldr.js b/packages/localization/lib/generate-json-imports/cldr.js
index 642659866bf3..87b44383b539 100644
--- a/packages/localization/lib/generate-json-imports/cldr.js
+++ b/packages/localization/lib/generate-json-imports/cldr.js
@@ -43,7 +43,7 @@ ${caseImports}
const importAndCheck = async (localeId) => {
const data = await importCldrJson(localeId);
if (typeof data === "string" && data.endsWith(".json")) {
- throw new Error(\`[LocaleData] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+ throw new Error(\`[LocaleData] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
}
return data;
}
diff --git a/packages/localization/src/Assets-static.ts b/packages/localization/src/Assets-static.ts
deleted file mode 100644
index 6d083ff01773..000000000000
--- a/packages/localization/src/Assets-static.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Currently the base package provides CLDR assets only
-import "./generated/json-imports/LocaleData-static.js";
diff --git a/packages/main/src/Assets-static.ts b/packages/main/src/Assets-static.ts
deleted file mode 100644
index 74b2b2ccf897..000000000000
--- a/packages/main/src/Assets-static.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import "@ui5/webcomponents-localization/dist/Assets-static.js"; // CLDR
-import "@ui5/webcomponents-theming/dist/Assets-static.js"; // Theming
-
-// own main package assets
-import "./generated/json-imports/Themes-static.js";
-import "./generated/json-imports/i18n-static.js";
diff --git a/packages/theming/src/Assets-static.ts b/packages/theming/src/Assets-static.ts
deleted file mode 100644
index e433b96e075d..000000000000
--- a/packages/theming/src/Assets-static.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// The theming package provides theming assets only
-import "./generated/json-imports/Themes-static.js";
diff --git a/packages/tools/lib/generate-json-imports/i18n.js b/packages/tools/lib/generate-json-imports/i18n.js
index a98476024520..74e8d1d1a14b 100644
--- a/packages/tools/lib/generate-json-imports/i18n.js
+++ b/packages/tools/lib/generate-json-imports/i18n.js
@@ -76,7 +76,7 @@ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registrie
const importAndCheck = async (localeId) => {
const data = await importMessageBundle(localeId);
if (typeof data === "string" && data.endsWith(".json")) {
- throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+ throw new Error(\`[i18n] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
}
return data;
}
diff --git a/packages/tools/lib/generate-json-imports/themes.js b/packages/tools/lib/generate-json-imports/themes.js
index 3326b39356c9..4f83c25fd767 100644
--- a/packages/tools/lib/generate-json-imports/themes.js
+++ b/packages/tools/lib/generate-json-imports/themes.js
@@ -64,7 +64,7 @@ ${dynamicImportLines}
const loadAndCheck = async (themeName) => {
const data = await loadThemeProperties(themeName);
if (typeof data === "string" && data.endsWith(".json")) {
- throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build or use 'import ".../Assets-static.js"'. Check the \"Assets\" documentation for more information.\`);
+ throw new Error(\`[themes] Invalid bundling detected - dynamic JSON imports bundled as URLs. Switch to inlining JSON files from the build. Check the \"Assets\" documentation for more information.\`);
}
return data;
};
From 111e585a58f22ef32f0d8f271fc884ba0c76712a Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev
Date: Mon, 25 Mar 2024 16:20:18 +0200
Subject: [PATCH 17/60] refactor(ui5-calendar): rename `selected-dates-change`
to `selection-change` and rename few event details (#8529)
Renames the `selected-dates-change ` event name of the Calendar to `selection-change` and the names of two event details - `values` and `dates` to `selectedValues` and `selectedDateValues` respectively.
BREAKING CHANGE: The event `selected-dates-change ` is renamed to `selection-change`. In addition the event details
`values` and `dates` are renamed to `selectedValues` and `selectedDateValues`. If you previously used the Calendar event as follows:
```ts
myCalendar.addEventListener("selected-dates-change", () => {
const values = e.detail.values;
const dates = e.detail.dates;
})
```
Now you have to use the new event name and details:
```ts
myCalendar.addEventListener("selection-change", () => {
const values = event.detail.selectedValues;
const dates = event.detail.selectedDateValues;
})
```
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
---
packages/main/src/Calendar.ts | 22 ++++++++++-----------
packages/main/src/DatePicker.ts | 6 +++---
packages/main/src/DatePickerPopover.hbs | 2 +-
packages/main/src/DateRangePicker.ts | 8 ++++----
packages/main/src/DateTimePicker.ts | 6 +++---
packages/main/src/DateTimePickerPopover.hbs | 2 +-
packages/main/test/pages/Calendar.html | 4 ++--
7 files changed, 25 insertions(+), 25 deletions(-)
diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
index cd5683698c44..93558d798fe1 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -49,9 +49,9 @@ interface ICalendarPicker {
_lastYear?: number,
}
-type CalendarSelectedDatesChangeEventDetail = {
- values: Array,
- dates: Array,
+type CalendarSelectionChangeEventDetail = {
+ selectedValues: Array,
+ selectedDates: Array,
timestamp: number | undefined,
}
@@ -72,7 +72,7 @@ type SpecialCalendarDateT = {
* date string, correctly formatted according to the `ui5-calendar`'s `formatPattern` property.
* Whenever the user changes the date selection, `ui5-calendar` will automatically create/remove instances
* of `ui5-date` in itself, unless you prevent this behavior by calling `preventDefault()` for the
- * `selected-dates-change` event. This is useful if you want to control the selected dates externally.
+ * `selection-change` event. This is useful if you want to control the selected dates externally.
*
* ### Usage
*
@@ -177,20 +177,20 @@ type SpecialCalendarDateT = {
* **Note:** If you call `preventDefault()` for this event, the component will not
* create instances of `ui5-date` for the newly selected dates. In that case you should do this manually.
* @allowPreventDefault
- * @param {Array} values The selected dates
- * @param {Array} dates The selected dates as UTC timestamps
+ * @param {Array} selectedValues The selected dates
+ * @param {Array} selectedDates The selected dates as UTC timestamps
* @public
*/
-@event("selected-dates-change", {
+@event("selection-change", {
detail: {
/**
* @public
*/
- dates: { type: Array },
+ selectedDates: { type: Array },
/**
* @public
*/
- values: { type: Array },
+ selectedValues: { type: Array },
timestamp: { type: Number },
},
@@ -523,7 +523,7 @@ class Calendar extends CalendarPart {
return this.getFormat().format(calendarDate.toUTCJSDate(), true);
});
- const defaultPrevented = !this.fireEvent("selected-dates-change", { timestamp: this.timestamp, dates: [...selectedDates], values: datesValues }, true);
+ const defaultPrevented = !this.fireEvent("selection-change", { timestamp: this.timestamp, selectedDates: [...selectedDates], selectedValues: datesValues }, true);
if (!defaultPrevented) {
this._setSelectedDates(selectedDates);
}
@@ -607,6 +607,6 @@ Calendar.define();
export default Calendar;
export type {
ICalendarPicker,
- CalendarSelectedDatesChangeEventDetail,
+ CalendarSelectionChangeEventDetail,
SpecialCalendarDateT,
};
diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
index d3311dc65a33..795e3ae9c83a 100644
--- a/packages/main/src/DatePicker.ts
+++ b/packages/main/src/DatePicker.ts
@@ -39,7 +39,7 @@ import Icon from "./Icon.js";
import Button from "./Button.js";
import ResponsivePopover from "./ResponsivePopover.js";
import Calendar from "./Calendar.js";
-import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
import CalendarDateComponent from "./CalendarDate.js";
import Input from "./Input.js";
import InputType from "./types/InputType.js";
@@ -763,9 +763,9 @@ class DatePicker extends DateComponentBase implements IFormElement {
* @param e
* @protected
*/
- onSelectedDatesChange(e: CustomEvent) {
+ onSelectedDatesChange(e: CustomEvent) {
e.preventDefault();
- const newValue = e.detail.values && e.detail.values[0];
+ const newValue = e.detail.selectedValues && e.detail.selectedValues[0];
this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
this.closePicker();
diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
index 0e816d4e3d97..1d61d1b45dd2 100644
--- a/packages/main/src/DatePickerPopover.hbs
+++ b/packages/main/src/DatePickerPopover.hbs
@@ -44,7 +44,7 @@
.selectionMode="{{_calendarSelectionMode}}"
.minDate="{{minDate}}"
.maxDate="{{maxDate}}"
- @ui5-selected-dates-change="{{onSelectedDatesChange}}"
+ @ui5-selection-change="{{onSelectedDatesChange}}"
@ui5-show-month-press="{{onHeaderShowMonthPress}}"
@ui5-show-year-press="{{onHeaderShowYearPress}}"
?hide-week-numbers="{{hideWeekNumbers}}"
diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts
index d219db28f896..193f5efb598a 100644
--- a/packages/main/src/DateRangePicker.ts
+++ b/packages/main/src/DateRangePicker.ts
@@ -15,7 +15,7 @@ import type {
DatePickerChangeEventDetail as DateRangePickerChangeEventDetail,
DatePickerInputEventDetail as DateRangePickerInputEventDetail,
} from "./DatePicker.js";
-import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
/**
* @class
@@ -215,9 +215,9 @@ class DateRangePicker extends DatePicker {
/**
* @override
*/
- onSelectedDatesChange(event: CustomEvent) {
+ onSelectedDatesChange(event: CustomEvent) {
event.preventDefault(); // never let the calendar update its own dates, the parent component controls them
- const values = event.detail.values;
+ const values = event.detail.selectedValues;
if (values.length === 0) {
return;
@@ -227,7 +227,7 @@ class DateRangePicker extends DatePicker {
this._tempValue = values[0];
return;
}
- const newValue = this._buildValue(event.detail.dates[0], event.detail.dates[1]); // the value will be normalized so we don't need to order them here
+ const newValue = this._buildValue(event.detail.selectedDates[0], event.detail.selectedDates[1]); // the value will be normalized so we don't need to order them here
this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
this.closePicker();
}
diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts
index f0a7173d164c..51d495f05a3f 100644
--- a/packages/main/src/DateTimePicker.ts
+++ b/packages/main/src/DateTimePicker.ts
@@ -12,7 +12,7 @@ import type ResponsivePopover from "./ResponsivePopover.js";
import ToggleButton from "./ToggleButton.js";
import SegmentedButton from "./SegmentedButton.js";
import Calendar from "./Calendar.js";
-import type { CalendarSelectedDatesChangeEventDetail } from "./Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
import DatePicker from "./DatePicker.js";
import type {
DatePickerChangeEventDetail as DateTimePickerChangeEventDetail,
@@ -296,14 +296,14 @@ class DateTimePicker extends DatePicker {
/**
* @override
*/
- onSelectedDatesChange(e: CustomEvent) {
+ onSelectedDatesChange(e: CustomEvent) {
e.preventDefault();
// @ts-ignore Needed for FF
const dateTimePickerContent = e.path ? e.path[1] : e.composedPath()[1];
this._previewValues = {
...this._previewValues,
calendarTimestamp: e.detail.timestamp,
- calendarValue: e.detail.values[0],
+ calendarValue: e.detail.selectedValues[0],
timeSelectionValue: dateTimePickerContent.lastChild.value,
};
}
diff --git a/packages/main/src/DateTimePickerPopover.hbs b/packages/main/src/DateTimePickerPopover.hbs
index 4cb146cbef46..f2706fb1bdb6 100644
--- a/packages/main/src/DateTimePickerPopover.hbs
+++ b/packages/main/src/DateTimePickerPopover.hbs
@@ -24,7 +24,7 @@
.selectionMode="{{_calendarSelectionMode}}"
.minDate="{{minDate}}"
.maxDate="{{maxDate}}"
- @ui5-selected-dates-change="{{onSelectedDatesChange}}"
+ @ui5-selection-change="{{onSelectedDatesChange}}"
@ui5-show-month-press="{{onHeaderShowMonthPress}}"
@ui5-show-year-press="{{onHeaderShowYearPress}}"
?hide-week-numbers="{{hideWeekNumbers}}"
diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html
index a3b8956c0c3d..3645978bd9f2 100644
--- a/packages/main/test/pages/Calendar.html
+++ b/packages/main/test/pages/Calendar.html
@@ -100,8 +100,8 @@
toggleButton.innerHTML = event.target.pressed ? "show" : "hide";
});
- calendar1.addEventListener("ui5-selected-dates-change", function(event) {
- textArea.setAttribute("value", event.detail.dates.join(", ") + " / " + event.detail.values.join(", "));
+ calendar1.addEventListener("ui5-selection-change", function(event) {
+ textArea.setAttribute("value", event.detail.selectedDates.join(", ") + " / " + event.detail.selectedValues.join(", "));
});
From 6b7237e0fa90ce2c64fe5b82fcd8512d4664272e Mon Sep 17 00:00:00 2001
From: ilhan orhan
Date: Mon, 25 Mar 2024 16:22:04 +0200
Subject: [PATCH 18/60] docs: update keyboard keys abbreviations (#8528)
* docs: update keyboard key abbreviation
* chore: update
* chore: update
* chore: update
---
packages/fiori/src/Bar.ts | 2 +-
packages/fiori/src/FlexibleColumnLayout.ts | 6 +--
packages/fiori/src/MediaGallery.ts | 8 ++--
packages/fiori/src/MediaGalleryItem.ts | 2 +-
packages/fiori/src/ProductSwitch.ts | 6 +--
packages/fiori/src/ProductSwitchItem.ts | 2 +-
packages/fiori/src/ShellBar.ts | 2 +-
packages/fiori/src/SideNavigation.ts | 2 +-
packages/fiori/src/ViewSettingsDialog.ts | 2 +-
packages/fiori/src/Wizard.ts | 12 ++---
packages/main/src/Avatar.ts | 4 +-
packages/main/src/AvatarGroup.ts | 30 ++++++------
packages/main/src/Breadcrumbs.ts | 18 +++----
packages/main/src/Calendar.ts | 48 +++++++++----------
packages/main/src/Carousel.ts | 6 +--
packages/main/src/CheckBox.ts | 2 +-
packages/main/src/ComboBox.ts | 18 +++----
packages/main/src/DatePicker.ts | 16 +++----
packages/main/src/DateRangePicker.ts | 12 ++---
packages/main/src/Dialog.ts | 8 ++--
packages/main/src/Icon.ts | 4 +-
packages/main/src/Input.ts | 22 ++++-----
packages/main/src/List.ts | 12 ++---
packages/main/src/ListItemBase.ts | 2 +-
packages/main/src/MessageStrip.ts | 2 +-
packages/main/src/MultiComboBox.ts | 2 +-
packages/main/src/Panel.ts | 2 +-
packages/main/src/RatingIndicator.ts | 4 +-
packages/main/src/Select.ts | 12 ++---
packages/main/src/TabContainer.ts | 2 +-
packages/main/src/Table.ts | 16 +++----
packages/main/src/TimePicker.ts | 26 +++++-----
packages/main/src/Toolbar.ts | 2 +-
packages/main/src/Tree.ts | 10 ++--
.../test/pages/List_keyboard_support.html | 4 +-
packages/main/test/pages/Menu.html | 2 +-
.../main/test/samples/RadioButton.sample.html | 2 +-
packages/main/test/specs/DatePicker.spec.js | 8 ++--
38 files changed, 170 insertions(+), 170 deletions(-)
diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts
index 7b9b5dffcb62..cb25f48e10e7 100644
--- a/packages/fiori/src/Bar.ts
+++ b/packages/fiori/src/Bar.ts
@@ -33,7 +33,7 @@ import BarCss from "./generated/themes/Bar.css.js";
* ### Keyboard Handling
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts
index ca6c4f8de178..f08453c4c7a0 100644
--- a/packages/fiori/src/FlexibleColumnLayout.ts
+++ b/packages/fiori/src/FlexibleColumnLayout.ts
@@ -107,13 +107,13 @@ type FlexibleColumnLayoutAccessibilityRoles = {
*
* #### Basic Navigation
*
- * - [SPACE, ENTER, RETURN] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).
- * - This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * - [Space] / [Enter] or [Return] - If focus is on the layout toggle button (arrow button), once activated, it triggers the associated action (such as expand/collapse the column).
+ * - This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts
index ff38bea9d28d..c10b8f3ec460 100644
--- a/packages/fiori/src/MediaGallery.ts
+++ b/packages/fiori/src/MediaGallery.ts
@@ -72,10 +72,10 @@ const COLUMNS_COUNT: Record = {
* When the thumbnails menu is focused the following keyboard
* shortcuts allow the user to navigate through the thumbnail items:
*
- * - [UP/DOWN] - Navigates up and down the items
- * - [HOME] - Navigates to first item
- * - [END] - Navigates to the last item
- * - [SPACE/ENTER] - Select an item
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
+ * - [Space], [Enter] - Selects an item
*
* ### ES6 Module Import
* `import "@ui5/webcomponents-fiori/dist/MediaGallery.js";`
diff --git a/packages/fiori/src/MediaGalleryItem.ts b/packages/fiori/src/MediaGalleryItem.ts
index 8a5675c0d7bb..e0434f61583d 100644
--- a/packages/fiori/src/MediaGalleryItem.ts
+++ b/packages/fiori/src/MediaGalleryItem.ts
@@ -29,7 +29,7 @@ import MediaGalleryItemTemplate from "./generated/templates/MediaGalleryItemTemp
* When focused, the user can use the following keyboard
* shortcuts in order to perform a navigation:
*
- * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
*
* ### ES6 Module Import
* `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";` (comes with `ui5-media-gallery`)
diff --git a/packages/fiori/src/ProductSwitch.ts b/packages/fiori/src/ProductSwitch.ts
index 88b74576b571..75807a1afd0e 100644
--- a/packages/fiori/src/ProductSwitch.ts
+++ b/packages/fiori/src/ProductSwitch.ts
@@ -50,9 +50,9 @@ interface IProductSwitchItem extends HTMLElement, ITabbable {
* When focused, the user can use the following keyboard
* shortcuts in order to perform a navigation:
*
- * - [TAB] - Move focus to the next interactive element after the `ui5-product-switch`
- * - [UP/DOWN] - Navigates up and down the items
- * - [LEFT/RIGHT] - Navigates left and right the items
+ * - [Tab] - Move focus to the next interactive element after the `ui5-product-switch`
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Left] or [Right] - Navigates left and right the items
*
* ### ES6 Module Import
* `import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";`
diff --git a/packages/fiori/src/ProductSwitchItem.ts b/packages/fiori/src/ProductSwitchItem.ts
index 476f24afa94c..a9f40a644a0f 100644
--- a/packages/fiori/src/ProductSwitchItem.ts
+++ b/packages/fiori/src/ProductSwitchItem.ts
@@ -24,7 +24,7 @@ import ProductSwitchItemCss from "./generated/themes/ProductSwitchItem.css.js";
* When focused, the user can use the following keyboard
* shortcuts in order to perform a navigation:
*
- * - [SPACE/ENTER/RETURN] - Trigger `ui5-click` event
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
*
* ### ES6 Module Import
* `import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";`
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index bd27fe81b624..7e0ad09753de 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -153,7 +153,7 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
* ### Keyboard Handling
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
index 21dace0ee990..89eb699e003f 100644
--- a/packages/fiori/src/SideNavigation.ts
+++ b/packages/fiori/src/SideNavigation.ts
@@ -84,7 +84,7 @@ type NavigationMenuClickEventDetail = MenuItemClickEventDetail & {
* ### Keyboard Handling
*
* ### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts
index bdb2f77d53aa..2635eb92da7a 100644
--- a/packages/fiori/src/ViewSettingsDialog.ts
+++ b/packages/fiori/src/ViewSettingsDialog.ts
@@ -632,7 +632,7 @@ class ViewSettingsDialog extends UI5Element {
}
/**
- * If the dialog is closed by [ESC] key, do the same as if the `Cancel` button is pressed.
+ * If the dialog is closed by [Escape] key, do the same as if the `Cancel` button is pressed.
* @param evt
*/
_restoreConfirmedOnEscape(evt: CustomEvent) { // Dialog#before-close
diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
index aa2f0aff7635..814066cbeaba 100644
--- a/packages/fiori/src/Wizard.ts
+++ b/packages/fiori/src/Wizard.ts
@@ -125,14 +125,14 @@ type StepInfo = {
*
* #### Wizard Progress Navigation
*
- * - [LEFT], [DOWN] - Focus moves backward to the WizardProgressNavAnchors.
- * - [UP], [RIGHT] - Focus moves forward to the WizardProgressNavAnchor.
- * - [SPACE] or [ENTER], [RETURN] - Selects an active step
- * - [HOME] or [PAGE UP] - Focus goes to the first step
- * - [END] or [PAGE DOWN] - Focus goes to the last step
+ * - [Left] or [Down] - Focus moves backward to the WizardProgressNavAnchors.
+ * - [Up] or [Right] - Focus moves forward to the WizardProgressNavAnchor.
+ * - [Space] / [Enter] or [Return] - Selects an active step
+ * - [Home] or [PAGE UP] - Focus goes to the first step
+ * - [End] or [PAGE DOWN] - Focus goes to the last step
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts
index c8fe64482279..38672878c3a8 100644
--- a/packages/main/src/Avatar.ts
+++ b/packages/main/src/Avatar.ts
@@ -42,8 +42,8 @@ import "@ui5/webcomponents-icons/dist/alert.js";
*
* ### Keyboard Handling
*
- * - [SPACE, ENTER, RETURN] - Fires the `click` event if the `interactive` property is set to true.
- * - [SHIFT] - If [SPACE] is pressed, pressing [SHIFT] releases the component without triggering the click event.
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+ * - [Shift] - If [Space] is pressed, pressing [Shift] releases the component without triggering the click event.
*
* ### ES6 Module Import
* `import "@ui5/webcomponents/dist/Avatar.js";`
diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts
index 7ad0a2aaf42d..84aa8bf18f3b 100644
--- a/packages/main/src/AvatarGroup.ts
+++ b/packages/main/src/AvatarGroup.ts
@@ -95,13 +95,6 @@ type AvatarGroupClickEventDetail = {
* - `Individual` type: The avatars are displayed side-by-side and each
* avatar has its own click/tap area.
*
- * ### Responsive Behavior
- *
- * When the available space is less than the width required to display all avatars,
- * an overflow visualization appears as a button placed at the end with the same shape
- * and size as the avatars. The visualization displays the number of avatars that have overflowed
- * and are not currently visible.
- *
* ### Usage
*
* Use the `AvatarGroup` if:
@@ -115,6 +108,13 @@ type AvatarGroupClickEventDetail = {
* - You want to display a gallery for simple images.
* - You want to use it for other visual content than avatars.
*
+ * ### Responsive Behavior
+ *
+ * When the available space is less than the width required to display all avatars,
+ * an overflow visualization appears as a button placed at the end with the same shape
+ * and size as the avatars. The visualization displays the number of avatars that have overflowed
+ * and are not currently visible.
+ *
* ### Keyboard Handling
* The component provides advanced keyboard handling.
* When focused, the user can use the following keyboard
@@ -122,17 +122,17 @@ type AvatarGroupClickEventDetail = {
*
* `type` Individual:
*
- * - [TAB] - Move focus to the overflow button
- * - [LEFT] - Navigate one avatar to the left
- * - [RIGHT] - Navigate one avatar to the right
- * - [HOME] - Navigate to the first avatar
- * - [END] - Navigate to the last avatar
- * - [SPACE],[ENTER],[RETURN] - Trigger `ui5-click` event
+ * - [Tab] - Move focus to the overflow button
+ * - [Left] - Navigate one avatar to the left
+ * - [Right] - Navigate one avatar to the right
+ * - [Home] - Navigate to the first avatar
+ * - [End] - Navigate to the last avatar
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
*
* `type` Group:
*
- * - [TAB] - Move focus to the next interactive element after the component
- * - [SPACE],[ENTER],[RETURN] - Trigger `ui5-click` event
+ * - [Tab] - Move focus to the next interactive element after the component
+ * - [Space] / [Enter] or [Return] - Trigger `ui5-click` event
* @constructor
* @extends UI5Element
* @since 1.0.0-rc.11
diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts
index fa0d21d9ac07..b56b1f1442f2 100644
--- a/packages/main/src/Breadcrumbs.ts
+++ b/packages/main/src/Breadcrumbs.ts
@@ -67,15 +67,15 @@ type BreadcrumbsItemClickEventDetail = {
* ### Keyboard Handling
* The `ui5-breadcrumbs` provides advanced keyboard handling.
*
- * - [F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - If the dropdown arrow is focused - opens/closes the drop-down.
- * - [SPACE, ENTER] - Activates the focused item and triggers the `item-click` event.
- * - [ESC] - Closes the drop-down.
- * - [LEFT] - If the drop-down is closed - navigates one item to the left.
- * - [RIGHT] - If the drop-down is closed - navigates one item to the right.
- * - [UP] - If the drop-down is open - moves focus to the next item.
- * - [DOWN] - If the drop-down is open - moves focus to the previous item.
- * - [HOME] - Navigates to the first item.
- * - [END] - Navigates to the last item.
+ * - [F4], [Alt] + [Up], [Alt] + [Down], [Space], or [Enter] - If the dropdown arrow is focused - opens/closes the drop-down.
+ * - [Space],[Enter] - Activates the focused item and triggers the `item-click` event.
+ * - [Escape] - Closes the drop-down.
+ * - [Left] - If the drop-down is closed - navigates one item to the left.
+ * - [Right] - If the drop-down is closed - navigates one item to the right.
+ * - [Up] - If the drop-down is open - moves focus to the next item.
+ * - [Down] - If the drop-down is open - moves focus to the previous item.
+ * - [Home] - Navigates to the first item.
+ * - [End] - Navigates to the last item.
* @constructor
* @extends UI5Element
* @public
diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
index 93558d798fe1..81fb1a615fb8 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -91,38 +91,38 @@ type SpecialCalendarDateT = {
* - Day picker:
*
* - [F4] - Shows month picker
- * - [SHIFT] + [F4] - Shows year picker
- * - [PAGEUP] - Navigate to the previous month
- * - [PAGEDOWN] - Navigate to the next month
- * - [SHIFT] + [PAGEUP] - Navigate to the previous year
- * - [SHIFT] + [PAGEDOWN] - Navigate to the next year
- * - [CTRL] + [SHIFT] + [PAGEUP] - Navigate ten years backwards
- * - [CTRL] + [SHIFT] + [PAGEDOWN] - Navigate ten years forwards
- * - [HOME] - Navigate to the first day of the week
- * - [END] - Navigate to the last day of the week
- * - [CTRL] + [HOME] - Navigate to the first day of the month
- * - [CTRL] + [END] - Navigate to the last day of the month
+ * - [Shift] + [F4] - Shows year picker
+ * - [Page Up] - Navigate to the previous month
+ * - [Page Down] - Navigate to the next month
+ * - [Shift] + [Page Up] - Navigate to the previous year
+ * - [Shift] + [Page Down] - Navigate to the next year
+ * - [Ctrl] + [Shift] + [Page Up] - Navigate ten years backwards
+ * - [Ctrl] + [Shift] + [Page Down] - Navigate ten years forwards
+ * - [Home] - Navigate to the first day of the week
+ * - [End] - Navigate to the last day of the week
+ * - [Ctrl] + [Home] - Navigate to the first day of the month
+ * - [Ctrl] + [End] - Navigate to the last day of the month
*
* - Month picker:
*
- * - [PAGEUP] - Navigate to the previous year
- * - [PAGEDOWN] - Navigate to the next year
- * - [HOME] - Navigate to the first month of the current row
- * - [END] - Navigate to the last month of the current row
- * - [CTRL] + [HOME] - Navigate to the first month of the current year
- * - [CTRL] + [END] - Navigate to the last month of the year
+ * - [Page Up] - Navigate to the previous year
+ * - [Page Down] - Navigate to the next year
+ * - [Home] - Navigate to the first month of the current row
+ * - [End] - Navigate to the last month of the current row
+ * - [Ctrl] + [Home] - Navigate to the first month of the current year
+ * - [Ctrl] + [End] - Navigate to the last month of the year
*
* - Year picker:
*
- * - [PAGEUP] - Navigate to the previous year range
- * - [PAGEDOWN] - Navigate the next year range
- * - [HOME] - Navigate to the first year of the current row
- * - [END] - Navigate to the last year of the current row
- * - [CTRL] + [HOME] - Navigate to the first year of the current year range
- * - [CTRL] + [END] - Navigate to the last year of the current year range
+ * - [Page Up] - Navigate to the previous year range
+ * - [Page Down] - Navigate the next year range
+ * - [Home] - Navigate to the first year of the current row
+ * - [End] - Navigate to the last year of the current row
+ * - [Ctrl] + [Home] - Navigate to the first year of the current year range
+ * - [Ctrl] + [End] - Navigate to the last year of the current year range
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/main/src/Carousel.ts b/packages/main/src/Carousel.ts
index 3b99a4d2f650..2c67bdb5cbba 100644
--- a/packages/main/src/Carousel.ts
+++ b/packages/main/src/Carousel.ts
@@ -76,11 +76,11 @@ type CarouselNavigateEventDetail = {
* When the `ui5-carousel` is focused the user can navigate between the items
* with the following keyboard shortcuts:
*
- * - [UP/DOWN] - Navigates to previous and next item
- * - [LEFT/RIGHT] - Navigates to previous and next item
+ * - [Up] or [Down] - Navigates to previous and next item
+ * - [Left] or [Right] - Navigates to previous and next item
*
* ### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
*
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts
index 6c43d5c34d49..319cd0211393 100644
--- a/packages/main/src/CheckBox.ts
+++ b/packages/main/src/CheckBox.ts
@@ -65,7 +65,7 @@ let activeCb: CheckBox;
*
* The user can use the following keyboard shortcuts to toggle the checked state of the `ui5-checkbox`.
*
- * - [SPACE, ENTER] - Toggles between different states: checked, not checked.
+ * - [Space],[Enter] - Toggles between different states: checked, not checked.
*
* ### ES6 Module Import
*
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 7c9e765e83b6..2cdea49b5ff9 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -135,15 +135,15 @@ type ComboBoxSelectionChangeEventDetail = {
*
* The `ui5-combobox` provides advanced keyboard handling.
*
- * - [F4], [ALT]+[UP], or [ALT]+[DOWN] - Toggles the picker.
- * - [ESC] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.
- * - [ENTER] or [RETURN] - If picker is open, takes over the currently selected item and closes it.
- * - [DOWN] - Selects the next matching item in the picker.
- * - [UP] - Selects the previous matching item in the picker.
- * - [PAGEDOWN] - Moves selection down by page size (10 items by default).
- * - [PAGEUP] - Moves selection up by page size (10 items by default).
- * - [HOME] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
- * - [END] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
+ * - [F4], [Alt]+[Up], or [Alt]+[Down] - Toggles the picker.
+ * - [Escape] - Closes the picker, if open. If closed, cancels changes and reverts the typed in value.
+ * - [Enter] or [Return] - If picker is open, takes over the currently selected item and closes it.
+ * - [Down] - Selects the next matching item in the picker.
+ * - [Up] - Selects the previous matching item in the picker.
+ * - [Page Down] - Moves selection down by page size (10 items by default).
+ * - [Page Up] - Moves selection up by page size (10 items by default).
+ * - [Home] - If focus is in the ComboBox, moves cursor at the beginning of text. If focus is in the picker, selects the first item.
+ * - [End] - If focus is in the ComboBox, moves cursor at the end of text. If focus is in the picker, selects the last item.
*
* ### ES6 Module Import
*
diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
index 795e3ae9c83a..2468e14a5c1c 100644
--- a/packages/main/src/DatePicker.ts
+++ b/packages/main/src/DatePicker.ts
@@ -103,8 +103,8 @@ type DatePickerInputEventDetail = {
* ### Keyboard Handling
* The `ui5-date-picker` provides advanced keyboard handling.
* If the `ui5-date-picker` is focused,
- * you can open or close the drop-down by pressing `F4`, `ALT+UP` or `ALT+DOWN` keys.
- * Once the drop-down is opened, you can use the `UP`, `DOWN`, `LEFT`, `RIGHT` arrow keys
+ * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
+ * Once the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys
* to navigate through the dates and select one by pressing the `Space` or `Enter` keys. Moreover you can
* use TAB to reach the buttons for changing month and year.
*
@@ -112,12 +112,12 @@ type DatePickerInputEventDetail = {
* then users can increment or decrement the date referenced by `dateValue` property
* by using the following shortcuts:
*
- * - [PAGEDOWN] - Decrements the corresponding day of the month by one
- * - [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one
- * - [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one
- * - [PAGEUP] - Increments the corresponding day of the month by one
- * - [SHIFT] + [PAGEUP] - Increments the corresponding month by one
- * - [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one
+ * - [Page Down] - Decrements the corresponding day of the month by one
+ * - [Shift] + [Page Down] - Decrements the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one
+ * - [Page Up] - Increments the corresponding day of the month by one
+ * - [Shift] + [Page Up] - Increments the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one
*
* ### Calendar types
* The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
diff --git a/packages/main/src/DateRangePicker.ts b/packages/main/src/DateRangePicker.ts
index 193f5efb598a..faea24f76d22 100644
--- a/packages/main/src/DateRangePicker.ts
+++ b/packages/main/src/DateRangePicker.ts
@@ -38,12 +38,12 @@ import type { CalendarSelectionChangeEventDetail } from "./Calendar.js";
* increment or decrement respectively the range start or end date, depending on where the cursor is.
* The following shortcuts are available:
*
- * - [PAGEDOWN] - Decrements the corresponding day of the month by one
- * - [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one
- * - [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one
- * - [PAGEUP] - Increments the corresponding day of the month by one
- * - [SHIFT] + [PAGEUP] - Increments the corresponding month by one
- * - [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one
+ * - [Page Down] - Decrements the corresponding day of the month by one
+ * - [Shift] + [Page Down] - Decrements the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one
+ * - [Page Up] - Increments the corresponding day of the month by one
+ * - [Shift] + [Page Up] - Increments the corresponding month by one
+ * - [Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one
* @constructor
* @extends DatePicker
* @since 1.0.0-rc.8
diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
index bb6d0e18fcad..8fc0847f418b 100644
--- a/packages/main/src/Dialog.ts
+++ b/packages/main/src/Dialog.ts
@@ -85,15 +85,15 @@ const ICON_PER_STATE: Record = {
* When the `ui5-dialog` has the `draggable` property set to `true` and the header is focused, the user can move the dialog
* with the following keyboard shortcuts:
*
- * - [UP/DOWN] arrow keys - Move the dialog up/down.
- * - [LEFT/RIGHT] arrow keys - Move the dialog left/right.
+ * - [Up] or [Down] arrow keys - Move the dialog up/down.
+ * - [Left] or [Right] arrow keys - Move the dialog left/right.
*
* #### Resizing
* When the `ui5-dialog` has the `resizable` property set to `true` and the header is focused, the user can change the size of the dialog
* with the following keyboard shortcuts:
*
- * - [SHIFT] + [UP/DOWN] - Decrease/Increase the height of the dialog.
- * - [SHIFT] + [LEFT/RIGHT] - Decrease/Increase the width of the dialog.
+ * - [Shift] + [Up] or [Down] - Decrease/Increase the height of the dialog.
+ * - [Shift] + [Left] or [Right] - Decrease/Increase the width of the dialog.
*
* ### ES6 Module Import
*
diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts
index 23a3abc620b8..c008d1431577 100644
--- a/packages/main/src/Icon.ts
+++ b/packages/main/src/Icon.ts
@@ -81,8 +81,8 @@ const PRESENTATION_ROLE = "presentation";
*
* ### Keyboard Handling
*
- * - [SPACE, ENTER, RETURN] - Fires the `click` event if the `interactive` property is set to true.
- * - [SHIFT] - If [SPACE] or [ENTER],[RETURN] is pressed, pressing [SHIFT] releases the ui5-icon without triggering the click event.
+ * - [Space] / [Enter] or [Return] - Fires the `click` event if the `interactive` property is set to true.
+ * - [Shift] - If [Space] / [Enter] or [Return] is pressed, pressing [Shift] releases the ui5-icon without triggering the click event.
*
* ### ES6 Module Import
*
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
index d65ecb148e00..58ac008a5bd9 100644
--- a/packages/main/src/Input.ts
+++ b/packages/main/src/Input.ts
@@ -173,14 +173,14 @@ type InputSuggestionScrollEventDetail = {
* ### Keyboard Handling
* The `ui5-input` provides the following keyboard shortcuts:
*
- * - [ESC] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.
- * - [ENTER] or [RETURN] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.
- * - [DOWN] - Focuses the next matching item in the suggestion list.
- * - [UP] - Focuses the previous matching item in the suggestion list.
- * - [HOME] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.
- * - [END] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.
- * - [PAGEUP] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.
- * - [PAGEDOWN] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.
+ * - [Escape] - Closes the suggestion list, if open. If closed or not enabled, cancels changes and reverts to the value which the Input field had when it got the focus.
+ * - [Enter] or [Return] - If suggestion list is open takes over the current matching item and closes it. If value state or group header is focused, does nothing.
+ * - [Down] - Focuses the next matching item in the suggestion list.
+ * - [Up] - Focuses the previous matching item in the suggestion list.
+ * - [Home] - If focus is in the text input, moves caret before the first character. If focus is in the list, highlights the first item and updates the input accordingly.
+ * - [End] - If focus is in the text input, moves caret after the last character. If focus is in the list, highlights the last item and updates the input accordingly.
+ * - [Page Up] - If focus is in the list, moves highlight up by page size (10 items by default). If focus is in the input, does nothing.
+ * - [Page Down] - If focus is in the list, moves highlight down by page size (10 items by default). If focus is in the input, does nothing.
*
* ### ES6 Module Import
*
@@ -594,16 +594,16 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
// Represents the value before user moves selection from suggestion item to another
// and its value is updated after each move.
- // Note: Used to register and fire "input" event upon [SPACE] or [ENTER].
+ // Note: Used to register and fire "input" event upon [Space] or [Enter].
// Note: The property "value" is updated upon selection move and can`t be used.
this.valueBeforeItemSelection = "";
// Represents the value before user moves selection between the suggestion items
// and its value remains the same when the user navigates up or down the list.
- // Note: Used to cancel selection upon [ESC].
+ // Note: Used to cancel selection upon [Escape].
this.valueBeforeItemPreview = "";
- // Indicates if the user selection has been canceled with [ESC].
+ // Indicates if the user selection has been canceled with [Escape].
this.suggestionSelectionCancelled = false;
// tracks the value between focus in and focus out to detect that change event should be fired.
diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts
index a60fbc15445b..554413a0a88a 100644
--- a/packages/main/src/List.ts
+++ b/packages/main/src/List.ts
@@ -127,18 +127,18 @@ type ListItemClickEventDetail = {
* When a list is focused the user can use the following keyboard
* shortcuts in order to perform a navigation:
*
- * - [UP/DOWN] - Navigates up and down the items
- * - [HOME] - Navigates to first item
- * - [END] - Navigates to the last item
+ * - [Up] or [Down] - Navigates up and down the items
+ * - [Home] - Navigates to first item
+ * - [End] - Navigates to the last item
*
* The user can use the following keyboard shortcuts to perform actions (such as select, delete),
* when the `mode` property is in use:
*
- * - [SPACE] - Select an item (if `type` is 'Active') when `mode` is selection
- * - [DELETE] - Delete an item if `mode` property is `Delete`
+ * - [Space] - Select an item (if `type` is 'Active') when `mode` is selection
+ * - [Delete] - Delete an item if `mode` property is `Delete`
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/main/src/ListItemBase.ts b/packages/main/src/ListItemBase.ts
index 2ac2ccb88f0a..80a5a6a6deae 100644
--- a/packages/main/src/ListItemBase.ts
+++ b/packages/main/src/ListItemBase.ts
@@ -119,7 +119,7 @@ class ListItemBase extends UI5Element implements ITabbable {
/*
* Determines if th current list item either has no tabbable content or
- * [TAB] is performed onto the last tabbale content item.
+ * [Tab] is performed onto the last tabbale content item.
*/
shouldForwardTabAfter() {
const aContent = getTabbableElements(this.getFocusDomRef()!);
diff --git a/packages/main/src/MessageStrip.ts b/packages/main/src/MessageStrip.ts
index 74fd33d56554..5a4ac3f5c420 100644
--- a/packages/main/src/MessageStrip.ts
+++ b/packages/main/src/MessageStrip.ts
@@ -64,7 +64,7 @@ type DesignTypeAnnouncemnt = Record;
* ### Keyboard Handling
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index 6b0e4a98a153..f7fdaf6ae8f4 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -154,7 +154,7 @@ type MultiComboboxItemWithSelection = {
*
* #### Picker
* If the `ui5-multi-combobox` is focused,
- * you can open or close the drop-down by pressing `F4`, `ALT+UP` or `ALT+DOWN` keys.
+ * you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
* Once the drop-down is opened, you can use the `UP` and `DOWN` arrow keys
* to navigate through the available options and select one by pressing the `Space` or `Enter` keys.
*
diff --git a/packages/main/src/Panel.ts b/packages/main/src/Panel.ts
index 20d9c5c53969..0eb5ab7d5ee7 100644
--- a/packages/main/src/Panel.ts
+++ b/packages/main/src/Panel.ts
@@ -65,7 +65,7 @@ import panelCss from "./generated/themes/Panel.css.js";
* ### Keyboard Handling
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/main/src/RatingIndicator.ts b/packages/main/src/RatingIndicator.ts
index e34e5ae1dd43..f51df14612cc 100644
--- a/packages/main/src/RatingIndicator.ts
+++ b/packages/main/src/RatingIndicator.ts
@@ -59,8 +59,8 @@ type Star = {
*
* - [RIGHT/UP] - Increases the value of the rating by one step. If the highest value is reached, does nothing
* - [LEFT/DOWN] - Decreases the value of the rating by one step. If the lowest value is reached, does nothing.
- * - [HOME] - Sets the lowest value.
- * - [END] - Sets the highest value.
+ * - [Home] - Sets the lowest value.
+ * - [End] - Sets the highest value.
* - [SPACE/ENTER/RETURN] - Increases the value of the rating by one step. If the highest value is reached, sets the rating to the lowest value.
* - Any number - Changes value to the corresponding number. If typed number is larger than the number of values, sets the highest value.
*
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 08ddf1db4ddf..99cf49462fa7 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -126,12 +126,12 @@ type SelectLiveChangeEventDetail = {
* ### Keyboard Handling
* The `ui5-select` provides advanced keyboard handling.
*
- * - [F4, ALT+UP, ALT+DOWN, SPACE, ENTER] - Opens/closes the drop-down.
- * - [UP, DOWN] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.
- * - [SPACE, ENTER] - If the drop-down is opened - selects the focused option.
- * - [ESC] - Closes the drop-down without changing the selection.
- * - [HOME] - Navigates to first option
- * - [END] - Navigates to the last option
+ * - [F4] / [Alt] + [Up] / [Alt] + [Down] / [Space] or [Enter] - Opens/closes the drop-down.
+ * - [Up] or [Down] - If the drop-down is closed - changes selection to the next or the previous option. If the drop-down is opened - moves focus to the next or the previous option.
+ * - [Space], [Enter] - If the drop-down is opened - selects the focused option.
+ * - [Escape] - Closes the drop-down without changing the selection.
+ * - [Home] - Navigates to first option
+ * - [End] - Navigates to the last option
*
* ### ES6 Module Import
* `import "@ui5/webcomponents/dist/Select";`
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
index 2e962f3cdf67..f8459631bfda 100644
--- a/packages/main/src/TabContainer.ts
+++ b/packages/main/src/TabContainer.ts
@@ -148,7 +148,7 @@ interface TabContainerTabInOverflow extends CustomListItem {
* ### Keyboard Handling
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts
index c2348c5f4fe4..1a4ad98bdd04 100644
--- a/packages/main/src/Table.ts
+++ b/packages/main/src/Table.ts
@@ -145,20 +145,20 @@ enum TableFocusTargetElement {
* ### Keyboard Handling
*
* #### Fast Navigation
- * This component provides a build in fast navigation group which can be used via `F6 / Shift + F6` or ` Ctrl + Alt(Option) + Down / Ctrl + Alt(Option) + Up`.
+ * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up].
* In order to use this functionality, you need to import the following module:
* `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"`
*
* Furthermore, you can interact with `ui5-table` via the following keys.
*
* - [F7] - If focus is on an interactive control inside an item, moves focus to the corresponding item.
- * - [CTRL]+[A] - Selects all items, if MultiSelect mode is enabled.
- * - [HOME]/[END] - Focuses the first/last item.
- * - [PAGEUP]/[PAGEDOWN] - Moves focus up/down by page size (20 items by default).
- * - [ALT]+[DOWN]/[UP] - Switches focus between header, last focused item, and More button (if applies) in either direction.
- * - [SHIFT]+[DOWN]/[UP] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).
- * - [SHIFT]+[HOME]/[END] - Range selection to the first/last item of the List.
- * - [CTRL]+[HOME]/[END] - Same behavior as HOME & END.
+ * - [Ctrl]+[A] - Selects all items, if MultiSelect mode is enabled.
+ * - [Home]/[End] - Focuses the first/last item.
+ * - [Page Up]/[Page Down] - Moves focus up/down by page size (20 items by default).
+ * - [Alt]+[Down]/[Up] - Switches focus between header, last focused item, and More button (if applies) in either direction.
+ * - [Shift]+[Down]/[Up] - Selects the next/previous item in a MultiSelect table, if the current item is selected (Range selection). Otherwise, deselects them (Range deselection).
+ * - [Shift]+[Home]/[End] - Range selection to the first/last item of the List.
+ * - [Ctrl]+[Home]/[End] - Same behavior as HOME & END.
*
* ### ES6 Module Import
*
diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts
index 9baef243c110..b2223b0fc0d7 100644
--- a/packages/main/src/TimePicker.ts
+++ b/packages/main/src/TimePicker.ts
@@ -43,26 +43,26 @@ import {
* a valid value string is "11:42:35" and the same is displayed in the input.
*
* ### Keyboard handling
- * [F4], [ALT]+[UP], [ALT]+[DOWN] Open/Close picker dialog and move focus to it.
+ * [F4], [Alt]+[Up], [Alt]+[Down] Open/Close picker dialog and move focus to it.
*
* When closed:
*
- * - [PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
- * - [PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
- * - [SHIFT]+[PAGEUP] - Increments minutes by 1.
- * - [SHIFT]+[PAGEDOWN] - Decrements minutes by 1.
- * - [SHIFT]+[CTRL]+[PAGEUP] - Increments seconds by 1.
- * - [SHIFT]+[CTRL]+[PAGEDOWN] - Decrements seconds by 1.
+ * - [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
+ * - [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
+ * - [Shift]+[Page Up] - Increments minutes by 1.
+ * - [Shift]+[Page Down] - Decrements minutes by 1.
+ * - [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.
+ * - [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.
* -
*
* When opened:
*
- * - [PAGEUP] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
- * - [PAGEDOWN] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
- * - [SHIFT]+[PAGEUP] - Increments minutes by 1.
- * - [SHIFT]+[PAGEDOWN] - Decrements minutes by 1.
- * - [SHIFT]+[CTRL]+[PAGEUP] - Increments seconds by 1.
- * - [SHIFT]+[CTRL]+[PAGEDOWN] - Decrements seconds by 1.
+ * - [Page Up] - Increments hours by 1. If 12 am is reached, increment hours to 1 pm and vice versa.
+ * - [Page Down] - Decrements the corresponding field by 1. If 1 pm is reached, decrement hours to 12 am and vice versa.
+ * - [Shift]+[Page Up] - Increments minutes by 1.
+ * - [Shift]+[Page Down] - Decrements minutes by 1.
+ * - [Shift]+[Ctrl]+[Page Up] - Increments seconds by 1.
+ * - [Shift]+[Ctrl]+[Page Down] - Decrements seconds by 1.
* - [A] or [P] - Selects AM or PM respectively.
* - [0]-[9] - Allows direct time selecting (hours/minutes/seconds).
* - [:] - Allows switching between hours/minutes/seconds clocks. If the last clock is displayed and [:] is pressed, the first clock is beind displayed.
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 66c282dafba8..2f00012e9c10 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -61,7 +61,7 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb
* The `ui5-toolbar` provides advanced keyboard handling.
*
* - The control is not interactive, but can contain of interactive elements
- * - [TAB] - iterates through elements
+ * - [Tab] - iterates through elements
*
* ### ES6 Module Import
* `import "@ui5/webcomponents/dist/Toolbar.js";`
diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts
index 51d9c956e3ae..9c414f76b7a8 100644
--- a/packages/main/src/Tree.ts
+++ b/packages/main/src/Tree.ts
@@ -68,15 +68,15 @@ type WalkCallback = (item: TreeItemBase, level: number, index: number) => void;
* The `ui5-tree` provides advanced keyboard handling.
* The user can use the following keyboard shortcuts in order to navigate trough the tree:
*
- * - [UP/DOWN] - Navigates up and down the tree items that are currently visible.
- * - [RIGHT] - Drills down the tree by expanding the tree nodes.
- * - [LEFT] - Goes up the tree and collapses the tree nodes.
+ * - [Up] or [Down] - Navigates up and down the tree items that are currently visible.
+ * - [Right] - Drills down the tree by expanding the tree nodes.
+ * - [Left] - Goes up the tree and collapses the tree nodes.
*
* The user can use the following keyboard shortcuts to perform selection,
* when the `mode` property is in use:
*
- * - [SPACE] - Selects the currently focused item upon keyup.
- * - [ENTER] - Selects the currently focused item upon keydown.
+ * - [Space] - Selects the currently focused item upon keyup.
+ * - [Enter] - Selects the currently focused item upon keydown.
*
* ### ES6 Module Import
* `import "@ui5/webcomponents/dist/Tree.js";`
diff --git a/packages/main/test/pages/List_keyboard_support.html b/packages/main/test/pages/List_keyboard_support.html
index ce03d78c34ae..bc923075f29b 100644
--- a/packages/main/test/pages/List_keyboard_support.html
+++ b/packages/main/test/pages/List_keyboard_support.html
@@ -22,8 +22,8 @@
UI5 Table Web Component
The sample shows the keyboard navigation support of the Table
- - To navigate between items use the [UP] and [DOWN] arrow keys
- - To navigate within an item use the [TAB] and [SHIFT+TAB] keys
+ - To navigate between items use the [Up] and [Down] arrow keys
+ - To navigate within an item use the [Tab] and [SHIFT+TAB] keys
diff --git a/packages/main/test/pages/Menu.html b/packages/main/test/pages/Menu.html
index 72779f1b1bf9..0d62195ae7b3 100644
--- a/packages/main/test/pages/Menu.html
+++ b/packages/main/test/pages/Menu.html
@@ -139,7 +139,7 @@
menu.addEventListener("ui5-before-close", function(event) {
preventBeforeClose.checked && event.preventDefault();
- eventLogger.value += "* [before-close]" + (event.detail.escPressed ? "[Esc]" : "") + (preventBeforeClose.checked ? "[prevented]" : "") + " ";
+ eventLogger.value += "* [before-close]" + (event.detail.escPressed ? "[Escape]" : "") + (preventBeforeClose.checked ? "[prevented]" : "") + " ";
});
menu.addEventListener("ui5-after-close", function() {
diff --git a/packages/main/test/samples/RadioButton.sample.html b/packages/main/test/samples/RadioButton.sample.html
index d43ff8f5594d..f9575fae58d0 100644
--- a/packages/main/test/samples/RadioButton.sample.html
+++ b/packages/main/test/samples/RadioButton.sample.html
@@ -31,7 +31,7 @@ Basic RadioButton Types
- RadioButton in group - navigate via [UP/Right] and [DOWN/Left] arrow keys
+ RadioButton in group - navigate via [Up] or [Right] and [Down], [Left] arrow keys
Group of states
diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
index 4fb1f80d6def..813464edc523 100644
--- a/packages/main/test/specs/DatePicker.spec.js
+++ b/packages/main/test/specs/DatePicker.spec.js
@@ -350,7 +350,7 @@ describe("Date Picker Tests", () => {
assert.ok(await datepicker.isPickerOpen(), "datepicker is open");
});
- it("[Alt] + [UP] toggles the calendar", async () => {
+ it("[Alt] + [Up] toggles the calendar", async () => {
datepicker.id = "#dp9";
assert.notOk(await datepicker.isPickerOpen(), "datepicker is closed");
@@ -366,7 +366,7 @@ describe("Date Picker Tests", () => {
assert.notOk(await datepicker.isPickerOpen(), "datepicker is closed");
});
- it("[Alt] + [DOWN] toggles the calendar", async () => {
+ it("[Alt] + [Down] toggles the calendar", async () => {
datepicker.id = "#dp11";
assert.notOk(await datepicker.isPickerOpen(), "datepicker is closed");
@@ -394,7 +394,7 @@ describe("Date Picker Tests", () => {
await valueHelpIcon.click(); // close the datepicker
});
- it("[SHIFT] + [F4] shows year picker after date picker is open", async () => {
+ it("[Shift] + [F4] shows year picker after date picker is open", async () => {
datepicker.id = "#dp11";
const valueHelpIcon = await datepicker.getValueHelpIcon();
@@ -420,7 +420,7 @@ describe("Date Picker Tests", () => {
});
- it("[SHIFT] + [F4] shows year picker after month picker is open", async () => {
+ it("[Shift] + [F4] shows year picker after month picker is open", async () => {
datepicker.id = "#dp11";
const valueHelpIcon = await datepicker.getValueHelpIcon();
From 7f61f6d60741708d2f2c2fdb1ec2e7874222b510 Mon Sep 17 00:00:00 2001
From: ilhan orhan
Date: Mon, 25 Mar 2024 19:09:16 +0200
Subject: [PATCH 19/60] Update docusaurus.config.ts
---
packages/website/docusaurus.config.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
index 998912429cf3..aa9ae783139c 100644
--- a/packages/website/docusaurus.config.ts
+++ b/packages/website/docusaurus.config.ts
@@ -7,7 +7,7 @@ import packageJson from "./package.json";
console.log(process.env.DEPLOYMENT_TYPE); // eslint-disable-line
const LATEST_URL_PARTH = "/ui5-webcomponents/";
-const NIGHTLY_URL_PARTH = "/ui5-webcomponents/nightly/";
+const NIGHTLY_URL_PARTH = "/ui5-webcomponents/v2/";
const LATEST_DEPLOYMENT = process.env.DEPLOYMENT_TYPE === "latest";
const DEVELOPMENT_ENVIRONMENT = process.env.NODE_ENV === "development";
From 5bfa36d00ff438a2b15ccee2a0797f597145c6ab Mon Sep 17 00:00:00 2001
From: Peter Skelin
Date: Mon, 25 Mar 2024 17:10:10 +0200
Subject: [PATCH 20/60] docs: add reset button in playground (#8531)
---
packages/website/src/components/Editor/index.js | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js
index ae1def266ce7..3fce7f7aedc3 100644
--- a/packages/website/src/components/Editor/index.js
+++ b/packages/website/src/components/Editor/index.js
@@ -10,6 +10,7 @@ import { encodeToBase64, decodeFromBase64 } from "./share.js";
import clsx from "clsx";
import ShareIcon from "../../../local-cdn/local-cdn/icons/dist/v5/share-2.svg";
import { Splitter } from 'react-splitter-light';
+import ResetIcon from "../../../local-cdn/local-cdn/icons/dist/v5/reset.svg";
import DownloadIcon from "../../../local-cdn/local-cdn/icons/dist/v5/download-from-cloud.svg";
import EditIcon from "../../../local-cdn/local-cdn/icons/dist/v5/edit.svg";
import ActionIcon from "../../../local-cdn/local-cdn/icons/dist/v5/action.svg";
@@ -125,6 +126,12 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare =
return files;
}
+ const reset = () => {
+ localStorage.clear("project");
+ location.hash = "";
+ location.reload();
+ }
+
const download = () => {
const files = getSampleFiles();
downloadSample(files);
@@ -332,6 +339,14 @@ ${fixAssetPaths(js)}`,
?
<>
+
+
@@ -76,7 +76,7 @@
class="ui5-color-picker-rgb-input"
disabled="{{inputsDisabled}}"
accessible-name="{{greenInputLabel}}"
- value="{{_color.g}}"
+ value="{{_value.g}}"
>
G
@@ -86,7 +86,7 @@
class="ui5-color-picker-rgb-input"
disabled="{{inputsDisabled}}"
accessible-name="{{blueInputLabel}}"
- value="{{_color.b}}"
+ value="{{_value.b}}"
>
B
diff --git a/packages/main/src/ColorPicker.ts b/packages/main/src/ColorPicker.ts
index a30a253df263..c01d868b6fb5 100644
--- a/packages/main/src/ColorPicker.ts
+++ b/packages/main/src/ColorPicker.ts
@@ -96,7 +96,7 @@ class ColorPicker extends UI5Element {
* @public
*/
@property({ validator: CSSColor, defaultValue: "rgba(255, 255, 255, 1)" })
- color!: string;
+ value!: string;
/**
* Defines the HEX code of the currently selected color
@@ -112,14 +112,14 @@ class ColorPicker extends UI5Element {
* @private
*/
@property({ type: Object })
- _mainColor!: ColorRGB;
+ _mainValue!: ColorRGB;
/**
* Defines the currenty selected color from the main color section.
* @private
*/
@property({ type: Object })
- _color!: ColorRGB;
+ _value!: ColorRGB;
/**
* @private
@@ -179,7 +179,7 @@ class ColorPicker extends UI5Element {
};
// Default main color is red
- this._mainColor = {
+ this._mainValue = {
r: 255,
g: 0,
b: 0,
@@ -192,9 +192,9 @@ class ColorPicker extends UI5Element {
}
onBeforeRendering() {
- // we have the color & _mainColor properties here
- this._color = getRGBColor(this.color);
- const tempColor = `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, 1)`;
+ // we have the color & ._mainValue properties here
+ this._value = getRGBColor(this.value);
+ const tempColor = `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, 1)`;
this._setHex();
this._setValues();
this.style.setProperty(getScopedVarName("--ui5_Color_Picker_Progress_Container_Color"), tempColor);
@@ -260,7 +260,7 @@ class ColorPicker extends UI5Element {
_handleAlphaInput(e: CustomEvent) {
const aphaInputValue: string = (e.target as Input).value;
this._alpha = parseFloat(aphaInputValue);
- this._setColor(this._color);
+ this._setColor(this._value);
}
_handleHueInput(e: CustomEvent) {
@@ -316,18 +316,18 @@ class ColorPicker extends UI5Element {
let tempColor;
switch (target.id) {
case "red":
- tempColor = { ...this._color, r: targetValue };
+ tempColor = { ...this._value, r: targetValue };
break;
case "green":
- tempColor = { ...this._color, g: targetValue };
+ tempColor = { ...this._value, g: targetValue };
break;
case "blue":
- tempColor = { ...this._color, b: targetValue };
+ tempColor = { ...this._value, b: targetValue };
break;
default:
- tempColor = { ...this._color };
+ tempColor = { ...this._value };
}
this._setColor(tempColor);
@@ -335,37 +335,37 @@ class ColorPicker extends UI5Element {
_setMainColor(hueValue: number) {
if (hueValue <= 255) {
- this._mainColor = {
+ this._mainValue = {
r: 255,
g: hueValue,
b: 0,
};
} else if (hueValue <= 510) {
- this._mainColor = {
+ this._mainValue = {
r: 255 - (hueValue - 255),
g: 255,
b: 0,
};
} else if (hueValue <= 765) {
- this._mainColor = {
+ this._mainValue = {
r: 0,
g: 255,
b: hueValue - 510,
};
} else if (hueValue <= 1020) {
- this._mainColor = {
+ this._mainValue = {
r: 0,
g: 765 - (hueValue - 255),
b: 255,
};
} else if (hueValue <= 1275) {
- this._mainColor = {
+ this._mainValue = {
r: hueValue - 1020,
g: 0,
b: 255,
};
} else {
- this._mainColor = {
+ this._mainValue = {
r: 255,
g: 0,
b: 1275 - (hueValue - 255),
@@ -425,7 +425,7 @@ class ColorPicker extends UI5Element {
}
_setColor(color: ColorRGB = { r: 0, g: 0, b: 0 }) {
- this.color = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;
+ this.value = `rgba(${color.r}, ${color.g}, ${color.b}, ${this._alpha})`;
this._wrongHEX = !this.isValidRGBColor(color);
this.fireEvent("change");
}
@@ -435,9 +435,9 @@ class ColorPicker extends UI5Element {
}
_setHex() {
- let red = this._color.r.toString(16),
- green = this._color.g.toString(16),
- blue = this._color.b.toString(16);
+ let red = this._value.r.toString(16),
+ green = this._value.g.toString(16),
+ blue = this._value.b.toString(16);
if (red.length === 1) {
red = `0${red}`;
@@ -453,7 +453,7 @@ class ColorPicker extends UI5Element {
}
_setValues() {
- const hslColours: ColorHSL = RGBToHSL(this._color);
+ const hslColours: ColorHSL = RGBToHSL(this._value);
this._selectedCoordinates = {
x: ((Math.round(hslColours.l * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the width of the circle
y: (256 - (Math.round(hslColours.s * 100) * 2.56)) - PICKER_POINTER_WIDTH, // Center the coordinates, because of the height of the circle
@@ -510,14 +510,14 @@ class ColorPicker extends UI5Element {
get styles() {
return {
mainColor: {
- "background-color": `rgb(${this._mainColor.r}, ${this._mainColor.g}, ${this._mainColor.b})`,
+ "background-color": `rgb(${this._mainValue.r}, ${this._mainValue.g}, ${this._mainValue.b})`,
},
circle: {
left: `${this._selectedCoordinates.x}px`,
top: `${this._selectedCoordinates.y}px`,
},
colorSpan: {
- "background-color": `rgba(${this._color.r}, ${this._color.g}, ${this._color.b}, ${this._alpha})`,
+ "background-color": `rgba(${this._value.r}, ${this._value.g}, ${this._value.b}, ${this._alpha})`,
},
};
}
diff --git a/packages/main/test/pages/ColorPicker.html b/packages/main/test/pages/ColorPicker.html
index 0f5f25b6803f..0f9d453133cf 100644
--- a/packages/main/test/pages/ColorPicker.html
+++ b/packages/main/test/pages/ColorPicker.html
@@ -51,8 +51,8 @@
colorPicker1 = document.getElementById("cp1"),
stepInput = document.getElementById("changeEventCounter");
- colorPicker.addEventListener("ui5-change", function(event) {
- colorLabel.value = event.target.color;
+ colorPicker.addEventListener("ui5-change", () => {
+ colorLabel.value = event.target.value;
});
colorPicker1.addEventListener("ui5-change", function(event) {
diff --git a/packages/main/test/specs/ColorPalette.spec.js b/packages/main/test/specs/ColorPalette.spec.js
index 16b7de97bac4..b8e0d0513fa0 100644
--- a/packages/main/test/specs/ColorPalette.spec.js
+++ b/packages/main/test/specs/ColorPalette.spec.js
@@ -84,7 +84,7 @@ describe("ColorPalette interactions", () => {
assert.ok(colorPicker, "Color picker is rendered");
- await colorPicker.setProperty("color", "#fafafa");
+ await colorPicker.setProperty("value", "#fafafa");
// The initial focus is on the HEX input
await browser.keys("Tab"); // Slider 1
diff --git a/packages/main/test/specs/ColorPicker.spec.js b/packages/main/test/specs/ColorPicker.spec.js
index 978031e96173..2fe067ae1e6c 100644
--- a/packages/main/test/specs/ColorPicker.spec.js
+++ b/packages/main/test/specs/ColorPicker.spec.js
@@ -41,7 +41,7 @@ describe("Color Picker general interaction", () => {
const colorPicker = await browser.$("#cp1");
const alphaInput = await colorPicker.shadow$("#alpha");
- await colorPicker.setAttribute("color", "rgba(100, 100, 100, 1)");
+ await colorPicker.setAttribute("value", "rgba(100, 100, 100, 1)");
await alphaInput.click();
await browser.keys('Delete');
@@ -49,7 +49,7 @@ describe("Color Picker general interaction", () => {
await browser.keys("0");
await browser.keys("Tab");
- assert.strictEqual(await colorPicker.getAttribute("color"), "rgba(100, 100, 100, 0)", "Alpha value propely changed");
+ assert.strictEqual(await colorPicker.getAttribute("value"), "rgba(100, 100, 100, 0)", "Alpha value propely changed");
});
it("Alpha value change via the slider", async () => {
@@ -59,11 +59,11 @@ describe("Color Picker general interaction", () => {
await stepInput.setAttribute("value", 0);
await colorPicker.scrollIntoView();
- await colorPicker.setAttribute("color", "rgba(183, 61, 61, 1)");
+ await colorPicker.setAttribute("value", "rgba(183, 61, 61, 1)");
await alphaSliderHandle.dragAndDrop({ x: 200, y: 0 });
- assert.strictEqual(await colorPicker.getAttribute("color"), "rgba(183, 61, 61, 0.83)", "Alpha value propely changed");
+ assert.strictEqual(await colorPicker.getAttribute("value"), "rgba(183, 61, 61, 0.83)", "Alpha value propely changed");
assert.strictEqual(await stepInput.getAttribute("value"), "1", "Change event gets fired on alpha slider change");
});
@@ -73,11 +73,11 @@ describe("Color Picker general interaction", () => {
const stepInput = await browser.$("#changeEventCounter");
await colorPicker.scrollIntoView();
- await colorPicker.setAttribute("color", "rgba(183, 61, 61, 0.83)");
+ await colorPicker.setAttribute("value", "rgba(183, 61, 61, 0.83)");
await hueSliderHandle.dragAndDrop({ x: 200, y: 0 });
- assert.strictEqual(await colorPicker.getAttribute("color"), "rgba(182, 61, 184, 0.83)", "Color properly changed");
+ assert.strictEqual(await colorPicker.getAttribute("value"), "rgba(182, 61, 184, 0.83)", "Color properly changed");
assert.strictEqual(await stepInput.getAttribute("value"), "2", "Change event gets fired on hue slider change");
});
@@ -85,19 +85,19 @@ describe("Color Picker general interaction", () => {
const colorPicker = await browser.$("#cp3");
const hexInput = await colorPicker.shadow$(".ui5-color-picker-hex-input");
- await colorPicker.setProperty("color", "rgb(0, 255, 0)");
+ await colorPicker.setProperty("value", "rgb(0, 255, 0)");
assert.strictEqual(await hexInput.getProperty("value"), "00ff00", "RGB value is parsed correctly");
- await colorPicker.setProperty("color", "rgba(255, 0, 255, 1)");
+ await colorPicker.setProperty("value", "rgba(255, 0, 255, 1)");
assert.strictEqual(await hexInput.getProperty("value"), "ff00ff", "RGBA value is parsed correctly");
- await colorPicker.setProperty("color", "#fafafa");
+ await colorPicker.setProperty("value", "#fafafa");
assert.strictEqual(await hexInput.getProperty("value"), "fafafa", "HEX value is parsed correctly");
- await colorPicker.setProperty("color", "#123");
+ await colorPicker.setProperty("value", "#123");
assert.strictEqual(await hexInput.getProperty("value"), "112233", "HEX shorthand value is parsed correctly");
- await colorPicker.setProperty("color", "grey");
+ await colorPicker.setProperty("value", "grey");
assert.strictEqual(await hexInput.getProperty("value"), "808080", "CSS values are parsed correctly");
});
@@ -110,7 +110,7 @@ describe("Color Picker general interaction", () => {
await browser.keys("0854a0");
await browser.keys("Enter");
- const color = await colorPicker.getAttribute("color");
+ const value = await colorPicker.getAttribute("value");
await hueSliderHandle.dragAndDrop({ x: 200, y: 0 });
@@ -118,7 +118,7 @@ describe("Color Picker general interaction", () => {
await browser.keys("0854a0");
await browser.keys("Enter");
- assert.strictEqual(await colorPicker.getAttribute("color"), color, "Color is changed to the old color");
+ assert.strictEqual(await colorPicker.getAttribute("value"), value, "Color is changed to the old color");
});
it("Hue value remains unchanged when user presses over the main color section", async () => {
diff --git a/packages/playground/_stories/main/ColorPicker/ColorPicker.stories.ts b/packages/playground/_stories/main/ColorPicker/ColorPicker.stories.ts
index a4fb809db068..71c8ed6a8b69 100644
--- a/packages/playground/_stories/main/ColorPicker/ColorPicker.stories.ts
+++ b/packages/playground/_stories/main/ColorPicker/ColorPicker.stories.ts
@@ -14,10 +14,10 @@ export default {
} as Meta;
const Template: UI5StoryArgs = (args) => html`Picker `;
export const Basic = Template.bind({});
Basic.args = {
- color: "rgba(220, 208, 255, 1)",
+ value: "rgba(220, 208, 255, 1)",
};
diff --git a/packages/website/docs/_samples/main/ColorPicker/Basic/sample.html b/packages/website/docs/_samples/main/ColorPicker/Basic/sample.html
index b0c833a2206b..e3ff21bc4645 100644
--- a/packages/website/docs/_samples/main/ColorPicker/Basic/sample.html
+++ b/packages/website/docs/_samples/main/ColorPicker/Basic/sample.html
@@ -11,7 +11,7 @@
- Picker
+ Picker
From 83ee0cc77bfc22e9eac68eda8af2cb8f98557e7e Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Wed, 27 Mar 2024 13:00:11 +0200
Subject: [PATCH 28/60] refactor(tools): enable TypeScript as default (#8521)
With this update, TypeScript is now enabled by default for the 'tools' package, along with cleanup for the configuration options.
BREAKING CHANGE: JavaScript projects may not function properly with the tools package.
Related to: #8461
---
packages/base/package-scripts.cjs | 6 +--
.../template/package-scripts.js | 1 -
packages/fiori/package-scripts.cjs | 1 -
.../icons-business-suite/package-scripts.cjs | 1 -
packages/main/package-scripts.cjs | 1 -
packages/theming/package-scripts.cjs | 4 +-
packages/tools/components-package/nps.js | 27 +++++-------
packages/tools/icons-collection/nps.js | 8 ++--
.../css-processor-components.mjs | 7 +---
.../css-processors/css-processor-themes.mjs | 7 +---
packages/tools/lib/css-processors/shared.mjs | 16 +-------
.../tools/lib/generate-json-imports/i18n.js | 41 ++-----------------
.../tools/lib/generate-json-imports/themes.js | 34 +--------------
packages/tools/lib/hbs2lit/src/compiler.js | 4 +-
packages/tools/lib/hbs2lit/src/litVisitor2.js | 22 +++-------
.../tools/lib/hbs2lit/src/svgProcessor.js | 5 +--
.../hbs2ui5/RenderTemplates/LitRenderer.js | 4 --
packages/tools/lib/hbs2ui5/index.js | 2 +-
packages/tools/lib/i18n/defaults.js | 12 ++----
19 files changed, 42 insertions(+), 161 deletions(-)
diff --git a/packages/base/package-scripts.cjs b/packages/base/package-scripts.cjs
index 5783ff7574dc..11b367b05fdc 100644
--- a/packages/base/package-scripts.cjs
+++ b/packages/base/package-scripts.cjs
@@ -15,8 +15,8 @@ const viteConfig = `-c "${require.resolve("@ui5/webcomponents-tools/components-p
const scripts = {
clean: "rimraf src/generated && rimraf dist && rimraf .port",
lint: `eslint .`,
- generate: "cross-env UI5_TS=true nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates",
- prepare: "cross-env UI5_TS=true nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates typescript integrate.no-remaining-require",
+ generate: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates",
+ prepare: "nps clean integrate copy generateAssetParameters generateVersionInfo generateStyles generateTemplates typescript integrate.no-remaining-require",
typescript: "tsc -b",
integrate: {
default: "nps integrate.copy-used-modules integrate.amd-to-es6 integrate.third-party",
@@ -40,7 +40,7 @@ const scripts = {
generateAssetParameters: `node "${assetParametersScript}"`,
generateVersionInfo: `node "${versionScript}"`,
generateStyles: `node "${stylesScript}"`,
- generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true UI5_TS=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
+ generateTemplates: `mkdirp src/generated/templates && cross-env UI5_BASE=true node "${LIB}/hbs2ui5/index.js" -d test/elements -o src/generated/templates`,
generateAPI: {
default: "nps generateAPI.generateCEM generateAPI.validateCEM",
generateCEM: `cem analyze --config "${LIB}/cem/custom-elements-manifest.config.mjs" --dev`,
diff --git a/packages/create-package/template/package-scripts.js b/packages/create-package/template/package-scripts.js
index 5ffd5958540e..9cdebf1927a7 100644
--- a/packages/create-package/template/package-scripts.js
+++ b/packages/create-package/template/package-scripts.js
@@ -2,7 +2,6 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
const options = {
port: 8080,
- typescript: true,
};
const scripts = getScripts(options);
diff --git a/packages/fiori/package-scripts.cjs b/packages/fiori/package-scripts.cjs
index d0d3ced336d7..605392e28a86 100644
--- a/packages/fiori/package-scripts.cjs
+++ b/packages/fiori/package-scripts.cjs
@@ -17,7 +17,6 @@ const options = {
portStep: 2,
dev: true,
fioriPackage: true,
- typescript: true,
noWatchTS: true,
illustrationsData: [
{
diff --git a/packages/icons-business-suite/package-scripts.cjs b/packages/icons-business-suite/package-scripts.cjs
index 4e495d819594..af644c7a7aff 100644
--- a/packages/icons-business-suite/package-scripts.cjs
+++ b/packages/icons-business-suite/package-scripts.cjs
@@ -3,7 +3,6 @@ const getScripts = require("@ui5/webcomponents-tools/icons-collection/nps.js");
const options = {
collectionName: "SAP-icons-business-suite",
versions: ["v1", "v2"],
- typescript: true,
};
const scripts = getScripts(options);
diff --git a/packages/main/package-scripts.cjs b/packages/main/package-scripts.cjs
index b0b5017282fc..1b3a58a91359 100644
--- a/packages/main/package-scripts.cjs
+++ b/packages/main/package-scripts.cjs
@@ -3,7 +3,6 @@ const getScripts = require("@ui5/webcomponents-tools/components-package/nps.js")
const options = {
port: 8080,
portStep: 2,
- typescript: true,
noWatchTS: true,
dev: true,
};
diff --git a/packages/theming/package-scripts.cjs b/packages/theming/package-scripts.cjs
index b83810bb2e8b..1aba6af5b642 100644
--- a/packages/theming/package-scripts.cjs
+++ b/packages/theming/package-scripts.cjs
@@ -10,9 +10,9 @@ const LIB = path.join(__dirname, `../tools/lib/`);
module.exports = {
scripts: {
clean: "rimraf dist && rimraf src/generated",
- generate: `cross-env UI5_TS=true nps build.postcss build.jsonImports`,
+ generate: "nps build.postcss build.jsonImports",
build: {
- default: `cross-env UI5_TS=true nps clean build.src build.postcss build.jsonImports build.typescript generateReport`,
+ default: "nps clean build.src build.postcss build.jsonImports build.typescript generateReport",
src: `copy-and-watch "src/**/*.{json}" dist/`,
typescript: "tsc",
postcss: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
diff --git a/packages/tools/components-package/nps.js b/packages/tools/components-package/nps.js
index bb558a95fa64..de355c544faa 100644
--- a/packages/tools/components-package/nps.js
+++ b/packages/tools/components-package/nps.js
@@ -12,22 +12,17 @@ const getScripts = (options) => {
// The script creates the "src/generated/js-imports/Illustration.js" file that registers loaders (dynamic JS imports) for each illustration
const createIllustrationsLoadersScript = illustrationsData.map(illustrations => `node ${LIB}/generate-js-imports/illustrations.js ${illustrations.destinationPath} ${illustrations.dynamicImports.outputFile} ${illustrations.set} ${illustrations.collection} ${illustrations.dynamicImports.location} ${illustrations.dynamicImports.filterOut.join(" ")}`).join(" && ");
- const tsOption = options.typescript;
- const tsCommandOld = tsOption ? "tsc" : "";
- let tsWatchCommandStandalone = tsOption ? "tsc --watch" : "";
+ let tsWatchCommandStandalone = "tsc --watch";
// this command is only used for standalone projects. monorepo projects get their watch from vite, so opt-out here
if (options.noWatchTS) {
tsWatchCommandStandalone = "";
}
- const tsCrossEnv = tsOption ? "cross-env UI5_TS=true" : "";
- if (tsOption) {
- try {
- require("typescript");
- } catch(e) {
- console.error(`TypeScript is not found. Try to install it by running \`npm install --save-dev typescript\` if you are using npm or by running \`yarn add --dev typescript\` if you are using yarn.`);
- process.exit(e.code);
- }
+ try {
+ require("typescript");
+ } catch(e) {
+ console.error(`TypeScript is not found. Try to install it by running \`npm install --save-dev typescript\` if you are using npm or by running \`yarn add --dev typescript\` if you are using yarn.`);
+ process.exit(e.code);
}
let viteConfig;
@@ -56,19 +51,19 @@ const getScripts = (options) => {
lint: `eslint . ${eslintConfig}`,
lintfix: `eslint . ${eslintConfig} --fix`,
generate: {
- default: `${tsCrossEnv} nps prepare.all`,
+ default: "nps prepare.all",
all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps copy" "nps build.illustrations"',
styleRelated: "nps build.styles build.jsonImports build.jsImports",
},
prepare: {
- default: `${tsCrossEnv} nps clean prepare.all copy prepare.typescript generateAPI`,
+ default: "nps clean prepare.all copy prepare.typescript generateAPI",
all: 'concurrently "nps build.templates" "nps build.i18n" "nps prepare.styleRelated" "nps build.illustrations"',
styleRelated: "nps build.styles build.jsonImports build.jsImports",
- typescript: tsCommandOld,
+ typescript: "tsc",
},
build: {
default: "nps prepare lint build.bundle", // build.bundle2
- templates: `mkdirp src/generated/templates && ${tsCrossEnv} node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
+ templates: `mkdirp src/generated/templates && node "${LIB}/hbs2ui5/index.js" -d src/ -o src/generated/templates`,
styles: {
default: `concurrently "nps build.styles.themes" "nps build.styles.components" "nps build.styles.componentStyles"`,
themes: `node "${LIB}/css-processors/css-processor-themes.mjs"`,
@@ -100,7 +95,7 @@ const getScripts = (options) => {
props: `node "${LIB}/copy-and-watch/index.js" --silent "src/**/*.properties" dist/`,
},
watch: {
- default: `${tsCrossEnv} concurrently "nps watch.templates" "nps watch.typescript" "nps watch.api" "nps watch.src" "nps watch.styles" "nps watch.i18n" "nps watch.props"`,
+ default: `concurrently "nps watch.templates" "nps watch.typescript" "nps watch.api" "nps watch.src" "nps watch.styles" "nps watch.i18n" "nps watch.props"`,
devServer: 'concurrently "nps watch.default" "nps watch.bundle"',
src: 'nps "copy.src --watch --safe --skip-initial-copy"',
typescript: tsWatchCommandStandalone,
diff --git a/packages/tools/icons-collection/nps.js b/packages/tools/icons-collection/nps.js
index 39bab7a9d141..f719c99ff994 100644
--- a/packages/tools/icons-collection/nps.js
+++ b/packages/tools/icons-collection/nps.js
@@ -41,16 +41,14 @@ const copyIconAssetsCommand = (options) => {
const getScripts = (options) => {
const createJSImportsCmd = createIconImportsCommand(options);
const copyAssetsCmd = copyIconAssetsCommand(options);
- const tsCommand = options.typescript ? "tsc --build" : "";
- const tsCrossEnv = options.typescript ? "cross-env UI5_TS=true" : "";
const scripts = {
clean: "rimraf dist && rimraf src/generated",
copy: copyAssetsCmd,
- generate: `${tsCrossEnv} nps clean copy build.i18n build.icons build.jsonImports copyjson`,
+ generate: "nps clean copy build.i18n build.icons build.jsonImports copyjson",
copyjson: "copy-and-watch \"src/generated/**/*.json\" dist/generated/",
build: {
- default: `${tsCrossEnv} nps clean copy build.i18n typescript build.icons build.jsonImports`,
+ default: "nps clean copy build.i18n typescript build.icons build.jsonImports",
i18n: {
default: "nps build.i18n.defaultsjs build.i18n.json",
defaultsjs: `mkdirp dist/generated/i18n && node "${LIB}/i18n/defaults.js" src/i18n src/generated/i18n`,
@@ -62,7 +60,7 @@ const getScripts = (options) => {
},
icons: createJSImportsCmd,
},
- typescript: tsCommand,
+ typescript: "tsc --build",
};
return scripts;
diff --git a/packages/tools/lib/css-processors/css-processor-components.mjs b/packages/tools/lib/css-processors/css-processor-components.mjs
index 7c0565fc3624..ad47d2ebb37f 100644
--- a/packages/tools/lib/css-processors/css-processor-components.mjs
+++ b/packages/tools/lib/css-processors/css-processor-components.mjs
@@ -7,9 +7,6 @@ import chokidar from "chokidar";
import scopeVariables from "./scope-variables.mjs";
import { writeFileIfChanged, getFileContent } from "./shared.mjs";
-const tsMode = process.env.UI5_TS === "true";
-const extension = tsMode ? ".css.ts" : ".css.js";
-
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
const inputFilesGlob = "src/themes/*.css";
const restArgs = process.argv.slice(2);
@@ -27,8 +24,8 @@ let customPlugin = {
writeFile(f.path, newText);
// JS/TS
- const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
- const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`", true);
+ const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", ".css.ts");
+ const jsContent = getFileContent(jsPath, packageJSON.name, "\`" + newText + "\`", true);
writeFileIfChanged(jsPath, jsContent);
});
})
diff --git a/packages/tools/lib/css-processors/css-processor-themes.mjs b/packages/tools/lib/css-processors/css-processor-themes.mjs
index 8ec918a8c94a..7cae5c53ca9f 100644
--- a/packages/tools/lib/css-processors/css-processor-themes.mjs
+++ b/packages/tools/lib/css-processors/css-processor-themes.mjs
@@ -8,9 +8,6 @@ import combineDuplicatedSelectors from "../postcss-combine-duplicated-selectors/
import { writeFileIfChanged, stripThemingBaseContent, getFileContent } from "./shared.mjs";
import scopeVariables from "./scope-variables.mjs";
-const tsMode = process.env.UI5_TS === "true";
-const extension = tsMode ? ".css.ts" : ".css.js";
-
const packageJSON = JSON.parse(fs.readFileSync("./package.json"))
let inputFiles = await globby("src/**/parameters-bundle.css");
@@ -50,8 +47,8 @@ let scopingPlugin = {
writeFileIfChanged(jsonPath, JSON.stringify({_: data}));
// JS/TS
- const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", extension);
- const jsContent = getFileContent(tsMode, jsPath, packageJSON.name, "\`" + newText + "\`");
+ const jsPath = f.path.replace(/dist[\/\\]css/, "src/generated/").replace(".css", ".css.ts");
+ const jsContent = getFileContent(jsPath, packageJSON.name, "\`" + newText + "\`");
writeFileIfChanged(jsPath, jsContent);
});
})
diff --git a/packages/tools/lib/css-processors/shared.mjs b/packages/tools/lib/css-processors/shared.mjs
index b19101eaab52..af78bb424c01 100644
--- a/packages/tools/lib/css-processors/shared.mjs
+++ b/packages/tools/lib/css-processors/shared.mjs
@@ -47,15 +47,7 @@ registerThemePropertiesLoader("${packageName}", "${DEFAULT_THEME}", async () =>
`;
};
-const getFileContent = (tsMode, targetFile, packageName, css, includeDefaultTheme) => {
- if (tsMode) {
- return getTSContent(targetFile, packageName, css, includeDefaultTheme);
- }
-
- return getJSContent(targetFile, packageName, css, includeDefaultTheme);
-}
-
-const getTSContent = (targetFile, packageName, css, includeDefaultTheme) => {
+const getFileContent = (targetFile, packageName, css, includeDefaultTheme) => {
const typeImport = "import type { StyleData } from \"@ui5/webcomponents-base/dist/types.js\";"
const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
@@ -67,10 +59,4 @@ export default styleData;
`;
}
-const getJSContent = (targetFile, packageName, css, includeDefaultTheme) => {
- const defaultTheme = includeDefaultTheme ? getDefaultThemeCode(packageName) : "";
-
- return `${defaultTheme}export default {packageName:"${packageName}",fileName:"${targetFile.substr(targetFile.lastIndexOf("themes"))}",content:${css}}`
-}
-
export { writeFileIfChanged, stripThemingBaseContent, getFileContent}
\ No newline at end of file
diff --git a/packages/tools/lib/generate-json-imports/i18n.js b/packages/tools/lib/generate-json-imports/i18n.js
index 74e8d1d1a14b..b020b55117ab 100644
--- a/packages/tools/lib/generate-json-imports/i18n.js
+++ b/packages/tools/lib/generate-json-imports/i18n.js
@@ -1,16 +1,12 @@
const fs = require("fs").promises;
const path = require('path');
-const isTypeScript = process.env.UI5_TS;
-const ext = isTypeScript ? 'ts' : 'js';
-
const generate = async () => {
const packageName = JSON.parse(await fs.readFile("package.json")).name;
const inputFolder = path.normalize(process.argv[2]);
- const outputFile = path.normalize(`${process.argv[3]}/i18n-static.${ext}`);
- const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.${ext}`);
+ const outputFileDynamic = path.normalize(`${process.argv[3]}/i18n.ts`);
// All languages present in the file system
const files = await fs.readdir(inputFolder);
@@ -19,46 +15,16 @@ const generate = async () => {
return matches ? matches[1] : undefined;
}).filter(key => !!key);
- let contentStatic, contentDynamic;
+ let contentDynamic;
// No i18n - just import dependencies, if any
if (languages.length === 0) {
- contentStatic = "";
contentDynamic = "";
// There is i18n - generate the full file
} else {
// Keys for the array
- const languagesKeysString = languages.map(key => `"${key}": _${key},`).join("\n\t");
const languagesKeysStringArray = languages.map(key => `"${key}",`).join("\n\t");
- // Actual imports for json assets
- const assetsImportsString = languages.map(key => `import _${key} from "../assets/i18n/messagebundle_${key}.json";`).join("\n");
-
- // static imports
- contentStatic = `// @ts-nocheck
-import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registries/i18n.js";
-
-${assetsImportsString}
-
-const bundleMap = {
- ${languagesKeysString}
-};
-
-const fetchMessageBundle = async (localeId) => {
- if (typeof bundleMap[localeId] === "object") {
- // inlined from build
- throw new Error("[i18n] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs")
- }
- return (await fetch(bundleMap[localeId])).json()
-}
-
-const localeIds = [${languagesKeysStringArray}];
-
-localeIds.forEach(localeId => {
- registerI18nLoader("${packageName}", localeId, fetchMessageBundle);
-});
-`;
-
// Actual imports for json assets
const dynamicImportsString = languages.map(key => ` case "${key}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-messagebundle-${key}" */ "../assets/i18n/messagebundle_${key}.json")).default;`).join("\n");
@@ -91,9 +57,8 @@ import { registerI18nLoader } from "@ui5/webcomponents-base/dist/asset-registrie
}
- await fs.mkdir(path.dirname(outputFile), { recursive: true });
+ await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
return Promise.all([
- fs.writeFile(outputFile, contentStatic),
fs.writeFile(outputFileDynamic, contentDynamic),
]);
}
diff --git a/packages/tools/lib/generate-json-imports/themes.js b/packages/tools/lib/generate-json-imports/themes.js
index 4f83c25fd767..d2f94a32e4d8 100644
--- a/packages/tools/lib/generate-json-imports/themes.js
+++ b/packages/tools/lib/generate-json-imports/themes.js
@@ -2,13 +2,9 @@ const fs = require("fs").promises;
const path = require('path');
const assets = require("../../assets-meta.js");
-const isTypeScript = process.env.UI5_TS;
-const ext = isTypeScript ? 'ts' : 'js';
-
const generate = async () => {
const inputFolder = path.normalize(process.argv[2]);
- const outputFile = path.normalize(`${process.argv[3]}/Themes-static.${ext}`);
- const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.${ext}`);
+ const outputFileDynamic = path.normalize(`${process.argv[3]}/Themes.ts`);
// All supported optional themes
const allThemes = assets.themes.all;
@@ -22,34 +18,9 @@ const generate = async () => {
const packageName = JSON.parse(await fs.readFile("package.json")).name;
- const importLines = themesOnFileSystem.map(theme => `import ${theme} from "../assets/themes/${theme}/parameters-bundle.css.json";`).join("\n");
- const themeUrlsByName = "{\n" + themesOnFileSystem.join(",\n") + "\n}";
const availableThemesArray = `[${themesOnFileSystem.map(theme => `"${theme}"`).join(", ")}]`;
const dynamicImportLines = themesOnFileSystem.map(theme => `\t\tcase "${theme}": return (await import(/* webpackChunkName: "${packageName.replace("@", "").replace("/", "-")}-${theme.replace("_", "-")}-parameters-bundle" */"../assets/themes/${theme}/parameters-bundle.css.json")).default;`).join("\n");
-
-// static imports file content
- const contentStatic = `// @ts-nocheck
-import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
-
-${importLines}
-
-const themeUrlsByName = ${themeUrlsByName};
-const isInlined = obj => typeof (obj) === "object";
-
-const loadThemeProperties = async (themeName) => {
- if (typeof themeUrlsByName[themeName] === "object") {
- // inlined from build
- throw new Error("[themes] Inlined JSON not supported with static imports of assets. Use dynamic imports of assets or configure JSON imports as URLs");
- }
- return (await fetch(themeUrlsByName[themeName])).json();
-};
-
-${availableThemesArray}
- .forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadThemeProperties));
-`;
-
-
// dynamic imports file content
const contentDynamic = `// @ts-nocheck
import { registerThemePropertiesLoader } from "@ui5/webcomponents-base/dist/asset-registries/Themes.js";
@@ -73,9 +44,8 @@ ${availableThemesArray}
.forEach(themeName => registerThemePropertiesLoader("${packageName}", themeName, loadAndCheck));
`;
- await fs.mkdir(path.dirname(outputFile), { recursive: true });
+ await fs.mkdir(path.dirname(outputFileDynamic), { recursive: true });
return Promise.all([
- fs.writeFile(outputFile, contentStatic),
fs.writeFile(outputFileDynamic, contentDynamic)
]);
};
diff --git a/packages/tools/lib/hbs2lit/src/compiler.js b/packages/tools/lib/hbs2lit/src/compiler.js
index 8b1740402aa6..5a46c7c963ff 100644
--- a/packages/tools/lib/hbs2lit/src/compiler.js
+++ b/packages/tools/lib/hbs2lit/src/compiler.js
@@ -17,12 +17,10 @@ const hbs2lit = async (file, componentName) => {
sPreprocessed = removeWhiteSpaces(sPreprocessed);
- const blockSignature = process.env.UI5_TS ? `this: ${componentName}` : ""
-
// icons hack
if (sPreprocessed.startsWith("")) {
return `
- function block0 (${blockSignature}) {
+ function block0 (this: ${componentName}) {
return svg\`${sPreprocessed}\`
}`;
}
diff --git a/packages/tools/lib/hbs2lit/src/litVisitor2.js b/packages/tools/lib/hbs2lit/src/litVisitor2.js
index 557922bb135f..73837248da2c 100644
--- a/packages/tools/lib/hbs2lit/src/litVisitor2.js
+++ b/packages/tools/lib/hbs2lit/src/litVisitor2.js
@@ -37,8 +37,7 @@ function HTMLLitVisitor(componentName, debug) {
this.blockLevel = 0;
this.componentName = componentName
const blockParametersDefinitionTS = [`this: ${componentName}`, "context: UI5Element", "tags: string[]", "suffix: string | undefined"];
- const blockParametersDefinitionJS = ["context", "tags", "suffix"];
- this.blockParametersDefinition = process.env.UI5_TS ? blockParametersDefinitionTS : blockParametersDefinitionJS;
+ this.blockParametersDefinition = blockParametersDefinitionTS;
this.blockParametersUsage = ["this", "context", "tags", "suffix"];
this.paths = []; //contains all normalized relative paths
this.debug = debug;
@@ -110,11 +109,7 @@ HTMLLitVisitor.prototype.MustacheStatement = function(mustache) {
if (isNodeValue && !mustache.escaped) {
parsedCode = `\${unsafeHTML(${path})}`;
} else if (hasCalculatingClasses) {
- if (process.env.UI5_TS) {
- parsedCode = `\${classMap(${path} as ClassMapValue)}`;
- } else {
- parsedCode = `\${classMap(${path})}`;
- }
+ parsedCode = `\${classMap(${path} as ClassMapValue)}`;
} else if (isStyleAttribute) {
parsedCode = `\${styleMap(${path})}`;
} else if (skipIfDefined){
@@ -180,8 +175,7 @@ function visitEachBlock(block) {
visitSubExpression.call(this, block);
const reapeatDirectiveParamsTS = "(item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number)";
- const reapeatDirectiveParamsJS = "(item, index) => item._id || index, (item, index)";
- const repleatDirectiveParams = process.env.UI5_TS ? reapeatDirectiveParamsTS : reapeatDirectiveParamsJS;
+ const repleatDirectiveParams = reapeatDirectiveParamsTS;
this.blocks[this.currentKey()] += "${ repeat(" + normalizePath.call(this, block.params[0].original) + ", " + repleatDirectiveParams + " => ";
this.paths.push(normalizePath.call(this, block.params[0].original));
this.blockLevel++;
@@ -191,13 +185,9 @@ function visitEachBlock(block) {
if (!this.blockParametersUsage.includes("index")) {
// last item is not index, but an each block is processed, add the paramters for further nested blocks
bParamAdded = true;
- if (process.env.UI5_TS) {
- this.blockParametersDefinition.push("item: any");
- this.blockParametersDefinition.push("index: number");
- } else {
- this.blockParametersDefinition.push("item");
- this.blockParametersDefinition.push("index");
- }
+ this.blockParametersDefinition.push("item: any");
+ this.blockParametersDefinition.push("index: number");
+
this.blockParametersUsage.push("item");
this.blockParametersUsage.push("index");
}
diff --git a/packages/tools/lib/hbs2lit/src/svgProcessor.js b/packages/tools/lib/hbs2lit/src/svgProcessor.js
index 203ddc97fcca..032f058a4f67 100644
--- a/packages/tools/lib/hbs2lit/src/svgProcessor.js
+++ b/packages/tools/lib/hbs2lit/src/svgProcessor.js
@@ -48,13 +48,10 @@ function getSVGBlock(input, blockCounter) {
const definitionTS = `\nfunction blockSVG${blockCounter} (this: any, context: UI5Element, tags: string[], suffix: string | undefined) {
return svg\`${input}\`;
};`;
- const definitionJS = `\nfunction blockSVG${blockCounter} (context, tags, suffix) {
- return svg\`${input}\`;
- };`;
return {
usage: `\${blockSVG${blockCounter}.call(this, context, tags, suffix)}`,
- definition: process.env.UI5_TS ? definitionTS : definitionJS,
+ definition: definitionTS,
};
}
diff --git a/packages/tools/lib/hbs2ui5/RenderTemplates/LitRenderer.js b/packages/tools/lib/hbs2ui5/RenderTemplates/LitRenderer.js
index 8cfc97e79cab..77bcd62478e5 100644
--- a/packages/tools/lib/hbs2ui5/RenderTemplates/LitRenderer.js
+++ b/packages/tools/lib/hbs2ui5/RenderTemplates/LitRenderer.js
@@ -1,8 +1,4 @@
const tsImports = (controlName, hasTypes) => {
- if (!process.env.UI5_TS) {
- return "";
- }
-
const importPrefix = process.env.UI5_BASE ? "../../../" : "@ui5/webcomponents-base/dist/"
return `import type UI5Element from "${importPrefix}UI5Element.js";
diff --git a/packages/tools/lib/hbs2ui5/index.js b/packages/tools/lib/hbs2ui5/index.js
index da17a5a26018..7bb0a4b4d682 100644
--- a/packages/tools/lib/hbs2ui5/index.js
+++ b/packages/tools/lib/hbs2ui5/index.js
@@ -87,7 +87,7 @@ const writeRenderers = async (outputDir, controlName, fileContent) => {
await fs.mkdir(outputDir, { recursive: true });
- const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.${process.env.UI5_TS ? "ts" : "js"}`;
+ const compiledFilePath = `${outputDir}${path.sep}${controlName}Template.lit.ts`;
// strip DOS line endings because the break the source maps
let fileContentUnix = fileContent.replace(/\r\n/g, "\n");
diff --git a/packages/tools/lib/i18n/defaults.js b/packages/tools/lib/i18n/defaults.js
index 4daea2366bb7..0feca2d53a78 100644
--- a/packages/tools/lib/i18n/defaults.js
+++ b/packages/tools/lib/i18n/defaults.js
@@ -8,9 +8,8 @@ const generate = async () => {
const messageBundle = path.normalize(`${process.argv[2]}/messagebundle.properties`);
const messageBundleDefaultLanguage = path.normalize(`${process.argv[2]}/messagebundle_${defaultLanguage}.properties`);
- const tsMode = process.env.UI5_TS === "true"; // In Typescript mode, we output .ts files and set the required types, otherwise - output pure .js files
- const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.${tsMode ? "ts": "js"}`);
+ const outputFile = path.normalize(`${process.argv[3]}/i18n-defaults.ts`);
if (!messageBundle || !outputFile) {
return;
@@ -31,7 +30,7 @@ const generate = async () => {
// (2) as the messagebundle.properties file is always written in English,
// it makes sense to consider the messagebundle.properties content only when the default language is "en".
if (defaultLanguage === "en") {
- defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
+ defaultLanguageProperties = Object.assign({}, defaultLanguageProperties, properties);
}
/*
@@ -47,10 +46,7 @@ const generate = async () => {
let effectiveValue = defaultLanguageValue || value;
effectiveValue = effectiveValue.replace(/\"/g, "\\\""); // escape double quotes in translations
- if (tsMode) {
- return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
- }
- return `const ${key} = {key: "${key}", defaultText: "${effectiveValue}"};`;
+ return `const ${key}: I18nText = {key: "${key}", defaultText: "${effectiveValue}"};`;
};
/*
@@ -68,7 +64,7 @@ const generate = async () => {
const texts = textKeys.map(prop => getTextInfo(prop, properties[prop], defaultLanguageProperties && defaultLanguageProperties[prop])).join('');
// tabs are intentionally mixed to have proper identation in the produced file
- return `${tsMode ? `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";` : ""}
+ return `import { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
${texts}
export {${textKeys.join()}};`;
};
From 8f6a40fb2bf4233800f8b39d37e219344246df4a Mon Sep 17 00:00:00 2001
From: Boyan Rakilovski
Date: Wed, 27 Mar 2024 15:12:55 +0200
Subject: [PATCH 29/60] refactor(ui5-color-palette): remove deprecated APIs
(#8542)
Removes the `openPopover` and `showAt` methods from the `ui5-color-palette-popover`.
BREAKING CHANGE:
The `openPopover` and `showAt` methods are removed in favor of `open` and `opener` properties. If you previously used the imperative API:
```js
button.addEventListener("click", function(event) {
colorPalettePopover.showAt(this);
});
```
Now the declarative API should be used instead:
```html
Open
```
```js
button.addEventListener("click", function(event) {
colorPalettePopover.open = !colorPalettePopover.open;
});
```
Related to: #8461
---
packages/main/src/ColorPalettePopover.ts | 25 ------------------
.../main/test/pages/ColorPalettePopover.html | 26 +++++++++----------
.../samples/ColorPalettePopover.sample.html | 20 +++++++-------
.../ColorPalettePopover.stories.ts | 11 +++++---
.../main/ColorPalettePopover/Basic/main.js | 4 +--
.../ColorPalettePopover/Basic/sample.html | 2 +-
.../ColorPalettePopover/DefaultColor/main.js | 4 +--
.../DefaultColor/sample.html | 1 +
.../ColorPalettePopover/MoreColors/main.js | 4 +--
.../MoreColors/sample.html | 1 +
10 files changed, 39 insertions(+), 59 deletions(-)
diff --git a/packages/main/src/ColorPalettePopover.ts b/packages/main/src/ColorPalettePopover.ts
index 7f544212e1f8..7e32a63c5c0e 100644
--- a/packages/main/src/ColorPalettePopover.ts
+++ b/packages/main/src/ColorPalettePopover.ts
@@ -166,31 +166,6 @@ class ColorPalettePopover extends UI5Element {
return this.shadowRoot!.querySelector("[ui5-responsive-popover]")!;
}
- /**
- * Shows the ColorPalettePopover.
- * @param opener the element that the popover is shown at
- * @public
- * @deprecated The method is deprecated in favour of `open` and `opener` properties.
- * @since 1.1.1
- */
- showAt(opener: HTMLElement): void {
- console.warn("The method 'showAt' is deprecated and will be removed in future, use 'open' and 'opener' props instead."); // eslint-disable-line
- this.open = true;
- this.opener = opener;
- }
-
- /**
- * Shows the ColorPalettePopover.
- * @param opener the element that the popover is shown at
- * @public
- * @since 1.0.0-rc.16
- * @deprecated The method is deprecated in favour of `open` and `opener` properties.
- */
- openPopover(opener: HTMLElement): void {
- console.warn("The method 'openPopover' is deprecated and will be removed in future, use 'open' and 'opener' props instead."); // eslint-disable-line
- this.showAt(opener);
- }
-
closePopover() {
this.open = false;
}
diff --git a/packages/main/test/pages/ColorPalettePopover.html b/packages/main/test/pages/ColorPalettePopover.html
index f93e5cc63b47..f1b798852e3f 100644
--- a/packages/main/test/pages/ColorPalettePopover.html
+++ b/packages/main/test/pages/ColorPalettePopover.html
@@ -14,7 +14,7 @@
Test case 1 - Default Color Button to be focused
Open
-
+
Test case 2 - Default Color works
Open
-
+
Test case 3 - Arrow Down to select displayed color
Open
-
+
Test case 4 - Arrow Up focuses MoreColors button
Open
-
+
Test case 5 - Tests navigation with recent colors
Open
-
+
Open
Press
-
+
show-recent-colors, show-more-colors and show-default-color
Open
-
+
ColorPalettePopover
Color Palette Popover with recent colors, default color and more colors features
Open ColorPalettePopover
-
+
Color Palette Popover with recent colors, default color and more colors feat
<ui5-button id="colorPaletteBtn" >Open ColorPalettePopover</ui5-button>
-<ui5-color-palette-popover id="colorPalettePopover" show-recent-colors show-more-colors show-default-color default-color="green">
+<ui5-color-palette-popover id="colorPalettePopover" show-recent-colors show-more-colors show-default-color default-color="green" opener="colorPaletteBtn">
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
@@ -48,7 +48,7 @@ <h3>Color Palette Popover with recent colors, default color and more colors feat
</ui5-color-palette-popover>
<script>
colorPaletteBtn.addEventListener("click", (event) => {
- colorPalettePopover.showAt(this);
+ colorPalettePopover.open = !colorPalettePopover.open;
});
</script>
@@ -58,7 +58,7 @@ Color Palette Popover with recent colors, default color and more colors feat
Color Palette Popover without any additional features
Open ColorPalettePopover
-
+
Color Palette Popover without any additional features
<ui5-button id="colorPaletteBtn1" >Open ColorPalettePopover</ui5-button>
-<ui5-color-palette-popover id="colorPalettePopover1">
+<ui5-color-palette-popover id="colorPalettePopover1" opener="colorPaletteBtn1">
<ui5-color-palette-item value="pink"></ui5-color-palette-item>
<ui5-color-palette-item value="darkblue"></ui5-color-palette-item>
<ui5-color-palette-item value="#444444"></ui5-color-palette-item>
@@ -96,7 +96,7 @@ <h3>Color Palette Popover without any additional features</h3>
</ui5-color-palette-popover>
<script>
colorPaletteBtn1.addEventListener("click", (event) => {
- colorPalettePopover1.showAt(this);
+ colorPalettePopover1.open = !colorPalettePopover1.open;
});
</script>
diff --git a/packages/playground/_stories/main/ColorPalettePopover/ColorPalettePopover.stories.ts b/packages/playground/_stories/main/ColorPalettePopover/ColorPalettePopover.stories.ts
index 7e4638f61996..26a35415a3ab 100644
--- a/packages/playground/_stories/main/ColorPalettePopover/ColorPalettePopover.stories.ts
+++ b/packages/playground/_stories/main/ColorPalettePopover/ColorPalettePopover.stories.ts
@@ -16,6 +16,7 @@ export default {
const Template: UI5StoryArgs = (args) => html` = (args) => ht
export const Basic = Template.bind({});
Basic.args = {
id: "colorPalettePopover",
+ opener: "colorPaletteBtn",
default: `Open ColorPalettePopover
${story()}
`,
];
@@ -60,6 +62,7 @@ export const DefaultColor = Template.bind({});
DefaultColor.storyName = "Default, Recent, and More Colors";
DefaultColor.args = {
id: "colorPalettePopover",
+ opener: "colorPaletteBtn",
defaultColor: "orange",
showDefaultColor: true,
showRecentColors: true,
@@ -84,8 +87,8 @@ DefaultColor.decorators = [
(story) => html`Open ColorPalettePopover
${story()}
`,
];
diff --git a/packages/website/docs/_samples/main/ColorPalettePopover/Basic/main.js b/packages/website/docs/_samples/main/ColorPalettePopover/Basic/main.js
index dcd3eaaa1bfd..96604d69cb55 100644
--- a/packages/website/docs/_samples/main/ColorPalettePopover/Basic/main.js
+++ b/packages/website/docs/_samples/main/ColorPalettePopover/Basic/main.js
@@ -2,6 +2,6 @@ import "@ui5/webcomponents/dist/ColorPalettePopover.js";
import "@ui5/webcomponents/dist/ColorPaletteItem.js";
import "@ui5/webcomponents/dist/Button.js";
-colorPaletteBtn.addEventListener("click", function () {
- colorPalettePopover.showAt(this);
+colorPaletteBtn.addEventListener("click", () => {
+ colorPalettePopover.open = !colorPalettePopover.open;
});
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/ColorPalettePopover/Basic/sample.html b/packages/website/docs/_samples/main/ColorPalettePopover/Basic/sample.html
index f730f60f9204..f833a6583642 100644
--- a/packages/website/docs/_samples/main/ColorPalettePopover/Basic/sample.html
+++ b/packages/website/docs/_samples/main/ColorPalettePopover/Basic/sample.html
@@ -13,7 +13,7 @@
Open ColorPalettePopover
-
+
Open ColorPalettePopover
diff --git a/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/main.js b/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/main.js
index 6d00b43a36cc..bf7ebd10b311 100644
--- a/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/main.js
+++ b/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/main.js
@@ -5,6 +5,6 @@ import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"
-colorPaletteBtn.addEventListener("click", function () {
- colorPalettePopover.showAt(this);
+colorPaletteBtn.addEventListener("click", () => {
+ colorPalettePopover.open = !colorPalettePopover.open;
});
\ No newline at end of file
diff --git a/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/sample.html b/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/sample.html
index e133699a86b3..86a129a25809 100644
--- a/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/sample.html
+++ b/packages/website/docs/_samples/main/ColorPalettePopover/MoreColors/sample.html
@@ -14,6 +14,7 @@
Open ColorPalettePopover
Date: Wed, 27 Mar 2024 15:45:38 +0200
Subject: [PATCH 30/60] refactor(ui5-bar): move to `main` (#8548)
Change the library of the `ui5-bar `component from `fiori` to `main`.
BREAKING CHANGE: The `ui5-bar` component is now in `main` library. If you previously imported the `ui5-bar` from `fiori`:
```ts
import "@ui5/webcomponents-fiori/dist/Bar.js;
```
Now, import the `ui5-bar` from `main`:
```ts
import "@ui5/webcomponents/dist/Bar.js";
```
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
---
packages/fiori/README.md | 1 -
packages/fiori/src/bundle.esm.ts | 1 -
packages/fiori/src/themes/base/sizes-parameters.css | 6 ------
packages/fiori/src/themes/sap_belize/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_belize_hcb/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_belize_hcw/parameters-bundle.css | 2 --
packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css | 2 --
packages/fiori/src/themes/sap_horizon/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_horizon_dark/parameters-bundle.css | 2 --
.../src/themes/sap_horizon_dark_exp/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_horizon_exp/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_horizon_hcb/parameters-bundle.css | 2 --
.../src/themes/sap_horizon_hcb_exp/parameters-bundle.css | 2 --
.../fiori/src/themes/sap_horizon_hcw/parameters-bundle.css | 2 --
.../src/themes/sap_horizon_hcw_exp/parameters-bundle.css | 2 --
packages/fiori/test/ssr/component-imports.js | 1 -
packages/main/README.md | 1 +
packages/{fiori => main}/src/Bar.hbs | 0
packages/{fiori => main}/src/Bar.ts | 2 +-
packages/main/src/bundle.esm.ts | 1 +
packages/{fiori => main}/src/themes/Bar.css | 0
packages/{fiori => main}/src/themes/base/Bar-parameters.css | 0
packages/main/src/themes/base/sizes-parameters.css | 3 +++
packages/main/src/themes/sap_belize/parameters-bundle.css | 1 +
.../main/src/themes/sap_belize_hcb/parameters-bundle.css | 1 +
.../main/src/themes/sap_belize_hcw/parameters-bundle.css | 1 +
packages/main/src/themes/sap_fiori_3/parameters-bundle.css | 1 +
.../main/src/themes/sap_fiori_3_dark/parameters-bundle.css | 1 +
.../src/themes/sap_fiori_3_hcb/Bar-parameters.css | 0
.../main/src/themes/sap_fiori_3_hcb/parameters-bundle.css | 1 +
.../src/themes/sap_fiori_3_hcw/Bar-parameters.css | 0
packages/main/src/themes/sap_horizon/parameters-bundle.css | 1 +
.../main/src/themes/sap_horizon_dark/parameters-bundle.css | 1 +
.../src/themes/sap_horizon_hcb/Bar-parameters.css | 0
.../main/src/themes/sap_horizon_hcb/parameters-bundle.css | 1 +
.../src/themes/sap_horizon_hcw/Bar-parameters.css | 0
.../main/src/themes/sap_horizon_hcw/parameters-bundle.css | 1 +
packages/{fiori => main}/src/types/BarDesign.ts | 0
packages/{fiori => main}/test/pages/Bar.html | 0
packages/{fiori => main}/test/pages/styles/Bar.css | 0
packages/{fiori => main}/test/samples/Bar.sample.html | 0
packages/main/test/ssr/component-imports.js | 1 +
.../playground/_stories/{fiori => main}/Bar/Bar.stories.ts | 6 +++---
.../website/docs/_components_pages/{fiori => main}/Bar.mdx | 2 +-
.../docs/_samples/{fiori => main}/Bar/Basic/Basic.md | 0
.../website/docs/_samples/{fiori => main}/Bar/Basic/main.js | 2 +-
.../docs/_samples/{fiori => main}/Bar/Basic/sample.html | 0
50 files changed, 22 insertions(+), 45 deletions(-)
delete mode 100644 packages/fiori/src/themes/base/sizes-parameters.css
rename packages/{fiori => main}/src/Bar.hbs (100%)
rename packages/{fiori => main}/src/Bar.ts (98%)
rename packages/{fiori => main}/src/themes/Bar.css (100%)
rename packages/{fiori => main}/src/themes/base/Bar-parameters.css (100%)
rename packages/{fiori => main}/src/themes/sap_fiori_3_hcb/Bar-parameters.css (100%)
rename packages/{fiori => main}/src/themes/sap_fiori_3_hcw/Bar-parameters.css (100%)
rename packages/{fiori => main}/src/themes/sap_horizon_hcb/Bar-parameters.css (100%)
rename packages/{fiori => main}/src/themes/sap_horizon_hcw/Bar-parameters.css (100%)
rename packages/{fiori => main}/src/types/BarDesign.ts (100%)
rename packages/{fiori => main}/test/pages/Bar.html (100%)
rename packages/{fiori => main}/test/pages/styles/Bar.css (100%)
rename packages/{fiori => main}/test/samples/Bar.sample.html (100%)
rename packages/playground/_stories/{fiori => main}/Bar/Bar.stories.ts (86%)
rename packages/website/docs/_components_pages/{fiori => main}/Bar.mdx (54%)
rename packages/website/docs/_samples/{fiori => main}/Bar/Basic/Basic.md (100%)
rename packages/website/docs/_samples/{fiori => main}/Bar/Basic/main.js (80%)
rename packages/website/docs/_samples/{fiori => main}/Bar/Basic/sample.html (100%)
diff --git a/packages/fiori/README.md b/packages/fiori/README.md
index 7c047509c673..3872f6357a31 100644
--- a/packages/fiori/README.md
+++ b/packages/fiori/README.md
@@ -12,7 +12,6 @@ such as a common header (ShellBar).
| Web Component | Tag name | Module import |
|-------------------------------------------|--------------------------------|-----------------------------------------------------------------------|
-| Bar | `ui5-bar` | `import "@ui5/webcomponents-fiori/dist/Bar.js";` |
| Barcode Scanner Dialog | `ui5-barcode-scanner-dialog` | `import "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";` |
| Dynamic Side Content | `ui5-dynamic-side-content` | `import "@ui5/webcomponents-fiori/dist/DynamicSideContent.js";` |
| Flexible Column Layout | `ui5-flexible-column-layout` | `import "@ui5/webcomponents-fiori/dist/FlexibleColumnLayout.js";` |
diff --git a/packages/fiori/src/bundle.esm.ts b/packages/fiori/src/bundle.esm.ts
index d6cb5b6d4076..ee11684742f0 100644
--- a/packages/fiori/src/bundle.esm.ts
+++ b/packages/fiori/src/bundle.esm.ts
@@ -12,7 +12,6 @@ import "./features/CoPilotAnimation.js";
import "./illustrations/AllIllustrations.js";
// FIORI components
-import Bar from "./Bar.js";
import BarcodeScannerDialog from "./BarcodeScannerDialog.js";
import DynamicSideContent from "./DynamicSideContent.js";
import FilterItem from "./FilterItem.js";
diff --git a/packages/fiori/src/themes/base/sizes-parameters.css b/packages/fiori/src/themes/base/sizes-parameters.css
deleted file mode 100644
index f23c9f21a27c..000000000000
--- a/packages/fiori/src/themes/base/sizes-parameters.css
+++ /dev/null
@@ -1,6 +0,0 @@
-[data-ui5-compact-size],
-.ui5-content-density-compact,
-.sapUiSizeCompact {
- --_ui5_bar_base_height: 2.5rem;
- --_ui5_bar_subheader_height: 2.25rem;
-}
diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
index d7ddadee3a99..c8db188af13e 100644
--- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/MediaGallery-parameters.css";
@import "../base/MediaGalleryItem-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
index 30004e7942cb..474d3e76b656 100644
--- a/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
index 30004e7942cb..474d3e76b656 100644
--- a/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
index 0ab99d77ccc5..136e065dfc44 100644
--- a/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 0ab99d77ccc5..136e065dfc44 100644
--- a/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index e2ee04a154ec..474d3e76b656 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "./Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index e2ee04a154ec..474d3e76b656 100644
--- a/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "./Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
index b9966910d906..6f02d69923a9 100644
--- a/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
index b9966910d906..6f02d69923a9 100644
--- a/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
index 17242073e914..e8ceaabfdb3e 100644
--- a/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_dark_exp/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
index 17242073e914..e8ceaabfdb3e 100644
--- a/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_exp/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "../base/FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "../base/MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
index 884a94cf56ed..5c8f789a7ba1 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "./Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
index 546625c59346..5c8f789a7ba1 100644
--- a/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcb_exp/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
index 03b4a8cd7368..6ff9fe9f299d 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "./Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
index 47d7c10d4bc8..6ff9fe9f299d 100644
--- a/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
+++ b/packages/fiori/src/themes/sap_horizon_hcw_exp/parameters-bundle.css
@@ -1,5 +1,3 @@
-@import "../base/sizes-parameters.css";
-@import "../base/Bar-parameters.css";
@import "./FlexibleColumnLayout-parameters.css";
@import "../base/IllustratedMessage-parameters.css";
@import "./MediaGallery-parameters.css";
diff --git a/packages/fiori/test/ssr/component-imports.js b/packages/fiori/test/ssr/component-imports.js
index 6096e31c57b0..5e8cece9436c 100644
--- a/packages/fiori/test/ssr/component-imports.js
+++ b/packages/fiori/test/ssr/component-imports.js
@@ -1,4 +1,3 @@
-import Bar from "../../dist/Bar.js";
// zxing is using window
// import BarcodeScannerDialog from "../../dist/BarcodeScannerDialog.js";
import DynamicSideContent from "../../dist/DynamicSideContent.js";
diff --git a/packages/main/README.md b/packages/main/README.md
index 2e79efea7f49..a9264a37aee4 100644
--- a/packages/main/README.md
+++ b/packages/main/README.md
@@ -14,6 +14,7 @@ Provides general purpose UI building blocks such as buttons, labels, inputs and
| Avatar | `ui5-avatar` | `import "@ui5/webcomponents/dist/Avatar.js";` |
| Avatar Group | `ui5-avatar-group` | `import "@ui5/webcomponents/dist/AvatarGroup.js";` |
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
+| Bar | `ui5-bar` | `import "@ui5/webcomponents/dist/Bar.js";` |
| Breadcrumbs | `ui5-breadcrumbs` | `import "@ui5/webcomponents/dist/Breadcrumbs.js";` |
| Breadcrumbs Item | `ui5-breadcrumbs-item` | comes with `ui5-breadcrumbs` |
| Badge | `ui5-badge` | `import "@ui5/webcomponents/dist/Badge.js";` |
diff --git a/packages/fiori/src/Bar.hbs b/packages/main/src/Bar.hbs
similarity index 100%
rename from packages/fiori/src/Bar.hbs
rename to packages/main/src/Bar.hbs
diff --git a/packages/fiori/src/Bar.ts b/packages/main/src/Bar.ts
similarity index 98%
rename from packages/fiori/src/Bar.ts
rename to packages/main/src/Bar.ts
index cb25f48e10e7..0036daabd125 100644
--- a/packages/fiori/src/Bar.ts
+++ b/packages/main/src/Bar.ts
@@ -39,7 +39,7 @@ import BarCss from "./generated/themes/Bar.css.js";
*
* ### ES6 Module Import
*
- * `import "@ui5/webcomponents-fiori/dist/Bar.js";`
+ * `import "@ui5/webcomponents/dist/Bar.js";`
* @csspart bar - Used to style the wrapper of the content of the component
* @constructor
* @extends UI5Element
diff --git a/packages/main/src/bundle.esm.ts b/packages/main/src/bundle.esm.ts
index ea319d2dbf05..8f3836399b61 100644
--- a/packages/main/src/bundle.esm.ts
+++ b/packages/main/src/bundle.esm.ts
@@ -99,6 +99,7 @@ import * as defaultTexts from "./generated/i18n/i18n-defaults.js";
import Avatar from "./Avatar.js";
import AvatarGroup from "./AvatarGroup.js";
import Badge from "./Badge.js";
+import Bar from "./Bar.js";
import Breadcrumbs from "./Breadcrumbs.js";
import BusyIndicator from "./BusyIndicator.js";
import Button from "./Button.js";
diff --git a/packages/fiori/src/themes/Bar.css b/packages/main/src/themes/Bar.css
similarity index 100%
rename from packages/fiori/src/themes/Bar.css
rename to packages/main/src/themes/Bar.css
diff --git a/packages/fiori/src/themes/base/Bar-parameters.css b/packages/main/src/themes/base/Bar-parameters.css
similarity index 100%
rename from packages/fiori/src/themes/base/Bar-parameters.css
rename to packages/main/src/themes/base/Bar-parameters.css
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
index 15f9c9286d83..79984b42f0a6 100644
--- a/packages/main/src/themes/base/sizes-parameters.css
+++ b/packages/main/src/themes/base/sizes-parameters.css
@@ -153,6 +153,9 @@
[data-ui5-compact-size],
.ui5-content-density-compact,
.sapUiSizeCompact {
+ --_ui5_bar_base_height: 2.5rem;
+ --_ui5_bar_subheader_height: 2.25rem;
+
--_ui5_button_base_height: var(--sapElement_Compact_Height);
--_ui5_button_base_padding: 0.4375rem;
--_ui5_button_base_min_width: 2rem;
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
index d3cb2d95c09f..7191125c99a7 100644
--- a/packages/main/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "../base/Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "../base/Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "./BrowserScrollbar-parameters.css";
@import "./BusyIndicator-parameters.css";
@import "../base/CalendarLegend-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
index 2b53e19db5b2..59624f688ef6 100644
--- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "./BrowserScrollbar-parameters.css";
@import "../base/BusyIndicator-parameters.css";
@import "./Button-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
index 901e372af10c..faee98322c2e 100644
--- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "./BrowserScrollbar-parameters.css";
@import "../base/BusyIndicator-parameters.css";
@import "./Button-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
index a1169eb56892..e923170baafc 100644
--- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "../base/Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "../base/BrowserScrollbar-parameters.css";
@import "../base/BusyIndicator-parameters.css";
@import "./Button-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
index dc2dceac8209..546116c0da1a 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "../base/BrowserScrollbar-parameters.css";
@import "../base/BusyIndicator-parameters.css";
@import "./Button-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcb/Bar-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Bar-parameters.css
similarity index 100%
rename from packages/fiori/src/themes/sap_fiori_3_hcb/Bar-parameters.css
rename to packages/main/src/themes/sap_fiori_3_hcb/Bar-parameters.css
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 8717ecd9f146..5e8733cfdd3a 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "./Bar-parameters.css";
@import "../base/BrowserScrollbar-parameters.css";
@import "../base/BusyIndicator-parameters.css";
@import "./Button-parameters.css";
diff --git a/packages/fiori/src/themes/sap_fiori_3_hcw/Bar-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Bar-parameters.css
similarity index 100%
rename from packages/fiori/src/themes/sap_fiori_3_hcw/Bar-parameters.css
rename to packages/main/src/themes/sap_fiori_3_hcw/Bar-parameters.css
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
index 09b28cbf2f1a..51a870edc6c7 100644
--- a/packages/main/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "./AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "./Breadcrumbs-parameters.css";
@import "../base/BrowserScrollbar-parameters.css";
@import "./BusyIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
index fbe2a41bda90..8aa4a04755ac 100644
--- a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../sap_horizon/AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "./Breadcrumbs-parameters.css";
@import "../base/BrowserScrollbar-parameters.css";
@import "./BusyIndicator-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcb/Bar-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Bar-parameters.css
similarity index 100%
rename from packages/fiori/src/themes/sap_horizon_hcb/Bar-parameters.css
rename to packages/main/src/themes/sap_horizon_hcb/Bar-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
index 91d8b49a358d..5cd546bfc639 100644
--- a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "./Bar-parameters.css";
@import "../base/BrowserScrollbar-parameters.css";
@import "./BusyIndicator-parameters.css";
@import "./Button-parameters.css";
diff --git a/packages/fiori/src/themes/sap_horizon_hcw/Bar-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Bar-parameters.css
similarity index 100%
rename from packages/fiori/src/themes/sap_horizon_hcw/Bar-parameters.css
rename to packages/main/src/themes/sap_horizon_hcw/Bar-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
index 333596598abf..32685a0c2bcc 100644
--- a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -1,6 +1,7 @@
@import "./Avatar-parameters.css";
@import "../base/AvatarGroup-parameters.css";
@import "./Badge-parameters.css";
+@import "../base/Bar-parameters.css";
@import "../base/BrowserScrollbar-parameters.css";
@import "./BusyIndicator-parameters.css";
@import "./Button-parameters.css";
diff --git a/packages/fiori/src/types/BarDesign.ts b/packages/main/src/types/BarDesign.ts
similarity index 100%
rename from packages/fiori/src/types/BarDesign.ts
rename to packages/main/src/types/BarDesign.ts
diff --git a/packages/fiori/test/pages/Bar.html b/packages/main/test/pages/Bar.html
similarity index 100%
rename from packages/fiori/test/pages/Bar.html
rename to packages/main/test/pages/Bar.html
diff --git a/packages/fiori/test/pages/styles/Bar.css b/packages/main/test/pages/styles/Bar.css
similarity index 100%
rename from packages/fiori/test/pages/styles/Bar.css
rename to packages/main/test/pages/styles/Bar.css
diff --git a/packages/fiori/test/samples/Bar.sample.html b/packages/main/test/samples/Bar.sample.html
similarity index 100%
rename from packages/fiori/test/samples/Bar.sample.html
rename to packages/main/test/samples/Bar.sample.html
diff --git a/packages/main/test/ssr/component-imports.js b/packages/main/test/ssr/component-imports.js
index 2d8412017afd..b624641070b1 100644
--- a/packages/main/test/ssr/component-imports.js
+++ b/packages/main/test/ssr/component-imports.js
@@ -1,6 +1,7 @@
import Avatar from "../../dist/Avatar.js";
import AvatarGroup from "../../dist/AvatarGroup.js";
import Badge from "../../dist/Badge.js";
+import Bar from "../../dist/Bar.js";
import Breadcrumbs from "../../dist/Breadcrumbs.js";
import BusyIndicator from "../../dist/BusyIndicator.js";
import Button from "../../dist/Button.js";
diff --git a/packages/playground/_stories/fiori/Bar/Bar.stories.ts b/packages/playground/_stories/main/Bar/Bar.stories.ts
similarity index 86%
rename from packages/playground/_stories/fiori/Bar/Bar.stories.ts
rename to packages/playground/_stories/main/Bar/Bar.stories.ts
index d91781ca999b..f36a85b019e8 100644
--- a/packages/playground/_stories/fiori/Bar/Bar.stories.ts
+++ b/packages/playground/_stories/main/Bar/Bar.stories.ts
@@ -6,11 +6,11 @@ import type { Meta, StoryFn } from "@storybook/web-components";
import argTypes from "./argTypes.js";
import type { StoryArgsSlots } from "./argTypes.js";
import type { UI5StoryArgs } from "../../../types.js";
-import type Bar from "@ui5/webcomponents-fiori/dist/Bar.js";
-import BarDesign from "@ui5/webcomponents-fiori/dist/types/BarDesign.js";
+import type Bar from "@ui5/webcomponents/dist/Bar.js";
+import BarDesign from "@ui5/webcomponents/dist/types/BarDesign.js";
export default {
- title: "Fiori/Bar",
+ title: "Main/Bar",
component: "Bar",
argTypes,
} as Meta;
diff --git a/packages/website/docs/_components_pages/fiori/Bar.mdx b/packages/website/docs/_components_pages/main/Bar.mdx
similarity index 54%
rename from packages/website/docs/_components_pages/fiori/Bar.mdx
rename to packages/website/docs/_components_pages/main/Bar.mdx
index c90d7c34601a..58c386c52075 100644
--- a/packages/website/docs/_components_pages/fiori/Bar.mdx
+++ b/packages/website/docs/_components_pages/main/Bar.mdx
@@ -1,4 +1,4 @@
-import Basic from "../../_samples/fiori/Bar/Basic/Basic.md";
+import Basic from "../../_samples/main/Bar/Basic/Basic.md";
<%COMPONENT_OVERVIEW%>
diff --git a/packages/website/docs/_samples/fiori/Bar/Basic/Basic.md b/packages/website/docs/_samples/main/Bar/Basic/Basic.md
similarity index 100%
rename from packages/website/docs/_samples/fiori/Bar/Basic/Basic.md
rename to packages/website/docs/_samples/main/Bar/Basic/Basic.md
diff --git a/packages/website/docs/_samples/fiori/Bar/Basic/main.js b/packages/website/docs/_samples/main/Bar/Basic/main.js
similarity index 80%
rename from packages/website/docs/_samples/fiori/Bar/Basic/main.js
rename to packages/website/docs/_samples/main/Bar/Basic/main.js
index 8b7615726aba..f72934fcf486 100644
--- a/packages/website/docs/_samples/fiori/Bar/Basic/main.js
+++ b/packages/website/docs/_samples/main/Bar/Basic/main.js
@@ -1,5 +1,5 @@
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Label.js";
-import "@ui5/webcomponents-fiori/dist/Bar.js";
+import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-icons/dist/home.js"
import "@ui5/webcomponents-icons/dist/action-settings.js"
diff --git a/packages/website/docs/_samples/fiori/Bar/Basic/sample.html b/packages/website/docs/_samples/main/Bar/Basic/sample.html
similarity index 100%
rename from packages/website/docs/_samples/fiori/Bar/Basic/sample.html
rename to packages/website/docs/_samples/main/Bar/Basic/sample.html
From 94bc1ffeebaba2985a24460ad26727d66e2e6199 Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev
Date: Wed, 27 Mar 2024 17:46:29 +0200
Subject: [PATCH 31/60] chore(ui5-bar): fix import in samples (#8555)
---
.../docs/_samples/fiori/IllustratedMessage/WithDialog/main.js | 2 +-
.../docs/_samples/fiori/MediaGallery/Interactive/main.js | 2 +-
packages/website/docs/_samples/fiori/Page/Basic/main.js | 2 +-
.../website/docs/_samples/fiori/Page/FloatingFooter/main.js | 2 +-
packages/website/docs/_samples/fiori/Wizard/PageMode/main.js | 2 +-
packages/website/docs/_samples/main/Dialog/BarInDialog/main.js | 2 +-
6 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/main.js b/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/main.js
index a3bdb766d0d8..12f34179c1b9 100644
--- a/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/main.js
+++ b/packages/website/docs/_samples/fiori/IllustratedMessage/WithDialog/main.js
@@ -1,7 +1,7 @@
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Dialog.js";
-import "@ui5/webcomponents-fiori/dist/Bar.js";
+import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-fiori/dist/IllustratedMessage.js";
import "@ui5/webcomponents-fiori/dist/illustrations/UnableToLoad.js";
diff --git a/packages/website/docs/_samples/fiori/MediaGallery/Interactive/main.js b/packages/website/docs/_samples/fiori/MediaGallery/Interactive/main.js
index f13eedb26dd8..e19ba29dfaa5 100644
--- a/packages/website/docs/_samples/fiori/MediaGallery/Interactive/main.js
+++ b/packages/website/docs/_samples/fiori/MediaGallery/Interactive/main.js
@@ -3,7 +3,7 @@ import "@ui5/webcomponents/dist/Dialog.js";
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Title.js";
-import "@ui5/webcomponents-fiori/dist/Bar.js";
+import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-fiori/dist/MediaGallery.js";
import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";
diff --git a/packages/website/docs/_samples/fiori/Page/Basic/main.js b/packages/website/docs/_samples/fiori/Page/Basic/main.js
index f65413251219..77431d6cfd23 100644
--- a/packages/website/docs/_samples/fiori/Page/Basic/main.js
+++ b/packages/website/docs/_samples/fiori/Page/Basic/main.js
@@ -1,7 +1,7 @@
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Label.js";
-import "@ui5/webcomponents-fiori/dist/Bar.js";
+import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-fiori/dist/Page.js";
import "@ui5/webcomponents-icons/dist/home.js";
diff --git a/packages/website/docs/_samples/fiori/Page/FloatingFooter/main.js b/packages/website/docs/_samples/fiori/Page/FloatingFooter/main.js
index 15bf63ec6653..1fb338d40a68 100644
--- a/packages/website/docs/_samples/fiori/Page/FloatingFooter/main.js
+++ b/packages/website/docs/_samples/fiori/Page/FloatingFooter/main.js
@@ -1,7 +1,7 @@
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Label.js";
-import "@ui5/webcomponents-fiori/dist/Bar.js";
+import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-fiori/dist/Page.js";
import "@ui5/webcomponents-icons/dist/home.js";
\ No newline at end of file
diff --git a/packages/website/docs/_samples/fiori/Wizard/PageMode/main.js b/packages/website/docs/_samples/fiori/Wizard/PageMode/main.js
index ed384ea23857..bd8aa8a111f3 100644
--- a/packages/website/docs/_samples/fiori/Wizard/PageMode/main.js
+++ b/packages/website/docs/_samples/fiori/Wizard/PageMode/main.js
@@ -11,7 +11,7 @@ import "@ui5/webcomponents/dist/Dialog.js";
import "@ui5/webcomponents-fiori/dist/Wizard.js";
import "@ui5/webcomponents-fiori/dist/WizardStep.js";
-import "@ui5/webcomponents-fiori/dist/Bar.js";
+import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-icons/dist/product.js";
import "@ui5/webcomponents-icons/dist/hint.js";
diff --git a/packages/website/docs/_samples/main/Dialog/BarInDialog/main.js b/packages/website/docs/_samples/main/Dialog/BarInDialog/main.js
index 60542b630748..33b5ab0412e3 100644
--- a/packages/website/docs/_samples/main/Dialog/BarInDialog/main.js
+++ b/packages/website/docs/_samples/main/Dialog/BarInDialog/main.js
@@ -2,7 +2,7 @@ import "@ui5/webcomponents/dist/Dialog.js";
import "@ui5/webcomponents/dist/Title.js";
import "@ui5/webcomponents/dist/Button.js";
-import "@ui5/webcomponents-fiori/dist/Bar.js";
+import "@ui5/webcomponents/dist/Bar.js";
import "@ui5/webcomponents-icons/dist/decline.js";
var dialogOpener = document.getElementById("dialogOpener");
From 37cb9d3d474cd500b8578dc77eb48de6f083155f Mon Sep 17 00:00:00 2001
From: kskondov
Date: Thu, 28 Mar 2024 17:09:21 +0200
Subject: [PATCH 32/60] refactor(ui5-tab): rename `subTabs` slot to `items`
(#8559)
Renames 'subTabs' slot of ui5-tab to 'items'.
BREAKING CHANGE: If you have previously used:
```html
+ items!: Array
isInline?: boolean;
forcedMixedMode?: boolean;
@@ -224,15 +224,15 @@ class Tab extends UI5Element implements ITab, ITabbable {
}
get requiresExpandButton() {
- return this.subTabs.length > 0 && this.isTopLevelTab && this.hasOwnContent;
+ return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
}
get isSingleClickArea() {
- return this.subTabs.length > 0 && this.isTopLevelTab && !this.hasOwnContent;
+ return this.items.length > 0 && this.isTopLevelTab && !this.hasOwnContent;
}
get isTwoClickArea() {
- return this.subTabs.length > 0 && this.isTopLevelTab && this.hasOwnContent;
+ return this.items.length > 0 && this.isTopLevelTab && this.hasOwnContent;
}
get isOnSelectedTabPath(): boolean {
@@ -254,7 +254,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
/**
* Returns the DOM reference of the tab that is placed in the header.
*
- * **Note:** Tabs, placed in the `subTabs` slot of other tabs are not shown in the header. Calling this method on such tabs will return `null`.
+ * **Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `null`.
*
* **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.
* @public
@@ -309,7 +309,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
}
get tabs(): Array {
- return this.subTabs.filter((tab): tab is Tab => !tab.isSeparator);
+ return this.items.filter((tab): tab is Tab => !tab.isSeparator);
}
get ariaLabelledBy() {
@@ -401,7 +401,7 @@ class Tab extends UI5Element implements ITab, ITabbable {
}
get _roleDescription() {
- return this.subTabs.length > 0 ? Tab.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
+ return this.items.length > 0 ? Tab.i18nBundle.getText(TAB_SPLIT_ROLE_DESCRIPTION) : undefined;
}
get _ariaHasPopup() {
diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
index 8dacf9e9bff8..a65ae54eb93d 100644
--- a/packages/main/src/TabContainer.hbs
+++ b/packages/main/src/TabContainer.hbs
@@ -75,7 +75,7 @@
{{> contentArea}}
{{/unless}}
- {{#if hasSubTabs}}
+ {{#if hasItems}}
{{accInvisibleText}}
{{/if}}
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
index 75168fd648f8..506c6c54dad7 100644
--- a/packages/main/src/TabContainer.ts
+++ b/packages/main/src/TabContainer.ts
@@ -79,7 +79,7 @@ interface ITab extends UI5Element {
isSingleClickArea?: boolean;
requiresExpandButton?: boolean;
selected?: boolean;
- subTabs?: Array;
+ items?: Array;
tabs?: Array
text?: string;
hasOwnContent?: boolean;
@@ -556,7 +556,7 @@ class TabContainer extends UI5Element {
return false;
});
- if (acceptedPlacement === MovePlacement.On && (closestPosition.element as Tab).realTabReference.subTabs.length) {
+ if (acceptedPlacement === MovePlacement.On && (closestPosition.element as Tab).realTabReference.items.length) {
popoverTarget = closestPosition.element;
} else if (!acceptedPlacement) {
this.dropIndicatorDOM!.targetReference = null;
@@ -791,8 +791,8 @@ class TabContainer extends UI5Element {
if (item.hasAttribute("ui5-tab") || item.hasAttribute("ui5-tab-separator")) {
item.forcedLevel = level;
- if (item.subTabs) {
- this._setIndentLevels(item.subTabs, level + 1);
+ if (item.items) {
+ this._setIndentLevels(item.items, level + 1);
}
}
});
@@ -1298,10 +1298,10 @@ class TabContainer extends UI5Element {
}
if (isTabInStrip(targetOwner)) {
- return targetOwner.realTabReference.subTabs;
+ return targetOwner.realTabReference.items;
}
- return targetOwner.subTabs;
+ return targetOwner.items;
}
_setPopoverItems(items: Array) {
@@ -1337,11 +1337,11 @@ class TabContainer extends UI5Element {
}
}
- get hasSubTabs(): boolean {
+ get hasItems(): boolean {
const tabs = this._getTabs();
for (let i = 0; i < tabs.length; i++) {
- if (tabs[i].subTabs.length > 0) {
+ if (tabs[i].items.length > 0) {
return true;
}
}
@@ -1464,7 +1464,7 @@ class TabContainer extends UI5Element {
}
get tablistAriaDescribedById() {
- return this.hasSubTabs ? `${this._id}-invisibleText` : undefined;
+ return this.hasItems ? `${this._id}-invisibleText` : undefined;
}
get shouldAnimate() {
@@ -1493,8 +1493,8 @@ const getTab = (el: HTMLElement | null) => {
const walk = (tabs: Array, callback: (_: ITab) => void) => {
[...tabs].forEach(tab => {
callback(tab);
- if (tab.subTabs) {
- walk(tab.subTabs, callback);
+ if (tab.items) {
+ walk(tab.items, callback);
}
});
};
diff --git a/packages/main/src/TabSeparator.ts b/packages/main/src/TabSeparator.ts
index fab5ac4b39e1..ec12a7ed3dc3 100644
--- a/packages/main/src/TabSeparator.ts
+++ b/packages/main/src/TabSeparator.ts
@@ -56,7 +56,7 @@ class TabSeparator extends UI5Element implements ITab {
/**
* Returns the DOM reference of the separator that is placed in the header.
*
- * **Note:** Tabs and separators, placed in the `subTabs` slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return `null`.
+ * **Note:** Tabs and separators, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs or separators will return `null`.
* @public
*/
getTabInStripDomRef(): ITab | null {
diff --git a/packages/main/test/pages/TabContainer.html b/packages/main/test/pages/TabContainer.html
index d85d7691cda6..0f1f414c8826 100644
--- a/packages/main/test/pages/TabContainer.html
+++ b/packages/main/test/pages/TabContainer.html
@@ -35,17 +35,17 @@ Nested Tabs
Button 2
-
+
Button 21
-
+
Button 211
-
-
+
+
Button 2121
@@ -54,20 +54,20 @@ Nested Tabs
-
+
Text for 2.2
-
+
Button 3.1
-
+
Button 3.1.1
-
+
Button 3.1.2
@@ -76,23 +76,23 @@ Nested Tabs
Button 4
-
+
Button 41
-
+
Button 411
-
+
Button 4111
-
+
Button 41111
-
@@ -106,11 +106,11 @@ Nested Tabs
Tab Content
Tab Content
Tab Content
- Tab 10.1 Content
- Tab 10.1.1 Content
- Tab Content
- Tab 10.1 Content
+ Tab 10.1.1 Content
+ Tab Content
+
@@ -120,14 +120,14 @@ Nested Tabs
- 1
- 1.1
+ 1
+ 1.1
- 2
- 2.1
- 2.1.1
+ 2
+ 2.1
+ 2.1.1
- 2.2
+ 2.2
Text only End Overflow
-
-
+
Button 3
-
- text
+
+ text
text
@@ -778,7 +778,7 @@ Text only Start And End Overflow Custom Overflow Buttons
Button 1
-
+
Button 1
@@ -876,8 +876,8 @@ Dynamically Insert Tab and Focus It
function walk(tabs, callback) {
[...tabs].forEach(tab => {
callback(tab);
- if (tab.subTabs) {
- walk(tab.subTabs, callback);
+ if (tab.items) {
+ walk(tab.items, callback);
}});
};
diff --git a/packages/main/test/pages/TabContainerDragAndDrop.html b/packages/main/test/pages/TabContainerDragAndDrop.html
index 1ee542de6fbd..ec402be9b008 100644
--- a/packages/main/test/pages/TabContainerDragAndDrop.html
+++ b/packages/main/test/pages/TabContainerDragAndDrop.html
@@ -20,18 +20,18 @@ Drag and drop
-
-
+
Button 3
content
-
- text
+
+ text
text
@@ -131,7 +131,7 @@ Drag and drop
const newParent = source.element.parentElement;
if (newParent.hasAttribute("ui5-tab")) {
- source.element.slot = "subTabs";
+ source.element.slot = "items";
} else {
source.element.slot = "";
}
diff --git a/packages/main/test/samples/TabContainer.sample.html b/packages/main/test/samples/TabContainer.sample.html
index cf894ded75ac..eada22054d1f 100644
--- a/packages/main/test/samples/TabContainer.sample.html
+++ b/packages/main/test/samples/TabContainer.sample.html
@@ -316,26 +316,26 @@ TabContainer with nested tabs
Products go here ...
-
+
Computers go here ...
-
+
Laptops go here ...
-
-
+
+
Work Stations go here ...
-
+
Game Stations go here ...
Desktops go here ...
-
-
+
+
Smartphones go here ...
-
+
Tablets go here ...
Phones go here ...
@@ -343,7 +343,7 @@ TabContainer with nested tabs
Orders go here ...
-
+
Order attachments go here ...
@@ -356,26 +356,26 @@ TabContainer with nested tabs
Products go here ...
-
+
Computers go here ...
-
+
Laptops go here ...
-
-
+
+
Work Stations go here ...
-
+
Game Stations go here ...
Desktops go here ...
-
-
+
+
Smartphones go here ...
-
+
Tablets go here ...
Phones go here ...
@@ -383,7 +383,7 @@ TabContainer with nested tabs
Orders go here ...
-
+
Order attachments go here ...
diff --git a/packages/playground/_stories/main/TabContainer/Tab/Tab.stories.ts b/packages/playground/_stories/main/TabContainer/Tab/Tab.stories.ts
index ae383dab76b3..df15e903da7a 100644
--- a/packages/playground/_stories/main/TabContainer/Tab/Tab.stories.ts
+++ b/packages/playground/_stories/main/TabContainer/Tab/Tab.stories.ts
@@ -25,8 +25,8 @@ const Template: UI5StoryArgs = (args) => {
?selected="${ifDefined(args.selected)}"
text="${ifDefined(args.text)}"
>
- ${unsafeHTML(args.default)}
- ${unsafeHTML(args.subTabs)}
+ ${unsafeHTML(args.default)}
+ ${unsafeHTML(args.items)}
`;
};
@@ -36,16 +36,16 @@ Basic.tags = ["_hidden_"];
Basic.args = {
text: "Products",
default: `Products go here`,
- subTabs: `
+ items: `
Computers go here ...
-
+
Laptops go here ...
-
-
+
+
Work Stations go here ...
-
+
Game Stations go here ...
Desktops go here ...
diff --git a/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts b/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts
index 2c9c664d15ea..53ff91625adf 100644
--- a/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts
+++ b/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts
@@ -105,26 +105,26 @@ NestedTabs.args = {
Products go here ...
-
+
Computers go here ...
-
+
Laptops go here ...
-
-
+
+
Work Stations go here ...
-
+
Game Stations go here ...
Desktops go here ...
-
-
+
+
Smartphones go here ...
-
+
Tablets go here ...
Phones go here ...
@@ -132,7 +132,7 @@ NestedTabs.args = {
Orders go here ...
-
+
Order attachments go here ...
`,
diff --git a/packages/website/docs/_samples/main/TabContainer/NestedTabs/sample.html b/packages/website/docs/_samples/main/TabContainer/NestedTabs/sample.html
index 0c5b836fa77c..6b65eb946444 100644
--- a/packages/website/docs/_samples/main/TabContainer/NestedTabs/sample.html
+++ b/packages/website/docs/_samples/main/TabContainer/NestedTabs/sample.html
@@ -15,26 +15,26 @@
Products go here ...
-
+
Computers go here ...
-
+
Laptops go here ...
-
-
+
+
Work Stations go here ...
-
+
Game Stations go here ...
Desktops go here ...
-
-
+
+
Smartphones go here ...
-
+
Tablets go here ...
Phones go here ...
@@ -42,7 +42,7 @@
Orders go here ...
-
+
Order attachments go here ...
From 3da1e47cd57addab037e7b637966571d2208441a Mon Sep 17 00:00:00 2001
From: kskondov
Date: Thu, 28 Mar 2024 17:21:18 +0200
Subject: [PATCH 33/60] refactor(ui5-tabcontainer): rename `tabs-overflow-mode`
to `overflow-mode` (#8565)
Renames tabs-overflow-mode to overflow-mode
BREAKING CHANGE: If you have previously used:
```html
Text only End Overflow
Text only Start And End Overflow
-
+
Tab Container
Tab Container Start And End Overflow
-
+
Background design
Text only Start And End Overflow Custom Overflow Buttons
-
+
Start
End
Drag and drop
-
+
Text only End Overflow
Text only Start and End Overflow
-
+
@@ -249,7 +249,7 @@ TabContainer with text and additional-text
-<ui5-tabcontainer collapsed fixed tabs-overflow-mode="StartAndEnd">
+<ui5-tabcontainer collapsed fixed overflow-mode="StartAndEnd">
<ui5-tab text="Info" additional-text="3">
</ui5-tab>
<ui5-tab text="Attachments" additional-text="24" selected>
diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js
index cb600862286a..991475e53357 100644
--- a/packages/main/test/specs/TabContainer.spec.js
+++ b/packages/main/test/specs/TabContainer.spec.js
@@ -137,7 +137,7 @@ describe("TabContainer general interaction", () => {
it("tests start and end overflow behavior", async () => {
- assert.strictEqual(await browser.$("#tabContainerStartAndEndOverflow").getAttribute("tabs-overflow-mode"), "StartAndEnd", "overflow mode is set to StartAndEnd");
+ assert.strictEqual(await browser.$("#tabContainerStartAndEndOverflow").getAttribute("overflow-mode"), "StartAndEnd", "overflow mode is set to StartAndEnd");
// Resize
await browser.setWindowSize(1000, 1080);
diff --git a/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts b/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts
index 53ff91625adf..ca54cee6674b 100644
--- a/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts
+++ b/packages/playground/_stories/main/TabContainer/TabContainer.stories.ts
@@ -19,7 +19,7 @@ const Template: UI5StoryArgs<TabContainer, StoryArgsSlots> = (args) => {
?fixed="${ifDefined(args.fixed)}"
?collapsed="${ifDefined(args.collapsed)}"
tab-layout="${ifDefined(args.tabLayout)}"
- tabs-overflow-mode="${ifDefined(args.tabsOverflowMode)}"
+ overflow-mode="${ifDefined(args.overflowMode)}"
header-background-design="${ifDefined(args.headerBackgroundDesign)}"
content-background-design="${ifDefined(args.contentBackgroundDesign)}"
tabs-placement="${ifDefined(args.tabsPlacement)}"
diff --git a/packages/website/docs/_components_pages/main/TabContainer/TabContainer.mdx b/packages/website/docs/_components_pages/main/TabContainer/TabContainer.mdx
index 7c183f851ce4..429257983161 100644
--- a/packages/website/docs/_components_pages/main/TabContainer/TabContainer.mdx
+++ b/packages/website/docs/_components_pages/main/TabContainer/TabContainer.mdx
@@ -5,7 +5,7 @@ slug: ../../TabContainer
import Basic from "../../../_samples/main/TabContainer/Basic/Basic.md";
import TextOnlyTabs from "../../../_samples/main/TabContainer/TextOnlyTabs/TextOnlyTabs.md";
import TabLayout from "../../../_samples/main/TabContainer/TabLayout/TabLayout.md";
-import TabsOverflowMode from "../../../_samples/main/TabContainer/TabsOverflowMode/TabsOverflowMode.md";
+import OverflowMode from "../../../_samples/main/TabContainer/OverflowMode/OverflowMode.md";
import NestedTabs from "../../../_samples/main/TabContainer/NestedTabs/NestedTabs.md";
<%COMPONENT_OVERVIEW%>
@@ -27,5 +27,5 @@ import NestedTabs from "../../../_samples/main/TabContainer/NestedTabs/NestedTab
<NestedTabs />
### Tabs Overflow Mode
-<TabsOverflowMode />
+<OverflowMode />
diff --git a/packages/website/docs/_samples/main/TabContainer/TabsOverflowMode/TabsOverflowMode.md b/packages/website/docs/_samples/main/TabContainer/OverflowMode/OverflowMode.md
similarity index 100%
rename from packages/website/docs/_samples/main/TabContainer/TabsOverflowMode/TabsOverflowMode.md
rename to packages/website/docs/_samples/main/TabContainer/OverflowMode/OverflowMode.md
diff --git a/packages/website/docs/_samples/main/TabContainer/TabsOverflowMode/main.js b/packages/website/docs/_samples/main/TabContainer/OverflowMode/main.js
similarity index 100%
rename from packages/website/docs/_samples/main/TabContainer/TabsOverflowMode/main.js
rename to packages/website/docs/_samples/main/TabContainer/OverflowMode/main.js
diff --git a/packages/website/docs/_samples/main/TabContainer/TabsOverflowMode/sample.html b/packages/website/docs/_samples/main/TabContainer/OverflowMode/sample.html
similarity index 94%
rename from packages/website/docs/_samples/main/TabContainer/TabsOverflowMode/sample.html
rename to packages/website/docs/_samples/main/TabContainer/OverflowMode/sample.html
index 555338ebb162..b6f69fb02438 100644
--- a/packages/website/docs/_samples/main/TabContainer/TabsOverflowMode/sample.html
+++ b/packages/website/docs/_samples/main/TabContainer/OverflowMode/sample.html
@@ -9,7 +9,7 @@
<body style="background-color: var(--sapBackgroundColor);">
<!-- playground-fold-end -->
-<ui5-tabcontainer tabs-overflow-mode="End" collapsed fixed>
+<ui5-tabcontainer overflow-mode="End" collapsed fixed>
<ui5-tab text="Tab 1"></ui5-tab>
<ui5-tab text="Tab 2"></ui5-tab>
<ui5-tab text="Tab 3"></ui5-tab>
@@ -36,7 +36,7 @@
</ui5-tabcontainer>
<br>
-<ui5-tabcontainer tabs-overflow-mode="StartAndEnd" collapsed fixed>
+<ui5-tabcontainer overflow-mode="StartAndEnd" collapsed fixed>
<ui5-tab text="Tab 1"></ui5-tab>
<ui5-tab text="Tab 2"></ui5-tab>
<ui5-tab text="Tab 3"></ui5-tab>
From d3e2ed141df6812c09206c187a47423947353fc4 Mon Sep 17 00:00:00 2001
From: kskondov <konstantin.kondov@sap.com>
Date: Thu, 28 Mar 2024 17:50:02 +0200
Subject: [PATCH 34/60] =?UTF-8?q?refactor(ui5-tabcontainer):=20remove=20Ta?=
=?UTF-8?q?bContainerBackgroundDesign=20enume=E2=80=A6=20(#8570)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Removes `TabContainerBackgroundDesign` enum in favour of `BackgroundDesign` enum.
BREAKING CHANGE: If you previously imported `TabContainerBackgroundDesign`, use `BackgroundDesign` instead.
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
---
packages/main/src/TabContainer.ts | 10 ++++----
.../src/types/TabContainerBackgroundDesign.ts | 25 -------------------
2 files changed, 5 insertions(+), 30 deletions(-)
delete mode 100644 packages/main/src/types/TabContainerBackgroundDesign.ts
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
index 27684276f519..20b66112dc8f 100644
--- a/packages/main/src/TabContainer.ts
+++ b/packages/main/src/TabContainer.ts
@@ -52,7 +52,7 @@ import type CustomListItem from "./CustomListItem.js";
import ResponsivePopover from "./ResponsivePopover.js";
import TabContainerTabsPlacement from "./types/TabContainerTabsPlacement.js";
import SemanticColor from "./types/SemanticColor.js";
-import TabContainerBackgroundDesign from "./types/TabContainerBackgroundDesign.js";
+import BackgroundDesign from "./types/BackgroundDesign.js";
import TabLayout from "./types/TabLayout.js";
import OverflowMode from "./types/OverflowMode.js";
import type { IButton } from "./Button.js";
@@ -264,8 +264,8 @@ class TabContainer extends UI5Element {
* @since 1.10.0
* @public
*/
- @property({ type: TabContainerBackgroundDesign, defaultValue: TabContainerBackgroundDesign.Solid })
- headerBackgroundDesign!: `${TabContainerBackgroundDesign}`;
+ @property({ type: BackgroundDesign, defaultValue: BackgroundDesign.Solid })
+ headerBackgroundDesign!: `${BackgroundDesign}`;
/**
* Sets the background color of the Tab Container's content as `Solid`, `Transparent`, or `Translucent`.
@@ -273,8 +273,8 @@ class TabContainer extends UI5Element {
* @since 1.10.0
* @public
*/
- @property({ type: TabContainerBackgroundDesign, defaultValue: TabContainerBackgroundDesign.Solid })
- contentBackgroundDesign!: `${TabContainerBackgroundDesign}`;
+ @property({ type: BackgroundDesign, defaultValue: BackgroundDesign.Solid })
+ contentBackgroundDesign!: `${BackgroundDesign}`;
/**
* Defines the placement of the tab strip relative to the actual tabs' content.
diff --git a/packages/main/src/types/TabContainerBackgroundDesign.ts b/packages/main/src/types/TabContainerBackgroundDesign.ts
deleted file mode 100644
index 32edfc74980b..000000000000
--- a/packages/main/src/types/TabContainerBackgroundDesign.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Background design for the header and content of TabContainer.
- * @public
- */
-enum TabContainerBackgroundDesign {
- /**
- * A Solid background color.
- * @public
- */
- Solid = "Solid",
-
- /**
- * A Transparent background color.
- * @public
- */
- Transparent = "Transparent",
-
- /**
- * A Translucent background color.
- * @public
- */
- Translucent = "Translucent",
-}
-
-export default TabContainerBackgroundDesign;
From c742654a05a52769685a9f4f2e0a0719e4dae770 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Thu, 28 Mar 2024 09:37:28 +0200
Subject: [PATCH 35/60] chore: enable tree tests (#8558)
Co-authored-by: Nayden Naydenov <nnaydenow.work@sap.com>
---
packages/main/test/specs/Tree.spec.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/main/test/specs/Tree.spec.js b/packages/main/test/specs/Tree.spec.js
index 71b3d58de99a..86364b0adf71 100644
--- a/packages/main/test/specs/Tree.spec.js
+++ b/packages/main/test/specs/Tree.spec.js
@@ -195,7 +195,7 @@ describe("Tree slots", () => {
await browser.url(`test/pages/Tree.html`);
});
- it.only("items slot", async () => {
+ it("items slot", async () => {
const treeItem = await browser.$("#treeItem");
const btn = await browser.$("#btn");
From 9db92d932210c0a3675c77e03155334d028acac9 Mon Sep 17 00:00:00 2001
From: ui5-webcomponents-bot <ui5-webcomponents-bot@sap.com>
Date: Thu, 28 Mar 2024 08:06:01 +0000
Subject: [PATCH 36/60] chore(release): publish v1.24.0-rc.3 [ci skip]
---
CHANGELOG.md | 21 +++++++++++++++++++++
lerna.json | 2 +-
packages/base/CHANGELOG.md | 11 +++++++++++
packages/base/package.json | 4 ++--
packages/create-package/CHANGELOG.md | 8 ++++++++
packages/create-package/package.json | 2 +-
packages/fiori/CHANGELOG.md | 11 +++++++++++
packages/fiori/package.json | 12 ++++++------
packages/icons-business-suite/CHANGELOG.md | 8 ++++++++
packages/icons-business-suite/package.json | 6 +++---
packages/icons-tnt/CHANGELOG.md | 8 ++++++++
packages/icons-tnt/package.json | 6 +++---
packages/icons/CHANGELOG.md | 8 ++++++++
packages/icons/package.json | 6 +++---
packages/localization/CHANGELOG.md | 11 +++++++++++
packages/localization/package.json | 6 +++---
packages/main/CHANGELOG.md | 15 +++++++++++++++
packages/main/package.json | 16 ++++++++--------
packages/playground/CHANGELOG.md | 8 ++++++++
packages/playground/package.json | 2 +-
packages/theming/CHANGELOG.md | 8 ++++++++
packages/theming/package.json | 6 +++---
packages/tools/CHANGELOG.md | 11 +++++++++++
packages/tools/package.json | 2 +-
packages/website/CHANGELOG.md | 8 ++++++++
packages/website/package.json | 2 +-
26 files changed, 172 insertions(+), 36 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 88bfe69a97f9..06be4916cac5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,27 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+
+### Bug Fixes
+
+* **ui5-avatar:** revise active state styles ([#8474](https://github.com/SAP/ui5-webcomponents/issues/8474)) ([3f9430c](https://github.com/SAP/ui5-webcomponents/commit/3f9430c64cfd349319b5f17ebc753ce0639a4ab8)), closes [#8309](https://github.com/SAP/ui5-webcomponents/issues/8309)
+* **ui5-button:** fix focus in belize ([#8498](https://github.com/SAP/ui5-webcomponents/issues/8498)) ([483d942](https://github.com/SAP/ui5-webcomponents/commit/483d942c3ba6227bd56dead070fba2313c2d97c2))
+* **ui5-carousel:** Fixed paging indicator numbers in right-to-left (RTL) mode ([#8543](https://github.com/SAP/ui5-webcomponents/issues/8543)) ([c032c0c](https://github.com/SAP/ui5-webcomponents/commit/c032c0cadbe4f9fc2e3b642d0155830ffb52325a))
+* **ui5-file-uploader:** adjust mouse cursor style ([#8485](https://github.com/SAP/ui5-webcomponents/issues/8485)) ([37a2e0d](https://github.com/SAP/ui5-webcomponents/commit/37a2e0df5643b643915284d5b36084803104bd6e)), closes [#7794](https://github.com/SAP/ui5-webcomponents/issues/7794)
+* **ui5-tabcontainer:** fix tab selection ([#8547](https://github.com/SAP/ui5-webcomponents/issues/8547)) ([5eaa835](https://github.com/SAP/ui5-webcomponents/commit/5eaa83574e98a251043b38efc34fc4477f79777c))
+
+
+### Features
+
+* **framework:** support sr, mk, cnr locales ([#8534](https://github.com/SAP/ui5-webcomponents/issues/8534)) ([5b410d6](https://github.com/SAP/ui5-webcomponents/commit/5b410d65267e79d4420b1a6d6788db6495abc962)), closes [#8163](https://github.com/SAP/ui5-webcomponents/issues/8163)
+* **ui5-side-navigation:** make items customizable ([#8479](https://github.com/SAP/ui5-webcomponents/issues/8479)) ([95f6891](https://github.com/SAP/ui5-webcomponents/commit/95f68918c44055b8c005462b8ed083f7aecf61fb))
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
diff --git a/lerna.json b/lerna.json
index ee8145372ffb..f11e56a9ca1d 100644
--- a/lerna.json
+++ b/lerna.json
@@ -13,7 +13,7 @@
"packages/website",
"packages/create-package"
],
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"command": {
"publish": {
"allowBranch": "*",
diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md
index cadb01549054..3b07d6adb1fe 100644
--- a/packages/base/CHANGELOG.md
+++ b/packages/base/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+
+### Features
+
+* **framework:** support sr, mk, cnr locales ([#8534](https://github.com/SAP/ui5-webcomponents/issues/8534)) ([5b410d6](https://github.com/SAP/ui5-webcomponents/commit/5b410d65267e79d4420b1a6d6788db6495abc962)), closes [#8163](https://github.com/SAP/ui5-webcomponents/issues/8163)
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
diff --git a/packages/base/package.json b/packages/base/package.json
index e0b59091ac36..6f28796c1986 100644
--- a/packages/base/package.json
+++ b/packages/base/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-base",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: webcomponents.base",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
@@ -45,7 +45,7 @@
},
"devDependencies": {
"@openui5/sap.ui.core": "1.120.5",
- "@ui5/webcomponents-tools": "1.24.0-rc.2",
+ "@ui5/webcomponents-tools": "1.24.0-rc.3",
"chromedriver": "^122.0.6",
"clean-css": "^5.2.2",
"copy-and-watch": "^0.1.5",
diff --git a/packages/create-package/CHANGELOG.md b/packages/create-package/CHANGELOG.md
index 117bed5ffbc5..4f1fc126b65b 100644
--- a/packages/create-package/CHANGELOG.md
+++ b/packages/create-package/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/create-webcomponents-package
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/create-webcomponents-package
diff --git a/packages/create-package/package.json b/packages/create-package/package.json
index de3b957d7699..b36e8fb1a18c 100644
--- a/packages/create-package/package.json
+++ b/packages/create-package/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/create-webcomponents-package",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: create package",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
diff --git a/packages/fiori/CHANGELOG.md b/packages/fiori/CHANGELOG.md
index 7f7cdeda1e2f..2cb589decb9b 100644
--- a/packages/fiori/CHANGELOG.md
+++ b/packages/fiori/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+
+### Features
+
+* **ui5-side-navigation:** make items customizable ([#8479](https://github.com/SAP/ui5-webcomponents/issues/8479)) ([95f6891](https://github.com/SAP/ui5-webcomponents/commit/95f68918c44055b8c005462b8ed083f7aecf61fb))
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
diff --git a/packages/fiori/package.json b/packages/fiori/package.json
index edbde8949dc9..851dad156a82 100644
--- a/packages/fiori/package.json
+++ b/packages/fiori/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-fiori",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: webcomponents.fiori",
"ui5": {
"webComponentsPackage": true
@@ -46,14 +46,14 @@
"directory": "packages/fiori"
},
"dependencies": {
- "@ui5/webcomponents": "1.24.0-rc.2",
- "@ui5/webcomponents-base": "1.24.0-rc.2",
- "@ui5/webcomponents-icons": "1.24.0-rc.2",
- "@ui5/webcomponents-theming": "1.24.0-rc.2",
+ "@ui5/webcomponents": "1.24.0-rc.3",
+ "@ui5/webcomponents-base": "1.24.0-rc.3",
+ "@ui5/webcomponents-icons": "1.24.0-rc.3",
+ "@ui5/webcomponents-theming": "1.24.0-rc.3",
"@zxing/library": "^0.17.1"
},
"devDependencies": {
- "@ui5/webcomponents-tools": "1.24.0-rc.2",
+ "@ui5/webcomponents-tools": "1.24.0-rc.3",
"chromedriver": "^122.0.6"
}
}
diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md
index 88235bdbab94..e8b0984d43f8 100644
--- a/packages/icons-business-suite/CHANGELOG.md
+++ b/packages/icons-business-suite/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite
diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json
index 44c038c43e01..16b925169df1 100644
--- a/packages/icons-business-suite/package.json
+++ b/packages/icons-business-suite/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-icons-business-suite",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: SAP Fiori Tools icon set",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
@@ -28,9 +28,9 @@
"directory": "packages/icons-business-suite"
},
"dependencies": {
- "@ui5/webcomponents-base": "1.24.0-rc.2"
+ "@ui5/webcomponents-base": "1.24.0-rc.3"
},
"devDependencies": {
- "@ui5/webcomponents-tools": "1.24.0-rc.2"
+ "@ui5/webcomponents-tools": "1.24.0-rc.3"
}
}
diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md
index b5b62cfd066c..75c9e3f65e28 100644
--- a/packages/icons-tnt/CHANGELOG.md
+++ b/packages/icons-tnt/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/webcomponents-icons-tnt
diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json
index f8b4b73786c7..0943c15b821d 100644
--- a/packages/icons-tnt/package.json
+++ b/packages/icons-tnt/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-icons-tnt",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: SAP Fiori Tools icon set",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
@@ -28,9 +28,9 @@
"directory": "packages/icons-tnt"
},
"dependencies": {
- "@ui5/webcomponents-base": "1.24.0-rc.2"
+ "@ui5/webcomponents-base": "1.24.0-rc.3"
},
"devDependencies": {
- "@ui5/webcomponents-tools": "1.24.0-rc.2"
+ "@ui5/webcomponents-tools": "1.24.0-rc.3"
}
}
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 79541f615e76..7197d12b99ed 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-icons
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/webcomponents-icons
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 24436d93f411..fc9e00a4e344 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-icons",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: webcomponents.SAP-icons",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
@@ -28,9 +28,9 @@
"directory": "packages/icons"
},
"dependencies": {
- "@ui5/webcomponents-base": "1.24.0-rc.2"
+ "@ui5/webcomponents-base": "1.24.0-rc.3"
},
"devDependencies": {
- "@ui5/webcomponents-tools": "1.24.0-rc.2"
+ "@ui5/webcomponents-tools": "1.24.0-rc.3"
}
}
diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md
index 67580f252db1..783888c1bdcb 100644
--- a/packages/localization/CHANGELOG.md
+++ b/packages/localization/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+
+### Features
+
+* **framework:** support sr, mk, cnr locales ([#8534](https://github.com/SAP/ui5-webcomponents/issues/8534)) ([5b410d6](https://github.com/SAP/ui5-webcomponents/commit/5b410d65267e79d4420b1a6d6788db6495abc962)), closes [#8163](https://github.com/SAP/ui5-webcomponents/issues/8163)
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/webcomponents-localization
diff --git a/packages/localization/package.json b/packages/localization/package.json
index 01d6ff13236b..4f28a03b6d93 100644
--- a/packages/localization/package.json
+++ b/packages/localization/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-localization",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "Localization for UI5 Web Components",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
@@ -33,7 +33,7 @@
"@babel/generator": "^7.23.6",
"@babel/parser": "^7.23.6",
"@openui5/sap.ui.core": "1.120.5",
- "@ui5/webcomponents-tools": "1.24.0-rc.2",
+ "@ui5/webcomponents-tools": "1.24.0-rc.3",
"babel-plugin-amd-to-esm": "^2.0.3",
"chromedriver": "^122.0.6",
"estree-walk": "^2.2.0",
@@ -42,6 +42,6 @@
},
"dependencies": {
"@types/openui5": "^1.113.0",
- "@ui5/webcomponents-base": "1.24.0-rc.2"
+ "@ui5/webcomponents-base": "1.24.0-rc.3"
}
}
diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md
index a31738cef0d4..fc339aeb31fe 100644
--- a/packages/main/CHANGELOG.md
+++ b/packages/main/CHANGELOG.md
@@ -3,6 +3,21 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+
+### Bug Fixes
+
+* **ui5-avatar:** revise active state styles ([#8474](https://github.com/SAP/ui5-webcomponents/issues/8474)) ([3f9430c](https://github.com/SAP/ui5-webcomponents/commit/3f9430c64cfd349319b5f17ebc753ce0639a4ab8)), closes [#8309](https://github.com/SAP/ui5-webcomponents/issues/8309)
+* **ui5-button:** fix focus in belize ([#8498](https://github.com/SAP/ui5-webcomponents/issues/8498)) ([483d942](https://github.com/SAP/ui5-webcomponents/commit/483d942c3ba6227bd56dead070fba2313c2d97c2))
+* **ui5-carousel:** Fixed paging indicator numbers in right-to-left (RTL) mode ([#8543](https://github.com/SAP/ui5-webcomponents/issues/8543)) ([c032c0c](https://github.com/SAP/ui5-webcomponents/commit/c032c0cadbe4f9fc2e3b642d0155830ffb52325a))
+* **ui5-file-uploader:** adjust mouse cursor style ([#8485](https://github.com/SAP/ui5-webcomponents/issues/8485)) ([37a2e0d](https://github.com/SAP/ui5-webcomponents/commit/37a2e0df5643b643915284d5b36084803104bd6e)), closes [#7794](https://github.com/SAP/ui5-webcomponents/issues/7794)
+* **ui5-tabcontainer:** fix tab selection ([#8547](https://github.com/SAP/ui5-webcomponents/issues/8547)) ([5eaa835](https://github.com/SAP/ui5-webcomponents/commit/5eaa83574e98a251043b38efc34fc4477f79777c))
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
diff --git a/packages/main/package.json b/packages/main/package.json
index 76c761f02b10..e0eb0581c51d 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: webcomponents.main",
"ui5": {
"webComponentsPackage": true
@@ -48,15 +48,15 @@
"directory": "packages/main"
},
"dependencies": {
- "@ui5/webcomponents-base": "1.24.0-rc.2",
- "@ui5/webcomponents-icons": "1.24.0-rc.2",
- "@ui5/webcomponents-icons-business-suite": "1.24.0-rc.2",
- "@ui5/webcomponents-icons-tnt": "1.24.0-rc.2",
- "@ui5/webcomponents-localization": "1.24.0-rc.2",
- "@ui5/webcomponents-theming": "1.24.0-rc.2"
+ "@ui5/webcomponents-base": "1.24.0-rc.3",
+ "@ui5/webcomponents-icons": "1.24.0-rc.3",
+ "@ui5/webcomponents-icons-business-suite": "1.24.0-rc.3",
+ "@ui5/webcomponents-icons-tnt": "1.24.0-rc.3",
+ "@ui5/webcomponents-localization": "1.24.0-rc.3",
+ "@ui5/webcomponents-theming": "1.24.0-rc.3"
},
"devDependencies": {
- "@ui5/webcomponents-tools": "1.24.0-rc.2",
+ "@ui5/webcomponents-tools": "1.24.0-rc.3",
"chromedriver": "^122.0.6"
}
}
diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md
index 0f08bc6ffd2c..2e9cb16c8db0 100644
--- a/packages/playground/CHANGELOG.md
+++ b/packages/playground/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-playground
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/webcomponents-playground
diff --git a/packages/playground/package.json b/packages/playground/package.json
index 7e881c451edc..56a98c4d9488 100644
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@@ -1,7 +1,7 @@
{
"name": "@ui5/webcomponents-playground",
"private": true,
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components Playground",
"author": "SAPÂ SEÂ (https://www.sap.com)",
"license": "Apache-2.0",
diff --git a/packages/theming/CHANGELOG.md b/packages/theming/CHANGELOG.md
index 5d81b1653e16..d64401a57c4a 100644
--- a/packages/theming/CHANGELOG.md
+++ b/packages/theming/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-theming
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/webcomponents-theming
diff --git a/packages/theming/package.json b/packages/theming/package.json
index 063c384a7d6a..df312477377e 100644
--- a/packages/theming/package.json
+++ b/packages/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-theming",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: webcomponents.theming",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
@@ -31,10 +31,10 @@
},
"dependencies": {
"@sap-theming/theming-base-content": "11.12.0",
- "@ui5/webcomponents-base": "1.24.0-rc.2"
+ "@ui5/webcomponents-base": "1.24.0-rc.3"
},
"devDependencies": {
- "@ui5/webcomponents-tools": "1.24.0-rc.2",
+ "@ui5/webcomponents-tools": "1.24.0-rc.3",
"globby": "^13.1.1",
"json-beautify": "^1.1.1",
"nps": "^5.10.0",
diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md
index 5ffaeab17cc2..cd6df4be51db 100644
--- a/packages/tools/CHANGELOG.md
+++ b/packages/tools/CHANGELOG.md
@@ -3,6 +3,17 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+
+### Features
+
+* **framework:** support sr, mk, cnr locales ([#8534](https://github.com/SAP/ui5-webcomponents/issues/8534)) ([5b410d6](https://github.com/SAP/ui5-webcomponents/commit/5b410d65267e79d4420b1a6d6788db6495abc962)), closes [#8163](https://github.com/SAP/ui5-webcomponents/issues/8163)
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
**Note:** Version bump only for package @ui5/webcomponents-tools
diff --git a/packages/tools/package.json b/packages/tools/package.json
index 0e4e32beaf78..9a7b4409bf53 100644
--- a/packages/tools/package.json
+++ b/packages/tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-tools",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"description": "UI5 Web Components: webcomponents.tools",
"author": "SAP SE (https://www.sap.com)",
"license": "Apache-2.0",
diff --git a/packages/website/CHANGELOG.md b/packages/website/CHANGELOG.md
index ec20359345a1..42fa257d6251 100644
--- a/packages/website/CHANGELOG.md
+++ b/packages/website/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [1.24.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.2...v1.24.0-rc.3) (2024-03-28)
+
+**Note:** Version bump only for package @ui5/webcomponents-website
+
+
+
+
+
# [1.24.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.24.0-rc.1...v1.24.0-rc.2) (2024-03-21)
diff --git a/packages/website/package.json b/packages/website/package.json
index 0753b67edbcf..dee2209cc242 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -1,6 +1,6 @@
{
"name": "@ui5/webcomponents-website",
- "version": "1.24.0-rc.2",
+ "version": "1.24.0-rc.3",
"private": true,
"scripts": {
"generate-local-cdn": "rimraf ./local-cdn && node ./build-scripts/local-cdn.mjs",
From 13c9c58a737f79f535cf5383056c0e7d30b69b07 Mon Sep 17 00:00:00 2001
From: kskondov <konstantin.kondov@sap.com>
Date: Fri, 29 Mar 2024 13:56:15 +0200
Subject: [PATCH 37/60] refactor(ui5-tabcontainer): remove deprecated
showOverflow property (#8568)
Removes the deprecated showOverflow property.
BREAKING CHANGE: The showOverflow property is removed. If previously you have used:
```html
<ui5-tabcontainer show-overflow></ui5-tabcontainer>
```
now use the overflowButton slot:
```html
<ui5-tabcontainer>
<ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
<ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
</ui5-tabcontainer>
```
Relates to https://github.com/SAP/ui5-webcomponents/issues/8461
---
packages/main/src/TabContainer.ts | 17 -----------------
1 file changed, 17 deletions(-)
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
index 20b66112dc8f..1be9f409a262 100644
--- a/packages/main/src/TabContainer.ts
+++ b/packages/main/src/TabContainer.ts
@@ -219,19 +219,6 @@ class TabContainer extends UI5Element {
@property({ type: Boolean })
collapsed!: boolean;
- /**
- * Defines whether the overflow select list is displayed.
- *
- * The overflow select list represents a list, where all tabs are displayed
- * so that it's easier for the user to select a specific tab.
- * @default false
- * @public
- * @deprecated Since the introduction of OverflowMode, overflows will always be visible if there is not enough space for all tabs,
- * all hidden tabs are moved to a select list in the respective overflows and are accessible via the `overflowButton` and / or `startOverflowButton` slots.
- */
- @property({ type: Boolean })
- showOverflow!: boolean;
-
/**
* Defines the alignment of the content and the `additionalText` of a tab.
*
@@ -403,10 +390,6 @@ class TabContainer extends UI5Element {
if (!this._animationRunning) {
this._contentCollapsed = this.collapsed;
}
-
- if (this.showOverflow) {
- console.warn(`The "show-overflow" property is deprecated and will be removed in a future release.`); // eslint-disable-line
- }
}
onAfterRendering() {
From 18e2759687a3d8460cab14b1df8784f73735c0b4 Mon Sep 17 00:00:00 2001
From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com>
Date: Mon, 1 Apr 2024 17:11:02 +0300
Subject: [PATCH 38/60] refactor(ui5-popover): rename property placementType to
placement (#8596)
Renames the `placementType` property of `ui5-popover`.
Also renames the `PopoverPlacementType` enum to `PopoverPlacement`.
BREAKING CHANGE: The `placementType` property and the `PopoverPlacementType` enum have been renamed.
If you have previously used the `placementType` property and the `PopoverPlacementType`
```html
<ui5-popover placement-type="Bottom"></ui5-popover>
```
```js
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js";
```
Now use `placement` instead:
```html
<ui5-placement="Bottom"></ui5-popover>
```
```js
import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
```
Related to https://github.com/SAP/ui5-webcomponents/issues/8461
---
.../NotificationOverflowActionsPopover.hbs | 2 +-
packages/fiori/src/ShellBarPopover.hbs | 4 +-
packages/fiori/src/WizardPopover.hbs | 2 +-
.../test/pages/NotificationListGroupItem.html | 2 +-
.../test/pages/NotificationListItem.html | 2 +-
packages/fiori/test/pages/ShellBar.html | 6 +-
.../NotificationListGroupItem.sample.html | 4 +-
.../samples/NotificationListItem.sample.html | 4 +-
.../test/samples/ProductSwitch.sample.html | 4 +-
.../fiori/test/samples/ShellBar.sample.html | 4 +-
packages/main/src/BreadcrumbsPopover.hbs | 2 +-
packages/main/src/ColorPalettePopover.hbs | 2 +-
packages/main/src/ComboBoxPopover.hbs | 4 +-
packages/main/src/DatePickerPopover.hbs | 2 +-
packages/main/src/FileUploaderPopover.hbs | 2 +-
packages/main/src/InputPopover.hbs | 4 +-
packages/main/src/Menu.hbs | 2 +-
packages/main/src/Menu.ts | 4 +-
packages/main/src/MultiComboBoxPopover.hbs | 4 +-
packages/main/src/Popover.ts | 76 +++++++++----------
packages/main/src/SelectMenu.hbs | 2 +-
packages/main/src/SelectPopover.hbs | 4 +-
packages/main/src/TabContainerPopover.hbs | 2 +-
packages/main/src/TextAreaPopover.hbs | 2 +-
packages/main/src/TimePickerPopover.hbs | 4 +-
packages/main/src/TokenizerPopover.hbs | 2 +-
packages/main/src/Toolbar.ts | 2 +-
packages/main/src/ToolbarPopover.hbs | 2 +-
packages/main/src/themes/Menu.css | 2 +-
packages/main/src/themes/Popover.css | 24 +++---
...erPlacementType.ts => PopoverPlacement.ts} | 6 +-
packages/main/test/pages/AvatarGroup.html | 4 +-
packages/main/test/pages/Dialog.html | 4 +-
packages/main/test/pages/Input_quickview.html | 4 +-
packages/main/test/pages/List_test_page.html | 2 +-
packages/main/test/pages/Popover.html | 46 +++++------
.../main/test/pages/PopoverArrowBounds.html | 14 ++--
packages/main/test/pages/Popups.html | 8 +-
.../main/test/pages/ResponsivePopover.html | 2 +-
.../main/test/samples/AvatarGroup.sample.html | 12 +--
.../NotificationListGroupItem.stories.ts | 2 +-
.../NotificationListItem.stories.ts | 2 +-
.../ProductSwitch/ProductSwitch.stories.ts | 2 +-
.../fiori/ShellBar/ShellBar.stories.ts | 2 +-
.../AvatarGroup/TemplateGroupWithPopover.ts | 2 +-
.../TemplateIndividualWithPopover.ts | 4 +-
.../_stories/main/Popover/Popover.stories.ts | 2 +-
.../ResponsivePopover.stories.ts | 2 +-
.../InShellBar/sample.html | 2 +-
.../InShellBar/sample.html | 2 +-
.../ProductSwitch/WithShellBar/sample.html | 2 +-
.../fiori/ShellBar/Advanced/sample.html | 2 +-
.../AvatarGroup/GroupWithPopover/sample.html | 2 +-
.../IndividualWithPopover/sample.html | 4 +-
.../main/Popover/Placement/sample.html | 4 +-
.../ResponsivePopover/Placement/sample.html | 4 +-
56 files changed, 162 insertions(+), 162 deletions(-)
rename packages/main/src/types/{PopoverPlacementType.ts => PopoverPlacement.ts} (82%)
diff --git a/packages/fiori/src/NotificationOverflowActionsPopover.hbs b/packages/fiori/src/NotificationOverflowActionsPopover.hbs
index e483f4a53b89..1c7af7a6cc80 100644
--- a/packages/fiori/src/NotificationOverflowActionsPopover.hbs
+++ b/packages/fiori/src/NotificationOverflowActionsPopover.hbs
@@ -1,6 +1,6 @@
<ui5-popover
class="ui5-notification-overflow-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="End"
hide-arrow
>
diff --git a/packages/fiori/src/ShellBarPopover.hbs b/packages/fiori/src/ShellBarPopover.hbs
index 4ce3bdd8039e..f997b3723039 100644
--- a/packages/fiori/src/ShellBarPopover.hbs
+++ b/packages/fiori/src/ShellBarPopover.hbs
@@ -1,6 +1,6 @@
<ui5-popover class="ui5-shellbar-menu-popover"
hide-arrow
- placement-type="Bottom"
+ placement="Bottom"
@ui5-before-open={{_menuPopoverBeforeOpen}}
@ui5-after-close={{_menuPopoverAfterClose}}
>
@@ -12,7 +12,7 @@
</ui5-popover>
<ui5-popover class="ui5-shellbar-overflow-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="{{popoverHorizontalAlign}}"
hide-arrow
@ui5-before-open={{_overflowPopoverBeforeOpen}}
diff --git a/packages/fiori/src/WizardPopover.hbs b/packages/fiori/src/WizardPopover.hbs
index b5f774fc0b19..efeffb96861a 100644
--- a/packages/fiori/src/WizardPopover.hbs
+++ b/packages/fiori/src/WizardPopover.hbs
@@ -1,6 +1,6 @@
<ui5-responsive-popover
horizontal-align="Center"
- placement-type="Bottom"
+ placement="Bottom"
aria-label="{{actionSheetStepsText}}"
class="{{classes.popover}}"
@ui5-after-close={{_afterClosePopover}}
diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
index f7869cb654cc..00a7d3d133d8 100644
--- a/packages/fiori/test/pages/NotificationListGroupItem.html
+++ b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -178,7 +178,7 @@
<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
- <ui5-popover id="notificationsPopover" class="notificationlistgroupitem2auto" placement-type="Bottom" horizontal-align="End">
+ <ui5-popover id="notificationsPopover" class="notificationlistgroupitem2auto" placement="Bottom" horizontal-align="End">
<ui5-list id="notificationListTop" header-text="Notifications titleText and content 'truncates'">
<ui5-li-notification-group
show-close
diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
index cf037ff1942e..2ef525d5e3c7 100644
--- a/packages/fiori/test/pages/NotificationListItem.html
+++ b/packages/fiori/test/pages/NotificationListItem.html
@@ -146,7 +146,7 @@
<ui5-toast id="wcToastBS" duration="2000"></ui5-toast>
- <ui5-popover id="notificationsPopover" class="notificationlistitem2auto" placement-type="Bottom" horizontal-align="End">
+ <ui5-popover id="notificationsPopover" class="notificationlistitem2auto" placement="Bottom" horizontal-align="End">
<ui5-list id="notificationListTop" header-text="Notifications titleText and content 'truncates'">
<ui5-li-notification
show-close
diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
index f7d2c78aac6e..99b319e50d97 100644
--- a/packages/fiori/test/pages/ShellBar.html
+++ b/packages/fiori/test/pages/ShellBar.html
@@ -148,7 +148,7 @@ <h3>ShellBar in Compact</h3>
</div>
</section>
- <ui5-popover id="popover" placement-type="Bottom">
+ <ui5-popover id="popover" placement="Bottom">
<div class="popover-header">
<ui5-title class="shellbar2auto">John Doe</ui5-title>
</div>
@@ -164,7 +164,7 @@ <h3>ShellBar in Compact</h3>
</div>
</ui5-popover>
- <ui5-popover id="app-list-popover" placement-type="Bottom">
+ <ui5-popover id="app-list-popover" placement="Bottom">
<ui5-list separators="None">
<ui5-li>Application 1</ui5-li>
<ui5-li>Application 2</ui5-li>
@@ -174,7 +174,7 @@ <h3>ShellBar in Compact</h3>
</ui5-list>
</ui5-popover>
- <ui5-popover id="custom-item-popover" placement-type="Bottom">
+ <ui5-popover id="custom-item-popover" placement="Bottom">
<ui5-list separators="None">
<ui5-li id="custom-item-1" type="Active">Custom Popover Item 1</ui5-li>
<ui5-li type="Active">Custom Popover Item 2</ui5-li>
diff --git a/packages/fiori/test/samples/NotificationListGroupItem.sample.html b/packages/fiori/test/samples/NotificationListGroupItem.sample.html
index a924a1d5073c..239a0f14d590 100644
--- a/packages/fiori/test/samples/NotificationListGroupItem.sample.html
+++ b/packages/fiori/test/samples/NotificationListGroupItem.sample.html
@@ -186,7 +186,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
>
</ui5-shellbar>
- <ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="End">
+ <ui5-popover id="notificationsPopover" style="max-width: 400px" placement="Bottom" horizontal-align="End">
<ui5-list id="notificationListTop" header-text="Notifications grouped">
<ui5-li-notification-group
show-close
@@ -328,7 +328,7 @@ <h3>NotificationListGroupItem In ShellBar</h3>
<ui5-popover
id="notificationsPopover"
style="max-width: 400px"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="End"
>
<ui5-list header-text="Notifications">
diff --git a/packages/fiori/test/samples/NotificationListItem.sample.html b/packages/fiori/test/samples/NotificationListItem.sample.html
index 2305adbb9fcb..00807909a248 100644
--- a/packages/fiori/test/samples/NotificationListItem.sample.html
+++ b/packages/fiori/test/samples/NotificationListItem.sample.html
@@ -190,7 +190,7 @@ <h3>NotificationListItem In ShellBar</h3>
>
</ui5-shellbar>
- <ui5-popover id="notificationsPopover" style="max-width: 400px" placement-type="Bottom" horizontal-align="End">
+ <ui5-popover id="notificationsPopover" style="max-width: 400px" placement="Bottom" horizontal-align="End">
<ui5-list id="notificationListTop" header-text="Notifications">
<ui5-li-notification
show-close
@@ -264,7 +264,7 @@ <h3>NotificationListItem In ShellBar</h3>
<ui5-popover
id="notificationsPopover"
style="max-width: 400px"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Right"
>
<ui5-list header-text="Notifications">
diff --git a/packages/fiori/test/samples/ProductSwitch.sample.html b/packages/fiori/test/samples/ProductSwitch.sample.html
index e3045b9bf40b..792b7d65f51a 100644
--- a/packages/fiori/test/samples/ProductSwitch.sample.html
+++ b/packages/fiori/test/samples/ProductSwitch.sample.html
@@ -40,7 +40,7 @@ <h3>ProductSwitch within ShellBar</h3>
show-product-switch
show-co-pilot>
</ui5-shellbar>
- <ui5-popover id="productswitch-popover" placement-type="Bottom">
+ <ui5-popover id="productswitch-popover" placement="Bottom">
<ui5-product-switch>
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
@@ -82,7 +82,7 @@ <h3>ProductSwitch within ShellBar</h3>
show-product-switch
show-co-pilot>
</ui5-shellbar>
-<ui5-popover id="productswitch-popover" placement-type="Bottom">
+<ui5-popover id="productswitch-popover" placement="Bottom">
<ui5-product-switch>
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
diff --git a/packages/fiori/test/samples/ShellBar.sample.html b/packages/fiori/test/samples/ShellBar.sample.html
index 4653707134a6..9768d120a1e3 100644
--- a/packages/fiori/test/samples/ShellBar.sample.html
+++ b/packages/fiori/test/samples/ShellBar.sample.html
@@ -48,7 +48,7 @@ <h3>ShellBar</h3>
<ui5-li slot="menuItems">Application 5</ui5-li>
</ui5-shellbar>
- <ui5-popover id="action-popover" placement-type="Bottom">
+ <ui5-popover id="action-popover" placement="Bottom">
<div class="action-popover-header">
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
</div>
@@ -101,7 +101,7 @@ <h3>ShellBar</h3>
</ui5-shellbar>
-<ui5-popover id="popover" placement-type="Bottom">
+<ui5-popover id="popover" placement="Bottom">
<div class="popover-header">
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
</div>
diff --git a/packages/main/src/BreadcrumbsPopover.hbs b/packages/main/src/BreadcrumbsPopover.hbs
index d1d109e33be8..9a761dcdc779 100644
--- a/packages/main/src/BreadcrumbsPopover.hbs
+++ b/packages/main/src/BreadcrumbsPopover.hbs
@@ -2,7 +2,7 @@
class="ui5-breadcrumbs-popover"
hide-arrow
content-only-on-desktop
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
_hide-header
@keydown="{{_onkeydown}}">
diff --git a/packages/main/src/ColorPalettePopover.hbs b/packages/main/src/ColorPalettePopover.hbs
index 2927d00d4015..8a3f589b66b8 100644
--- a/packages/main/src/ColorPalettePopover.hbs
+++ b/packages/main/src/ColorPalettePopover.hbs
@@ -1,7 +1,7 @@
<ui5-responsive-popover
hide-arrow
content-only-on-desktop
- placement-type="Bottom"
+ placement="Bottom"
?open="{{_open}}"
.opener="{{opener}}"
@ui5-after-close="{{onAfterClose}}"
diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
index bf07869baeba..80c9b6386a16 100644
--- a/packages/main/src/ComboBoxPopover.hbs
+++ b/packages/main/src/ComboBoxPopover.hbs
@@ -1,7 +1,7 @@
<ui5-responsive-popover
class="{{classes.popover}}"
hide-arrow
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
style="{{styles.suggestionsPopover}}"
@ui5-after-open={{_afterOpenPopover}}
@@ -96,7 +96,7 @@
hide-arrow
class="ui5-valuestatemessage-popover"
horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
- placement-type="Bottom"
+ placement="Bottom"
>
<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
index 1d61d1b45dd2..0588b1d58776 100644
--- a/packages/main/src/DatePickerPopover.hbs
+++ b/packages/main/src/DatePickerPopover.hbs
@@ -1,7 +1,7 @@
<ui5-responsive-popover
id="{{_id}}-responsive-popover"
allow-target-overlap
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
hide-arrow
?_hide-header={{_shouldHideHeader}}
diff --git a/packages/main/src/FileUploaderPopover.hbs b/packages/main/src/FileUploaderPopover.hbs
index 555efd4f4156..57543b0adb7a 100644
--- a/packages/main/src/FileUploaderPopover.hbs
+++ b/packages/main/src/FileUploaderPopover.hbs
@@ -4,7 +4,7 @@
prevent-focus-restore
hide-arrow
class="ui5-valuestatemessage-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
>
<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
index 2261c8e6fd38..887adf4922ab 100644
--- a/packages/main/src/InputPopover.hbs
+++ b/packages/main/src/InputPopover.hbs
@@ -3,7 +3,7 @@
class="{{classes.popover}}"
hide-arrow
_disable-initial-focus
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
style="{{styles.suggestionsPopover}}"
@ui5-after-open="{{_afterOpenPopover}}"
@@ -72,7 +72,7 @@
prevent-focus-restore
hide-arrow
class="ui5-valuestatemessage-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
>
<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
diff --git a/packages/main/src/Menu.hbs b/packages/main/src/Menu.hbs
index 84665d659040..875e9439b3a4 100644
--- a/packages/main/src/Menu.hbs
+++ b/packages/main/src/Menu.hbs
@@ -2,7 +2,7 @@
id="{{_id}}-menu-rp"
class="ui5-menu-rp"
horizontal-align="Start"
- placement-type={{placementType}}
+ placement={{placement}}
vertical-align={{verticalAlign}}
hide-arrow
allow-target-overlap
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
index a5ef20ce2629..e4c5150fb468 100644
--- a/packages/main/src/Menu.ts
+++ b/packages/main/src/Menu.ts
@@ -28,7 +28,7 @@ import StandardListItem from "./StandardListItem.js";
import Icon from "./Icon.js";
import BusyIndicator from "./BusyIndicator.js";
import type MenuItem from "./MenuItem.js";
-import PopoverPlacementType from "./types/PopoverPlacementType.js";
+import PopoverPlacement from "./types/PopoverPlacement.js";
import type { ListItemClickEventDetail } from "./List.js";
import staticAreaMenuTemplate from "./generated/templates/MenuTemplate.lit.js";
import {
@@ -337,7 +337,7 @@ class Menu extends UI5Element {
return this.effectiveDir === "rtl";
}
- get placementType(): `${PopoverPlacementType}` {
+ get placement(): `${PopoverPlacement}` {
const placement = this.isRtl ? "Start" : "End";
return this._isSubMenu ? placement : "Bottom";
}
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index 7553ad250dd2..119e0342e46c 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -1,5 +1,5 @@
<ui5-responsive-popover
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
class="{{classes.popover}}"
hide-arrow
@@ -106,7 +106,7 @@
prevent-focus-restore
hide-arrow
class="ui5-valuestatemessage-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
>
<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
index 71f996ef8c57..5dc771342490 100644
--- a/packages/main/src/Popover.ts
+++ b/packages/main/src/Popover.ts
@@ -11,7 +11,7 @@ import isElementContainingBlock from "@ui5/webcomponents-base/dist/util/isElemen
import getParentElement from "@ui5/webcomponents-base/dist/util/getParentElement.js";
import Popup from "./Popup.js";
import type { PopupBeforeCloseEventDetail as PopoverBeforeCloseEventDetail } from "./Popup.js";
-import PopoverPlacementType from "./types/PopoverPlacementType.js";
+import PopoverPlacement from "./types/PopoverPlacement.js";
import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
import { addOpenedPopover, removeOpenedPopover } from "./popup-utils/PopoverRegistry.js";
@@ -39,7 +39,7 @@ type CalculatedPlacement = {
arrow: ArrowPosition,
top: number,
left: number,
- placementType: `${PopoverPlacementType}`,
+ placement: `${PopoverPlacement}`,
}
/**
@@ -108,8 +108,8 @@ class Popover extends Popup {
* @default "End"
* @public
*/
- @property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.End })
- placementType!: `${PopoverPlacementType}`;
+ @property({ type: PopoverPlacement, defaultValue: PopoverPlacement.End })
+ placement!: `${PopoverPlacement}`;
/**
* Determines the horizontal alignment of the component.
@@ -199,8 +199,8 @@ class Popover extends Popup {
* Returns the calculated placement depending on the free space
* @private
*/
- @property({ type: PopoverPlacementType, defaultValue: PopoverPlacementType.End })
- actualPlacementType!: `${PopoverPlacementType}`;
+ @property({ type: PopoverPlacement, defaultValue: PopoverPlacement.End })
+ actualPlacement!: `${PopoverPlacement}`;
@property({ validator: Integer, noAttribute: true })
_maxHeight?: number;
@@ -310,7 +310,7 @@ class Popover extends Popup {
removeOpenedPopover(this);
}
- shouldCloseDueToOverflow(placement: `${PopoverPlacementType}`, openerRect: DOMRect): boolean {
+ shouldCloseDueToOverflow(placement: `${PopoverPlacement}`, openerRect: DOMRect): boolean {
const threshold = 32;
const limits = {
"Start": openerRect.right,
@@ -392,7 +392,7 @@ class Popover extends Popup {
}
this._oldPlacement = placement;
- this.actualPlacementType = placement.placementType;
+ this.actualPlacement = placement.placement;
let left = clamp(
this._left!,
@@ -400,7 +400,7 @@ class Popover extends Popup {
document.documentElement.clientWidth - popoverSize.width - Popover.VIEWPORT_MARGIN,
);
- if (this.actualPlacementType === PopoverPlacementType.End) {
+ if (this.actualPlacement === PopoverPlacement.End) {
left = Math.max(left, this._left!);
}
@@ -410,7 +410,7 @@ class Popover extends Popup {
document.documentElement.clientHeight - popoverSize.height - Popover.VIEWPORT_MARGIN,
);
- if (this.actualPlacementType === PopoverPlacementType.Bottom) {
+ if (this.actualPlacement === PopoverPlacement.Bottom) {
top = Math.max(top, this._top!);
}
@@ -497,12 +497,12 @@ class Popover extends Popup {
let maxHeight = clientHeight;
let maxWidth = clientWidth;
- const placementType = this.getActualPlacementType(targetRect, popoverSize);
+ const placement = this.getActualPlacement(targetRect, popoverSize);
- this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placementType, targetRect);
+ this._preventRepositionAndClose = this.shouldCloseDueToNoOpener(targetRect) || this.shouldCloseDueToOverflow(placement, targetRect);
- const isVertical = placementType === PopoverPlacementType.Top
- || placementType === PopoverPlacementType.Bottom;
+ const isVertical = placement === PopoverPlacement.Top
+ || placement === PopoverPlacement.Bottom;
if (this.horizontalAlign === PopoverHorizontalAlign.Stretch && isVertical) {
popoverSize.width = targetRect.width;
@@ -514,8 +514,8 @@ class Popover extends Popup {
const arrowOffset = this.hideArrow ? 0 : ARROW_SIZE;
// calc popover positions
- switch (placementType) {
- case PopoverPlacementType.Top:
+ switch (placement) {
+ case PopoverPlacement.Top:
left = this.getVerticalLeft(targetRect, popoverSize);
top = Math.max(targetRect.top - popoverSize.height - arrowOffset, 0);
@@ -523,7 +523,7 @@ class Popover extends Popup {
maxHeight = targetRect.top - arrowOffset;
}
break;
- case PopoverPlacementType.Bottom:
+ case PopoverPlacement.Bottom:
left = this.getVerticalLeft(targetRect, popoverSize);
top = targetRect.bottom + arrowOffset;
@@ -533,7 +533,7 @@ class Popover extends Popup {
maxHeight = clientHeight - targetRect.bottom - arrowOffset;
}
break;
- case PopoverPlacementType.Start:
+ case PopoverPlacement.Start:
left = Math.max(targetRect.left - popoverSize.width - arrowOffset, 0);
top = this.getHorizontalTop(targetRect, popoverSize);
@@ -541,7 +541,7 @@ class Popover extends Popup {
maxWidth = targetRect.left - arrowOffset;
}
break;
- case PopoverPlacementType.End:
+ case PopoverPlacement.End:
left = targetRect.left + targetRect.width + arrowOffset;
top = this.getHorizontalTop(targetRect, popoverSize);
@@ -586,7 +586,7 @@ class Popover extends Popup {
arrow: arrowPos,
top: this._top,
left: this._left,
- placementType,
+ placement,
};
}
@@ -649,57 +649,57 @@ class Popover extends Popup {
* Fallbacks to new placement, prioritizing `Left` and `Right` placements.
* @private
*/
- fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacementType | undefined {
+ fallbackPlacement(clientWidth: number, clientHeight: number, targetRect: DOMRect, popoverSize: PopoverSize): PopoverPlacement | undefined {
if (targetRect.left > popoverSize.width) {
- return PopoverPlacementType.Start;
+ return PopoverPlacement.Start;
}
if (clientWidth - targetRect.right > targetRect.left) {
- return PopoverPlacementType.End;
+ return PopoverPlacement.End;
}
if (clientHeight - targetRect.bottom > popoverSize.height) {
- return PopoverPlacementType.Bottom;
+ return PopoverPlacement.Bottom;
}
if (clientHeight - targetRect.bottom < targetRect.top) {
- return PopoverPlacementType.Top;
+ return PopoverPlacement.Top;
}
}
- getActualPlacementType(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacementType}` {
- const placementType = this.placementType;
- let actualPlacementType = placementType;
+ getActualPlacement(targetRect: DOMRect, popoverSize: PopoverSize): `${PopoverPlacement}` {
+ const placement = this.placement;
+ let actualPlacement = placement;
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
- switch (placementType) {
- case PopoverPlacementType.Top:
+ switch (placement) {
+ case PopoverPlacement.Top:
if (targetRect.top < popoverSize.height
&& targetRect.top < clientHeight - targetRect.bottom) {
- actualPlacementType = PopoverPlacementType.Bottom;
+ actualPlacement = PopoverPlacement.Bottom;
}
break;
- case PopoverPlacementType.Bottom:
+ case PopoverPlacement.Bottom:
if (clientHeight - targetRect.bottom < popoverSize.height
&& clientHeight - targetRect.bottom < targetRect.top) {
- actualPlacementType = PopoverPlacementType.Top;
+ actualPlacement = PopoverPlacement.Top;
}
break;
- case PopoverPlacementType.Start:
+ case PopoverPlacement.Start:
if (targetRect.left < popoverSize.width) {
- actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
+ actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
}
break;
- case PopoverPlacementType.End:
+ case PopoverPlacement.End:
if (clientWidth - targetRect.right < popoverSize.width) {
- actualPlacementType = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placementType;
+ actualPlacement = this.fallbackPlacement(clientWidth, clientHeight, targetRect, popoverSize) || placement;
}
break;
}
- return actualPlacementType;
+ return actualPlacement;
}
getVerticalLeft(targetRect: DOMRect, popoverSize: PopoverSize): number {
diff --git a/packages/main/src/SelectMenu.hbs b/packages/main/src/SelectMenu.hbs
index dcd4318e4fd6..c2a58a5eecdd 100644
--- a/packages/main/src/SelectMenu.hbs
+++ b/packages/main/src/SelectMenu.hbs
@@ -1,6 +1,6 @@
<ui5-responsive-popover
class="ui5-select-menu"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
@ui5-after-open="{{_onAfterOpen}}"
@ui5-after-close="{{_onAfterClose}}"
diff --git a/packages/main/src/SelectPopover.hbs b/packages/main/src/SelectPopover.hbs
index 1bcde953570f..3e6b2d4382d3 100644
--- a/packages/main/src/SelectPopover.hbs
+++ b/packages/main/src/SelectPopover.hbs
@@ -2,7 +2,7 @@
<ui5-responsive-popover
hide-arrow
_disable-initial-focus
- placement-type="Bottom"
+ placement="Bottom"
class="ui5-select-popover {{classes.popover}}"
horizontal-align="Start"
@ui5-after-open="{{_afterOpen}}"
@@ -70,7 +70,7 @@
prevent-focus-restore
hide-arrow
class="ui5-valuestatemessage-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
>
<div class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs
index 0c87bb6c3822..20a891c7dbed 100644
--- a/packages/main/src/TabContainerPopover.hbs
+++ b/packages/main/src/TabContainerPopover.hbs
@@ -1,7 +1,7 @@
<ui5-responsive-popover
id="{{_id}}-overflowMenu"
horizontal-align="End"
- placement-type="Bottom"
+ placement="Bottom"
content-only-on-desktop
hide-arrow
_hide-header
diff --git a/packages/main/src/TextAreaPopover.hbs b/packages/main/src/TextAreaPopover.hbs
index 9d0198d80565..10763b37a906 100644
--- a/packages/main/src/TextAreaPopover.hbs
+++ b/packages/main/src/TextAreaPopover.hbs
@@ -6,7 +6,7 @@
_disable-initial-focus
class="ui5-valuestatemessage-popover"
style="{{styles.valueStateMsgPopover}}"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
>
<div slot="header" class="ui5-valuestatemessage-root {{classes.valueStateMsg}}">
diff --git a/packages/main/src/TimePickerPopover.hbs b/packages/main/src/TimePickerPopover.hbs
index 4d9a49787a09..68700ff07851 100644
--- a/packages/main/src/TimePickerPopover.hbs
+++ b/packages/main/src/TimePickerPopover.hbs
@@ -1,7 +1,7 @@
<ui5-responsive-popover
id="{{_id}}-responsive-popover"
class="ui5-time-picker-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
allow-target-overlap
_hide-header
@@ -30,7 +30,7 @@
<ui5-popover
id="{{_id}}-popover"
class="ui5-time-picker-inputs-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
allow-target-overlap
_hide-header
diff --git a/packages/main/src/TokenizerPopover.hbs b/packages/main/src/TokenizerPopover.hbs
index b0942b5b55d3..2f6008ca315e 100644
--- a/packages/main/src/TokenizerPopover.hbs
+++ b/packages/main/src/TokenizerPopover.hbs
@@ -4,7 +4,7 @@
class={{classes.popover}}
?content-only-on-desktop="{{noValueStatePopover}}"
hide-arrow
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="Start"
@before-close={{handleBeforeClose}}
@before-open="{{handleBeforeOpen}}"
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index 2f00012e9c10..f1c5ffb9268b 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -340,7 +340,7 @@ class Toolbar extends UI5Element {
async openOverflow(): Promise<void> {
const overflowPopover = await this.getOverflowPopover();
overflowPopover!.showAt(this.overflowButtonDOM!);
- this.reverseOverflow = overflowPopover!.actualPlacementType === "Top";
+ this.reverseOverflow = overflowPopover!.actualPlacement === "Top";
}
async closeOverflow() {
diff --git a/packages/main/src/ToolbarPopover.hbs b/packages/main/src/ToolbarPopover.hbs
index 653d56fcac11..3b0c3f33f69a 100644
--- a/packages/main/src/ToolbarPopover.hbs
+++ b/packages/main/src/ToolbarPopover.hbs
@@ -1,6 +1,6 @@
<ui5-popover
class="ui5-overflow-popover"
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="End"
@ui5-after-close="{{onOverflowPopoverClosed}}"
@ui5-after-open="{{onOverflowPopoverOpened}}"
diff --git a/packages/main/src/themes/Menu.css b/packages/main/src/themes/Menu.css
index ed6f1484b455..c25e87f8265d 100644
--- a/packages/main/src/themes/Menu.css
+++ b/packages/main/src/themes/Menu.css
@@ -50,7 +50,7 @@
margin-inline: var(--_ui5_menu_submenu_margin_offset);
}
-.ui5-menu-rp[sub-menu][actual-placement-type="Start"] {
+.ui5-menu-rp[sub-menu][actual-placement="Start"] {
margin-top: 0.25rem;
margin-inline: var(--_ui5_menu_submenu_placement_type_left_margin_offset);
}
\ No newline at end of file
diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css
index b879150817e5..76db72fc412a 100644
--- a/packages/main/src/themes/Popover.css
+++ b/packages/main/src/themes/Popover.css
@@ -8,58 +8,58 @@
box-shadow: var(--_ui5_popover_no_arrow_box_shadow);
}
-:host([opened][actual-placement-type="Top"]) {
+:host([opened][actual-placement="Top"]) {
margin-top: var(--_ui5-popover-margin-bottom);
}
-:host([opened][actual-placement-type="Bottom"]) {
+:host([opened][actual-placement="Bottom"]) {
margin-top: var(--_ui5-popover-margin-top);
}
/* pointing upward arrow */
-:host([actual-placement-type="Bottom"]) .ui5-popover-arrow {
+:host([actual-placement="Bottom"]) .ui5-popover-arrow {
left: calc(50% - 0.5625rem);
top: -0.5rem;
height: 0.5625rem;
}
-:host([actual-placement-type="Bottom"]) .ui5-popover-arrow:after {
+:host([actual-placement="Bottom"]) .ui5-popover-arrow:after {
margin: var(--_ui5_popover_upward_arrow_margin);
}
/* pointing right arrow */
-:host([actual-placement-type="Start"]) .ui5-popover-arrow {
+:host([actual-placement="Start"]) .ui5-popover-arrow {
top: calc(50% - 0.5625rem);
right: -0.5625rem;
width: 0.5625rem;
}
-:host([actual-placement-type="Start"]) .ui5-popover-arrow:after {
+:host([actual-placement="Start"]) .ui5-popover-arrow:after {
margin: var(--_ui5_popover_right_arrow_margin);
}
/* pointing downward arrow */
-:host([actual-placement-type="Top"]) .ui5-popover-arrow {
+:host([actual-placement="Top"]) .ui5-popover-arrow {
left: calc(50% - 0.5625rem);
height: 0.5625rem;
top: 100%;
}
-:host([actual-placement-type="Top"]) .ui5-popover-arrow:after {
+:host([actual-placement="Top"]) .ui5-popover-arrow:after {
margin: var(--_ui5_popover_downward_arrow_margin);
}
/* pointing left arrow */
-:host(:not([actual-placement-type])) .ui5-popover-arrow,
-:host([actual-placement-type="End"]) .ui5-popover-arrow {
+:host(:not([actual-placement])) .ui5-popover-arrow,
+:host([actual-placement="End"]) .ui5-popover-arrow {
left: -0.5625rem;
top: calc(50% - 0.5625rem);
width: 0.5625rem;
height: 1rem;
}
-:host(:not([actual-placement-type])) .ui5-popover-arrow:after,
-:host([actual-placement-type="End"]) .ui5-popover-arrow:after {
+:host(:not([actual-placement])) .ui5-popover-arrow:after,
+:host([actual-placement="End"]) .ui5-popover-arrow:after {
margin: var(--_ui5_popover_left_arrow_margin);
}
diff --git a/packages/main/src/types/PopoverPlacementType.ts b/packages/main/src/types/PopoverPlacement.ts
similarity index 82%
rename from packages/main/src/types/PopoverPlacementType.ts
rename to packages/main/src/types/PopoverPlacement.ts
index 1356b0007e69..7bf5280c5bce 100644
--- a/packages/main/src/types/PopoverPlacementType.ts
+++ b/packages/main/src/types/PopoverPlacement.ts
@@ -1,8 +1,8 @@
/**
- * Popover placement types.
+ * Popover placements.
* @public
*/
-enum PopoverPlacementType {
+enum PopoverPlacement {
/**
* Popover will be placed at the start of the reference element.
* @public
@@ -28,4 +28,4 @@ enum PopoverPlacementType {
Bottom = "Bottom",
}
-export default PopoverPlacementType;
+export default PopoverPlacement;
diff --git a/packages/main/test/pages/AvatarGroup.html b/packages/main/test/pages/AvatarGroup.html
index ad133d5eb624..774b5dada736 100644
--- a/packages/main/test/pages/AvatarGroup.html
+++ b/packages/main/test/pages/AvatarGroup.html
@@ -51,7 +51,7 @@ <h1>Test your web components here</h1>
<div id="avatar-group-wrapper">
- <ui5-popover header-text="My Heading" id="group-pop" class="avatargroup1auto" placement-type="Bottom" accessible-name="This popover is important">
+ <ui5-popover header-text="My Heading" id="group-pop" class="avatargroup1auto" placement="Bottom" accessible-name="This popover is important">
<div slot="header">
<h5>Business card</h5>
</div>
@@ -65,7 +65,7 @@ <h5>Business card</h5>
</div>
</ui5-popover>
- <ui5-popover header-text="My Heading" id="individual-pop" class="avatargroup3auto" placement-type="Bottom" accessible-name="This popover is important" prevent-focus-restore>
+ <ui5-popover header-text="My Heading" id="individual-pop" class="avatargroup3auto" placement="Bottom" accessible-name="This popover is important" prevent-focus-restore>
<div slot="header">
<h5>Business card</h5>
</div>
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
index 5fcfced3f48a..cc1195d858bb 100644
--- a/packages/main/test/pages/Dialog.html
+++ b/packages/main/test/pages/Dialog.html
@@ -388,7 +388,7 @@
</div>
</ui5-dialog>
- <ui5-popover header-text="My Heading" id="pop" class="dialog8auto" placement-type="Top">
+ <ui5-popover header-text="My Heading" id="pop" class="dialog8auto" placement="Top">
<!-- <div slot="header">
Hello World
</div> -->
@@ -424,7 +424,7 @@
</div>
</ui5-popover>
- <ui5-dialog placement-type="Bottom" id='danger'>
+ <ui5-dialog placement="Bottom" id='danger'>
<ui5-list>
<ui5-li>Hello</ui5-li>
<ui5-li>World</ui5-li>
diff --git a/packages/main/test/pages/Input_quickview.html b/packages/main/test/pages/Input_quickview.html
index 0a6c6c8cfe1e..e3572c359ebe 100644
--- a/packages/main/test/pages/Input_quickview.html
+++ b/packages/main/test/pages/Input_quickview.html
@@ -33,7 +33,7 @@ <h1> Quick View sample</h1>
<ui5-suggestion-item class="suggestionItem" text="IPad Air"></ui5-suggestion-item>
</ui5-input>
- <ui5-popover id="quickViewCard" hide-arrow placement-type="Right" height="500px" prevent-focus-restore>
+ <ui5-popover id="quickViewCard" hide-arrow placement="Right" height="500px" prevent-focus-restore>
<button>hello</button>
<ui5-input id="searchInput" class="input_quickview4auto">
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
@@ -78,7 +78,7 @@ <h1> Test Quick View sample</h1>
<div class="input_quickview6auto">Test mouseover on item</div>
<ui5-input id="mouseoverResult" class="input_quickview7auto"></ui5-input>
- <ui5-popover id="quickViewCard2" hide-arrow placement-type="End" height="500px">
+ <ui5-popover id="quickViewCard2" hide-arrow placement="End" height="500px">
<ui5-input id="searchInput2" class="input_quickview4auto">
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>
diff --git a/packages/main/test/pages/List_test_page.html b/packages/main/test/pages/List_test_page.html
index 1688423c3359..c928269a14fb 100644
--- a/packages/main/test/pages/List_test_page.html
+++ b/packages/main/test/pages/List_test_page.html
@@ -287,7 +287,7 @@ <h2 id="testHeader">Test aria</h2>
<br />
<br />
<ui5-button id="btnOpenPopup">Open popup with List</ui5-button>
- <ui5-responsive-popover id="popup" placement-type="Bottom" class="list_test_page5auto">
+ <ui5-responsive-popover id="popup" placement="Bottom" class="list_test_page5auto">
<ui5-list>
<div slot="header">
<ui5-button id="btnInHeader" icon="refresh"></ui5-button>
diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
index 27dfb027a1bf..8ac5d9736794 100644
--- a/packages/main/test/pages/Popover.html
+++ b/packages/main/test/pages/Popover.html
@@ -28,7 +28,7 @@
<iframe id="clickThisIframe" src="//localhost:8080"></iframe>
<ui5-button id="btn">Click me !</ui5-button>
- <ui5-popover id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
+ <ui5-popover id="pop" class="popover6auto" placement="Top" accessible-name="This popover is important">
<div slot="header">
<ui5-button id="first-focusable">I am in the header</ui5-button>
</div>
@@ -44,7 +44,7 @@
<ui5-button id="popbtn">Open Popover</ui5-button>
- <ui5-popover placement-type="Bottom" hide-arrow id="danger">
+ <ui5-popover placement="Bottom" hide-arrow id="danger">
<ui5-list>
<ui5-li>Hello</ui5-li>
@@ -129,7 +129,7 @@
</pre>
</div>
<ui5-button id="openPopoverInsideContainingBlockButton">Open Popover Inside a Containing Block</ui5-button>
- <ui5-popover id="popoverInsideContainingBlock" placement-type="Bottom">
+ <ui5-popover id="popoverInsideContainingBlock" placement="Bottom">
Popover<br>Inside<br>Containing<br>Block
</ui5-popover>
</div>
@@ -141,7 +141,7 @@
Open Big Popover
</ui5-button>
- <ui5-popover placement-type="Bottom" id="big-popover" header-text="hello world">
+ <ui5-popover placement="Bottom" id="big-popover" header-text="hello world">
<ui5-list id="bigList"></ui5-list>
</ui5-popover>
@@ -153,11 +153,11 @@
Open Popover ACC role - None
</ui5-button>
- <ui5-popover placement-type="Bottom" id="acc-role-popover" header-text="Test ACC world" accessible-role="AlertDialog">
+ <ui5-popover placement="Bottom" id="acc-role-popover" header-text="Test ACC world" accessible-role="AlertDialog">
<ui5-list id="bigList2"></ui5-list>
</ui5-popover>
- <ui5-popover placement-type="Bottom" id="acc-role-popover2" header-text="Test ACC world" accessible-role="None">
+ <ui5-popover placement="Bottom" id="acc-role-popover2" header-text="Test ACC world" accessible-role="None">
<ui5-list id="bigList3"></ui5-list>
</ui5-popover>
@@ -210,20 +210,20 @@
<ui5-button id="btnMoveFocus">focusable element</ui5-button>
<br>
<br>
- <ui5-title>placement-type="End" (default)</ui5-title>
+ <ui5-title>placement="End" (default)</ui5-title>
<p>No space on the End, try Start, Bottom, Top</p>
<ui5-button id="btnFullWidth" class="fullWidth">Click me !</ui5-button>
<ui5-button id="btnNormalWidth">Click me !</ui5-button>
<br>
<br>
- <ui5-title>placement-type="End" (default) and allow-target-overlap=true </ui5-title>
+ <ui5-title>placement="End" (default) and allow-target-overlap=true </ui5-title>
<p>No space on the End, try Start, Bottom, Top and if nothing works, the target will be overlapped</p>
<ui5-button id="btnFullWidthTargetOverlap" class="fullWidth">Click me !</ui5-button>
<ui5-button id="btnNormalWidthTargetOverlap">Click me !</ui5-button>
<br>
<br>
- <ui5-title>placement-type="Start"</ui5-title>
+ <ui5-title>placement="Start"</ui5-title>
<p>No space on the Start, try End, Bottom, Top</p>
<ui5-button id="btnFullWidthLeft" class="fullWidth">Click me !</ui5-button>
<div class="popover13auto">
@@ -232,7 +232,7 @@
<br>
<br>
- <ui5-title>placement-type="Start" and allow-target-overlap=true</ui5-title>
+ <ui5-title>placement="Start" and allow-target-overlap=true</ui5-title>
<p>No space on the Start, try End, Bottom, Top and if nothing works, the target will be overlapped</p>
<ui5-button id="btnFullWidthLeftTargetOverlap" class="fullWidth">Click me !</ui5-button>
<div class="popover13auto">
@@ -241,7 +241,7 @@
<br>
<br>
- <ui5-title>placement-type="Top"</ui5-title>
+ <ui5-title>placement="Top"</ui5-title>
<ui5-button id="btnFullWidthTop" class="fullWidth">Click me !</ui5-button>
<div class="flexContainerSpaceBetween">
<ui5-button id="btnLeftEdgeTop">...</ui5-button>
@@ -250,7 +250,7 @@
<br>
<br>
- <ui5-title>placement-type="Bottom"</ui5-title>
+ <ui5-title>placement="Bottom"</ui5-title>
<ui5-button id="btnFullWidthBottom" class="fullWidth">Click me !</ui5-button>
<div class="flexContainerSpaceBetween">
<ui5-button id="btnLeftEdgeBottom">...</ui5-button>
@@ -282,7 +282,7 @@
</ui5-popover>
- <ui5-popover header-text="My Heading" id="popFullWidthLeft" class="popover6auto" placement-type="Start">
+ <ui5-popover header-text="My Heading" id="popFullWidthLeft" class="popover6auto" placement="Start">
<div slot="header">
<ui5-button id="first-focusable">I am in the header</ui5-button>
</div>
@@ -294,7 +294,7 @@
</ui5-list>
</ui5-popover>
- <ui5-popover header-text="My Heading" id="popFullWidthLeftTargetOverlap" class="popover6auto" placement-type="Start" allow-target-overlap>
+ <ui5-popover header-text="My Heading" id="popFullWidthLeftTargetOverlap" class="popover6auto" placement="Start" allow-target-overlap>
<div slot="header">
<ui5-button id="first-focusable">I am in the header</ui5-button>
</div>
@@ -307,7 +307,7 @@
</ui5-popover>
- <ui5-popover header-text="My Heading" id="popFullWidthTop" class="popover6auto" placement-type="Top">
+ <ui5-popover header-text="My Heading" id="popFullWidthTop" class="popover6auto" placement="Top">
<div slot="header">
<ui5-button id="first-focusable">I am in the header</ui5-button>
</div>
@@ -319,7 +319,7 @@
</ui5-list>
</ui5-popover>
- <ui5-popover header-text="My Heading" id="popFullWidthBottom" class="popover6auto" placement-type="Bottom">
+ <ui5-popover header-text="My Heading" id="popFullWidthBottom" class="popover6auto" placement="Bottom">
<div slot="header">
<ui5-button id="first-focusable">I am in the header</ui5-button>
</div>
@@ -332,7 +332,7 @@
</ui5-popover>
- <ui5-popover id="quickViewCard" placement-type="End" height="500px">
+ <ui5-popover id="quickViewCard" placement="End" height="500px">
<ui5-input id="searchInput" class="popover6auto">
<ui5-icon id="searchIcon" slot="icon" name="search"></ui5-icon>
</ui5-input>
@@ -354,7 +354,7 @@
<ui5-button id="btnOpenXRightWide">Open</ui5-button>
</div>
- <ui5-popover id="popXRightWide" placement-type="Bottom" horizontal-align="End">
+ <ui5-popover id="popXRightWide" placement="Bottom" horizontal-align="End">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni architecto tenetur quia nam reprehenderit quas eveniet possimus similique quisquam culpa distinctio ex doloremque molestiae maxime sed harum, in exercitationem! Incidunt?
</ui5-popover>
@@ -363,7 +363,7 @@
<ui5-button id="firstBtn">First button</ui5-button>
<ui5-button id="secondBtn">Second button</ui5-button>
- <ui5-popover id="popNoFocusableContent" placement-type="Bottom">Sample text for the ui5-popover</ui5-popover>
+ <ui5-popover id="popNoFocusableContent" placement="Bottom">Sample text for the ui5-popover</ui5-popover>
<br>
<br>
@@ -387,7 +387,7 @@
<ui5-button id="btnRightEdge">Popover on right edge of screen</ui5-button>
</div>
- <ui5-popover header-text="Header" id="popoverRightEdge" placement-type="Top">
+ <ui5-popover header-text="Header" id="popoverRightEdge" placement="Top">
<ui5-label>Input field: </ui5-label>
<ui5-input></ui5-input>
</ui5-popover>
@@ -411,7 +411,7 @@
<ui5-li>Open chained popover 2</ui5-li>
</ui5-list>
</ui5-popover>
- <ui5-popover id="chainedPopover2" placement-type="Bottom">
+ <ui5-popover id="chainedPopover2" placement="Bottom">
Chained Popover 2
<ui5-button id="closeChainedPopover2">Close chained popover 2</ui5-button>
</ui5-popover>
@@ -445,7 +445,7 @@ <h2>Horizontal Align</h2>
<div id="targetOpener" class="popover10auto">
<span>Target opener</span>
</div>
- <ui5-popover id="popoverHorizontalAlign" placement-type="Top">
+ <ui5-popover id="popoverHorizontalAlign" placement="Top">
<span></span>
</ui5-popover>
</div>
@@ -618,7 +618,7 @@ <h2>Horizontal Align</h2>
button.textContent = "Focusable element";
popover.appendChild(button);
popover.setAttribute("id", "dynamic-popover");
- popover.setAttribute("placement-type", "Bottom");
+ popover.setAttribute("placement", "Bottom");
document.body.appendChild(popover);
diff --git a/packages/main/test/pages/PopoverArrowBounds.html b/packages/main/test/pages/PopoverArrowBounds.html
index 3e9a26599632..5d778e53550d 100644
--- a/packages/main/test/pages/PopoverArrowBounds.html
+++ b/packages/main/test/pages/PopoverArrowBounds.html
@@ -18,12 +18,12 @@
</head>
<body class="sapUiSizeCompact">
- <ui5-button id="myBtn1" data-placement-type="Start" class="myBtn">1</ui5-button>
- <ui5-button id="myBtn2" data-placement-type="Start" data-vertical-align="Top" class="myBtn">2</ui5-button>
- <ui5-button id="myBtn3" data-placement-type="Bottom" class="myBtn">3</ui5-button>
- <ui5-button id="myBtn4" data-placement-type="Top" class="myBtn">4</ui5-button>
- <ui5-button id="myBtn5" data-placement-type="Start" class="myBtn">5</ui5-button>
- <ui5-button id="myBtn6" data-placement-type="Start" class="myBtn">6</ui5-button>
+ <ui5-button id="myBtn1" data-placement="Start" class="myBtn">1</ui5-button>
+ <ui5-button id="myBtn2" data-placement="Start" data-vertical-align="Top" class="myBtn">2</ui5-button>
+ <ui5-button id="myBtn3" data-placement="Bottom" class="myBtn">3</ui5-button>
+ <ui5-button id="myBtn4" data-placement="Top" class="myBtn">4</ui5-button>
+ <ui5-button id="myBtn5" data-placement="Start" class="myBtn">5</ui5-button>
+ <ui5-button id="myBtn6" data-placement="Start" class="myBtn">6</ui5-button>
<ui5-toggle-button id="customSizeBtn">Bigger Popover</ui5-toggle-button>
@@ -34,7 +34,7 @@
Array.from(document.querySelectorAll(".myBtn")).forEach(function (btn) {
btn.addEventListener("click", function() {
- myPopover.placementType = btn.dataset.placementType;
+ myPopover.placement = btn.dataset.placement;
myPopover.verticalAlign = btn.dataset.verticalAlign;
myPopover.showAt(btn);
});
diff --git a/packages/main/test/pages/Popups.html b/packages/main/test/pages/Popups.html
index 953230bf2ed6..d072aee66cd0 100644
--- a/packages/main/test/pages/Popups.html
+++ b/packages/main/test/pages/Popups.html
@@ -28,7 +28,7 @@
<content id="popover"></content>
</div>
- <ui5-popover placement-type="Bottom" horizontal-align="Stretch" hide-arrow initial-focus="input1" class="wcPopoverWithList">
+ <ui5-popover placement="Bottom" horizontal-align="Stretch" hide-arrow initial-focus="input1" class="wcPopoverWithList">
<ui5-list id="myList" indent separators="Inner" mode="MultiSelect" footer-text="Copyright" no-data-text="No data">
<!-- Header -->
<div class="popups3auto" slot="header">
@@ -81,7 +81,7 @@ <h5>Web Component</h5>
<ui5-button class="wcBtnOpenNewDialog">Open New Dialog</ui5-button>
<ui5-button class="wcBtnCloseDialog">Close Dialog</ui5-button>
- <ui5-popover placement-type="End" class="wcNewDialogPopover" header-text="Second Popover">
+ <ui5-popover placement="End" class="wcNewDialogPopover" header-text="Second Popover">
<ui5-button class="wcBtnOpenNewPopoverDialog1">Open New Popover </ui5-button>
<ui5-button class="wcBtnClosePopoverDialog1">Popover Button</ui5-button>
</ui5-popover>
@@ -101,7 +101,7 @@ <h5>JS Components</h5>
<!--</div>-->
<h5>Web Component</h5>
<ui5-button class="wcBtnOpenPopover">Open Popover</ui5-button>
- <ui5-popover placement-type="Top" class="wcPopover" header-text="Web Component Popover">
+ <ui5-popover placement="Top" class="wcPopover" header-text="Web Component Popover">
<div slot="header" class="popups4auto">
<div class="popups5auto">Custom Header</div>
<ui5-button icon="decline"></ui5-button>
@@ -111,7 +111,7 @@ <h5>Web Component</h5>
<ui5-button>Accept</ui5-button>
</div>
<ui5-date-picker></ui5-date-picker>
- <ui5-popover placement-type="End" class="wcNewPopover" header-text="Second Popover">
+ <ui5-popover placement="End" class="wcNewPopover" header-text="Second Popover">
<ui5-button class="wcBtnOpenNewPopover1">Open New Popover </ui5-button>
<ui5-button class="wcBtnClosePopover1">Popover Button</ui5-button>
</ui5-popover>
diff --git a/packages/main/test/pages/ResponsivePopover.html b/packages/main/test/pages/ResponsivePopover.html
index b60daedb0ef9..fc68b5d95dad 100644
--- a/packages/main/test/pages/ResponsivePopover.html
+++ b/packages/main/test/pages/ResponsivePopover.html
@@ -109,7 +109,7 @@ <h2> Inputs based component that opens popover/dialog within dialog</h2>
</ui5-responsive-popover>
<ui5-button id="btnRpTopWithArrow">RP on Top with downward pointing arrow</ui5-button>
- <ui5-responsive-popover placement-type="Top" id="rpTopWithArrow">
+ <ui5-responsive-popover placement="Top" id="rpTopWithArrow">
<div>text</div>
</ui5-responsive-popover>
diff --git a/packages/main/test/samples/AvatarGroup.sample.html b/packages/main/test/samples/AvatarGroup.sample.html
index 0205afb4553e..4ff1ef86570d 100644
--- a/packages/main/test/samples/AvatarGroup.sample.html
+++ b/packages/main/test/samples/AvatarGroup.sample.html
@@ -18,7 +18,7 @@ <h2 class="control-header">Avatar Group</h2>
<section>
<h4>Avatar Group - type "Individual"</h4>
<div class="snippet individual">
- <ui5-popover header-text="Person Card" class="personPopover" style="width: 300px" placement-type="Bottom" prevent-focus-restore>
+ <ui5-popover header-text="Person Card" class="personPopover" style="width: 300px" placement="Bottom" prevent-focus-restore>
<div class="avatar-slot" style="display: inline-block;">
<ui5-avatar id="popAvatar"></ui5-avatar>
</div>
@@ -29,7 +29,7 @@ <h4>Avatar Group - type "Individual"</h4>
</div>
</ui5-popover>
- <ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement-type="Bottom">
+ <ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement="Bottom">
<div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
</ui5-popover>
@@ -135,13 +135,13 @@ <h4>Avatar Group - type "Individual"</h4>
</script>
</div>
<pre class="prettyprint lang-html"><xmp>
-<ui5-popover header-text="Person Card" class="personPopover" style="width: 300px" placement-type="Bottom" prevent-focus-restore>
+<ui5-popover header-text="Person Card" class="personPopover" style="width: 300px" placement="Bottom" prevent-focus-restore>
...
<ui5-avatar id="popAvatar"></ui5-avatar>
...
</ui5-popover>
-<ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement-type="Bottom">
+<ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement="Bottom">
...
<div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
...
@@ -194,7 +194,7 @@ <h4>Avatar Group - type "Individual"</h4>
<section>
<h4>Avatar Group - type "Group"</h4>
<div class="snippet group">
- <ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement-type="Bottom">
+ <ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement="Bottom">
<div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
</ui5-popover>
@@ -272,7 +272,7 @@ <h4>Avatar Group - type "Group"</h4>
</script>
</div>
<pre class="prettyprint lang-html"><xmp>
-<ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement-type="Bottom">
+<ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement="Bottom">
...
<div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
...
diff --git a/packages/playground/_stories/fiori/NotificationListGroupItem/NotificationListGroupItem.stories.ts b/packages/playground/_stories/fiori/NotificationListGroupItem/NotificationListGroupItem.stories.ts
index 3b70215b2ad4..adcc84842d3d 100644
--- a/packages/playground/_stories/fiori/NotificationListGroupItem/NotificationListGroupItem.stories.ts
+++ b/packages/playground/_stories/fiori/NotificationListGroupItem/NotificationListGroupItem.stories.ts
@@ -214,7 +214,7 @@ InShellBar.decorators = [
notifications-count="6"
></ui5-shellbar>
<ui5-popover
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="End"
id="popover-with-notifications"
>
diff --git a/packages/playground/_stories/fiori/NotificationListItem/NotificationListItem.stories.ts b/packages/playground/_stories/fiori/NotificationListItem/NotificationListItem.stories.ts
index dcf9a91dcdf8..0c1c3254c801 100644
--- a/packages/playground/_stories/fiori/NotificationListItem/NotificationListItem.stories.ts
+++ b/packages/playground/_stories/fiori/NotificationListItem/NotificationListItem.stories.ts
@@ -194,7 +194,7 @@ InShellBar.decorators = [
notifications-count="4"
></ui5-shellbar>
<ui5-popover
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="End"
id="popover-with-notifications"
>
diff --git a/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts b/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts
index a4b4d5f8b130..e87f3bf759a8 100644
--- a/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts
+++ b/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts
@@ -40,7 +40,7 @@ WithShellBar.decorators = [
show-co-pilot=""
>
</ui5-shellbar>
- <ui5-popover id="productswitch-popover" placement-type="Bottom">
+ <ui5-popover id="productswitch-popover" placement="Bottom">
${story()}
</ui5-popover>
<script>
diff --git a/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts b/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts
index 90e1f452d985..f7d50bca3b47 100644
--- a/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts
+++ b/packages/playground/_stories/fiori/ShellBar/ShellBar.stories.ts
@@ -95,7 +95,7 @@ export const Advanced: StoryFn = () => {
<ui5-li slot="menuItems">Application 4</ui5-li>
<ui5-li slot="menuItems">Application 5</ui5-li>
</ui5-shellbar>
- <ui5-popover id="action-popover-${index}" placement-type="Bottom">
+ <ui5-popover id="action-popover-${index}" placement="Bottom">
<div class="action-popover-header">
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem"
>An Kimura</ui5-title
diff --git a/packages/playground/_stories/main/AvatarGroup/TemplateGroupWithPopover.ts b/packages/playground/_stories/main/AvatarGroup/TemplateGroupWithPopover.ts
index 7195c3f5b576..5dad498eb8c4 100644
--- a/packages/playground/_stories/main/AvatarGroup/TemplateGroupWithPopover.ts
+++ b/packages/playground/_stories/main/AvatarGroup/TemplateGroupWithPopover.ts
@@ -8,7 +8,7 @@ export default () => {
header-text="My people"
class="peoplePopover"
style="width: 400px"
- placement-type="Bottom"
+ placement="Bottom"
>
<div
class="placeholder"
diff --git a/packages/playground/_stories/main/AvatarGroup/TemplateIndividualWithPopover.ts b/packages/playground/_stories/main/AvatarGroup/TemplateIndividualWithPopover.ts
index de2c48889688..322aac915b6e 100644
--- a/packages/playground/_stories/main/AvatarGroup/TemplateIndividualWithPopover.ts
+++ b/packages/playground/_stories/main/AvatarGroup/TemplateIndividualWithPopover.ts
@@ -8,7 +8,7 @@ export default () => {
header-text="Person Card"
class="personPopover"
style="width: 300px"
- placement-type="Bottom"
+ placement="Bottom"
prevent-focus-restore=""
>
<div class="avatar-slot" style="display: inline-block;">
@@ -23,7 +23,7 @@ export default () => {
header-text="My people"
class="peoplePopover"
style="width: 400px"
- placement-type="Bottom"
+ placement="Bottom"
>
<div
class="placeholder"
diff --git a/packages/playground/_stories/main/Popover/Popover.stories.ts b/packages/playground/_stories/main/Popover/Popover.stories.ts
index 53b790e467e7..f889603cc63c 100644
--- a/packages/playground/_stories/main/Popover/Popover.stories.ts
+++ b/packages/playground/_stories/main/Popover/Popover.stories.ts
@@ -30,7 +30,7 @@ const Template: UI5StoryArgs<Popover, StoryArgsSlots> = (args) => {
accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
accessible-role="${ifDefined(args.accessibleRole)}"
header-text="${ifDefined(args.headerText)}"
- placement-type="${ifDefined(args.placementType)}"
+ placement="${ifDefined(args.placement)}"
horizontal-align="${ifDefined(args.horizontalAlign)}"
vertical-align="${ifDefined(args.verticalAlign)}"
?modal="${ifDefined(args.modal)}"
diff --git a/packages/playground/_stories/main/ResponsivePopover/ResponsivePopover.stories.ts b/packages/playground/_stories/main/ResponsivePopover/ResponsivePopover.stories.ts
index 25f290ab6b0b..ae69f87d6c25 100644
--- a/packages/playground/_stories/main/ResponsivePopover/ResponsivePopover.stories.ts
+++ b/packages/playground/_stories/main/ResponsivePopover/ResponsivePopover.stories.ts
@@ -30,7 +30,7 @@ const Template: UI5StoryArgs<ResponsivePopover, StoryArgsSlots> = (args) => {
accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
accessible-role="${ifDefined(args.accessibleRole)}"
header-text="${ifDefined(args.headerText)}"
- placement-type="${ifDefined(args.placementType)}"
+ placement="${ifDefined(args.placement)}"
horizontal-align="${ifDefined(args.horizontalAlign)}"
vertical-align="${ifDefined(args.verticalAlign)}"
?modal="${ifDefined(args.modal)}"
diff --git a/packages/website/docs/_samples/fiori/NotificationListGroupItem/InShellBar/sample.html b/packages/website/docs/_samples/fiori/NotificationListGroupItem/InShellBar/sample.html
index f5a9c12701e5..1b42a1143504 100644
--- a/packages/website/docs/_samples/fiori/NotificationListGroupItem/InShellBar/sample.html
+++ b/packages/website/docs/_samples/fiori/NotificationListGroupItem/InShellBar/sample.html
@@ -19,7 +19,7 @@
notifications-count="6"
></ui5-shellbar>
<ui5-popover
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="End"
id="popover-with-notifications"
>
diff --git a/packages/website/docs/_samples/fiori/NotificationListItem/InShellBar/sample.html b/packages/website/docs/_samples/fiori/NotificationListItem/InShellBar/sample.html
index 678ad30e928c..90c59d5e8bb5 100644
--- a/packages/website/docs/_samples/fiori/NotificationListItem/InShellBar/sample.html
+++ b/packages/website/docs/_samples/fiori/NotificationListItem/InShellBar/sample.html
@@ -20,7 +20,7 @@
<img slot="logo" src="../assets/images/sap-logo-svg.svg" />
</ui5-shellbar>
<ui5-popover
- placement-type="Bottom"
+ placement="Bottom"
horizontal-align="End"
id="popover-with-notifications"
>
diff --git a/packages/website/docs/_samples/fiori/ProductSwitch/WithShellBar/sample.html b/packages/website/docs/_samples/fiori/ProductSwitch/WithShellBar/sample.html
index 210199115b3d..3064f1388041 100644
--- a/packages/website/docs/_samples/fiori/ProductSwitch/WithShellBar/sample.html
+++ b/packages/website/docs/_samples/fiori/ProductSwitch/WithShellBar/sample.html
@@ -15,7 +15,7 @@
show-co-pilot>
<img src="../assets/images/sap-logo-svg.svg" alt="SAP Logo" slot="logo" />
</ui5-shellbar>
- <ui5-popover id="productswitch-popover" placement-type="Bottom">
+ <ui5-popover id="productswitch-popover" placement="Bottom">
<ui5-product-switch>
<ui5-product-switch-item title-text="Home" subtitle-text="Central Home"
icon="home"></ui5-product-switch-item>
diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html
index 859360a58760..29e2581de04a 100644
--- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html
+++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html
@@ -27,7 +27,7 @@
<ui5-li slot="menuItems">Application 4</ui5-li>
<ui5-li slot="menuItems">Application 5</ui5-li>
</ui5-shellbar>
- <ui5-popover id="action-popover" placement-type="Bottom">
+ <ui5-popover id="action-popover" placement="Bottom">
<div class="action-popover-header">
<ui5-title style="padding: 0.25rem 1rem 0rem 1rem">An Kimura</ui5-title>
</div>
diff --git a/packages/website/docs/_samples/main/AvatarGroup/GroupWithPopover/sample.html b/packages/website/docs/_samples/main/AvatarGroup/GroupWithPopover/sample.html
index 76f5ecb3380c..221b54d9e936 100644
--- a/packages/website/docs/_samples/main/AvatarGroup/GroupWithPopover/sample.html
+++ b/packages/website/docs/_samples/main/AvatarGroup/GroupWithPopover/sample.html
@@ -12,7 +12,7 @@
<!-- playground-fold-end -->
<div class="group">
- <ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement-type="Bottom">
+ <ui5-popover header-text="My people" class="peoplePopover" style="width: 400px" placement="Bottom">
<div class="placeholder" style="display: flex; flex-wrap: wrap;"></div>
</ui5-popover>
diff --git a/packages/website/docs/_samples/main/AvatarGroup/IndividualWithPopover/sample.html b/packages/website/docs/_samples/main/AvatarGroup/IndividualWithPopover/sample.html
index e3aa6b7a3da2..32627320cbeb 100644
--- a/packages/website/docs/_samples/main/AvatarGroup/IndividualWithPopover/sample.html
+++ b/packages/website/docs/_samples/main/AvatarGroup/IndividualWithPopover/sample.html
@@ -16,7 +16,7 @@
header-text="Person Card"
class="personPopover"
style="width: 300px"
- placement-type="Bottom"
+ placement="Bottom"
prevent-focus-restore=""
>
<div class="avatar-slot" style="display: inline-block;">
@@ -31,7 +31,7 @@
header-text="My people"
class="peoplePopover"
style="width: 400px"
- placement-type="Bottom"
+ placement="Bottom"
>
<div
class="placeholder"
diff --git a/packages/website/docs/_samples/main/Popover/Placement/sample.html b/packages/website/docs/_samples/main/Popover/Placement/sample.html
index 7ab3be268b22..fcccf6afe362 100644
--- a/packages/website/docs/_samples/main/Popover/Placement/sample.html
+++ b/packages/website/docs/_samples/main/Popover/Placement/sample.html
@@ -45,7 +45,7 @@
<ui5-button id="btn2">Open Popover to Left</ui5-button>
</div>
- <ui5-popover id="popover1" opener="btn1" header-text="Newsletter subscription" placement-type="Bottom">
+ <ui5-popover id="popover1" opener="btn1" header-text="Newsletter subscription" placement="Bottom">
<div class="popover-content">
<ui5-label for="emailInput" required show-colon>Email</ui5-label>
<ui5-input id="emailInput" style="min-width: 150px;" placeholder="Enter Email"></ui5-input>
@@ -57,7 +57,7 @@
</div>
</ui5-popover>
- <ui5-popover id="popover2" opener="btn2" header-text="Newsletter subscription" placement-type="Start">
+ <ui5-popover id="popover2" opener="btn2" header-text="Newsletter subscription" placement="Start">
<div class="popover-content">
<ui5-label for="emailInput" required show-colon>Email</ui5-label>
<ui5-input id="emailInput" style="min-width: 150px;" placeholder="Enter Email"></ui5-input>
diff --git a/packages/website/docs/_samples/main/ResponsivePopover/Placement/sample.html b/packages/website/docs/_samples/main/ResponsivePopover/Placement/sample.html
index 16e8bbdce33a..8558cb984d77 100644
--- a/packages/website/docs/_samples/main/ResponsivePopover/Placement/sample.html
+++ b/packages/website/docs/_samples/main/ResponsivePopover/Placement/sample.html
@@ -45,7 +45,7 @@
<ui5-button id="btn2">Open ResponsivePopover to Left</ui5-button>
</div>
- <ui5-responsive-popover id="respPopover1" opener="btn1" header-text="Newsletter subscription" placement-type="Bottom">
+ <ui5-responsive-popover id="respPopover1" opener="btn1" header-text="Newsletter subscription" placement="Bottom">
<div class="popover-content">
<ui5-label for="emailInput" required show-colon>Email</ui5-label>
<ui5-input id="emailInput" style="min-width: 150px;" placeholder="Enter Email"></ui5-input>
@@ -57,7 +57,7 @@
</div>
</ui5-responsive-popover>
- <ui5-responsive-popover id="respPopover2" opener="btn2" header-text="Newsletter subscription" placement-type="Start">
+ <ui5-responsive-popover id="respPopover2" opener="btn2" header-text="Newsletter subscription" placement="Start">
<div class="popover-content">
<ui5-label for="emailInput" required show-colon>Email</ui5-label>
<ui5-input id="emailInput" style="min-width: 150px;" placeholder="Enter Email"></ui5-input>
From b06c3494c1c88413cb3d5e9dc7ff560b14c47744 Mon Sep 17 00:00:00 2001
From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com>
Date: Tue, 2 Apr 2024 17:08:15 +0300
Subject: [PATCH 39/60] framework: enable popover API (#8192)
---
.../05-testing-UI5-Web-Components.md | 30 +-
.../06-deep-dive-and-best-practices.md | 316 -------
.../07-typescript-in-UI5-Web-Components.md | 5 +-
packages/base/bundle.esm.js | 1 -
packages/base/config/wdio.conf.cjs | 8 -
packages/base/src/StaticAreaItem.ts | 115 ---
packages/base/src/UI5Element.ts | 74 +-
packages/base/src/decorators/customElement.ts | 4 +-
packages/base/src/features/OpenUI5Support.ts | 36 +-
packages/base/src/renderer/LitRenderer.ts | 4 +-
.../base/src/theming/getConstructableStyle.ts | 6 +-
.../base/src/theming/getEffectiveStyle.ts | 16 +-
packages/base/src/updateShadowRoot.ts | 16 +-
packages/base/src/util/PopupUtils.ts | 25 -
packages/base/test/elements/WithStaticArea.js | 77 --
.../base/test/specs/SystemDOMElements.spec.js | 75 +-
packages/fiori/src/BarcodeScannerDialog.ts | 26 +-
packages/fiori/src/MediaGallery.ts | 1 -
.../fiori/src/NotificationListGroupItem.hbs | 2 +
.../fiori/src/NotificationListGroupItem.ts | 6 +-
packages/fiori/src/NotificationListItem.hbs | 2 +
packages/fiori/src/NotificationListItem.ts | 6 +-
.../fiori/src/NotificationListItemBase.ts | 24 +-
packages/fiori/src/ShellBar.hbs | 2 +
packages/fiori/src/ShellBar.ts | 52 +-
packages/fiori/src/SideNavigation.hbs | 2 +
packages/fiori/src/SideNavigation.ts | 60 +-
packages/fiori/src/SideNavigationPopover.hbs | 2 +
packages/fiori/src/Wizard.hbs | 2 +
packages/fiori/src/Wizard.ts | 19 +-
packages/fiori/src/WizardPopover.hbs | 1 -
packages/fiori/test/specs/ShellBar.spec.js | 45 +-
.../fiori/test/specs/SideNavigation.spec.js | 51 +-
packages/fiori/test/specs/Wizard.spec.js | 6 +-
packages/main/src/Breadcrumbs.hbs | 4 +-
packages/main/src/Breadcrumbs.ts | 18 +-
packages/main/src/ColorPalette.hbs | 8 +-
packages/main/src/ColorPalette.ts | 30 +-
packages/main/src/ColorPaletteDialog.hbs | 2 +
packages/main/src/ComboBox.hbs | 2 +
packages/main/src/ComboBox.ts | 19 +-
packages/main/src/DatePicker.hbs | 47 +-
packages/main/src/DatePicker.ts | 15 +-
packages/main/src/DatePickerInput.hbs | 45 +
packages/main/src/DateTimePicker.hbs | 2 +
packages/main/src/DateTimePicker.ts | 14 +-
packages/main/src/Dialog.ts | 5 +-
packages/main/src/FileUploader.hbs | 3 +-
packages/main/src/FileUploader.ts | 22 +-
packages/main/src/Input.hbs | 4 +-
packages/main/src/Input.ts | 17 +-
packages/main/src/Menu.ts | 15 +-
packages/main/src/MultiComboBox.hbs | 2 +
packages/main/src/MultiComboBox.ts | 123 +--
packages/main/src/MultiComboBoxPopover.hbs | 1 +
packages/main/src/MultiInput.ts | 4 +-
packages/main/src/NavigationMenu.ts | 10 +-
packages/main/src/Popover.ts | 10 +-
packages/main/src/Popup.hbs | 3 +-
packages/main/src/Popup.ts | 55 +-
packages/main/src/PopupBlockLayer.hbs | 6 +-
packages/main/src/ResponsivePopover.hbs | 1 +
packages/main/src/ResponsivePopover.ts | 7 -
packages/main/src/Select.hbs | 2 +
packages/main/src/Select.ts | 28 +-
packages/main/src/Tab.ts | 2 +-
packages/main/src/TabContainer.hbs | 4 +-
packages/main/src/TabContainer.ts | 34 +-
packages/main/src/TabContainerPopover.hbs | 1 +
packages/main/src/TabSeparator.ts | 2 +-
packages/main/src/TextArea.hbs | 2 +
packages/main/src/TextArea.ts | 16 +-
packages/main/src/TimePicker.hbs | 2 +
packages/main/src/TimePickerBase.ts | 48 +-
packages/main/src/TimePickerPopover.hbs | 4 +-
packages/main/src/Toast.ts | 2 -
packages/main/src/Tokenizer.hbs | 4 +-
packages/main/src/Tokenizer.ts | 11 +-
packages/main/src/Toolbar.hbs | 4 +-
packages/main/src/Toolbar.ts | 35 +-
packages/main/src/ToolbarButton.ts | 5 +-
packages/main/src/ToolbarRegistry.ts | 5 -
.../main/src/features/InputSuggestions.ts | 15 +-
...eStaticArea.css => ColorPaletteDialog.css} | 0
packages/main/src/themes/Popup.css | 7 +-
...aticAreaStyles.css => PopupBlockLayer.css} | 11 +-
packages/main/src/themes/PopupsCommon.css | 1 -
...ers.css => PopupBlockLayer-parameters.css} | 0
.../themes/sap_belize/parameters-bundle.css | 2 +-
.../sap_belize_hcb/parameters-bundle.css | 2 +-
.../sap_belize_hcw/parameters-bundle.css | 2 +-
.../themes/sap_fiori_3/parameters-bundle.css | 2 +-
.../sap_fiori_3_dark/parameters-bundle.css | 2 +-
.../sap_fiori_3_hcb/parameters-bundle.css | 2 +-
.../sap_fiori_3_hcw/parameters-bundle.css | 2 +-
.../themes/sap_horizon/parameters-bundle.css | 2 +-
.../sap_horizon_dark/parameters-bundle.css | 2 +-
.../sap_horizon_hcb/parameters-bundle.css | 2 +-
.../sap_horizon_hcw/parameters-bundle.css | 2 +-
.../test/pageobjects/DatePickerTestPage.js | 76 +-
.../test/pageobjects/TabContainerTestPage.js | 5 +-
packages/main/test/specs/Breadcrumbs.spec.js | 15 +-
packages/main/test/specs/ColorPalette.spec.js | 3 +-
.../main/test/specs/ComboBox.mobile.spec.js | 65 +-
packages/main/test/specs/ComboBox.spec.js | 103 +--
packages/main/test/specs/DatePicker.spec.js | 5 +-
.../main/test/specs/DateRangePicker.spec.js | 13 +-
.../main/test/specs/DateTimePicker.spec.js | 3 +-
packages/main/test/specs/Dialog.spec.js | 62 +-
packages/main/test/specs/Input.mobile.spec.js | 49 +-
packages/main/test/specs/Input.spec.js | 131 +--
.../main/test/specs/LitKeyFunction.spec.js | 4 +-
packages/main/test/specs/Menu.spec.js | 116 ++-
.../test/specs/MultiComboBox.mobile.spec.js | 114 +--
.../main/test/specs/MultiComboBox.spec.js | 203 ++---
.../main/test/specs/MultiInput.mobile.spec.js | 21 +-
packages/main/test/specs/MultiInput.spec.js | 85 +-
packages/main/test/specs/Popover.spec.js | 25 +-
.../main/test/specs/Select.mobile.spec.js | 4 +-
packages/main/test/specs/Select.spec.js | 64 +-
.../test/specs/TabContainer.mobile.spec.js | 6 +-
packages/main/test/specs/TabContainer.spec.js | 55 +-
packages/main/test/specs/TextArea.spec.js | 23 +-
.../main/test/specs/TimePicker.mobile.spec.js | 15 +-
packages/main/test/specs/TimePicker.spec.js | 17 +-
packages/main/test/specs/Toolbar.spec.js | 6 +-
.../main/test/specs/ToolbarButton.spec.js | 9 +-
.../main/test/specs/ToolbarSelect.spec.js | 3 +-
.../build-scripts-storybook/parse-manifest.js | 1 -
packages/tools/components-package/wdio.js | 809 +++++++++---------
.../tools/components-package/wdio.sync.js | 368 --------
yarn.lock | 134 +--
132 files changed, 1468 insertions(+), 3022 deletions(-)
delete mode 100644 packages/base/src/StaticAreaItem.ts
delete mode 100644 packages/base/test/elements/WithStaticArea.js
create mode 100644 packages/main/src/DatePickerInput.hbs
create mode 100644 packages/main/src/DateTimePicker.hbs
rename packages/main/src/themes/{ColorPaletteStaticArea.css => ColorPaletteDialog.css} (100%)
rename packages/main/src/themes/{PopupStaticAreaStyles.css => PopupBlockLayer.css} (69%)
rename packages/main/src/themes/base/{PopupStaticAreaStyles-parameters.css => PopupBlockLayer-parameters.css} (100%)
delete mode 100644 packages/tools/components-package/wdio.sync.js
diff --git a/docs/5-development/05-testing-UI5-Web-Components.md b/docs/5-development/05-testing-UI5-Web-Components.md
index 9a215737d965..236aa2f58a78 100644
--- a/docs/5-development/05-testing-UI5-Web-Components.md
+++ b/docs/5-development/05-testing-UI5-Web-Components.md
@@ -218,32 +218,4 @@ UI5 Web Components versions up to, including, `1.0.0-rc.15`, used to recommend t
If you have already written tests for your custom UI5 Web Components using the *synchronous* syntax, and you update to a later version than `1.0.0-rc.15`, your tests will no longer run.
You have 2 options:
- Rewrite all tests to use the *asynchronous* syntax. Click the link above to see some examples. This is the **recommended** approach, because the *synchronous* syntax will no longer work with future `nodejs` versions.
- - For the time being, adapt your WebdriverIO configuration to continue supporting the *synchronous* syntax.
-
-### 5.1 Supporting the synchronous syntax for writing tests
-
- - Change your `config/wdio.conf.js` file's content from:
-
- ```js
- module.exports = require("@ui5/webcomponents-tools/components-package/wdio.js");
- ```
- to:
-
- ```js
- module.exports = require("@ui5/webcomponents-tools/components-package/wdio.sync.js");
- ```
-
- This will give you the exact same WebdriverIO configuration, but with *synchronous* custom commands (such as `getProperty`, `setProperty`, `hasClass`, etc.).
-
- - Manually install `@wdio/sync`
-
- You can install it with `npm`:
-
- `npm i --save-dev @wdio/sync`
-
- or with `yarn`:
-
- `yarn add -D @wdio/sync`
-
- Just installing the package (with no extra configuration) is enough to let WebdriverIO run the *synchronous* tests.
-
+ - For the time being, adapt your WebdriverIO configuration to continue supporting the *synchronous* syntax.
\ No newline at end of file
diff --git a/docs/5-development/06-deep-dive-and-best-practices.md b/docs/5-development/06-deep-dive-and-best-practices.md
index c99795930e96..7fccbed926b6 100644
--- a/docs/5-development/06-deep-dive-and-best-practices.md
+++ b/docs/5-development/06-deep-dive-and-best-practices.md
@@ -25,11 +25,6 @@ as this article will expand on many of the notions, introduced there.
- [`onBeforeRendering`](#lifecycle_before)
- [`onAfterRendering`](#lifecycle_after)
- [`onEnterDOM` and `onExitDOM`](#lifecycle_dom)
-4. [The static area](#static)
- - [Preface](#static_preface)
- - [What is the static area and why is it needed?](#static_what_why)
- - [Using the static area?](#static_using)
- - [Accessing the static area item](#static_accessing)
## Metadata deep dive <a name="metadata"></a>
@@ -1086,314 +1081,3 @@ and then in `onEnterDOM` and `onExitDOM` we register/deregister this function wi
Then, whenever the component resizes, the `ResizeHandler` will trigger the callback, the metadata `_width` property will be updated to a new value in `_onResize`,
the component will be invalidated, and the template will be executed with the new value of `_width`, respectively `styles`.
-
-## The static area <a name="static"></a>
-
-### Preface <a name="static_preface"></a>
-
-This section expands on the UI5 Web Components class structure, so if you haven't, please check [Developing Custom UI5 Web Components](./02-custom-UI5-Web-Components.md) first.
-
-Normally, the whole HTML markup of a UI5 Web Component is found in one place - the shadow DOM of the custom element itself.
-
-Example:
-
-```html
-<ui5-button id="button">Click me</ui5-button>
-```
-
-All HTML, belonging to this `ui5-button` instance is in its own shadow DOM.
-
-Respectively, in the class where the button component is defined, we provide one template and one piece of CSS:
-
-```js
-import ButtonTemplate from "./generated/templates/ButtonTemplate.lit.js";
-import buttonCss from "./generated/themes/Button.css.js";
-
-class Button extends UI5Element {
- ...
-
- static get styles() {
- return buttonCss;
- }
-
- static get template() {
- return ButtonTemplate;
- }
-
-}
-```
-
-These are respectively the template and CSS that are going to be used in the component's shadow DOM.
-
-However, there are more complex components, whose HTML is split in two parts - the custom element's shadow DOM (as is the case with the button),
-but also a so called **static area** part, holding all popups this component might open. This is the case with most components that have any kind of
-popup-related functionality (dropdowns, rich tooltips, popovers, dialogs). Prominent examples are `ui5-select`, `ui5-combobox`, `ui5-textarea`, `ui5-date-picker`.
-
-### What is the static area and why is it needed? <a name="static_what_why"></a>
-
-The static area is a special *singleton* custom element (`ui5-static-area`), placed automatically by the framework as the first child of the `body`.
-For each component, having a **static area** part, a `ui5-static-area-item` custom element is created inside the static area.
-
-```html
-<body>
- <ui5-static-area> <!-- created automatically only once -->
- <ui5-static-area-item></ui5-static-area-item> <!-- created automatically for the ui5-select -->
- <ui5-static-area-item></ui5-static-area-item> <!-- created automatically for the ui5-date-picker -->
- </ui5-static-area>
-
- <ui5-select></ui5-select> <!-- needs a static area part -->
- <ui5-date-picker></ui5-date-picker> <!-- needs a static area part -->
- <ui5-button></ui5-button> <!-- does not need a static area part -->
-</body>
-```
-
-In this example 3 UI5 Web Components are used: `ui5-select`, `ui5-date-picker`, and `ui5-button`.
-Since two of them have static area parts, the framework has created a `ui5-static-area` (one for the whole page) and inside it a `ui5-static-area-item`
-for each component with a static area part.
-
-Thus, the HTML, defining the `ui5-select` and `ui5-date-picker` components is split in two parts of the HTML page:
- - the shadow DOM of the custom element itself (`ui5-select`, `ui5-date-picker`)
- - the shadow DOM of the `static-area-item`, created for the respective component.
-
-**This is necessary because such a split is the only way to guarantee that a popup (dropdown, rich tooltip, popover, etc.) will always be
-positioned correctly on the HTML page**, even if parts of the page have:
- - `transform: translate`
- - `overflow: hidden`
- - `z-index`
-
-Since the `ui5-statia-area` is a top-level `body` child, it is guaranteed to be on top of everything else on the page with the correct CSS styles,
-regardless of the page structure and [stacking context](https://developer.mozilla.org/en-US/docs/Glossary/Stacking_context).
-
-If we did not use a static area, for example as in a component, defined like this:
-
-In the `MySelect.js` file:
-
-```handlebars
-<div class="my-select">
- <h1>Click to open the dropdown:</h1>
- <button @click="{{onOpenDropdownClick}}">Dropdown</button>
-
- <ui5-popover id="#popover" ?open="{{dropdownOpen}}">
- <ui5-list>
- {{#each dropdownItems}}
- <ui5-li>{{text}}</ui5-li>
- {{/each}}
- </ui5-list>
- </ui5-popover>
-</div>
-```
-
-In the `MySelect.js` file:
-
-```js
-class MySelect extends UI5Element {
- ...
- onOpenDropdownClick(event) {
- this.dropdownOpen = true;
- }
-}
-```
-
-then when the user clicks the `button`, and the `ui5-popover` opens (due to its `open` property having been set to `true`),
-this popover might be partially or entirely "cut" or misplaced, depending on the position of the component on the page.
-
-Example 1:
-
-```html
-<body>
- <my-select></my-select>
-</body>
-```
-
-Here the `my-select` component would work just fine as it is the only component on the page and no other components create a stacking context or overflow.
-
-However, consider example 2:
-
-```html
-<body>
- <div style="height: 20px; overflow: hidden;">
- <my-select></my-select>
- </div>
-</body>
-```
-
-Now, when the popover opens, only a `20px`-high strip of it would be visible due to the parent element's CSS.
-
-This is an oversimplified example that could easily be fixed, but in real-world scenarios there are often parts of the HTML page we cannot
-influence which cause problems with popups.
-
-### Using the static area <a name="static_using"></a>
-
-Here is how we can rework the component from the example above to take advantage of the static area:
-
-1. Split the template and CSS of the component:
-
-Instead of having the dropdown (`ui5-popover`) in the main template:
-
-```handlebars
-<div class="my-select">
- <h1>Click to open the dropdown:</h1>
- <button @click="{{onOpenDropdownClick}}">Dropdown</button>
-
- <ui5-popover id="#popover" ?open="{{dropdownOpen}}">
- <ui5-list>
- {{#each dropdownItems}}
- <ui5-li>{{text}}</ui5-li>
- {{/each}}
- </ui5-list>
- </ui5-popover>
-</div>
-```
-
-split `MySelect.hbs` into `MySelect.hbs` and `MySelectDropdown.hbs`:
-
-The `MySelect.hbs` file:
-
-```handlebars
-<div class="my-select">
- <h1>Click to open the dropdown:</h1>
- <button @click="{{onOpenDropdownClick}}">Dropdown</button>
-</div>
-```
-
-The `MySelectDropdown.hbs` file:
-
-```handlebars
-<ui5-popover id="#popover" ?open="{{dropdownOpen}}">
- <ui5-list>
- {{#each dropdownItems}}
- <ui5-li>{{text}}</ui5-li>
- {{/each}}
- </ui5-list>
-</ui5-popover>
-```
-
-Also, create the CSS of the component in 2 files:
- - `MySelect.css` (with styles for the select itself, f.e. `.my-select {}`)
- - `MySelectDropdown.css` (with styles for the dropdown only, f.e. `#dropdown {}`)
-
-2. Pass the new template and CSS to the component class
-
-The `MySelect.js` file:
-
-```js
-import MySelectTemplate from "./generated/templates/MySelect.lit.js";
-import MySelectDropdownTemplate from "./generated/templates/MySelectDropdown.lit.js";
-
-import mySelectCss from "./generated/themes/MySelect.css.js";
-import mySelectDropdownCss from "./generated/themes/MySelectDropdown.css.js";
-
-class MySelect extends UI5Element {
- ...
-
- static get styles() {
- return mySelectCss;
- }
-
- static get staticAreaStyles() {
- return mySelectDropdownCss;
- }
-
- static get template() {
- return MySelectTemplate;
- }
-
- static get staticAreaTemplate() {
- return MySelectDropdownTemplate;
- }
-
-}
-```
-
-Creating the `static get staticAreaTemplate()` method is the indication that your component has a static area part,
-and will trigger the respective framework functionality to support it.
-
-3. Use the `async getStaticAreaItemDomRef()` method to create the static area item **on demand**, whenever necessary.
-
-```js
-class MySelect extends UI5Element {
- ...
-
- async onOpenDropdownClick() {
- await this.getStaticAreaItemDomRef(); // this line is new compared to the old implementation
- this.dropdownOpen = true;
- }
-
-}
-```
-
-This is all it takes to make your component work with the static area.
-
-**Important:** please note that the static area item is only created **on demand** - when you call the `async getStaticAreaItemDomRef()` function.
-For most components this is when the user opens a menu/dropdown/hovers over an element for a tooltip, etc.
-
-Let's go over the whole process in more detail:
-
- 1. The browser renders a `<my-select></my-select>` component:
-
-```html
-<body>
- <my-select></my-select>
-</body>
-```
-
-The shadow root of the `my-select` component will be created with the content from the `MySelect.hbs` template, as it was provided as `static get template()`.
-Note that until this point nothing related to the static area has happened. The lifecycle of this component so far is not much different than that of a `ui5-button`.
-
-2. The user interacts with the component (clicks the "Dropdown" button)
-
-This will trigger the `onOpenDropdownClick` event handler we've bound in `MySelect.hbs`
-and once the first line of this event handler is executed (the `await this.getStatiAreaItemDomRef` part):
-
-```js
-async onOpenDropdownClick() {
- await this.getStaticAreaItemDomRef();
- this.dropdownOpen = true;
-}
-```
-
-the framework will create the `ui5-static-area` and a `ui5-static-area-item` and will create its shadow root with the content from the `MySelectDropdown.hbs` template, as it was provided as `static get staticAreaTemplate()`.
-
-The DOM would then look like this:
-
-```html
-<body>
- <ui5-static-area>
- <ui5-static-area-item>
- #shadow-root <!-- The MySelectDropdown.hbs template was rendered here -->
- </ui5-static-area-item>
- </ui5-static-area>
-
- <my-select>
- #shadow-root <!-- The MySelect.hbs template was rendered here -->
- </my-select>
-</body>
-```
-
-If the user hadn't clicked the button, the static area part would not have been created at all.
-
-### Accessing the static area item <a name="static_accessing"></a>
-
-The `async getStaticAreaItemDomRef()` function from the example above:
-
-```js
-async onOpenDropdownClick() {
- await this.getStaticAreaItemDomRef();
- this.dropdownOpen = true;
-}
-```
-
-returns a reference to the `shadowRoot` of the static area item for this component.
-
-You can therefore access it like this:
-
-```js
-const staticAreaItem = await this.getStaticAreaItemDomRef();
-const popover = staticAreaItem.querySelector("[ui5-popover]");
-```
-
-First, we get a reference to the static area item's shadow root in `staticAreaItem`, and then we get the instance of the `ui5-popover` element
-by using the attribute selector (`[ui5-popover]`), as is the best practice. See [Tag](#metadata_tag) in the [Metadata deep dive](#metadata) section above.
-
-Also, note that no matter how many times you call `getStaticAreaItemDomRef`, the static area item will be created only the first time.
-
diff --git a/docs/5-development/07-typescript-in-UI5-Web-Components.md b/docs/5-development/07-typescript-in-UI5-Web-Components.md
index c0dbe7542271..c888334e3556 100644
--- a/docs/5-development/07-typescript-in-UI5-Web-Components.md
+++ b/docs/5-development/07-typescript-in-UI5-Web-Components.md
@@ -677,9 +677,8 @@ It's important to note that casting the returned result will exclude "`null`." A
```ts
-async _getDialog() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Dialog>("[ui5-dialog]")!;
+_getDialog() {
+ return this.shadowRoot!.querySelector<Dialog>("[ui5-dialog]")!;
}
```
diff --git a/packages/base/bundle.esm.js b/packages/base/bundle.esm.js
index ddebbbad9e7d..8712b457b7ad 100644
--- a/packages/base/bundle.esm.js
+++ b/packages/base/bundle.esm.js
@@ -9,7 +9,6 @@ import "./test/elements/Generic.js";
import "./test/elements/NoShadowDOM.js";
import "./test/elements/Parent.js";
import "./test/elements/Child.js";
-import "./test/elements/WithStaticArea.js";
import "./test/elements/WithComplexTemplate.js";
import "./test/elements/GenericExt.js";
diff --git a/packages/base/config/wdio.conf.cjs b/packages/base/config/wdio.conf.cjs
index 064e4ade4c25..db5ed6d063c3 100644
--- a/packages/base/config/wdio.conf.cjs
+++ b/packages/base/config/wdio.conf.cjs
@@ -230,13 +230,6 @@ exports.config = {
}, this, attrName);
}, true);
- await browser.addCommand("getStaticAreaItemClassName", async function(selector) {
- return browser.executeAsync(async (selector, done) => {
- const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
- done(staticAreaItem.host.classList[0]);
- }, selector);
- }, false);
-
await browser.addLocatorStrategy('activeElement', (selector) => {
return document.querySelector(selector).shadowRoot.activeElement;
});
@@ -256,7 +249,6 @@ exports.config = {
"getHTML",
"getProperty",
"getSize",
- "getStaticAreaItemClassName", // custom
"getText",
"getValue",
"hasClass", // custom
diff --git a/packages/base/src/StaticAreaItem.ts b/packages/base/src/StaticAreaItem.ts
deleted file mode 100644
index d3aa70ef7950..000000000000
--- a/packages/base/src/StaticAreaItem.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import "./StaticArea.js";
-import updateShadowRoot from "./updateShadowRoot.js";
-import { renderFinished } from "./Render.js";
-import getEffectiveContentDensity from "./util/getEffectiveContentDensity.js";
-import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
-import getEffectiveDir from "./locale/getEffectiveDir.js";
-import type UI5Element from "./UI5Element.js";
-
-const pureTagName = "ui5-static-area-item";
-const popupIntegrationAttr = "data-sap-ui-integration-popup-content";
-
-/**
- * @class
- * @private
- */
-class StaticAreaItem extends HTMLElement {
- _rendered: boolean;
- ownerElement?: UI5Element;
-
- constructor() {
- super();
- this._rendered = false;
- this.attachShadow({ mode: "open" });
- }
-
- /**
- * @param ownerElement the UI5Element instance that owns this static area item
- */
- setOwnerElement(ownerElement: UI5Element) {
- this.ownerElement = ownerElement;
- this.classList.add(this.ownerElement._id); // used for getting the popover in the tests
- if (this.ownerElement.hasAttribute("data-ui5-static-stable")) {
- this.setAttribute("data-ui5-stable", this.ownerElement.getAttribute("data-ui5-static-stable")!); // stable selector
- }
- }
-
- /**
- * Updates the shadow root of the static area item with the latest state, if rendered
- */
- update() {
- if (this._rendered) {
- this.updateAdditionalProperties();
- updateShadowRoot(this.ownerElement!, true);
- }
- }
-
- updateAdditionalProperties() {
- this._updateAdditionalAttrs();
- this._updateContentDensity();
- this._updateDirection();
- }
-
- /**
- * Sets the correct content density based on the owner element's state
- * @private
- */
- _updateContentDensity() {
- if (getEffectiveContentDensity(this.ownerElement!) === "compact") {
- this.classList.add("sapUiSizeCompact");
- this.classList.add("ui5-content-density-compact");
- } else {
- this.classList.remove("sapUiSizeCompact");
- this.classList.remove("ui5-content-density-compact");
- }
- }
-
- _updateDirection() {
- if (this.ownerElement) {
- const dir = getEffectiveDir(this.ownerElement);
- if (dir === "rtl") {
- this.setAttribute("dir", dir);
- } else {
- this.removeAttribute("dir");
- }
- }
- }
-
- _updateAdditionalAttrs() {
- this.setAttribute(pureTagName, "");
- this.setAttribute(popupIntegrationAttr, "");
- }
-
- /**
- * Returns reference to the DOM element where the current fragment is added.
- * @protected
- */
- async getDomRef() {
- this.updateAdditionalProperties();
- if (!this._rendered) {
- this._rendered = true;
- updateShadowRoot(this.ownerElement!, true);
- }
- await renderFinished(); // Wait for the content of the ui5-static-area-item to be rendered
- return this.shadowRoot;
- }
-
- static getTag() {
- const suffix = getEffectiveScopingSuffixForTag(pureTagName);
- if (!suffix) {
- return pureTagName;
- }
-
- return `${pureTagName}-${suffix}`;
- }
-
- static createInstance() {
- if (!customElements.get(StaticAreaItem.getTag())) {
- customElements.define(StaticAreaItem.getTag(), StaticAreaItem);
- }
-
- return document.createElement(this.getTag()) as StaticAreaItem;
- }
-}
-
-export default StaticAreaItem;
diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts
index 93529993abe9..c70ce3e3d750 100644
--- a/packages/base/src/UI5Element.ts
+++ b/packages/base/src/UI5Element.ts
@@ -10,11 +10,13 @@ import UI5ElementMetadata, {
Metadata,
} from "./UI5ElementMetadata.js";
import EventProvider from "./EventProvider.js";
-import getSingletonElementInstance from "./util/getSingletonElementInstance.js";
-import StaticAreaItem from "./StaticAreaItem.js";
import updateShadowRoot from "./updateShadowRoot.js";
import { shouldIgnoreCustomElement } from "./IgnoreCustomElements.js";
-import { renderDeferred, renderImmediately, cancelRender } from "./Render.js";
+import {
+ renderDeferred,
+ renderImmediately,
+ cancelRender,
+} from "./Render.js";
import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./CustomElementsRegistry.js";
import { observeDOMNode, unobserveDOMNode } from "./DOMObserver.js";
import { skipOriginalEvent } from "./config/NoConflict.js";
@@ -34,7 +36,7 @@ let autoId = 0;
const elementTimeouts = new Map<string, Promise<void>>();
const uniqueDependenciesCache = new Map<typeof UI5Element, Array<typeof UI5Element>>();
-type Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, forStaticArea: boolean, options: RendererOptions) => void;
+type Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, options: RendererOptions) => void;
type RendererOptions = {
/**
@@ -102,10 +104,7 @@ abstract class UI5Element extends HTMLElement {
_state: State;
_getRealDomRef?: () => HTMLElement;
- staticAreaItem?: StaticAreaItem;
-
static template?: TemplateFunction;
- static staticAreaTemplate?: TemplateFunction;
static _metadata: UI5ElementMetadata;
static renderer: Renderer;
@@ -157,11 +156,6 @@ abstract class UI5Element extends HTMLElement {
return executeTemplate(template!, this);
}
- renderStatic() {
- const template = (this.constructor as typeof UI5Element).staticAreaTemplate;
- return executeTemplate(template!, this);
- }
-
/**
* Do not call this method from derivatives of UI5Element, use "onEnterDOM" only
* @private
@@ -213,10 +207,6 @@ abstract class UI5Element extends HTMLElement {
this._fullyConnected = false;
}
- if (this.staticAreaItem && this.staticAreaItem.parentElement) {
- this.staticAreaItem.parentElement.removeChild(this.staticAreaItem);
- }
-
cancelRender(this);
}
@@ -641,9 +631,9 @@ abstract class UI5Element extends HTMLElement {
* 1) children: immediate children (HTML elements or text nodes) were added, removed or reordered in the slot
* 2) textcontent: text nodes in the slot changed value (or nested text nodes were added or changed value). Can only trigger for slots of "type: Node"
* 3) slotchange: a slot element, slotted inside that slot had its "slotchange" event listener called. This practically means that transitively slotted children changed.
- * Can only trigger if the child of a slot is a slot element itself.
+ * Can only trigger if the child of a slot is a slot element itself.
* 4) childchange: indicates that a UI5Element child in that slot was invalidated and in turn invalidated the component.
- * Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
+ * Can only trigger for slots with "invalidateOnChildChange" metadata descriptor
*
* - newValue: the new value of the property (for type="property" only)
*
@@ -701,9 +691,6 @@ abstract class UI5Element extends HTMLElement {
if (ctor._needsShadowDOM()) {
updateShadowRoot(this);
}
- if (this.staticAreaItem) {
- this.staticAreaItem.update();
- }
// Safari requires that children get the slot attribute only after the slot tags have been rendered in the shadow DOM
if (hasIndividualSlots) {
@@ -751,12 +738,7 @@ abstract class UI5Element extends HTMLElement {
return;
}
- const children = [...this.shadowRoot.children].filter(child => !["link", "style"].includes(child.localName));
- if (children.length !== 1) {
- console.warn(`The shadow DOM for ${(this.constructor as typeof UI5Element).getMetadata().getTag()} does not have a top level element, the getDomRef() method might not work as expected`); // eslint-disable-line
- }
-
- return children[0] as HTMLElement;
+ return this.shadowRoot.children[0] as HTMLElement;
}
/**
@@ -915,32 +897,6 @@ abstract class UI5Element extends HTMLElement {
return !!this.template || Object.prototype.hasOwnProperty.call(this.prototype, "render");
}
- /**
- * @private
- */
- static _needsStaticArea() {
- return !!this.staticAreaTemplate || Object.prototype.hasOwnProperty.call(this.prototype, "renderStatic");
- }
-
- /**
- * @public
- */
- getStaticAreaItemDomRef(): Promise<ShadowRoot | null> {
- if (!(this.constructor as typeof UI5Element)._needsStaticArea()) {
- throw new Error("This component does not use the static area");
- }
-
- if (!this.staticAreaItem) {
- this.staticAreaItem = StaticAreaItem.createInstance();
- this.staticAreaItem.setOwnerElement(this);
- }
- if (!this.staticAreaItem.parentElement) {
- getSingletonElementInstance("ui5-static-area").appendChild(this.staticAreaItem);
- }
-
- return this.staticAreaItem.getDomRef();
- }
-
/**
* @private
*/
@@ -1062,14 +1018,6 @@ abstract class UI5Element extends HTMLElement {
*/
static styles: ComponentStylesData = "";
- /**
- * Returns the Static Area CSS for this UI5 Web Component Class
- * @protected
- */
- static get staticAreaStyles(): ComponentStylesData {
- return "";
- }
-
/**
* Returns an array with the dependencies for this UI5 Web Component, which could be:
* - composed components (used in its shadow root or static area item)
@@ -1169,7 +1117,9 @@ const instanceOfUI5Element = (object: any): object is UI5Element => {
};
export default UI5Element;
-export { instanceOfUI5Element };
+export {
+ instanceOfUI5Element,
+};
export type {
ChangeInfo,
Renderer,
diff --git a/packages/base/src/decorators/customElement.ts b/packages/base/src/decorators/customElement.ts
index 163813675592..b719c89da968 100644
--- a/packages/base/src/decorators/customElement.ts
+++ b/packages/base/src/decorators/customElement.ts
@@ -15,8 +15,6 @@ const customElement = (tagNameOrComponentSettings: string | {
styles?: Styles,
template?: Template,
dependencies?: Array<typeof UI5Element>,
- staticAreaStyles?: Styles,
- staticAreaTemplate?: Template,
languageAware?: boolean,
themeAware?: boolean,
fastNavigation?: boolean,
@@ -49,7 +47,7 @@ const customElement = (tagNameOrComponentSettings: string | {
target.metadata.fastNavigation = fastNavigation;
}
- ["renderer", "template", "staticAreaTemplate", "styles", "staticAreaStyles", "dependencies"].forEach((customElementEntity: string) => {
+ ["renderer", "template", "styles", "dependencies"].forEach((customElementEntity: string) => {
const customElementEntityValue = tagNameOrComponentSettings[customElementEntity as keyof typeof tag];
customElementEntityValue && Object.defineProperty(target, customElementEntity, {
diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts
index b634d78017ce..4803b5007a93 100644
--- a/packages/base/src/features/OpenUI5Support.ts
+++ b/packages/base/src/features/OpenUI5Support.ts
@@ -1,14 +1,8 @@
import { registerFeature } from "../FeaturesRegistry.js";
import { setTheme } from "../config/Theme.js";
-import { getCurrentZIndex } from "../util/PopupUtils.js";
import { CLDRData } from "../asset-registries/LocaleData.js";
import type { LegacyDateCalendarCustomizing } from "../features/LegacyDateFormats.js";
-type OpenUI5Popup = {
- setInitialZIndex: (zIndex: number) => void,
- getNextZIndex: () => number,
-};
-
type OpenUI5Core = {
attachInit: (callback: () => void) => void,
ready: () => Promise<void>,
@@ -90,7 +84,7 @@ class OpenUI5Support {
return new Promise<void>(resolve => {
window.sap.ui.require(["sap/ui/core/Core"], async (Core: OpenUI5Core) => {
const callback = () => {
- let deps: Array<string> = ["sap/ui/core/Popup", "sap/ui/core/LocaleData"];
+ let deps: Array<string> = ["sap/ui/core/LocaleData"];
if (OpenUI5Support.isAtLeastVersion116()) { // for versions since 1.116.0 and onward, use the modular core
deps = [
...deps,
@@ -101,10 +95,7 @@ class OpenUI5Support {
"sap/ui/core/date/CalendarUtils",
];
}
- window.sap.ui.require(deps, (Popup: OpenUI5Popup) => {
- Popup.setInitialZIndex(getCurrentZIndex());
- resolve();
- });
+ window.sap.ui.require(deps, resolve);
};
if (OpenUI5Support.isAtLeastVersion116()) {
await Core.ready();
@@ -215,29 +206,6 @@ class OpenUI5Support {
return !!link.href.match(/\/css(-|_)variables\.css/);
}
-
- static getNextZIndex() {
- if (!OpenUI5Support.isOpenUI5Detected()) {
- return;
- }
-
- const Popup = window.sap.ui.require("sap/ui/core/Popup") as OpenUI5Popup;
-
- if (!Popup) {
- console.warn(`The OpenUI5Support feature hasn't been initialized properly. Make sure you import the "@ui5/webcomponents-base/dist/features/OpenUI5Support.js" module before all components' modules.`); // eslint-disable-line
- }
-
- return Popup.getNextZIndex();
- }
-
- static setInitialZIndex() {
- if (!OpenUI5Support.isOpenUI5Detected()) {
- return;
- }
-
- const Popup = window.sap.ui.require("sap/ui/core/Popup") as OpenUI5Popup;
- Popup.setInitialZIndex(getCurrentZIndex());
- }
}
registerFeature("OpenUI5Support", OpenUI5Support);
diff --git a/packages/base/src/renderer/LitRenderer.ts b/packages/base/src/renderer/LitRenderer.ts
index 7b76c0dbd6c3..a8dd72ddfa8f 100644
--- a/packages/base/src/renderer/LitRenderer.ts
+++ b/packages/base/src/renderer/LitRenderer.ts
@@ -24,9 +24,9 @@ const effectiveSvg = (strings: TemplateStringsArray, ...values: Array<unknown>)
return fn(strings, ...values);
};
-const litRender: Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, forStaticArea: boolean, options: RendererOptions) => {
+const litRender: Renderer = (templateResult: TemplateFunctionResult, container: HTMLElement | DocumentFragment, options: RendererOptions) => {
const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("OpenUI5Enablement");
- if (openUI5Enablement && !forStaticArea) {
+ if (openUI5Enablement) {
templateResult = openUI5Enablement.wrapTemplateResultInBusyMarkup(effectiveHtml, options.host as UI5Element, templateResult as TemplateResult);
}
diff --git a/packages/base/src/theming/getConstructableStyle.ts b/packages/base/src/theming/getConstructableStyle.ts
index 3b1a85817f46..865772d73d3a 100644
--- a/packages/base/src/theming/getConstructableStyle.ts
+++ b/packages/base/src/theming/getConstructableStyle.ts
@@ -14,12 +14,12 @@ attachCustomCSSChange((tag: string) => {
* @param ElementClass
* @returns {*}
*/
-const getConstructableStyle = (ElementClass: typeof UI5Element, forStaticArea = false) => {
+const getConstructableStyle = (ElementClass: typeof UI5Element) => {
const tag = ElementClass.getMetadata().getTag();
- const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+ const key = `${tag}_normal`;
if (!constructableStyleMap.has(key)) {
- const styleContent = getEffectiveStyle(ElementClass, forStaticArea);
+ const styleContent = getEffectiveStyle(ElementClass);
const style = new CSSStyleSheet();
style.replaceSync(styleContent);
constructableStyleMap.set(key, [style]);
diff --git a/packages/base/src/theming/getEffectiveStyle.ts b/packages/base/src/theming/getEffectiveStyle.ts
index 1d6ddb4dd918..d7e4d340b5a8 100644
--- a/packages/base/src/theming/getEffectiveStyle.ts
+++ b/packages/base/src/theming/getEffectiveStyle.ts
@@ -10,28 +10,22 @@ attachCustomCSSChange((tag: string) => {
effectiveStyleMap.delete(`${tag}_normal`); // there is custom CSS only for the component itself, not for its static area part
});
-const getEffectiveStyle = (ElementClass: typeof UI5Element, forStaticArea = false) => {
+const getEffectiveStyle = (ElementClass: typeof UI5Element) => {
const tag = ElementClass.getMetadata().getTag();
- const key = `${tag}_${forStaticArea ? "static" : "normal"}`;
+ const key = `${tag}_normal`;
const openUI5Enablement = getFeature<typeof OpenUI5Enablement>("OpenUI5Enablement");
if (!effectiveStyleMap.has(key)) {
- let effectiveStyle;
let busyIndicatorStyles = "";
if (openUI5Enablement) {
busyIndicatorStyles = getStylesString(openUI5Enablement.getBusyIndicatorStyles());
}
- if (forStaticArea) {
- effectiveStyle = getStylesString(ElementClass.staticAreaStyles);
- } else {
- const customStyle = getCustomCSS(tag) || "";
- const builtInStyles = getStylesString(ElementClass.styles);
- effectiveStyle = `${builtInStyles} ${customStyle}`;
- }
+ const customStyle = getCustomCSS(tag) || "";
+ const builtInStyles = getStylesString(ElementClass.styles);
- effectiveStyle = `${effectiveStyle} ${busyIndicatorStyles}`;
+ const effectiveStyle = `${builtInStyles} ${customStyle} ${busyIndicatorStyles}`;
effectiveStyleMap.set(key, effectiveStyle);
}
diff --git a/packages/base/src/updateShadowRoot.ts b/packages/base/src/updateShadowRoot.ts
index 6a4c1fba880d..7564f4afffb8 100644
--- a/packages/base/src/updateShadowRoot.ts
+++ b/packages/base/src/updateShadowRoot.ts
@@ -4,26 +4,20 @@ import type UI5Element from "./UI5Element.js";
/**
* Updates the shadow root of a UI5Element or its static area item
* @param element
- * @param forStaticArea
*/
-const updateShadowRoot = (element: UI5Element, forStaticArea = false) => {
+const updateShadowRoot = (element: UI5Element) => {
const ctor = element.constructor as typeof UI5Element;
- const shadowRoot = forStaticArea ? element.staticAreaItem!.shadowRoot : element.shadowRoot;
- let renderResult;
- if (forStaticArea) {
- renderResult = element.renderStatic(); // this is checked before calling updateShadowRoot
- } else {
- renderResult = element.render(); // this is checked before calling updateShadowRoot
- }
+ const shadowRoot = element.shadowRoot;
+ const renderResult = element.render(); // this is checked before calling updateShadowRoot
if (!shadowRoot) {
console.warn(`There is no shadow root to update`); // eslint-disable-line
return;
}
- shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor, forStaticArea);
+ shadowRoot.adoptedStyleSheets = getConstructableStyle(ctor);
- ctor.renderer(renderResult, shadowRoot, forStaticArea, { host: element });
+ ctor.renderer(renderResult, shadowRoot, { host: element });
};
export default updateShadowRoot;
diff --git a/packages/base/src/util/PopupUtils.ts b/packages/base/src/util/PopupUtils.ts
index 3e18f1706352..ce087a380051 100644
--- a/packages/base/src/util/PopupUtils.ts
+++ b/packages/base/src/util/PopupUtils.ts
@@ -1,13 +1,4 @@
-import getSharedResource from "../getSharedResource.js";
-import { getFeature } from "../FeaturesRegistry.js";
import getActiveElement from "./getActiveElement.js";
-import type OpenUI5Support from "../features/OpenUI5Support.js";
-
-type PopupUtilsData = {
- currentZIndex: number
-};
-
-const popupUtilsData = getSharedResource<PopupUtilsData>("PopupUtilsData", { currentZIndex: 100 });
const getFocusedElement = () => {
const element = getActiveElement() as HTMLElement;
@@ -88,25 +79,9 @@ const getClosedPopupParent = (el: HTMLElement): HTMLElement => {
return getClosedPopupParent(parent as HTMLElement);
};
-const getNextZIndex = () => {
- const openUI5Support = getFeature<typeof OpenUI5Support>("OpenUI5Support");
- if (openUI5Support && openUI5Support.isOpenUI5Detected()) { // use OpenUI5 for getting z-index values, if loaded
- return openUI5Support.getNextZIndex();
- }
-
- popupUtilsData.currentZIndex += 2;
- return popupUtilsData.currentZIndex;
-};
-
-const getCurrentZIndex = () => {
- return popupUtilsData.currentZIndex;
-};
-
export {
getFocusedElement,
isClickInRect,
getClosedPopupParent,
- getNextZIndex,
- getCurrentZIndex,
isFocusedElementWithinNode,
};
diff --git a/packages/base/test/elements/WithStaticArea.js b/packages/base/test/elements/WithStaticArea.js
deleted file mode 100644
index eba6e0d642a7..000000000000
--- a/packages/base/test/elements/WithStaticArea.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import UI5Element from "../../dist/UI5Element.js";
-import litRender, { html } from "../../dist/renderer/LitRenderer.js";
-
-const metadata = {
- tag: "ui5-with-static-area",
- properties: {
- /**
- * Defines whether the static area item will be rendered
- */
- staticContent: {
- type: Boolean,
- }
- },
- slots: {
-
- }
-};
-
-class WithStaticArea extends UI5Element {
- static get metadata() {
- return metadata;
- }
-
- static get renderer() {
- return litRender;
- }
-
- static get template() {
- return element => {
- // access effectiveDir getter to mark control as RTL-aware (test changes dir attribute and expects rerender)
- return html`
- <div dir=${element.effectiveDir}>
- WithStaticArea works!
- </div>`;
- };
- }
-
- static get staticAreaTemplate() {
- return element => {
- return html`
- <div class="ui5-with-static-area-content">
- Static area content.
- </div>`;
- };
- }
-
- static get styles() {
- return `
- :host {
- display: inline-block;
- border: 1px solid black;
- color: red;
- }`;
- }
-
- async addStaticArea() {
- if (!this.staticContent) {
- return;
- }
-
- // Require static area item
- const staticArea = await this.getStaticAreaItemDomRef();
- this.responsivePopover = staticArea.querySelector(".ui5-with-static-area-content");
- return this.responsivePopover;
- }
-
- onBeforeRendering() {
- this.addStaticArea();
- }
- onAfterRendering() {}
- onEnterDOM() {}
- onExitDOM() {}
-}
-
-WithStaticArea.define();
-
-export default WithStaticArea;
diff --git a/packages/base/test/specs/SystemDOMElements.spec.js b/packages/base/test/specs/SystemDOMElements.spec.js
index 86a76d126aa6..4fc755dfe0cf 100644
--- a/packages/base/test/specs/SystemDOMElements.spec.js
+++ b/packages/base/test/specs/SystemDOMElements.spec.js
@@ -1,83 +1,10 @@
import { assert } from "chai";
-describe("Static Area :: runtime changes", () => {
+describe("Shared Resources", () => {
before(async () => {
await browser.url("test/pages/AllTestElements.html");
});
- it("Tests control with no static area item", async () => {
- const componentId = await browser.$("#no-static-area").getProperty("_id");
- const staticArea = await browser.$("ui5-static-area");
-
- assert.notOk(await staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
- });
-
- it("Tests control with static area item", async () => {
- const componentId = await browser.$("#with-static-area").getProperty("_id");
- const staticArea = await browser.$("ui5-static-area");
-
- assert.ok(await staticArea.$(`.${componentId}`).isExisting(), "No static area item is defined for this control");
- });
-
- it("Tests removing an element with static area", async () => {
- const result = await browser.executeAsync(done => {
- let res = true;
- window.onerror = (errorMsg, url, lineNumber) => {
- res = false;
- }
-
- document.querySelector("#no-static-area").remove();
-
- done(res);
- });
-
- assert.ok(result, "Static area removed from DOM successfully");
- });
-
- it("Test RTL not set for static area items", async () => {
- const componentId = await browser.$("#with-static-area").getProperty("_id");
- const staticArea = await browser.$("ui5-static-area");
-
- assert.notOk(await staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute not set for static area item");
- });
-
- it("Test RTL set for static area items", async () => {
- const componentId = await browser.$("#with-static-area-rtl").getProperty("_id");
- const staticArea = await browser.$("ui5-static-area");
-
- assert.equal(await staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir property correctly set for static area item");
- });
-
- it("Test setting RTL for a static area item owner", async () => {
- const componentId = await browser.$("#with-static-area").getProperty("_id");
- const staticArea = await browser.$("ui5-static-area");
-
- await browser.$("#with-static-area").setAttribute("dir", "rtl");
- await browser.executeAsync( async (done) => {
- await window["sap-ui-webcomponents-bundle"].applyDirection();
- await window["sap-ui-webcomponents-bundle"].renderFinished();
-
- done();
- });
- assert.equal(await staticArea.$(`.${componentId}`).getAttribute("dir"), "rtl", "dir attribute dynamically set for static area item owner");
- });
-
- it("Test removing RTL for a static area item owner", async () => {
- const componentId = await browser.$("#with-static-area-rtl").getProperty("_id");
- const staticArea = await browser.$("ui5-static-area");
-
- await browser.$("#with-static-area-rtl-container").removeAttribute("dir");
- await browser.executeAsync( async (done) => {
- await window["sap-ui-webcomponents-bundle"].applyDirection();
- await window["sap-ui-webcomponents-bundle"].renderFinished();
-
- done();
- });
- assert.notOk(await staticArea.$(`.${componentId}`).getAttribute("dir"), "dir attribute dynamically removed for static area item owner");
- });
-});
-
-describe("Shared Resources", () => {
it("Tests the presense of the shared resources 'meta' element", async () => {
const sharedResourcesElement = await browser.executeAsync(done => {
return done(document.querySelector(`meta[name="ui5-shared-resources"]`));
diff --git a/packages/fiori/src/BarcodeScannerDialog.ts b/packages/fiori/src/BarcodeScannerDialog.ts
index 908b07e1efc0..3f51fbf9acdb 100644
--- a/packages/fiori/src/BarcodeScannerDialog.ts
+++ b/packages/fiori/src/BarcodeScannerDialog.ts
@@ -73,8 +73,8 @@ type BarcodeScannerDialogScanErrorEventDetail = {
tag: "ui5-barcode-scanner-dialog",
languageAware: true,
renderer: litRender,
- staticAreaTemplate: BarcodeScannerDialogTemplate,
- staticAreaStyles: [BarcodeScannerDialogCss],
+ template: BarcodeScannerDialogTemplate,
+ styles: [BarcodeScannerDialogCss],
dependencies: [
Dialog,
BusyIndicator,
@@ -204,18 +204,16 @@ class BarcodeScannerDialog extends UI5Element {
return navigator.mediaDevices.getUserMedia(defaultMediaConstraints);
}
- async _getDialog() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Dialog>("[ui5-dialog]")!;
+ _getDialog() {
+ return this.shadowRoot!.querySelector<Dialog>("[ui5-dialog]")!;
}
- async _getVideoElement() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<HTMLVideoElement>(".ui5-barcode-scanner-dialog-video")!;
+ _getVideoElement() {
+ return this.shadowRoot!.querySelector<HTMLVideoElement>(".ui5-barcode-scanner-dialog-video")!;
}
- async _showDialog() {
- this.dialog = await this._getDialog();
+ _showDialog() {
+ this.dialog = this._getDialog();
this.dialog.show();
this.open = true;
}
@@ -231,14 +229,14 @@ class BarcodeScannerDialog extends UI5Element {
this._decodeFromCamera();
}
- async _resetReader() {
- const videoElement = await this._getVideoElement();
+ _resetReader() {
+ const videoElement = this._getVideoElement();
videoElement.pause();
this._codeReader.reset();
}
- async _decodeFromCamera() {
- const videoElement = await this._getVideoElement();
+ _decodeFromCamera() {
+ const videoElement = this._getVideoElement();
this._codeReader.decodeFromVideoDevice(null, videoElement, (result: Result, err?: Exception) => {
this.loading = false;
if (result) {
diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts
index c10b8f3ec460..570c44e07c0f 100644
--- a/packages/fiori/src/MediaGallery.ts
+++ b/packages/fiori/src/MediaGallery.ts
@@ -91,7 +91,6 @@ const COLUMNS_COUNT: Record<string, number> = {
renderer: litRender,
styles: [MediaGalleryCss],
template: MediaGalleryTemplate,
- staticAreaTemplate: MediaGalleryTemplate,
dependencies: [
MediaGalleryItem,
Button,
diff --git a/packages/fiori/src/NotificationListGroupItem.hbs b/packages/fiori/src/NotificationListGroupItem.hbs
index 916f187c6027..816f15bcf8a0 100644
--- a/packages/fiori/src/NotificationListGroupItem.hbs
+++ b/packages/fiori/src/NotificationListGroupItem.hbs
@@ -87,3 +87,5 @@
></ui5-busy-indicator>
{{/if}}
</li>
+
+{{>include "./NotificationOverflowActionsPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/fiori/src/NotificationListGroupItem.ts b/packages/fiori/src/NotificationListGroupItem.ts
index a9a477f8ee0d..b6380012ff56 100644
--- a/packages/fiori/src/NotificationListGroupItem.ts
+++ b/packages/fiori/src/NotificationListGroupItem.ts
@@ -37,6 +37,7 @@ import NotificationListGroupItemTemplate from "./generated/templates/Notificatio
// Styles
import NotificationListGroupItemCss from "./generated/themes/NotificationListGroupItem.css.js";
+import NotificationOverflowActionsPopoverCss from "./generated/themes/NotificationOverflowActionsPopover.css.js";
type NotificationListGroupItemToggleEventDetail = {
item: NotificationListGroupItem,
@@ -73,7 +74,10 @@ type NotificationListGroupItemToggleEventDetail = {
@customElement({
tag: "ui5-li-notification-group",
languageAware: true,
- styles: NotificationListGroupItemCss,
+ styles: [
+ NotificationListGroupItemCss,
+ NotificationOverflowActionsPopoverCss,
+ ],
template: NotificationListGroupItemTemplate,
dependencies: [
List,
diff --git a/packages/fiori/src/NotificationListItem.hbs b/packages/fiori/src/NotificationListItem.hbs
index 788bcf065e8b..919e6eb25950 100644
--- a/packages/fiori/src/NotificationListItem.hbs
+++ b/packages/fiori/src/NotificationListItem.hbs
@@ -102,3 +102,5 @@
></ui5-busy-indicator>
{{/if}}
</li>
+
+{{>include "./NotificationOverflowActionsPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/fiori/src/NotificationListItem.ts b/packages/fiori/src/NotificationListItem.ts
index 5c2da797a3cd..1dbe4d28b383 100644
--- a/packages/fiori/src/NotificationListItem.ts
+++ b/packages/fiori/src/NotificationListItem.ts
@@ -38,6 +38,7 @@ import NotificationListItemTemplate from "./generated/templates/NotificationList
// Styles
import NotificationListItemCss from "./generated/themes/NotificationListItem.css.js";
+import NotificationOverflowActionsPopoverCss from "./generated/themes/NotificationOverflowActionsPopover.css.js";
import type { NotificationListItemBaseCloseEventDetail as NotificationListItemCloseEventDetail } from "./NotificationListItemBase.js";
@@ -80,7 +81,10 @@ type Footnote = Record<string, any>;
@customElement({
tag: "ui5-li-notification",
languageAware: true,
- styles: NotificationListItemCss,
+ styles: [
+ NotificationListItemCss,
+ NotificationOverflowActionsPopoverCss,
+ ],
template: NotificationListItemTemplate,
dependencies: [
Button,
diff --git a/packages/fiori/src/NotificationListItemBase.ts b/packages/fiori/src/NotificationListItemBase.ts
index ee877d740f3e..a802c90703be 100644
--- a/packages/fiori/src/NotificationListItemBase.ts
+++ b/packages/fiori/src/NotificationListItemBase.ts
@@ -19,12 +19,6 @@ import "@ui5/webcomponents-icons/dist/message-error.js";
import "@ui5/webcomponents-icons/dist/message-warning.js";
import "@ui5/webcomponents-icons/dist/overflow.js";
-// Templates
-import NotificationOverflowActionsPopoverTemplate from "./generated/templates/NotificationOverflowActionsPopoverTemplate.lit.js";
-
-// Styles
-import NotificationOverflowActionsPopoverCss from "./generated/themes/NotificationOverflowActionsPopover.css.js";
-
/**
* Defines the icons corresponding to the notification's priority.
*/
@@ -48,10 +42,7 @@ type NotificationListItemBaseCloseEventDetail = {
* @since 1.0.0-rc.8
* @public
*/
-@customElement({
- staticAreaStyles: NotificationOverflowActionsPopoverCss,
- staticAreaTemplate: NotificationOverflowActionsPopoverTemplate,
-})
+@customElement()
/**
* Fired when the `Close` button is pressed.
@@ -217,19 +208,18 @@ class NotificationListItemBase extends ListItemBase {
return this.actions.find(action => action._id === id);
}
- async openOverflow() {
- const overflowPopover = await this.getOverflowPopover();
+ openOverflow() {
+ const overflowPopover = this.getOverflowPopover();
overflowPopover.showAt(this.overflowButtonDOM);
}
- async closeOverflow() {
- const overflowPopover = await this.getOverflowPopover();
+ closeOverflow() {
+ const overflowPopover = this.getOverflowPopover();
overflowPopover.close();
}
- async getOverflowPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>(".ui5-notification-overflow-popover")!;
+ getOverflowPopover() {
+ return this.shadowRoot!.querySelector<Popover>(".ui5-notification-overflow-popover")!;
}
static async onDefine() {
diff --git a/packages/fiori/src/ShellBar.hbs b/packages/fiori/src/ShellBar.hbs
index 9954cbb374ac..3796b2eaf322 100644
--- a/packages/fiori/src/ShellBar.hbs
+++ b/packages/fiori/src/ShellBar.hbs
@@ -233,3 +233,5 @@
<slot name="profile"></slot>
</ui5-button>
{{/inline}}
+
+{{>include "./ShellBarPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/fiori/src/ShellBar.ts b/packages/fiori/src/ShellBar.ts
index 7e0ad09753de..ba6db7ef4c8a 100644
--- a/packages/fiori/src/ShellBar.ts
+++ b/packages/fiori/src/ShellBar.ts
@@ -1,4 +1,5 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
@@ -9,7 +10,6 @@ import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js";
import List from "@ui5/webcomponents/dist/List.js";
import type { ListSelectionChangeEventDetail } from "@ui5/webcomponents/dist/List.js";
@@ -33,7 +33,6 @@ import type ShellBarItem from "./ShellBarItem.js";
// Templates
import ShellBarTemplate from "./generated/templates/ShellBarTemplate.lit.js";
-import ShellBarPopoverTemplate from "./generated/templates/ShellBarPopoverTemplate.lit.js";
// Styles
import shellBarStyles from "./generated/themes/ShellBar.css.js";
@@ -172,9 +171,7 @@ const HANDLE_RESIZE_DEBOUNCE_RATE = 200; // ms
languageAware: true,
renderer: litRender,
template: ShellBarTemplate,
- staticAreaTemplate: ShellBarPopoverTemplate,
- styles: shellBarStyles,
- staticAreaStyles: [ShellBarPopoverCss],
+ styles: [shellBarStyles, ShellBarPopoverCss],
dependencies: [
Button,
List,
@@ -426,7 +423,7 @@ class ShellBar extends UI5Element {
_itemsInfo!: Array<IShelBarItemInfo>;
@property({ type: Object, multiple: true })
- _menuPopoverItems!: Array<HTMLElement>;
+ _menuPopoverItems: Array<HTMLElement>;
@property({ type: Boolean, noAttribute: true })
_menuPopoverExpanded!: boolean;
@@ -518,9 +515,9 @@ class ShellBar extends UI5Element {
coPilot?: ShellBarCoPilot;
_coPilotIcon: string;
_debounceInterval?: Timeout | null;
- _hiddenIcons?: Array<IShelBarItemInfo>;
+ _hiddenIcons: Array<IShelBarItemInfo>;
_handleResize: ResizeObserverCallback;
- _headerPress: () => Promise<void>;
+ _headerPress: () => void;
static get CO_PILOT_ICON_PRESSED() {
return "sap-icon://da-2";
@@ -553,6 +550,8 @@ class ShellBar extends UI5Element {
constructor() {
super();
+ this._menuPopoverItems = [];
+ this._hiddenIcons = [];
this._itemsInfo = [];
this._isInitialRendering = true;
this._coPilotIcon = ShellBar.CO_PILOT_ICON_UNPRESSED;
@@ -564,19 +563,20 @@ class ShellBar extends UI5Element {
this._updateClonedMenuItems();
});
- this._headerPress = async () => {
+ this._headerPress = () => {
this._updateClonedMenuItems();
if (this.hasMenuItems) {
- const menuPopover = await this._getMenuPopover();
- menuPopover!.showAt(this.shadowRoot!.querySelector<Button>(".ui5-shellbar-menu-button")!, true);
+ const menuPopover = this._getMenuPopover();
+ menuPopover.showAt(this.shadowRoot!.querySelector<Button>(".ui5-shellbar-menu-button")!, true);
}
};
this._handleResize = () => {
- this._debounce(async () => {
- await this._getResponsivePopover();
- this.overflowPopover!.close();
+ this._debounce(() => {
+ this.menuPopover = this._getMenuPopover();
+ this.overflowPopover = this._getOverflowPopover();
+ this.overflowPopover.close();
this._overflowActions();
}, HANDLE_RESIZE_DEBOUNCE_RATE);
};
@@ -588,7 +588,7 @@ class ShellBar extends UI5Element {
this._coPilotPressed = !this._coPilotPressed;
}
- _debounce(fn: () => Promise<void>, delay: number) {
+ _debounce(fn: () => void, delay: number) {
clearTimeout(this._debounceInterval!);
this._debounceInterval = setTimeout(() => {
this._debounceInterval = null;
@@ -791,10 +791,10 @@ class ShellBar extends UI5Element {
this._updateItemsInfo(newItems);
}
- async _toggleActionPopover() {
+ _toggleActionPopover() {
const overflowButton = this.shadowRoot!.querySelector<Button>(".ui5-shellbar-overflow-button")!;
- const overflowPopover = await this._getOverflowPopover();
- overflowPopover!.showAt(overflowButton, true);
+ const overflowPopover = this._getOverflowPopover();
+ overflowPopover.showAt(overflowButton, true);
}
onEnterDOM() {
@@ -1103,20 +1103,12 @@ class ShellBar extends UI5Element {
});
}
- async _getResponsivePopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- this.overflowPopover = staticAreaItem!.querySelector<Popover>(".ui5-shellbar-overflow-popover");
- this.menuPopover = staticAreaItem!.querySelector<Popover>(".ui5-shellbar-menu-popover");
- }
-
- async _getOverflowPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>(".ui5-shellbar-overflow-popover");
+ _getOverflowPopover() {
+ return this.shadowRoot!.querySelector<Popover>(".ui5-shellbar-overflow-popover")!;
}
- async _getMenuPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>(".ui5-shellbar-menu-popover");
+ _getMenuPopover() {
+ return this.shadowRoot!.querySelector<Popover>(".ui5-shellbar-menu-popover")!;
}
isIconHidden(name: string) {
diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs
index 64b99f5ba9fa..5e7f824d081e 100644
--- a/packages/fiori/src/SideNavigation.hbs
+++ b/packages/fiori/src/SideNavigation.hbs
@@ -53,3 +53,5 @@
<slot name="header"></slot>
{{/if}}
{{/inline}}
+
+{{>include "./SideNavigationPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts
index 89eb699e003f..13cb3ba4b342 100644
--- a/packages/fiori/src/SideNavigation.ts
+++ b/packages/fiori/src/SideNavigation.ts
@@ -5,7 +5,6 @@ import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
import NavigationMenu from "@ui5/webcomponents/dist/NavigationMenu.js";
import type { MenuItemClickEventDetail } from "@ui5/webcomponents/dist/Menu.js";
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
-import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -29,7 +28,6 @@ import SideNavigationItem from "./SideNavigationItem.js";
import SideNavigationSubItem from "./SideNavigationSubItem.js";
import SideNavigationGroup from "./SideNavigationGroup.js";
import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js";
-import SideNavigationPopoverTemplate from "./generated/templates/SideNavigationPopoverTemplate.lit.js";
import {
SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT,
@@ -109,9 +107,7 @@ type NavigationMenuClickEventDetail = MenuItemClickEventDetail & {
fastNavigation: true,
renderer: litRender,
template: SideNavigationTemplate,
- staticAreaTemplate: SideNavigationPopoverTemplate,
- styles: SideNavigationCss,
- staticAreaStyles: SideNavigationPopoverCss,
+ styles: [SideNavigationCss, SideNavigationPopoverCss],
dependencies: [
ResponsivePopover,
SideNavigationGroup,
@@ -231,11 +227,11 @@ class SideNavigation extends UI5Element {
});
}
- async _onAfterPopoverOpen() {
+ _onAfterPopoverOpen() {
// as the tree/list inside the popover is never destroyed,
// item navigation index should be managed, because items are
// dynamically recreated and tabIndexes are not updated
- const tree = await this.getPickerTree();
+ const tree = this.getPickerTree();
const selectedItem = tree._findSelectedItem(tree.items);
if (selectedItem) {
selectedItem.focus();
@@ -244,23 +240,23 @@ class SideNavigation extends UI5Element {
}
}
- async _onBeforePopoverOpen() {
- const popover = await this.getPicker();
+ _onBeforePopoverOpen() {
+ const popover = this.getPicker();
(popover?.opener as HTMLElement)?.classList.add("ui5-sn-item-active");
}
- async _onBeforePopoverClose() {
- const popover = await this.getPicker();
+ _onBeforePopoverClose() {
+ const popover = this.getPicker();
(popover?.opener as HTMLElement)?.classList.remove("ui5-sn-item-active");
}
- async _onBeforeMenuOpen() {
- const popover = await this.getOverflowPopover();
+ _onBeforeMenuOpen() {
+ const popover = this.getOverflowPopover();
(popover?.opener as HTMLElement)?.classList.add("ui5-sn-item-active");
}
- async _onBeforeMenuClose() {
- const popover = await this.getOverflowPopover();
+ _onBeforeMenuClose() {
+ const popover = this.getOverflowPopover();
(popover?.opener as HTMLElement)?.classList.remove("ui5-sn-item-active");
}
@@ -281,7 +277,7 @@ class SideNavigation extends UI5Element {
return SideNavigation.i18nBundle.getText(SIDE_NAVIGATION_OVERFLOW_ACCESSIBLE_NAME);
}
- async handlePopupItemClick(e: KeyboardEvent | PointerEvent) {
+ handlePopupItemClick(e: KeyboardEvent | PointerEvent) {
const associatedItem = (e.target as PopupSideNavigationItem).associatedItem;
associatedItem.fireEvent("click");
@@ -293,11 +289,10 @@ class SideNavigation extends UI5Element {
this._selectItem(associatedItem);
this.closePicker();
- await renderFinished();
this._popoverContents.item.getDomRef()!.classList.add("ui5-sn-item-no-hover-effect");
}
- async handleOverflowItemClick(e: CustomEvent<NavigationMenuClickEventDetail>) {
+ handleOverflowItemClick(e: CustomEvent<NavigationMenuClickEventDetail>) {
const associatedItem = e.detail?.item.associatedItem;
associatedItem.fireEvent("click");
@@ -309,7 +304,6 @@ class SideNavigation extends UI5Element {
this._selectItem(associatedItem);
this.closeMenu();
- await renderFinished();
// When subitem is selected in collapsed mode parent element should be focused
if (associatedItem.nodeName.toLowerCase() === "ui5-side-navigation-sub-item") {
@@ -322,42 +316,42 @@ class SideNavigation extends UI5Element {
}
}
- async getOverflowPopover() {
- return (await this.getStaticAreaItemDomRef())!.querySelector<NavigationMenu>(".ui5-side-navigation-overflow-menu")!;
+ getOverflowPopover() {
+ return this.shadowRoot!.querySelector<NavigationMenu>(".ui5-side-navigation-overflow-menu")!;
}
- async getPicker() {
- return (await this.getStaticAreaItemDomRef())!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ getPicker() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
- async openPicker(opener: HTMLElement) {
+ openPicker(opener: HTMLElement) {
opener.classList.add("ui5-sn-item-active");
- const responsivePopover = await this.getPicker();
+ const responsivePopover = this.getPicker();
responsivePopover.opener = opener;
responsivePopover.showAt(opener);
}
- async openOverflowMenu(opener: HTMLElement) {
+ openOverflowMenu(opener: HTMLElement) {
opener.classList.add("ui5-sn-item-active");
- const menu = await this.getOverflowPopover();
+ const menu = this.getOverflowPopover();
menu.opener = opener;
menu.showAt(opener);
}
- async closePicker() {
- const responsivePopover = await this.getPicker();
+ closePicker() {
+ const responsivePopover = this.getPicker();
responsivePopover.close();
}
- async closeMenu() {
- const menu = await this.getOverflowPopover();
+ closeMenu() {
+ const menu = this.getOverflowPopover();
menu.close();
}
- async getPickerTree() {
- const picker = await this.getPicker();
+ getPickerTree() {
+ const picker = this.getPicker();
return picker.querySelector<SideNavigation>("[ui5-side-navigation]")!;
}
diff --git a/packages/fiori/src/SideNavigationPopover.hbs b/packages/fiori/src/SideNavigationPopover.hbs
index ab3e1842dc53..88bb1aae407b 100644
--- a/packages/fiori/src/SideNavigationPopover.hbs
+++ b/packages/fiori/src/SideNavigationPopover.hbs
@@ -39,6 +39,7 @@
@ui5-before-open="{{_onBeforePopoverOpen}}"
@ui5-before-close="{{_onBeforePopoverClose}}"
>
+ {{#if _popoverContents.item}}
<span id="{{_id}}-sideNavigationPopoverText" class="ui5-hidden-text">{{accSideNavigationPopoverHiddenText}}</span>
<ui5-side-navigation
in-popover
@@ -70,5 +71,6 @@
{{/each}}
</ui5-side-navigation-item>
</ui5-side-navigation>
+ {{/if}}
</ui5-responsive-popover>
{{/if}}
\ No newline at end of file
diff --git a/packages/fiori/src/Wizard.hbs b/packages/fiori/src/Wizard.hbs
index aa9f5c4e6b0a..8e54f721cef4 100644
--- a/packages/fiori/src/Wizard.hbs
+++ b/packages/fiori/src/Wizard.hbs
@@ -44,3 +44,5 @@
{{/each}}
</div>
</div>
+
+{{>include "./WizardPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/fiori/src/Wizard.ts b/packages/fiori/src/Wizard.ts
index 814066cbeaba..656c3571da39 100644
--- a/packages/fiori/src/Wizard.ts
+++ b/packages/fiori/src/Wizard.ts
@@ -41,7 +41,6 @@ import WizardStep from "./WizardStep.js";
// Template and Styles
import WizardTemplate from "./generated/templates/WizardTemplate.lit.js";
-import WizardPopoverTemplate from "./generated/templates/WizardPopoverTemplate.lit.js";
import WizardCss from "./generated/themes/Wizard.css.js";
import WizardPopoverCss from "./generated/themes/WizardPopover.css.js";
@@ -192,10 +191,9 @@ type StepInfo = {
styles: [
browserScrollbarCSS,
WizardCss,
+ WizardPopoverCss,
],
- staticAreaStyles: WizardPopoverCss,
template: WizardTemplate,
- staticAreaTemplate: WizardPopoverTemplate,
dependencies: [
WizardTab,
WizardStep,
@@ -622,7 +620,7 @@ class Wizard extends UI5Element {
return selectedStep.getAttribute(EXPANDED_STEP) === "false" && selectedStep.getAttribute(AFTER_EXPANDED_STEP) === "true" && (iStepNumber + 1 < this.steps.length);
}
- async _showPopover(oDomTarget: WizardTab, isAtStart: boolean) {
+ _showPopover(oDomTarget: WizardTab, isAtStart: boolean) {
const tabs = Array.from(this.stepsInHeaderDOM);
this._groupedTabs = [];
@@ -633,11 +631,11 @@ class Wizard extends UI5Element {
this._groupedTabs.push(tabs[i]);
}
- const responsivePopover = await this._respPopover();
+ const responsivePopover = this._respPopover();
responsivePopover.showAt(oDomTarget);
}
- async _onGroupedTabClick(e: MouseEvent) {
+ _onGroupedTabClick(e: MouseEvent) {
const eTarget = e.target as WizardTab;
if (this._isGroupAtStart(eTarget)) {
@@ -662,14 +660,13 @@ class Wizard extends UI5Element {
tabs[newlySelectedIndex].focus();
}
- async _closeRespPopover() {
- const responsivePopover = await this._respPopover();
+ _closeRespPopover() {
+ const responsivePopover = this._respPopover();
responsivePopover && responsivePopover.close();
}
- async _respPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>(`.ui5-wizard-responsive-popover`)!;
+ _respPopover() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>(`.ui5-wizard-responsive-popover`)!;
}
/**
diff --git a/packages/fiori/src/WizardPopover.hbs b/packages/fiori/src/WizardPopover.hbs
index efeffb96861a..b14a216ba6dd 100644
--- a/packages/fiori/src/WizardPopover.hbs
+++ b/packages/fiori/src/WizardPopover.hbs
@@ -3,7 +3,6 @@
placement="Bottom"
aria-label="{{actionSheetStepsText}}"
class="{{classes.popover}}"
- @ui5-after-close={{_afterClosePopover}}
content-only-on-desktop
prevent-focus-restore
_hide-header
diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js
index 25722bbc6444..1e7c508bf372 100644
--- a/packages/fiori/test/specs/ShellBar.spec.js
+++ b/packages/fiori/test/specs/ShellBar.spec.js
@@ -2,8 +2,7 @@ import { assert } from "chai";
const HANDLE_RESIZE_DEBOUNCE_RATE_WAIT = 250; // ms
const getOverflowPopover = async id => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName(`#${id}`);
- return browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+ return browser.$(`#${id}`).shadow$(".ui5-shellbar-overflow-popover");
}
const getOverflowChildProp = async (id, pos, prop) => {
@@ -67,8 +66,7 @@ describe("Component Behavior", () => {
describe("ui5-shellbar menu", () => {
it("tests prevents close on content click", async () => {
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
+ const menuPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-menu-popover");
const firstMenuItem = await menuPopover.$("ui5-list > ui5-li");
const checkBox = await browser.$("#checkKeepPopoverOpen");
@@ -82,8 +80,7 @@ describe("Component Behavior", () => {
it("tests close on content click", async () => {
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
+ const menuPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-menu-popover");
const firstMenuItem = await menuPopover.$("ui5-list > ui5-li");
const checkBox = await browser.$("#checkKeepPopoverOpen");
@@ -258,8 +255,7 @@ describe("Component Behavior", () => {
setTimeout(async () => {
const shellbar = await browser.$("#shellbar");
const productSwitchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar")
- const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+ const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
assert.strictEqual(await shellbar.getProperty("breakpointSize"), "M", "M Breakpoint class should be set");
@@ -276,8 +272,7 @@ describe("Component Behavior", () => {
setTimeout(async () => {
const shellbar = await browser.$("#shellbar");
const productSwitchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar")
- const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+ const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
const notificationsIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-bell-button");
assert.strictEqual(await shellbar.getProperty("breakpointSize"), "M", "M Breakpoint class should be set");
@@ -315,8 +310,7 @@ describe("Component Behavior", () => {
const notificationsIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-bell-button");
const profileIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-image-button");
const productSwitchIcon = await browser.$("#shellbar").shadow$(".ui5-shellbar-button-product-switch");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar")
- const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+ const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
const listItemsCount = await overflowPopover.getHTML().split("</ui5-li>").length - 1;
assert.strictEqual(await shellbar.getProperty("breakpointSize"), "S", "S Breakpoint class should be set");
@@ -342,8 +336,7 @@ describe("Component Behavior", () => {
it("tests opening of menu", async () => {
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
+ const menuPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-menu-popover");
await primaryTitle.click();
assert.ok(await menuPopover.isDisplayedInViewport(), "Menu should be shown");
@@ -415,8 +408,8 @@ describe("Component Behavior", () => {
it("tests menuItemClick event", async () => {
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
+
+ const menuPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-menu-popover");
const firstMenuItem = await menuPopover.$("ui5-list > ui5-li");
const secondMenuItem = await menuPopover.$("ui5-list > ui5-li:nth-child(2)");
const input = await browser.$("#press-input");
@@ -461,8 +454,8 @@ describe("Component Behavior", () => {
it("tests opening of menu", async () => {
const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover");
+
+ const menuPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-menu-popover");
await primaryTitle.click();
assert.ok(await menuPopover.isDisplayedInViewport(), "Menu should be shown");
@@ -470,8 +463,8 @@ describe("Component Behavior", () => {
it("tests notificationsClick event", async () => {
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+
+ const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
const notificationListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(5)");
const input = await browser.$("#press-input");
@@ -492,8 +485,8 @@ describe("Component Behavior", () => {
it("tests productSwitchClick event", async () => {
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+
+ const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(6)");
const input = await browser.$("#press-input");
@@ -505,8 +498,8 @@ describe("Component Behavior", () => {
it("tests preventDefault of productSwitchClick event", async () => {
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+
+ const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(5)");
await overflowButton.click();
@@ -519,8 +512,8 @@ describe("Component Behavior", () => {
const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button");
const searchField = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-full-width-wrapper");
const cancelButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar");
- const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover");
+
+ const overflowPopover = await browser.$(`#shellbar`).shadow$(".ui5-shellbar-overflow-popover");
const searchListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(1)");
assert.notOk(await searchField.isDisplayed(), "Search is hidden by default");
diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js
index 60f6733cfcb7..bc77ae414b10 100644
--- a/packages/fiori/test/specs/SideNavigation.spec.js
+++ b/packages/fiori/test/specs/SideNavigation.spec.js
@@ -1,22 +1,19 @@
import { assert } from "chai";
async function getTreeItemsInPopover() {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#sn1");
- const items = await browser.$$(`>>>.${staticAreaItemClassName} [ui5-side-navigation-item], .${staticAreaItemClassName} [ui5-side-navigation-sub-item]`);
+ const items = await browser.$$(`>>>#sn1 [ui5-side-navigation-item], #sn1 [ui5-side-navigation-sub-item]`);
return items;
}
async function getRenderedTreeItemsInPopover() {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#sn1");
- const items = await browser.$$(`>>>.${staticAreaItemClassName} .ui5-sn-item`);
+ const items = await browser.$$(`>>>#sn1 .ui5-sn-item`);
return items;
}
async function getRootItemInPopover() {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#sn1");
- const rootItem = await browser.$(`>>>.${staticAreaItemClassName} ui5-responsive-popover .ui5-sn-root`);
+ const rootItem = await browser.$(`>>>#sn1 ui5-responsive-popover .ui5-sn-root`);
return rootItem;
}
@@ -98,43 +95,55 @@ describe("Component Behavior", () => {
});
it("Tests tooltips when expanded", async () => {
- const items = await browser.$$(">>>#sn1 .ui5-sn-item");
+ const itemsTitles = await browser.executeAsync(function(done) {
+ const result = [...document.querySelectorAll("#sn1 ui5-side-navigation-item,ui5-side-navigation-sub-item")].map(el => el.shadowRoot.querySelector(".ui5-sn-item").title);
+ done(result);
+ });
// items
- assert.strictEqual(await items[0].getAttribute("title"), await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item");
- assert.notOk(await items[1].getAttribute("title"), "No tooltip");
+ assert.strictEqual(itemsTitles[0], await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item");
+ assert.notOk(itemsTitles[1], "No tooltip");
// sub items
- assert.strictEqual(await items[2].getAttribute("title"), await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item");
- assert.notOk(await items[3].getAttribute("title"), "No tooltip");
+ assert.strictEqual(itemsTitles[2], await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item");
+ assert.notOk(itemsTitles[3], "No tooltip");
});
it("Tests tooltips when collapsed", async () => {
await browser.$("#sn1").setProperty("collapsed", true);
- const items = await browser.$$(">>>#sn1 .ui5-sn-item");
+ const itemsTitles = await browser.executeAsync(function(done) {
+ const result = [...document.querySelectorAll("#sn1 ui5-side-navigation-item,ui5-side-navigation-sub-item")].map(el => el.shadowRoot.querySelector(".ui5-sn-item")?.title);
+ done(result);
+ });
- assert.strictEqual(await items[1].getAttribute("title"), await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item");
- assert.notOk(await items[2].getAttribute("title"), "No tooltip");
+ assert.strictEqual(itemsTitles[0], await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item");
+ assert.notOk(itemsTitles[1], "No tooltip");
await browser.$("#item2").click();
- const popoverItems = await getRenderedTreeItemsInPopover();
+ const popoverItemsTitles = await browser.executeAsync(async function(done) {
+ const result = [...document.querySelector("#sn1").shadowRoot.querySelector("ui5-responsive-popover").querySelectorAll("ui5-side-navigation-item,ui5-side-navigation-sub-item")].map(el => el.shadowRoot.querySelector(".ui5-sn-item").title);
+ done(result);
+ });
- assert.notOk(await popoverItems[0].getAttribute("title"), "No tooltip");
- assert.strictEqual(await popoverItems[1].getAttribute("title"), await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item");
+ assert.notOk(popoverItemsTitles[0], "No tooltip");
+ assert.strictEqual(popoverItemsTitles[1], await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item");
// clean up
await browser.$("#sn1").setProperty("collapsed", false);
});
it("tests the prevention of the ui5-selection-change event", async () => {
- const items = await browser.$$(">>>#sn1 .ui5-sn-item");
+ const itemsAriaCurrent = await browser.executeAsync(function(done) {
+ const result = [...document.querySelectorAll("#sn1 ui5-side-navigation-item,ui5-side-navigation-sub-item")].map(el => el.shadowRoot.querySelector(".ui5-sn-item")?.getAttribute("aria-current"));
+ done(result);
+ });
await browser.$("#item21").click();
assert.ok(await browser.$("#item21").getProperty("selected"), "new item is selected");
- assert.strictEqual(await items[2].getAttribute("aria-current"), "page", "aria-current is set");
+ assert.strictEqual(itemsAriaCurrent[2], "page", "aria-current is set");
const selectionChangeCheckbox = await browser.$("#prevent-selection");
await selectionChangeCheckbox.click();
@@ -142,10 +151,10 @@ describe("Component Behavior", () => {
await browser.$("#item1").click();
assert.notOk(await browser.$("#item1").getProperty("selected"), "new item is not selected");
- assert.notExists(await items[0].getAttribute("aria-current"), "aria-current is not changed");
+ assert.notExists(itemsAriaCurrent[0], "aria-current is not changed");
assert.ok(await browser.$("#item21").getProperty("selected"), "initially selected item has not changed");
- assert.strictEqual(await items[2].getAttribute("aria-current"), "page", "aria-current is not changed");
+ assert.strictEqual(itemsAriaCurrent[2], "page", "aria-current is not changed");
await selectionChangeCheckbox.click();
});
diff --git a/packages/fiori/test/specs/Wizard.spec.js b/packages/fiori/test/specs/Wizard.spec.js
index 8809e7b955ae..70f030d6ad61 100644
--- a/packages/fiori/test/specs/Wizard.spec.js
+++ b/packages/fiori/test/specs/Wizard.spec.js
@@ -342,8 +342,7 @@ describe("Wizard general interaction", () => {
// act - click on the stack of steps
await groupedStep.shadow$(`.ui5-wiz-step-root`).click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#wizTest")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$("#wizTest").shadow$("ui5-responsive-popover");
// assert - the popup is open
assert.ok(await popover.isDisplayedInViewport(), "Popover is opened.");
@@ -352,8 +351,7 @@ describe("Wizard general interaction", () => {
// act - click on the disabled stack of steps
await groupedStepDisabled.shadow$(`.ui5-wiz-step-root`).click();
- const staticAreaItemClassName2 = await browser.getStaticAreaItemClassName("#wizTest2")
- const disabledPopover = await browser.$(`.${staticAreaItemClassName2}`).shadow$("ui5-responsive-popover");
+ const disabledPopover = await browser.$("#wizTest2").shadow$("ui5-responsive-popover");
// assert - the popup is open
assert.ok(await disabledPopover.isDisplayedInViewport(), "Popover is opened.");
diff --git a/packages/main/src/Breadcrumbs.hbs b/packages/main/src/Breadcrumbs.hbs
index d2d975e5b1e0..6793ede865af 100644
--- a/packages/main/src/Breadcrumbs.hbs
+++ b/packages/main/src/Breadcrumbs.hbs
@@ -34,4 +34,6 @@
</li>
{{/each}}
</ol>
-</nav>
\ No newline at end of file
+</nav>
+
+{{>include "./BreadcrumbsPopover.hbs"}}
diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts
index b56b1f1442f2..b73e3aa0b2d6 100644
--- a/packages/main/src/Breadcrumbs.ts
+++ b/packages/main/src/Breadcrumbs.ts
@@ -38,7 +38,6 @@ import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
// Templates
import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
-import BreadcrumbsPopoverTemplate from "./generated/templates/BreadcrumbsPopoverTemplate.lit.js";
// Styles
import breadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
@@ -86,9 +85,7 @@ type BreadcrumbsItemClickEventDetail = {
languageAware: true,
renderer: litRender,
template: BreadcrumbsTemplate,
- staticAreaTemplate: BreadcrumbsPopoverTemplate,
- styles: breadcrumbsCss,
- staticAreaStyles: breadcrumbsPopoverCss,
+ styles: [breadcrumbsCss, breadcrumbsPopoverCss],
dependencies: [
BreadcrumbsItem,
Link,
@@ -389,13 +386,12 @@ class Breadcrumbs extends UI5Element {
}
}
- async _respPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ _respPopover() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
- async _toggleRespPopover() {
- this.responsivePopover = await this._respPopover();
+ _toggleRespPopover() {
+ this.responsivePopover = this._respPopover();
if (this._isPickerOpen) {
this._closeRespPopover();
@@ -408,8 +404,8 @@ class Breadcrumbs extends UI5Element {
this.responsivePopover && this.responsivePopover.close();
}
- async _openRespPopover() {
- this.responsivePopover = await this._respPopover();
+ _openRespPopover() {
+ this.responsivePopover = this._respPopover();
this.responsivePopover.showAt(this._dropdownArrowLink);
}
diff --git a/packages/main/src/ColorPalette.hbs b/packages/main/src/ColorPalette.hbs
index 48f95a120a22..4d13e0dae843 100644
--- a/packages/main/src/ColorPalette.hbs
+++ b/packages/main/src/ColorPalette.hbs
@@ -6,15 +6,15 @@
>
{{#if this.showDefaultColor}}
<div class="ui5-cp-default-color-button-wrapper">
- <ui5-button
+ <ui5-button
class="ui5-cp-default-color-button"
- design="Transparent"
+ design="Transparent"
@click={{_onDefaultColorClick}}
@keydown={{_onDefaultColorKeyDown}}>{{colorPaletteDefaultColorText}}</ui5-button>
<div class="ui5-cp-separator"></div>
</div>
{{/if}}
- <div class="ui5-cp-item-container"
+ <div class="ui5-cp-item-container"
role="region"
aria-label="{{colorContainerLabel}}"
@keydown="{{_onColorContainerKeyDown}}"
@@ -50,3 +50,5 @@
</div>
{{/if}}
</div>
+
+{{>include "./ColorPaletteDialog.hbs"}}
diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts
index 5d1b542610ce..29b1b178962a 100644
--- a/packages/main/src/ColorPalette.ts
+++ b/packages/main/src/ColorPalette.ts
@@ -20,7 +20,6 @@ import {
} from "@ui5/webcomponents-base/dist/Keys.js";
import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
import ColorPaletteTemplate from "./generated/templates/ColorPaletteTemplate.lit.js";
-import ColorPaletteDialogTemplate from "./generated/templates/ColorPaletteDialogTemplate.lit.js";
import ColorPaletteItem from "./ColorPaletteItem.js";
import Button from "./Button.js";
import type Dialog from "./Dialog.js";
@@ -35,7 +34,7 @@ import {
// Styles
import ColorPaletteCss from "./generated/themes/ColorPalette.css.js";
-import ColorPaletteStaticAreaCss from "./generated/themes/ColorPaletteStaticArea.css.js";
+import ColorPaletteDialogCss from "./generated/themes/ColorPaletteDialog.css.js";
/**
* Interface for components that may be used inside a `ui5-color-palette` or `ui5-color-palette-popover`
@@ -75,9 +74,7 @@ type ColorPaletteItemClickEventDetail = {
tag: "ui5-color-palette",
renderer: litRender,
template: ColorPaletteTemplate,
- staticAreaTemplate: ColorPaletteDialogTemplate,
- styles: ColorPaletteCss,
- staticAreaStyles: ColorPaletteStaticAreaCss,
+ styles: [ColorPaletteCss, ColorPaletteDialogCss],
get dependencies() {
const colorPaletteMoreColors = getFeature<typeof ColorPaletteMoreColors>("ColorPaletteMoreColors");
return ([ColorPaletteItem, Button] as Array<typeof UI5Element>).concat(colorPaletteMoreColors ? colorPaletteMoreColors.dependencies : []);
@@ -175,7 +172,7 @@ class ColorPalette extends UI5Element {
_itemNavigation: ItemNavigation;
_itemNavigationRecentColors: ItemNavigation;
_recentColors: Array<string>;
- moreColorsFeature?: ColorPaletteMoreColors;
+ moreColorsFeature: ColorPaletteMoreColors | Record<string, any> = {};
static i18nBundle: I18nBundle;
@@ -403,19 +400,19 @@ class ColorPalette extends UI5Element {
return this.colorPaletteNavigationElements[0];
}
- async _chooseCustomColor() {
- const colorPicker = await this.getColorPicker();
+ _chooseCustomColor() {
+ const colorPicker = this.getColorPicker();
this._setColor(colorPicker.value);
this._closeDialog();
}
- async _closeDialog() {
- const dialog = await this._getDialog();
+ _closeDialog() {
+ const dialog = this._getDialog();
dialog.close();
}
- async _openMoreColorsDialog() {
- const dialog = await this._getDialog();
+ _openMoreColorsDialog() {
+ const dialog = this._getDialog();
dialog.show();
}
@@ -512,13 +509,12 @@ class ColorPalette extends UI5Element {
};
}
- async _getDialog() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Dialog>("[ui5-dialog]")!;
+ _getDialog() {
+ return this.shadowRoot!.querySelector<Dialog>("[ui5-dialog]")!;
}
- async getColorPicker() {
- const dialog = await this._getDialog();
+ getColorPicker() {
+ const dialog = this._getDialog();
return dialog.content[0].querySelector<ColorPicker>("[ui5-color-picker]")!;
}
}
diff --git a/packages/main/src/ColorPaletteDialog.hbs b/packages/main/src/ColorPaletteDialog.hbs
index 92de781bd701..d4c61ed69d11 100644
--- a/packages/main/src/ColorPaletteDialog.hbs
+++ b/packages/main/src/ColorPaletteDialog.hbs
@@ -1,3 +1,4 @@
+{{#if _showMoreColors}}
<ui5-dialog
header-text="{{moreColorsFeature.colorPaletteDialogTitle}}"
>
@@ -16,3 +17,4 @@
>{{moreColorsFeature.colorPaletteCancelButton}}</ui5-button>
</div>
</ui5-dialog>
+{{/if}}
diff --git a/packages/main/src/ComboBox.hbs b/packages/main/src/ComboBox.hbs
index 16f71b45d11b..90b91b0fed68 100644
--- a/packages/main/src/ComboBox.hbs
+++ b/packages/main/src/ComboBox.hbs
@@ -49,3 +49,5 @@
></ui5-icon>
{{/unless}}
</div>
+
+{{>include "./ComboBoxPopover.hbs"}}
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 2cdea49b5ff9..941b478a001d 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -1,4 +1,5 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -57,7 +58,6 @@ import {
// Templates
import ComboBoxTemplate from "./generated/templates/ComboBoxTemplate.lit.js";
-import ComboBoxPopoverTemplate from "./generated/templates/ComboBoxPopoverTemplate.lit.js";
// Styles
import ComboBoxCss from "./generated/themes/ComboBox.css.js";
@@ -157,15 +157,14 @@ type ComboBoxSelectionChangeEventDetail = {
tag: "ui5-combobox",
languageAware: true,
renderer: litRender,
- styles: ComboBoxCss,
- staticAreaStyles: [
+ styles: [
+ ComboBoxCss,
ResponsivePopoverCommonCss,
ValueStateMessageCss,
ComboBoxPopoverCss,
SuggestionsCss,
],
template: ComboBoxTemplate,
- staticAreaTemplate: ComboBoxPopoverTemplate,
dependencies: [
ComboBoxItem,
Icon,
@@ -495,7 +494,8 @@ class ComboBox extends UI5Element {
return;
}
- if (!(this.shadowRoot!.contains(toBeFocused)) && (this.staticAreaItem !== e.relatedTarget)) {
+ const popover = this.shadowRoot!.querySelector("[ui5-responsive-popover]");
+ if (!(this.getDomRef()!.contains(toBeFocused)) && (popover !== e.relatedTarget)) {
this.focused = false;
!isPhone() && this._closeRespPopover(e);
}
@@ -555,8 +555,8 @@ class ComboBox extends UI5Element {
}
async _getValueStatePopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- const popover: Popover = staticAreaItem!.querySelector<Popover>(".ui5-valuestatemessage-popover")!;
+ await renderFinished();
+ const popover: Popover = this.shadowRoot!.querySelector<Popover>(".ui5-valuestatemessage-popover")!;
// backward compatibility
// rework all methods to work with async getters
@@ -1119,8 +1119,8 @@ class ComboBox extends UI5Element {
}
async _getPicker() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- const picker = staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ await renderFinished();
+ const picker = this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
// backward compatibility
// rework all methods to work with async getters
@@ -1243,6 +1243,7 @@ class ComboBox extends UI5Element {
"min-width": `${this.offsetWidth || 0}px`,
"max-width": (this.offsetWidth / remSizeInPx) > 40 ? `${this.offsetWidth}px` : "40rem",
},
+ popoverValueStateMessage: {},
};
}
diff --git a/packages/main/src/DatePicker.hbs b/packages/main/src/DatePicker.hbs
index 2586eda90243..3b56f3664917 100644
--- a/packages/main/src/DatePicker.hbs
+++ b/packages/main/src/DatePicker.hbs
@@ -1,45 +1,2 @@
-<div
- class="ui5-date-picker-root"
- style="{{styles.main}}"
->
- {{! INPUT}}
- <ui5-input
- id="{{_id}}-inner"
- class="ui5-date-picker-input"
- placeholder="{{_placeholder}}"
- type="{{type}}"
- value="{{value}}"
- ?disabled="{{disabled}}"
- ?required="{{required}}"
- ?readonly="{{readonly}}"
- value-state="{{valueState}}"
- data-sap-focus-ref
- ._inputAccInfo ="{{accInfo}}"
- @ui5-change="{{_onInputChange}}"
- @ui5-input="{{_onInputInput}}"
- @ui5-submit="{{_onInputSubmit}}"
- @keydown="{{_onkeydown}}"
- >
-
- {{#if valueStateMessage.length}}
- <slot name="valueStateMessage" slot="valueStateMessage"></slot>
- {{/if}}
-
- {{#unless readonly}}
- <ui5-icon
- slot="icon"
- name="{{openIconName}}"
- tabindex="-1"
- accessible-name="{{openIconTitle}}"
- accessible-role="button"
- aria-hidden="{{_ariaHidden}}"
- show-tooltip
- @click="{{togglePicker}}"
- input-icon
- ?pressed="{{_isPickerOpen}}"
- ></ui5-icon>
- {{/unless}}
- </ui5-input>
-
- <slot name="formSupport"></slot>
-</div>
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DatePickerPopover.hbs"}}
diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts
index 2468e14a5c1c..2931299c9609 100644
--- a/packages/main/src/DatePicker.ts
+++ b/packages/main/src/DatePicker.ts
@@ -44,7 +44,6 @@ import CalendarDateComponent from "./CalendarDate.js";
import Input from "./Input.js";
import InputType from "./types/InputType.js";
import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
-import DatePickerPopoverTemplate from "./generated/templates/DatePickerPopoverTemplate.lit.js";
// default calendar for bundling
import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js";
@@ -154,9 +153,8 @@ type DatePickerInputEventDetail = {
tag: "ui5-date-picker",
languageAware: true,
template: DatePickerTemplate,
- staticAreaTemplate: DatePickerPopoverTemplate,
- styles: datePickerCss,
- staticAreaStyles: [
+ styles: [
+ datePickerCss,
ResponsivePopoverCommonCss,
datePickerPopoverCss,
],
@@ -732,9 +730,8 @@ class DatePicker extends DateComponentBase implements IFormElement {
return isDesktop();
}
- async _respPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ _respPopover() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
_canOpenPicker() {
@@ -812,9 +809,9 @@ class DatePicker extends DateComponentBase implements IFormElement {
async openPicker(): Promise<void> {
this._isPickerOpen = true;
this._calendarCurrentPicker = this.firstPicker;
- this.responsivePopover = await this._respPopover();
+ this.responsivePopover = this._respPopover();
- this.responsivePopover.showAt(this);
+ await this.responsivePopover.showAt(this);
}
togglePicker() {
diff --git a/packages/main/src/DatePickerInput.hbs b/packages/main/src/DatePickerInput.hbs
new file mode 100644
index 000000000000..fe469253b92c
--- /dev/null
+++ b/packages/main/src/DatePickerInput.hbs
@@ -0,0 +1,45 @@
+<div
+ class="ui5-date-picker-root"
+ style="{{styles.main}}"
+>
+ {{! INPUT}}
+ <ui5-input
+ id="{{_id}}-inner"
+ class="ui5-date-picker-input"
+ placeholder="{{_placeholder}}"
+ type="{{type}}"
+ value="{{value}}"
+ ?disabled="{{disabled}}"
+ ?required="{{required}}"
+ ?readonly="{{readonly}}"
+ value-state="{{valueState}}"
+ data-sap-focus-ref
+ ._inputAccInfo ="{{accInfo}}"
+ @ui5-change="{{_onInputChange}}"
+ @ui5-input="{{_onInputInput}}"
+ @ui5-submit="{{_onInputSubmit}}"
+ @keydown="{{_onkeydown}}"
+ >
+
+ {{#if valueStateMessage.length}}
+ <slot name="valueStateMessage" slot="valueStateMessage"></slot>
+ {{/if}}
+
+ {{#unless readonly}}
+ <ui5-icon
+ slot="icon"
+ name="{{openIconName}}"
+ tabindex="-1"
+ accessible-name="{{openIconTitle}}"
+ accessible-role="button"
+ aria-hidden="{{_ariaHidden}}"
+ show-tooltip
+ @click="{{togglePicker}}"
+ input-icon
+ ?pressed="{{_isPickerOpen}}"
+ ></ui5-icon>
+ {{/unless}}
+ </ui5-input>
+
+ <slot name="formSupport"></slot>
+</div>
\ No newline at end of file
diff --git a/packages/main/src/DateTimePicker.hbs b/packages/main/src/DateTimePicker.hbs
new file mode 100644
index 000000000000..4f8aafad58b3
--- /dev/null
+++ b/packages/main/src/DateTimePicker.hbs
@@ -0,0 +1,2 @@
+{{>include "./DatePickerInput.hbs"}}
+{{>include "./DateTimePickerPopover.hbs"}}
diff --git a/packages/main/src/DateTimePicker.ts b/packages/main/src/DateTimePicker.ts
index 51d495f05a3f..1e5d2ba4c700 100644
--- a/packages/main/src/DateTimePicker.ts
+++ b/packages/main/src/DateTimePicker.ts
@@ -31,7 +31,7 @@ import {
} from "./generated/i18n/i18n-defaults.js";
// Template
-import DateTimePickerPopoverTemplate from "./generated/templates/DateTimePickerPopoverTemplate.lit.js";
+import DateTimePickerTemplate from "./generated/templates/DateTimePickerTemplate.lit.js";
// Styles
import DateTimePickerCss from "./generated/themes/DateTimePicker.css.js";
@@ -110,13 +110,10 @@ type PreviewValues = {
*/
@customElement({
tag: "ui5-datetime-picker",
- staticAreaTemplate: DateTimePickerPopoverTemplate,
+ template: DateTimePickerTemplate,
styles: [
- DateTimePicker.styles,
+ DatePicker.styles,
DateTimePickerCss,
- ],
- staticAreaStyles: [
- DatePicker.staticAreaStyles,
DateTimePickerPopoverCss,
],
dependencies: [
@@ -382,9 +379,8 @@ class DateTimePicker extends DatePicker {
this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]);
}
- async getPicker() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ getPicker() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
getSelectedDateTime() {
diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts
index 8fc0847f418b..6b5963833dc8 100644
--- a/packages/main/src/Dialog.ts
+++ b/packages/main/src/Dialog.ts
@@ -116,6 +116,7 @@ const ICON_PER_STATE: Record<ValueStateWithIcon, string> = {
tag: "ui5-dialog",
template: DialogTemplate,
styles: [
+ Popup.styles,
browserScrollbarCSS,
PopupsCommonCss,
dialogCSS,
@@ -314,10 +315,6 @@ class Dialog extends Popup {
return Dialog.i18nBundle.getText(DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE);
}
- get _displayProp() {
- return "flex";
- }
-
/**
* Determines if the header should be shown.
*/
diff --git a/packages/main/src/FileUploader.hbs b/packages/main/src/FileUploader.hbs
index 9ef11d08fa80..f8124e021ae7 100644
--- a/packages/main/src/FileUploader.hbs
+++ b/packages/main/src/FileUploader.hbs
@@ -1,4 +1,3 @@
-
<div class="ui5-file-uploader-root"
@mouseover="{{_onmouseover}}"
@mouseout="{{_onmouseout}}"
@@ -38,3 +37,5 @@
</slot>
{{/if}}
</div>
+
+{{>include "./FileUploaderPopover.hbs"}}
diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts
index 8bad38e4d068..93c358d80db4 100644
--- a/packages/main/src/FileUploader.ts
+++ b/packages/main/src/FileUploader.ts
@@ -25,7 +25,6 @@ import Icon from "./Icon.js";
// Template
import FileUploaderTemplate from "./generated/templates/FileUploaderTemplate.lit.js";
-import FileUploaderPopoverTemplate from "./generated/templates/FileUploaderPopoverTemplate.lit.js";
// Styles
import FileUploaderCss from "./generated/themes/FileUploader.css.js";
@@ -66,10 +65,12 @@ type FileUploaderChangeEventDetail = {
tag: "ui5-file-uploader",
languageAware: true,
renderer: litRender,
- styles: FileUploaderCss,
+ styles: [
+ FileUploaderCss,
+ ResponsivePopoverCommonCss,
+ ValueStateMessageCss,
+ ],
template: FileUploaderTemplate,
- staticAreaTemplate: FileUploaderPopoverTemplate,
- staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss],
dependencies: [
Input,
Popover,
@@ -339,25 +340,24 @@ class FileUploader extends UI5Element implements IFormElement {
}
}
- async openValueStatePopover() {
- const popover = await this._getPopover();
+ openValueStatePopover() {
+ const popover = this._getPopover();
if (popover) {
popover.showAt(this);
}
}
- async closeValueStatePopover() {
- const popover = await this._getPopover();
+ closeValueStatePopover() {
+ const popover = this._getPopover();
if (popover) {
popover.close();
}
}
- async _getPopover(): Promise<Popover> {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>(".ui5-valuestatemessage-popover")!;
+ _getPopover(): Popover {
+ return this.shadowRoot!.querySelector<Popover>(".ui5-valuestatemessage-popover")!;
}
/**
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
index 194f320f98e2..32719e6f71f8 100644
--- a/packages/main/src/Input.hbs
+++ b/packages/main/src/Input.hbs
@@ -77,4 +77,6 @@
{{#*inline "preContent"}}{{/inline}}
-{{#*inline "postContent"}}{{/inline}}
\ No newline at end of file
+{{#*inline "postContent"}}{{/inline}}
+
+{{>include "./InputPopover.hbs"}}
diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts
index 58ac008a5bd9..7a2909f2e064 100644
--- a/packages/main/src/Input.ts
+++ b/packages/main/src/Input.ts
@@ -1,4 +1,5 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -60,7 +61,6 @@ import type ListItemType from "./types/ListItemType.js";
import PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
// Templates
import InputTemplate from "./generated/templates/InputTemplate.lit.js";
-import InputPopoverTemplate from "./generated/templates/InputPopoverTemplate.lit.js";
import { StartsWith } from "./Filters.js";
import {
@@ -196,9 +196,12 @@ type InputSuggestionScrollEventDetail = {
languageAware: true,
renderer: litRender,
template: InputTemplate,
- staticAreaTemplate: InputPopoverTemplate,
- styles: inputStyles,
- staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss],
+ styles: [
+ inputStyles,
+ ResponsivePopoverCommonCss,
+ ValueStateMessageCss,
+ SuggestionsCss,
+ ],
get dependencies() {
const Suggestions = getFeature<typeof InputSuggestions>("InputSuggestions");
return ([Popover, Icon] as Array<typeof UI5Element>).concat(Suggestions ? Suggestions.dependencies : []);
@@ -695,7 +698,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
const innerInput = this.getInputDOMRefSync()!;
if (this.Suggestions && this.showSuggestions) {
- this.Suggestions.toggle(this.open, {
+ await this.Suggestions.toggle(this.open, {
preventFocusRestore: true,
});
@@ -1186,8 +1189,8 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
}
async _getPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>("[ui5-popover]")!;
+ await renderFinished();
+ return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
}
/**
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
index e4c5150fb468..0fa162c0ebf8 100644
--- a/packages/main/src/Menu.ts
+++ b/packages/main/src/Menu.ts
@@ -1,4 +1,5 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
@@ -30,14 +31,14 @@ import BusyIndicator from "./BusyIndicator.js";
import type MenuItem from "./MenuItem.js";
import PopoverPlacement from "./types/PopoverPlacement.js";
import type { ListItemClickEventDetail } from "./List.js";
-import staticAreaMenuTemplate from "./generated/templates/MenuTemplate.lit.js";
+import menuTemplate from "./generated/templates/MenuTemplate.lit.js";
import {
MENU_BACK_BUTTON_ARIA_LABEL,
MENU_CLOSE_BUTTON_ARIA_LABEL,
} from "./generated/i18n/i18n-defaults.js";
// Styles
-import staticAreaMenuCss from "./generated/themes/Menu.css.js";
+import menuCss from "./generated/themes/Menu.css.js";
type CurrentItem = {
item: MenuItem,
@@ -98,8 +99,8 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };
@customElement({
tag: "ui5-menu",
renderer: litRender,
- staticAreaStyles: staticAreaMenuCss,
- staticAreaTemplate: staticAreaMenuTemplate,
+ styles: menuCss,
+ template: menuTemplate,
dependencies: [
ResponsivePopover,
Button,
@@ -431,8 +432,8 @@ class Menu extends UI5Element {
async _createPopover() {
if (!this._popover) {
- const staticAreaItemDomRef = await this.getStaticAreaItemDomRef();
- this._popover = staticAreaItemDomRef!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ await renderFinished();
+ this._popover = this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
return this._popover;
}
@@ -476,7 +477,7 @@ class Menu extends UI5Element {
subMenu.busyDelay = item.busyDelay;
const fragment = this._clonedItemsFragment(item);
subMenu.appendChild(fragment);
- this.staticAreaItem!.shadowRoot!.querySelector(".ui5-menu-submenus")!.appendChild(subMenu);
+ this.shadowRoot!.querySelector(".ui5-menu-submenus")!.appendChild(subMenu);
item._subMenu = subMenu;
}
diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs
index 004c6709a823..f75fe569e0ac 100644
--- a/packages/main/src/MultiComboBox.hbs
+++ b/packages/main/src/MultiComboBox.hbs
@@ -84,3 +84,5 @@
></ui5-icon>
{{/unless}}
</div>
+
+{{>include "./MultiComboBoxPopover.hbs"}}
diff --git a/packages/main/src/MultiComboBox.ts b/packages/main/src/MultiComboBox.ts
index f7fdaf6ae8f4..ba9dcef71b98 100644
--- a/packages/main/src/MultiComboBox.ts
+++ b/packages/main/src/MultiComboBox.ts
@@ -93,7 +93,6 @@ import {
// Templates
import MultiComboBoxTemplate from "./generated/templates/MultiComboBoxTemplate.lit.js";
-import MultiComboBoxPopoverTemplate from "./generated/templates/MultiComboBoxPopoverTemplate.lit.js";
// Styles
import multiCbxStyles from "./generated/themes/MultiComboBox.css.js";
@@ -178,9 +177,13 @@ type MultiComboboxItemWithSelection = {
languageAware: true,
renderer: litRender,
template: MultiComboBoxTemplate,
- staticAreaTemplate: MultiComboBoxPopoverTemplate,
- styles: multiCbxStyles,
- staticAreaStyles: [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, MultiComboBoxPopover],
+ styles: [
+ multiCbxStyles,
+ ResponsivePopoverCommonCss,
+ ValueStateMessageCss,
+ SuggestionsCss,
+ MultiComboBoxPopover,
+ ],
dependencies: [
MultiComboBoxItem,
MultiComboBoxGroupItem,
@@ -446,7 +449,6 @@ class MultiComboBox extends UI5Element {
_shouldFilterItems?: boolean;
_showMorePressed?: boolean;
_clearingValue?: boolean;
- allItemsPopover?: ResponsivePopover;
valueStateHeader?: HTMLElement;
list?: List;
_shouldAutocomplete?: boolean;
@@ -454,7 +456,7 @@ class MultiComboBox extends UI5Element {
_isOpenedByKeyboard?: boolean;
_itemToFocus?: IMultiComboBoxItem;
_itemsBeforeOpen: Array<MultiComboboxItemWithSelection>;
- selectedItems?: Array<IMultiComboBoxItem>;
+ selectedItems: Array<IMultiComboBoxItem>;
FormSupport?: typeof FormSupportT;
static i18nBundle: I18nBundle;
@@ -462,6 +464,7 @@ class MultiComboBox extends UI5Element {
super();
this._filteredItems = [];
+ this.selectedItems = [];
this._previouslySelectedItems = [];
this.selectedValues = [];
this._itemsBeforeOpen = [];
@@ -488,6 +491,10 @@ class MultiComboBox extends UI5Element {
}
_handleMobileInput(e: CustomEvent<InputEventDetail>) {
+ if (!this._getRespPopover().opened) {
+ return;
+ }
+
const target = e.target as Input;
const value = target.value;
@@ -511,7 +518,7 @@ class MultiComboBox extends UI5Element {
}
}
- async _mobileInputChange(e:CustomEvent) {
+ _mobileInputChange(e:CustomEvent) {
this._inputChange.call(this);
const { value } = (e.target as Input);
const matchingItem = this.items.find(item => item.text === value);
@@ -525,19 +532,19 @@ class MultiComboBox extends UI5Element {
if (!changePrevented) {
matchingItem.selected = !initiallySelected;
- (await this._getResponsivePopover()).close();
+ this._getResponsivePopover().close();
this.value = "";
}
}
_togglePopover() {
this._tokenizer.closeMorePopover();
- this.allItemsPopover?.toggle(this);
+ this._getRespPopover().toggle(this);
}
togglePopoverByDropdownIcon() {
this._shouldFilterItems = false;
- this.allItemsPopover?.toggle(this);
+ this._getRespPopover().toggle(this);
this._tokenizer.closeMorePopover();
}
@@ -614,9 +621,9 @@ class MultiComboBox extends UI5Element {
if (!isPhone()) {
if (filteredItems.length === 0) {
- this.allItemsPopover?.close();
+ this._getRespPopover().close();
} else {
- this.allItemsPopover?.showAt(this);
+ this._getRespPopover().showAt(this);
}
}
@@ -666,11 +673,8 @@ class MultiComboBox extends UI5Element {
const lastTokenBeingDeleted = tokensCount - 1 === 0 && this._deleting;
const allTokensAreBeingDeleted = selectedTokens === tokensCount && this._deleting;
const relatedTarget: HTMLElement | undefined = e.relatedTarget as HTMLElement;
- const isFocusingPopover = this.staticAreaItem === relatedTarget;
- const isFocusingInput = this._inputDom === relatedTarget;
- const isFocusingMorePopover = e.relatedTarget === this._tokenizer.staticAreaItem;
- if (!relatedTarget?.hasAttribute("ui5-token") && !isFocusingPopover && !isFocusingInput && !isFocusingMorePopover) {
+ if (!this.shadowRoot?.contains(relatedTarget)) {
this._tokenizer.tokens.forEach(token => {
token.selected = false;
});
@@ -715,7 +719,7 @@ class MultiComboBox extends UI5Element {
// CTRL + Arrow Down navigation is performed by the ItemNavigation module of the List,
// here we only implement the text selection of the selected item
- if (isArrowDownCtrl && !this.allItemsPopover?.opened) {
+ if (isArrowDownCtrl && !this._getRespPopover().opened) {
setTimeout(() => this._inputDom.setSelectionRange(0, this._inputDom.value.length), 0);
}
@@ -892,7 +896,7 @@ class MultiComboBox extends UI5Element {
}
_handleTab() {
- this.allItemsPopover?.close();
+ this._getRespPopover().close();
}
_handleSelectAll() {
@@ -925,7 +929,7 @@ class MultiComboBox extends UI5Element {
if (isArrowDown || isDownCtrl(e)) {
if (this.showSelectAll && !isSelectAllFocused) {
- return ((await this._getResponsivePopover())!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
+ return (this._getResponsivePopover()!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
}
this._handleArrowDown();
@@ -965,12 +969,12 @@ class MultiComboBox extends UI5Element {
}
}
- async _onItemKeydown(e: KeyboardEvent) {
+ _onItemKeydown(e: KeyboardEvent) {
const isFirstItem = this.list?.items[0] === e.target;
const isArrowUp = isUp(e) || isUpCtrl(e);
if (this.hasValueStateMessage && !this.valueStateHeader) {
- await this._setValueStateHeader();
+ this._setValueStateHeader();
}
if (isTabNext(e) || isTabPrevious(e)) {
@@ -1016,7 +1020,7 @@ class MultiComboBox extends UI5Element {
if (isFirstItem && isArrowUp) {
if (this.showSelectAll) {
- ((await this._getResponsivePopover())!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
+ (this._getResponsivePopover()!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
} else if (this.valueStateHeader) {
this.valueStateHeader.focus();
} else {
@@ -1041,18 +1045,18 @@ class MultiComboBox extends UI5Element {
_onItemTab() {
this._inputDom.focus();
- this.allItemsPopover?.close();
+ this._getRespPopover().close();
}
- async _handleArrowNavigation(e: KeyboardEvent, isDownControl: boolean) {
+ _handleArrowNavigation(e: KeyboardEvent, isDownControl: boolean) {
const isArrowDown = isDownControl || isDown(e);
const hasSuggestions = this.items.length;
- const isOpen = this.allItemsPopover?.opened;
+ const isOpen = this._getRespPopover().opened;
e.preventDefault();
if (this.hasValueStateMessage && !this.valueStateHeader) {
- await this._setValueStateHeader();
+ this._setValueStateHeader();
}
if (isArrowDown && isOpen) {
@@ -1063,7 +1067,7 @@ class MultiComboBox extends UI5Element {
}
if (this.showSelectAll) {
- ((await this._getResponsivePopover())!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
+ (this._getResponsivePopover()!.querySelector(".ui5-mcb-select-all-checkbox") as CheckBox).focus();
return;
}
}
@@ -1078,7 +1082,7 @@ class MultiComboBox extends UI5Element {
}
async _handleArrowDown() {
- const isOpen = this.allItemsPopover?.opened;
+ const isOpen = this._getRespPopover().opened;
const firstListItem = this.list?.items[0];
if (isOpen) {
@@ -1216,7 +1220,7 @@ class MultiComboBox extends UI5Element {
}
innerInput.setSelectionRange(matchingItem.text.length, matchingItem.text.length);
- this.allItemsPopover?.close();
+ this._getRespPopover().close();
}
}
@@ -1317,7 +1321,7 @@ class MultiComboBox extends UI5Element {
} else if (this._isOpenedByKeyboard) {
this._itemToFocus?.focus();
} else {
- this.allItemsPopover?.focus();
+ this._getRespPopover().focus();
}
this._previouslySelectedItems = this._getSelectedItems();
@@ -1363,7 +1367,7 @@ class MultiComboBox extends UI5Element {
}
if (!e.detail.selectionComponentPressed && !isSpace(castedEvent) && !isSpaceCtrl(castedEvent)) {
- this.allItemsPopover?.close();
+ this._getRespPopover().close();
this.value = "";
// if the item (not checkbox) is clicked, call the selection change
@@ -1402,29 +1406,28 @@ class MultiComboBox extends UI5Element {
return changePrevented;
}
- async _getRespPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- this.allItemsPopover = staticAreaItem!.querySelector(`.ui5-multi-combobox-all-items-responsive-popover`)!;
+ _getRespPopover() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>(`.ui5-multi-combobox-all-items-responsive-popover`)!;
}
async _getList(): Promise<List> {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- this.list = staticAreaItem!.querySelector(".ui5-multi-combobox-all-items-list")!;
+ await renderFinished();
+ this.list = this.shadowRoot!.querySelector(".ui5-multi-combobox-all-items-list")!;
return this.list;
}
_click() {
if (isPhone() && !this.readonly && !this._showMorePressed && !this._deleting) {
- this.allItemsPopover?.showAt(this);
+ this._getRespPopover().showAt(this);
}
this._showMorePressed = false;
}
- async handleBeforeTokenizerPopoverOpen() {
+ handleBeforeTokenizerPopoverOpen() {
const tokens = this._tokenizer.tokens;
const hasTruncatedToken = tokens.length === 1 && tokens[0].isTruncatable;
- const popover = (await this._getResponsivePopover());
+ const popover = this._getResponsivePopover();
if (hasTruncatedToken) {
popover?.close(false, false, true);
@@ -1435,7 +1438,6 @@ class MultiComboBox extends UI5Element {
// close device's keyboard and prevent further typing
if (isPhone()) {
this._dialogInputValueState = this.valueState;
- this.blur();
}
this._toggle();
@@ -1527,7 +1529,7 @@ class MultiComboBox extends UI5Element {
}
this.items.forEach(item => {
- item._getRealDomRef = () => this.allItemsPopover!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
+ item._getRealDomRef = () => this._getRespPopover()!.querySelector(`*[data-ui5-stable=${item.stableDomRef}]`)!;
});
this.tokenizerAvailable = this._getSelectedItems().length > 0;
@@ -1536,10 +1538,9 @@ class MultiComboBox extends UI5Element {
if (!input || !value) {
return;
}
-
// Typehead causes issues on Android devices, so we disable it for now
// If there is already a selection the autocomplete has already been performed
- if (this._shouldAutocomplete && !isAndroid() && !autoCompletedChars) {
+ if (this._shouldAutocomplete && !isAndroid()) {
const item = this._getFirstMatchingItem(value);
// Keep the original typed in text intact
@@ -1555,7 +1556,7 @@ class MultiComboBox extends UI5Element {
}
async onAfterRendering() {
- await this._getRespPopover();
+ this._getRespPopover();
await this._getList();
this.toggle(this.shouldDisplayOnlyValueStateMessage);
@@ -1630,8 +1631,8 @@ class MultiComboBox extends UI5Element {
this._togglePopover();
}
- async openPopover() {
- (await this._getPopover())?.showAt(this);
+ openPopover() {
+ this._getPopover()?.showAt(this);
}
_forwardFocusToInner() {
@@ -1648,22 +1649,20 @@ class MultiComboBox extends UI5Element {
return this;
}
- async closePopover() {
- (await this._getPopover())?.close();
+ closePopover() {
+ this._getPopover()?.close();
}
- async _getPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return (staticAreaItem!.querySelector<Popover>("[ui5-popover]"))!;
+ _getPopover() {
+ return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
}
- async _getResponsivePopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ _getResponsivePopover() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
- async _setValueStateHeader() {
- const responsivePopover = await this._getResponsivePopover();
+ _setValueStateHeader() {
+ const responsivePopover = this._getResponsivePopover();
this.valueStateHeader = responsivePopover.querySelector("div.ui5-responsive-popover-header.ui5-valuestatemessage-root")!;
}
@@ -1693,7 +1692,11 @@ class MultiComboBox extends UI5Element {
}
inputFocusOut(e: FocusEvent) {
- if (!this.shadowRoot!.contains(e.relatedTarget as Node) && !this._deleting && !this._clearingValue) {
+ const responsivePopover = this._getResponsivePopover();
+ const popover = this._getPopover();
+ const focusIsGoingInPopover = [responsivePopover, popover].some(popup => popup?.contains(e.relatedTarget as Node));
+
+ if ((!this.shadowRoot!.contains(e.relatedTarget as Node) || focusIsGoingInPopover) && !this._deleting && !this._clearingValue) {
this.focused = false;
if (this._lastValue !== this.value) {
@@ -1702,7 +1705,7 @@ class MultiComboBox extends UI5Element {
this._tokenizer.expanded = this.open;
// remove the value if user focus out the input and focus is not going in the popover
- if (!isPhone() && !this.allowCustomValues && (this.staticAreaItem !== e.relatedTarget)) {
+ if (!isPhone() && !this.allowCustomValues && !focusIsGoingInPopover) {
this.value = "";
}
}
@@ -1843,8 +1846,8 @@ class MultiComboBox extends UI5Element {
get _innerInput(): HTMLInputElement {
if (isPhone()) {
- if (this.allItemsPopover?.opened) {
- return this.allItemsPopover.querySelector("ui5-input")!.shadowRoot!.querySelector("input")!;
+ if (this._getRespPopover()?.opened) {
+ return this._getRespPopover().querySelector("ui5-input")!.shadowRoot!.querySelector("input")!;
}
}
diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
index 119e0342e46c..0b22e17e800a 100644
--- a/packages/main/src/MultiComboBoxPopover.hbs
+++ b/packages/main/src/MultiComboBoxPopover.hbs
@@ -108,6 +108,7 @@
class="ui5-valuestatemessage-popover"
placement="Bottom"
horizontal-align="{{_valueStatePopoverHorizontalAlign}}"
+ tabindex="-1"
>
<div slot="header" class="{{classes.popoverValueState}}" style="{{styles.popoverHeader}}">
<ui5-icon class="ui5-input-value-state-message-icon" name="{{_valueStateMessageIcon}}"></ui5-icon>
diff --git a/packages/main/src/MultiInput.ts b/packages/main/src/MultiInput.ts
index bb6d8d1c6fc1..527eca853592 100644
--- a/packages/main/src/MultiInput.ts
+++ b/packages/main/src/MultiInput.ts
@@ -182,9 +182,7 @@ class MultiInput extends Input {
}
_tokenizerFocusOut(e: FocusEvent) {
- const isFocusingMorePopover = e.relatedTarget === this.tokenizer.staticAreaItem;
-
- if (!this.contains(e.relatedTarget as HTMLElement) && !isFocusingMorePopover) {
+ if (!this.contains(e.relatedTarget as HTMLElement) && !this.shadowRoot!.contains(e.relatedTarget as HTMLElement)) {
this.tokenizer._tokens.forEach(token => { token.selected = false; });
this.tokenizer.scrollToStart();
}
diff --git a/packages/main/src/NavigationMenu.ts b/packages/main/src/NavigationMenu.ts
index 6e6cbe5119f0..e313fbfd7121 100644
--- a/packages/main/src/NavigationMenu.ts
+++ b/packages/main/src/NavigationMenu.ts
@@ -10,11 +10,11 @@ import type { MenuItemClickEventDetail } from "./Menu.js";
import StandardListItem from "./StandardListItem.js";
import MenuItem from "./MenuItem.js";
import type NavigationMenuItem from "./NavigationMenuItem.js";
-import staticAreaMenuTemplate from "./generated/templates/NavigationMenuTemplate.lit.js";
+import menuTemplate from "./generated/templates/NavigationMenuTemplate.lit.js";
// Styles
-import staticAreaNavigationMenuCss from "./generated/themes/NavigationMenu.css.js";
-import staticAreaMenuCss from "./generated/themes/Menu.css.js";
+import navigationMenuCss from "./generated/themes/NavigationMenu.css.js";
+import menuCss from "./generated/themes/Menu.css.js";
import {
NAVIGATION_MENU_POPOVER_HIDDEN_TEXT,
@@ -45,8 +45,8 @@ type OpenerStandardListItem = StandardListItem & { associatedItem: MenuItem };
@customElement({
tag: "ui5-navigation-menu",
renderer: litRender,
- staticAreaStyles: [staticAreaMenuCss, staticAreaNavigationMenuCss],
- staticAreaTemplate: staticAreaMenuTemplate,
+ styles: [menuCss, navigationMenuCss],
+ template: menuTemplate,
})
class NavigationMenu extends Menu {
diff --git a/packages/main/src/Popover.ts b/packages/main/src/Popover.ts
index 5dc771342490..01c3d5239738 100644
--- a/packages/main/src/Popover.ts
+++ b/packages/main/src/Popover.ts
@@ -86,6 +86,7 @@ type CalculatedPlacement = {
@customElement({
tag: "ui5-popover",
styles: [
+ Popup.styles,
browserScrollbarCSS,
PopupsCommonCss,
PopoverCss,
@@ -418,9 +419,6 @@ class Popover extends Popup {
this.arrowTranslateY = placement.arrow.y;
top = this._adjustForIOSKeyboard(top);
- const containingBlockClientLocation = this._getContainingBlockClientLocation();
- left -= containingBlockClientLocation.left;
- top -= containingBlockClientLocation.top;
Object.assign(this.style, {
top: `${top}px`,
@@ -472,8 +470,12 @@ class Popover extends Popup {
}
_showOutsideViewport() {
+ if (this.isConnected) {
+ this.setAttribute("popover", "manual");
+ this.showPopover();
+ }
+
Object.assign(this.style, {
- display: this._displayProp,
top: "-10000px",
left: "-10000px",
});
diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs
index 34f15bdd7935..8cc419168bf7 100644
--- a/packages/main/src/Popup.hbs
+++ b/packages/main/src/Popup.hbs
@@ -1,4 +1,5 @@
<section
+ root-element
style="{{styles.root}}"
class="{{classes.root}}"
role="{{_role}}"
@@ -30,4 +31,4 @@
{{#*inline "afterContent"}}{{/inline}}
-
+{{>include "./PopupBlockLayer.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/Popup.ts b/packages/main/src/Popup.ts
index b30939a28bd5..09ccc7ea84ab 100644
--- a/packages/main/src/Popup.ts
+++ b/packages/main/src/Popup.ts
@@ -12,18 +12,17 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEffectiveScrollbarStyle.js";
import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
import { isEnter, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
-import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import { getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
-import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
import PopupAccessibleRole from "./types/PopupAccessibleRole.js";
import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
// Styles
import popupStlyes from "./generated/themes/Popup.css.js";
-import popupStaticAreaStyles from "./generated/themes/PopupStaticAreaStyles.css.js";
+import popupBlockLayerStyles from "./generated/themes/PopupBlockLayer.css.js";
import globalStyles from "./generated/themes/PopupGlobal.css.js";
const createBlockingStyle = (): void => {
@@ -77,10 +76,8 @@ type PopupBeforeCloseEventDetail = {
*/
@customElement({
renderer: litRender,
- styles: popupStlyes,
+ styles: [popupStlyes, popupBlockLayerStyles],
template: PopupTemplate,
- staticAreaTemplate: PopupBlockLayer,
- staticAreaStyles: popupStaticAreaStyles,
})
/**
* Fired before the component is opened. This event can be cancelled, which will prevent the popup from opening. **This event does not bubble.**
@@ -228,17 +225,30 @@ abstract class Popup extends UI5Element {
super();
this._resizeHandler = this._resize.bind(this);
+
+ this._getRealDomRef = () => {
+ return this.shadowRoot!.querySelector<HTMLElement>("[root-element]")!;
+ };
}
onBeforeRendering() {
- this._blockLayerHidden = !this.isOpen() || !this.isTopModalPopup;
+ if (this._getBlockingLayer) {
+ if (!this.isOpen() || !this.isTopModalPopup) {
+ this._getBlockingLayer.hidePopover();
+ } else if (!this.shouldHideBackdrop) {
+ this._getBlockingLayer.showPopover();
+ }
+ }
}
onAfterRendering() {
- this._updateMediaRange();
+ renderFinished().then(() => {
+ this._updateMediaRange();
+ });
}
onEnterDOM() {
+ this.setAttribute("popover", "manual");
ResizeHandler.register(this, this._resizeHandler);
}
@@ -251,10 +261,6 @@ abstract class Popup extends UI5Element {
ResizeHandler.deregister(this, this._resizeHandler);
}
- get _displayProp() {
- return "block";
- }
-
_resize() {
this._updateMediaRange();
}
@@ -422,6 +428,10 @@ abstract class Popup extends UI5Element {
return isFocusedElementWithinNode(this._root);
}
+ get _getBlockingLayer() {
+ return this.shadowRoot!.querySelector<HTMLElement>(".ui5-block-layer")!;
+ }
+
/**
* Shows the block layer (for modal popups only) and sets the correct z-index for the purpose of popup stacking
* @protected
@@ -432,16 +442,16 @@ abstract class Popup extends UI5Element {
return;
}
+ // Await render before trying to access the blocking layer
+ await renderFinished();
+
if (this.isModal && !this.shouldHideBackdrop) {
// create static area item ref for block layer
- this.getStaticAreaItemDomRef();
+ this._getBlockingLayer.showPopover();
this._blockLayerHidden = false;
Popup.blockPageScrolling(this);
}
- this._zIndex = getNextZIndex();
- this.style.zIndex = this._zIndex?.toString() || "";
-
this._focusedElementBeforeOpen = getFocusedElement();
this._show();
@@ -455,8 +465,6 @@ abstract class Popup extends UI5Element {
this.opened = true;
this.open = true;
- await renderFinished();
-
if (!this._disableInitialFocus && !preventInitialFocus) {
await this.applyInitialFocus();
}
@@ -492,6 +500,7 @@ abstract class Popup extends UI5Element {
if (this.isModal) {
this._blockLayerHidden = true;
+ this._getBlockingLayer.hidePopover();
Popup.unblockPageScrolling(this);
}
@@ -536,7 +545,10 @@ abstract class Popup extends UI5Element {
* @protected
*/
_show() {
- this.style.display = this._displayProp;
+ if (this.isConnected) {
+ this.setAttribute("popover", "manual");
+ this.showPopover();
+ }
}
/**
@@ -544,7 +556,7 @@ abstract class Popup extends UI5Element {
* @protected
*/
hide() {
- this.style.display = "none";
+ this.isConnected && this.hidePopover();
}
/**
@@ -593,9 +605,6 @@ abstract class Popup extends UI5Element {
return {
root: {},
content: {},
- blockLayer: {
- "zIndex": this._zIndex ? this._zIndex - 1 : "",
- },
};
}
diff --git a/packages/main/src/PopupBlockLayer.hbs b/packages/main/src/PopupBlockLayer.hbs
index c1830da78fd2..8c40179c1126 100644
--- a/packages/main/src/PopupBlockLayer.hbs
+++ b/packages/main/src/PopupBlockLayer.hbs
@@ -1,7 +1,5 @@
<div class="ui5-block-layer"
- ?hidden={{_blockLayerHidden}}
- tabindex="0"
- style="{{styles.blockLayer}}"
+ popover="manual"
@keydown="{{_preventBlockLayerFocus}}"
- @mousedown="{{_preventBlockLayerFocus}}">
+ @mousedown="{{_preventBlockLayerFocus}}">
</div>
diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
index 77edebce7315..73c348d9414c 100644
--- a/packages/main/src/ResponsivePopover.hbs
+++ b/packages/main/src/ResponsivePopover.hbs
@@ -1,5 +1,6 @@
{{#if _isPhone}}
<ui5-dialog
+ root-element
accessible-name={{accessibleName}}
accessible-name-ref={{accessibleNameRef}}
accessible-role={{accessibleRole}}
diff --git a/packages/main/src/ResponsivePopover.ts b/packages/main/src/ResponsivePopover.ts
index 549e2b7755bf..c17804608b20 100644
--- a/packages/main/src/ResponsivePopover.ts
+++ b/packages/main/src/ResponsivePopover.ts
@@ -3,7 +3,6 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
import { RESPONSIVE_POPOVER_CLOSE_DIALOG_BUTTON } from "./generated/i18n/i18n-defaults.js";
@@ -96,12 +95,6 @@ class ResponsivePopover extends Popover {
await super.showAt(opener, preventInitialFocus);
} else {
this.style.display = "contents";
- const nextZIndex = getNextZIndex();
- if (!nextZIndex) {
- return;
- }
-
- this.style.zIndex = nextZIndex.toString();
await this._dialog.show(preventInitialFocus);
}
}
diff --git a/packages/main/src/Select.hbs b/packages/main/src/Select.hbs
index 839d44942e10..9ecf69e4c154 100644
--- a/packages/main/src/Select.hbs
+++ b/packages/main/src/Select.hbs
@@ -48,3 +48,5 @@
{{/if}}
<slot name="formSupport"></slot>
</div>
+
+{{>include "./SelectPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts
index 99cf49462fa7..2d28078f53f6 100644
--- a/packages/main/src/Select.ts
+++ b/packages/main/src/Select.ts
@@ -60,7 +60,6 @@ import Button from "./Button.js";
// Templates
import SelectTemplate from "./generated/templates/SelectTemplate.lit.js";
-import SelectPopoverTemplate from "./generated/templates/SelectPopoverTemplate.lit.js";
// Styles
import selectCss from "./generated/themes/Select.css.js";
@@ -147,9 +146,8 @@ type SelectLiveChangeEventDetail = {
languageAware: true,
renderer: litRender,
template: SelectTemplate,
- staticAreaTemplate: SelectPopoverTemplate,
- styles: selectCss,
- staticAreaStyles: [
+ styles: [
+ selectCss,
ResponsivePopoverCommonCss,
ValueStateMessageCss,
SelectPopoverCss,
@@ -465,9 +463,8 @@ class Select extends UI5Element implements IFormElement {
return !!this.responsivePopover && this.responsivePopover.opened;
}
- async _respPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ _respPopover() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
/**
@@ -550,7 +547,7 @@ class Select extends UI5Element implements IFormElement {
}
}
- async _toggleRespPopover() {
+ _toggleRespPopover() {
if (this.disabled || this.readonly) {
return;
}
@@ -563,7 +560,7 @@ class Select extends UI5Element implements IFormElement {
return;
}
- this.responsivePopover = await this._respPopover();
+ this.responsivePopover = this._respPopover();
if (this._isPickerOpen) {
this.responsivePopover.close();
} else {
@@ -571,8 +568,8 @@ class Select extends UI5Element implements IFormElement {
}
}
- async _attachRealDomRefs() {
- this.responsivePopover = await this._respPopover();
+ _attachRealDomRefs() {
+ this.responsivePopover = this._respPopover();
this.options.forEach(option => {
option._getRealDomRef = () => this.responsivePopover.querySelector<HTMLElement>(`*[data-ui5-stable=${option.stableDomRef}]`)!;
@@ -1110,8 +1107,8 @@ class Select extends UI5Element implements IFormElement {
}
}
- async openValueStatePopover() {
- this.valueStatePopover = await this._getPopover() as Popover;
+ openValueStatePopover() {
+ this.valueStatePopover = this._getPopover() as Popover;
if (this.valueStatePopover) {
this.valueStatePopover.showAt(this);
}
@@ -1133,9 +1130,8 @@ class Select extends UI5Element implements IFormElement {
return this.selectedOption && this.selectedOption.icon;
}
- async _getPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>("[ui5-popover]");
+ _getPopover() {
+ return this.shadowRoot!.querySelector<Popover>("[ui5-popover]");
}
static async onDefine() {
diff --git a/packages/main/src/Tab.ts b/packages/main/src/Tab.ts
index a0228dfb9e70..3dbd18c0ad13 100644
--- a/packages/main/src/Tab.ts
+++ b/packages/main/src/Tab.ts
@@ -490,6 +490,6 @@ Tab.define();
TabContainer.registerTabStyles(stripCss);
TabContainer.registerTabStyles(draggableElementStyles);
-TabContainer.registerStaticAreaTabStyles(overflowCss);
+TabContainer.registerTabStyles(overflowCss);
export default Tab;
diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
index a65ae54eb93d..05910b3e536a 100644
--- a/packages/main/src/TabContainer.hbs
+++ b/packages/main/src/TabContainer.hbs
@@ -6,7 +6,7 @@
class="{{classes.header}}"
id="{{_id}}-header"
@focusin="{{_onHeaderFocusin}}"
- @dragstart="{{_onHeaderDragStart}}"
+ @dragstart="{{_onDragStart}}"
@dragenter="{{_onHeaderDragEnter}}"
@dragover="{{_onHeaderDragOver}}"
@drop="{{_onHeaderDrop}}"
@@ -96,3 +96,5 @@
</div>
</div>
{{/inline}}
+
+{{>include "./TabContainerPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts
index 1be9f409a262..d62e352a675a 100644
--- a/packages/main/src/TabContainer.ts
+++ b/packages/main/src/TabContainer.ts
@@ -59,7 +59,6 @@ import type { IButton } from "./Button.js";
// Templates
import TabContainerTemplate from "./generated/templates/TabContainerTemplate.lit.js";
-import TabContainerPopoverTemplate from "./generated/templates/TabContainerPopoverTemplate.lit.js";
// Styles
import tabContainerCss from "./generated/themes/TabContainer.css.js";
@@ -98,7 +97,6 @@ interface ITab extends UI5Element {
type TabContainerPopoverOwner = "start-overflow" | "end-overflow" | Tab;
const tabStyles: Array<StyleData> = [];
-const staticAreaTabStyles: Array<StyleData> = [];
const PAGE_UP_DOWN_SIZE = 5;
type TabContainerTabSelectEventDetail = {
@@ -169,11 +167,13 @@ interface TabContainerTabInOverflow extends CustomListItem {
tag: "ui5-tabcontainer",
languageAware: true,
fastNavigation: true,
- styles: [tabStyles, tabContainerCss],
- staticAreaStyles: [ResponsivePopoverCommonCss, staticAreaTabStyles],
+ styles: [
+ tabStyles,
+ tabContainerCss,
+ ResponsivePopoverCommonCss,
+ ],
renderer: litRender,
template: TabContainerTemplate,
- staticAreaTemplate: TabContainerPopoverTemplate,
dependencies: [
Button,
Icon,
@@ -345,16 +345,11 @@ class TabContainer extends UI5Element {
_hasScheduledPopoverOpen = false;
_handleResizeBound: () => void;
_setDraggedElement?: SetDraggedElementFunction;
- _setDraggedElementInStaticArea?: SetDraggedElementFunction;
static registerTabStyles(styles: StyleData) {
tabStyles.push(styles);
}
- static registerStaticAreaTabStyles(styles: StyleData) {
- staticAreaTabStyles.push(styles);
- }
-
static i18nBundle: I18nBundle;
constructor() {
@@ -426,11 +421,6 @@ class TabContainer extends UI5Element {
DragRegistry.unsubscribe(this);
DragRegistry.removeSelfManagedArea(this);
this._setDraggedElement = undefined;
-
- if (this.staticAreaItem && this._setDraggedElementInStaticArea) {
- DragRegistry.removeSelfManagedArea(this.staticAreaItem);
- this._setDraggedElementInStaticArea = undefined;
- }
}
_handleResize() {
@@ -479,7 +469,7 @@ class TabContainer extends UI5Element {
}
}
- _onHeaderDragStart(e: DragEvent) {
+ _onDragStart(e: DragEvent) {
if (!e.dataTransfer || !(e.target instanceof HTMLElement)) {
return;
}
@@ -1353,16 +1343,8 @@ class TabContainer extends UI5Element {
}
async _respPopover() {
- const staticAreaItemDomRef = await this.getStaticAreaItemDomRef();
-
- if (!this._setDraggedElementInStaticArea) {
- this._setDraggedElementInStaticArea = DragRegistry.addSelfManagedArea(this.staticAreaItem!);
- staticAreaItemDomRef!.addEventListener("dragstart", e => {
- this._setDraggedElementInStaticArea!((e.target as Tab).realTabReference);
- });
- }
-
- return staticAreaItemDomRef!.querySelector<ResponsivePopover>(`#${this._id}-overflowMenu`)!;
+ await renderFinished();
+ return this.shadowRoot!.querySelector<ResponsivePopover>(`#${this._id}-overflowMenu`)!;
}
_closePopover() {
diff --git a/packages/main/src/TabContainerPopover.hbs b/packages/main/src/TabContainerPopover.hbs
index 20a891c7dbed..5b5a4db0db7f 100644
--- a/packages/main/src/TabContainerPopover.hbs
+++ b/packages/main/src/TabContainerPopover.hbs
@@ -6,6 +6,7 @@
hide-arrow
_hide-header
class="ui5-tab-container-responsive-popover"
+ @dragstart="{{_onDragStart}}"
>
<ui5-list
mode="SingleSelect"
diff --git a/packages/main/src/TabSeparator.ts b/packages/main/src/TabSeparator.ts
index ec12a7ed3dc3..5a55954e7abd 100644
--- a/packages/main/src/TabSeparator.ts
+++ b/packages/main/src/TabSeparator.ts
@@ -83,6 +83,6 @@ class TabSeparator extends UI5Element implements ITab {
TabSeparator.define();
TabContainer.registerTabStyles(stripCss);
-TabContainer.registerStaticAreaTabStyles(overflowCss);
+TabContainer.registerTabStyles(overflowCss);
export default TabSeparator;
diff --git a/packages/main/src/TextArea.hbs b/packages/main/src/TextArea.hbs
index 7107cc07ebf6..64ebd044b010 100644
--- a/packages/main/src/TextArea.hbs
+++ b/packages/main/src/TextArea.hbs
@@ -51,3 +51,5 @@
</div>
{{#*inline "afterTextarea"}}{{/inline}}
+
+{{>include "./TextAreaPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts
index 9ca8f50c24e7..0b077213662b 100644
--- a/packages/main/src/TextArea.ts
+++ b/packages/main/src/TextArea.ts
@@ -23,7 +23,6 @@ import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
import "@ui5/webcomponents-icons/dist/information.js";
import TextAreaTemplate from "./generated/templates/TextAreaTemplate.lit.js";
-import TextAreaPopoverTemplate from "./generated/templates/TextAreaPopoverTemplate.lit.js";
import type FormSupportT from "./features/InputElementsFormSupport.js";
import type { IFormElement } from "./features/InputElementsFormSupport.js";
@@ -78,11 +77,9 @@ type ExceededText = {
@customElement({
tag: "ui5-textarea",
languageAware: true,
- styles: [browserScrollbarCSS, styles],
+ styles: [browserScrollbarCSS, styles, valueStateMessageStyles],
renderer: litRender,
template: TextAreaTemplate,
- staticAreaTemplate: TextAreaPopoverTemplate,
- staticAreaStyles: valueStateMessageStyles,
dependencies: [Popover, Icon],
})
/**
@@ -464,18 +461,17 @@ class TextArea extends UI5Element implements IFormElement {
}
async openPopover() {
- this.valueStatePopover = await this._getPopover();
+ this.valueStatePopover = this._getPopover();
this.valueStatePopover && await this.valueStatePopover.showAt(this.shadowRoot!.querySelector(".ui5-textarea-root .ui5-textarea-wrapper")!);
}
- async closePopover() {
- this.valueStatePopover = await this._getPopover();
+ closePopover() {
+ this.valueStatePopover = this._getPopover();
this.valueStatePopover && this.valueStatePopover.close();
}
- async _getPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>("[ui5-popover]")!;
+ _getPopover() {
+ return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
}
_tokenizeText(value: string) {
diff --git a/packages/main/src/TimePicker.hbs b/packages/main/src/TimePicker.hbs
index 43a3dca1dd88..5bad27221a47 100644
--- a/packages/main/src/TimePicker.hbs
+++ b/packages/main/src/TimePicker.hbs
@@ -41,3 +41,5 @@
{{/unless}}
</ui5-input>
</div>
+
+{{>include "./TimePickerPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/TimePickerBase.ts b/packages/main/src/TimePickerBase.ts
index 5a5ea4750700..d8b64df41378 100644
--- a/packages/main/src/TimePickerBase.ts
+++ b/packages/main/src/TimePickerBase.ts
@@ -30,7 +30,6 @@ import Icon from "./Icon.js";
import Popover from "./Popover.js";
import ResponsivePopover from "./ResponsivePopover.js";
import TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js";
-import TimePickerPopoverTemplate from "./generated/templates/TimePickerPopoverTemplate.lit.js";
import Input from "./Input.js";
import Button from "./Button.js";
import TimeSelectionClocks from "./TimeSelectionClocks.js";
@@ -67,9 +66,12 @@ type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail;
languageAware: true,
renderer: litRender,
template: TimePickerTemplate,
- styles: TimePickerCss,
- staticAreaTemplate: TimePickerPopoverTemplate,
- staticAreaStyles: [ResponsivePopoverCommonCss, PopoverCss, TimePickerPopoverCss],
+ styles: [
+ TimePickerCss,
+ ResponsivePopoverCommonCss,
+ PopoverCss,
+ TimePickerPopoverCss,
+ ],
dependencies: [
Icon,
Popover,
@@ -230,9 +232,9 @@ class TimePickerBase extends UI5Element {
* @public
* @returns Resolves when the picker is open
*/
- async openPicker(): Promise<void> {
+ openPicker(): void {
this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
- const responsivePopover = await this._getPopover();
+ const responsivePopover = this._getPopover();
responsivePopover.showAt(this);
}
@@ -241,8 +243,8 @@ class TimePickerBase extends UI5Element {
* @public
* @returns Resolves when the picker is closed
*/
- async closePicker(): Promise<void> {
- const responsivePopover = await this._getPopover();
+ closePicker(): void {
+ const responsivePopover = this._getPopover();
responsivePopover.close();
this._isPickerOpen = false;
}
@@ -272,9 +274,9 @@ class TimePickerBase extends UI5Element {
this._isPickerOpen = false;
}
- async onResponsivePopoverAfterOpen() {
+ onResponsivePopoverAfterOpen() {
this._isPickerOpen = true;
- const responsivePopover = await this._getPopover();
+ const responsivePopover = this._getPopover();
responsivePopover.querySelector<TimeSelectionClocks>("[ui5-time-selection-clocks]")!._focusFirstButton();
}
@@ -283,9 +285,9 @@ class TimePickerBase extends UI5Element {
* @private
* @returns Resolves when the Inputs popover is open
*/
- async openInputsPopover(): Promise<void> {
+ openInputsPopover() {
this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date());
- const popover = await this._getInputsPopover();
+ const popover = this._getInputsPopover();
popover.showAt(this);
this._isInputsPopoverOpen = true;
}
@@ -295,8 +297,8 @@ class TimePickerBase extends UI5Element {
* @private
* @returns Resolves when the Inputs popover is closed
*/
- async closeInputsPopover(): Promise<void> {
- const popover = await this._getInputsPopover();
+ closeInputsPopover() {
+ const popover = this._getInputsPopover();
popover.close();
}
@@ -321,8 +323,8 @@ class TimePickerBase extends UI5Element {
this.closeInputsPopover();
}
- async onInputsPopoverAfterOpen() {
- const popover = await this._getInputsPopover();
+ onInputsPopoverAfterOpen() {
+ const popover = this._getInputsPopover();
popover.querySelector<TimeSelectionInputs>("[ui5-time-selection-inputs]")!._addNumericAttributes();
}
@@ -395,14 +397,12 @@ class TimePickerBase extends UI5Element {
return !this.disabled && this._isPhone;
}
- async _getPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ _getPopover() {
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
- async _getInputsPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>("[ui5-popover]")!;
+ _getInputsPopover() {
+ return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
}
_getInput(): Input {
@@ -539,11 +539,11 @@ class TimePickerBase extends UI5Element {
setTimeout(() => { this._getInput().readonly = false; }, 0);
}
- async _onfocusin(evt: FocusEvent) {
+ _onfocusin(evt: FocusEvent) {
if (this._isPhone) {
this._hideMobileKeyboard();
if (this._isInputsPopoverOpen) {
- const popover = await this._getInputsPopover();
+ const popover = this._getInputsPopover();
popover.applyFocus();
}
evt.preventDefault();
diff --git a/packages/main/src/TimePickerPopover.hbs b/packages/main/src/TimePickerPopover.hbs
index 68700ff07851..751774df77d0 100644
--- a/packages/main/src/TimePickerPopover.hbs
+++ b/packages/main/src/TimePickerPopover.hbs
@@ -20,7 +20,7 @@
@close-picker="{{submitPickers}}"
></ui5-time-selection-clocks>
- <div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+ <div slot="footer" class="ui5-time-picker-footer">
<ui5-button id="submit" design="Emphasized" @click="{{submitPickers}}">{{submitButtonLabel}}</ui5-button>
<ui5-button id="close" design="Transparent" @click="{{closePicker}}">{{cancelButtonLabel}}</ui5-button>
</div>
@@ -50,7 +50,7 @@
></ui5-time-selection-inputs>
</div>
- <div slot="footer" class="ui5-time-picker-footer" @keydown={{_onfooterkeydown}}>
+ <div slot="footer" class="ui5-time-picker-footer">
<ui5-button id="submitInputs" design="Emphasized" @click="{{submitInputsPopover}}">{{submitButtonLabel}}</ui5-button>
<ui5-button id="closeInputs" design="Transparent" @click="{{closeInputsPopover}}">{{cancelButtonLabel}}</ui5-button>
</div>
diff --git a/packages/main/src/Toast.ts b/packages/main/src/Toast.ts
index 66c5dff29ef1..1ea61051bffb 100644
--- a/packages/main/src/Toast.ts
+++ b/packages/main/src/Toast.ts
@@ -1,7 +1,6 @@
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getNextZIndex } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
import { isMac } from "@ui5/webcomponents-base/dist/Device.js";
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
@@ -166,7 +165,6 @@ class Toast extends UI5Element {
this.style.transitionDuration = this.open ? `${transitionDuration}ms` : "";
this.style.transitionDelay = this.open ? `${this.effectiveDuration - transitionDuration}ms` : "";
this.style.opacity = this.open && !this.hover && !this.focused ? "0" : "";
- this.style.zIndex = `${getNextZIndex()}`;
if (!globalListenerAdded) {
document.addEventListener("keydown", handleGlobalKeydown);
diff --git a/packages/main/src/Tokenizer.hbs b/packages/main/src/Tokenizer.hbs
index 47b5e8d38341..8e09dc973ebb 100644
--- a/packages/main/src/Tokenizer.hbs
+++ b/packages/main/src/Tokenizer.hbs
@@ -23,4 +23,6 @@
part="n-more-text"
>{{_nMoreText}}</span>
{{/if}}
-</div>
\ No newline at end of file
+</div>
+
+{{>include "./TokenizerPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/Tokenizer.ts b/packages/main/src/Tokenizer.ts
index 46a2732d074d..7d8f4cc0ff84 100644
--- a/packages/main/src/Tokenizer.ts
+++ b/packages/main/src/Tokenizer.ts
@@ -1,4 +1,5 @@
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
import event from "@ui5/webcomponents-base/dist/decorators/event.js";
@@ -48,7 +49,6 @@ import type Token from "./Token.js";
import type { IToken } from "./MultiInput.js";
import type { TokenDeleteEventDetail } from "./Token.js";
import TokenizerTemplate from "./generated/templates/TokenizerTemplate.lit.js";
-import TokenizerPopoverTemplate from "./generated/templates/TokenizerPopoverTemplate.lit.js";
import {
MULTIINPUT_SHOW_MORE_TOKENS,
TOKENIZER_ARIA_LABEL,
@@ -91,14 +91,13 @@ enum ClipboardDataOperation {
languageAware: true,
renderer: litRender,
template: TokenizerTemplate,
- styles: TokenizerCss,
- staticAreaStyles: [
+ styles: [
+ TokenizerCss,
ResponsivePopoverCommonCss,
ValueStateMessageCss,
SuggestionsCss,
TokenizerPopoverCss,
],
- staticAreaTemplate: TokenizerPopoverTemplate,
dependencies: [
ResponsivePopover,
List,
@@ -788,8 +787,8 @@ class Tokenizer extends UI5Element {
}
async getPopover() {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ await renderFinished();
+ return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
}
}
diff --git a/packages/main/src/Toolbar.hbs b/packages/main/src/Toolbar.hbs
index 396b46538e35..c40144aeb1ea 100644
--- a/packages/main/src/Toolbar.hbs
+++ b/packages/main/src/Toolbar.hbs
@@ -17,4 +17,6 @@
accessible-name="{{accInfo.overflowButton.accessibleName}}"
.accessibilityAttributes={{accInfo.overflowButton.accessibilityAttributes}}
></ui5-button>
-</div>
\ No newline at end of file
+</div>
+
+{{>include "./ToolbarPopover.hbs"}}
\ No newline at end of file
diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts
index f1c5ffb9268b..7027259257e5 100644
--- a/packages/main/src/Toolbar.ts
+++ b/packages/main/src/Toolbar.ts
@@ -21,7 +21,6 @@ import {
import ToolbarTemplate from "./generated/templates/ToolbarTemplate.lit.js";
import ToolbarCss from "./generated/themes/Toolbar.css.js";
-import ToolbarPopoverTemplate from "./generated/templates/ToolbarPopoverTemplate.lit.js";
import ToolbarPopoverCss from "./generated/themes/ToolbarPopover.css.js";
import ToolbarAlign from "./types/ToolbarAlign.js";
@@ -34,7 +33,6 @@ import type ToolbarSeparator from "./ToolbarSeparator.js";
import {
getRegisteredToolbarItem,
getRegisteredStyles,
- getRegisteredStaticAreaStyles,
getRegisteredDependencies,
} from "./ToolbarRegistry.js";
@@ -75,7 +73,6 @@ function parsePxValue(styleSet: CSSStyleDeclaration, propertyName: string): numb
languageAware: true,
renderer: litRender,
template: ToolbarTemplate,
- staticAreaTemplate: ToolbarPopoverTemplate,
})
class Toolbar extends UI5Element {
static i18nBundle: I18nBundle;
@@ -149,13 +146,6 @@ class Toolbar extends UI5Element {
const styles = getRegisteredStyles();
return [
ToolbarCss,
- ...styles,
- ];
- }
-
- static get staticAreaStyles() {
- const styles = getRegisteredStaticAreaStyles();
- return [
ToolbarPopoverCss,
...styles,
];
@@ -332,19 +322,19 @@ class Toolbar extends UI5Element {
* Returns if the overflow popup is open.
* @public
*/
- async isOverflowOpen(): Promise<boolean> {
- const overflowPopover = await this.getOverflowPopover();
+ isOverflowOpen(): boolean {
+ const overflowPopover = this.getOverflowPopover();
return overflowPopover!.isOpen();
}
- async openOverflow(): Promise<void> {
- const overflowPopover = await this.getOverflowPopover();
+ openOverflow(): void {
+ const overflowPopover = this.getOverflowPopover();
overflowPopover!.showAt(this.overflowButtonDOM!);
this.reverseOverflow = overflowPopover!.actualPlacement === "Top";
}
- async closeOverflow() {
- const overflowPopover = await this.getOverflowPopover();
+ closeOverflow() {
+ const overflowPopover = this.getOverflowPopover();
overflowPopover!.close();
}
@@ -356,9 +346,8 @@ class Toolbar extends UI5Element {
}
}
- async getOverflowPopover(): Promise<Popover | null> {
- const staticAreaItem = await this.getStaticAreaItemDomRef();
- return staticAreaItem!.querySelector<Popover>(".ui5-overflow-popover");
+ getOverflowPopover(): Popover | null {
+ return this.shadowRoot!.querySelector<Popover>(".ui5-overflow-popover");
}
/**
@@ -513,8 +502,8 @@ class Toolbar extends UI5Element {
* Private members
*/
- async attachListeners() {
- const popover = await this.getOverflowPopover();
+ attachListeners() {
+ const popover = this.getOverflowPopover();
this.subscribedEvents.forEach((e: string) => {
this.itemsDOM?.addEventListener(e, this._onInteract);
@@ -522,8 +511,8 @@ class Toolbar extends UI5Element {
});
}
- async detachListeners() {
- const popover = await this.getOverflowPopover();
+ detachListeners() {
+ const popover = this.getOverflowPopover();
this.subscribedEvents.forEach((e: string) => {
this.itemsDOM?.removeEventListener(e, this._onInteract);
diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts
index 670ee0566169..f5615bcb2f8e 100644
--- a/packages/main/src/ToolbarButton.ts
+++ b/packages/main/src/ToolbarButton.ts
@@ -35,6 +35,7 @@ type AccessibilityAttributes = ButtonAccessibilityAttributes;
@customElement({
tag: "ui5-toolbar-button",
dependencies: [Button],
+ styles: ToolbarButtonPopoverCss,
})
/**
@@ -150,10 +151,6 @@ class ToolbarButton extends ToolbarItem {
@property({ validator: CSSSize })
width?: string;
- static get staticAreaStyles() {
- return ToolbarButtonPopoverCss;
- }
-
get styles() {
return {
width: this.width,
diff --git a/packages/main/src/ToolbarRegistry.ts b/packages/main/src/ToolbarRegistry.ts
index 4d8bcb401b6e..037b13426b48 100644
--- a/packages/main/src/ToolbarRegistry.ts
+++ b/packages/main/src/ToolbarRegistry.ts
@@ -20,10 +20,6 @@ const getRegisteredStyles = () => {
return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.styles);
};
-const getRegisteredStaticAreaStyles = () => {
- return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.staticAreaStyles);
-};
-
const getRegisteredDependencies = () => {
return [...registry.values()].map((ElementClass: typeof ToolbarItem) => ElementClass.dependencies).flat();
};
@@ -32,6 +28,5 @@ export {
registerToolbarItem,
getRegisteredToolbarItem,
getRegisteredStyles,
- getRegisteredStaticAreaStyles,
getRegisteredDependencies,
};
diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts
index 2587bbc496ab..74870b583852 100644
--- a/packages/main/src/features/InputSuggestions.ts
+++ b/packages/main/src/features/InputSuggestions.ts
@@ -1,4 +1,5 @@
import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
import { registerFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js";
import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -236,13 +237,13 @@ class Suggestions {
return false;
}
- toggle(bToggle: boolean, options: { preventFocusRestore: boolean }) {
+ async toggle(bToggle: boolean, options: { preventFocusRestore: boolean }) {
const toggle = bToggle !== undefined ? bToggle : !this.isOpened();
if (toggle) {
- this.open();
+ await this.open();
} else {
- this.close(options.preventFocusRestore);
+ await this.close(options.preventFocusRestore);
}
}
@@ -251,11 +252,11 @@ class Suggestions {
return sc.offsetHeight < sc.scrollHeight;
}
- open() {
+ async open() {
this._getComponent().open = true;
this._beforeOpen();
- this.responsivePopover!.showAt(this._getComponent());
+ await (await this._getSuggestionPopover()).showAt(this._getComponent());
}
async close(preventFocusRestore = false) {
@@ -592,8 +593,8 @@ class Suggestions {
return this.responsivePopover;
}
- const staticAreaItem = await this._getComponent().getStaticAreaItemDomRef();
- this.responsivePopover = staticAreaItem!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
+ await renderFinished();
+ this.responsivePopover = this._getComponent().shadowRoot!.querySelector<ResponsivePopover>("[ui5-responsive-popover]")!;
return this.responsivePopover;
}
diff --git a/packages/main/src/themes/ColorPaletteStaticArea.css b/packages/main/src/themes/ColorPaletteDialog.css
similarity index 100%
rename from packages/main/src/themes/ColorPaletteStaticArea.css
rename to packages/main/src/themes/ColorPaletteDialog.css
diff --git a/packages/main/src/themes/Popup.css b/packages/main/src/themes/Popup.css
index 4ae7d5a3017f..24c55c28d451 100644
--- a/packages/main/src/themes/Popup.css
+++ b/packages/main/src/themes/Popup.css
@@ -1,5 +1,8 @@
:host {
min-width: 1px; /** So that it can always get focus **/
- display: none;
- position: fixed;
+ overflow: visible;
+ border: none;
+ inset: "unset";
+ margin: 0;
+ padding: 0;
}
diff --git a/packages/main/src/themes/PopupStaticAreaStyles.css b/packages/main/src/themes/PopupBlockLayer.css
similarity index 69%
rename from packages/main/src/themes/PopupStaticAreaStyles.css
rename to packages/main/src/themes/PopupBlockLayer.css
index b64c828123ad..83dfd604639a 100644
--- a/packages/main/src/themes/PopupStaticAreaStyles.css
+++ b/packages/main/src/themes/PopupBlockLayer.css
@@ -1,16 +1,17 @@
.ui5-block-layer {
- display: none;
position: fixed;
background-color: var(--_ui5_popup_block_layer_background);
top: -500px;
left: -500px;
right: -500px;
+ width: auto;
+ height: auto;
bottom: -500px;
outline: none;
pointer-events: all;
- z-index: -1;
}
-.ui5-block-layer:not([hidden]) {
- display: inline-block;
-}
\ No newline at end of file
+:host .ui5-block-layer {
+ width: auto;
+ height: auto;
+}
diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
index 1b961347ea7c..90051c6c1b60 100644
--- a/packages/main/src/themes/PopupsCommon.css
+++ b/packages/main/src/themes/PopupsCommon.css
@@ -1,5 +1,4 @@
:host {
- display: none;
position: fixed;
background: var(--sapGroup_ContentBackground);
border-radius: var(--_ui5_popup_border_radius);
diff --git a/packages/main/src/themes/base/PopupStaticAreaStyles-parameters.css b/packages/main/src/themes/base/PopupBlockLayer-parameters.css
similarity index 100%
rename from packages/main/src/themes/base/PopupStaticAreaStyles-parameters.css
rename to packages/main/src/themes/base/PopupBlockLayer-parameters.css
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
index 7191125c99a7..b9ecc8dd4925 100644
--- a/packages/main/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -29,7 +29,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
index 59624f688ef6..1443a3552489 100644
--- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -29,7 +29,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
index faee98322c2e..08a90bcee04f 100644
--- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -29,7 +29,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
index e923170baafc..7bd8301ba617 100644
--- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -28,7 +28,7 @@
@import "../base/Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "../base/PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "../base/ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 546116c0da1a..1fe5318b5071 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -28,7 +28,7 @@
@import "../base/Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "../base/PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "../base/ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 5e8733cfdd3a..6c79ac2b4335 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -30,7 +30,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index 8717ecd9f146..a17cd289aa19 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -29,7 +29,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
index 51a870edc6c7..3df7a9e4734f 100644
--- a/packages/main/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -32,7 +32,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "./ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
index 8aa4a04755ac..38a7d8293757 100644
--- a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -32,7 +32,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "../sap_horizon/ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
index 5cd546bfc639..7ac7ac464eda 100644
--- a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -30,7 +30,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "./ProgressIndicator-parameters";
@import "./RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
index 32685a0c2bcc..da3700f15033 100644
--- a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -30,7 +30,7 @@
@import "./Panel-parameters.css";
@import "../base/Popover-parameters.css";
@import "./PopupsCommon-parameters.css";
-@import "../base/PopupStaticAreaStyles-parameters.css";
+@import "../base/PopupBlockLayer-parameters.css";
@import "../sap_horizon_hcb/ProgressIndicator-parameters";
@import "./RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
diff --git a/packages/main/test/pageobjects/DatePickerTestPage.js b/packages/main/test/pageobjects/DatePickerTestPage.js
index 7a350dc474b7..a8537515a73d 100644
--- a/packages/main/test/pageobjects/DatePickerTestPage.js
+++ b/packages/main/test/pageobjects/DatePickerTestPage.js
@@ -15,13 +15,8 @@ class DatePickerTestPage {
this._url = url;
}
- async getStaticAreaItemClassName() {
- return browser.getStaticAreaItemClassName(this._sut);
- }
-
async getPopover() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ return browser.$(this._sut).shadow$("ui5-responsive-popover");
}
async getPopoverContent() {
@@ -37,13 +32,12 @@ class DatePickerTestPage {
return browser.$(this._sut).shadow$("ui5-input");
}
- async getInnerInput() {
- return browser.$(this._sut).shadow$("ui5-input").shadow$("input");
+ async getInputPopover() {
+ return browser.$(this._sut).shadow$("ui5-input").shadow$("ui5-popover");
}
- async getInputStaticAreaItem() {
- const input = await this.getInput();
- return browser.$(`.${await input.getProperty("_id")}`);
+ async getInnerInput() {
+ return browser.$(this._sut).shadow$("ui5-input").shadow$("input");
}
async hasIcon() {
@@ -57,85 +51,81 @@ class DatePickerTestPage {
}
async getBtnPrev() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-prev]`);
+
+ return browser.$(this._sut).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-prev]`);
}
async getBtnNext() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-next]`);
+
+ return browser.$(this._sut).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-next]`);
}
async getBtnYear() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-year]`);
+
+ return browser.$(this._sut).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-year]`);
}
async getBtnMonth() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-month]`);
+
+ return browser.$(this._sut).shadow$("ui5-calendar").shadow$(`ui5-calendar-header`).shadow$(`div[data-ui5-cal-header-btn-month]`);
}
async getDayPicker() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
+
+ return browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
}
async getPickerDate(timestamp) {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`div[data-sap-timestamp="${timestamp}"]`);
+
+ return browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`div[data-sap-timestamp="${timestamp}"]`);
}
async getPickerMonth(timestamp) {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-monthpicker`).shadow$(`div[data-sap-timestamp="${timestamp}"]`);
+
+ return browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-monthpicker`).shadow$(`div[data-sap-timestamp="${timestamp}"]`);
}
async getPickerYear(timestamp) {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-yearpicker`).shadow$(`div[data-sap-timestamp="${timestamp}"]`);
+
+ return browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-yearpicker`).shadow$(`div[data-sap-timestamp="${timestamp}"]`);
}
async getFirstDisplayedDate() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`div.ui5-dp-item`);
+
+ return browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`div.ui5-dp-item`);
}
async getFirstDisplayedYear() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-yearpicker`).shadow$(`div.ui5-yp-item`);
+
+ return browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-yearpicker`).shadow$(`div.ui5-yp-item`);
}
async getDisplayedYear(index) {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- const items = await browser
- .$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-yearpicker`).shadow$(`.ui5-yp-root`)
+
+ const items = await browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-yearpicker`).shadow$(`.ui5-yp-root`)
.$$(".ui5-yp-item");
return items[index];
}
async getDisplayedMonth(index) {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- const items = await browser
- .$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-monthpicker`).shadow$(`.ui5-mp-root`)
+
+ const items = await browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-monthpicker`).shadow$(`.ui5-mp-root`)
.$$(".ui5-mp-item");
return items[index];
}
async getDisplayedDay(index) {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- const items = await browser
- .$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$$(".ui5-dp-item");
+
+ const items = await browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$$(".ui5-dp-item");
return items[index];
}
async getDayPickerContent() {
- const staticAreaItemClassName = await this.getStaticAreaItemClassName();
- return browser
- .$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`.ui5-dp-root`).$$(".ui5-dp-content > div");
+
+ return browser.$(this._sut).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`).shadow$(`.ui5-dp-root`).$$(".ui5-dp-content > div");
}
async getDayPickerDayNames() {
diff --git a/packages/main/test/pageobjects/TabContainerTestPage.js b/packages/main/test/pageobjects/TabContainerTestPage.js
index 8a1133322b88..b657ca85aa66 100644
--- a/packages/main/test/pageobjects/TabContainerTestPage.js
+++ b/packages/main/test/pageobjects/TabContainerTestPage.js
@@ -1,7 +1,7 @@
class TabContainerTestPage {
async getItemsIds(tabContainerId) {
const items = await browser.$$(`#${tabContainerId} > *`);
-
+
return Promise.all(items.map(item => item.getAttribute("id")));
}
@@ -32,8 +32,7 @@ class TabContainerTestPage {
}
async getCurrentPopoverItems(tabContainerId) {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName(`#${tabContainerId}`);
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$(`#${tabContainerId}`).shadow$("ui5-responsive-popover");
return popover.$$("[ui5-li-custom]");
}
diff --git a/packages/main/test/specs/Breadcrumbs.spec.js b/packages/main/test/specs/Breadcrumbs.spec.js
index d91fa5ee0268..c084263b7682 100644
--- a/packages/main/test/specs/Breadcrumbs.spec.js
+++ b/packages/main/test/specs/Breadcrumbs.spec.js
@@ -49,8 +49,7 @@ describe("Breadcrumbs general interaction", () => {
// Act
await overflowArrowLink.click(); // open the overflow
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#breadcrumbs1");
- const firstItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[0];
+ const firstItem = (await browser.$(`#breadcrumbs1`).shadow$$("ui5-li"))[0];
await firstItem.click();
@@ -159,8 +158,7 @@ describe("Breadcrumbs general interaction", () => {
await browser.url(`test/pages/Breadcrumbs.html`);
const externalElement = (await browser.$("#breadcrumbsWithAccName").shadow$$("ui5-link"))[3];
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#breadcrumbs1");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$(`#breadcrumbs1`).shadow$("ui5-responsive-popover");
await externalElement.click();
await externalElement.keys("Tab");
@@ -173,8 +171,7 @@ describe("Breadcrumbs general interaction", () => {
await browser.url(`test/pages/Breadcrumbs.html`);
const externalElement = (await browser.$("#breadcrumbsWithAccName").shadow$$("ui5-link"))[3];
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#breadcrumbs1");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$(`#breadcrumbs1`).shadow$("ui5-responsive-popover");
await externalElement.click();
await externalElement.keys("Tab");
@@ -190,8 +187,7 @@ describe("Breadcrumbs general interaction", () => {
await browser.url(`test/pages/Breadcrumbs.html`);
const externalElement = (await browser.$("#breadcrumbsWithAccName").shadow$$("ui5-link"))[3];
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#breadcrumbs1");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$(`#breadcrumbs1`).shadow$("ui5-responsive-popover");
await externalElement.click();
await externalElement.keys("Tab");
@@ -206,8 +202,7 @@ describe("Breadcrumbs general interaction", () => {
it("renders accessible names of overflowing link items", async () => {
await browser.url(`test/pages/Breadcrumbs.html`);
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#breadcrumbsWithAccName"),
- listItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[1],
+ const listItem = (await browser.$(`#breadcrumbsWithAccName`).shadow$$("ui5-li"))[1],
expectedAriaLabel = "first link acc name";
// Check
diff --git a/packages/main/test/specs/ColorPalette.spec.js b/packages/main/test/specs/ColorPalette.spec.js
index b8e0d0513fa0..6f4b5d84a7c5 100644
--- a/packages/main/test/specs/ColorPalette.spec.js
+++ b/packages/main/test/specs/ColorPalette.spec.js
@@ -79,8 +79,7 @@ describe("ColorPalette interactions", () => {
await colorPaletteMoreColorsButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#cp3");
- const colorPicker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-color-picker");
+ const colorPicker = await browser.$(`#cp3`).shadow$("ui5-color-picker");
assert.ok(colorPicker, "Color picker is rendered");
diff --git a/packages/main/test/specs/ComboBox.mobile.spec.js b/packages/main/test/specs/ComboBox.mobile.spec.js
index c4112db37940..8815198f399c 100644
--- a/packages/main/test/specs/ComboBox.mobile.spec.js
+++ b/packages/main/test/specs/ComboBox.mobile.spec.js
@@ -8,25 +8,24 @@ describe("Basic mobile picker rendering and interaction", () => {
it("Should render properly the mobile picker", async () => {
const combo = await browser.$("#combo2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2")
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]");
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
assert.ok(await dialogInput.isDisplayed(), "Input is displayed");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogCloseButton = await combo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
assert.ok(await dialogCloseButton.isDisplayed(), "Close icon is displayed");
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await combo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
assert.ok(await dialogOkButton.isDisplayed(), "Ok button is displayed");
});
it("Should close the mobile picker dialog when pressing the close button", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2");
- const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const combo = await browser.$("#combo2");
+ const picker = await combo.shadow$("ui5-responsive-popover");
+ const dialogCloseButton = await picker.$(".ui5-responsive-popover-close-btn");
assert.ok(await picker.isDisplayed(), "Picker is still opened");
@@ -37,9 +36,8 @@ describe("Basic mobile picker rendering and interaction", () => {
it("Should close the mobile picker dialog when pressing the OK button", async () => {
const combo = await browser.$("#combo2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2");
- const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const picker = await combo.shadow$("ui5-responsive-popover");
+ const dialogOkButton = await combo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await combo.scrollIntoView();
await combo.click();
@@ -53,12 +51,11 @@ describe("Basic mobile picker rendering and interaction", () => {
it("Should propagate the placeholder to the internal input", async () => {
const combo = await browser.$("#placeholder_test");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#placeholder_test");
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]");
+ const dialogInput = await browser.$(`#placeholder_test`).shadow$("ui5-responsive-popover").$("[ui5-input]");
assert.strictEqual(await dialogInput.getAttribute("placeholder"), await combo.getAttribute("placeholder"), "Correct placeholder shown");
});
});
@@ -71,12 +68,11 @@ describe("Eventing", () => {
it("Should fire change event with correct parameters on item press", async () => {
const combo = await browser.$("#change-cb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#change-cb")
await combo.scrollIntoView();
await combo.click();
- const suggestionItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[1];
+ const suggestionItem = await combo.shadow$("ui5-responsive-popover").$$("ui5-li")[1];
await suggestionItem.click();
assert.strictEqual(await combo.getAttribute("value"), "Bulgaria", "The combo box's value is updated properly");
@@ -90,12 +86,11 @@ describe("Eventing", () => {
it("Should fire input event with correct parameters when typing in internal input", async () => {
const combo = await browser.$("#input-cb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#input-cb");
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]").shadow$("input");
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]").shadow$("input");
await dialogInput.keys("A");
await dialogInput.keys("B");
@@ -107,19 +102,18 @@ describe("Eventing", () => {
const inputCountText = await browser.$("#input-count").getText();
assert.strictEqual(inputCountText, "3", "Change was fired once");
- await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn").click();
+ await combo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn").click();
});
it("Should not fire change event when pressing the picker's Close button", async () => {
await browser.url("test/pages/ComboBox.html");
const combo = await browser.$("#change-cb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#change-cb")
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]");
- const closeButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
+ const closeButton = await combo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
await dialogInput.shadow$("input").keys("A");
await closeButton.click();
@@ -135,13 +129,11 @@ describe("Eventing", () => {
it("Should fire change event when pressing the picker's OK button", async () => {
const combo = await browser.$("#change-cb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#change-cb")
-
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]");
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
+ const dialogOkButton = await combo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await dialogInput.setProperty("value", "");
await dialogInput.shadow$("input").keys("A");
@@ -160,11 +152,10 @@ describe("Eventing", () => {
it ("When select an item, then open the dialog again and delete the text, then press OK button, the value should be deleted.", async ()=> {
const cb = await browser.$("#combo2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2");
await cb.click();
- const resPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const resPopover = await cb.shadow$("ui5-responsive-popover");
const dialogInput = await resPopover.$("[ui5-input]");
const okBtn = await resPopover.$(".ui5-responsive-popover-footer").$("ui5-button");
@@ -190,11 +181,10 @@ describe("Eventing", () => {
it ("Should set clear icon to dialog's input", async () => {
const cb = await $("#clear-icon-cb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#clear-icon-cb");
await cb.shadow$("input").click();
- const resPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const resPopover = await cb.shadow$("ui5-responsive-popover");
const dialogInput = await resPopover.$("[ui5-input]");
assert.ok(await dialogInput.getProperty("showClearIcon"), "Clear icon should be propagated to internal ui5-input")
@@ -210,12 +200,11 @@ describe("Typeahead", () => {
it("Should autocomplete the first matched suggestion item", async () => {
const combo = await browser.$("#combo2");
const sExpected = "Bulgaria";
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2")
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]");
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
await dialogInput.shadow$("input").click();
@@ -229,12 +218,11 @@ describe("Typeahead", () => {
await browser.url("test/pages/ComboBox.html");
const combo = await browser.$("#combo-without-type-ahead");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-without-type-ahead")
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]").shadow$("input");
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]").shadow$("input");
await dialogInput.keys("b");
assert.strictEqual(await dialogInput.getProperty("value"), "b", "Value is not autocompleted");
});
@@ -248,13 +236,12 @@ describe("Picker filtering", () => {
it("Should filter items", async () => {
const combo = await browser.$("#value-state-grouping");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-grouping")
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]");
- const dialogList = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$('ui5-list')
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
+ const dialogList = await combo.shadow$("ui5-responsive-popover").$('ui5-list')
assert.strictEqual(await dialogList.$$('ui5-li').length, 8, "All of the items are shown (8)");
await dialogInput.keys("B");
@@ -265,13 +252,12 @@ describe("Picker filtering", () => {
await browser.url("test/pages/ComboBox.html");
const combo = await browser.$("#value-state-grouping");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-grouping")
await combo.scrollIntoView();
await combo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("[ui5-input]");
- const dialogList = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$('ui5-list')
+ const dialogInput = await combo.shadow$("ui5-responsive-popover").$("[ui5-input]");
+ const dialogList = await combo.shadow$("ui5-responsive-popover").$('ui5-list')
assert.strictEqual(await dialogList.$$('ui5-li-groupheader').length, 3, "All of the group header list items are shown (3)");
await dialogInput.keys("B");
@@ -288,12 +274,11 @@ describe("Value state header", () => {
it("Should show value state header inside mobile dialog", async () => {
const combo = await browser.$("#value-state-grouping");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-grouping")
await combo.scrollIntoView();
await combo.click();
- const dialogStateHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
+ const dialogStateHeader = await combo.shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
assert.strictEqual(await dialogStateHeader.isDisplayed(), true, "The value state header is shown");
});
diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js
index 4d97438c102e..7b70b263d4e3 100644
--- a/packages/main/test/specs/ComboBox.spec.js
+++ b/packages/main/test/specs/ComboBox.spec.js
@@ -7,8 +7,7 @@ describe("General interaction", () => {
const combo = await browser.$("#combo");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
assert.notOk(await popover.getProperty("opened"), "Popover should not be displayed")
@@ -20,8 +19,7 @@ describe("General interaction", () => {
it ("Should close the popover when clicking on the arrow second time", async () => {
const combo = await $("#combo");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
assert.ok(await popover.getProperty("opened"), "Popover should be displayed")
@@ -36,8 +34,7 @@ describe("General interaction", () => {
const combo = await browser.$("#combo");
const arrow = await combo.shadow$("[input-icon]");
const input = await combo.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
// act
@@ -62,8 +59,7 @@ describe("General interaction", () => {
const combo = await browser.$("#combo");
const lazy = await browser.$("#lazy");
const input = await combo.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
await input.click();
await input.keys("b");
@@ -94,8 +90,7 @@ describe("General interaction", () => {
const combo = await browser.$("#cb-filter-none");
const input = await combo.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#cb-filter-none");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
// act
@@ -120,8 +115,7 @@ describe("General interaction", () => {
const combo = await browser.$("#combo2");
const arrow = await combo.shadow$("[input-icon]");
const input = await combo.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
// act
@@ -161,8 +155,7 @@ describe("General interaction", () => {
const combo = await browser.$("#combo2");
const arrow = await combo.shadow$("[input-icon]");
const input = await combo.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
// act
@@ -230,8 +223,7 @@ describe("General interaction", () => {
await arrow.click();
// click on first item
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#change-cb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
await (await popover.$("ui5-list").$$("ui5-li")[0]).click();
assert.strictEqual(await placeholder.getText(), "Argentina", "Text should not be empty");
@@ -271,8 +263,7 @@ describe("General interaction", () => {
assert.strictEqual(await counter.getText(), "0", "Call count should be 0");
// click on first item
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-error");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
const link = await popover.$(".ui5-responsive-popover-header.ui5-valuestatemessage-root a");
await link.click();
@@ -329,8 +320,7 @@ describe("General interaction", () => {
await input.keys("Bulgaria");
// Click on the item
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#change-cb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
await (await popover.$("ui5-list").$$("ui5-li")[0]).click();
@@ -379,8 +369,7 @@ describe("General interaction", () => {
await input.keys("a");
// click on first item
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#change-cb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
await (await popover.$("ui5-list").$$("ui5-li"))[0].click();
assert.strictEqual(await placeholder.getText(), "Argentina", "Text should be empty");
@@ -421,8 +410,7 @@ describe("General interaction", () => {
const combo = await browser.$("#contains-cb");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#contains-cb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
await arrow.click();
@@ -449,8 +437,7 @@ describe("General interaction", () => {
const combo = await browser.$("#startswith-cb");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#startswith-cb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
await arrow.click();
@@ -473,8 +460,7 @@ describe("General interaction", () => {
const combo = await browser.$("#combo");
const label = await browser.$("#selection-change-event-result");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
await arrow.click();
@@ -491,8 +477,7 @@ describe("General interaction", () => {
const combo = await browser.$("#combo");
let label = await browser.$("#selection-change-event-result");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
await arrow.click();
@@ -532,9 +517,8 @@ describe("General interaction", () => {
it ("Tests Combo with two-column layout", async () => {
const combo = await browser.$("#combobox-two-column-layout");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combobox-two-column-layout");
const arrow = await combo.shadow$("[input-icon]");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
const listItem = await popover.$("ui5-list").$$("ui5-li")[0];
await arrow.click();
@@ -545,8 +529,7 @@ describe("General interaction", () => {
await browser.url(`test/pages/ComboBox.html`);
const cb = await browser.$("#readonly-value-state-cb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#readonly-value-state-cb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await cb.shadow$("ui5-popover");
await cb.click();
assert.notOk(await popover.isDisplayedInViewport(), "Popover with valueStateMessage should not be opened.");
@@ -562,12 +545,11 @@ describe("General interaction", () => {
await btn.click();
await arrow.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#dynamic-items");
- const initialListItems = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li");
+ const initialListItems = await cb.shadow$("ui5-responsive-popover").$$("ui5-li");
await browser.pause(2000);
- const updatedListItems = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li");
+ const updatedListItems = await cb.shadow$("ui5-responsive-popover").$$("ui5-li");
assert.notEqual(initialListItems.length, updatedListItems.length, "item count should be updated");
});
@@ -616,8 +598,7 @@ describe("General interaction", () => {
await input.keys("z");
await arrow.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await cb.shadow$("ui5-responsive-popover");
let listItems = await popover.$("ui5-list").$$("ui5-li");
// assert
@@ -633,8 +614,7 @@ describe("Grouping", () => {
const combo = await browser.$("#combo-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-grouping");
- let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ let popover = await combo.shadow$("ui5-responsive-popover");
let groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
let listItems = await popover.$("ui5-list").$$("ui5-li");
@@ -644,7 +624,7 @@ describe("Grouping", () => {
await input.keys("c");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ popover = await combo.shadow$("ui5-responsive-popover");
groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
listItems = await popover.$("ui5-list").$$("ui5-li");
@@ -658,8 +638,7 @@ describe("Grouping", () => {
const combo = await browser.$("#combo-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let groupItem;
await arrow.click();
@@ -674,8 +653,7 @@ describe("Grouping", () => {
const combo = await browser.$("#combo-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let groupItem;
await input.keys("a");
@@ -698,8 +676,7 @@ describe("Grouping", () => {
const combo = await browser.$("#combo-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
await input.click();
await input.keys("a");
@@ -840,8 +817,7 @@ describe("Accessibility", async () => {
const cbSuccess = await browser.$("#vs-success-default");
const cbInformation = await browser.$("#vs-information-default");
- let staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-warning-default");
- let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ let popover = await cbWarning.shadow$("ui5-popover");
await cbWarning.click();
@@ -854,8 +830,7 @@ describe("Accessibility", async () => {
await cbWarning.keys("Escape");
await cbInformation.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-information-default");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ popover = await cbInformation.shadow$("ui5-popover");
ariaHiddenText = await cbInformation.shadow$(".ui5-hidden-text").getHTML(false);
valueStateText = await popover.$("div").getHTML(false);
@@ -872,12 +847,11 @@ describe("Accessibility", async () => {
it("Value state type should be added to the screen readers custom value states announcement", async () => {
const cbError = await browser.$("#value-state-error");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-error");
await cbError.click();
await cbError.keys("a");
- const popoverHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover .ui5-valuestatemessage-header");
+ const popoverHeader = await cbError.shadow$("ui5-responsive-popover .ui5-valuestatemessage-header");
const valueStateText = await popoverHeader.$("div").getHTML(false);
const ariaHiddenText = await cbError.shadow$(`#value-state-description`).getHTML(false);
@@ -893,8 +867,7 @@ describe("Keyboard navigation", async () => {
const combo = await browser.$("#combo-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let groupItem, listItem;
await arrow.click();
@@ -925,8 +898,7 @@ describe("Keyboard navigation", async () => {
const combo = await browser.$("#value-state-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let valueStateHeader, groupItem;
await arrow.click();
@@ -957,8 +929,7 @@ describe("Keyboard navigation", async () => {
const combo = await browser.$("#value-state-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItem, prevListItem;
await input.click();
@@ -998,8 +969,7 @@ describe("Keyboard navigation", async () => {
const combo = await browser.$("#value-state-grouping");
const input = await combo.shadow$("#ui5-combobox-input");
const arrow = await combo.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#value-state-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await combo.shadow$("ui5-responsive-popover");
let listItem, prevListItem;
await input.click();
@@ -1056,8 +1026,7 @@ describe("Keyboard navigation", async () => {
const comboBox = await browser.$("#combo2");
const input = await comboBox.shadow$("#ui5-combobox-input");
const pickerIcon = await comboBox.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await comboBox.shadow$("ui5-responsive-popover");
let listItem;
// Opened picker
@@ -1109,8 +1078,7 @@ describe("Keyboard navigation", async () => {
const comboBox = await browser.$("#same-name-suggestions-cb");
const input = await comboBox.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#same-name-suggestions-cb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await comboBox.shadow$("ui5-responsive-popover");
// Opened picker
await input.click();
@@ -1134,8 +1102,7 @@ describe("Keyboard navigation", async () => {
const comboBox = await browser.$("#combo-without-type-ahead");
const input = await comboBox.shadow$("#ui5-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-without-type-ahead");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await comboBox.shadow$("ui5-responsive-popover");
await input.click();
await input.keys("b");
diff --git a/packages/main/test/specs/DatePicker.spec.js b/packages/main/test/specs/DatePicker.spec.js
index 813464edc523..ab4ccf9c9105 100644
--- a/packages/main/test/specs/DatePicker.spec.js
+++ b/packages/main/test/specs/DatePicker.spec.js
@@ -69,8 +69,7 @@ describe("Date Picker Tests", () => {
const input = await datepicker.getInput();
await input.click();
- const inputStaticAreaItem = await datepicker.getInputStaticAreaItem();
- const popover = await inputStaticAreaItem.shadow$("ui5-popover");
+ const popover = await datepicker.getInputPopover();
const slot = await popover.$("#coolValueStateMessage");
assert.notOk(slot.error, "Value State message slot is working");
@@ -1355,7 +1354,7 @@ describe("Date Picker Tests", () => {
let currentPicker = await calendar.getProperty("_currentPicker");
assert.equal(currentPicker, "month", "calendar is opened on months");
-
+
await datepickerRoot.setAttribute("format-pattern", "yyyy, dd/MM");
await datepicker.openPicker();
currentPicker = await calendar.getProperty("_currentPicker");
diff --git a/packages/main/test/specs/DateRangePicker.spec.js b/packages/main/test/specs/DateRangePicker.spec.js
index 7924c899fc36..00605f7df745 100644
--- a/packages/main/test/specs/DateRangePicker.spec.js
+++ b/packages/main/test/specs/DateRangePicker.spec.js
@@ -27,8 +27,7 @@ describe("DateRangePicker general interaction", () => {
});
it("Selected dates are updated after value update in the input field", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#daterange-picker3");
- const dayPicker = await browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
+ const dayPicker = await browser.$("#daterange-picker3").shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
const firstDateTimestamp = 1599609600;
assert.strictEqual(await dayPicker.getProperty("timestamp"), firstDateTimestamp, "The first date is selected");
@@ -101,8 +100,7 @@ describe("DateRangePicker general interaction", () => {
})
it("Change event fired once", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#daterange-picker1");
- const dayPicker = await browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
+ const dayPicker = await browser.$(`#daterange-picker1`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
const dayOne = await dayPicker.shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$$("div > .ui5-dp-item" )[5];
const dayTwo = await dayPicker.shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$$("div > .ui5-dp-item" )[15];
const daterangepicker = await browser.$("#daterange-picker1");
@@ -210,10 +208,9 @@ describe("DateRangePicker general interaction", () => {
it("Month is not changed in multiselect mode", async () => {
await browser.url(`test/pages/DateRangePicker.html`);
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#daterange-picker1");
const daterangepicker = await browser.$("#daterange-picker1");
- const calendarHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-calendar-header`);
- const dayPicker = await browser.$(`.${staticAreaItemClassName}`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
+ const calendarHeader = await browser.$(`#daterange-picker1`).shadow$(`ui5-calendar`).shadow$(`ui5-calendar-header`);
+ const dayPicker = await browser.$(`#daterange-picker1`).shadow$(`ui5-calendar`).shadow$(`ui5-daypicker`);
const dayOne = await dayPicker.shadow$(`.ui5-dp-root`).$(".ui5-dp-content").$$("div > .ui5-dp-item" )[15];
const nextButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-next]`);
const monthButton = await calendarHeader.shadow$(`[data-ui5-cal-header-btn-month]`);
@@ -254,7 +251,7 @@ describe("DateRangePicker general interaction", () => {
it("Min and max dates are set without format-pattern by using ISO (YYYY-MM-dd) format", async () => {
await browser.url(`test/pages/DateRangePicker.html?sap-ui-language=bg`);
-
+
const daterangepicker = await browser.$("#daterange-picker8");
const dateRangePickerInput = await daterangepicker.shadow$("ui5-input");
diff --git a/packages/main/test/specs/DateTimePicker.spec.js b/packages/main/test/specs/DateTimePicker.spec.js
index c7b0562321ea..4683a045bcbf 100644
--- a/packages/main/test/specs/DateTimePicker.spec.js
+++ b/packages/main/test/specs/DateTimePicker.spec.js
@@ -21,8 +21,7 @@ const isPickerOpen = id => {
};
const getPicker = async id => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName(`#${id}`);
- return browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ return browser.$(`#${id}`).shadow$("ui5-responsive-popover");
};
const getSubmitButton = async id => {
diff --git a/packages/main/test/specs/Dialog.spec.js b/packages/main/test/specs/Dialog.spec.js
index ef512ef070d4..c7566c36a8af 100644
--- a/packages/main/test/specs/Dialog.spec.js
+++ b/packages/main/test/specs/Dialog.spec.js
@@ -33,40 +33,6 @@ describe("Dialog general interaction", () => {
assert.notOk(await dialog.isDisplayedInViewport(), "Dialog is closed.");
});
- it("tests popover in dialog", async () => {
- const btnOpenDialog = await browser.$("#btnOpenDialog");
- const select = await browser.$("#mySelect");
-
- await btnOpenDialog.click();
- await select.click();
-
- const dialogZIndex = parseInt((await browser.$("#dialog").getCSSProperty("z-index")).value);
- const popoverZIndex = parseInt((await browser.$(`.${await select.getProperty("_id")}`).shadow$("ui5-responsive-popover").getCSSProperty("z-index")).value);
-
- assert.ok(popoverZIndex > dialogZIndex, "Popover is above dialog.");
- });
-
- it("tests dialog lifecycle", async () => {
- await browser.url(`test/pages/DialogLifecycle.html`);
-
- let staticAreaItem = await browser.$("ui5-static-area>ui5-static-area-item");
- assert.notOk(await staticAreaItem.isExisting(), "No static area item.");
-
- const openDialogButton = await browser.$("#openDialogButton");
- await openDialogButton.click();
-
- staticAreaItem = await browser.$("ui5-static-area>ui5-static-area-item");
- assert.ok(await staticAreaItem.isExisting(), "Static area item exists.");
-
- const closeDialogButton = await browser.$("#closeDialogButton");
- await closeDialogButton.click();
-
- /* To be returned when renderFinished correctly awaits for disconnectedCallback to be fired and processed
- staticAreaItem = await browser.$("ui5-static-area>ui5-static-area-item");
- assert.notOk(await staticAreaItem.isExisting(), "No static area item.");
- */
- });
-
it("dialog repositions after screen resize", async () => {
await browser.url(`test/pages/Dialog.html`);
@@ -690,7 +656,7 @@ describe("Responsive paddings", async () => {
const dialog = await browser.$("#dialog");
assert.strictEqual(await dialog.getAttribute("media-range"), "M", "dialog has correct media range");
-
+
await browser.$("#btnCloseDialog").click();
});
});
@@ -745,9 +711,7 @@ describe("Block layers", () => {
it("test dialog overlay when dialog isn't open", async () => {
const isBlockLayerHidden = await browser.executeAsync(async (done) => {
const dialog = document.getElementById("dialog");
- const staticAreaItemDomRef = await dialog.getStaticAreaItemDomRef();
-
- done(staticAreaItemDomRef.querySelector(".ui5-block-layer").hasAttribute("hidden"));
+ done(!dialog.shadowRoot.querySelector(".ui5-block-layer").matches(":popover-open"));
});
assert.ok(isBlockLayerHidden, "the block layer is hidden");
@@ -758,9 +722,9 @@ describe("Block layers", () => {
const isBlockLayerHidden = await browser.executeAsync(async (done) => {
const dialog = document.getElementById("dialogOverDialog1");
- const staticAreaItemDomRef = await dialog.getStaticAreaItemDomRef();
- done(staticAreaItemDomRef.querySelector(".ui5-block-layer").hasAttribute("hidden"));
+
+ done(!dialog.shadowRoot.querySelector(".ui5-block-layer").matches(":popover-open"));
});
assert.notOk(isBlockLayerHidden, "the block layer is visible");
@@ -774,18 +738,18 @@ describe("Block layers", () => {
let isBlockLayerHidden = await browser.executeAsync(async (done) => {
const dialog = document.getElementById("dialogOverDialog1");
- const staticAreaItemDomRef = await dialog.getStaticAreaItemDomRef();
- done(staticAreaItemDomRef.querySelector(".ui5-block-layer").hasAttribute("hidden"));
+
+ done(!dialog.shadowRoot.querySelector(".ui5-block-layer").matches(":popover-open"));
});
assert.ok(isBlockLayerHidden, "the block layer is hidden");
isBlockLayerHidden = await browser.executeAsync(async (done) => {
const dialog = document.getElementById("dialogOverDialog2");
- const staticAreaItemDomRef = await dialog.getStaticAreaItemDomRef();
- done(staticAreaItemDomRef.querySelector(".ui5-block-layer").hasAttribute("hidden"));
+
+ done(!dialog.shadowRoot.querySelector(".ui5-block-layer").matches(":popover-open"));
});
assert.notOk(isBlockLayerHidden, "the block layer is visible");
@@ -794,9 +758,9 @@ describe("Block layers", () => {
isBlockLayerHidden = await browser.executeAsync(async (done) => {
const dialog = document.getElementById("dialogOverDialog1");
- const staticAreaItemDomRef = await dialog.getStaticAreaItemDomRef();
- done(staticAreaItemDomRef.querySelector(".ui5-block-layer").hasAttribute("hidden"));
+
+ done(!dialog.shadowRoot.querySelector(".ui5-block-layer").matches(":popover-open"));
});
assert.notOk(isBlockLayerHidden, "the block layer is visible");
@@ -805,11 +769,11 @@ describe("Block layers", () => {
isBlockLayerHidden = await browser.executeAsync(async (done) => {
const dialog = document.getElementById("dialogOverDialog1");
- const staticAreaItemDomRef = await dialog.getStaticAreaItemDomRef();
- done(staticAreaItemDomRef.querySelector(".ui5-block-layer").hasAttribute("hidden"));
+
+ done(!dialog.shadowRoot.querySelector(".ui5-block-layer").matches(":popover-open"));
});
assert.ok(isBlockLayerHidden, "the block layer is hidden");
});
-});
\ No newline at end of file
+});
diff --git a/packages/main/test/specs/Input.mobile.spec.js b/packages/main/test/specs/Input.mobile.spec.js
index 6a05ff258f4b..b3d6e2b567cd 100644
--- a/packages/main/test/specs/Input.mobile.spec.js
+++ b/packages/main/test/specs/Input.mobile.spec.js
@@ -8,34 +8,30 @@ describe("Basic mobile picker rendering and interaction", () => {
it("Should render properly the mobile picker", async () => {
const input = await browser.$("#myInput2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput2")
await input.scrollIntoView();
await input.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogInput = await input.shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
assert.ok(await dialogInput.isDisplayed(), "Input is displayed");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogCloseButton = await input.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
assert.ok(await dialogCloseButton.isDisplayed(), "Close icon is displayed");
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await input.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
assert.ok(await dialogOkButton.isDisplayed(), "Ok button is displayed");
});
it("Should focus the input after picker is opened", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput2")
-
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogInput = await browser.$("#myInput2").shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
assert.ok(await dialogInput.isDisplayed(), "Input is displayed");
assert.strictEqual(await dialogInput.getAttribute("focused"), "", "Input is focused");
});
it("Should close the mobile picker dialog when pressing the close button", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput2");
- const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const picker = await browser.$("#myInput2").shadow$("ui5-responsive-popover");
+ const dialogCloseButton = await browser.$("#myInput2").shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
assert.ok(await picker.isDisplayed(), "Picker is still opened");
@@ -46,9 +42,8 @@ describe("Basic mobile picker rendering and interaction", () => {
it("Should close the mobile picker dialog when pressing the OK button", async () => {
const input = await browser.$("#myInput2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput2");
- const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const picker = await input.shadow$("ui5-responsive-popover");
+ const dialogOkButton = await picker.$(".ui5-responsive-popover-footer").$("ui5-button");
await input.scrollIntoView();
await input.click();
@@ -62,12 +57,11 @@ describe("Basic mobile picker rendering and interaction", () => {
it("Should propagate the placeholder to the internal input", async () => {
const input = await browser.$("#myInput");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput");
await input.scrollIntoView();
await input.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogInput = await input.shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
assert.strictEqual(await dialogInput.getAttribute("placeholder"), await input.getAttribute("placeholder"), "Correct placeholder shown");
});
});
@@ -82,15 +76,14 @@ describe("Eventing", () => {
const input = await browser.$("#myInput");
const sExpectedSelectedKey = "Bg";
const sChangeText = "Bulgaria";
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput")
await input.scrollIntoView();
await input.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogInput = await input.shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
await dialogInput.keys("b");
- const suggestionItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li-suggestion-item")[2];
+ const suggestionItem = await input.shadow$("ui5-responsive-popover").$$("ui5-li-suggestion-item")[2];
await suggestionItem.click();
@@ -114,12 +107,11 @@ describe("Typeahead", () => {
it("Should autocomplete the first matched suggestion item", async () => {
const input = await browser.$("#myInput2");
const sExpected = "Cozy";
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput2")
await input.scrollIntoView();
await input.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogInput = await input.shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
await dialogInput.keys("c");
assert.strictEqual(await dialogInput.getProperty("value"), sExpected, "Value is autocompleted");
});
@@ -128,12 +120,11 @@ describe("Typeahead", () => {
await browser.url("test/pages/Input.html");
const input = await browser.$("#input-disabled-autocomplete");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#input-disabled-autocomplete")
await input.scrollIntoView();
await input.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogInput = await input.shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
await dialogInput.keys("c");
assert.strictEqual(await dialogInput.getProperty("value"), "c", "Value is not autocompleted");
@@ -148,12 +139,11 @@ describe("Clear icon", () => {
it("Showld show the clear icon of the dialog's input when text is entered", async () => {
const input = await browser.$("#clear-input-suggestions");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#clear-input-suggestions")
await input.scrollIntoView();
await input.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogInput = await input.shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
assert.strictEqual(await dialogInput.getAttribute("_effective-show-clear-icon"), null, "There is no clear icon initially");
await dialogInput.keys("t");
@@ -170,13 +160,12 @@ describe("Picker filtering", () => {
it("Should filter items", async () => {
const input = await browser.$("#myInput");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput")
await input.scrollIntoView();
await input.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
- const dialogList = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$('ui5-list')
+ const dialogInput = await input.shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone");
+ const dialogList = await input.shadow$("ui5-responsive-popover").$('ui5-list')
assert.strictEqual(await dialogList.$$('ui5-li-suggestion-item').length, 0, "There are no filtered items initially");
await dialogInput.keys("B");
@@ -184,8 +173,7 @@ describe("Picker filtering", () => {
});
it("Should filter group header list items", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput")
- const dialogList = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$('ui5-list')
+ const dialogList = await browser.$("#myInput").shadow$("ui5-responsive-popover").$('ui5-list')
assert.strictEqual(await dialogList.$$('ui5-li-groupheader').length, 1, "There is 1 filtered group header");
});
@@ -199,12 +187,11 @@ describe("Value state header", () => {
it("Should show value state header inside mobile dialog", async () => {
const input = await browser.$("#inputError");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputError")
await input.scrollIntoView();
await input.click();
- const dialogStateHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
+ const dialogStateHeader = await input.shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
assert.strictEqual(await dialogStateHeader.isDisplayed(), true, "The value state header is shown");
});
diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js
index b0cacbb05078..ee94150abea1 100644
--- a/packages/main/test/specs/Input.spec.js
+++ b/packages/main/test/specs/Input.spec.js
@@ -59,8 +59,7 @@ describe("Input general interaction", () => {
it("Should not open suggestions popover when focused", async () => {
const input = await browser.$("#myInput2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput2");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await input.shadow$("ui5-responsive-popover");
// focus the input field which will display the suggestions
await input.click();
@@ -315,8 +314,6 @@ describe("Input general interaction", () => {
await input.click();
-
-
// -1.33e-2
// Press Backspace to remove the "2" character
await input.keys("Backspace");
@@ -364,8 +361,8 @@ describe("Input general interaction", () => {
let item;
const suggestionsInput = await browser.$("#myInput").shadow$("input");
const inputResult = await browser.$("#inputResult").shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const input = await browser.$("#myInput");
+ const popover = await input.shadow$("ui5-responsive-popover");
await suggestionsInput.click();
await suggestionsInput.keys("p");
@@ -418,8 +415,8 @@ describe("Input general interaction", () => {
const suggestionsInput = await browser.$("#myInput").shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const input = await browser.$("#myInput");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
// paste a value completely corresponding to item text
await suggestionsInput.click();
@@ -469,8 +466,6 @@ describe("Input general interaction", () => {
const suggestionsInput = await browser.$("#myInputGrouping").shadow$("input");
const inputResult = await browser.$("#inputResultGrouping").shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInputGrouping");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
await suggestionsInput.click();
await suggestionsInput.keys("C");
@@ -489,8 +484,8 @@ describe("Input general interaction", () => {
const changeEventResult = await browser.$("#inputResult").shadow$("input");
const suggestionSelectEventResult = await browser.$("#input-selection-event-test").shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const input = await browser.$("#myInput");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
await suggestionsInput.click();
await suggestionsInput.keys("C");
@@ -516,8 +511,8 @@ describe("Input general interaction", () => {
const changeEventResult = await browser.$("#inputResult").shadow$("input");
const suggestionSelectEventResult = await browser.$("#input-selection-event-test").shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const input = await browser.$("#myInput");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
await suggestionsInput.click();
await suggestionsInput.keys("C");
@@ -543,8 +538,7 @@ describe("Input general interaction", () => {
await browser.url(`test/pages/Input.html`);
const input = await browser.$("#myInputGrouping");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInputGrouping");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
const groupHeader = await respPopover.$("ui5-list").$("ui5-li-groupHeader");
await input.click();
@@ -558,8 +552,7 @@ describe("Input general interaction", () => {
it("checks if the suggestions popover width is minimum the size of the input", async () => {
const input = await browser.$("#myInputGrouping");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInputGrouping");
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
+ const listItem = await input.shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
await input.click();
await input.keys("a");
@@ -569,8 +562,7 @@ describe("Input general interaction", () => {
it("checks if suggestions popover width is maximum 40rem if input isn't wider", async () => {
const input = await browser.$("#long-sugg");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#long-sugg");
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
+ const listItem = await input.shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
await input.click();
await input.keys("a");
@@ -595,9 +587,9 @@ describe("Input general interaction", () => {
it("Checks if valueStateMessage is shown", async () => {
const inputShadowRef = await browser.$("#inputError").shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputError");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-header");
+ const input = await browser.$("#inputError");
+ const popover = await input.shadow$("ui5-popover");
+ const respPopover = await input.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-header");
await inputShadowRef.click();
@@ -617,8 +609,8 @@ describe("Input general interaction", () => {
await browser.pause(2000);
await input.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#dynamic-value-state");
- const valueStatePopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const inputElement = await browser.$("#dynamic-value-state");
+ const valueStatePopover = await inputElement.shadow$("ui5-popover");
const initialContent = await valueStatePopover.$("[slot='valueStateMessage']").getHTML();
await browser.pause(2000);
@@ -663,8 +655,7 @@ describe("Input general interaction", () => {
const inputSuccess = await browser.$("#vs-success-default");
const inputInformation = await browser.$("#vs-information-default");
- let staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-error-default");
- let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ let popover = await inputError.shadow$("ui5-popover");
await inputError.click();
@@ -676,8 +667,7 @@ describe("Input general interaction", () => {
await inputWarning.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-warning-default");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ popover = await inputWarning.shadow$("ui5-popover");
ariaHiddenText = await inputWarning.shadow$(".ui5-hidden-text").getText();
valueStateText = await popover.$("div").getText();
@@ -687,8 +677,7 @@ describe("Input general interaction", () => {
await inputInformation.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#vs-information-default");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ popover = await inputInformation.shadow$("ui5-popover");
ariaHiddenText = await inputInformation.shadow$(".ui5-hidden-text").getText();
valueStateText = await popover.$("div").getText();
@@ -702,14 +691,14 @@ describe("Input general interaction", () => {
it("Value state type should be added to the screen readers custom value states announcement", async () => {
const inputError = await browser.$("#inputError");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputError");
inputError.click();
inputError.keys("a");
- const popoverHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover").$(".ui5-valuestatemessage-header");
+ const popoverHeader = await inputError.shadow$("ui5-popover").$(".ui5-valuestatemessage-header");
const valueStateText = await popoverHeader.$("div").getText();
- const ariaHiddenText = await inputError.shadow$(`#${staticAreaItemClassName}-valueStateDesc`).getText();
+ const _id = await inputError.getProperty("_id");
+ const ariaHiddenText = await inputError.shadow$(`#${_id}-valueStateDesc`).getText();
assert.strictEqual(ariaHiddenText.includes("Value State Error"), true, "Hidden screen reader text is correct");
assert.strictEqual(valueStateText.includes("Custom error value state message"), true, "Displayed value state message text is correct");
@@ -773,8 +762,8 @@ describe("Input general interaction", () => {
await inputItemPreview.keys("ArrowDown");
// assert
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputPreview2");
- const inputPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const inputElement = await browser.$("#inputPreview2")
+ const inputPopover = await inputElement.shadow$("ui5-responsive-popover");
const helpPopover = await browser.$("#quickViewCard2");
assert.strictEqual(await suggestionItemPreviewRes.getValue(), EXPECTED_PREVIEW_ITEM_TEXT, "First item has been previewed");
@@ -798,8 +787,7 @@ describe("Input general interaction", () => {
//act
await button.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputInDialog");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await input.shadow$("ui5-responsive-popover");
const dialog = await browser.$("#inputInDialog");
await input.keys("c");
@@ -909,8 +897,7 @@ describe("Input general interaction", () => {
await browser.url(`test/pages/Input.html`);
const input = await $("#readonly-value-state-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#readonly-value-state-input");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await input.shadow$("ui5-popover");
await input.click();
@@ -1024,8 +1011,7 @@ describe("Input general interaction", () => {
it("Should open suggestions popover if openPicker() is called on focusin", async () => {
const input = await browser.$("#openPickerInput");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#openPickerInput");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await input.shadow$("ui5-responsive-popover");
await input.click();
@@ -1107,8 +1093,7 @@ describe("Input general interaction", () => {
return done(document.getElementById("change-event-value").openPicker());
});
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#change-event-value");
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
+ const listItem = await input.shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
await listItem.click();
@@ -1153,13 +1138,12 @@ describe("Input arrow navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#myInput2");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#myInput2");
await suggestionsInput.click();
await suggestionsInput.keys("c");
await suggestionsInput.keys("ArrowDown");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
assert.strictEqual(await suggestionsInput.getValue(), "Cozy", "First item has been selected");
@@ -1188,13 +1172,12 @@ describe("Input arrow navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#inputError");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputError");
await suggestionsInput.click();
await suggestionsInput.keys("a");
await suggestionsInput.keys("ArrowDown");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const valueStateHeader = await respPopover.$(".ui5-responsive-popover-header.ui5-valuestatemessage-root");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
const groupHeader = await respPopover.$("ui5-list").$("ui5-li-groupHeader");
@@ -1251,14 +1234,13 @@ describe("Input HOME navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#myInput2");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#myInput2");
await suggestionsInput.click();
await suggestionsInput.keys("c");
await suggestionsInput.keys("Home");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
const caretPosition = await browser.execute(() =>{
return document.getElementById("myInput2").getCaretPosition();
@@ -1273,7 +1255,6 @@ describe("Input HOME navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#myInput2");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#myInput2");
await suggestionsInput.click();
await suggestionsInput.keys("c");
@@ -1283,7 +1264,7 @@ describe("Input HOME navigation", () => {
await suggestionsInput.keys("Home");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
assert.strictEqual(await suggestionsInput.getValue(), "Cozy", "First item has been selected");
@@ -1295,7 +1276,6 @@ describe("Input HOME navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#inputError");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#inputError");
await suggestionsInput.click();
await suggestionsInput.keys("a");
@@ -1306,7 +1286,7 @@ describe("Input HOME navigation", () => {
await suggestionsInput.keys("Home");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const valueStateHeader = await respPopover.$(".ui5-responsive-popover-header.ui5-valuestatemessage-root");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
const groupHeader = await respPopover.$("ui5-list").$("ui5-li-groupHeader");
@@ -1323,7 +1303,6 @@ describe("Input HOME navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#myInput");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#myInput");
await suggestionsInput.click();
await suggestionsInput.keys("a");
@@ -1334,7 +1313,7 @@ describe("Input HOME navigation", () => {
await suggestionsInput.keys("Home");
- const respPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
const groupHeader = await respPopover.$("ui5-list").$("ui5-li-groupHeader");
@@ -1350,7 +1329,6 @@ describe("Input END navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#myInput2");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#myInput2");
await suggestionsInput.click();
await suggestionsInput.keys("c");
@@ -1358,7 +1336,7 @@ describe("Input END navigation", () => {
await suggestionsInput.keys("ArrowLeft");
await suggestionsInput.keys("End");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
const caretPosition = await browser.execute(() =>{
return document.getElementById("myInput2").getCaretPosition();
@@ -1373,7 +1351,6 @@ describe("Input END navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#inputCompact");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#inputCompact");
await suggestionsInput.click();
await suggestionsInput.keys("c");
@@ -1383,7 +1360,7 @@ describe("Input END navigation", () => {
await suggestionsInput.keys("End");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item:last-child");
assert.strictEqual(await suggestionsInput.getValue(), "Chili", "Last item has been selected");
@@ -1397,12 +1374,11 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#myInput2");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#myInput2");
await suggestionsInput.click();
await suggestionsInput.keys("c");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const firstListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item");
let caretPosition = await browser.execute(() =>{
return document.getElementById("myInput2").getCaretPosition();
@@ -1438,7 +1414,6 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
await browser.url(`test/pages/Input.html`);
const suggestionsInput = await browser.$("#myInput");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#myInput");
await suggestionsInput.click();
await suggestionsInput.keys("a");
@@ -1448,7 +1423,7 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
await suggestionsInput.keys("PageDown");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const tenthListItem = await respPopover.$("ui5-list").$("ui5-li-suggestion-item:nth-child(11)");
assert.strictEqual(await suggestionsInput.getValue(), "Azerbaijan", "Tenth item has been selected");
@@ -1462,8 +1437,6 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
const suggestionsInput = await browser.$("#myInput");
await suggestionsInput.scrollIntoView();
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#myInput");
-
await suggestionsInput.click();
await suggestionsInput.keys("a");
@@ -1473,7 +1446,7 @@ describe("Input PAGEUP/PAGEDOWN navigation", () => {
await suggestionsInput.keys("PageDown");
await suggestionsInput.keys("PageUp");
- const respPopover = await browser.$(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await suggestionsInput.shadow$("ui5-responsive-popover");
const groupHeader = await respPopover.$("ui5-list").$("ui5-li-groupheader");
assert.strictEqual(await suggestionsInput.getValue(), "a", "No item has been selected");
@@ -1501,8 +1474,7 @@ describe("XSS tests for suggestions", () => {
await input.keys("a");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#xss-input");
- const listItems = await $(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li-suggestion-item");
+ const listItems = await input.shadow$("ui5-responsive-popover").$$("ui5-li-suggestion-item");
const expected = [
"",
"<b></b>",
@@ -1534,11 +1506,7 @@ describe("Prevent suggestion-item-select event", () => {
await input.click();
await input.keys(SUGGESTION_TEXT.at(0));
- const staticAreaItemClassName =
- await browser.getStaticAreaItemClassName(INPUT_ID_SELECTOR);
- const respPopover = await browser
- .$(`.${staticAreaItemClassName}`)
- .shadow$("ui5-responsive-popover");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
// Select first suggestion item that has event prevent
const firstSuggestion = await respPopover
@@ -1559,11 +1527,7 @@ describe("Prevent suggestion-item-select event", () => {
await input.click();
await input.keys(SUGGESTION_TEXT.at(0));
- const staticAreaItemClassName =
- await browser.getStaticAreaItemClassName(INPUT_ID_SELECTOR);
- const respPopover = await browser
- .$(`.${staticAreaItemClassName}`)
- .shadow$("ui5-responsive-popover");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
const secondSuggestion = await respPopover
.$("ui5-list")
@@ -1586,8 +1550,7 @@ describe("Lazy loading", () => {
it("Lazy loading opens the picker once items are populated", async () => {
const input = await $("#field");
const inner = await input.shadow$("input");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#field");
- const respPopover = await $(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
await inner.click();
await inner.keys("a");
@@ -1601,8 +1564,7 @@ describe("Lazy loading", () => {
it("Does not reopeon picker on focus in", async () => {
const input = await $("#field");
const inner = await input.shadow$("input");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#field");
- const respPopover = await $(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
await inner.click();
await inner.keys("a");
@@ -1621,8 +1583,7 @@ describe("Lazy loading", () => {
it("Should not close picker when items are updated", async () => {
const input = await $("#field1");
const inner = await input.shadow$("input");
- const staticAreaClassName = await browser.getStaticAreaItemClassName("#field1");
- const respPopover = await $(`.${staticAreaClassName}`).shadow$("ui5-responsive-popover");
+ const respPopover = await input.shadow$("ui5-responsive-popover");
await inner.click();
await inner.keys("S");
diff --git a/packages/main/test/specs/LitKeyFunction.spec.js b/packages/main/test/specs/LitKeyFunction.spec.js
index 3ce262a831ac..b9eceece631c 100644
--- a/packages/main/test/specs/LitKeyFunction.spec.js
+++ b/packages/main/test/specs/LitKeyFunction.spec.js
@@ -6,8 +6,6 @@ describe("Lit HTML key function for #each", async () => {
});
it("LIT HTML does not mess up keys when looping over lists", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
-
// Focus the input
const input = await browser.$("#mcb").shadow$("[inner-input]");
await input.click();
@@ -18,7 +16,7 @@ describe("Lit HTML key function for #each", async () => {
await input.keys("a");
// Click on the first item
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await browser.$("#mcb").shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const firstItem = await popover.$$(".ui5-multi-combobox-all-items-list > ui5-li")[0];
await firstItem.click();
diff --git a/packages/main/test/specs/Menu.spec.js b/packages/main/test/specs/Menu.spec.js
index 0369b8b5fd9f..e521acf4c1d9 100644
--- a/packages/main/test/specs/Menu.spec.js
+++ b/packages/main/test/specs/Menu.spec.js
@@ -5,11 +5,12 @@ describe("Menu interaction", () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ await openButton.click();
- assert.strictEqual(await popover.getAttribute("id"), `${staticAreaItemClassName}-menu-rp`, "There is popover for the menu created in the static area");
+ const menu = await browser.$("#menu");
+ const popover = await menu.shadow$("ui5-responsive-popover");
+ const _id = await menu.getProperty("_id");
+ assert.strictEqual(await popover.getAttribute("id"), `${_id}-menu-rp`, "There is popover for the menu created in the static area");
});
it("Menu opens after setting of opener and open", async () => {
@@ -17,12 +18,14 @@ describe("Menu interaction", () => {
const openerButton = await browser.$("#btnAddOpener");
const openButton = await browser.$("#btnToggleOpen");
- openerButton.click();
- openButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ await openerButton.click();
+ await openButton.click();
- assert.strictEqual(await popover.getAttribute("id"), `${staticAreaItemClassName}-menu-rp`, "There is popover for the menu created in the static area");
+ const menu = await browser.$("#menu");
+ const popover = await menu.shadow$("ui5-responsive-popover");
+ const _id = await menu.getProperty("_id");
+
+ assert.strictEqual(await popover.getAttribute("id"), `${_id}-menu-rp`, "There is popover for the menu created in the static area");
});
it("Top level menu items appearance", async () => {
@@ -30,10 +33,10 @@ describe("Menu interaction", () => {
const openButton = await browser.$("#btnOpen");
const menuItems = await browser.$$("ui5-menu[id='menu']>ui5-menu-item");
- openButton.click();
+ await openButton.click();
+
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$("#menu").shadow$("ui5-responsive-popover");
const listItems = await popover.$("ui5-list").$$("ui5-menu-li");
assert.strictEqual(await menuItems.length, 7, "There are proper count of menu items in the top level menu");
@@ -49,15 +52,15 @@ describe("Menu interaction", () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
+ await openButton.click();
+
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const staticAreaItem = await browser.$(`.${staticAreaItemClassName}`);
- const popover = staticAreaItem.shadow$("ui5-responsive-popover");
+ const menu = await browser.$("#menu");
+ const popover = await menu.shadow$("ui5-responsive-popover");
const listItems = await popover.$("ui5-list").$$("ui5-menu-li");
- const submenuList = await staticAreaItem.shadow$(".ui5-menu-submenus");
+ const submenuList = await menu.shadow$(".ui5-menu-submenus");
- listItems[3].click(); // open sub-menu
+ await listItems[3].click(); // open sub-menu
await submenuList.$("ui5-menu:nth-of-type(1)").waitForExist({
timeout: 1000,
@@ -66,7 +69,7 @@ describe("Menu interaction", () => {
assert.ok(await submenuList.$("ui5-menu"), "The second level sub-menu is being created"); // new ui5-menu element is created for the sub-menu
- listItems[4].click(); // open sub-menu
+ await listItems[4].click(); // open sub-menu
await submenuList.$("ui5-menu:nth-of-type(2)").waitForExist({
timeout: 1000,
@@ -81,10 +84,10 @@ describe("Menu interaction", () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
+ await openButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+ const popover = await browser.$("#menu").shadow$("ui5-responsive-popover");
const listItems = await popover.$("ui5-list").$$("ui5-menu-li");
const selectionInput = await browser.$("#selectionInput");
@@ -97,10 +100,10 @@ describe("Menu interaction", () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
+ await openButton.click();
+
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$("#menu").shadow$("ui5-responsive-popover");
const selectionInput = await browser.$("#selectionInput");
await browser.keys("Space");
@@ -112,10 +115,10 @@ describe("Menu interaction", () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
+ await openButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+
+ const popover = await browser.$("#menu").shadow$("ui5-responsive-popover");
const selectionInput = await browser.$("#selectionInput");
await browser.keys("Enter");
@@ -128,7 +131,7 @@ describe("Menu interaction", () => {
const openButton = await browser.$("#btnOpen");
const eventLogger = await browser.$("#eventLogger");
- openButton.click();
+ await openButton.click();
await browser.pause(100);
await browser.keys("Escape");
@@ -140,47 +143,42 @@ describe("Menu interaction", () => {
assert.notEqual(eventLoggerValue.indexOf("after-close"), -1, "'after-close' event is fired");
});
- /*
it("Menu and Menu items busy indication", async () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
- await browser.pause(100);
+ await openButton.click();
- const menuPopover = await browser.$("ui5-static-area-item:last-of-type").shadow$("ui5-responsive-popover");
- const visualOpenItem = await menuPopover.$("ui5-li[accessible-name='Open']");
- const visualCloseItem = await menuPopover.$("ui5-li[accessible-name='Close']");
+ const menu = await browser.$("#menu");
+ const menuPopover = await menu.shadow$("ui5-responsive-popover");
+ const visualOpenItem = await menuPopover.$("ui5-menu-li[accessible-name='Open']");
+ const visualCloseItem = await menuPopover.$("ui5-menu-li[accessible-name='Close']");
- visualOpenItem.click();
- await browser.pause(350);
- const openSubmenuPopover = await browser.$("ui5-static-area-item:last-of-type").shadow$("ui5-responsive-popover");
+ await visualOpenItem.click();
+ const openSubmenuPopover = await menu.shadow$(".ui5-menu-submenus ui5-menu:last-of-type").shadow$("ui5-responsive-popover");
const openMenuList = await openSubmenuPopover.$("ui5-list");
// assert.ok(await openMenuList.getProperty("busy"), "Busy property is properly propagated to the ui5-list component.");
- await browser.pause(650);
- assert.strictEqual(await openMenuList.$$("ui5-li").length, 4, "Two additional nodes have been added.");
+ assert.strictEqual((await openMenuList.$$("ui5-menu-li")).length, 4, "Two additional nodes have been added.");
- visualCloseItem.click();
- await browser.pause(350);
+ await visualCloseItem.click();
- const closeSubmenuPopover = await browser.$("ui5-static-area-item:last-of-type").shadow$("ui5-responsive-popover");
+ const closeSubmenuPopover = await menu.shadow$(".ui5-menu-submenus ui5-menu:last-of-type").shadow$("ui5-responsive-popover");
const busyIndicator = await closeSubmenuPopover.$("ui5-busy-indicator");
assert.ok(await busyIndicator.getProperty("active"), "Active attribute is properly set.");
- assert.strictEqual(await busyIndicator.getProperty("size"), "Medium", "Size attribute is properly set.");
+ assert.strictEqual(await busyIndicator.getProperty("size"), "M", "Size attribute is properly set.");
assert.strictEqual(await busyIndicator.getProperty("delay"), 100, "Delay attribute is properly set.");
});
- */
it("Prevent menu closing on item press", async () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
- await browser.pause(100);
+ await openButton.click();
+
+ const menu = await browser.$("#menu");
+ const menuPopover = await menu.shadow$("ui5-responsive-popover");
- const menuPopover = await browser.$("ui5-static-area-item:last-of-type").shadow$("ui5-responsive-popover");
- const newFileItem = await menuPopover.$("ui5-menu-li[accessible-name='New File(selection prevented)']");
- newFileItem.click();
- await browser.pause(100);
+ const newFileItem = await menuPopover.$("ui5-menu-li[accessible-name='New File(selection prevented) Opens a file explorer']");
+ await newFileItem.click();
assert.ok(await menuPopover.getProperty("open"), "Menu is still opened.");
});
@@ -188,13 +186,13 @@ describe("Menu interaction", () => {
it("Enable navigaion over disabled items", async () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
- await browser.pause(100);
+ await openButton.click();
+
+ const menu = await browser.$("#menu");
+ const menuPopover = await menu.shadow$("ui5-responsive-popover");
- const menuPopover = await browser.$("ui5-static-area-item:last-of-type").shadow$("ui5-responsive-popover");
const listItem = await menuPopover.$("ui5-menu-li[accessible-name='Preferences']");
- listItem.click();
- await browser.pause(100);
+ await listItem.click();
assert.ok(await listItem.getProperty("disabled"), "The menu item is disabled");
assert.ok(await listItem.getProperty("focused"), "The menu item is focused");
@@ -206,10 +204,10 @@ describe("Menu Accessibility", () => {
await browser.url(`test/pages/Menu.html`);
const openButton = await browser.$("#btnOpen");
- openButton.click();
+ await openButton.click();
+
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await browser.$("#menu").shadow$("ui5-responsive-popover");
const list = await popover.$("ui5-list");
const listItems = await popover.$("ui5-list").$$("ui5-menu-li");
diff --git a/packages/main/test/specs/MultiComboBox.mobile.spec.js b/packages/main/test/specs/MultiComboBox.mobile.spec.js
index 393b0abd0f9f..ae4b020e367a 100644
--- a/packages/main/test/specs/MultiComboBox.mobile.spec.js
+++ b/packages/main/test/specs/MultiComboBox.mobile.spec.js
@@ -8,28 +8,26 @@ describe("Basic interaction", () => {
it("Should render properly the mobile picker", async () => {
const multiCombo = await browser.$("#multi1");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
await multiCombo.scrollIntoView();
await multiCombo.shadow$('input').click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-input");
+ const dialogInput = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-input");
assert.ok(await dialogInput.isDisplayed(), "Input is displayed");
- const toggleSelectedButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-toggle-button");
+ const toggleSelectedButton = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-toggle-button");
assert.ok(await toggleSelectedButton.isDisplayed(), "Toggle selected items button is displayed");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
assert.ok(await dialogCloseButton.isDisplayed(), "Close icon is displayed");
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
assert.ok(await dialogOkButton.isDisplayed(), "Ok button is displayed");
});
it("Should close the mobile picker dialog when pressing the close button", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
- const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const picker = await browser.$("#multi1").shadow$("ui5-responsive-popover");
+ const dialogCloseButton = await picker.$(".ui5-responsive-popover-close-btn");
assert.ok(await picker.isDisplayed(), "Picker is still opened");
@@ -40,9 +38,8 @@ describe("Basic interaction", () => {
it("Should close the mobile picker dialog when pressing the OK button", async () => {
const multiCombo = await browser.$("#multi1");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
- const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const picker = await multiCombo.shadow$("ui5-responsive-popover");
+ const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await multiCombo.scrollIntoView();
await multiCombo.shadow$('input').click();
@@ -56,53 +53,50 @@ describe("Basic interaction", () => {
it("Should propagate the placeholder to the internal input", async () => {
const multiCombo = await browser.$("#mcb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
await multiCombo.scrollIntoView();
await multiCombo.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-input");
+ const dialogInput = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-input");
assert.strictEqual(await dialogInput.getAttribute("placeholder"), await multiCombo.getAttribute("placeholder"), "Correct placeholder shown");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
await dialogCloseButton.click();
});
it("Should open the picker with preselected items only when n-more is clicked", async () => {
const multiCombo = await browser.$("#multi1");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
await multiCombo.scrollIntoView();
await multiCombo.shadow$('ui5-tokenizer').shadow$(".ui5-tokenizer-more-text").click();
- const toggleSelectedButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-toggle-button");
+ const toggleSelectedButton = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-toggle-button");
assert.strictEqual(await toggleSelectedButton.getAttribute("pressed"), "", "Toggle selected items button is pressed");
- const itemsCount = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-list").$$("ui5-li")
+ const itemsCount = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-list").$$("ui5-li")
assert.strictEqual(itemsCount.length, 3, "Only the selected items are shown");
});
it("Should show all items again when the toggle selected items is unpressed", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
+ const multiCombo = await browser.$("#multi1");
- const toggleSelectedButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-toggle-button");
+ const toggleSelectedButton = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-toggle-button");
toggleSelectedButton.click();
- const itemsCount = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-list").$$("ui5-li")
+ const itemsCount = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-list").$$("ui5-li")
assert.strictEqual(itemsCount.length, 4, "All items are shown");
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
await dialogCloseButton.click();
});
it("Should set clear icon to dialog's input", async () => {
const cb = await $("#clear-icon-cb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#clear-icon-cb");
await cb.shadow$("input").click();
- const resPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const resPopover = await cb.shadow$("ui5-responsive-popover");
const dialogInput = await resPopover.$("[ui5-input]");
assert.ok(await dialogInput.getProperty("showClearIcon"), "Clear icon should be propagated to internal ui5-input")
@@ -119,11 +113,10 @@ describe("Typeahead", () => {
const mcb = await browser.$("#mcb");
const mcbInput = await mcb.shadow$("#ui5-multi-combobox-input");
const sExpected = "Cosy";
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb")
await mcbInput.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-input").shadow$("input");
+ const dialogInput = await mcb.shadow$("ui5-responsive-popover").$("ui5-input").shadow$("input");
await dialogInput.click();
await dialogInput.keys("c");
@@ -136,11 +129,10 @@ describe("Typeahead", () => {
const mcb = await browser.$("#mcb-no-typeahead");
const mcbInput = await mcb.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-no-typeahead");
await mcbInput.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-input").shadow$("input");
+ const dialogInput = await mcb.shadow$("ui5-responsive-popover").$("ui5-input").shadow$("input");
await dialogInput.click();
await dialogInput.keys("c");
@@ -155,11 +147,10 @@ describe("Typeahead", () => {
const mcb = await browser.$("#mcb");
const mcbInput = await mcb.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb")
await mcbInput.click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-input").shadow$("input");
+ const dialogInput = await mcb.shadow$("ui5-responsive-popover").$("ui5-input").shadow$("input");
await dialogInput.click();
await dialogInput.keys("c");
@@ -188,12 +179,11 @@ describe("Items selection", () => {
it("Should close the picker and create token when item is pressed in the picker", async () => {
const multiCombo = await browser.$("#mcb");
const mcbInput = await multiCombo.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
await multiCombo.scrollIntoView();
await mcbInput.click();
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[0];
+ const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0];
await listItem.click();
const token = await multiCombo.shadow$("ui5-tokenizer").$("ui5-token");
@@ -203,15 +193,14 @@ describe("Items selection", () => {
it("Should create token when item is selected in the picker and ok button is pressed", async () => {
const multiCombo = await browser.$("#mcb");
const mcbInput = await multiCombo.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
await multiCombo.scrollIntoView();
await mcbInput.click();
- const listItemCheckbox = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[1].shadow$("ui5-checkbox");
+ const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1].shadow$("ui5-checkbox");
await listItemCheckbox.click();
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await dialogOkButton.click();
const tokens = await multiCombo.shadow$("ui5-tokenizer").$$("ui5-token");
@@ -221,15 +210,14 @@ describe("Items selection", () => {
it("Should not create token when item is selected in the picker and the 'Close' button is pressed", async () => {
const multiCombo = await browser.$("#mcb");
const mcbInput = await multiCombo.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
await multiCombo.scrollIntoView();
await mcbInput.click();
- const listItemCheckbox = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[2].shadow$("ui5-checkbox");
+ const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[2].shadow$("ui5-checkbox");
await listItemCheckbox.click();
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
await dialogCloseButton.click();
const tokens = await multiCombo.shadow$("ui5-tokenizer").$$("ui5-token");
@@ -238,18 +226,17 @@ describe("Items selection", () => {
it("Should not allow deselection when readonly", async () => {
const multiCombo = await browser.$("#mcb-ro");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-ro");
await multiCombo.scrollIntoView();
await multiCombo.shadow$('ui5-tokenizer').shadow$(".ui5-tokenizer-more-text").click();
- const listItemCheckbox = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[0].shadow$("ui5-checkbox");
+ const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0].shadow$("ui5-checkbox");
await listItemCheckbox.click();
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[1];
+ const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1];
await listItem.click();
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await dialogOkButton.click();
const tokens = await multiCombo.shadow$("ui5-tokenizer").$$("ui5-token");
@@ -258,18 +245,17 @@ describe("Items selection", () => {
it("Should not allow additional selection when readonly", async () => {
const multiCombo = await browser.$("#mcb-ro");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-ro");
await multiCombo.scrollIntoView();
await multiCombo.shadow$('ui5-tokenizer').shadow$(".ui5-tokenizer-more-text").click();
- const toggleSelectedButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-toggle-button");
+ const toggleSelectedButton = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-toggle-button");
await toggleSelectedButton.click();
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[1];
+ const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1];
await listItem.click();
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await dialogOkButton.click();
const tokens = await multiCombo.shadow$("ui5-tokenizer").$$("ui5-token");
@@ -278,8 +264,7 @@ describe("Items selection", () => {
it ("should select all items when clicking select all", async () => {
const cb = await $("#mcb-select-all-vs");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-select-all-vs");
- const popover = await $(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await cb.shadow$("ui5-responsive-popover");
const spanRef = await $("#select-all-event");
await cb.click();
@@ -305,15 +290,14 @@ describe("Value state header", () => {
it("Should show value state header inside mobile dialog", async () => {
const multiCombo = await browser.$("#mcb-error");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-error")
await multiCombo.scrollIntoView();
await multiCombo.shadow$("ui5-icon").click();
- const dialogStateHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
+ const dialogStateHeader = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
assert.strictEqual(await dialogStateHeader.isDisplayed(), true, "The value state header is shown");
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-input");
+ const dialogInput = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-input");
assert.strictEqual(await dialogInput.getAttribute("value-state"), "Error", "Inner input's value state is correct");
});
});
@@ -327,12 +311,11 @@ describe("Eventing", () => {
it("Should fire selection change event when the item inside the picker (not the checkbox) is pressed", async () => {
const multiCombo = await browser.$("#mcb");
const mcbInput = await multiCombo.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
await multiCombo.scrollIntoView();
await mcbInput.click();
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[0];
+ const listItem = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0];
await listItem.click();
assert.strictEqual(await browser.$("#events-input").getValue(), "selectionChange", "The correct event was fired");
@@ -343,15 +326,14 @@ describe("Eventing", () => {
it("Should fire selection change event when items are selected and the 'OK' button is pressed", async () => {
const multiCombo = await browser.$("#mcb");
const mcbInput = await multiCombo.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
await multiCombo.scrollIntoView();
await mcbInput.click();
- const listItemCheckbox = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[1].shadow$("ui5-checkbox");
+ const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[1].shadow$("ui5-checkbox");
await listItemCheckbox.click();
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await dialogOkButton.click();
assert.strictEqual(await browser.$("#events-input").getValue(), "selectionChange", "The correct event was fired");
@@ -361,7 +343,6 @@ describe("Eventing", () => {
it("Should not fire selection change event when items are selected and the 'Close' button is pressed", async () => {
const multiCombo = await browser.$("#mcb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
await browser.$("#reset-btn").scrollIntoView();
await browser.$("#reset-btn").click();
@@ -369,10 +350,10 @@ describe("Eventing", () => {
await multiCombo.scrollIntoView();
await multiCombo.shadow$("ui5-icon").click();
- const listItemCheckbox = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[2].shadow$("ui5-checkbox");
+ const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[2].shadow$("ui5-checkbox");
await listItemCheckbox.click();
- const dialogCloseButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
+ const dialogCloseButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-close-btn");
await dialogCloseButton.click();
assert.strictEqual(await browser.$("#events-input").getValue(), "", "No event was fired");
@@ -383,7 +364,6 @@ describe("Eventing", () => {
it("Should prevent selection-change when item is selected in the picker and ok button is pressed", async () => {
const multiCombo = await browser.$("#mcb-prevent");
const mcbInput = await multiCombo.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-prevent");
await multiCombo.scrollIntoView();
await mcbInput.click();
@@ -391,10 +371,10 @@ describe("Eventing", () => {
let tokens = await multiCombo.shadow$("ui5-tokenizer").$$("ui5-token");
assert.strictEqual(tokens.length, 1, "There should be only one token.");
- const listItemCheckbox = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$$("ui5-li")[0].shadow$("ui5-checkbox");
+ const listItemCheckbox = await multiCombo.shadow$("ui5-responsive-popover").$$("ui5-li")[0].shadow$("ui5-checkbox");
await listItemCheckbox.click();
- const dialogOkButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
+ const dialogOkButton = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-responsive-popover-footer").$("ui5-button");
await dialogOkButton.click();
tokens = await multiCombo.shadow$("ui5-tokenizer").$$("ui5-token");
@@ -410,16 +390,15 @@ describe("Validation", () => {
it("Should set the error state to error if input not corresponding to item", async () => {
const multiCombo = await browser.$("#mcb-predefined-value");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-predefined-value");
await multiCombo.scrollIntoView();
await multiCombo.shadow$("ui5-icon").click();
- const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-input")
+ const dialogInput = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-input")
await dialogInput.shadow$("input").click();
await dialogInput.shadow$("input").keys("m");
- const dialogStateHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
+ const dialogStateHeader = await multiCombo.shadow$("ui5-responsive-popover").$(".ui5-valuestatemessage-header");
assert.strictEqual(await dialogStateHeader.isDisplayed(), true, "The value state header is shown");
assert.strictEqual(await dialogInput.getAttribute("value-state"), "Error", "Inner input's value state is correct");
assert.strictEqual(await dialogInput.getValue(), "comm", "Additional input is allowed, but value state is error");
@@ -435,22 +414,21 @@ describe("Accessibility", () => {
it("Show selected toggle button should has accessibleName attribute", async () => {
const multiCombo = await browser.$("#multi1");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
let resourceBundleText = null;
await multiCombo.scrollIntoView();
await multiCombo.shadow$('input').click();
- const toggleSelectedButton = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-toggle-button");
+ const toggleSelectedButton = await multiCombo.shadow$("ui5-responsive-popover").$("ui5-toggle-button");
resourceBundleText = await browser.executeAsync(done => {
const mcb = document.getElementById("multi1");
done(mcb.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SHOW_SELECTED_BUTTON));
});
-
+
assert.ok(await toggleSelectedButton.isDisplayed(), "Toggle selected items button is displayed");
assert.strictEqual(await toggleSelectedButton.getAttribute("accessible-name"), "Show Selected Items Only", "Correct value is applied")
-
+
});
});
\ No newline at end of file
diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js
index 18590e4acf59..abf95b548dcd 100644
--- a/packages/main/test/specs/MultiComboBox.spec.js
+++ b/packages/main/test/specs/MultiComboBox.spec.js
@@ -1,14 +1,5 @@
import { assert } from "chai";
-const getTokenizerPopoverId = async (mcbId) => {
- return await browser.executeAsync(async (mcbId, done) => {
- const input = document.querySelector(`[id="${mcbId}"]`);
- const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef());
-
- done(staticAreaItem.host.classList[0]);
- }, mcbId);
-}
-
describe("MultiComboBox general interaction", () => {
before(async () => {
await browser.url(`test/pages/MultiComboBox.html`);
@@ -16,9 +7,8 @@ describe("MultiComboBox general interaction", () => {
describe("toggling", () => {
it("opens/closes", async () => {
- const icon = await browser.$("#multi1").shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const icon = await $("#multi1").shadow$("[input-icon]");
+ const popover = await $("#multi1").shadow$(".ui5-multi-combobox-all-items-responsive-popover");
await icon.click();
assert.ok(await popover.getProperty("opened"), "Popover should be displayed in the viewport");
@@ -63,7 +53,6 @@ describe("MultiComboBox general interaction", () => {
assert.ok(await mcb.getProperty("focused"), "MultiComboBox should be focused.");
});
-
it("MultiComboBox open property is set correctly", async () => {
const mcb = await browser.$("#multi1");
const icon = await browser.$("#multi1").shadow$("[input-icon]");
@@ -90,10 +79,9 @@ describe("MultiComboBox general interaction", () => {
await browser.url(`test/pages/MultiComboBox.html`);
await browser.setWindowSize(400, 1250);
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi1");
const mcb = await browser.$("#multi1");
- const showMore = mcb.shadow$(".ui5-multi-combobox-tokenizer").shadow$(".ui5-tokenizer-more-text");
- const allPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const showMore = await mcb.shadow$(".ui5-multi-combobox-tokenizer").shadow$(".ui5-tokenizer-more-text");
+ const allPopover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
await mcb.scrollIntoView();
await showMore.click();
@@ -123,9 +111,9 @@ describe("MultiComboBox general interaction", () => {
});
it("Opens all items popover, selects and deselects the first item", async () => {
- const icon = await browser.$("#mcb").shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const mcb = await browser.$("#mcb");
+ const icon = await mcb.shadow$("[input-icon]");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const firstItem = await popover.$("ui5-list > ui5-li");
const firstItemCheckbox = await firstItem.shadow$("ui5-checkbox");
const eventInput = await browser.$("#events-input");
@@ -156,9 +144,9 @@ describe("MultiComboBox general interaction", () => {
});
it("When popover is opened via icon and item is selected/deselected, focus should return to the MultiComboBox", async () => {
+ const mcb = await browser.$("#mcb-success");
const icon = await browser.$("#mcb-success").shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-success")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const firstItem = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
await icon.click();
@@ -171,9 +159,9 @@ describe("MultiComboBox general interaction", () => {
});
it("Opens all items popover when start typing and filters items", async () => {
+ const mcb = await browser.$("#mcb");
const input = await browser.$("#mcb").shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
await input.click();
await input.keys("c");
@@ -251,9 +239,9 @@ describe("MultiComboBox general interaction", () => {
});
it("When item is clicked, the popover should be closed and the value in the input should be removed", async () => {
+ const mcb = await browser.$("#another-mcb");
const input = await browser.$("#another-mcb").shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#another-mcb")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const firstItem = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
await input.click();
@@ -270,9 +258,9 @@ describe("MultiComboBox general interaction", () => {
});
it("When item's checkbox is clicked, the popover should not be closed and the value in the input should be kept", async () => {
+ const mcb = await browser.$("#another-mcb");
const input = await browser.$("#another-mcb").shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#another-mcb")
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const firstItemCheckbox = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li").shadow$("ui5-checkbox");
await input.click();
@@ -312,8 +300,7 @@ describe("MultiComboBox general interaction", () => {
timeoutMsg: "Popover is open"
});
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#more-mcb")
- const popover = await $(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const list = await popover.$(".ui5-multi-combobox-all-items-list");
assert.strictEqual((await list.getProperty("items")).length, 3, "3 items should be shown (all selected)");
@@ -419,8 +406,7 @@ describe("MultiComboBox general interaction", () => {
await nMoreText.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#more-mcb")
- const popover = await $(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const list = await popover.$(".ui5-multi-combobox-all-items-list");
const lastListItem = await list.$("ui5-li:last-child");
@@ -468,7 +454,6 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb");
const sExpected = "Cosy";
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb")
await mcb.click();
await mcb.keys("c");
@@ -489,13 +474,10 @@ describe("MultiComboBox general interaction", () => {
it ("should reset typeahead on item navigation and restore it on focus input", async () => {
await browser.url(`test/pages/MultiComboBox.html`);
- const mcb = await browser.$("#mcb");
+ const mcb = await $("#mcb");
const input = await mcb.shadow$("input");
const icon = await mcb.shadow$("[input-icon]");
-
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const staticArea = await browser.execute(staticAreaItemClassName => document.querySelector(`.${staticAreaItemClassName}`), staticAreaItemClassName);
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await icon.click();
await mcb.keys("c");
@@ -539,8 +521,7 @@ describe("MultiComboBox general interaction", () => {
const mcb = $("#mcb-prevent");
const input = mcb.shadow$("#ui5-multi-combobox-input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-prevent")
- const popover = await $(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const firstItem = await popover.$(".ui5-multi-combobox-all-items-list > ui5-li");
const mcbTokens = await mcb.shadow$$(".ui5-multi-combobox-token");
@@ -647,12 +628,11 @@ describe("MultiComboBox general interaction", () => {
assert.strictEqual(await spanRef.getText(), "Selected items count: 5");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-select-all-vs");
- const popover = await $(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await cb.shadow$("ui5-responsive-popover");
const tokenizerNMore = await cb.shadow$("[ui5-tokenizer]");
const nMoreLabel = await tokenizerNMore.shadow$(".ui5-tokenizer-more-text");
-
+
await nMoreLabel.click();
assert.ok(await popover.$(".ui5-mcb-select-all-checkbox").getProperty("checked"), "Select All CheckBox should be selected");
@@ -762,50 +742,47 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb-error");
const input = await mcb.shadow$("input");
const icon = await mcb.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-error");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const staticArea = await browser.execute(staticAreaItemClassName => document.querySelector(`.${staticAreaItemClassName}`), staticAreaItemClassName);
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await icon.click();
await input.keys("ArrowDown");
- let valueStateHeader = await browser.execute(staticArea => staticArea.shadowRoot.querySelector(".ui5-responsive-popover-header.ui5-valuestatemessage-root"), staticArea);
- let focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+ const vsHeader = await popover.$(".ui5-responsive-popover-header");
+ let activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
assert.equal(await mcb.getProperty("focused"), false, "The input should not be focused");
- assert.equal(focusedElement[Object.keys(focusedElement)[0]], valueStateHeader[Object.keys(valueStateHeader)[0]], "The value state header should be focused");
+ assert.strictEqual(await vsHeader.getHTML(), activeElementHTML, "The value state header should be focused");
await input.keys("ArrowDown");
let listItem = await popover.$("ui5-list").$$("ui5-li")[0];
- focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+ activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
assert.equal(await mcb.getProperty("focused"), false, "The input should not be focused");
assert.equal(await listItem.getProperty("focused"), true, "The first item is focused");
- assert.notEqual(focusedElement[Object.keys(focusedElement)[0]], valueStateHeader[Object.keys(valueStateHeader)[0]], "The value state header should not be focused");
+ assert.notEqual(await vsHeader.getHTML(), activeElementHTML, "The value state header should not be focused");
await input.keys("ArrowUp");
- focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+ activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
assert.equal(await mcb.getProperty("focused"), false, "The input should not be focused");
assert.equal(await listItem.getProperty("focused"), false, "The first item is no longer focused");
- assert.equal(focusedElement[Object.keys(focusedElement)[0]], valueStateHeader[Object.keys(valueStateHeader)[0]], "The value state header is focused again");
+ assert.strictEqual(await vsHeader.getHTML(), activeElementHTML, "The value state header should be focused");
await input.keys("ArrowUp");
- focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+ activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
assert.equal(await mcb.getProperty("focused"), true, "The input should be focused");
assert.equal(await listItem.getProperty("focused"), false, "The first item should not be focused");
- assert.equal(focusedElement, null, "The value state header or item should not be focused");
+ assert.notEqual(vsHeader.getHTML(), activeElementHTML, "The value state header or item should not be focused");
+ assert.notOk(await listItem.getProperty("focused"), "The value state header or item should not be focused");
});
it ("focuses the first item on arrow down, then the input on arrow up", async () => {
const mcb = await browser.$("#mcb-with-placeholder");
const input = await mcb.shadow$("input");
const icon = await mcb.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-with-placeholder");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const staticArea = await browser.execute(staticAreaItemClassName => document.querySelector(`.${staticAreaItemClassName}`), staticAreaItemClassName);
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await icon.click();
await mcb.keys("ArrowDown");
@@ -1042,10 +1019,7 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb");
const input = await mcb.shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const staticArea = await browser.execute(staticAreaItemClassName => document.querySelector(`.${staticAreaItemClassName}`), staticAreaItemClassName);
-
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await input.click();
await mcb.keys("F4");
@@ -1269,41 +1243,40 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb-error");
const input = await mcb.shadow$("input");
const icon = await mcb.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-error");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const staticArea = await browser.execute(staticAreaItemClassName => document.querySelector(`.${staticAreaItemClassName}`), staticAreaItemClassName);
-
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await icon.click();
await mcb.keys(["Control", "ArrowDown"]);
- let valueStateHeader = await browser.execute(staticArea => staticArea.shadowRoot.querySelector(".ui5-responsive-popover-header.ui5-valuestatemessage-root"), staticArea);
- let focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+
+ let activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
+ const vsHeader = await popover.$(".ui5-responsive-popover-header");
assert.equal(await mcb.getProperty("focused"), false, "The input should not be focused");
- assert.equal(focusedElement[Object.keys(focusedElement)[0]], valueStateHeader[Object.keys(valueStateHeader)[0]], "The value state header should be focused");
+ assert.equal(activeElementHTML, await vsHeader.getHTML(), "The value state header should be focused");
await mcb.keys(["Control", "ArrowDown"]);
let listItem = await popover.$("ui5-list").$$("ui5-li")[0];
- focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+ activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
assert.equal(await mcb.getProperty("focused"), false, "The input should not be focused");
assert.equal(await listItem.getProperty("focused"), true, "The first item is focused");
- assert.notEqual(focusedElement[Object.keys(focusedElement)[0]], valueStateHeader[Object.keys(valueStateHeader)[0]], "The value state header should not be focused");
+ assert.notEqual(activeElementHTML, await vsHeader.getHTML(), "The value state header should not be focused");
await mcb.keys(["Control", "ArrowUp"]);
- focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+ activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
assert.equal(await mcb.getProperty("focused"), false, "The input should not be focused");
assert.equal(await listItem.getProperty("focused"), false, "The first item is no longer focused");
- assert.equal(focusedElement[Object.keys(focusedElement)[0]], valueStateHeader[Object.keys(valueStateHeader)[0]], "The value state header is focused again");
+ assert.equal(activeElementHTML, await vsHeader.getHTML(), "The value state header is focused again");
await mcb.keys(["Control", "ArrowUp"]);
- focusedElement = await browser.execute(staticArea => staticArea.shadowRoot.activeElement, staticArea);
+ activeElementHTML = await browser.execute(() => document.activeElement.shadowRoot.activeElement.outerHTML);
assert.equal(await mcb.getProperty("focused"), true, "The input should be focused");
assert.equal(await listItem.getProperty("focused"), false, "The first item should not be focused");
- assert.equal(focusedElement, null, "The value state header or item should not be focused");
+ assert.notEqual(activeElementHTML, await vsHeader.getHTML(), "The value state header or item should not be focused");
+ assert.notEqual(activeElementHTML, await listItem.getHTML(), "The value state header or item should not be focused");
});
it ("should select all filtered items on CTRL+A", async () => {
@@ -1355,7 +1328,7 @@ describe("MultiComboBox general interaction", () => {
await input.keys(["Control", "v"]);
assert.strictEqual(await mcb2.getProperty("value"), "Condensed", "Token is pasted into the second control");
- assert.ok(await mcb2.getProperty("open"), "Condensed", "Popover should be open");
+ assert.ok(await mcb2.getProperty("open"), "Popover should be open");
await input.keys(["Control", "v"]);
@@ -1467,8 +1440,7 @@ describe("MultiComboBox general interaction", () => {
await browser.url(`test/pages/MultiComboBox.html`);
const mcb = await browser.$("#mcb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await mcb.click();
await mcb.keys("F4");
@@ -1491,8 +1463,7 @@ describe("MultiComboBox general interaction", () => {
await browser.url(`test/pages/MultiComboBox.html`);
const mcb = await browser.$("#mcb-items");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-items");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mcb.shadow$("ui5-responsive-popover");
let tokens = await mcb.shadow$$(".ui5-multi-combobox-token");
await tokens[2].click();
@@ -1507,8 +1478,7 @@ describe("MultiComboBox general interaction", () => {
await browser.url(`test/pages/MultiComboBox.html`);
const mcb = await browser.$("#multi-acv");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#multi-acv");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await mcb.click();
await mcb.keys(["Alt", "ArrowDown"]);
@@ -1522,8 +1492,7 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb");
const input = await mcb.shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await input.click();
await input.keys(["a", "b"]);
@@ -1539,8 +1508,7 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb");
const input = await mcb.shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mcb.shadow$("ui5-responsive-popover");
await input.click();
await input.keys("ArrowDown");
@@ -1570,10 +1538,12 @@ describe("MultiComboBox general interaction", () => {
assert.ok(await tokens[tokens.length - 1].getProperty("focused"), "Last Token is focused");
});
- it("should open/close popover on keyboard combination ctrl + i", async () => {
+ // TODO: Fix this with Tokenizer standalone PR
+ // Basically, keydown of the items gets bubbled to the tokenizer since the popover is now in the shadow dom instad of the static area
+ it.skip ("should open/close popover on keyboard combination ctrl + i", async () => {
const mcb = await $("#truncated-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const tokenizer = await mcb.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
await mcb.click();
await mcb.keys(["Control", "i"]);
@@ -1594,8 +1564,8 @@ describe("MultiComboBox general interaction", () => {
it("shouldn't open popover on keyboard combination ctrl + i when there are no tokens", async () => {
const mcb = await $("#mcb-no-typeahead");
- const rpoClassName = await getTokenizerPopoverId("mcb-no-typeahead");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const tokenizer = await mcb.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
await mcb.click();
await mcb.keys(["Control", "i"]);
@@ -1637,9 +1607,8 @@ describe("MultiComboBox general interaction", () => {
it ("tests two-column layout", async () => {
const mcb = await browser.$("#mcb-two-column-layout");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-two-column-layout");
const icon = await mcb.shadow$("[input-icon]");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+ const popover = await mcb.shadow$(".ui5-multi-combobox-all-items-responsive-popover");
const listItem = await popover.$("ui5-list").$$("ui5-li")[0];
await icon.click();
@@ -1685,8 +1654,7 @@ describe("MultiComboBox general interaction", () => {
it ("Should not open value state message when component is in readonly state", async () => {
const mcb = await browser.$("#readonly-value-state-mcb");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#readonly-value-state-mcb");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await mcb.shadow$("ui5-popover");
await mcb.click();
assert.notOk(await popover.getProperty("opened"), "Popover with valueStateMessage should not be opened.");
@@ -1714,24 +1682,24 @@ describe("MultiComboBox general interaction", () => {
it ("Should check clear icon availability", async () => {
await browser.url(`test/pages/MultiComboBox.html`);
-
+
const cb = await $("#clear-icon-cb");
const inner = cb.shadow$("input");
const clearIcon = await cb.shadow$(".ui5-input-clear-icon-wrapper");
-
+
assert.notOk(await cb.getProperty("_effectiveShowClearIcon"), "_effectiveShowClearIcon should be set to false when mcb has no value");
await inner.click();
await inner.keys("c");
-
+
assert.ok(await cb.getProperty("_effectiveShowClearIcon"), "_effectiveShowClearIcon should be set to true upon typing");
});
-
+
it ("Should check clear icon events", async () => {
await browser.url(`test/pages/MultiComboBox.html`);
-
+
const cb = await $("#clear-icon-cb");
-
+
await cb.shadow$("input").click();
await cb.shadow$("input").keys("c");
@@ -1739,7 +1707,7 @@ describe("MultiComboBox general interaction", () => {
// focus out the combo
await clearIcon.click();
-
+
assert.strictEqual(await $("#clear-icon-change-count").getText(), "0", "change event is not fired");
assert.strictEqual(await $("#clear-icon-input-count").getText(), "2", "input event is fired twice");
});
@@ -1753,8 +1721,8 @@ describe("MultiComboBox general interaction", () => {
it("should truncate token when single token is in the multicombobox and open popover on click", async () => {
const mcb = await $("#truncated-token");
const token = await mcb.shadow$("ui5-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const tokenizer = await mcb.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
assert.ok(await token.getProperty("singleToken"), "Single token property should be set");
@@ -1775,8 +1743,8 @@ describe("MultiComboBox general interaction", () => {
it("should close truncation popover and deselect selected tokens when clicked outside the component", async () => {
const mcb = await $("#truncated-token");
const token = await mcb.shadow$("ui5-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const tokenizer = await mcb.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
assert.ok(await token.getProperty("singleToken"), "Single token property should be set");
@@ -1791,8 +1759,8 @@ describe("MultiComboBox general interaction", () => {
it("should close truncation popover and deselect selected tokens when clicked in input field", async () => {
const mcb = await $("#truncated-token");
const token = await mcb.shadow$("ui5-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const tokenizer = await mcb.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
const inner = await mcb.shadow$("input");
assert.ok(await token.getProperty("singleToken"), "Single token property should be set");
@@ -1892,8 +1860,7 @@ describe("MultiComboBox general interaction", () => {
const mCbSuccess = await browser.$("#mcb-success");
const mCbError = await browser.$("#mcb-error");
- let staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-warning");
- let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ let popover = await mCbWarning.shadow$("ui5-popover");
await mCbWarning.click();
@@ -1906,8 +1873,7 @@ describe("MultiComboBox general interaction", () => {
await mCbWarning.keys("Escape");
await mCbError.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-error");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ popover = await mCbError.shadow$("ui5-popover");
ariaHiddenText = await mCbError.shadow$(`#ui5-multi-combobox-valueStateDesc`).getHTML(false);
valueStateText = await popover.$("div").getHTML(false);
@@ -1918,7 +1884,6 @@ describe("MultiComboBox general interaction", () => {
await mCbError.keys("Escape");
await mCbSuccess.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-success");
ariaHiddenText = await mCbSuccess.shadow$(`#ui5-multi-combobox-valueStateDesc`).getHTML(false);
assert.strictEqual(ariaHiddenText.includes("Value State"), true, "Hidden screen reader text is correct");
@@ -1926,12 +1891,11 @@ describe("MultiComboBox general interaction", () => {
it("Value state type should be added to the screen readers custom value states announcement", async () => {
const mCbInformation = await browser.$("#mcb-information");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-information");
await mCbInformation.click();
await mCbInformation.keys("a");
- const popoverHeader = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover .ui5-valuestatemessage-header");
+ const popoverHeader = await mCbInformation.shadow$("ui5-responsive-popover .ui5-valuestatemessage-header");
const valueStateText = await popoverHeader.$("div").getHTML(false);
const ariaHiddenText = await mCbInformation.shadow$(`#ui5-multi-combobox-valueStateDesc`).getHTML(false);
@@ -1947,8 +1911,7 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb-grouping");
const input = await mcb.shadow$("#ui5-multi-combobox-input");
const arrow = await mcb.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
- let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ let popover = await mcb.shadow$("ui5-responsive-popover");
let groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
let listItems = await popover.$("ui5-list").$$("ui5-li");
@@ -1959,7 +1922,7 @@ describe("MultiComboBox general interaction", () => {
await input.keys("B");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ popover = await mcb.shadow$("ui5-responsive-popover");
groupItems = await popover.$("ui5-list").$$("ui5-li-groupheader");
listItems = await popover.$("ui5-list").$$("ui5-li");
@@ -1978,8 +1941,7 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb-grouping");
const input = await mcb.shadow$("#ui5-multi-combobox-input");
const arrow = await mcb.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mcb.shadow$("ui5-responsive-popover");
let groupItem;
await arrow.click();
@@ -1996,8 +1958,7 @@ describe("MultiComboBox general interaction", () => {
const mcb = await browser.$("#mcb-grouping");
const input = await mcb.shadow$("#ui5-multi-combobox-input");
const arrow = await mcb.shadow$("[input-icon]");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mcb-grouping");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mcb.shadow$("ui5-responsive-popover");
let groupItem;
await arrow.click();
diff --git a/packages/main/test/specs/MultiInput.mobile.spec.js b/packages/main/test/specs/MultiInput.mobile.spec.js
index 5d202fc6d24b..fc863dcfb330 100644
--- a/packages/main/test/specs/MultiInput.mobile.spec.js
+++ b/packages/main/test/specs/MultiInput.mobile.spec.js
@@ -1,14 +1,5 @@
import { assert } from "chai";
-const getTokenizerPopoverId = async (inputId) => {
- return await browser.executeAsync(async (inputId, done) => {
- const input = document.querySelector(`[id="${inputId}"]`);
- const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef());
-
- done(staticAreaItem.host.classList[0]);
- }, inputId);
-}
-
describe("MultiInput general interaction", () => {
before(async () => {
await browser.url(`test/pages/MultiInput.html`);
@@ -16,13 +7,13 @@ describe("MultiInput general interaction", () => {
});
it ("n-more picker dialog is properly rendered", async () => {
- const tokenizer = await browser.$("#multiInput-warning").shadow$("ui5-tokenizer");
+ const mi = await browser.$("#multiInput-warning");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
const nMoreLabel = await tokenizer.shadow$(".ui5-tokenizer-more-text");
await nMoreLabel.click();
- const rpoClassName = await getTokenizerPopoverId("multiInput-warning");
- const nMoreDialog = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const nMoreDialog = await tokenizer.shadow$("ui5-responsive-popover");
assert.ok(await nMoreDialog.getProperty("opened"), "More Popover should be open");
assert.ok(await nMoreDialog.$(".ui5-valuestatemessage--warning").isDisplayed(), "More Popover value state is shown");
@@ -38,13 +29,13 @@ describe("Deleting tokens", () => {
});
it ("Should fire the ui5-token-delete event when the 'X' is pressed in the n-more picker", async () => {
- const tokenizer = await browser.$("#mi-event").shadow$("ui5-tokenizer");
+ const mi = await browser.$("#mi-event");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
const nMoreLabel = await tokenizer.shadow$(".ui5-tokenizer-more-text");
await nMoreLabel.click();
- const rpoClassName = await getTokenizerPopoverId("mi-event");
- const nMoreDialog = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const nMoreDialog = await tokenizer.shadow$("ui5-responsive-popover");
const listItemDeleteButton = await nMoreDialog.$$("ui5-li")[0].shadow$('.ui5-li-deletebtn ui5-button');
await listItemDeleteButton.click();
diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js
index 5636863908d5..7fb600f586e3 100644
--- a/packages/main/test/specs/MultiInput.spec.js
+++ b/packages/main/test/specs/MultiInput.spec.js
@@ -1,14 +1,5 @@
import { assert } from "chai";
-const getTokenizerPopoverId = async (inputId) => {
- return await browser.executeAsync(async (inputId, done) => {
- const input = document.querySelector(`[id="${inputId}"]`);
- const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef());
-
- done(staticAreaItem.host.classList[0]);
- }, inputId);
-}
-
describe("MultiInput general interaction", () => {
before(async () => {
await browser.url(`test/pages/MultiInput.html`);
@@ -31,8 +22,7 @@ describe("MultiInput general interaction", () => {
await nMoreLabel.click();
- const rpoClassName = await getTokenizerPopoverId("basic-overflow");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
assert.ok(await rpo.getProperty("opened"), "More Popover should be open");
});
@@ -135,8 +125,7 @@ describe("MultiInput general interaction", () => {
it ("adds a token after selection change", async () => {
const mi = await browser.$("#suggestion-token");
const input = await mi.shadow$("input");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#suggestion-token");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await mi.shadow$("ui5-responsive-popover");
await input.click();
await input.keys("c");
@@ -163,7 +152,7 @@ describe("MultiInput general interaction", () => {
it("tests if tokenizer is scrolled to the end when expanded and to start when narrowed", async () => {
await browser.url(`test/pages/MultiInput.html`);
- const minput = await $("#basic-overflow");
+ const minput = await browser.$("#basic-overflow");
const input = minput.shadow$("input");
await minput.scrollIntoView();
@@ -199,15 +188,14 @@ describe("MultiInput general interaction", () => {
});
it("should empty the field when value is cleared in the change handler", async () => {
- const mi = await $("#token-unique");
+ const mi = await browser.$("#token-unique");
const valueHelpIcon = mi.shadow$("ui5-icon");
const innerInput = mi.shadow$("input");
mi.scrollIntoView();
await valueHelpIcon.click();
-
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#token-unique");
- const listItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
+
+ const listItem = await mi.shadow$("ui5-responsive-popover").$("ui5-li-suggestion-item");
await listItem.click();
@@ -215,8 +203,8 @@ describe("MultiInput general interaction", () => {
});
it("Should apply correct text to the tokens overflow indicator", async () => {
- const miNItems = await $("#mi-items");
- const miNMore = await $("#mi-more");
+ const miNItems = await browser.$("#mi-items");
+ const miNMore = await browser.$("#mi-more");
const tokenizerNItems = await miNItems.shadow$("ui5-tokenizer");
const tokenizerNMore = await miNMore.shadow$("ui5-tokenizer");
const nItemsLabel = await tokenizerNItems.shadow$(".ui5-tokenizer-more-text");
@@ -242,13 +230,13 @@ describe("MultiInput Truncated Token", () => {
});
it("should truncate token when single token is in the multinput and open popover on click", async () => {
- const mi = await $("#truncated-token");
+ const mi = await browser.$("#truncated-token");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
const token = await mi.$("ui5-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
assert.ok(await token.getProperty("singleToken"), "Single token property should be set");
-
+
await token.click();
assert.ok(await rpo.getProperty("opened"), "More Popover should be open");
@@ -264,30 +252,31 @@ describe("MultiInput Truncated Token", () => {
});
it("should close truncation popover and deselect selected tokens when clicked outside the component", async () => {
- const mi = await $("#truncated-token");
+ const mi = await browser.$("#truncated-token");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
const token = await mi.$("ui5-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
assert.ok(await token.getProperty("singleToken"), "Single token property should be set");
-
+
await token.click();
- await $("#dummy-btn").click();
+ await browser.$("#dummy-btn").click();
assert.notOk(await rpo.getProperty("opened"), "More Popover should be closed");
assert.notOk(await token.getProperty("selected"), "Token should be deselected");
});
it("should close truncation popover and deselect selected tokens when clicked in input field", async () => {
- const mi = await $("#truncated-token");
+ const mi = await browser.$("#truncated-token");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
const token = await mi.$("ui5-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
const inner = await mi.shadow$("input");
assert.ok(await token.getProperty("singleToken"), "Single token property should be set");
-
+
await inner.click();
assert.notOk(await rpo.getProperty("opened"), "More Popover should be closed");
@@ -295,7 +284,8 @@ describe("MultiInput Truncated Token", () => {
});
it("should truncate token when a long token is added", async () => {
- const mi = await $("#token-unique");
+ const mi = await browser.$("#token-unique");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
const inner = await mi.shadow$("input");
await mi.scrollIntoView();
@@ -305,8 +295,7 @@ describe("MultiInput Truncated Token", () => {
await inner.setValue("Officia enim ullamco sunt sunt nisi ullamco cillum velit.");
await inner.keys("Enter");
- const rpoClassName = await getTokenizerPopoverId("token-unique");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
const token = await mi.$("ui5-token");
@@ -329,11 +318,11 @@ describe("MultiInput Truncated Token", () => {
});
it("should not throw exception when MI with 1 token is added to the page", async () => {
- const btn = await $("#add-single-token");
+ const btn = await browser.$("#add-single-token");
await btn.click();
- const innerInput = await $("#added-mi").shadow$("input");
+ const innerInput = await browser.$("#added-mi").shadow$("input");
const html = await innerInput.getHTML();
assert.ok(await innerInput.getHTML(), "new MI should be displayed");
@@ -579,7 +568,7 @@ describe("Keyboard handling", () => {
it("tests if tokenizer is scrolled on keyboard navigation through the tokens", async () => {
await browser.url(`test/pages/MultiInput.html`);
- const minput = await $("#basic-overflow");
+ const minput = await browser.$("#basic-overflow");
const input = minput.shadow$("input");
await minput.scrollIntoView();
@@ -641,9 +630,9 @@ describe("Keyboard handling", () => {
});
it("should trigger change event on enter", async () => {
- const mi = await $("#token-unique");
+ const mi = await browser.$("#token-unique");
const inner = await mi.shadow$("input");
- const valueState = await $("#value-state-wrapper");
+ const valueState = await browser.$("#value-state-wrapper");
await mi.scrollIntoView();
@@ -663,9 +652,9 @@ describe("Keyboard handling", () => {
});
it("should open popover on keyboard combination ctrl + i", async () => {
- const mi = await $("#truncated-token");
- const rpoClassName = await getTokenizerPopoverId("truncated-token");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const mi = await browser.$("#truncated-token");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
await mi.click();
await mi.keys(["Control", "i"]);
@@ -679,8 +668,8 @@ describe("Keyboard handling", () => {
it("shouldn't open popover on keyboard combination ctrl + i when there a no tokens", async () => {
const mi = await browser.$("#no-tokens");
- const rpoClassName = await getTokenizerPopoverId("no-tokens");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
await mi.click();
await mi.keys(["Control", "i"]);
@@ -689,8 +678,8 @@ describe("Keyboard handling", () => {
it("should open popover with all tokens on keyboard combination ctrl + i", async () => {
const mi = await browser.$("#two-tokens");
- const rpoClassName = await getTokenizerPopoverId("two-tokens");
- const rpo = await browser.$(`.${rpoClassName}`).shadow$("ui5-responsive-popover");
+ const tokenizer = await mi.shadow$("ui5-tokenizer");
+ const rpo = await tokenizer.shadow$("ui5-responsive-popover");
await mi.click();
await mi.keys(["Control", "i"]);
diff --git a/packages/main/test/specs/Popover.spec.js b/packages/main/test/specs/Popover.spec.js
index c9c5b4e1289f..18a514640ad0 100644
--- a/packages/main/test/specs/Popover.spec.js
+++ b/packages/main/test/specs/Popover.spec.js
@@ -120,9 +120,8 @@ describe("Popover general interaction", () => {
it("tests if overflown content can be reached by scrolling 1", async () => {
const manyItemsSelect = await browser.$("#many-items");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#many-items");
- const staticAreaItem = await browser.$(`.${staticAreaItemClassName}`);
- const items = await staticAreaItem.shadow$$("ui5-li");
+ const popover = await manyItemsSelect.shadow$("ui5-responsive-popover");
+ const items = await popover.$$("ui5-li");
await manyItemsSelect.click();
@@ -133,9 +132,8 @@ describe("Popover general interaction", () => {
it("tests if overflown content can be reached by scrolling 2", async () => {
const manyItemsSelect = await browser.$("#many-items");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#many-items");
- const staticAreaItem = await browser.$(`.${staticAreaItemClassName}`);
- const items = await staticAreaItem.shadow$$("ui5-li");
+ const popover = await manyItemsSelect.shadow$("ui5-responsive-popover");
+ const items = await popover.$$("ui5-li");
const itemBeforeLastItem = items[items.length - 2];
await itemBeforeLastItem.scrollIntoView();
@@ -196,21 +194,6 @@ describe("Popover general interaction", () => {
await btnOpenPopover.click();
assert.ok(await popover.getProperty("open"), "Popover is opened.");
- const blockLayerIsCreated = await browser.executeAsync((popoverId, done) => {
- const staticAreaItems = document.querySelectorAll("ui5-static-area-item");
- let result = false;
-
- staticAreaItems.forEach(item => {
- if (item.shadowRoot.querySelector(".ui5-block-layer") && item.classList.contains(popoverId)) {
- result = true;
- }
- });
-
- done(result);
- }, popoverId);
-
- assert.notOk(blockLayerIsCreated, "Block layer is not created.");
-
await browser.keys("Escape");
});
diff --git a/packages/main/test/specs/Select.mobile.spec.js b/packages/main/test/specs/Select.mobile.spec.js
index a0ad3ff017b6..0915836b7071 100644
--- a/packages/main/test/specs/Select.mobile.spec.js
+++ b/packages/main/test/specs/Select.mobile.spec.js
@@ -17,8 +17,8 @@ describe("Select mobile general interaction", () => {
select.click();
// act - move the focus to the first item
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect");
- const selectedItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-li:last-child");
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const selectedItem = await popover.$("ui5-li:last-child");
selectedItem.keys("ArrowUp");
selectedItem.keys("ArrowUp");
diff --git a/packages/main/test/specs/Select.spec.js b/packages/main/test/specs/Select.spec.js
index 1a4d606c807a..d5ddc4855760 100644
--- a/packages/main/test/specs/Select.spec.js
+++ b/packages/main/test/specs/Select.spec.js
@@ -25,8 +25,8 @@ describe("Select general interaction", () => {
const EXPECTED_SELECTION_TEXT = "Cozy";
await select.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect")
- const firstItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[0];
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const firstItem = (await popover.$$("ui5-li"))[0];
await firstItem.click();
@@ -42,8 +42,8 @@ describe("Select general interaction", () => {
const EXPECTED_SELECTION_TEXT = "Condensed";
await select.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#selectPrevent")
- const secondItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[1];
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const secondItem = (await popover.$$("ui5-li"))[1];
await secondItem.click();
@@ -60,8 +60,8 @@ describe("Select general interaction", () => {
await select.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect")
- const firstItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-li:last-child");
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const firstItem = await popover.$("ui5-li:last-child");
await firstItem.click();
assert.strictEqual(await inputResult.getProperty("value"), "", "Event not fired when already selected item is selected");
@@ -196,8 +196,7 @@ describe("Select general interaction", () => {
// act - try to open the dropdown
await select.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelectReadOnly");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await select.shadow$("ui5-responsive-popover");
// assert
assert.notOk(await popover.getProperty("opened"), "Select remains closed.");
@@ -246,7 +245,7 @@ describe("Select general interaction", () => {
const selectTextHtml = await selectText.getHTML(false);
assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT, "Arrow Up should change selected item");
-
+
const focusedElementId = await browser.executeAsync(done => {
done(document.activeElement.id);
});
@@ -347,7 +346,7 @@ describe("Select general interaction", () => {
const EXPECTED_SELECTION_TEXT1 = "Item1";
const EXPECTED_SELECTION_TEXT2 = "Item2";
-
+
await btnSetValue.click();
let selectTextHtml = await selectText.getHTML(false);
@@ -355,7 +354,7 @@ describe("Select general interaction", () => {
EXPECTED_SELECTION_TEXT2, "Second option is selected.");
assert.include(selectTextHtml, EXPECTED_SELECTION_TEXT2,
"Select label is " + EXPECTED_SELECTION_TEXT2);
-
+
await btnSetInvalidValue.click();
selectTextHtml = await selectText.getHTML(false);
@@ -369,8 +368,8 @@ describe("Select general interaction", () => {
await browser.url(`test/pages/Select.html`);
const btn = await browser.$("#myBtn2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const select = await browser.$("#mySelect");
+ const popover = await select.shadow$("ui5-responsive-popover");
await btn.click();
await btn.keys("Tab");
@@ -383,8 +382,8 @@ describe("Select general interaction", () => {
await browser.url(`test/pages/Select.html`);
const btn = await browser.$("#myBtn2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const select = await browser.$("#mySelect");
+ const popover = await select.shadow$("ui5-responsive-popover");
await btn.click();
await btn.keys("Tab");
@@ -400,8 +399,8 @@ describe("Select general interaction", () => {
await browser.url(`test/pages/Select.html`);
const btn = await browser.$("#myBtn2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const select = await browser.$("#mySelect");
+ const popover = await select.shadow$("ui5-responsive-popover");
await btn.click();
await btn.keys("Tab");
@@ -417,8 +416,8 @@ describe("Select general interaction", () => {
await browser.url(`test/pages/Select.html`);
const btn = await browser.$("#myBtn2");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const select = await browser.$("#mySelect");
+ const popover = await select.shadow$("ui5-responsive-popover");
await btn.click();
await btn.keys("Tab");
@@ -437,8 +436,9 @@ describe("Select general interaction", () => {
await addItemsBtn.click();
const firstOption = await browser.$("#mySelect ui5-option:first-child");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect");
- const firstListItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-li:first-child");
+ const select = await browser.$("#mySelect");
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const firstListItem = await popover.$("ui5-li:first-child");
assert.ok(await firstOption.getProperty("selected"), "First option should be selected");
assert.ok(await firstListItem.getProperty("selected"), "First list item should be selected");
@@ -493,8 +493,8 @@ describe("Select general interaction", () => {
await select.keys("Escape");
await select.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect");
- const firstItem = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-li:first-child");
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const firstItem = await popover.$("ui5-li:first-child");
await firstItem.click();
@@ -508,9 +508,9 @@ describe("Select general interaction", () => {
const EXPECTED_SELECTION_TEXT2 = "Condensed";
await select.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelectEsc")
- const firstItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[0];
- const thirdItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[2];
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const firstItem = (await popover.$$("ui5-li"))[0];
+ const thirdItem = (await popover.$$("ui5-li"))[2];
await firstItem.click();
@@ -583,9 +583,8 @@ describe("Select general interaction", () => {
it("Tests that the picker is closed when the selected value is clicked", async () => {
const select = await browser.$("#mySelect");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect")
- const firstItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[0];
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await select.shadow$("ui5-responsive-popover");
+ const firstItem = (await popover.$$("ui5-li"))[0];
// select the first item
await select.click();
@@ -604,8 +603,7 @@ describe("Select general interaction", () => {
await browser.setWindowSize(600, 100);
const select = await browser.$("#warningSelect");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#warningSelect");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await select.shadow$("ui5-responsive-popover");
await select.click();
assert.ok(await popover.getProperty("opened"), "Select is opened.");
@@ -625,10 +623,10 @@ describe("Attributes propagation", () => {
});
it("propagates additional-text attribute", async () => {
+ const select = await browser.$("#mySelect6");
const EXPECTED_ADDITIONAL_TEXT = "DZ",
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#mySelect6"),
firstOption = await browser.$("#mySelect6 ui5-option:first-child"),
- firstItem = (await browser.$(`.${staticAreaItemClassName}`).shadow$$("ui5-li"))[0];
+ firstItem = (await select.shadow$$("ui5-li"))[0];
assert.strictEqual(await firstOption.getProperty("additionalText"), EXPECTED_ADDITIONAL_TEXT, "The additional text is set");
assert.strictEqual(await firstItem.getProperty("additionalText"), EXPECTED_ADDITIONAL_TEXT, "The additional text is correct");
diff --git a/packages/main/test/specs/TabContainer.mobile.spec.js b/packages/main/test/specs/TabContainer.mobile.spec.js
index 61860f61404b..df6b5569c92b 100644
--- a/packages/main/test/specs/TabContainer.mobile.spec.js
+++ b/packages/main/test/specs/TabContainer.mobile.spec.js
@@ -7,11 +7,11 @@ describe("Mobile: TabContainer general interaction", () => {
});
it("should close the overflow popover when pressing the cancel button", async () => {
- const moreButton = await browser.$("#tabContainerNestedTabs").shadow$(`[data-ui5-stable="overflow-end"]`);
+ const tc = await browser.$("#tabContainerNestedTabs");
+ const moreButton = await tc.shadow$(`[data-ui5-stable="overflow-end"]`);
await moreButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerNestedTabs");
- let overflow = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ let overflow = await tc.shadow$("ui5-responsive-popover");
const closeButton = await overflow.$("ui5-button");
assert.ok(await overflow.getProperty("open"), "Overflow is opened");
diff --git a/packages/main/test/specs/TabContainer.spec.js b/packages/main/test/specs/TabContainer.spec.js
index 991475e53357..7a8015e46512 100644
--- a/packages/main/test/specs/TabContainer.spec.js
+++ b/packages/main/test/specs/TabContainer.spec.js
@@ -141,27 +141,26 @@ describe("TabContainer general interaction", () => {
// Resize
await browser.setWindowSize(1000, 1080);
- const tabcontainer = await browser.$("#tabContainerStartAndEndOverflow");
- const startOverflow = await tabcontainer.shadow$(".ui5-tc__overflow--start");
+ const tabContainer = await browser.$("#tabContainerStartAndEndOverflow");
+ const startOverflow = await tabContainer.shadow$(".ui5-tc__overflow--start");
assert.strictEqual(await startOverflow.getProperty("innerText"), "+12", "12 tabs in start overflow");
await browser.setWindowSize(800, 1080);
assert.strictEqual(await startOverflow.getProperty("innerText"), "+14", "14 tabs in start overflow");
// Select
- const initiallySelectedItem = await tabcontainer.$("[selected]");
+ const initiallySelectedItem = await tabContainer.$("[selected]");
assert.strictEqual(await initiallySelectedItem.getProperty("text"), "Twenty", "Initially selected item is Twenty");
await startOverflow.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerStartAndEndOverflow");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await tabContainer.shadow$("ui5-responsive-popover");
const item = await (await popover.$("ui5-list").$$("ui5-li-custom"))[0];
assert.strictEqual(await item.getProperty("innerText"), "One", "First item in overflow is 1");
await item.click()
- const newlySelectedItem = await tabcontainer.$("[selected]");
+ const newlySelectedItem = await tabContainer.$("[selected]");
assert.strictEqual(await newlySelectedItem.getProperty("text"), "One", "Newly selected item is One");
});
@@ -170,20 +169,19 @@ describe("TabContainer general interaction", () => {
await browser.setWindowSize(1000, 1080);
- const tabcontainer = await browser.$("#tabContainerEndOverflow");
- const endOverflow = await tabcontainer.shadow$(".ui5-tc__overflow--end");
+ const tabContainer = await browser.$("#tabContainerEndOverflow");
+ const endOverflow = await tabContainer.shadow$(".ui5-tc__overflow--end");
// Select
- const initiallySelectedItem = await tabcontainer.$("[selected]");
+ const initiallySelectedItem = await tabContainer.$("[selected]");
assert.strictEqual(await initiallySelectedItem.getProperty("text"), "Thirteen", "Initially selected item is 13");
await endOverflow.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerEndOverflow");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await tabContainer.shadow$("ui5-responsive-popover");
await (await popover.$("ui5-list").$$("ui5-li-custom"))[0].click();
- const newlySelectedItem = await tabcontainer.$("[selected]");
+ const newlySelectedItem = await tabContainer.$("[selected]");
assert.strictEqual(await newlySelectedItem.getProperty("text"), "Eleven", "The first item in the overflow is 11");
@@ -204,9 +202,8 @@ describe("TabContainer general interaction", () => {
assert.ok(await expandButton.getAttribute("tooltip"), "Expand button tooltip is set");
await expandButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerNestedTabs");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await tabContainer.shadow$("ui5-responsive-popover");
assert.notOk(await browser.$("#button21").isDisplayed(), "Content for tab 2.1 is not displayed");
await (await popover.$("ui5-list").$$("ui5-li-custom"))[0].click();
let newlySelectedItem = await tabContainer.$("[selected]");
@@ -246,8 +243,7 @@ describe("TabContainer general interaction", () => {
const startButton = await browser.$("#startOverflowButton");
startButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerCustomOverflowButtons");
- let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ let popover = await tabContainer.shadow$("ui5-responsive-popover");
await (await popover.$("ui5-list").$$("ui5-li-custom"))[0].click();
let newlySelectedItem = await tabContainer.$("[selected]");
@@ -256,7 +252,7 @@ describe("TabContainer general interaction", () => {
const endButton = await browser.$("#endOverflowButton");
endButton.click();
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ popover = await tabContainer.shadow$("ui5-responsive-popover");
await (await popover.$("ui5-list").$$("ui5-li-custom"))[0].click();
newlySelectedItem = await tabContainer.$("[selected]");
@@ -372,16 +368,15 @@ describe("TabContainer keyboard handling", () => {
});
it("[Arrow Down] on two-click area tab", async () => {
- const tabcontainer = await browser.$("#tabContainerNestedTabs");
- const item = tabcontainer.shadow$$(".ui5-tab-strip-item")[3];
+ const tabContainer = await browser.$("#tabContainerNestedTabs");
+ const item = tabContainer.shadow$$(".ui5-tab-strip-item")[3];
assert.strictEqual(await item.getProperty("innerText"), "Four", "Correct tab is found");
await item.click();
await item.keys("ArrowDown");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerNestedTabs");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await tabContainer.shadow$("ui5-responsive-popover");
assert.ok(await popover.isDisplayed(), "Popover is opened");
});
@@ -394,12 +389,11 @@ describe("TabContainer popover", () => {
});
it("tests popover after new tab is inserted", async () => {
- const tabcontainer = await browser.$("#tabContainerEndOverflow");
- const endOverflow = await tabcontainer.shadow$(".ui5-tc__overflow--end");
+ const tabContainer = await browser.$("#tabContainerEndOverflow");
+ const endOverflow = await tabContainer.shadow$(".ui5-tc__overflow--end");
await endOverflow.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerEndOverflow");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
- const listItemsCount = await popover.$$("[ui5-li-custom]").length;
+ const popover = await tabContainer.shadow$("ui5-responsive-popover");
+ const listItemsCount = (await popover.$$("[ui5-li-custom]")).length;
assert.ok(listItemsCount > 0, "There are items in the overflow");
@@ -411,17 +405,16 @@ describe("TabContainer popover", () => {
done();
});
- const newListItemsCount = await popover.$$("[ui5-li-custom]").length;
+ const newListItemsCount = (await popover.$$("[ui5-li-custom]")).length;
assert.strictEqual(newListItemsCount, listItemsCount + 1, "Overflow list displays all its items");
});
it("tests popover items indentation", async () => {
- const tabcontainer = await browser.$("#tabContainerNestedTabs");
- const endOverflow = await tabcontainer.shadow$(".ui5-tc__overflow--end");
+ const tabContainer = await browser.$("#tabContainerNestedTabs");
+ const endOverflow = await tabContainer.shadow$(".ui5-tc__overflow--end");
await endOverflow.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#tabContainerNestedTabs");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const popover = await tabContainer.shadow$("ui5-responsive-popover");
const tabAssertions = [
{ tabText: "Ten", expectedIndent: 0 },
diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js
index f74aeb487ec1..4742c28a130b 100644
--- a/packages/main/test/specs/TextArea.spec.js
+++ b/packages/main/test/specs/TextArea.spec.js
@@ -109,8 +109,7 @@ describe("when enabled", () => {
it("shows value state message", async () => {
const textarea = await browser.$("#textarea-value-state-msg")
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#textarea-value-state-msg");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover")
+ const popover = await textarea.shadow$("ui5-popover")
// act
await textarea.click();
@@ -121,8 +120,7 @@ describe("when enabled", () => {
it("does not show value state msg when valueState='None'", async () => {
const textarea = await browser.$("#basic-textarea");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#basic-textarea");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover")
+ const popover = await textarea.shadow$("ui5-popover")
// act
await textarea.click();
@@ -133,8 +131,7 @@ describe("when enabled", () => {
it("Should not open value state message when textarea is in readonly state", async () => {
const textarea = await browser.$("#readonly-value-state-textarea");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#readonly-value-state-textarea");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover")
+ const popover = await textarea.shadow$("ui5-popover")
// act
await textarea.click();
@@ -303,13 +300,12 @@ describe("Value update", () => {
it("Value state type should be added to the screen readers default value states announcement", async () => {
const tAreaError = await browser.$("#basic-textarea-error");
const tAreaWarning = await browser.$("#basic-textarea-warning");
- const tAreaSuccess = await browser.$("#basic-textarea-success");
+ const tAreaV = await browser.$("#textarea-value-state-msg");
const tAreaInformation = await browser.$("#basic-textarea-info");
await tAreaError.click();
- let staticAreaItemClassName = await browser.getStaticAreaItemClassName("#basic-textarea-error");
- let popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ let popover = await tAreaError.shadow$("ui5-popover");
let ariaHiddenText = await tAreaError.shadow$(".ui5-hidden-text").getText();
let valueStateText = await popover.$("div").getText();
@@ -319,8 +315,7 @@ describe("Value update", () => {
await tAreaWarning.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#basic-textarea-warning");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ popover = await tAreaWarning.shadow$("ui5-popover");
ariaHiddenText = await tAreaWarning.shadow$(".ui5-hidden-text").getText();
valueStateText = await popover.$("div").getText();
@@ -330,8 +325,7 @@ describe("Value update", () => {
await tAreaInformation.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#basic-textarea-info");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ popover = await tAreaInformation.shadow$("ui5-popover");
ariaHiddenText = await tAreaInformation.shadow$(".ui5-hidden-text").getText();
valueStateText = await popover.$("div").getText();
@@ -343,8 +337,7 @@ describe("Value update", () => {
const tAreaCustomError = await browser.$("#textarea-value-state-msg");
await tAreaCustomError.click();
- staticAreaItemClassName = await browser.getStaticAreaItemClassName("#textarea-value-state-msg");
- popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ popover = await tAreaV.shadow$("ui5-popover");
ariaHiddenText = await tAreaCustomError.shadow$(".ui5-hidden-text").getText();
valueStateText = await popover.$("div").getText();
diff --git a/packages/main/test/specs/TimePicker.mobile.spec.js b/packages/main/test/specs/TimePicker.mobile.spec.js
index 864c3287b15a..aee1024df719 100644
--- a/packages/main/test/specs/TimePicker.mobile.spec.js
+++ b/packages/main/test/specs/TimePicker.mobile.spec.js
@@ -27,8 +27,7 @@ describe("TimePicker on phone - general interactions", () => {
it("opening of popover with numeric inputs", async () => {
const timePicker = await browser.$("#timepicker");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker");
- const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const timePickerPopover = await timePicker.shadow$("ui5-popover");
const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs');
const components = await timeSelectionInputs.shadow$$('ui5-input');
const hoursInnerInput = await components[0].shadow$("input");
@@ -50,8 +49,7 @@ describe("TimePicker on phone - general interactions", () => {
it("value change with numeric inputs on OK and Cancel button press", async () => {
const timePicker = await browser.$("#timepicker3");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker3");
- const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const timePickerPopover = await timePicker.shadow$("ui5-popover");
const timePickerPopoverButtons = await timePickerPopover.$('div.ui5-time-picker-footer').$$("ui5-button");
const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs');
const components = await timeSelectionInputs.shadow$$('ui5-input');
@@ -101,8 +99,7 @@ describe("TimePicker on phone - general interactions", () => {
it("direct number typing", async () => {
const timePicker = await browser.$("#timepicker");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker");
- const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const timePickerPopover = await timePicker.shadow$("ui5-popover");
const timePickerPopoverButtons = await timePickerPopover.$('div.ui5-time-picker-footer').$$("ui5-button");
const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs');
const components = await timeSelectionInputs.shadow$$('ui5-input');
@@ -176,8 +173,7 @@ describe("TimePicker on phone - accessibility and other input attributes", () =>
it("accessibility attributes of numeric inputs", async () => {
const timePicker = await browser.$("#timepicker");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker");
- const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const timePickerPopover = await timePicker.shadow$("ui5-popover");
const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs');
const components = await timeSelectionInputs.shadow$$('ui5-input');
const hoursInnerInput = await components[0].shadow$("input");
@@ -213,8 +209,7 @@ describe("TimePicker on phone - accessibility and other input attributes", () =>
it("other important attributes of numeric inputs", async () => {
const timePicker = await browser.$("#timepicker");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker");
- const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const timePickerPopover = await timePicker.shadow$("ui5-popover");
const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs');
const components = await timeSelectionInputs.shadow$$('ui5-input');
const hoursInnerInput = await components[0].shadow$("input");
diff --git a/packages/main/test/specs/TimePicker.spec.js b/packages/main/test/specs/TimePicker.spec.js
index dcc689c6640b..c2aa755c04c1 100644
--- a/packages/main/test/specs/TimePicker.spec.js
+++ b/packages/main/test/specs/TimePicker.spec.js
@@ -16,8 +16,7 @@ describe("TimePicker general interaction", () => {
it("tests clocks value", async () => {
const timepicker = await browser.$("#timepicker");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker");
- const timepickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const timepickerPopover = await timepicker.shadow$("ui5-responsive-popover");
// act
await timepicker.setProperty("value", "11:12:13");
@@ -35,8 +34,7 @@ describe("TimePicker general interaction", () => {
it("tests clocks submit value", async () => {
const timepicker = await browser.$("#timepicker5");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker5");
- const picker = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const picker = await timepicker.shadow$("ui5-responsive-popover");
// act
await timepicker.shadow$("ui5-input").$(".ui5-time-picker-input-icon-button").click();
@@ -78,15 +76,13 @@ describe("TimePicker general interaction", () => {
await timepicker.click();
- const inputId = await timepicker.shadow$("ui5-input").getProperty("_id");
- const inputStaticAreaItem = await browser.$(`.${inputId}`);
- const slot = await inputStaticAreaItem.shadow$("ui5-popover").$("#customValueStateMessage");
+ const input = await timepicker.shadow$("ui5-input");
+ const slot = await input.shadow$("ui5-popover").$("#customValueStateMessage");
assert.notOk(slot.error, "Value State message slot is working");
});
it("tests change event", async () => {
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepickerChange");
const timepicker = await browser.$("#timepickerChange");
const input = await timepicker.shadow$("ui5-input");
const icon = await input.$("ui5-icon");
@@ -94,7 +90,7 @@ describe("TimePicker general interaction", () => {
// act - submit the same time
await icon.click();
- const timepickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const timepickerPopover = await timepicker.shadow$("ui5-responsive-popover");
await timepickerPopover.$("#submit").click();
// assert
@@ -203,13 +199,12 @@ describe("TimePicker general interaction", () => {
it("test closing the picker with the keyboard", async () => {
const timepicker = await browser.$("#timepicker3");
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker3");
// act
await timepicker.shadow$("ui5-input").$(".ui5-time-picker-input-icon-button").click();
await browser.keys(["Alt", "ArrowUp"]);
- const timepickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+ const timepickerPopover = await timepicker.shadow$("ui5-responsive-popover");
// assert
assert.notOk(await timepickerPopover.isDisplayed(), "the picker should be collapsed");
diff --git a/packages/main/test/specs/Toolbar.spec.js b/packages/main/test/specs/Toolbar.spec.js
index cc4103ceaf4b..c4bf9b5b933d 100644
--- a/packages/main/test/specs/Toolbar.spec.js
+++ b/packages/main/test/specs/Toolbar.spec.js
@@ -12,8 +12,7 @@ describe("Toolbar general interaction", () => {
const overflowButton = await otb.shadow$(".ui5-tb-overflow-btn");
await overflowButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await otb.shadow$("ui5-popover");
assert.strictEqual(await popover.getAttribute("open"), 'true', "overflow popover created and opened, because of 'always overflow' item is inside");
@@ -28,8 +27,7 @@ describe("Toolbar general interaction", () => {
await overflowButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_a");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await otb.shadow$("ui5-popover");
assert.strictEqual(await popover.getAttribute("open"), 'true', "overflow popover created and opened on click on overflow button");
await browser.setWindowSize(1920, 1080);
});
diff --git a/packages/main/test/specs/ToolbarButton.spec.js b/packages/main/test/specs/ToolbarButton.spec.js
index dce15dbf897a..ad8894870083 100644
--- a/packages/main/test/specs/ToolbarButton.spec.js
+++ b/packages/main/test/specs/ToolbarButton.spec.js
@@ -47,8 +47,7 @@ describe("Toolbar general interaction", () => {
const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
await overflowButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await toolbar.shadow$("ui5-popover");
const buttonText = await popover.$("ui5-button").getText();
const buttonDesign = await popover.$("ui5-button").getAttribute("design");
const buttonDisabled = await popover.$("ui5-button").getAttribute("disabled");
@@ -71,8 +70,7 @@ describe("Toolbar general interaction", () => {
const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
await overflowButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await toolbar.shadow$("ui5-popover");
const buttonAccName = await popover.$("ui5-button[accessible-name]");
const buttonAccessibleName = await buttonAccName.getAttribute("accessible-name");
const buttonAccessibleNameRef = await buttonAccName.getAttribute("accessible-name-ref");
@@ -88,8 +86,7 @@ describe("Toolbar general interaction", () => {
const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
await overflowButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#otb_d");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await toolbar.shadow$("ui5-popover");
const buttonAccAttributes = await popover.$("ui5-button[accessible-name]").getProperty("accessibilityAttributes");
assert.strictEqual(buttonAccAttributes.expanded, "true", "Button accessibilityAttributes is correct inside popover");
diff --git a/packages/main/test/specs/ToolbarSelect.spec.js b/packages/main/test/specs/ToolbarSelect.spec.js
index 55d67266c8f7..359a87b2dd3a 100644
--- a/packages/main/test/specs/ToolbarSelect.spec.js
+++ b/packages/main/test/specs/ToolbarSelect.spec.js
@@ -57,8 +57,7 @@ describe("Toolbar general interaction", () => {
const overflowButton = await toolbar.shadow$(".ui5-tb-overflow-btn");
await overflowButton.click();
- const staticAreaItemClassName = await browser.getStaticAreaItemClassName("ui5-toolbar");
- const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover");
+ const popover = await toolbar.shadow$("ui5-popover");
const valueState = await popover.$("ui5-select").getAttribute("value-state");
const disabled = await popover.$("ui5-select[disabled]").getAttribute("disabled");
diff --git a/packages/playground/build-scripts-storybook/parse-manifest.js b/packages/playground/build-scripts-storybook/parse-manifest.js
index 8f0a736a2b56..ae2b4e7afcb0 100644
--- a/packages/playground/build-scripts-storybook/parse-manifest.js
+++ b/packages/playground/build-scripts-storybook/parse-manifest.js
@@ -26,7 +26,6 @@ const EXCLUDE_LIST = [
"onEnterDOM",
"onExitDOM",
"onInvalidation",
- "getStaticAreaItemDomRef",
];
const loadManifest = () => {
diff --git a/packages/tools/components-package/wdio.js b/packages/tools/components-package/wdio.js
index 4498c888a89b..30674dd2497b 100644
--- a/packages/tools/components-package/wdio.js
+++ b/packages/tools/components-package/wdio.js
@@ -1,405 +1,404 @@
-const dns = require("node:dns");
-
-exports.config = {
- //
- // ====================
- // Runner Configuration
- // ====================
- //
- // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
- // on a remote machine).
- runner: 'local',
-
- //
- // ==================
- // Specify Test Files
- // ==================
- // Define which test specs should run. The pattern is relative to the directory
- // from which `wdio` was called. Notice that, if you are calling `wdio` from an
- // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
- // directory is where your package.json resides, so `wdio` will be called from there.
- //
- specs: [
- './test/specs/**/*.js'
- ],
- // Patterns to exclude.
- exclude: [
- // 'path/to/excluded/files'
- ],
- //
- // ============
- // Capabilities
- // ============
- // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
- // time. Depending on the number of capabilities, WebdriverIO launches several test
- // sessions. Within your capabilities you can overwrite the spec and exclude options in
- // order to group specific specs to a specific capability.
- //
- // First, you can define how many instances should be started at the same time. Let's
- // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
- // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
- // files and you set maxInstances to 10, all spec files will get tested at the same time
- // and 30 processes will get spawned. The property handles how many capabilities
- // from the same test should run tests.
- //
- maxInstances: 10,
- //
- // If you have trouble getting all important capabilities together, check out the
- // Sauce Labs platform configurator - a great tool to configure your capabilities:
- // https://docs.saucelabs.com/reference/platforms-configurator
- //
- capabilities: [{
- // maxInstances can get overwritten per capability. So if you have an in-house Selenium
- // grid with only 5 firefox instances available you can make sure that not more than
- // 5 instances get started at a time.
- maxInstances: 5,
- //
- browserName: 'chrome',
- 'goog:chromeOptions': {
- // to run chrome headless the following flags are required
- // (see https://developers.google.com/web/updates/2017/04/headless-chrome)
- args: [
- '--headless',
- '--start-maximized',
- '--no-sandbox',
- '--disable-gpu',
- '--disable-infobars',
- '--disable-extensions',
- '--disable-dev-shm-usage',
- ],
- // args: ['--disable-gpu'],
- }
- }],
- //
- // port to find chromedriver
- port: 9515, // default
- // ===================
- // Test Configurations
- // ===================
- // Define all options that are relevant for the WebdriverIO instance here
- //
- // Level of logging verbosity: trace | debug | info | warn | error
- logLevel: 'error',
- //
- // Warns when a deprecated command is used
- deprecationWarnings: true,
- //
- // If you only want to run your tests until a specific amount of tests have failed use
- // bail (default is 0 - don't bail, run all tests).
- bail: 0,
- //
- // Set a base URL in order to shorten url command calls. If your `url` parameter starts
- // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
- // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
- // gets prepended directly.
- baseUrl: 'http://localhost:4567', // This is important since WDIO 7+ does not accept an empty string for baseUrl
- path: '',
- //
- // Default timeout for all waitFor* commands.
- waitforTimeout: 10000,
- //
- // Default timeout in milliseconds for request
- // if Selenium Grid doesn't send response
- connectionRetryTimeout: 90000,
- //
- // Default request retries count
- connectionRetryCount: 3,
- //
- // Test runner services
- // Services take over a specific job you don't want to take care of. They enhance
- // your test setup with almost no effort. Unlike plugins, they don't add new
- // commands. Instead, they hook themselves up into the test process.
- services: ['chromedriver', ['static-server', {
- folders: [
- { mount: '/', path: './dist' },
- ],
- port: '4567',
- }],
- ],
- // options
- chromeDriverArgs: ['--port=9515'], // default
- // Framework you want to run your specs with.
- // The following are supported: Mocha, Jasmine, and Cucumber
- // see also: https://webdriver.io/docs/frameworks.html
- //
- // Make sure you have the wdio adapter package for the specific framework installed
- // before running any tests.
- framework: 'mocha',
- //
- // Test reporter for stdout.
- // The only one supported by default is 'dot'
- // see also: https://webdriver.io/docs/dot-reporter.html
- reporters: ['dot', 'spec'],
-
- //
- // Options to be passed to Mocha.
- // See the full list at http://mochajs.org/
- mochaOpts: {
- ui: 'bdd',
- timeout: 60000
- },
- //
- // =====
- // Hooks
- // =====
- // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
- // it and to build services around it. You can either apply a single function or an array of
- // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
- // resolved to continue.
- /**
- * Gets executed once before all workers get launched.
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- */
- // onPrepare: function (config, capabilities) {
- // },
- /**
- * Gets executed just before initialising the webdriver session and test framework. It allows you
- * to manipulate configurations depending on the capability or spec.
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that are to be run
- */
- // beforeSession: function (config, capabilities, specs) {
- // },
- beforeSession: () => {
- dns.setDefaultResultOrder('ipv4first');
- },
- /**
- * Gets executed before test execution begins. At this point you can access to all global
- * variables like `browser`. It is the perfect place to define custom commands.
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that are to be run
- */
- before: async function (capabilities, specs) {
- await browser.addCommand("isFocusedDeep", async function () {
- return browser.executeAsync(function (elem, done) {
- let activeElement = document.activeElement;
-
- while (activeElement.shadowRoot) {
- if (activeElement.shadowRoot.activeElement) {
- activeElement = activeElement.shadowRoot.activeElement;
- } else {
- break;
- }
- }
- done(elem === activeElement);
- }, this);
- }, true);
-
- await browser.addCommand("isFocusedDeepElement", async function (element) {
- return browser.executeAsync(function (elem, element, done) {
- let activeElement = document.activeElement;
-
- while (activeElement.shadowRoot) {
- if (activeElement.shadowRoot.activeElement) {
- activeElement = activeElement.shadowRoot.activeElement;
- } else {
- break;
- }
- }
- done(element === activeElement);
- }, this, element);
- }, true);
-
- await browser.addCommand("setProperty", async function(property, value) {
- return browser.executeAsync((elem, property, value, done) => {
- elem[property] = value;
- done();
- }, this, property, value);
- }, true);
-
- await browser.addCommand("setAttribute", async function(attribute, value) {
- return browser.executeAsync((elem, attribute, value, done) => {
- elem.setAttribute(attribute, value);
- done();
- }, this, attribute, value);
- }, true);
-
- await browser.addCommand("removeAttribute", async function(attribute) {
- return browser.executeAsync((elem, attribute, done) => {
- elem.removeAttribute(attribute);
- done();
- }, this, attribute);
- }, true);
-
- await browser.addCommand("hasClass", async function(className) {
- return browser.executeAsync((elem, className, done) => {
- done(elem.classList.contains(className));
- }, this, className);
- }, true);
-
- await browser.addCommand("hasAttribute", async function(attrName) {
- return browser.executeAsync((elem, attrName, done) => {
- done(elem.hasAttribute(attrName));
- }, this, attrName);
- }, true);
-
- await browser.addCommand("getStaticAreaItemClassName", async function(selector) {
- return browser.executeAsync(async (selector, done) => {
- const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
- done(staticAreaItem.host.classList[0]);
- }, selector);
- }, false);
-
- await browser.addLocatorStrategy('activeElement', (selector) => {
- return document.querySelector(selector).shadowRoot.activeElement;
- });
- },
- /**
- * Runs before a WebdriverIO command gets executed.
- * @param {String} commandName hook command name
- * @param {Array} args arguments that command would receive
- */
- beforeCommand: async function (commandName, args) {
- const waitFor = [
- "$",
- "$$",
- "getAttribute",
- "hasAttribute", // custom
- "getCSSProperty",
- "getHTML",
- "getProperty",
- "getSize",
- "getStaticAreaItemClassName", // custom
- "getText",
- "getValue",
- "hasClass", // custom
- "isDisplayed",
- "isDisplayedInViewport",
- "isEnabled",
- "isExisting",
- "isFocused",
- "isFocusedDeep", // custom
- "isFocusedDeepElement", // custom
- "shadow$",
- "shadow$$",
- ];
- if (waitFor.includes(commandName)) {
- await browser.executeAsync(function (done) {
- window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
- });
- }
- },
-
- /**
- * Hook that gets executed before the suite starts
- * @param {Object} suite suite details
- */
- // beforeSuite: function (suite) {
- // },
- /**
- * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
- * @param {Object} test test details
- */
- // beforeTest: function (test) {
- // },
- /**
- * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
- * beforeEach in Mocha)
- */
- // beforeHook: function () {
- // },
- /**
- * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
- * afterEach in Mocha)
- */
- // afterHook: function () {
- // },
- /**
- * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
- * @param {Object} test test details
- */
- // afterTest: function (test) {
- // },
- /**
- * Hook that gets executed after the suite has ended
- * @param {Object} suite suite details
- */
- // afterSuite: function (suite) {
- // },
-
- /**
- * Runs after a WebdriverIO command gets executed
- * @param {String} commandName hook command name
- * @param {Array} args arguments that command would receive
- * @param {Number} result 0 - command success, 1 - command error
- * @param {Object} error error object if any
- */
- afterCommand: async function (commandName, args, result, error) {
-
- // url -> set configuration first
- if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
- await browser.executeAsync(function(done) {
- window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
- done();
- });
- }
-
- const waitFor = [
- "addValue",
- "clearValue",
- "click",
- "doubleClick",
- "dragAndDrop",
- "pause",
- "removeAttribute", // custom
- "scrollIntoView",
- "setAttribute", // custom
- "setProperty", // custom
- "setValue",
- "setWindowSize",
- "touchAction",
- "url",
- ];
-
- const waitForWithDelay = [
- "keys",
- ];
-
- if (waitFor.includes(commandName)) {
- await browser.executeAsync(function (done) {
- window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
- });
- } else if (waitForWithDelay.includes(commandName)) {
- await browser.executeAsync(function (done) {
- setTimeout(() => {
- window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
- }, 10);
- });
- }
- },
- /**
- * Gets executed after all tests are done. You still have access to all global variables from
- * the test.
- * @param {Number} result 0 - test pass, 1 - test fail
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that ran
- */
- // after: function (result, capabilities, specs) {
- // },
- /**
- * Gets executed right after terminating the webdriver session.
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that ran
- */
- // afterSession: function (config, capabilities, specs) {
- // },
- /**
- * Gets executed after all workers got shut down and the process is about to exit.
- * @param {Object} exitCode 0 - success, 1 - fail
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {<Object>} results object containing test results
- */
- // onComplete: function(exitCode, config, capabilities, results) {
- // },
- /**
- * Gets executed when a refresh happens.
- * @param {String} oldSessionId session ID of the old session
- * @param {String} newSessionId session ID of the new session
- */
- //onReload: function(oldSessionId, newSessionId) {
- //}
-}
\ No newline at end of file
+const dns = require("node:dns");
+
+exports.config = {
+ //
+ // ====================
+ // Runner Configuration
+ // ====================
+ //
+ // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
+ // on a remote machine).
+ runner: 'local',
+
+ //
+ // ==================
+ // Specify Test Files
+ // ==================
+ // Define which test specs should run. The pattern is relative to the directory
+ // from which `wdio` was called. Notice that, if you are calling `wdio` from an
+ // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
+ // directory is where your package.json resides, so `wdio` will be called from there.
+ //
+ specs: [
+ './test/specs/**/*.js'
+ ],
+ // Patterns to exclude.
+ exclude: [
+ // 'path/to/excluded/files'
+ ],
+ //
+ // ============
+ // Capabilities
+ // ============
+ // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
+ // time. Depending on the number of capabilities, WebdriverIO launches several test
+ // sessions. Within your capabilities you can overwrite the spec and exclude options in
+ // order to group specific specs to a specific capability.
+ //
+ // First, you can define how many instances should be started at the same time. Let's
+ // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
+ // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
+ // files and you set maxInstances to 10, all spec files will get tested at the same time
+ // and 30 processes will get spawned. The property handles how many capabilities
+ // from the same test should run tests.
+ //
+ maxInstances: 10,
+ //
+ // If you have trouble getting all important capabilities together, check out the
+ // Sauce Labs platform configurator - a great tool to configure your capabilities:
+ // https://docs.saucelabs.com/reference/platforms-configurator
+ //
+ capabilities: [{
+ // maxInstances can get overwritten per capability. So if you have an in-house Selenium
+ // grid with only 5 firefox instances available you can make sure that not more than
+ // 5 instances get started at a time.
+ maxInstances: 5,
+ //
+ browserName: 'chrome',
+ 'goog:chromeOptions': {
+ // to run chrome headless the following flags are required
+ // (see https://developers.google.com/web/updates/2017/04/headless-chrome)
+ args: [
+ '--headless',
+ '--start-maximized',
+ '--no-sandbox',
+ '--disable-gpu',
+ '--disable-infobars',
+ '--disable-extensions',
+ '--disable-dev-shm-usage',
+ ],
+ // args: ['--disable-gpu'],
+ }
+ }],
+ //
+ // port to find chromedriver
+ port: 9515, // default
+ // ===================
+ // Test Configurations
+ // ===================
+ // Define all options that are relevant for the WebdriverIO instance here
+ //
+ // Level of logging verbosity: trace | debug | info | warn | error
+ logLevel: 'error',
+ //
+ // Warns when a deprecated command is used
+ deprecationWarnings: true,
+ //
+ // If you only want to run your tests until a specific amount of tests have failed use
+ // bail (default is 0 - don't bail, run all tests).
+ bail: 0,
+ //
+ // Set a base URL in order to shorten url command calls. If your `url` parameter starts
+ // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
+ // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
+ // gets prepended directly.
+ baseUrl: 'http://localhost:4567', // This is important since WDIO 7+ does not accept an empty string for baseUrl
+ path: '',
+ //
+ // Default timeout for all waitFor* commands.
+ waitforTimeout: 10000,
+ //
+ // Default timeout in milliseconds for request
+ // if Selenium Grid doesn't send response
+ connectionRetryTimeout: 90000,
+ //
+ // Default request retries count
+ connectionRetryCount: 3,
+ //
+ // Test runner services
+ // Services take over a specific job you don't want to take care of. They enhance
+ // your test setup with almost no effort. Unlike plugins, they don't add new
+ // commands. Instead, they hook themselves up into the test process.
+ services: ['chromedriver', ['static-server', {
+ folders: [
+ { mount: '/', path: './dist' },
+ ],
+ port: '4567',
+ }],
+ ],
+ // options
+ chromeDriverArgs: ['--port=9515'], // default
+ // Framework you want to run your specs with.
+ // The following are supported: Mocha, Jasmine, and Cucumber
+ // see also: https://webdriver.io/docs/frameworks.html
+ //
+ // Make sure you have the wdio adapter package for the specific framework installed
+ // before running any tests.
+ framework: 'mocha',
+ //
+ // Test reporter for stdout.
+ // The only one supported by default is 'dot'
+ // see also: https://webdriver.io/docs/dot-reporter.html
+ reporters: ['dot', 'spec'],
+
+ //
+ // Options to be passed to Mocha.
+ // See the full list at http://mochajs.org/
+ mochaOpts: {
+ ui: 'bdd',
+ timeout: 60000
+ },
+ //
+ // =====
+ // Hooks
+ // =====
+ // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
+ // it and to build services around it. You can either apply a single function or an array of
+ // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
+ // resolved to continue.
+ /**
+ * Gets executed once before all workers get launched.
+ * @param {Object} config wdio configuration object
+ * @param {Array.<Object>} capabilities list of capabilities details
+ */
+ // onPrepare: function (config, capabilities) {
+ // },
+ /**
+ * Gets executed just before initialising the webdriver session and test framework. It allows you
+ * to manipulate configurations depending on the capability or spec.
+ * @param {Object} config wdio configuration object
+ * @param {Array.<Object>} capabilities list of capabilities details
+ * @param {Array.<String>} specs List of spec file paths that are to be run
+ */
+ // beforeSession: function (config, capabilities, specs) {
+ // },
+ beforeSession: () => {
+ dns.setDefaultResultOrder('ipv4first');
+ },
+ /**
+ * Gets executed before test execution begins. At this point you can access to all global
+ * variables like `browser`. It is the perfect place to define custom commands.
+ * @param {Array.<Object>} capabilities list of capabilities details
+ * @param {Array.<String>} specs List of spec file paths that are to be run
+ */
+ before: async function (capabilities, specs) {
+ await browser.addCommand("isFocusedDeep", async function () {
+ return browser.executeAsync(function (elem, done) {
+ let activeElement = document.activeElement;
+
+ while (activeElement.shadowRoot) {
+ if (activeElement.shadowRoot.activeElement) {
+ activeElement = activeElement.shadowRoot.activeElement;
+ } else {
+ break;
+ }
+ }
+ done(elem === activeElement);
+ }, this);
+ }, true);
+
+ await browser.addCommand("isFocusedDeepElement", async function (element) {
+ return browser.executeAsync(function (elem, element, done) {
+ let activeElement = document.activeElement;
+
+ while (activeElement.shadowRoot) {
+ if (activeElement.shadowRoot.activeElement) {
+ activeElement = activeElement.shadowRoot.activeElement;
+ } else {
+ break;
+ }
+ }
+ done(element === activeElement);
+ }, this, element);
+ }, true);
+
+ await browser.addCommand("setProperty", async function(property, value) {
+ return browser.executeAsync((elem, property, value, done) => {
+ elem[property] = value;
+ done();
+ }, this, property, value);
+ }, true);
+
+ await browser.addCommand("setAttribute", async function(attribute, value) {
+ return browser.executeAsync((elem, attribute, value, done) => {
+ elem.setAttribute(attribute, value);
+ done();
+ }, this, attribute, value);
+ }, true);
+
+ await browser.addCommand("removeAttribute", async function(attribute) {
+ return browser.executeAsync((elem, attribute, done) => {
+ elem.removeAttribute(attribute);
+ done();
+ }, this, attribute);
+ }, true);
+
+ await browser.addCommand("hasClass", async function(className) {
+ return browser.executeAsync((elem, className, done) => {
+ done(elem.classList.contains(className));
+ }, this, className);
+ }, true);
+
+ await browser.addCommand("hasAttribute", async function(attrName) {
+ return browser.executeAsync((elem, attrName, done) => {
+ done(elem.hasAttribute(attrName));
+ }, this, attrName);
+ }, true);
+
+ await browser.addCommand("matches", async function(selector) {
+ return browser.executeAsync((elem, selector, done) => {
+ done(elem.matches(selector));
+ }, this, selector);
+ }, true);
+
+ await browser.addLocatorStrategy('activeElement', (selector) => {
+ return document.querySelector(selector).shadowRoot.activeElement;
+ });
+ },
+ /**
+ * Runs before a WebdriverIO command gets executed.
+ * @param {String} commandName hook command name
+ * @param {Array} args arguments that command would receive
+ */
+ beforeCommand: async function (commandName, args) {
+ const waitFor = [
+ "$",
+ "$$",
+ "getAttribute",
+ "hasAttribute", // custom
+ "matches", // custom
+ "getCSSProperty",
+ "getHTML",
+ "getProperty",
+ "getSize",
+ "getText",
+ "getValue",
+ "hasClass", // custom
+ "isDisplayed",
+ "isDisplayedInViewport",
+ "isEnabled",
+ "isExisting",
+ "isFocused",
+ "isFocusedDeep", // custom
+ "isFocusedDeepElement", // custom
+ "shadow$",
+ "shadow$$"
+ ];
+ if (waitFor.includes(commandName)) {
+ await browser.executeAsync(function (done) {
+ window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+ });
+ }
+ },
+
+ /**
+ * Hook that gets executed before the suite starts
+ * @param {Object} suite suite details
+ */
+ // beforeSuite: function (suite) {
+ // },
+ /**
+ * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+ * @param {Object} test test details
+ */
+ // beforeTest: function (test) {
+ // },
+ /**
+ * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
+ * beforeEach in Mocha)
+ */
+ // beforeHook: function () {
+ // },
+ /**
+ * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
+ * afterEach in Mocha)
+ */
+ // afterHook: function () {
+ // },
+ /**
+ * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
+ * @param {Object} test test details
+ */
+ // afterTest: function (test) {
+ // },
+ /**
+ * Hook that gets executed after the suite has ended
+ * @param {Object} suite suite details
+ */
+ // afterSuite: function (suite) {
+ // },
+
+ /**
+ * Runs after a WebdriverIO command gets executed
+ * @param {String} commandName hook command name
+ * @param {Array} args arguments that command would receive
+ * @param {Number} result 0 - command success, 1 - command error
+ * @param {Object} error error object if any
+ */
+ afterCommand: async function (commandName, args, result, error) {
+
+ // url -> set configuration first
+ if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
+ await browser.executeAsync(function(done) {
+ window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
+ done();
+ });
+ }
+
+ const waitFor = [
+ "addValue",
+ "clearValue",
+ "click",
+ "doubleClick",
+ "dragAndDrop",
+ "pause",
+ "removeAttribute", // custom
+ "scrollIntoView",
+ "setAttribute", // custom
+ "setProperty", // custom
+ "setValue",
+ "setWindowSize",
+ "touchAction",
+ "url",
+ ];
+
+ const waitForWithDelay = [
+ "keys",
+ ];
+
+ if (waitFor.includes(commandName)) {
+ await browser.executeAsync(function (done) {
+ window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+ });
+ } else if (waitForWithDelay.includes(commandName)) {
+ await browser.executeAsync(function (done) {
+ setTimeout(() => {
+ window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
+ }, 10);
+ });
+ }
+ },
+ /**
+ * Gets executed after all tests are done. You still have access to all global variables from
+ * the test.
+ * @param {Number} result 0 - test pass, 1 - test fail
+ * @param {Array.<Object>} capabilities list of capabilities details
+ * @param {Array.<String>} specs List of spec file paths that ran
+ */
+ // after: function (result, capabilities, specs) {
+ // },
+ /**
+ * Gets executed right after terminating the webdriver session.
+ * @param {Object} config wdio configuration object
+ * @param {Array.<Object>} capabilities list of capabilities details
+ * @param {Array.<String>} specs List of spec file paths that ran
+ */
+ // afterSession: function (config, capabilities, specs) {
+ // },
+ /**
+ * Gets executed after all workers got shut down and the process is about to exit.
+ * @param {Object} exitCode 0 - success, 1 - fail
+ * @param {Object} config wdio configuration object
+ * @param {Array.<Object>} capabilities list of capabilities details
+ * @param {<Object>} results object containing test results
+ */
+ // onComplete: function(exitCode, config, capabilities, results) {
+ // },
+ /**
+ * Gets executed when a refresh happens.
+ * @param {String} oldSessionId session ID of the old session
+ * @param {String} newSessionId session ID of the new session
+ */
+ //onReload: function(oldSessionId, newSessionId) {
+ //}
+}
diff --git a/packages/tools/components-package/wdio.sync.js b/packages/tools/components-package/wdio.sync.js
deleted file mode 100644
index 98356603d90c..000000000000
--- a/packages/tools/components-package/wdio.sync.js
+++ /dev/null
@@ -1,368 +0,0 @@
-exports.config = {
- //
- // ====================
- // Runner Configuration
- // ====================
- //
- // WebdriverIO allows it to run your tests in arbitrary locations (e.g. locally or
- // on a remote machine).
- runner: 'local',
-
- //
- // ==================
- // Specify Test Files
- // ==================
- // Define which test specs should run. The pattern is relative to the directory
- // from which `wdio` was called. Notice that, if you are calling `wdio` from an
- // NPM script (see https://docs.npmjs.com/cli/run-script) then the current working
- // directory is where your package.json resides, so `wdio` will be called from there.
- //
- specs: [
- './test/specs/**/*.js'
- ],
- // Patterns to exclude.
- exclude: [
- // 'path/to/excluded/files'
- ],
- //
- // ============
- // Capabilities
- // ============
- // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
- // time. Depending on the number of capabilities, WebdriverIO launches several test
- // sessions. Within your capabilities you can overwrite the spec and exclude options in
- // order to group specific specs to a specific capability.
- //
- // First, you can define how many instances should be started at the same time. Let's
- // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
- // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
- // files and you set maxInstances to 10, all spec files will get tested at the same time
- // and 30 processes will get spawned. The property handles how many capabilities
- // from the same test should run tests.
- //
- maxInstances: 10,
- //
- // If you have trouble getting all important capabilities together, check out the
- // Sauce Labs platform configurator - a great tool to configure your capabilities:
- // https://docs.saucelabs.com/reference/platforms-configurator
- //
- capabilities: [{
- // maxInstances can get overwritten per capability. So if you have an in-house Selenium
- // grid with only 5 firefox instances available you can make sure that not more than
- // 5 instances get started at a time.
- maxInstances: 5,
- //
- browserName: 'chrome',
- 'goog:chromeOptions': {
- // to run chrome headless the following flags are required
- // (see https://developers.google.com/web/updates/2017/04/headless-chrome)
- args: [
- '--headless',
- '--start-maximized',
- '--no-sandbox',
- '--disable-gpu',
- '--disable-infobars',
- '--disable-extensions',
- '--disable-dev-shm-usage',
- ],
- // args: ['--disable-gpu'],
- }
- }],
- //
- // port to find chromedriver
- port: 9515, // default
- // ===================
- // Test Configurations
- // ===================
- // Define all options that are relevant for the WebdriverIO instance here
- //
- // Level of logging verbosity: trace | debug | info | warn | error
- logLevel: 'error',
- //
- // Warns when a deprecated command is used
- deprecationWarnings: true,
- //
- // If you only want to run your tests until a specific amount of tests have failed use
- // bail (default is 0 - don't bail, run all tests).
- bail: 0,
- //
- // Set a base URL in order to shorten url command calls. If your `url` parameter starts
- // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
- // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
- // gets prepended directly.
- baseUrl: undefined, // This is important since WDIO 7+ does not accept an empty string for baseUrl
- path: '',
- //
- // Default timeout for all waitFor* commands.
- waitforTimeout: 10000,
- //
- // Default timeout in milliseconds for request
- // if Selenium Grid doesn't send response
- connectionRetryTimeout: 90000,
- //
- // Default request retries count
- connectionRetryCount: 3,
- //
- // Test runner services
- // Services take over a specific job you don't want to take care of. They enhance
- // your test setup with almost no effort. Unlike plugins, they don't add new
- // commands. Instead, they hook themselves up into the test process.
- services: ['chromedriver'],
- // options
- chromeDriverArgs: ['--port=9515'], // default
- // Framework you want to run your specs with.
- // The following are supported: Mocha, Jasmine, and Cucumber
- // see also: https://webdriver.io/docs/frameworks.html
- //
- // Make sure you have the wdio adapter package for the specific framework installed
- // before running any tests.
- framework: 'mocha',
- //
- // Test reporter for stdout.
- // The only one supported by default is 'dot'
- // see also: https://webdriver.io/docs/dot-reporter.html
- reporters: ['dot', 'spec'],
-
- //
- // Options to be passed to Mocha.
- // See the full list at http://mochajs.org/
- mochaOpts: {
- ui: 'bdd',
- timeout: 60000
- },
- //
- // =====
- // Hooks
- // =====
- // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
- // it and to build services around it. You can either apply a single function or an array of
- // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
- // resolved to continue.
- /**
- * Gets executed once before all workers get launched.
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- */
- // onPrepare: function (config, capabilities) {
- // },
- /**
- * Gets executed just before initialising the webdriver session and test framework. It allows you
- * to manipulate configurations depending on the capability or spec.
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that are to be run
- */
- // beforeSession: function (config, capabilities, specs) {
- // },
- /**
- * Gets executed before test execution begins. At this point you can access to all global
- * variables like `browser`. It is the perfect place to define custom commands.
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that are to be run
- */
- before: function (capabilities, specs) {
- browser.addCommand("isFocusedDeep", function () {
- return browser.execute(function (elem) {
- let activeElement = document.activeElement;
-
- while (activeElement.shadowRoot) {
- if (activeElement.shadowRoot.activeElement) {
- activeElement = activeElement.shadowRoot.activeElement;
- } else {
- break;
- }
- }
- return elem === activeElement;
- }, this);
- }, true);
-
- browser.addCommand("isFocusedDeepElement", function (element) {
- return browser.execute(function (elem, element, done) {
- let activeElement = document.activeElement;
-
- while (activeElement.shadowRoot) {
- if (activeElement.shadowRoot.activeElement) {
- activeElement = activeElement.shadowRoot.activeElement;
- } else {
- break;
- }
- }
- done(element === activeElement);
- }, this, element);
- }, true);
-
- browser.addCommand("setProperty", function(property, value) {
- return browser.execute((elem, property, value) => {
- return elem[property] = value;
- }, this, property, value);
- }, true);
-
- browser.addCommand("setAttribute", function(attribute, value) {
- return browser.execute((elem, attribute, value) => {
- return elem.setAttribute(attribute, value);
- }, this, attribute, value);
- }, true);
-
- browser.addCommand("removeAttribute", function(attribute) {
- return browser.execute((elem, attribute) => {
- return elem.removeAttribute(attribute);
- }, this, attribute);
- }, true);
-
- browser.addCommand("hasClass", function(className) {
- return browser.execute((elem, className) => {
- return elem.classList.contains(className);
- }, this, className);
- }, true);
-
- browser.addCommand("getStaticAreaItemClassName", function(selector) {
- return browser.execute(async (selector) => {
- const staticAreaItem = await document.querySelector(selector).getStaticAreaItemDomRef();
- return staticAreaItem.host.classList[0];
- }, selector);
- }, false);
- },
- /**
- * Runs before a WebdriverIO command gets executed.
- * @param {String} commandName hook command name
- * @param {Array} args arguments that command would receive
- */
- beforeCommand: function (commandName, args) {
- const waitFor = [
- "$",
- "$$",
- "getAttribute",
- "getCSSProperty",
- "getHTML",
- "getProperty",
- "getSize",
- "getStaticAreaItemClassName", // custom
- "getText",
- "getValue",
- "hasClass", // custom
- "isDisplayed",
- "isDisplayedInViewport",
- "isEnabled",
- "isExisting",
- "isFocused",
- "isFocusedDeep", // custom
- "isFocusedDeepElement", // custom
- "shadow$",
- "shadow$$",
- ];
- if (waitFor.includes(commandName)) {
- browser.executeAsync(function (done) {
- window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
- });
- }
- },
-
- /**
- * Hook that gets executed before the suite starts
- * @param {Object} suite suite details
- */
- // beforeSuite: function (suite) {
- // },
- /**
- * Function to be executed before a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
- * @param {Object} test test details
- */
- // beforeTest: function (test) {
- // },
- /**
- * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
- * beforeEach in Mocha)
- */
- // beforeHook: function () {
- // },
- /**
- * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
- * afterEach in Mocha)
- */
- // afterHook: function () {
- // },
- /**
- * Function to be executed after a test (in Mocha/Jasmine) or a step (in Cucumber) starts.
- * @param {Object} test test details
- */
- // afterTest: function (test) {
- // },
- /**
- * Hook that gets executed after the suite has ended
- * @param {Object} suite suite details
- */
- // afterSuite: function (suite) {
- // },
-
- /**
- * Runs after a WebdriverIO command gets executed
- * @param {String} commandName hook command name
- * @param {Array} args arguments that command would receive
- * @param {Number} result 0 - command success, 1 - command error
- * @param {Object} error error object if any
- */
- afterCommand: function (commandName, args, result, error) {
-
- // url -> set configuration first
- if (commandName === "url" && !args[0].includes("do-not-change-configuration")) {
- browser.execute(function() {
- window["sap-ui-webcomponents-bundle"].configuration.setNoConflict(true);
- });
- }
-
- const waitFor = [
- "addValue",
- "clearValue",
- "click",
- "doubleClick",
- "dragAndDrop",
- "keys",
- "pause",
- "removeAttribute", // custom
- "setAttribute", // custom
- "setProperty", // custom
- "setValue",
- "setWindowSize",
- "touchAction",
- "url"
- ];
- if (waitFor.includes(commandName)) {
- browser.executeAsync(function (done) {
- window["sap-ui-webcomponents-bundle"].renderFinished().then(done);
- });
- }
- },
- /**
- * Gets executed after all tests are done. You still have access to all global variables from
- * the test.
- * @param {Number} result 0 - test pass, 1 - test fail
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that ran
- */
- // after: function (result, capabilities, specs) {
- // },
- /**
- * Gets executed right after terminating the webdriver session.
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {Array.<String>} specs List of spec file paths that ran
- */
- // afterSession: function (config, capabilities, specs) {
- // },
- /**
- * Gets executed after all workers got shut down and the process is about to exit.
- * @param {Object} exitCode 0 - success, 1 - fail
- * @param {Object} config wdio configuration object
- * @param {Array.<Object>} capabilities list of capabilities details
- * @param {<Object>} results object containing test results
- */
- // onComplete: function(exitCode, config, capabilities, results) {
- // },
- /**
- * Gets executed when a refresh happens.
- * @param {String} oldSessionId session ID of the old session
- * @param {String} newSessionId session ID of the new session
- */
- //onReload: function(oldSessionId, newSessionId) {
- //}
-}
diff --git a/yarn.lock b/yarn.lock
index 5558c8185479..795933c5065d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -636,7 +636,7 @@
chalk "^2.4.2"
js-tokens "^4.0.0"
-"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5", "@babel/parser@^7.22.7", "@babel/parser@^7.9.4":
+"@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5", "@babel/parser@^7.22.7":
version "7.22.7"
resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.22.7.tgz#df8cf085ce92ddbdbf668a7f186ce848c9036cae"
integrity sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==
@@ -5376,11 +5376,6 @@
dependencies:
"@types/node" "*"
-"@types/linkify-it@*":
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-3.0.2.tgz#fd2cd2edbaa7eaac7e7f3c1748b52a19143846c9"
- integrity sha512-HZQYqbiFVWufzCwexrvh694SOim8z2d+xJl5UNamcvQFejLY/2YUtzXHYi3cHdI7PMlS8ejH2slRAOJQ32aNbA==
-
"@types/lodash.flattendeep@^4.4.6":
version "4.4.7"
resolved "https://registry.yarnpkg.com/@types/lodash.flattendeep/-/lodash.flattendeep-4.4.7.tgz#0ce3dccbe006826d58e9824b27df4b00ed3e90e6"
@@ -5407,14 +5402,6 @@
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
-"@types/markdown-it@^12.2.3":
- version "12.2.3"
- resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
- integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==
- dependencies:
- "@types/linkify-it" "*"
- "@types/mdurl" "*"
-
"@types/mdast@^3.0.0":
version "3.0.12"
resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.12.tgz#beeb511b977c875a5b0cc92eab6fcac2f0895514"
@@ -5429,11 +5416,6 @@
dependencies:
"@types/unist" "*"
-"@types/mdurl@*":
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-1.0.2.tgz#e2ce9d83a613bacf284c7be7d491945e39e1f8e9"
- integrity sha512-eC4U9MlIcu2q0KQmXszyn5Akca/0jrQmwDRgpAMJai7qBWq4amIQhZyNau4VYGtCeALvW1/NtjzJJ567aZxfKA==
-
"@types/mdx@^2.0.0":
version "2.0.5"
resolved "https://registry.yarnpkg.com/@types/mdx/-/mdx-2.0.5.tgz#9a85a8f70c7c4d9e695a21d5ae5c93645eda64b1"
@@ -7048,7 +7030,7 @@ bl@^4.0.3, bl@^4.1.0:
inherits "^2.0.4"
readable-stream "^3.4.0"
-bluebird@^3.5.1, bluebird@^3.7.2:
+bluebird@^3.5.1:
version "3.7.2"
resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -7478,13 +7460,6 @@ caniuse-lite@^1.0.30001565:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz#b4e5c1fa786f733ab78fc70f592df6b3f23244ca"
integrity sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==
-catharsis@^0.9.0:
- version "0.9.0"
- resolved "https://registry.yarnpkg.com/catharsis/-/catharsis-0.9.0.tgz#40382a168be0e6da308c277d3a2b3eb40c7d2121"
- integrity sha512-prMTQVpcns/tzFgFVkVp6ak6RykZyWb3gu8ckUpd6YkTlacOd3DXGJjIpD4Q6zJirizvaiAjSSHlOsA+6sNh2A==
- dependencies:
- lodash "^4.17.15"
-
ccount@^2.0.0:
version "2.0.1"
resolved "https://registry.yarnpkg.com/ccount/-/ccount-2.0.1.tgz#17a3bf82302e0870d6da43a01311a8bc02a3ecf5"
@@ -9407,11 +9382,6 @@ entities@^4.2.0, entities@^4.4.0:
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
-entities@~2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/entities/-/entities-2.1.0.tgz#992d3129cf7df6870b96c57858c249a120f8b8b5"
- integrity sha512-hCx1oky9PFrJ611mf0ifBLBRW8lUUVRlFolb5gWRfIELabBlbp9xZvrqZLZAs+NxFnbfQoeGd8wDkygjg7U85w==
-
env-paths@^2.2.0:
version "2.2.1"
resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2"
@@ -11120,7 +11090,7 @@ graceful-fs@4.2.10:
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
version "4.2.11"
resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
@@ -12787,12 +12757,10 @@ js-yaml@^3.10.0, js-yaml@^3.13.1, js-yaml@^3.9.0:
argparse "^1.0.7"
esprima "^4.0.0"
-js2xmlparser@^4.0.2:
- version "4.0.2"
- resolved "https://registry.yarnpkg.com/js2xmlparser/-/js2xmlparser-4.0.2.tgz#2a1fdf01e90585ef2ae872a01bc169c6a8d5e60a"
- integrity sha512-6n4D8gLlLf1n5mNLQPRfViYzu9RATblzPEtm1SthMX1Pjao0r9YI9nw7ZIfRxQMERS87mcswrg+r/OYrPRX6jA==
- dependencies:
- xmlcreate "^2.0.4"
+jsbn@1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-1.1.0.tgz#b01307cb29b618a1ed26ec79e911f803c4da0040"
+ integrity sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==
jsbn@1.1.0:
version "1.1.0"
@@ -12825,27 +12793,6 @@ jscodeshift@^0.15.1:
temp "^0.8.4"
write-file-atomic "^2.3.0"
-jsdoc@^3.6.6:
- version "3.6.11"
- resolved "https://registry.yarnpkg.com/jsdoc/-/jsdoc-3.6.11.tgz#8bbb5747e6f579f141a5238cbad4e95e004458ce"
- integrity sha512-8UCU0TYeIYD9KeLzEcAu2q8N/mx9O3phAGl32nmHlE0LpaJL71mMkP4d+QE5zWfNt50qheHtOZ0qoxVrsX5TUg==
- dependencies:
- "@babel/parser" "^7.9.4"
- "@types/markdown-it" "^12.2.3"
- bluebird "^3.7.2"
- catharsis "^0.9.0"
- escape-string-regexp "^2.0.0"
- js2xmlparser "^4.0.2"
- klaw "^3.0.0"
- markdown-it "^12.3.2"
- markdown-it-anchor "^8.4.1"
- marked "^4.0.10"
- mkdirp "^1.0.4"
- requizzle "^0.2.3"
- strip-json-comments "^3.1.0"
- taffydb "2.6.2"
- underscore "~1.13.2"
-
jsesc@^2.5.1:
version "2.5.2"
resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -12997,13 +12944,6 @@ klaw-sync@^6.0.0:
dependencies:
graceful-fs "^4.1.11"
-klaw@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/klaw/-/klaw-3.0.0.tgz#b11bec9cf2492f06756d6e809ab73a2910259146"
- integrity sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==
- dependencies:
- graceful-fs "^4.1.9"
-
kleur@^3.0.3:
version "3.0.3"
resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
@@ -13240,13 +13180,6 @@ lines-and-columns@~2.0.3:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-2.0.3.tgz#b2f0badedb556b747020ab8ea7f0373e22efac1b"
integrity sha512-cNOjgCnLB+FnvWWtyRTzmB3POJ+cXxTA81LoW7u8JdmhfXzriropYwpjShnz1QLLWsQwY7nIxoDmcPTwphDK9w==
-linkify-it@^3.0.1:
- version "3.0.3"
- resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-3.0.3.tgz#a98baf44ce45a550efb4d49c769d07524cc2fa2e"
- integrity sha512-ynTsyrFSdE5oZ/O9GEf00kPngmOfVwazR5GKDq6EYfhlpFug3J2zybX56a2PRRpc9P+FuSoGNAwjlbDs9jJBPQ==
- dependencies:
- uc.micro "^1.0.1"
-
lit-element@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.3.2.tgz#9913bf220b85065f0e5f1bb8878cc44f36b50cfa"
@@ -13724,22 +13657,6 @@ markdown-extensions@^2.0.0:
resolved "https://registry.yarnpkg.com/markdown-extensions/-/markdown-extensions-2.0.0.tgz#34bebc83e9938cae16e0e017e4a9814a8330d3c4"
integrity sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q==
-markdown-it-anchor@^8.4.1:
- version "8.6.7"
- resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.6.7.tgz#ee6926daf3ad1ed5e4e3968b1740eef1c6399634"
- integrity sha512-FlCHFwNnutLgVTflOYHPW2pPcl2AACqVzExlkGQNsi4CJgqOHN7YTgDd4LuhgN1BFO3TS0vLAruV1Td6dwWPJA==
-
-markdown-it@^12.3.2:
- version "12.3.2"
- resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-12.3.2.tgz#bf92ac92283fe983fe4de8ff8abfb5ad72cd0c90"
- integrity sha512-TchMembfxfNVpHkbtriWltGWc+m3xszaRD0CZup7GFFhzIgQqxIfn3eGj1yZpfuflzPvfkt611B2Q/Bsk1YnGg==
- dependencies:
- argparse "^2.0.1"
- entities "~2.1.0"
- linkify-it "^3.0.1"
- mdurl "^1.0.1"
- uc.micro "^1.0.5"
-
markdown-table@^3.0.0:
version "3.0.3"
resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-3.0.3.tgz#e6331d30e493127e031dd385488b5bd326e4a6bd"
@@ -13750,11 +13667,6 @@ markdown-to-jsx@^7.1.8:
resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-7.2.1.tgz#87061fd3176ad926ef3d99493e5c57f6335e0c51"
integrity sha512-9HrdzBAo0+sFz9ZYAGT5fB8ilzTW+q6lPocRxrIesMO+aB40V9MgFfbfMXxlGjf22OpRy+IXlvVaQenicdpgbg==
-marked@^4.0.10:
- version "4.3.0"
- resolved "https://registry.yarnpkg.com/marked/-/marked-4.3.0.tgz#796362821b019f734054582038b116481b456cf3"
- integrity sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==
-
marky@^1.2.2:
version "1.2.5"
resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.5.tgz#55796b688cbd72390d2d399eaaf1832c9413e3c0"
@@ -14118,11 +14030,6 @@ mdn-data@2.0.14:
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
-mdurl@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
- integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==
-
media-typer@0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
@@ -18046,13 +17953,6 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
-requizzle@^0.2.3:
- version "0.2.4"
- resolved "https://registry.yarnpkg.com/requizzle/-/requizzle-0.2.4.tgz#319eb658b28c370f0c20f968fa8ceab98c13d27c"
- integrity sha512-JRrFk1D4OQ4SqovXOgdav+K8EAhSB/LJZqCz8tbX0KObcdeM15Ss59ozWMBWmmINMagCwmqn4ZNryUGpBsl6Jw==
- dependencies:
- lodash "^4.17.21"
-
resolve-alpn@^1.0.0, resolve-alpn@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/resolve-alpn/-/resolve-alpn-1.2.1.tgz#b7adbdac3546aaaec20b45e7d8265927072726f9"
@@ -19223,11 +19123,6 @@ table@^6.0.9:
string-width "^4.2.3"
strip-ansi "^6.0.1"
-taffydb@2.6.2:
- version "2.6.2"
- resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.6.2.tgz#7cbcb64b5a141b6a2efc2c5d2c67b4e150b2a268"
- integrity sha512-y3JaeRSplks6NYQuCOj3ZFMO3j60rTwbuKCvZxsAraGYH2epusatvZ0baZYA01WsGqJBq/Dl6vOrMUJqyMj8kA==
-
tapable@^1.0.0:
version "1.1.3"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -19811,11 +19706,6 @@ ua-parser-js@^1.0.1:
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.35.tgz#c4ef44343bc3db0a3cbefdf21822f1b1fc1ab011"
integrity sha512-fKnGuqmTBnIE+/KXSzCn4db8RTigUzw1AN0DmdU6hJovUTbYJKyqj+8Mt1c4VfRDnOVJnENmfYkIPZ946UrSAA==
-uc.micro@^1.0.1, uc.micro@^1.0.5:
- version "1.0.6"
- resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
- integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
-
ufo@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.1.2.tgz#d0d9e0fa09dece0c31ffd57bd363f030a35cfe76"
@@ -19844,11 +19734,6 @@ unbzip2-stream@1.4.3:
buffer "^5.2.1"
through "^2.3.8"
-underscore@~1.13.2:
- version "1.13.6"
- resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.13.6.tgz#04786a1f589dc6c09f761fc5f45b89e935136441"
- integrity sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==
-
unicode-canonical-property-names-ecmascript@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz#301acdc525631670d39f6146e0e77ff6bbdebddc"
@@ -21004,11 +20889,6 @@ xmlbuilder@^15.1.1:
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-15.1.1.tgz#9dcdce49eea66d8d10b42cae94a79c3c8d0c2ec5"
integrity sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==
-xmlcreate@^2.0.4:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/xmlcreate/-/xmlcreate-2.0.4.tgz#0c5ab0f99cdd02a81065fa9cd8f8ae87624889be"
- integrity sha512-nquOebG4sngPmGPICTS5EnxqhKbCmz5Ox5hsszI2T6U5qdrJizBc+0ilYSEjTSzU0yZcmvppztXe/5Al5fUwdg==
-
xtend@^4.0.0, xtend@~4.0.1:
version "4.0.2"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
From 071de87a095a41b23cc5f65f003b2b1bc5a75299 Mon Sep 17 00:00:00 2001
From: Vladislav Tasev <vladitasev@users.noreply.github.com>
Date: Tue, 2 Apr 2024 18:13:51 +0300
Subject: [PATCH 40/60] chore: integrate the popover API with OpenUI5 (#8606)
---
packages/main/test/pages/OpenUI5.html | 34 ++++++++++++++++++++++++++-
1 file changed, 33 insertions(+), 1 deletion(-)
diff --git a/packages/main/test/pages/OpenUI5.html b/packages/main/test/pages/OpenUI5.html
index 6e8be5bf193e..982133becaae 100644
--- a/packages/main/test/pages/OpenUI5.html
+++ b/packages/main/test/pages/OpenUI5.html
@@ -6,6 +6,12 @@
<title>OpenUI5 Latest Stable + UI5 Web Components</title>
+ <style>
+ :popover-open {
+ inset: unset;
+ }
+ </style>
+
<script id='sap-ui-bootstrap'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_belize_hcb'
@@ -81,10 +87,13 @@
<ui5-button id="btn2">Open Second Dialog web component</ui5-button>
</ui5-dialog>
<ui5-dialog id="dg2" header-text="Dialog 2"></ui5-dialog>
-
+
<ui5-button id="btnPopup">Open Popover webc</ui5-button>
<ui5-popover id="popup" header-text="Popover"></ui5-popover>
+ <ui5-button id="componentPopoverOpener">Open a WC Popover that in turn opens an OpenUI5 popover</ui5-button>
+ <ui5-popover id="componentPopover" opener="componentPopoverOpener" header-text="This is a ui5-popover"></ui5-popover>
+
<div id='content'></div>
</body>
@@ -98,5 +107,28 @@
btn2.addEventListener("click", () => {
dg2.show();
})
+
+ componentPopover.addEventListener("after-open", () => {
+ const openButton = new sap.m.Button({text: "Open an OpenUI5 Popover"});
+ openButton.placeAt("componentPopover");
+
+ const sapMPopover = new sap.m.Popover({
+ title: "This is a sap.m.Popover",
+ content: [
+ new sap.m.Label({text: "Some popover content"})
+ ],
+ });
+
+ openButton.attachPress(() => {
+ sapMPopover.openBy(openButton);
+ const domRef = sapMPopover.getDomRef();
+ domRef.popover = "manual";
+ domRef.showPopover();
+ })
+ });
+
+ componentPopoverOpener.addEventListener("click", () => {
+ componentPopover.open = true;
+ })
</script>
</html>
From 08f7a54fe2120a03e31f91f6370ea39cc336af1e Mon Sep 17 00:00:00 2001
From: yanaminkova <32466553+yanaminkova@users.noreply.github.com>
Date: Wed, 3 Apr 2024 08:49:47 +0300
Subject: [PATCH 41/60] refactor(ui5-illustrated-message): rename `size`
property to `design` (#8605)
Renames the `size` property of the `ui5-illustrated-message` to `design`.
The semantic values `Auto`, `Base`, `Spot`, `Dialog`, `Scene` and size aspect of this property is not directly clear.
BREAKING CHANGE: The `size` property of the `ui5--illustrated-message` is renamed to `design`.
If you have previously used the `size` property:
```html
<ui5-illustrated-message size="Dialog">
```
Now use `design` instead:
```html
<ui5-illustrated-message design="Dialog">
```
Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
---
packages/fiori/src/IllustratedMessage.ts | 28 ++++++------
.../fiori/test/pages/IllustratedMessage.html | 8 ++--
.../test/specs/IllustratedMessage.spec.js | 44 +++++++++----------
.../IllustratedMessage.stories.ts | 2 +-
4 files changed, 41 insertions(+), 41 deletions(-)
diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts
index f1ffeef8d04f..97ffa65dea41 100644
--- a/packages/fiori/src/IllustratedMessage.ts
+++ b/packages/fiori/src/IllustratedMessage.ts
@@ -119,13 +119,13 @@ class IllustratedMessage extends UI5Element {
* Determines which illustration breakpoint variant is used.
*
* As `IllustratedMessage` adapts itself around the `Illustration`, the other
- * elements of the component are displayed differently on the different breakpoints/illustration sizes.
+ * elements of the component are displayed differently on the different breakpoints/illustration designs.
* @default "Auto"
* @public
* @since 1.5.0
*/
@property({ type: IllustrationMessageSize, defaultValue: IllustrationMessageSize.Auto })
- size!: `${IllustrationMessageSize}`;
+ design!: `${IllustrationMessageSize}`;
/**
* Defines the subtitle of the component.
@@ -172,7 +172,7 @@ class IllustratedMessage extends UI5Element {
titleLevel!: `${TitleLevel}`;
/**
- * Illustration breakpoint variant for the <code>Dot</code> size.
+ * Illustration breakpoint variant for the <code>Dot</code> design.
*
* @private
* @since 1.24.0
@@ -181,7 +181,7 @@ class IllustratedMessage extends UI5Element {
dotSvg!: string;
/**
- * Illustration breakpoint variant for the <code>Spot</code> size.
+ * Illustration breakpoint variant for the <code>Spot</code> design.
*
* @private
* @since 1.9.0
@@ -190,7 +190,7 @@ class IllustratedMessage extends UI5Element {
spotSvg!: string;
/**
- * Illustration breakpoint variant for the `Scene` size.
+ * Illustration breakpoint variant for the `Scene` design.
* @private
* @since 1.9.0
*/
@@ -198,7 +198,7 @@ class IllustratedMessage extends UI5Element {
sceneSvg!: string;
/**
- * Illustration breakpoint variant for the `Dialog` size.
+ * Illustration breakpoint variant for the `Dialog` design.
* @private
* @since 1.9.0
*/
@@ -314,7 +314,7 @@ class IllustratedMessage extends UI5Element {
this.illustrationTitle = IllustratedMessage.i18nBundle.getText(illustrationData!.title);
this.illustrationSubtitle = IllustratedMessage.i18nBundle.getText(illustrationData!.subtitle);
- if (this.size !== IllustrationMessageSize.Auto) {
+ if (this.design !== IllustrationMessageSize.Auto) {
this._handleCustomSize();
}
}
@@ -328,7 +328,7 @@ class IllustratedMessage extends UI5Element {
}
handleResize() {
- if (this.size !== IllustrationMessageSize.Auto) {
+ if (this.design !== IllustrationMessageSize.Auto) {
this._adjustHeightToFitContainer();
return;
}
@@ -341,17 +341,17 @@ class IllustratedMessage extends UI5Element {
const currOffsetWidth = this.offsetWidth,
currOffsetHeight = this.offsetHeight;
- const size = heightChange ? currOffsetHeight : currOffsetWidth,
+ const design = heightChange ? currOffsetHeight : currOffsetWidth,
oBreakpounts = heightChange ? IllustratedMessage.BREAKPOINTS_HEIGHT : IllustratedMessage.BREAKPOINTS;
let newMedia = "";
- if (size <= oBreakpounts.BASE) {
+ if (design <= oBreakpounts.BASE) {
newMedia = IllustratedMessage.MEDIA.BASE;
- } else if (size <= oBreakpounts.DOT) {
+ } else if (design <= oBreakpounts.DOT) {
newMedia = IllustratedMessage.MEDIA.DOT;
- } else if (size <= oBreakpounts.SPOT) {
+ } else if (design <= oBreakpounts.SPOT) {
newMedia = IllustratedMessage.MEDIA.SPOT;
- } else if (size <= oBreakpounts.DIALOG) {
+ } else if (design <= oBreakpounts.DIALOG) {
newMedia = IllustratedMessage.MEDIA.DIALOG;
} else {
newMedia = IllustratedMessage.MEDIA.SCENE;
@@ -406,7 +406,7 @@ class IllustratedMessage extends UI5Element {
* @since 1.5.0
*/
_handleCustomSize() {
- switch (this.size) {
+ switch (this.design) {
case IllustrationMessageSize.Base:
this.media = IllustratedMessage.MEDIA.BASE;
return;
diff --git a/packages/fiori/test/pages/IllustratedMessage.html b/packages/fiori/test/pages/IllustratedMessage.html
index 6f0a722d56ec..b7c82a778fe5 100644
--- a/packages/fiori/test/pages/IllustratedMessage.html
+++ b/packages/fiori/test/pages/IllustratedMessage.html
@@ -123,7 +123,7 @@
<ui5-option>TntUnsuccessfulAuth</ui5-option>
<ui5-option>TntUser2</ui5-option>
</ui5-select>
- Size:
+ Designs:
<ui5-select id="sizeSelect">
<ui5-option>base</ui5-option>
<ui5-option>dot</ui5-option>
@@ -201,7 +201,7 @@ <h2>Vertical responsiveness</h2>
const containerHeightSelect = document.getElementById("containerHeightSelect");
const containerWidthSelect = document.getElementById("containerWidthSelect");
const illustratedMessageContainer = document.getElementById("container");
- const sizes = {
+ const designs = {
base: 159,
dot: 259,
spot: 319,
@@ -209,14 +209,14 @@ <h2>Vertical responsiveness</h2>
scene: 1100,
}
- illustratedMessage.style.width = `${sizes.scene}px`;
+ illustratedMessage.style.width = `${designs.scene}px`;
illustrationSelect.addEventListener("ui5-change", (event) => {
illustratedMessage.setAttribute("name", event.detail.selectedOption.textContent);
});
sizeSelect.addEventListener("ui5-change", (event) => {
- illustratedMessage.style.width = `${sizes[event.detail.selectedOption.textContent]}px`;
+ illustratedMessage.style.width = `${designs[event.detail.selectedOption.textContent]}px`;
});
dialogOpener.addEventListener("click", () => {
diff --git a/packages/fiori/test/specs/IllustratedMessage.spec.js b/packages/fiori/test/specs/IllustratedMessage.spec.js
index ac38aeab23dc..1d326fc9a365 100644
--- a/packages/fiori/test/specs/IllustratedMessage.spec.js
+++ b/packages/fiori/test/specs/IllustratedMessage.spec.js
@@ -1,31 +1,31 @@
import { assert } from "chai";
-describe("IllustratedMessage 'size' property", () => {
+describe("IllustratedMessage 'design' property", () => {
before(async () => {
await browser.url(`test/pages/IllustratedMessage.html`);
});
- it("should return correct size", async () => {
+ it("should return correct design", async () => {
// Arrange
const illustratedMsg = await browser.$("#illustratedMsg2");
- let illustratedMsgSize = await illustratedMsg.getProperty("size");
+ let illustratedMsgDesign = await illustratedMsg.getProperty("design");
// Assert
- assert.strictEqual(illustratedMsgSize, "Auto", "'size' should be equal to 'Auto' by default");
+ assert.strictEqual(illustratedMsgDesign, "Auto", "'design' should be equal to 'Auto' by default");
// Act
- await illustratedMsg.setProperty("size", "Base");
- illustratedMsgSize = await illustratedMsg.getProperty("size");
+ await illustratedMsg.setProperty("design", "Base");
+ illustratedMsgDesign = await illustratedMsg.getProperty("design");
// Assert
- assert.strictEqual(illustratedMsgSize, "Base", "'size' should be equal to 'Base'");
+ assert.strictEqual(illustratedMsgDesign, "Base", "'design' should be equal to 'Base'");
// Act
- await illustratedMsg.setProperty("size", "Invalid");
- illustratedMsgSize = await illustratedMsg.getProperty("size");
+ await illustratedMsg.setProperty("design", "Invalid");
+ illustratedMsgDesign = await illustratedMsg.getProperty("design");
// Assert
- assert.strictEqual(illustratedMsgSize, "Auto", "'size' should be equal to 'Auto' when invalid value is passed");
+ assert.strictEqual(illustratedMsgDesign, "Auto", "'design' should be equal to 'Auto' when invalid value is passed");
});
it("should show up properly, when in panel and it expand/collapse", async () => {
@@ -112,7 +112,7 @@ describe("Vertical responsiveness", () => {
await browser.url(`test/pages/IllustratedMessage.html`);
});
- it("content with auto size shrinks to fit the parent container", async () => {
+ it("content with auto design shrinks to fit the parent container", async () => {
const newContainerHeight = 300,
expectedMedia = "dialog",
@@ -134,7 +134,7 @@ describe("Vertical responsiveness", () => {
assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media");
});
- it("content with auto size expands to fit the parent container", async () => {
+ it("content with auto design expands to fit the parent container", async () => {
const newContainerHeight = 500,
expectedMedia = "scene",
@@ -156,14 +156,14 @@ describe("Vertical responsiveness", () => {
assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media");
});
- it("content with fixed size fits the parent container", async () => {
+ it("content with fixed design fits the parent container", async () => {
const newContainerHeight = 200,
expectedMedia = "dialog",
illustratedMsg = await browser.$("#illustratedMsg5");
- // set fixed size
- illustratedMsg.setProperty("size", "Dialog");
+ // set fixed design
+ illustratedMsg.setProperty("design", "Dialog");
// Act: apply new height
await browser.executeAsync(async (newContainerHeight, done) => {
@@ -200,7 +200,7 @@ describe("Vertical responsiveness", () => {
});
});
-describe("Dot size resource handling", () => {
+describe("Dot design resource handling", () => {
before(async () => {
await browser.url(`test/pages/IllustratedMessage.html`);
});
@@ -208,12 +208,12 @@ describe("Dot size resource handling", () => {
it("uses substitute Spot illustration", async () => {
const illustratedMsg = await browser.$("#illustratedMsg1");
-
+
// Act
await illustratedMsg.setProperty("name", "BeforeSearch"); // set an illustration which doesn't have original Dot SVG
- await illustratedMsg.setProperty("size", "Dot");
+ await illustratedMsg.setProperty("design", "Dot");
const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg");
-
+
// Check
assert.strictEqual(await illustration.getProperty("id"), "sapIllus-Spot-BeforeSearch", "Spot SVG is used when no Dot is present");
});
@@ -221,12 +221,12 @@ describe("Dot size resource handling", () => {
it("uses original Dot illustration", async () => {
const illustratedMsg = await browser.$("#illustratedMsg1");
-
+
// Act
await illustratedMsg.setProperty("name", "AddPeople"); // set an illustration which has original Dot SVG
- await illustratedMsg.setProperty("size", "Dot");
+ await illustratedMsg.setProperty("design", "Dot");
const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg");
-
+
// Check
assert.strictEqual(await illustration.getProperty("id"), "sapIllus-Dot-AddPeople", "Dot is present, therefore used");
});
diff --git a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts
index 3151d74d240f..cae8fd267b22 100644
--- a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts
+++ b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts
@@ -19,7 +19,7 @@ const Template: UI5StoryArgs<IllustratedMessage, StoryArgsSlots> = (
args
) => html` <ui5-illustrated-message
name="${ifDefined(args.name)}"
- size="${ifDefined(args.size)}"
+ design="${ifDefined(args.design)}"
subtitle-text="${ifDefined(args.subtitleText)}"
title-text="${ifDefined(args.titleText)}"
accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
From b7747fac5f2adc43687c9c7345ac70ce80cb295a Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Fri, 5 Apr 2024 17:20:42 +0300
Subject: [PATCH 42/60] refactor(ui5-segmented-button-item): separate from
button
---
packages/main/src/SegmentedButton.ts | 10 +-
packages/main/src/SegmentedButtonItem.hbs | 9 +-
packages/main/src/SegmentedButtonItem.ts | 189 +++++++++++++++---
packages/main/src/TimeSelectionClocks.hbs | 2 +-
packages/main/src/TimeSelectionClocks.ts | 4 +-
packages/main/src/TimeSelectionInputs.hbs | 2 +-
packages/main/src/themes/SegmentedButton.css | 4 +-
.../main/src/themes/SegmentedButtonItem.css | 155 ++++++++++++++
.../base/SegmentedButtonItem-parameters.css | 24 +++
.../SegmentedButtonItem-parameters.css | 6 +
.../themes/sap_belize/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 7 +
.../sap_belize_hcb/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 7 +
.../sap_belize_hcw/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 9 +
.../themes/sap_fiori_3/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 9 +
.../sap_fiori_3_dark/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 7 +
.../sap_fiori_3_hcb/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 7 +
.../sap_fiori_3_hcw/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 13 ++
.../themes/sap_horizon/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 13 ++
.../sap_horizon_dark/parameters-bundle.css | 3 +-
.../SegmentedButtonItem-parameters.css | 7 +
.../sap_horizon_hcb/parameters-bundle.css | 1 +
.../SegmentedButtonItem-parameters.css | 7 +
.../sap_horizon_hcw/parameters-bundle.css | 1 +
packages/main/test/pages/SegmentedButton.html | 36 ++--
32 files changed, 470 insertions(+), 70 deletions(-)
create mode 100644 packages/main/src/themes/SegmentedButtonItem.css
create mode 100644 packages/main/src/themes/base/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css
create mode 100644 packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css
diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts
index d7a071e9c93c..fcc256eb7482 100644
--- a/packages/main/src/SegmentedButton.ts
+++ b/packages/main/src/SegmentedButton.ts
@@ -28,7 +28,7 @@ import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
*/
interface ISegmentedButtonItem extends UI5Element, ITabbable {
disabled: boolean,
- pressed: boolean,
+ selected: boolean,
}
type SegmentedButtonSelectionChangeEventDetail = {
@@ -179,7 +179,7 @@ class SegmentedButton extends UI5Element {
switch (this.mode) {
case SegmentedButtonMode.MultiSelect:
if (e instanceof KeyboardEvent) {
- target.pressed = !target.pressed;
+ target.selected = !target.selected;
}
break;
default:
@@ -199,9 +199,9 @@ class SegmentedButton extends UI5Element {
_applySingleSelection(item: ISegmentedButtonItem) {
this.items.forEach(currentItem => {
- currentItem.pressed = false;
+ currentItem.selected = false;
});
- item.pressed = true;
+ item.selected = true;
this._selectedItem = item;
}
@@ -269,7 +269,7 @@ class SegmentedButton extends UI5Element {
* @default []
*/
get selectedItems(): Array<ISegmentedButtonItem> {
- return this.items.filter(item => item.pressed);
+ return this.items.filter(item => item.selected);
}
get ariaDescribedBy() {
diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
index 22206138cc49..048b5c8ac35f 100644
--- a/packages/main/src/SegmentedButtonItem.hbs
+++ b/packages/main/src/SegmentedButtonItem.hbs
@@ -3,17 +3,14 @@
aria-roledescription="{{ariaDescription}}"
aria-posinset="{{posInSet}}"
aria-setsize="{{sizeOfSet}}"
- aria-selected="{{pressed}}"
+ aria-selected="{{selected}}"
class="ui5-button-root"
aria-disabled="{{disabled}}"
data-sap-focus-ref
- {{> ariaPressed}}
@focusout={{_onfocusout}}
@focusin={{_onfocusin}}
@click={{_onclick}}
@mousedown={{_onmousedown}}
- @mouseup={{_onmouseup}}
- @keydown={{_onkeydown}}
@keyup={{_onkeyup}}
@touchstart="{{_ontouchstart}}"
@touchend="{{_ontouchend}}"
@@ -26,7 +23,7 @@
class="ui5-button-icon"
name="{{icon}}"
part="icon"
- ?show-tooltip={{showIconTooltip}}
+ ?show-tooltip={{isIconOnly}}
></ui5-icon>
{{/if}}
@@ -37,5 +34,3 @@
</span>
</li>
-
-{{#*inline "ariaPressed"}}{{/inline}}
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index 20592f43fd80..ea3c21442471 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -1,19 +1,24 @@
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
+import { PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
+import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
+import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
import type { ISegmentedButtonItem } from "./SegmentedButton.js";
import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
-import ToggleButton from "./ToggleButton.js";
-import ButtonDesign from "./types/ButtonDesign.js";
-import ButtonType from "./types/ButtonType.js";
-import ButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
-import { AccessibilityAttributes } from "./Button.js";
+import { IButton } from "./Button.js";
import Icon from "./Icon.js";
-import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
-
+import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js";
/**
* @class
*
@@ -30,63 +35,79 @@ import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defa
*
* `import "@ui5/webcomponents/dist/SegmentedButtonItem.js";`
* @constructor
- * @extends ToggleButton
+ * @extends UI5Element
* @implements { ISegmentedButtonItem }
* @public
*/
@customElement({
tag: "ui5-segmented-button-item",
+ renderer: litRender,
template: SegmentedButtonItemTemplate,
+ styles: segmentedButtonItemCss,
dependencies: [Icon],
})
-class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem {
+class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButtonItem {
/**
- * **Note:** The property is inherited and not supported. If set, it won't take any effect.
- * @default "Default"
+ * Defines whether the component is disabled.
+ * A disabled component can't be pressed or
+ * focused, and it is not in the tab chain.
+ * @default false
* @public
*/
- @property({ type: ButtonDesign, defaultValue: ButtonDesign.Default })
- declare design: `${ButtonDesign}`;
+ @property({ type: Boolean })
+ disabled!: boolean;
/**
- * **Note:** The property is inherited and not supported. If set, it won't take any effect.
+ * Determines whether the component is displayed as selected.
* @default false
* @public
*/
@property({ type: Boolean })
- declare iconEnd: boolean;
+ selected!: boolean;
/**
- * **Note:** The property is inherited and not supported. If set, it won't take any effect.
- * @default false
+ * Defines the tooltip of the component.
+ *
+ * **Note:** A tooltip attribute should be provided for icon-only buttons, in order to represent their exact meaning/function.
+ * @default ""
* @public
+ * @since 1.2.0
*/
- @property({ type: Boolean })
- declare submits: boolean;
+ @property()
+ tooltip!: string;
/**
- * **Note:** The property is inherited and not supported. If set, it won't take any effect.
- * @default {}
+ * Defines the icon, displayed as graphical element within the component.
+ * The SAP-icons font provides numerous options.
+ *
+ * Example:
+ * See all the available icons within the [Icon Explorer](https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html).
+ * @default ""
* @public
*/
- @property({ type: Object })
- declare accessibilityAttributes: AccessibilityAttributes;
+ @property()
+ icon!: string;
/**
- * **Note:** The property is inherited and not supported. If set, it won't take any effect.
- * @default "Button"
- * @public
+ * Indicates if the element if focusable
+ * @private
*/
- @property({ type: ButtonType, defaultValue: ButtonType.Button })
- declare type: `${ButtonType}`;
+ @property({ type: Boolean })
+ nonInteractive!: boolean;
/**
- * **Note:** The property is inherited and not supported. If set, it won't take any effect.
- * @default "Button"
- * @public
+ * Defines the tabIndex of the component.
+ * @private
+ */
+ @property({ defaultValue: "0", noAttribute: true })
+ forcedTabIndex!: string;
+
+ /**
+ * Indicates if the elements is on focus
+ * @private
*/
- @property({ type: ButtonAccessibleRole, defaultValue: ButtonAccessibleRole.Button })
- declare accessibleRole: `${ButtonAccessibleRole}`;
+ @property({ type: Boolean })
+ focused!: boolean;
/**
* Defines the index of the item inside of the SegmentedButton.
@@ -104,9 +125,111 @@ class SegmentedButtonItem extends ToggleButton implements ISegmentedButtonItem {
@property({ validator: Integer, defaultValue: 0 })
sizeOfSet!: number;
+ /**
+ * Defines the text of the component.
+ *
+ * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+ * @public
+ */
+ @slot({ type: Node, "default": true })
+ text!: Array<Node>;
+
+ static i18nBundle: I18nBundle;
+
+ _ontouchstart: PassiveEventListenerObject;
+
get ariaDescription() {
return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
}
+
+ constructor() {
+ super();
+
+ const handleTouchStartEvent = () => {
+ if (this.nonInteractive) {
+ return;
+ }
+ };
+
+ this._ontouchstart = {
+ handleEvent: handleTouchStartEvent,
+ passive: true,
+ };
+ }
+
+ _onfocusout() {
+ if (this.nonInteractive) {
+ return;
+ }
+
+ if (isDesktop()) {
+ this.focused = false;
+ }
+ }
+
+ _onfocusin() {
+ if (this.nonInteractive) {
+ return;
+ }
+
+ if (isDesktop()) {
+ this.focused = true;
+ }
+ }
+
+ _onclick() {
+ this.selected = !this.selected;
+
+ if (isSafari()) {
+ this.getDomRef()!.focus();
+ }
+ }
+
+ _onkeyup(e: KeyboardEvent) {
+ if (isSpaceShift(e)) {
+ e.preventDefault();
+ return;
+ }
+ }
+
+ _onmousedown(e: MouseEvent) {
+ if (this.nonInteractive) {
+ return;
+ }
+ }
+
+ _ontouchend(e: TouchEvent) {
+ if (this.disabled) {
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }
+
+ get isIconOnly() {
+ return !willShowContent(this.text);
+ }
+
+ get tabIndexValue() {
+ const tabindex = this.getAttribute("tabindex");
+
+ if (tabindex) {
+ return tabindex;
+ }
+
+ return this.nonInteractive ? "-1" : this.forcedTabIndex;
+ }
+
+ get ariaLabelText() {
+ return getEffectiveAriaLabelText(this);
+ }
+
+ get showIconTooltip() {
+ return this.isIconOnly && !this.tooltip;
+ }
+
+ static async onDefine() {
+ SegmentedButtonItem.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+ }
}
SegmentedButtonItem.define();
diff --git a/packages/main/src/TimeSelectionClocks.hbs b/packages/main/src/TimeSelectionClocks.hbs
index 85e598f85737..561e87f87d7f 100644
--- a/packages/main/src/TimeSelectionClocks.hbs
+++ b/packages/main/src/TimeSelectionClocks.hbs
@@ -38,7 +38,7 @@
>
{{#each _periods}}
<ui5-segmented-button-item
- ?pressed={{this.pressed}}
+ ?selected={{this.selected}}
>
{{this.label}}
</ui5-segmented-button-item>
diff --git a/packages/main/src/TimeSelectionClocks.ts b/packages/main/src/TimeSelectionClocks.ts
index 0823c198a527..e95b72ebe0ff 100644
--- a/packages/main/src/TimeSelectionClocks.ts
+++ b/packages/main/src/TimeSelectionClocks.ts
@@ -214,8 +214,8 @@ class TimeSelectionClocks extends TimePickerInternals {
// A/P selects AM/PM segmented button item
const buttonAmPm = this._buttonAmPm();
if (buttonAmPm) {
- buttonAmPm.items[0].pressed = isKeyA(evt);
- buttonAmPm.items[1].pressed = isKeyP(evt);
+ buttonAmPm.items[0].selected = isKeyA(evt);
+ buttonAmPm.items[1].selected = isKeyP(evt);
const period = isKeyA(evt) ? buttonAmPm.items[0].textContent : buttonAmPm.items[1].textContent;
period && this._calculatePeriodChange(period);
}
diff --git a/packages/main/src/TimeSelectionInputs.hbs b/packages/main/src/TimeSelectionInputs.hbs
index 52693d720604..ca214ab16890 100644
--- a/packages/main/src/TimeSelectionInputs.hbs
+++ b/packages/main/src/TimeSelectionInputs.hbs
@@ -31,7 +31,7 @@
>
{{#each _periods}}
<ui5-segmented-button-item
- ?pressed={{this.pressed}}
+ ?selected={{this.selected}}
>
{{this.label}}
</ui5-segmented-button-item>
diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
index d640c6427e01..dfc585393a8c 100644
--- a/packages/main/src/themes/SegmentedButton.css
+++ b/packages/main/src/themes/SegmentedButton.css
@@ -36,14 +36,14 @@
background-color: var(--sapButton_Hover_Background);
}
-::slotted([ui5-segmented-button-item][pressed]),
+::slotted([ui5-segmented-button-item][selected]),
::slotted([ui5-segmented-button-item][active]) {
border-color: var(--sapButton_Selected_BorderColor);
background-color: var(--sapButton_Selected_Background);
color: var(--sapButton_Selected_TextColor);
}
-::slotted([ui5-segmented-button-item][pressed]:hover) {
+::slotted([ui5-segmented-button-item][selected]:hover) {
border-color: var(--sapButton_Selected_Hover_BorderColor);
background-color: var(--sapButton_Selected_Hover_Background);
color: var(--sapButton_Selected_TextColor);
diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css
new file mode 100644
index 000000000000..4b567c18431a
--- /dev/null
+++ b/packages/main/src/themes/SegmentedButtonItem.css
@@ -0,0 +1,155 @@
+@import "./FormComponents.css";
+
+:host(:not([hidden])) {
+ display: inline-block;
+}
+
+:host {
+ min-width: var(--_ui5_button_base_min_width);
+ height: var(--_ui5_button_base_height);
+ line-height: normal;
+ font-family: var(--_ui5_button_fontFamily);
+ font-size: var(--sapFontSize);
+ text-shadow: var(--_ui5_button_text_shadow);
+ border-radius: var(--_ui5_button_border_radius);
+ cursor: pointer;
+ background-color: var(--sapButton_Background);
+ border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
+ color: var(--sapButton_TextColor);
+ box-sizing: border-box;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.ui5-button-root {
+ min-width: inherit;
+ cursor: inherit;
+ height: 100%;
+ width: 100%;
+ box-sizing: border-box;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ outline: none;
+ padding: 0 var(--_ui5_button_base_padding);
+ position: relative;
+ background: transparent;
+ border: none;
+ color: inherit;
+ text-shadow: inherit;
+ font: inherit;
+ white-space: inherit;
+ overflow: inherit;
+ text-overflow: inherit;
+ letter-spacing: inherit;
+ word-spacing: inherit;
+ line-height: inherit;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+}
+
+:host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host(:not([hidden]):not([disabled]).ui5_hovered) {
+ background: var(--sapButton_Hover_Background);
+ border: 1px solid var(--sapButton_Hover_BorderColor);
+ color: var(--sapButton_Hover_TextColor);
+}
+
+.ui5-button-icon {
+ color: inherit;
+ flex-shrink: 0;
+}
+
+:host([icon-end]) .ui5-button-root {
+ flex-direction: row-reverse;
+}
+
+:host([icon-end]) .ui5-button-icon {
+ margin-inline-start: var(--_ui5_button_base_icon_margin);
+}
+
+:host([icon-only]) .ui5-button-root {
+ min-width: auto;
+ padding: 0;
+}
+
+:host([icon-only]) .ui5-button-text {
+ display: none;
+}
+
+.ui5-button-text {
+ outline: none;
+ position: relative;
+ white-space: inherit;
+ overflow: inherit;
+ text-overflow: inherit;
+}
+
+:host([has-icon]:not([icon-end])) .ui5-button-text {
+ margin-inline-start: var(--_ui5_button_base_icon_margin);
+}
+
+:host([has-icon][icon-end]) .ui5-button-text {
+ margin-inline-start: 0;
+}
+
+:host([disabled]) {
+ opacity: var(--sapContent_DisabledOpacity);
+ pointer-events: unset;
+ cursor: default;
+}
+
+:host([has-icon]:not([icon-only])) .ui5-button-text{
+ /* calculating the minimum width by removing the icon size */
+ min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
+}
+:host([disabled]:active) {
+ pointer-events: none;
+}
+
+:host([focused]:not([active])) .ui5-button-root:after,
+:host([focused][active]) .ui5-button-root:before {
+ content: "";
+ position: absolute;
+ box-sizing: border-box;
+ left: 0.0625rem;
+ top: 0.0625rem;
+ right: 0.0625rem;
+ bottom: 0.0625rem;
+ border: var(--_ui5_button_focused_border);
+ border-radius: var(--_ui5_button_focused_border_radius);
+}
+
+:host([focused][active]) .ui5-button-root:before {
+ border-color: var(--_ui5_button_pressed_focused_border_color);
+}
+
+.ui5-button-root::-moz-focus-inner {
+ border: 0;
+}
+
+bdi {
+ display: block;
+ white-space: inherit;
+ overflow: inherit;
+ text-overflow: inherit;
+}
+
+/* SegmentedButton and ToggleButton */
+:host([ui5-segmented-button-item][active][focused]) .ui5-button-root:after,
+:host([selected][focused]) .ui5-button-root:after {
+ border-color: var(--_ui5_button_pressed_focused_border_color);
+ outline: none;
+}
+
+:host([ui5-segmented-button-item][focused]:not(:last-child)) .ui5-button-root:after {
+ border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
+ border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
+}
+
+:host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
+ border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
+ border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/base/SegmentedButtonItem-parameters.css b/packages/main/src/themes/base/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..a2337f4c2e8a
--- /dev/null
+++ b/packages/main/src/themes/base/SegmentedButtonItem-parameters.css
@@ -0,0 +1,24 @@
+:root {
+ --_ui5_button_focused_border: 0.0625rem dotted var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.25rem;
+ --_ui5_button_focused_inner_border_radius: 0;
+ --_ui5_button_base_min_width: 2.5rem;
+ --_ui5_button_base_min_compact_width: 2rem;
+ --_ui5_button_base_height: var(--sapElement_Height);
+ --_ui5_button_compact_height: 1.625rem;
+ --_ui5_button_border_radius: var(--sapButton_BorderCornerRadius);
+ --_ui5_button_base_padding: 0.6875rem;
+ --_ui5_button_compact_padding: 0.4375rem;
+ --_ui5_button_base_icon_only_padding: 0.5625rem;
+ --_ui5_button_base_icon_margin: 0.563rem;
+ --_ui5_button_icon_font_size: 1.375rem;
+ --_ui5_button_emphasized_outline: 1px dotted var(--sapContent_FocusColor);
+ --_ui5_button_text_shadow: var(--sapContent_TextShadow);
+ --_ui5_button_focus_offset: 1px;
+ --_ui5_button_focus_width: 1px;
+ --_ui5_button_pressed_focused_border_color: var(--sapContent_ContrastFocusColor);
+ --_ui5_button_fontFamily: var(--sapFontFamily);
+ --_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor);
+ --_ui5_button_emphasized_focused_border_before: 0.125rem solid var(--sapContent_FocusColor);
+ --_ui5_button_emphasized_focused_active_border_color: transparent;
+}
diff --git a/packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..1f70c9961ded
--- /dev/null
+++ b/packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css
@@ -0,0 +1,6 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border_radius: 0rem;
+ --_ui5_button_text_shadow: none;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
index b9ecc8dd4925..6b3602de8d41 100644
--- a/packages/main/src/themes/sap_belize/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -34,6 +34,7 @@
@import "../base/RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "../base/Select-parameters.css";
@import "./SplitButton-parameters.css";
@import "./ToggleButton-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..dc5562bee389
--- /dev/null
+++ b/packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css
@@ -0,0 +1,7 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.25rem;
+ --_ui5_button_text_shadow: none;
+}
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
index 1443a3552489..129fb7e512ca 100644
--- a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -34,6 +34,7 @@
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./Select-parameters.css";
@import "./SplitButton-parameters.css";
@import "./Switch-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..dc5562bee389
--- /dev/null
+++ b/packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css
@@ -0,0 +1,7 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.25rem;
+ --_ui5_button_text_shadow: none;
+}
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
index 08a90bcee04f..882077fdae7c 100644
--- a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -34,6 +34,7 @@
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./Select-parameters.css";
@import "./SplitButton-parameters.css";
@import "./Switch-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..eba246962ac1
--- /dev/null
+++ b/packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css
@@ -0,0 +1,9 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_base_min_width: 2.25rem;
+ --_ui5_button_base_padding: 0.5625rem;
+ --_ui5_button_base_icon_only_padding: 0.5625rem;
+ --_ui5_button_base_icon_margin: 0.375rem;
+ --_ui5_button_text_shadow: none;
+}
diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
index 7bd8301ba617..a73197ff5fac 100644
--- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css
@@ -33,6 +33,7 @@
@import "../base/RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "../base/Select-parameters.css";
@import "../base/SplitButton-parameters.css";
@import "../base/Switch-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..eba246962ac1
--- /dev/null
+++ b/packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css
@@ -0,0 +1,9 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_base_min_width: 2.25rem;
+ --_ui5_button_base_padding: 0.5625rem;
+ --_ui5_button_base_icon_only_padding: 0.5625rem;
+ --_ui5_button_base_icon_margin: 0.375rem;
+ --_ui5_button_text_shadow: none;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
index 1fe5318b5071..1f0bdcb7f41c 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css
@@ -33,6 +33,7 @@
@import "../base/RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "../base/Select-parameters.css";
@import "../base/SplitButton-parameters.css";
@import "../base/Switch-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..dc5562bee389
--- /dev/null
+++ b/packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css
@@ -0,0 +1,7 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.25rem;
+ --_ui5_button_text_shadow: none;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
index 6c79ac2b4335..ea4f0ec9971e 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css
@@ -35,6 +35,7 @@
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./Select-parameters.css";
@import "./SplitButton-parameters.css";
@import "./Switch-parameters.css";
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..dc5562bee389
--- /dev/null
+++ b/packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css
@@ -0,0 +1,7 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.25rem;
+ --_ui5_button_text_shadow: none;
+}
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
index a17cd289aa19..88124cb1d846 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css
@@ -34,6 +34,7 @@
@import "./RadioButton-parameters.css";
@import "../base/RatingIndicator-parameters.css";
@import "../base/SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./Select-parameters.css";
@import "./SplitButton-parameters.css";
@import "./Switch-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..b9d335ecfb78
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css
@@ -0,0 +1,13 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.375rem;
+ --_ui5_button_focused_inner_border_radius: 0.375rem;
+ --_ui5_button_base_min_width: 2.25rem;
+ --_ui5_button_base_padding: 0.5625rem;
+ --_ui5_button_base_icon_margin: 0.375rem;
+ --_ui5_button_text_shadow: none;
+ --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor);
+ --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily);
+}
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
index 3df7a9e4734f..16085f0e8978 100644
--- a/packages/main/src/themes/sap_horizon/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -37,6 +37,7 @@
@import "../base/RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
@import "./SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./RadioButton-parameters.css";
@import "./Switch-parameters.css";
@import "./Select-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..b9d335ecfb78
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css
@@ -0,0 +1,13 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.375rem;
+ --_ui5_button_focused_inner_border_radius: 0.375rem;
+ --_ui5_button_base_min_width: 2.25rem;
+ --_ui5_button_base_padding: 0.5625rem;
+ --_ui5_button_base_icon_margin: 0.375rem;
+ --_ui5_button_text_shadow: none;
+ --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor);
+ --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily);
+}
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
index 38a7d8293757..3dc82b13331a 100644
--- a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -36,8 +36,9 @@
@import "../sap_horizon/ProgressIndicator-parameters.css";
@import "../base/RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
-@import "./SegmentedButtton-parameters.css";
@import "./RadioButton-parameters.css";
+@import "./SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./Switch-parameters.css";
@import "./Select-parameters.css";
@import "./SelectPopover-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..523bdfb4f02a
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css
@@ -0,0 +1,7 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.375rem;
+ --_ui5_button_text_shadow: none;
+}
diff --git a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
index 7ac7ac464eda..b008d09e125b 100644
--- a/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcb/parameters-bundle.css
@@ -35,6 +35,7 @@
@import "./RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
@import "./SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./Select-parameters.css";
@import "./SplitButton-parameters.css";
@import "./Switch-parameters.css";
diff --git a/packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css
new file mode 100644
index 000000000000..ac477a3dc8b8
--- /dev/null
+++ b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css
@@ -0,0 +1,7 @@
+@import "../base/SegmentedButtonItem-parameters.css";
+
+:root {
+ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
+ --_ui5_button_focused_border_radius: 0.375rem;
+ --_ui5_button_text_shadow: none;
+}
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
index da3700f15033..5b380750c7bc 100644
--- a/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
+++ b/packages/main/src/themes/sap_horizon_hcw/parameters-bundle.css
@@ -35,6 +35,7 @@
@import "./RadioButton-parameters.css";
@import "./RatingIndicator-parameters.css";
@import "./SegmentedButtton-parameters.css";
+@import "./SegmentedButtonItem-parameters.css";
@import "./Select-parameters.css";
@import "./SplitButton-parameters.css";
@import "./Switch-parameters.css";
diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
index 5f435c2769ff..5d55f198f844 100644
--- a/packages/main/test/pages/SegmentedButton.html
+++ b/packages/main/test/pages/SegmentedButton.html
@@ -88,7 +88,7 @@ <h2>Segmentedbutton example</h2>
<section>
<ui5-segmented-button id="segButton1">
- <ui5-segmented-button-item tooltip="Employee" icon="employee" pressed></ui5-segmented-button-item>
+ <ui5-segmented-button-item tooltip="Employee" icon="employee" selected></ui5-segmented-button-item>
<ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
</ui5-segmented-button>
@@ -101,7 +101,7 @@ <h1>Example with 4 items</h1>
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Item</ui5-segmented-button-item>
<ui5-segmented-button-item>Click</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>selected SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>
</section>
@@ -109,11 +109,11 @@ <h1>Example with 4 items</h1>
<h1>Example with 5 items</h1>
<ui5-segmented-button id="segButton2">
- <ui5-segmented-button-item pressed>Word</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>Item</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>A</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>Word</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>selected SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>Item</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>selected SegmentedButtonItem</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>A</ui5-segmented-button-item>
</ui5-segmented-button>
</section>
@@ -122,7 +122,7 @@ <h1>Example with Icons and custom width</h1>
<ui5-segmented-button class="segmentedbutton1auto">
<ui5-segmented-button-item icon="employee"></ui5-segmented-button-item>
- <ui5-segmented-button-item icon="menu" pressed></ui5-segmented-button-item>
+ <ui5-segmented-button-item icon="menu" selected></ui5-segmented-button-item>
<ui5-segmented-button-item icon="factory"></ui5-segmented-button-item>
</ui5-segmented-button>
</section>
@@ -131,7 +131,7 @@ <h1>Example with Icons and custom width</h1>
<h1>SegmentedButton with 100% width</h1>
<ui5-segmented-button class="segmentedbutton2auto">
- <ui5-segmented-button-item pressed>Pressed SegmentedButtonItem</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>selected SegmentedButtonItem</ui5-segmented-button-item>
<ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
<ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item>
</ui5-segmented-button>
@@ -141,7 +141,7 @@ <h1>SegmentedButton with 100% width</h1>
<h1>SegmentedButton wrapped in a container with set width</h1>
<div class="segmentedbutton1auto">
<ui5-segmented-button class="segmentedbutton2auto">
- <ui5-segmented-button-item icon="employee" pressed></ui5-segmented-button-item>
+ <ui5-segmented-button-item icon="employee" selected></ui5-segmented-button-item>
<ui5-segmented-button-item icon="menu"></ui5-segmented-button-item>
<ui5-segmented-button-item icon="accept"></ui5-segmented-button-item>
</ui5-segmented-button>
@@ -163,7 +163,7 @@ <h3>Initial focus test</h3>
<ui5-button id="button2">Press</ui5-button>
<ui5-segmented-button id="testSB2">
<ui5-segmented-button-item icon="employee"></ui5-segmented-button-item>
- <ui5-segmented-button-item id="testSB2ToggleBtn" icon="menu" pressed></ui5-segmented-button-item>
+ <ui5-segmented-button-item id="testSB2ToggleBtn" icon="menu" selected></ui5-segmented-button-item>
<ui5-segmented-button-item icon="accept"></ui5-segmented-button-item>
</ui5-segmented-button>
</section>
@@ -171,33 +171,33 @@ <h3>Initial focus test</h3>
<section>
<h3>Programatical change test</h3>
<ui5-segmented-button id="segButtonProg">
- <ui5-segmented-button-item id="sbpItem1" pressed>First</ui5-segmented-button-item>
+ <ui5-segmented-button-item id="sbpItem1" selected>First</ui5-segmented-button-item>
<ui5-segmented-button-item id="sbpItem2">Second</ui5-segmented-button-item>
<ui5-segmented-button-item id="sbpItem3">Third</ui5-segmented-button-item>
</ui5-segmented-button>
<ui5-button id="progSetButton1">Press second item</ui5-button>
<ui5-button id="progSetButton2">Press multiple items</ui5-button>
- <ui5-button id="progSetButton3">Press pressed item</ui5-button>
+ <ui5-button id="progSetButton3">Press selected item</ui5-button>
<ui5-button id="progSetButton4">Press first item</ui5-button>
</section>
<script>
progSetButton1.addEventListener("click", function() {
- segButtonProg.items[1].pressed = true;
+ segButtonProg.items[1].selected = true;
});
progSetButton2.addEventListener("click", function() {
- segButtonProg.items[0].pressed = true;
- segButtonProg.items[2].pressed = true;
+ segButtonProg.items[0].selected = true;
+ segButtonProg.items[2].selected = true;
});
progSetButton3.addEventListener("click", function() {
- segButtonProg.selectedItem.pressed = true;
+ segButtonProg.selectedItem.selected = true;
});
progSetButton4.addEventListener("click", function() {
- segButtonProg.items[0].pressed = true;
+ segButtonProg.items[0].selected = true;
});
</script>
From 50244c3a706ebff684e9e88d746cda1dc995869d Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Fri, 5 Apr 2024 17:36:35 +0300
Subject: [PATCH 43/60] refactor(ui5-segmented-button-item): separate from
button
---
packages/main/src/SegmentedButtonItem.hbs | 2 --
packages/main/src/SegmentedButtonItem.ts | 27 +++--------------------
2 files changed, 3 insertions(+), 26 deletions(-)
diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
index 048b5c8ac35f..7958900e5886 100644
--- a/packages/main/src/SegmentedButtonItem.hbs
+++ b/packages/main/src/SegmentedButtonItem.hbs
@@ -10,9 +10,7 @@
@focusout={{_onfocusout}}
@focusin={{_onfocusin}}
@click={{_onclick}}
- @mousedown={{_onmousedown}}
@keyup={{_onkeyup}}
- @touchstart="{{_ontouchstart}}"
@touchend="{{_ontouchend}}"
tabindex={{tabIndexValue}}
aria-label="{{ariaLabelText}}"
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index ea3c21442471..af3be30fd9b8 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -1,17 +1,16 @@
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
-import { PassiveEventListenerObject } from "@ui5/webcomponents-base/dist/types.js";
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-
import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+
+import { SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
import type { ISegmentedButtonItem } from "./SegmentedButton.js";
import SegmentedButtonItemTemplate from "./generated/templates/SegmentedButtonItemTemplate.lit.js";
@@ -136,25 +135,12 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
static i18nBundle: I18nBundle;
- _ontouchstart: PassiveEventListenerObject;
-
get ariaDescription() {
return SegmentedButtonItem.i18nBundle.getText(SEGMENTEDBUTTONITEM_ARIA_DESCRIPTION);
}
constructor() {
super();
-
- const handleTouchStartEvent = () => {
- if (this.nonInteractive) {
- return;
- }
- };
-
- this._ontouchstart = {
- handleEvent: handleTouchStartEvent,
- passive: true,
- };
}
_onfocusout() {
@@ -184,17 +170,10 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
this.getDomRef()!.focus();
}
}
-
+
_onkeyup(e: KeyboardEvent) {
if (isSpaceShift(e)) {
e.preventDefault();
- return;
- }
- }
-
- _onmousedown(e: MouseEvent) {
- if (this.nonInteractive) {
- return;
}
}
From 62e98155e3bd72aeb00d77dad24df1fa1dc127f9 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Fri, 5 Apr 2024 17:45:53 +0300
Subject: [PATCH 44/60] fix(ui5-segmented-button-item): merge main
---
packages/main/src/Tab.ts | 4 ----
packages/website/docusaurus.config.ts | 2 +-
2 files changed, 1 insertion(+), 5 deletions(-)
diff --git a/packages/main/src/Tab.ts b/packages/main/src/Tab.ts
index bd839a215008..24f80b3cc7cb 100644
--- a/packages/main/src/Tab.ts
+++ b/packages/main/src/Tab.ts
@@ -277,11 +277,7 @@ class Tab extends UI5Element implements ITabbable {
/**
* Returns the DOM reference of the tab that is placed in the header.
*
-<<<<<<< HEAD
- * **Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `null`.
-=======
* **Note:** Tabs, placed in the `items` slot of other tabs are not shown in the header. Calling this method on such tabs will return `undefined`.
->>>>>>> main
*
* **Note:** If you need a DOM ref to the tab content please use the `getDomRef` method.
* @public
diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
index aa9ae783139c..998912429cf3 100644
--- a/packages/website/docusaurus.config.ts
+++ b/packages/website/docusaurus.config.ts
@@ -7,7 +7,7 @@ import packageJson from "./package.json";
console.log(process.env.DEPLOYMENT_TYPE); // eslint-disable-line
const LATEST_URL_PARTH = "/ui5-webcomponents/";
-const NIGHTLY_URL_PARTH = "/ui5-webcomponents/v2/";
+const NIGHTLY_URL_PARTH = "/ui5-webcomponents/nightly/";
const LATEST_DEPLOYMENT = process.env.DEPLOYMENT_TYPE === "latest";
const DEVELOPMENT_ENVIRONMENT = process.env.NODE_ENV === "development";
From 1acc1f2b7b5d19dfe28190b6cb98f866c7adaddc Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 8 Apr 2024 13:59:47 +0300
Subject: [PATCH 45/60] fix(ui5-segmented-button-item): fix test
---
.../main/test/specs/SegmentedButton.spec.js | 76 +++++++++----------
1 file changed, 38 insertions(+), 38 deletions(-)
diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js
index ab749d279174..b8f6cb676d3a 100644
--- a/packages/main/test/specs/SegmentedButton.spec.js
+++ b/packages/main/test/specs/SegmentedButton.spec.js
@@ -5,17 +5,17 @@ describe("SegmentedButton general interaction", () => {
await browser.url(`test/pages/SegmentedButton.html`);
});
- it("tests if pressed and tooltip attributes are applied", async () => {
+ it("tests if selected and tooltip attributes are applied", async () => {
const segmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:first-child");
const segmentedButtonItemInner = await segmentedButtonItem.shadow$(".ui5-button-root");
- assert.ok(await segmentedButtonItem.getProperty("pressed"), "SegmentedButtonItem has property pressed");
+ assert.ok(await segmentedButtonItem.getProperty("selected"), "SegmentedButtonItem has property selected");
assert.strictEqual(await segmentedButtonItemInner.getProperty("title"), "Employee",
"SegmentedButtonItem root element has property title");
});
- it("tests if pressed attribute is switched to the newly pressed item when selected with enter key", async () => {
+ it("tests if selected attribute is switched to the newly selected item when selected with enter key", async () => {
const firstSegmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:first-child");
const secondSegmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)");
@@ -23,42 +23,42 @@ describe("SegmentedButton general interaction", () => {
await firstSegmentedButtonItem.keys("ArrowRight");
await browser.keys("Enter");
- assert.notOk(await firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should not be pressed anymore");
- assert.ok(await secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem has property pressed");
+ assert.notOk(await firstSegmentedButtonItem.getProperty("selected"), "First SegmentedButtonItem should not be selected anymore");
+ assert.ok(await secondSegmentedButtonItem.getProperty("selected"), "Second SegmentedButtonItem has property selected");
});
- it("tests if pressed attribute is switched to the newly pressed item when selected with space key", async () => {
+ it("tests if selected attribute is switched to the newly selected item when selected with space key", async () => {
const secondSegmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:nth-child(2)");
const lastSegmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:last-child");
await secondSegmentedButtonItem.keys("ArrowRight");
await browser.keys("Space");
- assert.notOk(await secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem should not be pressed anymore");
- assert.ok(await lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem has property pressed");
+ assert.notOk(await secondSegmentedButtonItem.getProperty("selected"), "Second SegmentedButtonItem should not be selected anymore");
+ assert.ok(await lastSegmentedButtonItem.getProperty("selected"), "Last SegmentedButtonItem has property selected");
});
- it("tests if pressed attribute is switched to the newly pressed item when selected with mouse", async () => {
+ it("tests if selected attribute is switched to the newly selected item when selected with mouse", async () => {
const firstSegmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:first-child");
const lastSegmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:last-child");
await firstSegmentedButtonItem.click();
- assert.ok(await firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem has property pressed");
- assert.notOk(await lastSegmentedButtonItem.getProperty("pressed"), "Last SegmentedButtonItem should not be pressed anymore");
+ assert.ok(await firstSegmentedButtonItem.getProperty("selected"), "First SegmentedButtonItem has property selected");
+ assert.notOk(await lastSegmentedButtonItem.getProperty("selected"), "Last SegmentedButtonItem should not be selected anymore");
});
- it("tests if pressed attribute is applied only to last child when all items are pressed", async () => {
+ it("tests if selected attribute is applied only to last child when all items are selected", async () => {
const segmentedButtonItem1 = await browser.$("#segButton2 > ui5-segmented-button-item:first-child");
const segmentedButtonItem2 = await browser.$("#segButton2 > ui5-segmented-button-item:nth-child(2)");
const segmentedButtonItem3 = await browser.$("#segButton2 > ui5-segmented-button-item:nth-child(3)");
const segmentedButtonItem4 = await browser.$("#segButton2 > ui5-segmented-button-item:last-child");
- // only last item should be pressed
- assert.notOk(await segmentedButtonItem1.getProperty("pressed"), "SegmentedButtonItem should not be pressed");
- assert.notOk(await segmentedButtonItem2.getProperty("pressed"), "SegmentedButtonItem should not be pressed");
- assert.notOk(await segmentedButtonItem3.getProperty("pressed"), "SegmentedButtonItem should not be pressed");
- assert.ok(await segmentedButtonItem4.getProperty("pressed"), "SegmentedButtonItem has property pressed");
+ // only last item should be selected
+ assert.notOk(await segmentedButtonItem1.getProperty("selected"), "SegmentedButtonItem should not be selected");
+ assert.notOk(await segmentedButtonItem2.getProperty("selected"), "SegmentedButtonItem should not be selected");
+ assert.notOk(await segmentedButtonItem3.getProperty("selected"), "SegmentedButtonItem should not be selected");
+ assert.ok(await segmentedButtonItem4.getProperty("selected"), "SegmentedButtonItem has property selected");
});
@@ -87,42 +87,42 @@ describe("SegmentedButton general interaction", () => {
const segmentedButtonItem3 = await browser.$("#sbpItem3");
await button1.click();
- assert.notOk(await segmentedButtonItem1.getProperty("pressed"), "[step 1] The first SegmentedButtonItem should not be pressed.");
- assert.ok(await segmentedButtonItem2.getProperty("pressed"), "[step 1] The first SegmentedButtonItem should be pressed.");
- assert.notOk(await segmentedButtonItem3.getProperty("pressed"), "[step 1] The first SegmentedButtonItem should not be pressed.");
+ assert.notOk(await segmentedButtonItem1.getProperty("selected"), "[step 1] The first SegmentedButtonItem should not be selected.");
+ assert.ok(await segmentedButtonItem2.getProperty("selected"), "[step 1] The first SegmentedButtonItem should be selected.");
+ assert.notOk(await segmentedButtonItem3.getProperty("selected"), "[step 1] The first SegmentedButtonItem should not be selected.");
await button2.click();
- assert.notOk(await segmentedButtonItem1.getProperty("pressed"), "[step 2] The first SegmentedButtonItem should not be pressed.");
- assert.notOk(await segmentedButtonItem2.getProperty("pressed"), "[step 2] The first SegmentedButtonItem should not be pressed.");
- assert.ok(await segmentedButtonItem3.getProperty("pressed"), "[step 2] The first SegmentedButtonItem should be pressed.");
+ assert.notOk(await segmentedButtonItem1.getProperty("selected"), "[step 2] The first SegmentedButtonItem should not be selected.");
+ assert.notOk(await segmentedButtonItem2.getProperty("selected"), "[step 2] The first SegmentedButtonItem should not be selected.");
+ assert.ok(await segmentedButtonItem3.getProperty("selected"), "[step 2] The first SegmentedButtonItem should be selected.");
await button4.click();
- assert.ok(await segmentedButtonItem1.getProperty("pressed"), "[step 3] The first SegmentedButtonItem should be pressed.");
- assert.notOk(await segmentedButtonItem2.getProperty("pressed"), "[step 3] The first SegmentedButtonItem should not be pressed.");
- assert.notOk(await segmentedButtonItem3.getProperty("pressed"), "[step 3] The first SegmentedButtonItem should not be pressed.");
+ assert.ok(await segmentedButtonItem1.getProperty("selected"), "[step 3] The first SegmentedButtonItem should be selected.");
+ assert.notOk(await segmentedButtonItem2.getProperty("selected"), "[step 3] The first SegmentedButtonItem should not be selected.");
+ assert.notOk(await segmentedButtonItem3.getProperty("selected"), "[step 3] The first SegmentedButtonItem should not be selected.");
await button1.click();
- assert.notOk(await segmentedButtonItem1.getProperty("pressed"), "[step 4] The first SegmentedButtonItem should not be pressed.");
- assert.ok(await segmentedButtonItem2.getProperty("pressed"), "[step 4] The first SegmentedButtonItem should be pressed.");
- assert.notOk(await segmentedButtonItem3.getProperty("pressed"), "[step 4] The first SegmentedButtonItem should not be pressed.");
+ assert.notOk(await segmentedButtonItem1.getProperty("selected"), "[step 4] The first SegmentedButtonItem should not be selected.");
+ assert.ok(await segmentedButtonItem2.getProperty("selected"), "[step 4] The first SegmentedButtonItem should be selected.");
+ assert.notOk(await segmentedButtonItem3.getProperty("selected"), "[step 4] The first SegmentedButtonItem should not be selected.");
await button3.click();
- assert.notOk(await segmentedButtonItem1.getProperty("pressed"), "[step 5] The first SegmentedButtonItem should not be pressed.");
- assert.ok(await segmentedButtonItem2.getProperty("pressed"), "[step 5] The first SegmentedButtonItem should not be pressed.");
- assert.notOk(await segmentedButtonItem3.getProperty("pressed"), "[step 5] The first SegmentedButtonItem should be pressed.");
+ assert.notOk(await segmentedButtonItem1.getProperty("selected"), "[step 5] The first SegmentedButtonItem should not be selected.");
+ assert.ok(await segmentedButtonItem2.getProperty("selected"), "[step 5] The first SegmentedButtonItem should not be selected.");
+ assert.notOk(await segmentedButtonItem3.getProperty("selected"), "[step 5] The first SegmentedButtonItem should be selected.");
});
- it("tests if a pressed item could be deselected", async () => {
+ it("tests if a selected item could be deselected", async () => {
const firstSegmentedButtonItem = await browser.$("#segButtonMulti > ui5-segmented-button-item:first-child");
await firstSegmentedButtonItem.click();
- assert.ok(await firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should be pressed");
+ assert.ok(await firstSegmentedButtonItem.getProperty("selected"), "First SegmentedButtonItem should be selected");
await firstSegmentedButtonItem.click();
- assert.notOk(await firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should be deselected");
+ assert.notOk(await firstSegmentedButtonItem.getProperty("selected"), "First SegmentedButtonItem should be deselected");
});
- it("tests if multiple items could be pressed", async () => {
+ it("tests if multiple items could be selected", async () => {
const firstSegmentedButtonItem = await browser.$("#segButtonMulti > ui5-segmented-button-item:first-child");
const secondSegmentedButtonItem = await browser.$("#segButtonMulti > ui5-segmented-button-item:nth-child(1)");
@@ -130,7 +130,7 @@ describe("SegmentedButton general interaction", () => {
await secondSegmentedButtonItem.keys("ArrowRight");
await browser.keys("Space");
- assert.ok(await firstSegmentedButtonItem.getProperty("pressed"), "First SegmentedButtonItem should be pressed");
- assert.ok(await secondSegmentedButtonItem.getProperty("pressed"), "Second SegmentedButtonItem should be pressed");
+ assert.ok(await firstSegmentedButtonItem.getProperty("selected"), "First SegmentedButtonItem should be selected");
+ assert.ok(await secondSegmentedButtonItem.getProperty("selected"), "Second SegmentedButtonItem should be selected");
});
});
From 832b5b7417a98cf81d6e583808a15556b4346fff Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 8 Apr 2024 15:18:27 +0300
Subject: [PATCH 46/60] fix(ui5-segmented-button-item): align controls and
samples
---
packages/fiori/src/ViewSettingsDialog.hbs | 4 ++--
.../_stories/main/SegmentedButton/SegmentedButton.stories.ts | 4 ++--
.../SegmentedButtonItem/SegmentedButtonItem.stories.ts | 4 ++--
3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/packages/fiori/src/ViewSettingsDialog.hbs b/packages/fiori/src/ViewSettingsDialog.hbs
index 70eba62aa5e2..0319d3fb8089 100644
--- a/packages/fiori/src/ViewSettingsDialog.hbs
+++ b/packages/fiori/src/ViewSettingsDialog.hbs
@@ -34,12 +34,12 @@
<div class="ui5-vsd-sub-header">
<ui5-segmented-button @ui5-selection-change="{{_handleModeChange}}">
<ui5-segmented-button-item
- ?pressed="{{isModeSort}}"
+ ?selected="{{isModeSort}}"
icon="sort"
mode="Sort"
></ui5-segmented-button-item>
<ui5-segmented-button-item
- ?pressed="{{isModeFilter}}"
+ ?selected="{{isModeFilter}}"
icon="filter"
mode="Filter"
></ui5-segmented-button-item>
diff --git a/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts b/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts
index 84456c5e00a0..3284ebcf9638 100644
--- a/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts
+++ b/packages/playground/_stories/main/SegmentedButton/SegmentedButton.stories.ts
@@ -24,14 +24,14 @@ const Template: UI5StoryArgs<SegmentedButton, StoryArgsSlots> = (args) => html`<
export const Basic = Template.bind({});
Basic.args = {
default: `<ui5-segmented-button-item>Map</ui5-segmented-button-item>
-<ui5-segmented-button-item pressed="">Satellite</ui5-segmented-button-item>
+<ui5-segmented-button-item selected="">Satellite</ui5-segmented-button-item>
<ui5-segmented-button-item>Terrain</ui5-segmented-button-item>`,
accessibleName: "Geographic location",
};
export const WithIcons = Template.bind({});
WithIcons.args = {
- default: `<ui5-segmented-button-item icon="bold-text" pressed=""></ui5-segmented-button-item>
+ default: `<ui5-segmented-button-item icon="bold-text" selected=""></ui5-segmented-button-item>
<ui5-segmented-button-item icon="underline-text"></ui5-segmented-button-item>
<ui5-segmented-button-item icon="italic-text"></ui5-segmented-button-item>`,
};
diff --git a/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts b/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts
index f8f329c1bbc0..9f291db36719 100644
--- a/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts
+++ b/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts
@@ -22,7 +22,7 @@ const Template: UI5StoryArgs<SegmentedButtonItem, StoryArgsSlots> = (args) => ht
design="${ifDefined(args.design)}"
?icon-end="${ifDefined(args.iconEnd)}"
?submits="${ifDefined(args.submits)}"
- ?pressed="${ifDefined(args.pressed)}"
+ ?selected="${ifDefined(args.selected)}"
accessibility-attributes="${ifDefined(args.accessibilityAttributes)}"
accessible-name="${ifDefined(args.accessibleName)}"
accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
@@ -38,5 +38,5 @@ export const Basic = Template.bind({});
Basic.tags = ["_hidden_"];
Basic.args = {
default: "Current item",
- pressed: true,
+ selected: true,
};
\ No newline at end of file
From a4447d20f673c0968bca63931910f2c607735613 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 8 Apr 2024 15:53:01 +0300
Subject: [PATCH 47/60] fix(ui5-segmentedbutton-item): fix timepicker tests
---
packages/main/test/specs/TimeSelectionClocks.spec.js | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/packages/main/test/specs/TimeSelectionClocks.spec.js b/packages/main/test/specs/TimeSelectionClocks.spec.js
index e9a596d63458..33de783e7b7f 100644
--- a/packages/main/test/specs/TimeSelectionClocks.spec.js
+++ b/packages/main/test/specs/TimeSelectionClocks.spec.js
@@ -70,16 +70,16 @@ describe("Interactions", () => {
await buttons[0].click();
- assert.notOk(await amButtonItem.getProperty("pressed"), "AM should not be pressed");
- assert.ok(await pmButtonItem.getProperty("pressed"), "PM should be pressed");
+ assert.notOk(await amButtonItem.getProperty("selected"), "AM should not be selected");
+ assert.ok(await pmButtonItem.getProperty("selected"), "PM should be selected");
await browser.keys("a");
- assert.ok(await amButtonItem.getProperty("pressed"), "AM should be pressed");
- assert.notOk(await pmButtonItem.getProperty("pressed"), "PM should not be pressed");
+ assert.ok(await amButtonItem.getProperty("selected"), "AM should be selected");
+ assert.notOk(await pmButtonItem.getProperty("selected"), "PM should not be selected");
await browser.keys("p");
- assert.notOk(await amButtonItem.getProperty("pressed"), "AM should not be pressed");
- assert.ok(await pmButtonItem.getProperty("pressed"), "PM should be pressed");
+ assert.notOk(await amButtonItem.getProperty("selected"), "AM should not be selected");
+ assert.ok(await pmButtonItem.getProperty("selected"), "PM should be selected");
});
it("arrow keys", async () => {
From b463bf313980cf84df605f4de4a968927a243af5 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 8 Apr 2024 16:54:59 +0300
Subject: [PATCH 48/60] fix(ui5-segmentedbutton-item): fix timepicker tests
---
packages/main/src/TimePickerInternals.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/main/src/TimePickerInternals.ts b/packages/main/src/TimePickerInternals.ts
index 34294bc458d6..a5d055169b96 100644
--- a/packages/main/src/TimePickerInternals.ts
+++ b/packages/main/src/TimePickerInternals.ts
@@ -32,7 +32,7 @@ type TimePickerComponentIndexMap = {
type TimeSelectionPeriodProperties = {
label: string,
- pressed: boolean,
+ selected: boolean,
}
type TimeSelectionChangeEventDetail = {
@@ -419,7 +419,7 @@ class TimePickerInternals extends UI5Element {
this.periodsArray.forEach(item => {
this._periods.push({
"label": item,
- "pressed": this._period === item,
+ "selected": this._period === item,
});
});
}
From 28af510e0722f70842620fb73f759eef3a992ab4 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 8 Apr 2024 17:13:30 +0300
Subject: [PATCH 49/60] fix(ui5-segmentedbutton-item): fix storybook
---
.../SegmentedButtonItem/SegmentedButtonItem.stories.ts | 7 -------
1 file changed, 7 deletions(-)
diff --git a/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts b/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts
index 9f291db36719..af8f4faae335 100644
--- a/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts
+++ b/packages/playground/_stories/main/SegmentedButton/SegmentedButtonItem/SegmentedButtonItem.stories.ts
@@ -19,17 +19,10 @@ const Template: UI5StoryArgs<SegmentedButtonItem, StoryArgsSlots> = (args) => ht
<ui5-segmented-button>
<ui5-segmented-button-item>Map</ui5-segmented-button-item>
<ui5-segmented-button-item
- design="${ifDefined(args.design)}"
- ?icon-end="${ifDefined(args.iconEnd)}"
- ?submits="${ifDefined(args.submits)}"
?selected="${ifDefined(args.selected)}"
- accessibility-attributes="${ifDefined(args.accessibilityAttributes)}"
- accessible-name="${ifDefined(args.accessibleName)}"
- accessible-name-ref="${ifDefined(args.accessibleNameRef)}"
?disabled="${ifDefined(args.disabled)}"
icon="${ifDefined(args.icon)}"
tooltip="${ifDefined(args.tooltip)}"
- type="${ifDefined(args.type)}"
>${unsafeHTML(args.default)}</ui5-segmented-button-item>
<ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
</ui5-segmented-button>`;
From 49f630a3a8890b46631b99595f3f0b0a66b68080 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 15 Apr 2024 09:31:38 +0300
Subject: [PATCH 50/60] refactor(ui5-segmentedbutton-item): refactor focus
handling
---
packages/main/src/SegmentedButton.ts | 2 -
packages/main/src/SegmentedButtonItem.hbs | 8 ++--
packages/main/src/SegmentedButtonItem.ts | 37 +++-------------
.../main/src/themes/SegmentedButtonItem.css | 44 +++++++++++--------
4 files changed, 34 insertions(+), 57 deletions(-)
diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts
index d1ad27a7fedb..e8e1d1c45859 100644
--- a/packages/main/src/SegmentedButton.ts
+++ b/packages/main/src/SegmentedButton.ts
@@ -192,7 +192,6 @@ class SegmentedButton extends UI5Element {
});
this._itemNavigation.setCurrentItem(target);
- target.focus();
return this;
}
@@ -244,7 +243,6 @@ class SegmentedButton extends UI5Element {
// If the component is focused for the first time
// focus the selected item if such is present
if (this.selectedItems.length) {
- this.selectedItems[0].focus();
this._itemNavigation.setCurrentItem(this.selectedItems[0]);
this.hasPreviouslyFocusedItem = true;
}
diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
index 7958900e5886..746ca76f645a 100644
--- a/packages/main/src/SegmentedButtonItem.hbs
+++ b/packages/main/src/SegmentedButtonItem.hbs
@@ -4,11 +4,9 @@
aria-posinset="{{posInSet}}"
aria-setsize="{{sizeOfSet}}"
aria-selected="{{selected}}"
- class="ui5-button-root"
+ class="ui5-segmentedbutton-item-root"
aria-disabled="{{disabled}}"
data-sap-focus-ref
- @focusout={{_onfocusout}}
- @focusin={{_onfocusin}}
@click={{_onclick}}
@keyup={{_onkeyup}}
@touchend="{{_ontouchend}}"
@@ -18,14 +16,14 @@
>
{{#if icon}}
<ui5-icon
- class="ui5-button-icon"
+ class="ui5-segmentedbutton-item-icon"
name="{{icon}}"
part="icon"
?show-tooltip={{isIconOnly}}
></ui5-icon>
{{/if}}
- <span id="{{_id}}-content" class="ui5-button-text">
+ <span id="{{_id}}-content" class="ui5-segmentedbutton-item-text">
<bdi>
<slot></slot>
</bdi>
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index af3be30fd9b8..8af97a4d1fa1 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -25,7 +25,7 @@ import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.j
*
* Users can use the `ui5-segmented-button-item` as part of a `ui5-segmented-button`.
*
- * Clicking or tapping on a `ui5-segmented-button-item` changes its state to `pressed`.
+ * Clicking or tapping on a `ui5-segmented-button-item` changes its state to `selected`.
* The item returns to its initial state when the user clicks or taps on it again.
* By applying additional custom CSS-styling classes, apps can give a different style to any
* `ui5-segmented-button-item`.
@@ -35,7 +35,7 @@ import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.j
* `import "@ui5/webcomponents/dist/SegmentedButtonItem.js";`
* @constructor
* @extends UI5Element
- * @implements { ISegmentedButtonItem }
+ * @implements { ISegmentedButtonItem, IButton }
* @public
*/
@customElement({
@@ -101,13 +101,6 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
@property({ defaultValue: "0", noAttribute: true })
forcedTabIndex!: string;
- /**
- * Indicates if the elements is on focus
- * @private
- */
- @property({ type: Boolean })
- focused!: boolean;
-
/**
* Defines the index of the item inside of the SegmentedButton.
* @default 0
@@ -143,31 +136,13 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
super();
}
- _onfocusout() {
- if (this.nonInteractive) {
- return;
- }
-
- if (isDesktop()) {
- this.focused = false;
- }
- }
-
- _onfocusin() {
- if (this.nonInteractive) {
- return;
- }
-
- if (isDesktop()) {
- this.focused = true;
- }
- }
-
_onclick() {
this.selected = !this.selected;
+ }
- if (isSafari()) {
- this.getDomRef()!.focus();
+ onEnterDOM() {
+ if (isDesktop()) {
+ this.setAttribute("desktop", "");
}
}
diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css
index 4b567c18431a..2fdebcd38802 100644
--- a/packages/main/src/themes/SegmentedButtonItem.css
+++ b/packages/main/src/themes/SegmentedButtonItem.css
@@ -22,7 +22,7 @@
text-overflow: ellipsis;
}
-.ui5-button-root {
+.ui5-segmentedbutton-item-root {
min-width: inherit;
cursor: inherit;
height: 100%;
@@ -57,29 +57,29 @@
color: var(--sapButton_Hover_TextColor);
}
-.ui5-button-icon {
+.ui5-segmentedbutton-item-icon {
color: inherit;
flex-shrink: 0;
}
-:host([icon-end]) .ui5-button-root {
+:host([icon-end]) .ui5-segmentedbutton-item-root {
flex-direction: row-reverse;
}
-:host([icon-end]) .ui5-button-icon {
+:host([icon-end]) .ui5-segmentedbutton-item-icon {
margin-inline-start: var(--_ui5_button_base_icon_margin);
}
-:host([icon-only]) .ui5-button-root {
+:host([icon-only]) .ui5-segmentedbutton-item-root {
min-width: auto;
padding: 0;
}
-:host([icon-only]) .ui5-button-text {
+:host([icon-only]) .ui5-segmentedbutton-item-text {
display: none;
}
-.ui5-button-text {
+.ui5-segmentedbutton-item-text {
outline: none;
position: relative;
white-space: inherit;
@@ -87,11 +87,11 @@
text-overflow: inherit;
}
-:host([has-icon]:not([icon-end])) .ui5-button-text {
+:host([has-icon]:not([icon-end])) .ui5-segmentedbutton-item-text {
margin-inline-start: var(--_ui5_button_base_icon_margin);
}
-:host([has-icon][icon-end]) .ui5-button-text {
+:host([has-icon][icon-end]) .ui5-segmentedbutton-item-text {
margin-inline-start: 0;
}
@@ -101,7 +101,7 @@
cursor: default;
}
-:host([has-icon]:not([icon-only])) .ui5-button-text{
+:host([has-icon]:not([icon-only])) .ui5-segmentedbutton-item-text{
/* calculating the minimum width by removing the icon size */
min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
}
@@ -109,8 +109,10 @@
pointer-events: none;
}
-:host([focused]:not([active])) .ui5-button-root:after,
-:host([focused][active]) .ui5-button-root:before {
+:host([desktop]:not([active])) .ui5-segmentedbutton-item-root:focus-within:after,
+:host(:not([active])) .ui5-segmentedbutton-item-root:focus-visible:after,
+:host([desktop][active]) .ui5-segmentedbutton-item-root:focus-within:before,
+:host([active]) .ui5-segmentedbutton-item-root:focus-visible:before {
content: "";
position: absolute;
box-sizing: border-box;
@@ -122,11 +124,12 @@
border-radius: var(--_ui5_button_focused_border_radius);
}
-:host([focused][active]) .ui5-button-root:before {
+:host([desktop][active]) .ui5-segmentedbutton-item-root:focus-within:before,
+:host([active]) .ui5-segmentedbutton-item-root:focus-visible:before {
border-color: var(--_ui5_button_pressed_focused_border_color);
}
-.ui5-button-root::-moz-focus-inner {
+.ui5-segmentedbutton-item-root::-moz-focus-inner {
border: 0;
}
@@ -137,19 +140,22 @@ bdi {
text-overflow: inherit;
}
-/* SegmentedButton and ToggleButton */
-:host([ui5-segmented-button-item][active][focused]) .ui5-button-root:after,
-:host([selected][focused]) .ui5-button-root:after {
+:host([active][desktop]) .ui5-segmentedbutton-item-root:focus-within:after,
+:host([active]) .ui5-segmentedbutton-item-root:focus-visible:after,
+:host([pressed][desktop]) .ui5-segmentedbutton-item-root:focus-within:after,
+:host([pressed]) .ui5-segmentedbutton-item-root:focus-visible:after {
border-color: var(--_ui5_button_pressed_focused_border_color);
outline: none;
}
-:host([ui5-segmented-button-item][focused]:not(:last-child)) .ui5-button-root:after {
+:host([desktop]:not(:last-child)) .ui5-segmentedbutton-item-root:focus-within:after,
+:host(:not(:last-child)) .ui5-segmentedbutton-item-root:focus-visible:after {
border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
}
-:host([ui5-segmented-button-item][focused]:not(:first-child)) .ui5-button-root:after {
+:host([desktop]:not(:first-child)) .ui5-segmentedbutton-item-root:focus-within:after,
+:host(:not(:first-child)) .ui5-segmentedbutton-item-root:focus-visible:after {
border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
}
\ No newline at end of file
From d4156c67d834ba70080e93ddf4297f4a8f6ded21 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 15 Apr 2024 09:32:46 +0300
Subject: [PATCH 51/60] refactor(ui5-segmentedbutton-item): refactor focus
handling
---
packages/main/src/SegmentedButtonItem.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index 8af97a4d1fa1..ea45ce340142 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -2,7 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
import property from "@ui5/webcomponents-base/dist/decorators/property.js";
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
import I18nBundle, { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import { isDesktop, isSafari } from "@ui5/webcomponents-base/dist/Device.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
import { isSpaceShift } from "@ui5/webcomponents-base/dist/Keys.js";
import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/AriaLabelHelper.js";
import willShowContent from "@ui5/webcomponents-base/dist/util/willShowContent.js";
From 969d7df192ac2f1fe05b62c78bf03c035282cfdc Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 15 Apr 2024 11:04:11 +0300
Subject: [PATCH 52/60] refactor(ui5-segmentedbutton-item): refactor focus
handling
---
packages/main/src/SegmentedButton.ts | 1 +
packages/main/src/SegmentedButtonItem.hbs | 6 +--
.../main/src/themes/SegmentedButtonItem.css | 50 +++++++++----------
.../main/test/specs/SegmentedButton.spec.js | 6 +--
4 files changed, 32 insertions(+), 31 deletions(-)
diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts
index e8e1d1c45859..3afd4be6d7e3 100644
--- a/packages/main/src/SegmentedButton.ts
+++ b/packages/main/src/SegmentedButton.ts
@@ -244,6 +244,7 @@ class SegmentedButton extends UI5Element {
// focus the selected item if such is present
if (this.selectedItems.length) {
this._itemNavigation.setCurrentItem(this.selectedItems[0]);
+ this.selectedItems[0].focus();
this.hasPreviouslyFocusedItem = true;
}
}
diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
index 746ca76f645a..d2662c2dfd9f 100644
--- a/packages/main/src/SegmentedButtonItem.hbs
+++ b/packages/main/src/SegmentedButtonItem.hbs
@@ -4,7 +4,7 @@
aria-posinset="{{posInSet}}"
aria-setsize="{{sizeOfSet}}"
aria-selected="{{selected}}"
- class="ui5-segmentedbutton-item-root"
+ class="ui5-segmented-button-item-root"
aria-disabled="{{disabled}}"
data-sap-focus-ref
@click={{_onclick}}
@@ -16,14 +16,14 @@
>
{{#if icon}}
<ui5-icon
- class="ui5-segmentedbutton-item-icon"
+ class="ui5-segmented-button-item-icon"
name="{{icon}}"
part="icon"
?show-tooltip={{isIconOnly}}
></ui5-icon>
{{/if}}
- <span id="{{_id}}-content" class="ui5-segmentedbutton-item-text">
+ <span id="{{_id}}-content" class="ui5-segmented-button-item-text">
<bdi>
<slot></slot>
</bdi>
diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css
index 2fdebcd38802..5c5e83ce9bda 100644
--- a/packages/main/src/themes/SegmentedButtonItem.css
+++ b/packages/main/src/themes/SegmentedButtonItem.css
@@ -22,7 +22,7 @@
text-overflow: ellipsis;
}
-.ui5-segmentedbutton-item-root {
+.ui5-segmented-button-item-root {
min-width: inherit;
cursor: inherit;
height: 100%;
@@ -57,29 +57,29 @@
color: var(--sapButton_Hover_TextColor);
}
-.ui5-segmentedbutton-item-icon {
+.ui5-segmented-button-item-icon {
color: inherit;
flex-shrink: 0;
}
-:host([icon-end]) .ui5-segmentedbutton-item-root {
+:host([icon-end]) .ui5-segmented-button-item-root {
flex-direction: row-reverse;
}
-:host([icon-end]) .ui5-segmentedbutton-item-icon {
+:host([icon-end]) .ui5-segmented-button-item-icon {
margin-inline-start: var(--_ui5_button_base_icon_margin);
}
-:host([icon-only]) .ui5-segmentedbutton-item-root {
+:host([icon-only]) .ui5-segmented-button-item-root {
min-width: auto;
padding: 0;
}
-:host([icon-only]) .ui5-segmentedbutton-item-text {
+:host([icon-only]) .ui5-segmented-button-item-text {
display: none;
}
-.ui5-segmentedbutton-item-text {
+.ui5-segmented-button-item-text {
outline: none;
position: relative;
white-space: inherit;
@@ -87,11 +87,11 @@
text-overflow: inherit;
}
-:host([has-icon]:not([icon-end])) .ui5-segmentedbutton-item-text {
+:host([has-icon]:not([icon-end])) .ui5-segmented-button-item-text {
margin-inline-start: var(--_ui5_button_base_icon_margin);
}
-:host([has-icon][icon-end]) .ui5-segmentedbutton-item-text {
+:host([has-icon][icon-end]) .ui5-segmented-button-item-text {
margin-inline-start: 0;
}
@@ -101,7 +101,7 @@
cursor: default;
}
-:host([has-icon]:not([icon-only])) .ui5-segmentedbutton-item-text{
+:host([has-icon]:not([icon-only])) .ui5-segmented-button-item-text{
/* calculating the minimum width by removing the icon size */
min-width: calc(var(--_ui5_button_base_min_width) - var(--_ui5_button_base_icon_margin) - 1rem);
}
@@ -109,10 +109,10 @@
pointer-events: none;
}
-:host([desktop]:not([active])) .ui5-segmentedbutton-item-root:focus-within:after,
-:host(:not([active])) .ui5-segmentedbutton-item-root:focus-visible:after,
-:host([desktop][active]) .ui5-segmentedbutton-item-root:focus-within:before,
-:host([active]) .ui5-segmentedbutton-item-root:focus-visible:before {
+:host([desktop]:not([active])) .ui5-segmented-button-item-root:focus-within:after,
+:host(:not([active])) .ui5-segmented-button-item-root:focus-visible:after,
+:host([desktop][active]) .ui5-segmented-button-item-root:focus-within:before,
+:host([active]) .ui5-segmented-button-item-root:focus-visible:before {
content: "";
position: absolute;
box-sizing: border-box;
@@ -124,12 +124,12 @@
border-radius: var(--_ui5_button_focused_border_radius);
}
-:host([desktop][active]) .ui5-segmentedbutton-item-root:focus-within:before,
-:host([active]) .ui5-segmentedbutton-item-root:focus-visible:before {
+:host([desktop][active]) .ui5-segmented-button-item-root:focus-within:before,
+:host([active]) .ui5-segmented-button-item-root:focus-visible:before {
border-color: var(--_ui5_button_pressed_focused_border_color);
}
-.ui5-segmentedbutton-item-root::-moz-focus-inner {
+.ui5-segmented-button-item-root::-moz-focus-inner {
border: 0;
}
@@ -140,22 +140,22 @@ bdi {
text-overflow: inherit;
}
-:host([active][desktop]) .ui5-segmentedbutton-item-root:focus-within:after,
-:host([active]) .ui5-segmentedbutton-item-root:focus-visible:after,
-:host([pressed][desktop]) .ui5-segmentedbutton-item-root:focus-within:after,
-:host([pressed]) .ui5-segmentedbutton-item-root:focus-visible:after {
+:host([active][desktop]) .ui5-segmented-button-item-root:focus-within:after,
+:host([active]) .ui5-segmented-button-item-root:focus-visible:after,
+:host([pressed][desktop]) .ui5-segmented-button-item-root:focus-within:after,
+:host([pressed]) .ui5-segmented-button-item-root:focus-visible:after {
border-color: var(--_ui5_button_pressed_focused_border_color);
outline: none;
}
-:host([desktop]:not(:last-child)) .ui5-segmentedbutton-item-root:focus-within:after,
-:host(:not(:last-child)) .ui5-segmentedbutton-item-root:focus-visible:after {
+:host([desktop]:not(:last-child)) .ui5-segmented-button-item-root:focus-within:after,
+:host(:not(:last-child)) .ui5-segmented-button-item-root:focus-visible:after {
border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
}
-:host([desktop]:not(:first-child)) .ui5-segmentedbutton-item-root:focus-within:after,
-:host(:not(:first-child)) .ui5-segmentedbutton-item-root:focus-visible:after {
+:host([desktop]:not(:first-child)) .ui5-segmented-button-item-root:focus-within:after,
+:host(:not(:first-child)) .ui5-segmented-button-item-root:focus-visible:after {
border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
}
\ No newline at end of file
diff --git a/packages/main/test/specs/SegmentedButton.spec.js b/packages/main/test/specs/SegmentedButton.spec.js
index b8f6cb676d3a..75e8b743e7a3 100644
--- a/packages/main/test/specs/SegmentedButton.spec.js
+++ b/packages/main/test/specs/SegmentedButton.spec.js
@@ -7,7 +7,7 @@ describe("SegmentedButton general interaction", () => {
it("tests if selected and tooltip attributes are applied", async () => {
const segmentedButtonItem = await browser.$("#segButton1 > ui5-segmented-button-item:first-child");
- const segmentedButtonItemInner = await segmentedButtonItem.shadow$(".ui5-button-root");
+ const segmentedButtonItemInner = await segmentedButtonItem.shadow$(".ui5-segmented-button-item-root");
assert.ok(await segmentedButtonItem.getProperty("selected"), "SegmentedButtonItem has property selected");
assert.strictEqual(await segmentedButtonItemInner.getProperty("title"), "Employee",
@@ -70,11 +70,11 @@ describe("SegmentedButton general interaction", () => {
await button1.click();
await button1.keys("Tab");
- assert.ok(await segmentedButtonItem1.isFocused(), "The first SegmentedButtonItem should be focused.");
+ assert.ok(await segmentedButtonItem1.matches(":focus"), "The first SegmentedButtonItem should be focused.");
await button2.click();
await button2.keys("Tab");
- assert.ok(await segmentedButtonItem2.isFocused(), "The selected SegmentedButtonItem should be focused.");
+ assert.ok(await segmentedButtonItem2.matches(":focus"), "The selected SegmentedButtonItem should be focused.");
});
it("tests programatical item pressing", async () => {
From 2738ac67f1865c033d3a603f97f443f0a58717f8 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 15 Apr 2024 15:07:24 +0300
Subject: [PATCH 53/60] fix(ui5-segmented-button-item): samples fix
---
packages/main/test/pages/FormComponents.html | 2 +-
packages/main/test/pages/RTL.html | 2 +-
.../docs/_samples/main/SegmentedButton/Basic/sample.html | 4 ++--
.../_samples/main/SegmentedButton/SelectionModes/sample.html | 4 ++--
4 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/packages/main/test/pages/FormComponents.html b/packages/main/test/pages/FormComponents.html
index 07ff8364afea..c7855478308e 100644
--- a/packages/main/test/pages/FormComponents.html
+++ b/packages/main/test/pages/FormComponents.html
@@ -25,7 +25,7 @@
<ui5-label>ui5-segmented-button</ui5-label>
<ui5-segmented-button accessible-name="Geographic location">
<ui5-segmented-button-item>Map</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>Satellite</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>Satellite</ui5-segmented-button-item>
<ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
</ui5-segmented-button>
<ui5-label>ui5-split-button</ui5-label>
diff --git a/packages/main/test/pages/RTL.html b/packages/main/test/pages/RTL.html
index e98eb16ea8f0..6e7dfa511098 100644
--- a/packages/main/test/pages/RTL.html
+++ b/packages/main/test/pages/RTL.html
@@ -11,7 +11,7 @@
<body class="rtl1auto">
<div class="rtl2auto">
<ui5-segmented-button id="tb">
- <ui5-segmented-button-item pressed>EN</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>EN</ui5-segmented-button-item>
<ui5-segmented-button-item>DE</ui5-segmented-button-item>
<ui5-segmented-button-item>BG</ui5-segmented-button-item>
<ui5-segmented-button-item>ES</ui5-segmented-button-item>
diff --git a/packages/website/docs/_samples/main/SegmentedButton/Basic/sample.html b/packages/website/docs/_samples/main/SegmentedButton/Basic/sample.html
index 51c70b0dc3d2..cf186ce47da5 100644
--- a/packages/website/docs/_samples/main/SegmentedButton/Basic/sample.html
+++ b/packages/website/docs/_samples/main/SegmentedButton/Basic/sample.html
@@ -13,7 +13,7 @@
<ui5-segmented-button>
- <ui5-segmented-button-item icon="bold-text" pressed></ui5-segmented-button-item>
+ <ui5-segmented-button-item icon="bold-text" selected></ui5-segmented-button-item>
<ui5-segmented-button-item icon="underline-text"></ui5-segmented-button-item>
<ui5-segmented-button-item icon="italic-text"></ui5-segmented-button-item>
</ui5-segmented-button>
@@ -22,7 +22,7 @@
<ui5-segmented-button>
<ui5-segmented-button-item>Map</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>Satellite</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>Satellite</ui5-segmented-button-item>
<ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
</ui5-segmented-button>
diff --git a/packages/website/docs/_samples/main/SegmentedButton/SelectionModes/sample.html b/packages/website/docs/_samples/main/SegmentedButton/SelectionModes/sample.html
index 505852c170b5..7e99a54f0fa7 100644
--- a/packages/website/docs/_samples/main/SegmentedButton/SelectionModes/sample.html
+++ b/packages/website/docs/_samples/main/SegmentedButton/SelectionModes/sample.html
@@ -13,7 +13,7 @@
<ui5-segmented-button mode="SingleSelect">
- <ui5-segmented-button-item icon="bold-text" pressed></ui5-segmented-button-item>
+ <ui5-segmented-button-item icon="bold-text" selected></ui5-segmented-button-item>
<ui5-segmented-button-item icon="underline-text"></ui5-segmented-button-item>
<ui5-segmented-button-item icon="italic-text"></ui5-segmented-button-item>
</ui5-segmented-button>
@@ -22,7 +22,7 @@
<ui5-segmented-button mode="MultiSelect">
<ui5-segmented-button-item>Map</ui5-segmented-button-item>
- <ui5-segmented-button-item pressed>Satellite</ui5-segmented-button-item>
+ <ui5-segmented-button-item selected>Satellite</ui5-segmented-button-item>
<ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
</ui5-segmented-button>
From 0ed79df6e1318717d39362fb2902e42de5435e1b Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 15 Apr 2024 16:54:16 +0300
Subject: [PATCH 54/60] fix(ui5-segmented-button-item): fix comments
---
packages/main/src/themes/SegmentedButtonItem.css | 15 ++++++---------
1 file changed, 6 insertions(+), 9 deletions(-)
diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css
index 5c5e83ce9bda..0374bb43f59d 100644
--- a/packages/main/src/themes/SegmentedButtonItem.css
+++ b/packages/main/src/themes/SegmentedButtonItem.css
@@ -53,7 +53,7 @@
:host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
:host(:not([hidden]):not([disabled]).ui5_hovered) {
background: var(--sapButton_Hover_Background);
- border: 1px solid var(--sapButton_Hover_BorderColor);
+ border: 0.0625rem solid var(--sapButton_Hover_BorderColor);
color: var(--sapButton_Hover_TextColor);
}
@@ -116,10 +116,7 @@
content: "";
position: absolute;
box-sizing: border-box;
- left: 0.0625rem;
- top: 0.0625rem;
- right: 0.0625rem;
- bottom: 0.0625rem;
+ inset: 0.0625rem;
border: var(--_ui5_button_focused_border);
border-radius: var(--_ui5_button_focused_border_radius);
}
@@ -150,12 +147,12 @@ bdi {
:host([desktop]:not(:last-child)) .ui5-segmented-button-item-root:focus-within:after,
:host(:not(:last-child)) .ui5-segmented-button-item-root:focus-visible:after {
- border-top-right-radius: var(--_ui5_button_focused_inner_border_radius);
- border-bottom-right-radius: var(--_ui5_button_focused_inner_border_radius);
+ border-start-end-radius: var(--_ui5_button_focused_inner_border_radius);
+ border-end-end-radius: var(--_ui5_button_focused_inner_border_radius);
}
:host([desktop]:not(:first-child)) .ui5-segmented-button-item-root:focus-within:after,
:host(:not(:first-child)) .ui5-segmented-button-item-root:focus-visible:after {
- border-top-left-radius: var(--_ui5_button_focused_inner_border_radius);
- border-bottom-left-radius: var(--_ui5_button_focused_inner_border_radius);
+ border-start-start-radius: var(--_ui5_button_focused_inner_border_radius);
+ border-end-start-radius: var(--_ui5_button_focused_inner_border_radius);
}
\ No newline at end of file
From 62f110b8152c3411e2de22bc67f01ade1e1fb6c6 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Wed, 17 Apr 2024 15:55:51 +0300
Subject: [PATCH 55/60] fix(ui5-segmented-button-item): fix styling
---
packages/main/src/themes/SegmentedButtonItem.css | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css
index 0374bb43f59d..19736b8543f6 100644
--- a/packages/main/src/themes/SegmentedButtonItem.css
+++ b/packages/main/src/themes/SegmentedButtonItem.css
@@ -139,8 +139,8 @@ bdi {
:host([active][desktop]) .ui5-segmented-button-item-root:focus-within:after,
:host([active]) .ui5-segmented-button-item-root:focus-visible:after,
-:host([pressed][desktop]) .ui5-segmented-button-item-root:focus-within:after,
-:host([pressed]) .ui5-segmented-button-item-root:focus-visible:after {
+:host([selected][desktop]) .ui5-segmented-button-item-root:focus-within:after,
+:host([selected]) .ui5-segmented-button-item-root:focus-visible:after {
border-color: var(--_ui5_button_pressed_focused_border_color);
outline: none;
}
From 64f677aeee71b592ec3ce8cbf78d0e87f757fc50 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Mon, 22 Apr 2024 13:18:27 +0300
Subject: [PATCH 56/60] docs(ui5-segmented-button-item): fix typos
---
packages/main/src/SegmentedButtonItem.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index ea45ce340142..31f18a40444b 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -48,7 +48,7 @@ import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.j
class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButtonItem {
/**
* Defines whether the component is disabled.
- * A disabled component can't be pressed or
+ * A disabled component can't be selected or
* focused, and it is not in the tab chain.
* @default false
* @public
@@ -88,7 +88,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
icon!: string;
/**
- * Indicates if the element if focusable
+ * Indicates if the element is focusable
* @private
*/
@property({ type: Boolean })
From a19de778f2301e244096618b75422a4686f455ee Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Thu, 25 Apr 2024 09:21:52 +0300
Subject: [PATCH 57/60] fix(ui5-segmented-button-item): address comments
---
packages/main/src/SegmentedButton.ts | 1 -
packages/main/src/SegmentedButtonItem.hbs | 1 -
packages/main/src/SegmentedButtonItem.ts | 11 ++---------
3 files changed, 2 insertions(+), 11 deletions(-)
diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts
index 3afd4be6d7e3..9d01b828b9d5 100644
--- a/packages/main/src/SegmentedButton.ts
+++ b/packages/main/src/SegmentedButton.ts
@@ -45,7 +45,6 @@ type SegmentedButtonSelectionChangeEventDetail = {
* one of the items, it stays in a pressed state. It automatically resizes the items
* to fit proportionally within the component. When no width is set, the component uses the available width.
*
- * **Note:** There can be just one selected `item` at a time.
*
* ### ES6 Module Import
*
diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
index d2662c2dfd9f..f6a50a1ad3ff 100644
--- a/packages/main/src/SegmentedButtonItem.hbs
+++ b/packages/main/src/SegmentedButtonItem.hbs
@@ -9,7 +9,6 @@
data-sap-focus-ref
@click={{_onclick}}
@keyup={{_onkeyup}}
- @touchend="{{_ontouchend}}"
tabindex={{tabIndexValue}}
aria-label="{{ariaLabelText}}"
title="{{tooltip}}"
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index 31f18a40444b..540fe5bddb9a 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -98,7 +98,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
* Defines the tabIndex of the component.
* @private
*/
- @property({ defaultValue: "0", noAttribute: true })
+ @property({ type:String, defaultValue: "0", noAttribute: true })
forcedTabIndex!: string;
/**
@@ -152,13 +152,6 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
}
}
- _ontouchend(e: TouchEvent) {
- if (this.disabled) {
- e.preventDefault();
- e.stopPropagation();
- }
- }
-
get isIconOnly() {
return !willShowContent(this.text);
}
@@ -170,7 +163,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
return tabindex;
}
- return this.nonInteractive ? "-1" : this.forcedTabIndex;
+ return this.forcedTabIndex;
}
get ariaLabelText() {
From d472d3e89175bc9a0381beb7c1c6d8840ffe78a3 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Thu, 25 Apr 2024 10:52:12 +0300
Subject: [PATCH 58/60] fix(ui5-segmented-button-item): address comments
---
packages/main/src/SegmentedButtonItem.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
index 540fe5bddb9a..ae6e10171c8d 100644
--- a/packages/main/src/SegmentedButtonItem.ts
+++ b/packages/main/src/SegmentedButtonItem.ts
@@ -98,7 +98,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
* Defines the tabIndex of the component.
* @private
*/
- @property({ type:String, defaultValue: "0", noAttribute: true })
+ @property({ type: String, defaultValue: "0", noAttribute: true })
forcedTabIndex!: string;
/**
From b81051aae576f845aa9272362b2ed5c6b6814515 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Thu, 25 Apr 2024 11:30:23 +0300
Subject: [PATCH 59/60] fix(ui5-segmented-button-item): remove redundant dot
---
packages/main/test/pages/SegmentedButton.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
index 4b95dc729142..9afc7c4197ee 100644
--- a/packages/main/test/pages/SegmentedButton.html
+++ b/packages/main/test/pages/SegmentedButton.html
@@ -194,7 +194,7 @@ <h3>Programatical change test</h3>
progSetButton3.addEventListener("click", function() {
segButtonProg.selectedItems[0].selected = true;
- segButtonProg..pressed = true;
+ segButtonProg.selected = true;
});
progSetButton4.addEventListener("click", function() {
From 754ac2202907f70e7b811182c1c6a06281aa9e54 Mon Sep 17 00:00:00 2001
From: tsanislavgatev <tseko95@gmail.com>
Date: Fri, 26 Apr 2024 09:21:06 +0300
Subject: [PATCH 60/60] refactor(ui5-segmented-button-item): reuse css
parameters
---
.../base/SegmentedButtonItem-parameters.css | 25 +------------------
.../SegmentedButtonItem-parameters.css | 7 +-----
.../SegmentedButtonItem-parameters.css | 8 +-----
.../SegmentedButtonItem-parameters.css | 8 +-----
.../SegmentedButtonItem-parameters.css | 10 +-------
.../SegmentedButtonItem-parameters.css | 10 +-------
.../SegmentedButtonItem-parameters.css | 8 +-----
.../SegmentedButtonItem-parameters.css | 8 +-----
.../SegmentedButtonItem-parameters.css | 14 +----------
.../SegmentedButtonItem-parameters.css | 14 +----------
.../SegmentedButtonItem-parameters.css | 8 +-----
.../SegmentedButtonItem-parameters.css | 8 +-----
12 files changed, 12 insertions(+), 116 deletions(-)
diff --git a/packages/main/src/themes/base/SegmentedButtonItem-parameters.css b/packages/main/src/themes/base/SegmentedButtonItem-parameters.css
index a2337f4c2e8a..37254a0b2a87 100644
--- a/packages/main/src/themes/base/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/base/SegmentedButtonItem-parameters.css
@@ -1,24 +1 @@
-:root {
- --_ui5_button_focused_border: 0.0625rem dotted var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.25rem;
- --_ui5_button_focused_inner_border_radius: 0;
- --_ui5_button_base_min_width: 2.5rem;
- --_ui5_button_base_min_compact_width: 2rem;
- --_ui5_button_base_height: var(--sapElement_Height);
- --_ui5_button_compact_height: 1.625rem;
- --_ui5_button_border_radius: var(--sapButton_BorderCornerRadius);
- --_ui5_button_base_padding: 0.6875rem;
- --_ui5_button_compact_padding: 0.4375rem;
- --_ui5_button_base_icon_only_padding: 0.5625rem;
- --_ui5_button_base_icon_margin: 0.563rem;
- --_ui5_button_icon_font_size: 1.375rem;
- --_ui5_button_emphasized_outline: 1px dotted var(--sapContent_FocusColor);
- --_ui5_button_text_shadow: var(--sapContent_TextShadow);
- --_ui5_button_focus_offset: 1px;
- --_ui5_button_focus_width: 1px;
- --_ui5_button_pressed_focused_border_color: var(--sapContent_ContrastFocusColor);
- --_ui5_button_fontFamily: var(--sapFontFamily);
- --_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor);
- --_ui5_button_emphasized_focused_border_before: 0.125rem solid var(--sapContent_FocusColor);
- --_ui5_button_emphasized_focused_active_border_color: transparent;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css
index 1f70c9961ded..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_belize/SegmentedButtonItem-parameters.css
@@ -1,6 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border_radius: 0rem;
- --_ui5_button_text_shadow: none;
-}
\ No newline at end of file
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css
index dc5562bee389..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_belize_hcb/SegmentedButtonItem-parameters.css
@@ -1,7 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.25rem;
- --_ui5_button_text_shadow: none;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css
index dc5562bee389..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_belize_hcw/SegmentedButtonItem-parameters.css
@@ -1,7 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.25rem;
- --_ui5_button_text_shadow: none;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css
index eba246962ac1..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3/SegmentedButtonItem-parameters.css
@@ -1,9 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_base_min_width: 2.25rem;
- --_ui5_button_base_padding: 0.5625rem;
- --_ui5_button_base_icon_only_padding: 0.5625rem;
- --_ui5_button_base_icon_margin: 0.375rem;
- --_ui5_button_text_shadow: none;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css
index eba246962ac1..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_dark/SegmentedButtonItem-parameters.css
@@ -1,9 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_base_min_width: 2.25rem;
- --_ui5_button_base_padding: 0.5625rem;
- --_ui5_button_base_icon_only_padding: 0.5625rem;
- --_ui5_button_base_icon_margin: 0.375rem;
- --_ui5_button_text_shadow: none;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css
index dc5562bee389..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcb/SegmentedButtonItem-parameters.css
@@ -1,7 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.25rem;
- --_ui5_button_text_shadow: none;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css
index dc5562bee389..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_fiori_3_hcw/SegmentedButtonItem-parameters.css
@@ -1,7 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.25rem;
- --_ui5_button_text_shadow: none;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css
index b9d335ecfb78..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_horizon/SegmentedButtonItem-parameters.css
@@ -1,13 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.375rem;
- --_ui5_button_focused_inner_border_radius: 0.375rem;
- --_ui5_button_base_min_width: 2.25rem;
- --_ui5_button_base_padding: 0.5625rem;
- --_ui5_button_base_icon_margin: 0.375rem;
- --_ui5_button_text_shadow: none;
- --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor);
- --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily);
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css
index b9d335ecfb78..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_horizon_dark/SegmentedButtonItem-parameters.css
@@ -1,13 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem solid var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.375rem;
- --_ui5_button_focused_inner_border_radius: 0.375rem;
- --_ui5_button_base_min_width: 2.25rem;
- --_ui5_button_base_padding: 0.5625rem;
- --_ui5_button_base_icon_margin: 0.375rem;
- --_ui5_button_text_shadow: none;
- --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor);
- --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily);
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css
index 523bdfb4f02a..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtonItem-parameters.css
@@ -1,7 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.375rem;
- --_ui5_button_text_shadow: none;
-}
+@import "./Button-parameters.css";
\ No newline at end of file
diff --git a/packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css
index ac477a3dc8b8..37254a0b2a87 100644
--- a/packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css
+++ b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtonItem-parameters.css
@@ -1,7 +1 @@
-@import "../base/SegmentedButtonItem-parameters.css";
-
-:root {
- --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor);
- --_ui5_button_focused_border_radius: 0.375rem;
- --_ui5_button_text_shadow: none;
-}
\ No newline at end of file
+@import "./Button-parameters.css";
\ No newline at end of file