@sapudex/web-components 2.7.1 → 2.7.2
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.
- package/dist/MastheadMobileMenu.js +2 -0
- package/dist/MastheadMobileMenu.js.map +1 -1
- package/dist/assets/{InputSuggestions-CSTFg-L1.js → InputSuggestions-D0OZo5eY.js} +1 -1
- package/dist/assets/{ListItemStandardExpandableTextTemplate-Dn-5qRv_.js → ListItemStandardExpandableTextTemplate-BOc_KoW1.js} +1 -1
- package/dist/assets/{bundle.esm-CGu-yFWp.js → bundle.esm-BLn1Dq6A.js} +241 -241
- package/dist/css/themes/RatingIndicator.css +1 -1
- package/dist/css/themes/Slider.css +1 -1
- package/dist/generated/templates/MastheadMenuTemplate.lit.js +7 -5
- package/dist/generated/templates/MastheadMenuTemplate.lit.js.map +1 -1
- package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js +10 -8
- package/dist/generated/templates/MastheadMobileMenuTemplate.lit.js.map +1 -1
- package/dist/generated/themes/RatingIndicator.css.d.ts +1 -1
- package/dist/generated/themes/RatingIndicator.css.js +1 -1
- package/dist/generated/themes/RatingIndicator.css.js.map +1 -1
- package/dist/generated/themes/Slider.css.d.ts +1 -1
- package/dist/generated/themes/Slider.css.js +1 -1
- package/dist/generated/themes/Slider.css.js.map +1 -1
- package/dist/utils/getEffectiveScrollbarStyle.d.ts +0 -2
- package/dist/utils/getEffectiveScrollbarStyle.js +2 -11
- package/dist/utils/getEffectiveScrollbarStyle.js.map +1 -1
- package/dist/web-types.json +1 -1
- package/package.json +1 -1
- package/src/MastheadMenu.hbs +26 -13
- package/src/MastheadMobileMenu.hbs +25 -10
- package/src/MastheadMobileMenu.ts +2 -0
- package/src/generated/templates/MastheadMenuTemplate.lit.ts +7 -5
- package/src/generated/templates/MastheadMobileMenuTemplate.lit.ts +10 -8
- package/src/generated/themes/RatingIndicator.css.ts +1 -1
- package/src/generated/themes/Slider.css.ts +1 -1
- package/src/utils/getEffectiveScrollbarStyle.ts +2 -14
package/src/MastheadMenu.hbs
CHANGED
|
@@ -21,17 +21,29 @@
|
|
|
21
21
|
|
|
22
22
|
{{#*inline "header"}}
|
|
23
23
|
<div class="udex-masthead-menu__header">
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
24
|
+
{{#if this.url}}
|
|
25
|
+
<udex-masthead-menu-item
|
|
26
|
+
id="category-{{categoryId}}"
|
|
27
|
+
type="Heading"
|
|
28
|
+
part="menu-item"
|
|
29
|
+
exportparts="menu-item"
|
|
30
|
+
accessible-role="link"
|
|
31
|
+
@click="{{../../handleMenuItemClick}}"
|
|
32
|
+
url="{{this.url}}"
|
|
33
|
+
label="{{this.category}}"
|
|
34
|
+
icon-end
|
|
35
|
+
has-border>
|
|
36
|
+
</udex-masthead-menu-item>
|
|
37
|
+
{{else}}
|
|
38
|
+
<udex-masthead-menu-item
|
|
39
|
+
id="category-{{categoryId}}"
|
|
40
|
+
type="Heading"
|
|
41
|
+
part="menu-item"
|
|
42
|
+
exportparts="menu-item"
|
|
43
|
+
label="{{this.category}}"
|
|
44
|
+
has-border>
|
|
45
|
+
</udex-masthead-menu-item>
|
|
46
|
+
{{/if}}
|
|
35
47
|
</div>
|
|
36
48
|
{{/inline}}
|
|
37
49
|
|
|
@@ -47,13 +59,14 @@
|
|
|
47
59
|
{{else}}
|
|
48
60
|
<udex-masthead-menu-item
|
|
49
61
|
part="menu-item"
|
|
62
|
+
accessible-role="link"
|
|
50
63
|
exportparts="menu-item"
|
|
64
|
+
exportparts="badge"
|
|
51
65
|
@click="{{../../../handleMenuItemClick}}"
|
|
52
66
|
badge="{{this.badge}}"
|
|
53
67
|
?external-link="{{this.externalLink}}"
|
|
54
68
|
url="{{this.url}}"
|
|
55
|
-
label="{{this.title}}"
|
|
56
|
-
exportparts="badge">
|
|
69
|
+
label="{{this.title}}">
|
|
57
70
|
</udex-masthead-menu-item>
|
|
58
71
|
{{/if}}
|
|
59
72
|
</li>
|
|
@@ -133,7 +133,7 @@
|
|
|
133
133
|
</li>
|
|
134
134
|
{{/if}}
|
|
135
135
|
{{#each _categories}}
|
|
136
|
-
{{#if this.items}}
|
|
136
|
+
{{#if this.items.length}}
|
|
137
137
|
{{#if this.category}}
|
|
138
138
|
<li class="udex-masthead-mobile-menu__list-item" role="none">
|
|
139
139
|
<udex-masthead-menu-item
|
|
@@ -164,15 +164,30 @@
|
|
|
164
164
|
{{/each}}
|
|
165
165
|
{{/if}}
|
|
166
166
|
{{else}}
|
|
167
|
-
<udex-masthead-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
167
|
+
<li class="udex-masthead-mobile-menu__list-item" role="none">
|
|
168
|
+
{{#if this.url}}
|
|
169
|
+
<udex-masthead-menu-item
|
|
170
|
+
id="{{@index}}"
|
|
171
|
+
@click="{{../handleMobileItemEvent}}"
|
|
172
|
+
label="{{this.category}}"
|
|
173
|
+
url="{{this.url}}"
|
|
174
|
+
part="menu-item"
|
|
175
|
+
type="Link"
|
|
176
|
+
second-level
|
|
177
|
+
has-border>
|
|
178
|
+
</udex-masthead-menu-item>
|
|
179
|
+
{{else}}
|
|
180
|
+
<udex-masthead-menu-item
|
|
181
|
+
id="{{@index}}"
|
|
182
|
+
@click="{{../handleMobileItemEvent}}"
|
|
183
|
+
label="{{this.category}}"
|
|
184
|
+
part="menu-item"
|
|
185
|
+
type="Button"
|
|
186
|
+
second-level
|
|
187
|
+
has-border>
|
|
188
|
+
</udex-masthead-menu-item>
|
|
189
|
+
{{/if}}
|
|
190
|
+
</li>
|
|
176
191
|
{{/if}}
|
|
177
192
|
{{/each}}
|
|
178
193
|
{{/inline}}
|
|
@@ -203,6 +203,7 @@ class UDExMastheadMobileMenu extends UI5Element {
|
|
|
203
203
|
|
|
204
204
|
handleRightArrow(e: KeyboardEvent) {
|
|
205
205
|
if (isRight(e)) {
|
|
206
|
+
e.preventDefault();
|
|
206
207
|
this.handleDirection();
|
|
207
208
|
if (this.isRtlDirection) {
|
|
208
209
|
this.moveToBackWithKeyboard(e);
|
|
@@ -214,6 +215,7 @@ class UDExMastheadMobileMenu extends UI5Element {
|
|
|
214
215
|
|
|
215
216
|
handleLeftArrow(e: KeyboardEvent) {
|
|
216
217
|
if (isLeft(e)) {
|
|
218
|
+
e.preventDefault();
|
|
217
219
|
this.handleDirection();
|
|
218
220
|
if (this.isRtlDirection) {
|
|
219
221
|
this.moveToNextLevelWithKeyboard(e);
|
|
@@ -8,11 +8,13 @@ import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
|
|
|
8
8
|
function block0 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-menu ${ifDefined(this.oneRowClass)}" part="menu" @keydown="${this.handleKeyDown}">${ this.menuTitle ? block1.call(this, context, tags, suffix) : undefined }${ repeat(this.itemsList, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block2.call(this, context, tags, suffix, item, index)) }</div> `;}
|
|
9
9
|
function block1 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-menu__title">${ifDefined(this.menuTitle)}</div>`;}
|
|
10
10
|
function block2 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-masthead-menu__row">${ repeat(item.subMenuLinkItems, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }</div>`;}
|
|
11
|
-
function block3 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-masthead-menu__column" part="column">${ item.category ? block4.call(this, context, tags, suffix, item, index) : undefined }<ul class="udex-masthead-menu__list" aria-labelledby="category-${ifDefined(item.categoryId)}" category="${ifDefined(item.category)}">${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) =>
|
|
12
|
-
function block4 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return
|
|
13
|
-
function block5 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html
|
|
14
|
-
function block6 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-
|
|
15
|
-
function block7 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return
|
|
11
|
+
function block3 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-masthead-menu__column" part="column">${ item.category ? block4.call(this, context, tags, suffix, item, index) : undefined }<ul class="udex-masthead-menu__list" aria-labelledby="category-${ifDefined(item.categoryId)}" category="${ifDefined(item.category)}">${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block7.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
|
|
12
|
+
function block4 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<div class="udex-masthead-menu__header">${ item.url ? block5.call(this, context, tags, suffix, item, index) : block6.call(this, context, tags, suffix, item, index) }</div>`;}
|
|
13
|
+
function block5 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} id="category-${ifDefined(item.categoryId)}" type="Heading" part="menu-item" exportparts="menu-item" accessible-role="link" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.category)}" icon-end has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item id="category-${ifDefined(item.categoryId)}" type="Heading" part="menu-item" exportparts="menu-item" accessible-role="link" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.category)}" icon-end has-border></udex-masthead-menu-item>`;}
|
|
14
|
+
function block6 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} id="category-${ifDefined(item.categoryId)}" type="Heading" part="menu-item" exportparts="menu-item" label="${ifDefined(item.category)}" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item id="category-${ifDefined(item.categoryId)}" type="Heading" part="menu-item" exportparts="menu-item" label="${ifDefined(item.category)}" has-border></udex-masthead-menu-item>`;}
|
|
15
|
+
function block7 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li>${ item.isDivider ? block8.call(this, context, tags, suffix, item, index) : block9.call(this, context, tags, suffix, item, index) }</li>`;}
|
|
16
|
+
function block8 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-divider", tags, suffix)} class="udex-masthead-menu__item-divider"></${scopeTag("udex-divider", tags, suffix)}>` : html`<udex-divider class="udex-masthead-menu__item-divider"></udex-divider>`;}
|
|
17
|
+
function block9 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" accessible-role="link" exportparts="menu-item" exportparts="badge" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}"></udex-masthead-menu-item>`;}
|
|
16
18
|
|
|
17
19
|
function template(this: MastheadMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
|
|
18
20
|
export default template;
|
|
@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
|
|
|
5
5
|
import type MastheadMobileMenu from "../../MastheadMobileMenu.js";
|
|
6
6
|
import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
|
|
7
7
|
|
|
8
|
-
function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-mobile-menu"><div class="udex-masthead-mobile-menu__nav-holder">${ this.hasSearchSlot ? block1.call(this, context, tags, suffix) : undefined }<ul class="udex-masthead-mobile-menu__list" role="menu" @keydown="${this.handlePressKey}">${ this.showNavigation ? block2.call(this, context, tags, suffix) : undefined }${ this._showCategories ? block6.call(this, context, tags, suffix) : undefined }${ this._showCategoryItems ?
|
|
8
|
+
function block0 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<nav class="udex-masthead-mobile-menu"><div class="udex-masthead-mobile-menu__nav-holder">${ this.hasSearchSlot ? block1.call(this, context, tags, suffix) : undefined }<ul class="udex-masthead-mobile-menu__list" role="menu" @keydown="${this.handlePressKey}">${ this.showNavigation ? block2.call(this, context, tags, suffix) : undefined }${ this._showCategories ? block6.call(this, context, tags, suffix) : undefined }${ this._showCategoryItems ? block20.call(this, context, tags, suffix) : undefined }</ul></div>${ this.showExploreBtn ? block24.call(this, context, tags, suffix) : undefined }</nav> `;}
|
|
9
9
|
function block1 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-mobile-menu__list-search"><slot name="search"></slot></div>`;}
|
|
10
10
|
function block2 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ repeat(this.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block3.call(this, context, tags, suffix, item, index)) }`;}
|
|
11
11
|
function block3 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ item.subItems ? block4.call(this, context, tags, suffix, item, index) : block5.call(this, context, tags, suffix, item, index) }</li>`;}
|
|
@@ -17,17 +17,19 @@ function block8 (this: MastheadMobileMenu, context: UI5Element, tags: string[],
|
|
|
17
17
|
function block9 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__heading" label="${ifDefined(this._clickedItem.innerText)}" type="Heading" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__heading" label="${ifDefined(this._clickedItem.innerText)}" type="Heading" has-border></udex-masthead-menu-item>`;}
|
|
18
18
|
function block10 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" is-back has-border icon-start is-back-to-nav></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToMenuItems}" label="${ifDefined(this._clickedItem.innerText)}" aria-has-popup="true" type="Button" is-back has-border icon-start is-back-to-nav></udex-masthead-menu-item>`;}
|
|
19
19
|
function block11 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" url="${ifDefined(this._clickedItem.href)}" label="${ifDefined(this.overviewLinkText)}" @click="${this.handleMobileItemEvent}" second-level has-border></udex-masthead-menu-item></li>`;}
|
|
20
|
-
function block12 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.items ? block13.call(this, context, tags, suffix, item, index) : block17.call(this, context, tags, suffix, item, index) }`;}
|
|
20
|
+
function block12 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.items.length ? block13.call(this, context, tags, suffix, item, index) : block17.call(this, context, tags, suffix, item, index) }`;}
|
|
21
21
|
function block13 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.category ? block14.call(this, context, tags, suffix, item, index) : block15.call(this, context, tags, suffix, item, index) }`;}
|
|
22
22
|
function block14 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMenuCategoryClick}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level-btn second-level has-border icon-end></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMenuCategoryClick}" id="${index}" label="${ifDefined(item.category)}" aria-has-popup="true" type="Button" second-level-btn second-level has-border icon-end></udex-masthead-menu-item></li>`;}
|
|
23
23
|
function block15 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ repeat(item.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block16.call(this, context, tags, suffix, item, index)) }`;}
|
|
24
24
|
function block16 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileItemEvent}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" second-level has-border></udex-masthead-menu-item></li>`;}
|
|
25
|
-
function block17 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return
|
|
26
|
-
function block18 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html
|
|
27
|
-
function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html
|
|
28
|
-
function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number)
|
|
29
|
-
function block21 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined
|
|
30
|
-
function block22 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined
|
|
25
|
+
function block17 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li class="udex-masthead-mobile-menu__list-item" role="none">${ item.url ? block18.call(this, context, tags, suffix, item, index) : block19.call(this, context, tags, suffix, item, index) }</li>`;}
|
|
26
|
+
function block18 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} id="${index}" @click="${this.handleMobileItemEvent}" label="${ifDefined(item.category)}" url="${ifDefined(item.url)}" part="menu-item" type="Link" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item id="${index}" @click="${this.handleMobileItemEvent}" label="${ifDefined(item.category)}" url="${ifDefined(item.url)}" part="menu-item" type="Link" second-level has-border></udex-masthead-menu-item>`;}
|
|
27
|
+
function block19 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} id="${index}" @click="${this.handleMobileItemEvent}" label="${ifDefined(item.category)}" part="menu-item" type="Button" second-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item id="${index}" @click="${this.handleMobileItemEvent}" label="${ifDefined(item.category)}" part="menu-item" type="Button" second-level has-border></udex-masthead-menu-item>`;}
|
|
28
|
+
function block20 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back is-back-to-categories></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>${ this._category.url ? block21.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block22.call(this, context, tags, suffix, item, index)) }` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__back-item" @click="${this.handleBackToCategories}" label="${ifDefined(this._category.category)}" type="Button" aria-has-popup="true" has-border icon-start is-back is-back-to-categories></udex-masthead-menu-item></li>${ this._category.url ? block21.call(this, context, tags, suffix) : undefined }${ repeat(this._category.items, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block22.call(this, context, tags, suffix, item, index)) }`;}
|
|
29
|
+
function block21 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" url="${ifDefined(this._category.url)}" label="${ifDefined(this.overviewLinkText)}" third-level has-border></udex-masthead-menu-item></li>`;}
|
|
30
|
+
function block22 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`${ item.url ? block23.call(this, context, tags, suffix, item, index) : undefined }`;}
|
|
31
|
+
function block23 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li class="udex-masthead-mobile-menu__list-item" role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li class="udex-masthead-mobile-menu__list-item" role="none"><udex-masthead-menu-item part="menu-item" @click="${this.handleMobileCategoryItemEvent}" label="${ifDefined(item.title)}" url="${ifDefined(item.url)}" third-level has-border></udex-masthead-menu-item></li>`;}
|
|
32
|
+
function block24 (this: MastheadMobileMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" class="udex-masthead-mobile-menu__explore-btn" id="${ifDefined(this.exploreItem._id)}" @click="${this.handleExploreSapClick}" @keydown="${this.handleLeftRightKeys}" accessible-role-text="button" aria-has-popup="true" type="Button" first-level-btn first-level icon-end is-explore label="${ifDefined(this.exploreItem.innerText)}"></udex-masthead-menu-item>`;}
|
|
31
33
|
|
|
32
34
|
function template(this: MastheadMobileMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
|
|
33
35
|
export default template;
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-7-
|
|
8
|
+
export default `:host{--udex_rating_indicator_readonly_item_width: 1.5rem;--udex_rating_indicator_readonly_item_height: 1.5rem;--udex_rating_indicator_item_width: 1.5rem;--udex_rating_indicator_item_height: 1.5rem;--udex_rating_indicator_mobile_item_padding: 10px;--udex_rating_indicator_disabled_opacity: .4;--udex-rating_indicator_items_gap: 8px;--udex-rating_indicator_mobile_items_gap: 8px;--udex-rating_indicator_rated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_unrated_color: var(--sapContent_RatedColor, #E76500);--udex-rating_indicator_read-only-unrated_color: var(--udexColorGrey6 ,#5B738B);--udex-rating_indicator_disabled-unrated_color: var(--udexColorMango6, #E76500);--udex-rating_indicator_rated_hover_color: var(--udexColorMango7, #C35500);--udex-rating_indicator_unrated_hover_color: var(--udexColorMango7, #C35500)}:host(:not([hidden])){display:inline-flex;margin:var(--_ui5-v2-7-2_rating_indicator_component_spacing);cursor:pointer}:host([disabled]){opacity:var(--udex_rating_indicator_disabled_opacity);cursor:initial;outline:none}:host([readonly]){cursor:initial}:host([disabled]) .udex-rating-indicator__item-unsel,:host([readonly]) .udex-rating-indicator__item-unsel{width:var(--udex_rating_indicator_readonly_item_width);height:var(--udex_rating_indicator_readonly_item_height);padding-inline:0}:host([disabled]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_disabled-unrated_color)}:host([readonly]) .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_read-only-unrated_color)}:host([_focused]){outline:var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);outline-offset:.125rem;border-radius:.25rem}[ui5-icon]{display:flex;text-shadow:var(--sapContent_TextShadow)}.udex-rating-indicator{font-family:var(--sapFontFamily);font-size:var(--sapFontSize, 16px);padding:0;outline:none;position:relative;display:inline-flex;gap:12px;align-items:center}.udex-rating-indicator__total{color:var(--udexColorGrey6);line-height:24px}.udex-rating-indicator__list{list-style-type:none;display:flex;align-items:center;margin:0;padding:0}.udex-rating-indicator__item{position:relative;width:var(--udex_rating_indicator_item_width);height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_items_gap)}.udex-rating-indicator__item [ui5-icon]{width:100%;height:100%;color:inherit;user-select:none}.udex-rating-indicator__item.udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_color)}.udex-rating-indicator__item.udex-rating-indicator__item-sel,.udex-rating-indicator__item.udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_color)}.udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{position:absolute;inset-inline-start:50%;color:var(--udex-rating_indicator_rated_color)}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-sel,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__half-icon,:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-half{color:var(--udex-rating_indicator_rated_hover_color)}:host(:not([readonly]):not([disabled])) .ui5-rating-indicator-root:hover{opacity:1}:host(:not([readonly]):not([disabled])) .udex-rating-indicator:hover .udex-rating-indicator__item-unsel{color:var(--udex-rating_indicator_unrated_hover_color)}.udex-rating-indicator__half-icon-wrapper{width:100%;height:100%;position:absolute;inset-inline-start:-50%;top:0;z-index:32;overflow:hidden}.udex-rating-indicator--mobile .udex-rating-indicator__half-icon-wrapper{top:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item [ui5-icon].udex-rating-indicator__half-icon{height:var(--udex_rating_indicator_item_height)}.udex-rating-indicator--mobile .udex-rating-indicator__item{padding:var(--udex_rating_indicator_mobile_item_padding)}:host([readonly]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel,:host([disabled]) .udex-rating-indicator--mobile .udex-rating-indicator__item-unsel{padding-left:var(--udex_rating_indicator_mobile_item_padding);padding-right:var(--udex_rating_indicator_mobile_item_padding)}.udex-rating-indicator--mobile .udex-rating-indicator__item:not(:last-child){margin-inline-end:var(--udex-rating_indicator_mobile_items_gap)}
|
|
9
9
|
`
|
|
@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
|
|
|
5
5
|
|
|
6
6
|
registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
|
|
7
7
|
registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
|
|
8
|
-
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-7-
|
|
8
|
+
export default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-7-2_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}
|
|
9
9
|
`
|
|
@@ -1,18 +1,6 @@
|
|
|
1
|
-
import { isDesktop } from "@ui5/webcomponents-base";
|
|
2
|
-
|
|
3
|
-
export const NO_SCROLLBAR_STYLE_CLASS = "ui5-content-native-scrollbars";
|
|
4
|
-
|
|
5
|
-
export const applyCustomScrollbar = () => {
|
|
6
|
-
if (isDesktop()) {
|
|
7
|
-
document?.body.classList.add(NO_SCROLLBAR_STYLE_CLASS);
|
|
8
|
-
} else {
|
|
9
|
-
document?.body.classList.remove(NO_SCROLLBAR_STYLE_CLASS);
|
|
10
|
-
}
|
|
11
|
-
};
|
|
12
|
-
|
|
13
1
|
const getEffectiveScrollbarStyle = () => {
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
// Scrollbar styles applicable with UI5 'ui5-content-native-scrollbars' class
|
|
3
|
+
// https://ui5.github.io/webcomponents/docs/advanced/scrollbars-customization/
|
|
16
4
|
return `
|
|
17
5
|
// ::part(content) for ui5-popover content
|
|
18
6
|
::part(content)::-webkit-scrollbar:horizontal,
|