From 46e89e757a4a01875d3cd020eb6491f9677b9b77 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Fri, 20 Oct 2023 15:22:30 +0300 Subject: [PATCH 01/69] fix(ui5-tree-item-custom): text wrapper allows proper alignment of flex content (#7733) fix(ui5-tree-item-custom): text wrapper allows proper alignment of flex content Fixes: #7483 --- packages/main/src/themes/TreeItem.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/main/src/themes/TreeItem.css b/packages/main/src/themes/TreeItem.css index ce80d64033a0..0f637e9d2005 100644 --- a/packages/main/src/themes/TreeItem.css +++ b/packages/main/src/themes/TreeItem.css @@ -33,6 +33,10 @@ bottom: 0.125rem; } +.ui5-li-tree-text-wrapper { + flex: auto; +} + :host([_minimal]) .ui5-li-text-wrapper { display: none; } From f433b4653c2fb43f07d10d12656d46cf88dc542f Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Fri, 20 Oct 2023 18:12:36 +0300 Subject: [PATCH 02/69] docs: enhance storybook samples (#7664) The Button, SegmentedButton and ToggleButton samples are updated according to the design colleagues recommendations. --- .../_stories/main/Button/Button.stories.ts | 38 +++++++++++-------- .../_stories/main/Menu/Menu.stories.ts | 6 +-- .../SegmentedButton.stories.ts | 16 ++------ .../main/ToggleButton/ToggleButton.stories.ts | 26 +++++-------- 4 files changed, 39 insertions(+), 47 deletions(-) diff --git a/packages/playground/_stories/main/Button/Button.stories.ts b/packages/playground/_stories/main/Button/Button.stories.ts index f6f33296eeb9..07cb175d67f5 100644 --- a/packages/playground/_stories/main/Button/Button.stories.ts +++ b/packages/playground/_stories/main/Button/Button.stories.ts @@ -42,21 +42,29 @@ export const Basic = Template.bind({}); Basic.args = { default: "Button Text", accessibleName: "Button with Accessible Name", + icon: "sap-icon://action" }; -export const DifferentDesigns: StoryFn = () => html` - Emphasized - Attention - Positive - Negative - Transparent -`; - -export const IconOnlyButtons: StoryFn = () => html` - - - - - -`; +export const DifferentTypes = Template.bind({}); +DifferentTypes.decorators = [ + (story, {args}) => { + return html` +${story({args: {...args, design: args.design || ButtonDesign.Emphasized, default: args.default || "Emphasized"}})} +${story({args: {...args, design: args.design || ButtonDesign.Default, default: args.default || "Default"}})} +${story({args: {...args, design: args.design || ButtonDesign.Attention, default: args.default || "Attention"}})} +${story({args: {...args, design: args.design || ButtonDesign.Positive, default: args.default || "Positive"}})} +${story({args: {...args, design: args.design || ButtonDesign.Negative, default: args.default || "Negative"}})} +${story({args: {...args, design: args.design || ButtonDesign.Transparent, default: args.default || "Transparent"}})}`; + }, +]; + +export const IconOnlyButtons = Template.bind({}); +IconOnlyButtons.decorators = [ + (story, {args}) => { + return html` +${story({args: {...args, design: args.design || ButtonDesign.Default, icon: args.icon || "edit", tooltip: args.tooltip || "Edit Button"}})} +${story({args: {...args, design: args.design || ButtonDesign.Transparent, icon: args.icon || "account", tooltip: args.tooltip || "Account Button"}})}` + }, +]; + IconOnlyButtons.storyName = "Icon-Only Buttons"; \ No newline at end of file diff --git a/packages/playground/_stories/main/Menu/Menu.stories.ts b/packages/playground/_stories/main/Menu/Menu.stories.ts index 00c6d95c7ea3..ba8a4d5f4f00 100644 --- a/packages/playground/_stories/main/Menu/Menu.stories.ts +++ b/packages/playground/_stories/main/Menu/Menu.stories.ts @@ -47,7 +47,7 @@ Basic.args = { `, }; Basic.decorators = [ - (story) => html`Open Menu
+ (story) => html`Open Menu
${story()} - - diff --git a/packages/main/test/pages/Icon_and_theming.html b/packages/main/test/pages/Icon_and_theming.html index dfea3dc07d51..26d6546c4d77 100644 --- a/packages/main/test/pages/Icon_and_theming.html +++ b/packages/main/test/pages/Icon_and_theming.html @@ -9,7 +9,7 @@ - Horizon + Quartz
SAPIcons auto ("home")
@@ -72,7 +72,7 @@ themeToggle.addEventListener("click", event => { const pressed = event.target.pressed; - window["sap-ui-webcomponents-bundle"].configuration.setTheme(pressed ? "sap_horizon" : "sap_fiori_3"); + window["sap-ui-webcomponents-bundle"].configuration.setTheme(pressed ? "sap_fiori_3" : "sap_horizon"); event.target.innerHTML = pressed ? "Quartz" : "Horizon" }); diff --git a/packages/main/test/pages/OpenUI5-second.html b/packages/main/test/pages/OpenUI5-second.html index 79a37dec8055..702f5c910519 100644 --- a/packages/main/test/pages/OpenUI5-second.html +++ b/packages/main/test/pages/OpenUI5-second.html @@ -11,7 +11,6 @@ diff --git a/packages/main/test/specs/Icon.spec.js b/packages/main/test/specs/Icon.spec.js index 4129ef49549e..7d9c3c9ce7ad 100644 --- a/packages/main/test/specs/Icon.spec.js +++ b/packages/main/test/specs/Icon.spec.js @@ -66,19 +66,19 @@ describe("Icon general interaction", () => { // assert - initial SVG path const iconPath = await browser.$("#myIcon").shadow$(".ui5-icon-root path"); const pathValue = await iconPath.getAttribute("d"); - assert.ok(pathValue.startsWith(V4_PATH_START), "Icon's path in sap_fiori_3"); + assert.ok(pathValue.startsWith(V5_PATH_START), "Icon's path in sap_horizon."); // act - switch theme await browser.executeAsync( async (newTheme, done) => { const config = window['sap-ui-webcomponents-bundle'].configuration; await config.setTheme(newTheme); done(); - }, "sap_horizon"); + }, "sap_fiori_3"); // assert - SVG path changed const iconPathAfter = await browser.$("#myIcon").shadow$(".ui5-icon-root path"); const iconPathValueAfter = await iconPathAfter.getAttribute("d"); - assert.ok(iconPathValueAfter.startsWith(V5_PATH_START), "Icon's path changed in sap_horizon."); + assert.ok(iconPathValueAfter.startsWith(V4_PATH_START), "Icon's path changed in sap_fiori_3."); }); it("Tests icon modules' exported values", async () => { diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js index 14950370a4e5..d2f731078165 100644 --- a/packages/main/test/specs/Link.spec.js +++ b/packages/main/test/specs/Link.spec.js @@ -45,9 +45,10 @@ describe("General API", () => { it("should wrap the text of the link", async () => { const wrappingLabel = await browser.$("#wrapping-link"); const truncatingLabel = await browser.$("#non-wrapping-link"); + const LINK_HEIGHT = 20; // It's 20px in sap_horizon, previously 18px in sap_fiori_3 assert.isAbove((await wrappingLabel.getSize()).height, (await truncatingLabel.getSize()).height); - assert.strictEqual((await truncatingLabel.getSize()).height, 18, "The truncated label should be single line."); + assert.strictEqual((await truncatingLabel.getSize()).height, LINK_HEIGHT, "The truncated label should be single line."); }); it("should prevent clicking on disabled link", async () => { diff --git a/packages/playground/docs/landing-page.html b/packages/playground/docs/landing-page.html index e9a5400c3527..8ceae5c3ac2b 100644 --- a/packages/playground/docs/landing-page.html +++ b/packages/playground/docs/landing-page.html @@ -10,7 +10,6 @@ diff --git a/packages/tools/assets-meta.js b/packages/tools/assets-meta.js index a571d601c21a..e653a9524daf 100644 --- a/packages/tools/assets-meta.js +++ b/packages/tools/assets-meta.js @@ -1,6 +1,6 @@ const assetsMeta = { "themes": { - "default": "sap_fiori_3", + "default": "sap_horizon", "all": [ "sap_fiori_3", "sap_fiori_3_dark", From afd3f191bcad2bd122d22e95d942aabe2affea94 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Fri, 27 Oct 2023 11:54:43 +0300 Subject: [PATCH 17/69] docs: update TypeScript Support statement (#7747) We now remove the "experimental" notion for our TypeScript support from the documentation. --- docs/1-getting-started/07-typescript-support.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/1-getting-started/07-typescript-support.md b/docs/1-getting-started/07-typescript-support.md index d3ad7cda4879..502f1ca5812d 100644 --- a/docs/1-getting-started/07-typescript-support.md +++ b/docs/1-getting-started/07-typescript-support.md @@ -1,9 +1,13 @@ # TypeScript Support -**Note: TypeScript support is experimental and subject to change**. If you consume the web components via TypeScript, you might have to adjust your code before the TypeScript definitions become final and officially supported. +**TypeScript Support is enabled for both component development and component consumption.** + +Since version `1.11.0`, we have been providing TypeScript definitions under an experimental flag, and starting from version `1.19.0`, all TypeScript definitions are considered `stable`. +With TypeScript definitions you will benefit from static code checks, autocompletion, and other expected features as expected in a TypeScript application. + + +**Note:** In exceptional cases, some of the available TypeScript types may change. In such instances, we will document all changes in a prominent manner within our release change log. -Since `1.11.0` we are providing `TypeScript definitions` (as `.d.ts` files) for all framework's and components' APIs, available to applications, written in TypeScript. Previously, without definitions, the usage of UI5 Web Components in TypeScript application was not optimal as the types have been missing and inferred by the TS compiler as `any`. -Now, when accessing a public API, you will benefit from static code checks, autocompletion, etc. as expected in a TypeScript app. **Example:** usage of `setLanguage` from `@ui5/webcomponents-base` From 14fd6423ce0ecd6d34074e81c53ff5e6bdfdf7c8 Mon Sep 17 00:00:00 2001 From: Elena Stoyanova Date: Mon, 30 Oct 2023 08:30:08 +0200 Subject: [PATCH 18/69] fix(ui5-slider): update labels on min and max change (#7764) * fix(ui5-slider): update labels on min and max change * fix(ui5-slider): fix test --------- Co-authored-by: Elena Stoyanova --- packages/main/src/SliderBase.ts | 6 +++++- packages/main/test/specs/Slider.spec.js | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/main/src/SliderBase.ts b/packages/main/src/SliderBase.ts index ceac033e8ef7..ea958d41f9d6 100644 --- a/packages/main/src/SliderBase.ts +++ b/packages/main/src/SliderBase.ts @@ -173,6 +173,8 @@ abstract class SliderBase extends UI5Element { _isUserInteraction = false; _isInnerElementFocusing = false; _oldNumberOfLabels?: number; + _oldMin?: number; + _oldMax?: number; _labelWidth = 0; _labelValues?: Array; @@ -631,10 +633,12 @@ abstract class SliderBase extends UI5Element { const newNumberOfLabels = (this._effectiveMax - this._effectiveMin) / (step * labelInterval); // If the required labels are already rendered - if (newNumberOfLabels === this._oldNumberOfLabels) { + if (newNumberOfLabels === this._oldNumberOfLabels && this._oldMin === this._effectiveMin && this._oldMax === this._effectiveMax) { return; } + this._oldMin = this._effectiveMin; + this._oldMax = this._effectiveMax; this._oldNumberOfLabels = newNumberOfLabels; this._labelWidth = 100 / newNumberOfLabels; this._labelValues = []; diff --git a/packages/main/test/specs/Slider.spec.js b/packages/main/test/specs/Slider.spec.js index 4f4168be196b..76d514aa7a93 100644 --- a/packages/main/test/specs/Slider.spec.js +++ b/packages/main/test/specs/Slider.spec.js @@ -102,6 +102,25 @@ describe("Properties synchronization and normalization", () => { assert.strictEqual((await slider.getProperty("_labels")).length, 6, "Labels must be 6 - 1 for every 4 tickmarks (and 8 current value points)"); }); + it("If the min and max properties are changed, the tickmarks and labels must be updated also.", async () => { + const slider = await browser.$("#slider-tickmarks-labels"); + const labelLength = (await slider.getProperty("_labels")).length; + + assert.strictEqual((await slider.getProperty("_labels"))[0], "-20", "Initial slider start label is -20."); + assert.strictEqual((await slider.getProperty("_labels"))[labelLength - 1], "20", "Initial slider end label is 20."); + + // simulate the synchronous update of min and max made programatically + await browser.executeAsync(done => { + const slider = document.getElementById("slider-tickmarks-labels"); + slider.min = 0; + slider.max = 40; + done(); + }); + + assert.strictEqual((await slider.getProperty("_labels"))[0], "0", "Slider start label is updated correctly."); + assert.strictEqual((await slider.getProperty("_labels"))[labelLength - 1], "40", "Slider end label is updated correctly."); + }); + it("If min property is set to a greater number than the max property their effective values should be swapped, their real ones - not", async () => { const slider = await browser.$("#basic-slider"); From 3df7d038e5c16d3c885bc186d0df3d37f34b2f61 Mon Sep 17 00:00:00 2001 From: niyap <38278268+niyap@users.noreply.github.com> Date: Mon, 30 Oct 2023 09:37:49 +0200 Subject: [PATCH 19/69] fix(ui5-textarea): remove white space from value state message (#7755) --- packages/main/src/TextArea.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 0b52170f2453..e52cbd406a18 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -568,6 +568,7 @@ class TextArea extends UI5Element implements IFormElement { "ui5-content-native-scrollbars": getEffectiveScrollbarStyle(), }, valueStateMsg: { + "ui5-valuestatemessage-header": true, "ui5-valuestatemessage--error": this.valueState === ValueState.Error, "ui5-valuestatemessage--warning": this.valueState === ValueState.Warning, "ui5-valuestatemessage--information": this.valueState === ValueState.Information, From 5a510cff52a1e8d19f38f33b4582f9555aa28527 Mon Sep 17 00:00:00 2001 From: niyap <38278268+niyap@users.noreply.github.com> Date: Mon, 30 Oct 2023 11:23:31 +0200 Subject: [PATCH 20/69] fix(ui5-textarea): select exceeded text (#7741) * fix(ui5-textarea): select exceeded text * fix(ui5-textarea): adjust test * fix(ui5-textarea): adjust text description --- packages/main/src/TextArea.ts | 6 ++++++ packages/main/test/pages/TextArea.html | 2 +- packages/main/test/specs/TextArea.spec.js | 24 +++++++++++++++++++++++ 3 files changed, 31 insertions(+), 1 deletion(-) diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index e52cbd406a18..01213870df38 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -474,6 +474,12 @@ class TextArea extends UI5Element implements IFormElement { } this.value = nativeTextArea.value; + const valueLength = this.value.length; + + if (e.inputType === "insertFromPaste" && this.maxlength && valueLength > this.maxlength) { + nativeTextArea.setSelectionRange(this.maxlength, valueLength); + } + this.fireEvent("input", {}); // Angular two way data binding diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html index 7ce1db063b91..b7f007758529 100644 --- a/packages/main/test/pages/TextArea.html +++ b/packages/main/test/pages/TextArea.html @@ -123,7 +123,7 @@
Text Area: max length 20 characters - +
diff --git a/packages/main/test/specs/TextArea.spec.js b/packages/main/test/specs/TextArea.spec.js index efe24d6d67fa..34d03b7cb52b 100644 --- a/packages/main/test/specs/TextArea.spec.js +++ b/packages/main/test/specs/TextArea.spec.js @@ -1,5 +1,8 @@ import { assert } from "chai"; +const isMacOS = process.platform === 'darwin'; +const keyCtrlToPress = isMacOS ? 'Command' : 'Control'; + describe("Attributes propagation", () => { before(async () => { await browser.url(`test/pages/TextArea.html`); @@ -349,4 +352,25 @@ describe("Value update", () => { assert.strictEqual(ariaHiddenText.includes("Value State Error"), true, "Hidden screen reader text is correct"); assert.strictEqual(valueStateText.includes("Extra long text"), true, "Displayed value state message text is correct"); }); + + it("Should select all exceeded characters on paste", async () => { + const textarea = await browser.$("#ta-exceeded-text"); + const textareaInner = await browser.$("#ta-exceeded-text").shadow$("textarea"); + + // act + await textareaInner.click(); + await browser.keys([keyCtrlToPress, "a"]); + await browser.keys([keyCtrlToPress, "x"]); + await browser.keys([keyCtrlToPress, "v"]); + + const selectionLength = await browser.execute(() =>{ + const textarea = document.getElementById("ta-exceeded-text").shadowRoot.querySelector("textarea"); + return textarea.selectionEnd - textarea.selectionStart; + }); + + const counter = await browser.$("#ta-exceeded-text").shadow$(".ui5-textarea-exceeded-text"); + const count = parseInt(await counter.getText()); + + assert.strictEqual(count, selectionLength, "14 symbols should exceed"); + }); }); From 194185400bb70a778359a721928ad3a99bd5f3a6 Mon Sep 17 00:00:00 2001 From: niyap <38278268+niyap@users.noreply.github.com> Date: Mon, 30 Oct 2023 11:26:18 +0200 Subject: [PATCH 21/69] fix(ui5-combobox): announce value state header on focus (#7751) * fix(ui5-combobox): announce value state header on focus * fix(ui5-combobox): announce default value state text * fix(ui5-combobox): adjust condition --- packages/main/src/ComboBox.ts | 12 ++++++++++++ packages/main/test/pages/ComboBox.html | 13 +++++++++++++ packages/main/test/specs/ComboBox.spec.js | 18 ++++++++++++++++++ 3 files changed, 43 insertions(+) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index 3e61961d5e5e..0766e275fcb6 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -769,6 +769,7 @@ class ComboBox extends UI5Element { if (this.focused && indexOfItem === -1 && this.hasValueStateText && isOpen) { this._isValueStateFocused = true; + this._announceValueStateText(); this.focused = false; return; } @@ -792,6 +793,7 @@ class ComboBox extends UI5Element { this._clearFocus(); this._itemFocused = false; this._isValueStateFocused = true; + this._announceValueStateText(); this._filteredItems[0].selected = false; return; } @@ -815,6 +817,7 @@ class ComboBox extends UI5Element { this._clearFocus(); this._itemFocused = false; this._isValueStateFocused = true; + this._announceValueStateText(); return; } @@ -838,6 +841,7 @@ class ComboBox extends UI5Element { this._clearFocus(); this._itemFocused = false; this._isValueStateFocused = true; + this._announceValueStateText(); return; } @@ -1073,6 +1077,14 @@ class ComboBox extends UI5Element { } } + _announceValueStateText() { + const valueStateText = this.shouldDisplayDefaultValueStateMessage ? this.valueStateDefaultText : this.valueStateMessageText.map(el => el.textContent).join(" "); + + if (valueStateText) { + announce(valueStateText, InvisibleMessageMode.Polite); + } + } + get _headerTitleText() { return ComboBox.i18nBundle.getText(INPUT_SUGGESTIONS_TITLE); } diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index 82730131ddec..1ff451382f70 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -287,6 +287,19 @@

ComboBox in Compact

+
+ + + + + + + + +
Please choose a country
+ +
+ +`; }; export const Basic = Template.bind({}); @@ -66,3 +72,93 @@ Basic.args = { export const Types: StoryFn = TemplateToolbarTypes.bind({}); +export const MultipleUI5SelectComponents : UI5StoryArgs = (args) => { + return html` + ${unsafeHTML(args.default)} + + + +`; +}; + + +MultipleUI5SelectComponents.storyName = "Multiple Toolbar Select components"; + +MultipleUI5SelectComponents.args = { + default: ` + Apple + Orange + Pear + + + 1 + 2 + 3 + + + Bulgaria + Bolivia + Brunei + Bangladesh + Belarus + Belgium + + + Apple + Avocado + Mango + + + Orange + Pumpkin + Carrot +
+ Information message. This is a Link. Extra long text + used as an information message. Extra long text used as an information + message - 2. Extra long text used as an information message - 3. +
+
+ Information message 2. This is a Link. Extra long text + used as an information message. Extra long text used as an information + message - 2. Extra long text used as an information message - 3. +
+ + + Strawberry + Tomato + Red Chili Pepper +
+ Information message. This is a Link. Extra long text + used as an information message. Extra long text used as an information + message - 2. Extra long text used as an information message - 3. +
+
+ Information message 2. This is a Link. Extra long text + used as an information message. Extra long text used as an information + message - 2. Extra long text used as an information message - 3. +
+ + + Blueberry + Grape + Plum +
+ Information message. This is a Link. Extra long text + used as an information message. Extra long text used as an information + message - 2. Extra long text used as an information message - 3. +
+
+ Information message 2. This is a Link. Extra long text + used as an information message. Extra long text used as an information + message - 2. Extra long text used as an information message - 3. +
+ + ` +}; + diff --git a/packages/playground/build-scripts-storybook/documentation-prepare.ts b/packages/playground/build-scripts-storybook/documentation-prepare.ts index cd63349c87dd..8c6414c08a8e 100644 --- a/packages/playground/build-scripts-storybook/documentation-prepare.ts +++ b/packages/playground/build-scripts-storybook/documentation-prepare.ts @@ -11,7 +11,7 @@ const docsGenerator = new DocsGenerator({ reader: new DocsReader({ directoryUtils, src: directoryUtils.joinPath("../../../docs/**/*.md"), - ignore: ["/**/*/README.md", "/**/*/images", "/**/*/changelog"], + ignore: ["/**/*/README.md", "/**/*/images", "/**/*/changelog", "/**/*/internal"], }), parsers: [ new MetadataParser(), From 842f047844ac7f06716813c2fa0ebcb3ae64c9a7 Mon Sep 17 00:00:00 2001 From: Tsanislav Gatev Date: Tue, 31 Oct 2023 08:57:55 +0200 Subject: [PATCH 23/69] fix(ui5-calendar): focus date set in slot (#7735) fixes: #7693 We are now considering the ui5-date, set trough nested element, for the focus. Previously we only focused the date passes as timestamp, and that timestamp changed based on current day, navigation and etc. We now check if we have a value set to the control and our initial focus goes to it, if the value is set after init state, we set the focus to the newly set date. --- packages/main/src/Calendar.ts | 22 ++++++++++++++++++++++ packages/main/test/pages/Calendar.html | 4 +++- packages/main/test/specs/Calendar.spec.js | 14 +++++++++++--- 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index ff9c02de82e9..ae7f78d5108a 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -1,4 +1,5 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.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"; @@ -257,6 +258,8 @@ class Calendar extends CalendarPart { @property({ type: CalendarPickersMode, defaultValue: CalendarPickersMode.DAY_MONTH_YEAR, noAttribute: true }) _pickersMode!: CalendarPickersMode; + _valueIsProcessed!: boolean + /** * Defines the selected date or dates (depending on the selectionMode property) * for this calendar as instances of ui5-date. @@ -280,6 +283,11 @@ class Calendar extends CalendarPart { }).filter((date): date is number => !!date); } + constructor() { + super(); + + this._valueIsProcessed = false; + } /** * @private */ @@ -315,6 +323,14 @@ class Calendar extends CalendarPart { onBeforeRendering() { this._normalizeCurrentPicker(); + + if (!this._valueIsProcessed) { + if (this._selectedDatesTimestamps) { + this.timestamp = this._selectedDatesTimestamps[0]; + } + + this._valueIsProcessed = true; + } } async onAfterRendering() { @@ -340,6 +356,12 @@ class Calendar extends CalendarPart { this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText(); } + onInvalidation(changeInfo: ChangeInfo) { + if (changeInfo.reason === "childchange") { + this._valueIsProcessed = false; + } + } + /** * The user clicked the "month" button in the header */ diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html index 43d799843ec9..9f364609725f 100644 --- a/packages/main/test/pages/Calendar.html +++ b/packages/main/test/pages/Calendar.html @@ -63,7 +63,9 @@
Calendar with Minimum and Maximum Date & Format Pattern - + + +
diff --git a/packages/main/test/specs/Calendar.spec.js b/packages/main/test/specs/Calendar.spec.js index 7aa8bef27b37..bb5092782e82 100644 --- a/packages/main/test/specs/Calendar.spec.js +++ b/packages/main/test/specs/Calendar.spec.js @@ -362,7 +362,7 @@ describe("Calendar 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/Calendar.html"); + await browser.url(`test/pages/Calendar.html`); const calendar = await browser.$("#calendar6"); await calendar.setAttribute("max-date", new Date(Date.UTC(2024, 9, 4, 0, 0, 0)).toISOString().split("T")[0]); // sets the max date to 2024-10-04 @@ -382,8 +382,6 @@ describe("Calendar general interaction", () => { await browser.url("test/pages/Calendar.html"); const calendar = await browser.$("#calendar1"); - const nextButton = await calendar.shadow$("ui5-calendar-header").shadow$("[data-ui5-cal-header-btn-next]"); - const prevButton = await calendar.shadow$("ui5-calendar-header").shadow$("[data-ui5-cal-header-btn-prev]"); const yearButton = await calendar.shadow$("ui5-calendar-header").shadow$(`div[data-ui5-cal-header-btn-year]`); // setting the min and max dates both to a valid format date, but not in the valid ISO format. await calendar.setAttribute("max-date", `${new Date(Date.UTC(2024, 9, 4, 0, 0, 0))}`); @@ -423,4 +421,14 @@ describe("Calendar general interaction", () => { assert.strictEqual(await dayPickerRoot.hasClass("ui5-dp-twocalendartypes"), false, "Secondary Calendar class is applied correctly"); }); + + it("Focus goes into the selected day item of the day picker", async () => { + await browser.url(`test/pages/Calendar.html`); + + const calendar = await browser.$("#calendar4"); + const dayPicker = await calendar.shadow$("ui5-daypicker"); + const currentDayItem = await dayPicker.shadow$(`div[data-sap-timestamp="1594166400"]`); + + assert.ok(await currentDayItem.isFocusedDeep(), "Current calendar day item is focused"); + }); }); From 425e97bd5fa030155502f3b9c7022e0e1a3d3202 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 31 Oct 2023 09:59:52 +0200 Subject: [PATCH 24/69] fix(FormSupport): submit linebreaks in ui5-textarea (#7757) Previously we used to always render an input native element in the light DOM of our input-type web components for the purposes of the FormSupport. This includes the TextArea web component. However, when linebreaks are used in the TextArea web components, they got lost (native input supports one-line text) and eventually not part of the form submission. Now we use native textarea element and the line breaks are properly submitted. Fixes: #7467 --- packages/main/src/CheckBox.ts | 6 +- packages/main/src/FileUploader.ts | 4 +- packages/main/src/Select.ts | 4 +- packages/main/src/Switch.ts | 6 +- packages/main/src/TextArea.ts | 2 +- .../src/features/InputElementsFormSupport.ts | 83 ++++++++++++------- packages/main/test/pages/FormSupport.html | 2 +- packages/main/test/specs/FormSupport.spec.js | 9 +- 8 files changed, 73 insertions(+), 43 deletions(-) diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index adf6f84a3563..48d5a176c464 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -24,7 +24,7 @@ import { // Styles import checkboxCss from "./generated/themes/CheckBox.css.js"; import type FormSupport from "./features/InputElementsFormSupport.js"; -import type { IFormElement } from "./features/InputElementsFormSupport.js"; +import type { IFormElement, NativeFormElement } from "./features/InputElementsFormSupport.js"; // Template import CheckBoxTemplate from "./generated/templates/CheckBoxTemplate.lit.js"; @@ -304,9 +304,9 @@ class CheckBox extends UI5Element implements IFormElement { _enableFormSupport() { const formSupport = getFeature("FormSupport"); if (formSupport) { - formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: HTMLInputElement) => { + formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => { nativeInput.disabled = !!element.disabled; - nativeInput.checked = !!element.checked; + (nativeInput as HTMLInputElement).checked = !!element.checked; nativeInput.value = element.checked ? "on" : ""; }); } else if (this.name) { diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index f9eb5050801b..b9b8e32bef43 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -32,7 +32,7 @@ import FileUploaderCss from "./generated/themes/FileUploader.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; import type FormSupport from "./features/InputElementsFormSupport.js"; -import type { IFormElement } from "./features/InputElementsFormSupport.js"; +import type { IFormElement, NativeFormElement } from "./features/InputElementsFormSupport.js"; type FileUploaderChangeEventDetail = { files: FileList | null, @@ -327,7 +327,7 @@ class FileUploader extends UI5Element implements IFormElement { this._setFormValue(); } else { formSupport.syncNativeFileInput(this, - (element: IFormElement, nativeInput: HTMLInputElement) => { + (element: IFormElement, nativeInput: NativeFormElement) => { nativeInput.disabled = !!element.disabled; }, this._onChange.bind(this)); diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 0d567827aa17..8735e2d3f2c9 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -68,7 +68,7 @@ import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverComm import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js"; import SelectPopoverCss from "./generated/themes/SelectPopover.css.js"; import type FormSupport from "./features/InputElementsFormSupport.js"; -import type { IFormElement } from "./features/InputElementsFormSupport.js"; +import type { IFormElement, NativeFormElement } from "./features/InputElementsFormSupport.js"; import type ListItemBase from "./ListItemBase.js"; import type SelectMenu from "./SelectMenu.js"; import type { SelectMenuOptionClick, SelectMenuChange } from "./SelectMenu.js"; @@ -671,7 +671,7 @@ class Select extends UI5Element implements IFormElement { _enableFormSupport() { const formSupport = getFeature("FormSupport"); if (formSupport) { - formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: HTMLInputElement) => { + formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => { const selectElement = (element as Select); nativeInput.disabled = !!element.disabled; nativeInput.value = selectElement._currentlySelectedOption ? selectElement._currentlySelectedOption.value : ""; diff --git a/packages/main/src/Switch.ts b/packages/main/src/Switch.ts index b37528463932..d5086456ae37 100644 --- a/packages/main/src/Switch.ts +++ b/packages/main/src/Switch.ts @@ -16,7 +16,7 @@ import "@ui5/webcomponents-icons/dist/decline.js"; import "@ui5/webcomponents-icons/dist/less.js"; import { getFeature } from "@ui5/webcomponents-base/dist/FeaturesRegistry.js"; import type FormSupport from "./features/InputElementsFormSupport.js"; -import type { IFormElement } from "./features/InputElementsFormSupport.js"; +import type { IFormElement, NativeFormElement } from "./features/InputElementsFormSupport.js"; import Icon from "./Icon.js"; import SwitchDesign from "./types/SwitchDesign.js"; @@ -245,9 +245,9 @@ class Switch extends UI5Element implements IFormElement { _enableFormSupport() { const formSupport = getFeature("FormSupport"); if (formSupport) { - formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: HTMLInputElement) => { + formSupport.syncNativeHiddenInput(this, (element: IFormElement, nativeInput: NativeFormElement) => { const switchComponent = (element as Switch); - nativeInput.checked = !!switchComponent.checked; + (nativeInput as HTMLInputElement).checked = !!switchComponent.checked; nativeInput.disabled = !!switchComponent.disabled; nativeInput.value = switchComponent.checked ? "on" : ""; }); diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 01213870df38..8269e68d570c 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -405,7 +405,7 @@ class TextArea extends UI5Element implements IFormElement { const FormSupport = getFeature("FormSupport"); if (FormSupport) { - FormSupport.syncNativeHiddenInput(this); + FormSupport.syncNativeHiddenTextArea(this); } else if (this.name) { console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line } diff --git a/packages/main/src/features/InputElementsFormSupport.ts b/packages/main/src/features/InputElementsFormSupport.ts index dbce5657e37b..c55aa70c0666 100644 --- a/packages/main/src/features/InputElementsFormSupport.ts +++ b/packages/main/src/features/InputElementsFormSupport.ts @@ -10,7 +10,8 @@ interface IFormElement extends UI5Element { checked?: boolean, } -type NativeInputUpdateCallback = (element: IFormElement, nativeInput: HTMLInputElement) => void; +type NativeFormElement = HTMLInputElement | HTMLTextAreaElement; +type NativeInputUpdateCallback = (element: IFormElement, nativeInput: NativeFormElement) => void; type NativeInputChangeCallback = (e: Event) => void; const findNearestFormElement = (element: IFormElement) => { @@ -33,38 +34,59 @@ class FormSupport { */ static syncNativeHiddenInput(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) { const needsNativeInput = !!element.name || element.required; - let nativeInput = element.querySelector("input[data-ui5-form-support]") as HTMLInputElement; - if (needsNativeInput && !nativeInput) { - nativeInput = document.createElement("input"); - - nativeInput.style.clip = "rect(0 0 0 0)"; - nativeInput.style.clipPath = "inset(50%)"; - nativeInput.style.height = "1px"; - nativeInput.style.overflow = "hidden"; - nativeInput.style.position = "absolute"; - nativeInput.style.whiteSpace = "nowrap"; - nativeInput.style.width = "1px"; - nativeInput.style.bottom = "0"; - nativeInput.setAttribute("tabindex", "-1"); - nativeInput.required = element.required!; - nativeInput.setAttribute("data-ui5-form-support", ""); - nativeInput.setAttribute("aria-hidden", "true"); - - nativeInput.addEventListener("focusin", () => element.getFocusDomRef()?.focus()); + const nativeInput = element.querySelector("input[data-ui5-form-support]"); - nativeInput.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms - element.appendChild(nativeInput); - } - if (!needsNativeInput && nativeInput) { + if (needsNativeInput) { + this.syncNativeElement(element, nativeInput, nativeInputUpdateCallback); + } else if (nativeInput) { element.removeChild(nativeInput); } + } - if (needsNativeInput) { - nativeInput.name = element.name!; - (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput); + /** + * Syncs the native textarea element, rendered into the component's light DOM, + * with the component's state. + * @param { IFormElement} element - the component with form support + * @param { NativeInputUpdateCallback } nativeInputUpdateCallback - callback to calculate the native input's "disabled" and "value" properties + */ + static syncNativeHiddenTextArea(element: IFormElement, nativeInputUpdateCallback?: NativeInputUpdateCallback) { + const needsNativeTextArea = !!element.name || element.required; + const nativeTextarea = element.querySelector("textarea[data-ui5-form-support]"); + + if (needsNativeTextArea) { + this.syncNativeElement(element, nativeTextarea, nativeInputUpdateCallback, "textarea"); + } else if (nativeTextarea) { + element.removeChild(nativeTextarea); } } + static syncNativeElement(element: IFormElement, nativeElement: NativeFormElement | null, nativeInputUpdateCallback?: NativeInputUpdateCallback, nativeElementTagName = "input") { + if (!nativeElement) { + nativeElement = document.createElement(nativeElementTagName) as NativeFormElement; + + nativeElement.style.clip = "rect(0 0 0 0)"; + nativeElement.style.clipPath = "inset(50%)"; + nativeElement.style.height = "1px"; + nativeElement.style.overflow = "hidden"; + nativeElement.style.position = "absolute"; + nativeElement.style.whiteSpace = "nowrap"; + nativeElement.style.width = "1px"; + nativeElement.style.bottom = "0"; + nativeElement.setAttribute("tabindex", "-1"); + nativeElement.required = element.required!; + nativeElement.setAttribute("data-ui5-form-support", ""); + nativeElement.setAttribute("aria-hidden", "true"); + + nativeElement.addEventListener("focusin", () => element.getFocusDomRef()?.focus()); + + nativeElement.slot = "formSupport"; // Needed for IE - otherwise input elements are not part of the real DOM tree and are not detected by forms + element.appendChild(nativeElement); + } + + nativeElement.name = element.name!; + (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeElement); + } + /** * Syncs the native file input element, rendered into the ui5-file-uploader component's light DOM, * with the ui5-file-uploader component's state. @@ -74,7 +96,7 @@ class FormSupport { */ static syncNativeFileInput(element: IFormElement, nativeInputUpdateCallback: NativeInputUpdateCallback, nativeInputChangeCallback: NativeInputChangeCallback) { const needsNativeInput = !!element.name; - let nativeInput = element.querySelector(`input[type="file"][data-ui5-form-support]`) as HTMLInputElement; + let nativeInput = element.querySelector(`input[type="file"][data-ui5-form-support]`); if (needsNativeInput && !nativeInput) { nativeInput = document.createElement("input"); @@ -102,8 +124,8 @@ class FormSupport { } if (needsNativeInput) { - nativeInput.name = element.name!; - (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput); + nativeInput!.name = element.name!; + (nativeInputUpdateCallback || copyDefaultProperties)(element, nativeInput!); } } @@ -138,7 +160,7 @@ class FormSupport { } } -const copyDefaultProperties = (element: IFormElement, nativeInput: HTMLInputElement) => { +const copyDefaultProperties = (element: IFormElement, nativeInput: NativeFormElement) => { nativeInput.disabled = element.disabled!; nativeInput.value = element.value as string; // We do not explicitly convert to string to retain the current browser behavior }; @@ -150,6 +172,7 @@ export default FormSupport; export { IFormElement, + NativeFormElement, NativeInputChangeCallback, NativeInputUpdateCallback, }; diff --git a/packages/main/test/pages/FormSupport.html b/packages/main/test/pages/FormSupport.html index f8e70e0f4c7f..709c71f51cac 100644 --- a/packages/main/test/pages/FormSupport.html +++ b/packages/main/test/pages/FormSupport.html @@ -18,7 +18,7 @@

- +

diff --git a/packages/main/test/specs/FormSupport.spec.js b/packages/main/test/specs/FormSupport.spec.js index 029d62b4a677..5e1b1445e090 100644 --- a/packages/main/test/specs/FormSupport.spec.js +++ b/packages/main/test/specs/FormSupport.spec.js @@ -17,11 +17,18 @@ describe("Form support", () => { it("Submit button does submit forms", async () => { await browser.url(`test/pages/FormSupport.html`); + // Enter multiline text in TextArea + const textarea = await browser.$("#ta"); + await textarea.click() + await browser.keys("Enter"); + await browser.keys("o"); + await browser.keys("k"); + const submitButton = await browser.$("#b2"); await submitButton.click(); const formWasSubmitted = await browser.executeAsync(done => { - const expectedFormData = "?input=ok&ta=ok&dp=Apr+10%2C+2019&cb=on&radio=b&si=5"; + const expectedFormData = "?input=ok&ta=ok%0D%0Aok&dp=Apr+10%2C+2019&cb=on&radio=b&si=5"; done(location.href.endsWith(expectedFormData)); }); assert.ok(formWasSubmitted, "For was submitted and URL changed"); From 50d246c5a868ba3e9a12c4b7ea910e5ba40e2dbb Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Tue, 31 Oct 2023 11:09:03 +0200 Subject: [PATCH 25/69] docs(playground): html addon now shows decorated styles (#7714) * docs(playground): html addon now shows decorated styles * docs(playground): address code review feedback --- .../addons/html/HTMLTransformation.ts | 35 ++++++++++----- .../addons/html/processors/StylesProcessor.ts | 43 +++++++++++++++++++ .../addons/html/processors/index.ts | 1 + 3 files changed, 68 insertions(+), 11 deletions(-) create mode 100644 packages/playground/.storybook/addons/html/processors/StylesProcessor.ts diff --git a/packages/playground/.storybook/addons/html/HTMLTransformation.ts b/packages/playground/.storybook/addons/html/HTMLTransformation.ts index ee131a16da1c..b4a57aa4cd2c 100644 --- a/packages/playground/.storybook/addons/html/HTMLTransformation.ts +++ b/packages/playground/.storybook/addons/html/HTMLTransformation.ts @@ -1,4 +1,4 @@ -import { AttributeProcessor, IProcessor } from "./processors"; +import { AttributeProcessor, StylesProcessor, IProcessor } from "./processors"; export interface IHTMLTransformation { transform(html: string): string; @@ -9,20 +9,31 @@ export interface IHTMLTransformation { * Used by the HTML addon. */ export class HTMLTransformation implements IHTMLTransformation { - constructor(private processors: IProcessor[]) { - this.processors = processors; + constructor(private headProcessors: IProcessor[], private bodyProcessors: IProcessor[]) { + this.headProcessors = headProcessors; + this.bodyProcessors = bodyProcessors; } transform(html: string): string { - const dom = this.convertToDOM(html); + let transformed = ""; + const dom = this.convertToDOM(html), + head = dom.head, + body = dom.body; - this.walk(dom, (node) => { - this.processors.forEach((processor) => { + this.headProcessors.forEach((processor) => { + processor.process(head); + }); + + this.walk(body, (node) => { + this.bodyProcessors.forEach((processor) => { processor.process(node); }); }); - const transformed = this.convertToString(dom); + if (head.innerHTML) { + transformed += this.convertToString(head); + } + transformed += this.convertToString(body); return transformed; } @@ -40,13 +51,15 @@ export class HTMLTransformation implements IHTMLTransformation { return serializer.serializeToString(dom); } - private convertToDOM(html: string): HTMLElement { + private convertToDOM(html: string): Document { const parser = new DOMParser(); const doc = parser.parseFromString(html, "text/html"); - return doc.body; + return doc; } + } -const processors = [new AttributeProcessor()]; +const headProcessors = [new StylesProcessor()]; +const bodyProcessors = [new AttributeProcessor()]; -export const htmlTransformation = new HTMLTransformation(processors); +export const htmlTransformation = new HTMLTransformation(headProcessors, bodyProcessors); diff --git a/packages/playground/.storybook/addons/html/processors/StylesProcessor.ts b/packages/playground/.storybook/addons/html/processors/StylesProcessor.ts new file mode 100644 index 000000000000..216a762ed447 --- /dev/null +++ b/packages/playground/.storybook/addons/html/processors/StylesProcessor.ts @@ -0,0 +1,43 @@ +import { IProcessor } from "./IProcessor"; + +/** + * This class is responsible for formatting the style elements of the story: + * merge multiple style elements and unify their indentation. + */ +export class StylesProcessor implements IProcessor { + process(node: HTMLElement): void { + this.mergeStyles(node); + } + + private mergeStyles(dom: HTMLElement) { + const styleElements = Array.from(dom.getElementsByTagName('style')); + if (styleElements.length > 1) { // merge needed + let mergedStyles = ""; + for (let i = 0; i < styleElements.length; i++) { + mergedStyles += this.removeIndentation(styleElements[i].innerHTML); + styleElements[i].remove(); + } + const mergedStyleElement = styleElements[0]; + mergedStyleElement.innerHTML = mergedStyles; + dom.prepend(mergedStyleElement); + } + } + + private removeIndentation(str: string) { + const lines = str.split('\n'); + let shortestIndent = Infinity; + for (let i = 0; i < lines.length; i++) { + if (lines[i].trim().length === 0) { + continue; + } + let indent = lines[i].search(/\S/); + if (indent < shortestIndent && indent !== -1) { + shortestIndent = indent; + } + } + for (let i = 0; i < lines.length; i++) { + lines[i] = lines[i].substring(shortestIndent); + } + return lines.join('\n'); + } +} diff --git a/packages/playground/.storybook/addons/html/processors/index.ts b/packages/playground/.storybook/addons/html/processors/index.ts index 2c77c92e3488..62fda0d31631 100644 --- a/packages/playground/.storybook/addons/html/processors/index.ts +++ b/packages/playground/.storybook/addons/html/processors/index.ts @@ -1,2 +1,3 @@ export * from "./AttributeProcessor"; +export * from "./StylesProcessor"; export * from "./IProcessor"; From b47661c5568ed2d6202272fa62f73c7aa5af9b67 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 31 Oct 2023 12:48:47 +0200 Subject: [PATCH 26/69] Update README.md --- README.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 50f8ad034da4..b68608e9ba59 100644 --- a/README.md +++ b/README.md @@ -84,9 +84,8 @@ shortcomings when it comes to handling Custom Elements, namely the binding of `b For more information, see [Importing UI5 Web Components](./docs/1-getting-started/02-importing-components.md) and [Understanding UI5 Web Components APIs](./docs/1-getting-started/03-understanding-components-APIs.md). ## Typescript Support -Since 1.11 we are providing Typescript definitions for all public APIs. -However, the **Typescript support is experimental and subject to change**. If you consume the web components via Typescript, you might have to adjust your code before the Typescript definitions become final and officially supported. -Please, share any kind of feedback about the provided types in GitHub. +TypeScript Support is enabled for both component development and component consumption. +Since version `1.11.0`, we have been providing TypeScript definitions under an experimental flag, and starting from version `1.19.0`, all TypeScript definitions are considered `stable`. ### Is there a CDN I can use? From 629e4e61c4c10ac4cb4fd273570c261305e7fb43 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Tue, 31 Oct 2023 12:54:58 +0200 Subject: [PATCH 27/69] Update README.md --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index b68608e9ba59..4fb99a6f04e0 100644 --- a/README.md +++ b/README.md @@ -60,6 +60,11 @@ UI5 remains what it is: the best choice for… UI5 Web Components which makes using them in React even more comfortable. The current version of React (`react 18`) has some shortcomings when it comes to handling Custom Elements, namely the binding of `boolean` attributes as well as adding event listeners to custom event names like `selection-change`. With the help of UI5 Web Components for React, you can use the UI5 Web Components in React as if they were native React components. In addition to that, this library is also offering TypeScript definitions for all components, some complex layout components built on top of UI5 Web Components as well as Charting Components. +### UI5 Web Components for Angular + +[UI5 Web Components for Angular](https://github.com/SAP/ui5-webcomponents-ngx) is a wrapper implementation around +UI5 Web Components which to make it work with Angular without needing to use the `CUSTOM_ELEMENTS_SCHEMA` or `NO_ERRORS_SCHEMA` schemas. +Moreover, all Angular-specific features, such as two-way data binding and Angular Form support, work out of the box. ## How to Use From 33cdb86b34a3cb6e1b849a186a8c8c1652eb5bca Mon Sep 17 00:00:00 2001 From: Tsanislav Gatev Date: Tue, 31 Oct 2023 18:08:12 +0200 Subject: [PATCH 28/69] fix(ui5-view-settings-dialog): improve settings management (#7769) fixes: #7752 --- packages/fiori/src/ViewSettingsDialog.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/fiori/src/ViewSettingsDialog.ts b/packages/fiori/src/ViewSettingsDialog.ts index f2e2a791f97f..1055d6693f52 100644 --- a/packages/fiori/src/ViewSettingsDialog.ts +++ b/packages/fiori/src/ViewSettingsDialog.ts @@ -7,6 +7,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js"; import Dialog from "@ui5/webcomponents/dist/Dialog.js"; import Button from "@ui5/webcomponents/dist/Button.js"; import Label from "@ui5/webcomponents/dist/Label.js"; @@ -290,6 +291,12 @@ class ViewSettingsDialog extends UI5Element { } } + onInvalidation(changeInfo: ChangeInfo) { + if (changeInfo.type === "slot") { + this._confirmedSettings = this._settings; + } + } + _setAdditionalTexts() { // Add the additional text to the filter options this.filterItems.forEach((filter, index) => { From f24ff9019287f1b0a83d543b6486e5eb4d34ed35 Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Wed, 1 Nov 2023 17:06:22 +0200 Subject: [PATCH 29/69] revert(ui5-color-palette-item): revert selected state feature (#7782) Due to lack of clear guidelines around the interaction, we currently decided to not move forward with the selected state feature in our ColorPalette's components, and revert the current implementation, until a finalized guidelines are provided in order avoid unwanted and inconsistent interaction behaviour. --- packages/main/src/ColorPalette.ts | 59 ++----------- packages/main/src/ColorPaletteItem.hbs | 2 +- packages/main/src/ColorPaletteItem.ts | 24 ------ packages/main/src/themes/ColorPaletteItem.css | 83 +------------------ .../themes/base/ColorPalette-parameters.css | 4 - .../sap_horizon/ColorPalette-parameters.css | 4 - .../ColorPalette-parameters.css | 4 - packages/main/test/pages/ColorPalette.html | 12 +-- packages/main/test/specs/ColorPalette.spec.js | 29 +------ 9 files changed, 22 insertions(+), 199 deletions(-) diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 97d743dd5e36..25594759b10f 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -162,13 +162,13 @@ class ColorPalette extends UI5Element { invalidateOnChildChange: true, individualSlots: true, }) + colors!: Array; _itemNavigation: ItemNavigation; _itemNavigationRecentColors: ItemNavigation; _recentColors: Array; moreColorsFeature?: ColorPaletteMoreColors; - _currentlySelected?: ColorPaletteItem; static i18nBundle: I18nBundle; @@ -199,8 +199,6 @@ class ColorPalette extends UI5Element { } onBeforeRendering() { - this._ensureSingleSelectionOrDeselectAll(); - this.displayedColors.forEach((item, index) => { item.index = index + 1; }); @@ -245,59 +243,25 @@ class ColorPalette extends UI5Element { }); } - /** - * Ensures that only one item is selected or only the last selected item remains active if more than one are explicitly set as 'selected'. - * - * @private - * @returns {void} - */ - _ensureSingleSelectionOrDeselectAll() { - const selectedItems = [...this.colors, ...this.recentColorsElements].filter(item => item.selected); - selectedItems.pop(); - selectedItems.forEach(item => { item.selected = false; }); - } - _onclick(e: MouseEvent) { - this.handleSelection(e.target as ColorPaletteItem); + const target = e.target as ColorPaletteItem; + if (target.hasAttribute("ui5-color-palette-item")) { + this.selectColor(target); + } } _onkeyup(e: KeyboardEvent) { const target = e.target as ColorPaletteItem; - if (isSpace(e)) { + if (isSpace(e) && target.hasAttribute("ui5-color-palette-item")) { e.preventDefault(); - this.handleSelection(target); + this.selectColor(target); } } _onkeydown(e: KeyboardEvent) { const target = e.target as ColorPaletteItem; - if (isEnter(e)) { - this.handleSelection(target); - } - } - - handleSelection(target: ColorPaletteItem) { - if (!target.hasAttribute("ui5-color-palette-item") || !target.value) { - return; - } - - if (this._currentlySelected === target) { - target.selected = !target.selected; - return; - } - - this.selectColor(target); - - // Handle selection for items within the 'recentColorsElements' - if (this.recentColorsElements.includes(target)) { - this.recentColorsElements[0].selected = true; - this.recentColorsElements[0].focus(); - this._currentlySelected = this.recentColorsElements[0]; - } else { - [...this.colors, ...this.recentColorsElements].forEach(item => { - item.selected = item === target; - }); - this._currentlySelected = target; + if (isEnter(e) && target.hasAttribute("ui5-color-palette-item")) { + this.selectColor(target); } } @@ -307,11 +271,6 @@ class ColorPalette extends UI5Element { this._onDefaultColorClick(); } - if (isSpace(e) || isEnter(e)) { - e.preventDefault(); - this._onDefaultColorClick(); - } - if (isDown(e)) { e.stopPropagation(); diff --git a/packages/main/src/ColorPaletteItem.hbs b/packages/main/src/ColorPaletteItem.hbs index 576935748692..f53050f0609a 100644 --- a/packages/main/src/ColorPaletteItem.hbs +++ b/packages/main/src/ColorPaletteItem.hbs @@ -1,5 +1,5 @@

- * Note: Only one item must be selected per ui5-color-palette. - * If more than one item is defined as selected, the last one would be considered as the selected one. - * - * @public - * @type {boolean} - * @name sap.ui.webc.main.ColorPaletteItem.prototype.selected - * @defaultvalue false - * @since 1.19.0 - */ - @property({ type: Boolean }) - selected!: boolean; - /** * Defines the tab-index of the element, helper information for the ItemNavigation. * @private @@ -124,15 +109,6 @@ class ColorPaletteItem extends UI5Element implements ITabbable { }, }; } - - get classes() { - return { - root: { - "ui5-cp-item": true, - "ui5-cp-selected": this.selected, - }, - }; - } } ColorPaletteItem.define(); diff --git a/packages/main/src/themes/ColorPaletteItem.css b/packages/main/src/themes/ColorPaletteItem.css index b3c04bff2274..70761bae5887 100644 --- a/packages/main/src/themes/ColorPaletteItem.css +++ b/packages/main/src/themes/ColorPaletteItem.css @@ -8,8 +8,7 @@ box-sizing: border-box; } -:host(:not([_disabled]):hover), -:host([selected]) { +:host(:not([_disabled]):hover) { height: var(--_ui5_color-palette-item-hover-height); width: var(--_ui5_color-palette-item-hover-height); margin: var(--_ui5_color-palette-item-hover-margin); @@ -41,28 +40,16 @@ border-radius: 0.1875rem; } -.ui5-cp-item:hover:not(:focus), -.ui5-cp-item.ui5-cp-selected { - border: 0.0625rem solid var(--sapGroup_ContentBackground); +.ui5-cp-item:hover:not(:focus) { + border: 1px solid var(--sapGroup_ContentBackground); border-radius: var(--_ui5_color-palette-item-hover-inner-border-radius); box-sizing: border-box; } -.ui5-cp-item.ui5-cp-selected:focus, -:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus, -:host(:not([_disabled])[phone]) .ui5-cp-item:focus { +:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus{ outline: none; } -:host(:not([_disabled])[phone]) .ui5-cp-item:focus { - width: 2.875rem; - height: 2.875rem; - right: 0.125rem; - bottom: 0.125rem; - box-shadow: 0 0 0 0.0625rem #FFF, 0 0 0 0.125rem var(--sapContent_ForegroundBorderColor); - border: var(--_ui5_color-palette-item-phone-selected-focus); -} - :host(:not([_disabled]):not([phone]):focus) .ui5-cp-item { pointer-events: none; } @@ -118,65 +105,3 @@ border-radius: var(--_ui5_color-palette-item-after-focus-border-radius); pointer-events: none; } - - -/* Specific styling for the selected state */ - -:host([selected]:not([_disabled]):not([phone])) .ui5-cp-item.ui5-cp-selected:focus:not(:hover)::after, -:host([selected]:not([_disabled]):not([phone])) .ui5-cp-item.ui5-cp-selected:focus:hover::after { - border: var(--_ui5_color-palette-item-selected-focused-border-after); -} - -:host([selected]:not([_disabled]):not([phone])) .ui5-cp-item.ui5-cp-selected:focus:not(:hover)::before, -:host([selected]:not([_disabled]):not([phone])) .ui5-cp-item.ui5-cp-selected:focus:hover::before { - content: ""; - box-sizing: border-box; - position: absolute; - left: var(--_ui5_color-palette-item-selected-focused-border-before); - top: var(--_ui5_color-palette-item-selected-focused-border-before); - right: var(--_ui5_color-palette-item-selected-focused-border-before); - bottom: var(--_ui5_color-palette-item-selected-focused-border-before); - border: var(--_ui5_color-palette-item-before-focus-color); - border-radius: var(--_ui5_color-palette-item-before-focus-border-radius); - pointer-events: none; -} - -/* Phone specific styles for the selected state */ - -:host([selected]:not([_disabled])[phone]) .ui5-cp-item.ui5-cp-selected:focus:not(:hover)::after, -:host([selected]:not([_disabled])[phone]) .ui5-cp-item.ui5-cp-selected:focus:hover::after { - content: ""; - box-sizing: border-box; - position: absolute; - left: var(--_ui5_color-palette-item-after-focus-offset); - top: var(--_ui5_color-palette-item-after-focus-offset); - right: var(--_ui5_color-palette-item-after-focus-offset); - bottom: var(--_ui5_color-palette-item-after-focus-offset); - border: var(--_ui5_color-palette-item-after-focus-color-phone); - border-radius: var(--_ui5_color-palette-item-after-focus-border-radius); - pointer-events: none; -} - -:host([selected]:not([_disabled])[phone]) .ui5-cp-item.ui5-cp-selected:focus:not(:hover)::before, -:host([selected]:not([_disabled])[phone]) .ui5-cp-item.ui5-cp-selected:focus:hover::before { - content: ""; - box-sizing: border-box; - position: absolute; - left: var(--_ui5_color-palette-item-selected-focused-border-before); - top: var(--_ui5_color-palette-item-selected-focused-border-before); - right: var(--_ui5_color-palette-item-selected-focused-border-before); - bottom: var(--_ui5_color-palette-item-selected-focused-border-before); - border: var(--_ui5_color-palette-item-before-focus-color); - border-radius: .1875rem; - pointer-events: none; -} - -:host([selected]:not([_disabled])[phone]) .ui5-cp-item.ui5-cp-selected:not(:focus), -:host([selected]:not([_disabled])[phone]) .ui5-cp-item.ui5-cp-selected:not(:focus):not(:hover) { - width: 2.875rem; - height: 2.875rem; - right: 0.125rem; - bottom: 0.125rem; - border: 0.0625rem solid var(--sapGroup_ContentBackground); - box-shadow: 0 0 0 0.0625rem var(--sapContent_ForegroundBorderColor); /* gap */ -} \ No newline at end of file diff --git a/packages/main/src/themes/base/ColorPalette-parameters.css b/packages/main/src/themes/base/ColorPalette-parameters.css index ec627519ba27..6297660e25ce 100644 --- a/packages/main/src/themes/base/ColorPalette-parameters.css +++ b/packages/main/src/themes/base/ColorPalette-parameters.css @@ -10,7 +10,6 @@ --_ui5_color-palette-item-before-focus-offset: 0.0625rem; --_ui5_color-palette-item-before-focus-hover-offset: 0.0625rem; --_ui5_color-palette-item-after-focus-color: 0.0625rem dotted black; - --_ui5_color-palette-item-selected-focused-border-after: var(--_ui5_color-palette-item-after-focus-color); --_ui5_color-palette-item-after-focus-offset: 0.0625rem; --_ui5_color-palette-item-after-focus-hover-offset: 0.0625rem; --_ui5_color-palette-item-before-focus-border-radius: 0; @@ -19,7 +18,4 @@ --_ui5_color-palette-item-inner-border-radius: 0.1875rem; --_ui5_color-palette-item-hover-outer-border-radius: 0.25rem; --_ui5_color-palette-item-hover-inner-border-radius: 0.1875rem; - --_ui5_color-palette-item-selected-focused-border-before: var(--_ui5_color-palette-item-before-focus-hover-offset); - --_ui5_color-palette-item-after-focus-color-phone: var(--_ui5_color-palette-item-after-focus-color); - --_ui5_color-palette-item-phone-selected-focus: none; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css index 9d5d2430da67..e7313180b6bf 100644 --- a/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css @@ -12,14 +12,10 @@ --_ui5_color-palette-item-before-focus-offset: -0.3125rem; --_ui5_color-palette-item-before-focus-hover-offset: -0.0625rem; --_ui5_color-palette-item-after-focus-color: 0.0625rem solid var(--sapContent_ContrastFocusColor); - --_ui5_color-palette-item-selected-focused-border-after: none; --_ui5_color-palette-item-after-focus-offset: -0.1875rem; --_ui5_color-palette-item-after-focus-hover-offset: 0.0625rem; --_ui5_color-palette-item-before-focus-border-radius: 0.4375rem; --_ui5_color-palette-item-after-focus-border-radius: 0.3125rem; --_ui5_color-palette-item-hover-outer-border-radius: 0.4375rem; --_ui5_color-palette-item-hover-inner-border-radius: 0.375rem; - --_ui5_color-palette-item-selected-focused-border-before: -0.1875rem; - --_ui5_color-palette-item-after-focus-color-phone: none; - --_ui5_color-palette-item-phone-selected-focus: 1px solid var(--sapGroup_ContentBackground); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css b/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css index 9d5d2430da67..e7313180b6bf 100644 --- a/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css @@ -12,14 +12,10 @@ --_ui5_color-palette-item-before-focus-offset: -0.3125rem; --_ui5_color-palette-item-before-focus-hover-offset: -0.0625rem; --_ui5_color-palette-item-after-focus-color: 0.0625rem solid var(--sapContent_ContrastFocusColor); - --_ui5_color-palette-item-selected-focused-border-after: none; --_ui5_color-palette-item-after-focus-offset: -0.1875rem; --_ui5_color-palette-item-after-focus-hover-offset: 0.0625rem; --_ui5_color-palette-item-before-focus-border-radius: 0.4375rem; --_ui5_color-palette-item-after-focus-border-radius: 0.3125rem; --_ui5_color-palette-item-hover-outer-border-radius: 0.4375rem; --_ui5_color-palette-item-hover-inner-border-radius: 0.375rem; - --_ui5_color-palette-item-selected-focused-border-before: -0.1875rem; - --_ui5_color-palette-item-after-focus-color-phone: none; - --_ui5_color-palette-item-phone-selected-focus: 1px solid var(--sapGroup_ContentBackground); } \ No newline at end of file diff --git a/packages/main/test/pages/ColorPalette.html b/packages/main/test/pages/ColorPalette.html index e547b9392b1e..cc0c81e78fc7 100644 --- a/packages/main/test/pages/ColorPalette.html +++ b/packages/main/test/pages/ColorPalette.html @@ -20,12 +20,12 @@ - - - - - - + + + + + + diff --git a/packages/main/test/specs/ColorPalette.spec.js b/packages/main/test/specs/ColorPalette.spec.js index 0495c627300a..16b7de97bac4 100644 --- a/packages/main/test/specs/ColorPalette.spec.js +++ b/packages/main/test/specs/ColorPalette.spec.js @@ -40,6 +40,8 @@ describe("ColorPalette interactions", () => { await item.keys("ArrowLeft"); await item.keys("Space"); + await colorPalette.keys("Space"); + assert.strictEqual(await colorPalette.getProperty("selectedColor"), "#ff6699", "Check if selected value is #ff6699"); }); @@ -118,31 +120,4 @@ describe("ColorPalette interactions", () => { assert.strictEqual(await colorPaletteRecentColorsWrapperEntries[3].getProperty("value"), "darkblue"); assert.strictEqual(await colorPaletteRecentColorsWrapperEntries[4].getProperty("value"), "pink"); }); - - it("Tests if selected state is properly set", async () => { - const colorPalette = await browser.$("#cp1"); - const colorPaletteEntries = await colorPalette.$$("[ui5-color-palette-item]"); - - await colorPaletteEntries[0].click(); - await colorPaletteEntries[1].click(); - await colorPaletteEntries[2].click(); - - assert.strictEqual(await colorPaletteEntries[2].getProperty("selected"), true, "Check if selected state is set"); - - await colorPaletteEntries[2].click(); - - assert.strictEqual(await colorPaletteEntries[2].getProperty("selected"), false, "Check if selected state is removed, after clicking on the same item again"); - }); - - it("Clicking on an empty color-palette-item in the Recent Colors wrapper, should not get selected", async () => { - await browser.url(`test/pages/ColorPalette.html`); - - const colorPalette = await browser.$("#cp4"); - const colorPaletteRecentColorsWrapper = await colorPalette.shadow$(".ui5-cp-recent-colors-wrapper"); - const colorPaletteRecentColorsWrapperEntries = await colorPaletteRecentColorsWrapper.$$("[ui5-color-palette-item]"); - - await colorPaletteRecentColorsWrapperEntries[0].click(); - - assert.strictEqual(await colorPaletteRecentColorsWrapperEntries[0].getProperty("selected"), false, "Check if selected state is set"); - }) }); From 0cf1201c132c993f71b14f0cd06c00300d742b0c Mon Sep 17 00:00:00 2001 From: Tsanislav Gatev Date: Thu, 2 Nov 2023 09:51:05 +0200 Subject: [PATCH 30/69] fix(ui5-button): align styles to specification (#7784) fixes: #7352 --- packages/main/src/themes/Button.css | 7 ++++++- packages/main/src/themes/base/Button-parameters.css | 1 + packages/main/src/themes/sap_belize/Button-parameters.css | 8 ++++++++ packages/main/src/themes/sap_belize/parameters-bundle.css | 2 +- .../main/src/themes/sap_fiori_3/Button-parameters.css | 2 ++ .../src/themes/sap_fiori_3_dark/Button-parameters.css | 2 ++ 6 files changed, 20 insertions(+), 2 deletions(-) create mode 100644 packages/main/src/themes/sap_belize/Button-parameters.css diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index e2ee704654be..2185879f7e73 100644 --- a/packages/main/src/themes/Button.css +++ b/packages/main/src/themes/Button.css @@ -240,10 +240,15 @@ bdi { } :host([design="Emphasized"][focused]) .ui5-button-root:after { - border-color: var(--sapContent_ContrastFocusColor); + border-color: var(--_ui5_button_emphasized_focused_border_color); outline: none; } +/* Belize related */ +:host([design="Emphasized"][focused][active]:not([non-interactive])) .ui5-button-root:after { + border-color: var(--_ui5_button_emphasized_focused_active_border_color); +} + :host([design="Transparent"]) { background-color: var(--sapButton_Lite_Background); color: var(--sapButton_Lite_TextColor); diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css index 34c916e0f2a1..5e7361eca151 100644 --- a/packages/main/src/themes/base/Button-parameters.css +++ b/packages/main/src/themes/base/Button-parameters.css @@ -20,4 +20,5 @@ --_ui5_button_fontFamily: var(--sapFontFamily); --_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor); --_ui5_button_emphasized_focused_border_before: none; + --_ui5_button_emphasized_focused_active_border_color: transparent; } diff --git a/packages/main/src/themes/sap_belize/Button-parameters.css b/packages/main/src/themes/sap_belize/Button-parameters.css new file mode 100644 index 000000000000..76665b81c327 --- /dev/null +++ b/packages/main/src/themes/sap_belize/Button-parameters.css @@ -0,0 +1,8 @@ +@import "../base/Button-parameters.css"; + +:root { + --_ui5_button_focused_border_radius: 0rem; + --_ui5_button_text_shadow: none; + --_ui5_button_emphasized_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor); +} \ 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 22b6ca623189..f2ab4d7b9082 100644 --- a/packages/main/src/themes/sap_belize/parameters-bundle.css +++ b/packages/main/src/themes/sap_belize/parameters-bundle.css @@ -3,7 +3,7 @@ @import "../base/Badge-parameters.css"; @import "./BrowserScrollbar-parameters.css"; @import "../base/BusyIndicator-parameters.css"; -@import "../base/Button-parameters.css"; +@import "./Button-parameters.css"; @import "../base/DatePicker-parameters.css"; @import "./DayPicker-parameters.css"; @import "./Dialog-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3/Button-parameters.css b/packages/main/src/themes/sap_fiori_3/Button-parameters.css index 24d38d7b9f56..1aa2e3451e1d 100644 --- a/packages/main/src/themes/sap_fiori_3/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Button-parameters.css @@ -10,4 +10,6 @@ --_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); --_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor); --_ui5_button_emphasized_outline: 1px solid var(--sapContent_FocusColor); + --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); + --_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css index 24d38d7b9f56..1aa2e3451e1d 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_dark/Button-parameters.css @@ -10,4 +10,6 @@ --_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); --_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor); --_ui5_button_emphasized_outline: 1px solid var(--sapContent_FocusColor); + --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); + --_ui5_button_emphasized_focused_active_border_color: var(--sapContent_ContrastFocusColor); } From d20c314b86bdaf6a667b01e6f8b3a4ddc194d93b Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Thu, 2 Nov 2023 08:08:48 +0000 Subject: [PATCH 31/69] chore(release): publish v1.19.0-rc.3 [ci skip] --- CHANGELOG.md | 32 ++++++++++++++++++++++ lerna.json | 2 +- packages/base/CHANGELOG.md | 16 +++++++++++ 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 | 8 ++++++ packages/localization/package.json | 6 ++-- packages/main/CHANGELOG.md | 30 ++++++++++++++++++++ packages/main/package.json | 12 ++++---- packages/playground/CHANGELOG.md | 11 ++++++++ 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 +- 24 files changed, 192 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a93aedf3c72..395889344d90 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,38 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **FormSupport:** submit linebreaks in ui5-textarea ([#7757](https://github.com/SAP/ui5-webcomponents/issues/7757)) ([425e97b](https://github.com/SAP/ui5-webcomponents/commit/425e97bd5fa030155502f3b9c7022e0e1a3d3202)), closes [#7467](https://github.com/SAP/ui5-webcomponents/issues/7467) +* **framework:** use correct customElements registry ([#7760](https://github.com/SAP/ui5-webcomponents/issues/7760)) ([288f6d4](https://github.com/SAP/ui5-webcomponents/commit/288f6d4d6cee9dccf1c64fa12b3ead2920c6c08a)) +* **ui5-button:** align styles to specification ([#7784](https://github.com/SAP/ui5-webcomponents/issues/7784)) ([0cf1201](https://github.com/SAP/ui5-webcomponents/commit/0cf1201c132c993f71b14f0cd06c00300d742b0c)), closes [#7352](https://github.com/SAP/ui5-webcomponents/issues/7352) +* **ui5-calendar:** focus date set in slot ([#7735](https://github.com/SAP/ui5-webcomponents/issues/7735)) ([842f047](https://github.com/SAP/ui5-webcomponents/commit/842f047844ac7f06716813c2fa0ebcb3ae64c9a7)), closes [#7693](https://github.com/SAP/ui5-webcomponents/issues/7693) +* **ui5-combobox:** announce value state header on focus ([#7751](https://github.com/SAP/ui5-webcomponents/issues/7751)) ([1941854](https://github.com/SAP/ui5-webcomponents/commit/194185400bb70a778359a721928ad3a99bd5f3a6)) +* **ui5-list:** removed unnecessary accessibility reading ([#7758](https://github.com/SAP/ui5-webcomponents/issues/7758)) ([2f6780f](https://github.com/SAP/ui5-webcomponents/commit/2f6780f45ee2b6c60ead36c54ae634276d959b2e)), closes [#7601](https://github.com/SAP/ui5-webcomponents/issues/7601) +* **ui5-popup:** add check for initial focused element id ([#7746](https://github.com/SAP/ui5-webcomponents/issues/7746)) ([ec80fae](https://github.com/SAP/ui5-webcomponents/commit/ec80faee410d07fa53756a8972fed29bc969c40f)), closes [#7711](https://github.com/SAP/ui5-webcomponents/issues/7711) +* **ui5-slider:** update labels on min and max change ([#7764](https://github.com/SAP/ui5-webcomponents/issues/7764)) ([14fd642](https://github.com/SAP/ui5-webcomponents/commit/14fd6423ce0ecd6d34074e81c53ff5e6bdfdf7c8)) +* **ui5-tabcontainer:** add margins for the Overflow buttons (start and end) ([#7745](https://github.com/SAP/ui5-webcomponents/issues/7745)) ([612f503](https://github.com/SAP/ui5-webcomponents/commit/612f50351afcf407a8f86457532f7da0e856d4b5)), closes [#7291](https://github.com/SAP/ui5-webcomponents/issues/7291) +* **ui5-textarea:** remove white space from value state message ([#7755](https://github.com/SAP/ui5-webcomponents/issues/7755)) ([3df7d03](https://github.com/SAP/ui5-webcomponents/commit/3df7d038e5c16d3c885bc186d0df3d37f34b2f61)) +* **ui5-textarea:** select exceeded text ([#7741](https://github.com/SAP/ui5-webcomponents/issues/7741)) ([5a510cf](https://github.com/SAP/ui5-webcomponents/commit/5a510cff52a1e8d19f38f33b4582f9555aa28527)) +* **ui5-view-settings-dialog:** improve settings management ([#7769](https://github.com/SAP/ui5-webcomponents/issues/7769)) ([33cdb86](https://github.com/SAP/ui5-webcomponents/commit/33cdb86b34a3cb6e1b849a186a8c8c1652eb5bca)), closes [#7752](https://github.com/SAP/ui5-webcomponents/issues/7752) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + +### Reverts + +* **ui5-color-palette-item:** revert selected state feature ([#7782](https://github.com/SAP/ui5-webcomponents/issues/7782)) ([f24ff90](https://github.com/SAP/ui5-webcomponents/commit/f24ff9019287f1b0a83d543b6486e5eb4d34ed35)) + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) diff --git a/lerna.json b/lerna.json index 118a377373ff..4f19f70fecd2 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index a887f39d7265..c3a57510c707 100644 --- a/packages/base/CHANGELOG.md +++ b/packages/base/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **framework:** use correct customElements registry ([#7760](https://github.com/SAP/ui5-webcomponents/issues/7760)) ([288f6d4](https://github.com/SAP/ui5-webcomponents/commit/288f6d4d6cee9dccf1c64fa12b3ead2920c6c08a)) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) diff --git a/packages/base/package.json b/packages/base/package.json index aa940e8e254a..e76279fdb441 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: webcomponents.base", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -37,7 +37,7 @@ "devDependencies": { "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.19.0-rc.2", + "@ui5/webcomponents-tools": "1.19.0-rc.3", "chromedriver": "117.0.3", "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 27261dcfbabe..889e2fc434ca 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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **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 ce6d126223c2..ff6bf947f664 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.19.0-rc.2", + "version": "1.19.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 e3c3bdb233d4..f9afe75e2cfb 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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **ui5-view-settings-dialog:** improve settings management ([#7769](https://github.com/SAP/ui5-webcomponents/issues/7769)) ([33cdb86](https://github.com/SAP/ui5-webcomponents/commit/33cdb86b34a3cb6e1b849a186a8c8c1652eb5bca)), closes [#7752](https://github.com/SAP/ui5-webcomponents/issues/7752) + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **Note:** Version bump only for package @ui5/webcomponents-fiori diff --git a/packages/fiori/package.json b/packages/fiori/package.json index c226b461405c..3c698ea4ca57 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -41,14 +41,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.19.0-rc.2", - "@ui5/webcomponents-base": "1.19.0-rc.2", - "@ui5/webcomponents-icons": "1.19.0-rc.2", - "@ui5/webcomponents-theming": "1.19.0-rc.2", + "@ui5/webcomponents": "1.19.0-rc.3", + "@ui5/webcomponents-base": "1.19.0-rc.3", + "@ui5/webcomponents-icons": "1.19.0-rc.3", + "@ui5/webcomponents-theming": "1.19.0-rc.3", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.2", + "@ui5/webcomponents-tools": "1.19.0-rc.3", "chromedriver": "117.0.3" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index c93cf40b5bd3..9fb911064b66 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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **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 7d3814a938f9..cae642217181 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.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-business-suite" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.2" + "@ui5/webcomponents-base": "1.19.0-rc.3" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.2" + "@ui5/webcomponents-tools": "1.19.0-rc.3" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index 0bb200c38bac..66a9d57b7297 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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **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 2c40cd620c70..dbb0b6ba6a8c 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-tnt" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.2" + "@ui5/webcomponents-base": "1.19.0-rc.3" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.2" + "@ui5/webcomponents-tools": "1.19.0-rc.3" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 7d4b32aad2ee..1868a7953058 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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index 1e435bc5ae75..f08dda5dc9e6 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: webcomponents.SAP-icons", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.2" + "@ui5/webcomponents-base": "1.19.0-rc.3" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.2" + "@ui5/webcomponents-tools": "1.19.0-rc.3" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index 14e46d45ae2d..23c432d96076 100644 --- a/packages/localization/CHANGELOG.md +++ b/packages/localization/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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index e8558cb66d02..5b4f0d3b5988 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "Localization for UI5 Web Components", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -29,13 +29,13 @@ }, "devDependencies": { "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.19.0-rc.2", + "@ui5/webcomponents-tools": "1.19.0-rc.3", "chromedriver": "117.0.3", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.19.0-rc.2" + "@ui5/webcomponents-base": "1.19.0-rc.3" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index 04faa8e95d82..8f71317f372f 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/CHANGELOG.md @@ -3,6 +3,36 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Bug Fixes + +* **FormSupport:** submit linebreaks in ui5-textarea ([#7757](https://github.com/SAP/ui5-webcomponents/issues/7757)) ([425e97b](https://github.com/SAP/ui5-webcomponents/commit/425e97bd5fa030155502f3b9c7022e0e1a3d3202)), closes [#7467](https://github.com/SAP/ui5-webcomponents/issues/7467) +* **ui5-button:** align styles to specification ([#7784](https://github.com/SAP/ui5-webcomponents/issues/7784)) ([0cf1201](https://github.com/SAP/ui5-webcomponents/commit/0cf1201c132c993f71b14f0cd06c00300d742b0c)), closes [#7352](https://github.com/SAP/ui5-webcomponents/issues/7352) +* **ui5-calendar:** focus date set in slot ([#7735](https://github.com/SAP/ui5-webcomponents/issues/7735)) ([842f047](https://github.com/SAP/ui5-webcomponents/commit/842f047844ac7f06716813c2fa0ebcb3ae64c9a7)), closes [#7693](https://github.com/SAP/ui5-webcomponents/issues/7693) +* **ui5-combobox:** announce value state header on focus ([#7751](https://github.com/SAP/ui5-webcomponents/issues/7751)) ([1941854](https://github.com/SAP/ui5-webcomponents/commit/194185400bb70a778359a721928ad3a99bd5f3a6)) +* **ui5-list:** removed unnecessary accessibility reading ([#7758](https://github.com/SAP/ui5-webcomponents/issues/7758)) ([2f6780f](https://github.com/SAP/ui5-webcomponents/commit/2f6780f45ee2b6c60ead36c54ae634276d959b2e)), closes [#7601](https://github.com/SAP/ui5-webcomponents/issues/7601) +* **ui5-popup:** add check for initial focused element id ([#7746](https://github.com/SAP/ui5-webcomponents/issues/7746)) ([ec80fae](https://github.com/SAP/ui5-webcomponents/commit/ec80faee410d07fa53756a8972fed29bc969c40f)), closes [#7711](https://github.com/SAP/ui5-webcomponents/issues/7711) +* **ui5-slider:** update labels on min and max change ([#7764](https://github.com/SAP/ui5-webcomponents/issues/7764)) ([14fd642](https://github.com/SAP/ui5-webcomponents/commit/14fd6423ce0ecd6d34074e81c53ff5e6bdfdf7c8)) +* **ui5-tabcontainer:** add margins for the Overflow buttons (start and end) ([#7745](https://github.com/SAP/ui5-webcomponents/issues/7745)) ([612f503](https://github.com/SAP/ui5-webcomponents/commit/612f50351afcf407a8f86457532f7da0e856d4b5)), closes [#7291](https://github.com/SAP/ui5-webcomponents/issues/7291) +* **ui5-textarea:** remove white space from value state message ([#7755](https://github.com/SAP/ui5-webcomponents/issues/7755)) ([3df7d03](https://github.com/SAP/ui5-webcomponents/commit/3df7d038e5c16d3c885bc186d0df3d37f34b2f61)) +* **ui5-textarea:** select exceeded text ([#7741](https://github.com/SAP/ui5-webcomponents/issues/7741)) ([5a510cf](https://github.com/SAP/ui5-webcomponents/commit/5a510cff52a1e8d19f38f33b4582f9555aa28527)) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + +### Reverts + +* **ui5-color-palette-item:** revert selected state feature ([#7782](https://github.com/SAP/ui5-webcomponents/issues/7782)) ([f24ff90](https://github.com/SAP/ui5-webcomponents/commit/f24ff9019287f1b0a83d543b6486e5eb4d34ed35)) + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) diff --git a/packages/main/package.json b/packages/main/package.json index 395ad1bbe46c..465ead2d6a65 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -43,13 +43,13 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.2", - "@ui5/webcomponents-icons": "1.19.0-rc.2", - "@ui5/webcomponents-localization": "1.19.0-rc.2", - "@ui5/webcomponents-theming": "1.19.0-rc.2" + "@ui5/webcomponents-base": "1.19.0-rc.3", + "@ui5/webcomponents-icons": "1.19.0-rc.3", + "@ui5/webcomponents-localization": "1.19.0-rc.3", + "@ui5/webcomponents-theming": "1.19.0-rc.3" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.2", + "@ui5/webcomponents-tools": "1.19.0-rc.3", "chromedriver": "117.0.3" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index 3aed0609c208..cebdb805aa36 100644 --- a/packages/playground/CHANGELOG.md +++ b/packages/playground/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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **Note:** Version bump only for package @ui5/webcomponents-playground diff --git a/packages/playground/package.json b/packages/playground/package.json index 535d0d067b32..abf50af0a19b 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.19.0-rc.2", + "version": "1.19.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 ed7c64d6862b..99dfca8af4d0 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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 92429bdbb1f3..07f50f149930 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: webcomponents.theming", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -30,10 +30,10 @@ }, "dependencies": { "@sap-theming/theming-base-content": "11.6.8", - "@ui5/webcomponents-base": "1.19.0-rc.2" + "@ui5/webcomponents-base": "1.19.0-rc.3" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.2", + "@ui5/webcomponents-tools": "1.19.0-rc.3", "cssnano": "^6.0.1", "globby": "^13.1.1", "json-beautify": "^1.1.1", diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md index e257d98578d8..139f0e1f472e 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.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) + + +### Features + +* **framework:** switch default theme from Quartz Light to Morning Ho… ([#7749](https://github.com/SAP/ui5-webcomponents/issues/7749)) ([10dadd7](https://github.com/SAP/ui5-webcomponents/commit/10dadd79e3a93daf29baaed3a5bcebd8c66a0940)) + + + + + # [1.19.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.1...v1.19.0-rc.2) (2023-10-26) **Note:** Version bump only for package @ui5/webcomponents-tools diff --git a/packages/tools/package.json b/packages/tools/package.json index c4f8ad3f3328..9e0dee5f0df7 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.19.0-rc.2", + "version": "1.19.0-rc.3", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From 6a8490043fb7477391e0689056856e9196c8d65f Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Thu, 2 Nov 2023 17:48:25 +0000 Subject: [PATCH 32/69] chore(release): publish v1.19.0 [ci skip] --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- packages/base/CHANGELOG.md | 8 ++++++++ packages/base/package.json | 4 ++-- packages/create-package/CHANGELOG.md | 8 ++++++++ packages/create-package/package.json | 2 +- packages/fiori/CHANGELOG.md | 8 ++++++++ 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 | 8 ++++++++ packages/localization/package.json | 6 +++--- packages/main/CHANGELOG.md | 8 ++++++++ packages/main/package.json | 12 ++++++------ packages/playground/CHANGELOG.md | 8 ++++++++ packages/playground/package.json | 2 +- packages/theming/CHANGELOG.md | 8 ++++++++ packages/theming/package.json | 6 +++--- packages/tools/CHANGELOG.md | 8 ++++++++ packages/tools/package.json | 2 +- 24 files changed, 129 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 395889344d90..d0211997ee5b 100644 --- a/CHANGELOG.md +++ b/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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package ui5-webcomponents + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) diff --git a/lerna.json b/lerna.json index 4f19f70fecd2..5d6aa2a5d997 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.19.0-rc.3", + "version": "1.19.0", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index c3a57510c707..f821abc49282 100644 --- a/packages/base/CHANGELOG.md +++ b/packages/base/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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) diff --git a/packages/base/package.json b/packages/base/package.json index e76279fdb441..3cf7f12e6fc8 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: webcomponents.base", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -37,7 +37,7 @@ "devDependencies": { "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.19.0-rc.3", + "@ui5/webcomponents-tools": "1.19.0", "chromedriver": "117.0.3", "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 889e2fc434ca..2beee3019a1b 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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) **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 ff6bf947f664..950cd9da2c44 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.19.0-rc.3", + "version": "1.19.0", "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 f9afe75e2cfb..1d0562ca2fcc 100644 --- a/packages/fiori/CHANGELOG.md +++ b/packages/fiori/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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 3c698ea4ca57..412ab794df89 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -41,14 +41,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.19.0-rc.3", - "@ui5/webcomponents-base": "1.19.0-rc.3", - "@ui5/webcomponents-icons": "1.19.0-rc.3", - "@ui5/webcomponents-theming": "1.19.0-rc.3", + "@ui5/webcomponents": "1.19.0", + "@ui5/webcomponents-base": "1.19.0", + "@ui5/webcomponents-icons": "1.19.0", + "@ui5/webcomponents-theming": "1.19.0", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.3", + "@ui5/webcomponents-tools": "1.19.0", "chromedriver": "117.0.3" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index 9fb911064b66..dfcbf22947ab 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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) **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 cae642217181..cc296ddcfc2a 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.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-business-suite" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.3" + "@ui5/webcomponents-base": "1.19.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.3" + "@ui5/webcomponents-tools": "1.19.0" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index 66a9d57b7297..c568b1e33b1a 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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) **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 dbb0b6ba6a8c..757e4a973653 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-tnt" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.3" + "@ui5/webcomponents-base": "1.19.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.3" + "@ui5/webcomponents-tools": "1.19.0" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 1868a7953058..9b7a445aead2 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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index f08dda5dc9e6..44dbf6f29942 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: webcomponents.SAP-icons", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.3" + "@ui5/webcomponents-base": "1.19.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.3" + "@ui5/webcomponents-tools": "1.19.0" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index 23c432d96076..ba0b49bb8c5b 100644 --- a/packages/localization/CHANGELOG.md +++ b/packages/localization/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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index 5b4f0d3b5988..e21c100be273 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "Localization for UI5 Web Components", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -29,13 +29,13 @@ }, "devDependencies": { "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.19.0-rc.3", + "@ui5/webcomponents-tools": "1.19.0", "chromedriver": "117.0.3", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.19.0-rc.3" + "@ui5/webcomponents-base": "1.19.0" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index 8f71317f372f..ee7e410795da 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) diff --git a/packages/main/package.json b/packages/main/package.json index 465ead2d6a65..d01287c17cab 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -43,13 +43,13 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.19.0-rc.3", - "@ui5/webcomponents-icons": "1.19.0-rc.3", - "@ui5/webcomponents-localization": "1.19.0-rc.3", - "@ui5/webcomponents-theming": "1.19.0-rc.3" + "@ui5/webcomponents-base": "1.19.0", + "@ui5/webcomponents-icons": "1.19.0", + "@ui5/webcomponents-localization": "1.19.0", + "@ui5/webcomponents-theming": "1.19.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.3", + "@ui5/webcomponents-tools": "1.19.0", "chromedriver": "117.0.3" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index cebdb805aa36..43abb2777734 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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) diff --git a/packages/playground/package.json b/packages/playground/package.json index abf50af0a19b..4be93e5d7d19 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.19.0-rc.3", + "version": "1.19.0", "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 99dfca8af4d0..932394920814 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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 07f50f149930..93118191883c 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: webcomponents.theming", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -30,10 +30,10 @@ }, "dependencies": { "@sap-theming/theming-base-content": "11.6.8", - "@ui5/webcomponents-base": "1.19.0-rc.3" + "@ui5/webcomponents-base": "1.19.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.19.0-rc.3", + "@ui5/webcomponents-tools": "1.19.0", "cssnano": "^6.0.1", "globby": "^13.1.1", "json-beautify": "^1.1.1", diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md index 139f0e1f472e..cbfe5195ae38 100644 --- a/packages/tools/CHANGELOG.md +++ b/packages/tools/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.19.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.3...v1.19.0) (2023-11-02) + +**Note:** Version bump only for package @ui5/webcomponents-tools + + + + + # [1.19.0-rc.3](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0-rc.2...v1.19.0-rc.3) (2023-11-02) diff --git a/packages/tools/package.json b/packages/tools/package.json index 9e0dee5f0df7..4378d50cf9a3 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.19.0-rc.3", + "version": "1.19.0", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From 7530f00b589d0b95dcbee49f6ed980e9d36ba58b Mon Sep 17 00:00:00 2001 From: TeodorTaushanov Date: Fri, 3 Nov 2023 13:30:19 +0200 Subject: [PATCH 33/69] feat(ui5-side-navigation): added href and target properties (#7682) * feat(ui5-sidenavigation): control refactoring --- packages/base/src/UI5Element.ts | 27 +- packages/base/src/delegate/ItemNavigation.ts | 4 +- packages/fiori/src/SideNavigation.hbs | 279 ++++++++++----- packages/fiori/src/SideNavigation.ts | 332 +++++++++++------- packages/fiori/src/SideNavigationItem.ts | 186 +++++----- packages/fiori/src/SideNavigationItemBase.ts | 237 +++++++++++++ packages/fiori/src/SideNavigationPopover.hbs | 25 +- packages/fiori/src/SideNavigationSubItem.ts | 74 +--- packages/fiori/src/themes/SideNavigation.css | 317 ++++++++++++----- .../src/themes/SideNavigationPopover.css | 8 +- .../themes/base/SideNavigation-parameters.css | 93 +++-- .../sap_horizon/SideNavigation-parameters.css | 78 ++-- .../SideNavigation-parameters.css | 78 ++-- .../SideNavigation-parameters.css | 71 ++-- .../SideNavigation-parameters.css | 71 ++-- packages/fiori/test/pages/SideNavigation.html | 16 +- .../fiori/test/pages/SideNavigationOnly.html | 15 +- .../fiori/test/specs/SideNavigation.spec.js | 205 ++++------- 18 files changed, 1367 insertions(+), 749 deletions(-) create mode 100644 packages/fiori/src/SideNavigationItemBase.ts diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index c50388e34c25..12d808983a0e 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -27,6 +27,7 @@ import preloadLinks from "./theming/preloadLinks.js"; import executeTemplate from "./renderer/executeTemplate.js"; import type { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js"; import type { PromiseResolve, ComponentStylesData, ClassMap } from "./types.js"; +import type ItemNavigation from "./delegate/ItemNavigation.js"; let autoId = 0; @@ -101,7 +102,7 @@ abstract class UI5Element extends HTMLElement { _domRefReadyPromise: Promise & { _deferredResolve?: PromiseResolve }; _doNotSyncAttributes: Set; _state: State; - _onComponentStateFinalized?: () => void; + _itemNavigations: Array; _getRealDomRef?: () => HTMLElement; staticAreaItem?: StaticAreaItem; @@ -138,6 +139,8 @@ abstract class UI5Element extends HTMLElement { this._upgradeAllProperties(); + this._itemNavigations = new Array(); + if (ctor._needsShadowDOM()) { this.attachShadow({ mode: "open" }); } @@ -672,10 +675,7 @@ abstract class UI5Element extends HTMLElement { this.onBeforeRendering(); - // Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered - if (this._onComponentStateFinalized) { - this._onComponentStateFinalized(); - } + this._onComponentStateFinalized(); // resume normal invalidation handling this._suppressInvalidation = false; @@ -852,6 +852,23 @@ abstract class UI5Element extends HTMLElement { return normalEventResult && noConflictEventResult; } + /** + * @private + */ + _addItemNavigation(itemNavigation: ItemNavigation) { + this._itemNavigations.push(itemNavigation); + } + + /** + * Intended for framework usage only. + * Currently, ItemNavigation updates tab indexes after the component has + * updated its state but before the template is rendered + * @private + * */ + _onComponentStateFinalized() { + this._itemNavigations.forEach(itemNavigation => itemNavigation._init()); + } + /** * Returns the actual children, associated with a slot. * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content. diff --git a/packages/base/src/delegate/ItemNavigation.ts b/packages/base/src/delegate/ItemNavigation.ts index c2468ceb279c..2dc0037bc604 100644 --- a/packages/base/src/delegate/ItemNavigation.ts +++ b/packages/base/src/delegate/ItemNavigation.ts @@ -102,9 +102,7 @@ class ItemNavigation { this.rootWebComponent = rootWebComponent; this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this)); - this.rootWebComponent._onComponentStateFinalized = () => { - this._init(); - }; + this.rootWebComponent._addItemNavigation(this); if (typeof options.getItemsCallback !== "function") { throw new Error("getItemsCallback is required"); diff --git a/packages/fiori/src/SideNavigation.hbs b/packages/fiori/src/SideNavigation.hbs index d01642551704..e17f9e2d2905 100644 --- a/packages/fiori/src/SideNavigation.hbs +++ b/packages/fiori/src/SideNavigation.hbs @@ -1,95 +1,51 @@ - + {{else}} +
    + {{#each items}} + {{> treeitem }} {{/each}} - +
{{/if}} -
- - {{#if fixedItems.length}} -
-
- + {{#if hasFixedItems}} + + {{#if collapsed}} + - - {{#each _fixedItems}} - - {{#unless ../collapsed}} - {{#each this.item.items}} - - - {{/each}} - {{/unless}} - + {{#each fixedItems}} + {{> treeitem }} {{/each}} - -
+ + {{/if}} {{/if}} - - {{> footer }} -
+ {{#*inline header}} {{#if showHeader}} @@ -97,4 +53,161 @@ {{/if}} {{/inline}} -{{#*inline footer}}{{/inline}} +{{#*inline menuitem}} + {{#if _href}} + + +
{{text}}
+ + {{else}} +
+ +
{{text}}
+
+ {{/if}} +{{/inline}} + +{{#*inline treeitem}} +
  • + {{#if _href}} + + {{#if icon}} + + {{/if}} +
    {{text}}
    + + {{#if items.length}} + + {{/if}} +     + {{else}} +
    + {{#if icon}} + + {{/if}} +
    {{text}}
    + + {{#if items.length}} + + {{/if}} +
    + {{/if}} + {{#if items.length}} + + {{/if}} +
    • +{{/inline}} diff --git a/packages/fiori/src/SideNavigation.ts b/packages/fiori/src/SideNavigation.ts index fd8597eff7ac..039712ccf896 100644 --- a/packages/fiori/src/SideNavigation.ts +++ b/packages/fiori/src/SideNavigation.ts @@ -7,11 +7,19 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import slot from "@ui5/webcomponents-base/dist/decorators/slot.js"; import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; -import List from "@ui5/webcomponents/dist/List.js"; -import StandardListItem from "@ui5/webcomponents/dist/StandardListItem.js"; -import Tree from "@ui5/webcomponents/dist/Tree.js"; -import TreeItem from "@ui5/webcomponents/dist/TreeItem.js"; -import type { TreeItemClickEventDetail } from "@ui5/webcomponents/dist/Tree.js"; +import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import { + isPhone, + isTablet, + isCombi, +} from "@ui5/webcomponents-base/dist/Device.js"; +import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js"; +import Icon from "@ui5/webcomponents/dist/Icon.js"; +import "@ui5/webcomponents-icons/dist/circle-task-2.js"; +import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js"; +import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js"; +import type SideNavigationItemBase from "./SideNavigationItemBase.js"; import SideNavigationItem from "./SideNavigationItem.js"; import SideNavigationSubItem from "./SideNavigationSubItem.js"; import SideNavigationTemplate from "./generated/templates/SideNavigationTemplate.lit.js"; @@ -19,38 +27,31 @@ import SideNavigationPopoverTemplate from "./generated/templates/SideNavigationP import { SIDE_NAVIGATION_POPOVER_HIDDEN_TEXT, SIDE_NAVIGATION_COLLAPSED_LIST_ARIA_ROLE_DESC, - SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC, SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC, - SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC, } from "./generated/i18n/i18n-defaults.js"; // Styles import SideNavigationCss from "./generated/themes/SideNavigation.css.js"; import SideNavigationPopoverCss from "./generated/themes/SideNavigationPopover.css.js"; +const PAGE_UP_DOWN_SIZE = 10; + type SideNavigationPopoverContents = { - mainItem: SideNavigationItem, - mainItemSelected: boolean, - selectedSubItemIndex: number, + item: SideNavigationItem, subItems: Array, }; -type TSideNavigationItem = SideNavigationItem | SideNavigationSubItem; - type SideNavigationSelectionChangeEventDetail = { - item: TSideNavigationItem; + item: SideNavigationItemBase; }; -type ItemHasAssociatedItemField = { - item: { - associatedItem: TSideNavigationItem +// used for the inner side navigation used in the SideNavigationPopoverTemplate +type PopupClickEventDetail = { + target: { + associatedItem: SideNavigationItemBase } }; -// used for the inner side navigation used in the SideNavigationPopoverTemplate -type InnerSideNavigationSelectionChangeEventDetail = SideNavigationSelectionChangeEventDetail & ItemHasAssociatedItemField; -type InnerTreeClickEventDetail = TreeItemClickEventDetail & ItemHasAssociatedItemField; - /** * @class * @@ -105,20 +106,17 @@ type InnerTreeClickEventDetail = TreeItemClickEventDetail & ItemHasAssociatedIte styles: SideNavigationCss, staticAreaStyles: SideNavigationPopoverCss, dependencies: [ - List, - StandardListItem, - Tree, - TreeItem, ResponsivePopover, SideNavigationItem, SideNavigationSubItem, + Icon, ], }) /** * Fired when the selection has changed via user interaction * * @event sap.ui.webc.fiori.SideNavigation#selection-change - * @param {sap.ui.webc.fiori.ISideNavigationItem|sap.ui.webc.fiori.ISideNavigationSubItem} item the clicked item. + * @param {sap.ui.webc.fiori.SideNavigationItemBase} item the clicked item. * @allowPreventDefault * @public */ @@ -139,19 +137,13 @@ class SideNavigation extends UI5Element { @property({ type: Boolean }) collapsed!: boolean; - /** - * @private - */ - @property({ type: Object }) - _popoverContents!: SideNavigationPopoverContents; - /** * Defines the main items of the ui5-side-navigation. Use the ui5-side-navigation-item component * for the top-level items, and the ui5-side-navigation-sub-item component for second-level items, nested * inside the items. * * @public - * @type {sap.ui.webc.fiori.ISideNavigationItem[]} + * @type {sap.ui.webc.fiori.SideNavigationItem[]} * @slot items * @name sap.ui.webc.fiori.SideNavigation.prototype.default */ @@ -180,49 +172,41 @@ class SideNavigation extends UI5Element { * Note: In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items) * * @public - * @type {sap.ui.webc.fiori.ISideNavigationItem[]} + * @type {sap.ui.webc.fiori.SideNavigationItem[]} * @slot fixedItems * @name sap.ui.webc.fiori.SideNavigation.prototype.fixedItems */ @slot({ type: HTMLElement, invalidateOnChildChange: true }) fixedItems!: Array; - static i18nBundle: I18nBundle; + /** + * @private + */ + @property({ type: Object }) + _popoverContents!: SideNavigationPopoverContents; - get _items() { - return this.items.map(this._createTreeItem); - } + @property({ type: Boolean }) + _inPopover!: boolean; - get _fixedItems() { - return this.fixedItems.map(this._createTreeItem); - } + _flexibleItemNavigation: ItemNavigation; + _fixedItemNavigation: ItemNavigation; - _createTreeItem = (item: SideNavigationItem): { item: SideNavigationItem, selected: boolean } => { - return { - item, - selected: (item.items.some(subItem => subItem.selected) && this.collapsed) || item.selected, - }; - } + static i18nBundle: I18nBundle; - _setSelectedItem(item: TSideNavigationItem) { - if (!this.fireEvent("selection-change", { item }, true)) { - return; - } + constructor() { + super(); - this._walk(current => { - current.selected = false; + this._flexibleItemNavigation = new ItemNavigation(this, { + skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items + navigationMode: NavigationMode.Vertical, + getItemsCallback: () => this.getEnabledFlexibleItems(), }); - item.selected = true; - } - _buildPopoverContent(item: SideNavigationItem) { - this._popoverContents = { - mainItem: item, - mainItemSelected: item.selected && !item.items.some(subItem => subItem.selected), - // add one as the first item is the main item - selectedSubItemIndex: item.items.findIndex(subItem => subItem.selected) + 1, - subItems: item.items, - }; + this._fixedItemNavigation = new ItemNavigation(this, { + skipItemsSize: PAGE_UP_DOWN_SIZE, // PAGE_UP and PAGE_DOWN will skip trough 10 items + navigationMode: NavigationMode.Vertical, + getItemsCallback: () => this.getEnabledFixedItems(), + }); } async _onAfterOpen() { @@ -230,8 +214,12 @@ class SideNavigation extends UI5Element { // item navigation index should be managed, because items are // dynamically recreated and tabIndexes are not updated const tree = await this.getPickerTree(); - const index = this._popoverContents.selectedSubItemIndex; - tree.focusItemByIndex(index); + const selectedItem = tree._findSelectedItem(tree.items); + if (selectedItem) { + selectedItem.focus(); + } else { + tree.items[0]?.focus(); + } } get accSideNavigationPopoverHiddenText() { @@ -247,55 +235,16 @@ class SideNavigation extends UI5Element { return SideNavigation.i18nBundle.getText(key); } - get ariaRoleDescNavigationListItem() { - let key = SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC; - if (this.collapsed) { - key = SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC; - } - - return SideNavigation.i18nBundle.getText(key); - } - - handleTreeItemClick(e: CustomEvent) { - const treeItem = e.detail.item; - const item = treeItem.associatedItem; - - if (item instanceof SideNavigationItem && !item.wholeItemToggleable) { - item.fireEvent("click"); - } else if (item instanceof SideNavigationSubItem) { - item.fireEvent("click"); - } else { - item.expanded = !item.expanded; - } - - if (item.selected && !this.collapsed) { - return; - } - - if (this.collapsed && item instanceof SideNavigationItem && item.items.length) { - this._buildPopoverContent(item); - - let tree = this._itemsTree; - if (tree !== e.target as Tree) { - tree = this._fixedItemsTree; - } - - this.openPicker(tree!._getListItemForTreeItem(treeItem)!); - } else if (!item.selected) { - this._setSelectedItem(item); - } - } - - handleInnerSelectionChange(e: CustomEvent) { - const item = e.detail.item; - const { associatedItem } = item; + handlePopupItemClick(e: PopupClickEventDetail) { + const associatedItem = e.target.associatedItem; associatedItem.fireEvent("click"); if (associatedItem.selected) { + this.closePicker(); return; } - this._setSelectedItem(associatedItem); + this._selectItem(associatedItem); this.closePicker(); } @@ -315,8 +264,7 @@ class SideNavigation extends UI5Element { async getPickerTree() { const picker = await this.getPicker(); - const sideNav = picker.querySelector("[ui5-side-navigation]")!; - return sideNav._itemsTree!; + return picker.querySelector("[ui5-side-navigation]")!; } get hasHeader() { @@ -327,30 +275,166 @@ class SideNavigation extends UI5Element { return this.hasHeader && !this.collapsed; } - get _itemsTree() { - return this.getDomRef()!.querySelector("#ui5-sn-items-tree"); + get hasFixedItems() { + return !!this.fixedItems.length; + } + + get _rootRole() { + return this._inPopover ? "none" : undefined; + } + + get classes() { + return { + root: { + "ui5-sn-phone": isPhone(), + "ui5-sn-tablet": isTablet(), + "ui5-sn-combi": isCombi(), + "ui5-sn-collapsed": this.collapsed, + "ui5-sn-in-popover": this._inPopover, + }, + }; + } + + getEnabledFixedItems() : Array { + return this.getEnabledItems(this.fixedItems); + } + + getEnabledFlexibleItems() : Array { + return this.getEnabledItems(this.items); + } + + getEnabledItems(items: Array) : Array { + let result = new Array(); + + items.forEach(item => { + if (!item.disabled) { + result.push(item); + } + + if (!this.collapsed && item.expanded) { + result = result.concat(item.items.filter(el => !el.disabled)); + } + }); + + return result; + } + + focusItem(item: SideNavigationItemBase) { + if (item.isFixedItem) { + this._fixedItemNavigation.setCurrentItem(item); + } else { + this._flexibleItemNavigation.setCurrentItem(item); + } + } + + onAfterRendering() { + const activeElement = this.shadowRoot!.activeElement; + const flexibleDom = this.shadowRoot!.querySelector(".ui5-sn-flexible")!; + if (!flexibleDom.contains(activeElement)) { + const selectedItem = this._findSelectedItem(this.items); + if (selectedItem) { + this._flexibleItemNavigation.setCurrentItem(selectedItem); + } else { + const focusedItem = this._findFocusedItem(this.items); + if (!focusedItem) { + this._flexibleItemNavigation.setCurrentItem(this.items[0]); + } + } + } + + const fixedDom = this.shadowRoot!.querySelector(".ui5-sn-fixed"); + if (!fixedDom?.contains(activeElement)) { + const selectedItem = this._findSelectedItem(this.fixedItems); + if (selectedItem) { + this._fixedItemNavigation.setCurrentItem(selectedItem); + } else { + const focusedItem = this._findFocusedItem(this.fixedItems); + if (!focusedItem) { + this._fixedItemNavigation.setCurrentItem(this.fixedItems[0]); + } + } + } } - get _fixedItemsTree() { - return this.getDomRef()!.querySelector("#ui5-sn-fixed-items-tree"); + _findFocusedItem(items: Array) : SideNavigationItemBase | undefined { + let focusedItem; + + if (this.collapsed) { + focusedItem = items.find(item => item._tabIndex === "0"); + } else { + focusedItem = this._getWithNestedItems(items, true).find(item => item._tabIndex === "0"); + } + + return focusedItem; } - _walk(callback: (current: TSideNavigationItem) => void) { - this.items.forEach(current => { - callback(current); + _getWithNestedItems(items: Array, expandedOnly = false): Array { + let result = new Array(); - current.items.forEach(currentSubitem => { - callback(currentSubitem); - }); + items.forEach(item => { + result.push(item); + + if (!expandedOnly || item.expanded) { + result = result.concat(item.items); + } }); - this.fixedItems.forEach(current => { - callback(current); + return result; + } + + _findSelectedItem(items: Array) : SideNavigationItemBase | undefined { + let selectedItem; - current.items.forEach(currentSubitem => { - callback(currentSubitem); - }); + if (this.collapsed) { + selectedItem = items.find(item => item._selected); + } else { + selectedItem = this._getWithNestedItems(items).find(current => current.selected); + } + + return selectedItem; + } + + _handleItemClick(e: KeyboardEvent | PointerEvent, item: SideNavigationItemBase) { + if (item.selected && !this.collapsed) { + item.fireEvent("click"); + return; + } + + if (this.collapsed && item instanceof SideNavigationItem && item.items.length) { + e.preventDefault(); + + this._popoverContents = { + item, + subItems: item.items, + }; + + this.openPicker(item.getFocusDomRef() as HTMLElement); + } else { + item.fireEvent("click"); + + if (!item.selected) { + this._selectItem(item); + } + } + } + + _selectItem(item: SideNavigationItemBase) { + if (item.disabled) { + return; + } + + if (!this.fireEvent("selection-change", { item }, true)) { + return; + } + + let items = this._getWithNestedItems(this.items); + items = items.concat(this._getWithNestedItems(this.fixedItems)); + + items.forEach(current => { + current.selected = false; }); + + item.selected = true; } static async onDefine() { diff --git a/packages/fiori/src/SideNavigationItem.ts b/packages/fiori/src/SideNavigationItem.ts index 4261cc080026..b9f0a5d4b97d 100644 --- a/packages/fiori/src/SideNavigationItem.ts +++ b/packages/fiori/src/SideNavigationItem.ts @@ -1,9 +1,8 @@ -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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"; -import HasPopup from "@ui5/webcomponents/dist/types/HasPopup.js"; +import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js"; +import SideNavigationItemBase from "./SideNavigationItemBase.js"; import type SideNavigation from "./SideNavigation.js"; import type SideNavigationSubItem from "./SideNavigationSubItem.js"; @@ -22,7 +21,7 @@ import type SideNavigationSubItem from "./SideNavigationSubItem.js"; * @constructor * @author SAP SE * @alias sap.ui.webc.fiori.SideNavigationItem - * @extends sap.ui.webc.base.UI5Element + * @extends sap.ui.webc.fiori.SideNavigationItemBase * @abstract * @tagname ui5-side-navigation-item * @public @@ -30,41 +29,7 @@ import type SideNavigationSubItem from "./SideNavigationSubItem.js"; * @since 1.0.0-rc.8 */ @customElement("ui5-side-navigation-item") -/** - * Fired when the component is activated either with a - * click/tap or by using the Enter or Space key. - * - * @event sap.ui.webc.fiori.SideNavigationItem#click - * @public - */ -@event("click") -class SideNavigationItem extends UI5Element { - /** - * Defines the text of the item. - * - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.text - */ - @property() - text!: string; - - /** - * Defines the icon of the item. - *

    - * - * The SAP-icons font provides numerous options. - *
    - * See all the available icons in the Icon Explorer. - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.icon - */ - @property() - icon!: string; - +class SideNavigationItem extends SideNavigationItemBase { /** * Defines if the item is expanded * @@ -76,42 +41,6 @@ class SideNavigationItem extends UI5Element { @property({ type: Boolean }) expanded!: boolean; - /** - * Defines whether the subitem is selected - * - * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.selected - */ - @property({ type: Boolean }) - selected!: boolean; - - /** - * Defines whether pressing the whole item or only pressing the icon will show/hide the items's sub items(if present). - * If set to true, pressing the whole item will toggle the sub items, and it won't fire the click event. - * By default, only pressing the arrow icon will toggle the sub items & the click event will be fired if the item is pressed outside of the icon. - * - * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.wholeItemToggleable - * @since 1.0.0-rc.11 - */ - @property({ type: Boolean }) - wholeItemToggleable!: boolean; - - /** - * Defines the tooltip of the component. - * @type {string} - * @defaultvalue "" - * @private - * @name sap.ui.webc.fiori.SideNavigationItem.prototype.title - * @since 1.0.0-rc.16 - */ - @property() - title!: string; - /** * Defines if the item should be collapsible or not. * It is true, for example, for the items inside the Popover of the Side Navigation @@ -135,17 +64,114 @@ class SideNavigationItem extends UI5Element { @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true }) items!: Array; - get _tooltip() { - return this.title || this.text; - } + /** + * Defines whether clicking the whole item or only pressing the icon will show/hide the sub items (if present). + * If set to true, clicking the whole item will toggle the sub items, and it won't fire the click event. + * By default, only clicking the arrow icon will toggle the sub items. + * + * @public + * @type {boolean} + * @defaultvalue false + * @name sap.ui.webc.fiori.SideNavigationItem.prototype.wholeItemToggleable + * @since 1.0.0-rc.11 + */ + @property({ type: Boolean }) + wholeItemToggleable!: boolean; get _ariaHasPopup() { - if ((this.parentNode as SideNavigation).collapsed && this.items.length) { - return HasPopup.Tree; + if (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) { + return "tree"; } return undefined; } + + get _groupId() { + if (!this.items.length) { + return undefined; + } + + return `${this._id}-group`; + } + + get _expanded() { + if (!this.items.length) { + return undefined; + } + + return this.expanded; + } + + get _toggleIconName() { + return this.expanded ? "navigation-down-arrow" : "navigation-right-arrow"; + } + + get classesArray() { + const classes = super.classesArray; + + if (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) { + classes.push("ui5-sn-item-with-expander"); + } + + if (this._fixed) { + classes.push("ui5-sn-item-fixed"); + } + + return classes; + } + + get _selected() { + if (this.sideNavigation?.collapsed) { + return this.selected || this.items.some(item => item.selected); + } + + return this.selected; + } + + get isFixedItem() { + return this.slot === "fixedItems"; + } + + _onToggleClick = (e: PointerEvent) => { + e.stopPropagation(); + + this.expanded = !this.expanded; + } + + _onkeydown = (e: KeyboardEvent) => { + if (isLeft(e)) { + this.expanded = false; + return; + } + + if (isRight(e)) { + this.expanded = true; + return; + } + + super._onkeydown(e); + } + + _onkeyup = (e: KeyboardEvent) => { + super._onkeyup(e); + } + + _onfocusin = (e: FocusEvent) => { + super._onfocusin(e); + } + + _onclick = (e: PointerEvent) => { + if (!this.sideNavigation?.collapsed + && this.wholeItemToggleable + && e.pointerType === "mouse") { + e.preventDefault(); + e.stopPropagation(); + this.expanded = !this.expanded; + return; + } + + super._onclick(e); + } } SideNavigationItem.define(); diff --git a/packages/fiori/src/SideNavigationItemBase.ts b/packages/fiori/src/SideNavigationItemBase.ts new file mode 100644 index 000000000000..d1d55a759469 --- /dev/null +++ b/packages/fiori/src/SideNavigationItemBase.ts @@ -0,0 +1,237 @@ +import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; +import event from "@ui5/webcomponents-base/dist/decorators/event.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js"; +import type { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js"; +import type SideNavigation from "./SideNavigation.js"; + +/** + * @class + * A class to serve as a foundation + * for the SideNavigationItem and SideNavigationSubItem classes. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webc.fiori.SideNavigationItemBase + * @extends sap.ui.webc.base.UI5Element + * @abstract + * @public + * @implements sap.ui.webc.fiori.SideNavigationItemBase + * @since 1.19.0 + */ + +/** + * Fired when the component is activated either with a + * click/tap or by using the Enter or Space key. + * + * @event sap.ui.webc.fiori.SideNavigationItemBase#click + * @public + */ +@event("click") +class SideNavigationItemBase extends UI5Element implements ITabbable { + /** + * Defines the text of the item. + * + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.text + */ + @property() + text!: string; + + /** + * Defines the icon of the item. + *

    + * + * The SAP-icons font provides numerous options. + *
    + * See all the available icons in the Icon Explorer. + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.icon + */ + @property() + icon!: string; + + /** + * Defines whether the item is selected + * + * @public + * @type {boolean} + * @defaultvalue false + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.selected + */ + @property({ type: Boolean }) + selected!: boolean; + + /** + * Defines the link target URI. Supports standard hyperlink behavior. + * If a JavaScript action should be triggered, + * this should not be set, but instead an event handler + * for the click event should be registered. + * + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.href + * @since 1.19.0 + */ + @property() + href!: string; + + /** + * Defines the component target. + *

    + * Notes: + * + *
      + *
    • _self
      • + *
    • _top
      • + *
    • _blank
      • + *
    • _parent
      • + *
    • _search
      • + *
    + * + * This property must only be used when the href property is set. + * + * @public + * @type {string} + * @defaultvalue "" + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.target + * @since 1.19.0 + */ + @property() + target!: string; + + /** + * Defines whether the component is disabled. + * A disabled component can't be pressed or + * focused, and it is not in the tab chain. + * + * @type {boolean} + * @name sap.ui.webc.main.SideNavigationItemBase.prototype.disabled + * @defaultvalue false + * @public + * @since 1.19.0 + */ + @property({ type: Boolean }) + disabled!: boolean; + + /** + * Defines the tooltip of the component. + * @type {string} + * @defaultvalue "" + * @private + * @name sap.ui.webc.fiori.SideNavigationItemBase.prototype.title + * @since 1.0.0-rc.16 + */ + @property() + title!: string; + + @property({ defaultValue: "-1", noAttribute: true }) + _tabIndex!: string; + + get _tooltip() { + return this.title || this.text; + } + + get _href() { + return (!this.disabled && this.href) ? this.href : undefined; + } + + get _target() { + return (!this.disabled && this.target) ? this.target : undefined; + } + + get _selected() { + return this.selected; + } + + get classesArray() { + const classes = []; + + if (this.disabled) { + classes.push("ui5-sn-item-disabled"); + } + + if (this._selected) { + classes.push("ui5-sn-item-selected"); + } + + return classes; + } + + get _classes() { + return this.classesArray.join(" "); + } + + get _ariaCurrent() { + if (!this.selected) { + return undefined; + } + + return "page"; + } + + get _effectiveTabIndex() { + if (this.disabled) { + return undefined; + } + + return this._tabIndex; + } + + get sideNavigation() : SideNavigation | undefined { + let parentElement = this.parentElement; + + while (parentElement) { + if (parentElement.hasAttribute("ui5-side-navigation")) { + return parentElement as SideNavigation; + } + + parentElement = parentElement.parentElement; + } + } + + getDomRef() { + return this.sideNavigation?.shadowRoot!.querySelector(`#${this._id}`) as HTMLElement; + } + + _onkeydown(e: KeyboardEvent) { + if (isSpace(e)) { + e.preventDefault(); + } + + if (isEnter(e)) { + this._activate(e); + } + } + + _onkeyup(e: KeyboardEvent) { + if (isSpace(e)) { + this._activate(e); + } + } + + _onclick(e: PointerEvent) { + this._activate(e); + } + + get isFixedItem() { + return true; + } + + _onfocusin(e: FocusEvent) { + e.stopPropagation(); + + this.sideNavigation?.focusItem(this); + } + + _activate(e: KeyboardEvent | PointerEvent) { + this.sideNavigation?._handleItemClick(e, this); + } +} + +export default SideNavigationItemBase; diff --git a/packages/fiori/src/SideNavigationPopover.hbs b/packages/fiori/src/SideNavigationPopover.hbs index c60371e6dda4..0a7747a7a232 100644 --- a/packages/fiori/src/SideNavigationPopover.hbs +++ b/packages/fiori/src/SideNavigationPopover.hbs @@ -1,30 +1,35 @@ {{accSideNavigationPopoverHiddenText}} - - {{#each _popoverContents.subItems}} {{/each}} diff --git a/packages/fiori/src/SideNavigationSubItem.ts b/packages/fiori/src/SideNavigationSubItem.ts index 5b89dc63f5f3..e25936c70197 100644 --- a/packages/fiori/src/SideNavigationSubItem.ts +++ b/packages/fiori/src/SideNavigationSubItem.ts @@ -1,7 +1,5 @@ -import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; -import event from "@ui5/webcomponents-base/dist/decorators/event.js"; -import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import SideNavigationItemBase from "./SideNavigationItemBase.js"; /** * @class @@ -25,65 +23,25 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js"; * @since 1.0.0-rc.8 */ @customElement("ui5-side-navigation-sub-item") -/** - * Fired when the component is activated either with a - * click/tap or by using the Enter or Space key. - * - * @event sap.ui.webc.fiori.SideNavigationSubItem#click - * @public - */ -@event("click") -class SideNavigationSubItem extends UI5Element { - /** - * Defines the text of the item. - * - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.text - */ - @property() - text!: string; +class SideNavigationSubItem extends SideNavigationItemBase { + get isFixedItem() { + return this.parentElement?.slot === "fixedItems"; + } - /** - * Defines whether the subitem is selected. - * - * @public - * @type {boolean} - * @defaultvalue false - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.selected - */ - @property({ type: Boolean }) - selected!: boolean; + _onkeydown = (e: KeyboardEvent) => { + super._onkeydown(e); + } - /** - * Defines the icon of the item. - *

    - * - * The SAP-icons font provides numerous options. - *
    - * See all the available icons in the Icon Explorer. - * @public - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.icon - */ - @property() - icon!: string; + _onkeyup = (e: KeyboardEvent) => { + super._onkeyup(e); + } - /** - * Defines the tooltip of the component. - * @type {string} - * @defaultvalue "" - * @name sap.ui.webc.fiori.SideNavigationSubItem.prototype.title - * @private - * @since 1.0.0-rc.16 - */ - @property() - title!: string + _onfocusin = (e: FocusEvent) => { + super._onfocusin(e); + } - get _tooltip() { - return this.title || this.text; + _onclick = (e: PointerEvent) => { + super._onclick(e); } } diff --git a/packages/fiori/src/themes/SideNavigation.css b/packages/fiori/src/themes/SideNavigation.css index 6ad93b7f1cee..bbe2d93f4a5f 100644 --- a/packages/fiori/src/themes/SideNavigation.css +++ b/packages/fiori/src/themes/SideNavigation.css @@ -1,150 +1,301 @@ :host(:not([hidden])) { display: inline-block; - width: var(--_ui5_side_navigation_width); height: 100%; - transition: width .25s; - border-radius: var(--_ui5_side_navigation_border_radius); -} - -:host([collapsed]) { - width: var(--_ui5_side_navigation_collapsed_state_width); } .ui5-sn-root { height: 100%; display: flex; flex-direction: column; + box-sizing: border-box; + font-family: "72override", var(--sapFontFamily); + font-size: var(--sapFontSize); + background: var(--sapList_Background); - border-inline-end: var(--_ui5_side_navigation_border_inline_end); - border-radius: inherit; + border-inline-end: var(--_ui5_side_navigation_border_right); box-shadow: var(--_ui5_side_navigation_box_shadow); - box-sizing: border-box; - padding: var(--_ui5_side_navigation_container_padding); + border-radius: var(--_ui5_side_navigation_border_radius); + min-width: var(--_ui5_side_navigation_width); + max-width: 100%; + width: var(--_ui5_side_navigation_width); + transition: width 0.3s, min-width 0.3s; } -:host(.ui5-side-navigation-in-popover) .ui5-sn-root { - border-inline-end: none; - padding: var(--_ui5_side_navigation_container_padding_in_popover); +:host([collapsed]) .ui5-sn-root { + min-width: var(--_ui5_side_navigation_collapsed_width); + width: var(--_ui5_side_navigation_collapsed_width); } -.ui5-sn-tree { - --_ui5-tree-toggle-box-width: var(--_ui5_side_navigation_icon_padding_inline_start); - --_ui5_list_item_icon_padding-inline-end: var(--_ui5_side_navigation_icon_padding_inline_end); - --_ui5-tree-indent-step: var(--_ui5_side_navigation_indent_step); - --_ui5-tree-toggle-icon-size: var(--_ui5_side_navigation_toggle_icon_size); - --_ui5_list_item_icon_size: var(--_ui5_side_navigation_icon_size); +.ui5-sn-root.ui5-sn-phone .ui5-sn-root, +.ui5-sn-root.ui5-sn-tablet:not(.ui5-sn-combi) .ui5-sn-root { + border-radius: var(--_ui5_side_navigation_phone_border_radius); } -:host(.ui5-side-navigation-in-popover) .ui5-sn-tree { - --_ui5-tree-indent-step: var(--_ui5_side_navigation_indent_step_in_popover); +.ui5-sn-spacer { + margin: var(--_ui5_side_navigation_navigation_separator_margin); + height: var(--_ui5_side_navigation_navigation_separator_height); + min-height: var(--_ui5_side_navigation_navigation_separator_height); + background-color: var(--_ui5_side_navigation_navigation_separator_background_color); + border-radius: var(--_ui5_side_navigation_navigation_separator_radius); } -:host(.ui5-side-navigation-in-popover) [ui5-tree-item][level="1"]::part(native-li) { - margin-block-end: var(--_ui5_side_navigation_item_level_1_margin_bottom_in_popover); +.ui5-sn-collapsed .ui5-sn-spacer { + margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed); } -.ui5-sn-items-tree { - overflow: auto; +.ui5-sn-flexible { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + position: relative; + box-sizing: border-box; } -.ui5-sn-divider { - width: 100%; - padding: var(--_ui5_side_navigation_divider_padding); - margin: var(--_ui5_side_navigation_divider_margin); - display: flex; - justify-content: center; +.ui5-sn-fixed { + position: relative; +} + +.ui5-sn-list { + margin: 0; + padding: var(--_ui5_side_navigation_padding); + list-style: none; box-sizing: border-box; + overflow: hidden auto; } -:host([collapsed]) .ui5-sn-divider { - padding: var(--_ui5_side_navigation_collapsed_state_divider_padding); +.ui5-sn-item-group { + margin: 0; + padding: 0; + list-style: none; } -.ui5-sn-divider > span { +.ui5-sn-collapsed .ui5-sn-list { + overflow: hidden auto; + display: flex; + flex-direction: column; +} + +.ui5-sn-item { + display: flex; + align-items: center; width: 100%; - height: var(--_ui5_side_navigation_divider_height); - border-radius: 0.125rem; - background: var(--_ui5_side_navigation_separator_backgound); + box-sizing: border-box; + text-decoration: none; + position: relative; + + height: var(--_ui5_side_navigation_item_height); + min-height: var(--_ui5_side_navigation_item_height); + cursor: pointer; + background-color: var(--sapList_Background); + border-radius: var(--_ui5_side_navigation_item_border_radius); + transition: var(--_ui5_side_navigation_item_transition); } -.ui5-sn-spacer { - flex: 1; - min-height: 0; +.ui5-sn-item:focus { + outline: none; +} + +.ui5-sn-item:focus::after { + border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); + position: absolute; + content: ""; + inset: var(--_ui5_side_navigation_item_focus_border_offset); + z-index: 2; + pointer-events: none; + border-radius: var(--_ui5_side_navigation_item_focus_border_radius); +} + +.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:focus::before { + border: var(--_ui5_side_navigation_selected_and_focused_border_style_color); +} + +.ui5-sn-item.ui5-sn-item-level1::before { + border: var(--_ui5_side_navigation_group_border_style_color); + border-width: var(--_ui5_side_navigation_group_border_width); } -[ui5-tree-item] { - --_ui5_list_item_title_size: var(--sapFontSize); - --ui5-listitem-padding: var(--_ui5_side_navigation_item_padding); - --ui5-listitem-focus-border-radius: var(--_ui5_side_navigation_item_border_radius); +.ui5-sn-item-level1[aria-expanded="true"]::before { + border-width: var(--_ui5_side_navigation_group_expanded_border_width); +} + +.ui5-sn-item-group .ui5-sn-list-li:last-child .ui5-sn-item.ui5-sn-item-level2:not(.ui5-sn-item-selected)::before { + border: var(--_ui5_side_navigation_group_border_style_color); + border-width: var(--_ui5_side_navigation_group_border_width); +} + + /* borders are drawn using a pseudo element. + in some themes, the border is drawn only on the bottom. + in high contrast themes the border is on all sides and there is extra border on hover */ +.ui5-sn-item::before { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; } -[ui5-tree-item]::part(toggle-icon) { - color: var(--_ui5_side_navigation_toggle_icon_color); - flex-shrink: 0; +.ui5-sn-item.ui5-sn-item-disabled { + opacity: var(--sapContent_DisabledOpacity); + cursor: default; } -[ui5-tree-item]::part(icon) { - color: var(--_ui5_side_navigation_item_icon_color); +.ui5-sn-item:not(.ui5-sn-item-disabled):hover { + background: var(--sapList_Hover_Background); } -[ui5-tree-item][level="1"]::part(title) { - font-family: var(--_ui5_side_navigation_item_level_1_font); +.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected { + background: var(--sapList_SelectionBackgroundColor); } -[ui5-tree-item]::part(native-li) { +.ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text { + color: var(--sapList_Active_TextColor); +} + +.ui5-sn-item:not(.ui5-sn-item-disabled):active [ui5-icon] { + color: var(--sapList_Active_TextColor); +} + +.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover { + background: var(--sapList_Hover_SelectionBackground); +} + +.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active, +.ui5-sn-item:not(.ui5-sn-item-disabled):active, +.ui5-sn-collapsed .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active { + background: var(--sapList_Active_Background); +} + +.ui5-sn-collapsed .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected { + background: var(--_ui5_side_navigation_collapsed_selected_item_background); +} + +.ui5-sn-item::before { + border: var(--_ui5_side_navigation_item_border_style_color); + border-width: var(--_ui5_side_navigation_item_border_width); +} + +.ui5-sn-collapsed .ui5-sn-item::before { + border-width: var(--_ui5_side_navigation_item_border_width); +} + +.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected::before { + border: var(--_ui5_side_navigation_selected_border_style_color); + border-width: var(--_ui5_side_navigation_selected_border_width); +} + +.ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before { + border: var(--_ui5_side_navigation_hover_border_style_color); + border-width: var(--_ui5_side_navigation_hover_border_width); +} + +.ui5-sn-item.ui5-sn-item-level2::before { + border: var(--_ui5_side_navigation_item_border_style_color); border-width: var(--_ui5_side_navigation_item_border_width); +} + +.ui5-sn-collapsed .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected::before { border-radius: var(--_ui5_side_navigation_item_border_radius); - --ui5-listitem-focus-offset: 0px; - --_ui5_list_item_base_height: var(--_ui5_side_navigation_item_height); - transition: var(--_ui5_side_navigation_item_transition); } -/* gap between items */ -[ui5-tree-item]::part(native-li) { - margin-block-end: var(--_ui5_side_navigation_item_gap); +.ui5-sn-root:not(.ui5-sn-collapsed) .ui5-sn-item { + margin-block-end: var(--_ui5_side_navigation_item_bottom_margin); } -[ui5-tree-item][level="1"]:last-child:not([expanded])::part(native-li) { - margin-block-end: 0; +.ui5-sn-in-popover .ui5-sn-item-group .ui5-sn-list-li:last-child .ui5-sn-item:not(:hover):not(:active)::before { + border: var(--_ui5_side_navigation_last_item_border_style); } -[ui5-tree-item][level="1"][expanded]:last-child > [ui5-tree-item][level="2"]:last-child::part(native-li) { - margin-block-end: 0; +.ui5-sn-item-icon { + color: var(--_ui5_side_navigation_icon_color); + height: var(--_ui5_side_navigation_icon_font_size); + min-width: var(--_ui5_side_navigation_group_icon_width); } -:host(.ui5-side-navigation-in-popover) { - --_ui5_side_navigation_item_gap: 0; +.ui5-sn-item-toggle-icon { + color: var(--_ui5_side_navigation_expand_icon_color); + min-width: 2rem; + height: 0.875rem; } -/* selection indicator */ -[ui5-tree-item][selected]::part(title) { - position: relative; +.ui5-sn-item-fixed .ui5-sn-item-toggle-icon { + display: none; } -[ui5-tree-item][selected]::part(title)::after { - display: var(--_ui5_side_navigation_item_selection_indicator_display); +.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item { + justify-content: center; +} + +.ui5-sn-collapsed .ui5-sn-list .ui5-sn-item-text { + display: none; +} + +.ui5-sn-item[aria-expanded=false] + .ui5-sn-item-group { + display: none; +} + +.ui5-sn-item-level2 { + padding-inline-start: var(--_ui5_side_navigation_group_icon_width); +} + +.ui5-sn-item-text { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + color: var(--sapList_TextColor); +} + +.ui5-sn-item-level1 .ui5-sn-item-text { + font-weight: var(--_ui5_side_navigation_group_text_weight); +} + +.ui5-sn-item-with-expander .ui5-sn-item-icon::after { + display: var(--_ui5_side_navigation_triangle_display); content: ""; + width: 0; + height: 0; + border-left: 0.375rem solid transparent; + border-bottom: 0.375rem solid var(--_ui5_side_navigation_triangle_color); position: absolute; - inset-block-start: 50%; - transform: translateY(-50%); - width: 0.5rem; + right: 0.1875rem; + bottom: 0.125rem; +} + +.ui5-sn-item-selection-icon { + display: none; height: 0.5rem; - background-color: var(--sapList_SelectionBorderColor); - border-radius: 50%; + width: 0.5rem; + margin-inline: 0.5rem; + color: var(--sapList_SelectionBorderColor); +} + +.ui5-sn-item[aria-expanded] .ui5-sn-item-selection-icon { + margin-inline: 0.5rem 0; +} + +.ui5-sn-root:not(.ui5-sn-collapsed) .ui5-sn-item:not([aria-expanded]) { + padding-inline-end: var(--_ui5_side_navigation_item_padding_right); +} + +.ui5-sn-item-selected .ui5-sn-item-selection-icon { + display: var(--_ui5_side_navigation_selection_indicator_display); } -[ui5-tree-item][selected][has-children]::part(title) { - padding-inline-end: var(--_ui5_side_navigation_item_selection_indicator_reserved_space_has_children); +.ui5-sn-in-popover .ui5-sn-list { + padding: var(--_ui5_side_navigation_parent_popup_padding); } -[ui5-tree-item][selected][has-children]::part(title)::after { - inset-inline-end: 0.4375rem; +.ui5-sn-in-popover .ui5-sn-item { + padding: var(--_ui5_side_navigation_popup_item_padding); + width: auto; } -[ui5-tree-item][selected]:not([has-children])::part(title) { - padding-inline-end: var(--_ui5_side_navigation_subitem_selection_indicator_reserved_space_no_children); +.ui5-sn-in-popover .ui5-sn-item-level1 { + margin-bottom: var(--_ui5_side_navigation_group_bottom_margin_in_popup); } -[ui5-tree-item][selected]:not([has-children])::part(title)::after { - inset-inline-end: 0; +.ui5-sn-in-popover .ui5-sn-item-level1 .ui5-sn-item-text { + margin: 0 1rem 0 0; + font-size: var(--_ui5_side_navigation_popup_title_text_size); + line-height: var(--_ui5_side_navigation_popup_title_line_height); } \ No newline at end of file diff --git a/packages/fiori/src/themes/SideNavigationPopover.css b/packages/fiori/src/themes/SideNavigationPopover.css index 311d49ed89de..58cfc89b27e4 100644 --- a/packages/fiori/src/themes/SideNavigationPopover.css +++ b/packages/fiori/src/themes/SideNavigationPopover.css @@ -1,7 +1,7 @@ @import "./InvisibleTextStyles.css"; .ui5-side-navigation-popover { - --_ui5_popover_box_shadow: var(--_ui5_side_navigation_popover_box_shadow); + --_ui5_popover_box_shadow: var(--_ui5_side_navigation_popup_box_shadow); } .ui5-side-navigation-popover::part(content) { @@ -17,9 +17,3 @@ pointer-events: none; font-size: 0; } - -.ui5-side-navigation-in-popover { - --_ui5-tree-toggle-box-width: 1rem; - --_ui5-tree-indent-step: 0; - width: auto; -} diff --git a/packages/fiori/src/themes/base/SideNavigation-parameters.css b/packages/fiori/src/themes/base/SideNavigation-parameters.css index 58a58b86d175..95fe7f3aa174 100644 --- a/packages/fiori/src/themes/base/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/base/SideNavigation-parameters.css @@ -2,35 +2,72 @@ :root { --_ui5_side_navigation_width: 15rem; - --_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0); - --_ui5_side_navigation_popover_box_shadow: var(--_ui5_popover_box_shadow); - --_ui5_side_navigation_separator_backgound: var(--sapList_GroupHeaderBorderColor); - --_ui5_side_navigation_item_icon_color: var(--sapContent_IconColor); - --_ui5_side_navigation_icon_size: 1.125rem; - --_ui5_side_navigation_toggle_icon_color: var(--sapContent_NonInteractiveIconColor); - --_ui5_side_navigation_toggle_icon_size: 1rem; - --_ui5_side_navigation_collapsed_state_width: 3.25rem; - --_ui5_side_navigation_indent_step: 1.25rem; - --_ui5_side_navigation_indent_step_in_popover: 1.25rem; - --_ui5_side_navigation_icon_padding_inline_start: 1.125rem; - --_ui5_side_navigation_icon_padding_inline_end: 0.5rem; - --_ui5_side_navigation_collapsed_state_divider_padding: 0 0.5rem; - --_ui5_side_navigation_divider_padding: 0 1rem; - --_ui5_side_navigation_divider_height: 0.125rem; - --_ui5_side_navigation_divider_margin: 0.25rem 0; - --_ui5_side_navigation_border_inline_end: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); + --_ui5_side_navigation_collapsed_width: 3rem; + + --_ui5_side_navigation_navigation_separator_margin: 0.25rem 0.875rem 0.25rem 0.875rem; + --_ui5_side_navigation_navigation_separator_margin_collapsed: 0.25rem 0.5rem 0.25rem 0.5rem; + --_ui5_side_navigation_navigation_separator_background_color: var(--sapList_GroupHeaderBorderColor); + --_ui5_side_navigation_navigation_separator_radius: unset; + --_ui5_side_navigation_navigation_separator_height: calc(2 * var(--sapList_BorderWidth)); + --_ui5_side_navigation_triangle_color: var(--sapContent_IconColor); + --_ui5_side_navigation_border_right: 1px solid var(--sapGroup_ContentBorderColor); --_ui5_side_navigation_border_radius: 0; - --_ui5_side_navigation_container_padding: 0; - --_ui5_side_navigation_container_padding_in_popover: 0.5rem; - --_ui5_side_navigation_item_padding: 0 1rem; - --_ui5_side_navigation_item_gap: 0; - --_ui5_side_navigation_item_border_width: 0.0625rem; - --_ui5_side_navigation_item_border_radius: 0; + --_ui5_side_navigation_phone_border_radius: 0; + --_ui5_side_navigation_box_shadow: none; + --_ui5_side_navigation_triangle_display: block; + --_ui5_side_navigation_phone_width: var(--_ui5_side_navigation_width); + + + --_ui5_side_navigation_icon_color: var(--sapContent_IconColor); + --_ui5_side_navigation_icon_font_size: 1rem; + --_ui5_side_navigation_expand_icon_color: var(--sapContent_IconColor); + --_ui5_side_navigation_hover_border_style_color: none; + --_ui5_side_navigation_hover_border_width: 0; + --_ui5_side_navigation_group_border_style_color: solid var(--sapList_BorderColor); + --_ui5_side_navigation_group_border_width: 0 0 0.0625rem 0; + --_ui5_side_navigation_item_border_style_color: none; + --_ui5_side_navigation_item_border_width: 0; --_ui5_side_navigation_item_height: 2.75rem; - --_ui5_side_navigation_item_level_1_font: "72override", var(--sapFontFamily); - --_ui5_side_navigation_item_level_1_margin_bottom_in_popover: 0; + --_ui5_side_navigation_last_item_border_style_color: none; + --_ui5_side_navigation_item_border_radius: 0; + --_ui5_side_navigation_item_bottom_margin: 0; + --_ui5_side_navigation_item_bottom_margin_compact: 0; --_ui5_side_navigation_item_transition: none; - --_ui5_side_navigation_item_selection_indicator_display: none; - --_ui5_side_navigation_item_selection_indicator_reserved_space_has_children: 0; - --_ui5_side_navigation_subitem_selection_indicator_reserved_space_no_children: 0; + --_ui5_side_navigation_item_padding_right: 0.5rem; + --_ui5_side_navigation_no_icons_group_padding: 1rem; + --_ui5_side_navigation_no_icons_nested_item_padding: 1rem; + --_ui5_side_navigation_item_focus_border_offset: 1px; + --_ui5_side_navigation_item_focus_border_radius: var(--_ui5_side_navigation_item_border_radius); + --_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 100% 0.0625rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); + --_ui5_side_navigation_selected_item_border_color: var(--sapList_SelectionBorderColor); + --_ui5_side_navigation_selected_border_style_color: solid var(--_ui5_side_navigation_selected_item_border_color); + --_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color); + --_ui5_side_navigation_selected_border_width: 0 0 0.0625rem 0; + --_ui5_side_navigation_collapsed_selected_item_border_style_color: solid var(--_ui5_side_navigation_selected_item_border_color); + --_ui5_side_navigation_collapsed_selected_group_border_color: var(--_ui5_side_navigation_selected_item_border_color); + --_ui5_side_navigation_group_expanded_border_width: 0; + --_ui5_side_navigation_group_icon_width: var(--_ui5_side_navigation_collapsed_width); + --_ui5_side_navigation_group_bottom_border_color: var(--sapList_BorderColor); + --_ui5_side_navigation_group_text_weight: unset; + --_ui5_side_navigation_group_bottom_margin_in_popup: 0; + --_ui5_side_navigation_padding: 0; + --_ui5_side_navigation_padding_compact: 0; + --_ui5_side_navigation_parent_popup_padding: 0; + --_ui5_side_navigation_parent_popup_border_radius: var(--sapPopover_BorderCornerRadius); + --_ui5_side_navigation_popup_item_padding: 0 1rem; + --_ui5_side_navigation_popup_icon_width: 1rem; + --_ui5_side_navigation_popup_box_shadow: var(--sapContent_Shadow2); + --_ui5_side_navigation_popup_arrow_box_shadow: var(--sapContent_Shadow2); + --_ui5_side_navigation_popup_title_text_size: var(--sapFontSize); + --_ui5_side_navigation_popup_title_line_height: normal; + --_ui5_side_navigation_selection_indicator_display: none; +} + +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed); + --_ui5_side_navigation_padding: var(--_ui5_side_navigation_padding_compact); + --_ui5_side_navigation_item_bottom_margin: var(--_ui5_side_navigation_item_bottom_margin_compact); + --_ui5_side_navigation_item_height: 2rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css index af44e8bb2346..a7023453f455 100644 --- a/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/SideNavigation-parameters.css @@ -2,47 +2,61 @@ :root { --_ui5_side_navigation_width: 16rem; + --_ui5_side_navigation_collapsed_width: 3.5rem; + + --_ui5_side_navigation_navigation_separator_margin: 0.5rem; + --_ui5_side_navigation_navigation_separator_margin_collapsed: 0.5rem; + --_ui5_side_navigation_navigation_separator_background_color: var(--sapToolbar_SeparatorColor); + --_ui5_side_navigation_navigation_separator_radius: 0.125rem; + --_ui5_side_navigation_navigation_separator_height: 0.0625rem; + --_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor); + --_ui5_side_navigation_border_right: 0; + --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; + --_ui5_side_navigation_phone_border_radius: 0.5rem; --_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); - --_ui5_side_navigation_popover_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 48%, transparent); - --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_popover_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); - --_ui5_side_navigation_separator_backgound: var(--sapToolbar_SeparatorColor); - --_ui5_side_navigation_item_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_icon_size: 1rem; - --_ui5_side_navigation_toggle_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_toggle_icon_size: 0.75rem; - --_ui5_side_navigation_collapsed_state_width: 3.5rem; - --_ui5_side_navigation_indent_step: 1.5rem; - --_ui5_side_navigation_indent_step_in_popover: 0; - --_ui5_side_navigation_icon_padding_inline_start: 0.5rem; - --_ui5_side_navigation_icon_padding_inline_end: 0.4375rem; - --_ui5_side_navigation_collapsed_state_divider_padding: var(--_ui5_side_navigation_divider_padding); - --_ui5_side_navigation_divider_padding: 0.3125rem 0; - --_ui5_side_navigation_divider_height: 0.0625rem; - --_ui5_side_navigation_divider_margin: 0.5rem 0; - --_ui5_side_navigation_border_inline_end: 0; - --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; - --_ui5_side_navigation_container_padding: 0.5rem; - --_ui5_side_navigation_container_padding_in_popover: 0.75rem; - --_ui5_side_navigation_item_padding: 0 0.5rem; - --_ui5_side_navigation_item_gap: 0.125rem; - --_ui5_side_navigation_item_border_width: 0; - --_ui5_side_navigation_item_border_radius: 0.375rem; + --_ui5_side_navigation_triangle_display: none; + --_ui5_side_navigation_phone_width: 100%; + + --_ui5_side_navigation_icon_color: var(--sapList_TextColor); + --_ui5_side_navigation_icon_font_size: 1.125rem; + --_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor); + --_ui5_side_navigation_group_border_style_color: none; --_ui5_side_navigation_item_height: 2.5rem; - --_ui5_side_navigation_item_level_1_font: "72override", var(--sapFontBoldFamily); - --_ui5_side_navigation_item_level_1_margin_bottom_in_popover: 0.75rem; + --_ui5_side_navigation_item_border_radius: 0.375rem; + --_ui5_side_navigation_item_bottom_margin: 0.25rem; + --_ui5_side_navigation_item_bottom_margin_compact: 0.5rem; --_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out; - --_ui5_side_navigation_item_selection_indicator_display: initial; - --_ui5_side_navigation_item_selection_indicator_reserved_space_has_children: 1.375rem; - --_ui5_side_navigation_subitem_selection_indicator_reserved_space_no_children: 1rem; + --_ui5_side_navigation_item_padding_right: 0; + --_ui5_side_navigation_no_icons_nested_item_padding: 2rem; + --_ui5_side_navigation_item_focus_border_offset: calc(-1 * var(--sapContent_FocusWidth)); + --_ui5_side_navigation_item_focus_border_radius: calc(var(--_ui5_side_navigation_item_border_radius) + var(--sapContent_FocusWidth)); + --_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor)), var(--sapList_SelectionBackgroundColor); + --_ui5_side_navigation_selected_border_style_color: none; + --_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color); + --_ui5_side_navigation_group_icon_width: 2rem; + --_ui5_side_navigation_group_text_weight: bold; + --_ui5_side_navigation_group_bottom_margin_in_popup: 0.75rem; + --_ui5_side_navigation_padding: 0.5rem; + --_ui5_side_navigation_padding_compact: 1.5rem 0.75rem 0.75rem 0.75rem; + --_ui5_side_navigation_parent_popup_padding: 0.75rem; + --_ui5_side_navigation_parent_popup_border_radius: 0.75rem; + --_ui5_side_navigation_popup_item_padding: 0 0.5rem; + --_ui5_side_navigation_popup_icon_width: 0.5rem; + --_ui5_side_navigation_popup_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 48%, transparent); + --_ui5_side_navigation_popup_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_side_navigation_popup_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_popup_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popup_shadow_color2); + --_ui5_side_navigation_popup_title_text_size: 1.25rem; + --_ui5_side_navigation_popup_title_line_height: 1.5rem; + --_ui5_side_navigation_selection_indicator_display: inline-block; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_side_navigation_container_padding: 1.5rem 0.75rem 0.75rem 0.75rem; - --_ui5_side_navigation_item_gap: 0.5rem; + --_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed); + --_ui5_side_navigation_padding: var(--_ui5_side_navigation_padding_compact); + --_ui5_side_navigation_item_bottom_margin: var(--_ui5_side_navigation_item_bottom_margin_compact); --_ui5_side_navigation_item_height: 2rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css index 0b6a73e2736e..ea171f417874 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/SideNavigation-parameters.css @@ -2,47 +2,61 @@ :root { --_ui5_side_navigation_width: 16rem; + --_ui5_side_navigation_collapsed_width: 3.5rem; + + --_ui5_side_navigation_navigation_separator_margin: 0.5rem; + --_ui5_side_navigation_navigation_separator_margin_collapsed: 0.5rem; + --_ui5_side_navigation_navigation_separator_background_color: var(--sapToolbar_SeparatorColor); + --_ui5_side_navigation_navigation_separator_radius: 0.125rem; + --_ui5_side_navigation_navigation_separator_height: 0.0625rem; + --_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor); + --_ui5_side_navigation_border_right: 0; + --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; + --_ui5_side_navigation_phone_border_radius: 0.5rem; --_ui5_side_navigation_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 32%, transparent); --_ui5_side_navigation_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); - --_ui5_side_navigation_popover_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 48%, transparent); - --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 64%, transparent); - --_ui5_side_navigation_popover_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); - --_ui5_side_navigation_separator_backgound: var(--sapToolbar_SeparatorColor); - --_ui5_side_navigation_item_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_icon_size: 1rem; - --_ui5_side_navigation_toggle_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_toggle_icon_size: 0.75rem; - --_ui5_side_navigation_collapsed_state_width: 3.5rem; - --_ui5_side_navigation_indent_step: 1.5rem; - --_ui5_side_navigation_indent_step_in_popover: 0; - --_ui5_side_navigation_icon_padding_inline_start: 0.5rem; - --_ui5_side_navigation_icon_padding_inline_end: 0.4375rem; - --_ui5_side_navigation_collapsed_state_divider_padding: var(--_ui5_side_navigation_divider_padding); - --_ui5_side_navigation_divider_padding: 0.3125rem 0; - --_ui5_side_navigation_divider_height: 0.0625rem; - --_ui5_side_navigation_divider_margin: 0.5rem 0; - --_ui5_side_navigation_border_inline_end: 0; - --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; - --_ui5_side_navigation_container_padding: 0.5rem; - --_ui5_side_navigation_container_padding_in_popover: 0.75rem; - --_ui5_side_navigation_item_padding: 0 0.5rem; - --_ui5_side_navigation_item_gap: 0.125rem; - --_ui5_side_navigation_item_border_width: 0; - --_ui5_side_navigation_item_border_radius: 0.375rem; + --_ui5_side_navigation_triangle_display: none; + --_ui5_side_navigation_phone_width: 100%; + + --_ui5_side_navigation_icon_color: var(--sapList_TextColor); + --_ui5_side_navigation_icon_font_size: 1.125rem; + --_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor); + --_ui5_side_navigation_group_border_style_color: none; --_ui5_side_navigation_item_height: 2.5rem; - --_ui5_side_navigation_item_level_1_font: "72override", var(--sapFontBoldFamily); - --_ui5_side_navigation_item_level_1_margin_bottom_in_popover: 0.75rem; + --_ui5_side_navigation_item_border_radius: 0.375rem; + --_ui5_side_navigation_item_bottom_margin: 0.25rem; + --_ui5_side_navigation_item_bottom_margin_compact: 0.5rem; --_ui5_side_navigation_item_transition: background-color 0.3s ease-in-out; - --_ui5_side_navigation_item_selection_indicator_display: initial; - --_ui5_side_navigation_item_selection_indicator_reserved_space_has_children: 1.375rem; - --_ui5_side_navigation_subitem_selection_indicator_reserved_space_no_children: 1rem; + --_ui5_side_navigation_item_padding_right: 0; + --_ui5_side_navigation_no_icons_nested_item_padding: 2rem; + --_ui5_side_navigation_item_focus_border_offset: calc(-1 * var(--sapContent_FocusWidth)); + --_ui5_side_navigation_item_focus_border_radius: calc(var(--_ui5_side_navigation_item_border_radius) + var(--sapContent_FocusWidth)); + --_ui5_side_navigation_collapsed_selected_item_background: 0 100% / 100% 0.125rem no-repeat linear-gradient(0deg, var(--sapList_SelectionBorderColor), var(--sapList_SelectionBorderColor), var(--sapList_SelectionBackgroundColor)); + --_ui5_side_navigation_selected_border_style_color: none; + --_ui5_side_navigation_selected_and_focused_border_style_color: var(--_ui5_side_navigation_selected_border_style_color); + --_ui5_side_navigation_group_icon_width: 2rem; + --_ui5_side_navigation_group_text_weight: bold; + --_ui5_side_navigation_group_bottom_margin_in_popup: 0.75rem; + --_ui5_side_navigation_padding: 0.5rem; + --_ui5_side_navigation_padding_compact: 1.5rem 0.75rem 0.75rem 0.75rem; + --_ui5_side_navigation_parent_popup_padding: 0.75rem; + --_ui5_side_navigation_parent_popup_border_radius: 0.75rem; + --_ui5_side_navigation_popup_item_padding: 0 0.5rem; + --_ui5_side_navigation_popup_icon_width: 0.5rem; + --_ui5_side_navigation_popup_shadow_color1: color-mix(in srgb, var(--sapContent_ShadowColor) 48%, transparent); + --_ui5_side_navigation_popup_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 64%, transparent); + --_ui5_side_navigation_popup_box_shadow: 0 0 0.125rem 0 var(--_ui5_side_navigation_popup_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popup_shadow_color2); + --_ui5_side_navigation_popup_title_text_size: 1.25rem; + --_ui5_side_navigation_popup_title_line_height: 1.5rem; + --_ui5_side_navigation_selection_indicator_display: inline-block; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_side_navigation_container_padding: 1.5rem 0.75rem 0.75rem 0.75rem; - --_ui5_side_navigation_item_gap: 0.5rem; + --_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed); + --_ui5_side_navigation_padding: var(--_ui5_side_navigation_padding_compact); + --_ui5_side_navigation_item_bottom_margin: var(--_ui5_side_navigation_item_bottom_margin_compact); --_ui5_side_navigation_item_height: 2rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css index 798dae9a2175..97babcad2c8e 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/SideNavigation-parameters.css @@ -2,47 +2,56 @@ :root { --_ui5_side_navigation_width: 16rem; + --_ui5_side_navigation_collapsed_width: 3.5rem; + + --_ui5_side_navigation_navigation_separator_height: 0.0625rem; + --_ui5_side_navigation_border_right: 0; + --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; + --_ui5_side_navigation_phone_border_radius: 0.5rem; --_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor); --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); - --_ui5_side_navigation_popover_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_popover_box_shadow:0 0 0 0.0625rem var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); - --_ui5_side_navigation_separator_backgound: var(--sapToolbar_SeparatorColor); - --_ui5_side_navigation_item_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_icon_size: 1rem; - --_ui5_side_navigation_toggle_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_toggle_icon_size: 0.75rem; - --_ui5_side_navigation_collapsed_state_width: 3.5rem; - --_ui5_side_navigation_indent_step: 1.5rem; - --_ui5_side_navigation_indent_step_in_popover: 0; - --_ui5_side_navigation_icon_padding_inline_start: 0.5rem; - --_ui5_side_navigation_icon_padding_inline_end: 0.4375rem; - --_ui5_side_navigation_collapsed_state_divider_padding: var(--_ui5_side_navigation_divider_padding); - --_ui5_side_navigation_divider_padding: 0.3125rem 0; - --_ui5_side_navigation_divider_height: 0.0625rem; - --_ui5_side_navigation_divider_margin: 0.5rem 0; - --_ui5_side_navigation_border_inline_end: 0; - --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; - --_ui5_side_navigation_container_padding: 0.5rem; - --_ui5_side_navigation_container_padding_in_popover: 0.75rem; - --_ui5_side_navigation_item_padding: 0 0.5rem; - --_ui5_side_navigation_item_gap: 0.125rem; + --_ui5_side_navigation_triangle_display: none; + --_ui5_side_navigation_phone_width: 100% !important; + --_ui5_side_navigation_icon_font_size: 1.125rem; + --_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor); --_ui5_side_navigation_item_height: 2.5rem; - --_ui5_side_navigation_item_level_1_font: "72override", var(--sapFontBoldFamily); - --_ui5_side_navigation_item_level_1_margin_bottom_in_popover: 0.75rem; - - --_ui5_side_navigation_item_selection_indicator_display: initial; - --_ui5_side_navigation_item_selection_indicator_reserved_space_has_children: 1.375rem; - --_ui5_side_navigation_subitem_selection_indicator_reserved_space_no_children: 1rem; + --_ui5_side_navigation_item_bottom_margin: 0.25rem; + --_ui5_side_navigation_item_bottom_margin_compact: 0.5rem; + --_ui5_side_navigation_item_focus_border_offset: 0; + --_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor); + --_ui5_side_navigation_item_border_width: 0 0 0.0625rem 0; + --_ui5_side_navigation_item_padding_right: 0; + --_ui5_side_navigation_group_expanded_border_width: var(--_ui5_side_navigation_item_border_width); + --_ui5_side_navigation_last_item_border_style: solid transparent; + --_ui5_side_navigation_hover_border_style_color: solid var(--sapList_SelectionBorderColor); + --_ui5_side_navigation_hover_border_width: 0.0625rem; + --_ui5_side_navigation_selected_border_width: 0.0625rem; + --_ui5_side_navigation_collapsed_selected_item_background: var(--sapList_SelectionBackgroundColor); + --_ui5_side_navigation_selected_and_focused_border_style_color: none; + --_ui5_side_navigation_group_icon_width: 2rem; + --_ui5_side_navigation_group_text_weight: bold; + --_ui5_side_navigation_padding: 0.5rem; + --_ui5_side_navigation_padding_compact: 1.5rem 0.75rem 0.75rem 0.75rem; + --_ui5_side_navigation_parent_popup_padding: 0.5rem; + --_ui5_side_navigation_parent_popup_border_radius: 0.75rem; + --_ui5_side_navigation_popup_item_padding: 0 0.5rem; + --_ui5_side_navigation_popup_icon_width: 0.5rem; + --_ui5_side_navigation_popup_shadow_color1: var(--sapContent_ShadowColor); + --_ui5_side_navigation_popup_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_side_navigation_popup_box_shadow:0 0 0 0.0625rem var(--_ui5_side_navigation_popup_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popup_shadow_color2); + --_ui5_side_navigation_popup_title_text_size: 1.25rem; + --_ui5_side_navigation_popup_title_line_height: 1.5rem; + --_ui5_side_navigation_selection_indicator_display: block; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_side_navigation_container_padding: 1.5rem 0.75rem 0.75rem 0.75rem; - --_ui5_side_navigation_item_gap: 0.5rem; + --_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed); + --_ui5_side_navigation_padding: var(--_ui5_side_navigation_padding_compact); + --_ui5_side_navigation_item_bottom_margin: var(--_ui5_side_navigation_item_bottom_margin_compact); --_ui5_side_navigation_item_height: 2rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css index 798dae9a2175..97babcad2c8e 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/SideNavigation-parameters.css @@ -2,47 +2,56 @@ :root { --_ui5_side_navigation_width: 16rem; + --_ui5_side_navigation_collapsed_width: 3.5rem; + + --_ui5_side_navigation_navigation_separator_height: 0.0625rem; + --_ui5_side_navigation_border_right: 0; + --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; + --_ui5_side_navigation_phone_border_radius: 0.5rem; --_ui5_side_navigation_shadow_color1: var(--sapContent_ShadowColor); --_ui5_side_navigation_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); --_ui5_side_navigation_box_shadow: 0 0 0 0.0625rem var(--_ui5_side_navigation_shadow_color1), 0 0.5rem 1rem 0 var(--_ui5_side_navigation_shadow_color2); - --_ui5_side_navigation_popover_shadow_color1: var(--sapContent_ShadowColor); - --_ui5_side_navigation_popover_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); - --_ui5_side_navigation_popover_box_shadow:0 0 0 0.0625rem var(--_ui5_side_navigation_popover_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popover_shadow_color2); - --_ui5_side_navigation_separator_backgound: var(--sapToolbar_SeparatorColor); - --_ui5_side_navigation_item_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_icon_size: 1rem; - --_ui5_side_navigation_toggle_icon_color: var(--sapList_TextColor); - --_ui5_side_navigation_toggle_icon_size: 0.75rem; - --_ui5_side_navigation_collapsed_state_width: 3.5rem; - --_ui5_side_navigation_indent_step: 1.5rem; - --_ui5_side_navigation_indent_step_in_popover: 0; - --_ui5_side_navigation_icon_padding_inline_start: 0.5rem; - --_ui5_side_navigation_icon_padding_inline_end: 0.4375rem; - --_ui5_side_navigation_collapsed_state_divider_padding: var(--_ui5_side_navigation_divider_padding); - --_ui5_side_navigation_divider_padding: 0.3125rem 0; - --_ui5_side_navigation_divider_height: 0.0625rem; - --_ui5_side_navigation_divider_margin: 0.5rem 0; - --_ui5_side_navigation_border_inline_end: 0; - --_ui5_side_navigation_border_radius: 0.5rem 0.5rem 0 0; - --_ui5_side_navigation_container_padding: 0.5rem; - --_ui5_side_navigation_container_padding_in_popover: 0.75rem; - --_ui5_side_navigation_item_padding: 0 0.5rem; - --_ui5_side_navigation_item_gap: 0.125rem; + --_ui5_side_navigation_triangle_display: none; + --_ui5_side_navigation_phone_width: 100% !important; + --_ui5_side_navigation_icon_font_size: 1.125rem; + --_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor); --_ui5_side_navigation_item_height: 2.5rem; - --_ui5_side_navigation_item_level_1_font: "72override", var(--sapFontBoldFamily); - --_ui5_side_navigation_item_level_1_margin_bottom_in_popover: 0.75rem; - - --_ui5_side_navigation_item_selection_indicator_display: initial; - --_ui5_side_navigation_item_selection_indicator_reserved_space_has_children: 1.375rem; - --_ui5_side_navigation_subitem_selection_indicator_reserved_space_no_children: 1rem; + --_ui5_side_navigation_item_bottom_margin: 0.25rem; + --_ui5_side_navigation_item_bottom_margin_compact: 0.5rem; + --_ui5_side_navigation_item_focus_border_offset: 0; + --_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor); + --_ui5_side_navigation_item_border_width: 0 0 0.0625rem 0; + --_ui5_side_navigation_item_padding_right: 0; + --_ui5_side_navigation_group_expanded_border_width: var(--_ui5_side_navigation_item_border_width); + --_ui5_side_navigation_last_item_border_style: solid transparent; + --_ui5_side_navigation_hover_border_style_color: solid var(--sapList_SelectionBorderColor); + --_ui5_side_navigation_hover_border_width: 0.0625rem; + --_ui5_side_navigation_selected_border_width: 0.0625rem; + --_ui5_side_navigation_collapsed_selected_item_background: var(--sapList_SelectionBackgroundColor); + --_ui5_side_navigation_selected_and_focused_border_style_color: none; + --_ui5_side_navigation_group_icon_width: 2rem; + --_ui5_side_navigation_group_text_weight: bold; + --_ui5_side_navigation_padding: 0.5rem; + --_ui5_side_navigation_padding_compact: 1.5rem 0.75rem 0.75rem 0.75rem; + --_ui5_side_navigation_parent_popup_padding: 0.5rem; + --_ui5_side_navigation_parent_popup_border_radius: 0.75rem; + --_ui5_side_navigation_popup_item_padding: 0 0.5rem; + --_ui5_side_navigation_popup_icon_width: 0.5rem; + --_ui5_side_navigation_popup_shadow_color1: var(--sapContent_ShadowColor); + --_ui5_side_navigation_popup_shadow_color2: color-mix(in srgb, var(--sapContent_ShadowColor) 16%, transparent); + --_ui5_side_navigation_popup_box_shadow:0 0 0 0.0625rem var(--_ui5_side_navigation_popup_shadow_color1), 0 1rem 2rem 0 var(--_ui5_side_navigation_popup_shadow_color2); + --_ui5_side_navigation_popup_title_text_size: 1.25rem; + --_ui5_side_navigation_popup_title_line_height: 1.5rem; + --_ui5_side_navigation_selection_indicator_display: block; } [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_side_navigation_container_padding: 1.5rem 0.75rem 0.75rem 0.75rem; - --_ui5_side_navigation_item_gap: 0.5rem; + --_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed); + --_ui5_side_navigation_padding: var(--_ui5_side_navigation_padding_compact); + --_ui5_side_navigation_item_bottom_margin: var(--_ui5_side_navigation_item_bottom_margin_compact); --_ui5_side_navigation_item_height: 2rem; } \ No newline at end of file diff --git a/packages/fiori/test/pages/SideNavigation.html b/packages/fiori/test/pages/SideNavigation.html index 2431b37c7d81..f302d93d58c4 100644 --- a/packages/fiori/test/pages/SideNavigation.html +++ b/packages/fiori/test/pages/SideNavigation.html @@ -37,10 +37,10 @@
    - - - - + + + + @@ -49,9 +49,9 @@ - - - + + + @@ -60,12 +60,10 @@ selection-change event -
    click event
    -
    prevent selection-change event diff --git a/packages/fiori/test/pages/SideNavigationOnly.html b/packages/fiori/test/pages/SideNavigationOnly.html index 23dc0752dd5c..334a34564a2d 100644 --- a/packages/fiori/test/pages/SideNavigationOnly.html +++ b/packages/fiori/test/pages/SideNavigationOnly.html @@ -10,14 +10,17 @@ - - - + + + - - - + + + diff --git a/packages/fiori/test/specs/SideNavigation.spec.js b/packages/fiori/test/specs/SideNavigation.spec.js index e634e44dca6e..e36a344357c0 100644 --- a/packages/fiori/test/specs/SideNavigation.spec.js +++ b/packages/fiori/test/specs/SideNavigation.spec.js @@ -2,22 +2,16 @@ import { assert } from "chai"; async function getTreeItemsInPopover() { const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#sn1"); - const items = await browser.$$(`>>>.${staticAreaItemClassName} ui5-responsive-popover ui5-side-navigation ui5-tree-item`); + const items = await browser.$$(`>>>.${staticAreaItemClassName} ui5-responsive-popover .ui5-sn-item`); return items; } -async function getItems(selector) { - const listItems = await browser.$$(`>>>${selector}`); - - const promises = listItems.map(async (item) => { - const isDisplayed = await item.isDisplayedInViewport(); - return isDisplayed ? item : null; - },); - - const items = await Promise.all(promises); +async function getRootItemInPopover() { + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#sn1"); + const rootItem = await browser.$(`>>>.${staticAreaItemClassName} ui5-responsive-popover .ui5-sn-root`); - return items.filter((item) => item); + return rootItem; } describe("Component Behavior", () => { @@ -28,9 +22,9 @@ describe("Component Behavior", () => { describe("Main functionality", async () => { it("Tests selection-change event", async () => { const input = await browser.$("#counter"); - const sideNavigation = await browser.$("ui5-side-navigation"); - let items = await browser.$$(">>>.ui5-sn-items-tree [ui5-tree-item]"); - const fixedItems = await browser.$$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item]"); + const sideNavigation = await browser.$("#sn1"); + let items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); + const fixedItems = await sideNavigation.shadow$$(".ui5-sn-fixed .ui5-sn-item"); await items[0].click(); await items[3].click(); @@ -42,7 +36,7 @@ describe("Component Behavior", () => { assert.strictEqual(await input.getProperty("value"), "3", "Event is fired"); await sideNavigation.setAttribute("collapsed", "true"); - items = await browser.$$(">>>.ui5-sn-items-tree [ui5-tree-item]"); + items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); await items[0].click(); @@ -57,47 +51,38 @@ describe("Component Behavior", () => { await items[1].click(); assert.strictEqual(await input.getProperty("value"), "5", "Event is fired"); + + await sideNavigation.removeAttribute("collapsed"); }); it("Tests click event & whole-item-toggleable property", async () => { const input = await browser.$("#click-counter"); - let items = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const sideNavigation = await browser.$("ui5-side-navigation"); + let items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item-level1"); await items[0].click(); - assert.strictEqual(await input.getProperty("value"), "7", "Event is fired"); - - await items[3].click(); - - assert.strictEqual(await input.getProperty("value"), "7", "Event is not fired"); - assert.ok(await items[3].getProperty("expanded"), "Expanded is toggled"); + assert.strictEqual(await input.getProperty("value"), "6", "Event is fired"); await items[3].click(); - assert.strictEqual(await input.getProperty("value"), "7", "Event is not fired"); - assert.notOk(await items[3].getProperty("expanded"), "Expanded is toggled"); - - await items[1].click(); - assert.strictEqual(await input.getProperty("value"), "8", "Event is fired"); - - items = await getTreeItemsInPopover(); + assert.strictEqual(await input.getProperty("value"), "6", "Event is not fired"); + assert.strictEqual(await items[3].getAttribute("aria-expanded"), "true" ,"Expanded is toggled"); await items[1].click(); - - assert.strictEqual(await input.getProperty("value"), "9", "Event is fired"); - + assert.strictEqual(await input.getProperty("value"), "7", "Event is fired"); }); it("Tests header visibility", async () => { - let showHeader = null; + const sideNavigation = await browser.$("ui5-side-navigation"); await browser.$("#sn1").setProperty("collapsed", false); - showHeader = await browser.$("#sn1").getProperty("showHeader"); + let showHeader = await sideNavigation.getProperty("showHeader"); assert.ok(showHeader, "Header is displayed"); await browser.$("#sn1").setProperty("collapsed", true); - showHeader = await browser.$("#sn1").getProperty("showHeader"); + showHeader = await sideNavigation.getProperty("showHeader"); assert.notOk(showHeader, "Header is not displayed"); @@ -107,75 +92,56 @@ describe("Component Behavior", () => { it("Tests tooltips when expanded", async () => { const sideNavigation = await browser.$("#sn1"); - const items = await sideNavigation.$$("ui5-side-navigation-item"); - const renderedItems = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); - const secondItemSubItems = await items[1].$$("ui5-side-navigation-sub-item"); + const renderedItems = await sideNavigation.shadow$$(".ui5-sn-item"); - assert.strictEqual(await renderedItems[0].getAttribute("title"), await items[0].getAttribute("title"), "Title is set as tooltip to root item"); - assert.strictEqual(await renderedItems[1].getAttribute("title"), await items[1].getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); + // items + assert.strictEqual(await renderedItems[0].getAttribute("title"), await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item"); + assert.strictEqual(await renderedItems[1].getAttribute("title"), await browser.$("#item2").getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); // sub items - assert.strictEqual(await renderedItems[2].getAttribute("title"), await secondItemSubItems[0].getAttribute("title"), "Title is set as tooltip to sub item"); - assert.strictEqual(await renderedItems[3].getAttribute("title"), await secondItemSubItems[1].getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); - - // fixed items - const fixedItems = await sideNavigation.$$("ui5-side-navigation-item[slot=fixedItems]"); - let renderedFixedItems = await getItems("#ui5-sn-fixed-items-tree [ui5-tree-item]"); - await renderedFixedItems[0].shadow$("ui5-icon.ui5-li-tree-toggle-icon").click(); // expand the item - renderedFixedItems = await getItems("#ui5-sn-fixed-items-tree [ui5-tree-item]"); - const firstFixedItemSubItems = await fixedItems[0].$$("ui5-side-navigation-sub-item"); - - assert.strictEqual(await renderedFixedItems[0].getAttribute("title"), await fixedItems[0].getAttribute("title"), "Title is set as tooltip to root fixed item"); - assert.strictEqual(await renderedFixedItems[2].getAttribute("title"), await firstFixedItemSubItems[1].getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); - - // clean up - await renderedFixedItems[0].shadow$("ui5-icon.ui5-li-tree-toggle-icon").click(); // collapse the item + assert.strictEqual(await renderedItems[2].getAttribute("title"), await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item"); + assert.strictEqual(await renderedItems[3].getAttribute("title"), await browser.$("#item22").getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); }); it("Tests tooltips when collapsed", async () => { await browser.$("#sn1").setProperty("collapsed", true); + const sideNavigation = await browser.$("#sn1"); - const items = await sideNavigation.$$("ui5-side-navigation-item"); - const secondItemSubItems = await items[1].$$("ui5-side-navigation-sub-item"); - const renderedItems = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const renderedItems = await sideNavigation.shadow$$(".ui5-sn-item"); - assert.strictEqual(await renderedItems[0].getAttribute("title"), await items[0].getAttribute("title"), "Title is set as tooltip to root item"); - assert.strictEqual(await renderedItems[1].getAttribute("title"), await items[1].getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); + assert.strictEqual(await renderedItems[0].getAttribute("title"), await browser.$("#item1").getAttribute("title"), "Title is set as tooltip to root item"); + assert.strictEqual(await renderedItems[1].getAttribute("title"), await browser.$("#item2").getAttribute("text"), "Text is set as tooltip to root item when title is not specified"); await renderedItems[1].click(); const popoverItems = await getTreeItemsInPopover(); - assert.strictEqual(await popoverItems[0].getAttribute("title"), await items[1].getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); - assert.strictEqual(await popoverItems[1].getAttribute("title"), await secondItemSubItems[0].getAttribute("title"), "Title is set as tooltip to sub item"); + assert.strictEqual(await popoverItems[0].getAttribute("title"), await browser.$("#item2").getAttribute("text"), "Text is set as tooltip to sub item when title is not specified"); + assert.strictEqual(await popoverItems[1].getAttribute("title"), await browser.$("#item21").getAttribute("title"), "Title is set as tooltip to sub item"); // clean up await browser.$("#sn1").setProperty("collapsed", false); - await browser.executeAsync(async (done) => { - // close popover after the test because next call of getItems will return the items from the popover as well - const staticArea = await document.querySelector("ui5-side-navigation").getStaticAreaItemDomRef(); - const popover = staticArea.querySelector(".ui5-side-navigation-popover"); - popover.addEventListener("ui5-after-close", () => { - done(); - }); - - popover.close(); - }); }); - + it("tests the prevention of the ui5-selection-change event", async () => { - const items = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const sideNavigation = await browser.$("#sn1"); + const items = await sideNavigation.shadow$$(".ui5-sn-item"); await items[3].click(); + assert.ok(await browser.$("#item22").getProperty("selected"), "new item is selected"); + assert.strictEqual(await items[3].getAttribute("aria-current"), "page", "aria-current is set"); + const selectionChangeCheckbox = await browser.$("#prevent-selection"); await selectionChangeCheckbox.click(); await items[0].click(); - assert.strictEqual(await items[0].getAttribute("selected"), null, "new item was not selected"); + 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.strictEqual(await items[3].getAttribute("selected"), "true", "initially selected item has not changed"); + assert.ok(await browser.$("#item22").getProperty("selected"), "initially selected item has not changed"); + assert.strictEqual(await items[3].getAttribute("aria-current"), "page", "aria-current is not changed"); await selectionChangeCheckbox.click(); }); @@ -185,7 +151,7 @@ describe("Component Behavior", () => { await sideNavigation.setAttribute("collapsed", "true"); const input = await browser.$("#counter"); - const items = await getItems(".ui5-sn-items-tree [ui5-tree-item]"); + const items = await sideNavigation.shadow$$(".ui5-sn-item"); await items[0].click(); @@ -200,35 +166,33 @@ describe("Component Behavior", () => { await sideNavigation.removeAttribute("collapsed"); }); - it("Tests ACC roles and more when expanded", async () => { + it("Tests ACC when expanded", async () => { const sideNavigation = await browser.$("#sn1"); const sideNavigationRoot = await sideNavigation.shadow$(".ui5-sn-root"); - const sideNavigationTree = await sideNavigation.shadow$("ui5-tree").shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationTreeItem = await browser.$(">>>.ui5-sn-items-tree [ui5-tree-item] li") - const sideNavigationFixedItemsTree = await sideNavigation.shadow$$("ui5-tree")[1]; - const sideNavigationFixedItemsTreeElement = sideNavigationFixedItemsTree.shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationFixedItemsTreeItem = await browser.$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item] li") - assert.strictEqual(await sideNavigationRoot.getAttribute("role"), "navigation", "Role of the SideNavigation root element is correctly set"); + const sideNavigationTree = await sideNavigation.shadow$(".ui5-sn-flexible"); + const sideNavigationFixedTree = await sideNavigation.shadow$(".ui5-sn-fixed"); + + const items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); + const fixedItems = await sideNavigation.shadow$$(".ui5-sn-fixed .ui5-sn-item"); + + assert.strictEqual(await sideNavigationRoot.getTagName(), "nav", "tag name of the SideNavigation root element is correctly set"); let roleDescription = await browser.executeAsync(done => { const sn = document.getElementById("sn1"); done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_LIST_ARIA_ROLE_DESC)); }); + assert.strictEqual(await sideNavigationTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation tree element is correctly set"); + assert.notExists(await items[0].getAttribute("aria-roledescription"),"Role description of the SideNavigation tree item is not set"); - // items - let roleDescriptionItem = await browser.executeAsync(done => { - const sn = document.getElementById("sn1"); - done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC)); - }); - assert.strictEqual(await sideNavigationTreeItem.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation tree item is correctly set"); - assert.notExists(await sideNavigationTreeItem.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await sideNavigationTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation tree is correctly set"); + assert.notExists(await items[1].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); // fixed items - assert.strictEqual(await sideNavigationFixedItemsTreeElement.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); - assert.strictEqual(await sideNavigationFixedItemsTreeItem.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation fixed tree item is correctly set"); - assert.notExists(await sideNavigationFixedItemsTreeItem.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await sideNavigationFixedTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); + assert.notExists(await fixedItems[0].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set"); + assert.notExists(await fixedItems[0].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); }); it("Tests ACC roles and more when collapsed", async () => { @@ -236,19 +200,18 @@ describe("Component Behavior", () => { await browser.url(`test/pages/SideNavigation.html`); // act - await browser.$("#sn1").setProperty("collapsed", true); - const sideNavigation = await browser.$("#sn1"); + await sideNavigation.setProperty("collapsed", true); + const sideNavigationRoot = await sideNavigation.shadow$(".ui5-sn-root"); - const sideNavigationTree = await sideNavigation.shadow$("ui5-tree").shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationTreeItem1 = await browser.$(">>>.ui5-sn-items-tree [ui5-tree-item] li") // with no sub-items - const sideNavigationTreeItem2 = await browser.$$(">>>.ui5-sn-items-tree [ui5-tree-item] li")[1] // with sub-items - const sideNavigationFixedItemsTree = await sideNavigation.shadow$$("ui5-tree")[1]; - const sideNavigationFixedItemsTreeElement = sideNavigationFixedItemsTree.shadow$("ui5-tree-list").shadow$("ul"); - const sideNavigationFixedItemsTreeItem1 = await browser.$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item] li") // with sub-items - const sideNavigationFixedItemsTreeItem2 = await browser.$$(">>>#ui5-sn-fixed-items-tree [ui5-tree-item] li")[1]; // with no sub-items - assert.strictEqual(await sideNavigationRoot.getAttribute("role"), "navigation", "Role of the SideNavigation root element is correctly set"); + const sideNavigationTree = await sideNavigation.shadow$(".ui5-sn-flexible"); + const sideNavigationFixedTree = await sideNavigation.shadow$(".ui5-sn-fixed"); + + const items = await sideNavigation.shadow$$(".ui5-sn-flexible .ui5-sn-item"); + const fixedItems = await sideNavigation.shadow$$(".ui5-sn-fixed .ui5-sn-item"); + + assert.strictEqual(await sideNavigationRoot.getTagName(), "nav", "tag name of the SideNavigation root element is correctly set"); let roleDescription = await browser.executeAsync(done => { const sn = document.getElementById("sn1"); @@ -256,37 +219,25 @@ describe("Component Behavior", () => { }); assert.strictEqual(await sideNavigationTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation tree element is correctly set"); - // items - let roleDescriptionItem = await browser.executeAsync(done => { - const sn = document.getElementById("sn1"); - done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_COLLAPSED_LIST_ITEMS_ARIA_ROLE_DESC)); - }); - assert.strictEqual(await sideNavigationTreeItem1.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation tree item is correctly set"); - assert.notExists(await sideNavigationTreeItem1.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); - assert.strictEqual(await sideNavigationTreeItem2.getAttribute("aria-haspopup"), "Tree", "There is 'aria-haspopup' with correct value"); + assert.notExists(await items[0].getAttribute("aria-roledescription"), "Role description of the SideNavigation tree item is not set"); + assert.notExists(await items[0].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await items[1].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value"); // fixed items - assert.strictEqual(await sideNavigationFixedItemsTreeElement.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); - assert.strictEqual(await sideNavigationFixedItemsTreeItem1.getAttribute("aria-roledescription"), roleDescriptionItem, "Role description of the SideNavigation fixed tree item is correctly set"); - assert.strictEqual(await sideNavigationFixedItemsTreeItem1.getAttribute("aria-haspopup"), "Tree", "There is 'aria-haspopup' with correct value"); - assert.notExists(await sideNavigationFixedItemsTreeItem2.getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); + assert.strictEqual(await sideNavigationFixedTree.getAttribute("aria-roledescription"), roleDescription, "Role description of the SideNavigation fixed tree element is correctly set"); + assert.notExists(await fixedItems[0].getAttribute("aria-roledescription"), "Role description of the SideNavigation fixed tree item is not set"); + assert.strictEqual(await fixedItems[0].getAttribute("aria-haspopup"), "tree", "There is 'aria-haspopup' with correct value"); + assert.notExists(await fixedItems[1].getAttribute("aria-haspopup"), "There is no 'aria-haspopup'"); // popup - await sideNavigationTreeItem2.click(); - - const popoverItems = await getTreeItemsInPopover(); + await items[1].click(); - // items - roleDescriptionItem = await browser.executeAsync(done => { - const sn = document.getElementById("sn1"); - done(sn.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.SIDE_NAVIGATION_LIST_ITEMS_ARIA_ROLE_DESC)); - }); + const popoverRootItem = await getRootItemInPopover(); - assert.strictEqual(await popoverItems[0].shadow$("li").getAttribute("aria-roledescription"), roleDescriptionItem, "Role description is correctly set"); - assert.strictEqual(await popoverItems[1].shadow$("li").getAttribute("aria-roledescription"), roleDescriptionItem, "Role description is correctly set"); + assert.strictEqual(await popoverRootItem.getAttribute("role"), "none", "Role is correctly set"); // clean up - await browser.$("#sn1").setProperty("collapsed", false); + await sideNavigation.setProperty("collapsed", false); }); }); }); From 7f112746d50381474ec86da5e428df79c17c6499 Mon Sep 17 00:00:00 2001 From: Tsanislav Gatev Date: Fri, 3 Nov 2023 14:24:18 +0200 Subject: [PATCH 34/69] fix(ui5-segmented-button): check for items before applying settings (#7792) fixes: #7788 --- packages/main/src/SegmentedButton.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 6357f1e99c90..e53b798c620a 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -156,6 +156,10 @@ class SegmentedButton extends UI5Element { } normalizeSelection() { + if (!this.items.length) { + return; + } + switch (this.mode) { case SegmentedButtonMode.SingleSelect: { const selectedItems = this.selectedItems; From 70deda85293d5e62e99530c9dc0747071d9ee59c Mon Sep 17 00:00:00 2001 From: Tsanislav Gatev Date: Fri, 3 Nov 2023 14:24:34 +0200 Subject: [PATCH 35/69] fix(ui5-time-picker): check value before formatting (#7793) fix: #7790 --- packages/main/src/TimePicker.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/main/src/TimePicker.ts b/packages/main/src/TimePicker.ts index 91741035657a..5a40eda1f44e 100644 --- a/packages/main/src/TimePicker.ts +++ b/packages/main/src/TimePicker.ts @@ -116,7 +116,9 @@ class TimePicker extends TimePickerBase { formatPattern!: string; onBeforeRendering() { - this.value = this.normalizeValue(this.value!) || this.value; + if (this.value) { + this.value = this.normalizeValue(this.value) || this.value; + } } get _formatPattern() { From 03f28b90df0b2a28c0f09f67caaa0a5a1e63c4f3 Mon Sep 17 00:00:00 2001 From: Plamen Ivanov Date: Mon, 6 Nov 2023 14:40:19 +0200 Subject: [PATCH 36/69] feat(ui5-illustrated-message): added new TNT illustrations (#7773) * feat(ui5-illustrated-message): added new TNT illustrations The following new illustrations are added: - Avatar - Calculator - Compass - Dialog - Handshake - Help - MissionFailed - Roadmap - Settings - Tutorials Additionally there are some updates on existing ones. --- .../tnt/hc/tnt-Dialog-Avatar.svg | 15 ++ .../tnt/hc/tnt-Dialog-Calculator.svg | 23 +++ .../tnt/hc/tnt-Dialog-Compass.svg | 16 ++ .../tnt/hc/tnt-Dialog-Dialog.svg | 22 +++ .../tnt/hc/tnt-Dialog-FaceID.svg | 2 +- .../tnt/hc/tnt-Dialog-Handshake.svg | 21 +++ .../tnt/hc/tnt-Dialog-Help.svg | 11 ++ .../tnt/hc/tnt-Dialog-MissionFailed.svg | 11 ++ .../tnt/hc/tnt-Dialog-RoadMap.svg | 91 ++++++++++ .../tnt/hc/tnt-Dialog-Settings.svg | 8 + .../tnt/hc/tnt-Dialog-Tutorials.svg | 17 ++ .../tnt/hc/tnt-Dot-Avatar.svg | 12 ++ .../tnt/hc/tnt-Dot-Calculator.svg | 12 ++ .../tnt/hc/tnt-Dot-CodePlaceholder.svg | 2 +- .../tnt/hc/tnt-Dot-Company.svg | 2 +- .../tnt/hc/tnt-Dot-Compass.svg | 9 + .../tnt/hc/tnt-Dot-Dialog.svg | 22 +++ .../tnt/hc/tnt-Dot-ExternalLink.svg | 2 +- .../tnt/hc/tnt-Dot-Fingerprint.svg | 2 +- .../tnt/hc/tnt-Dot-Handshake.svg | 18 ++ .../illustrations-v5/tnt/hc/tnt-Dot-Help.svg | 8 + .../illustrations-v5/tnt/hc/tnt-Dot-Lock.svg | 2 +- .../tnt/hc/tnt-Dot-MissionFailed.svg | 9 + .../tnt/hc/tnt-Dot-NoApplications.svg | 2 +- .../tnt/hc/tnt-Dot-NoFlows.svg | 42 ++++- .../tnt/hc/tnt-Dot-NoUsers.svg | 2 +- .../tnt/hc/tnt-Dot-RoadMap.svg | 7 + .../tnt/hc/tnt-Dot-Secrets.svg | 2 +- .../tnt/hc/tnt-Dot-Settings.svg | 6 + .../tnt/hc/tnt-Dot-Success.svg | 2 +- .../tnt/hc/tnt-Dot-Tutorials.svg | 7 + .../tnt/hc/tnt-Scene-Avatar.svg | 22 +++ .../tnt/hc/tnt-Scene-Calculator.svg | 31 ++++ .../tnt/hc/tnt-Scene-Compass.svg | 23 +++ .../tnt/hc/tnt-Scene-Dialog.svg | 16 ++ .../tnt/hc/tnt-Scene-Handshake.svg | 25 +++ .../tnt/hc/tnt-Scene-Help.svg | 20 +++ .../tnt/hc/tnt-Scene-MissionFailed.svg | 17 ++ .../tnt/hc/tnt-Scene-RoadMap.svg | 29 +++ .../tnt/hc/tnt-Scene-Settings.svg | 12 ++ .../tnt/hc/tnt-Scene-Tutorials.svg | 26 +++ .../tnt/hc/tnt-Spot-Avatar.svg | 16 ++ .../tnt/hc/tnt-Spot-Calculator.svg | 23 +++ .../tnt/hc/tnt-Spot-Compass.svg | 16 ++ .../tnt/hc/tnt-Spot-Dialog.svg | 22 +++ .../tnt/hc/tnt-Spot-FaceID.svg | 2 +- .../tnt/hc/tnt-Spot-Handshake.svg | 26 +++ .../illustrations-v5/tnt/hc/tnt-Spot-Help.svg | 11 ++ .../tnt/hc/tnt-Spot-MissionFailed.svg | 10 ++ .../tnt/hc/tnt-Spot-RoadMap.svg | 77 ++++++++ .../tnt/hc/tnt-Spot-Settings.svg | 8 + .../tnt/hc/tnt-Spot-Tutorials.svg | 17 ++ .../tnt/tnt-Dialog-FaceID.svg | 2 +- .../tnt/tnt-Dialog-Fingerprint.svg | 2 +- .../tnt/tnt-Dialog-NoFlows.svg | 2 +- .../tnt/tnt-Dialog-Success.svg | 2 +- .../illustrations-v5/tnt/tnt-Dialog-Tools.svg | 2 +- .../illustrations-v5/tnt/tnt-Dot-ChartOrg.svg | 2 +- .../tnt/tnt-Dot-CodePlaceholder.svg | 2 +- .../illustrations-v5/tnt/tnt-Dot-Company.svg | 2 +- .../tnt/tnt-Dot-Fingerprint.svg | 2 +- .../src/illustrations-v5/tnt/tnt-Dot-Lock.svg | 2 +- .../tnt/tnt-Dot-NoApplications.svg | 2 +- .../illustrations-v5/tnt/tnt-Dot-NoUsers.svg | 2 +- .../illustrations-v5/tnt/tnt-Scene-FaceID.svg | 2 +- .../tnt/tnt-Scene-NoUsers.svg | 2 +- .../illustrations-v5/tnt/tnt-Spot-Tools.svg | 2 +- .../illustrations/tnt/tnt-Dialog-Avatar.svg | 124 +++++++++++++ .../tnt/tnt-Dialog-Calculator.svg | 80 +++++++++ .../illustrations/tnt/tnt-Dialog-Compass.svg | 34 ++++ .../illustrations/tnt/tnt-Dialog-Dialog.svg | 32 ++++ .../tnt/tnt-Dialog-Handshake.svg | 32 ++++ .../src/illustrations/tnt/tnt-Dialog-Help.svg | 27 +++ .../tnt/tnt-Dialog-MissionFailed.svg | 41 +++++ .../illustrations/tnt/tnt-Dialog-RoadMap.svg | 41 +++++ .../illustrations/tnt/tnt-Dialog-Settings.svg | 37 ++++ .../tnt/tnt-Dialog-Tutorials.svg | 78 +++++++++ .../src/illustrations/tnt/tnt-Dot-Avatar.svg | 12 ++ .../illustrations/tnt/tnt-Dot-Calculator.svg | 11 ++ .../src/illustrations/tnt/tnt-Dot-Compass.svg | 9 + .../src/illustrations/tnt/tnt-Dot-Dialog.svg | 19 ++ .../illustrations/tnt/tnt-Dot-Handshake.svg | 18 ++ .../src/illustrations/tnt/tnt-Dot-Help.svg | 8 + .../tnt/tnt-Dot-MissionFailed.svg | 9 + .../src/illustrations/tnt/tnt-Dot-RoadMap.svg | 5 + .../illustrations/tnt/tnt-Dot-Settings.svg | 6 + .../illustrations/tnt/tnt-Dot-Tutorials.svg | 7 + .../illustrations/tnt/tnt-Scene-Avatar.svg | 130 ++++++++++++++ .../tnt/tnt-Scene-Calculator.svg | 83 +++++++++ .../illustrations/tnt/tnt-Scene-Compass.svg | 34 ++++ .../illustrations/tnt/tnt-Scene-Dialog.svg | 35 ++++ .../illustrations/tnt/tnt-Scene-Handshake.svg | 32 ++++ .../src/illustrations/tnt/tnt-Scene-Help.svg | 29 +++ .../tnt/tnt-Scene-MissionFailed.svg | 49 ++++++ .../illustrations/tnt/tnt-Scene-RoadMap.svg | 45 +++++ .../illustrations/tnt/tnt-Scene-Settings.svg | 38 ++++ .../illustrations/tnt/tnt-Scene-Tutorials.svg | 84 +++++++++ .../src/illustrations/tnt/tnt-Spot-Avatar.svg | 105 +++++++++++ .../illustrations/tnt/tnt-Spot-Calculator.svg | 130 ++++++++++++++ .../illustrations/tnt/tnt-Spot-Compass.svg | 34 ++++ .../src/illustrations/tnt/tnt-Spot-Dialog.svg | 32 ++++ .../illustrations/tnt/tnt-Spot-Handshake.svg | 64 +++++++ .../src/illustrations/tnt/tnt-Spot-Help.svg | 23 +++ .../tnt/tnt-Spot-MissionFailed.svg | 113 ++++++++++++ .../illustrations/tnt/tnt-Spot-RoadMap.svg | 165 ++++++++++++++++++ .../illustrations/tnt/tnt-Spot-Settings.svg | 37 ++++ .../illustrations/tnt/tnt-Spot-Tutorials.svg | 91 ++++++++++ .../src/types/IllustrationMessageType.ts | 60 +++++++ .../fiori/test/pages/IllustratedMessage.html | 10 ++ 109 files changed, 2912 insertions(+), 27 deletions(-) create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Avatar.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Calculator.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Compass.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Dialog.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Handshake.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Help.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-RoadMap.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Settings.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Tutorials.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Avatar.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Calculator.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Compass.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Dialog.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Handshake.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Help.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-RoadMap.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Settings.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Tutorials.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Avatar.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Calculator.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Compass.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Dialog.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Handshake.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Help.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-RoadMap.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Settings.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Tutorials.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Avatar.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Calculator.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Compass.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Dialog.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Handshake.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Help.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-RoadMap.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Settings.svg create mode 100644 packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Tutorials.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Avatar.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Calculator.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Compass.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Dialog.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Handshake.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Help.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-RoadMap.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Settings.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dialog-Tutorials.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Avatar.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Calculator.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Compass.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Dialog.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Handshake.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Help.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-RoadMap.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Settings.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Dot-Tutorials.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Avatar.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Calculator.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Compass.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Dialog.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Handshake.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Help.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-RoadMap.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Settings.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Scene-Tutorials.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Avatar.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Calculator.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Compass.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Dialog.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Handshake.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Help.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-MissionFailed.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-RoadMap.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Settings.svg create mode 100644 packages/fiori/src/illustrations/tnt/tnt-Spot-Tutorials.svg diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Avatar.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Avatar.svg new file mode 100644 index 000000000000..bf774abb667a --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Avatar.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Calculator.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Calculator.svg new file mode 100644 index 000000000000..9759cdb87109 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Calculator.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Compass.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Compass.svg new file mode 100644 index 000000000000..aae9bed233ea --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Compass.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Dialog.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Dialog.svg new file mode 100644 index 000000000000..b7779960a4c7 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Dialog.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-FaceID.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-FaceID.svg index 6af17ea48f5d..73463acefa41 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-FaceID.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-FaceID.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Handshake.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Handshake.svg new file mode 100644 index 000000000000..d63b432a3f71 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Handshake.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Help.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Help.svg new file mode 100644 index 000000000000..dc547d586e54 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Help.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-MissionFailed.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-MissionFailed.svg new file mode 100644 index 000000000000..dc5a1b4126d3 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-MissionFailed.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-RoadMap.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-RoadMap.svg new file mode 100644 index 000000000000..64e29ad3459d --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-RoadMap.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Settings.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Settings.svg new file mode 100644 index 000000000000..8b6f656d37c1 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Settings.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Tutorials.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Tutorials.svg new file mode 100644 index 000000000000..8ba9c0ba8549 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dialog-Tutorials.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Avatar.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Avatar.svg new file mode 100644 index 000000000000..9d0e3d7afb56 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Avatar.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Calculator.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Calculator.svg new file mode 100644 index 000000000000..a65f10170dde --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Calculator.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-CodePlaceholder.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-CodePlaceholder.svg index 16a3fbf31ea7..07c8adcc296c 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-CodePlaceholder.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-CodePlaceholder.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Company.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Company.svg index 29621c8d33d6..1be0c822a15f 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Company.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Company.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Compass.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Compass.svg new file mode 100644 index 000000000000..86ce83656209 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Compass.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Dialog.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Dialog.svg new file mode 100644 index 000000000000..61e436619444 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Dialog.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-ExternalLink.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-ExternalLink.svg index 72a2a7a6005e..623e4914cefe 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-ExternalLink.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-ExternalLink.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Fingerprint.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Fingerprint.svg index 8c5bd519cac7..da59a0ae9d4a 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Fingerprint.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Fingerprint.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Handshake.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Handshake.svg new file mode 100644 index 000000000000..4e58cf02b17a --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Handshake.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Help.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Help.svg new file mode 100644 index 000000000000..ece45323d1b5 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Help.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Lock.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Lock.svg index 45063df0a2b8..a4d458b8405a 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Lock.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Lock.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-MissionFailed.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-MissionFailed.svg new file mode 100644 index 000000000000..1ade8e0892d1 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-MissionFailed.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoApplications.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoApplications.svg index f9e7242b6260..5217a5c81eb6 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoApplications.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoApplications.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoFlows.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoFlows.svg index 7419110b0039..e9e2a54fb77f 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoFlows.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoFlows.svg @@ -1 +1,41 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoUsers.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoUsers.svg index 5f066cee71fb..f0f1e2ed7463 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoUsers.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-NoUsers.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-RoadMap.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-RoadMap.svg new file mode 100644 index 000000000000..fd72d925e6f9 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-RoadMap.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Secrets.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Secrets.svg index 37b91664e62b..2feea13eccc9 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Secrets.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Secrets.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Settings.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Settings.svg new file mode 100644 index 000000000000..75f60b9ac36f --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Settings.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Success.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Success.svg index ee3098a47919..a642fe08734c 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Success.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Success.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Tutorials.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Tutorials.svg new file mode 100644 index 000000000000..483ce61e43f8 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Dot-Tutorials.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Avatar.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Avatar.svg new file mode 100644 index 000000000000..9eb3ce3ef7b3 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Avatar.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Calculator.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Calculator.svg new file mode 100644 index 000000000000..827034f82e9b --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Calculator.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Compass.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Compass.svg new file mode 100644 index 000000000000..a4fd393056be --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Compass.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Dialog.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Dialog.svg new file mode 100644 index 000000000000..8cb54427191e --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Dialog.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Handshake.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Handshake.svg new file mode 100644 index 000000000000..8e2d72a40017 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Handshake.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Help.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Help.svg new file mode 100644 index 000000000000..d1702312b833 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Help.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-MissionFailed.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-MissionFailed.svg new file mode 100644 index 000000000000..a3ba46841273 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-MissionFailed.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-RoadMap.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-RoadMap.svg new file mode 100644 index 000000000000..7887b0934369 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-RoadMap.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Settings.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Settings.svg new file mode 100644 index 000000000000..24174af728ff --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Settings.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Tutorials.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Tutorials.svg new file mode 100644 index 000000000000..ba91853221e7 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Scene-Tutorials.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Avatar.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Avatar.svg new file mode 100644 index 000000000000..adf46c7fed96 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Avatar.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Calculator.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Calculator.svg new file mode 100644 index 000000000000..8b34b701dedc --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Calculator.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Compass.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Compass.svg new file mode 100644 index 000000000000..e057cae271ce --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Compass.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Dialog.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Dialog.svg new file mode 100644 index 000000000000..dc2e2e3be55b --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Dialog.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-FaceID.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-FaceID.svg index a99168390992..a9d56765bd38 100644 --- a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-FaceID.svg +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-FaceID.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Handshake.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Handshake.svg new file mode 100644 index 000000000000..dfb91ed068bf --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Handshake.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Help.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Help.svg new file mode 100644 index 000000000000..62541ae0add0 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Help.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-MissionFailed.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-MissionFailed.svg new file mode 100644 index 000000000000..56745b4965c1 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-MissionFailed.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-RoadMap.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-RoadMap.svg new file mode 100644 index 000000000000..b846dcbd7b73 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-RoadMap.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Settings.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Settings.svg new file mode 100644 index 000000000000..e34e22eb10eb --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Settings.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Tutorials.svg b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Tutorials.svg new file mode 100644 index 000000000000..bf1c6a1753f5 --- /dev/null +++ b/packages/fiori/src/illustrations-v5/tnt/hc/tnt-Spot-Tutorials.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-FaceID.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-FaceID.svg index ed6021243b60..d8b4728a5ca8 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-FaceID.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-FaceID.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Fingerprint.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Fingerprint.svg index 12548d4cd051..80da8506ef11 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Fingerprint.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Fingerprint.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-NoFlows.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-NoFlows.svg index 98d0599542f6..2d004a56c7b5 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-NoFlows.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-NoFlows.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Success.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Success.svg index eed6c90679be..fc7c87c2952e 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Success.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Success.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Tools.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Tools.svg index d341decbb4cc..1ed3abf59bfd 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Tools.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dialog-Tools.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartOrg.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartOrg.svg index f834f9aa4f7b..5656e180bf0d 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartOrg.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-ChartOrg.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-CodePlaceholder.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-CodePlaceholder.svg index 7915067ce980..81358543be32 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-CodePlaceholder.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-CodePlaceholder.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Company.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Company.svg index 6e0e241c7f92..4a8245d94764 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Company.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Company.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Fingerprint.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Fingerprint.svg index b1702e43a9c0..149622ecb812 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Fingerprint.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Fingerprint.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Lock.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Lock.svg index ce02dec32983..1147ff038bb7 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Lock.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-Lock.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoApplications.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoApplications.svg index f1889b614453..30ec1abe159f 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoApplications.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoApplications.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoUsers.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoUsers.svg index 25bd7c5f3ce5..a345d4dddeb6 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoUsers.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Dot-NoUsers.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-FaceID.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-FaceID.svg index 866ccfc787c2..671ca4600b6c 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-FaceID.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-FaceID.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-NoUsers.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-NoUsers.svg index 6e0c062a6864..4deddc4f746f 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-NoUsers.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Scene-NoUsers.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-Tools.svg b/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-Tools.svg index f578553c8a00..45129a3668b2 100644 --- a/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-Tools.svg +++ b/packages/fiori/src/illustrations-v5/tnt/tnt-Spot-Tools.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Avatar.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Avatar.svg new file mode 100644 index 000000000000..622ba4b8aae7 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Avatar.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Calculator.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Calculator.svg new file mode 100644 index 000000000000..ebed9583938e --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Calculator.svg @@ -0,0 +1,80 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Compass.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Compass.svg new file mode 100644 index 000000000000..838906cc2b1b --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Compass.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Dialog.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Dialog.svg new file mode 100644 index 000000000000..af993b989cea --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Dialog.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Handshake.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Handshake.svg new file mode 100644 index 000000000000..52c3f99a39be --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Handshake.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Help.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Help.svg new file mode 100644 index 000000000000..b1ca81026ca5 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Help.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-MissionFailed.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-MissionFailed.svg new file mode 100644 index 000000000000..5074286fbe8a --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-MissionFailed.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-RoadMap.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-RoadMap.svg new file mode 100644 index 000000000000..423baddb66d9 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-RoadMap.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Settings.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Settings.svg new file mode 100644 index 000000000000..374dd171b39d --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Settings.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dialog-Tutorials.svg b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Tutorials.svg new file mode 100644 index 000000000000..755627d859ae --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dialog-Tutorials.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Avatar.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Avatar.svg new file mode 100644 index 000000000000..7cca72c14da3 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Avatar.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Calculator.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Calculator.svg new file mode 100644 index 000000000000..f3d5cb9518f1 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Calculator.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Compass.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Compass.svg new file mode 100644 index 000000000000..63b508f5c498 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Compass.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Dialog.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Dialog.svg new file mode 100644 index 000000000000..c96f61e553ab --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Dialog.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Handshake.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Handshake.svg new file mode 100644 index 000000000000..85b552ccf857 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Handshake.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Help.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Help.svg new file mode 100644 index 000000000000..1ba736db4b45 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Help.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-MissionFailed.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-MissionFailed.svg new file mode 100644 index 000000000000..72fcb8ee8b03 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-MissionFailed.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-RoadMap.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-RoadMap.svg new file mode 100644 index 000000000000..efda3a5e1357 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-RoadMap.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Settings.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Settings.svg new file mode 100644 index 000000000000..a7e64b692866 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Settings.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Dot-Tutorials.svg b/packages/fiori/src/illustrations/tnt/tnt-Dot-Tutorials.svg new file mode 100644 index 000000000000..8149c95dfdce --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Dot-Tutorials.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Avatar.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Avatar.svg new file mode 100644 index 000000000000..43020be213a4 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Avatar.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Calculator.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Calculator.svg new file mode 100644 index 000000000000..91945c2b7023 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Calculator.svg @@ -0,0 +1,83 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Compass.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Compass.svg new file mode 100644 index 000000000000..89955e2e4d41 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Compass.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Dialog.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Dialog.svg new file mode 100644 index 000000000000..e2a4daa55283 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Dialog.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Handshake.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Handshake.svg new file mode 100644 index 000000000000..53bbc61ba94b --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Handshake.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Help.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Help.svg new file mode 100644 index 000000000000..9c83bec544d0 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Help.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-MissionFailed.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-MissionFailed.svg new file mode 100644 index 000000000000..f6d4c4672b0c --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-MissionFailed.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-RoadMap.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-RoadMap.svg new file mode 100644 index 000000000000..198f6c4b64a1 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-RoadMap.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Settings.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Settings.svg new file mode 100644 index 000000000000..32b4eda91daa --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Settings.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Scene-Tutorials.svg b/packages/fiori/src/illustrations/tnt/tnt-Scene-Tutorials.svg new file mode 100644 index 000000000000..19d88ebd23bd --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Scene-Tutorials.svg @@ -0,0 +1,84 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Avatar.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Avatar.svg new file mode 100644 index 000000000000..5e8411640c53 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Avatar.svg @@ -0,0 +1,105 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Calculator.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Calculator.svg new file mode 100644 index 000000000000..a24fef2a5b20 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Calculator.svg @@ -0,0 +1,130 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Compass.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Compass.svg new file mode 100644 index 000000000000..525a829b4a7d --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Compass.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Dialog.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Dialog.svg new file mode 100644 index 000000000000..da7c8b5f69c7 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Dialog.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Handshake.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Handshake.svg new file mode 100644 index 000000000000..33ead90c11d6 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Handshake.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Help.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Help.svg new file mode 100644 index 000000000000..b6a84be65ad9 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Help.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-MissionFailed.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-MissionFailed.svg new file mode 100644 index 000000000000..fbb7d9c57d61 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-MissionFailed.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-RoadMap.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-RoadMap.svg new file mode 100644 index 000000000000..75cf516c268e --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-RoadMap.svg @@ -0,0 +1,165 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Settings.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Settings.svg new file mode 100644 index 000000000000..fc83c5750500 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Settings.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/fiori/src/illustrations/tnt/tnt-Spot-Tutorials.svg b/packages/fiori/src/illustrations/tnt/tnt-Spot-Tutorials.svg new file mode 100644 index 000000000000..8da909d6b264 --- /dev/null +++ b/packages/fiori/src/illustrations/tnt/tnt-Spot-Tutorials.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fiori/src/types/IllustrationMessageType.ts b/packages/fiori/src/types/IllustrationMessageType.ts index c836915e3493..d04a3c49353a 100644 --- a/packages/fiori/src/types/IllustrationMessageType.ts +++ b/packages/fiori/src/types/IllustrationMessageType.ts @@ -357,6 +357,18 @@ enum IllustrationMessageType { */ UploadCollection = "UploadCollection", /** + * "TntAvatar" illustration type. + * @public + * @type {TntAvatar} + */ + TntAvatar = "TntAvatar", + /** + * "TntCalculator" illustration type. + * @public + * @type {TntCalculator} + */ + TntCalculator = "TntCalculator", + /** * "TntChartArea" illustration type. * @public * @type {TntChartArea} @@ -429,12 +441,24 @@ enum IllustrationMessageType { */ TntCompany = "TntCompany", /** + * "TntCompass" illustration type. + * @public + * @type {TntCompass} + */ + TntCompass = "TntCompass", + /** * "TntComponents" illustration type. * @public * @type {TntComponents} */ TntComponents = "TntComponents", /** + * "TntDialog" illustration type. + * @public + * @type {TntDialog} + */ + TntDialog = "TntDialog", + /** * "TntExternalLink" illustration type. * @public * @type {TntExternalLink} @@ -453,6 +477,18 @@ enum IllustrationMessageType { */ TntFingerprint = "TntFingerprint", /** + * "TntHandshake" illustration type. + * @public + * @type {TntHandshake} + */ + TntHandshake = "TntHandshake", + /** + * "TntHelp" illustration type. + * @public + * @type {TntHelp} + */ + TntHelp = "TntHelp", + /** * "TntLock" illustration type. * @public * @type {TntLock} @@ -465,6 +501,12 @@ enum IllustrationMessageType { */ TntMission = "TntMission", /** + * "TntMissionFailed" illustration type. + * @public + * @type {TntMissionFailed} + */ + TntMissionFailed = "TntMissionFailed", + /** * "TntNoApplications" illustration type. * @public * @type {TntNoApplications} @@ -489,6 +531,12 @@ enum IllustrationMessageType { */ TntRadar = "TntRadar", /** + * "TntRoadMap" illustration type. + * @public + * @type {TntRoadMap} + */ + TntRoadMap = "TntRoadMap", + /** * "TntSecrets" illustration type. * @public * @type {TntSecrets} @@ -513,6 +561,12 @@ enum IllustrationMessageType { */ TntSessionExpiring = "TntSessionExpiring", /** + * "TntSettings" illustration type. + * @public + * @type {TntSettings} + */ + TntSettings = "TntSettings", + /** * "TntSuccess" illustration type. * @public * @type {TntSuccess} @@ -543,6 +597,12 @@ enum IllustrationMessageType { */ TntTools = "TntTools", /** + * "TntTutorials" illustration type. + * @public + * @type {TntTutorials} + */ + TntTutorials = "TntTutorials", + /** * "TntUnableToLoad" illustration type. * @public * @type {TntUnableToLoad} diff --git a/packages/fiori/test/pages/IllustratedMessage.html b/packages/fiori/test/pages/IllustratedMessage.html index 6c47b69201b4..b91d160bdb10 100644 --- a/packages/fiori/test/pages/IllustratedMessage.html +++ b/packages/fiori/test/pages/IllustratedMessage.html @@ -75,6 +75,8 @@ UnableToUpload UploadToCloud UploadCollection + TntAvatar + TntCalculator TntChartArea TntChartArea2 TntChartBar @@ -87,25 +89,33 @@ TntChartPie TntCodePlaceholder TntCompany + TntCompass TntComponents + TntDialog TntExternalLink TntFaceID TntFingerprint + TntHandshake + TntHelp TntLock TntMission + TntMissionFailed TntNoApplications TntNoFlows TntNoUsers TntRadar + TntRoadMap TntSecrets TntServices TntSessionExpired TntSessionExpiring + TntSettings TntSuccess TntSuccessfulAuth TntSystems TntTeams TntTools + TntTutorials TntUnableToLoad TntUnlock TntUnsuccessfulAuth From b1019aff6c4aced61458c1b718ffe0a3a7802ae2 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Tue, 7 Nov 2023 09:21:24 +0200 Subject: [PATCH 37/69] fix(ItemNavigation): more than 1 ItemNavigation per component allowed (#7798) --- packages/base/src/UI5Element.ts | 50 ++++++++++---------- packages/base/src/delegate/ItemNavigation.ts | 5 +- 2 files changed, 30 insertions(+), 25 deletions(-) diff --git a/packages/base/src/UI5Element.ts b/packages/base/src/UI5Element.ts index 12d808983a0e..23e65cf5b241 100644 --- a/packages/base/src/UI5Element.ts +++ b/packages/base/src/UI5Element.ts @@ -27,7 +27,6 @@ import preloadLinks from "./theming/preloadLinks.js"; import executeTemplate from "./renderer/executeTemplate.js"; import type { TemplateFunction, TemplateFunctionResult } from "./renderer/executeTemplate.js"; import type { PromiseResolve, ComponentStylesData, ClassMap } from "./types.js"; -import type ItemNavigation from "./delegate/ItemNavigation.js"; let autoId = 0; @@ -77,7 +76,7 @@ function _invalidate(this: UI5Element, changeInfo: ChangeInfo) { this._changedState.push(changeInfo); renderDeferred(this); - this._eventProvider.fireEvent("invalidate", { ...changeInfo, target: this }); + this._invalidationEventProvider.fireEvent("invalidate", { ...changeInfo, target: this }); } /** @@ -94,7 +93,8 @@ abstract class UI5Element extends HTMLElement { __id?: string; _suppressInvalidation: boolean; _changedState: Array; - _eventProvider: EventProvider; + _invalidationEventProvider: EventProvider; + _componentStateFinalizedEventProvider: EventProvider; _inDOM: boolean; _fullyConnected: boolean; _childChangeListeners: Map; @@ -102,7 +102,6 @@ abstract class UI5Element extends HTMLElement { _domRefReadyPromise: Promise & { _deferredResolve?: PromiseResolve }; _doNotSyncAttributes: Set; _state: State; - _itemNavigations: Array; _getRealDomRef?: () => HTMLElement; staticAreaItem?: StaticAreaItem; @@ -127,7 +126,8 @@ abstract class UI5Element extends HTMLElement { this._fullyConnected = false; // A flag telling whether the UI5Element's onEnterDOM hook was called (since it's possible to have the element removed from DOM before that) this._childChangeListeners = new Map(); // used to store lazy listeners per slot for the child change event of every child inside that slot this._slotChangeListeners = new Map(); // used to store lazy listeners per slot for the slotchange event of all slot children inside that slot - this._eventProvider = new EventProvider(); // used by parent components for listening to changes to child components + this._invalidationEventProvider = new EventProvider(); // used by parent components for listening to changes to child components + this._componentStateFinalizedEventProvider = new EventProvider(); // used by friend classes for synchronization let deferredResolve; this._domRefReadyPromise = new Promise(resolve => { deferredResolve = resolve; @@ -139,8 +139,6 @@ abstract class UI5Element extends HTMLElement { this._upgradeAllProperties(); - this._itemNavigations = new Array(); - if (ctor._needsShadowDOM()) { this.attachShadow({ mode: "open" }); } @@ -444,7 +442,7 @@ abstract class UI5Element extends HTMLElement { * @public */ attachInvalidate(callback: (param: InvalidationInfo) => void) { - this._eventProvider.attachEvent("invalidate", callback); + this._invalidationEventProvider.attachEvent("invalidate", callback); } /** @@ -454,7 +452,7 @@ abstract class UI5Element extends HTMLElement { * @public */ detachInvalidate(callback: (param: InvalidationInfo) => void) { - this._eventProvider.detachEvent("invalidate", callback); + this._invalidationEventProvider.detachEvent("invalidate", callback); } /** @@ -675,7 +673,8 @@ abstract class UI5Element extends HTMLElement { this.onBeforeRendering(); - this._onComponentStateFinalized(); + // Intended for framework usage only. Currently ItemNavigation updates tab indexes after the component has updated its state but before the template is rendered + this._componentStateFinalizedEventProvider.fireEvent("componentStateFinalized"); // resume normal invalidation handling this._suppressInvalidation = false; @@ -853,29 +852,32 @@ abstract class UI5Element extends HTMLElement { } /** - * @private + * Returns the actual children, associated with a slot. + * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content. + * @public */ - _addItemNavigation(itemNavigation: ItemNavigation) { - this._itemNavigations.push(itemNavigation); + getSlottedNodes(slotName: string) { + return getSlottedNodesList((this as unknown as Record>)[slotName]) as Array; } /** - * Intended for framework usage only. - * Currently, ItemNavigation updates tab indexes after the component has - * updated its state but before the template is rendered - * @private - * */ - _onComponentStateFinalized() { - this._itemNavigations.forEach(itemNavigation => itemNavigation._init()); + * Attach a callback that will be executed whenever the component's state is finalized + * + * @param {} callback + * @public + */ + attachComponentStateFinalized(callback: () => void) { + this._componentStateFinalizedEventProvider.attachEvent("componentStateFinalized", callback); } /** - * Returns the actual children, associated with a slot. - * Useful when there are transitive slots in nested component scenarios and you don't want to get a list of the slots, but rather of their content. + * Detach the callback that is executed whenever the component's state is finalized + * + * @param {} callback * @public */ - getSlottedNodes(slotName: string) { - return getSlottedNodesList((this as unknown as Record>)[slotName]) as Array; + detachComponentStateFinalized(callback: () => void) { + this._componentStateFinalizedEventProvider.detachEvent("componentStateFinalized", callback); } /** diff --git a/packages/base/src/delegate/ItemNavigation.ts b/packages/base/src/delegate/ItemNavigation.ts index 2dc0037bc604..ca6566b3c23d 100644 --- a/packages/base/src/delegate/ItemNavigation.ts +++ b/packages/base/src/delegate/ItemNavigation.ts @@ -81,6 +81,8 @@ class ItemNavigation { _skipItemsSize: number | null; + _initBound: () => void; + /** * * @param rootWebComponent the component to operate on (component that slots or contains within its shadow root the items the user navigates among) @@ -102,7 +104,8 @@ class ItemNavigation { this.rootWebComponent = rootWebComponent; this.rootWebComponent.addEventListener("keydown", this._onkeydown.bind(this)); - this.rootWebComponent._addItemNavigation(this); + this._initBound = this._init.bind(this); + this.rootWebComponent.attachComponentStateFinalized(this._initBound); if (typeof options.getItemsCallback !== "function") { throw new Error("getItemsCallback is required"); From f627c55bd8833f1f703e5bb27452168e8d27fded Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Wed, 8 Nov 2023 02:01:23 -0800 Subject: [PATCH 38/69] Translation Delivery (#7801) [INTERNAL] Translation delivery: commit by LX Lab Change-Id: Ide3fe3c783736e465f97dd73136cc4e45a0c57cd --- packages/main/src/i18n/messagebundle_en.properties | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/i18n/messagebundle_en.properties b/packages/main/src/i18n/messagebundle_en.properties index aed010edd0bd..49885ad5bf28 100644 --- a/packages/main/src/i18n/messagebundle_en.properties +++ b/packages/main/src/i18n/messagebundle_en.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available INPUT_SUGGESTIONS_NO_HIT=No results +INPUT_CLEAR_ICON_ACC_NAME=Clear + LINK_SUBTLE=Subtle LINK_EMPHASIZED=Emphasized From b68b538e9a59888b73f360da9b6bf98c94548e62 Mon Sep 17 00:00:00 2001 From: Georgieva Date: Wed, 8 Nov 2023 13:51:46 +0200 Subject: [PATCH 39/69] docs(ui5-side-navigation): edit sample (#7818) The sample should not have error in the console: "Identifier 'sidenav' has already been declared" Fixes: #7809 --- .../_stories/fiori/SideNavigation/SideNavigation.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/_stories/fiori/SideNavigation/SideNavigation.stories.ts b/packages/playground/_stories/fiori/SideNavigation/SideNavigation.stories.ts index a5534bbe1092..5c829fe12bd7 100644 --- a/packages/playground/_stories/fiori/SideNavigation/SideNavigation.stories.ts +++ b/packages/playground/_stories/fiori/SideNavigation/SideNavigation.stories.ts @@ -155,7 +155,7 @@ ToolLayout.decorators = [
    + + + + + + + + + + +
    diff --git a/packages/main/test/specs/List.spec.js b/packages/main/test/specs/List.spec.js index e790dc1d2bcf..ae40832a45af 100644 --- a/packages/main/test/specs/List.spec.js +++ b/packages/main/test/specs/List.spec.js @@ -576,4 +576,17 @@ describe("List Tests", () => { assert.strictEqual(await itemCloseResult.getProperty("value"), "0", "item-close event is not fired when the button is pressed."); }); + + it("List item fires _request-tabindex-change event and updates tabindex when inner element receives focus", async () => { + const innerElement = await browser.$("#effectiveTabindexChange #country11 button"); + const listItem = await browser.$("#effectiveTabindexChange #country11"); + const rootItemElement = await listItem.shadow$(".ui5-li-root"); + + // Focus on the target list item + await innerElement.click(); + + const newTabIndex = await rootItemElement.getAttribute("tabindex"); + + assert.equal(newTabIndex , "0", "The tabIndex of the list item root should be '0' when inner element receives focus."); + }); }); From 2883c587f367e51e0f08065498b990f86e60e88c Mon Sep 17 00:00:00 2001 From: yanaminkova <32466553+yanaminkova@users.noreply.github.com> Date: Mon, 13 Nov 2023 13:32:59 +0200 Subject: [PATCH 45/69] feat(ui5-illustrated-message): titleLevel property added (#7771) Closes: #7037 --- packages/fiori/src/IllustratedMessage.hbs | 2 +- packages/fiori/src/IllustratedMessage.ts | 15 +++++++++++ .../fiori/test/pages/IllustratedMessage.html | 2 +- .../test/specs/IllustratedMessage.spec.js | 25 +++++++++++++++++++ .../IllustratedMessage.stories.ts | 3 ++- 5 files changed, 44 insertions(+), 3 deletions(-) diff --git a/packages/fiori/src/IllustratedMessage.hbs b/packages/fiori/src/IllustratedMessage.hbs index 7871e6c49f3c..14a36b98b7e7 100644 --- a/packages/fiori/src/IllustratedMessage.hbs +++ b/packages/fiori/src/IllustratedMessage.hbs @@ -6,7 +6,7 @@ {{#if hasFormattedTitle}} {{else}} - {{effectiveTitleText}} + {{effectiveTitleText}} {{/if}} {{/if}} diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index c4167028d412..30832e3e8691 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -9,6 +9,7 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js"; import Title from "@ui5/webcomponents/dist/Title.js"; +import TitleLevel from "@ui5/webcomponents/dist/types/TitleLevel.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import IllustrationMessageSize from "./types/IllustrationMessageSize.js"; import IllustrationMessageType from "./types/IllustrationMessageType.js"; @@ -153,6 +154,20 @@ class IllustratedMessage extends UI5Element { @property({ defaultValue: "" }) accessibleNameRef!: string; + /** + * Defines the semantic level of the title. + * + * Note: Used for accessibility purposes only. + * + * @type {sap.ui.webc.main.types.TitleLevel} + * @defaultvalue "H2" + * @name sap.ui.webc.fiori.IllustratedMessage.prototype.titleLevel + * @public + * @since 1.20.0 + */ + @property({ type: TitleLevel, defaultValue: TitleLevel.H2 }) + titleLevel!: `${TitleLevel}`; + /** * Illustration breakpoint variant for the Spot size. * diff --git a/packages/fiori/test/pages/IllustratedMessage.html b/packages/fiori/test/pages/IllustratedMessage.html index b91d160bdb10..c830f9be24bb 100644 --- a/packages/fiori/test/pages/IllustratedMessage.html +++ b/packages/fiori/test/pages/IllustratedMessage.html @@ -141,7 +141,7 @@ - +
    Please try again or contact us at example@example.com
    Try again     diff --git a/packages/fiori/test/specs/IllustratedMessage.spec.js b/packages/fiori/test/specs/IllustratedMessage.spec.js index f40b8df3c397..729e0575ec26 100644 --- a/packages/fiori/test/specs/IllustratedMessage.spec.js +++ b/packages/fiori/test/specs/IllustratedMessage.spec.js @@ -80,6 +80,31 @@ describe("Accessibility", () => { }); + it("title-level", async () => { + // Arrange + const illustratedMsg = await browser.$("#illustratedMsg2"), + illustratedMsgTitle = await browser.$("#illustratedMsg2").shadow$(".ui5-illustrated-message-root ui5-title"), + EXPECTED_TITLE_lEVEL = "H6", + NEW_TITLE_LEVEL = "H3", + DEFAULT_TITLE_LEVEL = "H2"; + + // Assert + assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), EXPECTED_TITLE_lEVEL, "level is set"); + + // Act + await illustratedMsg.setAttribute("title-level", NEW_TITLE_LEVEL); + + // Assert + assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), NEW_TITLE_LEVEL, "level is set"); + + // Act + await illustratedMsg.removeAttribute("title-level"); + + // Assert + assert.strictEqual(await illustratedMsgTitle.getAttribute("level"), DEFAULT_TITLE_LEVEL, "level has the default value"); + + }); + }); describe("Vertical responsiveness", () => { diff --git a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts index a96f1c22bd53..628055d79ca6 100644 --- a/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts +++ b/packages/playground/_stories/fiori/IllustratedMessage/IllustratedMessage.stories.ts @@ -33,8 +33,9 @@ const Template: UI5StoryArgs = ( subtitle-text="${ifDefined(args.subtitleText)}" title-text="${ifDefined(args.titleText)}" accessible-name-ref="${ifDefined(args.accessibleNameRef)}" + title-level="${ifDefined(args.titleLevel)}" > - ${unsafeHTML(args.title)} + ${unsafeHTML(args.title)} ${unsafeHTML(args.subtitle)} ${unsafeHTML(args.default)}     `; From a13a0b490370a2463428d1f55391c0a329f83bbe Mon Sep 17 00:00:00 2001 From: Diana Pazheva Date: Mon, 13 Nov 2023 16:23:35 +0200 Subject: [PATCH 46/69] docs(playground): enhance editing of custom type properties (#7774) * docs(playground): enhance editing of custom typeproperties Related to: #7284 Problem: Some components have properties of custom types that extend sap.ui.webc.base.types.DataType. Storybook allows editing the values of those properies in the Controls addon, but by default storybook allows to edit them via controls of type object. However, in most cases, the more suitable control for editing those values would be of type text or number. Solution: Further customized the story settings to specify the expected control type. To handle the issue globally, added that logic to the existing script that sets control types based on property type. * docs(playground): utilize native Array.prototype.includes function --- .../build-scripts-storybook/samples-prepare.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/packages/playground/build-scripts-storybook/samples-prepare.js b/packages/playground/build-scripts-storybook/samples-prepare.js index 48f605ecacaa..0176229d25c8 100644 --- a/packages/playground/build-scripts-storybook/samples-prepare.js +++ b/packages/playground/build-scripts-storybook/samples-prepare.js @@ -2,6 +2,8 @@ const fs = require('fs/promises'); const path = require('path'); const STORIES_ROOT_FOLDER_NAME = '../_stories'; +const NUMERIC_TYPES = ["sap.ui.webc.base.types.Integer", "sap.ui.webc.base.types.Float"]; +const STRING_TYPES = ["sap.ui.webc.base.types.CSSColor", "sap.ui.webc.base.types.DOMReference"]; // run the script to generate the argTypes for the stories available in the _stories folder const main = async () => { @@ -73,6 +75,18 @@ export type StoryArgsSlots = { control: "select", options: typeEnum.properties.map(a => a.type), }; + } else if (NUMERIC_TYPES.includes(typeEnum?.name)) { + args[prop.name] = { + control: { + type: "number" + }, + }; + } else if (STRING_TYPES.includes(typeEnum?.name)) { + args[prop.name] = { + control: { + type: "text" + }, + }; } } }); From bccffe54b8563f840e19f6701ca42a79e4ff4c57 Mon Sep 17 00:00:00 2001 From: TeodorTaushanov Date: Tue, 14 Nov 2023 17:09:08 +0200 Subject: [PATCH 47/69] refactor(ui5-tree): remove unnecessary code (#7804) * refactor(ui5-tree): remove unnecessary code * refactor(ui5-tree): fix comment * refactor(ui5-tree): remove unnecessary parameters --- packages/main/src/Tree.ts | 22 +--------- packages/main/src/TreeItem.ts | 2 +- packages/main/src/TreeItemBase.hbs | 13 +----- packages/main/src/TreeItemBase.ts | 42 ++----------------- packages/main/src/themes/ListItemBase.css | 9 ++-- packages/main/src/themes/TreeItem.css | 37 ---------------- .../themes/base/ListItemBase-parameters.css | 3 -- .../src/themes/base/TreeItem-parameters.css | 4 -- .../themes/sap_fiori_3/parameters-bundle.css | 1 - .../sap_fiori_3_dark/parameters-bundle.css | 1 - .../sap_fiori_3_hcb/parameters-bundle.css | 1 - .../sap_fiori_3_hcw/parameters-bundle.css | 1 - .../sap_horizon/TreeItem-parameters.css | 6 --- .../themes/sap_horizon/parameters-bundle.css | 1 - .../sap_horizon_dark/TreeItem-parameters.css | 6 --- .../sap_horizon_dark/parameters-bundle.css | 1 - .../TreeItem-parameters.css | 6 --- .../parameters-bundle.css | 1 - .../sap_horizon_exp/TreeItem-parameters.css | 6 --- .../sap_horizon_exp/parameters-bundle.css | 1 - .../sap_horizon_hcb/TreeItem-parameters.css | 6 --- .../sap_horizon_hcb/parameters-bundle.css | 1 - .../TreeItem-parameters.css | 6 --- .../sap_horizon_hcb_exp/parameters-bundle.css | 1 - .../sap_horizon_hcw/TreeItem-parameters.css | 6 --- .../sap_horizon_hcw/parameters-bundle.css | 1 - .../TreeItem-parameters.css | 6 --- .../sap_horizon_hcw_exp/parameters-bundle.css | 1 - 28 files changed, 10 insertions(+), 182 deletions(-) delete mode 100644 packages/main/src/themes/base/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_dark/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_dark_exp/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_exp/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_hcb/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_hcb_exp/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_hcw/TreeItem-parameters.css delete mode 100644 packages/main/src/themes/sap_horizon_hcw_exp/TreeItem-parameters.css diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts index 8b948a061a7f..842ebd0b7868 100644 --- a/packages/main/src/Tree.ts +++ b/packages/main/src/Tree.ts @@ -276,24 +276,6 @@ class Tree extends UI5Element { @property({ defaultValue: undefined, noAttribute: true }) accessibleRoleDescription?: string; - /** - * Shows the toggle button at the end, rather than at the beginning of the items - * - * @protected - * @since 1.0.0-rc.8 - */ - @property({ type: Boolean }) - _toggleButtonEnd!: boolean; - - /** - * Represents the tree in a very minimal state - icons only with no text and no toggle buttons - * - * @protected - * @since 1.0.0-rc.8 - */ - @property({ type: Boolean }) - _minimal!: boolean; - /** * Defines the items of the component. Tree items may have other tree items as children. *

    @@ -336,7 +318,7 @@ class Tree extends UI5Element { } get _role() { - return this._minimal ? "menubar" : "tree"; + return "tree"; } get _label() { @@ -429,8 +411,6 @@ class Tree extends UI5Element { item.setAttribute("level", level.toString()); - item._toggleButtonEnd = this._toggleButtonEnd; - item._minimal = this._minimal; item._setsize = ariaSetSize; item._posinset = index + 1; }); diff --git a/packages/main/src/TreeItem.ts b/packages/main/src/TreeItem.ts index 2ae26ae4b5c1..ce123ea0729b 100644 --- a/packages/main/src/TreeItem.ts +++ b/packages/main/src/TreeItem.ts @@ -81,7 +81,7 @@ class TreeItem extends TreeItemBase { additionalTextState!: `${ValueState}`; get _showTitle() { - return this.text.length && !this._minimal; + return this.text.length; } } diff --git a/packages/main/src/TreeItemBase.hbs b/packages/main/src/TreeItemBase.hbs index 2cf49ca9f39f..cfaf020a6b6d 100644 --- a/packages/main/src/TreeItemBase.hbs +++ b/packages/main/src/TreeItemBase.hbs @@ -9,7 +9,7 @@ class="ui5-li-tree-toggle-box" style="{{styles.preContent}}" > - {{#if _showToggleButtonBeginning}} + {{#if showToggleButton}} - {{/if}} -{{/inline}} - {{#*inline "listItemPostContent"}} {{#if expanded}}
      Date: Wed, 15 Nov 2023 11:27:01 +0200 Subject: [PATCH 48/69] docs(playground): correct brand url (#7847) --- packages/playground/.storybook/sbTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/playground/.storybook/sbTheme.ts b/packages/playground/.storybook/sbTheme.ts index 3dcfa3cb99b5..dec5ceddbaea 100644 --- a/packages/playground/.storybook/sbTheme.ts +++ b/packages/playground/.storybook/sbTheme.ts @@ -4,6 +4,6 @@ export default create({ base: "light", brandTitle: "UI5 Web Components", brandImage: `../assets/images/sb-logo.png`, - brandUrl: './', + brandUrl: '../', brandTarget: "_self", }); From e344a02dd271fcb66af4c77d1570bd2c8bebc75d Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Wed, 15 Nov 2023 14:44:59 +0200 Subject: [PATCH 49/69] chore: stable ui5-menu tests (#7849) * chore: stable ui5-menu tests * chore: remove only keyword --------- Co-authored-by: Nayden Naydenov --- packages/main/test/specs/Menu.spec.js | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/packages/main/test/specs/Menu.spec.js b/packages/main/test/specs/Menu.spec.js index 3dcd37530564..69d255036728 100644 --- a/packages/main/test/specs/Menu.spec.js +++ b/packages/main/test/specs/Menu.spec.js @@ -52,18 +52,30 @@ describe("Menu interaction", () => { openButton.click(); const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#menu"); - const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); + const staticAreaItem = await browser.$(`.${staticAreaItemClassName}`); + const popover = staticAreaItem.shadow$("ui5-responsive-popover"); const listItems = await popover.$("ui5-list").$$("ui5-li"); + const submenuList = await staticAreaItem.shadow$(".ui5-menu-submenus"); listItems[3].click(); // open sub-menu - assert.ok(await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-menu-submenus").$("ui5-menu"), - "The second level sub-menu is being created"); // new ui5-menu element is created for the sub-menu + await submenuList.$("ui5-menu").waitForExist({ + timeout: 1000, + timeoutMsg: "The second level sub-menu is should be created" + }) + + assert.ok(await submenuList.$("ui5-menu"), "The second level sub-menu is being created"); // new ui5-menu element is created for the sub-menu await browser.keys("ArrowLeft"); // back to main menu await browser.keys("ArrowDown"); // go to the next menu item (close sub-menu) - assert.strictEqual(await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-menu-submenus").$$("ui5-menu").length, 0, + await submenuList.$("ui5-menu").waitForExist({ + reverse: true, + timeout: 1000, + timeoutMsg: "The second level sub-menu is should be destroyed" + }) + + assert.strictEqual(await submenuList.$$("ui5-menu").length, 0, "The second level sub-menu is being destroyed"); // sub-menu ui5-menu element is destroyed }); From feaa199dac11125b849623f85e1595ce9addb29e Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Thu, 16 Nov 2023 08:08:08 +0000 Subject: [PATCH 50/69] chore(release): publish v1.20.0-rc.1 [ci skip] --- CHANGELOG.md | 17 +++++++++++++++++ lerna.json | 2 +- packages/base/CHANGELOG.md | 8 ++++++++ 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 | 11 +++++++++++ packages/main/package.json | 12 ++++++------ packages/playground/CHANGELOG.md | 11 +++++++++++ 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 +- 24 files changed, 153 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ff4c31afca8..500c02f9c09b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,23 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Bug Fixes + +* declare webpackChunkName in generated dynamic imports for readable runtime bundle names ([#7835](https://github.com/SAP/ui5-webcomponents/issues/7835)) ([592a10b](https://github.com/SAP/ui5-webcomponents/commit/592a10b25a14da89885874c40c5c7a192b8b4d85)) +* **ui5-list:** shift+tab navigation in List ([#7728](https://github.com/SAP/ui5-webcomponents/issues/7728)) ([399b941](https://github.com/SAP/ui5-webcomponents/commit/399b941ebeae7b44f6dba9cd4e8ec7ebb6f283c6)) + + +### Features + +* **ui5-illustrated-message:** titleLevel property added ([#7771](https://github.com/SAP/ui5-webcomponents/issues/7771)) ([2883c58](https://github.com/SAP/ui5-webcomponents/commit/2883c587f367e51e0f08065498b990f86e60e88c)), closes [#7037](https://github.com/SAP/ui5-webcomponents/issues/7037) + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) diff --git a/lerna.json b/lerna.json index d5b09991f50c..4bc6b7e7b3c3 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index 6fde7010545d..3b94cd5fdba2 100644 --- a/packages/base/CHANGELOG.md +++ b/packages/base/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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) diff --git a/packages/base/package.json b/packages/base/package.json index 0828b46c484a..7bba88ee8f64 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.base", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -37,7 +37,7 @@ "devDependencies": { "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.20.0-rc.0", + "@ui5/webcomponents-tools": "1.20.0-rc.1", "chromedriver": "117.0.3", "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 5590b9b83c66..9da7efc03271 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **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 7dab73a4dbce..4cfbcf189f8f 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "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 87ab989b244d..5981f94b21ff 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Features + +* **ui5-illustrated-message:** titleLevel property added ([#7771](https://github.com/SAP/ui5-webcomponents/issues/7771)) ([2883c58](https://github.com/SAP/ui5-webcomponents/commit/2883c587f367e51e0f08065498b990f86e60e88c)), closes [#7037](https://github.com/SAP/ui5-webcomponents/issues/7037) + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 61148a5800b8..b33288922e51 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -41,14 +41,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.20.0-rc.0", - "@ui5/webcomponents-base": "1.20.0-rc.0", - "@ui5/webcomponents-icons": "1.20.0-rc.0", - "@ui5/webcomponents-theming": "1.20.0-rc.0", + "@ui5/webcomponents": "1.20.0-rc.1", + "@ui5/webcomponents-base": "1.20.0-rc.1", + "@ui5/webcomponents-icons": "1.20.0-rc.1", + "@ui5/webcomponents-theming": "1.20.0-rc.1", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.20.0-rc.0", + "@ui5/webcomponents-tools": "1.20.0-rc.1", "chromedriver": "117.0.3" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index 9b9a883ea73f..c5980781b2fc 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **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 54d8a56dfa9b..1d7b63a91c98 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.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-business-suite" }, "dependencies": { - "@ui5/webcomponents-base": "1.20.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.20.0-rc.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index fd6948d7776e..8efcad50d5f1 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **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 4d2041805070..a371dc833be9 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: SAP Fiori Tools icon set", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons-tnt" }, "dependencies": { - "@ui5/webcomponents-base": "1.20.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.20.0-rc.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index d5910fe85c13..42c86f9bc5d4 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index 943fc8eac1d3..ee8931a96c64 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.SAP-icons", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -27,9 +27,9 @@ "directory": "packages/icons" }, "dependencies": { - "@ui5/webcomponents-base": "1.20.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.20.0-rc.0" + "@ui5/webcomponents-tools": "1.20.0-rc.1" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index 1915ec566677..e1dfe29d5a25 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Bug Fixes + +* declare webpackChunkName in generated dynamic imports for readable runtime bundle names ([#7835](https://github.com/SAP/ui5-webcomponents/issues/7835)) ([592a10b](https://github.com/SAP/ui5-webcomponents/commit/592a10b25a14da89885874c40c5c7a192b8b4d85)) + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index 9d1d26a62984..64c54241ae8b 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "Localization for UI5 Web Components", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -29,13 +29,13 @@ }, "devDependencies": { "@openui5/sap.ui.core": "1.116.0", - "@ui5/webcomponents-tools": "1.20.0-rc.0", + "@ui5/webcomponents-tools": "1.20.0-rc.1", "chromedriver": "117.0.3", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.20.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index f0d287b7d7a0..99c45b3a3a0d 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Bug Fixes + +* **ui5-list:** shift+tab navigation in List ([#7728](https://github.com/SAP/ui5-webcomponents/issues/7728)) ([399b941](https://github.com/SAP/ui5-webcomponents/commit/399b941ebeae7b44f6dba9cd4e8ec7ebb6f283c6)) + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) diff --git a/packages/main/package.json b/packages/main/package.json index 05daf170a363..099188c94e18 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -43,13 +43,13 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.20.0-rc.0", - "@ui5/webcomponents-icons": "1.20.0-rc.0", - "@ui5/webcomponents-localization": "1.20.0-rc.0", - "@ui5/webcomponents-theming": "1.20.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1", + "@ui5/webcomponents-icons": "1.20.0-rc.1", + "@ui5/webcomponents-localization": "1.20.0-rc.1", + "@ui5/webcomponents-theming": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.20.0-rc.0", + "@ui5/webcomponents-tools": "1.20.0-rc.1", "chromedriver": "117.0.3" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index da68881d63ca..8d3211c29c70 100644 --- a/packages/playground/CHANGELOG.md +++ b/packages/playground/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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Features + +* **ui5-illustrated-message:** titleLevel property added ([#7771](https://github.com/SAP/ui5-webcomponents/issues/7771)) ([2883c58](https://github.com/SAP/ui5-webcomponents/commit/2883c587f367e51e0f08065498b990f86e60e88c)), closes [#7037](https://github.com/SAP/ui5-webcomponents/issues/7037) + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **Note:** Version bump only for package @ui5/webcomponents-playground diff --git a/packages/playground/package.json b/packages/playground/package.json index 6f1983364717..25a9a747a580 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "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 b80c646ceab2..0e4e2a4d0df6 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 8d03c45abf4e..ceed463d4c6c 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.theming", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", @@ -30,10 +30,10 @@ }, "dependencies": { "@sap-theming/theming-base-content": "11.6.8", - "@ui5/webcomponents-base": "1.20.0-rc.0" + "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.20.0-rc.0", + "@ui5/webcomponents-tools": "1.20.0-rc.1", "cssnano": "^6.0.1", "globby": "^13.1.1", "json-beautify": "^1.1.1", diff --git a/packages/tools/CHANGELOG.md b/packages/tools/CHANGELOG.md index 9529819f07a1..e62ef63ccc5a 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.20.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.20.0-rc.0...v1.20.0-rc.1) (2023-11-16) + + +### Bug Fixes + +* declare webpackChunkName in generated dynamic imports for readable runtime bundle names ([#7835](https://github.com/SAP/ui5-webcomponents/issues/7835)) ([592a10b](https://github.com/SAP/ui5-webcomponents/commit/592a10b25a14da89885874c40c5c7a192b8b4d85)) + + + + + # [1.20.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.19.0...v1.20.0-rc.0) (2023-11-09) **Note:** Version bump only for package @ui5/webcomponents-tools diff --git a/packages/tools/package.json b/packages/tools/package.json index b7cb2bbdf2ac..173cc96e7e94 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.20.0-rc.0", + "version": "1.20.0-rc.1", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From 14c0afc64fe60a4857fbaeb3c3913c21dfe00f74 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Thu, 16 Nov 2023 11:40:18 +0200 Subject: [PATCH 51/69] docs: mark form properties in TextArea, StepInput (#7859) ding these tags to the form related "value" property, used by the ui5-webc-ngx wrappers to properly generate the required value accessors so the ui5-webc-ngx wrappers work in Angular reactive forms. --- packages/main/src/StepInput.ts | 2 ++ packages/main/src/TextArea.ts | 4 +++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 1e378eceba49..86bb14c6c8a9 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -116,6 +116,8 @@ class StepInput extends UI5Element implements IFormElement { * * @name sap.ui.webc.main.StepInput.prototype.value * @type {sap.ui.webc.base.types.Float} + * @formEvents change + * @formProperty * @defaultvalue 0 * @public */ diff --git a/packages/main/src/TextArea.ts b/packages/main/src/TextArea.ts index 8269e68d570c..5e5631dbb386 100644 --- a/packages/main/src/TextArea.ts +++ b/packages/main/src/TextArea.ts @@ -120,9 +120,11 @@ class TextArea extends UI5Element implements IFormElement { * * @type {string} * @name sap.ui.webc.main.TextArea.prototype.value + * @formEvents change input + * @formProperty * @defaultvalue "" * @public - */ + */ @property() value!: string; /** From 0beb0a616ff8d61e3f8eb08d03d983d55071db0b Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Thu, 16 Nov 2023 11:40:49 +0200 Subject: [PATCH 52/69] docs: update Angular tutorial (#7803) The angular tutorial has been update to demonstrate both UI5 Web Components and UI5 Web Components for Angular usage. We no longer recommend Origami, instead we added a sample how to build Form and make use of two-way data binding via the UI5 Web Components for Angular wrappers. --- docs/4-frameworks/01-React.md | 2 +- docs/4-frameworks/02-Angular.md | 229 +++++++++++++++++++++++++------- 2 files changed, 182 insertions(+), 49 deletions(-) diff --git a/docs/4-frameworks/01-React.md b/docs/4-frameworks/01-React.md index f8fcf353bc6c..a9a6472e878d 100644 --- a/docs/4-frameworks/01-React.md +++ b/docs/4-frameworks/01-React.md @@ -2,7 +2,7 @@ In this tutorial, you will learn how to add UI5 Web Components to your application. You can add UI5 Web Components both to new React applications and to already existing ones. -**Important:** The get the best development experience, we recommend using the [UI5 Web Components for React](https://github.com/SAP/ui5-webcomponents-react) and follow the [UI5 Web Components for React Тutorial](https://developers.sap.com/mission.react-spa.html). UI5 Web Components for React library is a React implementation of UI5 Web Components which overcomes several limitations of React in handling web components in general, explained in the "Additional Info" section below. +**Important:** To get the best development experience, we recommend using the [UI5 Web Components for React](https://github.com/SAP/ui5-webcomponents-react) and follow the [UI5 Web Components for React Тutorial](https://developers.sap.com/mission.react-spa.html). UI5 Web Components for React library is a React implementation of UI5 Web Components which overcomes several limitations of React in handling web components in general, explained in the "Additional Info" section below. Here are the steps to use pure UI5 Web Components in React: diff --git a/docs/4-frameworks/02-Angular.md b/docs/4-frameworks/02-Angular.md index abc4af553272..62d5697d9177 100644 --- a/docs/4-frameworks/02-Angular.md +++ b/docs/4-frameworks/02-Angular.md @@ -1,6 +1,10 @@ # Get Started with UI5 Web Components & Angular -In this tutorial, you will learn how to add UI5 Web Components to your application. The UI5 Web Components can be added both to new Angular applications and to already existing ones. +In this tutorial, you will learn how to use `UI5 Web Components` in an Angular application. In the second part, we will introduce `UI5 Web Components for Angular` - wrapper library for UI5 Web Components, improving their integration with Angular. + +**Note:** To get the best development experience, we recommend using the [UI5 Web Components for Angular](https://ui5-webcomponents-ngx.netlify.app). The library removes the need for `CUSTOM_ELEMENTS_SCHEMA` and `NO_ERRORS_SCHEMA` schemas, and supports all Angular-specific features out-of-the-box. + +## UI5 Web Components ### Step 1. Install Angular CLI. @@ -10,26 +14,30 @@ npm install -g @angular/cli ### Step 2. Create a new Angular application. +Use the standard path to setup a new Angular app. + ```bash ng new ui5-web-components-application cd ui5-web-components-application ``` -### Step 3. Add UI5 Web Components. +### Step 3. Install UI5 Web Components. ```bash -npm install @ui5/webcomponents --save +npm install @ui5/webcomponents ``` -### Step 4. Allow the use of custom elements in Angular. +### Step 4. Allow Custom Elements in Angular. -Before using UI5 Web Components, you have to allow the use of custom elements in Angular. To do so, import CUSTOM_ELEMENTS_SCHEMA in ```app.module.ts``` : +Before using UI5 Web Components, you have to allow the use of custom elements via the `CUSTOM_ELEMENTS_SCHEMA`. This allows an NgModule to contain Non-Angular elements named with dash. + +- Import `CUSTOM_ELEMENTS_SCHEMA` in `app.module.ts`: ```js import { ..., CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; ``` -After importing it, add it to the schemas array: +- Add `CUSTOM_ELEMENTS_SCHEMA` to the schemas array: ```js imports: [ @@ -40,13 +48,30 @@ schemas: [ ] ``` -### Step 5. Import the components you are going to use. +### Step 5. Import UI5 Web Components. + +Import the components you are going to use. + +Let's import the Button in `app.component.ts`: ```js -import "@ui5/webcomponents/dist/Button.js"; +import { Component } from '@angular/core'; + +import '@ui5/webcomponents/dist/Button.js'; + +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', +}) +export class AppComponent { +} ``` -### Step 6. Use the imported elements in your application. +### Step 6. Use UI5 Web Components. + +Use the imported components in your application by their tag names - as any other HTML element. + +Let's add the button into the `app.component.html` template: ```html Hello world! @@ -58,73 +83,181 @@ import "@ui5/webcomponents/dist/Button.js"; ng serve -o ``` -## Additional Info +After the development server starts, the UI5 Web Components Button will be rendered in the test page. Now that you've seen how easy it is to use the UI5 Web Components, you can continue with adding more components in the same manner. + + +## UI5 Web Components For Angular + +UI5 Web Components for Angular is a wrapper library for UI5 Web Components. This means that for every UI5 Web Component, there is a corresponding Angular wrapper component available. -### Two-Way Data Binding +**For Example:** -You can use two-way data binding with the following components: CheckBox, RadioButton, Input, DatePicker, Switch, TextArea. -In order to use it, you have to use a library called [Origami](https://github.com/hotforfeature/origami) that provides advanced support for two-way data binding of custom elements. +- The native Button web component +```js +import '@ui5/webcomponents/dist/Button.js'; +``` + +- The "ngx" Button wrapper component +```js +import { ButtonComponent } from '@ui5/webcomponents-ngx/main/button'; +``` -Example: +These wrappers supports all Angular-specific features out-of-the-box, f.e. two-way data binding with `NgModel`, as they are native to Angular. + +### Angular Form with `NgModel` + +The following section demonstrates how to build template-driven Angular form (following the oficial [Angular documentation](https://angular.io/guide/forms)) with UI5 Web Components For Angular. It illustrates the usage of two-way data binding to update the data model in the component as changes are made in the template and vice versa. + +### Step 1. Setup Angular project + +```bash +npm install -g @angular/cli +ng new ui5-web-components-ngx-application +cd ui5-web-components-ngx-application +``` + +### Step 2. Install UI5 Web Components for Angular. -#### 1. Install Origami. ```bash -npm install @codebakery/origami +npm install @ui5/webcomponents-ngx ``` -#### 2. Import the OrigamiFormsModule from Origami. +### Step 3. Build Angular form. + +To build an Angular Form, we will include the required infrastructure such as the `FormsModule`, track input validity and status using `ngModel` and make use of some form components from `@ui5/webcomponents-ngx`. + + +- Import `FormsModule` in `app.module.ts` and add it to the imports array. ```js -import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; -import { OrigamiFormsModule } from '@codebakery/origami/forms'; + import { AppComponent } from './app.component'; @NgModule({ - imports: [BrowserModule, OrigamiFormsModule], - declarations: [AppComponent], - schemas: [CUSTOM_ELEMENTS_SCHEMA], + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + FormsModule, + ], + providers: [], bootstrap: [AppComponent] }) -export class AppModule {} -``` - -#### 3. Use Origami in your template. - -```html - +export class AppModule { +} ``` -#### 4. Make Angular boot after UI5 Web Components are defined. +- Import `Label`, `Input` and `Button` components from `@ui5/webcomponents-ngx` in `app.module.ts` and add them to the imports array. -Add the ```APP_INITIALIZER``` provider to the module where you are using UI5 Web Components. In order to do so, import ```APP_INITIALIZER``` and add it to the providers array like this (in this example we will add it to the ```app.module.ts```): ```js -import { ..., APP_INITIALIZER } from '@angular/core'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; -import CheckBox from "@ui5/webcomponents/dist/CheckBox"; +import { AppComponent } from './app.component'; -function onAppInit(): () => Promise { - return (): Promise => { - return CheckBox.define(); - }; -} +// UI5 Web Components For Angular +import { LabelComponent } from '@ui5/webcomponents-ngx/main/label'; +import { ButtonComponent } from '@ui5/webcomponents-ngx/main/button'; +import { InputComponent } from '@ui5/webcomponents-ngx/main/input'; @NgModule({ declarations: [ - ... + AppComponent ], imports: [ - ... - ], - providers: [ - { - provide: APP_INITIALIZER, - useFactory: onAppInit, - multi: true - }, + BrowserModule, + FormsModule, + LabelComponent, + InputComponent, + ButtonComponent ], - schemas: [ CUSTOM_ELEMENTS_SCHEMA ], + providers: [], bootstrap: [AppComponent] }) +export class AppModule { +} +``` + +### Step 4. Define a Data Model. + +- Add the following object, that will serve as a data model, to the `AppComponent`: + +```js +// app.component.ts +import { Component } from '@angular/core'; + +export class AppComponent { + model = { + firstName: "", + lastName: "" + }; +} +``` + +### Step 5. Create the Form UI. + +- Add the following inline template to the `AppComponent`. +- Bind form components to data properties using the `ngModel` directive and two-way data-binding syntax. +- Name form controls (e.g. add `name` attribute) to make them accessible to `ngModel`. + +```js +// app.component.ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: `

      Form Works!

      + +
      +
      + First Name: + +
      + +
      + Last Name: + +
      + + Submit + + Form Value: {{heroForm.value | json}} + Form Status: {{heroForm.status}} +
      `, +}) +export class AppComponent { + model = { + firstName: "", + lastName: "" + }; +} +``` + +### Step 5. Launch the application. + +```bash +ng serve -o ``` + +After the development server starts, a simple form will be rendered in the test page. + +Initially, the model is empty and the form is invalid: + +```js +// Form Value: { "firstName": "", "lastName": "" } +// Form Status: "Invalid" +``` + +Start typing in the input fields and you will notice how the form model and form status are updated. + +Good job, the Form works! + +## Summary + +Angular provides good support of web components and `UI5 Web Components` are working perfectly in the majority of use-cases. However, for an enhanced development experience and better support for both template-driven and Reactive forms, the `UI5 Web Components for Angular` is the recommended choice. \ No newline at end of file From 334ed6821433b0364ee65a2db2d3ab44cad0612d Mon Sep 17 00:00:00 2001 From: Peter Skelin Date: Fri, 17 Nov 2023 13:24:25 +0200 Subject: [PATCH 53/69] fix: openui5 support crashes with 1.121-snapshot (#7872) --- packages/base/src/features/OpenUI5Support.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/base/src/features/OpenUI5Support.ts b/packages/base/src/features/OpenUI5Support.ts index 7e6d59c4e747..b634d78017ce 100644 --- a/packages/base/src/features/OpenUI5Support.ts +++ b/packages/base/src/features/OpenUI5Support.ts @@ -54,6 +54,7 @@ type Theming = { type Formatting = { getCalendarType: () => string, getLegacyDateCalendarCustomizing: () => LegacyDateCalendarCustomizing, + getCustomIslamicCalendarData?: () => LegacyDateCalendarCustomizing, } type CalendarUtils = { @@ -137,7 +138,8 @@ class OpenUI5Support { calendarType: Formatting.getCalendarType(), formatSettings: { firstDayOfWeek: CalendarUtils.getWeekConfigurationValues().firstDayOfWeek, - legacyDateCalendarCustomizing: Formatting.getLegacyDateCalendarCustomizing(), + legacyDateCalendarCustomizing: Formatting.getCustomIslamicCalendarData?.() + ?? Formatting.getLegacyDateCalendarCustomizing?.(), }, }; } From 2a31e8d1587a2461099810239364913421708afa Mon Sep 17 00:00:00 2001 From: Tsanislav Gatev Date: Fri, 17 Nov 2023 15:54:50 +0200 Subject: [PATCH 54/69] fix(ui5-calendar): render the correct length of day names (#7866) fixes: #7831 --- packages/main/src/DayPicker.ts | 21 ++++++++++++++++----- packages/main/test/specs/DayPicker.spec.js | 16 ++++++++++++++++ 2 files changed, 32 insertions(+), 5 deletions(-) diff --git a/packages/main/src/DayPicker.ts b/packages/main/src/DayPicker.ts index 0e60f132ce40..81d046b92d3e 100644 --- a/packages/main/src/DayPicker.ts +++ b/packages/main/src/DayPicker.ts @@ -340,10 +340,14 @@ class DayPicker extends CalendarPart implements ICalendarPicker { let dayOfTheWeek; - const aDayNamesWide = localeData.getDays("wide", this._primaryCalendarType); - const aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType); + const aDayNamesWide = localeData.getDays("wide", this._primaryCalendarType) as Array; + let aDayNamesAbbreviated = localeData.getDays("abbreviated", this._primaryCalendarType) as Array; let dayName; + if (this.namesTooLong(aDayNamesAbbreviated)) { + aDayNamesAbbreviated = localeData.getDays("narrow", this._primaryCalendarType) as Array; + } + this._dayNames = []; this._dayNames.push({ classes: "ui5-dp-dayname", @@ -359,17 +363,24 @@ class DayPicker extends CalendarPart implements ICalendarPicker { ultraShortName: aDayNamesAbbreviated[dayOfTheWeek], classes: "ui5-dp-dayname", }; - this._dayNames.push(dayName); } - this._dayNames[1].classes += " ui5-dp-firstday"; - if (this.shouldHideWeekNumbers) { this._dayNames.shift(); } } + /** + * Tells if any of the days is more than 4 characters(too long to render). + * @param { Array } dayNames + * @returns { boolean } + * @private + */ + namesTooLong(dayNames: Array): boolean { + return dayNames.some(dayName => dayName.length > 3); + } + onAfterRendering() { if (this._autoFocus && !this._hidden) { this.focus(); diff --git a/packages/main/test/specs/DayPicker.spec.js b/packages/main/test/specs/DayPicker.spec.js index d77e7513826f..91ed16148656 100644 --- a/packages/main/test/specs/DayPicker.spec.js +++ b/packages/main/test/specs/DayPicker.spec.js @@ -45,4 +45,20 @@ describe("Day Picker Tests", () => { assert.strictEqual(selectedDate, new Date(Date.now() + 24 * 3600 * 1000).getDate(), "Dates are equal"); }); + + it("Day names are correctly displayed when length is less than 3", async () => { + const dayPickerFirstDayName = await browser.$(`#${daypicker._sut}`).shadow$(".ui5-dp-firstday"); + const dayPickerFirstDayNameText = await dayPickerFirstDayName.getProperty("textContent"); + + assert.strictEqual(dayPickerFirstDayNameText, "Sun", "Name is rendered correctly"); + }); + + it("Day names are correctly displayed when length is more than 3", async () => { + browser.url(`test/pages/DayPicker.html?sap-ui-language=pt_PT`); + + const dayPickerFirstDayName = await browser.$(`#${daypicker._sut}`).shadow$(".ui5-dp-firstday"); + const dayPickerFirstDayNameText = await dayPickerFirstDayName.getProperty("textContent"); + + assert.strictEqual(dayPickerFirstDayNameText, "D", "Name is rendered correctly"); + }); }); From 8b620d7dcb5032bfc71be4fe70bb09cbd8e20aa0 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 17 Nov 2023 23:40:03 +0200 Subject: [PATCH 55/69] build(deps-dev): bump chromedriver from 117.0.3 to 119.0.1 in /packages/fiori (#7864) build(deps-dev): bump chromedriver in /packages/fiori Bumps [chromedriver](https://github.com/giggio/node-chromedriver) from 117.0.3 to 119.0.1. - [Commits](https://github.com/giggio/node-chromedriver/compare/117.0.3...119.0.1) --- updated-dependencies: - dependency-name: chromedriver dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/fiori/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/package.json b/packages/fiori/package.json index b33288922e51..87d9188ee4be 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -49,6 +49,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "117.0.3" + "chromedriver": "119.0.1" } } From d666263bee3c94aba36abb125833609dc3e6d600 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 17 Nov 2023 23:40:18 +0200 Subject: [PATCH 56/69] build(deps-dev): bump chromedriver from 117.0.3 to 119.0.1 in /packages/base (#7863) build(deps-dev): bump chromedriver in /packages/base Bumps [chromedriver](https://github.com/giggio/node-chromedriver) from 117.0.3 to 119.0.1. - [Commits](https://github.com/giggio/node-chromedriver/compare/117.0.3...119.0.1) --- updated-dependencies: - dependency-name: chromedriver dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/base/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base/package.json b/packages/base/package.json index 7bba88ee8f64..3553351160bb 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -38,7 +38,7 @@ "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "117.0.3", + "chromedriver": "119.0.1", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", "cross-env": "^7.0.3", From 17a2a09c0a63431ed6b904bf6544d042a6ac479e Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 17 Nov 2023 23:40:32 +0200 Subject: [PATCH 57/69] build(deps-dev): bump chromedriver from 117.0.3 to 119.0.1 in /packages/main (#7861) build(deps-dev): bump chromedriver in /packages/main Bumps [chromedriver](https://github.com/giggio/node-chromedriver) from 117.0.3 to 119.0.1. - [Commits](https://github.com/giggio/node-chromedriver/compare/117.0.3...119.0.1) --- updated-dependencies: - dependency-name: chromedriver dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/main/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/package.json b/packages/main/package.json index 099188c94e18..bff024535475 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -50,6 +50,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "117.0.3" + "chromedriver": "119.0.1" } } From 3be1877f981a3640e2b023652e4b24d256019bc5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 17 Nov 2023 23:40:54 +0200 Subject: [PATCH 58/69] build(deps-dev): bump chromedriver from 117.0.3 to 119.0.1 in /packages/localization (#7862) build(deps-dev): bump chromedriver in /packages/localization Bumps [chromedriver](https://github.com/giggio/node-chromedriver) from 117.0.3 to 119.0.1. - [Commits](https://github.com/giggio/node-chromedriver/compare/117.0.3...119.0.1) --- updated-dependencies: - dependency-name: chromedriver dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- packages/localization/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/localization/package.json b/packages/localization/package.json index 64c54241ae8b..ba1d544ae2b2 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -30,7 +30,7 @@ "devDependencies": { "@openui5/sap.ui.core": "1.116.0", "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "117.0.3", + "chromedriver": "119.0.1", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, From 98a0cf1a5c61c75c33843ee9acedf976b4ed1550 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 17 Nov 2023 23:42:27 +0200 Subject: [PATCH 59/69] build(deps): bump axios from 1.4.0 to 1.6.1 (#7836) Bumps [axios](https://github.com/axios/axios) from 1.4.0 to 1.6.1. - [Release notes](https://github.com/axios/axios/releases) - [Changelog](https://github.com/axios/axios/blob/v1.x/CHANGELOG.md) - [Commits](https://github.com/axios/axios/compare/v1.4.0...v1.6.1) --- updated-dependencies: - dependency-name: axios dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 3f762386ae11..4cdf3c235e1a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4594,9 +4594,9 @@ axe-core@4.2.3: integrity sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ== axios@^1.0.0, axios@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f" - integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA== + version "1.6.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.1.tgz#76550d644bf0a2d469a01f9244db6753208397d7" + integrity sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g== dependencies: follow-redirects "^1.15.0" form-data "^4.0.0" From c103b813493e42589d837c367e8868bebe1de736 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Fri, 17 Nov 2023 23:44:20 +0200 Subject: [PATCH 60/69] docs: features documentation (#7815) * docs: features documentation * chore: remove empty row from table --------- Co-authored-by: Nayden Naydenov --- docs/1-getting-started/06-using-features.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/1-getting-started/06-using-features.md b/docs/1-getting-started/06-using-features.md index 3c4b30b3e74b..2f48a83032af 100644 --- a/docs/1-getting-started/06-using-features.md +++ b/docs/1-getting-started/06-using-features.md @@ -16,7 +16,7 @@ Import the feature file from the respective NPM package: `import "@ui5//dist/features/.js` -## Component features +## Component features Currently, only a few components offer additional features: @@ -31,22 +31,28 @@ Currently, only a few components offer additional features: | `localization` | Multiple (`ui5-date-picker`, etc...) | `@ui5/webcomponents-localization/dist/features/calendar/Japanese.js` | Japanese calendar support | | `localization` | Multiple (`ui5-date-picker`, etc...) | `@ui5/webcomponents-localization/dist/features/calendar/Persian.js` | Persian calendar support | +Note: Features must be imported before all components modules, +so that the feature is enabled before the components' definition. + For example: ```js import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js;"; + +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Link.js"; +import "@ui5/webcomponents/dist/Input.js"; ``` -## Framework features +## Framework features | Package | Affects | Feature Import | Description | |----------------|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------| | `base` | Framework | `@ui5/webcomponents-base/dist/features/OpenUI5Support.js` | Integration with the OpenUI5 framework, allowing synchronization and resources re-use | | `base` | Multiple components within all libraries | `@ui5/webcomponents-base/dist/features/F6Navigation.js` | Support for F6 fast groups navigation | | `base` | Date related components | `@ui5/webcomponents-base/dist/features/LegacyDateFormats.js` | Support for legacy date formats | -| -Framework-level features must be imported before all components modules, +Note: Framework-level features must be imported before all components modules, so that the feature is enabled upon framework boot, before the components' definition. For example: From 4dd4cad9818b057e318355d67465db5f941cb7ce Mon Sep 17 00:00:00 2001 From: gmkv Date: Fri, 17 Nov 2023 23:59:29 +0200 Subject: [PATCH 61/69] chore: bump theming-base-content version to 11.9.0 (#7817) https://github.com/SAP/theming-base-content/releases/tag/11.9.0 Co-authored-by: ilhan orhan --- packages/theming/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/theming/package.json b/packages/theming/package.json index ceed463d4c6c..ec314c4ead61 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -29,7 +29,7 @@ "directory": "packages/theming" }, "dependencies": { - "@sap-theming/theming-base-content": "11.6.8", + "@sap-theming/theming-base-content": "11.9.0", "@ui5/webcomponents-base": "1.20.0-rc.1" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 4cdf3c235e1a..16446e7a319e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2484,10 +2484,10 @@ resolved "https://registry.yarnpkg.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz#a77ea742fab25775145434eb1d2328cf5013ac33" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== -"@sap-theming/theming-base-content@11.6.8": - version "11.6.8" - resolved "https://registry.yarnpkg.com/@sap-theming/theming-base-content/-/theming-base-content-11.6.8.tgz#3e70ddfe415f4492b3e37df2c642fbbf7cb8296d" - integrity sha512-LRYvqVeqFYCqhB4EMbFslQpgRLrYyOOsacWI0JZbWlnvRkbF4/pzKpr4ULyVPFp26CrwXhUZJeSSAa3/8KS6iw== +"@sap-theming/theming-base-content@11.9.0": + version "11.9.0" + resolved "https://registry.yarnpkg.com/@sap-theming/theming-base-content/-/theming-base-content-11.9.0.tgz#bd46458c7ed58cfb23e4e0ec620c9780a5711a5b" + integrity sha512-EOAYDx13SU9Wd18qgAR+FYTrywC5dk+IU3oM5NGAz0GxJLpiGQkSONYnAMJK/Gqk9QhU7uqWQsjrcnOcOl0fxA== "@sigstore/protobuf-specs@^0.1.0": version "0.1.0" From e4a3304aeb25057e5eded5817572bb9dfab8ef88 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 17 Nov 2023 23:59:58 +0200 Subject: [PATCH 62/69] build(deps-dev): bump chromedriver from 117.0.3 to 119.0.1 (#7832) Bumps [chromedriver](https://github.com/giggio/node-chromedriver) from 117.0.3 to 119.0.1. - [Commits](https://github.com/giggio/node-chromedriver/compare/117.0.3...119.0.1) --- updated-dependencies: - dependency-name: chromedriver dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- yarn.lock | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/yarn.lock b/yarn.lock index 16446e7a319e..d9bf5b9c5617 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3189,10 +3189,10 @@ dependencies: defer-to-connect "^2.0.0" -"@testim/chrome-version@^1.1.3": - version "1.1.3" - resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.3.tgz#fbb68696899d7b8c1b9b891eded9c04fe2cd5529" - integrity sha512-g697J3WxV/Zytemz8aTuKjTGYtta9+02kva3C1xc7KXB8GdbfE1akGJIsZLyY/FSh2QrnE+fiB7vmWU3XNcb6A== +"@testim/chrome-version@^1.1.4": + version "1.1.4" + resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.4.tgz#86e04e677cd6c05fa230dd15ac223fa72d1d7090" + integrity sha512-kIhULpw9TrGYnHp/8VfdcneIcxKnLixmADtukQRtJUmsVlMg0niMkwV0xZmi8hqa57xqilIHjWFA0GKvEjVU5g== "@tootallnate/once@2": version "2.0.0" @@ -4593,10 +4593,10 @@ axe-core@4.2.3: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.3.tgz#2a3afc332f0031b42f602f4a3de03c211ca98f72" integrity sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ== -axios@^1.0.0, axios@^1.4.0: - version "1.6.1" - resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.1.tgz#76550d644bf0a2d469a01f9244db6753208397d7" - integrity sha512-vfBmhDpKafglh0EldBEbVuoe7DyAavGSLWhuSm5ZSEKQnHhBf0xAAwybbNH1IkrJNGnS/VG4I5yxig1pCEXE4g== +axios@^1.0.0, axios@^1.6.0: + version "1.6.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2" + integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A== dependencies: follow-redirects "^1.15.0" form-data "^4.0.0" @@ -5242,18 +5242,18 @@ chrome-launcher@^0.15.0: is-wsl "^2.2.0" lighthouse-logger "^1.0.0" -chromedriver@117.0.3: - version "117.0.3" - resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-117.0.3.tgz#4a14cc992d572367b99b53c772adcc4c19078e1e" - integrity sha512-c2rk2eGK5zZFBJMdviUlAJfQEBuPNIKfal4+rTFVYAmrWbMPYAqPozB+rIkc1lDP/Ryw44lPiqKglrI01ILhTQ== +chromedriver@119.0.1: + version "119.0.1" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-119.0.1.tgz#064f3650790ccea055e9bfd95c600f5ea60295e9" + integrity sha512-lpCFFLaXPpvElTaUOWKdP74pFb/sJhWtWqMjn7Ju1YriWn8dT5JBk84BGXMPvZQs70WfCYWecxdMmwfIu1Mupg== dependencies: - "@testim/chrome-version" "^1.1.3" - axios "^1.4.0" - compare-versions "^6.0.0" + "@testim/chrome-version" "^1.1.4" + axios "^1.6.0" + compare-versions "^6.1.0" extract-zip "^2.0.1" https-proxy-agent "^5.0.1" proxy-from-env "^1.1.0" - tcp-port-used "^1.0.1" + tcp-port-used "^1.0.2" ci-info@^2.0.0: version "2.0.0" @@ -5490,7 +5490,7 @@ compare-func@^2.0.0: array-ify "^1.0.0" dot-prop "^5.1.0" -compare-versions@^6.0.0: +compare-versions@^6.1.0: version "6.1.0" resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.0.tgz#3f2131e3ae93577df111dba133e6db876ffe127a" integrity sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg== @@ -13659,7 +13659,7 @@ tar@^6.1.11, tar@^6.1.13, tar@^6.1.2: mkdirp "^1.0.3" yallist "^4.0.0" -tcp-port-used@^1.0.1: +tcp-port-used@^1.0.1, tcp-port-used@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/tcp-port-used/-/tcp-port-used-1.0.2.tgz#9652b7436eb1f4cfae111c79b558a25769f6faea" integrity sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA== From 66cd886da109f47309c820510ebc50fcc87871c0 Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Fri, 17 Nov 2023 14:00:12 -0800 Subject: [PATCH 63/69] Translation Delivery (#7827) [INTERNAL] Translation delivery: commit by LX Lab Change-Id: Ib043d352c5567d221a5256e3f4eb89298407f898 --- packages/main/src/i18n/messagebundle_ar.properties | 2 ++ packages/main/src/i18n/messagebundle_bg.properties | 2 ++ packages/main/src/i18n/messagebundle_ca.properties | 2 ++ packages/main/src/i18n/messagebundle_cs.properties | 2 ++ packages/main/src/i18n/messagebundle_cy.properties | 2 ++ packages/main/src/i18n/messagebundle_da.properties | 2 ++ packages/main/src/i18n/messagebundle_de.properties | 2 ++ packages/main/src/i18n/messagebundle_el.properties | 2 ++ packages/main/src/i18n/messagebundle_en_GB.properties | 2 ++ packages/main/src/i18n/messagebundle_es.properties | 2 ++ packages/main/src/i18n/messagebundle_es_MX.properties | 2 ++ packages/main/src/i18n/messagebundle_et.properties | 2 ++ packages/main/src/i18n/messagebundle_fi.properties | 2 ++ packages/main/src/i18n/messagebundle_fr.properties | 2 ++ packages/main/src/i18n/messagebundle_fr_CA.properties | 2 ++ packages/main/src/i18n/messagebundle_hi.properties | 2 ++ packages/main/src/i18n/messagebundle_hr.properties | 2 ++ packages/main/src/i18n/messagebundle_hu.properties | 2 ++ packages/main/src/i18n/messagebundle_id.properties | 2 ++ packages/main/src/i18n/messagebundle_it.properties | 2 ++ packages/main/src/i18n/messagebundle_iw.properties | 2 ++ packages/main/src/i18n/messagebundle_ja.properties | 2 ++ packages/main/src/i18n/messagebundle_kk.properties | 2 ++ packages/main/src/i18n/messagebundle_ko.properties | 2 ++ packages/main/src/i18n/messagebundle_lt.properties | 2 ++ packages/main/src/i18n/messagebundle_lv.properties | 2 ++ packages/main/src/i18n/messagebundle_ms.properties | 2 ++ packages/main/src/i18n/messagebundle_nl.properties | 2 ++ packages/main/src/i18n/messagebundle_no.properties | 2 ++ packages/main/src/i18n/messagebundle_pl.properties | 2 ++ packages/main/src/i18n/messagebundle_pt.properties | 2 ++ packages/main/src/i18n/messagebundle_pt_PT.properties | 2 ++ packages/main/src/i18n/messagebundle_ro.properties | 2 ++ packages/main/src/i18n/messagebundle_ru.properties | 2 ++ packages/main/src/i18n/messagebundle_sh.properties | 2 ++ packages/main/src/i18n/messagebundle_sk.properties | 2 ++ packages/main/src/i18n/messagebundle_sl.properties | 4 +++- packages/main/src/i18n/messagebundle_sv.properties | 2 ++ packages/main/src/i18n/messagebundle_th.properties | 2 ++ packages/main/src/i18n/messagebundle_tr.properties | 2 ++ packages/main/src/i18n/messagebundle_uk.properties | 2 ++ packages/main/src/i18n/messagebundle_vi.properties | 2 ++ packages/main/src/i18n/messagebundle_zh_CN.properties | 2 ++ packages/main/src/i18n/messagebundle_zh_TW.properties | 2 ++ 44 files changed, 89 insertions(+), 1 deletion(-) diff --git a/packages/main/src/i18n/messagebundle_ar.properties b/packages/main/src/i18n/messagebundle_ar.properties index c5be2d9d14b5..ca3ac6de96a3 100644 --- a/packages/main/src/i18n/messagebundle_ar.properties +++ b/packages/main/src/i18n/messagebundle_ar.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} النتائج متوفرة INPUT_SUGGESTIONS_NO_HIT=لا توجد نتائج +INPUT_CLEAR_ICON_ACC_NAME=مسح + LINK_SUBTLE=غامض LINK_EMPHASIZED=مؤكد diff --git a/packages/main/src/i18n/messagebundle_bg.properties b/packages/main/src/i18n/messagebundle_bg.properties index 4cd6b772b820..48eea972c884 100644 --- a/packages/main/src/i18n/messagebundle_bg.properties +++ b/packages/main/src/i18n/messagebundle_bg.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} резултати са налични INPUT_SUGGESTIONS_NO_HIT=Няма резултати +INPUT_CLEAR_ICON_ACC_NAME=Изчистване + LINK_SUBTLE=Блед LINK_EMPHASIZED=Подчертано diff --git a/packages/main/src/i18n/messagebundle_ca.properties b/packages/main/src/i18n/messagebundle_ca.properties index 908bab330d2a..aa1f0ad9bf0c 100644 --- a/packages/main/src/i18n/messagebundle_ca.properties +++ b/packages/main/src/i18n/messagebundle_ca.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultats disponibles INPUT_SUGGESTIONS_NO_HIT=Cap resultat +INPUT_CLEAR_ICON_ACC_NAME=Esborrar + LINK_SUBTLE=Discret LINK_EMPHASIZED=Destacat diff --git a/packages/main/src/i18n/messagebundle_cs.properties b/packages/main/src/i18n/messagebundle_cs.properties index 848ca12b8f49..c6be7e603053 100644 --- a/packages/main/src/i18n/messagebundle_cs.properties +++ b/packages/main/src/i18n/messagebundle_cs.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} Výsledky jsou k dispozici INPUT_SUGGESTIONS_NO_HIT=Žádné výsledky +INPUT_CLEAR_ICON_ACC_NAME=Vyčistit + LINK_SUBTLE=Jemné LINK_EMPHASIZED=Zvýrazněné diff --git a/packages/main/src/i18n/messagebundle_cy.properties b/packages/main/src/i18n/messagebundle_cy.properties index 0cdc9d97d63a..7c3912608a94 100644 --- a/packages/main/src/i18n/messagebundle_cy.properties +++ b/packages/main/src/i18n/messagebundle_cy.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} canlyniad ar gael INPUT_SUGGESTIONS_NO_HIT=Dim canlyniadau +INPUT_CLEAR_ICON_ACC_NAME=Clirio + LINK_SUBTLE=Cynnil LINK_EMPHASIZED=Wedi’i Bwysleisio diff --git a/packages/main/src/i18n/messagebundle_da.properties b/packages/main/src/i18n/messagebundle_da.properties index 54b07d6364ea..3e54ecb78703 100644 --- a/packages/main/src/i18n/messagebundle_da.properties +++ b/packages/main/src/i18n/messagebundle_da.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultater er tilgængelige INPUT_SUGGESTIONS_NO_HIT=Ingen resultater +INPUT_CLEAR_ICON_ACC_NAME=Ryd + LINK_SUBTLE=Diskret LINK_EMPHASIZED=Fremhævet diff --git a/packages/main/src/i18n/messagebundle_de.properties b/packages/main/src/i18n/messagebundle_de.properties index 35cef980cd12..204d6ad395ba 100644 --- a/packages/main/src/i18n/messagebundle_de.properties +++ b/packages/main/src/i18n/messagebundle_de.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} Ergebnisse sind verfügbar INPUT_SUGGESTIONS_NO_HIT=Keine Ergebnisse +INPUT_CLEAR_ICON_ACC_NAME=Zurücksetzen + LINK_SUBTLE=Dezent LINK_EMPHASIZED=Hervorgehoben diff --git a/packages/main/src/i18n/messagebundle_el.properties b/packages/main/src/i18n/messagebundle_el.properties index 5fadbb9c2fd6..85f93d6ceb0f 100644 --- a/packages/main/src/i18n/messagebundle_el.properties +++ b/packages/main/src/i18n/messagebundle_el.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} αποτελέσματα είναι διαθέσ INPUT_SUGGESTIONS_NO_HIT=Χωρίς αποτελέσματα +INPUT_CLEAR_ICON_ACC_NAME=Εκκαθάριση + LINK_SUBTLE=Διακριτικό LINK_EMPHASIZED=Τονισμένο diff --git a/packages/main/src/i18n/messagebundle_en_GB.properties b/packages/main/src/i18n/messagebundle_en_GB.properties index 477ecbf1e6dc..4b4e8be75157 100644 --- a/packages/main/src/i18n/messagebundle_en_GB.properties +++ b/packages/main/src/i18n/messagebundle_en_GB.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} results are available INPUT_SUGGESTIONS_NO_HIT=No results +INPUT_CLEAR_ICON_ACC_NAME=Clear + LINK_SUBTLE=Subtle LINK_EMPHASIZED=Emphasised diff --git a/packages/main/src/i18n/messagebundle_es.properties b/packages/main/src/i18n/messagebundle_es.properties index b7529c55793a..baa2b15bfa70 100644 --- a/packages/main/src/i18n/messagebundle_es.properties +++ b/packages/main/src/i18n/messagebundle_es.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados están disponibles INPUT_SUGGESTIONS_NO_HIT=Sin resultados +INPUT_CLEAR_ICON_ACC_NAME=Borrar + LINK_SUBTLE=Discreto LINK_EMPHASIZED=Resaltado diff --git a/packages/main/src/i18n/messagebundle_es_MX.properties b/packages/main/src/i18n/messagebundle_es_MX.properties index 159e3f58ad12..7f88f4abe84e 100644 --- a/packages/main/src/i18n/messagebundle_es_MX.properties +++ b/packages/main/src/i18n/messagebundle_es_MX.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados disponibles INPUT_SUGGESTIONS_NO_HIT=Ningún resultado +INPUT_CLEAR_ICON_ACC_NAME=Borrar + LINK_SUBTLE=Sutil LINK_EMPHASIZED=Resaltado diff --git a/packages/main/src/i18n/messagebundle_et.properties b/packages/main/src/i18n/messagebundle_et.properties index 06a5f1e83041..1c4e42cfd4ab 100644 --- a/packages/main/src/i18n/messagebundle_et.properties +++ b/packages/main/src/i18n/messagebundle_et.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} tulemust on saadaval INPUT_SUGGESTIONS_NO_HIT=Tulemusi pole +INPUT_CLEAR_ICON_ACC_NAME=Tühjenda + LINK_SUBTLE=Peenike LINK_EMPHASIZED=Rõhutatud diff --git a/packages/main/src/i18n/messagebundle_fi.properties b/packages/main/src/i18n/messagebundle_fi.properties index 800da47bea94..2feea504066d 100644 --- a/packages/main/src/i18n/messagebundle_fi.properties +++ b/packages/main/src/i18n/messagebundle_fi.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} tulosta käytettävissä INPUT_SUGGESTIONS_NO_HIT=Ei tuloksia +INPUT_CLEAR_ICON_ACC_NAME=Tyhjennä + LINK_SUBTLE=Hillitty LINK_EMPHASIZED=Korostettu diff --git a/packages/main/src/i18n/messagebundle_fr.properties b/packages/main/src/i18n/messagebundle_fr.properties index 68162210347b..d85af8f15c14 100644 --- a/packages/main/src/i18n/messagebundle_fr.properties +++ b/packages/main/src/i18n/messagebundle_fr.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} résultats sont disponibles. INPUT_SUGGESTIONS_NO_HIT=Aucun résultat +INPUT_CLEAR_ICON_ACC_NAME=Réinitialiser + LINK_SUBTLE=Subtil LINK_EMPHASIZED=Mis en surbrillance diff --git a/packages/main/src/i18n/messagebundle_fr_CA.properties b/packages/main/src/i18n/messagebundle_fr_CA.properties index 907826c6dd85..1d92d77152ea 100644 --- a/packages/main/src/i18n/messagebundle_fr_CA.properties +++ b/packages/main/src/i18n/messagebundle_fr_CA.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} résultats disponibles INPUT_SUGGESTIONS_NO_HIT=Aucun résultat +INPUT_CLEAR_ICON_ACC_NAME=Réinitialiser + LINK_SUBTLE=Discret LINK_EMPHASIZED=Accentué diff --git a/packages/main/src/i18n/messagebundle_hi.properties b/packages/main/src/i18n/messagebundle_hi.properties index 74abf2fbf7ac..c3953bfa1a62 100644 --- a/packages/main/src/i18n/messagebundle_hi.properties +++ b/packages/main/src/i18n/messagebundle_hi.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} परिणाम उपलब्ध है INPUT_SUGGESTIONS_NO_HIT=कोई परिणाम नहीं +INPUT_CLEAR_ICON_ACC_NAME=साफ करें + LINK_SUBTLE=सूक्ष्म LINK_EMPHASIZED=बल दिया गया diff --git a/packages/main/src/i18n/messagebundle_hr.properties b/packages/main/src/i18n/messagebundle_hr.properties index d46ee90ea38a..59669454419b 100644 --- a/packages/main/src/i18n/messagebundle_hr.properties +++ b/packages/main/src/i18n/messagebundle_hr.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} rezultata raspoloživo INPUT_SUGGESTIONS_NO_HIT=Nema rezultata +INPUT_CLEAR_ICON_ACC_NAME=Poništi + LINK_SUBTLE=Rafinirano LINK_EMPHASIZED=Istaknuto diff --git a/packages/main/src/i18n/messagebundle_hu.properties b/packages/main/src/i18n/messagebundle_hu.properties index c8e1ffcb6315..1c52ddfc7530 100644 --- a/packages/main/src/i18n/messagebundle_hu.properties +++ b/packages/main/src/i18n/messagebundle_hu.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} találat INPUT_SUGGESTIONS_NO_HIT=Nincs találat +INPUT_CLEAR_ICON_ACC_NAME=Törlés + LINK_SUBTLE=Szolid LINK_EMPHASIZED=Kiemelt diff --git a/packages/main/src/i18n/messagebundle_id.properties b/packages/main/src/i18n/messagebundle_id.properties index 5b754396e810..e87f813ae637 100644 --- a/packages/main/src/i18n/messagebundle_id.properties +++ b/packages/main/src/i18n/messagebundle_id.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} hasil tersedia INPUT_SUGGESTIONS_NO_HIT=Tidak ada hasil +INPUT_CLEAR_ICON_ACC_NAME=Hapus + LINK_SUBTLE=Halus LINK_EMPHASIZED=Ditekankan diff --git a/packages/main/src/i18n/messagebundle_it.properties b/packages/main/src/i18n/messagebundle_it.properties index 13afa91768f0..983c19f19c78 100644 --- a/packages/main/src/i18n/messagebundle_it.properties +++ b/packages/main/src/i18n/messagebundle_it.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} risultati disponibili INPUT_SUGGESTIONS_NO_HIT=Nessun risultato +INPUT_CLEAR_ICON_ACC_NAME=Cancella + LINK_SUBTLE=Discreto LINK_EMPHASIZED=Evidenziato diff --git a/packages/main/src/i18n/messagebundle_iw.properties b/packages/main/src/i18n/messagebundle_iw.properties index ffbe6a8f7254..1acc7be7f01e 100644 --- a/packages/main/src/i18n/messagebundle_iw.properties +++ b/packages/main/src/i18n/messagebundle_iw.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} תוצאות זמינות INPUT_SUGGESTIONS_NO_HIT=אין תוצאות +INPUT_CLEAR_ICON_ACC_NAME=נקה + LINK_SUBTLE=עדין LINK_EMPHASIZED=מודגש diff --git a/packages/main/src/i18n/messagebundle_ja.properties b/packages/main/src/i18n/messagebundle_ja.properties index 71bd73d5a070..593479bb0eaa 100644 --- a/packages/main/src/i18n/messagebundle_ja.properties +++ b/packages/main/src/i18n/messagebundle_ja.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} の結果が利用可能です INPUT_SUGGESTIONS_NO_HIT=結果がありません +INPUT_CLEAR_ICON_ACC_NAME=クリア + LINK_SUBTLE=淡色 LINK_EMPHASIZED=強調 diff --git a/packages/main/src/i18n/messagebundle_kk.properties b/packages/main/src/i18n/messagebundle_kk.properties index 2f229455ac6f..b6626f1d10d7 100644 --- a/packages/main/src/i18n/messagebundle_kk.properties +++ b/packages/main/src/i18n/messagebundle_kk.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} нәтиже бар INPUT_SUGGESTIONS_NO_HIT=Нәтижелерсіз +INPUT_CLEAR_ICON_ACC_NAME=Тазарту + LINK_SUBTLE=Білінбейтін LINK_EMPHASIZED=Ерекшеленген diff --git a/packages/main/src/i18n/messagebundle_ko.properties b/packages/main/src/i18n/messagebundle_ko.properties index 709ae258527b..9271e153d127 100644 --- a/packages/main/src/i18n/messagebundle_ko.properties +++ b/packages/main/src/i18n/messagebundle_ko.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0}개 결과를 사용할 수 있습니다. INPUT_SUGGESTIONS_NO_HIT=결과 없음 +INPUT_CLEAR_ICON_ACC_NAME=지우기 + LINK_SUBTLE=미약 LINK_EMPHASIZED=강조 diff --git a/packages/main/src/i18n/messagebundle_lt.properties b/packages/main/src/i18n/messagebundle_lt.properties index 6cc3a572d26a..163ce5921d0f 100644 --- a/packages/main/src/i18n/messagebundle_lt.properties +++ b/packages/main/src/i18n/messagebundle_lt.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Pateikta rezultatų: {0} INPUT_SUGGESTIONS_NO_HIT=Nėra rezultatų +INPUT_CLEAR_ICON_ACC_NAME=Valyti + LINK_SUBTLE=Subtilus LINK_EMPHASIZED=Išryškintas diff --git a/packages/main/src/i18n/messagebundle_lv.properties b/packages/main/src/i18n/messagebundle_lv.properties index 1df916bb67d7..3e6c1de715da 100644 --- a/packages/main/src/i18n/messagebundle_lv.properties +++ b/packages/main/src/i18n/messagebundle_lv.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Ir pieejami {0} rezultāti INPUT_SUGGESTIONS_NO_HIT=Bez rezultātiem +INPUT_CLEAR_ICON_ACC_NAME=Notīrīt + LINK_SUBTLE=Smalks LINK_EMPHASIZED=Uzsvērts diff --git a/packages/main/src/i18n/messagebundle_ms.properties b/packages/main/src/i18n/messagebundle_ms.properties index 6463732cbe8d..8f5d5ce85d07 100644 --- a/packages/main/src/i18n/messagebundle_ms.properties +++ b/packages/main/src/i18n/messagebundle_ms.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} hasil tersedia INPUT_SUGGESTIONS_NO_HIT=Tiada hasil +INPUT_CLEAR_ICON_ACC_NAME=Kosongkan + LINK_SUBTLE=Kecil LINK_EMPHASIZED=Ditekankan diff --git a/packages/main/src/i18n/messagebundle_nl.properties b/packages/main/src/i18n/messagebundle_nl.properties index 21bb269dcc92..39dfda2a38a5 100644 --- a/packages/main/src/i18n/messagebundle_nl.properties +++ b/packages/main/src/i18n/messagebundle_nl.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultaten beschikbaar INPUT_SUGGESTIONS_NO_HIT=Geen resultaten +INPUT_CLEAR_ICON_ACC_NAME=Wissen + LINK_SUBTLE=Subtiel LINK_EMPHASIZED=Geaccentueerd diff --git a/packages/main/src/i18n/messagebundle_no.properties b/packages/main/src/i18n/messagebundle_no.properties index d78e9d36fcf2..15a8a2f1dac1 100644 --- a/packages/main/src/i18n/messagebundle_no.properties +++ b/packages/main/src/i18n/messagebundle_no.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultater er tilgjengelige INPUT_SUGGESTIONS_NO_HIT=Ingen resultater +INPUT_CLEAR_ICON_ACC_NAME=Tilbakestill + LINK_SUBTLE=Diskret LINK_EMPHASIZED=Uthevet diff --git a/packages/main/src/i18n/messagebundle_pl.properties b/packages/main/src/i18n/messagebundle_pl.properties index 6bd7cff8ab77..37ffd0495be7 100644 --- a/packages/main/src/i18n/messagebundle_pl.properties +++ b/packages/main/src/i18n/messagebundle_pl.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Liczba dostępnych wyników: {0} INPUT_SUGGESTIONS_NO_HIT=Brak wyników +INPUT_CLEAR_ICON_ACC_NAME=Wyczyść + LINK_SUBTLE=Delikatne LINK_EMPHASIZED=Podświetlone diff --git a/packages/main/src/i18n/messagebundle_pt.properties b/packages/main/src/i18n/messagebundle_pt.properties index d7c2080277c3..1b1321af3cec 100644 --- a/packages/main/src/i18n/messagebundle_pt.properties +++ b/packages/main/src/i18n/messagebundle_pt.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados estão disponíveis INPUT_SUGGESTIONS_NO_HIT=Nenhum resultado +INPUT_CLEAR_ICON_ACC_NAME=Limpar + LINK_SUBTLE=Discreto LINK_EMPHASIZED=Destacado diff --git a/packages/main/src/i18n/messagebundle_pt_PT.properties b/packages/main/src/i18n/messagebundle_pt_PT.properties index b6585d625e3a..d60741cc31ad 100644 --- a/packages/main/src/i18n/messagebundle_pt_PT.properties +++ b/packages/main/src/i18n/messagebundle_pt_PT.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultados disponíveis INPUT_SUGGESTIONS_NO_HIT=Sem resultados +INPUT_CLEAR_ICON_ACC_NAME=Limpar + LINK_SUBTLE=Subtil LINK_EMPHASIZED=Realçado diff --git a/packages/main/src/i18n/messagebundle_ro.properties b/packages/main/src/i18n/messagebundle_ro.properties index 6a7379ebbdce..5c4ce9eac3fc 100644 --- a/packages/main/src/i18n/messagebundle_ro.properties +++ b/packages/main/src/i18n/messagebundle_ro.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} rezultate sunt disponibile INPUT_SUGGESTIONS_NO_HIT=Fără rezultate +INPUT_CLEAR_ICON_ACC_NAME=Resetare + LINK_SUBTLE=Discret LINK_EMPHASIZED=Evidenţiat diff --git a/packages/main/src/i18n/messagebundle_ru.properties b/packages/main/src/i18n/messagebundle_ru.properties index a18e9c68ff65..9528c76a125c 100644 --- a/packages/main/src/i18n/messagebundle_ru.properties +++ b/packages/main/src/i18n/messagebundle_ru.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Доступно результатов: {0} INPUT_SUGGESTIONS_NO_HIT=Нет результатов +INPUT_CLEAR_ICON_ACC_NAME=Очистить + LINK_SUBTLE=Незаметная LINK_EMPHASIZED=Выделенная diff --git a/packages/main/src/i18n/messagebundle_sh.properties b/packages/main/src/i18n/messagebundle_sh.properties index e56a23c33851..2b95c2bb2348 100644 --- a/packages/main/src/i18n/messagebundle_sh.properties +++ b/packages/main/src/i18n/messagebundle_sh.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} rezultata je dostupno INPUT_SUGGESTIONS_NO_HIT=Nema rezultata +INPUT_CLEAR_ICON_ACC_NAME=Poništi + LINK_SUBTLE=Suptilno LINK_EMPHASIZED=Naglašeno diff --git a/packages/main/src/i18n/messagebundle_sk.properties b/packages/main/src/i18n/messagebundle_sk.properties index 64cc5b126fd8..eee0fe3fc5a6 100644 --- a/packages/main/src/i18n/messagebundle_sk.properties +++ b/packages/main/src/i18n/messagebundle_sk.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=K dispozícii je {0} výsledkov INPUT_SUGGESTIONS_NO_HIT=Žiadne výsledky +INPUT_CLEAR_ICON_ACC_NAME=Vymazať + LINK_SUBTLE=Jednoduché LINK_EMPHASIZED=Zvýraznené diff --git a/packages/main/src/i18n/messagebundle_sl.properties b/packages/main/src/i18n/messagebundle_sl.properties index ac130f1433c4..e0f4356d1221 100644 --- a/packages/main/src/i18n/messagebundle_sl.properties +++ b/packages/main/src/i18n/messagebundle_sl.properties @@ -5,7 +5,7 @@ ARIA_ROLEDESCRIPTION_CARD=Kartica ARIA_ROLEDESCRIPTION_CARD_HEADER=Glava kartice -ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Interkativna glava kartice +ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER=Interaktivna glava kartice AVATAR_TOOLTIP=Avatar @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=Na voljo {0} rezultatov INPUT_SUGGESTIONS_NO_HIT=Ni rezultatov +INPUT_CLEAR_ICON_ACC_NAME=Počisti + LINK_SUBTLE=Neizpostavljeno LINK_EMPHASIZED=Poudarjeno diff --git a/packages/main/src/i18n/messagebundle_sv.properties b/packages/main/src/i18n/messagebundle_sv.properties index fb45687411ba..f9ba1bb96bd2 100644 --- a/packages/main/src/i18n/messagebundle_sv.properties +++ b/packages/main/src/i18n/messagebundle_sv.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} resultat är tillgängliga INPUT_SUGGESTIONS_NO_HIT=Inga resultat +INPUT_CLEAR_ICON_ACC_NAME=Rensa + LINK_SUBTLE=Diskret LINK_EMPHASIZED=Markerad diff --git a/packages/main/src/i18n/messagebundle_th.properties b/packages/main/src/i18n/messagebundle_th.properties index fb0fb88a98c2..8104e2182556 100644 --- a/packages/main/src/i18n/messagebundle_th.properties +++ b/packages/main/src/i18n/messagebundle_th.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS=มีผลลัพธ์ {0} รายการ INPUT_SUGGESTIONS_NO_HIT=ไม่มีผลลัพธ์ +INPUT_CLEAR_ICON_ACC_NAME=ล้าง + LINK_SUBTLE=ละเอียด LINK_EMPHASIZED=เน้น diff --git a/packages/main/src/i18n/messagebundle_tr.properties b/packages/main/src/i18n/messagebundle_tr.properties index edf5b32396c0..cda49b5db14f 100644 --- a/packages/main/src/i18n/messagebundle_tr.properties +++ b/packages/main/src/i18n/messagebundle_tr.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} sonuç mevcut INPUT_SUGGESTIONS_NO_HIT=Sonuç yok +INPUT_CLEAR_ICON_ACC_NAME=Temizle + LINK_SUBTLE=İnce LINK_EMPHASIZED=Vurgulu diff --git a/packages/main/src/i18n/messagebundle_uk.properties b/packages/main/src/i18n/messagebundle_uk.properties index 64f4e1f27889..1ec7e1d53039 100644 --- a/packages/main/src/i18n/messagebundle_uk.properties +++ b/packages/main/src/i18n/messagebundle_uk.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} результатів доступно INPUT_SUGGESTIONS_NO_HIT=Немає результатів +INPUT_CLEAR_ICON_ACC_NAME=Очистити + LINK_SUBTLE=Прихований LINK_EMPHASIZED=Виділено diff --git a/packages/main/src/i18n/messagebundle_vi.properties b/packages/main/src/i18n/messagebundle_vi.properties index 93daa84cba0e..b61de285c1d3 100644 --- a/packages/main/src/i18n/messagebundle_vi.properties +++ b/packages/main/src/i18n/messagebundle_vi.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} kết quả có sẵn INPUT_SUGGESTIONS_NO_HIT=Không có kết quả +INPUT_CLEAR_ICON_ACC_NAME=Xóa + LINK_SUBTLE=Tinh tế LINK_EMPHASIZED=Được nhấn mạnh diff --git a/packages/main/src/i18n/messagebundle_zh_CN.properties b/packages/main/src/i18n/messagebundle_zh_CN.properties index b84bebbd81f1..e24d4076f78a 100644 --- a/packages/main/src/i18n/messagebundle_zh_CN.properties +++ b/packages/main/src/i18n/messagebundle_zh_CN.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 个结果可用 INPUT_SUGGESTIONS_NO_HIT=无结果 +INPUT_CLEAR_ICON_ACC_NAME=清除 + LINK_SUBTLE=隐蔽 LINK_EMPHASIZED=加重 diff --git a/packages/main/src/i18n/messagebundle_zh_TW.properties b/packages/main/src/i18n/messagebundle_zh_TW.properties index 40bca29281cb..8ac266e03c2e 100644 --- a/packages/main/src/i18n/messagebundle_zh_TW.properties +++ b/packages/main/src/i18n/messagebundle_zh_TW.properties @@ -103,6 +103,8 @@ INPUT_SUGGESTIONS_MORE_HITS={0} 個可用的結果 INPUT_SUGGESTIONS_NO_HIT=沒有結果 +INPUT_CLEAR_ICON_ACC_NAME=清除 + LINK_SUBTLE=輕微 LINK_EMPHASIZED=強調 From dc2f89eb974bd6145c0753c9afbb9c6429a95cef Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Sat, 18 Nov 2023 22:10:45 +0200 Subject: [PATCH 64/69] chore: downgrade chromedriver to 118 (#7873) --- packages/base/package.json | 2 +- packages/fiori/package.json | 2 +- packages/localization/package.json | 2 +- packages/main/package.json | 2 +- yarn.lock | 24 ++++++++++++------------ 5 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/base/package.json b/packages/base/package.json index 3553351160bb..22787afb1dec 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -38,7 +38,7 @@ "@buxlabs/amd-to-es6": "0.16.1", "@openui5/sap.ui.core": "1.116.0", "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "119.0.1", + "chromedriver": "118.0.1", "clean-css": "^5.2.2", "copy-and-watch": "^0.1.5", "cross-env": "^7.0.3", diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 87d9188ee4be..850c0a852142 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -49,6 +49,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "119.0.1" + "chromedriver": "118.0.1" } } diff --git a/packages/localization/package.json b/packages/localization/package.json index ba1d544ae2b2..02b2ccadc5b8 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -30,7 +30,7 @@ "devDependencies": { "@openui5/sap.ui.core": "1.116.0", "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "119.0.1", + "chromedriver": "118.0.1", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, diff --git a/packages/main/package.json b/packages/main/package.json index bff024535475..6f85198b3870 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -50,6 +50,6 @@ }, "devDependencies": { "@ui5/webcomponents-tools": "1.20.0-rc.1", - "chromedriver": "119.0.1" + "chromedriver": "118.0.1" } } diff --git a/yarn.lock b/yarn.lock index d9bf5b9c5617..c2f0c0350604 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3189,7 +3189,7 @@ dependencies: defer-to-connect "^2.0.0" -"@testim/chrome-version@^1.1.4": +"@testim/chrome-version@^1.1.3": version "1.1.4" resolved "https://registry.yarnpkg.com/@testim/chrome-version/-/chrome-version-1.1.4.tgz#86e04e677cd6c05fa230dd15ac223fa72d1d7090" integrity sha512-kIhULpw9TrGYnHp/8VfdcneIcxKnLixmADtukQRtJUmsVlMg0niMkwV0xZmi8hqa57xqilIHjWFA0GKvEjVU5g== @@ -4593,7 +4593,7 @@ axe-core@4.2.3: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.2.3.tgz#2a3afc332f0031b42f602f4a3de03c211ca98f72" integrity sha512-pXnVMfJKSIWU2Ml4JHP7pZEPIrgBO1Fd3WGx+fPBsS+KRGhE4vxooD8XBGWbQOIVSZsVK7pUDBBkCicNu80yzQ== -axios@^1.0.0, axios@^1.6.0: +axios@^1.0.0, axios@^1.4.0: version "1.6.2" resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2" integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A== @@ -5242,18 +5242,18 @@ chrome-launcher@^0.15.0: is-wsl "^2.2.0" lighthouse-logger "^1.0.0" -chromedriver@119.0.1: - version "119.0.1" - resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-119.0.1.tgz#064f3650790ccea055e9bfd95c600f5ea60295e9" - integrity sha512-lpCFFLaXPpvElTaUOWKdP74pFb/sJhWtWqMjn7Ju1YriWn8dT5JBk84BGXMPvZQs70WfCYWecxdMmwfIu1Mupg== +chromedriver@118.0.1: + version "118.0.1" + resolved "https://registry.yarnpkg.com/chromedriver/-/chromedriver-118.0.1.tgz#76bf821bb11dd85a45a7e3df7ee48e8d464677dd" + integrity sha512-GlGfyRE47IuSJnuadIiDy89EMDMQFBVWxUmiclLJKzQhFsiWAtcIr/mNOxjljZdsw9IwIOQEkrB9wympKYFPLw== dependencies: - "@testim/chrome-version" "^1.1.4" - axios "^1.6.0" - compare-versions "^6.1.0" + "@testim/chrome-version" "^1.1.3" + axios "^1.4.0" + compare-versions "^6.0.0" extract-zip "^2.0.1" https-proxy-agent "^5.0.1" proxy-from-env "^1.1.0" - tcp-port-used "^1.0.2" + tcp-port-used "^1.0.1" ci-info@^2.0.0: version "2.0.0" @@ -5490,7 +5490,7 @@ compare-func@^2.0.0: array-ify "^1.0.0" dot-prop "^5.1.0" -compare-versions@^6.1.0: +compare-versions@^6.0.0: version "6.1.0" resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-6.1.0.tgz#3f2131e3ae93577df111dba133e6db876ffe127a" integrity sha512-LNZQXhqUvqUTotpZ00qLSaify3b4VFD588aRr8MKFw4CMUr98ytzCW5wDH5qx/DEY5kCDXcbcRuCqL0szEf2tg== @@ -13659,7 +13659,7 @@ tar@^6.1.11, tar@^6.1.13, tar@^6.1.2: mkdirp "^1.0.3" yallist "^4.0.0" -tcp-port-used@^1.0.1, tcp-port-used@^1.0.2: +tcp-port-used@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/tcp-port-used/-/tcp-port-used-1.0.2.tgz#9652b7436eb1f4cfae111c79b558a25769f6faea" integrity sha512-l7ar8lLUD3XS1V2lfoJlCBaeoaWo/2xfYt81hM7VlvR4RrMVFqfmzfhLVk40hAb368uitje5gPtBRL1m/DGvLA== From 1534d897f15f52f947a96430ca498a5548e4b6c8 Mon Sep 17 00:00:00 2001 From: Ivaylo Plashkov Date: Mon, 20 Nov 2023 09:55:12 +0200 Subject: [PATCH 65/69] fix(ui5-wizard): scrollbar styles are now present on root (#7838) --- packages/fiori/src/Wizard.hbs | 2 +- packages/fiori/src/Wizard.ts | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/fiori/src/Wizard.hbs b/packages/fiori/src/Wizard.hbs index ff477052c20b..aa9f5c4e6b0a 100644 --- a/packages/fiori/src/Wizard.hbs +++ b/packages/fiori/src/Wizard.hbs @@ -1,4 +1,4 @@ -
      +