@ui5/webcomponents-fiori 2.24.0 → 2.25.0-rc.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/CHANGELOG.md +45 -0
  2. package/dist/.tsbuildinfo +1 -1
  3. package/dist/MediaGalleryTemplate.js +1 -1
  4. package/dist/MediaGalleryTemplate.js.map +1 -1
  5. package/dist/ShellBar.js +7 -1
  6. package/dist/ShellBar.js.map +1 -1
  7. package/dist/ShellBarSearch.d.ts +1 -0
  8. package/dist/ShellBarSearch.js +6 -0
  9. package/dist/ShellBarSearch.js.map +1 -1
  10. package/dist/UserMenu.d.ts +1 -1
  11. package/dist/UserMenu.js +1 -1
  12. package/dist/UserMenu.js.map +1 -1
  13. package/dist/UserSettingsAccountView.js +2 -2
  14. package/dist/UserSettingsAccountView.js.map +1 -1
  15. package/dist/UserSettingsAppearanceViewItemTemplate.js +1 -1
  16. package/dist/UserSettingsAppearanceViewItemTemplate.js.map +1 -1
  17. package/dist/UserSettingsAppearanceViewTemplate.js +2 -2
  18. package/dist/UserSettingsAppearanceViewTemplate.js.map +1 -1
  19. package/dist/UserSettingsDialog.d.ts +18 -0
  20. package/dist/UserSettingsDialog.js +49 -3
  21. package/dist/UserSettingsDialog.js.map +1 -1
  22. package/dist/UserSettingsDialogTemplate.js +3 -3
  23. package/dist/UserSettingsDialogTemplate.js.map +1 -1
  24. package/dist/UserSettingsItemTemplate.js +1 -1
  25. package/dist/UserSettingsItemTemplate.js.map +1 -1
  26. package/dist/css/themes/UserSettingsAccountView.css +1 -1
  27. package/dist/css/themes/UserSettingsAppearanceViewItem.css +1 -1
  28. package/dist/css/themes/UserSettingsDialog.css +1 -1
  29. package/dist/css/themes/UserSettingsItem.css +1 -1
  30. package/dist/css/themes/UserSettingsView.css +1 -1
  31. package/dist/css/themes/sap_horizon/parameters-bundle.css +1 -1
  32. package/dist/css/themes/sap_horizon_auto/parameters-bundle.css +2 -2
  33. package/dist/css/themes/sap_horizon_exp/parameters-bundle.css +2 -2
  34. package/dist/custom-elements-internal.json +45 -4
  35. package/dist/custom-elements.json +36 -3
  36. package/dist/generated/assets/i18n/messagebundle_en.json +1 -1
  37. package/dist/generated/assets/themes/sap_horizon/parameters-bundle.css.json +1 -1
  38. package/dist/generated/assets/themes/sap_horizon_auto/parameters-bundle.css.json +1 -1
  39. package/dist/generated/assets/themes/sap_horizon_exp/parameters-bundle.css.json +1 -1
  40. package/dist/generated/i18n/i18n-defaults.d.ts +3 -1
  41. package/dist/generated/i18n/i18n-defaults.js +6 -4
  42. package/dist/generated/i18n/i18n-defaults.js.map +1 -1
  43. package/dist/generated/themes/UserSettingsAccountView.css.d.ts +1 -1
  44. package/dist/generated/themes/UserSettingsAccountView.css.js +1 -1
  45. package/dist/generated/themes/UserSettingsAccountView.css.js.map +1 -1
  46. package/dist/generated/themes/UserSettingsAppearanceViewItem.css.d.ts +1 -1
  47. package/dist/generated/themes/UserSettingsAppearanceViewItem.css.js +1 -1
  48. package/dist/generated/themes/UserSettingsAppearanceViewItem.css.js.map +1 -1
  49. package/dist/generated/themes/UserSettingsDialog.css.d.ts +1 -1
  50. package/dist/generated/themes/UserSettingsDialog.css.js +1 -1
  51. package/dist/generated/themes/UserSettingsDialog.css.js.map +1 -1
  52. package/dist/generated/themes/UserSettingsItem.css.d.ts +1 -1
  53. package/dist/generated/themes/UserSettingsItem.css.js +1 -1
  54. package/dist/generated/themes/UserSettingsItem.css.js.map +1 -1
  55. package/dist/generated/themes/UserSettingsView.css.d.ts +1 -1
  56. package/dist/generated/themes/UserSettingsView.css.js +1 -1
  57. package/dist/generated/themes/UserSettingsView.css.js.map +1 -1
  58. package/dist/generated/themes/sap_horizon/parameters-bundle.css.d.ts +1 -1
  59. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js +1 -1
  60. package/dist/generated/themes/sap_horizon/parameters-bundle.css.js.map +1 -1
  61. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.d.ts +1 -1
  62. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js +2 -2
  63. package/dist/generated/themes/sap_horizon_auto/parameters-bundle.css.js.map +1 -1
  64. package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.d.ts +1 -1
  65. package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js +2 -2
  66. package/dist/generated/themes/sap_horizon_exp/parameters-bundle.css.js.map +1 -1
  67. package/dist/shellbar/ShellBarSearch.d.ts +3 -1
  68. package/dist/shellbar/ShellBarSearch.js +3 -2
  69. package/dist/shellbar/ShellBarSearch.js.map +1 -1
  70. package/dist/vscode.html-custom-data.json +6 -1
  71. package/dist/web-types.json +34 -8
  72. package/package-scripts.cjs +1 -0
  73. package/package.json +10 -8
  74. package/src/MediaGalleryTemplate.tsx +6 -2
  75. package/src/UserSettingsAppearanceViewItemTemplate.tsx +1 -3
  76. package/src/UserSettingsAppearanceViewTemplate.tsx +2 -2
  77. package/src/UserSettingsDialogTemplate.tsx +9 -2
  78. package/src/UserSettingsItemTemplate.tsx +1 -1
  79. package/src/i18n/messagebundle.properties +9 -3
  80. package/src/i18n/messagebundle_en.properties +3 -3
  81. package/src/themes/UserSettingsAccountView.css +2 -0
  82. package/src/themes/UserSettingsAppearanceViewItem.css +3 -10
  83. package/src/themes/UserSettingsDialog.css +5 -0
  84. package/src/themes/UserSettingsItem.css +3 -2
  85. package/src/themes/UserSettingsView.css +4 -17
  86. package/src/themes/sap_horizon/HeroBanner-parameters.css +2 -2
@@ -8,6 +8,6 @@ export default function UserSettingsAppearanceViewItemTemplate() {
8
8
  });
9
9
  }
10
10
  function listItemContent() {
11
- return (_jsx("div", { class: "list-item", children: _jsxs("div", { class: "item-left", children: [_jsx(Avatar, { class: "avatar-cozy", shape: "Square", icon: this.icon, "color-scheme": this.colorScheme, size: AvatarSize.S }), _jsx(Avatar, { class: "avatar-compact", shape: "Square", icon: this.icon, "color-scheme": this.colorScheme, size: AvatarSize.XS }), _jsx("div", { class: "item-texts", children: _jsx("span", { class: "item-title", children: this.text }) })] }) }));
11
+ return (_jsx("div", { class: "list-item", children: _jsxs("div", { class: "item-left", children: [_jsx(Avatar, { shape: "Square", icon: this.icon, "color-scheme": this.colorScheme, size: AvatarSize.S }), _jsx("div", { class: "item-texts", children: _jsx("span", { class: "item-title", children: this.text }) })] }) }));
12
12
  }
13
13
  //# sourceMappingURL=UserSettingsAppearanceViewItemTemplate.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"UserSettingsAppearanceViewItemTemplate.js","sourceRoot":"","sources":["../src/UserSettingsAppearanceViewItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,sBAAsB,MAAM,mDAAmD,CAAC;AACvF,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,6CAA6C,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,sCAAsC;IAC7D,OAAO,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE;QACxC,eAAe,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;KAC3C,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,CACN,cAAK,KAAK,EAAC,WAAW,YACrB,eAAK,KAAK,EAAC,WAAW,aAErB,KAAC,MAAM,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,kBAAgB,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,GAAW,EACzH,KAAC,MAAM,IAAC,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,kBAAgB,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,UAAU,CAAC,EAAE,GAAW,EAC7H,cAAK,KAAK,EAAC,YAAY,YACtB,eAAM,KAAK,EAAC,YAAY,YAAE,IAAI,CAAC,IAAI,GAAQ,GACtC,IACD,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsAppearanceViewItem from \"./UserSettingsAppearanceViewItem.js\";\nimport ListItemCustomTemplate from \"@ui5/webcomponents/dist/ListItemCustomTemplate.js\";\nimport Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\nimport AvatarSize from \"@ui5/webcomponents/dist/types/AvatarSize.js\";\n\nexport default function UserSettingsAppearanceViewItemTemplate(this: UserSettingsAppearanceViewItem) {\n\treturn ListItemCustomTemplate.call(this, {\n\t\tlistItemContent: listItemContent.bind(this),\n\t});\n}\n\nfunction listItemContent(this: UserSettingsAppearanceViewItem) {\n\treturn (\n\t\t<div class=\"list-item\">\n\t\t\t<div class=\"item-left\">\n\t\t\t\t{/* Two avatars are rendered for different content density modes - CSS controls visibility */}\n\t\t\t\t<Avatar class=\"avatar-cozy\" shape=\"Square\" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.S}></Avatar>\n\t\t\t\t<Avatar class=\"avatar-compact\" shape=\"Square\" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.XS}></Avatar>\n\t\t\t\t<div class=\"item-texts\">\n\t\t\t\t\t<span class=\"item-title\">{this.text}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"file":"UserSettingsAppearanceViewItemTemplate.js","sourceRoot":"","sources":["../src/UserSettingsAppearanceViewItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,sBAAsB,MAAM,mDAAmD,CAAC;AACvF,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,UAAU,MAAM,6CAA6C,CAAC;AAErE,MAAM,CAAC,OAAO,UAAU,sCAAsC;IAC7D,OAAO,sBAAsB,CAAC,IAAI,CAAC,IAAI,EAAE;QACxC,eAAe,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;KAC3C,CAAC,CAAC;AACJ,CAAC;AAED,SAAS,eAAe;IACvB,OAAO,CACN,cAAK,KAAK,EAAC,WAAW,YACrB,eAAK,KAAK,EAAC,WAAW,aACrB,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,IAAI,CAAC,IAAI,kBAAgB,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC,GAAW,EACrG,cAAK,KAAK,EAAC,YAAY,YACtB,eAAM,KAAK,EAAC,YAAY,YAAE,IAAI,CAAC,IAAI,GAAQ,GACtC,IACD,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsAppearanceViewItem from \"./UserSettingsAppearanceViewItem.js\";\nimport ListItemCustomTemplate from \"@ui5/webcomponents/dist/ListItemCustomTemplate.js\";\nimport Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\nimport AvatarSize from \"@ui5/webcomponents/dist/types/AvatarSize.js\";\n\nexport default function UserSettingsAppearanceViewItemTemplate(this: UserSettingsAppearanceViewItem) {\n\treturn ListItemCustomTemplate.call(this, {\n\t\tlistItemContent: listItemContent.bind(this),\n\t});\n}\n\nfunction listItemContent(this: UserSettingsAppearanceViewItem) {\n\treturn (\n\t\t<div class=\"list-item\">\n\t\t\t<div class=\"item-left\">\n\t\t\t\t<Avatar shape=\"Square\" icon={this.icon} color-scheme={this.colorScheme} size={AvatarSize.S}></Avatar>\n\t\t\t\t<div class=\"item-texts\">\n\t\t\t\t\t<span class=\"item-title\">{this.text}</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
2
2
  import List from "@ui5/webcomponents/dist/List.js";
3
- import Title from "@ui5/webcomponents/dist/Title.js";
3
+ import ListItemGroupHeader from "@ui5/webcomponents/dist/ListItemGroupHeader.js";
4
4
  export default function UserSettingsAppearanceViewTemplate() {
5
- return (_jsx("div", { class: "ui5-user-settings-view-container", children: _jsxs("div", { class: "ui5-user-settings-view", children: [_jsx("slot", { name: "additionalContent" }), _jsxs(List, { class: "user-settings-appearance-view-list", onItemClick: this._handleItemClick, "data-sap-ui-fastnavgroup": "false", children: [this.text && _jsx(Title, { slot: "header", level: "H3", class: "user-settings-appearance-view-list-header", children: this.text }), _jsx("slot", {})] })] }) }));
5
+ return (_jsx("div", { class: "ui5-user-settings-view-container", children: _jsxs("div", { class: "ui5-user-settings-view", children: [_jsx("slot", { name: "additionalContent" }), _jsxs(List, { class: "user-settings-appearance-view-list", onItemClick: this._handleItemClick, "data-sap-ui-fastnavgroup": "false", children: [this.text && _jsx(ListItemGroupHeader, { class: "user-settings-appearance-view-top-header", children: this.text }), _jsx("slot", {})] })] }) }));
6
6
  }
7
7
  //# sourceMappingURL=UserSettingsAppearanceViewTemplate.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"UserSettingsAppearanceViewTemplate.js","sourceRoot":"","sources":["../src/UserSettingsAppearanceViewTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AAErD,MAAM,CAAC,OAAO,UAAU,kCAAkC;IACzD,OAAO,CACN,cAAK,KAAK,EAAC,kCAAkC,YAC5C,eAAK,KAAK,EAAC,wBAAwB,aAClC,eAAM,IAAI,EAAC,mBAAmB,GAAQ,EACtC,MAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,8BAA2B,OAAO,aACnH,IAAI,CAAC,IAAI,IAAI,KAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,IAAI,EAAC,KAAK,EAAC,2CAA2C,YAAE,IAAI,CAAC,IAAI,GAAS,EACnH,gBAAa,IACP,IACF,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsAppearanceView from \"./UserSettingsAppearanceView.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\n\nexport default function UserSettingsAppearanceViewTemplate(this: UserSettingsAppearanceView) {\n\treturn (\n\t\t<div class=\"ui5-user-settings-view-container\">\n\t\t\t<div class=\"ui5-user-settings-view\">\n\t\t\t\t<slot name=\"additionalContent\"></slot>\n\t\t\t\t<List class=\"user-settings-appearance-view-list\" onItemClick={this._handleItemClick} data-sap-ui-fastnavgroup=\"false\">\n\t\t\t\t\t{this.text && <Title slot=\"header\" level=\"H3\" class=\"user-settings-appearance-view-list-header\">{this.text}</Title>}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</List>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"file":"UserSettingsAppearanceViewTemplate.js","sourceRoot":"","sources":["../src/UserSettingsAppearanceViewTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,mBAAmB,MAAM,gDAAgD,CAAC;AAEjF,MAAM,CAAC,OAAO,UAAU,kCAAkC;IACzD,OAAO,CACN,cAAK,KAAK,EAAC,kCAAkC,YAC5C,eAAK,KAAK,EAAC,wBAAwB,aAClC,eAAM,IAAI,EAAC,mBAAmB,GAAQ,EACtC,MAAC,IAAI,IAAC,KAAK,EAAC,oCAAoC,EAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,8BAA2B,OAAO,aACnH,IAAI,CAAC,IAAI,IAAI,KAAC,mBAAmB,IAAC,KAAK,EAAC,0CAA0C,YAAE,IAAI,CAAC,IAAI,GAAuB,EACrH,gBAAa,IACP,IACF,GACD,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsAppearanceView from \"./UserSettingsAppearanceView.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListItemGroupHeader from \"@ui5/webcomponents/dist/ListItemGroupHeader.js\";\n\nexport default function UserSettingsAppearanceViewTemplate(this: UserSettingsAppearanceView) {\n\treturn (\n\t\t<div class=\"ui5-user-settings-view-container\">\n\t\t\t<div class=\"ui5-user-settings-view\">\n\t\t\t\t<slot name=\"additionalContent\"></slot>\n\t\t\t\t<List class=\"user-settings-appearance-view-list\" onItemClick={this._handleItemClick} data-sap-ui-fastnavgroup=\"false\">\n\t\t\t\t\t{this.text && <ListItemGroupHeader class=\"user-settings-appearance-view-top-header\">{this.text}</ListItemGroupHeader>}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</List>\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"]}
