From 2746460ebd0d6517e8eedadde30b74e424c17a85 Mon Sep 17 00:00:00 2001 From: Georgieva Date: Tue, 12 Sep 2023 16:56:41 +0300 Subject: [PATCH 001/141] fix(ui5-dialog): fix background and shadow of slotted ui5-bar (#7421) * fix(ui5-dialog): fixed background and shadow when ui5-bar is used inside ui5-dalog fixes: #7418 --------- Co-authored-by: Siyana Todorova --- packages/fiori/src/themes/Bar.css | 2 +- packages/fiori/test/pages/DialogWithBar.html | 35 +++++++++++++++++- packages/main/src/Dialog.ts | 5 +-- packages/main/src/themes/Dialog.css | 36 +++++++++++++------ packages/main/src/themes/PopupsCommon.css | 1 - .../src/themes/base/Dialog-parameters.css | 5 +-- .../sap_fiori_3_hcb/Dialog-parameters.css | 5 +-- .../PopupsCommon-parameters.css | 5 +++ .../sap_fiori_3_hcb/parameters-bundle.css | 2 +- .../sap_fiori_3_hcw/Dialog-parameters.css | 5 +-- .../PopupsCommon-parameters.css | 5 +++ .../sap_fiori_3_hcw/parameters-bundle.css | 2 +- .../sap_horizon_hcb/Dialog-parameters.css | 5 +-- .../PopupsCommon-parameters.css | 1 + .../sap_horizon_hcb_exp/Dialog-parameters.css | 4 --- .../sap_horizon_hcw/Dialog-parameters.css | 5 +-- .../PopupsCommon-parameters.css | 1 + .../sap_horizon_hcw_exp/Dialog-parameters.css | 4 --- 18 files changed, 81 insertions(+), 47 deletions(-) create mode 100644 packages/main/src/themes/sap_fiori_3_hcb/PopupsCommon-parameters.css create mode 100644 packages/main/src/themes/sap_fiori_3_hcw/PopupsCommon-parameters.css diff --git a/packages/fiori/src/themes/Bar.css b/packages/fiori/src/themes/Bar.css index d52d70d12385..f564da8ab065 100644 --- a/packages/fiori/src/themes/Bar.css +++ b/packages/fiori/src/themes/Bar.css @@ -71,4 +71,4 @@ ::slotted(*) { margin: 0 0.25rem; -} +} \ No newline at end of file diff --git a/packages/fiori/test/pages/DialogWithBar.html b/packages/fiori/test/pages/DialogWithBar.html index d5d0b5db9022..04adf90a4066 100644 --- a/packages/fiori/test/pages/DialogWithBar.html +++ b/packages/fiori/test/pages/DialogWithBar.html @@ -20,7 +20,7 @@ Dialog with Bar in Footer - + Sample Dialog with Bar + Error Dialog with Bar in Header + + + + Bar used in Header + + + +
+ Content +
+ + Close + + + diff --git a/packages/main/src/Dialog.ts b/packages/main/src/Dialog.ts index dc65878e40a2..b8c734bfe255 100644 --- a/packages/main/src/Dialog.ts +++ b/packages/main/src/Dialog.ts @@ -184,10 +184,7 @@ class Dialog extends Popup { /** * Defines the state of the Dialog. - *

- * Available options are: "None" (by default), "Success", "Warning", "Information" and "Error". - *

- * Note: If "Error" and "Warning" state is set, it will change the + *
Note: If "Error" and "Warning" state is set, it will change the * accessibility role to "alertdialog", if the accessibleRole property is set to "Dialog". * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.Dialog.prototype.state diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css index 50a2d8246dbc..64c92939a998 100644 --- a/packages/main/src/themes/Dialog.css +++ b/packages/main/src/themes/Dialog.css @@ -46,19 +46,31 @@ position: relative; } -:host([state="Error"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_error_state_box_shadow); +.ui5-popup-header-root::before { + content: ""; + position: absolute; + inset-block-start: auto; + inset-block-end: 0; + inset-inline-start: 0; + inset-inline-end: 0; + height: var(--_ui5_dialog_header_state_line_height); + background: var(--sapObjectHeader_BorderColor); +} + +:host([state="Error"]) .ui5-popup-header-root::before { + background: var(--sapErrorBorderColor); } -:host([state="Information"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_information_state_box_shadow); +:host([state="Information"]) .ui5-popup-header-root::before { + background: var(--sapInformationBorderColor); } -:host([state="Success"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_success_state_box_shadow); + +:host([state="Success"]) .ui5-popup-header-root::before { + background: var(--sapSuccessBorderColor); } -:host([state="Warning"]) .ui5-popup-header-root { - box-shadow: var(--_ui5_dialog_header_warning_state_box_shadow); +:host([state="Warning"]) .ui5-popup-header-root::before { + background: var(--sapWarningBorderColor); } .ui5-dialog-value-state-icon { @@ -114,10 +126,14 @@ color: var(--_ui5_dialog_resize_handle_color); } -:host ::slotted([slot="footer"]) { +::slotted([slot="footer"]) { height: var(--_ui5_dialog_footer_height); } -:host ::slotted([slot="footer"][ui5-bar][design="Footer"]) { +::slotted([slot="footer"][ui5-bar][design="Footer"]) { border-top: none; +} + +::slotted([slot="header"][ui5-bar]) { + box-shadow: none; } \ No newline at end of file diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css index ae25baaa570c..714c291d9b55 100644 --- a/packages/main/src/themes/PopupsCommon.css +++ b/packages/main/src/themes/PopupsCommon.css @@ -23,7 +23,6 @@ color: var(--sapPageHeader_TextColor); box-shadow: var(--_ui5_popup_header_shadow); border-bottom: var(--_ui5_popup_header_border); - margin-bottom: 0.125rem; } .ui5-popup-content { diff --git a/packages/main/src/themes/base/Dialog-parameters.css b/packages/main/src/themes/base/Dialog-parameters.css index 72df93515535..db18dff49ea0 100644 --- a/packages/main/src/themes/base/Dialog-parameters.css +++ b/packages/main/src/themes/base/Dialog-parameters.css @@ -7,12 +7,9 @@ --_ui5_dialog_header_focus_left_offset: 2px; --_ui5_dialog_header_focus_right_offset: 2px; --_ui5_dialog_header_border_radius: 0px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.0625rem var(--sapErrorBorderColor), var(--sapContent_HeaderShadow); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.0625rem var(--sapInformationBorderColor), var(--sapContent_HeaderShadow); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.0625rem var(--sapSuccessBorderColor), var(--sapContent_HeaderShadow); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.0625rem var(--sapWarningBorderColor), var(--sapContent_HeaderShadow); --_ui5_dialog_header_error_state_icon_color: var(--sapNegativeElementColor); --_ui5_dialog_header_information_state_icon_color: var(--sapInformativeElementColor); --_ui5_dialog_header_success_state_icon_color: var(--sapPositiveElementColor); --_ui5_dialog_header_warning_state_icon_color: var(--sapCriticalElementColor); + --_ui5_dialog_header_state_line_height: 0.0625rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css index 144fb8a12c01..dfb0ce7d1d67 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/Dialog-parameters.css @@ -1,8 +1,5 @@ @import "../base/Dialog-parameters.css"; :root { - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/PopupsCommon-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/PopupsCommon-parameters.css new file mode 100644 index 000000000000..19dd3fe44df2 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcb/PopupsCommon-parameters.css @@ -0,0 +1,5 @@ +@import "../base/PopupsCommon-parameters.css"; + +:root { + --_ui5_popup_header_shadow: none; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css index 2dc914ffd49b..d8c85e407ebb 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css @@ -26,7 +26,7 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popover-parameters.css"; -@import "../base/PopupsCommon-parameters.css"; +@import "./PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters.css"; @import "./RadioButton-parameters.css"; @import "../base/RatingIndicator-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css index 144fb8a12c01..dfb0ce7d1d67 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/Dialog-parameters.css @@ -1,8 +1,5 @@ @import "../base/Dialog-parameters.css"; :root { - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/PopupsCommon-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/PopupsCommon-parameters.css new file mode 100644 index 000000000000..19dd3fe44df2 --- /dev/null +++ b/packages/main/src/themes/sap_fiori_3_hcw/PopupsCommon-parameters.css @@ -0,0 +1,5 @@ +@import "../base/PopupsCommon-parameters.css"; + +:root { + --_ui5_popup_header_shadow: none; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css index 2dc914ffd49b..d8c85e407ebb 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css @@ -26,7 +26,7 @@ @import "./MessageStrip-parameters.css"; @import "./Panel-parameters.css"; @import "../base/Popover-parameters.css"; -@import "../base/PopupsCommon-parameters.css"; +@import "./PopupsCommon-parameters.css"; @import "./ProgressIndicator-parameters.css"; @import "./RadioButton-parameters.css"; @import "../base/RatingIndicator-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css index d5e638ce1eab..6d05d9d20bb7 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Dialog-parameters.css @@ -3,8 +3,5 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css index 538539ccc4ca..be3754497b89 100644 --- a/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/PopupsCommon-parameters.css @@ -3,4 +3,5 @@ :root { --_ui5_popup_header_font_family: var(--sapFontHeaderFamily); --_ui5_popup_border_radius: 0.5rem; + --_ui5_popup_header_shadow: none; } diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css index d5e638ce1eab..e46e4a8771f9 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/Dialog-parameters.css @@ -3,8 +3,4 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css index d5e638ce1eab..6d05d9d20bb7 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Dialog-parameters.css @@ -3,8 +3,5 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); + --_ui5_dialog_header_state_line_height: 0.125rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css b/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css index 538539ccc4ca..be3754497b89 100644 --- a/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/PopupsCommon-parameters.css @@ -3,4 +3,5 @@ :root { --_ui5_popup_header_font_family: var(--sapFontHeaderFamily); --_ui5_popup_border_radius: 0.5rem; + --_ui5_popup_header_shadow: none; } diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css index d5e638ce1eab..e46e4a8771f9 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/Dialog-parameters.css @@ -3,8 +3,4 @@ :root { --_ui5_dialog_resize_handle_right: 0; --_ui5_dialog_resize_handle_bottom: 3px; - --_ui5_dialog_header_error_state_box_shadow: inset 0 -0.125rem var(--sapErrorBorderColor); - --_ui5_dialog_header_information_state_box_shadow: inset 0 -0.125rem var(--sapInformationBorderColor); - --_ui5_dialog_header_success_state_box_shadow: inset 0 -0.125rem var(--sapSuccessBorderColor); - --_ui5_dialog_header_warning_state_box_shadow: inset 0 -0.125rem var(--sapWarningBorderColor); } \ No newline at end of file From 0690e5142d10832584a4b485114280f0edd76424 Mon Sep 17 00:00:00 2001 From: Georgieva Date: Wed, 13 Sep 2023 11:10:41 +0300 Subject: [PATCH 002/141] fix(ui5-card): adjust samples for last list item's square corners (#7539) JIRA: 3114 --- packages/main/src/themes/Card.css | 2 +- packages/main/src/themes/ListItemBase.css | 4 +-- packages/main/test/pages/styles/Card.css | 4 +++ packages/main/test/pages/styles/Carousel.css | 4 +++ .../_stories/main/Card/Card.stories.ts | 10 +++--- .../main/Carousel/Carousel.stories.ts | 35 ++++++++----------- 6 files changed, 30 insertions(+), 29 deletions(-) diff --git a/packages/main/src/themes/Card.css b/packages/main/src/themes/Card.css index 0ea7ed7a0476..38d1dc0f5f07 100644 --- a/packages/main/src/themes/Card.css +++ b/packages/main/src/themes/Card.css @@ -33,7 +33,7 @@ } .ui5-card-root.ui5-card--nocontent .ui5-card-header-root { - border-bottom: none; + border-bottom: none; } .ui5-card--nocontent ::slotted([ui5-card-header]) { diff --git a/packages/main/src/themes/ListItemBase.css b/packages/main/src/themes/ListItemBase.css index ef0c7d35ede9..81c83fd4e803 100644 --- a/packages/main/src/themes/ListItemBase.css +++ b/packages/main/src/themes/ListItemBase.css @@ -74,8 +74,8 @@ } :host([disabled]) { - opacity: var(--_ui5-listitembase_disabled_opacity); - pointer-events: none; + opacity: var(--_ui5-listitembase_disabled_opacity); + pointer-events: none; } .ui5-li-content { diff --git a/packages/main/test/pages/styles/Card.css b/packages/main/test/pages/styles/Card.css index fc4af941bb3d..cc7647644a94 100644 --- a/packages/main/test/pages/styles/Card.css +++ b/packages/main/test/pages/styles/Card.css @@ -25,3 +25,7 @@ .myCardHeader--ar-he-ch::part(title) { font-weight: 700; } + +[ui5-card] [ui5-list]:last-child { + margin-block-end: 0.75rem; +} \ No newline at end of file diff --git a/packages/main/test/pages/styles/Carousel.css b/packages/main/test/pages/styles/Carousel.css index 99d021d72e4c..125a5faefe30 100644 --- a/packages/main/test/pages/styles/Carousel.css +++ b/packages/main/test/pages/styles/Carousel.css @@ -7,6 +7,10 @@ ui5-carousel { height: 100%; } +[ui5-card] [ui5-list]:last-child { + margin-block-end: 0.75rem; +} + .carousel1auto { background-color: var(--sapBackgroundColor); padding: 1rem; diff --git a/packages/playground/_stories/main/Card/Card.stories.ts b/packages/playground/_stories/main/Card/Card.stories.ts index 87a9135d3bf6..96ed1569a9bf 100644 --- a/packages/playground/_stories/main/Card/Card.stories.ts +++ b/packages/playground/_stories/main/Card/Card.stories.ts @@ -47,7 +47,7 @@ const header = (titleText: string, subtitleText: string, status?: string, action ${interactive ? "interactive" : ""} > ${avatar ? avatar : ""} - ${actions?.map(a => `${a}`)} + ${actions ? actions.map(a => `${a}`) : ""} `; }; @@ -67,7 +67,7 @@ const setWidth = (width: string) => { export const InteractiveHeader = Template.bind({}); InteractiveHeader.args = { header: header("This header is interactive", "Click, press Enter or Space", "3 of 6", [], ``, true), - default: ` + default: ` Richard Wilson Elena Petrova John Miller @@ -95,7 +95,7 @@ WithTable.args = { .status-success { color: #107e3e; } - + Sales Order @@ -182,14 +182,14 @@ WithTimeline.decorators = [setWidth("22rem")]; export const More = Template.bind({}); const MoreCards = [{ header: header("David Williams", "Sales Manager"), - default: ` + default: ` Personal Development Finance Communications Skills ` }, { header: header("Project Cloud Transformation", "Revenue per Product | EUR", "3 of 3"), - default: ` + default: ` Avantel Telecomunicaciones Star Talpa diff --git a/packages/playground/_stories/main/Carousel/Carousel.stories.ts b/packages/playground/_stories/main/Carousel/Carousel.stories.ts index 36d43e636e5e..80bdce50ea11 100644 --- a/packages/playground/_stories/main/Carousel/Carousel.stories.ts +++ b/packages/playground/_stories/main/Carousel/Carousel.stories.ts @@ -86,25 +86,21 @@ MultipleItemsPerPage.args = { -
- - Alain Chevalier - Monique Legrand - Michael Adams - -
+ + Alain Chevalier + Monique Legrand + Michael Adams + -
- - Richard Wilson - Elena Petrova - John Miller - -
+ + Richard Wilson + Elena Petrova + John Miller + ` }; MultipleItemsPerPage.decorators = [ @@ -117,15 +113,12 @@ MultipleItemsPerPage.decorators = [ min-width: 18rem; } - ui5-li::part(icon) { - padding-inline-end: 0; + ui5-card ui5-list:last-child { + margin-block-end: 0.75rem; } - .card-content { - display: flex; - justify-content: space-around; - flex-wrap: wrap; - width: 100%; + ui5-li::part(icon) { + padding-inline-end: 0; } ${story()}` From 1051c4706fbc4433459f66984a8fe2349535b91e Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Wed, 13 Sep 2023 12:19:19 +0200 Subject: [PATCH 003/141] docs(ui5-toolbar): add note about allowed components in default slot (#7577) --- packages/main/src/Toolbar.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 17eca059464c..13c2cbaae904 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -154,6 +154,8 @@ class Toolbar extends UI5Element { /** * Defines the items of the component. + * + * Note: Currently only ui5-toolbar-button, ui5-toolbar-select, ui5-toolbar-separator and ui5-toolbar-spacer are allowed here. * * @type {sap.ui.webc.main.IToolbarItem[]} * @name sap.ui.webc.main.Toolbar.prototype.default From 0e4b7c97b280431415e088c9fcaad4fe5a249de8 Mon Sep 17 00:00:00 2001 From: gmkv Date: Wed, 13 Sep 2023 13:32:21 +0300 Subject: [PATCH 004/141] chore: bump theming-base-content version to 11.6.8 (#7571) This update includes the updated theme parameters. See https://github.com/SAP/theming-base-content/releases/tag/11.6.8 --- 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 6e87b219f4c9..a73c4bf35bb7 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.4", + "@sap-theming/theming-base-content": "11.6.8", "@ui5/webcomponents-base": "1.18.0-rc.0" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 02e4ec63c1fc..ad5ec5546756 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.4": - version "11.6.4" - resolved "https://registry.yarnpkg.com/@sap-theming/theming-base-content/-/theming-base-content-11.6.4.tgz#828b314c5036b054d4bae20243b382e1eb57c7cf" - integrity sha512-ub3W9qRO4Kt1nrXJBvTqUbQjpAhcQNGcIh1CTopVStpGGhEP1a2VPeXxJQPL37FCzIFeN898OBiQgCgQNpVqYQ== +"@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== "@sigstore/protobuf-specs@^0.1.0": version "0.1.0" From 6594cd5df91f31f31efc740846670df4a1c1933d Mon Sep 17 00:00:00 2001 From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com> Date: Wed, 13 Sep 2023 13:51:40 +0300 Subject: [PATCH 005/141] =?UTF-8?q?fix(ui5-upload-coll=D0=B5ction):=20alig?= =?UTF-8?q?n=20buttons=20to=20avoid=20extra=20space=20when=20size=20is=20s?= =?UTF-8?q?mall=20(#7491)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fiori/src/UploadCollectionItem.hbs | 120 +++++++++--------- .../fiori/src/themes/UploadCollectionItem.css | 67 +++++----- .../base/UploadCollection-parameters.css | 5 +- .../UploadCollection-parameters.css | 5 + .../themes/sap_belize/parameters-bundle.css | 4 +- .../UploadCollection-parameters.css | 1 + .../UploadCollection-parameters.css | 1 + .../UploadCollection-parameters.css | 2 - .../UploadCollection-parameters.css | 2 - .../UploadCollection-parameters.css | 2 - .../UploadCollection-parameters.css | 2 - .../UploadCollection-parameters.css | 2 - .../UploadCollection-parameters.css | 2 - .../UploadCollection-parameters.css | 2 - .../UploadCollection-parameters.css | 2 - .../fiori/test/specs/UploadCollection.spec.js | 2 +- 16 files changed, 104 insertions(+), 117 deletions(-) create mode 100644 packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css diff --git a/packages/fiori/src/UploadCollectionItem.hbs b/packages/fiori/src/UploadCollectionItem.hbs index ac05109cef36..df025c3b8a92 100644 --- a/packages/fiori/src/UploadCollectionItem.hbs +++ b/packages/fiori/src/UploadCollectionItem.hbs @@ -1,11 +1,10 @@ {{>include "../../main/src/ListItem.hbs"}} {{#*inline "listItemContent"}} -
- -
- -
+
+
+ +
{{#if _editing}} @@ -46,65 +45,66 @@
{{/if}}
-
- {{#if _editing}} +
+ +
+ {{#if _editing}} + {{_renameBtnText}} + {{_cancelRenameBtnText}} + {{else}} + {{#if _showRetry}} {{_renameBtnText}} + icon="refresh" + design="Transparent" + tooltip="{{_retryButtonTooltip}}" + @click="{{_onRetry}}" + @keyup="{{_onRetryKeyup}}" + > + {{/if}} + {{#if _showTerminate}} {{_cancelRenameBtnText}} - {{else}} - {{#if _showRetry}} - - {{/if}} - {{#if _showTerminate}} - - - {{/if}} + icon="stop" + design="Transparent" + tooltip="{{_terminateButtonTooltip}}" + @click="{{_onTerminate}}" + @keyup="{{_onTerminateKeyup}}"> + + {{/if}} - {{#if showEditButton}} - - - {{/if}} + {{#if showEditButton}} + + + {{/if}} - {{#if renderUploadCollectionDeleteButton}} - - {{/if}} + {{#if renderUploadCollectionDeleteButton}} + {{/if}} -
+ {{/if}}
{{/inline}} \ No newline at end of file diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css index 25d97dcf646a..2f60ba24f080 100644 --- a/packages/fiori/src/themes/UploadCollectionItem.css +++ b/packages/fiori/src/themes/UploadCollectionItem.css @@ -1,35 +1,43 @@ :host { height: auto; + container-type: inline-size; } :host(:not([hidden])) { display: block; } +:host::part(content) { + overflow: visible; /* prevents buttons hover shadow clipping */ +} + .ui5-li-root.ui5-uci-root { padding: 1rem; } -.ui5-uci-edit-buttons { +.ui5-uci-buttons { display: flex; + pointer-events: all; + margin-inline-start: 1rem; + gap: 0.5rem; } /* Thumbnail */ .ui5-uci-thumbnail { - width: 3rem; - height: 3rem; - margin-right: 0.75rem; + width: var(--ui5_upload_collection_thumbnail_size); + height: var(--ui5_upload_collection_thumbnail_size); + margin-inline-end: var(--ui5_upload_collection_thumbnail_margin_inline_end); } ::slotted([ui5-icon][slot="thumbnail"]) { - width: 3rem; - height: 3rem; + width: var(--ui5_upload_collection_thumbnail_size); + height: var(--ui5_upload_collection_thumbnail_size); font-size: 2.5rem; } ::slotted(img[slot="thumbnail"]) { - width: 3rem; - height: 3rem; + width: var(--ui5_upload_collection_thumbnail_size); + height: var(--ui5_upload_collection_thumbnail_size); } :host([actionable]) ::slotted([ui5-icon][slot="thumbnail"]) { @@ -37,7 +45,7 @@ } /* Content */ -.ui5-uci-content-and-edit-container { +.ui5-uci-thumbnail-and-content-container { flex: 1 1 auto; min-width: 0; /* fixes chrome overflow issue */ display: flex; @@ -53,11 +61,14 @@ .ui5-uci-content { flex: 1 1 auto; - margin-right: .5rem; width: 100%; min-width: 0; /* fixes chrome overflow issue */ } +.ui5-uci-progress-box { + margin-inline-start: 0.5rem; +} + .ui5-uci-file-name { display: block; font-family: "72override", var(--sapFontFamily); @@ -123,18 +134,17 @@ display: none; } -.ui5-uci-edit-buttons { - pointer-events: all; - margin-inline-start: 1rem; -} - .ui5-uci-edit-rename-btn { margin-right: 0.125rem; } -@media(max-width: 30rem) { - .ui5-uci-content-and-edit-container { - display: block; +@container (max-width: 30rem) { + :host::part(content) { + flex-wrap: wrap; + } + + .ui5-uci-thumbnail-and-content-container { + width: 100%; } .ui5-uci-content-and-progress { @@ -144,20 +154,17 @@ .ui5-uci-progress-box { width: 100%; margin-top: .5rem; + margin-inline-start: 0; } .ui5-uci-content { width: 100%; } - .ui5-uci-edit-buttons { - margin-inline-start: 0; + .ui5-uci-buttons { + margin-inline-start: var(--ui5_upload_collection_small_size_buttons_margin_inline_start); margin-block-start: var(--ui5_upload_collection_small_size_buttons_margin_block_start); } - - .ui5-uci-edit-buttons [ui5-button] { - margin-block-end: var(--ui5_upload_collection_button_margin_block_end); - } } .ui5-uci-progress-indicator { @@ -172,18 +179,6 @@ justify-content: space-between; } -[ui5-button] { - margin-inline: 0.5rem; -} - -[ui5-button]:first-of-type { - margin-inline-start: 0; -} - -[ui5-button]:last-of-type { - margin-inline-end: var(--ui5_upload_collection_last_button_inline_end); -} - :host([active][actionable]) ::slotted([ui5-icon][slot="thumbnail"]), :host([active][actionable]) .ui5-uci-file-name, :host([active][actionable]) .ui5-uci-description { diff --git a/packages/fiori/src/themes/base/UploadCollection-parameters.css b/packages/fiori/src/themes/base/UploadCollection-parameters.css index 9686026a484f..ac00bf83c58a 100644 --- a/packages/fiori/src/themes/base/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/base/UploadCollection-parameters.css @@ -2,7 +2,8 @@ --ui5_upload_collection_drag_overlay_border: 0.125rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.125rem solid var(--sapContent_DragAndDropActiveColor); --ui5_upload_collection_drop_overlay_background: transparent; - --ui5_upload_collection_button_margin_block_end: 0; - --ui5_upload_collection_last_button_inline_end: 0; + --ui5_upload_collection_thumbnail_size: 3rem; + --ui5_upload_collection_thumbnail_margin_inline_end: 0.75rem; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.75rem; + --ui5_upload_collection_small_size_buttons_margin_inline_start: 0; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css new file mode 100644 index 000000000000..74225a5e87cd --- /dev/null +++ b/packages/fiori/src/themes/sap_belize/UploadCollection-parameters.css @@ -0,0 +1,5 @@ +@import "../base/UploadCollection-parameters.css"; + +:root { + --ui5_upload_collection_small_size_buttons_margin_inline_start: calc(var(--ui5_upload_collection_thumbnail_size) + var(--ui5_upload_collection_thumbnail_margin_inline_end)); +} \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize/parameters-bundle.css b/packages/fiori/src/themes/sap_belize/parameters-bundle.css index 24902e4ae4f0..d7ddadee3a99 100644 --- a/packages/fiori/src/themes/sap_belize/parameters-bundle.css +++ b/packages/fiori/src/themes/sap_belize/parameters-bundle.css @@ -9,7 +9,7 @@ @import "../base/ShellBar-parameters.css"; @import "../base/SideNavigation-parameters.css"; @import "../base/TimelineItem-parameters.css"; -@import "../base/UploadCollection-parameters.css"; @import "../base/ViewSettingsDialog-parameters.css"; @import "../base/Wizard-parameters.css"; -@import "../base/WizardTab-parameters.css"; \ No newline at end of file +@import "../base/WizardTab-parameters.css"; +@import "./UploadCollection-parameters.css"; \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css index e635bd9a99d1..ba8072b27698 100644 --- a/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_belize_hcb/UploadCollection-parameters.css @@ -4,4 +4,5 @@ --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); --ui5_upload_collection_drop_overlay_background: transparent; + --ui5_upload_collection_small_size_buttons_margin_inline_start: calc(var(--ui5_upload_collection_thumbnail_size) + var(--ui5_upload_collection_thumbnail_margin_inline_end)); } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css index 24c88b60f303..fad99a722f32 100644 --- a/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_belize_hcw/UploadCollection-parameters.css @@ -3,4 +3,5 @@ :root { --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); + --ui5_upload_collection_small_size_buttons_margin_inline_start: calc(var(--ui5_upload_collection_thumbnail_size) + var(--ui5_upload_collection_thumbnail_margin_inline_end)); } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css index f504586df9e2..23cb9e77ee23 100644 --- a/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon/UploadCollection-parameters.css @@ -1,7 +1,5 @@ @import "../base/UploadCollection-parameters.css"; :root { - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css index f504586df9e2..23cb9e77ee23 100644 --- a/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark/UploadCollection-parameters.css @@ -1,7 +1,5 @@ @import "../base/UploadCollection-parameters.css"; :root { - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css index f504586df9e2..23cb9e77ee23 100644 --- a/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_dark_exp/UploadCollection-parameters.css @@ -1,7 +1,5 @@ @import "../base/UploadCollection-parameters.css"; :root { - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css index f504586df9e2..23cb9e77ee23 100644 --- a/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_exp/UploadCollection-parameters.css @@ -1,7 +1,5 @@ @import "../base/UploadCollection-parameters.css"; :root { - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css index 743a58be3118..69913c713307 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb/UploadCollection-parameters.css @@ -4,7 +4,5 @@ --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); --ui5_upload_collection_drop_overlay_background: transparent; - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css index 743a58be3118..69913c713307 100644 --- a/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcb_exp/UploadCollection-parameters.css @@ -4,7 +4,5 @@ --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); --ui5_upload_collection_drop_overlay_background: transparent; - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css index 7c3f439e2931..18eefa6d36d9 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw/UploadCollection-parameters.css @@ -3,7 +3,5 @@ :root { --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css b/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css index 7c3f439e2931..18eefa6d36d9 100644 --- a/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css +++ b/packages/fiori/src/themes/sap_horizon_hcw_exp/UploadCollection-parameters.css @@ -3,7 +3,5 @@ :root { --ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor); --ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor); - --ui5_upload_collection_button_margin_block_end: 2px; - --ui5_upload_collection_last_button_inline_end: 2px; --ui5_upload_collection_small_size_buttons_margin_block_start: 0.5rem; } \ No newline at end of file diff --git a/packages/fiori/test/specs/UploadCollection.spec.js b/packages/fiori/test/specs/UploadCollection.spec.js index acad191ff271..63a3c155e428 100644 --- a/packages/fiori/test/specs/UploadCollection.spec.js +++ b/packages/fiori/test/specs/UploadCollection.spec.js @@ -22,7 +22,7 @@ describe("UploadCollection", () => { await editButton.click(); assert.ok(await secondItem.shadow$(".ui5-uci-edit-container").isDisplayed(), "edit container should be rendered"); - assert.ok(await secondItem.shadow$(".ui5-uci-edit-buttons").isDisplayed(), "edit buttons should be rendered"); + assert.ok(await secondItem.shadow$(".ui5-uci-buttons").isDisplayed(), "buttons should be rendered"); assert.notOk(await secondItem.shadow$(".ui5-li-detailbtn").isDisplayed(), "detail button should be hidden"); // reset the item From d459fc217bf6c63c1070743ea7d4447b08bdf2bc Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Wed, 13 Sep 2023 14:10:24 +0300 Subject: [PATCH 006/141] fix(ui5-segmented-button): visual misalignments (#7528) * chore: simplify css * chore: finish css changes * fix(ui5-segmented-button): add rtl parameters * fix(ui5-segmented-button): change rtl parameters --------- Co-authored-by: Nayden Naydenov Co-authored-by: ilhan007 Co-authored-by: hinzzx Co-authored-by: Stoyan <88034608+hinzzx@users.noreply.github.com> --- packages/main/src/themes/SegmentedButton.css | 44 ++++++-------- .../base/SegmentedButtton-parameters.css | 5 +- .../main/src/themes/base/rtl-parameters.css | 2 + .../main/src/themes/base/sizes-parameters.css | 3 - .../SegmentedButtton-parameters.css | 9 ++- .../themes/sap_horizon/parameters-bundle.css | 2 +- .../src/themes/sap_horizon/rtl-parameters.css | 6 ++ .../SegmentedButtton-parameters.css | 9 ++- .../sap_horizon_dark/parameters-bundle.css | 2 +- .../sap_horizon_dark/rtl-parameters.css | 6 ++ .../SegmentedButtton-parameters.css | 9 ++- .../parameters-bundle.css | 2 +- .../sap_horizon_dark_exp/rtl-parameters.css | 6 ++ .../SegmentedButtton-parameters.css | 9 ++- .../sap_horizon_exp/parameters-bundle.css | 2 +- .../themes/sap_horizon_exp/rtl-parameters.css | 6 ++ .../SegmentedButtton-parameters.css | 1 - .../SegmentedButtton-parameters.css | 1 - .../SegmentedButtton-parameters.css | 1 - .../SegmentedButtton-parameters.css | 1 - packages/main/test/pages/SegmentedButton.html | 57 +++++++++++++++++++ 21 files changed, 129 insertions(+), 54 deletions(-) create mode 100644 packages/main/src/themes/sap_horizon/rtl-parameters.css create mode 100644 packages/main/src/themes/sap_horizon_dark/rtl-parameters.css create mode 100644 packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css create mode 100644 packages/main/src/themes/sap_horizon_exp/rtl-parameters.css diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index dad64d57a650..d640c6427e01 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -13,11 +13,14 @@ margin: 0; padding: 0; background-color: var(--sapButton_Background); - border-radius: var(--_ui5_segmented_btn_outer_border_radius); + border-radius: var(--sapButton_BorderCornerRadius); + box-shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } ::slotted([ui5-segmented-button-item]) { border-radius: var(--_ui5_segmented_btn_inner_border_radius); + border-color: var(--_ui5_segmented_btn_border_color); + background-color: var(--_ui5_segmented_btn_background_color); height: var(--_ui5_button_base_height); min-width: 2.5rem; white-space: nowrap; @@ -28,52 +31,37 @@ ::slotted([ui5-segmented-button-item]:hover) { z-index: 2; + box-shadow: var(--_ui5_segmented_btn_hover_box_shadow); + border-color: var(--sapButton_Hover_BorderColor); + background-color: var(--sapButton_Hover_Background); } ::slotted([ui5-segmented-button-item][pressed]), ::slotted([ui5-segmented-button-item][active]) { - border: 0.0625rem solid var(--sapButton_Selected_BorderColor); + border-color: var(--sapButton_Selected_BorderColor); background-color: var(--sapButton_Selected_Background); color: var(--sapButton_Selected_TextColor); } ::slotted([ui5-segmented-button-item][pressed]:hover) { - border: 0.0625rem solid var(--sapButton_Selected_Hover_BorderColor); + border-color: var(--sapButton_Selected_Hover_BorderColor); background-color: var(--sapButton_Selected_Hover_Background); color: var(--sapButton_Selected_TextColor); } -::slotted([ui5-segmented-button-item]:nth-child(odd)) { - border-inline-end: var(--_ui5_segmented_btn_inner_border_odd_child); - border-inline-start: var(--_ui5_segmented_btn_inner_border_odd_child); -} - -::slotted([ui5-segmented-button-item][pressed]:nth-child(odd)), -::slotted([ui5-segmented-button-item][active]:nth-child(odd)) { - border-inline-end: var(--_ui5_segmented_btn_inner_pressed_border_odd_child); - border-inline-start: var(--_ui5_segmented_btn_inner_pressed_border_odd_child); -} - ::slotted([ui5-segmented-button-item]:last-child) { - border-start-end-radius: var(--_ui5_segmented_btn_border_radius); - border-end-end-radius: var(--_ui5_segmented_btn_border_radius); - border-inline-end: var(--_ui5_segmented_btn_inner_border); -} - -::slotted([ui5-segmented-button-item][pressed]:last-child), -::slotted([ui5-segmented-button-item][active]:last-child) { - border-inline-end: 0.0625rem solid var(--sapButton_Selected_BorderColor); + border-start-end-radius: var(--sapButton_BorderCornerRadius); + border-end-end-radius: var(--sapButton_BorderCornerRadius); } ::slotted([ui5-segmented-button-item]:first-child) { - border-start-start-radius: var(--_ui5_segmented_btn_border_radius); - border-end-start-radius: var(--_ui5_segmented_btn_border_radius); - border-inline-start: var(--_ui5_segmented_btn_inner_border); + border-start-start-radius: var(--sapButton_BorderCornerRadius); + border-end-start-radius: var(--sapButton_BorderCornerRadius); } -::slotted([ui5-segmented-button-item][pressed]:first-child), -::slotted([ui5-segmented-button-item][active]:first-child) { - border-inline-start: 0.0625rem solid var(--sapButton_Selected_BorderColor); +::slotted([ui5-segmented-button-item]:not(:first-child)) { + border-left-width: var(--_ui5_segmented_btn_item_border_left); + border-right-width: var(--_ui5_segmented_btn_item_border_right); } ::slotted([ui5-segmented-button-item][active]:not([active]):hover) { diff --git a/packages/main/src/themes/base/SegmentedButtton-parameters.css b/packages/main/src/themes/base/SegmentedButtton-parameters.css index 6eddd2ffc525..d5bea9caa14f 100644 --- a/packages/main/src/themes/base/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/base/SegmentedButtton-parameters.css @@ -2,8 +2,7 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0; - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; - --_ui5_segmented_btn_outer_border_radius: 0.375rem; - --_ui5_segmented_btn_background_color: transparent; + --_ui5_segmented_btn_item_border_left: 0px; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 9f4799745e86..00a8636e237d 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -41,5 +41,7 @@ --_ui5_menu_submenu_placement_type_left_margin_offset: 0 0.25rem; --_ui5-menu_item_icon_float: left; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0px; --_ui5-shellbar-notification-btn-count-offset: auto; } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 1fe422e02e73..49dcd040f218 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -135,9 +135,6 @@ --_ui5_timeline_tli_indicator_before_without_icon_bottom: -1.875rem; --_ui5_timeline_tli_indicator_before_without_icon_right: -1.9375rem; - /* SegmentedButton */ - --_ui5_segmented_btn_border_radius: 0.375rem; - /* SplitButton */ --_ui5_split_button_middle_separator_top: 0; --_ui5_split_button_middle_separator_height: 2.25rem; diff --git a/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css index 6e45e94d1d12..c277f0ca9dc1 100644 --- a/packages/main/src/themes/sap_horizon/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon/parameters-bundle.css @@ -62,4 +62,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/rtl-parameters.css b/packages/main/src/themes/sap_horizon/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css index 8897a981a59d..0f76992aab21 100644 --- a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css @@ -61,4 +61,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_dark/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css index 8897a981a59d..0f76992aab21 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/parameters-bundle.css @@ -61,4 +61,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_dark_exp/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css index 011d6ce31a86..43753fcc6893 100644 --- a/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/SegmentedButtton-parameters.css @@ -4,7 +4,10 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.5rem; - --_ui5_segmented_btn_inner_border_radius: 0.5rem; - --_ui5_segmented_btn_outer_border_radius: 0.5rem; + --_ui5_segmented_btn_inner_border_radius: var(--sapButton_BorderCornerRadius); + --_ui5_segmented_btn_background_color: var(--sapButton_Lite_Background); + --_ui5_segmented_btn_border_color: var(--sapButton_Lite_BorderColor); + --_ui5_segmented_btn_hover_box_shadow: none; + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css index 71dd171eedae..ba5306f98e0f 100644 --- a/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css +++ b/packages/main/src/themes/sap_horizon_exp/parameters-bundle.css @@ -61,4 +61,4 @@ @import "./StepInput-parameters.css"; @import "./GrowingButton-parameters.css"; @import "./sizes-parameters.css"; -@import "../base/rtl-parameters.css"; \ No newline at end of file +@import "./rtl-parameters.css"; \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css new file mode 100644 index 000000000000..c61f63a0b675 --- /dev/null +++ b/packages/main/src/themes/sap_horizon_exp/rtl-parameters.css @@ -0,0 +1,6 @@ +@import "../base/rtl-parameters.css"; + +[dir="rtl"] { + --_ui5_segmented_btn_item_border_left: 0.0625rem; + --_ui5_segmented_btn_item_border_right: 0.0625rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css index ab5c3a8e4251..ed8b3b9cc25f 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/SegmentedButtton-parameters.css @@ -4,6 +4,5 @@ --_ui5_segmented_btn_inner_border: 0.0625rem solid var(--sapButton_Selected_BorderColor); --_ui5_segmented_btn_inner_border_odd_child: 0.0625rem solid transparent; --_ui5_segmented_btn_inner_pressed_border_odd_child: 0.0625rem solid var(--sapButton_Selected_BorderColor); - --_ui5_segmented_btn_border_radius: 0.375rem; --_ui5_segmented_btn_inner_border_radius: 0; } \ No newline at end of file diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index 826f6f06d38f..76233622464d 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -24,6 +24,63 @@

ui5-segmented-button

Segmentedbutton example

+ Default button +
+
+ + First + Second + +
+
+ + First + Second + Third + +
+
+ + First + Second + Third + Fourth + +
+
+ + First + Second + Third + Fourth + Fifth + +
+
+ + First + Second + Third + Fourth + Fifth + Sixth + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Item From 21528a0ae5f3cec84d30362eba79bb6fa08a75d4 Mon Sep 17 00:00:00 2001 From: Evdokia Yordanova Date: Wed, 13 Sep 2023 16:30:49 +0300 Subject: [PATCH 007/141] feat(ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input): add wrapping in suggestions and n-more (#7509) * feat(ui5-combobox): poc add wrapping in suggestions and n-more * feat(ui5-combo-box,ui5-multi-combo-box,ui5-input,ui5-multi-input): poc add wrapping suggest/n-more * feat(ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input): update testing examples * feat(ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input): add storybook samples * feat(ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input): update * feat(ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input): update * feat(ui5-combobox, ui5-multi-combo-box, ui5-input, ui5-multi-input): update comments --- packages/main/src/ComboBoxPopover.hbs | 1 + packages/main/src/InputPopover.hbs | 1 + packages/main/src/MultiComboBoxPopover.hbs | 1 + packages/main/src/TokenizerPopover.hbs | 5 ++++- packages/main/src/themes/Suggestions.css | 5 ----- packages/main/test/pages/ComboBox.html | 9 +++++++++ packages/main/test/pages/Input.html | 6 ++++++ packages/main/test/pages/MultiComboBox.html | 8 +++++++- packages/main/test/pages/MultiInput.html | 16 ++++++++++++++++ .../_stories/main/ComboBox/ComboBox.stories.ts | 10 ++++++++++ .../_stories/main/Input/Input.stories.ts | 10 ++++++++++ .../main/MultiComboBox/MultiComboBox.stories.ts | 11 ++++++++++- .../main/MultiInput/MultiInput.stories.ts | 14 +++++++++++++- 13 files changed, 88 insertions(+), 9 deletions(-) diff --git a/packages/main/src/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs index b36fe5422d00..239ad2f725e7 100644 --- a/packages/main/src/ComboBoxPopover.hbs +++ b/packages/main/src/ComboBoxPopover.hbs @@ -122,6 +122,7 @@ {{#*inline "listItem"}} {{{ this.text }}} {{else}} {{#each _tokens}} - + {{this.text}} {{/each}} diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css index d4c2c4150f20..75b013a31310 100644 --- a/packages/main/src/themes/Suggestions.css +++ b/packages/main/src/themes/Suggestions.css @@ -11,11 +11,6 @@ padding: 0 1rem; } -.ui5-suggestions-popover [ui5-li], -.ui5-suggestions-popover [ui5-li-suggestion-item] { - height: var(--_ui5_list_item_dropdown_base_height); -} - .ui5-suggestions-popover [ui5-li]::part(icon), .ui5-suggestions-popover [ui5-li-suggestion-item]::part(icon) { color: var(--sapList_TextColor); diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index 7d8644f1de9b..56d7ebeeb41c 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -262,6 +262,15 @@

ComboBox in Compact

+
+ ComboBox - suggestions and show wrapping + + + + + +
+ `; } -] \ No newline at end of file +] + + +export const SuggestionsWrapping = Template.bind({}); +SuggestionsWrapping.args = { + placeholder: "Enter product", + showSuggestions: true, + default: ` + + + `, + valueStateMessage: '
Token is already in the list
', +}; \ No newline at end of file From edeab49e3f7b63b3aee358983ea1fb9ff586ea3c Mon Sep 17 00:00:00 2001 From: Petar Dimov <32839090+dimovpetar@users.noreply.github.com> Date: Wed, 13 Sep 2023 16:41:15 +0300 Subject: [PATCH 008/141] fix(ui5-upload-collection-item): align thumbnail to top (#7582) Fixes #7551 --- packages/fiori/src/themes/UploadCollectionItem.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fiori/src/themes/UploadCollectionItem.css b/packages/fiori/src/themes/UploadCollectionItem.css index 2f60ba24f080..8bc45cd82a7f 100644 --- a/packages/fiori/src/themes/UploadCollectionItem.css +++ b/packages/fiori/src/themes/UploadCollectionItem.css @@ -49,7 +49,7 @@ flex: 1 1 auto; min-width: 0; /* fixes chrome overflow issue */ display: flex; - align-items: center; + align-items: flex-start; } .ui5-uci-content-and-progress { From 16111210e746381b1a79c39ea656363b3b734fd5 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Thu, 14 Sep 2023 11:05:24 +0300 Subject: [PATCH 009/141] chore: remove preview themes (#7580) Co-authored-by: Nayden Naydenov --- packages/playground/.storybook/decorators/useOptions.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/playground/.storybook/decorators/useOptions.ts b/packages/playground/.storybook/decorators/useOptions.ts index 7084ba9ca25f..2da3c9eb2128 100644 --- a/packages/playground/.storybook/decorators/useOptions.ts +++ b/packages/playground/.storybook/decorators/useOptions.ts @@ -10,10 +10,6 @@ export const themes: Themes = { "Evening Horizon": "sap_horizon_dark", "Horizon High Contrast Black": "sap_horizon_hcb", "Horizon High Contrast White": "sap_horizon_hcw", - "Morning Horizon Preview": "sap_horizon_exp", - "Evening Horizon Preview": "sap_horizon_dark_exp", - "Horizon High Contrast Black Preview": "sap_horizon_hcb_exp", - "Horizon High Contrast White Preview": "sap_horizon_hcw_exp", "Quartz Light": "sap_fiori_3", "Quartz Dark": "sap_fiori_3_dark", "Quartz High Contrast Black": "sap_fiori_3_hcb", From 4d144dd76001cd2eed284629b12de9d99b64f383 Mon Sep 17 00:00:00 2001 From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com> Date: Thu, 14 Sep 2023 11:31:33 +0300 Subject: [PATCH 010/141] feat(ui5-checkbox): update horizon theme paramaters (#7576) --- packages/main/src/themes/sap_horizon/CheckBox-parameters.css | 3 +-- .../main/src/themes/sap_horizon_dark/CheckBox-parameters.css | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css index 4a86dba60bd7..f16fbe99648e 100644 --- a/packages/main/src/themes/sap_horizon/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon/CheckBox-parameters.css @@ -14,10 +14,9 @@ --_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); + --_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_active_background: var(--sapContent_Selected_Hover_Background); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); /* readonly */ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed; /* error state */ diff --git a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css index 755aca223bb6..f55e190b54ea 100644 --- a/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/CheckBox-parameters.css @@ -14,10 +14,9 @@ --_ui5_checkbox_hover_background: var(--sapContent_Selected_Hover_Background); --_ui5_checkbox_inner_hover_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_inner_hover_checked_border_color: var(--sapField_Hover_BorderColor); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); + --_ui5_checkbox_inner_selected_border_color: var(--sapField_BorderColor); --_ui5_checkbox_inner_active_border_color: var(--sapField_Hover_BorderColor); --_ui5_checkbox_active_background: var(--sapContent_Selected_Hover_Background); - --_ui5_checkbox_inner_selected_border_color: var(--sapField_Hover_BorderColor); /* readonly */ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) dashed; /* error state */ From 3835032336d4e7366bd70639b59dc0bfca6c5b0b Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Thu, 14 Sep 2023 03:56:51 -0700 Subject: [PATCH 011/141] Translation Delivery (#7587) chore: translation delivery Change-Id: I8bae3c3918dc0a092e5bae721540300dfec3d940 --- packages/main/src/i18n/messagebundle_de.properties | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/i18n/messagebundle_de.properties b/packages/main/src/i18n/messagebundle_de.properties index 1f45ce92f764..09a001870683 100644 --- a/packages/main/src/i18n/messagebundle_de.properties +++ b/packages/main/src/i18n/messagebundle_de.properties @@ -139,7 +139,7 @@ MESSAGE_STRIP_INFORMATION=Informationsleiste MULTICOMBOBOX_DIALOG_OK_BUTTON=OK -RADIO_BUTTON_GROUP_REQUIRED=Select one of the available options. +RADIO_BUTTON_GROUP_REQUIRED=Wählen Sie eine der verfügbaren Optionen aus. VALUE_STATE_ERROR_ALREADY_SELECTED=Wert ist bereits ausgewählt. @@ -302,4 +302,4 @@ DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE=Zum Verschieben verwenden Sie die Pfeil DIALOG_HEADER_ARIA_DESCRIBEDBY_DRAGGABLE_RESIZABLE=Zum Verschieben verwenden Sie die Pfeiltasten; zum Ändern der Größe verwenden Sie die Umschalttaste + Pfeiltasten LABEL_COLON=: -TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Additional Options +TOOLBAR_OVERFLOW_BUTTON_ARIA_LABEL=Zusätzliche Optionen From b4dea675f5793c28ee9f0123d0e8bf6bd38c0b83 Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Thu, 14 Sep 2023 14:02:53 +0300 Subject: [PATCH 012/141] fix(ui5-switch): fix text alignment in all themes (#7416) In order to fix the visual design in all themes, we had to introduce an alternate CSS variable. This was added because in Horizon themes for example, for the Text and Graphical Switch, the variable --_ui5_switch_text_inactive_left needs to have a different value for each of the styles in order to be properly aligned. --- packages/main/src/themes/Switch.css | 3 +++ packages/main/src/themes/base/Switch-parameters.css | 3 +++ packages/main/src/themes/sap_horizon/Switch-parameters.css | 3 +++ .../main/src/themes/sap_horizon_dark/Switch-parameters.css | 4 ++++ .../main/src/themes/sap_horizon_hcb/Switch-parameters.css | 2 ++ .../main/src/themes/sap_horizon_hcw/Switch-parameters.css | 3 +++ 6 files changed, 18 insertions(+) diff --git a/packages/main/src/themes/Switch.css b/packages/main/src/themes/Switch.css index 986542778813..08ab32472658 100644 --- a/packages/main/src/themes/Switch.css +++ b/packages/main/src/themes/Switch.css @@ -337,11 +337,14 @@ color: var(--_ui5_switch_text_active_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; + left: var(--_ui5_switch_text_active_left_alternate); } .ui5-switch-root .ui5-switch-text--off { color: var(--_ui5_switch_text_inactive_color); overflow: var(--_ui5_switch_text_overflow); text-overflow: ellipsis; + left: var(--_ui5_switch_text_inactive_left_alternate); + right: var(--_ui5_switch_text_inactive_right_alternate); } .ui5-switch-root .ui5-switch-no-label-icon-on, diff --git a/packages/main/src/themes/base/Switch-parameters.css b/packages/main/src/themes/base/Switch-parameters.css index 5d5c815fa8de..30c9cd874c7a 100644 --- a/packages/main/src/themes/base/Switch-parameters.css +++ b/packages/main/src/themes/base/Switch-parameters.css @@ -116,8 +116,11 @@ --_ui5_switch_text_width: none; --_ui5_switch_text_inactive_left: auto; + --_ui5_switch_text_inactive_left_alternate: auto; --_ui5_switch_text_inactive_right: 0.125rem; + --_ui5_switch_text_inactive_right_alternate: 0.125rem; --_ui5_switch_text_active_left: calc(-100% + 2rem); + --_ui5_switch_text_active_left_alternate: calc(-100% + 2rem); --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Track_Selected_TextColor); diff --git a/packages/main/src/themes/sap_horizon/Switch-parameters.css b/packages/main/src/themes/sap_horizon/Switch-parameters.css index f9364cc20203..21c7fda0d64c 100644 --- a/packages/main/src/themes/sap_horizon/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon/Switch-parameters.css @@ -104,8 +104,11 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0.0625rem; --_ui5_switch_text_inactive_right: auto; + --_ui5_switch_text_inactive_right_alternate: 0; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Handle_Selected_TextColor); diff --git a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css index 900e5c76509e..9e1d2e2287eb 100644 --- a/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Switch-parameters.css @@ -103,8 +103,11 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0; --_ui5_switch_text_inactive_right: auto; + --_ui5_switch_text_inactive_right_alternate: 0; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Handle_Selected_TextColor); @@ -145,4 +148,5 @@ --_ui5_switch_text_font_size: var(--sapFontSize); --_ui5_switch_text_width: 1rem; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css index 17955ea429bf..65ec9d460d15 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Switch-parameters.css @@ -123,8 +123,10 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0.0625rem; --_ui5_switch_text_inactive_right: auto; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_compact_active_left: 0.1875rem; --_ui5_switch_text_active_right: auto; diff --git a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css index c724cf6383c1..75997d7e0d93 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Switch-parameters.css @@ -104,8 +104,10 @@ --_ui5_switch_text_with_label_width: 1.75rem; --_ui5_switch_text_inactive_left: 0.1875rem; + --_ui5_switch_text_inactive_left_alternate: 0.0625rem; --_ui5_switch_text_inactive_right: auto; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; --_ui5_switch_text_active_right: auto; --_ui5_switch_text_active_color: var(--sapButton_Handle_Selected_TextColor); @@ -146,4 +148,5 @@ --_ui5_switch_text_font_size: var(--sapFontSize); --_ui5_switch_text_width: 1rem; --_ui5_switch_text_active_left: 0.1875rem; + --_ui5_switch_text_active_left_alternate: 0.0625rem; } \ No newline at end of file From acf5c6683b828e6dec0094eba6a73c14d7566ada Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Thu, 14 Sep 2023 22:53:37 +0300 Subject: [PATCH 013/141] docs: enhance storybook samples (#7454) *Bar Cleared the JSDoc enums; Changed the story name to -> Basic *Button Cleared JSDoc enums; Remove redunant Storybook samples; *DatePicker Cleared JSDoc enums; *DynamicSideContent Added custom styling to the native HTML tags as changing the themes wasn't updating the content. For example on Dark themes like Evening Horizon, both the background and the text would appear dark, which led to poor user experience; *FileUploader Cleared JSDoc enums Moved the Custom FileUploader sample to lower position, because we do not encourage using non-focusable elements; *Menu Fixed wrong property name headerText -> header-text because it wasnt showing on Mobile Devices; Changed sample name -> Basic with Header Text -> Basic *SplitButton Cleared JSDoc enums; Remove redunant Storybook samples; *StepInput Cleared JSDoc enums; Wrapped the main story component in the Storybook in a div with max-width: 13rem, due to component being stretched to the whole page, causing poor user experience; Simplified and removed redunant Storybook samples; *Switch Remove redunant Storybook samples; Reduced the Textual Switch samples because we do not encourage using Text in our switch component; *ToggleButton Enhance samples; --- packages/fiori/src/Bar.ts | 16 +--- packages/main/src/Button.ts | 21 ------ packages/main/src/DatePicker.ts | 9 --- packages/main/src/FileUploader.ts | 10 --- packages/main/src/SplitButton.ts | 12 --- packages/main/src/StepInput.ts | 9 --- .../_stories/fiori/Bar/Bar.stories.ts | 2 +- .../DynamicSideContent.stories.ts | 38 +++++----- .../_stories/main/Button/Button.stories.ts | 52 +++++-------- .../main/Calendar/Calendar.stories.ts | 2 +- .../main/DatePicker/DatePicker.stories.ts | 2 +- .../DateRangePicker.stories.ts | 4 +- .../DateTimePicker/DateTimePicker.stories.ts | 2 +- .../main/FileUploader/FileUploader.stories.ts | 9 +-- .../_stories/main/Menu/Menu.stories.ts | 4 +- .../main/SplitButton/SplitButton.stories.ts | 45 ++++------- .../main/StepInput/StepInput.stories.ts | 74 ++++++++----------- .../_stories/main/Switch/Switch.stories.ts | 30 +------- .../main/ToggleButton/ToggleButton.stories.ts | 42 ++++------- 19 files changed, 115 insertions(+), 268 deletions(-) diff --git a/packages/fiori/src/Bar.ts b/packages/fiori/src/Bar.ts index 2bad152b0816..70b4d323b01e 100644 --- a/packages/fiori/src/Bar.ts +++ b/packages/fiori/src/Bar.ts @@ -71,16 +71,6 @@ class Bar extends UI5Element { /** * Defines the component's design. * - *

- * Note: - * Available options are: - *
    - *
  • Header
    • - *
  • Subheader
    • - *
  • Footer
    • - *
  • FloatingFooter
    • - *
- * * @type {sap.ui.webc.fiori.types.BarDesign} * @name sap.ui.webc.fiori.Bar.prototype.design * @defaultvalue "Header" @@ -90,7 +80,7 @@ class Bar extends UI5Element { design!: `${BarDesign}` /** - * Defines the content at the start of the bar + * Defines the content at the start of the bar. * @type {HTMLElement[]} * @name sap.ui.webc.fiori.Bar.prototype.startContent * @slot @@ -100,7 +90,7 @@ class Bar extends UI5Element { startContent!: Array; /** - * Defines the content in the middle of the bar + * Defines the content in the middle of the bar. * @type {HTMLElement[]} * @name sap.ui.webc.fiori.Bar.prototype.default * @slot middleContent @@ -110,7 +100,7 @@ class Bar extends UI5Element { middleContent!: Array /** - * Defines the content at the end of the bar + * Defines the content at the end of the bar. * @type {HTMLElement[]} * @name sap.ui.webc.fiori.Bar.prototype.endContent * @slot diff --git a/packages/main/src/Button.ts b/packages/main/src/Button.ts index 4885e558a350..0af5c780cf14 100644 --- a/packages/main/src/Button.ts +++ b/packages/main/src/Button.ts @@ -105,18 +105,6 @@ class Button extends UI5Element implements IFormElement { /** * Defines the component design. * - *

- * The available values are: - * - *
    - *
  • Default
    • - *
  • Emphasized
    • - *
  • Positive
    • - *
  • Negative
    • - *
  • Transparent
    • - *
  • Attention
    • - *
- * * @type {sap.ui.webc.main.types.ButtonDesign} * @name sap.ui.webc.main.Button.prototype.design * @defaultvalue "Default" @@ -254,15 +242,6 @@ class Button extends UI5Element implements IFormElement { * Defines whether the button has special form-related functionality. * *

- * The available values are: - * - *
    - *
  • Button
    • - *
  • Submit
    • - *
  • Reset
    • - *
- * - *

* Note: For the type property to have effect, you must add the following import to your project: * import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; * diff --git a/packages/main/src/DatePicker.ts b/packages/main/src/DatePicker.ts index ecbc692885e6..49ef0fbd65fc 100644 --- a/packages/main/src/DatePicker.ts +++ b/packages/main/src/DatePicker.ts @@ -226,15 +226,6 @@ class DatePicker extends DateComponentBase implements IFormElement { /** * Defines the value state of the component. - *

- * Available options are: - *
    - *
  • None
    • - *
  • Error
    • - *
  • Warning
    • - *
  • Success
    • - *
  • Information
    • - *
* * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.DatePicker.prototype.valueState diff --git a/packages/main/src/FileUploader.ts b/packages/main/src/FileUploader.ts index e730e95548ca..f9eb5050801b 100644 --- a/packages/main/src/FileUploader.ts +++ b/packages/main/src/FileUploader.ts @@ -183,16 +183,6 @@ class FileUploader extends UI5Element implements IFormElement { /** * Defines the value state of the component. - *

- * Available options are: - *
    - *
  • None
    • - *
  • Error
    • - *
  • Warning
    • - *
  • Success
    • - *
  • Information
    • - *
- * * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.FileUploader.prototype.valueState * @defaultvalue "None" diff --git a/packages/main/src/SplitButton.ts b/packages/main/src/SplitButton.ts index ce24c642575e..4d2e89622258 100644 --- a/packages/main/src/SplitButton.ts +++ b/packages/main/src/SplitButton.ts @@ -135,18 +135,6 @@ class SplitButton extends UI5Element { /** * Defines the component design. * - *

- * The available values are: - * - *
    - *
  • Default
    • - *
  • Emphasized
    • - *
  • Positive
    • - *
  • Negative
    • - *
  • Transparent
    • - *
  • Attention
    • - *
- * * @type {sap.ui.webc.main.types.ButtonDesign} * @name sap.ui.webc.main.SplitButton.prototype.design * @defaultvalue "Default" diff --git a/packages/main/src/StepInput.ts b/packages/main/src/StepInput.ts index 258645f5fa08..1e378eceba49 100644 --- a/packages/main/src/StepInput.ts +++ b/packages/main/src/StepInput.ts @@ -155,15 +155,6 @@ class StepInput extends UI5Element implements IFormElement { /** * Defines the value state of the component. - *

- * Available options are: - *
    - *
  • None
    • - *
  • Error
    • - *
  • Warning
    • - *
  • Success
    • - *
  • Information
    • - *
* * @name sap.ui.webc.main.StepInput.prototype.valueState * @type {sap.ui.webc.base.types.ValueState} diff --git a/packages/playground/_stories/fiori/Bar/Bar.stories.ts b/packages/playground/_stories/fiori/Bar/Bar.stories.ts index b27b14c5f164..14abd8382a0f 100644 --- a/packages/playground/_stories/fiori/Bar/Bar.stories.ts +++ b/packages/playground/_stories/fiori/Bar/Bar.stories.ts @@ -34,7 +34,7 @@ const Template: UI5StoryArgs = (args) => html``; export const Basic = Template.bind({}); -Basic.storyName = "With Content and Design"; +Basic.storyName = "Basic"; Basic.args = { design: BarDesign.Header, startContent: ``, diff --git a/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts b/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts index 2a34c00dcf78..69806c662672 100644 --- a/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts +++ b/packages/playground/_stories/fiori/DynamicSideContent/DynamicSideContent.stories.ts @@ -27,7 +27,20 @@ export default { argTypes, } as Meta; -const Template: UI5StoryArgs = (args) => html` = (args) => html` + + = (args) => htm export const Basic = Template.bind({}); Basic.args = { default: `
-

Main Content

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.

+ Main Content +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.

`, sideContent: `
-

Side Content

-

Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.

+ Side Content +

Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.

`, + sideContentVisibility: SideContentVisibility.AlwaysShow, }; - -export const Position = Template.bind({}); -Position.storyName = "Side Content Position"; -Position.args = { - sideContentPosition: SideContentPosition.Start, - default: `
-

Main Content

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex mi, elementum et ante commodo, semper sollicitudin magna. Sed dapibus ut tortor quis varius. Sed luctus sem at nunc porta vulputate. Suspendisse lobortis arcu est, quis ultrices ipsum fermentum a. Vestibulum a ipsum placerat ligula gravida fringilla at id ex. Etiam pellentesque lorem sed sagittis aliquam. Quisque semper orci risus, vel efficitur dui euismod aliquet. Morbi sapien sapien, rhoncus et rutrum nec, rhoncus id nisl. Cras non tincidunt enim, id eleifend neque.

-
`, - sideContent: `
-

Side Content

-

Morbi lorem libero, imperdiet id condimentum ac, tempor ut velit. Integer a laoreet sem. Nunc at sagittis nisi. Sed placerat diam eu porttitor dignissim. Maecenas nec fringilla tortor. Pellentesque ut elit est. Curabitur quis elit at mauris ullamcorper fringilla. Nullam diam mi, porttitor dictum orci nec, molestie luctus metus. Nunc ut ex blandit, elementum erat eget, pulvinar sapien. Donec nec lorem eu nunc eleifend tempor at non tortor. In quam velit, ornare at rutrum ac, porta ac augue. Suspendisse venenatis semper lacus at venenatis. Praesent vestibulum ligula nulla, at tempus lorem consequat suscipit. Aenean consequat dapibus dui, at bibendum mauris porta a.

-
`, -}; \ No newline at end of file diff --git a/packages/playground/_stories/main/Button/Button.stories.ts b/packages/playground/_stories/main/Button/Button.stories.ts index e12b0d54e051..f6f33296eeb9 100644 --- a/packages/playground/_stories/main/Button/Button.stories.ts +++ b/packages/playground/_stories/main/Button/Button.stories.ts @@ -40,39 +40,23 @@ const Template: UI5StoryArgs = (args) => html` html` - ${story()}`, -]; \ No newline at end of file +export const DifferentDesigns: StoryFn = () => html` + Emphasized + Attention + Positive + Negative + Transparent +`; + +export const IconOnlyButtons: StoryFn = () => html` + + + + + +`; +IconOnlyButtons.storyName = "Icon-Only Buttons"; \ No newline at end of file diff --git a/packages/playground/_stories/main/Calendar/Calendar.stories.ts b/packages/playground/_stories/main/Calendar/Calendar.stories.ts index 7c64d2c3c8f5..f96a64699764 100644 --- a/packages/playground/_stories/main/Calendar/Calendar.stories.ts +++ b/packages/playground/_stories/main/Calendar/Calendar.stories.ts @@ -43,7 +43,7 @@ const Template: UI5StoryArgs = (args) => html` = (args) => html`< export const Basic = Template.bind({}); export const MinMax = Template.bind({}); -MinMax.storyName = "Min/Max Dates and Format Pattern"; +MinMax.storyName = "Formatted Date Range"; MinMax.args = { minDate: "1/1/2020", maxDate: "4/5/2020", @@ -54,7 +54,7 @@ MinMax.args = { }; export const LongFormat = Template.bind({}); -LongFormat.storyName = "Value, Format Pattern, and Delimiter"; +LongFormat.storyName = "Formatted Value and Delimiter"; LongFormat.args = { value: "March 31, 2023 ~ April 9, 2023", delimiter: "~", diff --git a/packages/playground/_stories/main/DateTimePicker/DateTimePicker.stories.ts b/packages/playground/_stories/main/DateTimePicker/DateTimePicker.stories.ts index b0ddd87c178f..53160d98cf48 100644 --- a/packages/playground/_stories/main/DateTimePicker/DateTimePicker.stories.ts +++ b/packages/playground/_stories/main/DateTimePicker/DateTimePicker.stories.ts @@ -50,7 +50,7 @@ FormatPattern.args = { }; export const MinMax = Template.bind({}); -MinMax.storyName = "Min/Max Dates and Format Pattern"; +MinMax.storyName = "Formatted Date Range"; MinMax.args = { value: "Jan 11, 2020, 11:11:11 AM", minDate: "Jan 11, 2020, 00:00:00 AM", diff --git a/packages/playground/_stories/main/FileUploader/FileUploader.stories.ts b/packages/playground/_stories/main/FileUploader/FileUploader.stories.ts index bfeaeb6b6b62..ac894d0880e8 100644 --- a/packages/playground/_stories/main/FileUploader/FileUploader.stories.ts +++ b/packages/playground/_stories/main/FileUploader/FileUploader.stories.ts @@ -48,13 +48,6 @@ Basic.decorators = [ ${story()}`, ]; -export const Custom = Template.bind({}); -Custom.storyName = "With Custom Design "; -Custom.args = { - hideInput: true, - default: `Upload File`, -}; - export const Advanced = Template.bind({}); Advanced.storyName = "Image Uploader"; Advanced.args = { @@ -69,7 +62,7 @@ Advanced.decorators = [
`;} ]; -export const Disabled = Template.bind({}); -Disabled.storyName = "Disabled SplitButton"; -Disabled.args = { - default: "Disabled", - disabled: true, -}; - -export const Design = Template.bind({}); -Design.args = { - default: "Attention", - design: ButtonDesign.Attention, -}; - -export const WithIcon = Template.bind({}); -WithIcon.args = { - default: "Icon", - icon: "add", -}; - -export const WithActiveIcon = Template.bind({}); -WithActiveIcon.args = { - default: "Press Me", - icon: "add", - activeIcon: "accept", -}; \ No newline at end of file +export const DifferentDesigns: StoryFn = () => html` + Emphasized + Attention + Positive + Negative + Transparent +`; \ No newline at end of file diff --git a/packages/playground/_stories/main/StepInput/StepInput.stories.ts b/packages/playground/_stories/main/StepInput/StepInput.stories.ts index c59189e03a37..72260c008946 100644 --- a/packages/playground/_stories/main/StepInput/StepInput.stories.ts +++ b/packages/playground/_stories/main/StepInput/StepInput.stories.ts @@ -10,7 +10,6 @@ import type { UI5StoryArgs } from "../../../types.js"; import { DocsPage } from "../../../.storybook/docs"; import type StepInput from "@ui5/webcomponents/dist/StepInput.js"; -import ValueState from "@ui5/webcomponents-base/dist/types/ValueState"; const component = "ui5-step-input"; @@ -25,56 +24,47 @@ export default { argTypes, } as Meta; -const Template: UI5StoryArgs = (args) => html` - ${unsafeHTML(args.valueStateMessage)} -`; +const Template: UI5StoryArgs = (args) => html` +
+ + ${unsafeHTML(args.valueStateMessage)} + +
`; export const Basic = Template.bind({}); Basic.args = { value: 5, }; -export const Readonly = Template.bind({}); -Readonly.args = { - value: 5, - readonly: true, -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - value: 5, - disabled: true, -}; - -export const Design = Template.bind({}); -Design.storyName = "Value State"; -Design.args = { - value: 5, - valueState: ValueState.Success, -}; +export const DifferentValueStates: StoryFn = () => html` +

+

+

+

+`; export const MinMax = Template.bind({}); MinMax.storyName = "Min/Max and Step Values"; MinMax.args = { value: 0, - min: -100, - max: 100, + min: -50, + max: 50, step: 10, }; @@ -88,7 +78,7 @@ ValuePrecision.args = { }; export const Label = Template.bind({}); -Label.storyName = "With Label and Alignment"; +Label.storyName = "With Text Alignment"; Label.args = { id: "myStepInput", style: "text-align: left", @@ -96,6 +86,6 @@ Label.args = { required: true, }; Label.decorators = [ - (story) => html`Number + (story) => html`Number is left-aligned ${story()}`, ] \ No newline at end of file diff --git a/packages/playground/_stories/main/Switch/Switch.stories.ts b/packages/playground/_stories/main/Switch/Switch.stories.ts index f1c73a8b0890..f5bd859e8371 100644 --- a/packages/playground/_stories/main/Switch/Switch.stories.ts +++ b/packages/playground/_stories/main/Switch/Switch.stories.ts @@ -38,30 +38,8 @@ const Template: UI5StoryArgs = (args) => html``; export const Basic = Template.bind({}); - -export const WithText = Template.bind({}); -WithText.args = { - textOn: "On", - textOff: "Off", -}; - -export const Checked = Template.bind({}); -Checked.args = { - textOn: "Yes", - textOff: "No", - checked: true, -}; - -export const Disabled = Template.bind({}); -Disabled.args = { - disabled: true, - checked: true, -}; - -export const Design = Template.bind({}); -Design.args = { - design: SwitchDesign.Graphical, - accessibleName: "graphical", +Basic.args = { + accessibleName: "Switch with Accessible Name", }; export const RequiredInForm = Template.bind({}); @@ -85,13 +63,13 @@ RequiredInForm.decorators = [ }
-

Switch in Registration form sample

+

Switch in Registration form sample

- Please accept the terms and conditions, in order to proceed + Please accept the terms and conditions, in order to proceed
${story()}
diff --git a/packages/playground/_stories/main/ToggleButton/ToggleButton.stories.ts b/packages/playground/_stories/main/ToggleButton/ToggleButton.stories.ts index 6563c48c7b92..c48d4c6ae7ba 100644 --- a/packages/playground/_stories/main/ToggleButton/ToggleButton.stories.ts +++ b/packages/playground/_stories/main/ToggleButton/ToggleButton.stories.ts @@ -39,29 +39,19 @@ Basic.args = { default: "Default", }; -export const Pressed = Template.bind({}); -Pressed.args = { - default: "Pressed", - pressed: true, -}; - -export const DisabledAndPressed = Template.bind({}); -DisabledAndPressed.args = { - default: "ToggleButton", - pressed: true, - disabled: true, -}; - -export const IconOnly = Template.bind({}); -IconOnly.storyName = "Icon-Only ToggleButton"; -IconOnly.args = { - icon: "add", -}; - -export const WithIconAndDesign = Template.bind({}); -WithIconAndDesign.args = { - default: "ToggleButton", - design: ButtonDesign.Positive, - pressed: false, - icon: "add", -}; \ No newline at end of file +export const DifferentDesigns: StoryFn = () => html` + Emphasized + Attention + Positive + Negative + Transparent +`; + +export const IconOnlyToggleButtons: StoryFn = () => html` + + + + + +`; +IconOnlyToggleButtons.storyName = "Icon-Only Toggle Buttons"; \ No newline at end of file From 202ac768dd824bd5eea1cb8e4fc3e30301ab6f3b Mon Sep 17 00:00:00 2001 From: niyap <38278268+niyap@users.noreply.github.com> Date: Mon, 18 Sep 2023 10:06:38 +0300 Subject: [PATCH 014/141] fix(ui5-input,ui5-page,ui5-rating-indicator,ui5-slider,ui5-textarea): improve samples names (#7588) --- .../_stories/fiori/Page/Page.stories.ts | 4 ++-- .../_stories/main/Input/Input.stories.ts | 20 +++++++++---------- .../main/MultiInput/MultiInput.stories.ts | 4 ++-- .../main/RangeSlider/RangeSlider.stories.ts | 8 ++++---- .../RatingIndicator.stories.ts | 10 +++++----- .../_stories/main/Slider/Slider.stories.ts | 8 ++++---- .../main/TextArea/TextArea.stories.ts | 12 +++++------ 7 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/playground/_stories/fiori/Page/Page.stories.ts b/packages/playground/_stories/fiori/Page/Page.stories.ts index 0a1aa2d02552..d965cdeb05c2 100644 --- a/packages/playground/_stories/fiori/Page/Page.stories.ts +++ b/packages/playground/_stories/fiori/Page/Page.stories.ts @@ -71,8 +71,8 @@ Basic.args = { }; -export const WithFloatingFooter = Template.bind({}); -WithFloatingFooter.args = { +export const FloatingFooter = Template.bind({}); +FloatingFooter.args = { backgroundDesign: PageBackgroundDesign.List, floatingFooter: true, default: ` diff --git a/packages/playground/_stories/main/Input/Input.stories.ts b/packages/playground/_stories/main/Input/Input.stories.ts index 2b4f760013e8..6e8ed69d00a0 100644 --- a/packages/playground/_stories/main/Input/Input.stories.ts +++ b/packages/playground/_stories/main/Input/Input.stories.ts @@ -60,8 +60,8 @@ Basic.args = { value: "Input" }; -export const WithSuggestions = Template.bind({}); -WithSuggestions.decorators = [ +export const Suggestions = Template.bind({}); +Suggestions.decorators = [ (story) => { return html` ${story()} @@ -93,7 +93,7 @@ WithSuggestions.decorators = [ `; } ] -WithSuggestions.args = { +Suggestions.args = { placeholder: "Start typing country name", showSuggestions: true, showClearIcon: true @@ -109,8 +109,8 @@ SuggestionsWrapping.args = { }; -export const WithValueStateMessage = Template.bind({}); -WithValueStateMessage.args = { +export const ValueStateMessage = Template.bind({}); +ValueStateMessage.args = { default: ` Cozy Compact @@ -121,8 +121,8 @@ WithValueStateMessage.args = { valueStateMessage: '
This is an error message. Extra long text used as an error message.
' }; -export const WithLabel = Template.bind({}); -WithLabel.decorators = [ +export const Label = Template.bind({}); +Label.decorators = [ (story) => { return html` Secret Code @@ -130,13 +130,13 @@ WithLabel.decorators = [ `; } ] -WithLabel.args = { +Label.args = { type: InputType.Password, placeholder: "Enter your Secret Code", required: true }; -export const WithValueHelpDialog: StoryFn = () => html` +export const ValueHelpDialog: StoryFn = () => html` @@ -249,7 +249,7 @@ export const WithValueHelpDialog: StoryFn = () => html` itemsList${index}.addEventListener("item-click", handleItemClick); `; -WithValueHelpDialog.parameters = { +ValueHelpDialog.parameters = { docs: { story: { // Opt-out of inline rendering diff --git a/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts b/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts index 926e23d751e8..0dc4f5f4a51e 100644 --- a/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts +++ b/packages/playground/_stories/main/MultiInput/MultiInput.stories.ts @@ -57,8 +57,8 @@ Basic.args = { value: "basic input" }; -export const WithTokens = Template.bind({}); -WithTokens.args = { +export const Tokens = Template.bind({}); +Tokens.args = { tokens: ` diff --git a/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts b/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts index 92df0eb0cf4c..40e60f84b9c0 100644 --- a/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts +++ b/packages/playground/_stories/main/RangeSlider/RangeSlider.stories.ts @@ -57,8 +57,8 @@ Basic.args = { endValue: 20 }; -export const WithTooltips = Template.bind({}); -WithTooltips.decorators = [ +export const Tooltips = Template.bind({}); +Tooltips.decorators = [ (story) => { return html`
@@ -67,7 +67,7 @@ WithTooltips.decorators = [ `; } ] -WithTooltips.args = { +Tooltips.args = { startValue: 3, endValue: 13, showTooltip: true @@ -93,4 +93,4 @@ RangeSliderTickmarksTooltipLabel.args = { showTickmarks: true, showTooltip: true }; -RangeSliderTickmarksTooltipLabel.storyName = "With Tooltips, Tickmarks and Labels"; +RangeSliderTickmarksTooltipLabel.storyName = "Tooltips, Tickmarks and Labels"; diff --git a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts index 16d83f8e5906..2d946a72a88c 100644 --- a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts +++ b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts @@ -41,20 +41,20 @@ Basic.args = { value: 3.7 }; -export const WithMaxValue = Template.bind({}); -WithMaxValue.args = { +export const MaxValue = Template.bind({}); +MaxValue.args = { value: 5, max: 10 }; -export const WithRequiredLabel: StoryFn = Template.bind({}); -WithRequiredLabel.args = { +export const RequiredLabel: StoryFn = Template.bind({}); +RequiredLabel.args = { value: 5, max: 7, accessibleNameRef: "label-acc-name-ref", required: true }; -WithRequiredLabel.decorators = [ +RequiredLabel.decorators = [ (story) => { return html` Rate us diff --git a/packages/playground/_stories/main/Slider/Slider.stories.ts b/packages/playground/_stories/main/Slider/Slider.stories.ts index ef3ad510d8f3..5efbc9fa3c28 100644 --- a/packages/playground/_stories/main/Slider/Slider.stories.ts +++ b/packages/playground/_stories/main/Slider/Slider.stories.ts @@ -56,8 +56,8 @@ Basic.args = { labelInterval: 0 }; -export const WithTooltip = Template.bind({}); -WithTooltip.decorators = [ +export const Tooltip = Template.bind({}); +Tooltip.decorators = [ (story) => { return html`
@@ -66,7 +66,7 @@ WithTooltip.decorators = [ `; } ] -WithTooltip.args = { +Tooltip.args = { min: 0, max: 20, showTooltip: true, @@ -92,4 +92,4 @@ TickmarksLabelTooltip.args = { labelInterval: 2, showTickmarks: true }; -TickmarksLabelTooltip.storyName = "With Tooltip, Tickmarks and Labels"; \ No newline at end of file +TickmarksLabelTooltip.storyName = "Tooltip, Tickmarks and Labels"; \ No newline at end of file diff --git a/packages/playground/_stories/main/TextArea/TextArea.stories.ts b/packages/playground/_stories/main/TextArea/TextArea.stories.ts index b1eeab77087e..d17a78656a9d 100644 --- a/packages/playground/_stories/main/TextArea/TextArea.stories.ts +++ b/packages/playground/_stories/main/TextArea/TextArea.stories.ts @@ -53,8 +53,8 @@ Basic.args = { }; -export const WithMaxLength = Template.bind({}); -WithMaxLength.decorators = [ +export const MaxLength = Template.bind({}); +MaxLength.decorators = [ (story) => html` ${story()} ` ]; -WithMaxLength.args = { +MaxLength.args = { placeholder: 'Enter text', maxlength: 10, showExceededText: true, @@ -76,8 +76,8 @@ WithMaxLength.args = { }; -export const WithLabel = Template.bind({}); -WithLabel.decorators = [ +export const Label = Template.bind({}); +Label.decorators = [ (story) => { return html` Description @@ -85,7 +85,7 @@ WithLabel.decorators = [ `; } ] -WithLabel.args = { +Label.args = { placeholder: 'Enter description', required: true }; From 555303ab273fbe361c19de4ff5cf8dddddfd5e55 Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Mon, 18 Sep 2023 11:38:41 +0300 Subject: [PATCH 015/141] fix(ui5-button): remove box shadows (#7590) feat(ui5-button): remove box shadow --- packages/main/src/themes/Button.css | 6 ------ packages/main/src/themes/ToggleButton.css | 5 ----- packages/main/src/themes/base/Button-parameters.css | 12 +----------- packages/main/src/themes/base/sizes-parameters.css | 2 +- .../src/themes/sap_belize_hcb/Button-parameters.css | 4 ---- .../src/themes/sap_belize_hcw/Button-parameters.css | 4 ---- .../src/themes/sap_fiori_3/Button-parameters.css | 1 - .../themes/sap_fiori_3_dark/Button-parameters.css | 1 - .../src/themes/sap_fiori_3_hcb/Button-parameters.css | 3 --- .../src/themes/sap_fiori_3_hcw/Button-parameters.css | 3 --- .../src/themes/sap_horizon/Button-parameters.css | 1 - .../themes/sap_horizon_dark/Button-parameters.css | 1 - .../src/themes/sap_horizon_exp/Button-parameters.css | 1 - .../src/themes/sap_horizon_hcb/Button-parameters.css | 1 - .../themes/sap_horizon_hcb_exp/Button-parameters.css | 1 - .../src/themes/sap_horizon_hcw/Button-parameters.css | 1 - .../themes/sap_horizon_hcw_exp/Button-parameters.css | 1 - 17 files changed, 2 insertions(+), 46 deletions(-) diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index 9d2625524629..d40a72d62238 100644 --- a/packages/main/src/themes/Button.css +++ b/packages/main/src/themes/Button.css @@ -54,7 +54,6 @@ :host(:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover), :host(:not([hidden]):not([disabled]).ui5_hovered) { background: var(--sapButton_Hover_Background); - box-shadow: var(--sapContent_Interaction_Shadow); border: 1px solid var(--sapButton_Hover_BorderColor); color: var(--sapButton_Hover_TextColor); } @@ -168,7 +167,6 @@ bdi { :host([design="Positive"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) { background-color: var(--sapButton_Accept_Hover_Background); border-color: var(--sapButton_Accept_Hover_BorderColor); - box-shadow: var(--sapContent_Positive_Shadow); color: var(--sapButton_Accept_Hover_TextColor); } @@ -189,7 +187,6 @@ bdi { :host([design="Negative"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) { background-color: var(--sapButton_Reject_Hover_Background); border-color: var(--sapButton_Reject_Hover_BorderColor); - box-shadow: var(--sapContent_Negative_Shadow); color: var(--sapButton_Reject_Hover_TextColor); } @@ -211,7 +208,6 @@ bdi { background-color: var(--sapButton_Attention_Hover_Background); border-color: var(--sapButton_Attention_Hover_BorderColor); color: var(--sapButton_Attention_Hover_TextColor); - box-shadow: var(--sapContent_Critical_Shadow) } :host([ui5-button][design="Attention"][active]:not([non-interactive])) { @@ -235,7 +231,6 @@ bdi { border-color: var(--sapButton_Emphasized_Hover_BorderColor); border-width: var(--_ui5_button_emphasized_border_width); color: var(--sapButton_Emphasized_Hover_TextColor); - box-shadow: none; } :host([ui5-button][design="Empasized"][active]:not([non-interactive])) { @@ -260,7 +255,6 @@ bdi { :host([design="Transparent"]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) { background-color: var(--sapButton_Lite_Hover_Background); border-color: var(--sapButton_Lite_Hover_BorderColor); - box-shadow: var(--sapContent_Interaction_Shadow); color: var(--sapButton_Lite_Hover_TextColor); } diff --git a/packages/main/src/themes/ToggleButton.css b/packages/main/src/themes/ToggleButton.css index 4affd30ba388..ff25fe7addc2 100644 --- a/packages/main/src/themes/ToggleButton.css +++ b/packages/main/src/themes/ToggleButton.css @@ -27,7 +27,6 @@ background: var(--sapButton_Selected_Hover_Background); border-color: var(--sapButton_Selected_Hover_BorderColor); color: var(--sapButton_Selected_TextColor); - box-shadow: var(--sapContent_Interaction_Shadow); } :host([active][focused]), @@ -37,7 +36,6 @@ background: var(--sapButton_Active_Background); border-color: var(--sapButton_Active_BorderColor); color: var(--sapButton_Selected_TextColor); - box-shadow: var(--sapContent_Interaction_Shadow); } :host([pressed]:not([active]):not([non-interactive]):not([_is-touch])), @@ -66,7 +64,6 @@ background: var(--sapButton_Reject_Selected_Hover_Background); border-color: var(--sapButton_Reject_Selected_Hover_BorderColor); color: var(--sapButton_Reject_Selected_TextColor); - box-shadow: var(--sapContent_Negative_Shadow); } :host([design="Negative"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) { @@ -92,7 +89,6 @@ background: var(--sapButton_Accept_Selected_Hover_Background); border-color: var(--sapButton_Accept_Selected_Hover_BorderColor); color: var(--sapButton_Accept_Selected_TextColor); - box-shadow: var(--sapContent_Positive_Shadow); } :host([design="Positive"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) { @@ -118,7 +114,6 @@ background: var(--sapButton_Attention_Selected_Hover_Background); border-color: var(--sapButton_Attention_Selected_Hover_BorderColor); color: var(--sapButton_Attention_Selected_TextColor); - box-shadow: var(--sapContent_Critical_Shadow); } :host([design="Attention"][pressed]:not([active]):not([non-interactive]):not([_is-touch])) { diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css index 48dd62044810..ccdb464d3092 100644 --- a/packages/main/src/themes/base/Button-parameters.css +++ b/packages/main/src/themes/base/Button-parameters.css @@ -4,7 +4,7 @@ --_ui5_button_focused_inner_border_radius: 0; --_ui5_button_base_min_width: 2.5rem; --_ui5_button_base_min_compact_width: 2rem; - --_ui5_button_base_height: 2.5rem; + --_ui5_button_base_height: var(--sapElement_Height); --_ui5_button_compact_height: 1.625rem; --_ui5_button_border_radius: var(--sapButton_BorderCornerRadius); --_ui5_button_base_padding: 0.6875rem; @@ -12,24 +12,14 @@ --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.563rem; --_ui5_button_icon_font_size: 1.375rem; - --_ui5_button_outline: 1px dotted var(--sapContent_FocusColor); --_ui5_button_emphasized_outline: 1px dotted var(--sapContent_FocusColor); - --_ui5_button_outline_offset: calc(-1 * .1875rem); --_ui5_button_emphasized_font_weight: normal; --_ui5_button_text_shadow: var(--sapContent_TextShadow); --_ui5_button_focus_offset: 1px; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focus_outline_focus_color: var(--sapContent_ContrastFocusColor); --_ui5_button_pressed_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_positive_border_focus_hover_color: var(--sapContent_FocusColor); - --_ui5_button_positive_focus_border_color: var(--sapButton_Accept_BorderColor); - --_ui5_button_negative_focus_border_color: var(--sapButton_Reject_BorderColor); - --_ui5_button_attention_focus_border_color: var(--sapButton_Negative_BorderColor); --_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor); --_ui5_button_fontFamily: "72override", var(--sapFontFamily); --_ui5_button_emphasized_focused_border_before: none; - --_ui5_button_emphasized_focused_border_radius: 0; - --_ui5_button_transparent_hover: transparent; } diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 49dcd040f218..fd596afbfb4e 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -148,7 +148,7 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_button_base_height: 1.625rem; + --_ui5_button_base_height: var(--sapElement_Compact_Height); --_ui5_button_base_padding: 0.4375rem; --_ui5_button_base_min_width: 2rem; --_ui5_button_icon_font_size: 1rem; diff --git a/packages/main/src/themes/sap_belize_hcb/Button-parameters.css b/packages/main/src/themes/sap_belize_hcb/Button-parameters.css index 331ed931cd51..0966b30072df 100644 --- a/packages/main/src/themes/sap_belize_hcb/Button-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/Button-parameters.css @@ -3,11 +3,7 @@ :root { --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; - --_ui5_button_positive_focus_border_color: transparent; - --_ui5_button_negative_focus_border_color: transparent; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); } diff --git a/packages/main/src/themes/sap_belize_hcw/Button-parameters.css b/packages/main/src/themes/sap_belize_hcw/Button-parameters.css index 331ed931cd51..0966b30072df 100644 --- a/packages/main/src/themes/sap_belize_hcw/Button-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/Button-parameters.css @@ -3,11 +3,7 @@ :root { --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; - --_ui5_button_positive_focus_border_color: transparent; - --_ui5_button_negative_focus_border_color: transparent; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); } 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 1f6a851da372..38036e46fb02 100644 --- a/packages/main/src/themes/sap_fiori_3/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Button-parameters.css @@ -2,7 +2,6 @@ :root { --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; 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 1f6a851da372..38036e46fb02 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 @@ -2,7 +2,6 @@ :root { --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css index d449facfbf30..0966b30072df 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/Button-parameters.css @@ -4,9 +4,6 @@ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css index d449facfbf30..0966b30072df 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/Button-parameters.css @@ -4,9 +4,6 @@ --_ui5_button_focused_border: 0.125rem dotted var(--sapContent_FocusColor); --_ui5_button_focused_border_radius: 0.25rem; --_ui5_button_focus_width: 1px; - --_ui5_button_focus_color: var(--sapContent_FocusColor); - --_ui5_button_focussed_border_color: transparent; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_outline: 0.125rem dotted var(--sapContent_FocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_horizon/Button-parameters.css b/packages/main/src/themes/sap_horizon/Button-parameters.css index 4b444788a4af..c020aa838417 100644 --- a/packages/main/src/themes/sap_horizon/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon/Button-parameters.css @@ -5,7 +5,6 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; diff --git a/packages/main/src/themes/sap_horizon_dark/Button-parameters.css b/packages/main/src/themes/sap_horizon_dark/Button-parameters.css index 4b444788a4af..c020aa838417 100644 --- a/packages/main/src/themes/sap_horizon_dark/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Button-parameters.css @@ -5,7 +5,6 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; diff --git a/packages/main/src/themes/sap_horizon_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_exp/Button-parameters.css index 4b444788a4af..c020aa838417 100644 --- a/packages/main/src/themes/sap_horizon_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Button-parameters.css @@ -5,7 +5,6 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; diff --git a/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css index 6cd93d89879e..86d233c27904 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css index 6cd93d89879e..86d233c27904 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } diff --git a/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css index 27546ae24dff..94b4cd319e8f 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css index 27546ae24dff..94b4cd319e8f 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/Button-parameters.css @@ -6,5 +6,4 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); - --_ui5_button_base_height: 2.25rem; } \ No newline at end of file From 28997c8468acf8e5b33a8c174cf9368c31310eb0 Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Mon, 18 Sep 2023 16:19:30 +0300 Subject: [PATCH 016/141] feat(ui5-split-button): adapt visual design with new parameters (#7584) Rework on the Split Button visual design in order to be complient with VD Spec in all themes and rtl direction as well. --- packages/main/src/themes/SplitButton.css | 204 ++++++++++++++++-- .../themes/base/SplitButton-parameters.css | 75 ++++++- .../main/src/themes/base/rtl-parameters.css | 14 ++ .../sap_belize_hcb/SplitButton-parameters.css | 3 + .../sap_belize_hcw/SplitButton-parameters.css | 3 + .../SplitButton-parameters.css | 24 ++- .../SplitButton-parameters.css | 26 ++- .../sap_horizon/SplitButton-parameters.css | 25 ++- .../SplitButton-parameters.css | 25 ++- .../SplitButton-parameters.css | 25 ++- .../SplitButton-parameters.css | 25 ++- .../SplitButton-parameters.css | 24 ++- .../SplitButton-parameters.css | 24 ++- .../SplitButton-parameters.css | 24 ++- .../SplitButton-parameters.css | 24 ++- 15 files changed, 517 insertions(+), 28 deletions(-) diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css index 8d243fe03003..19136bcf2b29 100644 --- a/packages/main/src/themes/SplitButton.css +++ b/packages/main/src/themes/SplitButton.css @@ -6,26 +6,36 @@ height: 100%; border-radius: var(--_ui5_button_border_radius); background-color: var(--sapButton_Background); + box-shadow: var(--_ui5_split_button_host_default_box_shadow); +} + +:host([disabled]:not([hidden])) { + pointer-events: none; } :host([design="Positive"]:not([hidden])) { background-color: var(--sapButton_Accept_Background); + box-shadow: var(--_ui5_split_button_host_positive_box_shadow); } :host([design="Negative"]:not([hidden])) { background-color: var(--sapButton_Reject_Background); + box-shadow: var(--_ui5_split_button_host_negative_box_shadow); } :host([design="Attention"]:not([hidden])) { background-color: var(--sapButton_Attention_Background); + box-shadow: var(--_ui5_split_button_host_attention_box_shadow); } :host([design="Emphasized"]:not([hidden])) { background-color: var(--sapButton_Emphasized_Background); + box-shadow: var(--_ui5_split_button_host_emphasized_box_shadow); } :host([design="Transparent"]:not([hidden])) { - background-color: transparent; + background-color: var(--sapButton_Lite_Background); + box-shadow: var(--_ui5_split_button_host_transparent_box_shadow); } :host([design="Transparent"][disabled]:not([hidden])) { @@ -33,7 +43,8 @@ } :host([design="Transparent"]:not([hidden]):not([disabled]):hover) { - background-color: var(--_ui5_split_button_transparent_hover_background); + background-color: var(--_ui5_split_button_host_transparent_hover_background); + box-shadow: var(--_ui5_split_button_host_transparent_hover_box_shadow); } :host([design="Transparent"]:not([hidden]):not([disabled]):hover) .ui5-split-arrow-button:not(:hover), @@ -71,8 +82,11 @@ .ui5-split-text-button { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius); + border-width: 0.0625rem; border-right-width: var(--_ui5_split_button_text_button_right_border_width); margin-right: var(--_ui5_split_button_text_button_width); + border-color: var(--_ui5_split_text_button_border_color); + background-color: var(--_ui5_split_text_button_background_color); vertical-align: top; width: inherit; } @@ -80,12 +94,76 @@ .ui5-split-text-button:hover { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-right-radius: var(--_ui5_split_button_hover_border_radius); + background-color: var(--sapButton_Hover_Background); + box-shadow: none; + border: var(--_ui5_split_text_button_hover_border); + border-right: var(--_ui5_split_text_button_hover_border_right); + border-left: var(--_ui5_split_text_button_hover_border_left); +} +.ui5-split-text-button[design="Emphasized"] { + border: var(--_ui5_split_text_button_emphasized_border); + border-width: var(--_ui5_split_text_button_emphasized_border_width); +} +.ui5-split-text-button[design="Emphasized"]:hover { + background-color: var(--sapButton_Emphasized_Hover_Background); + border: var(--_ui5_split_text_button_emphasized_hover_border); + border-right: var(--_ui5_split_text_button_emphasized_hover_border_right); + border-left: var(--_ui5_split_text_button_emphasized_hover_border_left); +} +.ui5-split-text-button[design="Positive"]:hover { + background-color: var(--sapButton_Accept_Hover_Background); + border: var(--_ui5_split_text_button_positive_hover_border); + border-right: var(--_ui5_split_text_button_positive_hover_border_right); + border-left: var(--_ui5_split_text_button_positive_hover_border_left); +} +.ui5-split-text-button[design="Negative"]:hover { + background-color: var(--sapButton_Reject_Hover_Background); + border: var(--_ui5_split_text_button_negative_hover_border); + border-right: var(--_ui5_split_text_button_negative_hover_border_right); + border-left: var(--_ui5_split_text_button_negative_hover_border_left); +} +.ui5-split-text-button[design="Attention"]:hover { + background-color: var(--sapButton_Attention_Hover_Background); + border: var(--_ui5_split_text_button_attention_hover_border); + border-right: var(--_ui5_split_text_button_attention_hover_border_right); + border-left: var(--_ui5_split_text_button_attention_hover_border_left); +} +.ui5-split-text-button[design="Transparent"]:hover { + background-color: var(--_ui5_split_button_transparent_hover_background); + border: var(--_ui5_split_text_button_transparent_hover_border); + border-right: var(--_ui5_split_text_button_transparent_hover_border_right); + border-left: var(--_ui5_split_text_button_transparent_hover_border_left); } .ui5-split-text-button[active] { outline: 0; } +.ui5-split-text-button[active][design="Emphasized"] { + background-color: var(--sapButton_Selected_Background); + color: var(--sapButton_Emphasized_Active_TextColor); +} +.ui5-split-text-button[active][design="Negative"] { + background-color: var(--sapButton_Reject_Selected_Background); + color: var(--sapButton_Reject_Active_TextColor); +} +.ui5-split-text-button[active][design="Positive"] { + background-color: var(--sapButton_Accept_Selected_Background); + color: var(--sapButton_Accept_Active_TextColor); +} +.ui5-split-text-button[active][design="Attention"] { + background-color: var(--sapButton_Attention_Selected_Background); + color: var(--sapButton_Attention_Active_TextColor); +} +.ui5-split-text-button[active][design="Default"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} +.ui5-split-text-button[active][design="Transparent"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} + .ui5-split-arrow-button-wrapper { position: absolute; top: 0; @@ -96,28 +174,41 @@ border-top-left-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); width: 2.25rem; + border-color: var(--_ui5_split_text_button_border_color); + background-color: var(--_ui5_split_text_button_background_color); } -.ui5-split-arrow-button[active][design="Default"], -.ui5-split-arrow-button[active][design="Emphasized"], -.ui5-split-arrow-button[active][design="Transparent"] { - background-color: var(--sapButton_Selected_Background); +.ui5-split-text-button[dir="rtl"]:hover { + border-top-left-radius: var(--_ui5_split_button_hover_border_radius); + border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); + border-left: var(--_ui5_split_text_button_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Negative"] { - background-color: var(--sapButton_Reject_Selected_Background); + +.ui5-split-text-button[design="Emphasized"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_emphasized_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_emphasized_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Positive"] { - background-color: var(--sapButton_Accept_Selected_Background); + +.ui5-split-text-button[design="Positive"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_positive_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_positive_hover_border_right_rtl); } -.ui5-split-arrow-button[active][design="Attention"] { - background-color: var(--sapButton_Attention_Selected_Background); + +.ui5-split-text-button[design="Negative"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_negative_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_negative_hover_border_right_rtl); } -.ui5-split-text-button[dir="rtl"]:hover { - border-top-left-radius: var(--_ui5_split_button_hover_border_radius); - border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); +.ui5-split-text-button[design="Attention"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_attention_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_attention_hover_border_right_rtl); } +.ui5-split-text-button[design="Transparent"][dir="rtl"]:hover { + border-left: var(--_ui5_split_text_button_transparent_hover_border_left_rtl); + border-right: var(--_ui5_split_text_button_transparent_hover_border_right_rtl); +} [dir="rtl"] .ui5-split-arrow-button:hover { border-top-right-radius: var(--_ui5_split_button_hover_border_radius); @@ -127,6 +218,40 @@ .ui5-split-arrow-button:hover { border-top-left-radius: var(--_ui5_split_button_hover_border_radius); border-bottom-left-radius: var(--_ui5_split_button_hover_border_radius); + background-color: var(--sapButton_Hover_Background); + box-shadow: none; + border: var(--_ui5_split_arrow_button_hover_border); +} + +.ui5-split-arrow-button[design="Emphasized"]:hover { + background-color: var(--sapButton_Emphasized_Hover_Background); + border: var(--_ui5_split_arrow_button_emphasized_hover_border); + border-left-width: var(--sapButton_BorderWidth); +} + +.ui5-split-arrow-button-wrapper[dir="rtl"] .ui5-split-arrow-button[design="Emphasized"]:hover { + border-left-width: var(--_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl); + border-right-width: var(--sapButton_BorderWidth); +} + +.ui5-split-arrow-button[design="Positive"]:hover { + background-color: var(--sapButton_Accept_Hover_Background); + border: var(--_ui5_split_arrow_button_positive_hover_border); +} + +.ui5-split-arrow-button[design="Negative"]:hover { + background-color: var(--sapButton_Reject_Hover_Background); + border: var(--_ui5_split_arrow_button_negative_hover_border); +} + +.ui5-split-arrow-button[design="Attention"]:hover { + background-color: var(--sapButton_Attention_Hover_Background); + border: var(--_ui5_split_arrow_button_attention_hover_border); +} + +.ui5-split-arrow-button[design="Transparent"]:hover { + background-color: var(--_ui5_split_button_transparent_hover_background); + border: var(--_ui5_split_arrow_button_transparent_hover_border); } .ui5-split-arrow-button:before { @@ -142,6 +267,19 @@ border-left-width: 0.0625rem; } +.ui5-split-arrow-button[design="Emphasized"]:before { + content: ""; + position: absolute; + box-sizing: border-box; + pointer-events: none; + left: var(--_ui5_split_button_middle_separator_left); + top: var(--_ui5_split_button_middle_separator_top); + right: 0; + height: var(--_ui5_split_button_middle_separator_height); + border: 0 solid var(--sapButton_TextColor); + border-left-width: 0.0625rem; +} + [dir="rtl"] .ui5-split-arrow-button:before { content: ""; position: absolute; @@ -184,11 +322,15 @@ .ui5-split-text-button[dir="rtl"] { border-radius: 0 var(--_ui5_button_border_radius) var(--_ui5_button_border_radius) 0; - border-width: 1px 1px 1px 0; + border-width: var(--sapButton_BorderWidth); margin-right: 0; margin-left: var(--_ui5_split_button_text_button_width); } +.ui5-split-text-button[design="Emphasized"][dir="rtl"] { + border-width: var(--_ui5_split_text_button_emphasized_border_width_rtl); +} + .ui5-split-arrow-button-wrapper[dir="rtl"] { left: 0; right: auto; @@ -222,4 +364,34 @@ border-bottom-left-radius: var(--_ui5_split_button_inner_focused_border_radius_inner); border-top-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer); border-bottom-right-radius: var(--_ui5_split_button_inner_focused_border_radius_outer); +} + +.ui5-split-arrow-button[active][design="Emphasized"] { + background-color: var(--sapButton_Selected_Background); + color: var(--sapButton_Emphasized_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Negative"] { + background-color: var(--sapButton_Reject_Selected_Background); + color: var(--sapButton_Reject_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Positive"] { + background-color: var(--sapButton_Accept_Selected_Background); + color: var(--sapButton_Accept_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Attention"] { + background-color: var(--sapButton_Attention_Selected_Background); + color: var(--sapButton_Attention_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Default"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); +} + +.ui5-split-arrow-button[active][design="Transparent"] { + background-color: var(--sapButton_Active_Background); + color: var(--sapButton_Active_TextColor); } \ No newline at end of file diff --git a/packages/main/src/themes/base/SplitButton-parameters.css b/packages/main/src/themes/base/SplitButton-parameters.css index 241b851d378e..97651414dfc5 100644 --- a/packages/main/src/themes/base/SplitButton-parameters.css +++ b/packages/main/src/themes/base/SplitButton-parameters.css @@ -10,8 +10,81 @@ --_ui5_split_button_text_button_width: 2.25rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Background); + --_ui5_split_button_host_transparent_hover_background: transparent; --_ui5_split_button_transparent_hover_color: var(--sapButton_Lite_TextColor); --_ui5_split_button_transparent_disabled_background: transparent; --_ui5_split_button_inner_focused_border_radius_outer: 0.25rem; --_ui5_split_button_inner_focused_border_radius_inner: 0; -} + + --_ui5_split_button_host_default_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); + --_ui5_split_button_host_attention_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Attention_BorderColor); + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Emphasized_BorderColor); + --_ui5_split_button_host_positive_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Accept_BorderColor); + --_ui5_split_button_host_negative_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Reject_BorderColor); + --_ui5_split_button_host_transparent_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_Lite_BorderColor); + + --_ui5_split_button_host_transparent_hover_box_shadow: none; + + --_ui5_split_text_button_border_color: transparent; + --_ui5_split_text_button_background_color: transparent; + + + --_ui5_split_text_button_emphasized_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + + + --_ui5_split_text_button_emphasized_border_width: 0.0625rem 0 0.0625rem 0.0625rem; + + + --_ui5_split_text_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + + --_--_ui5_split_button_text_button_border_width_rtl: 0.0625rem 0.0625rem 0.0625rem 0; + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.0625rem; + + + --_ui5_split_arrow_button_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_positive_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_arrow_button_negative_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_arrow_button_attention_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_arrow_button_transparent_hover_border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_hover_border_right: none; + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: none; + --_ui5_split_text_button_negative_hover_border_right: none; + --_ui5_split_text_button_attention_hover_border_right: none; + --_ui5_split_text_button_transparent_hover_border_right: none; + + --_ui5_split_text_button_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid transparent; + + --_ui5_split_text_button_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: var(--sapButton_BorderWidth); +} \ No newline at end of file diff --git a/packages/main/src/themes/base/rtl-parameters.css b/packages/main/src/themes/base/rtl-parameters.css index 00a8636e237d..c00ddb146c57 100644 --- a/packages/main/src/themes/base/rtl-parameters.css +++ b/packages/main/src/themes/base/rtl-parameters.css @@ -44,4 +44,18 @@ --_ui5_segmented_btn_item_border_left: 0.0625rem; --_ui5_segmented_btn_item_border_right: 0px; --_ui5-shellbar-notification-btn-count-offset: auto; + + --_ui5_split_text_button_hover_border_left: none; + --_ui5_split_text_button_emphasized_hover_border_left: none; + --_ui5_split_text_button_positive_hover_border_left: none; + --_ui5_split_text_button_negative_hover_border_left: none; + --_ui5_split_text_button_attention_hover_border_left: none; + --_ui5_split_text_button_transparent_hover_border_left: none; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } \ No newline at end of file diff --git a/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css index 18295daedf13..42b79a644297 100644 --- a/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_belize_hcb/SplitButton-parameters.css @@ -7,4 +7,7 @@ --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css index 18295daedf13..42b79a644297 100644 --- a/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_belize_hcw/SplitButton-parameters.css @@ -7,4 +7,7 @@ --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcb/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css index 0499686433d7..5e220ca5ff8b 100644 --- a/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_fiori_3_hcw/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); -} + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; +} \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css index b30caf254ac3..71336fa0e150 100644 --- a/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/SplitButton-parameters.css @@ -10,8 +10,31 @@ --_ui5_split_button_middle_separator_hover_display: none; --_ui5_split_button_text_button_width: 2.375rem; --_ui5_split_button_text_button_right_border_width: 0.0625rem; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Lite_Hover_Background); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_inner_focused_border_radius_outer: 0.375rem; --_ui5_split_button_inner_focused_border_radius_inner: 0.375rem; + + --_ui5_split_text_button_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: none; + --_ui5_split_text_button_positive_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + /* RTL */ + + --_ui5_split_text_button_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_left_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); + + --_ui5_split_text_button_emphasized_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_positive_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Accept_BorderColor); + --_ui5_split_text_button_negative_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Reject_BorderColor); + --_ui5_split_text_button_attention_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_Attention_BorderColor); + --_ui5_split_text_button_transparent_hover_border_right_rtl: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor); } diff --git a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb_exp/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } diff --git a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css index 0499686433d7..ef1956216ede 100644 --- a/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw_exp/SplitButton-parameters.css @@ -6,7 +6,29 @@ --_ui5_split_button_hover_border_radius: 0; --_ui5_split_button_text_button_width: 2.5rem; --_ui5_split_button_text_button_right_border_width: 0; - --_ui5_split_button_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_transparent_hover_background: var(--sapButton_Hover_Background); + --_ui5_split_button_host_transparent_hover_background: var(--sapButton_Background); + --_ui5_split_button_host_transparent_hover_box_shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor); --_ui5_split_button_transparent_hover_color: var(--sapButton_TextColor); --_ui5_split_button_transparent_disabled_background: var(--sapButton_Background); + + --_ui5_split_button_host_emphasized_box_shadow: inset 0 0 0 0.125rem var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_text_button_emphasized_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_border_width: 0.125rem; + --_ui5_split_text_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_left: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_emphasized_hover_border: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_arrow_button_emphasized_hover_border_left: var(--sapButton_BorderWidth); + + /* RTL */ + + --_ui5_split_text_button_emphasized_border_width_rtl: 0.125rem; + + --_ui5_split_text_button_emphasized_hover_border_left_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + --_ui5_split_text_button_emphasized_hover_border_right_rtl: 0.125rem solid var(--sapButton_Emphasized_BorderColor); + + --_ui5_split_arrow_button_wrapper_emphasized_hover_border_left_width_rtl: 0.125rem; } From 292d15a0a7fcf468ecdfbff3048083b7014bf7c7 Mon Sep 17 00:00:00 2001 From: Elena Stoyanova Date: Tue, 19 Sep 2023 12:44:24 +0300 Subject: [PATCH 017/141] fix(ui5-input): improve item announcement (#7585) Co-authored-by: Elena Stoyanova --- packages/main/src/Input.ts | 20 ++++----- packages/main/src/InputPopover.hbs | 2 +- .../main/src/features/InputSuggestions.ts | 34 +++++++++----- packages/main/test/specs/Input.spec.js | 45 ++++++++++++++++++- 4 files changed, 78 insertions(+), 23 deletions(-) diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index c1610b1b1b80..243124275626 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -46,7 +46,7 @@ import "@ui5/webcomponents-icons/dist/alert.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; import "@ui5/webcomponents-icons/dist/information.js"; import type SuggestionItem from "./SuggestionItem.js"; -import type { InputSuggestionText, SuggestionComponent } from "./features/InputSuggestions.js"; +import type { InputSuggestion, SuggestionComponent } from "./features/InputSuggestions.js"; import type InputSuggestions from "./features/InputSuggestions.js"; import type FormSupportT from "./features/InputElementsFormSupport.js"; import type { IFormElement } from "./features/InputElementsFormSupport.js"; @@ -627,7 +627,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { typedInValue: string; lastConfirmedValue: string isTyping: boolean - suggestionsTexts: Array; + suggestionObjects: Array; _handleResizeBound: ResizeObserverCallback; _keepInnerValue: boolean; _shouldAutocomplete?: boolean; @@ -677,7 +677,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { this.isTyping = false; // Suggestions array initialization - this.suggestionsTexts = []; + this.suggestionObjects = []; this._handleResizeBound = this._handleResize.bind(this); @@ -702,7 +702,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { if (this.showSuggestions) { this.enableSuggestions(); - this.suggestionsTexts = this.Suggestions!.defaultSlotProperties(this.typedInValue); + this.suggestionObjects = this.Suggestions!.defaultSlotProperties(this.typedInValue); } this.effectiveShowClearIcon = (this.showClearIcon && !!this.value && !this.readonly && !this.disabled); @@ -1493,11 +1493,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { announceSelectedItem() { const invisibleText = this.shadowRoot!.querySelector(`#${this._id}-selectionText`)!; - if (this.Suggestions && this.Suggestions._isItemOnTarget()) { - invisibleText.textContent = this.itemSelectionAnnounce; - } else { - invisibleText.textContent = ""; - } + invisibleText.textContent = this.itemSelectionAnnounce; } get _readonly() { @@ -1654,7 +1650,9 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { get availableSuggestionsCount() { if (this.showSuggestions && (this.value || this.Suggestions!.isOpened())) { - switch (this.suggestionsTexts.length) { + const nonGroupItems = this.suggestionObjects.filter(item => !item.groupItem); + + switch (nonGroupItems.length) { case 0: return Input.i18nBundle.getText(INPUT_SUGGESTIONS_NO_HIT); @@ -1662,7 +1660,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { return Input.i18nBundle.getText(INPUT_SUGGESTIONS_ONE_HIT); default: - return Input.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, this.suggestionsTexts.length); + return Input.i18nBundle.getText(INPUT_SUGGESTIONS_MORE_HITS, nonGroupItems.length); } } diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs index 7f5743ce9ed3..91cb82c4a117 100644 --- a/packages/main/src/InputPopover.hbs +++ b/packages/main/src/InputPopover.hbs @@ -94,7 +94,7 @@ {{#*inline "suggestionsList"}} - {{#each suggestionsTexts}} + {{#each suggestionObjects}} {{#if groupItem}} {{{ this.text }}} {{else}} diff --git a/packages/main/src/features/InputSuggestions.ts b/packages/main/src/features/InputSuggestions.ts index 9eff7f8888a8..2fbd338ef39f 100644 --- a/packages/main/src/features/InputSuggestions.ts +++ b/packages/main/src/features/InputSuggestions.ts @@ -19,6 +19,7 @@ import SuggestionListItem from "../SuggestionListItem.js"; import { LIST_ITEM_POSITION, + LIST_ITEM_GROUP_HEADER, } from "../generated/i18n/i18n-defaults.js"; import type ListItemType from "../types/ListItemType.js"; import type ListItemBase from "../ListItemBase.js"; @@ -38,7 +39,7 @@ interface SuggestionComponent extends UI5Element { onItemPreviewed: (item: SuggestionListItem) => void; } -type InputSuggestionText = { +type InputSuggestion = { text: string; description: string; image?: string; @@ -51,9 +52,11 @@ type InputSuggestionText = { } type SuggestionsAccInfo = { + isGroup: boolean, currentPos: number; listSize: number; itemText: string; + description: string; } /** @@ -110,7 +113,7 @@ class Suggestions { defaultSlotProperties(hightlightValue: string) { const inputSuggestionItems = this._getComponent().suggestionItems; const highlight = this.highlight && !!hightlightValue; - const suggestions: Array = []; + const suggestions: Array = []; inputSuggestionItems.map((suggestion: SuggestionItem, idx: number) => { const text = highlight ? this.getHighlightedText(suggestion, hightlightValue) : this.getRowText(suggestion); @@ -283,13 +286,16 @@ class Suggestions { onItemSelected(selectedItem: SuggestionListItem | null, keyboardUsed: boolean) { const allItems = this._getItems(); const item = selectedItem || allItems[this.selectedItemIndex]; + const nonGroupItems = this._getNonGroupItems(); this.selectedItemIndex = allItems.indexOf(item); this.accInfo = { - currentPos: this.selectedItemIndex + 1, - listSize: allItems.length, - itemText: this._getRealItems()[this.selectedItemIndex].description, + isGroup: item.groupItem, + currentPos: nonGroupItems.indexOf(item) + 1, + listSize: nonGroupItems.length, + itemText: this._getRealItems()[this.selectedItemIndex].text, + description: this._getRealItems()[this.selectedItemIndex].description, }; // If the item is "Inactive", prevent selection with SPACE or ENTER @@ -472,6 +478,7 @@ class Suggestions { const items = this._getItems(); const currentItem = items[nextIdx]; const previousItem = items[previousIdx]; + const nonGroupItems = this._getNonGroupItems(); if (!currentItem) { return; @@ -481,9 +488,11 @@ class Suggestions { this._clearValueStateFocus(); this.accInfo = { - currentPos: nextIdx + 1, - listSize: items.length, - itemText: this._getRealItems()[items.indexOf(currentItem)].description, + isGroup: currentItem.groupItem, + currentPos: nonGroupItems.indexOf(currentItem) + 1, + listSize: nonGroupItems.length, + itemText: this._getRealItems()[this.selectedItemIndex].text, + description: this._getRealItems()[items.indexOf(currentItem)].description, }; if (previousItem) { @@ -554,6 +563,10 @@ class Suggestions { return this.responsivePopover ? [...this.responsivePopover.querySelector("[ui5-list]")!.children] as Array : []; } + _getNonGroupItems(): Array { + return this._getItems().filter(item => !item.groupItem); + } + _getComponent(): SuggestionComponent { return this.component; } @@ -588,8 +601,9 @@ class Suggestions { } const itemPositionText = Suggestions.i18nBundle.getText(LIST_ITEM_POSITION, this.accInfo.currentPos, this.accInfo.listSize); + const groupItemText = Suggestions.i18nBundle.getText(LIST_ITEM_GROUP_HEADER); - return `${this.accInfo.itemText} ${itemPositionText}`; + return this.accInfo.isGroup ? `${groupItemText} ${this.accInfo.itemText}` : `${this.accInfo.description} ${itemPositionText}`; } getRowText(suggestion: SuggestionItem) { @@ -665,5 +679,5 @@ export default Suggestions; export type { SuggestionComponent, - InputSuggestionText, + InputSuggestion, }; diff --git a/packages/main/test/specs/Input.spec.js b/packages/main/test/specs/Input.spec.js index e50fb435d2d8..36e03335bfb8 100644 --- a/packages/main/test/specs/Input.spec.js +++ b/packages/main/test/specs/Input.spec.js @@ -817,7 +817,7 @@ describe("Input general interaction", () => { await dynamicSuggestionsInnerInput.keys("c"); //assert - assert.strictEqual(await dynamicSuggestionsCount.getText(), "4 results are available", "Suggestions count is available since value is entered"); + assert.strictEqual(await dynamicSuggestionsCount.getText(), "3 results are available", "Group items should be excluded of the count of available results."); await dynamicSuggestionsInnerInput.keys("Backspace"); // Close suggestions to not intercept the click in the input below for the last test @@ -831,6 +831,49 @@ describe("Input general interaction", () => { assert.strictEqual(await suggestionsCount.getText(), "5 results are available", "Suggestions count is available since the suggestions popover is opened"); }); + it("Suggestions announcement", async () => { + await browser.url(`test/pages/Input.html`); + + const inputWithGroups = await $("#inputCompact"); + const inputSuggestions = await $("#myInput2"); + const inputWithGroupsInnerInput = await inputWithGroups.shadow$("input"); + const inputWithGroupsAnnouncement = await inputWithGroups.shadow$(`#${await inputWithGroups.getProperty("_id")}-selectionText`); + const suggestionsAnnouncement = await inputSuggestions.shadow$(`#${await inputSuggestions.getProperty("_id")}-selectionText`); + + //act + await inputWithGroups.click(); + + //assert + assert.strictEqual(await inputWithGroupsAnnouncement.getText(), "", "Suggestions announcement is not available on initially"); + + //act + await inputWithGroupsInnerInput.keys("a"); + await inputWithGroupsInnerInput.keys("ArrowDown"); + + //assert + assert.strictEqual(await inputWithGroupsAnnouncement.getText(), "Group Header A", "Group item announcement should not contain the position and total coout."); + + //act + await inputWithGroupsInnerInput.keys("ArrowDown"); + + const announcementText = await inputWithGroupsAnnouncement.getText(); + + //assert + assert.ok(announcementText.includes("List item 1 of 12"), "The total count announcement and position of items should exclude group items."); + await inputWithGroupsInnerInput.keys("Backspace"); + + // Close suggestions to not intercept the click in the input below for the last test + await inputWithGroupsInnerInput.keys("Escape"); + + //act + await inputSuggestions.click(); + await (await inputSuggestions.shadow$("input")).keys("c"); + await inputWithGroupsInnerInput.keys("ArrowDown"); + + //assert + assert.strictEqual(await suggestionsAnnouncement.getText(), "List item 1 of 5", "Item position and count is announced correctly"); + }); + it("Should close the Popover when no suggestions are available", async () => { await browser.url(`test/pages/Input.html`); From a1b3bf63875c04870e01ff715f603293a233444f Mon Sep 17 00:00:00 2001 From: gmkv Date: Tue, 19 Sep 2023 14:46:25 +0300 Subject: [PATCH 018/141] fix(ui5-popover): improve positioning when scrolling (#7593) Fixes #7173 --- packages/main/src/popup-utils/PopoverRegistry.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/popup-utils/PopoverRegistry.ts b/packages/main/src/popup-utils/PopoverRegistry.ts index 7151453cde9c..9547583f6766 100644 --- a/packages/main/src/popup-utils/PopoverRegistry.ts +++ b/packages/main/src/popup-utils/PopoverRegistry.ts @@ -38,11 +38,11 @@ const stopUpdateInterval = () => { }; const attachGlobalScrollHandler = () => { - document.body.addEventListener("scroll", repositionPopovers, { capture: true }); + document.addEventListener("scroll", repositionPopovers, { capture: true }); }; const detachGlobalScrollHandler = () => { - document.body.removeEventListener("scroll", repositionPopovers, { capture: true }); + document.removeEventListener("scroll", repositionPopovers, { capture: true }); }; const attachScrollHandler = (popover: Popover) => { From b32dba1dd5ca2874c4735bda8879b6ee82f149a9 Mon Sep 17 00:00:00 2001 From: niyap <38278268+niyap@users.noreply.github.com> Date: Wed, 20 Sep 2023 08:23:22 +0300 Subject: [PATCH 019/141] fix(ui5-input): adjust button's size (#7597) fix(ui5-input): adjust icon's size --- packages/main/src/themes/Input.css | 19 +++++++++++++++++++ .../main/src/themes/base/Input-parameters.css | 13 +++++++++++++ .../src/themes/base/InputIcon-parameters.css | 5 +++++ .../main/src/themes/base/sizes-parameters.css | 8 -------- .../themes/sap_horizon/Input-parameters.css | 11 +++++++++++ .../sap_horizon_dark/Input-parameters.css | 13 ++++++++++++- .../sap_horizon_hcb/Input-parameters.css | 3 +-- .../sap_horizon_hcb/InputIcon-parameters.css | 2 +- .../sap_horizon_hcw/Input-parameters.css | 3 +-- .../sap_horizon_hcw/InputIcon-parameters.css | 2 +- 10 files changed, 64 insertions(+), 15 deletions(-) diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css index 1baec8dd8293..94a3b435b93a 100644 --- a/packages/main/src/themes/Input.css +++ b/packages/main/src/themes/Input.css @@ -386,20 +386,39 @@ padding: var(--_ui5_input_error_warning_icon_padding); } +:host([value-state="Error"][focused]) [input-icon], +:host([value-state="Warning"][focused]) [input-icon]{ + padding: var(--_ui5_input_error_warning_focused_icon_padding); +} + :host([value-state="Information"]) [input-icon] { padding: var(--_ui5_input_information_icon_padding); } +:host([value-state="Information"][focused]) [input-icon] { + padding: var(--_ui5_input_information_focused_icon_padding); +} + :host([value-state="Error"]) ::slotted([input-icon][ui5-icon]), :host([value-state="Error"]) ::slotted([ui5-icon][slot="icon"]), :host([value-state="Warning"]) ::slotted([ui5-icon][slot="icon"]) { padding: var(--_ui5_input_error_warning_custom_icon_padding); } +:host([value-state="Error"][focused]) ::slotted([input-icon][ui5-icon]), +:host([value-state="Error"][focused]) ::slotted([ui5-icon][slot="icon"]), +:host([value-state="Warning"][focused]) ::slotted([ui5-icon][slot="icon"]) { + padding: var(--_ui5_input_error_warning_custom_focused_icon_padding); +} + :host([value-state="Information"]) ::slotted([ui5-icon][slot="icon"]) { padding: var(--_ui5_input_information_custom_icon_padding); } +:host([value-state="Information"][focused]) ::slotted([ui5-icon][slot="icon"]) { + padding: var(--_ui5_input_information_custom_focused_icon_padding); +} + :host([value-state="Error"]) [input-icon]:active, :host([value-state="Error"]) [input-icon][pressed] { box-shadow: var(--_ui5_input_error_icon_box_shadow); diff --git a/packages/main/src/themes/base/Input-parameters.css b/packages/main/src/themes/base/Input-parameters.css index 05c450e4daff..7df445341f97 100644 --- a/packages/main/src/themes/base/Input-parameters.css +++ b/packages/main/src/themes/base/Input-parameters.css @@ -31,9 +31,13 @@ --_ui5_input_readonly_background: var(--sapField_ReadOnly_Background); --_ui5_input_custom_icon_padding: .5625rem .625rem; --_ui5_input_error_warning_custom_icon_padding: .5rem .625rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .5rem .625rem; --_ui5_input_information_custom_icon_padding: .5rem .625rem; + --_ui5_input_information_custom_focused_icon_padding: .5rem .625rem; --_ui5_input_error_warning_icon_padding: .5rem .5rem .5rem .5625rem; + --_ui5_input_error_warning_focused_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_information_icon_padding: .5rem .5rem .5rem .5625rem; + --_ui5_input_information_focused_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_disabled_opacity: var(--sapContent_DisabledOpacity); --_ui5_input_icon_min_width: 2.25rem; --_ui5_input_compact_min_width: 2rem; @@ -76,4 +80,13 @@ .sapUiSizeCompact { --_ui5_input_min_width: 2rem; --_ui5_input_icon_width: 2rem; + --_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_error_warning_focused_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_information_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_information_focused_icon_padding: .1875rem .375rem .1875rem .4375rem; + --_ui5_input_custom_icon_padding: .25rem .5rem; + --_ui5_input_error_warning_custom_icon_padding: .1875rem .5rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .1875rem .5rem; + --_ui5_input_information_custom_icon_padding: .1875rem .5rem; + --_ui5_input_information_custom_focused_icon_padding: .1875rem .5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/InputIcon-parameters.css b/packages/main/src/themes/base/InputIcon-parameters.css index fec70440099d..0577551e99d9 100644 --- a/packages/main/src/themes/base/InputIcon-parameters.css +++ b/packages/main/src/themes/base/InputIcon-parameters.css @@ -15,5 +15,10 @@ --_ui5_input_icon_warning_pressed_color: var(--sapButton_Active_TextColor); --_ui5_input_icon_information_pressed_color: var(--sapButton_Active_TextColor); --_ui5_input_icon_success_pressed_color: var(--sapButton_Active_TextColor); +} +[data-ui5-compact-size], +.ui5-content-density-compact, +.sapUiSizeCompact { + --_ui5_input_icon_padding: .25rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index fd596afbfb4e..9466a9cc908a 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -44,7 +44,6 @@ --_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem; --_ui5_input_inner_space_to_tokenizer: 0.125rem; --_ui5_input_inner_space_to_n_more_text: 0.1875rem; - --_ui5_input_value_state_icon_padding: var(--_ui5-input-icon-padding); --_ui5_list_no_data_height: 3rem; --_ui5_list_item_cb_margin_right: 0; --_ui5_list_item_title_size: var(--sapFontLargeSize); @@ -219,13 +218,6 @@ --_ui5_input_inner_space_to_tokenizer: 0.125rem; --_ui5_input_inner_space_to_n_more_text: 0.125rem; --_ui5_input_icon_min_width: var(--_ui5_input_compact_min_width); - --_ui5_input_icon_padding: .25rem .4375rem; - --_ui5_input_error_warning_icon_padding: .1875rem .375rem .1875rem .4375rem; - --_ui5_input_information_icon_padding: .1875rem .375rem .1875rem .4375rem; - --_ui5_input_custom_icon_padding: .25rem .5rem; - --_ui5_input_error_warning_custom_icon_padding: .1875rem .5rem; - --_ui5_input_information_custom_icon_padding: .1875rem .5rem; - --_ui5_input_value_state_icon_padding: .1875rem .5rem; /* Menu */ --_ui5_menu_item_padding: 0 0.75rem 0 0.5rem; diff --git a/packages/main/src/themes/sap_horizon/Input-parameters.css b/packages/main/src/themes/sap_horizon/Input-parameters.css index 2edfd89b4e86..12085851c879 100644 --- a/packages/main/src/themes/sap_horizon/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon/Input-parameters.css @@ -14,9 +14,14 @@ --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); --_ui5_input_focus_offset: 0; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; + --_ui5_input_information_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_focus_outline_color: var(--sapField_Active_BorderColor); --_ui5_input_icon_wrapper_height: calc(100% - 1px); --_ui5_input_icon_wrapper_state_height: calc(100% - 2px); @@ -27,6 +32,12 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_error_warning_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_custom_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_error_warning_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_information_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css index 60006362adc5..12085851c879 100644 --- a/packages/main/src/themes/sap_horizon_dark/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Input-parameters.css @@ -12,11 +12,16 @@ --_ui5_input_focused_value_state_error_focus_outline_color: var(--sapField_InvalidColor); --_ui5_input_focused_value_state_warning_focus_outline_color: var(--sapField_WarningColor); --_ui5_input_focused_value_state_success_focus_outline_color: var(--sapField_SuccessColor); - --_ui5_input_icon_min_width: 2.125rem; --_ui5_input_focus_offset: 0; --_ui5_input_information_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_error_warning_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_custom_icon_padding: .625rem .625rem .5625rem .625rem; + --_ui5_input_error_warning_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; + --_ui5_input_information_custom_icon_padding: .625rem .625rem .5rem .625rem; + --_ui5_input_information_custom_focused_icon_padding: .625rem .625rem .5625rem .625rem; --_ui5_input_focus_outline_color: var(--sapField_Active_BorderColor); --_ui5_input_icon_wrapper_height: calc(100% - 1px); --_ui5_input_icon_wrapper_state_height: calc(100% - 2px); @@ -27,6 +32,12 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_information_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_error_warning_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_focused_icon_padding: .3125rem .5rem .25rem .5rem; --_ui5_input_custom_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_error_warning_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_error_warning_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; + --_ui5_input_information_custom_icon_padding: .3125rem .5rem .1875rem .5rem; + --_ui5_input_information_custom_focused_icon_padding: .3125rem .5rem .25rem .5rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css index 37ba441edf26..3a462795fbe8 100644 --- a/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/Input-parameters.css @@ -14,7 +14,7 @@ --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; --_ui5_input_icon_padding: 0.65rem 0.75rem; - --_ui5_input_information_icon_padding: .5625rem; + --_ui5_input_information_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_placeholder_style: normal; --_ui5-input_error_placeholder_color: var(--sapField_TextColor); --_ui5_input_custom_icon_padding: .5rem .625rem; @@ -28,5 +28,4 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_custom_icon_padding: .1875rem .5rem; - --_ui5_input_information_icon_padding: .25rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css index 0638f4902703..2ed254a36a18 100644 --- a/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/InputIcon-parameters.css @@ -7,5 +7,5 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_input_icon_padding: .25rem .375rem .125rem .4375rem; + --_ui5_input_icon_padding: .1875rem .375rem .1875rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css index 37ba441edf26..3a462795fbe8 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Input-parameters.css @@ -14,7 +14,7 @@ --_ui5_input_disabled_color: var(--sapContent_DisabledTextColor); --_ui5_input_disabled_font_weight: normal; --_ui5_input_icon_padding: 0.65rem 0.75rem; - --_ui5_input_information_icon_padding: .5625rem; + --_ui5_input_information_icon_padding: .5rem .5rem .5rem .5625rem; --_ui5_input_placeholder_style: normal; --_ui5-input_error_placeholder_color: var(--sapField_TextColor); --_ui5_input_custom_icon_padding: .5rem .625rem; @@ -28,5 +28,4 @@ .ui5-content-density-compact, .sapUiSizeCompact { --_ui5_input_custom_icon_padding: .1875rem .5rem; - --_ui5_input_information_icon_padding: .25rem .4375rem; } \ No newline at end of file diff --git a/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css b/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css index 0638f4902703..2ed254a36a18 100644 --- a/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/InputIcon-parameters.css @@ -7,5 +7,5 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_input_icon_padding: .25rem .375rem .125rem .4375rem; + --_ui5_input_icon_padding: .1875rem .375rem .1875rem .4375rem; } \ No newline at end of file From 7c44fb2c6a13be29c7f71444d48802bb55b98d8f Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Wed, 20 Sep 2023 10:08:27 +0300 Subject: [PATCH 020/141] chore: fix JSDoc (#7604) --- packages/main/src/SelectMenuOption.ts | 1 + packages/main/src/ToolbarButton.ts | 1 + packages/main/src/ToolbarSelect.ts | 1 + packages/main/src/ToolbarSeparator.ts | 2 +- packages/main/src/ToolbarSpacer.ts | 1 + packages/theming/css-vars-usage.json | 1 - 6 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/main/src/SelectMenuOption.ts b/packages/main/src/SelectMenuOption.ts index ef3c3a7539fa..6f6578160405 100644 --- a/packages/main/src/SelectMenuOption.ts +++ b/packages/main/src/SelectMenuOption.ts @@ -112,6 +112,7 @@ class SelectMenuOption extends CustomListItem implements IOption { * Note: The slot is inherited and not supported. If set, it won't take any effect. * * @name sap.ui.webc.main.SelectMenuOption.prototype.deleteButton + * @type {Node[]} * @slot * @public * @deprecated diff --git a/packages/main/src/ToolbarButton.ts b/packages/main/src/ToolbarButton.ts index 25792e5a0aa9..938b8c67f466 100644 --- a/packages/main/src/ToolbarButton.ts +++ b/packages/main/src/ToolbarButton.ts @@ -31,6 +31,7 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; * @extends sap.ui.webc.main.ToolbarItem * @tagname ui5-toolbar-button * @public + * @implements sap.ui.webc.main.IToolbarItem * @since 1.17.0 */ @customElement({ diff --git a/packages/main/src/ToolbarSelect.ts b/packages/main/src/ToolbarSelect.ts index d23f568f8788..1951d6b87e32 100644 --- a/packages/main/src/ToolbarSelect.ts +++ b/packages/main/src/ToolbarSelect.ts @@ -38,6 +38,7 @@ type ToolbarSelectChangeEventDetail = SelectChangeEventDetail; * @tagname ui5-toolbar-select * @appenddocs sap.ui.webc.main.ToolbarSelectOption * @public + * @implements sap.ui.webc.main.IToolbarItem * @since 1.17.0 */ @customElement({ diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts index c5aca9ac9a27..ce43df944d57 100644 --- a/packages/main/src/ToolbarSeparator.ts +++ b/packages/main/src/ToolbarSeparator.ts @@ -20,7 +20,7 @@ import ToolbarItem from "./ToolbarItem.js"; * @extends sap.ui.webc.main.ToolbarItem * @tagname ui5-toolbar-separator * @since 1.17.0 - * @abstract + * @implements sap.ui.webc.main.IToolbarItem * @public */ @customElement({ diff --git a/packages/main/src/ToolbarSpacer.ts b/packages/main/src/ToolbarSpacer.ts index 89322bea09ee..3b290a6eb1a3 100644 --- a/packages/main/src/ToolbarSpacer.ts +++ b/packages/main/src/ToolbarSpacer.ts @@ -20,6 +20,7 @@ import { registerToolbarItem } from "./ToolbarRegistry.js"; * @tagname ui5-toolbar-spacer * @abstract * @since 1.17.0 + * @implements sap.ui.webc.main.IToolbarItem * @public */ @customElement({ diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json index 735786a897bc..fc34de6a48d6 100644 --- a/packages/theming/css-vars-usage.json +++ b/packages/theming/css-vars-usage.json @@ -118,7 +118,6 @@ "--sapButton_Lite_Hover_BorderColor", "--sapButton_Lite_Hover_TextColor", "--sapButton_Lite_TextColor", - "--sapButton_Negative_BorderColor", "--sapButton_Neutral_Background", "--sapButton_Reject_Active_Background", "--sapButton_Reject_Active_BorderColor", From af8015b68a3a90cfec999863230d0f7b5298e206 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Thu, 21 Sep 2023 09:36:21 +0300 Subject: [PATCH 021/141] fix(ui5-breadcrumbs): infinite rerendering fixed (#7589) * fix(ui5-flexible-column-layout): wrong focus fixed * fix(ui5-breadcrumbs): infinite rerendering fixed --------- Co-authored-by: PetyaMarkovaBogdanova --- packages/main/src/Breadcrumbs.ts | 2 +- packages/main/test/pages/Breadcrumbs.html | 7 +++++++ packages/main/test/specs/Breadcrumbs.spec.js | 8 ++++++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index bd9ac571c109..7bc1aed21580 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -360,7 +360,7 @@ class Breadcrumbs extends UI5Element { requiredWidth += this._dropdownArrowLinkWidth; } - while ((requiredWidth > availableWidth) && (overflowSize < this._maxAllowedOverflowSize)) { + while ((requiredWidth >= availableWidth) && (overflowSize < this._maxAllowedOverflowSize)) { const itemToOverflow = items[overflowSize]; let itemWidth = 0; diff --git a/packages/main/test/pages/Breadcrumbs.html b/packages/main/test/pages/Breadcrumbs.html index 5da79bb6a46c..b822a85f290c 100644 --- a/packages/main/test/pages/Breadcrumbs.html +++ b/packages/main/test/pages/Breadcrumbs.html @@ -157,6 +157,13 @@

Empty Breadcrumbs with Location only

Last pressed link: +

Breadcrumbs with hardcoded width

+ + + (all) + Bourgogne-Franche-Comté + + `, ]; -WithThumbnailOverflow.args = { +ThumbnailOverflow.args = { interactiveDisplayArea: true, default: ` @@ -305,7 +305,7 @@ WithThumbnailOverflow.args = { `, }; -WithThumbnailOverflow.parameters = { +ThumbnailOverflow.parameters = { docs: { story: { // Opt-out of inline rendering diff --git a/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts b/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts index 4df1afe61c60..2f1fb6f0ac6f 100644 --- a/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts +++ b/packages/playground/_stories/fiori/ProductSwitch/ProductSwitch.stories.ts @@ -14,7 +14,7 @@ import type ProductSwitch from "@ui5/webcomponents-fiori/dist/ProductSwitch.js"; const component = "ui5-product-switch"; export default { - title: "Fiori/ProductSwitch", + title: "Fiori/Product Switch", component: "ProductSwitch", subcomponents: { ProductSwitchItem: "ProductSwitchItem" }, parameters: { @@ -39,8 +39,8 @@ Basic.args = { `, }; -export const ProductSwitchWithShellBar = Template.bind({}); -ProductSwitchWithShellBar.decorators = [ +export const WithShellBar = Template.bind({}); +WithShellBar.decorators = [ (story) => html` `, ]; -ProductSwitchWithShellBar.args = { +WithShellBar.args = { default: ` `, }; -export const SearchAndNotifications = Template.bind({}); -SearchAndNotifications.args = { +export const Search = Template.bind({}); +Search.args = { primaryTitle: "Corporate Portal", secondaryTitle: "secondary title", showNotifications: true, diff --git a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts index 5e329c94368b..0f63674f0aca 100644 --- a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts +++ b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts @@ -42,8 +42,8 @@ Basic.args = { `, }; -export const DesignNoCurrentPage = Template.bind({}); -DesignNoCurrentPage.args = { +export const NoCurrentPage = Template.bind({}); +NoCurrentPage.args = { design: BreadcrumbsDesign.NoCurrentPage, default: `Root Page diff --git a/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts b/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts index 71e1fb477db0..9d9cfb7acfb3 100644 --- a/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts +++ b/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts @@ -14,7 +14,7 @@ import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js"; const component = "ui5-checkbox"; export default { - title: "Main/CheckBox", + title: "Main/Check Box", component: "CheckBox", parameters: { docs: { diff --git a/packages/playground/_stories/main/ProgressIndicator/ProgressIndicator.stories.ts b/packages/playground/_stories/main/ProgressIndicator/ProgressIndicator.stories.ts index 16d3802ff7ea..a9b9a84525ca 100644 --- a/packages/playground/_stories/main/ProgressIndicator/ProgressIndicator.stories.ts +++ b/packages/playground/_stories/main/ProgressIndicator/ProgressIndicator.stories.ts @@ -13,7 +13,7 @@ import type ProgressIndicator from "@ui5/webcomponents/dist/ProgressIndicator.js const component = "ui5-progress-indicator"; export default { - title: "Main/ProgressIndicator", + title: "Main/Progress Indicator", component: "ProgressIndicator", parameters: { docs: { diff --git a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts index 14d583402f4a..9dbb9cf5e39c 100644 --- a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts +++ b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts @@ -104,11 +104,11 @@ WithSeparator.args = { ` } -export const WithAlwaysOverflowItems: UI5StoryArgs = Template.bind({}); +export const AlwaysOverflowItems: UI5StoryArgs = Template.bind({}); -WithAlwaysOverflowItems.storyName = "With 'AlwaysOverflow' items"; +AlwaysOverflowItems.storyName = "'AlwaysOverflow' items"; -WithAlwaysOverflowItems.args = { +AlwaysOverflowItems.args = { default: ` @@ -125,11 +125,11 @@ WithAlwaysOverflowItems.args = { ` } -export const WithNeverOverflowItems: UI5StoryArgs = Template.bind({}); +export const NeverOverflowItems: UI5StoryArgs = Template.bind({}); -WithNeverOverflowItems.storyName = "With 'NeverOverflow' items"; +NeverOverflowItems.storyName = "'NeverOverflow' items"; -WithNeverOverflowItems.args = { +NeverOverflowItems.args = { default: ` @@ -146,12 +146,12 @@ WithNeverOverflowItems.args = { ` } -export const WithStartAlignedItems = Template.bind({}); +export const StartAlignedItems = Template.bind({}); -WithStartAlignedItems.storyName = "With 'Start' aligned items"; +StartAlignedItems.storyName = "'Start' aligned items"; -WithStartAlignedItems.args = { +StartAlignedItems.args = { alignContent: ToolbarAlign.Start, default: Basic.args.default }; From b0b83597596248732f4bc92f968391aa67bb0355 Mon Sep 17 00:00:00 2001 From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com> Date: Wed, 27 Sep 2023 11:35:19 +0300 Subject: [PATCH 029/141] fix(ui5-list): update horizon theme parameters (#7614) --- packages/main/src/themes/GroupHeaderListItem.css | 3 ++- packages/main/src/themes/ListItem.css | 4 ++-- packages/main/src/themes/base/ListItemBase-parameters.css | 2 +- packages/main/src/themes/base/sizes-parameters.css | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/main/src/themes/GroupHeaderListItem.css b/packages/main/src/themes/GroupHeaderListItem.css index 8a436b99e46a..c14c0d7fd64d 100644 --- a/packages/main/src/themes/GroupHeaderListItem.css +++ b/packages/main/src/themes/GroupHeaderListItem.css @@ -7,7 +7,7 @@ } :host([has-border]) { - border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor); + border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor); } .ui5-li-root.ui5-ghli-root { @@ -25,4 +25,5 @@ text-overflow: ellipsis; white-space: nowrap; font-weight: bold; + font-family: var(--sapFontHeaderFamily); } diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css index 8abb23289a39..c0e800d0a41a 100644 --- a/packages/main/src/themes/ListItem.css +++ b/packages/main/src/themes/ListItem.css @@ -115,7 +115,7 @@ } .ui5-li-title { - color: var(--sapTextColor); + color: var(--sapList_TextColor); font-size: var(--_ui5_list_item_title_size); } @@ -143,7 +143,7 @@ .ui5-li-additional-text { margin: 0 0.25rem; color: var(--sapNeutralTextColor); - font-size: 0.875rem; + font-size: var(--sapFontSize); min-width: 3.75rem; text-align: end; } diff --git a/packages/main/src/themes/base/ListItemBase-parameters.css b/packages/main/src/themes/base/ListItemBase-parameters.css index 352df200163e..da658ff3798c 100644 --- a/packages/main/src/themes/base/ListItemBase-parameters.css +++ b/packages/main/src/themes/base/ListItemBase-parameters.css @@ -1,6 +1,6 @@ :root { --ui5-listitem-background-color: var(--sapList_Background); - --ui5-listitem-border-bottom: 1px solid var(--sapList_BorderColor); + --ui5-listitem-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor); --ui5-listitem-selected-border-bottom: 1px solid var(--sapList_SelectionBorderColor); --ui5-listitem-focused-selected-border-bottom: 1px solid var(--sapList_SelectionBorderColor); --ui5-listitem-active-border-color: var(--sapContent_ContrastFocusColor); diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 9466a9cc908a..29fa4cbeac27 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -53,7 +53,7 @@ --_ui5_list_item_img_bottom_margin: 0.5rem; --_ui5_list_item_img_hn_margin: 0.75rem; --_ui5_list_item_dropdown_base_height: 2.5rem; - --_ui5_list_item_base_height: 2.75rem; + --_ui5_list_item_base_height: var(--sapElement_LineHeight); --_ui5_list_item_icon_size: 1.125rem; --_ui5_list_item_icon_padding-inline-end: 0.5rem; --_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding)); From 50499ac1378deb18c18c649090591c0c36d44567 Mon Sep 17 00:00:00 2001 From: Nikolay Hristov Date: Thu, 28 Sep 2023 09:54:44 +0300 Subject: [PATCH 030/141] feat(ui5-time-picker): mobile input and code optimization (#7549) With this pull request a mobile input functionality is being added to the TimePicker. On mobile devices (phones), the manual input of the time is not allowed in the component's input field, but separate popover is opened. In this popover all of te input fields for hours/minutes/seconds are of numeric type which allows displaying of pure numeric keyboard. This will ease input of the desired time. Also, optimizations are made in order to reduce codebase as there were similar functionalities used both by TimeSelectionClocks and TimeSelectionInputs private components. Tests are added and some are modified because of oprimization. --- packages/main/bundle.common.js | 1 + packages/main/src/TimePicker.hbs | 12 +- packages/main/src/TimePickerBase.ts | 227 +++++++-- packages/main/src/TimePickerClock.ts | 189 +------ packages/main/src/TimePickerInternals.ts | 260 ++++++---- packages/main/src/TimePickerPopover.hbs | 34 +- packages/main/src/TimeSelectionClocks.hbs | 40 +- packages/main/src/TimeSelectionClocks.ts | 464 ++++-------------- packages/main/src/TimeSelectionInputs.hbs | 41 ++ packages/main/src/TimeSelectionInputs.ts | 352 +++++++++++++ .../main/src/i18n/messagebundle.properties | 9 + .../main/src/themes/TimeSelectionInputs.css | 25 + packages/main/test/pages/TimePickerClock.html | 6 +- .../main/test/pages/TimeSelectionInputs.html | 87 ++++ .../main/test/specs/TimePicker.mobile.spec.js | 244 +++++++++ packages/main/test/specs/TimePicker.spec.js | 2 +- .../main/test/specs/TimePickerClock.spec.js | 5 +- 17 files changed, 1292 insertions(+), 706 deletions(-) create mode 100644 packages/main/src/TimeSelectionInputs.hbs create mode 100644 packages/main/src/TimeSelectionInputs.ts create mode 100644 packages/main/src/themes/TimeSelectionInputs.css create mode 100644 packages/main/test/pages/TimeSelectionInputs.html create mode 100644 packages/main/test/specs/TimePicker.mobile.spec.js diff --git a/packages/main/bundle.common.js b/packages/main/bundle.common.js index daf14400b286..4d5a8e5d717a 100644 --- a/packages/main/bundle.common.js +++ b/packages/main/bundle.common.js @@ -84,6 +84,7 @@ import TimeSelection from "./dist/TimeSelection.js"; import TimePicker from "./dist/TimePicker.js"; import TimePickerClock from "./dist/TimePickerClock.js"; import TimeSelectionClocks from "./dist/TimeSelectionClocks.js"; +import TimeSelectionInputs from "./dist/TimeSelectionInputs.js"; import Title from "./dist/Title.js"; import Toast from "./dist/Toast.js"; import ToggleButton from "./dist/ToggleButton.js"; diff --git a/packages/main/src/TimePicker.hbs b/packages/main/src/TimePicker.hbs index a950e2f8836b..43a3dca1dd88 100644 --- a/packages/main/src/TimePicker.hbs +++ b/packages/main/src/TimePicker.hbs @@ -1,4 +1,7 @@ -
+
{{#if valueStateMessage.length}} - + {{/if}} {{#unless readonly}} diff --git a/packages/main/src/TimePickerBase.ts b/packages/main/src/TimePickerBase.ts index 4d2dacd4bf83..abbcab547b6d 100644 --- a/packages/main/src/TimePickerBase.ts +++ b/packages/main/src/TimePickerBase.ts @@ -1,3 +1,4 @@ +import { isPhone } from "@ui5/webcomponents-base/dist/Device.js"; import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js"; import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; @@ -26,12 +27,14 @@ import { } from "@ui5/webcomponents-base/dist/Keys.js"; import "@ui5/webcomponents-icons/dist/time-entry-request.js"; import Icon from "./Icon.js"; +import Popover from "./Popover.js"; import ResponsivePopover from "./ResponsivePopover.js"; import TimePickerTemplate from "./generated/templates/TimePickerTemplate.lit.js"; import TimePickerPopoverTemplate from "./generated/templates/TimePickerPopoverTemplate.lit.js"; import Input from "./Input.js"; import Button from "./Button.js"; import TimeSelectionClocks from "./TimeSelectionClocks.js"; +import TimeSelectionInputs from "./TimeSelectionInputs.js"; import type { TimeSelectionChangeEventDetail } from "./TimePickerInternals.js"; import { @@ -42,6 +45,7 @@ import { // Styles import TimePickerCss from "./generated/themes/TimePicker.css.js"; import TimePickerPopoverCss from "./generated/themes/TimePickerPopover.css.js"; +import PopoverCss from "./generated/themes/Popover.css.js"; import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js"; type TimePickerBaseChangeInputEventDetail = { @@ -68,11 +72,13 @@ type TimePickerBaseInputEventDetail = TimePickerBaseChangeInputEventDetail; template: TimePickerTemplate, styles: TimePickerCss, staticAreaTemplate: TimePickerPopoverTemplate, - staticAreaStyles: [ResponsivePopoverCommonCss, TimePickerPopoverCss], + staticAreaStyles: [ResponsivePopoverCommonCss, PopoverCss, TimePickerPopoverCss], dependencies: [ Icon, + Popover, ResponsivePopover, TimeSelectionClocks, + TimeSelectionInputs, Input, Button, ], @@ -174,6 +180,9 @@ class TimePickerBase extends UI5Element { @property({ type: Boolean, noAttribute: true }) _isPickerOpen!: boolean; + @property({ type: Boolean, noAttribute: true }) + _isInputsPopoverOpen!: boolean; + /** * Defines the value state message that will be displayed as pop up under the ui5-time-picker. *

@@ -230,10 +239,60 @@ class TimePickerBase extends UI5Element { return this.tempValue; } + get _isPhone() { + return isPhone(); + } + onTimeSelectionChange(e: CustomEvent) { this.tempValue = e.detail.value; // every time the user changes the time selection -> update tempValue } + /** + * Opens the picker. + * @async + * @public + * @method + * @name sap.ui.webc.main.TimePickerBase#openPicker + * @returns {Promise} Resolves when the picker is open + */ + async openPicker() { + this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); + const responsivePopover = await this._getPopover(); + responsivePopover.showAt(this); + } + + /** + * Closes the picker + * @public + * @method + * @name sap.ui.webc.main.TimePickerBase#closePicker + * @returns {Promise} Resolves when the picker is closed + */ + async closePicker() { + const responsivePopover = await this._getPopover(); + responsivePopover.close(); + this._isPickerOpen = false; + } + + togglePicker() { + if (this.isOpen()) { + this.closePicker(); + } else if (this._canOpenPicker()) { + this.openPicker(); + } + } + + /** + * Checks if the picker is open + * @public + * @method + * @name sap.ui.webc.main.TimePickerBase#isOpen + * @returns {boolean} + */ + isOpen() { + return !!this._isPickerOpen; + } + submitPickers() { this._updateValueAndFireEvents(this.tempValue!, true, ["change", "value-changed"]); this.closePicker(); @@ -243,11 +302,82 @@ class TimePickerBase extends UI5Element { this._isPickerOpen = false; } - async _handleInputClick() { + async onResponsivePopoverAfterOpen() { + this._isPickerOpen = true; + const responsivePopover = await this._getPopover(); + responsivePopover.querySelector("[ui5-time-selection-clocks]")!._focusFirstButton(); + } + + /** + * Opens the Inputs popover. + * @async + * @private + * @method + * @name sap.ui.webc.main.TimePickerBase#openInputsPopover + * @returns {Promise} Resolves when the Inputs popover is open + */ + async openInputsPopover() { + this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); + const popover = await this._getInputsPopover(); + popover.showAt(this); + this._isInputsPopoverOpen = true; + } + + /** + * Closes the Inputs popover + * @private + * @method + * @name sap.ui.webc.main.TimePickerBase#closeInputsPopover + * @returns {Promise} Resolves when the Inputs popover is closed + */ + async closeInputsPopover() { + const popover = await this._getInputsPopover(); + popover.close(); + } + + toggleInputsPopover() { + if (this.isInputsPopoverOpen()) { + this.closeInputsPopover(); + } else if (this._canOpenInputsPopover()) { + this.openInputsPopover(); + } + } + + /** + * Checks if the inputs popover is open + * @private + * @method + * @name sap.ui.webc.main.TimePickerBase#isInputsPopoverOpen + * @returns {boolean} + */ + isInputsPopoverOpen() { + return !!this._isInputsPopoverOpen; + } + + submitInputsPopover() { + this._updateValueAndFireEvents(this.tempValue!, true, ["change", "value-changed"]); + this.closeInputsPopover(); + } + + async onInputsPopoverAfterOpen() { + const popover = await this._getInputsPopover(); + popover.querySelector("[ui5-time-selection-inputs]")!._addNumericAttributes(); + } + + onInputsPopoverAfterClose() { + this._isInputsPopoverOpen = false; + } + + async _handleInputClick(evt: MouseEvent) { + const target = evt.target as HTMLElement; if (this._isPickerOpen) { return; } + if (this._isPhone && target && !target.hasAttribute("ui5-icon")) { + this.toggleInputsPopover(); + } + const inputField = await this._getInputField(); if (inputField) { @@ -261,10 +391,10 @@ class TimePickerBase extends UI5Element { } const valid = this.isValid(value); + if (value !== undefined && valid && normalizeValue) { // if value === undefined, valid is guaranteed to be falsy value = this.normalizeValue(value); // transform valid values (in any format) to the correct format } - if (!eventsNames.includes("input")) { this.value = ""; // Do not remove! DurationPicker (an external component extending TimePickerBase) use case -> value is 05:10, user tries 05:12, after normalization value is changed back to 05:10 so no invalidation happens, but the input still shows 05:12. Thus we enforce invalidation with the "" this.value = value; @@ -295,61 +425,24 @@ class TimePickerBase extends UI5Element { this._updateValueAndFireEvents(target.value, false, ["input"]); } - /** - * Closes the picker - * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#closePicker - */ - async closePicker() { - const responsivePopover = await this._getPopover(); - responsivePopover.close(); - this._isPickerOpen = false; - } - - /** - * Opens the picker. - * @async - * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#openPicker - * @returns {Promise} Resolves when the picker is open - */ - async openPicker() { - this.tempValue = this.value && this.isValid(this.value) ? this.value : this.getFormat().format(new Date()); - const responsivePopover = await this._getPopover(); - responsivePopover.showAt(this); - this._isPickerOpen = true; - } - - togglePicker() { - if (this.isOpen()) { - this.closePicker(); - } else if (this._canOpenPicker()) { - this.openPicker(); - } - } - - /** - * Checks if the picker is open - * @public - * @method - * @name sap.ui.webc.main.TimePickerBase#isOpen - * @returns {boolean} - */ - isOpen() { - return !!this._isPickerOpen; - } - _canOpenPicker() { return !this.disabled && !this.readonly; } + _canOpenInputsPopover() { + return !this.disabled && this._isPhone; + } + async _getPopover() { const staticAreaItem = await this.getStaticAreaItemDomRef(); return staticAreaItem!.querySelector("[ui5-responsive-popover]")!; } + async _getInputsPopover() { + const staticAreaItem = await this.getStaticAreaItemDomRef(); + return staticAreaItem!.querySelector("[ui5-popover]")!; + } + _getInput(): Input { return this.shadowRoot!.querySelector("[ui5-input]")!; } @@ -360,20 +453,22 @@ class TimePickerBase extends UI5Element { } _onkeydown(e: KeyboardEvent) { + if (this._isPhone && !this.isInputsPopoverOpen()) { + e.preventDefault(); + } if (isShow(e)) { e.preventDefault(); this.togglePicker(); } const target = e.target as Node; + if ((this._getInput().isEqualNode(target) && this.isOpen()) && (isTabNext(e) || isTabPrevious(e) || isF6Next(e) || isF6Previous(e))) { this.closePicker(); } - if (this.isOpen()) { return; } - if (isPageUpShiftCtrl(e)) { e.preventDefault(); this._modifyValueBy(1, "second"); @@ -401,6 +496,7 @@ class TimePickerBase extends UI5Element { getFormat() { let dateFormat; + if (this._isPattern) { dateFormat = DateFormat.getDateInstance({ pattern: this._formatPattern, @@ -442,7 +538,6 @@ class TimePickerBase extends UI5Element { if (value === "") { return true; } - return !!this.getFormat().parse(value as string); } @@ -450,7 +545,6 @@ class TimePickerBase extends UI5Element { if (value === "") { return value; } - return this.getFormat().format(this.getFormat().parse(value)); } @@ -459,7 +553,6 @@ class TimePickerBase extends UI5Element { if (!date) { return; } - if (unit === "hour") { date.setHours(date.getHours() + amount); } else if (unit === "minute") { @@ -469,6 +562,7 @@ class TimePickerBase extends UI5Element { } const newValue = this.formatValue(date); + this._updateValueAndFireEvents(newValue, true, ["change", "value-changed"]); } @@ -483,6 +577,31 @@ class TimePickerBase extends UI5Element { e.preventDefault(); } + /** + * Hides mobile device keyboard by temporary setting the input to readonly state. + */ + _hideMobileKeyboard() { + this._getInput().readonly = true; + setTimeout(() => { this._getInput().readonly = false; }, 0); + } + + async _onfocusin(evt: FocusEvent) { + if (this._isPhone) { + this._hideMobileKeyboard(); + if (this._isInputsPopoverOpen) { + const popover = await this._getInputsPopover(); + popover.applyFocus(); + } + evt.preventDefault(); + } + } + + _oninput(evt: CustomEvent) { + if (this._isPhone) { + evt.preventDefault(); + } + } + get submitButtonLabel() { return TimePickerBase.i18nBundle.getText(TIMEPICKER_SUBMIT_BUTTON); } diff --git a/packages/main/src/TimePickerClock.ts b/packages/main/src/TimePickerClock.ts index 2e539b394c06..9804484e1090 100644 --- a/packages/main/src/TimePickerClock.ts +++ b/packages/main/src/TimePickerClock.ts @@ -51,7 +51,6 @@ type TimePickerClockSelectedItem = TimePickerClockItem & TimePickerClockSelectio const ANIMATION_DURATION_MAX = 200; // total animation duration, without the delay before firing the event const ANIMATION_DELAY_EVENT = 100; // delay before firing the event -const LONG_TOUCH_DURATION = 1000; // duration for long-touch interaction const CLOCK_ANGLE_STEP = 6; const CLOCK_NUMBER_CLASS = "ui5-tp-clock-number"; const CLOCK_NUMBER_HOVER_CLASS = "ui5-tp-clock-number-hover"; @@ -188,7 +187,6 @@ class TimePickerClock extends UI5Element { * If provided, this will replace the last item displayed. If there is only one (outer) circle, * the last item from outer circle will be replaced; if there is an inner circle too, the last * item of inner circle will be replaced. Usually, the last item '24' is replaced with '0'. - * Do not replace the last item if support2400 is set to true. * * @name sap.ui.webc.main.TimePickerClock.prototype.lastItemReplacement * @type {integer} @@ -243,30 +241,6 @@ class TimePickerClock extends UI5Element { @property({ validator: Integer, defaultValue: 1 }) valueStep!: number; - /** - * Allows to set a value of 24:00, used to indicate the end of the day. - * Works only with HH or H formats. Don't use it together with am/pm. - * - * When this property is set to true, the clock can display either 24 or 00 as last hour. - * The change between 24 and 00 (and vice versa) can be done as follows: - * - * - on a desktop device: hold down the Ctrl key (this changes 24 to 00 and vice versa), and either - * click with mouse on the 00/24 number, or navigate to this value using Arrow keys/PageUp/PageDown and press - * Space key (Space key selects the highlighted value and switch to the next available clock). - * - * - on mobile/touch device: make a long touch on 24/00 value - this action toggles the value to the opposite one. - * - * - on both device types, if there is a keyboard attached: 24 or 00 can be typed directly. - * - * Note: Don't use it together with am/pm. - * - * @name sap.ui.webc.main.TimePickerClock.prototype.support2400 - * @type {boolean} - * @defaultvalue false - */ - @property({ type: Boolean }) - support2400!: boolean; - /** * Defines the currently available Time Picker Clock items depending on Clock setup. * @@ -309,15 +283,6 @@ class TimePickerClock extends UI5Element { @property({ type: Boolean, noAttribute: true }) _cancelTouchOut!: boolean; - /** - * Visibility of '24' on Hours clock flag. - * - * @type {boolean} - * @defaultvalue false - */ - @property({ type: Boolean, noAttribute: true }) - _is24HoursVisible!: boolean; - /** * Calculated selected value of the clock during interactions. * @@ -363,15 +328,6 @@ class TimePickerClock extends UI5Element { @property({ type: Boolean, noAttribute: true }) _animationInProgress!: boolean; - /** - * Stores the ID of the long touch timeout. - * - * @type {integer} - * @defaultvalue -1 - */ - @property({ validator: Integer, defaultValue: -1, noAttribute: true }) - _longTouchId!: number; - _fnOnMouseOutUp: () => void; constructor() { @@ -416,13 +372,11 @@ class TimePickerClock extends UI5Element { let realValue = value; const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1); - if (!this.support2400) { - if (realValue === 0) { - realValue = maxValue; - } - if (realValue === maxValue && this.lastItemReplacement !== -1) { - realValue = this.lastItemReplacement; - } + if (realValue === 0) { + realValue = maxValue; + } + if (realValue === maxValue && this.lastItemReplacement !== -1) { + realValue = this.lastItemReplacement; } return realValue; @@ -485,7 +439,6 @@ class TimePickerClock extends UI5Element { "innerItem": this.showInnerCircle ? (i + this.itemMax).toString() : undefined, }); } - if (this.lastItemReplacement !== -1) { if (this.showInnerCircle && this.prependZero) { values[values.length - 1].innerItem = this.lastItemReplacement.toString().padStart(2, "0"); @@ -535,29 +488,6 @@ class TimePickerClock extends UI5Element { return this.showInnerCircle ? this.itemMax * 2 : this.itemMax; } - /** - * Returns the visibility of '24' hour value as a last clock item. - * - * @returns {boolean} Visibility of the '24' hour value - */ - _get24HoursVisible() { - return this.support2400 ? this._is24HoursVisible : false; - } - - /** - * Sets the visibility of '24' hour - * - * @param {boolean} isVisible visibility of the '24' hour item. - */ - _set24HoursVisible(isVisible: boolean) { - if (this.support2400) { - this._is24HoursVisible = isVisible; - this.lastItemReplacement = isVisible ? 24 : 0; - } else { - this._is24HoursVisible = false; - } - } - /** * Calculates the outer height of a HTML element. * @@ -570,6 +500,7 @@ class TimePickerClock extends UI5Element { } const style = window.getComputedStyle(element); + return element.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom); } @@ -583,7 +514,9 @@ class TimePickerClock extends UI5Element { if (value === this._getMaxValue() && this.lastItemReplacement !== -1) { value = this.lastItemReplacement; } + const valueString = this.showInnerCircle && value === this.lastItemReplacement && this.prependZero ? value.toString().padStart(2, "0") : value.toString(); + return `#${this._id}-${valueString}`; } @@ -651,7 +584,6 @@ class TimePickerClock extends UI5Element { const isInner = this.showInnerCircle && radius <= this._dimensionParameters.innerMax && radius > this._dimensionParameters.innerMin; const isOuterHover = radius <= this._dimensionParameters.outerMax && radius > this._dimensionParameters.outerMin; const isInnerHover = isInner; - const is24HoursVisible = this._get24HoursVisible(); let finalAngle = Math.round((angle === 0 ? 360 : angle) / angleStep) * angleStep; if (finalAngle === 0) { @@ -664,47 +596,18 @@ class TimePickerClock extends UI5Element { if (isInner) { this._selectedValue += this.itemMax; } - if (this.support2400 && !is24HoursVisible && this._selectedValue === 24) { - this._selectedValue = 0; - } } else { this._selectedValue = -1; } // hover simulation calculations - if (isInnerHover || isOuterHover) { - this._hoveredValue = this.support2400 && !is24HoursVisible && this._selectedValue === 0 ? 24 : this._selectedValue; - } else { - this._hoveredValue = -1; - } + this._hoveredValue = isInnerHover || isOuterHover ? this._selectedValue : -1; if (this._selectedValue === this._getMaxValue() && this.lastItemReplacement !== -1) { this._selectedValue = this.lastItemReplacement; } } - /** - * Clears the currently existing long touch period and starts new one if requested. - */ - _resetLongTouch() { - if (this._longTouchId !== -1) { - clearTimeout(this._longTouchId); - } - } - - /** - * Starts new long touch period. - */ - _startLongTouch() { - this._longTouchId = window.setTimeout(() => { - const value = this._selectedValue; - this._longTouchId = -1; - if (value === 0 || value === 24) { - this._toggle2400(); - } - }, LONG_TOUCH_DURATION); - } - /** * Does the animation between the old and the new value of the clock. Can be skipped with setting the second parameter to true. * @@ -756,24 +659,12 @@ class TimePickerClock extends UI5Element { * @param {number} delay delay of the single step */ _selectNextNumber(firstSelected: number, lastSelected: number, direction: number, maxValue: number, newValue: number, delay: number) { - let current; - const is24HoursVisible = this._get24HoursVisible(); + const current = firstSelected > maxValue ? firstSelected - maxValue : firstSelected; if (firstSelected === lastSelected) { this._animationInProgress = false; } - - current = firstSelected > maxValue ? firstSelected - maxValue : firstSelected; - if (this.support2400) { - if (current === 24 && !is24HoursVisible) { - current = 0; - } else if (current === 0 && is24HoursVisible) { - current = 24; - } - } - this._setSelectedValue(current); - if (firstSelected !== lastSelected) { firstSelected += direction; setTimeout(() => { @@ -797,12 +688,12 @@ class TimePickerClock extends UI5Element { * @param {boolean} increase whether to increase or decrease the value */ _modifyValue(increase: boolean) { - let selectedValue: number = this.selectedValue; - let replacementValue: number = this.lastItemReplacement; - let minValue: number = this.itemMin; - let maxValue: number = this.itemMax * (this.showInnerCircle ? 2 : 1); - let step: number = this.valueStep; - let newValue: number; + let selectedValue = this.selectedValue; + const replacementValue = this.lastItemReplacement; + const minValue = this.itemMin; + const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1); + let step = this.valueStep; + let newValue; // fix step in order to change value to the nearest possible if step is > 1 if (selectedValue % step !== 0) { @@ -810,19 +701,13 @@ class TimePickerClock extends UI5Element { step = Math.abs(selectedValue - newValue); } - if (this.support2400 && !this._get24HoursVisible()) { - minValue = 0; - maxValue = 23; - replacementValue = -1; - } - if (selectedValue === replacementValue) { selectedValue = maxValue; } if (increase) { selectedValue += step; if (selectedValue > maxValue) { - selectedValue = this.support2400 ? minValue : selectedValue - maxValue; + selectedValue -= maxValue; } } else { selectedValue -= step; @@ -850,27 +735,6 @@ class TimePickerClock extends UI5Element { this._updateSelectedValueObject(realValue); } - /** - * Toggles 24 and 0 values when a clock has support2400 property set. - * - * @param {boolean} skipSelection Whether to skip the setting of the toggled value - * @returns {this} the clock object for chaining - */ - _toggle2400(skipSelection = false) { - const bIs24HoursVisible: boolean = this._get24HoursVisible(); - const value: number = bIs24HoursVisible ? 0 : 24; - - this._cancelTouchOut = true; - this._set24HoursVisible(!bIs24HoursVisible); - this.lastItemReplacement = value; - if (!skipSelection) { - this._movSelectedValue = value; - this._setSelectedValue(value); - } - - return this; - } - /** * TouchStart/MouseDown event handler. * @@ -878,7 +742,6 @@ class TimePickerClock extends UI5Element { */ _onTouchStart(evt: Event) { this._cancelTouchOut = false; - if (this.disabled || this._mouseOrTouchDown) { return; } @@ -889,11 +752,6 @@ class TimePickerClock extends UI5Element { this._movSelectedValue = this.selectedValue; this._calculateDimensions(); this._calculatePosition(x, y); - - if (this.support2400 && evt.type === "touchstart" && (this._selectedValue === 24 || this._selectedValue === 0)) { - this._resetLongTouch(); - this._startLongTouch(); - } this._mouseOrTouchDown = true; } @@ -914,10 +772,6 @@ class TimePickerClock extends UI5Element { if (!this.disabled && this._selectedValue !== -1 && this._selectedValue !== this._movSelectedValue) { this._setSelectedValue(this._selectedValue); this._movSelectedValue = 0 + this._selectedValue; - if (this.support2400 && evt.type === "touchmove" && (this._selectedValue === 24 || this._selectedValue === 0)) { - this._resetLongTouch(); - this._startLongTouch(); - } } } else if (evt.type === "mousemove") { if (!this._dimensionParameters.radius) { @@ -947,18 +801,11 @@ class TimePickerClock extends UI5Element { if (!this._mouseOrTouchDown) { return; } - this._mouseOrTouchDown = false; evt.preventDefault(); - if (this.disabled || this._selectedValue === -1) { return; } - - if (evt.type === "touchend") { - this._resetLongTouch(); - } - if (!this._cancelTouchOut) { this._changeValueAnimation(this._selectedValue); } @@ -971,8 +818,8 @@ class TimePickerClock extends UI5Element { */ _onMouseWheel(evt: WheelEvent) { const increase = evt.detail ? (evt.detail > 0) : (evt.deltaY > 0 || evt.deltaX > 0); - evt.preventDefault(); + evt.preventDefault(); if (!this._mouseOrTouchDown) { this._modifyValue(increase); } diff --git a/packages/main/src/TimePickerInternals.ts b/packages/main/src/TimePickerInternals.ts index 23bf58c1bf32..6390627eb0d8 100644 --- a/packages/main/src/TimePickerInternals.ts +++ b/packages/main/src/TimePickerInternals.ts @@ -40,6 +40,31 @@ type TimeSelectionChangeEventDetail = { valid: boolean, } +type TimePickerEntityAttributes = { + min: number, + max: number, + step: number, +} + +type TimePickerEntityProperties = { + label: string, + entity?: string, + itemMin?: number, + itemMax?: number, + value: number, + stringValue?: string, + textValue?: string, + displayStep?: number, + lastItemReplacement?: number, + showInnerCircle?: boolean, + prependZero: boolean, + active?: boolean, + hasSeparator?: boolean, + attributes?: TimePickerEntityAttributes, +} + +const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown + /** * @class * @@ -90,7 +115,7 @@ class TimePickerInternals extends UI5Element { * HH:mm:ss -> 11:42:35 * hh:mm:ss a -> 2:23:15 PM * mm:ss -> 12:04 (only minutes and seconds) - * + * @type {string} * @name sap.ui.webc.main.TimePickerInternals.prototype.formatPattern * @defaultvalue "" @@ -99,26 +124,9 @@ class TimePickerInternals extends UI5Element { @property() formatPattern!: string; - /** - * Determines the minutes step. The minutes clock is populated only by multiples of the step. - * @type {integer} - * @name sap.ui.webc.main.TimePickerInternals.prototype.secondsStep - * @public - */ - @property({ validator: Integer, defaultValue: 1 }) - minutesStep!: number; - - /** - * Determines the seconds step. The seconds clock is populated only by multiples of the step. - * @type {integer} - * @name sap.ui.webc.main.TimePickerInternals.prototype.secondsStep - * @public - */ - @property({ validator: Integer, defaultValue: 1 }) - secondsStep!: number; - /** * The index of the active Clock/TogleSpinButton. + * * @type {integer} * @defaultvalue 0 * @private @@ -135,6 +143,14 @@ class TimePickerInternals extends UI5Element { @property({ type: CalendarType }) _calendarType!: CalendarType; + /** + * Contains currently available Time Picker components depending on time format. + * + * @type {Array} + */ + @property({ type: Object, multiple: true }) + _entities!: Array; + /** * Contains component-to-index map. * @@ -154,31 +170,28 @@ class TimePickerInternals extends UI5Element { _periods!: Array; /** - * Contains list of separators between the buttons. + * Id of the cooldown interval * - * @type {Array} - * @private + * @type {ReturnType} */ - @property({ multiple: true }) - _separators!: Array; + @property({ validator: Integer, noAttribute: true }) + _typeCooldownId?: ReturnType; /** - * Contains separator before AM/PM (if there is any). + * Exact match number buffer * - * @type {string} - * @private + * @type {integer} */ - @property({ defaultValue: "", noAttribute: true }) - _amPmSeparator!: string; + @property({ validator: Integer, noAttribute: true }) + _exactMatch?: number; /** - * Contains separator after all buttons (if there is any). + * Buffer for entered by keyboard numbers * * @type {string} - * @private */ @property({ defaultValue: "", noAttribute: true }) - _lastSeparator!: string; + _keyboardBuffer!: string; static i18nBundle: I18nBundle; @@ -240,14 +253,6 @@ class TimePickerInternals extends UI5Element { return dayPeriodsAbbrev.map((x: string) => x.toUpperCase()); } - get _showAmPmButton(): boolean { - return true; - } - - get _pmPressed(): boolean { - return false; - } - get _hours() { let hours; const dateValue = this.validDateValue; @@ -275,12 +280,12 @@ class TimePickerInternals extends UI5Element { } get _period() { + let period; + const dateValue = this.validDateValue; + if (!this._hoursConfiguration.isTwelveHoursFormat) { return undefined; } - - let period; - const dateValue = this.validDateValue; if (this._hoursConfiguration.minHour === 1) { period = dateValue.getHours() >= this._hoursConfiguration.maxHour ? this.periodsArray[1] : this.periodsArray[0]; } else { @@ -293,8 +298,8 @@ class TimePickerInternals extends UI5Element { const pattern = this.formatPattern; const hasHours = !!pattern.match(/H/i); const fallback = !pattern || !hasHours; - const localeData = getCachedLocaleDataInstance(getLocale()); + return fallback ? localeData.getCombinedDateTimePattern("medium", "medium", undefined) : pattern; } @@ -318,13 +323,9 @@ class TimePickerInternals extends UI5Element { return TimePickerInternals.i18nBundle.getText(TIMEPICKER_CLOCK_DIAL_LABEL); } - get _nextSeparator() { - const sep = this._separators.shift() || ""; - return sep; - } - setValue(date: Date) { const value = this.formatValue(date); + if (this.isValid(value)) { this.value = this.normalizeValue(value); this.fireEvent("change", { value: this.value, valid: true }); @@ -339,7 +340,6 @@ class TimePickerInternals extends UI5Element { if (value === "") { return value; } - return this.getFormat().format(this.getFormat().parse(value, undefined as unknown as boolean, undefined as unknown as boolean)); } @@ -356,7 +356,6 @@ class TimePickerInternals extends UI5Element { style: this._formatPattern, }); } - return dateFormat; } @@ -366,54 +365,94 @@ class TimePickerInternals extends UI5Element { _componentKey(name: string) { type ComponentKey = keyof typeof this._componentMap; - const key = name as ComponentKey; - return key; + return name as ComponentKey; } - _getSeparators() { - // @ts-ignore aFormatArray is a private API of DateFormat - const formatArray = this.getFormat().aFormatArray; - let previousWasEntity = false; - let index; + _indexFromName(name: string) { + return this._componentMap[this._componentKey(name)]; + } - this._separators = []; + /** + * Returns name of the clock or button from the id of the event target. + * + * @returns {string | undefined} name of the clock/button + */ + _getNameFromId(id: string) { + const parts = id.split("_"); - if (!formatArray.length) { - return; - } + return parts.length ? parts[parts.length - 1] : undefined; + } - if (formatArray[0].type !== "text") { - this._separators.push(""); - } + /** + * Returns index of the clock or button from the id of the event target. + * + * @returns {number} index of the clock/button + */ + _getIndexFromId(id: string) { + const name = this._getNameFromId(id); - for (index = 0; index < formatArray.length; index++) { - if (formatArray[index].type !== "text") { - if (previousWasEntity) { - // there was previous non-separator entity, and this one is the same too, so add empty separator - this._separators.push(""); - } else { - // this is non-separator entity, set the entity flag - previousWasEntity = true; - } - } else { - // add separator and clear non-separator entity flag - this._separators.push(formatArray[index].value as string); - previousWasEntity = false; - } - } + return name ? this._indexFromName(name) : 0; + } - // push one more empty separator for the last entity - if (formatArray[index - 1].type !== "text") { - this._separators.push(""); + /** + * Changes hours value. + * + * @param {hours} number new hours value + */ + _hoursChange(hours: number) { + if (this._hoursConfiguration.isTwelveHoursFormat) { + hours = this._shiftHours(hours); } + + const date = this.validDateValue; + + date.setHours(hours); + this.setValue(date); + } + + /** + * Changes minutes value. + * + * @param {minutes} number new minutes value + */ + _minutesChange(minutes: number) { + const date = this.validDateValue; + + date.setMinutes(minutes); + this.setValue(date); + } + + /** + * Changes seconds value. + * + * @param {seconds} number new seconds value + */ + _secondsChange(seconds: number) { + const date = this.validDateValue; + + date.setSeconds(seconds); + this.setValue(date); } _buttonAmPm() { return this._hasPeriodsComponent ? this.shadowRoot?.querySelector(`#${this._id}_AmPm`) : undefined; } + _createPeriodComponent() { + if (this._hasPeriodsComponent) { + // add period item + this.periodsArray.forEach(item => { + this._periods.push({ + "label": item, + "pressed": this._period === item, + }); + }); + } + } + _periodChange(evt: PointerEvent) { const periodItem = evt.target; + if (periodItem) { const period = (periodItem as HTMLElement).textContent; this._calculatePeriodChange(period as string); @@ -422,6 +461,7 @@ class TimePickerInternals extends UI5Element { _calculatePeriodChange(period: string) { const date = this.validDateValue; + if (period === this._periods[0].label && date.getHours() >= 12) { date.setHours(date.getHours() - 12); } if (period === this._periods[1].label && date.getHours() < 12) { @@ -429,6 +469,60 @@ class TimePickerInternals extends UI5Element { } this.setValue(date); } + + /** + * Shifts hours value with +/- 12 depending on hour value and day period. + * + * @param {number} hours current hours + * @returns {number} shifted hours + */ + _shiftHours(hours: number) { + if (this._period === this.periodsArray[0]) { // AM + hours = hours === 12 ? 0 : hours; + } else if (this._period === this.periodsArray[1]) { // PM + hours = hours === 12 ? hours : hours + 12; + } + return hours; + } + + /** + * Clears the currently existing cooldown period and starts new one if requested. + * + * @param {boolean} startNewCooldown whether to start new cooldown period after clearing previous one + */ + _resetCooldown(startNewCooldown: boolean) { + if (!TYPE_COOLDOWN_DELAY) { + return; // if delay is 0, cooldown is disabled + } + if (this._typeCooldownId) { + clearTimeout(this._typeCooldownId); + } + if (startNewCooldown) { + this._startCooldown(); + } + } + + /** + * Starts new cooldown period. + */ + _startCooldown() { + if (!TYPE_COOLDOWN_DELAY) { + return; // if delay is 0, cooldown is disabled + } + this._typeCooldownId = setTimeout(() => { + this._keyboardBuffer = ""; + this._typeCooldownId = undefined; + if (this._exactMatch) { + this._setExactMatch(); + this._exactMatch = undefined; + } + }, TYPE_COOLDOWN_DELAY); + } + + /** + * Sets the exact match value. Override if necessary. + */ + _setExactMatch() {} } TimePickerInternals.define(); diff --git a/packages/main/src/TimePickerPopover.hbs b/packages/main/src/TimePickerPopover.hbs index 03c3e8e1f808..2407c09ddeeb 100644 --- a/packages/main/src/TimePickerPopover.hbs +++ b/packages/main/src/TimePickerPopover.hbs @@ -6,6 +6,7 @@ allow-target-overlap _hide-header hide-arrow + @ui5-after-open="{{onResponsivePopoverAfterOpen}}" @ui5-after-close="{{onResponsivePopoverAfterClose}}" @wheel="{{_handleWheel}}" @keydown="{{_onkeydown}}" @@ -15,8 +16,6 @@ id="{{_id}}-time-sel" value="{{_timeSelectionValue}}" format-pattern="{{_formatPattern}}" - .minutesStep="{{minutesStep}}" - .secondsStep="{{secondsStep}}" @ui5-change="{{onTimeSelectionChange}}" @close-picker="{{submitPickers}}" > @@ -26,3 +25,34 @@ {{cancelButtonLabel}}
+ +{{#if _isPhone}} + +
+ +
+ +
+ {{submitButtonLabel}} + {{cancelButtonLabel}} +
+ +{{/if}} \ No newline at end of file diff --git a/packages/main/src/TimeSelectionClocks.hbs b/packages/main/src/TimeSelectionClocks.hbs index 8e6942a853ef..f17145e08273 100644 --- a/packages/main/src/TimeSelectionClocks.hbs +++ b/packages/main/src/TimeSelectionClocks.hbs @@ -10,22 +10,24 @@
- {{#each _buttons}} - {{this.separator}} + {{#each _entities}} + {{#if this.hasSeparator}} + : + {{/if}} {{this.valueString}} + >{{this.stringValue}} {{/each}} {{#if _periods.length}} - {{_amPmSeparator}} + {{/if}} - {{_lastSeparator}}
- {{#each _clocks}} + {{#each _entities}} diff --git a/packages/main/src/TimeSelectionClocks.ts b/packages/main/src/TimeSelectionClocks.ts index 7d730a9afbf0..94ca963443df 100644 --- a/packages/main/src/TimeSelectionClocks.ts +++ b/packages/main/src/TimeSelectionClocks.ts @@ -1,9 +1,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; import property from "@ui5/webcomponents-base/dist/decorators/property.js"; import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; - import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling -import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; import { isDown, isUp, @@ -26,8 +24,6 @@ import TimePickerInternals from "./TimePickerInternals.js"; import TimePickerClock from "./TimePickerClock.js"; import ToggleSpinButton from "./ToggleSpinButton.js"; import SegmentedButton from "./SegmentedButton.js"; -import SegmentedButtonItem from "./SegmentedButtonItem.js"; - import type { TimePickerClockChangeEventDetail } from "./TimePickerClock.js"; // Template @@ -36,37 +32,6 @@ import TimeSelectionClocksTemplate from "./generated/templates/TimeSelectionCloc // Styles import TimeSelectionClocksCss from "./generated/themes/TimeSelectionClocks.css.js"; -type TimePickerClockProperties = { - id: string, - label: string, - clock: string, - itemMin: number, - itemMax: number, - selectedValue: number, - displayStep: number, - valueStep: number, - lastItemReplacement: number, - showInnerCircle: boolean, - prependZero: boolean, - min: number, - max: number, - active: boolean, -} - -type ToggleSpinButtonProperties = { - id: string, - valueMin: number, - valueMax: number, - valueNow: number, - valueString: string, - valueText: string, - accessibleName: string, - pressed: boolean, - separator: string, -} - -const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown - /** * @class * @@ -98,57 +63,16 @@ const TYPE_COOLDOWN_DELAY = 1000; // Cooldown delay; 0 = disabled cooldown TimePickerClock, ToggleSpinButton, SegmentedButton, - SegmentedButtonItem, ], }) class TimeSelectionClocks extends TimePickerInternals { - /** - * Contains currently available Time Picker Clock components depending on time format. - * - * @type {Array} - */ - @property({ type: Object, multiple: true }) - _clocks!: Array; - - /** - * Contains currently available Button components depending on time format. - * - * @type {Array} - */ - @property({ type: Object, multiple: true }) - _buttons!: Array; - /** * Flag for pressed Space key */ @property({ type: Boolean, noAttribute: true }) _spacePressed!: boolean; - /** - * Buffer for entered by keyboard numbers - * - * @type {string} - */ - @property({ defaultValue: "", noAttribute: true }) - _kbdBuffer!: string; - - /** - * Id of the cooldown interval - * - * @type {ReturnType} - */ - @property({ validator: Integer, noAttribute: true }) - _typeCooldownId?: ReturnType; - - /** - * Exact match number buffer - * - * @type {integer} - */ - @property({ validator: Integer, noAttribute: true }) - _exactMatch?: number; - onBeforeRendering() { this._createComponents(); } @@ -160,12 +84,9 @@ class TimeSelectionClocks extends TimePickerInternals { * @returns { ToggleSpinButton | undefined} component (if exists) or undefined */ _buttonComponent(indexOrName: number | string) { - if (typeof indexOrName === "string") { - const key = this._componentKey(indexOrName); - const index = this._componentMap[key]; - return index !== undefined ? this.shadowRoot?.querySelector(`#${this._buttons[index].id}`) : undefined; - } - return this.shadowRoot?.querySelector(`#${this._buttons[indexOrName].id}`); + const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; + const entity = this._entities[index].entity; + return entity ? this.shadowRoot?.querySelector(`#${this._id}_button_${entity}`) : undefined; } /** @@ -175,36 +96,9 @@ class TimeSelectionClocks extends TimePickerInternals { * @returns { TimePickerClock | undefined} component (if exists) or undefined */ _clockComponent(indexOrName: number | string) { - if (typeof indexOrName === "string") { - const key = this._componentKey(indexOrName); - const index = this._componentMap[key]; - return index !== undefined ? this.shadowRoot?.querySelector(`#${this._clocks[index].id}`) : undefined; - } - return this.shadowRoot?.querySelector(`#${this._clocks[indexOrName].id}`); - } - - /** - * Returns name of the clock or button from the id of the event target. - * - * @returns {string | undefined} name of the clock/button - */ - _getNameFromId(id: string) { - const parts = id.split("_"); - return parts.length > 0 ? parts[parts.length - 1] : undefined; - } - - /** - * Returns index of the clock or button from the id of the event target. - * - * @returns {number} index of the clock/button - */ - _getIndexFromId(id: string) { - const name = this._getNameFromId(id); - if (name) { - const key = this._componentKey(name); - return this._componentMap[key]; - } - return 0; + const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; + const entity = this._entities[index].entity; + return entity ? this.shadowRoot?.querySelector(`#${this._id}_clock_${entity}`) : undefined; } /** @@ -227,7 +121,9 @@ class TimeSelectionClocks extends TimePickerInternals { _buttonFocusIn(evt: Event) { const target = evt.target as HTMLElement; const name = this._getNameFromId(target.id); - name && this._switchTo(name); + if (name) { + this._switchTo(name); + } } /** @@ -256,7 +152,7 @@ class TimeSelectionClocks extends TimePickerInternals { } else if (isSpace(evt) && toggleSpinButtonTarget && !this._spacePressed) { evt.preventDefault(); this._spacePressed = true; - this._kbdBuffer = ""; + this._keyboardBuffer = ""; this._resetCooldown(true); this._switchNextClock(true); } else if ((isUp(evt) || isDown(evt)) && !isUpAlt(evt) && !isDownAlt(evt)) { @@ -300,11 +196,11 @@ class TimeSelectionClocks extends TimePickerInternals { evt.preventDefault(); } else if (isColon(evt)) { // Colon (:) - Switch to next clock - this._kbdBuffer = ""; + this._keyboardBuffer = ""; this._exactMatch = undefined; this._resetCooldown(true); this._switchNextClock(true); - } else if (isNumber(evt) && this._clocks[this._activeIndex]) { + } else if (isNumber(evt) && this._entities[this._activeIndex]) { // Direct number entry this._exactMatch = undefined; this._resetCooldown(true); @@ -319,110 +215,55 @@ class TimeSelectionClocks extends TimePickerInternals { */ _numbersInput(evt: KeyboardEvent) { const char = evt.key; - const bufferStr = this._kbdBuffer + char; + const bufferStr = this._keyboardBuffer + char; const bufferNum = parseInt(bufferStr); - let indexStr = ""; - let indexNum = 0; - let matching = 0; - let valueMatching = -1; + const entity = this._entities[this._activeIndex]; let activeClock = this._clockComponent(this._activeIndex); - if (this._clocks[this._activeIndex].valueStep === 1) { - // when the step=1, there is "direct" approach - while typing, the exact value is selected - if (bufferNum > this._clocks[this._activeIndex].max) { - // value accumulated in the buffer (old entry + new entry) is greater than the clock maximum value, - // so assign old entry to the current clock and then switch to the next clock, and add new entry as an old value - activeClock && activeClock._setSelectedValue(parseInt(this._kbdBuffer)); - this._switchNextClock(); - this._kbdBuffer = char; - activeClock = this._clockComponent(this._activeIndex); - activeClock && activeClock._setSelectedValue(parseInt(char)); - this._resetCooldown(true); - } else { - // value is less than clock's max value, so add new entry to the buffer - this._kbdBuffer = bufferStr; - activeClock && activeClock._setSelectedValue(parseInt(this._kbdBuffer)); - if (this._kbdBuffer.length === 2 || parseInt(`${this._kbdBuffer}0`) > this._clocks[this._activeIndex].max) { - // if buffer length is 2, or buffer value + one more (any) number is greater than clock's max value - // there is no place for more entry - just set buffer as a value, and switch to the next clock - this._resetCooldown(this._kbdBuffer.length !== 2); - this._kbdBuffer = ""; - this._switchNextClock(); - } - } + if (!entity || !entity.attributes) { + return; + } + if (bufferNum > entity.attributes.max) { + // value accumulated in the buffer (old entry + new entry) is greater than the clock maximum value, + // so assign old entry to the current clock and then switch to the next clock, and add new entry as an old value + activeClock && activeClock._setSelectedValue(parseInt(this._keyboardBuffer)); + this._switchNextClock(); + this._keyboardBuffer = char; + activeClock = this._clockComponent(this._activeIndex); + activeClock && activeClock._setSelectedValue(parseInt(char)); + this._resetCooldown(true); } else { - // when the step is > 1, while typing, the exact match is searched, otherwise the first value that starts with entered value, is being selected - // find matches - for (indexNum = this._clocks[this._activeIndex].min; indexNum <= this._clocks[this._activeIndex].max; indexNum++) { - if (indexNum % this._clocks[this._activeIndex].valueStep === 0) { - indexStr = indexNum.toString(); - if (bufferStr === indexStr.substr(0, bufferStr.length) || bufferNum === indexNum) { - matching++; - valueMatching = matching === 1 ? indexNum : -1; - if (bufferNum === indexNum) { - this._exactMatch = indexNum; - } - } - } - } - if (matching === 1) { - // only one item is matching - activeClock && activeClock._setSelectedValue(valueMatching); - this._exactMatch = undefined; - this._kbdBuffer = ""; - this._resetCooldown(true); + // value is less than clock's max value, so add new entry to the buffer + this._keyboardBuffer = bufferStr; + activeClock && activeClock._setSelectedValue(parseInt(this._keyboardBuffer)); + if (this._keyboardBuffer.length === 2 || parseInt(`${this._keyboardBuffer}0`) > entity.attributes.max) { + // if buffer length is 2, or buffer value + one more (any) number is greater than clock's max value + // there is no place for more entry - just set buffer as a value, and switch to the next clock + this._resetCooldown(this._keyboardBuffer.length !== 2); + this._keyboardBuffer = ""; this._switchNextClock(); - } else if (bufferStr.length === 2) { - // no matches, but 2 numbers are entered, start again - this._exactMatch = undefined; - this._kbdBuffer = ""; - this._resetCooldown(true); - } else { - // no match, add last number to buffer - this._kbdBuffer = bufferStr; } } } /** - * Clears the currently existing cooldown period and starts new one if requested. - * - * @param {boolean} startNewCooldown whether to start new cooldown period after clearing previous one + * Focuses the first available button. */ - _resetCooldown(startNewCooldown: boolean) { - if (!TYPE_COOLDOWN_DELAY) { - return; // if delay is 0, cooldown is disabled - } - - if (this._typeCooldownId) { - clearTimeout(this._typeCooldownId); - } - if (startNewCooldown) { - this._startCooldown(); - } + _focusFirstButton() { + this._activeIndex = 0; + this._buttonComponent(0)!.focus(); } /** - * Starts new cooldown period. + * Sets the exact match value. Must be overriden. */ - _startCooldown() { - if (!TYPE_COOLDOWN_DELAY) { - return; // if delay is 0, cooldown is disabled - } - - this._typeCooldownId = setTimeout(() => { - this._kbdBuffer = ""; - this._typeCooldownId = undefined; - if (this._exactMatch) { - const clock = this._clockComponent(this._activeIndex); - clock && clock._setSelectedValue(this._exactMatch); - this._exactMatch = undefined; - } - }, TYPE_COOLDOWN_DELAY); + _setExactMatch() { + const clock = this._clockComponent(this._activeIndex); + clock && this._exactMatch !== undefined && clock._setSelectedValue(this._exactMatch); } /** - * Createss clock and button components according to the display format pattern. + * Creates clock and button components according to the display format pattern. */ _createComponents() { const time = { @@ -431,128 +272,87 @@ class TimeSelectionClocks extends TimePickerInternals { seconds: parseInt(this._seconds), }; - this._getSeparators(); - - this._clocks = []; - this._buttons = []; + this._entities = []; this._periods = []; - + this._componentMap = { + hours: -1, + minutes: -1, + seconds: -1, + }; if (this._hasHoursComponent) { // add Hours clock - this._componentMap.hours = this._clocks.length; - this._clocks.push({ - "id": `${this._id}_clock_hours`, + this._componentMap.hours = this._entities.length; + this._entities.push({ "label": this.hoursLabel, - "clock": "hours", + "entity": "hours", "itemMin": 1, "itemMax": 12, - "selectedValue": time.hours, + "value": time.hours, + "stringValue": this._hours, + "textValue": `${time.hours} ${this.hoursLabel}`, "displayStep": 1, - "valueStep": 1, "lastItemReplacement": this._hoursConfiguration.isTwelveHoursFormat ? -1 : 0, "showInnerCircle": !this._hoursConfiguration.isTwelveHoursFormat, "prependZero": this._zeroPaddedHours, - "min": this._hoursConfiguration.minHour, - "max": this._hoursConfiguration.maxHour, + "hasSeparator": this._entities.length > 0, "active": false, - }); - // add Hours button - this._buttons.push({ - "id": `${this._id}_button_hours`, - "valueMin": this._hoursConfiguration.minHour, - "valueMax": this._hoursConfiguration.maxHour, - "valueNow": time.hours, - "valueString": this._hours, - "valueText": `${time.hours} ${this.hoursLabel}`, - "accessibleName": this.hoursLabel, - "pressed": false, - "separator": this._nextSeparator, + "attributes": { + "min": this._hoursConfiguration.minHour, + "max": this._hoursConfiguration.maxHour, + "step": 1, + }, }); } - if (this._hasMinutesComponent) { // add Minutes clock - this._componentMap.minutes = this._clocks.length; - this._clocks.push({ - "id": `${this._id}_clock_minutes`, + this._componentMap.minutes = this._entities.length; + this._entities.push({ "label": this.minutesLabel, - "clock": "minutes", + "entity": "minutes", "itemMin": 1, "itemMax": 60, - "selectedValue": time.minutes, + "value": time.minutes, + "stringValue": this._minutes, + "textValue": `${time.minutes} ${this.minutesLabel}`, // possible concatenation "displayStep": 5, - "valueStep": this.minutesStep, "lastItemReplacement": 0, "showInnerCircle": false, "prependZero": false, - "min": 0, - "max": 59, + "hasSeparator": this._entities.length > 0, "active": false, - }); - - // add Minutes button - this._buttons.push({ - "id": `${this._id}_button_minutes`, - "valueMin": 0, - "valueMax": 59, - "valueNow": time.minutes, - "valueString": this._minutes, - "valueText": `${time.minutes} ${this.minutesLabel}`, - "accessibleName": this.minutesLabel, - "pressed": false, - "separator": this._nextSeparator, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, }); } - if (this._hasSecondsComponent) { // add Seconds clock - this._componentMap.seconds = this._clocks.length; - this._clocks.push({ - "id": `${this._id}_clock_seconds`, + this._componentMap.seconds = this._entities.length; + this._entities.push({ "label": this.secondsLabel, - "clock": "seconds", + "entity": "seconds", "itemMin": 1, "itemMax": 60, - "selectedValue": time.seconds, + "value": time.seconds, + "stringValue": this._seconds, + "textValue": `${time.seconds} ${this.secondsLabel}`, // possible concatenation "displayStep": 5, - "valueStep": this.secondsStep, "lastItemReplacement": 0, "showInnerCircle": false, "prependZero": false, - "min": 0, - "max": 59, + "hasSeparator": this._entities.length > 0, "active": false, - }); - - // add Seconds button - this._buttons.push({ - "id": `${this._id}_button_seconds`, - "valueMin": 0, - "valueMax": 59, - "valueNow": time.seconds, - "valueString": this._seconds, - "valueText": `${time.seconds} ${this.secondsLabel}`, - "accessibleName": this.secondsLabel, - "pressed": false, - "separator": this._nextSeparator, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, }); } - - if (this._hasPeriodsComponent) { - // add period item - this.periodsArray.forEach(item => { - this._periods.push({ - "label": item, - "pressed": this._period === item, - }); - }); - this._amPmSeparator = this._nextSeparator; - } - - this._lastSeparator = this._nextSeparator; - - this._clocks[this._activeIndex].active = true; - this._buttons[this._activeIndex].pressed = true; + this._entities[this._activeIndex].active = true; + this._createPeriodComponent(); } /** @@ -575,12 +375,10 @@ class TimeSelectionClocks extends TimePickerInternals { _switchClock(clockIndex: number) { const newButton = this._buttonComponent(clockIndex); - if (this._clocks.length > 0 && clockIndex < this._clocks.length && newButton) { - this._clocks[this._activeIndex].active = false; - this._buttons[this._activeIndex].pressed = false; + if (this._entities.length && clockIndex < this._entities.length && newButton) { + this._entities[this._activeIndex].active = false; this._activeIndex = clockIndex; - this._clocks[this._activeIndex].active = true; - this._buttons[this._activeIndex].pressed = true; + this._entities[this._activeIndex].active = true; newButton.focus(); } } @@ -593,19 +391,19 @@ class TimeSelectionClocks extends TimePickerInternals { _switchNextClock(wrapAround = false) { let activeIndex = this._activeIndex; const startActiveIndex = activeIndex; - const clocksCount = this._clocks.length; const activeClock = this._clockComponent(activeIndex); do { activeIndex++; - if (activeIndex >= clocksCount) { - activeIndex = wrapAround ? 0 : clocksCount - 1; + if (activeIndex >= this._entities.length) { + activeIndex = wrapAround ? 0 : this._entities.length - 1; } // false-positive finding of no-unmodified-loop-condition rule // eslint-disable-next-line no-unmodified-loop-condition - } while (activeClock && activeClock.disabled && activeIndex !== startActiveIndex && (wrapAround || activeIndex < clocksCount - 1)); + } while (activeClock && activeClock.disabled && activeIndex !== startActiveIndex && (wrapAround || activeIndex < this._entities.length - 1)); const newClock = this._clockComponent(activeIndex); + if (activeIndex !== startActiveIndex && newClock && !newClock.disabled) { this._switchClock(activeIndex); } @@ -625,88 +423,28 @@ class TimeSelectionClocks extends TimePickerInternals { if (!button) { return; } - - this._buttons[index].valueString = stringValue; - this._buttons[index].valueNow = value; - this._buttons[index].valueText = `${value} ${this._buttons[index].accessibleName}`; - this._buttons = JSON.parse(JSON.stringify(this._buttons)); - + this._entities[index].stringValue = stringValue; + this._entities[index].value = value; + this._entities = JSON.parse(JSON.stringify(this._entities)); switch (index) { case this._componentMap.hours: - this._hoursChange(evt); + this._hoursChange(value); break; case this._componentMap.minutes: - this._minutesChange(evt); + this._minutesChange(value); break; case this._componentMap.seconds: - this._secondsChange(evt); + this._secondsChange(value); break; } - if (evt.detail.finalChange) { - if (this._activeIndex < this._clocks.length - 1) { + if (this._activeIndex < this._entities.length - 1) { this._switchNextClock(); } else { button.focus(); } } } - - /** - * Shifts hours value with +/- 12 depending on hour value and day period. - * - * @param {number} hours current hours - * @returns {number} shifted hours - */ - _shiftHours(hours: number) { - if (this._period === this.periodsArray[0]) { // AM - hours = hours === 12 ? 0 : hours; - } else if (this._period === this.periodsArray[1]) { // PM - hours = hours === 12 ? hours : hours + 12; - } - return hours; - } - - /** - * Hours 'change' event handler. - * - * @param {event} evt Event object - */ - _hoursChange(evt: CustomEvent) { - let hours = evt.detail.value; - - if (this._hoursConfiguration.isTwelveHoursFormat) { - hours = this._shiftHours(hours); - } - - const date = this.validDateValue; - date.setHours(hours); - this.setValue(date); - } - - /** - * Minutes 'change' event handler. - * - * @param {event} evt Event object - */ - _minutesChange(evt: CustomEvent) { - const minutes = evt.detail.value; - const date = this.validDateValue; - date.setMinutes(minutes); - this.setValue(date); - } - - /** - * Seconds 'change' event handler. - * - * @param {event} evt Event object - */ - _secondsChange(evt: CustomEvent) { - const seconds = evt.detail.value; - const date = this.validDateValue; - date.setSeconds(seconds); - this.setValue(date); - } } TimeSelectionClocks.define(); diff --git a/packages/main/src/TimeSelectionInputs.hbs b/packages/main/src/TimeSelectionInputs.hbs new file mode 100644 index 000000000000..52693d720604 --- /dev/null +++ b/packages/main/src/TimeSelectionInputs.hbs @@ -0,0 +1,41 @@ +
+ {{#each _entities}} + {{#if this.hasSeparator}} + : + {{/if}} + + {{/each}} + {{#if _periods.length}} + + + {{#each _periods}} + + {{this.label}} + + {{/each}} + + {{/if}} +
\ No newline at end of file diff --git a/packages/main/src/TimeSelectionInputs.ts b/packages/main/src/TimeSelectionInputs.ts new file mode 100644 index 000000000000..81d3c73e90fe --- /dev/null +++ b/packages/main/src/TimeSelectionInputs.ts @@ -0,0 +1,352 @@ +import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js"; +import property from "@ui5/webcomponents-base/dist/decorators/property.js"; +import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; + +import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling +import Integer from "@ui5/webcomponents-base/dist/types/Integer.js"; +import { + isEnter, + isNumber, +} from "@ui5/webcomponents-base/dist/Keys.js"; +import TimePickerInternals from "./TimePickerInternals.js"; +import Input from "./Input.js"; +import SegmentedButton from "./SegmentedButton.js"; + +import InputType from "./types/InputType.js"; + +import { + TIMEPICKER_INPUTS_ENTER_HOURS, + TIMEPICKER_INPUTS_ENTER_MINUTES, + TIMEPICKER_INPUTS_ENTER_SECONDS, +} from "./generated/i18n/i18n-defaults.js"; + +// Template +import TimeSelectionInputsTemplate from "./generated/templates/TimeSelectionInputsTemplate.lit.js"; + +// Styles +import TimeSelectionInputsCss from "./generated/themes/TimeSelectionInputs.css.js"; + +/** + * @class + * + *

Overview

+ * + * ui5-time-selection-inputs displays a popover with ui5-input components of type="number" and an + * optional a AM/PM ui5-segmented-button according to the display format given to the ui5-time-picker. + * Using of numeric input components enables display of mobile devices' native numeric keyboard, which speeds up entering of the time. + * The popup appears only on mobile devices when there is a tap on the ui5-time-picker input. + * + * This component should not be used separately. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webc.main.TimeSelectionInputs + * @extends sap.ui.webc.main.TimePickerInternals + * @abstract + * @tagname ui5-time-selection-inputs + * @since 1.18.0 + * @private + */ +@customElement({ + tag: "ui5-time-selection-inputs", + renderer: litRender, + styles: TimeSelectionInputsCss, + template: TimeSelectionInputsTemplate, + dependencies: [ + Input, + SegmentedButton, + ], +}) + +class TimeSelectionInputs extends TimePickerInternals { + @property({ validator: Integer, defaultValue: -1 }) + _editedInput!: number; + + @property() + _editedInputValue!: string; + + get enterHoursLabel() { + return TimePickerInternals.i18nBundle.getText(TIMEPICKER_INPUTS_ENTER_HOURS); + } + + get enterMinutesLabel() { + return TimePickerInternals.i18nBundle.getText(TIMEPICKER_INPUTS_ENTER_MINUTES); + } + + get enterSecondsLabel() { + return TimePickerInternals.i18nBundle.getText(TIMEPICKER_INPUTS_ENTER_SECONDS); + } + + get _numberType() { + return InputType.Number; + } + + get _isHoursInput() { + const key = this._componentKey("hours"); + return this._componentMap[key] === this._activeIndex; + } + + get _is24HoursFormat() { + return this.formatPattern.indexOf("HH") !== -1 || this.formatPattern.indexOf("H") !== -1; + } + + onBeforeRendering() { + this._createComponents(); + } + + _addNumericAttributes() { + this._entities.forEach((item, index) => { + const input = this._inputComponent(index); + if (input) { + const innerInput = this._innerInput(input)!; + innerInput.setAttribute("autocomplete", "off"); + innerInput.setAttribute("pattern", "[0-9]*"); + innerInput.setAttribute("inputmode", "numeric"); + } + }); + } + + /** + * Returns Input component by index or name. + * + * @param {number | string} indexOrName the index or name of the component + * @returns { Input | undefined} component (if exists) or undefined + */ + _inputComponent(indexOrName: number | string) { + const index = typeof indexOrName === "string" ? this._indexFromName(indexOrName) : indexOrName; + const entity = this._entities[index].entity; + return entity ? this.shadowRoot?.querySelector(`#${this._id}_input_${entity}`) : undefined; + } + + /** + * Returns the inner input element DOM reference. + * + * @param { Input } input the Input component + * @returns { HTMLElement } inner input element + */ + _innerInput(input: Input) { + return input && input.getInputDOMRefSync(); + } + + /** + * Creates clock and button components according to the display format pattern. + */ + _createComponents() { + let value; + + this._entities = []; + this._periods = []; + this._componentMap = { + hours: -1, + minutes: -1, + seconds: -1, + }; + if (this._hasHoursComponent) { + // add Hours input + this._componentMap.hours = this._entities.length; + value = parseInt(this._hours); + this._entities.push({ + "entity": "hours", + "label": this.enterHoursLabel, + "value": value, + "stringValue": this._editedInput === this._entities.length ? this._editedInputValue : this._formatNumberToString(value, this._zeroPaddedHours), + "hasSeparator": this._entities.length > 0, + "prependZero": this._zeroPaddedHours, + "attributes": { + "min": this._hoursConfiguration.minHour, + "max": this._hoursConfiguration.maxHour, + "step": 1, + }, + }); + } + if (this._hasMinutesComponent) { + // add Minutes clock + this._componentMap.minutes = this._entities.length; + value = parseInt(this._minutes); + this._entities.push({ + "entity": "minutes", + "label": this.enterMinutesLabel, + "value": value, + "stringValue": this._editedInput === this._entities.length ? this._editedInputValue : this._formatNumberToString(value, true), + "hasSeparator": this._entities.length > 0, + "prependZero": true, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, + }); + } + if (this._hasSecondsComponent) { + // add Seconds clock + this._componentMap.seconds = this._entities.length; + value = parseInt(this._seconds); + this._entities.push({ + "entity": "seconds", + "label": this.enterSecondsLabel, + "value": value, + "stringValue": this._editedInput === this._entities.length ? this._editedInputValue : this._formatNumberToString(value, true), + "hasSeparator": this._entities.length > 0, + "prependZero": true, + "attributes": { + "min": 0, + "max": 59, + "step": 1, + }, + }); + } + this._createPeriodComponent(); + } + + /** + * Switches to the specific input. + * + * @param {number} index the index (in _entities array) of the input + * @private + */ + _switchInput(index: number) { + if (index >= this._entities.length) { + index = 0; + } + this._inputComponent(index)!.focus(); + } + + /** + * Switches to the next input that can de focused. + * + * @param {boolean} wrapAround whether to start with first clock after reaching the last one, or not + * @private + */ + _switchNextInput(wrapAround = false) { + let activeInput = this._activeIndex; + const startActiveInput = activeInput; + + if (!this._entities.length) { + return; + } + do { + activeInput++; + if (activeInput >= this._entities.length) { + activeInput = wrapAround ? 0 : this._entities.length - 1; + } + // false-positive finding of no-unmodified-loop-condition rule + // eslint-disable-next-line no-unmodified-loop-condition + } while (this._inputComponent(activeInput)!.disabled && activeInput !== startActiveInput && (wrapAround || activeInput < this._entities.length)); + if (activeInput !== startActiveInput && !this._inputComponent(activeInput)!.disabled) { + this._switchInput(activeInput); + } + } + + /** + * Return a value as string, formatted and prepended with zero if necessary. + * + * @param {number} num A number to format + * @param {boolean} prependZero Whether to prepend with zero or not + * @param {number} max Max value of the number for this clock + * @returns {string} Formatted value + * @private + */ + _formatNumberToString(num: number, prependZero: boolean) { + return num < 10 && prependZero ? `0${num}` : num.toString(); + } + + _onkeydown(evt: KeyboardEvent) { + if (this._activeIndex === -1) { + return; + } + if (isEnter(evt)) { + // Accept the time and close the popover + this.fireEvent("close-inputs"); + } else if (isNumber(evt) && this._entities[this._activeIndex]) { + const char = evt.key; + const buffer = this._keyboardBuffer + char; + const bufferValue = parseInt(buffer); + + evt.preventDefault(); + this._resetCooldown(true); + if (bufferValue > this._entities[this._activeIndex].attributes!.max) { + // value accumulated in the buffer (old entry + new entry) is greater than the input maximum value, + // so assign old entry to the current inut and then switch to the next input, and add new entry as an old value + this._inputChange(parseInt(this._keyboardBuffer)); + this._switchNextInput(); + this._keyboardBuffer = char; + this._inputChange(parseInt(char)); + this._resetCooldown(true); + } else { + // value is less than clock's max value, so add new entry to the buffer + this._keyboardBuffer = buffer; + this._inputChange(parseInt(this._keyboardBuffer)); + if (this._keyboardBuffer.length === 2 || parseInt(`${this._keyboardBuffer}0`) > this._entities[this._activeIndex].attributes!.max) { + // if buffer length is 2, or buffer value + one more (any) number is greater than clock's max value + // there is no place for more entry - just set buffer as a value, and switch to the next clock + this._resetCooldown(this._keyboardBuffer.length !== 2); + this._keyboardBuffer = ""; + this._switchNextInput(); + } + } + } + } + + /** + * Input 'change' event handler. + * + * @param {value} number new value to set on active input + */ + _inputChange(value: number) { + const stringValue = this._formatNumberToString(value, this._entities[this._activeIndex].prependZero); + + if (this._activeIndex === -1) { + return; + } + value = parseInt(stringValue); + this._entities[this._activeIndex].value = value; + this._inputComponent(this._activeIndex)!.value = this._formatNumberToString(value, this._entities[this._activeIndex].prependZero); + switch (this._activeIndex) { + case this._componentMap.hours: + this._hoursChange(value); + break; + case this._componentMap.minutes: + this._minutesChange(value); + break; + case this._componentMap.seconds: + this._secondsChange(value); + break; + } + } + + _onfocusin(e: FocusEvent) { + const input = e.target as Input; + const innerInput = this._innerInput(input); + + this._editedInput = -1; + innerInput!.select(); + this._activeIndex = this._getIndexFromId(input.id); + } + + _onfocusout() { + let value = this._inputComponent(this._activeIndex)!.value === "" ? 0 : this._entities[this._activeIndex].value; + + this._editedInput = -1; + if (this._isHoursInput && !this._is24HoursFormat && value === 0) { + value = 12; + } + this._inputChange(value); + this._activeIndex = -1; + } + + _oninput() { + const stringValue = this._inputComponent(this._activeIndex)!.value; + const value = stringValue === "" ? 0 : parseInt(stringValue); + + if (value !== this._entities[this._activeIndex].value) { + this._editedInput = this._activeIndex; + this._editedInputValue = stringValue; + this._inputChange(value); + this._keyboardBuffer = stringValue; + } + } +} + +TimeSelectionInputs.define(); + +export default TimeSelectionInputs; diff --git a/packages/main/src/i18n/messagebundle.properties b/packages/main/src/i18n/messagebundle.properties index ea8fd25d43b2..b6ee8c4db973 100644 --- a/packages/main/src/i18n/messagebundle.properties +++ b/packages/main/src/i18n/messagebundle.properties @@ -337,6 +337,15 @@ TIMEPICKER_INPUT_DESCRIPTION=Time Input #XACT: Aria information for the Time Picker Clock Dial TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial +#XACT: Time Picker Inputs tooltip/aria-label for Hours input +TIMEPICKER_INPUTS_ENTER_HOURS=Please enter hours + +#XACT: Time Picker Inputs tooltip/aria-label for Minutes input +TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes + +#XACT: Time Picker Inputs tooltip/aria-label for Seconds input +TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds + #XACT: Aria information for the Duration Picker DURATION_INPUT_DESCRIPTION=Duration Input diff --git a/packages/main/src/themes/TimeSelectionInputs.css b/packages/main/src/themes/TimeSelectionInputs.css new file mode 100644 index 000000000000..1c57d1f7b2c8 --- /dev/null +++ b/packages/main/src/themes/TimeSelectionInputs.css @@ -0,0 +1,25 @@ +.ui5-time-selection-numeric-input { + width: 2.875rem; + text-align: center; +} + +.ui5-time-selection-inputs { + min-width: 12.5rem; + display: flex; + justify-content: center; + align-items: center; +} + +span[separator] { + display: inline-block; + min-width: 0.5rem; + padding: 0 0.125rem; + text-align: center; + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize); + color: var(--sapTextColor); +} + +.ui5-hidden-text { + display: none; +} \ No newline at end of file diff --git a/packages/main/test/pages/TimePickerClock.html b/packages/main/test/pages/TimePickerClock.html index 41f62883048f..1db378d50a78 100644 --- a/packages/main/test/pages/TimePickerClock.html +++ b/packages/main/test/pages/TimePickerClock.html @@ -33,10 +33,7 @@

TimePickerClock

- -
-
- +
@@ -68,7 +65,6 @@

final 'change' event count

var eventCount = 0; myHours12.addEventListener('ui5-change', displayChange); - myHours00.addEventListener('ui5-change', displayChange); myHours24.addEventListener('ui5-change', displayChange); myMinutes.addEventListener('ui5-change', displayChange); myMinutes10.addEventListener('ui5-change', displayChange); diff --git a/packages/main/test/pages/TimeSelectionInputs.html b/packages/main/test/pages/TimeSelectionInputs.html new file mode 100644 index 000000000000..919d8cb66e2c --- /dev/null +++ b/packages/main/test/pages/TimeSelectionInputs.html @@ -0,0 +1,87 @@ + + + + + + TimeSelectionInputs test page + + + + + + + + + + +

TimeSelectionInput with pattern "hh:mm:ss"

+ +
+ +
+ +
+

'change' event count

+ +
+ +

TimeSelectionInput with pattern "HH:mm:ss"

+ +
+ +
+ +
+

'change' event count

+ +
+ +

TimeSelectionInput with pattern "hh:mm:ss a"

+ +
+ +
+ +
+

'change' event count

+ +
+ + + + + diff --git a/packages/main/test/specs/TimePicker.mobile.spec.js b/packages/main/test/specs/TimePicker.mobile.spec.js new file mode 100644 index 000000000000..864c3287b15a --- /dev/null +++ b/packages/main/test/specs/TimePicker.mobile.spec.js @@ -0,0 +1,244 @@ +import { assert } from "chai"; + +/** + * + * @param {Array} options.keys The bundle keys of the texts + * @param {String} options.id ID of the component to get the texts from + * @returns + */ +async function getResourceBundleTexts(options) { + return browser.executeAsync((options, done) => { + const component = document.getElementById(options.id); + + const texts = options.keys.reduce((result, key) => { + result[key] = component.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts[key]) + return result; + }, {}); + done(texts); + + }, options); +} + +describe("TimePicker on phone - general interactions", () => { + before(async () => { + await browser.url(`test/pages/TimePicker.html?sap-ui-language=bg`); + await browser.emulateDevice('iPhone X'); + }); + + it("opening of popover with numeric inputs", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + // act + await timePicker.setProperty("value", "11:12:13"); + await timePicker.shadow$("ui5-input").click(); + + // assert + assert.ok(await timePickerPopover.getAttribute("open"), "Popover found"); + assert.ok(await timeSelectionInputs, "TimeSelectionInputs found"); + assert.strictEqual(await components.length, 3, "Found 3 Inputs"); + assert.strictEqual(await hoursInnerInput.getValue(), "11", "Correct hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "12", "Correct minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "13", "Correct seconds value is set"); + }); + + it("value change with numeric inputs on OK and Cancel button press", async () => { + const timePicker = await browser.$("#timepicker3"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker3"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timePickerPopoverButtons = await timePickerPopover.$('div.ui5-time-picker-footer').$$("ui5-button"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + const amPmButton = await timeSelectionInputs.shadow$('ui5-segmented-button'); + const amPmButtonItems = await amPmButton.$$("ui5-segmented-button-item"); + + // act + await timePicker.setProperty("value", "10:20:30 AM"); + await timePicker.shadow$("ui5-input").click(); + + await hoursInnerInput.setValue("11"); + await minutesInnerInput.setValue("22"); + await secondsInnerInput.setValue("33"); + await amPmButtonItems[1].click(); // click on PM button + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "11", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "22", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "33", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "11:22:33 PM", "Correct new time is set to the TimePicker"); + + // act + await timePicker.shadow$("ui5-input").click(); + await hoursInnerInput.setValue("10"); + await minutesInnerInput.setValue("20"); + await secondsInnerInput.setValue("30"); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "10", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "20", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "30", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[1].click(); // click on Cancel button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "11:22:33 PM", "New time is not set to the TimePicker"); + }); + + it("direct number typing", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timePickerPopoverButtons = await timePickerPopover.$('div.ui5-time-picker-footer').$$("ui5-button"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + // act + await timePicker.setProperty("value", "10:20:30 AM"); + await timePicker.shadow$("ui5-input").click(); + await browser.keys(["0", "8", "2", "4", "1", "3"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "08", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "24", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "13", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "08:24:13", "New time is not set to the TimePicker"); + + // act + await timePicker.shadow$("ui5-input").click(); + await browser.keys(["3", "6", "8"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "03", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "06", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "08", "Correct new seconds value is set"); + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "03:06:08", "New time is not set to the TimePicker"); + + // act + await timePicker.shadow$("ui5-input").click(); + await browser.keys(["4", "5"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "04", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "05", "Correct new minutes value is set"); + + // act + await browser.pause(1500); // simulate cooldown + await browser.keys(["3", "2", "1", "0"]); + + // assert + assert.strictEqual(await hoursInnerInput.getValue(), "04", "Correct new hours value is set"); + assert.strictEqual(await minutesInnerInput.getValue(), "32", "Correct new minutes value is set"); + assert.strictEqual(await secondsInnerInput.getValue(), "10", "Correct new seconds value is set"); + + + // act + await timePickerPopoverButtons[0].click(); // click on OK button + + // assert + assert.strictEqual((await timePicker.getAttribute("value")).toUpperCase(), "04:32:10", "New time is not set to the TimePicker"); + }); + +}); + +describe("TimePicker on phone - accessibility and other input attributes", () => { + before(async () => { + await browser.url(`test/pages/TimePicker.html?sap-ui-language=bg`); + await browser.emulateDevice('iPhone X'); + }); + + it("accessibility attributes of numeric inputs", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + const keys = [ + "TIMEPICKER_INPUTS_ENTER_HOURS", + "TIMEPICKER_INPUTS_ENTER_MINUTES", + "TIMEPICKER_INPUTS_ENTER_SECONDS", + ]; + const texts = await getResourceBundleTexts({ keys, id: "timepicker" }); + + // act + await timePicker.shadow$("ui5-input").click(); + + // assert + assert.strictEqual(await hoursInnerInput.getAttribute("step"), "1", "Correct hours 'step' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("min"), "0", "Correct hours 'min' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("max"), "23", "Correct hours 'max' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("aria-label"), texts.TIMEPICKER_INPUTS_ENTER_HOURS, "Correct hours 'aria-label' attribute"); + + assert.strictEqual(await minutesInnerInput.getAttribute("step"), "1", "Correct minutes 'step' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("min"), "0", "Correct minutes 'min' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("max"), "59", "Correct minutes 'max' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("aria-label"), texts.TIMEPICKER_INPUTS_ENTER_MINUTES, "Correct minutes 'aria-label' attribute"); + + assert.strictEqual(await secondsInnerInput.getAttribute("step"), "1", "Correct seconds 'step' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("min"), "0", "Correct seconds 'min' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("max"), "59", "Correct seconds 'max' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("aria-label"), texts.TIMEPICKER_INPUTS_ENTER_SECONDS, "Correct seconds 'aria-label' attribute"); + }); + + it("other important attributes of numeric inputs", async () => { + const timePicker = await browser.$("#timepicker"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#timepicker"); + const timePickerPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-popover"); + const timeSelectionInputs = await timePickerPopover.$('div.popover-content').$('ui5-time-selection-inputs'); + const components = await timeSelectionInputs.shadow$$('ui5-input'); + const hoursInnerInput = await components[0].shadow$("input"); + const minutesInnerInput = await components[1].shadow$("input"); + const secondsInnerInput = await components[2].shadow$("input"); + + // act + await timePicker.shadow$("ui5-input").click(); + + // assert + assert.strictEqual(await hoursInnerInput.getAttribute("type"), "number", "Correct hours 'type' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("autocomplete"), "off", "Correct hours 'autocomplete' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("pattern"), "[0-9]*", "Correct hours 'pattern' attribute"); + assert.strictEqual(await hoursInnerInput.getAttribute("inputmode"), "numeric", "Correct hours 'inputmode' attribute"); + + assert.strictEqual(await minutesInnerInput.getAttribute("type"), "number", "Correct minutes 'type' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("autocomplete"), "off", "Correct minutes 'autocomplete' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("pattern"), "[0-9]*", "Correct minutes 'pattern' attribute"); + assert.strictEqual(await minutesInnerInput.getAttribute("inputmode"), "numeric", "Correct minutes 'inputmode' attribute"); + + assert.strictEqual(await secondsInnerInput.getAttribute("type"), "number", "Correct seconds 'type' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("autocomplete"), "off", "Correct seconds 'autocomplete' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("pattern"), "[0-9]*", "Correct seconds 'pattern' attribute"); + assert.strictEqual(await secondsInnerInput.getAttribute("inputmode"), "numeric", "Correct seconds 'inputmode' attribute"); + }); + +}); diff --git a/packages/main/test/specs/TimePicker.spec.js b/packages/main/test/specs/TimePicker.spec.js index 4a38787cb55d..dcc689c6640b 100644 --- a/packages/main/test/specs/TimePicker.spec.js +++ b/packages/main/test/specs/TimePicker.spec.js @@ -30,7 +30,7 @@ describe("TimePicker general interaction", () => { // assert assert.strictEqual(hoursClockValue, 11, "Hours are equal"); assert.strictEqual(minutesClockValue, 12, "Minutes are equal"); - assert.strictEqual(secondsClockValue, 13, "Minutes are equal"); + assert.strictEqual(secondsClockValue, 13, "Seconds are equal"); }); it("tests clocks submit value", async () => { diff --git a/packages/main/test/specs/TimePickerClock.spec.js b/packages/main/test/specs/TimePickerClock.spec.js index 216aca99b931..d55dd7be65b5 100644 --- a/packages/main/test/specs/TimePickerClock.spec.js +++ b/packages/main/test/specs/TimePickerClock.spec.js @@ -56,14 +56,11 @@ describe("Clock API", () => { it("'lastItemReplacement' and 'prependZero' properties", async () => { const hours24 = await browser.$("#myHours24"); - const hours00 = await browser.$("#myHours00"); const minutes = await browser.$("#myMinutes"); const numbersInHours24 = await hours24.shadow$$(".ui5-tp-clock-item:not([marker]) .ui5-tp-clock-number"); - const numbersInHours00 = await hours00.shadow$$(".ui5-tp-clock-item:not([marker]) .ui5-tp-clock-number"); const numbersInMinutes = await minutes.shadow$$(".ui5-tp-clock-item:not([marker]) .ui5-tp-clock-number"); - assert.strictEqual(await numbersInHours24[numbersInHours24.length-1].getText(), "24", "The last number element in clock with prependZero=false and no lastItemReplacement property set is '24'"); - assert.strictEqual(await numbersInHours00[numbersInHours00.length-1].getText(), "00", "The last number element in clock with prependZero=true and lastItemReplacement=0 is '00'"); + assert.strictEqual(await numbersInHours24[numbersInHours24.length-1].getText(), "00", "The last number element in clock with prependZero=false and no lastItemReplacement property set is '24'"); assert.strictEqual(await numbersInMinutes[numbersInMinutes.length-1].getText(), "0", "The last number element in clock with prependZero=false and lastItemReplacement=0 is '0'"); }); }); From b2ea9aac43d296b777d1fcf8c1611fe75fdfb46d Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Thu, 28 Sep 2023 10:35:04 +0300 Subject: [PATCH 031/141] fix(ui5-button): update font params (#7625) With this change we update the font-family parameters in the component, and font-weight param for the Emphasized one in order to be complient with the VD Specifications. --- packages/main/src/themes/Button.css | 2 +- packages/main/src/themes/base/Button-parameters.css | 4 +--- packages/main/src/themes/sap_fiori_3/Button-parameters.css | 1 - .../main/src/themes/sap_fiori_3_dark/Button-parameters.css | 1 - packages/main/src/themes/sap_horizon/Button-parameters.css | 3 +-- .../main/src/themes/sap_horizon_dark/Button-parameters.css | 3 +-- .../src/themes/sap_horizon_dark_exp/Button-parameters.css | 4 +--- .../main/src/themes/sap_horizon_exp/Button-parameters.css | 3 +-- 8 files changed, 6 insertions(+), 15 deletions(-) diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index d40a72d62238..e2ee704654be 100644 --- a/packages/main/src/themes/Button.css +++ b/packages/main/src/themes/Button.css @@ -221,7 +221,7 @@ bdi { border-color: var(--sapButton_Emphasized_BorderColor); border-width: var(--_ui5_button_emphasized_border_width); color: var(--sapButton_Emphasized_TextColor); - font-weight: var(--_ui5_button_emphasized_font_weight); + font-weight: var(--sapButton_Emphasized_FontWeight); } /*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/ diff --git a/packages/main/src/themes/base/Button-parameters.css b/packages/main/src/themes/base/Button-parameters.css index ccdb464d3092..34c916e0f2a1 100644 --- a/packages/main/src/themes/base/Button-parameters.css +++ b/packages/main/src/themes/base/Button-parameters.css @@ -13,13 +13,11 @@ --_ui5_button_base_icon_margin: 0.563rem; --_ui5_button_icon_font_size: 1.375rem; --_ui5_button_emphasized_outline: 1px dotted var(--sapContent_FocusColor); - --_ui5_button_emphasized_font_weight: normal; --_ui5_button_text_shadow: var(--sapContent_TextShadow); --_ui5_button_focus_offset: 1px; --_ui5_button_focus_width: 1px; --_ui5_button_pressed_focused_border_color: var(--sapContent_ContrastFocusColor); - + --_ui5_button_fontFamily: var(--sapFontFamily); --_ui5_button_emphasized_focused_border_color: var(--sapButton_Emphasized_BorderColor); - --_ui5_button_fontFamily: "72override", var(--sapFontFamily); --_ui5_button_emphasized_focused_border_before: none; } 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 38036e46fb02..24d38d7b9f56 100644 --- a/packages/main/src/themes/sap_fiori_3/Button-parameters.css +++ b/packages/main/src/themes/sap_fiori_3/Button-parameters.css @@ -6,7 +6,6 @@ --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); --_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor); 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 38036e46fb02..24d38d7b9f56 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 @@ -6,7 +6,6 @@ --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_focused_border: 0.0625rem dotted var(--sapContent_ContrastFocusColor); --_ui5_button_emphasized_focused_border_before: 0.0625rem solid var(--sapContent_FocusColor); diff --git a/packages/main/src/themes/sap_horizon/Button-parameters.css b/packages/main/src/themes/sap_horizon/Button-parameters.css index c020aa838417..e2f8b4ee5285 100644 --- a/packages/main/src/themes/sap_horizon/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon/Button-parameters.css @@ -9,10 +9,9 @@ --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_horizon_dark/Button-parameters.css b/packages/main/src/themes/sap_horizon_dark/Button-parameters.css index c020aa838417..689f4d511f19 100644 --- a/packages/main/src/themes/sap_horizon_dark/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Button-parameters.css @@ -9,10 +9,9 @@ --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); } diff --git a/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css index 4b444788a4af..e2f8b4ee5285 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/Button-parameters.css @@ -5,15 +5,13 @@ --_ui5_button_focused_border_radius: 0.375rem; --_ui5_button_focused_inner_border_radius: 0.375rem; --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_button_base_padding: 0.5625rem; --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); } diff --git a/packages/main/src/themes/sap_horizon_exp/Button-parameters.css b/packages/main/src/themes/sap_horizon_exp/Button-parameters.css index c020aa838417..e2f8b4ee5285 100644 --- a/packages/main/src/themes/sap_horizon_exp/Button-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/Button-parameters.css @@ -9,10 +9,9 @@ --_ui5_button_base_icon_only_padding: 0.5625rem; --_ui5_button_base_icon_margin: 0.375rem; --_ui5_button_icon_font_size: 1rem; - --_ui5_button_emphasized_font_weight: bold; --_ui5_button_text_shadow: none; --_ui5_button_emphasized_border_width: .0625rem; - --_ui5_button_fontFamily: "72override", var(--sapFontBoldFamily); --_ui5_button_pressed_focused_border_color: var(--sapContent_FocusColor); + --_ui5_button_fontFamily: var(--sapFontSemiboldDuplexFamily); --_ui5_button_emphasized_focused_border_color: var(--sapContent_ContrastFocusColor); } From 64a57f09075ca1545be62fe4d06908d600db3d40 Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Thu, 28 Sep 2023 08:14:49 +0000 Subject: [PATCH 032/141] chore(release): publish v1.18.0-rc.2 [ci skip] --- CHANGELOG.md | 22 ++++++++++++++++++++++ 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 | 8 ++++++++ packages/localization/package.json | 6 +++--- packages/main/CHANGELOG.md | 21 +++++++++++++++++++++ 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, 159 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d141af92cc4..eeec774031f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,28 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + + +### Bug Fixes + +* **ui5-button:** update font params ([#7625](https://github.com/SAP/ui5-webcomponents/issues/7625)) ([b2ea9aa](https://github.com/SAP/ui5-webcomponents/commit/b2ea9aac43d296b777d1fcf8c1611fe75fdfb46d)) +* **ui5-list:** update horizon theme parameters ([#7614](https://github.com/SAP/ui5-webcomponents/issues/7614)) ([b0b8359](https://github.com/SAP/ui5-webcomponents/commit/b0b83597596248732f4bc92f968391aa67bb0355)) +* **ui5-media-gallery:** added new horizon theme parameters ([#7575](https://github.com/SAP/ui5-webcomponents/issues/7575)) ([25dbb4b](https://github.com/SAP/ui5-webcomponents/commit/25dbb4bd79890143021b9ecd3033665ea82cd6fa)) +* **ui5-message-strip:** remove button's custom width ([#7606](https://github.com/SAP/ui5-webcomponents/issues/7606)) ([bb8241a](https://github.com/SAP/ui5-webcomponents/commit/bb8241a94b4af5588c4583663da0f88490778cf7)) +* **ui5-multi-combobox:** correct usage of css var ([#7616](https://github.com/SAP/ui5-webcomponents/issues/7616)) ([c59c3bc](https://github.com/SAP/ui5-webcomponents/commit/c59c3bc1ccd130d36d1835450d8c7aaff8418e9c)) +* **ui5-slider:** adjust Horizon themes ([#7615](https://github.com/SAP/ui5-webcomponents/issues/7615)) ([4540766](https://github.com/SAP/ui5-webcomponents/commit/4540766a76595751323e2d2704f9fde69b80c36d)) +* **ui5-table:** improve Horizon styles ([#7609](https://github.com/SAP/ui5-webcomponents/issues/7609)) ([092537e](https://github.com/SAP/ui5-webcomponents/commit/092537e5616e23b88c46b93dc237593096c5c882)) + + +### Features + +* **ui5-time-picker:** mobile input and code optimization ([#7549](https://github.com/SAP/ui5-webcomponents/issues/7549)) ([50499ac](https://github.com/SAP/ui5-webcomponents/commit/50499ac1378deb18c18c649090591c0c36d44567)) + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) diff --git a/lerna.json b/lerna.json index 621fdfcba17a..75271a1ee531 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index 47f32a8ed2e3..707df223c3a8 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) diff --git a/packages/base/package.json b/packages/base/package.json index 07aacfff4563..580aad2ab654 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "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.18.0-rc.1", + "@ui5/webcomponents-tools": "1.18.0-rc.2", "chromedriver": "116.0.0", "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 42b4d5037cec..9fa65657e1f6 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) **Note:** Version bump only for package @ui5/create-webcomponents-package diff --git a/packages/create-package/package.json b/packages/create-package/package.json index 056bd3100f11..c876b0db60b7 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "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 47dcc65237ca..03ef86d46b35 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + + +### Bug Fixes + +* **ui5-media-gallery:** added new horizon theme parameters ([#7575](https://github.com/SAP/ui5-webcomponents/issues/7575)) ([25dbb4b](https://github.com/SAP/ui5-webcomponents/commit/25dbb4bd79890143021b9ecd3033665ea82cd6fa)) + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) diff --git a/packages/fiori/package.json b/packages/fiori/package.json index dabf81fbfac7..2dd909ac5828 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -41,14 +41,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.18.0-rc.1", - "@ui5/webcomponents-base": "1.18.0-rc.1", - "@ui5/webcomponents-icons": "1.18.0-rc.1", - "@ui5/webcomponents-theming": "1.18.0-rc.1", + "@ui5/webcomponents": "1.18.0-rc.2", + "@ui5/webcomponents-base": "1.18.0-rc.2", + "@ui5/webcomponents-icons": "1.18.0-rc.2", + "@ui5/webcomponents-theming": "1.18.0-rc.2", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.1", + "@ui5/webcomponents-tools": "1.18.0-rc.2", "chromedriver": "116.0.0" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index f54590cc3a5b..18f129ccc0ac 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) **Note:** Version bump only for package @ui5/webcomponents-icons-business-suite diff --git a/packages/icons-business-suite/package.json b/packages/icons-business-suite/package.json index 3a3218370457..37871063bfa5 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.18.0-rc.1", + "version": "1.18.0-rc.2", "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.18.0-rc.1" + "@ui5/webcomponents-base": "1.18.0-rc.2" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.1" + "@ui5/webcomponents-tools": "1.18.0-rc.2" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index eca25c7afcc9..cdd1219409cc 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) **Note:** Version bump only for package @ui5/webcomponents-icons-tnt diff --git a/packages/icons-tnt/package.json b/packages/icons-tnt/package.json index 85f698eb05de..4b96111025fe 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "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.18.0-rc.1" + "@ui5/webcomponents-base": "1.18.0-rc.2" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.1" + "@ui5/webcomponents-tools": "1.18.0-rc.2" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 67c8f8c33a02..39dd9698c197 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index b4f3330eb5bc..3da56153fb18 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "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.18.0-rc.1" + "@ui5/webcomponents-base": "1.18.0-rc.2" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.1" + "@ui5/webcomponents-tools": "1.18.0-rc.2" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index bdb466b312c6..5d82736e09af 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index a4d0d9122ca1..cbf7e1215ece 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "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.18.0-rc.1", + "@ui5/webcomponents-tools": "1.18.0-rc.2", "chromedriver": "116.0.0", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.18.0-rc.1" + "@ui5/webcomponents-base": "1.18.0-rc.2" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index 4f373397bd1d..98cd945efdb8 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/CHANGELOG.md @@ -3,6 +3,27 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + + +### Bug Fixes + +* **ui5-button:** update font params ([#7625](https://github.com/SAP/ui5-webcomponents/issues/7625)) ([b2ea9aa](https://github.com/SAP/ui5-webcomponents/commit/b2ea9aac43d296b777d1fcf8c1611fe75fdfb46d)) +* **ui5-list:** update horizon theme parameters ([#7614](https://github.com/SAP/ui5-webcomponents/issues/7614)) ([b0b8359](https://github.com/SAP/ui5-webcomponents/commit/b0b83597596248732f4bc92f968391aa67bb0355)) +* **ui5-message-strip:** remove button's custom width ([#7606](https://github.com/SAP/ui5-webcomponents/issues/7606)) ([bb8241a](https://github.com/SAP/ui5-webcomponents/commit/bb8241a94b4af5588c4583663da0f88490778cf7)) +* **ui5-multi-combobox:** correct usage of css var ([#7616](https://github.com/SAP/ui5-webcomponents/issues/7616)) ([c59c3bc](https://github.com/SAP/ui5-webcomponents/commit/c59c3bc1ccd130d36d1835450d8c7aaff8418e9c)) +* **ui5-slider:** adjust Horizon themes ([#7615](https://github.com/SAP/ui5-webcomponents/issues/7615)) ([4540766](https://github.com/SAP/ui5-webcomponents/commit/4540766a76595751323e2d2704f9fde69b80c36d)) +* **ui5-table:** improve Horizon styles ([#7609](https://github.com/SAP/ui5-webcomponents/issues/7609)) ([092537e](https://github.com/SAP/ui5-webcomponents/commit/092537e5616e23b88c46b93dc237593096c5c882)) + + +### Features + +* **ui5-time-picker:** mobile input and code optimization ([#7549](https://github.com/SAP/ui5-webcomponents/issues/7549)) ([50499ac](https://github.com/SAP/ui5-webcomponents/commit/50499ac1378deb18c18c649090591c0c36d44567)) + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) diff --git a/packages/main/package.json b/packages/main/package.json index 806d8e9cef1d..e5915bdf817f 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -43,13 +43,13 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.18.0-rc.1", - "@ui5/webcomponents-icons": "1.18.0-rc.1", - "@ui5/webcomponents-localization": "1.18.0-rc.1", - "@ui5/webcomponents-theming": "1.18.0-rc.1" + "@ui5/webcomponents-base": "1.18.0-rc.2", + "@ui5/webcomponents-icons": "1.18.0-rc.2", + "@ui5/webcomponents-localization": "1.18.0-rc.2", + "@ui5/webcomponents-theming": "1.18.0-rc.2" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.1", + "@ui5/webcomponents-tools": "1.18.0-rc.2", "chromedriver": "116.0.0" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index e9c4cf053512..9ae4bbe6b947 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) diff --git a/packages/playground/package.json b/packages/playground/package.json index 2341fc5822af..70f8e1e7df0d 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "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 d77b86ade39a..83f85085bbc1 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 1b6c1d06c816..d22e9ea03b1d 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "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.18.0-rc.1" + "@ui5/webcomponents-base": "1.18.0-rc.2" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.1", + "@ui5/webcomponents-tools": "1.18.0-rc.2", "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 8e9d08167de9..6875697ec6b4 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.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) + +**Note:** Version bump only for package @ui5/webcomponents-tools + + + + + # [1.18.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.0...v1.18.0-rc.1) (2023-09-21) diff --git a/packages/tools/package.json b/packages/tools/package.json index b83413ea2597..920cb819a4a9 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.18.0-rc.1", + "version": "1.18.0-rc.2", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From a3f1c810fb0a259016177af72799bbce6e8539e9 Mon Sep 17 00:00:00 2001 From: ilhan orhan Date: Thu, 28 Sep 2023 18:01:28 +0300 Subject: [PATCH 033/141] chore: update css-vars-usage.json (#7638) --- packages/theming/css-vars-usage.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json index fc34de6a48d6..e7c1f3b4f0a1 100644 --- a/packages/theming/css-vars-usage.json +++ b/packages/theming/css-vars-usage.json @@ -83,6 +83,7 @@ "--sapButton_Emphasized_Active_TextColor", "--sapButton_Emphasized_Background", "--sapButton_Emphasized_BorderColor", + "--sapButton_Emphasized_FontWeight", "--sapButton_Emphasized_Hover_Background", "--sapButton_Emphasized_Hover_BorderColor", "--sapButton_Emphasized_Hover_TextColor", @@ -201,7 +202,6 @@ "--sapContent_Selected_ForegroundColor", "--sapContent_Selected_Hover_Background", "--sapContent_Selected_MeasureIndicatorColor", - "--sapContent_Selected_Shadow", "--sapContent_Selected_TextColor", "--sapContent_Shadow0", "--sapContent_Shadow1", @@ -217,6 +217,7 @@ "--sapElement_BorderWidth", "--sapElement_Compact_Height", "--sapElement_Height", + "--sapElement_LineHeight", "--sapErrorBackground", "--sapErrorBorderColor", "--sapField_Active_BorderColor", @@ -400,7 +401,6 @@ "--sapShell_InteractiveTextColor", "--sapShell_TextColor", "--sapShellColor", - "--sapSlider_Active_HandleBackground", "--sapSlider_Active_RangeHandleBackground", "--sapSlider_Background", "--sapSlider_HandleBackground", From eb57a363322f9d437bb740c4b5068fdc1e73625d Mon Sep 17 00:00:00 2001 From: Marcus Notheis Date: Fri, 29 Sep 2023 13:45:21 +0200 Subject: [PATCH 034/141] docs(ui5-toolbar-separator): mark component as abstract (#7640) docs(ToolbarSeparator): mark component as abstract --- packages/main/src/ToolbarSeparator.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/ToolbarSeparator.ts b/packages/main/src/ToolbarSeparator.ts index ce43df944d57..a19c48f86336 100644 --- a/packages/main/src/ToolbarSeparator.ts +++ b/packages/main/src/ToolbarSeparator.ts @@ -20,6 +20,7 @@ import ToolbarItem from "./ToolbarItem.js"; * @extends sap.ui.webc.main.ToolbarItem * @tagname ui5-toolbar-separator * @since 1.17.0 + * @abstract * @implements sap.ui.webc.main.IToolbarItem * @public */ From 9601ad2205f74ee506c97633b3feacc57e0e2fc9 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 2 Oct 2023 08:18:44 +0200 Subject: [PATCH 035/141] docs(landing-page): dynamically fetch latest ui5wc version (#7643) --- packages/playground/assets/js/landing-page.js | 12 +++++++++++- packages/playground/docs/landing-page.html | 4 +++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/packages/playground/assets/js/landing-page.js b/packages/playground/assets/js/landing-page.js index 1763c0add57f..9f6c1facfa85 100644 --- a/packages/playground/assets/js/landing-page.js +++ b/packages/playground/assets/js/landing-page.js @@ -41,4 +41,14 @@ function rotateRight() { } else { slides[selectedIndex + 1].classList.add("active"); } -} \ No newline at end of file +} + +fetch('https://registry.npmjs.org/@ui5/webcomponents').then(async (response) => { + const ui5wcPackageMetadata = await response.json(); + const versionAnchor = document.getElementById('dynamicVersion'); + if (ui5wcPackageMetadata?.['dist-tags'].latest) { + const version = ui5wcPackageMetadata['dist-tags'].latest; + versionAnchor.textContent = version; + versionAnchor.setAttribute('href', `https://github.com/SAP/ui5-webcomponents/releases/tag/v${version}`); + } +}); diff --git a/packages/playground/docs/landing-page.html b/packages/playground/docs/landing-page.html index 61548ff7470b..e9a5400c3527 100644 --- a/packages/playground/docs/landing-page.html +++ b/packages/playground/docs/landing-page.html @@ -45,7 +45,9 @@

UI5 Web Components

Enterprise-flavored sugar on top of native APIs!
-

Latest Version: 1.17.0

+

Latest Version: 1.18.0 +

Get Started
From 66c23a4f959f62730f06380b762e510583d00831 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Mon, 2 Oct 2023 09:57:01 +0300 Subject: [PATCH 036/141] chore: bump readme (#7647) --- packages/base/README.md | 1 + packages/create-package/README.md | 1 + packages/fiori/README.md | 1 + packages/icons-business-suite/README.md | 1 + packages/icons-tnt/README.md | 1 + packages/icons/README.md | 1 + packages/localization/README.md | 1 + packages/main/README.md | 1 + packages/playground/README.md | 1 + packages/theming/README.md | 1 + packages/tools/README.md | 1 + 11 files changed, 11 insertions(+) diff --git a/packages/base/README.md b/packages/base/README.md index 72a40927f82a..bd3aff7ca166 100644 --- a/packages/base/README.md +++ b/packages/base/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Base [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/create-package/README.md b/packages/create-package/README.md index 3ea2f0e9c1f9..f0d7aaac2edc 100644 --- a/packages/create-package/README.md +++ b/packages/create-package/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Create Package [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/fiori/README.md b/packages/fiori/README.md index ab8c1f6ee853..d4fd1c7345fa 100644 --- a/packages/fiori/README.md +++ b/packages/fiori/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Fiori [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/icons-business-suite/README.md b/packages/icons-business-suite/README.md index b37adba90ffa..23fa262ed64d 100644 --- a/packages/icons-business-suite/README.md +++ b/packages/icons-business-suite/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - SAP Business Suite Icons [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/icons-tnt/README.md b/packages/icons-tnt/README.md index 9908ca5213d3..6c291432fdc7 100644 --- a/packages/icons-tnt/README.md +++ b/packages/icons-tnt/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - SAP Fiori Tools (TNT) Icons [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/icons/README.md b/packages/icons/README.md index 3ae68182f75a..2043aa43db12 100644 --- a/packages/icons/README.md +++ b/packages/icons/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Icons [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/localization/README.md b/packages/localization/README.md index 2a1692c55ae2..c6462cffab79 100644 --- a/packages/localization/README.md +++ b/packages/localization/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Localization [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/main/README.md b/packages/main/README.md index 0c101d956606..b4ea69c2aca5 100644 --- a/packages/main/README.md +++ b/packages/main/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Main [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/playground/README.md b/packages/playground/README.md index d13566bbe4c0..81b3113c4ec4 100644 --- a/packages/playground/README.md +++ b/packages/playground/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Playground [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/theming/README.md b/packages/theming/README.md index 34f797c1164d..14c943db441d 100644 --- a/packages/theming/README.md +++ b/packages/theming/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Theming [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) diff --git a/packages/tools/README.md b/packages/tools/README.md index ee342e3b015d..3d39f44f053e 100644 --- a/packages/tools/README.md +++ b/packages/tools/README.md @@ -1,5 +1,6 @@ ![UI5 icon](https://raw.githubusercontent.com/SAP/ui5-webcomponents/main/docs/images/UI5_logo_wide.png) + # UI5 Web Components - Tools [![npm Package Version](https://badge.fury.io/js/%40ui5%2Fwebcomponents.svg)](https://www.npmjs.com/package/@ui5/webcomponents) From 67f6f3012e7c23d6e2b9045974a080d5c40b7610 Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Mon, 2 Oct 2023 07:27:07 +0000 Subject: [PATCH 037/141] chore(release): publish v1.18.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 eeec774031f5..9bdeb04edece 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package ui5-webcomponents + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) diff --git a/lerna.json b/lerna.json index 75271a1ee531..420b1af936b5 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.18.0-rc.2", + "version": "1.18.0", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index 707df223c3a8..36cfa75fd0f3 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **Note:** Version bump only for package @ui5/webcomponents-base diff --git a/packages/base/package.json b/packages/base/package.json index 580aad2ab654..fbf5b94a6d60 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.18.0-rc.2", + "version": "1.18.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.18.0-rc.2", + "@ui5/webcomponents-tools": "1.18.0", "chromedriver": "116.0.0", "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 9fa65657e1f6..57c060ed0c82 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **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 c876b0db60b7..7f8e5f9c1fc3 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.18.0-rc.2", + "version": "1.18.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 03ef86d46b35..da4369a05d8c 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-fiori + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) diff --git a/packages/fiori/package.json b/packages/fiori/package.json index 2dd909ac5828..1b34c3f80e2c 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.18.0-rc.2", + "version": "1.18.0", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -41,14 +41,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.18.0-rc.2", - "@ui5/webcomponents-base": "1.18.0-rc.2", - "@ui5/webcomponents-icons": "1.18.0-rc.2", - "@ui5/webcomponents-theming": "1.18.0-rc.2", + "@ui5/webcomponents": "1.18.0", + "@ui5/webcomponents-base": "1.18.0", + "@ui5/webcomponents-icons": "1.18.0", + "@ui5/webcomponents-theming": "1.18.0", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.2", + "@ui5/webcomponents-tools": "1.18.0", "chromedriver": "116.0.0" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index 18f129ccc0ac..d2865d6ea7ac 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **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 37871063bfa5..7b2ba97ba25a 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.18.0-rc.2", + "version": "1.18.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.18.0-rc.2" + "@ui5/webcomponents-base": "1.18.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.2" + "@ui5/webcomponents-tools": "1.18.0" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index cdd1219409cc..4ad4d67332eb 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **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 4b96111025fe..f9e83975c15e 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.18.0-rc.2", + "version": "1.18.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.18.0-rc.2" + "@ui5/webcomponents-base": "1.18.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.2" + "@ui5/webcomponents-tools": "1.18.0" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 39dd9698c197..f50ddce1ea1d 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index 3da56153fb18..cab6d8c5c653 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.18.0-rc.2", + "version": "1.18.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.18.0-rc.2" + "@ui5/webcomponents-base": "1.18.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.2" + "@ui5/webcomponents-tools": "1.18.0" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index 5d82736e09af..fc7ba4f266e4 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-localization + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index cbf7e1215ece..f163ccf122fe 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.18.0-rc.2", + "version": "1.18.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.18.0-rc.2", + "@ui5/webcomponents-tools": "1.18.0", "chromedriver": "116.0.0", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.18.0-rc.2" + "@ui5/webcomponents-base": "1.18.0" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index 98cd945efdb8..bca371b68716 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) diff --git a/packages/main/package.json b/packages/main/package.json index e5915bdf817f..58548b3ff22a 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.18.0-rc.2", + "version": "1.18.0", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -43,13 +43,13 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.18.0-rc.2", - "@ui5/webcomponents-icons": "1.18.0-rc.2", - "@ui5/webcomponents-localization": "1.18.0-rc.2", - "@ui5/webcomponents-theming": "1.18.0-rc.2" + "@ui5/webcomponents-base": "1.18.0", + "@ui5/webcomponents-icons": "1.18.0", + "@ui5/webcomponents-localization": "1.18.0", + "@ui5/webcomponents-theming": "1.18.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.2", + "@ui5/webcomponents-tools": "1.18.0", "chromedriver": "116.0.0" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index 9ae4bbe6b947..0e304e5cc61d 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-playground + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **Note:** Version bump only for package @ui5/webcomponents-playground diff --git a/packages/playground/package.json b/packages/playground/package.json index 70f8e1e7df0d..1f15f8364ec8 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.18.0-rc.2", + "version": "1.18.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 83f85085bbc1..6d3ba9565b61 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index d22e9ea03b1d..a4ef8d4b39ef 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.18.0-rc.2", + "version": "1.18.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.18.0-rc.2" + "@ui5/webcomponents-base": "1.18.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.0-rc.2", + "@ui5/webcomponents-tools": "1.18.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 6875697ec6b4..3f16c0353762 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.18.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.2...v1.18.0) (2023-10-02) + +**Note:** Version bump only for package @ui5/webcomponents-tools + + + + + # [1.18.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0-rc.1...v1.18.0-rc.2) (2023-09-28) **Note:** Version bump only for package @ui5/webcomponents-tools diff --git a/packages/tools/package.json b/packages/tools/package.json index 920cb819a4a9..70da0f6ff149 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.18.0-rc.2", + "version": "1.18.0", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From ecf5c6a0a96580f6071974277e22634102d56cb0 Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Mon, 2 Oct 2023 01:05:16 -0700 Subject: [PATCH 038/141] Translation Delivery (#7639) chore: translation delivery Change-Id: Ia63798703c44ee58651925bbd3f57043e7568e3a --- .../main/src/i18n/messagebundle_en_US_saprigi.properties | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties index 17f67667c30d..ae9af22b3d53 100644 --- a/packages/main/src/i18n/messagebundle_en_US_saprigi.properties +++ b/packages/main/src/i18n/messagebundle_en_US_saprigi.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=‍‌‍‌‍‍​​‍‍​​‌​ TIMEPICKER_CLOCK_DIAL_LABEL=‌‍​‌‌​​​​‍‌​​​​‌‌‍‍‍‍‌‌‍‍‌​‌‌‍‌‍‍​​‍‍‌‌​Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=‌‍​​‌​‍​‍‌‍​​‌‌‍​​​‍​​​‍‌‌‌‌‍​‍​‍‌‍‍‌​​‌Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=‍‌‍​‌‍‌‌​‍‍​‍‍‌‌‍‌‌‌​​‍​‌​​​​‍‌‌​​‌‌​‍‍‍Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=‌​‍‌‌‌‍‌‌‍‌‍​​‌​‌​‌​‌​‍‌‌‌‍‌​‌​​​‌​‍‍‌‌‍‍Please enter seconds + DURATION_INPUT_DESCRIPTION=‍‍‍‍​‍‌‍​‌‍‌‌‍‌‍‌​​‌​​‍‌‌‍‌‍‍‌‍​‍​‍‍‍‌‍‍Duration Input DATETIME_PICKER_DATE_BUTTON=‌‌‌‌​‌‍‌‌​‍‍‍‌‌‌​‌​‍‍‌‍​‍​‌‍‍‌‍‌‌‍‌‌‌​‌​‍Date From 7b43587253e4873e49211a02a4a3923bc4a819f6 Mon Sep 17 00:00:00 2001 From: Lukas Harbarth Date: Mon, 2 Oct 2023 16:53:18 +0200 Subject: [PATCH 039/141] fix(ui5-label): use correct i18n bundle & make component language aware (#7652) --- packages/main/src/Label.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Label.ts b/packages/main/src/Label.ts index 273801426f1b..a272bbc98f54 100644 --- a/packages/main/src/Label.ts +++ b/packages/main/src/Label.ts @@ -43,6 +43,7 @@ import labelCss from "./generated/themes/Label.css.js"; renderer: litRender, template: LabelTemplate, styles: labelCss, + languageAware: true, }) class Label extends UI5Element { /** @@ -100,7 +101,7 @@ class Label extends UI5Element { static i18nBundle: I18nBundle; static async onDefine() { - Label.i18nBundle = await getI18nBundle("@ui5/webcomponents-fiori"); + Label.i18nBundle = await getI18nBundle("@ui5/webcomponents"); } /** From 6ce7c3315c022c83d35b1121a50ef6fc4bb57dd7 Mon Sep 17 00:00:00 2001 From: Tsanislav Gatev Date: Tue, 3 Oct 2023 17:06:41 +0300 Subject: [PATCH 040/141] fix(ui5-calendar): hide secondary type when same as primary (#7650) fixes: 7557 --- packages/main/src/Calendar.ts | 2 +- packages/main/src/CalendarHeader.ts | 2 +- packages/main/src/DateComponentBase.ts | 4 ++++ packages/main/src/DayPicker.hbs | 2 +- packages/main/src/DayPicker.ts | 9 +++++++-- packages/main/src/MonthPicker.ts | 2 +- packages/main/src/YearPicker.ts | 10 +++++----- packages/main/src/themes/DayPicker.css | 24 +++++++++++------------ packages/main/test/pages/Calendar.html | 5 +++++ packages/main/test/specs/Calendar.spec.js | 18 +++++++++++++++++ 10 files changed, 55 insertions(+), 23 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 38cae1860bbd..ff9c02de82e9 100644 --- a/packages/main/src/Calendar.ts +++ b/packages/main/src/Calendar.ts @@ -397,7 +397,7 @@ class Calendar extends CalendarPart { } get secondaryCalendarTypeButtonText() { - if (!this._secondaryCalendarType) { + if (!this.hasSecondaryCalendarType) { return; } diff --git a/packages/main/src/CalendarHeader.ts b/packages/main/src/CalendarHeader.ts index c851177436c1..ead42669def6 100644 --- a/packages/main/src/CalendarHeader.ts +++ b/packages/main/src/CalendarHeader.ts @@ -188,7 +188,7 @@ class CalendarHeader extends UI5Element { } get hasSecondaryCalendarType() { - return !!this.secondaryCalendarType; + return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType; } get classes() { diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts index ab3031ccddff..497ffd40642b 100644 --- a/packages/main/src/DateComponentBase.ts +++ b/packages/main/src/DateComponentBase.ts @@ -146,6 +146,10 @@ class DateComponentBase extends UI5Element { return this._formatPattern !== "medium" && this._formatPattern !== "short" && this._formatPattern !== "long"; } + get hasSecondaryCalendarType() { + return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType; + } + _getMinMaxCalendarDateFromString(date: string) { if (this.getFormat().parse(date)) { return this._getCalendarDateFromString(date); diff --git a/packages/main/src/DayPicker.hbs b/packages/main/src/DayPicker.hbs index 54b10e8797fd..addbd74d5b70 100644 --- a/packages/main/src/DayPicker.hbs +++ b/packages/main/src/DayPicker.hbs @@ -1,5 +1,5 @@
maxDate.getYear(); - if (this.secondaryCalendarType) { + if (this.hasSecondaryCalendarType) { tempDateInSecType = transformDateToSecondaryType(this._primaryCalendarType, this.secondaryCalendarType, timestamp, true); textInSecType = tempDateInSecType.firstDate.getYear() === tempDateInSecType.lastDate.getYear() ? `${oYearFormatInSecType.format(tempDateInSecType.firstDate.toLocalJSDate(), true)}` @@ -181,7 +181,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { selected: isSelected, ariaSelected: isSelected ? "true" : "false", year: oYearFormat.format(tempDate.toLocalJSDate()), - yearInSecType: this.secondaryCalendarType && textInSecType, + yearInSecType: textInSecType, disabled: isDisabled, classes: "ui5-yp-item", }; @@ -194,7 +194,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { year.classes += " ui5-yp-item--disabled"; } - if (this.secondaryCalendarType) { + if (this.hasSecondaryCalendarType) { year.classes += " ui5-yp-item-secondary-type"; } const intervalIndex = Math.floor(i / this._getRowSize()); diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css index 882a9692e98c..d1f6718cf428 100644 --- a/packages/main/src/themes/DayPicker.css +++ b/packages/main/src/themes/DayPicker.css @@ -11,17 +11,17 @@ flex-basis: 100%; } -:host([secondary-calendar-type]) .ui5-dp-item { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item { flex-direction: column; justify-content: var(--_ui5_day_picker_item_justify_content); } -:host([secondary-calendar-type]) .ui5-dp-daytext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-daytext { height: 1.575rem; padding-top: var(--_ui5_dp_two_calendar_item_text_padding_top) } -:host([secondary-calendar-type]) .ui5-dp-daysectext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-daysectext { font-size: 0.625rem; height: var(--_ui5_dp_two_calendar_item_secondary_text_height); padding: 0 0.375rem 0.375rem 50%; @@ -271,47 +271,47 @@ /* styles for calendar with two types */ -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected:not(.ui5-dp-item.ui5-dp-item--now) .ui5-dp-daytext::after{ +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected:not(.ui5-dp-item.ui5-dp-item--now) .ui5-dp-daytext::after{ border-width: 0.125rem; } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { height: var(--_ui5_dp_two_calendar_item_primary_text_height); padding-top: var(--_ui5_dp_two_calendar_item_now_text_padding_top); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now .ui5-dp-daysectext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now .ui5-dp-daysectext { height: var(--_ui5_dp_two_calendar_item_secondary_text_height); padding-top: 0; border-radius: var(--_ui5_dp_two_calendar_item_secondary_text_border_radios); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item.ui5-dp-item--now .ui5-dp-daytext { border-radius: var(--_ui5_daypicker_two_calendar_item_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item:focus::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item:focus::after { inset: var(--_ui5_daypicker_two_calendar_item_no_selected_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_border_focus_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now::after { inset: var(--_ui5_daypicker_two_calendar_item_no_selected_focus_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_no_select_focus_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected:focus::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected:focus::after { border-width: var(--_ui5_daypicker_two_calendar_item_now_selected_border_width); inset: var(--_ui5_daypicker_two_calendar_item_now_selected_border_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_border_focus_border_radius); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now::after { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now::after { inset: var(--_ui5_daypicker_two_calendar_item_now_inset); border-radius: var(--_ui5_daypicker_two_calendar_item_selected_now_border_radius_focus); } -:host([secondary-calendar-type]) .ui5-dp-item.ui5-dp-item--now.ui5-dp-item--selected.ui5-dp-item--withsecondtype .ui5-dp-daytext:not(.ui5-dp-daysectext)::before { +.ui5-dp-root.ui5-dp-twocalendartypes .ui5-dp-item.ui5-dp-item--now.ui5-dp-item--selected.ui5-dp-item--withsecondtype .ui5-dp-daytext:not(.ui5-dp-daysectext)::before { content: var(--_ui5_daypicker_two_calendar_item_now_day_text_content); position: absolute; inset: 0.3125rem; diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html index 65e8833e33d2..43d799843ec9 100644 --- a/packages/main/test/pages/Calendar.html +++ b/packages/main/test/pages/Calendar.html @@ -76,6 +76,11 @@
+
+ Calendar with same primary and secondary calendar type + +
+ - - - - @@ -191,12 +181,13 @@

DatePicker with format `yyyy` should open picker on years

labelLiveChangePrevent.innerHTML = 'input: ' + JSON.stringify(e.detail); }); - $('#ui5-datepicker--startDate').on('ui5-input change', (function(e) { - var dp = $('#ui5-datepicker--startDate')[0]; + function datePickerInputChangeHandler(e) { + var dp = e.currentTarget; dp.setAttribute('value-state', e.detail.valid ? 'None' : 'Error'); - $('#startDate').val($('#ui5-datepicker--startDate').val()); - $('#startDate').trigger('change'); - })); + } + + document.getElementById('ui5-datepicker--startDate').addEventListener('ui5-input change', datePickerInputChangeHandler); + document.getElementById('ui5-datepicker--startDate').addEventListener('change', datePickerInputChangeHandler); var dp11 = document.getElementById('dp11'); diff --git a/packages/main/test/pages/DayPicker.html b/packages/main/test/pages/DayPicker.html index 03198b255d59..2c56498a3969 100644 --- a/packages/main/test/pages/DayPicker.html +++ b/packages/main/test/pages/DayPicker.html @@ -4,19 +4,8 @@ - - - - - - - - - - - diff --git a/packages/main/test/pages/WheelSlider_Test_Page.html b/packages/main/test/pages/WheelSlider_Test_Page.html index 4228f70cbf38..a03b888947e0 100644 --- a/packages/main/test/pages/WheelSlider_Test_Page.html +++ b/packages/main/test/pages/WheelSlider_Test_Page.html @@ -1,24 +1,15 @@ - - - - - - - - - - - + + + + - + + - - + + + \ No newline at end of file From 7ac1ffd96b109fe7b3ee28d76beebfdac06c2fad Mon Sep 17 00:00:00 2001 From: SAP LX Lab Service Account Date: Thu, 5 Oct 2023 02:00:30 -0700 Subject: [PATCH 045/141] Translation Delivery (#7663) * chore: translation delivery Change-Id: Ib9d66d306332c7cd339631ffeb1a6dbdf8185b25 * chore: translation delivery Change-Id: Idd575d800d7d2eae6e519d01f3fc146fb7b0f92c * chore: translation delivery Change-Id: I010a2013d9bbb35014e12da8f0cbc688fccd5d85 --- packages/main/src/i18n/messagebundle_ar.properties | 6 ++++++ packages/main/src/i18n/messagebundle_bg.properties | 6 ++++++ packages/main/src/i18n/messagebundle_ca.properties | 6 ++++++ packages/main/src/i18n/messagebundle_cs.properties | 6 ++++++ packages/main/src/i18n/messagebundle_cy.properties | 6 ++++++ packages/main/src/i18n/messagebundle_da.properties | 6 ++++++ packages/main/src/i18n/messagebundle_de.properties | 6 ++++++ packages/main/src/i18n/messagebundle_el.properties | 6 ++++++ packages/main/src/i18n/messagebundle_en.properties | 6 ++++++ packages/main/src/i18n/messagebundle_en_GB.properties | 6 ++++++ .../main/src/i18n/messagebundle_en_US_sappsd.properties | 6 ++++++ .../main/src/i18n/messagebundle_en_US_saptrc.properties | 6 ++++++ packages/main/src/i18n/messagebundle_es.properties | 6 ++++++ packages/main/src/i18n/messagebundle_es_MX.properties | 6 ++++++ packages/main/src/i18n/messagebundle_et.properties | 6 ++++++ packages/main/src/i18n/messagebundle_fi.properties | 6 ++++++ packages/main/src/i18n/messagebundle_fr.properties | 6 ++++++ packages/main/src/i18n/messagebundle_fr_CA.properties | 6 ++++++ packages/main/src/i18n/messagebundle_hi.properties | 6 ++++++ packages/main/src/i18n/messagebundle_hr.properties | 6 ++++++ packages/main/src/i18n/messagebundle_hu.properties | 6 ++++++ packages/main/src/i18n/messagebundle_id.properties | 6 ++++++ packages/main/src/i18n/messagebundle_it.properties | 6 ++++++ packages/main/src/i18n/messagebundle_iw.properties | 6 ++++++ packages/main/src/i18n/messagebundle_ja.properties | 6 ++++++ packages/main/src/i18n/messagebundle_kk.properties | 6 ++++++ packages/main/src/i18n/messagebundle_ko.properties | 6 ++++++ packages/main/src/i18n/messagebundle_lt.properties | 6 ++++++ packages/main/src/i18n/messagebundle_lv.properties | 6 ++++++ packages/main/src/i18n/messagebundle_ms.properties | 6 ++++++ packages/main/src/i18n/messagebundle_nl.properties | 6 ++++++ packages/main/src/i18n/messagebundle_no.properties | 6 ++++++ packages/main/src/i18n/messagebundle_pl.properties | 6 ++++++ packages/main/src/i18n/messagebundle_pt.properties | 6 ++++++ packages/main/src/i18n/messagebundle_pt_PT.properties | 6 ++++++ packages/main/src/i18n/messagebundle_ro.properties | 6 ++++++ packages/main/src/i18n/messagebundle_ru.properties | 6 ++++++ packages/main/src/i18n/messagebundle_sh.properties | 6 ++++++ packages/main/src/i18n/messagebundle_sk.properties | 6 ++++++ packages/main/src/i18n/messagebundle_sl.properties | 6 ++++++ packages/main/src/i18n/messagebundle_sv.properties | 6 ++++++ packages/main/src/i18n/messagebundle_th.properties | 6 ++++++ packages/main/src/i18n/messagebundle_tr.properties | 6 ++++++ packages/main/src/i18n/messagebundle_uk.properties | 6 ++++++ packages/main/src/i18n/messagebundle_vi.properties | 6 ++++++ packages/main/src/i18n/messagebundle_zh_CN.properties | 6 ++++++ packages/main/src/i18n/messagebundle_zh_TW.properties | 6 ++++++ 47 files changed, 282 insertions(+) diff --git a/packages/main/src/i18n/messagebundle_ar.properties b/packages/main/src/i18n/messagebundle_ar.properties index 07476b8eff58..c5be2d9d14b5 100644 --- a/packages/main/src/i18n/messagebundle_ar.properties +++ b/packages/main/src/i18n/messagebundle_ar.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=إدخال الوقت TIMEPICKER_CLOCK_DIAL_LABEL=طلب الساعة +TIMEPICKER_INPUTS_ENTER_HOURS=يُرجى إدخال الساعات + +TIMEPICKER_INPUTS_ENTER_MINUTES=يُرجى إدخال الدقائق + +TIMEPICKER_INPUTS_ENTER_SECONDS=يُرجى إدخال الثواني + DURATION_INPUT_DESCRIPTION=إدخال المدة DATETIME_PICKER_DATE_BUTTON=التاريخ diff --git a/packages/main/src/i18n/messagebundle_bg.properties b/packages/main/src/i18n/messagebundle_bg.properties index ff34f66571bf..4cd6b772b820 100644 --- a/packages/main/src/i18n/messagebundle_bg.properties +++ b/packages/main/src/i18n/messagebundle_bg.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Въвеждане на час TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат на часовник +TIMEPICKER_INPUTS_ENTER_HOURS=Моля, въведете час + +TIMEPICKER_INPUTS_ENTER_MINUTES=Моля, въведете минути + +TIMEPICKER_INPUTS_ENTER_SECONDS=Моля, въведете секунди + DURATION_INPUT_DESCRIPTION=Въвеждане на времетраене DATETIME_PICKER_DATE_BUTTON=Дата diff --git a/packages/main/src/i18n/messagebundle_ca.properties b/packages/main/src/i18n/messagebundle_ca.properties index 2e262e0420f9..908bab330d2a 100644 --- a/packages/main/src/i18n/messagebundle_ca.properties +++ b/packages/main/src/i18n/messagebundle_ca.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada d'hora TIMEPICKER_CLOCK_DIAL_LABEL=Esfera de rellotge +TIMEPICKER_INPUTS_ENTER_HOURS=Introduïu les hores + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduïu els minuts + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduïu els segons + DURATION_INPUT_DESCRIPTION=Entrada de durada DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_cs.properties b/packages/main/src/i18n/messagebundle_cs.properties index d58af5933db9..848ca12b8f49 100644 --- a/packages/main/src/i18n/messagebundle_cs.properties +++ b/packages/main/src/i18n/messagebundle_cs.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zadání času TIMEPICKER_CLOCK_DIAL_LABEL=Ciferník hodin +TIMEPICKER_INPUTS_ENTER_HOURS=Zadejte hodiny + +TIMEPICKER_INPUTS_ENTER_MINUTES=Zadejte minuty + +TIMEPICKER_INPUTS_ENTER_SECONDS=Zadejte sekundy + DURATION_INPUT_DESCRIPTION=Zadání trvání DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_cy.properties b/packages/main/src/i18n/messagebundle_cy.properties index 89f9a0964431..0cdc9d97d63a 100644 --- a/packages/main/src/i18n/messagebundle_cy.properties +++ b/packages/main/src/i18n/messagebundle_cy.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Mewnbwn Amser TIMEPICKER_CLOCK_DIAL_LABEL=Deial Cloc +TIMEPICKER_INPUTS_ENTER_HOURS=Rhowch oriau + +TIMEPICKER_INPUTS_ENTER_MINUTES=Rhowch funudau + +TIMEPICKER_INPUTS_ENTER_SECONDS=Rhowch eiliadau + DURATION_INPUT_DESCRIPTION=Mewnbwn Hyd DATETIME_PICKER_DATE_BUTTON=Dyddiad diff --git a/packages/main/src/i18n/messagebundle_da.properties b/packages/main/src/i18n/messagebundle_da.properties index 79e620cfa2f7..54b07d6364ea 100644 --- a/packages/main/src/i18n/messagebundle_da.properties +++ b/packages/main/src/i18n/messagebundle_da.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Tidsinput TIMEPICKER_CLOCK_DIAL_LABEL=Urskive +TIMEPICKER_INPUTS_ENTER_HOURS=Indtast timer + +TIMEPICKER_INPUTS_ENTER_MINUTES=Indtast minutter + +TIMEPICKER_INPUTS_ENTER_SECONDS=Indtast sekunder + DURATION_INPUT_DESCRIPTION=Varighedsinput DATETIME_PICKER_DATE_BUTTON=Dato diff --git a/packages/main/src/i18n/messagebundle_de.properties b/packages/main/src/i18n/messagebundle_de.properties index 09a001870683..35cef980cd12 100644 --- a/packages/main/src/i18n/messagebundle_de.properties +++ b/packages/main/src/i18n/messagebundle_de.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zeiteingabe TIMEPICKER_CLOCK_DIAL_LABEL=Zifferblatt +TIMEPICKER_INPUTS_ENTER_HOURS=Stunde eingeben + +TIMEPICKER_INPUTS_ENTER_MINUTES=Minute eingeben + +TIMEPICKER_INPUTS_ENTER_SECONDS=Sekunde eingeben + DURATION_INPUT_DESCRIPTION=Eingabe der Dauer DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_el.properties b/packages/main/src/i18n/messagebundle_el.properties index 1499569b8841..5fadbb9c2fd6 100644 --- a/packages/main/src/i18n/messagebundle_el.properties +++ b/packages/main/src/i18n/messagebundle_el.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Εισαγωγή Ώρας TIMEPICKER_CLOCK_DIAL_LABEL=Πληκτρολόγηση Ώρας +TIMEPICKER_INPUTS_ENTER_HOURS=Εισαγάγετε ώρες + +TIMEPICKER_INPUTS_ENTER_MINUTES=Εισαγάγετε λεπτά + +TIMEPICKER_INPUTS_ENTER_SECONDS=Εισαγάγετε δευτερόλεπτα + DURATION_INPUT_DESCRIPTION=Εισαγωγή Διάρκειας DATETIME_PICKER_DATE_BUTTON=Ημερομηνία diff --git a/packages/main/src/i18n/messagebundle_en.properties b/packages/main/src/i18n/messagebundle_en.properties index 05ecb2ac10b0..aed010edd0bd 100644 --- a/packages/main/src/i18n/messagebundle_en.properties +++ b/packages/main/src/i18n/messagebundle_en.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Time Input TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds + DURATION_INPUT_DESCRIPTION=Duration Input DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_en_GB.properties b/packages/main/src/i18n/messagebundle_en_GB.properties index b3c90f0b0a92..477ecbf1e6dc 100644 --- a/packages/main/src/i18n/messagebundle_en_GB.properties +++ b/packages/main/src/i18n/messagebundle_en_GB.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Time Input TIMEPICKER_CLOCK_DIAL_LABEL=Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Please enter seconds + DURATION_INPUT_DESCRIPTION=Duration Input DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties index 4293aa952876..9878a22c5d84 100644 --- a/packages/main/src/i18n/messagebundle_en_US_sappsd.properties +++ b/packages/main/src/i18n/messagebundle_en_US_sappsd.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=[[[Ţįɱē Ĭŋρűţ∙∙∙∙]]] TIMEPICKER_CLOCK_DIAL_LABEL=[[[Ĉĺŏċķ Ďįąĺ∙∙∙∙]]] +TIMEPICKER_INPUTS_ENTER_HOURS=[[[Ƥĺēąşē ēŋţēŗ ĥŏűŗş∙∙∙∙∙∙]]] + +TIMEPICKER_INPUTS_ENTER_MINUTES=[[[Ƥĺēąşē ēŋţēŗ ɱįŋűţēş∙∙∙∙]]] + +TIMEPICKER_INPUTS_ENTER_SECONDS=[[[Ƥĺēąşē ēŋţēŗ şēċŏŋƌş∙∙∙∙]]] + DURATION_INPUT_DESCRIPTION=[[[Ďűŗąţįŏŋ Ĭŋρűţ∙∙∙∙∙]]] DATETIME_PICKER_DATE_BUTTON=[[[Ďąţē]]] diff --git a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties index 5eb06d809ffa..2a33b6a5f395 100644 --- a/packages/main/src/i18n/messagebundle_en_US_saptrc.properties +++ b/packages/main/src/i18n/messagebundle_en_US_saptrc.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=5W4XgHn2RMpCgiWpkl9+Mw_Time Input TIMEPICKER_CLOCK_DIAL_LABEL=3lW27/s9KRCchbQWqvbpSA_Clock Dial +TIMEPICKER_INPUTS_ENTER_HOURS=lytu6KNiQJf+Pnh1NITTlg_Please enter hours + +TIMEPICKER_INPUTS_ENTER_MINUTES=QOX3PgnJlZu5vF7uJSD+Bg_Please enter minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=eFXFsAUwdVRuFFGNqfQ8zw_Please enter seconds + DURATION_INPUT_DESCRIPTION=K8i+jptpLJGMAFLNWV5O5A_Duration Input DATETIME_PICKER_DATE_BUTTON=WMB6EthjmUNV8kYnBWYsPA_Date diff --git a/packages/main/src/i18n/messagebundle_es.properties b/packages/main/src/i18n/messagebundle_es.properties index 0b96acf63407..b7529c55793a 100644 --- a/packages/main/src/i18n/messagebundle_es.properties +++ b/packages/main/src/i18n/messagebundle_es.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada de hora TIMEPICKER_CLOCK_DIAL_LABEL=Esfera de reloj +TIMEPICKER_INPUTS_ENTER_HOURS=Introduzca las horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduzca los minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduzca los segundos + DURATION_INPUT_DESCRIPTION=Entrada de duración DATETIME_PICKER_DATE_BUTTON=Fecha diff --git a/packages/main/src/i18n/messagebundle_es_MX.properties b/packages/main/src/i18n/messagebundle_es_MX.properties index e326543356ef..159e3f58ad12 100644 --- a/packages/main/src/i18n/messagebundle_es_MX.properties +++ b/packages/main/src/i18n/messagebundle_es_MX.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada de hora TIMEPICKER_CLOCK_DIAL_LABEL=Esfera de reloj +TIMEPICKER_INPUTS_ENTER_HOURS=Ingrese las horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Ingrese los minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Ingrese los segundos + DURATION_INPUT_DESCRIPTION=Entrada de duración DATETIME_PICKER_DATE_BUTTON=Fecha diff --git a/packages/main/src/i18n/messagebundle_et.properties b/packages/main/src/i18n/messagebundle_et.properties index 916d9af6d99a..06a5f1e83041 100644 --- a/packages/main/src/i18n/messagebundle_et.properties +++ b/packages/main/src/i18n/messagebundle_et.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Kellaajasisend TIMEPICKER_CLOCK_DIAL_LABEL=Kella numbrilaud +TIMEPICKER_INPUTS_ENTER_HOURS=Sisestage tunnid + +TIMEPICKER_INPUTS_ENTER_MINUTES=Sisestage minutid + +TIMEPICKER_INPUTS_ENTER_SECONDS=Sisestage sekundid + DURATION_INPUT_DESCRIPTION=Kestusesisend DATETIME_PICKER_DATE_BUTTON=Kuupäev diff --git a/packages/main/src/i18n/messagebundle_fi.properties b/packages/main/src/i18n/messagebundle_fi.properties index 692935e741b3..800da47bea94 100644 --- a/packages/main/src/i18n/messagebundle_fi.properties +++ b/packages/main/src/i18n/messagebundle_fi.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Ajan syöttö TIMEPICKER_CLOCK_DIAL_LABEL=Kellotaulu +TIMEPICKER_INPUTS_ENTER_HOURS=Syötä tunnit + +TIMEPICKER_INPUTS_ENTER_MINUTES=Syötä minuutit + +TIMEPICKER_INPUTS_ENTER_SECONDS=Syötä sekunnit + DURATION_INPUT_DESCRIPTION=Keston syöttö DATETIME_PICKER_DATE_BUTTON=Päivämäärä diff --git a/packages/main/src/i18n/messagebundle_fr.properties b/packages/main/src/i18n/messagebundle_fr.properties index 35a0202bc1d6..68162210347b 100644 --- a/packages/main/src/i18n/messagebundle_fr.properties +++ b/packages/main/src/i18n/messagebundle_fr.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Saisie de l'heure TIMEPICKER_CLOCK_DIAL_LABEL=Cadran horloge +TIMEPICKER_INPUTS_ENTER_HOURS=Entrez les heures. + +TIMEPICKER_INPUTS_ENTER_MINUTES=Entrez les minutes. + +TIMEPICKER_INPUTS_ENTER_SECONDS=Entrez les secondes. + DURATION_INPUT_DESCRIPTION=Saisie de la durée DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_fr_CA.properties b/packages/main/src/i18n/messagebundle_fr_CA.properties index ccb7f45a56a9..907826c6dd85 100644 --- a/packages/main/src/i18n/messagebundle_fr_CA.properties +++ b/packages/main/src/i18n/messagebundle_fr_CA.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Saisie de l'heure TIMEPICKER_CLOCK_DIAL_LABEL=Cadran horloge +TIMEPICKER_INPUTS_ENTER_HOURS=Saisissez les heures. + +TIMEPICKER_INPUTS_ENTER_MINUTES=Saisissez les minutes. + +TIMEPICKER_INPUTS_ENTER_SECONDS=Saisissez les secondes. + DURATION_INPUT_DESCRIPTION=Saisie de la durée DATETIME_PICKER_DATE_BUTTON=Date diff --git a/packages/main/src/i18n/messagebundle_hi.properties b/packages/main/src/i18n/messagebundle_hi.properties index 2587829c66d0..74abf2fbf7ac 100644 --- a/packages/main/src/i18n/messagebundle_hi.properties +++ b/packages/main/src/i18n/messagebundle_hi.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=समय इनपुट TIMEPICKER_CLOCK_DIAL_LABEL=क्लॉक डायल +TIMEPICKER_INPUTS_ENTER_HOURS=कृपया घंटे दर्ज करें + +TIMEPICKER_INPUTS_ENTER_MINUTES=कृपया मिनट दर्ज करें + +TIMEPICKER_INPUTS_ENTER_SECONDS=कृपया सेकंड दर्ज करें + DURATION_INPUT_DESCRIPTION=अवधि इनपुट DATETIME_PICKER_DATE_BUTTON=दिनांक diff --git a/packages/main/src/i18n/messagebundle_hr.properties b/packages/main/src/i18n/messagebundle_hr.properties index 85de2a211d10..d46ee90ea38a 100644 --- a/packages/main/src/i18n/messagebundle_hr.properties +++ b/packages/main/src/i18n/messagebundle_hr.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Unos vremena TIMEPICKER_CLOCK_DIAL_LABEL=Brojčanik sata +TIMEPICKER_INPUTS_ENTER_HOURS=Unesite sate + +TIMEPICKER_INPUTS_ENTER_MINUTES=Unesite minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Unesite sekunde + DURATION_INPUT_DESCRIPTION=Unos trajanja DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_hu.properties b/packages/main/src/i18n/messagebundle_hu.properties index c461671a6794..c8e1ffcb6315 100644 --- a/packages/main/src/i18n/messagebundle_hu.properties +++ b/packages/main/src/i18n/messagebundle_hu.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Idő bevitele TIMEPICKER_CLOCK_DIAL_LABEL=Óraszámlap +TIMEPICKER_INPUTS_ENTER_HOURS=Adja meg az órákat + +TIMEPICKER_INPUTS_ENTER_MINUTES=Adja meg a perceket + +TIMEPICKER_INPUTS_ENTER_SECONDS=Adja meg a másodperceket + DURATION_INPUT_DESCRIPTION=Időtartam bevitele DATETIME_PICKER_DATE_BUTTON=Dátum diff --git a/packages/main/src/i18n/messagebundle_id.properties b/packages/main/src/i18n/messagebundle_id.properties index 107e9e892f59..5b754396e810 100644 --- a/packages/main/src/i18n/messagebundle_id.properties +++ b/packages/main/src/i18n/messagebundle_id.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Input Waktu TIMEPICKER_CLOCK_DIAL_LABEL=Tampilan Jam +TIMEPICKER_INPUTS_ENTER_HOURS=Harap masukkan jam + +TIMEPICKER_INPUTS_ENTER_MINUTES=Harap masukkan menit + +TIMEPICKER_INPUTS_ENTER_SECONDS=Harap masukkan detik + DURATION_INPUT_DESCRIPTION=Input Durasi DATETIME_PICKER_DATE_BUTTON=Tanggal diff --git a/packages/main/src/i18n/messagebundle_it.properties b/packages/main/src/i18n/messagebundle_it.properties index 6f0a310059b7..13afa91768f0 100644 --- a/packages/main/src/i18n/messagebundle_it.properties +++ b/packages/main/src/i18n/messagebundle_it.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Inserimento ora TIMEPICKER_CLOCK_DIAL_LABEL=Quadrante dell’orologio +TIMEPICKER_INPUTS_ENTER_HOURS=Inserisci ore + +TIMEPICKER_INPUTS_ENTER_MINUTES=Inserisci minuti + +TIMEPICKER_INPUTS_ENTER_SECONDS=Inserisci secondi + DURATION_INPUT_DESCRIPTION=Inserimento durata DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_iw.properties b/packages/main/src/i18n/messagebundle_iw.properties index 5e118640dff0..ffbe6a8f7254 100644 --- a/packages/main/src/i18n/messagebundle_iw.properties +++ b/packages/main/src/i18n/messagebundle_iw.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=קלט של שעה TIMEPICKER_CLOCK_DIAL_LABEL=מחוגה של שעון +TIMEPICKER_INPUTS_ENTER_HOURS=הזן שעות + +TIMEPICKER_INPUTS_ENTER_MINUTES=הזן דקות + +TIMEPICKER_INPUTS_ENTER_SECONDS=הזן שניות + DURATION_INPUT_DESCRIPTION=קלט של משך זמן DATETIME_PICKER_DATE_BUTTON=תאריך diff --git a/packages/main/src/i18n/messagebundle_ja.properties b/packages/main/src/i18n/messagebundle_ja.properties index 8ba1bff4f150..71bd73d5a070 100644 --- a/packages/main/src/i18n/messagebundle_ja.properties +++ b/packages/main/src/i18n/messagebundle_ja.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=時刻入力 TIMEPICKER_CLOCK_DIAL_LABEL=時計ダイアル +TIMEPICKER_INPUTS_ENTER_HOURS=時間数を入力してください + +TIMEPICKER_INPUTS_ENTER_MINUTES=分数を入力してください + +TIMEPICKER_INPUTS_ENTER_SECONDS=秒数を入力してください + DURATION_INPUT_DESCRIPTION=期間入力 DATETIME_PICKER_DATE_BUTTON=日付 diff --git a/packages/main/src/i18n/messagebundle_kk.properties b/packages/main/src/i18n/messagebundle_kk.properties index 7b62e06fa1ca..2f229455ac6f 100644 --- a/packages/main/src/i18n/messagebundle_kk.properties +++ b/packages/main/src/i18n/messagebundle_kk.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Уақыт енгізу TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат +TIMEPICKER_INPUTS_ENTER_HOURS=Сағаттар енгізіңіз + +TIMEPICKER_INPUTS_ENTER_MINUTES=Минуттар енгізіңіз + +TIMEPICKER_INPUTS_ENTER_SECONDS=Секундтар енгізіңіз + DURATION_INPUT_DESCRIPTION=Ұзақтық енгізу DATETIME_PICKER_DATE_BUTTON=Күні diff --git a/packages/main/src/i18n/messagebundle_ko.properties b/packages/main/src/i18n/messagebundle_ko.properties index abe5631e5d96..709ae258527b 100644 --- a/packages/main/src/i18n/messagebundle_ko.properties +++ b/packages/main/src/i18n/messagebundle_ko.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=시간 입력 TIMEPICKER_CLOCK_DIAL_LABEL=시계 다이얼 +TIMEPICKER_INPUTS_ENTER_HOURS=시간을 입력하십시오. + +TIMEPICKER_INPUTS_ENTER_MINUTES=분을 입력하십시오. + +TIMEPICKER_INPUTS_ENTER_SECONDS=초를 입력하십시오. + DURATION_INPUT_DESCRIPTION=기간 입력 DATETIME_PICKER_DATE_BUTTON=일자 diff --git a/packages/main/src/i18n/messagebundle_lt.properties b/packages/main/src/i18n/messagebundle_lt.properties index b83c4328d965..6cc3a572d26a 100644 --- a/packages/main/src/i18n/messagebundle_lt.properties +++ b/packages/main/src/i18n/messagebundle_lt.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Laiko įvestis TIMEPICKER_CLOCK_DIAL_LABEL=Laikrodžio ciferblatas +TIMEPICKER_INPUTS_ENTER_HOURS=Įveskite valandas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Įveskite minutes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Įveskite sekundes + DURATION_INPUT_DESCRIPTION=Trukmės įvestis DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_lv.properties b/packages/main/src/i18n/messagebundle_lv.properties index 6e3fcdcc76d3..1df916bb67d7 100644 --- a/packages/main/src/i18n/messagebundle_lv.properties +++ b/packages/main/src/i18n/messagebundle_lv.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Laika ievade TIMEPICKER_CLOCK_DIAL_LABEL=Pulksteņiezvane +TIMEPICKER_INPUTS_ENTER_HOURS=Lūdzu, ievadīt stundas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Lūdzu, ievadīt minūtes + +TIMEPICKER_INPUTS_ENTER_SECONDS=Lūdzu, ievadīt sekundes + DURATION_INPUT_DESCRIPTION=Ilguma ievade DATETIME_PICKER_DATE_BUTTON=Datums diff --git a/packages/main/src/i18n/messagebundle_ms.properties b/packages/main/src/i18n/messagebundle_ms.properties index a082cbe2b68f..6463732cbe8d 100644 --- a/packages/main/src/i18n/messagebundle_ms.properties +++ b/packages/main/src/i18n/messagebundle_ms.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Input Masa TIMEPICKER_CLOCK_DIAL_LABEL=Dail Jam +TIMEPICKER_INPUTS_ENTER_HOURS=Sila masukkan jam + +TIMEPICKER_INPUTS_ENTER_MINUTES=Sila masukkan minit + +TIMEPICKER_INPUTS_ENTER_SECONDS=Sila masukkan saat + DURATION_INPUT_DESCRIPTION=Input Jangka Masa DATETIME_PICKER_DATE_BUTTON=Tarikh diff --git a/packages/main/src/i18n/messagebundle_nl.properties b/packages/main/src/i18n/messagebundle_nl.properties index 689f473778c0..21bb269dcc92 100644 --- a/packages/main/src/i18n/messagebundle_nl.properties +++ b/packages/main/src/i18n/messagebundle_nl.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Tijdinvoer TIMEPICKER_CLOCK_DIAL_LABEL=Wijzerplaat van klok +TIMEPICKER_INPUTS_ENTER_HOURS=Uren invoeren + +TIMEPICKER_INPUTS_ENTER_MINUTES=Minuten invoeren + +TIMEPICKER_INPUTS_ENTER_SECONDS=Seconden invoeren + DURATION_INPUT_DESCRIPTION=Duurinvoer DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_no.properties b/packages/main/src/i18n/messagebundle_no.properties index b8e143a6b099..d78e9d36fcf2 100644 --- a/packages/main/src/i18n/messagebundle_no.properties +++ b/packages/main/src/i18n/messagebundle_no.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Inntasting av tidspunkt TIMEPICKER_CLOCK_DIAL_LABEL=Urskive +TIMEPICKER_INPUTS_ENTER_HOURS=Oppgi timer + +TIMEPICKER_INPUTS_ENTER_MINUTES=Oppgi minutter + +TIMEPICKER_INPUTS_ENTER_SECONDS=Oppgi sekunder + DURATION_INPUT_DESCRIPTION=Inntasting av varighet DATETIME_PICKER_DATE_BUTTON=Dato diff --git a/packages/main/src/i18n/messagebundle_pl.properties b/packages/main/src/i18n/messagebundle_pl.properties index 451d20215f07..6bd7cff8ab77 100644 --- a/packages/main/src/i18n/messagebundle_pl.properties +++ b/packages/main/src/i18n/messagebundle_pl.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Wpis czasu TIMEPICKER_CLOCK_DIAL_LABEL=Tarcza zegara +TIMEPICKER_INPUTS_ENTER_HOURS=Wprowadź godziny + +TIMEPICKER_INPUTS_ENTER_MINUTES=Wprowadź minuty + +TIMEPICKER_INPUTS_ENTER_SECONDS=Wprowadź sekundy + DURATION_INPUT_DESCRIPTION=Wpis czasu trwania DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_pt.properties b/packages/main/src/i18n/messagebundle_pt.properties index f41e5f826e91..d7c2080277c3 100644 --- a/packages/main/src/i18n/messagebundle_pt.properties +++ b/packages/main/src/i18n/messagebundle_pt.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Entrada de hora TIMEPICKER_CLOCK_DIAL_LABEL=Relógio +TIMEPICKER_INPUTS_ENTER_HOURS=Insira horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Insira minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Insira segundos + DURATION_INPUT_DESCRIPTION=Entrada de duração DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_pt_PT.properties b/packages/main/src/i18n/messagebundle_pt_PT.properties index a2ceb135bf57..b6585d625e3a 100644 --- a/packages/main/src/i18n/messagebundle_pt_PT.properties +++ b/packages/main/src/i18n/messagebundle_pt_PT.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Introdução de hora TIMEPICKER_CLOCK_DIAL_LABEL=Mostrador de relógio +TIMEPICKER_INPUTS_ENTER_HOURS=Introduza horas + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduza minutos + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduza segundos + DURATION_INPUT_DESCRIPTION=Introdução de duração DATETIME_PICKER_DATE_BUTTON=Data diff --git a/packages/main/src/i18n/messagebundle_ro.properties b/packages/main/src/i18n/messagebundle_ro.properties index d3ae62238005..6a7379ebbdce 100644 --- a/packages/main/src/i18n/messagebundle_ro.properties +++ b/packages/main/src/i18n/messagebundle_ro.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Intrare oră TIMEPICKER_CLOCK_DIAL_LABEL=Cadran orar +TIMEPICKER_INPUTS_ENTER_HOURS=Introduceți ore + +TIMEPICKER_INPUTS_ENTER_MINUTES=Introduceți minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Introduceți secunde + DURATION_INPUT_DESCRIPTION=Intrare durată DATETIME_PICKER_DATE_BUTTON=Dată diff --git a/packages/main/src/i18n/messagebundle_ru.properties b/packages/main/src/i18n/messagebundle_ru.properties index c75690204acb..a18e9c68ff65 100644 --- a/packages/main/src/i18n/messagebundle_ru.properties +++ b/packages/main/src/i18n/messagebundle_ru.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Ввод времени TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат +TIMEPICKER_INPUTS_ENTER_HOURS=Введите часы + +TIMEPICKER_INPUTS_ENTER_MINUTES=Введите минуты + +TIMEPICKER_INPUTS_ENTER_SECONDS=Введите секунды + DURATION_INPUT_DESCRIPTION=Ввод продолжительности DATETIME_PICKER_DATE_BUTTON=Дата diff --git a/packages/main/src/i18n/messagebundle_sh.properties b/packages/main/src/i18n/messagebundle_sh.properties index bdbc298ff246..e56a23c33851 100644 --- a/packages/main/src/i18n/messagebundle_sh.properties +++ b/packages/main/src/i18n/messagebundle_sh.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Unos vremena TIMEPICKER_CLOCK_DIAL_LABEL=Brojčanik sata +TIMEPICKER_INPUTS_ENTER_HOURS=Unesite sate + +TIMEPICKER_INPUTS_ENTER_MINUTES=Unesite minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Unesite sekunde + DURATION_INPUT_DESCRIPTION=Unos trajanja DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_sk.properties b/packages/main/src/i18n/messagebundle_sk.properties index 627a7bfc2697..64cc5b126fd8 100644 --- a/packages/main/src/i18n/messagebundle_sk.properties +++ b/packages/main/src/i18n/messagebundle_sk.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zadanie času TIMEPICKER_CLOCK_DIAL_LABEL=Ciferník hodín +TIMEPICKER_INPUTS_ENTER_HOURS=Zadajte hodiny + +TIMEPICKER_INPUTS_ENTER_MINUTES=Zadajte minúty + +TIMEPICKER_INPUTS_ENTER_SECONDS=Zadajte sekundy + DURATION_INPUT_DESCRIPTION=Zadanie trvania DATETIME_PICKER_DATE_BUTTON=Dátum diff --git a/packages/main/src/i18n/messagebundle_sl.properties b/packages/main/src/i18n/messagebundle_sl.properties index aba53b26137b..ac130f1433c4 100644 --- a/packages/main/src/i18n/messagebundle_sl.properties +++ b/packages/main/src/i18n/messagebundle_sl.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Vnos časa TIMEPICKER_CLOCK_DIAL_LABEL=Številčnica ure +TIMEPICKER_INPUTS_ENTER_HOURS=Vnesite ure + +TIMEPICKER_INPUTS_ENTER_MINUTES=Vnesite minute + +TIMEPICKER_INPUTS_ENTER_SECONDS=Vnesite sekunde + DURATION_INPUT_DESCRIPTION=Vnos trajanja DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_sv.properties b/packages/main/src/i18n/messagebundle_sv.properties index 6f50eaada025..fb45687411ba 100644 --- a/packages/main/src/i18n/messagebundle_sv.properties +++ b/packages/main/src/i18n/messagebundle_sv.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Tidsinmatning TIMEPICKER_CLOCK_DIAL_LABEL=Urtavla +TIMEPICKER_INPUTS_ENTER_HOURS=Ange timmar + +TIMEPICKER_INPUTS_ENTER_MINUTES=Ange minuter + +TIMEPICKER_INPUTS_ENTER_SECONDS=Ange sekunder + DURATION_INPUT_DESCRIPTION=Tidslängdsinmatning DATETIME_PICKER_DATE_BUTTON=Datum diff --git a/packages/main/src/i18n/messagebundle_th.properties b/packages/main/src/i18n/messagebundle_th.properties index f279c79aacd0..c864e7241b85 100644 --- a/packages/main/src/i18n/messagebundle_th.properties +++ b/packages/main/src/i18n/messagebundle_th.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=การป้อนข้อมูลเวลา TIMEPICKER_CLOCK_DIAL_LABEL=หน้าปัดนาฬิกา +TIMEPICKER_INPUTS_ENTER_HOURS=กรุณาป้อนชั่วโมง + +TIMEPICKER_INPUTS_ENTER_MINUTES=กรุณาป้อนนาที + +TIMEPICKER_INPUTS_ENTER_SECONDS=กรุณาป้อนวินาที + DURATION_INPUT_DESCRIPTION=การป้อนข้อมูลระยะเวลา DATETIME_PICKER_DATE_BUTTON=วันที่ diff --git a/packages/main/src/i18n/messagebundle_tr.properties b/packages/main/src/i18n/messagebundle_tr.properties index 18e48a3e0fe0..edf5b32396c0 100644 --- a/packages/main/src/i18n/messagebundle_tr.properties +++ b/packages/main/src/i18n/messagebundle_tr.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Zaman girişi TIMEPICKER_CLOCK_DIAL_LABEL=Saat kadranı +TIMEPICKER_INPUTS_ENTER_HOURS=Saat girin + +TIMEPICKER_INPUTS_ENTER_MINUTES=Dakika girin + +TIMEPICKER_INPUTS_ENTER_SECONDS=Saniye girin + DURATION_INPUT_DESCRIPTION=Süre girişi DATETIME_PICKER_DATE_BUTTON=Tarih diff --git a/packages/main/src/i18n/messagebundle_uk.properties b/packages/main/src/i18n/messagebundle_uk.properties index 2e8d0ff19394..64f4e1f27889 100644 --- a/packages/main/src/i18n/messagebundle_uk.properties +++ b/packages/main/src/i18n/messagebundle_uk.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Введення часу TIMEPICKER_CLOCK_DIAL_LABEL=Циферблат +TIMEPICKER_INPUTS_ENTER_HOURS=Введіть години + +TIMEPICKER_INPUTS_ENTER_MINUTES=Введіть хвилини + +TIMEPICKER_INPUTS_ENTER_SECONDS=Введіть секунди + DURATION_INPUT_DESCRIPTION=Введення тривалості DATETIME_PICKER_DATE_BUTTON=Дата diff --git a/packages/main/src/i18n/messagebundle_vi.properties b/packages/main/src/i18n/messagebundle_vi.properties index 06fcc0e24d94..93daa84cba0e 100644 --- a/packages/main/src/i18n/messagebundle_vi.properties +++ b/packages/main/src/i18n/messagebundle_vi.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=Nhập thời gian TIMEPICKER_CLOCK_DIAL_LABEL=Quay số đồng hồ +TIMEPICKER_INPUTS_ENTER_HOURS=Vui lòng nhập giờ + +TIMEPICKER_INPUTS_ENTER_MINUTES=Vui lòng nhập phút + +TIMEPICKER_INPUTS_ENTER_SECONDS=Vui lòng nhập giây + DURATION_INPUT_DESCRIPTION=Nhập khoảng thời gian DATETIME_PICKER_DATE_BUTTON=Ngày diff --git a/packages/main/src/i18n/messagebundle_zh_CN.properties b/packages/main/src/i18n/messagebundle_zh_CN.properties index 15fd781bf37a..b84bebbd81f1 100644 --- a/packages/main/src/i18n/messagebundle_zh_CN.properties +++ b/packages/main/src/i18n/messagebundle_zh_CN.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=时间输入 TIMEPICKER_CLOCK_DIAL_LABEL=钟表盘 +TIMEPICKER_INPUTS_ENTER_HOURS=请输入小时 + +TIMEPICKER_INPUTS_ENTER_MINUTES=请输入分钟 + +TIMEPICKER_INPUTS_ENTER_SECONDS=请输入秒 + DURATION_INPUT_DESCRIPTION=持续时间输入 DATETIME_PICKER_DATE_BUTTON=日期 diff --git a/packages/main/src/i18n/messagebundle_zh_TW.properties b/packages/main/src/i18n/messagebundle_zh_TW.properties index 85ca21485511..40bca29281cb 100644 --- a/packages/main/src/i18n/messagebundle_zh_TW.properties +++ b/packages/main/src/i18n/messagebundle_zh_TW.properties @@ -225,6 +225,12 @@ TIMEPICKER_INPUT_DESCRIPTION=時間輸入 TIMEPICKER_CLOCK_DIAL_LABEL=鐘面 +TIMEPICKER_INPUTS_ENTER_HOURS=請輸入小時 + +TIMEPICKER_INPUTS_ENTER_MINUTES=請輸入分鐘 + +TIMEPICKER_INPUTS_ENTER_SECONDS=請輸入秒數 + DURATION_INPUT_DESCRIPTION=持續期輸入 DATETIME_PICKER_DATE_BUTTON=日期 From ff04434c9c00b29367faff22d187edb55186eccd Mon Sep 17 00:00:00 2001 From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com> Date: Thu, 5 Oct 2023 16:10:04 +0300 Subject: [PATCH 046/141] fix(ui5-shellbar): horizon theme update (#7623) --- packages/fiori/src/themes/ShellBar.css | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/fiori/src/themes/ShellBar.css b/packages/fiori/src/themes/ShellBar.css index 11e53b6edef0..7934422ffc9a 100644 --- a/packages/fiori/src/themes/ShellBar.css +++ b/packages/fiori/src/themes/ShellBar.css @@ -32,8 +32,8 @@ height: 2.25rem; padding: 0; margin-inline-start: 0.5rem; - border: none; - background: transparent; + border: 0.0625rem solid var(--sapButton_Lite_BorderColor); + background: var(--sapButton_Lite_Background); outline-color: var(--_ui5_shellbar_logo_outline_color); color: var(--sapShell_TextColor); box-sizing: border-box; @@ -59,13 +59,8 @@ .ui5-shellbar-button:hover, .ui5-shellbar-image-button:hover { background: var(--sapShell_Hover_Background); -} - - -::slotted([ui5-button][slot="startButton"]:hover), -.ui5-shellbar-button:hover, -.ui5-shellbar-menu-button.ui5-shellbar-menu-button--interactive:hover { - box-shadow: var(--_ui5_shellbar_button_box_shadow); + border-color: var(--sapButton_Lite_Hover_BorderColor); + color: var(--sapShell_TextColor); } ::slotted([ui5-button][slot="startButton"][active]), @@ -73,6 +68,7 @@ .ui5-shellbar-button[active], .ui5-shellbar-image-button:active { background: var(--sapShell_Active_Background); + border-color: var(--sapButton_Lite_Active_BorderColor); color: var(--_ui5_shellbar_button_active_color); } From a14d57c2c25c714983ee3cb0899c8ec72a677b55 Mon Sep 17 00:00:00 2001 From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com> Date: Mon, 9 Oct 2023 13:48:43 +0300 Subject: [PATCH 047/141] fix(ui5-shellbar): often failing unit test (#7677) Fixes: #7673 --- packages/fiori/test/specs/ShellBar.spec.js | 34 ++++++++++------------ 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/packages/fiori/test/specs/ShellBar.spec.js b/packages/fiori/test/specs/ShellBar.spec.js index c99bf665944e..5646c218867e 100644 --- a/packages/fiori/test/specs/ShellBar.spec.js +++ b/packages/fiori/test/specs/ShellBar.spec.js @@ -21,7 +21,7 @@ const getCustomActionProp = async (id, pos, prop) => { } describe("Component Behavior", () => { - before(async () => { + beforeEach(async () => { await browser.url(`test/pages/ShellBar.html`); }); @@ -38,8 +38,7 @@ describe("Component Behavior", () => { }); it("tests acc default roles", async () => { - let sb = await browser.$("#sbAcc"); - + const sb = await browser.$("#sbAcc"); const logoDOM = await sb.shadow$(".ui5-shellbar-logo"); // assert @@ -48,8 +47,7 @@ describe("Component Behavior", () => { }); it("tests acc custom roles", async () => { - let sb = await browser.$("#sbAccRoles"); - + const sb = await browser.$("#sbAccRoles"); const logoDOM = await sb.shadow$(".ui5-shellbar-logo"); // assertHANDLE_RESIZE_DEBOUNCE_RATE_WAIT @@ -69,7 +67,7 @@ describe("Component Behavior", () => { describe("ui5-shellbar menu", () => { it("tests close on content click", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); const firstMenuItem = await menuPopover.$("ui5-list > ui5-li"); @@ -80,7 +78,6 @@ describe("Component Behavior", () => { }); }); - describe("ui5-shellbar-item", async () => { it("tests the stable-dom-ref attribute", async () => { const shellbar = await browser.$("#shellbarwithitems"); @@ -321,13 +318,13 @@ describe("Component Behavior", () => { describe("Events", () => { describe("Big screen", () => { - before(async () => { + beforeEach(async () => { await browser.setWindowSize(1920, 1080); }); it("tests opening of menu", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); await primaryTitle.click(); @@ -339,8 +336,6 @@ describe("Component Behavior", () => { const input = await browser.$("#press-input"); await notificationsIcon.click(); - - assert.strictEqual(await input.getValue(), "Notifications", "Input value is set by click event of Notifications icon"); }); @@ -378,7 +373,7 @@ describe("Component Behavior", () => { it("tests menuItemClick event", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); const firstMenuItem = await menuPopover.$("ui5-list > ui5-li"); const secondMenuItem = await menuPopover.$("ui5-list > ui5-li:nth-child(2)"); @@ -391,6 +386,9 @@ describe("Component Behavior", () => { assert.strictEqual(await input.getValue(), "Application 1", "Input value is set by click event of the first menu item"); assert.strictEqual(await inputData.getValue(), "key1", "The user defined attributes are available."); + await input.setProperty("value", ""); + await inputData.setProperty("value", ""); + await primaryTitle.click(); await secondMenuItem.click(); @@ -424,7 +422,7 @@ describe("Component Behavior", () => { }); describe("Small screen", () => { - before(async () => { + beforeEach(async () => { await browser.setWindowSize(510, 1080); }); @@ -439,7 +437,7 @@ describe("Component Behavior", () => { it("tests opening of menu", async () => { const primaryTitle = await browser.$("#shellbar").shadow$(".ui5-shellbar-menu-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const menuPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-menu-popover"); await primaryTitle.click(); @@ -448,7 +446,7 @@ describe("Component Behavior", () => { it("tests notificationsClick event", async () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const notificationListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(4)"); const input = await browser.$("#press-input"); @@ -470,7 +468,7 @@ describe("Component Behavior", () => { it("tests productSwitchClick event", async () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(5)"); const input = await browser.$("#press-input"); @@ -483,7 +481,7 @@ describe("Component Behavior", () => { it("tests preventDefault of productSwitchClick event", async () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const productSwitchIcon = await overflowPopover.$("ui5-list ui5-li:nth-child(5)"); @@ -497,7 +495,7 @@ describe("Component Behavior", () => { const overflowButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-overflow-button"); const searchField = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-full-width-wrapper"); const cancelButton = await browser.$("#shellbar").shadow$(".ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button"); - const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar") + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#shellbar"); const overflowPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-shellbar-overflow-popover"); const searchListItem = await overflowPopover.$("ui5-list ui5-li:nth-child(1)"); From 6983f71acdaf3f94215d0fb86d9558db5b0b2887 Mon Sep 17 00:00:00 2001 From: Stoyan <88034608+hinzzx@users.noreply.github.com> Date: Mon, 9 Oct 2023 14:08:43 +0300 Subject: [PATCH 048/141] feat(ui5-color-palette-item): add selected state (#7598) We are introducing a *selected* property to the **. This enhancement allows users to explicitly set a *selected state* to any **. For example, previously the first item was always on focus when opening the **. Additionally, when one item is *selected*, any previously selected item will be deselected, ensuring that only one item can be selected within a ** at any given time. The selected state could be set either by: - Setting it explicitly by using the *selected* property; - By right-clicking on a with the mouse; - By pressing Enter or Space upon focused ; --- 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 | 15 ++-- packages/main/test/specs/ColorPalette.spec.js | 29 ++++++- 9 files changed, 201 insertions(+), 23 deletions(-) diff --git a/packages/main/src/ColorPalette.ts b/packages/main/src/ColorPalette.ts index 44dc5987541e..97d743dd5e36 100644 --- a/packages/main/src/ColorPalette.ts +++ b/packages/main/src/ColorPalette.ts @@ -168,6 +168,7 @@ class ColorPalette extends UI5Element { _itemNavigationRecentColors: ItemNavigation; _recentColors: Array; moreColorsFeature?: ColorPaletteMoreColors; + _currentlySelected?: ColorPaletteItem; static i18nBundle: I18nBundle; @@ -198,6 +199,8 @@ class ColorPalette extends UI5Element { } onBeforeRendering() { + this._ensureSingleSelectionOrDeselectAll(); + this.displayedColors.forEach((item, index) => { item.index = index + 1; }); @@ -228,6 +231,7 @@ class ColorPalette extends UI5Element { _setColor(color: string) { this._selectedColor = color; + if (this._recentColors[0] !== this._selectedColor) { if (this._recentColors.includes(this._selectedColor)) { this._recentColors.unshift(this._recentColors.splice(this._recentColors.indexOf(this._selectedColor), 1)[0]); @@ -241,25 +245,59 @@ 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) { - const target = e.target as ColorPaletteItem; - if (target.hasAttribute("ui5-color-palette-item")) { - this.selectColor(target); - } + this.handleSelection(e.target as ColorPaletteItem); } _onkeyup(e: KeyboardEvent) { const target = e.target as ColorPaletteItem; - if (isSpace(e) && target.hasAttribute("ui5-color-palette-item")) { + if (isSpace(e)) { e.preventDefault(); - this.selectColor(target); + this.handleSelection(target); } } _onkeydown(e: KeyboardEvent) { const target = e.target as ColorPaletteItem; - if (isEnter(e) && target.hasAttribute("ui5-color-palette-item")) { - this.selectColor(target); + 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; } } @@ -269,6 +307,11 @@ 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 f53050f0609a..576935748692 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 @@ -109,6 +124,15 @@ 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 70761bae5887..b3c04bff2274 100644 --- a/packages/main/src/themes/ColorPaletteItem.css +++ b/packages/main/src/themes/ColorPaletteItem.css @@ -8,7 +8,8 @@ box-sizing: border-box; } -:host(:not([_disabled]):hover) { +:host(:not([_disabled]):hover), +:host([selected]) { height: var(--_ui5_color-palette-item-hover-height); width: var(--_ui5_color-palette-item-hover-height); margin: var(--_ui5_color-palette-item-hover-margin); @@ -40,16 +41,28 @@ border-radius: 0.1875rem; } -.ui5-cp-item:hover:not(:focus) { - border: 1px solid var(--sapGroup_ContentBackground); +.ui5-cp-item:hover:not(:focus), +.ui5-cp-item.ui5-cp-selected { + border: 0.0625rem solid var(--sapGroup_ContentBackground); border-radius: var(--_ui5_color-palette-item-hover-inner-border-radius); box-sizing: border-box; } -:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus{ +.ui5-cp-item.ui5-cp-selected:focus, +:host(:not([_disabled]):not([phone])) .ui5-cp-item:focus, +:host(:not([_disabled])[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; } @@ -105,3 +118,65 @@ 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 6297660e25ce..ec627519ba27 100644 --- a/packages/main/src/themes/base/ColorPalette-parameters.css +++ b/packages/main/src/themes/base/ColorPalette-parameters.css @@ -10,6 +10,7 @@ --_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; @@ -18,4 +19,7 @@ --_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 e7313180b6bf..9d5d2430da67 100644 --- a/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon/ColorPalette-parameters.css @@ -12,10 +12,14 @@ --_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 e7313180b6bf..9d5d2430da67 100644 --- a/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/ColorPalette-parameters.css @@ -12,10 +12,14 @@ --_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 dc5a67ff10bc..e547b9392b1e 100644 --- a/packages/main/test/pages/ColorPalette.html +++ b/packages/main/test/pages/ColorPalette.html @@ -19,15 +19,13 @@ - - - - - - - - + + + + + + @@ -107,6 +105,7 @@ + diff --git a/packages/fiori/test/specs/IllustratedMessage.spec.js b/packages/fiori/test/specs/IllustratedMessage.spec.js index 518ea125ac1c..f40b8df3c397 100644 --- a/packages/fiori/test/specs/IllustratedMessage.spec.js +++ b/packages/fiori/test/specs/IllustratedMessage.spec.js @@ -80,4 +80,97 @@ describe("Accessibility", () => { }); +}); + +describe("Vertical responsiveness", () => { + before(async () => { + await browser.url(`test/pages/IllustratedMessage.html`); + }); + + it("content with auto size shrinks to fit the parent container", async () => { + + const newContainerHeight = 300, + expectedMedia = "dialog", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, `${newContainerHeight}px`); + + // Check + const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), + scrollHeight = await contents.getProperty("scrollHeight"), + offsetHeight = await contents.getProperty("offsetHeight"), + illustratedMsgMedia = await illustratedMsg.getProperty("media"); + assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); + assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); + assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); + }); + + it("content with auto size expands to fit the parent container", async () => { + + const newContainerHeight = 500, + expectedMedia = "scene", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, `${newContainerHeight}px`); + + // Check + const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), + scrollHeight = await contents.getProperty("scrollHeight"), + offsetHeight = await contents.getProperty("offsetHeight"), + illustratedMsgMedia = await illustratedMsg.getProperty("media"); + assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); + assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); + assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); + }); + + it("content with fixed size fits the parent container", async () => { + + const newContainerHeight = 200, + expectedMedia = "dialog", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // set fixed size + illustratedMsg.setProperty("size", "Dialog"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, `${newContainerHeight}px`); + + // Check + const contents = await illustratedMsg.shadow$(".ui5-illustrated-message-root"), + scrollHeight = await contents.getProperty("scrollHeight"), + offsetHeight = await contents.getProperty("offsetHeight"), + illustratedMsgMedia = await illustratedMsg.getProperty("media"); + assert.ok(scrollHeight < newContainerHeight, "root dom fits container"); + assert.strictEqual(scrollHeight, offsetHeight, "no overflow of content"); + assert.strictEqual(illustratedMsgMedia, expectedMedia, "correct media"); + }); + + it("shows image with unconstrained height when container has auto height", async () => { + + const newContainerHeight = "auto", + illustratedMsg = await browser.$("#illustratedMsg5"); + + // Act: apply new height + await browser.executeAsync(async (newContainerHeight, done) => { + document.getElementById("container").style.height = newContainerHeight; + done(); + }, newContainerHeight); + + // Check + const illustration = await illustratedMsg.shadow$(".ui5-illustrated-message-illustration svg"); + const cssHeight = (await illustration.getCSSProperty("height")).value; + + assert.strictEqual(cssHeight, "160px", "svg has expected height"); + }); }); \ No newline at end of file From 8a782f1a2f7cff5b26bd3338f4cf61186953539e Mon Sep 17 00:00:00 2001 From: Konstantin Gogov <68374332+kgogov@users.noreply.github.com> Date: Tue, 10 Oct 2023 13:02:49 +0300 Subject: [PATCH 052/141] fix(ui5-avatar): prevent hover effect on non-interactive avatars (#7611) When the avatar is non-interactive, there should be no hover state, only the regular state. Additionally, when the avatar is disabled, it should not be hoverable. --- packages/main/src/themes/Avatar.css | 35 ++++++++++++++--------------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css index 739cd43e7b3e..303ee11d4383 100644 --- a/packages/main/src/themes/Avatar.css +++ b/packages/main/src/themes/Avatar.css @@ -4,40 +4,40 @@ position: relative; } -/*The ui5_hovered class is set by FileUploader to indicate hover state of the control*/ +/* The ui5_hovered class is set by FileUploader to indicate hover state of the control */ :host(:not([hidden]).ui5_hovered) { opacity: .7; } -:host(:not([hidden]):not([pressed]):hover) { - box-shadow: var(--ui5-avatar-hover-box-shadow-offset); -} - -:host(:not([hidden])[focused]:not([pressed])) { - outline: var(--_ui5_avatar_outline); - outline-offset: var(--_ui5_avatar_focus_offset); -} - -:host(:not([disabled])[interactive]) { +:host(:is([interactive]):not([disabled])) { cursor: pointer; } -:host([disabled]) { - opacity: var(--sapContent_DisabledOpacity); -} - -:host(:not([hidden])[pressed]) { +:host(:is([interactive][pressed]):not([hidden])) { background: var(--sapButton_Active_Background); border-color: var(--sapButton_Active_BorderColor); color: var(--sapButton_Active_TextColor); } -:host(:not([hidden])[pressed]:hover) { +:host(:is([interactive][pressed]):not([hidden]):hover) { background: var(--sapButton_Selected_Hover_Background); border-color: var(--sapButton_Selected_Hover_BorderColor); color: var(--sapButton_Selected_TextColor); } +:host(:is([interactive]):not([hidden]):not([pressed]):not([disabled]):hover) { + box-shadow: var(--ui5-avatar-hover-box-shadow-offset); +} + +:host(:is([interactive][focused]):not([hidden]):not([pressed])) { + outline: var(--_ui5_avatar_outline); + outline-offset: var(--_ui5_avatar_focus_offset); +} + +:host(:is([disabled])) { + opacity: var(--sapContent_DisabledOpacity); +} + :host { height: 3rem; width: 3rem; @@ -57,7 +57,6 @@ } /* Sizes */ - :host([_size="XS"]), :host([size="XS"]) { height: 2rem; From ce810853e707f682127ceb134011bb629859377a Mon Sep 17 00:00:00 2001 From: Boyan Rakilovski Date: Tue, 10 Oct 2023 21:00:08 +0300 Subject: [PATCH 053/141] fix(ui5-step-input): align decrement icon (#7654) --- packages/main/src/themes/sap_horizon/StepInput-parameters.css | 2 +- .../main/src/themes/sap_horizon_dark/StepInput-parameters.css | 2 +- .../src/themes/sap_horizon_dark_exp/StepInput-parameters.css | 2 +- .../main/src/themes/sap_horizon_exp/StepInput-parameters.css | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/main/src/themes/sap_horizon/StepInput-parameters.css b/packages/main/src/themes/sap_horizon/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; diff --git a/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css b/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; diff --git a/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css b/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark_exp/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; diff --git a/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css b/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css index 5386f78da012..cc6f54cab1d2 100644 --- a/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css +++ b/packages/main/src/themes/sap_horizon_exp/StepInput-parameters.css @@ -9,7 +9,7 @@ --_ui5_step_input_input_border: none; --_ui5_step_input_input_margin_top: 0; --_ui5_step_input_button_display: inline-flex; - --_ui5_step_input_button_left: 0.125rem; + --_ui5_step_input_button_left: 0; --_ui5_step_input_button_right: 0; --_ui5_step_input_input_border_focused_after: 0.125rem solid #0070f2; --_ui5_step_input_input_border_top_bottom_focused_after: 0; From 01a9349c7ab5e3c046fa10034dc9aa99b840f3d0 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Wed, 11 Oct 2023 10:05:31 +0300 Subject: [PATCH 054/141] fix(localization): missing calendarWeekNumbering (#7684) Co-authored-by: Nayden Naydenov --- packages/localization/src/sap/ui/core/Configuration.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/localization/src/sap/ui/core/Configuration.ts b/packages/localization/src/sap/ui/core/Configuration.ts index fcc62cdc91f2..a5869be5d34f 100644 --- a/packages/localization/src/sap/ui/core/Configuration.ts +++ b/packages/localization/src/sap/ui/core/Configuration.ts @@ -18,6 +18,8 @@ const Configuration = { getOriginInfo: emptyFn, getFormatSettings: () => FormatSettings, getTimezone: () => getConfigTimezone() || TimezoneUtil.getLocalTimezone() as string, + // Calculate calendar week numbering by active format locale + getCalendarWeekNumbering: () => "Default", }; export default Configuration; From 993f2b73196827f6558322a82f2e22e0f1bb1d84 Mon Sep 17 00:00:00 2001 From: Jianrong Yu <95995341+Jianrong-Yu@users.noreply.github.com> Date: Wed, 11 Oct 2023 00:07:52 -0700 Subject: [PATCH 055/141] fix(ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheelslider): special character support for id (#7634) fix(ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheelslider): fix the special character support for id in several components Special character in id like `":this-is-id"` should be supported by the components like ``. This PR fixed the support for special id like this for several components. Fixes #7633 --- CONTRIBUTING.md | 4 ++-- packages/main/src/Input.ts | 2 +- packages/main/src/Label.ts | 2 +- packages/main/src/List.ts | 6 +++--- packages/main/src/TabContainer.ts | 2 +- packages/main/src/Table.ts | 4 ++-- packages/main/src/WheelSlider.ts | 2 +- packages/main/test/specs/DateTimePicker.spec.js | 6 +++--- packages/main/test/specs/MultiComboBox.spec.js | 3 +-- packages/main/test/specs/MultiInput.mobile.spec.js | 2 +- packages/main/test/specs/MultiInput.spec.js | 2 +- 11 files changed, 17 insertions(+), 18 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e391308629ff..3e3ccb7a81bf 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,7 +10,7 @@ You are welcome to contribute code to the UI5 Web Components in order to fix bug There are three important things to know: 1. You must be aware of the Apache License (which describes contributions) and **accept the Developer Certificate of Origin**. -2. Follow our **[Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/contributing/conventions-and-guidelines/)**. +2. Follow our **[Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-contributing-conventions-and-guidelines--docs)**. 3. **Not all proposed contributions can be accepted**. Some features may just fit a third-party add-on better. The code must match the overall direction of the UI5 Web Components and improve it. So there should be some "bang for the byte". For most bug fixes this is a given, but a major feature implementation first needs to be discussed with one of the committers. Possibly, one who touched the related code or module recently. The more effort you invest, the better you should clarify in advance whether the contribution will match the project's direction. The best way would be to just open an enhancement ticket in the issue tracker to discuss the feature you plan to implement (make it clear that you intend to contribute). We will then forward the proposal to the respective code owner. This avoids disappointment. ## Developer Certificate of Origin (DCO) @@ -21,7 +21,7 @@ Due to legal reasons, contributors will be asked to accept a DCO before they sub 1. Make sure the change is welcome (see [General Remarks](#general-remarks)). 1. Create a branch by forking the relevant UI5 Web Components repository and apply your change. 1. Commit and push your change on that branch. - - **Please follow our [Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/contributing/conventions-and-guidelines/).** + - **Please follow our [Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-contributing-conventions-and-guidelines--docs).** 1. Create a pull request in the UI5 Web Components repository. 1. Follow the link posted by the CLA assistant to your pull request and accept it, as described above. 1. Wait for our code review and approval, possibly enhancing your change on request. diff --git a/packages/main/src/Input.ts b/packages/main/src/Input.ts index 243124275626..a41378c61c2e 100644 --- a/packages/main/src/Input.ts +++ b/packages/main/src/Input.ts @@ -1491,7 +1491,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement { } announceSelectedItem() { - const invisibleText = this.shadowRoot!.querySelector(`#${this._id}-selectionText`)!; + const invisibleText = this.shadowRoot!.querySelector(`[id="${this._id}-selectionText"]`)!; invisibleText.textContent = this.itemSelectionAnnounce; } diff --git a/packages/main/src/Label.ts b/packages/main/src/Label.ts index a272bbc98f54..4bfb3421432c 100644 --- a/packages/main/src/Label.ts +++ b/packages/main/src/Label.ts @@ -119,7 +119,7 @@ class Label extends UI5Element { return; } - const elementToFocus = (this.getRootNode() as HTMLElement).querySelector(`#${this.for}`) as HTMLElement; + const elementToFocus = (this.getRootNode() as HTMLElement).querySelector(`[id="${this.for}"]`) as HTMLElement; if (elementToFocus) { elementToFocus.focus(); } diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index bb1d40d77b2f..cce1070fc854 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -1041,7 +1041,7 @@ class List extends UI5Element { } getGrowingButton() { - return this.shadowRoot!.querySelector(`#${this._id}-growing-btn`) as HTMLElement; + return this.shadowRoot!.querySelector(`[id="${this._id}-growing-btn"]`) as HTMLElement; } /** @@ -1127,14 +1127,14 @@ class List extends UI5Element { getAfterElement() { if (!this._afterElement) { - this._afterElement = this.shadowRoot!.querySelector(`#${this._id}-after`) as HTMLElement; + this._afterElement = this.shadowRoot!.querySelector(`[id="${this._id}-after"]`) as HTMLElement; } return this._afterElement; } getBeforeElement() { if (!this._beforeElement) { - this._beforeElement = this.shadowRoot!.querySelector(`#${this._id}-before`) as HTMLElement; + this._beforeElement = this.shadowRoot!.querySelector(`[id="${this._id}-before"]`) as HTMLElement; } return this._beforeElement; } diff --git a/packages/main/src/TabContainer.ts b/packages/main/src/TabContainer.ts index f3e9761ed3f8..27e55c843be0 100644 --- a/packages/main/src/TabContainer.ts +++ b/packages/main/src/TabContainer.ts @@ -469,7 +469,7 @@ class TabContainer extends UI5Element { _setItemsPrivateProperties(items: Array) { // set real dom ref to all items, then return only the tabs for further processing const allTabs = items.filter(item => { - item._getElementInStrip = () => this.getDomRef()!.querySelector(`#${item._id}`); + item._getElementInStrip = () => this.getDomRef()!.querySelector(`[id="${item._id}"]`); return !item.isSeparator; }); diff --git a/packages/main/src/Table.ts b/packages/main/src/Table.ts index 2a405b93cf57..7930cf4c1c63 100644 --- a/packages/main/src/Table.ts +++ b/packages/main/src/Table.ts @@ -918,7 +918,7 @@ class Table extends UI5Element { _getAfterForwardElement(): HTMLElement { if (!this._afterElement) { - this._afterElement = this.shadowRoot!.querySelector(`#${this._id}-after`)!; + this._afterElement = this.shadowRoot!.querySelector(`[id="${this._id}-after"]`)!; } return this._afterElement; @@ -926,7 +926,7 @@ class Table extends UI5Element { _getBeforeForwardElement(): HTMLElement { if (!this._beforeElement) { - this._beforeElement = this.shadowRoot!.querySelector(`#${this._id}-before`)!; + this._beforeElement = this.shadowRoot!.querySelector(`[id="${this._id}-before"]`)!; } return this._beforeElement; diff --git a/packages/main/src/WheelSlider.ts b/packages/main/src/WheelSlider.ts index 06dc09819b1b..35b58218fc4f 100644 --- a/packages/main/src/WheelSlider.ts +++ b/packages/main/src/WheelSlider.ts @@ -168,7 +168,7 @@ class WheelSlider extends UI5Element { onAfterRendering() { if (!this._scroller.scrollContainer) { - this._scroller.scrollContainer = this.shadowRoot!.querySelector(`#${this._id}--wrapper`)!; + this._scroller.scrollContainer = this.shadowRoot!.querySelector(`[id="${this._id}--wrapper"]`)!; } if (!this.expanded) { diff --git a/packages/main/test/specs/DateTimePicker.spec.js b/packages/main/test/specs/DateTimePicker.spec.js index d4d7582024ac..442dafcf7074 100644 --- a/packages/main/test/specs/DateTimePicker.spec.js +++ b/packages/main/test/specs/DateTimePicker.spec.js @@ -4,19 +4,19 @@ const openPickerById = async (id, options) => { await browser.$(`#${id}`).scrollIntoView(); return browser.executeAsync((id, options, done) => { - done(document.querySelector(`#${id}`).openPicker(options)); + done(document.querySelector(`[id="${id}"]`).openPicker(options)); }, id, options); }; const closePickerById = id => { return browser.executeAsync((id, done) => { - done(document.querySelector(`#${id}`).closePicker()); + done(document.querySelector(`[id="${id}"]`).closePicker()); }, id); }; const isPickerOpen = id => { return browser.executeAsync((id, done) => { - done(document.querySelector(`#${id}`).isOpen()); + done(document.querySelector(`[id="${id}"]`).isOpen()); }, id); }; diff --git a/packages/main/test/specs/MultiComboBox.spec.js b/packages/main/test/specs/MultiComboBox.spec.js index a758f27520a5..e144c00f55bd 100644 --- a/packages/main/test/specs/MultiComboBox.spec.js +++ b/packages/main/test/specs/MultiComboBox.spec.js @@ -2,7 +2,7 @@ import { assert } from "chai"; const getTokenizerPopoverId = async (mcbId) => { return await browser.executeAsync(async (mcbId, done) => { - const input = document.querySelector(`#${mcbId}`); + const input = document.querySelector(`[id="${mcbId}"]`); const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef()); done(staticAreaItem.host.classList[0]); @@ -1592,7 +1592,6 @@ describe("MultiComboBox general interaction", () => { mcNMoreLabelText: mi.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MULTIINPUT_SHOW_MORE_TOKENS, 1) }); }); - assert.strictEqual(await nItemsLabel.getText(), resourceBundleText.mcItemsLabelText, "Text should be 2 Items"); assert.strictEqual(await nMoreLabel.getText(), resourceBundleText.mcNMoreLabelText, "Text should be 1 More"); }); diff --git a/packages/main/test/specs/MultiInput.mobile.spec.js b/packages/main/test/specs/MultiInput.mobile.spec.js index bafb3b4e487f..5d202fc6d24b 100644 --- a/packages/main/test/specs/MultiInput.mobile.spec.js +++ b/packages/main/test/specs/MultiInput.mobile.spec.js @@ -2,7 +2,7 @@ import { assert } from "chai"; const getTokenizerPopoverId = async (inputId) => { return await browser.executeAsync(async (inputId, done) => { - const input = document.querySelector(`#${inputId}`); + const input = document.querySelector(`[id="${inputId}"]`); const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef()); done(staticAreaItem.host.classList[0]); diff --git a/packages/main/test/specs/MultiInput.spec.js b/packages/main/test/specs/MultiInput.spec.js index cfcce06f8802..4e4cbb9c685b 100644 --- a/packages/main/test/specs/MultiInput.spec.js +++ b/packages/main/test/specs/MultiInput.spec.js @@ -2,7 +2,7 @@ import { assert } from "chai"; const getTokenizerPopoverId = async (inputId) => { return await browser.executeAsync(async (inputId, done) => { - const input = document.querySelector(`#${inputId}`); + const input = document.querySelector(`[id="${inputId}"]`); const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef()); done(staticAreaItem.host.classList[0]); From cef88813e01a8117dc0c824dec17b7cf6e1a71e3 Mon Sep 17 00:00:00 2001 From: Iliana Bobeva Date: Wed, 11 Oct 2023 13:22:35 +0300 Subject: [PATCH 056/141] fix(ui5-checkbox): fix horizon hcb and hcw (#7686) Fix hover of error state checkbox. --- .../main/src/themes/sap_horizon_hcb/CheckBox-parameters.css | 2 +- .../main/src/themes/sap_horizon_hcw/CheckBox-parameters.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css index 5c3c2d0452d8..a68df893dd86 100644 --- a/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcb/CheckBox-parameters.css @@ -23,7 +23,7 @@ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_inner_error_background_hover: var(--sapField_InvalidBackground); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); diff --git a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css index 5c3c2d0452d8..a68df893dd86 100644 --- a/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/CheckBox-parameters.css @@ -23,7 +23,7 @@ --_ui5_checkbox_inner_readonly_border: var(--sapElement_BorderWidth) var(--sapField_ReadOnly_BorderColor) solid; /* error state */ --_ui5_checkbox_inner_error_border: var(--sapField_InvalidBorderWidth) dashed var(--sapField_InvalidColor); - --_ui5_checkbox_inner_error_background_hover: var(--sapField_Hover_Background); + --_ui5_checkbox_inner_error_background_hover: var(--sapField_InvalidBackground); /* warning state */ --_ui5_checkbox_inner_warning_border: var(--sapField_WarningBorderWidth) dashed var(--sapField_WarningColor); --_ui5_checkbox_inner_warning_color: var(--sapField_WarningColor); From 15a84f87fcdba3d7e60364205d2dbf7bf9bca0a9 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Thu, 12 Oct 2023 10:34:43 +0300 Subject: [PATCH 057/141] fix(ui5-avatar): a11y fixed (#7636) Co-authored-by: PetyaMarkovaBogdanova --- packages/main/src/Avatar.ts | 2 +- packages/main/test/specs/Avatar.spec.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index 0cabfd4906da..ebd176ac517c 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -371,7 +371,7 @@ class Avatar extends UI5Element implements ITabbable { } get _role() { - return this._interactive ? "button" : undefined; + return this._interactive ? "button" : "img"; } get _ariaHasPopup() { diff --git a/packages/main/test/specs/Avatar.spec.js b/packages/main/test/specs/Avatar.spec.js index 859b0cbc0a41..45125ac60a65 100644 --- a/packages/main/test/specs/Avatar.spec.js +++ b/packages/main/test/specs/Avatar.spec.js @@ -134,8 +134,12 @@ describe("ARIA attributes", () => { it ("role set correctly", async () => { const avatar = await $("#myInteractiveAvatar");; const avatarRoot = await avatar.shadow$(".ui5-avatar-root"); + const nonInteractiveAvatar = await $("#non-interactive-avatar");; + const nonInteractiveavatarRoot = await nonInteractiveAvatar.shadow$(".ui5-avatar-root"); assert.strictEqual(await avatarRoot.getAttribute("role"), "button", "should have role button for interactive avatar"); + + assert.strictEqual(await nonInteractiveavatarRoot.getAttribute("role"), "img", "should have role img for non-interactive avatar"); }); it ("aria-haspopup is correct for interactive avatar", async () => { From 1299f76940f25b31aa6637319b96795c71fc6b29 Mon Sep 17 00:00:00 2001 From: ui5-webcomponents-bot Date: Thu, 12 Oct 2023 08:13:50 +0000 Subject: [PATCH 058/141] chore(release): publish v1.19.0-rc.0 [ci skip] --- CHANGELOG.md | 27 ++++++++++++++++++++++ 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 | 19 +++++++++++++++ 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 | 21 +++++++++++++++++ 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 | 8 +++++++ packages/tools/package.json | 2 +- 24 files changed, 178 insertions(+), 33 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 36c46b02292b..1b88faff7b27 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,33 @@ 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **localization:** missing calendarWeekNumbering ([#7684](https://github.com/SAP/ui5-webcomponents/issues/7684)) ([01a9349](https://github.com/SAP/ui5-webcomponents/commit/01a9349c7ab5e3c046fa10034dc9aa99b840f3d0)) +* **ui5-avatar:** a11y fixed ([#7636](https://github.com/SAP/ui5-webcomponents/issues/7636)) ([15a84f8](https://github.com/SAP/ui5-webcomponents/commit/15a84f87fcdba3d7e60364205d2dbf7bf9bca0a9)) +* **ui5-avatar:** prevent hover effect on non-interactive avatars ([#7611](https://github.com/SAP/ui5-webcomponents/issues/7611)) ([8a782f1](https://github.com/SAP/ui5-webcomponents/commit/8a782f1a2f7cff5b26bd3338f4cf61186953539e)) +* **ui5-checkbox:** fix horizon hcb and hcw ([#7686](https://github.com/SAP/ui5-webcomponents/issues/7686)) ([cef8881](https://github.com/SAP/ui5-webcomponents/commit/cef88813e01a8117dc0c824dec17b7cf6e1a71e3)) +* **ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheelslider:** special character support for id ([#7634](https://github.com/SAP/ui5-webcomponents/issues/7634)) ([993f2b7](https://github.com/SAP/ui5-webcomponents/commit/993f2b73196827f6558322a82f2e22e0f1bb1d84)), closes [#7633](https://github.com/SAP/ui5-webcomponents/issues/7633) +* **ui5-menu:** prevent bubbling in events ([#7653](https://github.com/SAP/ui5-webcomponents/issues/7653)) ([6f5caf4](https://github.com/SAP/ui5-webcomponents/commit/6f5caf49def230e716b7534f83f27249caade7d7)), closes [#7637](https://github.com/SAP/ui5-webcomponents/issues/7637) +* **ui5-page:** adjust Horizon themes ([#7685](https://github.com/SAP/ui5-webcomponents/issues/7685)) ([39ccfe6](https://github.com/SAP/ui5-webcomponents/commit/39ccfe63d07b74bb50eb46a419de34fa1461bc6c)) +* **ui5-shellbar:** apply correct height to horizon high contrast themes ([#7655](https://github.com/SAP/ui5-webcomponents/issues/7655)) ([b72f012](https://github.com/SAP/ui5-webcomponents/commit/b72f0124f9b3ebe74cceeaaaf69abd6711ced0e5)) +* **ui5-shellbar:** horizon theme update ([#7623](https://github.com/SAP/ui5-webcomponents/issues/7623)) ([ff04434](https://github.com/SAP/ui5-webcomponents/commit/ff04434c9c00b29367faff22d187edb55186eccd)) +* **ui5-shellbar:** often failing unit test ([#7677](https://github.com/SAP/ui5-webcomponents/issues/7677)) ([a14d57c](https://github.com/SAP/ui5-webcomponents/commit/a14d57c2c25c714983ee3cb0899c8ec72a677b55)), closes [#7673](https://github.com/SAP/ui5-webcomponents/issues/7673) +* **ui5-step-input:** align decrement icon ([#7654](https://github.com/SAP/ui5-webcomponents/issues/7654)) ([ce81085](https://github.com/SAP/ui5-webcomponents/commit/ce810853e707f682127ceb134011bb629859377a)) + + +### Features + +* **ui5-color-palette-item:** add selected state ([#7598](https://github.com/SAP/ui5-webcomponents/issues/7598)) ([6983f71](https://github.com/SAP/ui5-webcomponents/commit/6983f71acdaf3f94215d0fb86d9558db5b0b2887)) +* **ui5-illustrated-message:** enable vertical responsiveness ([#7672](https://github.com/SAP/ui5-webcomponents/issues/7672)) ([45244aa](https://github.com/SAP/ui5-webcomponents/commit/45244aacdc4fa846175d8a097ae242256e32a5b4)), closes [#6492](https://github.com/SAP/ui5-webcomponents/issues/6492) + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) diff --git a/lerna.json b/lerna.json index 11bfba4a6036..5688cabbdd13 100644 --- a/lerna.json +++ b/lerna.json @@ -12,7 +12,7 @@ "packages/playground", "packages/create-package" ], - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.0", "command": { "publish": { "allowBranch": "*", diff --git a/packages/base/CHANGELOG.md b/packages/base/CHANGELOG.md index 29b05c18555b..a6782ca0b560 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-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-base + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) diff --git a/packages/base/package.json b/packages/base/package.json index 7222b2b1ef5c..08010a9a774b 100644 --- a/packages/base/package.json +++ b/packages/base/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-base", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.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.18.1-rc.0", + "@ui5/webcomponents-tools": "1.19.0-rc.0", "chromedriver": "116.0.0", "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 5f6227350ccb..a5819c634789 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/create-webcomponents-package + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **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 99ff9e3f08a4..a0ecf03c3ddc 100644 --- a/packages/create-package/package.json +++ b/packages/create-package/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/create-webcomponents-package", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.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 bb18f5a1c096..c683d4c053bc 100644 --- a/packages/fiori/CHANGELOG.md +++ b/packages/fiori/CHANGELOG.md @@ -3,6 +3,25 @@ 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **ui5-page:** adjust Horizon themes ([#7685](https://github.com/SAP/ui5-webcomponents/issues/7685)) ([39ccfe6](https://github.com/SAP/ui5-webcomponents/commit/39ccfe63d07b74bb50eb46a419de34fa1461bc6c)) +* **ui5-shellbar:** apply correct height to horizon high contrast themes ([#7655](https://github.com/SAP/ui5-webcomponents/issues/7655)) ([b72f012](https://github.com/SAP/ui5-webcomponents/commit/b72f0124f9b3ebe74cceeaaaf69abd6711ced0e5)) +* **ui5-shellbar:** horizon theme update ([#7623](https://github.com/SAP/ui5-webcomponents/issues/7623)) ([ff04434](https://github.com/SAP/ui5-webcomponents/commit/ff04434c9c00b29367faff22d187edb55186eccd)) +* **ui5-shellbar:** often failing unit test ([#7677](https://github.com/SAP/ui5-webcomponents/issues/7677)) ([a14d57c](https://github.com/SAP/ui5-webcomponents/commit/a14d57c2c25c714983ee3cb0899c8ec72a677b55)), closes [#7673](https://github.com/SAP/ui5-webcomponents/issues/7673) + + +### Features + +* **ui5-illustrated-message:** enable vertical responsiveness ([#7672](https://github.com/SAP/ui5-webcomponents/issues/7672)) ([45244aa](https://github.com/SAP/ui5-webcomponents/commit/45244aacdc4fa846175d8a097ae242256e32a5b4)), closes [#6492](https://github.com/SAP/ui5-webcomponents/issues/6492) + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **Note:** Version bump only for package @ui5/webcomponents-fiori diff --git a/packages/fiori/package.json b/packages/fiori/package.json index d742c8e30085..c36924b0841d 100644 --- a/packages/fiori/package.json +++ b/packages/fiori/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-fiori", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.0", "description": "UI5 Web Components: webcomponents.fiori", "ui5": { "webComponentsPackage": true @@ -41,14 +41,14 @@ "directory": "packages/fiori" }, "dependencies": { - "@ui5/webcomponents": "1.18.1-rc.0", - "@ui5/webcomponents-base": "1.18.1-rc.0", - "@ui5/webcomponents-icons": "1.18.1-rc.0", - "@ui5/webcomponents-theming": "1.18.1-rc.0", + "@ui5/webcomponents": "1.19.0-rc.0", + "@ui5/webcomponents-base": "1.19.0-rc.0", + "@ui5/webcomponents-icons": "1.19.0-rc.0", + "@ui5/webcomponents-theming": "1.19.0-rc.0", "@zxing/library": "^0.17.1" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.1-rc.0", + "@ui5/webcomponents-tools": "1.19.0-rc.0", "chromedriver": "116.0.0" } } diff --git a/packages/icons-business-suite/CHANGELOG.md b/packages/icons-business-suite/CHANGELOG.md index 8248adbe1b9c..7a18010cae66 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-icons-business-suite + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **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 e0d08a46e569..0896c897bc46 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.18.1-rc.0", + "version": "1.19.0-rc.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.18.1-rc.0" + "@ui5/webcomponents-base": "1.19.0-rc.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.1-rc.0" + "@ui5/webcomponents-tools": "1.19.0-rc.0" } } diff --git a/packages/icons-tnt/CHANGELOG.md b/packages/icons-tnt/CHANGELOG.md index 0fe5ba888430..2135e286f899 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-icons-tnt + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **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 f658396f0f1e..944932d44674 100644 --- a/packages/icons-tnt/package.json +++ b/packages/icons-tnt/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons-tnt", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.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.18.1-rc.0" + "@ui5/webcomponents-base": "1.19.0-rc.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.1-rc.0" + "@ui5/webcomponents-tools": "1.19.0-rc.0" } } diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index e1105b051263..13628ebbcb00 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-icons + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **Note:** Version bump only for package @ui5/webcomponents-icons diff --git a/packages/icons/package.json b/packages/icons/package.json index 44e9ab0e0989..e1bdc2feb05f 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-icons", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.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.18.1-rc.0" + "@ui5/webcomponents-base": "1.19.0-rc.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.1-rc.0" + "@ui5/webcomponents-tools": "1.19.0-rc.0" } } diff --git a/packages/localization/CHANGELOG.md b/packages/localization/CHANGELOG.md index 81bd96bf3f9a..7b00e65471bc 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.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **localization:** missing calendarWeekNumbering ([#7684](https://github.com/SAP/ui5-webcomponents/issues/7684)) ([01a9349](https://github.com/SAP/ui5-webcomponents/commit/01a9349c7ab5e3c046fa10034dc9aa99b840f3d0)) + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **Note:** Version bump only for package @ui5/webcomponents-localization diff --git a/packages/localization/package.json b/packages/localization/package.json index 4c5c908bb3c1..9a4ca7d1f82f 100644 --- a/packages/localization/package.json +++ b/packages/localization/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-localization", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.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.18.1-rc.0", + "@ui5/webcomponents-tools": "1.19.0-rc.0", "chromedriver": "116.0.0", "mkdirp": "^1.0.4", "resolve": "^1.20.0" }, "dependencies": { "@types/openui5": "^1.113.0", - "@ui5/webcomponents-base": "1.18.1-rc.0" + "@ui5/webcomponents-base": "1.19.0-rc.0" } } diff --git a/packages/main/CHANGELOG.md b/packages/main/CHANGELOG.md index 1bab0096576e..7c02792a49b3 100644 --- a/packages/main/CHANGELOG.md +++ b/packages/main/CHANGELOG.md @@ -3,6 +3,27 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [1.19.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **ui5-avatar:** a11y fixed ([#7636](https://github.com/SAP/ui5-webcomponents/issues/7636)) ([15a84f8](https://github.com/SAP/ui5-webcomponents/commit/15a84f87fcdba3d7e60364205d2dbf7bf9bca0a9)) +* **ui5-avatar:** prevent hover effect on non-interactive avatars ([#7611](https://github.com/SAP/ui5-webcomponents/issues/7611)) ([8a782f1](https://github.com/SAP/ui5-webcomponents/commit/8a782f1a2f7cff5b26bd3338f4cf61186953539e)) +* **ui5-checkbox:** fix horizon hcb and hcw ([#7686](https://github.com/SAP/ui5-webcomponents/issues/7686)) ([cef8881](https://github.com/SAP/ui5-webcomponents/commit/cef88813e01a8117dc0c824dec17b7cf6e1a71e3)) +* **ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheelslider:** special character support for id ([#7634](https://github.com/SAP/ui5-webcomponents/issues/7634)) ([993f2b7](https://github.com/SAP/ui5-webcomponents/commit/993f2b73196827f6558322a82f2e22e0f1bb1d84)), closes [#7633](https://github.com/SAP/ui5-webcomponents/issues/7633) +* **ui5-menu:** prevent bubbling in events ([#7653](https://github.com/SAP/ui5-webcomponents/issues/7653)) ([6f5caf4](https://github.com/SAP/ui5-webcomponents/commit/6f5caf49def230e716b7534f83f27249caade7d7)), closes [#7637](https://github.com/SAP/ui5-webcomponents/issues/7637) +* **ui5-step-input:** align decrement icon ([#7654](https://github.com/SAP/ui5-webcomponents/issues/7654)) ([ce81085](https://github.com/SAP/ui5-webcomponents/commit/ce810853e707f682127ceb134011bb629859377a)) + + +### Features + +* **ui5-color-palette-item:** add selected state ([#7598](https://github.com/SAP/ui5-webcomponents/issues/7598)) ([6983f71](https://github.com/SAP/ui5-webcomponents/commit/6983f71acdaf3f94215d0fb86d9558db5b0b2887)) + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) diff --git a/packages/main/package.json b/packages/main/package.json index 2c0e6cb250c9..5dff0174366f 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.0", "description": "UI5 Web Components: webcomponents.main", "ui5": { "webComponentsPackage": true @@ -43,13 +43,13 @@ "directory": "packages/main" }, "dependencies": { - "@ui5/webcomponents-base": "1.18.1-rc.0", - "@ui5/webcomponents-icons": "1.18.1-rc.0", - "@ui5/webcomponents-localization": "1.18.1-rc.0", - "@ui5/webcomponents-theming": "1.18.1-rc.0" + "@ui5/webcomponents-base": "1.19.0-rc.0", + "@ui5/webcomponents-icons": "1.19.0-rc.0", + "@ui5/webcomponents-localization": "1.19.0-rc.0", + "@ui5/webcomponents-theming": "1.19.0-rc.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.1-rc.0", + "@ui5/webcomponents-tools": "1.19.0-rc.0", "chromedriver": "116.0.0" } } diff --git a/packages/playground/CHANGELOG.md b/packages/playground/CHANGELOG.md index 575597f412d2..a6ad887508d8 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + + +### Bug Fixes + +* **ui5-page:** adjust Horizon themes ([#7685](https://github.com/SAP/ui5-webcomponents/issues/7685)) ([39ccfe6](https://github.com/SAP/ui5-webcomponents/commit/39ccfe63d07b74bb50eb46a419de34fa1461bc6c)) + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **Note:** Version bump only for package @ui5/webcomponents-playground diff --git a/packages/playground/package.json b/packages/playground/package.json index e61e0c771115..2423299c954d 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -1,7 +1,7 @@ { "name": "@ui5/webcomponents-playground", "private": true, - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.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 7e7d56499cbd..78e4c57b3877 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.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-theming + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **Note:** Version bump only for package @ui5/webcomponents-theming diff --git a/packages/theming/package.json b/packages/theming/package.json index 847b4dd13c07..d01a420e18c3 100644 --- a/packages/theming/package.json +++ b/packages/theming/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-theming", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.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.18.1-rc.0" + "@ui5/webcomponents-base": "1.19.0-rc.0" }, "devDependencies": { - "@ui5/webcomponents-tools": "1.18.1-rc.0", + "@ui5/webcomponents-tools": "1.19.0-rc.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 cbe2e73ebfbe..079ca0b14eef 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-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.1-rc.0...v1.19.0-rc.0) (2023-10-12) + +**Note:** Version bump only for package @ui5/webcomponents-tools + + + + + ## [1.18.1-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v1.18.0...v1.18.1-rc.0) (2023-10-05) **Note:** Version bump only for package @ui5/webcomponents-tools diff --git a/packages/tools/package.json b/packages/tools/package.json index ffb57b5e8e8e..276df4c5e05d 100644 --- a/packages/tools/package.json +++ b/packages/tools/package.json @@ -1,6 +1,6 @@ { "name": "@ui5/webcomponents-tools", - "version": "1.18.1-rc.0", + "version": "1.19.0-rc.0", "description": "UI5 Web Components: webcomponents.tools", "author": "SAP SE (https://www.sap.com)", "license": "Apache-2.0", From 9d5a3d1e95c7d163a91beb068169f2e7df39d4d5 Mon Sep 17 00:00:00 2001 From: Elena Stoyanova Date: Thu, 12 Oct 2023 15:25:18 +0300 Subject: [PATCH 059/141] feat(ui5-panel): enable custom styling of title (#7688) --- packages/main/src/themes/Panel.css | 9 ++++----- packages/main/test/pages/Panel.html | 2 +- packages/main/test/pages/styles/Panel.css | 4 ++++ 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css index b5b2f7f62968..e2265edce965 100644 --- a/packages/main/src/themes/Panel.css +++ b/packages/main/src/themes/Panel.css @@ -28,6 +28,10 @@ outline: none; box-sizing: border-box; padding-right: var(--_ui5_panel_header_padding_right); + font-family: "72override", var(--sapFontHeaderFamily); + font-size: var(--sapGroup_Title_FontSize); + font-weight: normal; + color: var(--sapGroup_TitleTextColor); } .ui5-panel-header-icon { @@ -81,11 +85,6 @@ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-family: "72override", var(--sapFontHeaderFamily); - font-size: var(--sapGroup_Title_FontSize); - font-weight: normal; - color: var(--sapGroup_TitleTextColor); - font-weight: normal; } .ui5-panel-content { diff --git a/packages/main/test/pages/Panel.html b/packages/main/test/pages/Panel.html index 14f97453f0fe..19234f58472e 100644 --- a/packages/main/test/pages/Panel.html +++ b/packages/main/test/pages/Panel.html @@ -88,7 +88,7 @@
- + diff --git a/packages/main/test/pages/styles/Panel.css b/packages/main/test/pages/styles/Panel.css index 826ca9890d09..8db2d2f161b8 100644 --- a/packages/main/test/pages/styles/Panel.css +++ b/packages/main/test/pages/styles/Panel.css @@ -11,3 +11,7 @@ #panel-stickyHeader::part(content) { max-height: 70px; } + +#panel-expandable::part(header) { + color: green; +} \ No newline at end of file From f2668b6889259c7295b06fe47f846b434510f671 Mon Sep 17 00:00:00 2001 From: Elena Stoyanova Date: Thu, 12 Oct 2023 15:25:31 +0300 Subject: [PATCH 060/141] feat(ui5-rating-indicator): introduce tooltip property (#7687) --- packages/main/src/RatingIndicator.hbs | 2 +- packages/main/src/RatingIndicator.ts | 16 ++++++++++++++-- packages/main/test/pages/RatingIndicator.html | 2 +- packages/main/test/specs/RatingIndicator.spec.js | 4 ++-- .../RatingIndicator/RatingIndicator.stories.ts | 1 + 5 files changed, 19 insertions(+), 6 deletions(-) diff --git a/packages/main/src/RatingIndicator.hbs b/packages/main/src/RatingIndicator.hbs index 0d6ff1443021..29c1d3fda23b 100644 --- a/packages/main/src/RatingIndicator.hbs +++ b/packages/main/src/RatingIndicator.hbs @@ -14,7 +14,7 @@ @focusout="{{_onfocusout}}" @click="{{_onclick}}" @keydown="{{_onkeydown}}" - title="{{tooltip}}" + title="{{ratingTooltip}}" aria-label="{{_ariaLabel}}" >
    disabled

    RatingIndicator with title

    - +


    diff --git a/packages/main/test/specs/RatingIndicator.spec.js b/packages/main/test/specs/RatingIndicator.spec.js index c2ad42bc698f..1aa8c519ce55 100644 --- a/packages/main/test/specs/RatingIndicator.spec.js +++ b/packages/main/test/specs/RatingIndicator.spec.js @@ -116,11 +116,11 @@ describe("Rating Indicator general interaction", () => { assert.strictEqual(await ratingIndicatorList.getAttribute("aria-hidden"), "true", "aria-hidden is set"); }); - it("Tests ACC attrs - title attribute provided", async () => { + it("Tests ACC attrs - tooltip property", async () => { const ratingIndicator = await browser.$("#rating-indicator-title").shadow$(".ui5-rating-indicator-root"); const TOOLTIP = "Test"; - assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The title attribute is rendered in the inner div as well."); + assert.strictEqual(await ratingIndicator.getAttribute("title"), TOOLTIP, "The tooltip property is rendered as a title in the inner div."); }); it("Tests ACC attrs - required property add aria-description", async () => { diff --git a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts index 2d946a72a88c..a638a9f3f322 100644 --- a/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts +++ b/packages/playground/_stories/main/RatingIndicator/RatingIndicator.stories.ts @@ -32,6 +32,7 @@ const Template: UI5StoryArgs = (args) => html` ?disabled="${ifDefined(args.disabled)}" ?readonly="${ifDefined(args.readonly)}" ?required="${ifDefined(args.required)}" + tooltip="${ifDefined(args.tooltip)}" accessible-name="${ifDefined(args.accessibleName)}" accessible-name-ref="${ifDefined(args.accessibleNameRef)}" >`; From 721cc0b312fb76142dea97712b21343b7b93337e Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Fri, 13 Oct 2023 10:29:10 +0300 Subject: [PATCH 061/141] fix(ui5-flexible-column-layout): wrong focus fixed (#7586) Co-authored-by: PetyaMarkovaBogdanova --- packages/fiori/src/FlexibleColumnLayout.hbs | 6 +++--- packages/fiori/src/themes/FlexibleColumnLayout.css | 6 ++++++ 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.hbs b/packages/fiori/src/FlexibleColumnLayout.hbs index 39a104c4ad31..88ba0deaa5cb 100644 --- a/packages/fiori/src/FlexibleColumnLayout.hbs +++ b/packages/fiori/src/FlexibleColumnLayout.hbs @@ -6,7 +6,7 @@ aria-labelledby="{{_id}}-startColumnText" > {{accStartColumnText}} - +
@@ -20,7 +20,7 @@ aria-labelledby="{{_id}}-midColumnText" > {{accMiddleColumnText}} - +
@@ -34,7 +34,7 @@ aria-labelledby="{{_id}}-endColumnText" > {{accEndColumnText}} - +
diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css index e74e49d0349c..656b46504265 100644 --- a/packages/fiori/src/themes/FlexibleColumnLayout.css +++ b/packages/fiori/src/themes/FlexibleColumnLayout.css @@ -100,3 +100,9 @@ .ui5-fcl-arrow:hover:after { height: 7rem; } + +[aria-hidden] ::slotted([slot="startColumn"]), +[aria-hidden] ::slotted([slot="midColumn"]), +[aria-hidden] ::slotted([slot="endColumn"]){ + visibility: hidden; +} \ No newline at end of file From 888875121b56fa0c7216674acc580620d8e0d720 Mon Sep 17 00:00:00 2001 From: Vladislav Tasev Date: Fri, 13 Oct 2023 13:01:33 +0300 Subject: [PATCH 062/141] fix: escape special characters when scoping CSS vars (#7704) --- packages/tools/lib/postcss-scope-vars/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/tools/lib/postcss-scope-vars/index.js b/packages/tools/lib/postcss-scope-vars/index.js index 801ab881f6df..6513911e40b0 100644 --- a/packages/tools/lib/postcss-scope-vars/index.js +++ b/packages/tools/lib/postcss-scope-vars/index.js @@ -1,7 +1,7 @@ const name = "postcss-scope-vars"; module.exports = (options) => { - const versionStr = "v" + options?.version?.replaceAll(".", "-"); + const versionStr = "v" + options?.version?.replaceAll(/[^0-9A-Za-z\-_]/g, "-"); return { postcssPlugin: name, prepare() { From d55d061b946b083cb68606a719c81abd2d164be7 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Fri, 13 Oct 2023 14:49:10 +0300 Subject: [PATCH 063/141] fix(ui5-flexible-column-layout): wrong focus fixed (#7586) Co-authored-by: PetyaMarkovaBogdanova From ec6e95e9c071468e5f86c198d91ef064f80a65ba Mon Sep 17 00:00:00 2001 From: yanaminkova <32466553+yanaminkova@users.noreply.github.com> Date: Mon, 16 Oct 2023 11:02:21 +0300 Subject: [PATCH 064/141] docs: improve stories` jsdoc (#7626) Related: #7284 The enum values are removed from the jsdoc comments --- packages/fiori/src/FlexibleColumnLayout.ts | 13 --- packages/fiori/src/IllustratedMessage.ts | 105 --------------------- packages/fiori/src/MediaGallery.ts | 25 ----- packages/main/src/Avatar.ts | 33 +------ packages/main/src/AvatarGroup.ts | 7 +- packages/main/src/Breadcrumbs.ts | 12 --- packages/main/src/CheckBox.ts | 11 --- packages/main/src/Icon.ts | 14 --- packages/main/src/List.ts | 22 ----- packages/main/src/ProgressIndicator.ts | 9 -- packages/main/src/Select.ts | 9 -- packages/main/src/Toolbar.ts | 6 +- packages/main/src/Tree.ts | 12 --- 13 files changed, 5 insertions(+), 273 deletions(-) diff --git a/packages/fiori/src/FlexibleColumnLayout.ts b/packages/fiori/src/FlexibleColumnLayout.ts index 8eecc1f85eaa..8fbea6757ef3 100644 --- a/packages/fiori/src/FlexibleColumnLayout.ts +++ b/packages/fiori/src/FlexibleColumnLayout.ts @@ -173,19 +173,6 @@ class FlexibleColumnLayout extends UI5Element { * Note: The layout also depends on the screen size - one column for screens smaller than 599px, * two columns between 599px and 1023px and three columns for sizes bigger than 1023px. *

- * Available options are: - *
    - *
  • OneColumn
    • - *
  • TwoColumnsStartExpanded
    • - *
  • TwoColumnsMidExpanded
    • - *
  • ThreeColumnsMidExpanded
    • - *
  • ThreeColumnsEndExpanded
    • - *
  • ThreeColumnsStartExpandedEndHidden
    • - *
  • ThreeColumnsMidExpandedEndHidden
    • - *
  • MidColumnFullScreen
    • - *
  • EndColumnFullScreen
    • - *
- *

* For example: layout=TwoColumnsStartExpanded means the layout will display up to two columns * in 67%/33% proportion. * @type {sap.ui.webc.fiori.types.FCLLayout} diff --git a/packages/fiori/src/IllustratedMessage.ts b/packages/fiori/src/IllustratedMessage.ts index 763a4da690f7..c4167028d412 100644 --- a/packages/fiori/src/IllustratedMessage.ts +++ b/packages/fiori/src/IllustratedMessage.ts @@ -81,103 +81,6 @@ class IllustratedMessage extends UI5Element { /** * Defines the illustration name that will be displayed in the component. *

- * Available illustrations are: - *
    - *
  • AddColumn
    • - *
  • AddPeople
    • - *
  • AddDimensions
    • - *
  • BalloonSky
    • - *
  • BeforeSearch
    • - *
  • Connection
    • - *
  • EmptyCalendar
    • - *
  • EmptyList
    • - *
  • EmptyPlanningCalendar
    • - *
  • ErrorScreen
    • - *
  • FilterTable
    • - *
  • GroupTable
    • - *
  • NoActivities
    • - *
  • NoColumnsSet
    • - *
  • NoData
    • - *
  • NoEntries
    • - *
  • NoFilterResults
    • - *
  • NoMail_v1
    • - *
  • NoMail
    • - *
  • NoNotifications
    • - *
  • NoSavedItems_v1
    • - *
  • NoSavedItems
    • - *
  • NoSearchResults
    • - *
  • NoTasks_v1
    • - *
  • NoTasks
    • - *
  • NoDimensionsSet
    • - *
  • PageNotFound
    • - *
  • ReloadScreen
    • - *
  • ResizeColumn
    • - *
  • SearchEarth
    • - *
  • SearchFolder
    • - *
  • SimpleBalloon
    • - *
  • SimpleBell
    • - *
  • SimpleCalendar
    • - *
  • SimpleCheckMark
    • - *
  • SimpleConnection
    • - *
  • SimpleEmptyDoc
    • - *
  • SimpleEmptyList
    • - *
  • SimpleError
    • - *
  • SimpleMagnifier
    • - *
  • SimpleMail
    • - *
  • SimpleNoSavedItems
    • - *
  • SimpleNotFoundMagnifier
    • - *
  • SimpleReload
    • - *
  • SimpleTask
    • - *
  • SleepingBell
    • - *
  • SortColumn
    • - *
  • SuccessBalloon
    • - *
  • SuccessCheckMark
    • - *
  • SuccessHighFive
    • - *
  • SuccessScreen
    • - *
  • Survey
    • - *
  • Tent
    • - *
  • UnableToLoad
    • - *
  • UnableToLoadImage
    • - *
  • UnableToUpload
    • - *
  • UploadToCloud
    • - *
  • UploadCollection
    • - *
  • TntChartArea
    • - *
  • TntChartArea2
    • - *
  • TntChartBar
    • - *
  • TntChartBPMNFlow
    • - *
  • TntChartBullet
    • - *
  • TntChartDoughnut
    • - *
  • TntChartFlow
    • - *
  • TntChartGantt
    • - *
  • TntChartOrg
    • - *
  • TntChartPie
    • - *
  • TntCodePlaceholder
    • - *
  • TntCompany
    • - *
  • TntComponents
    • - *
  • TntExternalLink
    • - *
  • TntFaceID
    • - *
  • TntFingerprint
    • - *
  • TntLock
    • - *
  • TntMission
    • - *
  • TntNoApplications
    • - *
  • TntNoFlows
    • - *
  • TntNoUsers
    • - *
  • TntRadar
    • - *
  • TntSecrets
    • - *
  • TntServices
    • - *
  • TntSessionExpired
    • - *
  • TntSessionExpiring
    • - *
  • TntSuccess
    • - *
  • TntSuccessfulAuth
    • - *
  • TntSystems
    • - *
  • TntTeams
    • - *
  • TntTools
    • - *
  • TntUnableToLoad
    • - *
  • TntUnlock
    • - *
  • TntUnsuccessfulAuth
    • - *
  • TntUser2
    • - *
- *

* Note: By default the BeforeSearch illustration is loaded. *
* When using an illustration type, other than the default, it should be loaded in addition: @@ -199,14 +102,6 @@ class IllustratedMessage extends UI5Element { /** * Determines which illustration breakpoint variant is used. *

- * Available options are: - *
    - *
  • Auto
    • - *
  • Base
    • - *
  • Spot
    • - *
  • Dialog
    • - *
  • Scene
    • - *
* * As IllustratedMessage adapts itself around the Illustration, the other * elements of the component are displayed differently on the different breakpoints/illustration sizes. diff --git a/packages/fiori/src/MediaGallery.ts b/packages/fiori/src/MediaGallery.ts index 48a35046209b..f3dba1e4f176 100644 --- a/packages/fiori/src/MediaGallery.ts +++ b/packages/fiori/src/MediaGallery.ts @@ -158,13 +158,6 @@ class MediaGallery extends UI5Element { /** * Determines the layout of the component. - *

- * Available options are: - *
    - *
  • Auto
    • - *
  • Vertical
    • - *
  • Horizontal
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} * @name sap.ui.webc.fiori.MediaGallery.prototype.layout @@ -177,12 +170,6 @@ class MediaGallery extends UI5Element { /** * Determines the horizontal alignment of the thumbnails menu * vs. the central display area. - *

- * Available options are: - *
    - *
  • Left
    • - *
  • Right
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryMenuHorizontalAlign} * @name sap.ui.webc.fiori.MediaGallery.prototype.menuHorizontalAlign @@ -195,12 +182,6 @@ class MediaGallery extends UI5Element { /** * Determines the vertical alignment of the thumbnails menu * vs. the central display area. - *

- * Available options are: - *
    - *
  • Top
    • - *
  • Bottom
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryMenuVerticalAlign} * @name sap.ui.webc.fiori.MediaGallery.prototype.menuVerticalAlign @@ -214,12 +195,6 @@ class MediaGallery extends UI5Element { * Determines the actual applied layout type * (esp. needed when the app did not specify a fixed layout type * but selected Auto layout type). - *

- * Possible values are: - *
    - *
  • Vertical
    • - *
  • Horizontal
    • - *
* * @type {sap.ui.webc.fiori.types.MediaGalleryLayout} * @defaultvalue "Vertical" diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index ebd176ac517c..d71af5aed91f 100644 --- a/packages/main/src/Avatar.ts +++ b/packages/main/src/Avatar.ts @@ -182,12 +182,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the shape of the component. - *

- * Available options are: - *
    - *
  • Circle
    • - *
  • Square
    • - *
+ * * @type {sap.ui.webc.main.types.AvatarShape} * @name sap.ui.webc.main.Avatar.prototype.shape * @defaultvalue "Circle" @@ -198,15 +193,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines predefined size of the component. - *

- * Available options are: - *
    - *
  • XS
    • - *
  • S
    • - *
  • M
    • - *
  • L
    • - *
  • XL
    • - *
+ * * @type {sap.ui.webc.main.types.AvatarSize} * @name sap.ui.webc.main.Avatar.prototype.size * @defaultvalue "S" @@ -223,21 +210,7 @@ class Avatar extends UI5Element implements ITabbable { /** * Defines the background color of the desired image. - *

- * Available options are: - *
    - *
  • Accent1
    • - *
  • Accent2
    • - *
  • Accent3
    • - *
  • Accent4
    • - *
  • Accent5
    • - *
  • Accent6
    • - *
  • Accent7
    • - *
  • Accent8
    • - *
  • Accent9
    • - *
  • Accent10
    • - *
  • Placeholder
    • - *
+ * * @type {sap.ui.webc.main.types.AvatarColorScheme} * @name sap.ui.webc.main.Avatar.prototype.colorScheme * @defaultvalue "Accent6" diff --git a/packages/main/src/AvatarGroup.ts b/packages/main/src/AvatarGroup.ts index 922eaedf5ae5..75cc9020407c 100644 --- a/packages/main/src/AvatarGroup.ts +++ b/packages/main/src/AvatarGroup.ts @@ -175,12 +175,7 @@ type AvatarGroupClickEventDetail = { class AvatarGroup extends UI5Element { /** * Defines the mode of the AvatarGroup. - *

- * Available options are: - *
    - *
  • Group
    • - *
  • Individual
    • - *
+ * * @type {sap.ui.webc.main.types.AvatarGroupType} * @name sap.ui.webc.main.AvatarGroup.prototype.type * @defaultValue "Group" diff --git a/packages/main/src/Breadcrumbs.ts b/packages/main/src/Breadcrumbs.ts index 7bc1aed21580..6cb8920afd66 100644 --- a/packages/main/src/Breadcrumbs.ts +++ b/packages/main/src/Breadcrumbs.ts @@ -138,7 +138,6 @@ type FocusAdaptor = ITabbable & { class Breadcrumbs extends UI5Element { /** * Defines the visual indication and behavior of the breadcrumbs. - * Available options are Standard (by default) and NoCurrentPage. *

* Note: The Standard breadcrumbs show the current page as the last item in the trail. * The last item contains only plain text and is not a link. @@ -154,17 +153,6 @@ class Breadcrumbs extends UI5Element { /** * Determines the visual style of the separator between the breadcrumb items. * - *

- * Available options are: - *
    - *
  • Slash
    • - *
  • BackSlash
    • - *
  • DoubleBackSlash
    • - *
  • DoubleGreaterThan
    • - *
  • DoubleSlash
    • - *
  • GreaterThan
    • - *
- * * @type {sap.ui.webc.main.types.BreadcrumbsSeparatorStyle} * @name sap.ui.webc.main.Breadcrumbs.prototype.separatorStyle * @defaultvalue "Slash" diff --git a/packages/main/src/CheckBox.ts b/packages/main/src/CheckBox.ts index da4fe4464941..adf6f84a3563 100644 --- a/packages/main/src/CheckBox.ts +++ b/packages/main/src/CheckBox.ts @@ -222,17 +222,6 @@ class CheckBox extends UI5Element implements IFormElement { /** * Defines the value state of the component. * - *

- * Note: - * - *
    - *
  • Warning
    • - *
  • Error
    • - *
  • None(default)
    • - *
  • Success
    • - *
  • Information
    • - *
- * * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.CheckBox.prototype.valueState * @defaultvalue "None" diff --git a/packages/main/src/Icon.ts b/packages/main/src/Icon.ts index b6cea09dbde7..c8c6d342ff93 100644 --- a/packages/main/src/Icon.ts +++ b/packages/main/src/Icon.ts @@ -139,20 +139,6 @@ class Icon extends UI5Element { /** * Defines the component semantic design. * - *

- * The available values are: - * - *
    - *
  • Contrast
    • - *
  • Critical
    • - *
  • Default
    • - *
  • Information
    • - *
  • Negative
    • - *
  • Neutral
    • - *
  • NonInteractive
    • - *
  • Positive
    • - *
- * * @type {sap.ui.webc.main.types.IconDesign} * @name sap.ui.webc.main.Icon.prototype.design * @defaultvalue "Default" diff --git a/packages/main/src/List.ts b/packages/main/src/List.ts index cce1070fc854..1ed7f899a486 100644 --- a/packages/main/src/List.ts +++ b/packages/main/src/List.ts @@ -300,9 +300,6 @@ class List extends UI5Element { /** * Defines the mode of the component. - *

- * Note: Available options are None, SingleSelect, SingleSelectBegin, - * SingleSelectEnd, MultiSelect, and Delete. * * @type {sap.ui.webc.main.types.ListMode} * @name sap.ui.webc.main.List.prototype.mode @@ -325,14 +322,6 @@ class List extends UI5Element { /** * Defines the item separator style that is used. - *

- * Notes: - *
    - *
  • Avalaible options are All, Inner, and None.
    • - *
  • When set to None, none of the items are separated by horizontal lines.
    • - *
  • When set to Inner, the first item doesn't have a top separator and the last - * item doesn't have a bottom separator.
    • - *
* * @type {sap.ui.webc.main.types.ListSeparators} * @name sap.ui.webc.main.List.prototype.separators @@ -346,17 +335,6 @@ class List extends UI5Element { * Defines whether the component will have growing capability either by pressing a More button, * or via user scroll. In both cases load-more event is fired. *

- * - * Available options: - *

- * Button - Shows a More button at the bottom of the list, - * pressing of which triggers the load-more event. - *
- * Scroll - The load-more event is triggered when the user scrolls to the bottom of the list; - *
- * None (default) - The growing is off. - *

- * * Restrictions: growing="Scroll" is not supported for Internet Explorer, * on IE the component will fallback to growing="Button". * @type {sap.ui.webc.main.types.ListGrowingMode} diff --git a/packages/main/src/ProgressIndicator.ts b/packages/main/src/ProgressIndicator.ts index b6a684c08760..0d72b3966d05 100644 --- a/packages/main/src/ProgressIndicator.ts +++ b/packages/main/src/ProgressIndicator.ts @@ -118,15 +118,6 @@ class ProgressIndicator extends UI5Element { /** * Defines the value state of the component. - *

- * Available options are: - *
    - *
  • None
    • - *
  • Error
    • - *
  • Warning
    • - *
  • Success
    • - *
  • Information
    • - *
* * @type {sap.ui.webc.base.types.ValueState} * @name sap.ui.webc.main.ProgressIndicator.prototype.valueState diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 7d5874332a9c..0d567827aa17 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -265,15 +265,6 @@ class Select extends UI5Element implements IFormElement { /** * Defines the value state of the component. - *

- * Available options are: - *
    - *
  • None
    • - *
  • Error
    • - *
  • Warning
    • - *
  • Success
    • - *
  • Information
    • - *
* * @type {sap.ui.webc.base.types.ValueState} * @defaultvalue "None" diff --git a/packages/main/src/Toolbar.ts b/packages/main/src/Toolbar.ts index 13c2cbaae904..59a0833350d0 100644 --- a/packages/main/src/Toolbar.ts +++ b/packages/main/src/Toolbar.ts @@ -89,11 +89,7 @@ class Toolbar extends UI5Element { /** * Indicated the direction in which the Toolbar items will be aligned. - * Available options are: - *
    - *
  • End
    • - *
  • Start
    • - *
+ * * @type {sap.ui.webc.main.types.ToolbarAlign} * @public * @defaultvalue: "End" diff --git a/packages/main/src/Tree.ts b/packages/main/src/Tree.ts index b06903ad28bd..8b948a061a7f 100644 --- a/packages/main/src/Tree.ts +++ b/packages/main/src/Tree.ts @@ -198,18 +198,6 @@ class Tree extends UI5Element { * Defines the mode of the component. Since the tree uses a ui5-list to display its structure, * the tree modes are exactly the same as the list modes, and are all applicable. * - *

- * Note: - * - *
    - *
  • None
    • - *
  • SingleSelect
    • - *
  • SingleSelectBegin
    • - *
  • SingleSelectEnd
    • - *
  • MultiSelect
    • - *
  • Delete
    • - *
- * * @public * @type {sap.ui.webc.main.types.ListMode} * @name sap.ui.webc.main.Tree.prototype.mode From 99c6b02e7c1f2ce63b7394b9a375c058458e9338 Mon Sep 17 00:00:00 2001 From: yanaminkova <32466553+yanaminkova@users.noreply.github.com> Date: Mon, 16 Oct 2023 11:02:41 +0300 Subject: [PATCH 065/141] docs: improve storybook samples (#7627) Related: #7284 The stories, which do not provide enough features or illustrate only property functionality are grouped and combined into one story. Basic story is added for the components, which do not have such. --- .../MediaGallery/MediaGallery.stories.ts | 88 +---------------- .../MediaGallery/TemplateMediaGalleryTypes.ts | 74 ++++++++++++++ .../_stories/main/Avatar/Avatar.stories.ts | 28 ++---- .../Avatar/TemplateAvatarTypesandSizes.ts | 22 +++++ .../main/AvatarGroup/AvatarGroup.stories.ts | 49 ++++------ .../AvatarGroup/TemplateAvatarGroupSizes.ts | 67 ------------- .../TemplateAvatarGroupTypesAndSizes.ts | 98 +++++++++++++++++++ .../main/Breadcrumbs/Breadcrumbs.stories.ts | 12 +-- .../main/CheckBox/CheckBox.stories.ts | 10 -- .../_stories/main/Icon/Icon.stories.ts | 13 +-- .../_stories/main/List/List.stories.ts | 65 ++++++------ .../ProgressIndicator.stories.ts | 32 +----- .../main/Toolbar/TemplateToolbarTypes.ts | 95 ++++++++++++++++++ .../_stories/main/Toolbar/Toolbar.stories.ts | 98 +------------------ 14 files changed, 356 insertions(+), 395 deletions(-) create mode 100644 packages/playground/_stories/fiori/MediaGallery/TemplateMediaGalleryTypes.ts create mode 100644 packages/playground/_stories/main/Avatar/TemplateAvatarTypesandSizes.ts delete mode 100644 packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupSizes.ts create mode 100644 packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupTypesAndSizes.ts create mode 100644 packages/playground/_stories/main/Toolbar/TemplateToolbarTypes.ts diff --git a/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts b/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts index 78ec0ca34813..dcb4006fce0f 100644 --- a/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts +++ b/packages/playground/_stories/fiori/MediaGallery/MediaGallery.stories.ts @@ -1,7 +1,7 @@ import { html } from "lit"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; import { ifDefined } from "lit/directives/if-defined.js"; -import type { Meta } from "@storybook/web-components"; +import type { Meta, StoryFn } from "@storybook/web-components"; import type { PartialStoryFn } from "@storybook/types"; import argTypes, { componentInfo } from "./argTypes.js"; @@ -13,6 +13,7 @@ import { DocsPage } from "../../../.storybook/docs"; import MediaGallery from "@ui5/webcomponents-fiori/dist/MediaGallery.js"; import MediaGalleryLayout from "@ui5/webcomponents-fiori/dist/types/MediaGalleryLayout.js"; import MediaGalleryMenuHorizontalAlign from "@ui5/webcomponents-fiori/dist/types/MediaGalleryMenuHorizontalAlign.js"; +import TemplateMediaGalleryTypes from "./TemplateMediaGalleryTypes.js"; const component = "ui5-media-gallery"; @@ -82,68 +83,7 @@ Basic.args = { `, }; -export const VerticalLayout = Template.bind({}); -VerticalLayout.args = { - showAllThumbnails: true, - layout: MediaGalleryLayout.Vertical, - default: ` - - - - - - - - - - - - - - - - - - `, -}; - -export const ThumbnailsOnTheRight = Template.bind({}); -ThumbnailsOnTheRight.args = { - showAllThumbnails: true, - layout: MediaGalleryLayout.Horizontal, - menuHorizontalAlign: MediaGalleryMenuHorizontalAlign.Right, - default: ` - - - - - - - - - - - - - - - - - - `, -}; - -export const SeparateImageThumbnail = Template.bind({}); -SeparateImageThumbnail.args = { - default: ` - - - - `, -}; +export const Types: StoryFn = TemplateMediaGalleryTypes.bind({}); export const VideoContent = Template.bind({}); VideoContent.args = { @@ -164,28 +104,6 @@ VideoContent.args = { `, }; -export const DisabledContent = Template.bind({}); -DisabledContent.args = { - default: ` - - - - - - `, -}; - -export const InitiallySelected = Template.bind({}); -InitiallySelected.args = { - default: ` - - - - - - `, -}; - export const ThumbnailOverflow = Template.bind({}); ThumbnailOverflow.decorators = [ (story) => html` diff --git a/packages/playground/_stories/fiori/MediaGallery/TemplateMediaGalleryTypes.ts b/packages/playground/_stories/fiori/MediaGallery/TemplateMediaGalleryTypes.ts new file mode 100644 index 000000000000..07e425779180 --- /dev/null +++ b/packages/playground/_stories/fiori/MediaGallery/TemplateMediaGalleryTypes.ts @@ -0,0 +1,74 @@ +import { html } from "lit"; + +export default () => html` +
Horizontal Media Gallery with initially selected item: + + + + + + + + +
+ +
+ +
Vertical Media Gallery with initially disabled item: + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
Horizontal Media Gallery with thumbnails on the right: + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
Media Gallery with seperate image thumbnail: + + + + + + +
`; diff --git a/packages/playground/_stories/main/Avatar/Avatar.stories.ts b/packages/playground/_stories/main/Avatar/Avatar.stories.ts index cc3600624be9..dd966d977461 100644 --- a/packages/playground/_stories/main/Avatar/Avatar.stories.ts +++ b/packages/playground/_stories/main/Avatar/Avatar.stories.ts @@ -1,7 +1,7 @@ import { html } from "lit"; import { ifDefined } from "lit/directives/if-defined.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; -import type { Meta } from "@storybook/web-components"; +import type { Meta, StoryFn } from "@storybook/web-components"; import type Avatar from "@ui5/webcomponents/dist/Avatar.js"; import AvatarSize from "@ui5/webcomponents/dist/types/AvatarSize.js"; @@ -11,6 +11,9 @@ import argTypes, { componentInfo } from "./argTypes.js"; import type { StoryArgsSlots } from "./argTypes.js"; import type { UI5StoryArgs } from "../../../types.js"; +import TemplateAvatarTypesAndSizes from "./TemplateAvatarTypesandSizes.js" + + import { DocsPage } from "../../../.storybook/docs"; const component = "ui5-avatar"; @@ -38,6 +41,7 @@ const Template: UI5StoryArgs = (args) => ?disabled="${ifDefined(args.disabled)}" aria-haspopup="${ifDefined(args.ariaHaspopup)}" accessible-name="${ifDefined(args.accessibleName)}" + fallback-icon="${ifDefined(args.fallbackIcon)}" > ${unsafeHTML(args.default)} `; @@ -49,27 +53,7 @@ Basic.args = { accessibleName: "Avatar with accessible name" }; -export const Disabled = Template.bind({}); -Disabled.args = { - size: AvatarSize.XL, - initials: "IP", - interactive: true, - disabled: true -}; - -export const WithImage = Template.bind({}); -WithImage.args = { - default: `Woman 1`, -}; - -export const Size = Template.bind({}); -Size.args = { - size: AvatarSize.L, - icon: "home", -}; +export const TypesAndSizes: StoryFn = TemplateAvatarTypesAndSizes.bind({}); export const Styles = Template.bind({}); Styles.args = { diff --git a/packages/playground/_stories/main/Avatar/TemplateAvatarTypesandSizes.ts b/packages/playground/_stories/main/Avatar/TemplateAvatarTypesandSizes.ts new file mode 100644 index 000000000000..28f96d5e032e --- /dev/null +++ b/packages/playground/_stories/main/Avatar/TemplateAvatarTypesandSizes.ts @@ -0,0 +1,22 @@ +import { html } from "lit"; + +export default () => html` + + Woman 1 + +(ui5-avatar size="S" disabled="true") + +
+ + + Woman 1 + (ui5-avatar size="M") + +
+ + (ui5-avatar size="L" disabled="true" color-scheme="Accent1") + +
+ + (ui5-avatar size="XL" color-scheme="Accent2") +`; diff --git a/packages/playground/_stories/main/AvatarGroup/AvatarGroup.stories.ts b/packages/playground/_stories/main/AvatarGroup/AvatarGroup.stories.ts index 5e1786cea28e..c63bf61d1d62 100644 --- a/packages/playground/_stories/main/AvatarGroup/AvatarGroup.stories.ts +++ b/packages/playground/_stories/main/AvatarGroup/AvatarGroup.stories.ts @@ -12,7 +12,7 @@ import type { UI5StoryArgs } from "../../../types.js"; import TemplateGroupWithPopover from "./TemplateGroupWithPopover.js"; import TemplateIndividualWithPopover from "./TemplateIndividualWithPopover.js"; -import TemplateAvatarGroupSizes from "./TemplateAvatarGroupSizes.js"; +import TemplateAvatarGroupTypesAndSizes from "./TemplateAvatarGroupTypesAndSizes.js"; import { DocsPage } from "../../../.storybook/docs"; @@ -38,36 +38,27 @@ const Template: UI5StoryArgs = (args) => ${unsafeHTML(args.overflowButton)} `; -export const TypeGroup = Template.bind({}); -TypeGroup.args = { - default: ` - - - - Woman Avatar 5 - `, -}; + export const Basic = Template.bind({}); + Basic.storyName = "Basic"; + Basic.args = { + default: ` + + + Man Avatar 1 + + + + Woman Avatar 5 + + + Man Avatar 3 + + ` + }; -export const TypeIndividual = Template.bind({}); -TypeIndividual.args = { - type: AvatarGroupType.Individual, - default: ` - - - - Woman Avatar 5 - `, -}; +export const TypesAndSizes: StoryFn = TemplateAvatarGroupTypesAndSizes.bind({}); export const TypeIndividualWithPopover: StoryFn = TemplateIndividualWithPopover.bind({}); -export const TypeGroupWithPopover: StoryFn = TemplateGroupWithPopover.bind({}); - -export const Sizes: StoryFn = TemplateAvatarGroupSizes.bind({}); +export const TypeGroupWithPopover: StoryFn = TemplateGroupWithPopover.bind({}); \ No newline at end of file diff --git a/packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupSizes.ts b/packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupSizes.ts deleted file mode 100644 index 82f57f33208e..000000000000 --- a/packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupSizes.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { html } from "lit"; - -export default () => html` - - Man Avatar 1 - - - - Woman Avatar 5 - - - Man Avatar 3 - - -
- - - Man Avatar 1 - - - - Woman Avatar 5 - - - Man Avatar 3 - - -
- - - Man Avatar 1 - - - - Woman Avatar 5 - - - Man Avatar 3 - - `; diff --git a/packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupTypesAndSizes.ts b/packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupTypesAndSizes.ts new file mode 100644 index 000000000000..9efdfef4c1e3 --- /dev/null +++ b/packages/playground/_stories/main/AvatarGroup/TemplateAvatarGroupTypesAndSizes.ts @@ -0,0 +1,98 @@ +import { html } from "lit"; + +export default () => html` (ui5-avatar-group type="Individual"; ui5-avatar size="S"): + + + Man Avatar 1 + + + + Woman Avatar 5 + + + Man Avatar 3 + + +
+ +(ui5-avatar-group type="Individual"; ui5-avatar size="M"): + + + Man Avatar 1 + + + + Woman Avatar 5 + + + Man Avatar 3 + + + +
+ +(ui5-avatar-group type="Group"; ui5-avatar size="L"): + + + Man Avatar 1 + + + + Woman Avatar 5 + + + Man Avatar 3 + + + +
+ +(ui5-avatar-group type="Group"; ui5-avatar size="XL"): + + + Man Avatar 1 + + + + Woman Avatar 5 + + + Man Avatar 3 + +`; diff --git a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts index 0f63674f0aca..10c54356f71a 100644 --- a/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts +++ b/packages/playground/_stories/main/Breadcrumbs/Breadcrumbs.stories.ts @@ -42,24 +42,16 @@ Basic.args = { `, }; -export const NoCurrentPage = Template.bind({}); -NoCurrentPage.args = { - design: BreadcrumbsDesign.NoCurrentPage, - default: `Root Page - -Parent Page`, -}; - export const SeparatorStyle: StoryFn = () => html`
- + Root Page Parent Page - Current Page + Current Page (ui5-breadcrumbs desing="NoCurrentPage")
diff --git a/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts b/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts index 9d9cfb7acfb3..b464277edfe9 100644 --- a/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts +++ b/packages/playground/_stories/main/CheckBox/CheckBox.stories.ts @@ -51,19 +51,9 @@ Wrapping.args = { text: "ui5-checkbox with 'wrapping-type=Normal' set and some long text.", wrappingType: WrappingType.Normal, style: "width:200px", -}; - -export const Indeterminate = Template.bind({}); -Indeterminate.args = { - text: "Select / deselect all", indeterminate: true, checked: true, }; -Indeterminate.parameters = { - controls: { - include: ["indeterminate", "checked"], - }, -}; export const States: StoryFn = () => html` diff --git a/packages/playground/_stories/main/Icon/Icon.stories.ts b/packages/playground/_stories/main/Icon/Icon.stories.ts index 12694c4d4891..bc801ad2214c 100644 --- a/packages/playground/_stories/main/Icon/Icon.stories.ts +++ b/packages/playground/_stories/main/Icon/Icon.stories.ts @@ -40,19 +40,8 @@ Basic.args = { name: "activities", }; -export const FioriToolsIcons = Template.bind({}); -FioriToolsIcons.args = { - name: "tnt/antenna", -}; - export const Customized = Template.bind({}); Customized.args = { - name: "employee", + name: "tnt/antenna", style: "width: 3rem; height: 3rem; font-size: 1.5rem; color: crimson; background-color: #fafafa", }; - -export const SemanticDesign = Template.bind({}); -SemanticDesign.args = { - name: "employee", - design: IconDesign.Positive, -}; diff --git a/packages/playground/_stories/main/List/List.stories.ts b/packages/playground/_stories/main/List/List.stories.ts index 1e32724692c8..5d3e356a9af0 100644 --- a/packages/playground/_stories/main/List/List.stories.ts +++ b/packages/playground/_stories/main/List/List.stories.ts @@ -136,29 +136,37 @@ Growing.parameters = { }, }; -export const SingleSelection = Template.bind({}); -SingleSelection.storyName = "Single Selection"; -SingleSelection.args = { - mode: ListMode.SingleSelect, - headerText: "Select a country:", - default: ` - Argentina +export const Modes: StoryFn = () => html` + +Argentina Bulgaria China - Denmark (ui5-li type='Inactive')`, -}; + Denmark (ui5-li type='Inactive') + + +
+ + +Pineapple +Orange +Banana +Mango + + +
+ + +Argentina +Bulgaria +China + + +
+ + + +`; -export const MultiSelection = Template.bind({}); -MultiSelection.storyName = "Multi Selection"; -MultiSelection.args = { - mode: ListMode.MultiSelect, - headerText: "Multiple selection is possible", - default: ` - Pineapple - Orange - Banana - Mango`, -}; export const GroupHeaders = Template.bind({}); GroupHeaders.storyName = "Group Headers"; @@ -206,24 +214,7 @@ GroupHeaders.args = { >`, }; -export const Delete = Template.bind({}); -Delete.storyName = "Delete Mode"; -Delete.args = { - mode: ListMode.Delete, - headerText: "Note: The list items removal is up to application developers", - default: ` - Argentina - Bulgaria - China`, -}; -export const NoData = Template.bind({}); -NoData.storyName = "No Data"; -NoData.args = { - headerText: "Products", - noDataText: "No Data Available", - separators: ListSeparators.None, -}; export const SeparationTypes: StoryFn = () => html` html` - - - - - -`; + diff --git a/packages/playground/_stories/main/Toolbar/TemplateToolbarTypes.ts b/packages/playground/_stories/main/Toolbar/TemplateToolbarTypes.ts new file mode 100644 index 000000000000..f32d756b47f1 --- /dev/null +++ b/packages/playground/_stories/main/Toolbar/TemplateToolbarTypes.ts @@ -0,0 +1,95 @@ +import { html } from "lit"; + +export default () => html` +
Toolbar with spacer: + + + + + + 1 + 2 + 3 + + + + + + + + +
+ +
+ +
Toolbar with separator: + + + + + + 1 + 2 + 3 + + + + + + + + +
+ +
+ +
Toolbar with 'AlwaysOverflow' items: + + + + + + 1 + 2 + 3 + + + + + + + +
+ +
+ +
Toolbar with 'NeverOverflow' items: + + + + + + 1 + 2 + 3 + + + + + + + +
+ +
+ +
Toolbar with 'Start' aligned items: + + + + + + +
+ +`; diff --git a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts index 9dbb9cf5e39c..1a7302016e20 100644 --- a/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts +++ b/packages/playground/_stories/main/Toolbar/Toolbar.stories.ts @@ -1,7 +1,7 @@ import { html } from "lit"; import { ifDefined } from "lit/directives/if-defined.js"; import { unsafeHTML } from "lit/directives/unsafe-html.js"; -import type { Meta } from "@storybook/web-components"; +import type { Meta, StoryFn } from "@storybook/web-components"; import type Toolbar from "@ui5/webcomponents/dist/Toolbar.js"; import ToolbarAlign from "@ui5/webcomponents/dist/types/ToolbarAlign.js"; @@ -11,6 +11,7 @@ import type { StoryArgsSlots } from "./argTypes.js"; import type { UI5StoryArgs } from "../../../types.js"; import { DocsPage } from "../../../.storybook/docs"; +import TemplateToolbarTypes from "./TemplateToolbarTypes.js"; const component = "ui5-toolbar"; @@ -44,7 +45,7 @@ export const Basic = Template.bind({}); Basic.storyName = "Basic"; Basic.args = { default: ` - @@ -63,96 +64,5 @@ Basic.args = { `, }; - -export const WithSpacer: UI5StoryArgs = Template.bind({}); - -WithSpacer.args = { - default: ` - - - - - 1 - 2 - 3 - - - - - - - ` -} - -export const WithSeparator: UI5StoryArgs = Template.bind({}); - -WithSeparator.args = { - default: ` - - - - - 1 - 2 - 3 - - - - - - - ` -} - -export const AlwaysOverflowItems: UI5StoryArgs = Template.bind({}); - -AlwaysOverflowItems.storyName = "'AlwaysOverflow' items"; - -AlwaysOverflowItems.args = { - default: ` - - - - - 1 - 2 - 3 - - - - - - ` -} - -export const NeverOverflowItems: UI5StoryArgs = Template.bind({}); - -NeverOverflowItems.storyName = "'NeverOverflow' items"; - -NeverOverflowItems.args = { - default: ` - - - - - 1 - 2 - 3 - - - - - - ` -} - -export const StartAlignedItems = Template.bind({}); - - -StartAlignedItems.storyName = "'Start' aligned items"; - -StartAlignedItems.args = { - alignContent: ToolbarAlign.Start, - default: Basic.args.default -}; +export const Types: StoryFn = TemplateToolbarTypes.bind({}); From 57ff771c82de51515a998ce09f3b3430ffd69c18 Mon Sep 17 00:00:00 2001 From: kskondov Date: Mon, 16 Oct 2023 12:03:23 +0300 Subject: [PATCH 066/141] fix(ui5-tabcontainer): update according to latest SAP Horizon design (#7668) fix(ui5-tabcontainer): fix latest SAP Horizon design differences -fixed semantic border colours -added space between tab text and expand button separator --- packages/main/src/themes/TabInStrip.css | 1 + .../src/themes/base/TabContainer-parameters.css | 16 ++++++++-------- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/main/src/themes/TabInStrip.css b/packages/main/src/themes/TabInStrip.css index a9cadd661c6a..08ced3ce499f 100644 --- a/packages/main/src/themes/TabInStrip.css +++ b/packages/main/src/themes/TabInStrip.css @@ -83,6 +83,7 @@ background: var(--sapTextColor); margin-inline-start: 0.0625rem; z-index: 2; + margin-left: 0.625rem; } .ui5-tab-expand-button:hover { diff --git a/packages/main/src/themes/base/TabContainer-parameters.css b/packages/main/src/themes/base/TabContainer-parameters.css index 1958c6f809dc..56c03e56e595 100644 --- a/packages/main/src/themes/base/TabContainer-parameters.css +++ b/packages/main/src/themes/base/TabContainer-parameters.css @@ -19,14 +19,14 @@ --_ui5_tc_headerItem_text_selected_hover_color: var(--sapSelectedColor); --_ui5_tc_headeritem_text_font_weight: normal; --_ui5_tc_headerItem_additional_text_font_weight: normal; - --_ui5_tc_headerItem_neutral_color: var(--sapNeutralColor); - --_ui5_tc_headerItem_positive_color: var(--sapPositiveColor); - --_ui5_tc_headerItem_negative_color: var(--sapNegativeColor); - --_ui5_tc_headerItem_critical_color: var(--sapCriticalColor); - --_ui5_tc_headerItem_neutral_border_color: var(--_ui5_tc_headerItem_neutral_color); - --_ui5_tc_headerItem_positive_border_color: var(--_ui5_tc_headerItem_positive_color); - --_ui5_tc_headerItem_negative_border_color: var(--_ui5_tc_headerItem_negative_color); - --_ui5_tc_headerItem_critical_border_color: var(--_ui5_tc_headerItem_critical_color); + --_ui5_tc_headerItem_neutral_color: var(--sapNeutralTextColor); + --_ui5_tc_headerItem_positive_color: var(--sapPositiveTextColor); + --_ui5_tc_headerItem_negative_color: var(--sapNegativeTextColor); + --_ui5_tc_headerItem_critical_color: var(--sapCriticalTextColor); + --_ui5_tc_headerItem_neutral_border_color: var(--sapNeutralElementColor); + --_ui5_tc_headerItem_positive_border_color: var(--sapPositiveElementColor); + --_ui5_tc_headerItem_negative_border_color: var(--sapNegativeElementColor); + --_ui5_tc_headerItem_critical_border_color: var(--sapCriticalElementColor); --_ui5_tc_headerItem_neutral_selected_border_color: var(--_ui5_tc_headerItem_neutral_color); --_ui5_tc_headerItem_positive_selected_border_color: var(--_ui5_tc_headerItem_positive_color); --_ui5_tc_headerItem_negative_selected_border_color: var(--_ui5_tc_headerItem_negative_color); From 4714835990da6858f47462534b46978a9b0c65fc Mon Sep 17 00:00:00 2001 From: Jianrong Yu <95995341+Jianrong-Yu@users.noreply.github.com> Date: Mon, 16 Oct 2023 05:00:11 -0700 Subject: [PATCH 067/141] feat(ui5-combobox): add attribute `no-typeahead` (#7692) --- packages/main/src/ComboBox.ts | 14 ++++++++++- packages/main/test/pages/ComboBox.html | 16 +++++++++++++ .../main/test/specs/ComboBox.mobile.spec.js | 24 +++++++++++++++---- packages/main/test/specs/ComboBox.spec.js | 19 +++++++++++++++ .../main/ComboBox/ComboBox.stories.ts | 5 ++-- 5 files changed, 70 insertions(+), 8 deletions(-) diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts index b4cd080eeac1..0b525582fd4e 100644 --- a/packages/main/src/ComboBox.ts +++ b/packages/main/src/ComboBox.ts @@ -226,6 +226,18 @@ class ComboBox extends UI5Element { @property() value!: string; + /** + * Defines whether the value will be autocompleted to match an item + * + * @type {boolean} + * @name sap.ui.webc.main.ComboBox.prototype.noTypeahead + * @defaultvalue false + * @public + * @since 1.19.0 + */ + @property({ type: Boolean }) + noTypeahead!: boolean; + /** * Defines the "live" value of the component. *

@@ -656,7 +668,7 @@ class ComboBox extends UI5Element { "historyUndo", ]; - return !allowedEventTypes.includes(eventType); + return !this.noTypeahead && !allowedEventTypes.includes(eventType); } _startsWithMatchingItems(str: string): Array { diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index 56d7ebeeb41c..82730131ddec 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -148,6 +148,22 @@
+
+ Without type ahead: + + + + + + + + + + + + +
+

diff --git a/packages/main/test/specs/ComboBox.mobile.spec.js b/packages/main/test/specs/ComboBox.mobile.spec.js index bb580996aac6..7473dbc9a5d5 100644 --- a/packages/main/test/specs/ComboBox.mobile.spec.js +++ b/packages/main/test/specs/ComboBox.mobile.spec.js @@ -91,7 +91,7 @@ describe("Eventing", () => { it("Should fire input event with correct parameters when typing in internal input", async () => { const combo = await browser.$("#input-cb"); const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#input-cb"); - + await combo.scrollIntoView(); await combo.click(); @@ -156,15 +156,15 @@ describe("Eventing", () => { assert.strictEqual(changeCountText, "1", "Change was fired once"); assert.strictEqual(await combo.getValue(), "Argentina", "The original value was changed"); - + }); it ("When select an item, then open the dialog again and delete the text, then press OK button, the value should be deleted.", async ()=> { const cb = await browser.$("#combo2"); const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo2"); - + await cb.click(); - + const resPopover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); const dialogInput = await resPopover.$(".ui5-input-inner-phone"); const okBtn = await resPopover.$(".ui5-responsive-popover-footer").$("ui5-button"); @@ -176,7 +176,7 @@ describe("Eventing", () => { await okBtn.click(); assert.strictEqual(await cb.getProperty("value"), "Algeria", "Value should be Algeria."); - + await cb.click(); await dialogInput.keys('Backspace'); await okBtn.click(); @@ -203,6 +203,20 @@ describe("Typeahead", () => { await dialogInput.keys("Bu"); assert.strictEqual(await dialogInput.getProperty("value"), sExpected, "Value is autocompleted"); }); + + it("Should not perform typeahead when it is disabled", async () => { + await browser.url("test/pages/ComboBox.html"); + + const combo = await browser.$("#combo-without-type-ahead"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-without-type-ahead") + + await combo.scrollIntoView(); + await combo.click(); + + const dialogInput = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover").$(".ui5-input-inner-phone"); + await dialogInput.keys("b"); + assert.strictEqual(await dialogInput.getProperty("value"), "b", "Value is not autocompleted"); + }); }); describe("Picker filtering", () => { diff --git a/packages/main/test/specs/ComboBox.spec.js b/packages/main/test/specs/ComboBox.spec.js index ce3cdcc22154..8b17736b19e2 100644 --- a/packages/main/test/specs/ComboBox.spec.js +++ b/packages/main/test/specs/ComboBox.spec.js @@ -1014,4 +1014,23 @@ describe("Keyboard navigation", async () => { assert.ok(await listItems[0].getProperty("selected"), "List Item should be selected"); assert.notOk(await listItems[1].getProperty("selected"), "List Item should not be selected"); }); + + it ("Tests disabled autocomplete(type-ahead)", async () => { + await browser.url(`test/pages/ComboBox.html`); + + const comboBox = await browser.$("#combo-without-type-ahead"); + const input = await comboBox.shadow$("#ui5-combobox-input"); + const staticAreaItemClassName = await browser.getStaticAreaItemClassName("#combo-without-type-ahead"); + const popover = await browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover"); + + await input.click(); + await input.keys("b"); + + await browser.waitUntil(() => popover.getProperty("opened"), { + timeout: 200, + timeoutMsg: "Popover should be displayed" + }); + + assert.strictEqual(await input.getProperty("value"), "b", "Value is not autocompleted"); + }); }); diff --git a/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts b/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts index fbe317bc1539..8c75b320c281 100644 --- a/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts +++ b/packages/playground/_stories/main/ComboBox/ComboBox.stories.ts @@ -35,6 +35,7 @@ const Template: UI5StoryArgs = ( args ) => html` - - + + From 173230467f93b227c37b54b666dcfcfec07bcab1 Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Mon, 16 Oct 2023 15:59:46 +0300 Subject: [PATCH 068/141] feat: update @ui5/webcomponents-icons to 5.07 & 4.19 (#7708) --- packages/icons/src/v4/SAP-icons.json | 17 +++++++--- packages/icons/src/v5/SAP-icons.json | 33 ++++++++++++------- .../main/test/pages/Icon_and_theming.html | 15 ++++++--- 3 files changed, 45 insertions(+), 20 deletions(-) diff --git a/packages/icons/src/v4/SAP-icons.json b/packages/icons/src/v4/SAP-icons.json index 935f70756e90..47cb1da0522b 100644 --- a/packages/icons/src/v4/SAP-icons.json +++ b/packages/icons/src/v4/SAP-icons.json @@ -1347,7 +1347,7 @@ "path": "M32 129q-13 0-22.5-9.5T0 97q0-14 9.5-23T32 65h448q14 0 23 9t9 23q0 13-9 22.5t-23 9.5H32zm0 159q-13 0-22.5-9.5T0 256q0-14 9.5-23t22.5-9h448q14 0 23 9t9 23q0 13-9 22.5t-23 9.5H32zm0 159q-13 0-22.5-9.5T0 415q0-14 9.5-23t22.5-9h448q14 0 23 9t9 23q0 13-9 22.5t-23 9.5H32z" }, "message-error": { - "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-3 2-3 4t2 5l89 89q4 4 4 8t-4 9l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-4-5-4-9t4-8l88-89q3-3 3-5t-3-4l-88-89q-4-4-4-8 0-5 4-9l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q5 4 5 8t-5 9z", + "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-5 3-1 9l89 89q8 8 0 17l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-8-9 0-17l88-89q5-5 0-9l-88-89q-8-8 0-17l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q9 8 0 17z", "acc": { "key": "ICON_MESSAGE_ERROR", "defaultText": "Error" @@ -1485,7 +1485,7 @@ "path": "M0 96q0-26 19-45t45-19h384q27 0 45.5 19T512 96v224q0 26-18.5 45T448 384h-32v75q0 10-6.5 15.5T395 480t-12-4l-79-92H64q-26 0-45-19T0 320V96zm64 256h256l64 80v-80h64q14 0 23-9t9-23V96q0-13-9-22.5T448 64H64q-13 0-22.5 9.5T32 96v224q0 14 9.5 23t22.5 9zm64-112q0-7 5-11.5t11-4.5h224q16 0 16 16 0 6-4.5 11t-11.5 5H144q-6 0-11-5t-5-11zm16-112h224q16 0 16 16 0 6-4.5 11t-11.5 5H144q-6 0-11-5t-5-11q0-7 5-11.5t11-4.5z" }, "notification": { - "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-3 2-3 4t2 5l89 89q4 4 4 8t-4 9l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-4-5-4-9t4-8l88-89q3-3 3-5t-3-4l-88-89q-4-4-4-8 0-5 4-9l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q5 4 5 8t-5 9z" + "path": "M512 256q0 54-20 100.5t-54.5 81T356 492t-100 20q-54 0-100.5-20t-81-55T20 355.5 0 256t20.5-100 55-81.5T157 20t99-20q53 0 100 20t81.5 54.5T492 156t20 100zm-32 0q0-47-17.5-87.5t-48-71-71.5-48T256 32t-87 18-71.5 48.5-48 71T32 256q0 47 17.5 88t48 71 71.5 47.5 87 17.5q47 0 88-17.5t71-47.5 47.5-71 17.5-88zm-186-7q-5 3-1 9l89 89q8 8 0 17l-16 17q-8 4-9 4t-9-4l-89-89q-1-2-4-2-4 0-5 2l-88 89q-6 4-9 4-1 0-9-4l-16-17q-8-9 0-17l88-89q5-5 0-9l-88-89q-8-8 0-17l16-17q4-4 9-4t9 4l88 89q2 2 5 2 2 0 4-2l89-89q4-4 9-4t9 4l16 17q9 8 0 17z" }, "number-sign": { "path": "M495.24 159.827q8.99 0 13.985 7.99t1 15.984l-15.983 31.965q-4.995 7.991-14.984 7.991H374.372l-12.986 63.93h101.89q8.99 0 13.984 7.992t.999 15.983l-15.983 31.965q-4.994 7.991-13.985 7.991h-100.89l-24.973 115.875q-1.998 11.987-14.984 11.987H275.48q-7.991 0-12.487-5.494t-2.497-13.486l22.975-108.882h-95.896l-24.973 115.875q-1.997 11.987-14.983 11.987h-31.966q-7.991 0-12.486-5.494t-2.497-13.486l22.975-108.882H16.76q-8.99 0-13.985-7.491t-1-15.484l15.984-31.965q4.994-8.99 14.983-8.99h104.886l12.986-63.93H48.724q-8.99 0-13.984-7.493t-.999-15.483l15.983-31.965q4.994-8.99 14.984-8.99h99.891L189.572 44.95q1.998-12.986 14.984-12.986h31.965q7.991 0 12.487 5.994t2.497 13.985L228.53 159.827h95.896L349.399 44.95q1.997-12.986 14.983-12.986h31.966q7.991 0 12.486 5.994t2.497 13.985l-22.975 107.883H495.24zm-184.8 63.93h-95.895l-12.986 63.93h95.896z" @@ -1582,10 +1582,10 @@ "ltr": true }, "pdf-attachment": { - "path": "M.5 480V128l128-128h224q13 0 22.5 9t9.5 23v64h-32V32h-192v96q0 14-9.5 23t-23.5 9h-95v320h320v-48h32v48q0 14-9 23t-23 9h-320q-14 0-23-9t-9-23zm244-144l31-12q28-45 42-89-7-7-9-22t-2-25q0-22 7-37.5t21-15.5q11 0 18 12 4 8 5 18t1 18q0 18-6 44v6q5 8 13.5 22t18.5 25q5 5 9 8.5t8 5.5l31-7q5-1 9-1.5t8-.5q22 0 42 11t20 26q0 23-34 23-18 0-41.5-5.5T396.5 325l-12 3q-8 2-16 3.5t-16 3.5q-17 4-31 7.5t-25 6.5q-33 51-54 51l-7-1q-21-8-21-26t30-37zm74-24l45-10q-13-14-24-30z" + "path": "M496 223q16 0 16 16t-16 16h-85v44h60q16 0 16 16t-16 16h-60v60q0 16-16 16-6 0-11-4.5t-5-11.5V239q0-7 5-11.5t11-4.5h101zm-363 67q0 27-19 46.5T67 356H32v35q0 16-16 16-6 0-11-4.5T0 391V239q0-7 5-11.5t11-4.5h51q28 0 47 19.5t19 47.5zM32 324h35q14 0 24-10t10-24-10-24.5T67 255H32v69zm221-101q28 0 47 19.5t19 47.5v50q0 28-19 47.5T253 407h-51q-6 0-11-4.5t-5-11.5V239q0-7 5-11.5t11-4.5h51zm34 67q0-14-10-24.5T253 255h-35v120h35q14 0 24-10.5t10-24.5v-50zm132 153h32v36q0 14-9 23t-23 9H99q-14 0-23-9t-9-23v-33h32v33h320v-36zM99 192H67v-64L195 0h224q13 0 22 9 10 10 10 23v64h-32V32H227v96q0 13-10 22-9 9-23 9H99v33z" }, "pdf-reader": { - "path": "M96 160l96-96h192q13 0 22.5 9t9.5 23v32h-32V96H224v64q0 14-9.5 23t-23.5 9h-63v224h256v-32h32v32q0 14-9 23t-23 9H128q-14 0-23-9t-9-23V160zm146 166l27-10q13-22 22.5-41.5T307 236q-6-6-8-19.5t-2-22.5q0-20 6-33.5t19-13.5q8 0 12 4.5t6 11.5 2.5 14.5.5 12.5q0 8-1 18t-4 21v5l12.5 20 16.5 22 8 8 7 5h2l32-8q7 0 18 1.5t21 5 17.5 10T480 314q0 20-30 20-21 0-34-4-19-3-39-13l-10 2q-8 2-14.5 3t-14.5 3q-15 4-27.5 7t-22.5 6q-28 45-48 45h-6q-19-7-19-24 0-15 27-33zM96 0h32v32H96q-27 0-45.5 19T32 96v32H0V96q0-40 28-68T96 0zM0 384h32v32q0 26 18.5 45T96 480h32v32H96q-40 0-68-28T0 416v-32zm416 96q26 0 45-19t19-45v-32h32v32q0 20-7.5 37.5t-21 30.5-30.5 20.5-37 7.5h-32v-32h32zM384 32V0h32q20 0 37 7.5T483.5 28t21 30.5T512 96v32h-32V96q0-26-19-45t-45-19h-32zm-36 264q-12-12-21-27l-19 36z", + "path": "M96 0Q56 0 28 28T0 96h32q0-26 18.5-45T96 32h32V0H96zM0 416q0 40 28 68t68 28h32v-32H96q-27 0-45.5-19T32 416H0zm384 64v32h32q20 0 37-7.5t30.5-20.5 21-30.5T512 416h-32q0 26-19 45t-45 19h-32zm32-448q26 0 45 19t19 45h32q0-20-7.5-37.5t-21-30.5T453 7.5 416 0h-32v32h32zm80 128q16 0 16 16t-16 16h-85v44h60q16 0 16 16t-16 16h-60v60q0 6-4.5 11t-11.5 5-11.5-5-4.5-11V176q0-16 16-16h101zm-363 67q0 27-19.5 46.5T67 293H32v35q0 6-4.5 11T16 344t-11.5-5T0 328V176q0-16 16-16h51q27 0 46.5 19.5T133 227zM32 261h35q14 0 24-10t10-24-10-24.5T67 192H32v69zm221-101q27 0 46.5 19.5T319 227v50q0 28-19.5 47.5T253 344h-51q-7 0-11.5-5t-4.5-11V176q0-16 16-16h51zm34 67q0-14-10-24.5T253 192h-35v120h35q14 0 24-10.5t10-24.5v-50z", "ltr": true }, "pending": { @@ -2458,6 +2458,15 @@ }, "time-off": { "path": "M448 480V128H64v352h384zM128 64v32h32V64h-32zm224 0v32h32V64h-32zm96-32q14 0 23 9t9 23v416q0 14-9 23t-23 9H64q-14 0-23-9t-9-23V64q0-14 9-23t23-9h64V0h32v32h192V0h32v32h64zM211 388l-15-15 30-31-30-30 15-15 31 30 30-30 16 15-31 30 31 31-16 15-30-30zm128 0l-15-15 30-31-30-30 15-15 31 30 30-30 16 15-31 30 31 31-16 15-30-30zm-211-4q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9zm0-128q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9zm128 0q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9zm128 0q-14 0-23-9t-9-23 9-23 23-9 23 9 9 23-9 23-23 9z" + }, + "ai": { + "path": "M334.347 359.298q-27.945 8.983-49.404 20.96t-37.426 27.446-27.447 36.928-21.458 50.401q-2.994 7.985-9.481 12.476T175.657 512t-13.474-4.491-9.481-12.476q-9.98-28.943-21.458-50.401t-27.447-36.928-36.928-27.447-49.902-20.959q-8.983-2.994-12.975-9.481T0 335.844t3.992-13.973 12.975-9.481q28.943-9.98 49.902-21.458t36.928-27.447 27.447-37.427 21.458-49.403q2.994-7.984 9.481-12.476t13.474-4.49 13.474 4.49 9.481 12.476q9.98 27.945 21.458 49.403t27.447 37.427 37.426 27.447 49.404 21.458q7.984 2.994 12.476 9.481t4.49 13.973-4.49 13.973-12.476 9.481zm167.672-250.51q-31.937 10.978-47.407 26.448t-26.448 47.407q-2.994 8.983-12.975 8.983t-12.975-8.983q-10.978-31.937-26.448-47.407t-47.407-26.448q-8.983-2.995-8.983-12.476t8.983-13.474q31.937-10.978 47.407-26.448t26.448-47.408Q405.21 0 415.19 0t12.975 8.982q10.978 31.938 26.448 47.408t47.407 26.448q8.983 3.992 8.983 13.474t-8.983 12.476z" + }, + "da-2": { + "path": "M376 187q8-3 8-11t-8-10q-26-9-39.5-22.5T315 104q-3-8-11-8t-11 8q-8 26-21.5 39.5T232 166q-8 2-8 10t8 11q26 9 39.5 22.5T293 249q3 7 11 7t11-7q8-26 21.5-39.5T376 187zm132-35q4 7 4 15 0 7-5 15L277 502q-8 10-21 10t-21-10L5 182q-5-8-5-15 0-8 5-16L114 10q8-10 20-10h256q14 0 22 11z" + }, + "da": { + "path": "M36 163l220 305 221-306-89-130H137zm220 349q-8 0-13-7L3 172q-3-5-3-10t3-9L117 6q5-6 12-6h267q9 0 13 7l100 146q3 4 3 9t-3 10L269 505q-5 7-13 7zm120-326q-26 9-39.5 22.5T315 248q-3 8-11 8t-11-8q-8-26-21.5-39.5T232 186q-8-2-8-10t8-11q26-9 39.5-22.5T293 103q3-7 11-7t11 7q8 26 21.5 39.5T376 165q8 3 8 11 0 3-1.5 6t-6.5 4z" } } } \ No newline at end of file diff --git a/packages/icons/src/v5/SAP-icons.json b/packages/icons/src/v5/SAP-icons.json index 315eb3410f8e..1d78a001ac2f 100644 --- a/packages/icons/src/v5/SAP-icons.json +++ b/packages/icons/src/v5/SAP-icons.json @@ -8,7 +8,7 @@ "path": "M422 32q38 0 64 26t26 64v268q0 38-26 64t-64 26H90q-38 0-64-26T0 390V122q0-38 26-64t64-26h332zm39 90q0-17-11-28t-28-11H211v141h250V122zM51 390q0 17 11 28t28 11h70V83H90q-17 0-28 11t-11 28v268zm160 39h77V275h-77v154zm128-109h122v-45H339v45zm83 109q17 0 28-11t11-28v-19H339v58h83z" }, "Netweaver-business-client": { - "path": "M414 30q1 0 1.5.5t1.5.5q6 1 6 9l-10 48q-1 6-3 11t-7 9l-78 45q-6 2-9 2-8 0-10.5-7t-2.5-9q0-7 16-25t36-36.5 38-33T414 30zm78 66q5-3 8-3 6 0 9 5t3 12q0 14-9.5 34.5T479 186t-29.5 39-27.5 29q-5 5-18.5 16t-29 22.5-29.5 20-21 8.5q-8 0-8-7l-7-109q-2-5 3-10.5t10-8.5zm-272-3q13 1 22 8.5t14.5 17 8 19.5 2.5 16l21 311q0 15-11 15-7 0-13-8l-90-131q-10-14-14-28.5t-4-28.5q0-17 4-34t9-31q3-10 5.5-18t2.5-14q0-14-11.5-22T149 155q-6-2-21.5-5.5t-34-7.5-37-7.5T26 129l-16-3q-10-2-10-15v-2q1-11 15-11l133 12q8 0 14-2l12-4 6-2q2-1 4-1.5t4-1.5l8-4 9-2h15z" + "path": "M414 30q1 0 1.5.5t1.5.5q6 1 6 9l-10 48q-1 6-3 11t-7 9l-78 45q-6 2-9 2-8 0-10.5-7t-2.5-9q0-7 16-25t36-36.5 38-33T414 30zM220 93q13 1 22 8.5t15 17 8.5 19T268 153l20 312q0 15-11 15-7 0-13-8l-90-131q-10-14-14-28.5t-4-28.5q0-17 4-34t9-31q3-10 5.5-18t2.5-14q0-14-11.5-22T149 155q-6-2-21.5-5.5t-34-7.5-37-7.5T26 129l-16-3q-10-2-10-15v-2q1-11 15-11l133 12q8 0 14-2l12-4 6-2q2-1 4-1.5t4-1.5l8-4 9-2h15zm272 3q5-3 8-3 6 0 9 5t3 12q0 14-9.5 34.5T479 186t-29.5 39-26.5 29q-6 5-19.5 16t-29 22.5-29.5 20-21 8.5q-8 0-8-7l-7-109q-2-5 3-10.5t10-8.5z" }, "accelerated": { "path": "M390 64q38 0 64 26t26 64v268q0 38-26 64t-64 26H122q-38 0-64-26t-26-64V154q0-38 26-64t64-26h6V26q0-11 7.5-18.5T154 0t18 7.5 7 18.5v38h154V26q0-11 7-18.5T358 0t18.5 7.5T384 26v38h6zm39 90q0-17-11-28t-28-11h-6v19q0 11-7.5 18.5T358 160t-18-7.5-7-18.5v-19H179v19q0 11-7 18.5t-18 7.5-18.5-7.5T128 134v-19h-6q-17 0-28 11t-11 28v268q0 17 11 28t28 11h268q17 0 28-11t11-28V154zm-71 83q11 0 18.5 7t7.5 18-7.5 18.5T358 288H218q-11 0-18.5-7.5T192 262t7.5-18 18.5-7h140zm-96 83q11 0 18.5 7.5T288 346t-7.5 18-18.5 7H154q-11 0-18.5-7t-7.5-18 7.5-18.5T154 320h108z" @@ -593,7 +593,7 @@ "path": "M368 160q-33 0-56.5-23.5T288 80t23.5-56.5T368 0q29 0 51 18t27 46h40q11 0 18.5 7.5T512 90t-7.5 18-18.5 7h-46q-10 20-29 32.5T368 160zm0-109q-12 0-20.5 8.5T339 80t8.5 20.5T368 109t20.5-8.5T397 80t-8.5-20.5T368 51zM26 115q-11 0-18.5-7T0 90t7.5-18.5T26 64h172q11 0 18.5 7.5T224 90t-7.5 18-18.5 7H26zm118 77q33 0 56.5 23.5T224 272t-23.5 56.5T144 352t-56.5-23.5T64 272t23.5-56.5T144 192zm342 45q11 0 18.5 7t7.5 18-7.5 18.5T486 288H314q-11 0-18.5-7.5T288 262t7.5-18 18.5-7h172zm-342 64q12 0 20.5-8.5T173 272t-8.5-20.5T144 243t-20.5 8.5T115 272t8.5 20.5T144 301zm342 96q11 0 18.5 7t7.5 18-7.5 18.5T486 448H382q-5 28-27 46t-51 18q-33 0-56.5-23.5T224 432t23.5-56.5T304 352q24 0 43 12.5t29 32.5h110zm-352 0q11 0 18.5 7t7.5 18-7.5 18.5T134 448H26q-11 0-18.5-7.5T0 422t7.5-18 18.5-7h108zm170 64q12 0 20.5-8.5T333 432t-8.5-20.5T304 403t-20.5 8.5T275 432t8.5 20.5T304 461z" }, "database": { - "path": "M479 85q1 2 1 7v318q0 32-26.5 52t-63 31-75 15-61.5 4q-14 0-36.5-1.5t-47-5.5-49-11.5T77 475t-32.5-27T32 410V92q0-5 1-7 6-27 33.5-44T129 15t70-12 57-3 57 3 70 12 62.5 26T479 85zM83 303q0 14 18 23.5t44.5 15 56.5 8 54 2.5 54-2.5 56.5-8 44.5-15 18-23.5v-39q-38 20-84.5 27.5T256 299t-88.5-7.5T83 264v39zm346-143q-38 19-84.5 25.5T256 192t-88.5-6.5T83 160v36q0 14 18 24t44.5 16 56.5 8.5 54 2.5 54-2.5 56.5-8.5 44.5-16 18-24v-36zM256 51q-24 0-54 2.5t-56.5 8-44.5 14T83 96t18 20.5 44.5 14 56.5 8 54 2.5 54-2.5 56.5-8 44.5-14T429 96t-18-20.5-44.5-14-56.5-8-54-2.5zm0 410q24 0 54-2.5t56.5-8.5 44.5-16 18-24v-39q-38 20-84.5 26t-88.5 6-88.5-6T83 371v39q0 14 18 24t44.5 16 56.5 8.5 54 2.5z" + "path": "M157 53l86-50q6-3 13-3t13 3l85 50-98 59zm248 30l62 36q13 6 13 22v71l-96 56v-66q0-13-12-22l-66-39zM32 212v-71q0-16 13-22l62-36 99 58-65 39q-13 8-13 22v66zm224-41l77 46v80l-77 45-77-45v-80zm224 100v100q0 15-13 22l-83 49V327zM128 442l-83-49q-13-7-13-22V271l96 56v115zm205 29l-64 38q-6 3-13 3t-13-3l-64-38V357l64 37q6 3 13 3t13-3l64-37v114z" }, "date-time": { "path": "M83 243v147q0 17 11 28t28 11h4q11 0 18.5 7t7.5 18-7.5 18.5T126 480h-4q-38 0-64-26t-26-64V154q0-38 26-64t64-26h6V26q0-11 7.5-18.5T154 0t18 7.5 7 18.5v38h122V26q0-11 7-18.5T326 0t18.5 7.5T352 26v38h6q38 0 64 26t26 64v4q0 11-7.5 18.5T422 184t-18-7.5-7-18.5v-4q0-17-11-28t-28-11h-6v19q0 11-7.5 18.5T326 160t-18-7.5-7-18.5v-19H179v19q0 11-7 18.5t-18 7.5-18.5-7.5T128 134v-19h-6q-17 0-28 11t-11 28v38h51q11 0 18.5 7.5T160 218t-7.5 18-18.5 7H83zm237-51q33 0 62 12.5t51 34.5 34.5 51 12.5 62-12.5 62-34.5 51-51 34.5-62 12.5-62-12.5-51-34.5-34.5-51-12.5-62 12.5-62 34.5-51 51-34.5 62-12.5zm0 269q23 0 42.5-8.5T397 429t23.5-35 8.5-42q0-23-8.5-42.5T397 275t-34.5-23.5T320 243q-22 0-42 8.5T243 275t-23.5 34.5T211 352q0 22 8.5 42t23.5 35 35 23.5 42 8.5zm55-90q9 7 9 19 0 11-7.5 18.5T358 416q-8 0-16-6l-45-39q-9-8-9-19v-46q0-11 7.5-18.5T314 280t18 7.5 7 18.5v34z", @@ -1347,14 +1347,14 @@ "path": "M486 115H26q-11 0-18.5-7T0 90t7.5-18.5T26 64h460q11 0 18.5 7.5T512 90t-7.5 18-18.5 7zm0 167H26q-11 0-18.5-7.5T0 256t7.5-18.5T26 230h460q11 0 18.5 7.5T512 256t-7.5 18.5T486 282zm0 166H26q-11 0-18.5-7.5T0 422t7.5-18 18.5-7h460q11 0 18.5 7t7.5 18-7.5 18.5T486 448z" }, "message-error": { - "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm45 256l74-73q9-11 9-23 0-13-9.5-22.5T352 128q-12 0-23 9l-73 74-73-74q-10-9-23-9t-22.5 9.5T128 160q0 12 9 23l74 73-74 73q-9 10-9 23t9.5 22.5T160 384t23-9l73-74 73 74q11 9 23 9 13 0 22.5-9.5T384 352t-9-23z", + "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm0 461q42 0 79.5-16t65.5-44 44-65.5 16-79.5-16-79.5-44-65.5-65.5-44T256 51t-79.5 16-65.5 44-44 65.5T51 256t16 79.5 44 65.5 65.5 44 79.5 16zm70-301q11 0 18.5 7.5T352 186t-7 18l-53 52 53 52q7 7 7 18t-7.5 18.5T326 352q-10 0-18-8l-52-52-52 52q-8 8-18 8-11 0-18.5-7.5T160 326q0-10 8-18l52-52-52-52q-8-8-8-18 0-11 7.5-18.5T186 160t18 7l52 53 52-53q7-7 18-7z", "acc": { "key": "ICON_MESSAGE_ERROR", "defaultText": "Error" } }, "message-information": { - "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm0 160q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9zm32 64q0-14-9-23t-23-9-23 9-9 23v160q0 14 9 23t23 9 23-9 9-23V224z", + "path": "M256 0q53 0 100 20t81.5 54.5T492 156t20 100-20 100-54.5 81.5T356 492t-100 20-100-20-81.5-54.5T20 356 0 256t20-100 54.5-81.5T156 20 256 0zm0 461q43 0 80.5-16t65-44 43.5-65 16-80-16-80.5-43.5-65-65-43.5T256 51t-80 16-65 43.5-44 65T51 256t16 80 44 65 65 44 80 16zm0-333q13 0 22.5 9.5T288 160t-9.5 22.5T256 192t-22.5-9.5T224 160t9.5-22.5T256 128zm0 115q11 0 18 7.5t7 18.5v102q0 11-7 18.5t-18 7.5-18.5-7.5T230 371V269q0-11 7.5-18.5T256 243z", "ltr": true, "acc": { "key": "ICON_MESSAGE_INFORMATION", @@ -1365,7 +1365,7 @@ "path": "M486 512q-10 0-17-7l-95-89H90q-38 0-64-26T0 326V90q0-38 26-64T90 0h332q38 0 64 26t26 64v396q0 11-7.5 18.5T486 512zM90 51q-17 0-28 11T51 90v236q0 17 11 28t28 11h294q11 0 18 7l59 55V90q0-17-11-28t-28-11H90zm166 173q-11 0-18.5-7.5T230 198v-76q0-11 7.5-18.5T256 96t18.5 7.5T282 122v76q0 11-7.5 18.5T256 224zm0 32q13 0 22.5 9.5T288 288t-9.5 22.5T256 320t-22.5-9.5T224 288t9.5-22.5T256 256z" }, "message-success": { - "path": "M256 0q53 0 100 20t81.5 54.5T492 156t20 100-20 100-54.5 81.5T356 492t-100 20-100-20-81.5-54.5T20 356 0 256t20-100 54.5-81.5T156 20 256 0zm150 183q10-9 10-23 0-13-9.5-22.5T384 128t-22 9L186 308l-68-63q-9-9-22-9t-22.5 9.5T64 268q0 15 10 24l91 83q9 9 21 9 13 0 23-9z", + "path": "M256 512q-53 0-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0t99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20zm0-461q-42 0-79.5 16T111 111t-44 65.5T51 256t16 79.5 44 65.5 65.5 44 79.5 16 79.5-16 65.5-44 44-65.5 16-79.5-16-79.5-44-65.5-65.5-44T256 51zm-43 301q-10 0-17-7l-71-63q-9-8-9-19t7.5-18.5T142 237q10 0 17 7l53 47 128-131q8-8 18-8 11 0 18.5 7.5T384 178q0 10-7 17L231 344q-8 8-18 8z", "ltr": true, "acc": { "key": "ICON_MESSAGE_SUCCESS", @@ -1373,7 +1373,7 @@ } }, "message-warning": { - "path": "M505 399q7 13 7 27 0 21-15.5 37.5T456 480H56q-25 0-40.5-16.5T0 426q0-14 7-27L208 59q17-27 48-27 14 0 27 6.5T304 59zM288 176q0-14-9-23t-23-9-23 9-9 23v96q0 14 9 23t23 9 23-9 9-23v-96zm-32 240q14 0 23-9t9-23-9-23-23-9-23 9-9 23 9 23 23 9z", + "path": "M436 480H76q-31 0-53.5-21T0 407q0-21 10-37L191 68q10-17 27.5-26.5T256 32t37.5 9.5T321 68l181 302q10 16 10 37 0 31-22.5 52T436 480zM256 83q-15 0-21 12L54 396q-3 6-3 11 0 9 7.5 15.5T76 429h360q10 0 17.5-6.5T461 407q0-5-3-11L277 95q-6-12-21-12zm0 213q-11 0-18.5-7.5T230 270v-85q0-11 7.5-18.5T256 159t18.5 7.5T282 185v85q0 11-7.5 18.5T256 296zm0 105q-13 0-22-9t-9-23q0-13 9-22t22-9 22 9 9 22q0 14-9 23t-22 9z", "acc": { "key": "ICON_MESSAGE_WARNING", "defaultText": "Warning" @@ -1470,7 +1470,7 @@ "path": "M406 32q31 0 52.5 21.5T480 106v299q0 31-22 53t-53 22H106q-31 0-52.5-21.5T32 406V106q0-31 21.5-52.5T106 32h300zm23 74q0-10-6.5-16.5T406 83H106q-10 0-16.5 6.5T83 106v300q0 10 6.5 16.5T106 429h299q10 0 17-7t7-17V106zm-71 124q11 0 18.5 7.5T384 256t-7.5 18.5T358 282H153q-11 0-18-7.5t-7-18.5 7-18.5 18-7.5h205z" }, "newspaper": { - "path": "M417 352q0 12-7 18L275 505q-9 7-18 7H26q-11 0-18.5-7.5T0 486V26Q0 15 7.5 7.5T26 0h366q11 0 18 7.5t7 18.5v326zM486 0q11 0 18.5 7.5T512 26v460q0 11-7.5 18.5T486 512h-77q-11 0-18.5-7.5T383 486t7.5-18 18.5-7h52V26q0-11 7-18.5T486 0zM246 461l10-10v-55q0-18 13-31t31-13h56l10-10V51H51v410h195zM122 160q-11 0-18.5-7.5T96 134v-12q0-11 7.5-18.5T122 96h12q11 0 18.5 7.5T160 122v12q0 11-7.5 18.5T134 160h-12zm96 0q-11 0-18.5-7.5T192 134v-12q0-11 7.5-18.5T218 96h76q11 0 18.5 7.5T320 122v12q0 11-7.5 18.5T294 160h-76zm-96 80q-11 0-18.5-7.5T96 214t7.5-18.5T122 188h172q11 0 18.5 7.5T320 214t-7.5 18.5T294 240H122zm0 84q-11 0-18.5-7.5T96 298t7.5-18 18.5-7h172q11 0 18.5 7t7.5 18-7.5 18.5T294 324H122zm44 41q11 0 18.5 7t7.5 18-7.5 18.5T166 416h-44q-11 0-18.5-7.5T96 390t7.5-18 18.5-7h44z" + "path": "M416 352q0 12-8 18L275 505q-9 7-18 7H26q-11 0-18.5-7.5T0 486V26Q0 15 7.5 7.5T26 0h364q11 0 18.5 7.5T416 26v326zM486 0q11 0 18.5 7.5T512 26v460q0 11-7.5 18.5T486 512h-77q-11 0-18.5-7.5T383 486t7.5-18 18.5-7h52V26q0-11 7-18.5T486 0zM246 461l10-10v-55q0-18 13-31t31-13h56l10-10V51H51v410h195zM122 160q-11 0-18.5-7.5T96 134v-12q0-11 7.5-18.5T122 96h12q11 0 18.5 7.5T160 122v12q0 11-7.5 18.5T134 160h-12zm96 0q-11 0-18.5-7.5T192 134v-12q0-11 7.5-18.5T218 96h76q11 0 18.5 7.5T320 122v12q0 11-7.5 18.5T294 160h-76zm-96 80q-11 0-18.5-7.5T96 214t7.5-18.5T122 188h172q11 0 18.5 7.5T320 214t-7.5 18.5T294 240H122zm0 84q-11 0-18.5-7.5T96 298t7.5-18 18.5-7h172q11 0 18.5 7t7.5 18-7.5 18.5T294 324H122zm44 41q11 0 18.5 7t7.5 18-7.5 18.5T166 416h-44q-11 0-18.5-7.5T96 390t7.5-18 18.5-7h44z" }, "non-binary": { "path": "M280 258q45 8 74.5 43t29.5 83q0 26-10 49.5t-27.5 41T306 502t-50 10-50-10-40.5-27.5-27.5-41-10-49.5q0-46 28.5-81t72.5-44v-84l-41 41q-8 8-18 8-12 0-19-7.5t-7-18.5q0-10 8-18l68-68-68-69q-8-8-8-18 0-11 7.5-18T170 0t18 7l68 69 68-69q7-7 18-7 12 0 19 7t7 18-7 18l-69 69 69 68q7 7 7 18 0 12-7.5 19t-18.5 7q-10 0-18-8l-44-44v86zm-24 203q32 0 54.5-22.5T333 384t-22.5-54.5T256 307t-54.5 22.5T179 384t22.5 54.5T256 461z" @@ -1485,7 +1485,7 @@ "path": "M486 512q-10 0-18-8l-95-102H77q-32 0-54.5-22.5T0 325V77q0-32 22.5-54.5T77 0h358q32 0 54.5 22.5T512 77v409q0 11-7.5 18.5T486 512zM77 51q-11 0-18.5 7.5T51 77v248q0 11 7.5 18.5T77 351h307q11 0 19 8l58 62V77q0-11-7.5-18.5T435 51H77zm77 128q-11 0-18.5-7t-7.5-18 7.5-18.5T154 128h204q11 0 18.5 7.5T384 154t-7.5 18-18.5 7H154zm76 96q-11 0-18-7t-7-18 7-18.5 18-7.5h128q11 0 18.5 7.5T384 250t-7.5 18-18.5 7H230z" }, "notification": { - "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm45 256l74-73q9-11 9-23 0-13-9.5-22.5T352 128q-12 0-23 9l-73 74-73-74q-10-9-23-9t-22.5 9.5T128 160q0 12 9 23l74 73-74 73q-9 10-9 23t9.5 22.5T160 384t23-9l73-74 73 74q11 9 23 9 13 0 22.5-9.5T384 352t-9-23z" + "path": "M256 0q53 0 99.5 20T437 75t55 81.5 20 99.5-20 99.5-55 81.5-81.5 55-99.5 20-99.5-20T75 437t-55-81.5T0 256t20-99.5T75 75t81.5-55T256 0zm0 461q42 0 79.5-16t65.5-44 44-65.5 16-79.5-16-79.5-44-65.5-65.5-44T256 51t-79.5 16-65.5 44-44 65.5T51 256t16 79.5 44 65.5 65.5 44 79.5 16zm70-301q11 0 18.5 7.5T352 186t-7 18l-53 52 53 52q7 7 7 18t-7.5 18.5T326 352q-10 0-18-8l-52-52-52 52q-8 8-18 8-11 0-18.5-7.5T160 326q0-10 8-18l52-52-52-52q-8-8-8-18 0-11 7.5-18.5T186 160t18 7l52 53 52-53q7-7 18-7z" }, "number-sign": { "path": "M486 333q11 0 18.5 7t7.5 18-7.5 18.5T486 384H365l-15 106q-2 10-9 16t-16 6q-13 0-19.5-9t-6.5-20l14-99H162l-15 106q-2 10-9 16t-16 6q-13 0-19.5-9T96 483l14-99H26q-11 0-18.5-7.5T0 358t7.5-18 18.5-7h92l22-154H26q-11 0-18.5-7T0 154t7.5-18.5T26 128h121l15-106q2-10 9-16t16-6q13 0 19.5 9t6.5 20l-14 99h151l15-106q2-10 9-16t16-6q13 0 19.5 9t6.5 20l-14 99h84q11 0 18.5 7.5T512 154t-7.5 18-18.5 7h-92l-22 154h114zm-165 0l22-154H191l-22 154h152z" @@ -1582,10 +1582,10 @@ "ltr": true }, "pdf-attachment": { - "path": "M373.892 461q11 0 18.5 7t7.5 18-7.5 18.5-18.5 7.5h-332q-11 0-18.5-7.5t-7.5-18.5V192q0-10 6-17l143-166q6-9 19-9h190q11 0 18.5 7.5t7.5 18.5v76q0 11-7.5 18.5t-18.5 7.5-18-7.5-7-18.5V51h-153l-20 24v66q0 21-15 36t-36 15h-50l-8 9v260h307zm15-147q13-5 24.5-6.5t22.5-1.5q29 0 45.5 11.5t14.5 26.5q-1 11-10.5 15t-23.5 4q-20 0-43.5-6.5t-34.5-12.5l-97 23q-16 27-31 38t-26 11q-10 0-16-6.5t-6-16.5q0-13 13-27.5t45-22.5q14-22 24-43.5t17-43.5q-6-14-8.5-26.5t-2.5-23.5q0-23 8.5-34.5t19.5-11.5q9 0 16.5 10.5t7.5 33.5q0 10-1.5 22t-6.5 26q13 24 25.5 39t23.5 23zm-37 7q-14-12-23-29l-21 39z" + "path": "M294 96q-10 0-17-7l-39-38H83v19q0 11-7 18.5T58 96t-18.5-7.5T32 70V26q0-11 7.5-18.5T58 0h190q9 0 18 7l46 45q8 8 8.5 18T313 88t-19 8zm121 113v22h47q11 0 18.5 7t7.5 18-7.5 18.5T462 282h-47v47q0 11-7.5 18.5T389 355t-18-7.5-7-18.5V184q0-11 7-18.5t18-7.5h97q11 0 18.5 7.5T512 184t-7.5 18-18.5 7h-71zM74 158q31 0 52.5 21.5T148 232t-21.5 52.5T74 306H51v23q0 11-7 18.5T26 355t-18.5-7.5T0 329V184q0-11 7.5-18.5T26 158h48zm179 0q31 0 52.5 21.5T327 232v49q0 31-21.5 52.5T253 355h-49q-11 0-18-7.5t-7-18.5V184q0-11 7-18.5t18-7.5h49zM74 255q10 0 16.5-6.5T97 232q0-9-6.5-16T74 209H51v46h23zm202-23q0-9-7-16t-16-7h-23v95h23q9 0 16-7t7-16v-49zm114 280H26q-11 0-18.5-7.5T0 486v-44q0-11 7.5-18.5T26 416t18 7.5 7 18.5v19h314v-19q0-11 7-18.5t18-7.5 18.5 7.5T416 442v44q0 11-7.5 18.5T390 512z" }, "pdf-reader": { - "path": "M454 0q24 0 41 17t17 41v44q0 11-7.5 18.5T486 128t-18-7.5-7-18.5V58q0-7-7-7h-44q-11 0-18.5-7T384 26t7.5-18.5T410 0h44zM102 0q11 0 18.5 7.5T128 26t-7.5 18-18.5 7H58q-7 0-7 7v44q0 11-7 18.5T26 128t-18.5-7.5T0 102V58q0-24 17-41T58 0h44zm314 312q-2 11-11 15t-23 4q-20 0-43.5-6.5T304 312l-97 23q-16 27-31 38t-26 11q-10 0-16-6.5t-6-16.5q0-13 13-27.5t45-22.5q14-22 24-43.5t17-43.5q-6-14-8.5-26.5T216 174q0-23 8.5-34.5T244 128q9 0 16.5 10.5T268 172q0 10-1.5 22t-6.5 26q25 47 49 62 23-8 46-8 29 0 46 11.5t15 26.5zm-188-13l44-10q-14-12-23-29zm258 85q11 0 18.5 7.5T512 410v44q0 24-17 41t-41 17h-44q-11 0-18.5-7.5T384 486t7.5-18 18.5-7h44q7 0 7-7v-44q0-11 7-18.5t18-7.5zm-384 77q11 0 18.5 7t7.5 18-7.5 18.5T102 512H58q-24 0-41-17T0 454v-44q0-11 7.5-18.5T26 384t18 7.5 7 18.5v44q0 7 7 7h44z", + "path": "M486 128q-11 0-18-7.5t-7-18.5V58q0-7-7-7h-44q-11 0-18.5-7T384 26t7.5-18.5T410 0h44q24 0 41 17t17 41v44q0 11-7.5 18.5T486 128zm-460 0q-11 0-18.5-7.5T0 102V58q0-24 17-41T58 0h44q11 0 18.5 7.5T128 26t-7.5 18-18.5 7H58q-7 0-7 7v44q0 11-7 18.5T26 128zm389 81v21h47q11 0 18.5 7.5T488 256t-7.5 18.5T462 282h-47v47q0 11-7.5 18t-18.5 7-18-7-7-18V183q0-11 7-18t18-7h97q11 0 18.5 7t7.5 18-7.5 18.5T486 209h-71zM74 158q31 0 52.5 21.5T148 232t-21.5 52.5T74 306H51v23q0 11-7 18t-18 7-18.5-7T0 329V183q0-11 7.5-18t18.5-7h48zm179 0q31 0 52.5 21.5T327 232v48q0 31-21.5 52.5T253 354h-49q-11 0-18-7t-7-18V183q0-11 7-18t18-7h49zM74 255q10 0 16.5-7t6.5-16q0-10-6.5-16.5T74 209H51v46h23zm202-23q0-10-7-16.5t-16-6.5h-23v94h23q9 0 16-6.5t7-16.5v-48zm178 280h-44q-11 0-18.5-7.5T384 486t7.5-18 18.5-7h44q7 0 7-7v-44q0-11 7-18.5t18-7.5 18.5 7.5T512 410v44q0 24-17 41t-41 17zm-352 0H58q-24 0-41-17T0 454v-44q0-11 7.5-18.5T26 384t18 7.5 7 18.5v44q0 7 7 7h44q11 0 18.5 7t7.5 18-7.5 18.5T102 512z", "ltr": true }, "pending": { @@ -1927,14 +1927,14 @@ "path": "M486 0q11 0 18.5 7.5T512 26t-7.5 18-18.5 7h-38v19q0 11-7.5 18.5T422 96t-18-7.5-7-18.5V51h-45v19q0 11-7.5 18.5T326 96t-18-7.5-7-18.5V51h-45v19q0 11-7.5 18.5T230 96t-18-7.5-7-18.5V51h-45v19q0 11-7.5 18.5T134 96t-18-7.5-7-18.5V51H51v77h19q11 0 18.5 7.5T96 154t-7.5 18-18.5 7H51v45h19q11 0 18.5 7.5T96 250t-7.5 18-18.5 7H51v45h19q11 0 18.5 7.5T96 346t-7.5 18-18.5 7H51v45h19q11 0 18.5 7.5T96 442t-7.5 18-18.5 7H51v19q0 11-7 18.5T26 512t-18.5-7.5T0 486V26Q0 15 7.5 7.5T26 0h460zm-86 192q19 0 32.5 12.5T448 235v10q-2 18-15.5 30.5T400 288q-20 0-34-14t-14-34 14-34 34-14zm-39 101q10 1 16.5 8t6.5 17-6 16l-59 73q-7 9-19 9h-57v38q0 11-7.5 18.5T217 480t-18-7.5-7-18.5v-64q0-11 7-18t18-7h70l28-33q-10-5-21-12t-21-16.5-16.5-20.5-6.5-22 6.5-18.5T274 235q17 0 26 20 6 12 15.5 19.5T335 286t17.5 5.5 8.5 1.5z" }, "sort-ascending": { - "path": "M217 124q8 8 8 18 0 11-7.5 18.5T199 168q-10 0-17-7l-45-44v337q0 11-7 18.5t-18 7.5-18.5-7.5T86 454V119l-42 42q-7 7-18 7t-18.5-7.5T0 142q0-10 8-18l87-85q7-7 18-7 10 0 17 7zm65-9q-11 0-18.5-7T256 90t7.5-18.5T282 64h76q11 0 18.5 7.5T384 90t-7.5 18-18.5 7h-76zm0 128q-11 0-18.5-7t-7.5-18 7.5-18.5T282 192h140q11 0 18.5 7.5T448 218t-7.5 18-18.5 7H282zm204 77q11 0 18.5 7.5T512 346t-7.5 18-18.5 7H282q-11 0-18.5-7t-7.5-18 7.5-18.5T282 320h204z", + "path": "M358 147H154q-11 0-18.5-7t-7.5-18 7.5-18.5T154 96h204q11 0 18.5 7.5T384 122t-7.5 18-18.5 7zm64 128H90q-11 0-18.5-7T64 250t7.5-18.5T90 224h332q11 0 18.5 7.5T448 250t-7.5 18-18.5 7zm64 128H26q-11 0-18.5-7T0 378t7.5-18.5T26 352h460q11 0 18.5 7.5T512 378t-7.5 18-18.5 7z", "acc": { "key": "ICON_SORT_ASCENDING", "defaultText": "Sort Ascending" } }, "sort-descending": { - "path": "M182 351q7-7 17-7 11 0 18.5 7.5T225 370q0 10-8 18l-87 85q-7 7-17 7-11 0-18-7L8 388q-8-8-8-18 0-11 7.5-18.5T26 344t18 7l43 43V58q0-11 7.5-18.5T113 32t18 7.5 7 18.5v336zM486 64q11 0 18.5 7.5T512 90t-7.5 18-18.5 7H282q-11 0-18.5-7T256 90t7.5-18.5T282 64h204zm-64 128q11 0 18.5 7.5T448 218t-7.5 18-18.5 7H282q-11 0-18.5-7t-7.5-18 7.5-18.5T282 192h140zm-64 128q11 0 18.5 7.5T384 346t-7.5 18-18.5 7h-76q-11 0-18.5-7t-7.5-18 7.5-18.5T282 320h76z", + "path": "M486 96q11 0 18.5 7.5T512 122t-7.5 18-18.5 7H26q-11 0-18.5-7T0 122t7.5-18.5T26 96h460zm-64 128q11 0 18.5 7.5T448 250t-7.5 18-18.5 7H90q-11 0-18.5-7T64 250t7.5-18.5T90 224h332zm-64 128q11 0 18.5 7.5T384 378t-7.5 18-18.5 7H154q-11 0-18.5-7t-7.5-18 7.5-18.5T154 352h204z", "acc": { "key": "ICON_SORT_DESCENDING", "defaultText": "Sort Descending" @@ -2458,6 +2458,15 @@ }, "time-off": { "path": "M390 64q38 0 64 26t26 64v268q0 38-26 64t-64 26H122q-38 0-64-26t-26-64V154q0-38 26-64t64-26h6V26q0-11 7.5-18.5T154 0t18 7.5 7 18.5v38h154V26q0-11 7-18.5T358 0t18.5 7.5T384 26v38h6zm-268 51q-17 0-28 11t-11 28v51h346v-51q0-17-11-28t-28-11h-6v19q0 11-7.5 18.5T358 160t-18-7.5-7-18.5v-19H179v19q0 11-7 18.5t-18 7.5-18.5-7.5T128 134v-19h-6zm268 346q17 0 28-11t11-28V256H83v166q0 17 11 28t28 11h268zM160 320q14 0 23 9t9 23-9 23-23 9-23-9-9-23 9-23 23-9zm208 0q16 0 16 16 0 6-5 11l-12 13 12 13q5 5 5 11 0 16-16 16-6 0-11-5l-13-12-13 12q-5 5-11 5-16 0-16-16 0-6 5-11l12-13-12-13q-5-5-5-11 0-16 16-16 6 0 11 5l13 12 13-12q5-5 11-5zm-96 0q16 0 16 16 0 6-5 11l-12 13 12 13q5 5 5 11 0 16-16 16-6 0-11-5l-13-12-13 12q-5 5-11 5-16 0-16-16 0-6 5-11l12-13-12-13q-5-5-5-11 0-16 16-16 6 0 11 5l13 12 13-12q5-5 11-5z" + }, + "ai": { + "path": "M502.5 109q-31 11-47 27t-27 48q-3 9-13 9t-13-9q-11-32-26.5-48t-47.5-27q-9-3-9-12.5t9-12.5q32-11 47.5-27t26.5-48q3-9 13-9t13 9q11 32 27 48t47 27q10 3 10 12.5t-10 12.5zm-167 250q-28 10-49.5 21.5T248.5 408 221 445t-21.5 50q-2 8-8.5 12.5t-14.5 4.5q-7 0-13.5-4.5t-9.5-12.5q-19-57-49-87t-87-49q-8-3-12-9.5t-4-13.5 4-13.5 12-9.5q29-10 50-21.5t37-27.5 27.5-37.5 21.5-49.5q3-8 9.5-12.5t13.5-4.5q8 0 14.5 4.5t8.5 12.5q10 28 21.5 49.5t27.5 37.5 37.5 27.5 49.5 21.5q8 3 12.5 9.5t4.5 13.5-4.5 13.5-12.5 9.5z" + }, + "da-2": { + "path": "M507.01 151.704q9.98 14.97 0 28.943L277.458 500.023q-7.984 10.979-20.959 10.979t-20.959-10.979L5.988 180.647q-11.976-14.97 0-29.941L114.776 9.98Q122.76 0 134.736 0h255.502q14.97 0 20.959 10.979zm-130.745 34.931q7.985-2.994 7.985-10.978t-7.985-10.979q-25.95-7.984-39.423-21.957T314.386 102.8q-1.996-7.984-9.98-7.984t-10.98 7.984q-7.984 25.95-21.956 39.922t-39.922 21.957q-7.985 2.995-7.985 10.979t7.985 10.978q25.95 7.985 39.922 21.459t21.957 39.423q2.994 7.984 10.978 7.984t9.981-7.984q8.982-25.95 22.456-39.423t39.423-21.459z" + }, + "da": { + "path": "M256.499 511.002q-12.975 0-20.959-10.979L5.988 180.647q-11.976-14.97 0-29.941L114.776 9.98Q122.76 0 134.736 0h255.502q14.97 0 20.959 10.979l95.813 140.725q9.98 14.97 0 28.943L277.458 500.023q-7.984 10.979-20.959 10.979zM57.887 166.674l198.612 275.462 198.612-276.46-77.848-114.775H147.712zm318.378 19.961q-25.95 7.985-39.423 21.459t-22.456 39.423q-1.996 7.984-9.98 7.984t-10.98-7.984q-8.982-25.95-22.455-39.423t-39.423-21.459q-7.985-2.994-7.985-10.978t7.985-10.979q25.95-7.984 39.423-21.957t22.456-39.922q2.994-7.984 10.978-7.984t9.981 7.984q8.982 25.95 22.456 39.922t39.423 21.957q7.985 2.995 7.985 10.979t-7.985 10.978z" } } } \ No newline at end of file diff --git a/packages/main/test/pages/Icon_and_theming.html b/packages/main/test/pages/Icon_and_theming.html index bb26e43f486c..dfea3dc07d51 100644 --- a/packages/main/test/pages/Icon_and_theming.html +++ b/packages/main/test/pages/Icon_and_theming.html @@ -26,7 +26,7 @@
TNTIcons auto ("tnt/actor" and "SAP-icons-TNT/actor")
- +
TNTIcons V2 ("tnt-v2/actor")
@@ -36,13 +36,13 @@

BS Icons auto - single version ("business-suite/add-polygon")
- +
BS Icons auto - multiple different icon examples
- +
BS Icons - V1 ("business-suite-v1/add-polygon")
@@ -60,7 +60,14 @@ - + +
New icons since 5.06 and 4.18
+ + + +
New icons since 5.07 and 4.19
+ + - - 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 093/141] 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 094/141] 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 095/141] 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 096/141] 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 097/141] 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 099/141] 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 100/141] 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 101/141] 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 102/141] 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 103/141] 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 104/141] 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 105/141] 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 106/141] 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 107/141] 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 108/141] 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 109/141] 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 110/141] 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 111/141] 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 112/141] 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 113/141] 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 114/141] 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 115/141] 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 121/141] 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 122/141] 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 123/141] 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 124/141] 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 125/141] 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 126/141] 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 127/141] 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 128/141] 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 129/141] 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 130/141] 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 131/141] 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 132/141] 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 133/141] 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 134/141] 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 135/141] 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 136/141] 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 137/141] 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 138/141] 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 139/141] 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 140/141] 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 141/141] 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 @@ -
      +