@@ -30,6 +30,8 @@ declare class UserSettingsDialog extends UI5Element {
30
30
  "open": void;
31
31
  "before-close": UserSettingsBeforeCloseEventDetail;
32
32
  "close": void;
33
+ "save": void;
34
+ "cancel": void;
33
35
  };
34
36
  /**
35
37
  * Defines, if the User Settings Dialog is opened.
@@ -53,6 +55,18 @@ declare class UserSettingsDialog extends UI5Element {
53
55
  * @public
54
56
  */
55
57
  showSearchField: boolean;
58
+ /**
59
+ * Defines whether the dialog offers Save and Cancel actions in its footer.
60
+ *
61
+ * When true, the footer renders a Save (Emphasized) and a Cancel button
62
+ * instead of the default Close button. Save and Cancel each fire a
63
+ * corresponding event; the application is responsible for closing the
64
+ * dialog (typically after persisting or discarding the changes).
65
+ *
66
+ * @default false
67
+ * @public
68
+ */
69
+ saveMode: boolean;
56
70
  /**
57
71
  * Defines the user settings items.
58
72
  *
@@ -105,10 +119,14 @@ declare class UserSettingsDialog extends UI5Element {
105
119
  get accessibleNameText(): string;
106
120
  get ariaRoleDescList(): string;
107
121
  get closeButtonText(): string;
122
+ get saveButtonText(): string;
123
+ get cancelButtonText(): string;
108
124
  get noSearchResultsText(): string;
109
125
  get _selectedItemSlotName(): string | undefined;
110
126
  get _showSettingWithNavigation(): boolean;
111
127
  _handleCloseButtonClick(): void;
128
+ _handleSaveButtonClick(): void;
129
+ _handleCancelButtonClick(): void;
112
130
  _handleCollapseClick(): void;
113
131
  _handleInput(e: CustomEvent<InputEventDetail>): void;
114
132
  captureRef(ref: HTMLElement & {
@@ -14,7 +14,7 @@ import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
14
14
  import UserSettingsDialogTemplate from "./UserSettingsDialogTemplate.js";
15
15
  import UserSettingsDialogCss from "./generated/themes/UserSettingsDialog.css.js";
16
16
  // Texts
17
- import { USER_SETTINGS_DIALOG_ACCESSIBLE_NAME, USER_SETTINGS_LIST_ARIA_ROLE_DESC, USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT, USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT, } from "./generated/i18n/i18n-defaults.js";
17
+ import { USER_SETTINGS_DIALOG_ACCESSIBLE_NAME, USER_SETTINGS_LIST_ARIA_ROLE_DESC, USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT, USER_SETTINGS_DIALOG_SAVE_BUTTON_TEXT, USER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT, USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT, } from "./generated/i18n/i18n-defaults.js";
18
18
  /**
19
19
  * @class
20
20
  * ### Overview
@@ -48,6 +48,18 @@ let UserSettingsDialog = UserSettingsDialog_1 = class UserSettingsDialog extends
48
48
  * @public
49
49
  */
50
50
  this.showSearchField = false;
51
+ /**
52
+ * Defines whether the dialog offers Save and Cancel actions in its footer.
53
+ *
54
+ * When true, the footer renders a Save (Emphasized) and a Cancel button
55
+ * instead of the default Close button. Save and Cancel each fire a
56
+ * corresponding event; the application is responsible for closing the
57
+ * dialog (typically after persisting or discarding the changes).
58
+ *
59
+ * @default false
60
+ * @public
61
+ */
62
+ this.saveMode = false;
51
63
  /**
52
64
  * @private
53
65
  */
@@ -156,6 +168,12 @@ let UserSettingsDialog = UserSettingsDialog_1 = class UserSettingsDialog extends
156
168
  get closeButtonText() {
157
169
  return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT);
158
170
  }
171
+ get saveButtonText() {
172
+ return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_DIALOG_SAVE_BUTTON_TEXT);
173
+ }
174
+ get cancelButtonText() {
175
+ return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT);
176
+ }
159
177
  get noSearchResultsText() {
160
178
  return UserSettingsDialog_1.i18nBundle.getText(USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT);
161
179
  }
@@ -171,6 +189,12 @@ let UserSettingsDialog = UserSettingsDialog_1 = class UserSettingsDialog extends
171
189
  this.open = false;
172
190
  }
173
191
  }
192
+ _handleSaveButtonClick() {
193
+ this.fireDecoratorEvent("save");
194
+ }
195
+ _handleCancelButtonClick() {
196
+ this.fireDecoratorEvent("cancel");
197
+ }
174
198
  _handleCollapseClick() {
175
199
  this._collapsed = false;
176
200
  }
@@ -192,6 +216,9 @@ __decorate([
192
216
  __decorate([
193
217
  property({ type: Boolean })
194
218
  ], UserSettingsDialog.prototype, "showSearchField", void 0);
219
+ __decorate([
220
+ property({ type: Boolean })
221
+ ], UserSettingsDialog.prototype, "saveMode", void 0);
195
222
  __decorate([
196
223
  slot({
197
224
  "default": true,
@@ -248,13 +275,16 @@ UserSettingsDialog = UserSettingsDialog_1 = __decorate([
248
275
  cancelable: true,
249
276
  })
250
277
  /**
251
- * Fired when a settings dialog is open.
278
+ * Fired when the settings dialog is opened.
252
279
  * @public
253
280
  */
254
281
  ,
255
282
  event("open")
256
283
  /**
257
284
  * Fired before the settings dialog is closed.
285
+ *
286
+ * **Note:** This event is cancelable via `preventDefault()`, allowing the application to keep the
287
+ * dialog open — for example, to prompt the user about unsaved changes before dismissal.
258
288
  * @public
259
289
  */
260
290
  ,
@@ -262,11 +292,27 @@ UserSettingsDialog = UserSettingsDialog_1 = __decorate([
262
292
  cancelable: true,
263
293
  })
264
294
  /**
265
- * Fired when a settings dialog is closed.
295
+ * Fired when the settings dialog is closed.
266
296
  * @public
267
297
  */
268
298
  ,
269
299
  event("close")
300
+ /**
301
+ * Fired when the Save button in the footer is clicked.
302
+ * The dialog does not close automatically — the application is responsible
303
+ * for closing it after persisting the changes.
304
+ * @public
305
+ */
306
+ ,
307
+ event("save")
308
+ /**
309
+ * Fired when the Cancel button in the footer is clicked.
310
+ * The dialog does not close automatically — the application is responsible
311
+ * for closing it after discarding the changes.
312
+ * @public
313
+ */
314
+ ,
315
+ event("cancel")
270
316
  ], UserSettingsDialog);
271
317
  UserSettingsDialog.define();
272
318
  export default UserSettingsDialog;
@@ -1 +1 @@
1
- {"version":3,"file":"UserSettingsDialog.js","sourceRoot":"","sources":["../src/UserSettingsDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n\tcustomElement, property, slotStrict as slot, eventStrict as event,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Input from \"@ui5/webcomponents/dist/Input.js\";\nimport type { InputEventDetail } from \"@ui5/webcomponents/dist/Input.js\";\nimport type { ListItemClickEventDetail } from \"@ui5/webcomponents/dist/List.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport type { PopupBeforeCloseEventDetail } from \"@ui5/webcomponents/dist/Popup.js\";\nimport { isPhone, isTablet, isCombi } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport UserSettingsDialogTemplate from \"./UserSettingsDialogTemplate.js\";\nimport type UserSettingsItem from \"./UserSettingsItem.js\";\nimport UserSettingsDialogCss from \"./generated/themes/UserSettingsDialog.css.js\";\n\n// Texts\nimport {\n\tUSER_SETTINGS_DIALOG_ACCESSIBLE_NAME,\n\tUSER_SETTINGS_LIST_ARIA_ROLE_DESC,\n\tUSER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT,\n\tUSER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype UserSettingsItemSelectEventDetail = {\n\titem: UserSettingsItem;\n}\n\ntype UserSettingsBeforeCloseEventDetail = PopupBeforeCloseEventDetail;\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\n * It allows the user to easily view information and settings for an account.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.8.0\n */\n@customElement({\n\ttag: \"ui5-user-settings-dialog\",\n\trenderer: jsxRenderer,\n\ttemplate: UserSettingsDialogTemplate,\n\tstyles: [UserSettingsDialogCss],\n})\n\n/**\n * Fired when an item is selected.\n * @param {UserSettingsItem} item The selected `user settings item`.\n * @public\n */\n@event(\"selection-change\", {\n\tcancelable: true,\n})\n\n/**\n * Fired when a settings dialog is open.\n * @public\n */\n@event(\"open\")\n\n/**\n * Fired before the settings dialog is closed.\n * @public\n */\n@event(\"before-close\", {\n\tcancelable: true,\n})\n\n/**\n * Fired when a settings dialog is closed.\n * @public\n */\n@event(\"close\")\n\nclass UserSettingsDialog extends UI5Element {\n\teventDetails!: {\n\t\t\"selection-change\": UserSettingsItemSelectEventDetail,\n\t\t\"open\": void,\n\t\t\"before-close\": UserSettingsBeforeCloseEventDetail,\n\t\t\"close\": void,\n\t};\n\t/**\n\t * Defines, if the User Settings Dialog is opened.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Defines the headerText of the item.\n\t *\n\t * @public\n\t * @default undefined\n\t */\n\t@property({ type: String })\n\theaderText?: string;\n\n\t/**\n\t * Defines if the Search Field would be displayed.\n\t *\n\t * **Note:** By default the Search Field is not displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowSearchField = false;\n\n\t/**\n\t * Defines the user settings items.\n\t *\n\t * **Note:** If no setting item is set as `selected`, the first one will be selected.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: true,\n\t\t\tslots: true,\n\t\t},\n\t})\n\titems!: DefaultSlot<UserSettingsItem>;\n\n\t/**\n\t * Defines the fixed user settings items.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: true,\n\t\t\tslots: true,\n\t\t},\n\t})\n\tfixedItems!: Slot<UserSettingsItem>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: String })\n\t_searchValue = \"\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_collapsed = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_selectedSetting?: UserSettingsItem;\n\n\t/**\n\t * @private\n\t */\n\t_filteredItems: Array<UserSettingsItem> = [];\n\n\t/**\n\t * @private\n\t */\n\t_filteredFixedItems: Array<UserSettingsItem> = [];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_showNoSearchResult = false;\n\n\t/**\n\t * Defines the current media query size.\n\t * @private\n\t */\n\t@property({ type: String })\n\t_mediaRange?: any;\n\n\tonEnterDOM() {\n\t\tthis.setAttribute(\"data-sap-ui-fastnavgroup-container\", \"true\");\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS);\n\t\tconst searchValue = this._searchValue.toLowerCase();\n\t\tthis._filteredItems = [];\n\t\tthis._filteredFixedItems = [];\n\t\tconst siblingsWithIcon = this.items.some(item => !!item.icon);\n\t\tthis.items.forEach(item => {\n\t\t\tif (item.text.toLowerCase().includes(searchValue)) {\n\t\t\t\tthis._filteredItems.push(item);\n\t\t\t}\n\n\t\t\tif (item.selected) {\n\t\t\t\tthis._selectedSetting = item;\n\t\t\t}\n\t\t\titem._siblingsWithIcon = siblingsWithIcon;\n\t\t});\n\n\t\tthis.fixedItems.forEach(item => {\n\t\t\tif (item.text.toLowerCase().includes(searchValue)) {\n\t\t\t\tthis._filteredFixedItems.push(item);\n\t\t\t}\n\n\t\t\tif (item.selected) {\n\t\t\t\tthis._selectedSetting = item;\n\t\t\t}\n\t\t});\n\n\t\tif (this._filteredItems.length === 0 && this._filteredFixedItems.length === 0) {\n\t\t\tthis._showNoSearchResult = true;\n\t\t} else {\n\t\t\tthis._showNoSearchResult = false;\n\t\t}\n\n\t\tif (!this._selectedSetting) {\n\t\t\tthis._selectedSetting = this.items[0] || this.fixedItems[0];\n\t\t}\n\n\t\tconst allItems = [...this.items, ...this.fixedItems];\n\t\tallItems.forEach(item => {\n\t\t\tif (item === this._selectedSetting) {\n\t\t\t\titem.setAttribute(\"data-sap-ui-fastnavgroup\", \"true\");\n\t\t\t} else {\n\t\t\t\titem.removeAttribute(\"data-sap-ui-fastnavgroup\");\n\t\t\t}\n\t\t});\n\t}\n\n\t_handleItemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst setting = e.detail.item as ListItemBase & { associatedSettingItem: UserSettingsItem };\n\t\tconst settingItem = setting.associatedSettingItem;\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"selection-change\", {\n\t\t\titem: settingItem,\n\t\t});\n\t\tthis._collapsed = true;\n\n\t\tif (!eventPrevented) {\n\t\t\tthis.items.forEach(item => {\n\t\t\t\titem.selected = false;\n\t\t\t});\n\t\t\tthis.fixedItems.forEach(item => {\n\t\t\t\titem.selected = false;\n\t\t\t});\n\t\t\tsettingItem.selected = true;\n\t\t}\n\t}\n\n\t_handleDialogAfterOpen() {\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_handleDialogBeforeClose(e: CustomEvent<PopupBeforeCloseEventDetail>) {\n\t\tif (!e.detail.escPressed) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"before-close\", e.detail);\n\n\t\tif (eventPrevented) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_handleDialogAfterClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\tget accessibleNameText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_ACCESSIBLE_NAME);\n\t}\n\n\tget ariaRoleDescList() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_LIST_ARIA_ROLE_DESC);\n\t}\n\n\tget closeButtonText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT);\n\t}\n\tget noSearchResultsText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT);\n\t}\n\n\tget _selectedItemSlotName() {\n\t\treturn this._selectedSetting ? this._selectedSetting._individualSlot : \"\";\n\t}\n\n\tget _showSettingWithNavigation() {\n\t\treturn (isPhone() || (isTablet() && !isCombi())) || (this._mediaRange === \"S\" || this._mediaRange === \"M\");\n\t}\n\n\t_handleCloseButtonClick() {\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"before-close\", { escPressed: false });\n\n\t\tif (!eventPrevented) {\n\t\t\tthis.open = false;\n\t\t}\n\t}\n\n\t_handleCollapseClick() {\n\t\tthis._collapsed = false;\n\t}\n\n\t_handleInput(e: CustomEvent<InputEventDetail>) {\n\t\tthis._searchValue = (e.target as Input).value;\n\t}\n\n\tcaptureRef(ref: HTMLElement & { associatedSettingItem?: UI5Element} | null) {\n\t\tif (ref) {\n\t\t\tref.associatedSettingItem = this;\n\t\t}\n\t}\n}\n\nUserSettingsDialog.define();\n\nexport default UserSettingsDialog;\nexport type {\n\tUserSettingsItemSelectEventDetail,\n\tUserSettingsBeforeCloseEventDetail,\n};\n"]}
1
+ {"version":3,"file":"UserSettingsDialog.js","sourceRoot":"","sources":["../src/UserSettingsDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { Slot, DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport {\n\tcustomElement, property, slotStrict as slot, eventStrict as event,\n} from \"@ui5/webcomponents-base/dist/decorators.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type Input from \"@ui5/webcomponents/dist/Input.js\";\nimport type { InputEventDetail } from \"@ui5/webcomponents/dist/Input.js\";\nimport type { ListItemClickEventDetail } from \"@ui5/webcomponents/dist/List.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type ListItemBase from \"@ui5/webcomponents/dist/ListItemBase.js\";\nimport type { PopupBeforeCloseEventDetail } from \"@ui5/webcomponents/dist/Popup.js\";\nimport { isPhone, isTablet, isCombi } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport MediaRange from \"@ui5/webcomponents-base/dist/MediaRange.js\";\nimport UserSettingsDialogTemplate from \"./UserSettingsDialogTemplate.js\";\nimport type UserSettingsItem from \"./UserSettingsItem.js\";\nimport UserSettingsDialogCss from \"./generated/themes/UserSettingsDialog.css.js\";\n\n// Texts\nimport {\n\tUSER_SETTINGS_DIALOG_ACCESSIBLE_NAME,\n\tUSER_SETTINGS_LIST_ARIA_ROLE_DESC,\n\tUSER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT,\n\tUSER_SETTINGS_DIALOG_SAVE_BUTTON_TEXT,\n\tUSER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT,\n\tUSER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT,\n} from \"./generated/i18n/i18n-defaults.js\";\n\ntype UserSettingsItemSelectEventDetail = {\n\titem: UserSettingsItem;\n}\n\ntype UserSettingsBeforeCloseEventDetail = PopupBeforeCloseEventDetail;\n\n/**\n * @class\n * ### Overview\n *\n * The `ui5-user-settings-dialog` is an SAP Fiori-specific web component used in the `ui5-user-menu`.\n * It allows the user to easily view information and settings for an account.\n *\n * ### ES6 Module Import\n * `import \"@ui5/webcomponents-fiori/dist/UserSettingsDialog.js\";`\n *\n * @constructor\n * @extends UI5Element\n * @public\n * @since 2.8.0\n */\n@customElement({\n\ttag: \"ui5-user-settings-dialog\",\n\trenderer: jsxRenderer,\n\ttemplate: UserSettingsDialogTemplate,\n\tstyles: [UserSettingsDialogCss],\n})\n\n/**\n * Fired when an item is selected.\n * @param {UserSettingsItem} item The selected `user settings item`.\n * @public\n */\n@event(\"selection-change\", {\n\tcancelable: true,\n})\n\n/**\n * Fired when the settings dialog is opened.\n * @public\n */\n@event(\"open\")\n\n/**\n * Fired before the settings dialog is closed.\n *\n * **Note:** This event is cancelable via `preventDefault()`, allowing the application to keep the\n * dialog open — for example, to prompt the user about unsaved changes before dismissal.\n * @public\n */\n@event(\"before-close\", {\n\tcancelable: true,\n})\n\n/**\n * Fired when the settings dialog is closed.\n * @public\n */\n@event(\"close\")\n\n/**\n * Fired when the Save button in the footer is clicked.\n * The dialog does not close automatically — the application is responsible\n * for closing it after persisting the changes.\n * @public\n */\n@event(\"save\")\n\n/**\n * Fired when the Cancel button in the footer is clicked.\n * The dialog does not close automatically — the application is responsible\n * for closing it after discarding the changes.\n * @public\n */\n@event(\"cancel\")\n\nclass UserSettingsDialog extends UI5Element {\n\teventDetails!: {\n\t\t\"selection-change\": UserSettingsItemSelectEventDetail,\n\t\t\"open\": void,\n\t\t\"before-close\": UserSettingsBeforeCloseEventDetail,\n\t\t\"close\": void,\n\t\t\"save\": void,\n\t\t\"cancel\": void,\n\t};\n\t/**\n\t * Defines, if the User Settings Dialog is opened.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\topen = false;\n\n\t/**\n\t * Defines the headerText of the item.\n\t *\n\t * @public\n\t * @default undefined\n\t */\n\t@property({ type: String })\n\theaderText?: string;\n\n\t/**\n\t * Defines if the Search Field would be displayed.\n\t *\n\t * **Note:** By default the Search Field is not displayed.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tshowSearchField = false;\n\n\t/**\n\t * Defines whether the dialog offers Save and Cancel actions in its footer.\n\t *\n\t * When true, the footer renders a Save (Emphasized) and a Cancel button\n\t * instead of the default Close button. Save and Cancel each fire a\n\t * corresponding event; the application is responsible for closing the\n\t * dialog (typically after persisting or discarding the changes).\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tsaveMode = false;\n\n\t/**\n\t * Defines the user settings items.\n\t *\n\t * **Note:** If no setting item is set as `selected`, the first one will be selected.\n\t * @public\n\t */\n\t@slot({\n\t\t\"default\": true,\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: true,\n\t\t\tslots: true,\n\t\t},\n\t})\n\titems!: DefaultSlot<UserSettingsItem>;\n\n\t/**\n\t * Defines the fixed user settings items.\n\t *\n\t * @public\n\t */\n\t@slot({\n\t\ttype: HTMLElement,\n\t\tindividualSlots: true,\n\t\tinvalidateOnChildChange: {\n\t\t\tproperties: true,\n\t\t\tslots: true,\n\t\t},\n\t})\n\tfixedItems!: Slot<UserSettingsItem>;\n\n\t@i18n(\"@ui5/webcomponents-fiori\")\n\tstatic i18nBundle: I18nBundle;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: String })\n\t_searchValue = \"\";\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_collapsed = false;\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Object })\n\t_selectedSetting?: UserSettingsItem;\n\n\t/**\n\t * @private\n\t */\n\t_filteredItems: Array<UserSettingsItem> = [];\n\n\t/**\n\t * @private\n\t */\n\t_filteredFixedItems: Array<UserSettingsItem> = [];\n\n\t/**\n\t * @private\n\t */\n\t@property({ type: Boolean })\n\t_showNoSearchResult = false;\n\n\t/**\n\t * Defines the current media query size.\n\t * @private\n\t */\n\t@property({ type: String })\n\t_mediaRange?: any;\n\n\tonEnterDOM() {\n\t\tthis.setAttribute(\"data-sap-ui-fastnavgroup-container\", \"true\");\n\t}\n\n\tonBeforeRendering() {\n\t\tthis._mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS);\n\t\tconst searchValue = this._searchValue.toLowerCase();\n\t\tthis._filteredItems = [];\n\t\tthis._filteredFixedItems = [];\n\t\tconst siblingsWithIcon = this.items.some(item => !!item.icon);\n\t\tthis.items.forEach(item => {\n\t\t\tif (item.text.toLowerCase().includes(searchValue)) {\n\t\t\t\tthis._filteredItems.push(item);\n\t\t\t}\n\n\t\t\tif (item.selected) {\n\t\t\t\tthis._selectedSetting = item;\n\t\t\t}\n\t\t\titem._siblingsWithIcon = siblingsWithIcon;\n\t\t});\n\n\t\tthis.fixedItems.forEach(item => {\n\t\t\tif (item.text.toLowerCase().includes(searchValue)) {\n\t\t\t\tthis._filteredFixedItems.push(item);\n\t\t\t}\n\n\t\t\tif (item.selected) {\n\t\t\t\tthis._selectedSetting = item;\n\t\t\t}\n\t\t});\n\n\t\tif (this._filteredItems.length === 0 && this._filteredFixedItems.length === 0) {\n\t\t\tthis._showNoSearchResult = true;\n\t\t} else {\n\t\t\tthis._showNoSearchResult = false;\n\t\t}\n\n\t\tif (!this._selectedSetting) {\n\t\t\tthis._selectedSetting = this.items[0] || this.fixedItems[0];\n\t\t}\n\n\t\tconst allItems = [...this.items, ...this.fixedItems];\n\t\tallItems.forEach(item => {\n\t\t\tif (item === this._selectedSetting) {\n\t\t\t\titem.setAttribute(\"data-sap-ui-fastnavgroup\", \"true\");\n\t\t\t} else {\n\t\t\t\titem.removeAttribute(\"data-sap-ui-fastnavgroup\");\n\t\t\t}\n\t\t});\n\t}\n\n\t_handleItemClick(e: CustomEvent<ListItemClickEventDetail>) {\n\t\tconst setting = e.detail.item as ListItemBase & { associatedSettingItem: UserSettingsItem };\n\t\tconst settingItem = setting.associatedSettingItem;\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"selection-change\", {\n\t\t\titem: settingItem,\n\t\t});\n\t\tthis._collapsed = true;\n\n\t\tif (!eventPrevented) {\n\t\t\tthis.items.forEach(item => {\n\t\t\t\titem.selected = false;\n\t\t\t});\n\t\t\tthis.fixedItems.forEach(item => {\n\t\t\t\titem.selected = false;\n\t\t\t});\n\t\t\tsettingItem.selected = true;\n\t\t}\n\t}\n\n\t_handleDialogAfterOpen() {\n\t\tthis.fireDecoratorEvent(\"open\");\n\t}\n\n\t_handleDialogBeforeClose(e: CustomEvent<PopupBeforeCloseEventDetail>) {\n\t\tif (!e.detail.escPressed) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"before-close\", e.detail);\n\n\t\tif (eventPrevented) {\n\t\t\te.preventDefault();\n\t\t}\n\t}\n\n\t_handleDialogAfterClose() {\n\t\tthis.open = false;\n\t\tthis.fireDecoratorEvent(\"close\");\n\t}\n\n\tget accessibleNameText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_ACCESSIBLE_NAME);\n\t}\n\n\tget ariaRoleDescList() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_LIST_ARIA_ROLE_DESC);\n\t}\n\n\tget closeButtonText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_CLOSE_BUTTON_TEXT);\n\t}\n\tget saveButtonText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_SAVE_BUTTON_TEXT);\n\t}\n\tget cancelButtonText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_CANCEL_BUTTON_TEXT);\n\t}\n\tget noSearchResultsText() {\n\t\treturn UserSettingsDialog.i18nBundle.getText(USER_SETTINGS_DIALOG_NO_SEARCH_RESULTS_TEXT);\n\t}\n\n\tget _selectedItemSlotName() {\n\t\treturn this._selectedSetting ? this._selectedSetting._individualSlot : \"\";\n\t}\n\n\tget _showSettingWithNavigation() {\n\t\treturn (isPhone() || (isTablet() && !isCombi())) || (this._mediaRange === \"S\" || this._mediaRange === \"M\");\n\t}\n\n\t_handleCloseButtonClick() {\n\t\tconst eventPrevented = !this.fireDecoratorEvent(\"before-close\", { escPressed: false });\n\n\t\tif (!eventPrevented) {\n\t\t\tthis.open = false;\n\t\t}\n\t}\n\n\t_handleSaveButtonClick() {\n\t\tthis.fireDecoratorEvent(\"save\");\n\t}\n\n\t_handleCancelButtonClick() {\n\t\tthis.fireDecoratorEvent(\"cancel\");\n\t}\n\n\t_handleCollapseClick() {\n\t\tthis._collapsed = false;\n\t}\n\n\t_handleInput(e: CustomEvent<InputEventDetail>) {\n\t\tthis._searchValue = (e.target as Input).value;\n\t}\n\n\tcaptureRef(ref: HTMLElement & { associatedSettingItem?: UI5Element} | null) {\n\t\tif (ref) {\n\t\t\tref.associatedSettingItem = this;\n\t\t}\n\t}\n}\n\nUserSettingsDialog.define();\n\nexport default UserSettingsDialog;\nexport type {\n\tUserSettingsItemSelectEventDetail,\n\tUserSettingsBeforeCloseEventDetail,\n};\n"]}
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@ui5/webcomponents-base/jsx-runtime";
2
2
  import Dialog from "@ui5/webcomponents/dist/Dialog.js";
3
3
  import Title from "@ui5/webcomponents/dist/Title.js";
4
4
  import Input from "@ui5/webcomponents/dist/Input.js";
@@ -11,11 +11,11 @@ import Toolbar from "@ui5/webcomponents/dist/Toolbar.js";
11
11
  import search from "@ui5/webcomponents-icons/dist/search.js";
12
12
  export default function UserSettingsDialogTemplate() {
13
13
  return (_jsxs(Dialog, { class: "ui5-user-settings-dialog", open: this.open, stretch: true, accessibleName: this.accessibleNameText, "onui5-_collapse": this._handleCollapseClick, onOpen: this._handleDialogAfterOpen, onBeforeClose: this._handleDialogBeforeClose, onClose: this._handleDialogAfterClose, initialFocus: `setting-${this._selectedSetting?._id}`, children: [_jsxs("div", { class: "ui5-user-settings-root", children: [_jsxs("div", { class: "ui5-user-settings-side", "data-sap-ui-fastnavgroup": "true", "aria-orientation": "vertical", "aria-roledescription": this.ariaRoleDescList, children: [_jsxs("div", { class: "ui5-user-settings-side-header", children: [this.headerText &&
14
- _jsx(Title, { level: "H1", size: "H4", children: this.headerText }), this.showSearchField &&
14
+ _jsx(Title, { level: "H1", size: "H5", children: this.headerText }), this.showSearchField &&
15
15
  _jsx(Input, { placeholder: "Search", type: "Search", class: "ui5-user-settings-side-search", onInput: this._handleInput, children: _jsx(Icon, { id: "searchFieldIcon", slot: "icon", name: search, showTooltip: true }) })] }), this._showNoSearchResult ?
16
16
  _jsx("div", { class: "ui5-user-settings-side-search", children: _jsx(Text, { children: this.noSearchResultsText }) })
17
17
  :
18
- renderList.call(this, this._filteredItems, "ui5-user-settings-side-items"), this._filteredFixedItems.length > 0 && renderList.call(this, this._filteredFixedItems, "ui5-user-settings-side-fixedItems")] }), _jsx("div", { class: "ui5-user-settings-content", children: _jsx("slot", { name: this._selectedItemSlotName }) })] }), _jsx(Toolbar, { slot: "footer", design: "Transparent", "data-sap-ui-fastnavgroup": "true", children: _jsx(ToolbarButton, { design: "Transparent", text: this.closeButtonText, tooltip: this.closeButtonText, onClick: this._handleCloseButtonClick }) })] }));
18
+ renderList.call(this, this._filteredItems, "ui5-user-settings-side-items"), this._filteredFixedItems.length > 0 && renderList.call(this, this._filteredFixedItems, "ui5-user-settings-side-fixedItems")] }), _jsx("div", { class: "ui5-user-settings-content", children: _jsx("slot", { name: this._selectedItemSlotName }) })] }), _jsx(Toolbar, { slot: "footer", design: "Transparent", "data-sap-ui-fastnavgroup": "true", children: this.saveMode ? (_jsxs(_Fragment, { children: [_jsx(ToolbarButton, { design: "Emphasized", text: this.saveButtonText, onClick: this._handleSaveButtonClick }), _jsx(ToolbarButton, { design: "Transparent", text: this.cancelButtonText, onClick: this._handleCancelButtonClick })] })) : (_jsx(ToolbarButton, { design: "Transparent", text: this.closeButtonText, onClick: this._handleCloseButtonClick })) })] }));
19
19
  }
20
20
  function renderList(items = [], classes) {
21
21
  return _jsx(List, { accessibleRole: "Menu", onItemClick: this._handleItemClick, class: classes, separators: "None", "data-sap-ui-fastnavgroup": "false", children: items.map(item => (_jsx(ListItemStandard, { class: !item._icon && item._siblingsWithIcon ? "ui5-user-settings-item-no-icon" : "", id: `setting-${item._id}`, icon: !item._icon && item._siblingsWithIcon ? undefined : item._icon, tooltip: item._tooltip, ref: this.captureRef.bind(item), selected: item.selected, disabled: item.disabled, accessibleName: item.ariaLabelledByText, type: this._showSettingWithNavigation ? "Navigation" : "Active", children: item.text }))) });
@@ -1 +1 @@
1
- {"version":3,"file":"UserSettingsDialogTemplate.js","sourceRoot":"","sources":["../src/UserSettingsDialogTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UserSettingsDialog from \"./UserSettingsDialog.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Text from \"@ui5/webcomponents/dist/Text.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport ToolbarButton from \"@ui5/webcomponents/dist/ToolbarButton.js\";\nimport Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport search from \"@ui5/webcomponents-icons/dist/search.js\";\nimport type UserSettingsItem from \"./UserSettingsItem.js\";\n\nexport default function UserSettingsDialogTemplate(this: UserSettingsDialog) {\n\treturn (\n\n\t\t<Dialog class=\"ui5-user-settings-dialog\"\n\t\t\topen={this.open}\n\t\t\tstretch\n\t\t\taccessibleName={this.accessibleNameText}\n\t\t\tonui5-_collapse={this._handleCollapseClick}\n\t\t\tonOpen={this._handleDialogAfterOpen}\n\t\t\tonBeforeClose={this._handleDialogBeforeClose}\n\t\t\tonClose={this._handleDialogAfterClose}\n\t\t\tinitialFocus={`setting-${this._selectedSetting?._id}`}\n\t\t>\n\t\t\t<div class=\"ui5-user-settings-root\">\n\t\t\t\t<div class=\"ui5-user-settings-side\" data-sap-ui-fastnavgroup=\"true\" aria-orientation=\"vertical\" aria-roledescription={this.ariaRoleDescList}>\n\t\t\t\t\t<div class=\"ui5-user-settings-side-header\">\n\t\t\t\t\t\t{this.headerText &&\n\t\t\t\t\t\t\t<Title level=\"H1\" size=\"H4\">{this.headerText}</Title>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{this.showSearchField &&\n\t\t\t\t\t\t\t<Input placeholder=\"Search\" type=\"Search\" class=\"ui5-user-settings-side-search\"\n\t\t\t\t\t\t\t\t onInput={this._handleInput}>\n\t\t\t\t\t\t\t\t<Icon id=\"searchFieldIcon\" slot=\"icon\" name={search} showTooltip></Icon>\n\t\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._showNoSearchResult ?\n\t\t\t\t\t\t<div class=\"ui5-user-settings-side-search\">\n\t\t\t\t\t\t\t<Text>{this.noSearchResultsText}</Text>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t:\n\t\t\t\t\t\trenderList.call(this, this._filteredItems, \"ui5-user-settings-side-items\")}\n\n\t\t\t\t\t{this._filteredFixedItems.length > 0 && renderList.call(this, this._filteredFixedItems, \"ui5-user-settings-side-fixedItems\")}\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"ui5-user-settings-content\">\n\t\t\t\t\t<slot name={this._selectedItemSlotName}></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Toolbar slot=\"footer\" design=\"Transparent\" data-sap-ui-fastnavgroup=\"true\">\n\t\t\t\t<ToolbarButton design=\"Transparent\" text={this.closeButtonText} tooltip={this.closeButtonText} onClick={this._handleCloseButtonClick} />\n\t\t\t</Toolbar>\n\t\t</Dialog>\n\t);\n}\n\nfunction renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {\n\treturn <List accessibleRole=\"Menu\" onItemClick={this._handleItemClick} class={classes} separators=\"None\" data-sap-ui-fastnavgroup=\"false\">\n\t\t{items.map(item => (\n\t\t\t<ListItemStandard\n\t\t\t\tclass={!item._icon && item._siblingsWithIcon ? \"ui5-user-settings-item-no-icon\" : \"\"}\n\t\t\t\tid={`setting-${item._id}`}\n\t\t\t\ticon={!item._icon && item._siblingsWithIcon ? undefined : item._icon}\n\t\t\t\ttooltip={item._tooltip}\n\t\t\t\tref={this.captureRef.bind(item)}\n\t\t\t\tselected={item.selected}\n\t\t\t\tdisabled={item.disabled}\n\t\t\t\taccessibleName={item.ariaLabelledByText}\n\t\t\t\ttype={this._showSettingWithNavigation ? \"Navigation\" : \"Active\"}\n\t\t\t>\n\t\t\t\t{item.text}\n\t\t\t</ListItemStandard>\n\t\t))}\n\t</List>;\n}\n"]}
1
+ {"version":3,"file":"UserSettingsDialogTemplate.js","sourceRoot":"","sources":["../src/UserSettingsDialogTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UserSettingsDialog from \"./UserSettingsDialog.js\";\nimport Dialog from \"@ui5/webcomponents/dist/Dialog.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport Input from \"@ui5/webcomponents/dist/Input.js\";\nimport Text from \"@ui5/webcomponents/dist/Text.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport List from \"@ui5/webcomponents/dist/List.js\";\nimport ListItemStandard from \"@ui5/webcomponents/dist/ListItemStandard.js\";\nimport ToolbarButton from \"@ui5/webcomponents/dist/ToolbarButton.js\";\nimport Toolbar from \"@ui5/webcomponents/dist/Toolbar.js\";\nimport search from \"@ui5/webcomponents-icons/dist/search.js\";\nimport type UserSettingsItem from \"./UserSettingsItem.js\";\n\nexport default function UserSettingsDialogTemplate(this: UserSettingsDialog) {\n\treturn (\n\n\t\t<Dialog class=\"ui5-user-settings-dialog\"\n\t\t\topen={this.open}\n\t\t\tstretch\n\t\t\taccessibleName={this.accessibleNameText}\n\t\t\tonui5-_collapse={this._handleCollapseClick}\n\t\t\tonOpen={this._handleDialogAfterOpen}\n\t\t\tonBeforeClose={this._handleDialogBeforeClose}\n\t\t\tonClose={this._handleDialogAfterClose}\n\t\t\tinitialFocus={`setting-${this._selectedSetting?._id}`}\n\t\t>\n\t\t\t<div class=\"ui5-user-settings-root\">\n\t\t\t\t<div class=\"ui5-user-settings-side\" data-sap-ui-fastnavgroup=\"true\" aria-orientation=\"vertical\" aria-roledescription={this.ariaRoleDescList}>\n\t\t\t\t\t<div class=\"ui5-user-settings-side-header\">\n\t\t\t\t\t\t{this.headerText &&\n\t\t\t\t\t\t\t<Title level=\"H1\" size=\"H5\">{this.headerText}</Title>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{this.showSearchField &&\n\t\t\t\t\t\t\t<Input placeholder=\"Search\" type=\"Search\" class=\"ui5-user-settings-side-search\"\n\t\t\t\t\t\t\t\t onInput={this._handleInput}>\n\t\t\t\t\t\t\t\t<Icon id=\"searchFieldIcon\" slot=\"icon\" name={search} showTooltip></Icon>\n\t\t\t\t\t\t\t</Input>\n\t\t\t\t\t\t}\n\t\t\t\t\t</div>\n\t\t\t\t\t{this._showNoSearchResult ?\n\t\t\t\t\t\t<div class=\"ui5-user-settings-side-search\">\n\t\t\t\t\t\t\t<Text>{this.noSearchResultsText}</Text>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t:\n\t\t\t\t\t\trenderList.call(this, this._filteredItems, \"ui5-user-settings-side-items\")}\n\n\t\t\t\t\t{this._filteredFixedItems.length > 0 && renderList.call(this, this._filteredFixedItems, \"ui5-user-settings-side-fixedItems\")}\n\t\t\t\t</div>\n\n\t\t\t\t<div class=\"ui5-user-settings-content\">\n\t\t\t\t\t<slot name={this._selectedItemSlotName}></slot>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<Toolbar slot=\"footer\" design=\"Transparent\" data-sap-ui-fastnavgroup=\"true\">\n\t\t\t\t{this.saveMode ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ToolbarButton design=\"Emphasized\" text={this.saveButtonText} onClick={this._handleSaveButtonClick} />\n\t\t\t\t\t\t<ToolbarButton design=\"Transparent\" text={this.cancelButtonText} onClick={this._handleCancelButtonClick} />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<ToolbarButton design=\"Transparent\" text={this.closeButtonText} onClick={this._handleCloseButtonClick} />\n\t\t\t\t)}\n\t\t\t</Toolbar>\n\t\t</Dialog>\n\t);\n}\n\nfunction renderList(this: UserSettingsDialog, items: Array<UserSettingsItem> = [], classes: string) {\n\treturn <List accessibleRole=\"Menu\" onItemClick={this._handleItemClick} class={classes} separators=\"None\" data-sap-ui-fastnavgroup=\"false\">\n\t\t{items.map(item => (\n\t\t\t<ListItemStandard\n\t\t\t\tclass={!item._icon && item._siblingsWithIcon ? \"ui5-user-settings-item-no-icon\" : \"\"}\n\t\t\t\tid={`setting-${item._id}`}\n\t\t\t\ticon={!item._icon && item._siblingsWithIcon ? undefined : item._icon}\n\t\t\t\ttooltip={item._tooltip}\n\t\t\t\tref={this.captureRef.bind(item)}\n\t\t\t\tselected={item.selected}\n\t\t\t\tdisabled={item.disabled}\n\t\t\t\taccessibleName={item.ariaLabelledByText}\n\t\t\t\ttype={this._showSettingWithNavigation ? \"Navigation\" : \"Active\"}\n\t\t\t>\n\t\t\t\t{item.text}\n\t\t\t</ListItemStandard>\n\t\t))}\n\t</List>;\n}\n"]}
@@ -15,6 +15,6 @@ export default function UserSettingsItemTemplate() {
15
15
  :
16
16
  null });
17
17
  const loadingState = _jsx("div", { class: "ui5-user-settings-item-loading-container", children: _jsx(BusyIndicator, { active: this.loading, class: "ui5-user-settings-item-busy", delay: 0, "aria-description": this.loadingReason }) });
18
- return (_jsxs("div", { class: "ui5-user-settings-item", children: [_jsx("header", { class: "ui5-user-settings-item-header-container", children: _jsxs("div", { class: "ui5-user-settings-item-header", children: [_jsx(Button, { icon: "nav-back", design: "Transparent", onClick: this._handleBackButtonClick, class: "ui5-user-settings-item-collapse-btn", style: { display: this._shouldShowBackButton ? "block" : "" } }), _jsx(Title, { level: "H2", size: "H4", children: this._hasSelectedPageView ? this._selectedPageView.text : this.headerText })] }) }), this.loading ? loadingState : content] }));
18
+ return (_jsxs("div", { class: "ui5-user-settings-item", children: [_jsx("header", { class: "ui5-user-settings-item-header-container", children: _jsxs("div", { class: "ui5-user-settings-item-header", children: [_jsx(Button, { icon: "nav-back", design: "Transparent", onClick: this._handleBackButtonClick, class: "ui5-user-settings-item-collapse-btn", style: { display: this._shouldShowBackButton ? "block" : "" } }), _jsx(Title, { level: "H2", size: "H5", children: this._hasSelectedPageView ? this._selectedPageView.text : this.headerText })] }) }), this.loading ? loadingState : content] }));
19
19
  }
20
20
  //# sourceMappingURL=UserSettingsItemTemplate.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"UserSettingsItemTemplate.js","sourceRoot":"","sources":["../src/UserSettingsItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,wCAAwC,CAAC;AAChD,OAAO,2CAA2C,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACnE,KAAC,YAAY,IAAC,uBAAuB,EAAC,aAAa,EAAC,KAAK,EAAC,6BAA6B,EAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,YACxH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,KAAC,GAAG,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAC7E,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAI,GAC/B,CACN,GACa;QACf,CAAC;YACD,4BACE,IAAI,CAAC,iBAAiB,CAAC,CAAC;oBACxB,cAAK,KAAK,EAAC,uCAAuC,YACjD,eAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,eAAe,GAAI,GACjD;oBACN,CAAC;wBACD,IAAI,GAEH,CAAC;IAEL,MAAM,YAAY,GAAG,cAAK,KAAK,EAAC,0CAA0C,YACzE,KAAC,aAAa,IACb,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,KAAK,EAAC,6BAA6B,EACnC,KAAK,EAAE,CAAC,sBACU,IAAI,CAAC,aAAa,GACrB,GACX,CAAC;IAEP,OAAO,CACN,eAAK,KAAK,EAAC,wBAAwB,aAClC,iBAAQ,KAAK,EAAC,yCAAyC,YACtD,eAAK,KAAK,EAAC,+BAA+B,aACzC,KAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAC,qCAAqC,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,GAAW,EAEvM,KAAC,KAAK,IAAC,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,YAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAS,IAC1G,GACE,EAER,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,IACjC,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsItem from \"./UserSettingsItem.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport TabContainer from \"@ui5/webcomponents/dist/TabContainer.js\";\nimport Tab from \"@ui5/webcomponents/dist/Tab.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport \"@ui5/webcomponents-icons/dist/globe.js\";\nimport \"@ui5/webcomponents-icons/dist/nav-back.js\";\n\nexport default function UserSettingsItemTemplate(this: UserSettingsItem) {\n\tconst content = this.tabs.length > 0 && !this._hasSelectedPageView ?\n\t\t<TabContainer contentBackgroundDesign=\"Transparent\" class=\"ui5-user-settings-item-tabs\" onTabSelect={this._handleTabSelect}>\n\t\t\t{this.tabs.map(view =>\n\t\t\t\t<Tab text={view.text} selected={view.selected} ref={this.captureRef.bind(view)}>\n\t\t\t\t\t<slot name={view._individualSlot} />\n\t\t\t\t</Tab>\n\t\t\t)}\n\t\t</TabContainer>\n\t\t:\n\t\t<>\n\t\t\t{this._selectedPageView ?\n\t\t\t\t<div class=\"ui5-user-settings-item-view-container\">\n\t\t\t\t\t<slot name={this._selectedPageView._individualSlot} />\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\tnull\n\t\t\t}\n\t\t</>;\n\n\tconst loadingState = <div class=\"ui5-user-settings-item-loading-container\">\n\t\t<BusyIndicator\n\t\t\tactive={this.loading}\n\t\t\tclass=\"ui5-user-settings-item-busy\"\n\t\t\tdelay={0}\n\t\t\taria-description={this.loadingReason}>\n\t\t</BusyIndicator>\n\t</div>;\n\n\treturn (\n\t\t<div class=\"ui5-user-settings-item\">\n\t\t\t<header class=\"ui5-user-settings-item-header-container\">\n\t\t\t\t<div class=\"ui5-user-settings-item-header\">\n\t\t\t\t\t<Button icon=\"nav-back\" design=\"Transparent\" onClick={this._handleBackButtonClick} class=\"ui5-user-settings-item-collapse-btn\" style={{ display: this._shouldShowBackButton ? \"block\" : \"\" }}></Button>\n\n\t\t\t\t\t<Title level=\"H2\" size=\"H4\">{this._hasSelectedPageView ? this._selectedPageView.text : this.headerText}</Title>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t{this.loading ? loadingState : content}\n\t\t</div>\n\t);\n}\n"]}
1
+ {"version":3,"file":"UserSettingsItemTemplate.js","sourceRoot":"","sources":["../src/UserSettingsItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,MAAM,0CAA0C,CAAC;AACrE,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,GAAG,MAAM,gCAAgC,CAAC;AACjD,OAAO,KAAK,MAAM,kCAAkC,CAAC;AACrD,OAAO,wCAAwC,CAAC;AAChD,OAAO,2CAA2C,CAAC;AAEnD,MAAM,CAAC,OAAO,UAAU,wBAAwB;IAC/C,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QACnE,KAAC,YAAY,IAAC,uBAAuB,EAAC,aAAa,EAAC,KAAK,EAAC,6BAA6B,EAAC,WAAW,EAAE,IAAI,CAAC,gBAAgB,YACxH,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,KAAC,GAAG,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAC7E,eAAM,IAAI,EAAE,IAAI,CAAC,eAAe,GAAI,GAC/B,CACN,GACa;QACf,CAAC;YACD,4BACE,IAAI,CAAC,iBAAiB,CAAC,CAAC;oBACxB,cAAK,KAAK,EAAC,uCAAuC,YACjD,eAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,eAAe,GAAI,GACjD;oBACN,CAAC;wBACD,IAAI,GAEH,CAAC;IAEL,MAAM,YAAY,GAAG,cAAK,KAAK,EAAC,0CAA0C,YACzE,KAAC,aAAa,IACb,MAAM,EAAE,IAAI,CAAC,OAAO,EACpB,KAAK,EAAC,6BAA6B,EACnC,KAAK,EAAE,CAAC,sBACU,IAAI,CAAC,aAAa,GACrB,GACX,CAAC;IAEP,OAAO,CACN,eAAK,KAAK,EAAC,wBAAwB,aAClC,iBAAQ,KAAK,EAAC,yCAAyC,YACtD,eAAK,KAAK,EAAC,+BAA+B,aACzC,KAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,MAAM,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EAAE,KAAK,EAAC,qCAAqC,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,GAAW,EAEvM,KAAC,KAAK,IAAC,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,IAAI,YAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,GAAS,IAC1G,GACE,EAER,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,IACjC,CACN,CAAC;AACH,CAAC","sourcesContent":["import type UserSettingsItem from \"./UserSettingsItem.js\";\nimport BusyIndicator from \"@ui5/webcomponents/dist/BusyIndicator.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport TabContainer from \"@ui5/webcomponents/dist/TabContainer.js\";\nimport Tab from \"@ui5/webcomponents/dist/Tab.js\";\nimport Title from \"@ui5/webcomponents/dist/Title.js\";\nimport \"@ui5/webcomponents-icons/dist/globe.js\";\nimport \"@ui5/webcomponents-icons/dist/nav-back.js\";\n\nexport default function UserSettingsItemTemplate(this: UserSettingsItem) {\n\tconst content = this.tabs.length > 0 && !this._hasSelectedPageView ?\n\t\t<TabContainer contentBackgroundDesign=\"Transparent\" class=\"ui5-user-settings-item-tabs\" onTabSelect={this._handleTabSelect}>\n\t\t\t{this.tabs.map(view =>\n\t\t\t\t<Tab text={view.text} selected={view.selected} ref={this.captureRef.bind(view)}>\n\t\t\t\t\t<slot name={view._individualSlot} />\n\t\t\t\t</Tab>\n\t\t\t)}\n\t\t</TabContainer>\n\t\t:\n\t\t<>\n\t\t\t{this._selectedPageView ?\n\t\t\t\t<div class=\"ui5-user-settings-item-view-container\">\n\t\t\t\t\t<slot name={this._selectedPageView._individualSlot} />\n\t\t\t\t</div>\n\t\t\t\t:\n\t\t\t\tnull\n\t\t\t}\n\t\t</>;\n\n\tconst loadingState = <div class=\"ui5-user-settings-item-loading-container\">\n\t\t<BusyIndicator\n\t\t\tactive={this.loading}\n\t\t\tclass=\"ui5-user-settings-item-busy\"\n\t\t\tdelay={0}\n\t\t\taria-description={this.loadingReason}>\n\t\t</BusyIndicator>\n\t</div>;\n\n\treturn (\n\t\t<div class=\"ui5-user-settings-item\">\n\t\t\t<header class=\"ui5-user-settings-item-header-container\">\n\t\t\t\t<div class=\"ui5-user-settings-item-header\">\n\t\t\t\t\t<Button icon=\"nav-back\" design=\"Transparent\" onClick={this._handleBackButtonClick} class=\"ui5-user-settings-item-collapse-btn\" style={{ display: this._shouldShowBackButton ? \"block\" : \"\" }}></Button>\n\n\t\t\t\t\t<Title level=\"H2\" size=\"H5\">{this._hasSelectedPageView ? this._selectedPageView.text : this.headerText}</Title>\n\t\t\t\t</div>\n\t\t\t</header>\n\n\t\t\t{this.loading ? loadingState : content}\n\t\t</div>\n\t);\n}\n"]}
@@ -1 +1 @@
1
- .ui5-user-settings-account{display:flex;align-items:center;flex-direction:column}.ui5-user-settings-account-avatar{display:flex;max-width:7rem;max-height:7rem;justify-content:center;align-items:center;gap:.625rem}.ui5-user-settings-account-title{text-align:center;margin-top:.25rem;font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);color:var(--sapTextColor)}.ui5-user-settings-account-subtitleText,.ui5-user-settings-account-description{text-align:center;margin-bottom:.25rem;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapContent_LabelColor);overflow:hidden;text-overflow:ellipsis}.ui5-user-settings-account-btn{display:flex;justify-content:center;align-items:center;gap:.625rem;border-radius:var(--sapButton_BorderCornerRadius);border:var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);background:var(--sapButton_Background)}.ui5-user-settings-account-btn::part(button){padding:.375rem}
1
+ .ui5-user-settings-account{display:flex;align-items:center;flex-direction:column;margin-top:2.5rem}.ui5-user-settings-account-avatar{display:flex;max-width:7rem;max-height:7rem;justify-content:center;align-items:center;gap:.625rem}.ui5-user-settings-account-title{text-align:center;margin-top:.25rem;margin-bottom:.25rem;font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);color:var(--sapTextColor)}.ui5-user-settings-account-subtitleText,.ui5-user-settings-account-description{text-align:center;margin-bottom:.25rem;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);color:var(--sapContent_LabelColor);overflow:hidden;text-overflow:ellipsis}.ui5-user-settings-account-btn{display:flex;justify-content:center;align-items:center;gap:.625rem;border-radius:var(--sapButton_BorderCornerRadius);border:var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);background:var(--sapButton_Background)}.ui5-user-settings-account-btn::part(button){padding:.375rem}
@@ -1 +1 @@
1
- .list-item{display:flex;align-items:center;justify-content:space-between;padding:.625rem 0;width:100%}.item-left{display:flex;align-items:center;gap:.75rem;flex:1}.avatar-cozy{display:var(--_ui5_user_settings_avatar_cozy_display)}.avatar-compact{display:var(--_ui5_user_settings_avatar_compact_display)}.item-texts{display:flex;flex-direction:column}.item-title{font-weight:600;font-size:var(--_ui5_list_item_title_size);color:var(--sapList_TextColor);margin:.5rem}.item-subtitle{color:var(--sapContent_LabelColor);font-size:var(--sapFontSize);margin:.5rem}.item-right{display:flex;align-items:center;gap:.5rem}
1
+ .list-item{display:flex;align-items:center;justify-content:space-between;padding:.625rem 0;width:100%}.item-left{display:flex;align-items:center;gap:.75rem;flex:1}.item-texts{display:flex;flex-direction:column}.item-title{font-family:var(--sapFontFamily);font-size:var(--sapFontLargeSize);font-weight:400;color:var(--sapList_TextColor);margin:.5rem}.item-subtitle{color:var(--sapContent_LabelColor);font-size:var(--sapFontSize);margin:.5rem}.item-right{display:flex;align-items:center;gap:.5rem}
@@ -1 +1 @@
1
- .ui5-user-settings-dialog{max-width:calc(100% - 2px);max-height:calc(100% - 2px);width:100%;height:100%}.ui5-user-settings-dialog::part(content){padding:0}.ui5-user-settings-dialog::part(footer){padding:0}.ui5-user-settings-root{display:flex;height:100%}.ui5-user-settings-side{flex:1;box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;overflow:hidden}.ui5-user-settings-side-header{display:flex;flex-direction:column;gap:.5rem;padding:1rem}.ui5-user-settings-side-search{width:100%}.ui5-user-settings-side-items,.ui5-user-settings-side-fixedItems{border-top:.0625rem solid var(--sapList_BorderColor)}.ui5-user-settings-side-items{flex:1;min-height:0}.ui5-user-settings-side-text{align-self:center}.ui5-user-settings-side-fixedItems :last-child{border-bottom:none}.ui5-user-settings-content{display:none;flex:1;background-color:var(--sapGroup_ContentBackground);height:100%;overflow:hidden}.ui5-user-settings-dialog[on-phone]{border-radius:0}.ui5-user-settings-item-no-icon::part(title){padding-left:1.875rem}@media screen and (width >= 37.5rem) and (width < 64rem){.ui5-user-settings-dialog:not([on-phone]){max-width:min(40rem,80%);max-height:min(42.5rem,88%)}}@media screen and (width < 64rem){:host([_collapsed]) .ui5-user-settings-content{display:block}:host([_collapsed]) .ui5-user-settings-side{display:none}}@media screen and (width >= 64rem){.ui5-user-settings-dialog{width:60rem;max-height:min(42.5rem,88%)}.ui5-user-settings-side{max-width:20rem}:dir(ltr) .ui5-user-settings-side{border-right:.0625rem solid var(--sapList_BorderColor)}:dir(rtl) .ui5-user-settings-side{border-left:.0625rem solid var(--sapList_BorderColor)}.ui5-user-settings-content{display:block}}
1
+ .ui5-user-settings-dialog{max-width:calc(100% - 2px);max-height:calc(100% - 2px);width:100%;height:100%}.ui5-user-settings-dialog::part(content){padding:0}.ui5-user-settings-dialog::part(footer){padding:0}.ui5-user-settings-root{display:flex;height:100%}.ui5-user-settings-side{flex:1;box-sizing:border-box;display:flex;flex-direction:column;max-width:100%;overflow:hidden}.ui5-user-settings-side-header{display:flex;flex-direction:column;gap:.5rem;padding:1rem;border-bottom:.0625rem solid var(--sapList_BorderColor)}.ui5-user-settings-side-search{width:100%}.ui5-user-settings-side-items,.ui5-user-settings-side-fixedItems{border-top:0}.ui5-user-settings-side-fixedItems{border-top:.0625rem solid var(--sapList_BorderColor)}.ui5-user-settings-side-items{flex:1;min-height:0}.ui5-user-settings-side-text{align-self:center}.ui5-user-settings-side-fixedItems :last-child{border-bottom:none}.ui5-user-settings-content{display:none;flex:1;background-color:var(--sapGroup_ContentBackground);height:100%;overflow:hidden}.ui5-user-settings-dialog[on-phone]{border-radius:0}.ui5-user-settings-item-no-icon::part(title){padding-left:1.875rem}@media screen and (width >= 37.5rem) and (width < 64rem){.ui5-user-settings-dialog:not([on-phone]){max-width:min(40rem,80%);max-height:min(42.5rem,88%)}}@media screen and (width < 64rem){:host([_collapsed]) .ui5-user-settings-content{display:block}:host([_collapsed]) .ui5-user-settings-side{display:none}}@media screen and (width >= 64rem){.ui5-user-settings-dialog{width:60rem;max-height:min(42.5rem,88%)}.ui5-user-settings-side{max-width:20rem}:dir(ltr) .ui5-user-settings-side{border-right:.0625rem solid var(--sapList_BorderColor)}:dir(rtl) .ui5-user-settings-side{border-left:.0625rem solid var(--sapList_BorderColor)}.ui5-user-settings-content{display:block}}
@@ -1 +1 @@
1
- .ui5-user-settings-item{height:100%;display:flex;flex-direction:column}.ui5-user-settings-item-header-container{container-type:inline-size}.ui5-user-settings-item-header{display:flex;gap:.5rem;align-items:center;padding:1rem 1rem .5rem;font-size:var(--sapFontHeader5Size);font-family:var(--sapFontBoldFamily)}.ui5-user-settings-item-loading-container{position:relative}.ui5-user-settings-item-view-container,.ui5-user-settings-item-loading-container,.ui5-user-settings-item-tabs{flex:1;min-height:0}.ui5-user-settings-item-tabs::part(content){padding:0;border-bottom:0}.ui5-user-settings-item-view-container{overflow:auto}:host([disabled]){pointer-events:initial;opacity:initial}:host([disabled])::part(content){opacity:var(--_ui5-listitembase_disabled_opacity)}.ui5-user-settings-item-busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:42;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:all}.ui5-user-settings-item-busy:not([active]){display:none}@media screen and (width >= 64rem){.ui5-user-settings-item-collapse-btn{display:none}}@container (width > 37.5rem){.ui5-user-settings-item-header{padding-inline:2rem}}
1
+ .ui5-user-settings-item{height:100%;display:flex;flex-direction:column}.ui5-user-settings-item-header-container{container-type:inline-size}.ui5-user-settings-item-header{display:flex;gap:.5rem;align-items:center;padding:1rem;font-size:var(--sapFontHeader5Size);font-family:var(--sapFontBoldFamily);border-bottom:.0625rem solid var(--sapList_BorderColor)}.ui5-user-settings-item-loading-container{position:relative}.ui5-user-settings-item-view-container,.ui5-user-settings-item-loading-container,.ui5-user-settings-item-tabs{flex:1;min-height:0}.ui5-user-settings-item-tabs::part(content){padding:0;border-bottom:0}.ui5-user-settings-item-view-container{overflow:auto}:host([disabled]){pointer-events:initial;opacity:initial}:host([disabled])::part(content){opacity:var(--_ui5-listitembase_disabled_opacity)}.ui5-user-settings-item-busy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:42;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:all}.ui5-user-settings-item-busy:not([active]){display:none}@media screen and (width >= 64rem){.ui5-user-settings-item-collapse-btn{display:none}}@container (width > 37.5rem){.ui5-user-settings-item-header{padding-inline:1rem}}
@@ -1 +1 @@
1
- .ui5-user-settings-view-container{container-type:inline-size}.ui5-user-settings-view{padding:1rem}@container (width > 37.5rem){.ui5-user-settings-view{padding-inline:2rem}}.user-settings-appearance-view-list-header{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box;font-size:var(--sapFontHeader4Size);font-family:var(--sapFontFamily);color:var(--sapGroup_TitleTextColor);height:3rem;line-height:3rem;padding:0 1rem;background-color:var(--sapGroup_TitleBackground);border-bottom:1px solid var(--sapGroup_TitleBorderColor)}
1
+ .ui5-user-settings-view-container{container-type:inline-size}.ui5-user-settings-view{padding:1rem}.user-settings-appearance-view-top-header{margin-top:.5rem}.user-settings-appearance-view-top-header::part(title){font-size:var(--sapFontHeader5Size)}
@@ -1,2 +1,2 @@
1
- :host{--_ui5_banner_background: var(--sapShell_Banner_Background, var(--sapHighlightColor));--_ui5_banner_text_color: var(--sapShell_Banner_TextColor, var(--sapContent_ContrastTextColor));--_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);--_ui5_banner_box_shadow: var(--sapContent_Shadow0);--_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);--_ui5_timeline_scroll_container_offset: .5rem;--_ui5_shellbar_notification_btn_count_offset: .125rem;--_ui5_side_navigation_item_expand_icon_hover_left: auto;--_ui5_side_navigation_item_expand_icon_hover_right: 0;--_ui5_fcl_solid_bg: var(--sapShell_Background);--_ui5_fcl_column_border: solid .0625rem var(--sapGroup_ContentBorderColor);--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), transparent);--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapHighlightColor), transparent);--_ui5_media_gallery_overflow_btn_background: var(--sapButton_Background);--_ui5_media_gallery_overflow_btn_color: var(--sapButton_TextColor);--_ui5_media_gallery_overflow_btn_border: 1px solid var(--sapButton_BorderColor);--_ui5_media_gallery_thumbnail_border: 1px solid var(--sapContent_ForegroundColor);--_ui5_media_gallery_thumbnail_selected_border: 2px solid var(--sapSelectedColor);--_ui5_media_gallery_thumbnail_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);--_ui5_media_gallery_item_overlay_box_shadow: inset 0px 0px 80px rgba(0, 0, 0, .2);--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);--_ui5-notification_group_header-border-bottom-width: 0;--_ui5-notification_group_header-margin: 0px;--_ui5-notification_group_header-margin-expanded: .5rem;--_ui5-notification_group_header-padding: .5rem;--_ui5-notification_item-state-icon-padding: .25rem;--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);--_ui5-notification_item-border-top-left-right: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);--_ui5-notification_item-margin: 0 .5rem .5rem .5rem;--_ui5-notification_item-background-color-hover: var(--sapList_Hover_Background);--_ui5-notification_item-background-color-active: var(--sapList_SelectionBackgroundColor);--_ui5-notification_item-border-active: 1px solid var(--sapList_SelectionBorderColor);--_ui5-notification_item-root-padding-inline: 1rem;--_ui5-notification_item-content-padding: .75rem 0;--_ui5-notification_item-title-margin-bottom: 0;--_ui5-notification_item-title-padding-end-two-buttons: var(--_ui5-compact-size, 3.875rem) var(--_ui5-cozy-size, 4.375rem);--_ui5-notification_item-title-padding-end-one-button: var(--_ui5-compact-size, 1.875rem) var(--_ui5-cozy-size, 2.125rem);--_ui5-notification_item-description-margin-top: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, .75rem);--_ui5-notification_item-footer-margin-top: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, .75rem);--_ui5-notification_item-focus-offset: .1875rem;--_ui5-notification_item-outline-offset: -.375rem;--_ui5-notification_item-growing-btn-background-color-active: var(--_ui5-notification_item-background-color-active);--_ui5_page_list_bg: var(--sapGroup_ContentBackground);--_ui5_page_transparent_bg: transparent;--_ui5_vsd_header_container: var(--_ui5-compact-size, 2.5rem) var(--_ui5-cozy-size, 2.75rem);--_ui5_vsd_sub_header_container_height: var(--_ui5-compact-size, 2rem) var(--_ui5-cozy-size, 2.75rem);--_ui5_vsd_content_li_padding: .375rem;--_ui5_vsd_content_height: 23.4375rem;--_ui5_vsd_expand_content_height: var(--_ui5-compact-size, 25.4375rem) var(--_ui5-cozy-size, 26.1875rem);--_ui5_product_switch_item_width: 11.25rem;--_ui5_product_switch_item_height: 7rem;--_ui5_product_switch_item_active_outline_color: var(--sapContent_FocusColor);--_ui5_product_switch_item_outline_offset: -.1875rem;--_ui5_shellbar_root_height: 3.25rem;--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);--_ui5_shellbar_outline_offset: -.25rem;--_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow);--_ui5_shellbar_button_box_shadow_active: inset 0 0 0 .0625rem var(--sapButton_Lite_Active_BorderColor);--_ui5_shellbar_button_border: none;--_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius);--_ui5_shellbar_button_focused_border: .125rem solid var(--sapContent_FocusColor);--_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);--_ui5_shellbar_search_field_background: var(--sapShell_InteractiveBackground);--_ui5_shellbar_search_field_border: none;--_ui5_shellbar_search_field_box_shadow: var(--sapField_Shadow), inset 0 -.0625rem var(--sapField_BorderColor);--_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor);--_ui5_shellbar_search_field_outline_focused: .0625rem dotted var(--sapContent_ContrastFocusColor);--_ui5_shellbar_search_field_width: 25rem;--_ui5_shellbar_input_focus_outline_color: var(--sapField_Active_BorderColor);--_ui5_shellbar_overflow_container_middle_height: 3rem;--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);--_ui5_shellbar_image_button_border_radius: 50%;--_ui5-shellbar-content-margin-start: .5rem;--_ui5-shellbar-overflow-button-margin: .5rem;--_ui5-shellbar_separator-color: var(--sapToolbar_SeparatorColor);--_ui5-shellbar_cancel-button-color: var(--sapButton_Lite_TextColor);--_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground);--_ui5_shellbar_logo_border_radius: .5rem;--_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background);--_ui5_shellbar_search_field_box_shadow_hover: var(--sapField_Hover_Shadow), inset 0 -.0625rem var(--sapField_Hover_BorderColor);--_ui5_shellbar_input_border_radius: 1.125rem;--_ui5_shellbar_input_focus_border_radius: 1.125rem;--_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground);--_ui5_TimelineItem_arrow_size: 1.625rem;--_ui5_TimelineItem_bubble_border_width: .125rem;--_ui5_TimelineItem_bubble_border_style: solid;--_ui5_TimelineItem_bubble_border_radius: var(--sapElement_BorderCornerRadius);--_ui5_TimelineItem_bubble_border_color: var(--sapGroup_ContentBorderColor);--_ui5_TimelineItem_bubble_border_top: -.25rem;--_ui5_TimelineItem_bubble_border_right: -.25rem;--_ui5_TimelineItem_bubble_border_bottom: -.25rem;--_ui5_TimelineItem_bubble_border_left: -.75rem;--_ui5_TimelineItem_bubble_rtl_left_offset: -.25rem;--_ui5_TimelineItem_bubble_rtl_right_offset: -.75rem;--_ui5_TimelineItem_bubble_focus_border_radius: .875rem;--_ui5_TimelineItem_horizontal_bubble_focus_top_offset: -.75rem;--_ui5_TimelineItem_horizontal_bubble_focus_left_offset: -.25rem;--_ui5_TimelineItem_bubble_content_padding: .5rem;--_ui5_TimelineItem_bubble_content_subtitle_padding_top: .125rem;--_ui5_TimelineItem_bubble_content_description_padding_top: .5rem;--_ui5_tl_bubble_padding: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1rem);--_ui5_tl_padding: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1rem 1rem 1rem .5rem);--_ui5_tl_li_margin_bottom: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1.625rem);--_ui5_timeline_tli_indicator_before_bottom: var(--_ui5-compact-size, -.75rem) var(--_ui5-cozy-size, -1.5rem);--_ui5_timeline_tli_indicator_before_right: var(--_ui5-compact-size, -.5rem) var(--_ui5-cozy-size, -1.625rem);--_ui5_timeline_tli_indicator_before_without_icon_bottom: var(--_ui5-compact-size, -1rem) var(--_ui5-cozy-size, -1.875rem);--_ui5_timeline_tli_indicator_before_without_icon_right: var(--_ui5-compact-size, -.8125rem) var(--_ui5-cozy-size, -1.9375rem);--_ui5_timeline_tli_indicator_after_top: var(--_ui5-compact-size, calc(-100% + .9375rem) ) var(--_ui5-cozy-size, calc(-100% - 1rem) );--_ui5_timeline_tli_indicator_after_height: var(--_ui5-compact-size, calc(100% - .75rem) ) var(--_ui5-cozy-size, calc(100% + 1rem) );--_ui5_timeline_tli_indicator_before_height: var(--_ui5-compact-size, calc(100% - 1.25rem) ) var(--_ui5-cozy-size, 100%);--_ui5_timeline_tli_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .25rem) );--_ui5_timeline_tli_horizontal_indicator_after_left: var(--_ui5-compact-size, 1.8625rem) var(--_ui5-cozy-size, 1.9375rem);--_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .5rem) );--_ui5_timeline_tli_horizontal_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .5rem) );--_ui5_timeline_tli_icon_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .25rem) );--_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: var(--_ui5-compact-size, calc(100% - .625rem) ) var(--_ui5-cozy-size, calc(100% + .375rem) );--_ui5_timeline_tli_horizontal_indicator_short_after_width: var(--_ui5-compact-size, calc(100% - 1rem) ) var(--_ui5-cozy-size, 100%);--_ui5_side_navigation_width: 16rem;--_ui5_side_navigation_collapsed_width: 4rem;--_ui5_side_navigation_navigation_separator_margin: .25rem .5rem .25rem .5rem;--_ui5_side_navigation_navigation_separator_background_color: var(--sapToolbar_SeparatorColor);--_ui5_side_navigation_navigation_separator_radius: .125rem;--_ui5_side_navigation_navigation_separator_height: .0625rem;--_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor);--_ui5_side_navigation_border_right: 0;--_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);--_ui5_side_navigation_triangle_display: none;--_ui5_side_navigation_icon_color: var(--sapList_TextColor);--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);--_ui5_side_navigation_expand_icon_width: 2.25rem;--_ui5_side_navigation_hover_border_style_color: none;--_ui5_side_navigation_hover_border_width: 0;--_ui5_side_navigation_group_border_style_color: none;--_ui5_side_navigation_group_border_width: 0 0 .0625rem 0;--_ui5_side_navigation_item_border_style_color: none;--_ui5_side_navigation_item_border_width: 0;--_ui5_side_navigation_item_height: var(--_ui5-compact-size, 2rem) var(--_ui5-cozy-size, 2.75rem);--_ui5_side_navigation_item_margin: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, .875rem);--_ui5_side_navigation_item_expand_arrow_padding: var(--_ui5-compact-size, .3125rem) var(--_ui5-cozy-size, .6875rem);--_ui5_side_navigation_item_border_radius: .375rem;--_ui5_side_navigation_item_bottom_margin: .25rem;--_ui5_side_navigation_item_padding_start_in_popup: 1rem;--_ui5_side_navigation_item_padding_start_in_overflow_popup: 1rem;--_ui5_side_navigation_item_transition: background-color .3s ease-in-out;--_ui5_side_navigation_item_padding_left: 1rem;--_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% / .188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_SelectionBackgroundColor);--_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / .188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_Hover_SelectionBackground);--_ui5_side_navigation_selected_item_border_color: var(--sapList_SelectionBorderColor);--_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_selected_border_width: 0 0 .0625rem 0;--_ui5_side_navigation_group_expanded_border_width: 0;--_ui5_side_navigation_group_icon_width: 2.5rem;--_ui5_side_navigation_icon_padding_inline_end: .5rem;--_ui5_side_navigation_item_font_family: var(--sapFontFamily);--_ui5_side_navigation_parent_item_font_family: var(--sapFontSemiboldDuplexFamily);--_ui5_side_navigation_group_padding: 1rem;--_ui5_side_navigation_padding-flexible: .5rem .5rem 0 .5rem;--_ui5_side_navigation_padding-fixed: 0 .5rem .5rem .5rem;--_ui5_side_navigation_popup_padding: .5rem;--_ui5_side_navigation_popup_title_line_height: 1.5rem;--_ui5_side_navigation_first_fixed_item_margin_top: .125rem;--_ui5_side_navigation_item_expand_icon_visibility: block;--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;--_ui5_side_navigation_item_collapsed_hover_focus_display: block;--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;--_ui5_side_navigation_action_item_collapsed_padding: 1rem;--_ui5_side_navigation_item_collapsed_padding: 3rem;--_ui5_side_navigation_action_item_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);--_ui5_side_navigation_action_item_border_active: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);--_ui5_side_navigation_item_expand_icon_right: -.5rem;--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);--ui5_upload_collection_drag_overlay_border: .125rem dashed var(--sapField_BorderColor);--ui5_upload_collection_drop_overlay_border: .125rem solid var(--sapContent_DragAndDropActiveColor);--ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor);--ui5_upload_collection_thumbnail_size: 3rem;--ui5_upload_collection_thumbnail_margin_inline_end: .75rem;--ui5_upload_collection_small_size_buttons_margin_block_start: .5rem;--ui5_upload_collection_small_size_buttons_margin_inline_start: 0;--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);--ui5_upload_collection_drag_overlay_border_radius: .5rem;--ui5_upload_collection_drag_overlay_opacity: .5;--_ui5_wiz_content_item_wrapper_padding: 1rem;--_ui5_wiz_content_item_wrapper_bg: var(--sapGroup_ContentBackground);--_ui5_wiz_tab_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);--_ui5_wiz_tab_selected_bg: var(--sapContent_Selected_ForegroundColor);--_ui5_wiz_tab_border: 1px solid var(--sapContent_Selected_ForegroundColor);--_ui5_wiz_tab_selection_line: var(--sapSelectedColor);--_ui5_wiz_tab_icon_color: var(--sapSelectedColor);--_ui5_wiz_tab_active_separator_color: var(--sapContent_Selected_ForegroundColor);--_ui5_wiz_tab_title_color: var(--sapTextColor);--_ui5_wiz_tab_title_font_family: var(--sapFontBoldFamily);--_ui5_wiz_tab_focus_border_radius: 8px;--_ui5_dynamic_page_footer_spacer: 4rem;--_ui5_dynamic_page_title_padding_S: .5rem 1rem;--_ui5_dynamic_page_title_padding_M: .5rem 2rem;--_ui5_dynamic_page_title_padding_L: .5rem 2rem;--_ui5_dynamic_page_title_padding_XL: .5rem 3rem;--_ui5_dynamic_page_header_padding_S: .5rem 1rem .125rem;--_ui5_dynamic_page_header_padding_M: 1rem 2rem;--_ui5_dynamic_page_header_padding_L: 1rem 2rem;--_ui5_dynamic_page_header_padding_XL: 1rem 3rem;--_ui5_dynamic_page_content_padding_S: 1rem 0 0;--_ui5_dynamic_page_content_padding_M: 1rem 1rem 0;--_ui5_dynamic_page_content_padding_L: 1rem 1rem 0;--_ui5_dynamic_page_content_padding_XL: 1rem 2rem 0;--ui5_dynamic_page_background: var(--sapBackgroundColor);--_ui5_search_icon_border_radius: 1.125rem;--_ui5_search_input_border_radius: 1.125rem;--_ui5-search-border: none;--_ui5-search-icon-border: none;--_ui5-search-wrapper-background: var(--sapShell_InteractiveBackground);--_ui5_search_separator_background: var(--sapShell_InteractiveBorderColor);--_ui5-search-wrapper-hover-background: var(--sapField_Hover_BackgroundStyle);--_ui5-search-wrapper-hover-background-color: var(--sapField_Hover_Background);--_ui5-search-elements-hover-background: none;--_ui5-search-elements-active-background: none;--_ui5_search_input_scope_margin: 0 .125rem 0 .5rem;--_ui5-search_input_scope_hover_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Hover_BorderColor);--_ui5-search_input_scope_active_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Active_BorderColor);--_ui5-search-elements-background: inherit;--_ui5_search_wrapper_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);--_ui5_search_input_outline: none;--_ui5_search_filter_button_border_radius: 1.125rem;--_ui5_seach_filter_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);--_ui5_search_filter_button_border: none;--_ui5-search-filter_button_background_color: inherit;--ui5_search_filter_button_background_active: inherit;--_ui5_search_icon_size: 1.75rem;--_ui5_search_icon_size_default: 2.25rem;--_ui5_search_icon_padding: .375rem;--_ui5_search_icon_hover_padding: .3125rem;--_ui5_search_input_start_margin: 0;--_ui5_search_input_end_padding: 0;--_ui5-search-input-start-padding: .5rem;--_ui5-search-select-height: 1.625rem;--_ui5-search-loading-overlay-background: var(--sapBackgroundColor);--_ui5-search-loading-overlay-transparency: .72;--_ui5-search-field-text-color: var(--sapField_TextColor);--_ui5_search_item_vertical_padding: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1rem);--_ui5_search_byline_vertical_padding: .5rem;--_ui5_search_popover_max_height: 39rem;--_ui5_dynamic_page_title_padding_top: .5rem;--_ui5_dynamic_page_title_padding_bottom: .5rem;--_ui5_dynamic_page_title_min_height: 4rem;--_ui5_dynamic_page_title_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);--_ui5_dynamic_page_title_focus_outline_offset: -.125rem;--_ui5_dynamic_page_title_breadcrumbs_padding_top: .5rem;--_ui5_dynamic_page_title_breadcrumbs_padding_bottom: .25rem;--_ui5_dynamic_page_title_heading_padding_top: .3125rem;--_ui5_dynamic_page_title_subheading_margin_top: .25rem;--_ui5_dynamic_page_title_hover_background: var(--sapObjectHeader_Hover_Background);--_ui5_dynamic_page_snapped_title_on_mobile_line_height: 2rem;--_ui5_dynamic_page_snapped_title_on_mobile_min_height: 2rem;--_ui5_dynamic_page_header_background_color: var(--sapObjectHeader_Background);--_ui5_dynamic_page_header-actions-box-shadow: var(--sapContent_Shadow0);--_ui5_dynamic_page_header-box-shadow: var(--sapContent_HeaderShadow);--_ui5_dynamic_page_actions-lines-color: var(--sapObjectHeader_BorderColor);--_ui5_dynamic_page_header-actions-background: var(--sapObjectHeader_Background);--_ui5_dynamic_page_header-actions-color: var(--sapButton_TextColor);--_ui5_dynamic_page_header-actions-background-pressed: var(--_ui5_dynamic_page_header-actions-background);--_ui5_dynamic_page_header-actions-color-pressed: var(--_ui5_dynamic_page_header-actions-color);--_ui5_timeline_tlgi_line_horizontal_height: 14.8125rem;--_ui5_timeline_tlgi_root_horizontal_height: var(--_ui5-compact-size, 19.375rem) var(--_ui5-cozy-size, 19.9375rem);--_ui5_timeline_tlgi_compact_icon_before_height: var(--_ui5-compact-size, calc(100% + 1.5rem) ) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tlgi_compact_icon_before_height)) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_timeline_tlgi_horizontal_compact_root_margin_left: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_timeline_tlgi_compact_root_gap: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_user_settings_avatar_cozy_display: var(--_ui5-compact-size, none) var(--_ui5-cozy-size, inline-block);--_ui5_user_settings_avatar_compact_display: var(--_ui5-compact-size, inline-block) var(--_ui5-cozy-size, none);--_ui5_user_settings_item_title_font_size: var(--_ui5-compact-size, var(--sapFontLargeSize)) var(--_ui5-cozy-size, var(--sapFontSize))}
1
+ :host{--_ui5_banner_background: var(--sapShell_HeroBanner_Background, var(--sapHighlightColor));--_ui5_banner_text_color: var(--sapShell_HeroBanner_TextColor, var(--sapContent_ContrastTextColor));--_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);--_ui5_banner_box_shadow: var(--sapContent_Shadow0);--_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);--_ui5_timeline_scroll_container_offset: .5rem;--_ui5_shellbar_notification_btn_count_offset: .125rem;--_ui5_side_navigation_item_expand_icon_hover_left: auto;--_ui5_side_navigation_item_expand_icon_hover_right: 0;--_ui5_fcl_solid_bg: var(--sapShell_Background);--_ui5_fcl_column_border: solid .0625rem var(--sapGroup_ContentBorderColor);--_ui5_fcl_decoration_top: linear-gradient(to top, var(--sapHighlightColor), transparent);--_ui5_fcl_decoration_bottom: linear-gradient(to bottom, var(--sapHighlightColor), transparent);--_ui5_media_gallery_overflow_btn_background: var(--sapButton_Background);--_ui5_media_gallery_overflow_btn_color: var(--sapButton_TextColor);--_ui5_media_gallery_overflow_btn_border: 1px solid var(--sapButton_BorderColor);--_ui5_media_gallery_thumbnail_border: 1px solid var(--sapContent_ForegroundColor);--_ui5_media_gallery_thumbnail_selected_border: 2px solid var(--sapSelectedColor);--_ui5_media_gallery_thumbnail_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);--_ui5_media_gallery_item_overlay_box_shadow: inset 0px 0px 80px rgba(0, 0, 0, .2);--_ui5-notification_item-border-radius: var(--sapTile_BorderCornerRadius);--_ui5-notification_group_header-border-bottom-width: 0;--_ui5-notification_group_header-margin: 0px;--_ui5-notification_group_header-margin-expanded: .5rem;--_ui5-notification_group_header-padding: .5rem;--_ui5-notification_item-state-icon-padding: .25rem;--_ui5-notification_item-border-bottom: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);--_ui5-notification_item-border-top-left-right: var(--sapList_BorderWidth) solid var(--sapList_BorderColor);--_ui5-notification_item-margin: 0 .5rem .5rem .5rem;--_ui5-notification_item-background-color-hover: var(--sapList_Hover_Background);--_ui5-notification_item-background-color-active: var(--sapList_SelectionBackgroundColor);--_ui5-notification_item-border-active: 1px solid var(--sapList_SelectionBorderColor);--_ui5-notification_item-root-padding-inline: 1rem;--_ui5-notification_item-content-padding: .75rem 0;--_ui5-notification_item-title-margin-bottom: 0;--_ui5-notification_item-title-padding-end-two-buttons: var(--_ui5-compact-size, 3.875rem) var(--_ui5-cozy-size, 4.375rem);--_ui5-notification_item-title-padding-end-one-button: var(--_ui5-compact-size, 1.875rem) var(--_ui5-cozy-size, 2.125rem);--_ui5-notification_item-description-margin-top: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, .75rem);--_ui5-notification_item-footer-margin-top: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, .75rem);--_ui5-notification_item-focus-offset: .1875rem;--_ui5-notification_item-outline-offset: -.375rem;--_ui5-notification_item-growing-btn-background-color-active: var(--_ui5-notification_item-background-color-active);--_ui5_page_list_bg: var(--sapGroup_ContentBackground);--_ui5_page_transparent_bg: transparent;--_ui5_vsd_header_container: var(--_ui5-compact-size, 2.5rem) var(--_ui5-cozy-size, 2.75rem);--_ui5_vsd_sub_header_container_height: var(--_ui5-compact-size, 2rem) var(--_ui5-cozy-size, 2.75rem);--_ui5_vsd_content_li_padding: .375rem;--_ui5_vsd_content_height: 23.4375rem;--_ui5_vsd_expand_content_height: var(--_ui5-compact-size, 25.4375rem) var(--_ui5-cozy-size, 26.1875rem);--_ui5_product_switch_item_width: 11.25rem;--_ui5_product_switch_item_height: 7rem;--_ui5_product_switch_item_active_outline_color: var(--sapContent_FocusColor);--_ui5_product_switch_item_outline_offset: -.1875rem;--_ui5_shellbar_root_height: 3.25rem;--_ui5_shellbar_logo_outline_color: var(--sapContent_FocusColor);--_ui5_shellbar_logo_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--_ui5_shellbar_logo_outline_color);--_ui5_shellbar_outline_offset: -.25rem;--_ui5_shellbar_button_box_shadow: var(--sapContent_Interaction_Shadow);--_ui5_shellbar_button_box_shadow_active: inset 0 0 0 .0625rem var(--sapButton_Lite_Active_BorderColor);--_ui5_shellbar_button_border: none;--_ui5_shellbar_button_border_radius: var(--sapButton_BorderCornerRadius);--_ui5_shellbar_button_focused_border: .125rem solid var(--sapContent_FocusColor);--_ui5_shellbar_button_active_color: var(--sapShell_Active_TextColor);--_ui5_shellbar_search_field_background: var(--sapShell_InteractiveBackground);--_ui5_shellbar_search_field_border: none;--_ui5_shellbar_search_field_box_shadow: var(--sapField_Shadow), inset 0 -.0625rem var(--sapField_BorderColor);--_ui5_shellbar_search_field_color: var(--sapShell_InteractiveTextColor);--_ui5_shellbar_search_field_outline_focused: .0625rem dotted var(--sapContent_ContrastFocusColor);--_ui5_shellbar_search_field_width: 25rem;--_ui5_shellbar_input_focus_outline_color: var(--sapField_Active_BorderColor);--_ui5_shellbar_overflow_container_middle_height: 3rem;--_ui5_shellbar_menu_button_title_font_size: var(--sapFontHeader5Size);--_ui5_shellbar_image_button_border_radius: 50%;--_ui5-shellbar-content-margin-start: .5rem;--_ui5-shellbar-overflow-button-margin: .5rem;--_ui5-shellbar_separator-color: var(--sapToolbar_SeparatorColor);--_ui5-shellbar_cancel-button-color: var(--sapButton_Lite_TextColor);--_ui5_shellbar_button_badge_border: 1px solid var(--sapContent_BadgeBackground);--_ui5_shellbar_logo_border_radius: .5rem;--_ui5_shellbar_search_field_background_hover: var(--sapShell_Hover_Background);--_ui5_shellbar_search_field_box_shadow_hover: var(--sapField_Hover_Shadow), inset 0 -.0625rem var(--sapField_Hover_BorderColor);--_ui5_shellbar_input_border_radius: 1.125rem;--_ui5_shellbar_input_focus_border_radius: 1.125rem;--_ui5_shellbar_input_background_color: var(--sapShell_InteractiveBackground);--_ui5_TimelineItem_arrow_size: 1.625rem;--_ui5_TimelineItem_bubble_border_width: .125rem;--_ui5_TimelineItem_bubble_border_style: solid;--_ui5_TimelineItem_bubble_border_radius: var(--sapElement_BorderCornerRadius);--_ui5_TimelineItem_bubble_border_color: var(--sapGroup_ContentBorderColor);--_ui5_TimelineItem_bubble_border_top: -.25rem;--_ui5_TimelineItem_bubble_border_right: -.25rem;--_ui5_TimelineItem_bubble_border_bottom: -.25rem;--_ui5_TimelineItem_bubble_border_left: -.75rem;--_ui5_TimelineItem_bubble_rtl_left_offset: -.25rem;--_ui5_TimelineItem_bubble_rtl_right_offset: -.75rem;--_ui5_TimelineItem_bubble_focus_border_radius: .875rem;--_ui5_TimelineItem_horizontal_bubble_focus_top_offset: -.75rem;--_ui5_TimelineItem_horizontal_bubble_focus_left_offset: -.25rem;--_ui5_TimelineItem_bubble_content_padding: .5rem;--_ui5_TimelineItem_bubble_content_subtitle_padding_top: .125rem;--_ui5_TimelineItem_bubble_content_description_padding_top: .5rem;--_ui5_tl_bubble_padding: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1rem);--_ui5_tl_padding: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1rem 1rem 1rem .5rem);--_ui5_tl_li_margin_bottom: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1.625rem);--_ui5_timeline_tli_indicator_before_bottom: var(--_ui5-compact-size, -.75rem) var(--_ui5-cozy-size, -1.5rem);--_ui5_timeline_tli_indicator_before_right: var(--_ui5-compact-size, -.5rem) var(--_ui5-cozy-size, -1.625rem);--_ui5_timeline_tli_indicator_before_without_icon_bottom: var(--_ui5-compact-size, -1rem) var(--_ui5-cozy-size, -1.875rem);--_ui5_timeline_tli_indicator_before_without_icon_right: var(--_ui5-compact-size, -.8125rem) var(--_ui5-cozy-size, -1.9375rem);--_ui5_timeline_tli_indicator_after_top: var(--_ui5-compact-size, calc(-100% + .9375rem) ) var(--_ui5-cozy-size, calc(-100% - 1rem) );--_ui5_timeline_tli_indicator_after_height: var(--_ui5-compact-size, calc(100% - .75rem) ) var(--_ui5-cozy-size, calc(100% + 1rem) );--_ui5_timeline_tli_indicator_before_height: var(--_ui5-compact-size, calc(100% - 1.25rem) ) var(--_ui5-cozy-size, 100%);--_ui5_timeline_tli_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .25rem) );--_ui5_timeline_tli_horizontal_indicator_after_left: var(--_ui5-compact-size, 1.8625rem) var(--_ui5-cozy-size, 1.9375rem);--_ui5_timeline_tli_horizontal_without_icon_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .5rem) );--_ui5_timeline_tli_horizontal_indicator_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .5rem) );--_ui5_timeline_tli_icon_horizontal_indicator_after_width: var(--_ui5-compact-size, var(--_ui5_timeline_tli_indicator_after_height)) var(--_ui5-cozy-size, calc(100% + .25rem) );--_ui5_timeline_tli_without_icon_horizontal_indicator_before_width: var(--_ui5-compact-size, calc(100% - .625rem) ) var(--_ui5-cozy-size, calc(100% + .375rem) );--_ui5_timeline_tli_horizontal_indicator_short_after_width: var(--_ui5-compact-size, calc(100% - 1rem) ) var(--_ui5-cozy-size, 100%);--_ui5_side_navigation_width: 16rem;--_ui5_side_navigation_collapsed_width: 4rem;--_ui5_side_navigation_navigation_separator_margin: .25rem .5rem .25rem .5rem;--_ui5_side_navigation_navigation_separator_background_color: var(--sapToolbar_SeparatorColor);--_ui5_side_navigation_navigation_separator_radius: .125rem;--_ui5_side_navigation_navigation_separator_height: .0625rem;--_ui5_side_navigation_triangle_color: var(--sapContent_NonInteractiveIconColor);--_ui5_side_navigation_border_right: 0;--_ui5_side_navigation_box_shadow: var(--sapContent_Shadow0);--_ui5_side_navigation_triangle_display: none;--_ui5_side_navigation_icon_color: var(--sapList_TextColor);--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);--_ui5_side_navigation_expand_icon_width: 2.25rem;--_ui5_side_navigation_hover_border_style_color: none;--_ui5_side_navigation_hover_border_width: 0;--_ui5_side_navigation_group_border_style_color: none;--_ui5_side_navigation_group_border_width: 0 0 .0625rem 0;--_ui5_side_navigation_item_border_style_color: none;--_ui5_side_navigation_item_border_width: 0;--_ui5_side_navigation_item_height: var(--_ui5-compact-size, 2rem) var(--_ui5-cozy-size, 2.75rem);--_ui5_side_navigation_item_margin: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, .875rem);--_ui5_side_navigation_item_expand_arrow_padding: var(--_ui5-compact-size, .3125rem) var(--_ui5-cozy-size, .6875rem);--_ui5_side_navigation_item_border_radius: .375rem;--_ui5_side_navigation_item_bottom_margin: .25rem;--_ui5_side_navigation_item_padding_start_in_popup: 1rem;--_ui5_side_navigation_item_padding_start_in_overflow_popup: 1rem;--_ui5_side_navigation_item_transition: background-color .3s ease-in-out;--_ui5_side_navigation_item_padding_left: 1rem;--_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% / .188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_SelectionBackgroundColor);--_ui5_side_navigation_collapsed_selected_item_background_hover: 0 100% / .188rem 100% no-repeat linear-gradient(0deg, var(--sapHighlightColor), var(--sapHighlightColor)), var(--sapList_Hover_SelectionBackground);--_ui5_side_navigation_selected_item_border_color: var(--sapList_SelectionBorderColor);--_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_selected_border_width: 0 0 .0625rem 0;--_ui5_side_navigation_group_expanded_border_width: 0;--_ui5_side_navigation_group_icon_width: 2.5rem;--_ui5_side_navigation_icon_padding_inline_end: .5rem;--_ui5_side_navigation_item_font_family: var(--sapFontFamily);--_ui5_side_navigation_parent_item_font_family: var(--sapFontSemiboldDuplexFamily);--_ui5_side_navigation_group_padding: 1rem;--_ui5_side_navigation_padding-flexible: .5rem .5rem 0 .5rem;--_ui5_side_navigation_padding-fixed: 0 .5rem .5rem .5rem;--_ui5_side_navigation_popup_padding: .5rem;--_ui5_side_navigation_popup_title_line_height: 1.5rem;--_ui5_side_navigation_first_fixed_item_margin_top: .125rem;--_ui5_side_navigation_item_expand_icon_visibility: block;--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;--_ui5_side_navigation_item_collapsed_hover_focus_display: block;--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;--_ui5_side_navigation_action_item_collapsed_padding: 1rem;--_ui5_side_navigation_item_collapsed_padding: 3rem;--_ui5_side_navigation_action_item_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);--_ui5_side_navigation_action_item_border_active: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);--_ui5_side_navigation_item_expand_icon_right: -.5rem;--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);--ui5_upload_collection_drag_overlay_border: .125rem dashed var(--sapField_BorderColor);--ui5_upload_collection_drop_overlay_border: .125rem solid var(--sapContent_DragAndDropActiveColor);--ui5_upload_collection_drop_overlay_background: var(--sapContent_DragAndDropActiveColor);--ui5_upload_collection_thumbnail_size: 3rem;--ui5_upload_collection_thumbnail_margin_inline_end: .75rem;--ui5_upload_collection_small_size_buttons_margin_block_start: .5rem;--ui5_upload_collection_small_size_buttons_margin_inline_start: 0;--ui5_upload_collection_drag_overlay_text_color: var(--sapTextColor);--ui5_upload_collection_drag_overlay_icon_color: var(--sapTextColor);--ui5_upload_collection_drag_overlay_border_radius: .5rem;--ui5_upload_collection_drag_overlay_opacity: .5;--_ui5_wiz_content_item_wrapper_padding: 1rem;--_ui5_wiz_content_item_wrapper_bg: var(--sapGroup_ContentBackground);--_ui5_wiz_tab_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);--_ui5_wiz_tab_selected_bg: var(--sapContent_Selected_ForegroundColor);--_ui5_wiz_tab_border: 1px solid var(--sapContent_Selected_ForegroundColor);--_ui5_wiz_tab_selection_line: var(--sapSelectedColor);--_ui5_wiz_tab_icon_color: var(--sapSelectedColor);--_ui5_wiz_tab_active_separator_color: var(--sapContent_Selected_ForegroundColor);--_ui5_wiz_tab_title_color: var(--sapTextColor);--_ui5_wiz_tab_title_font_family: var(--sapFontBoldFamily);--_ui5_wiz_tab_focus_border_radius: 8px;--_ui5_dynamic_page_footer_spacer: 4rem;--_ui5_dynamic_page_title_padding_S: .5rem 1rem;--_ui5_dynamic_page_title_padding_M: .5rem 2rem;--_ui5_dynamic_page_title_padding_L: .5rem 2rem;--_ui5_dynamic_page_title_padding_XL: .5rem 3rem;--_ui5_dynamic_page_header_padding_S: .5rem 1rem .125rem;--_ui5_dynamic_page_header_padding_M: 1rem 2rem;--_ui5_dynamic_page_header_padding_L: 1rem 2rem;--_ui5_dynamic_page_header_padding_XL: 1rem 3rem;--_ui5_dynamic_page_content_padding_S: 1rem 0 0;--_ui5_dynamic_page_content_padding_M: 1rem 1rem 0;--_ui5_dynamic_page_content_padding_L: 1rem 1rem 0;--_ui5_dynamic_page_content_padding_XL: 1rem 2rem 0;--ui5_dynamic_page_background: var(--sapBackgroundColor);--_ui5_search_icon_border_radius: 1.125rem;--_ui5_search_input_border_radius: 1.125rem;--_ui5-search-border: none;--_ui5-search-icon-border: none;--_ui5-search-wrapper-background: var(--sapShell_InteractiveBackground);--_ui5_search_separator_background: var(--sapShell_InteractiveBorderColor);--_ui5-search-wrapper-hover-background: var(--sapField_Hover_BackgroundStyle);--_ui5-search-wrapper-hover-background-color: var(--sapField_Hover_Background);--_ui5-search-elements-hover-background: none;--_ui5-search-elements-active-background: none;--_ui5_search_input_scope_margin: 0 .125rem 0 .5rem;--_ui5-search_input_scope_hover_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Hover_BorderColor);--_ui5-search_input_scope_active_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Active_BorderColor);--_ui5-search-elements-background: inherit;--_ui5_search_wrapper_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);--_ui5_search_input_outline: none;--_ui5_search_filter_button_border_radius: 1.125rem;--_ui5_seach_filter_button_border_hover: 1px solid var(--sapButton_Hover_BorderColor);--_ui5_search_filter_button_border: none;--_ui5-search-filter_button_background_color: inherit;--ui5_search_filter_button_background_active: inherit;--_ui5_search_icon_size: 1.75rem;--_ui5_search_icon_size_default: 2.25rem;--_ui5_search_icon_padding: .375rem;--_ui5_search_icon_hover_padding: .3125rem;--_ui5_search_input_start_margin: 0;--_ui5_search_input_end_padding: 0;--_ui5-search-input-start-padding: .5rem;--_ui5-search-select-height: 1.625rem;--_ui5-search-loading-overlay-background: var(--sapBackgroundColor);--_ui5-search-loading-overlay-transparency: .72;--_ui5-search-field-text-color: var(--sapField_TextColor);--_ui5_search_item_vertical_padding: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, 1rem);--_ui5_search_byline_vertical_padding: .5rem;--_ui5_search_popover_max_height: 39rem;--_ui5_dynamic_page_title_padding_top: .5rem;--_ui5_dynamic_page_title_padding_bottom: .5rem;--_ui5_dynamic_page_title_min_height: 4rem;--_ui5_dynamic_page_title_focus_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);--_ui5_dynamic_page_title_focus_outline_offset: -.125rem;--_ui5_dynamic_page_title_breadcrumbs_padding_top: .5rem;--_ui5_dynamic_page_title_breadcrumbs_padding_bottom: .25rem;--_ui5_dynamic_page_title_heading_padding_top: .3125rem;--_ui5_dynamic_page_title_subheading_margin_top: .25rem;--_ui5_dynamic_page_title_hover_background: var(--sapObjectHeader_Hover_Background);--_ui5_dynamic_page_snapped_title_on_mobile_line_height: 2rem;--_ui5_dynamic_page_snapped_title_on_mobile_min_height: 2rem;--_ui5_dynamic_page_header_background_color: var(--sapObjectHeader_Background);--_ui5_dynamic_page_header-actions-box-shadow: var(--sapContent_Shadow0);--_ui5_dynamic_page_header-box-shadow: var(--sapContent_HeaderShadow);--_ui5_dynamic_page_actions-lines-color: var(--sapObjectHeader_BorderColor);--_ui5_dynamic_page_header-actions-background: var(--sapObjectHeader_Background);--_ui5_dynamic_page_header-actions-color: var(--sapButton_TextColor);--_ui5_dynamic_page_header-actions-background-pressed: var(--_ui5_dynamic_page_header-actions-background);--_ui5_dynamic_page_header-actions-color-pressed: var(--_ui5_dynamic_page_header-actions-color);--_ui5_timeline_tlgi_line_horizontal_height: 14.8125rem;--_ui5_timeline_tlgi_root_horizontal_height: var(--_ui5-compact-size, 19.375rem) var(--_ui5-cozy-size, 19.9375rem);--_ui5_timeline_tlgi_compact_icon_before_height: var(--_ui5-compact-size, calc(100% + 1.5rem) ) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_timeline_tlgi_horizontal_line_placeholder_before_width: var(--_ui5-compact-size, var(--_ui5_timeline_tlgi_compact_icon_before_height)) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_timeline_tlgi_horizontal_compact_root_margin_left: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_timeline_tlgi_compact_root_gap: var(--_ui5-compact-size, .5rem) var(--_ui5-cozy-size, var(--_ui5-f2d95f8));--_ui5_user_settings_avatar_cozy_display: var(--_ui5-compact-size, none) var(--_ui5-cozy-size, inline-block);--_ui5_user_settings_avatar_compact_display: var(--_ui5-compact-size, inline-block) var(--_ui5-cozy-size, none);--_ui5_user_settings_item_title_font_size: var(--_ui5-compact-size, var(--sapFontLargeSize)) var(--_ui5-cozy-size, var(--sapFontSize))}
2
2
  :dir(rtl){--_ui5_timeline_scroll_container_offset: -.5rem;--_ui5_shellbar_notification_btn_count_offset: auto;--_ui5_side_navigation_item_expand_icon_hover_left: 0;--_ui5_side_navigation_item_expand_icon_hover_right: auto}
@@ -1,6 +1,6 @@
1
1
  :host {
2
- --_ui5_banner_background: light-dark(var(--sapShell_Banner_Background, var(--sapHighlightColor)), var(--sapShell_HeroBanner_Background));
3
- --_ui5_banner_text_color: light-dark(var(--sapShell_Banner_TextColor, var(--sapContent_ContrastTextColor)), var(--sapShell_HeroBanner_TextColor));
2
+ --_ui5_banner_background: light-dark(var(--sapShell_HeroBanner_Background, var(--sapHighlightColor)), var(--sapShell_HeroBanner_Background));
3
+ --_ui5_banner_text_color: light-dark(var(--sapShell_HeroBanner_TextColor, var(--sapContent_ContrastTextColor)), var(--sapShell_HeroBanner_TextColor));
4
4
  --_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);
5
5
  --_ui5_banner_box_shadow: var(--sapContent_Shadow0);
6
6
  --_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);
@@ -1,6 +1,6 @@
1
1
  :host{
2
- --_ui5_banner_background: var(--sapShell_Banner_Background, var(--sapHighlightColor));
3
- --_ui5_banner_text_color: var(--sapShell_Banner_TextColor, var(--sapContent_ContrastTextColor));
2
+ --_ui5_banner_background: var(--sapShell_HeroBanner_Background, var(--sapHighlightColor));
3
+ --_ui5_banner_text_color: var(--sapShell_HeroBanner_TextColor, var(--sapContent_ContrastTextColor));
4
4
  --_ui5_banner_border_radius: var(--sapTile_BorderCornerRadius);
5
5
  --_ui5_banner_box_shadow: var(--sapContent_Shadow0);
6
6
  --_ui5_banner_background_image: var(--sapShell_HeroBanner_BackgroundImage);