npm - @sapudex/web-components - Versions diffs - 2.7.0 → 2.7.2 - Mend

@sapudex/web-components 2.7.0 → 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.

Files changed (83) hide show

package/dist/utils/getEffectiveScrollbarStyle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"getEffectiveScrollbarStyle.js","sourceRoot":"","sources":["../../src/utils/getEffectiveScrollbarStyle.ts"],"names":[],"mappings":"AAAA,~~OAAO,EAAE,SAAS,EAAE,~~MAAM,yBAAyB,CAAC;AAEpD,MAAM,CAAC,MAAM,wBAAwB,GAAG,+BAA+B,CAAC;AAExE,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IACvC,IAAI,SAAS,EAAE,EAAE,CAAC;QAChB,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC;IACzD,CAAC;SAAM,CAAC;QACN,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,wBAAwB,CAAC,CAAC;IAC5D,CAAC;AACH,CAAC,CAAC;AAEF,MAAM,0BAA0B,GAAG,GAAG,EAAE;IACtC,~~oBAAoB~~,~~EAAE,CAAC~~;~~IAEvB~~,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BL,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["~~import~~ { ~~isDesktop~~ } ~~from~~ \~~"@ui5/webcomponents-base\";\~~n~~\nexport~~ ~~const~~ ~~NO_SCROLLBAR_STYLE_CLASS~~ = \"ui5-content-native-scrollbars~~\";\n\nexport~~ ~~const applyCustomScrollbar = () => {~~\n if ~~(isDesktop()) {\n document?.body~~.~~classList~~.~~add(NO_SCROLLBAR_STYLE_CLASS);\~~n ~~} else {\n document?.body.classList.remove(NO_SCROLLBAR_STYLE_CLASS);\n }\n};\n\nconst getEffectiveScrollbarStyle = () => {\n applyCustomScrollbar();\n\n~~ return `\n // ::part(content) for ui5-popover content\n ::part(content)::-webkit-scrollbar:horizontal,\n ::-webkit-scrollbar:horizontal {\n height: calc(var(--sapScrollBar_Dimension) + 4px);\n }\n ::part(content)::-webkit-scrollbar:vertical,\n ::-webkit-scrollbar:vertical {\n width: calc(var(--sapScrollBar_Dimension) + 4px);\n }\n ::part(content)::-webkit-scrollbar,\n ::-webkit-scrollbar {\n background-color: var(--sapScrollBar_TrackColor);\n border-left: none;\n }\n ::part(content)::-webkit-scrollbar-thumb,\n ::-webkit-scrollbar-thumb {\n background-color: var(--sapScrollBar_FaceColor);\n border: 4px solid var(--sapScrollBar_TrackColor);\n border-radius: 8px; \n }\n ::part(content)::-webkit-scrollbar-thumb:hover,\n ::-webkit-scrollbar-thumb:hover {\n border: 2px solid var(--sapScrollBar_TrackColor);\n background-color: var(--sapScrollBar_Hover_FaceColor); \n }\n ::part(content)::-webkit-scrollbar-corner,\n ::-webkit-scrollbar-corner {\n background-color: var(--sapScrollBar_TrackColor);\n }`;\n};\n\nexport default getEffectiveScrollbarStyle;\n"]}
1	+ {"version":3,"file":"getEffectiveScrollbarStyle.js","sourceRoot":"","sources":["../../src/utils/getEffectiveScrollbarStyle.ts"],"names":[],"mappings":"AAAA,MAAM,0BAA0B,GAAG,GAAG,EAAE;IACtC,6EAA6E;IAC7E,8EAA8E;IAC9E,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA6BL,CAAC;AACL,CAAC,CAAC;AAEF,eAAe,0BAA0B,CAAC","sourcesContent":["const getEffectiveScrollbarStyle = () => {\n // Scrollbar styles applicable with UI5 'ui5-content-native-scrollbars' class\n // https://ui5.github.io/webcomponents/docs/advanced/scrollbars-customization/\n return `\n // ::part(content) for ui5-popover content\n ::part(content)::-webkit-scrollbar:horizontal,\n ::-webkit-scrollbar:horizontal {\n height: calc(var(--sapScrollBar_Dimension) + 4px);\n }\n ::part(content)::-webkit-scrollbar:vertical,\n ::-webkit-scrollbar:vertical {\n width: calc(var(--sapScrollBar_Dimension) + 4px);\n }\n ::part(content)::-webkit-scrollbar,\n ::-webkit-scrollbar {\n background-color: var(--sapScrollBar_TrackColor);\n border-left: none;\n }\n ::part(content)::-webkit-scrollbar-thumb,\n ::-webkit-scrollbar-thumb {\n background-color: var(--sapScrollBar_FaceColor);\n border: 4px solid var(--sapScrollBar_TrackColor);\n border-radius: 8px; \n }\n ::part(content)::-webkit-scrollbar-thumb:hover,\n ::-webkit-scrollbar-thumb:hover {\n border: 2px solid var(--sapScrollBar_TrackColor);\n background-color: var(--sapScrollBar_Hover_FaceColor); \n }\n ::part(content)::-webkit-scrollbar-corner,\n ::-webkit-scrollbar-corner {\n background-color: var(--sapScrollBar_TrackColor);\n }`;\n};\n\nexport default getEffectiveScrollbarStyle;\n"]}

package/dist/web-types.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "description-markup": "markdown",
   "contributions": {
     "html": {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.7.0",
+  "version": "2.7.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/List.hbs CHANGED Viewed

@@ -8,7 +8,7 @@
         <div class="udex-list__scroll-container">
             {{> headerText}}
             <span id="{{_id}}-mode-label" class="udex-list__hidden-text">{{ariaLabelModeText}}</span>
-            <ul
+            <div
                 id="udex-list"
                 class="udex-list"
                 role="{{accessibleRole}}"
@@ -16,13 +16,13 @@
                 aria-label="{{accessibleName}}"
                 aria-busy="{{ariaBusy}}">
                 <slot></slot>
-            </ul>
+            </div>
         </div>
     </div>
 {{/if}}
 {{#if modeSingleContent}}
     {{> headerText}}
-    <ul
+    <div
         id="udex-list"
         class="udex-list"
         role="{{accessibleRole}}"
@@ -30,7 +30,7 @@
         aria-label="{{accessibleName}}"
         aria-busy="{{ariaBusy}}">
         <slot></slot>
-    </ul>
+    </div>
 {{/if}}
 {{#*inline "headerText"}}
     {{#if headerText}}

package/src/ListGroupHeader.hbs CHANGED Viewed

@@ -1,11 +1,13 @@
-<li
+<div
     part="item"
     class="udex-list__group"
     role="group"
     aria-labelledby="group-heading">
-    <ul
-        role="group"
+    <div
+        role="listbox"
         class="udex-list__group-list"
+        name="group"
+        aria-label="group"
         @ui5-item-press="{{getHandleGroupItemsClick}}">
         {{#if modeMultiSelectOrRadioGroup}}
             {{> multi-or-radio-group-header}}
@@ -13,8 +15,8 @@
             {{> single-group-header}}
         {{/if}}
         <slot></slot>
-    </ul>
-</li>
+    </div>
+</div>
 {{#*inline "multi-or-radio-group-header"}}
     {{#if isNonActiveHeader}}

package/src/ListItem.hbs CHANGED Viewed

@@ -1,10 +1,10 @@
 {{#if modeSelected}}
-    <li
+    <div
         part="item"
-        role="{{roleItem}}"
         tabindex="{{_effectiveTabIndex}}"
         aria-disabled="{{_ariaDisabled}}"
         class="{{className}}"
+        role="{{roleItem}}"
         @click="{{handleItemClick}}"
         @mousedown="{{handleMouseDown}}"
         @mouseup="{{handleMouseUp}}"
@@ -12,16 +12,15 @@
         @keydown="{{handleKeyDown}}"
         @focusin="{{handleFocusIn}}"
         @focusout="{{handleFocusOut}}"
-        aria-selected="{{selected}}"
-        aria-current="{{selected}}"
         ?divider="{{divider}}"
-        _id="{{this._id}}">
+        _id="{{this._id}}"
+        data-selected="{{selected}}"
+        aria-describedby="{{itemDescribedBy}}">
         {{#if modeMultiSelect}}
             <udex-checkbox
                 class="udex-list__checkbox"
                 part="checkbox"
                 tabindex="-1"
-                ?aria-checked="{{selected}}"
                 ?indeterminate="{{indeterminate}}"
                 accessible-name="checkbox {{stateAccessibleName}}"
                 ?checked="{{selected}}"
@@ -33,22 +32,23 @@
                 class="udex-list__radio"
                 part="radio"
                 tabindex="-1"
-                ?aria-checked="{{selected}}"
                 accessible-name="radio {{stateAccessibleName}}"
+                ?aria-selected="{{selected}}"
                 ?checked="{{selected}}"
                 ?disabled="{{disabled}}">
             </udex-radio-button>
         {{/if}}
         {{>contentList}}
-    </li>
+    </div>
 {{/if}}
 {{#if modeSingleContent}}
-    <li
+    <div
         part="item"
         role="{{roleItem}}"
+        aria-selected="{{selected}}"
         class="{{className}}">
         {{> contentList}}
-    </li>
+    </div>
 {{/if}}
 {{#*inline "contentList"}}
     <div class="udex-list__content-wrap" _id="{{this._id}}" aria-labelledby="{{this._id}}-invisibleText" aria-label="{{accessibleListItemName}}">
@@ -101,5 +101,6 @@
             {{/if}}
         </div>
       <div class="hidden" id="{{this._id}}-invisibleText">{{accessibleListItemName}}</div>
+      <div class="hidden" id="{{this._id}}-invisibleText-describedby">{{itemState}}</div>
     </div>
 {{/inline}}

package/src/ListItem.ts CHANGED Viewed

@@ -374,6 +374,14 @@ class UDExListItem extends UDExListItemBase {
   get deleteButtonAccessibleName(): string {
     return UDExListItem.i18nBundle.getText(DELETE_BUTTON);
   }
+  get itemDescribedBy(): string {
+    return `${this._id}-invisibleText-describedby`;
+  }
+  get itemState(): string {
+    return this.selected ? "Selected" : "Not selected";
+  }
 }
 UDExListItem.define();

package/src/ListSelectAll.hbs CHANGED Viewed

@@ -1,13 +1,16 @@
-<ul class="udex-list__group-list">
-  <li
-      part="item"
-      class="udex-list__group">
-      <ul
+<div
+    part="item"
+    class="udex-list__group"
+    role="group"
+    aria-labelledby="group-select-all">
+      <div
+          role="listbox"
           class="{{groupListClassName}}"
+          aria-label="select-all-group"
           @ui5-item-press="{{handleSelectAllGroupItemsPress}}">
           <udex-list-item
+              role="group"
               _tab-index="{{_effectiveTabIndex}}"
-              role="listitem"
               _additional-class-name="{{additionalClassName}}"
               class="{{className}}"
               ?selected="{{selected}}"
@@ -19,11 +22,10 @@
               ?controlled="{{controlled}}"
               supporting-text="{{supportingText}}"
               @keydown="{{handleKeyDownPress}}"
-              accessible-role="none"
+              accessible-role="option"
               divider>
               {{selectAllLabel}}
           </udex-list-item>
           <slot></slot>
-      </ul>
-  </li>
-</ul>
+      </div>
+</div>

package/src/MastheadMenu.hbs CHANGED Viewed

@@ -21,17 +21,29 @@
 {{#*inline "header"}}
     <div class="udex-masthead-menu__header">
-        <udex-masthead-menu-item
-            part="menu-item"
-            exportparts="menu-item"
-            id="category-{{categoryId}}"
-            @click="{{../../handleMenuItemClick}}"
-            url="{{this.url}}"
-            label="{{this.category}}"
-            ?icon-end="{{this.url}}"
-            type="Heading"
-            has-border>
-        </udex-masthead-menu-item>
+        {{#if this.url}}
+            <udex-masthead-menu-item
+                id="category-{{categoryId}}"
+                type="Heading"
+                part="menu-item"
+                exportparts="menu-item"
+                accessible-role="link"
+                @click="{{../../handleMenuItemClick}}"
+                url="{{this.url}}"
+                label="{{this.category}}"
+                icon-end
+                has-border>
+            </udex-masthead-menu-item>
+        {{else}}
+            <udex-masthead-menu-item
+                id="category-{{categoryId}}"
+                type="Heading"
+                part="menu-item"
+                exportparts="menu-item"
+                label="{{this.category}}"
+                has-border>
+            </udex-masthead-menu-item>
+        {{/if}}
     </div>
 {{/inline}}
@@ -47,13 +59,14 @@
                 {{else}}
                     <udex-masthead-menu-item
                         part="menu-item"
+                        accessible-role="link"
                         exportparts="menu-item"
+                        exportparts="badge"
                         @click="{{../../../handleMenuItemClick}}"
                         badge="{{this.badge}}"
                         ?external-link="{{this.externalLink}}"
                         url="{{this.url}}"
-                        label="{{this.title}}"
-                        exportparts="badge">
+                        label="{{this.title}}">
                     </udex-masthead-menu-item>
                 {{/if}}
             </li>

package/src/MastheadMobileMenu.hbs CHANGED Viewed

@@ -133,34 +133,61 @@
         </li>
     {{/if}}
     {{#each _categories}}
-        {{#if this.category}}
-            <li class="udex-masthead-mobile-menu__list-item" role="none">
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    @click="{{../handleMenuCategoryClick}}"
-                    id="{{@index}}"
-                    label="{{this.category}}"
-                    aria-has-popup="true"
-                    type="Button"
-                    second-level-btn
-                    second-level
-                    has-border
-                    icon-end>
-                </udex-masthead-menu-item>
-            </li>
-        {{else}}
-            {{#each this.items}}
+        {{#if this.items.length}}
+            {{#if this.category}}
                 <li class="udex-masthead-mobile-menu__list-item" role="none">
                     <udex-masthead-menu-item
                         part="menu-item"
+                        @click="{{../handleMenuCategoryClick}}"
+                        id="{{@index}}"
+                        label="{{this.category}}"
+                        aria-has-popup="true"
+                        type="Button"
+                        second-level-btn
+                        second-level
+                        has-border
+                        icon-end>
+                    </udex-masthead-menu-item>
+                </li>
+            {{else}}
+                {{#each this.items}}
+                    <li class="udex-masthead-mobile-menu__list-item" role="none">
+                        <udex-masthead-menu-item
+                            part="menu-item"
+                            @click="{{../handleMobileItemEvent}}"
+                            url="{{this.url}}"
+                            label="{{this.title}}"
+                            second-level
+                            has-border>
+                        </udex-masthead-menu-item>
+                    </li>
+                {{/each}}
+            {{/if}}
+        {{else}}
+            <li class="udex-masthead-mobile-menu__list-item" role="none">
+                {{#if this.url}}
+                    <udex-masthead-menu-item
+                        id="{{@index}}"
                         @click="{{../handleMobileItemEvent}}"
+                        label="{{this.category}}"
                         url="{{this.url}}"
-                        label="{{this.title}}"
+                        part="menu-item"
+                        type="Link"
                         second-level
                         has-border>
                     </udex-masthead-menu-item>
-                </li>
-            {{/each}}
+                {{else}}
+                    <udex-masthead-menu-item
+                        id="{{@index}}"
+                        @click="{{../handleMobileItemEvent}}"
+                        label="{{this.category}}"
+                        part="menu-item"
+                        type="Button"
+                        second-level
+                        has-border>
+                    </udex-masthead-menu-item>
+                {{/if}}
+              </li>
         {{/if}}
     {{/each}}
 {{/inline}}

package/src/MastheadMobileMenu.ts CHANGED Viewed

@@ -203,6 +203,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   handleRightArrow(e: KeyboardEvent) {
     if (isRight(e)) {
+      e.preventDefault();
       this.handleDirection();
       if (this.isRtlDirection) {
         this.moveToBackWithKeyboard(e);
@@ -214,6 +215,7 @@ class UDExMastheadMobileMenu extends UI5Element {
   handleLeftArrow(e: KeyboardEvent) {
     if (isLeft(e)) {
+      e.preventDefault();
       this.handleDirection();
       if (this.isRtlDirection) {
         this.moveToNextLevelWithKeyboard(e);

package/src/MastheadShell.ts CHANGED Viewed

@@ -738,7 +738,8 @@ class UDExMastheadShell extends UI5Element {
     const itemIconWidths = itemsIcon.length * this.getItemIconWidth();
     const itemIconGaps = itemsIcon.length * this.getItemIconGap();
     const exploreItem = this.exploreSAP[0];
-    const exploreItemIconWidth = exploreItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+    const hasArrowIcon = exploreItem?.hasArrowDown && !exploreItem?.hideArrowIcon;
+    const exploreItemIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
     const exploreSAPWidth = this.hasExploreSAP ? this.getItemWidth(exploreItem) : 0;
     const rightMenuGaps = this.getRightMenuGap() + this.getExploreSapBtnGap() + itemIconGaps;
     return exploreSAPWidth + exploreItemIconWidth + itemIconWidths + rightMenuGaps;
@@ -769,7 +770,8 @@ class UDExMastheadShell extends UI5Element {
     const gapItemVar = this.getRootVar(UDExMastheadVariable.itemGap);
     return mainItems.reduce((accumulatedWidth, item, index) => {
       const mainItem = item as UDExMastheadItem;
-      const arrowIconWidth = mainItem.hasArrowDown ? this.getItemArrowIconWidth() : 0;
+      const hasArrowIcon = mainItem.hasArrowDown && !mainItem.hideArrowIcon;
+      const arrowIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
       return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
     }, 0);
   }

package/src/SearchableListBase.hbs CHANGED Viewed

@@ -46,6 +46,8 @@
                         ?indeterminate="{{this.item.indeterminate}}">
                         {{#each this.groupItems}}
                             <udex-list-item
+                                role="{{../listItemRole}}"
+                                data-role="{{../listItemRole}}"
                                 data-token-id="{{this._id}}"
                                 ?controlled="{{this.controlled}}"
                                 mode="{{this.mode}}"
@@ -53,8 +55,7 @@
                                 ?divider="{{this.divider}}"
                                 ?disabled="{{this.disabled}}"
                                 ?selected="{{this.selected}}"
-                                label="{{this.label}}"
-                                accessible-role="{{../listItemRole}}">
+                                label="{{this.label}}">
                                 {{{this.innerHTML}}}
                             </udex-list-item>
                         {{/each}}
@@ -90,6 +91,7 @@
                 {{/if}}
             {{else}}
                 <udex-list-item
+                    role="none"
                     data-token-id="{{this.item._id}}"
                     supporting-text="{{this.item.supportingText}}"
                     ?disabled="{{this.item.disabled}}"

package/src/generated/templates/ListGroupHeaderTemplate.lit.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type ListGroupHeader from "../../ListGroupHeader.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
-function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" class="udex-list__group" role="group" aria-labelledby="group-heading"><ul role="group" class="udex-list__group-list" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<slot></slot></ul></li> `;}
+function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" class="udex-list__group" role="group" aria-labelledby="group-heading"><div role="listbox" class="udex-list__group-list" name="group" aria-label="group" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<slot></slot></div></div> `;}
 function block1 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block2.call(this, context, tags, suffix) : block4.call(this, context, tags, suffix) }`;}
 function block2 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header id="group-heading" class="udex-list__inactive-header"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block3.call(this, context, tags, suffix) : undefined }</header>`;}
 function block3 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ">${ifDefined(this.supportingText)}</span>`;}

package/src/generated/templates/ListItemTemplate.lit.ts CHANGED Viewed

@@ -6,9 +6,9 @@ import type ListItem from "../../ListItem.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 function block0 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block16.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" aria-selected="${ifDefined(this.selected)}" aria-current="${ifDefined(this.selected)}" ?divider="${this.divider}" _id="${ifDefined(this._id)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block9.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div></div></li>`;}
-function block2 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-checkbox", tags, suffix)} class="udex-list__checkbox" part="checkbox" tabindex="-1" ?aria-checked="${this.selected}" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-checkbox", tags, suffix)}>` : html`<udex-checkbox class="udex-list__checkbox" part="checkbox" tabindex="-1" ?aria-checked="${this.selected}" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-checkbox>`;}
-function block3 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-radio-button", tags, suffix)} class="udex-list__radio" part="radio" tabindex="-1" ?aria-checked="${this.selected}" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-radio-button", tags, suffix)}>` : html`<udex-radio-button class="udex-list__radio" part="radio" tabindex="-1" ?aria-checked="${this.selected}" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
+function block1 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" tabindex="${ifDefined(this._effectiveTabIndex)}" aria-disabled="${ifDefined(this._ariaDisabled)}" class="${ifDefined(this.className)}" role="${ifDefined(this.roleItem)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @keyup="${this.handleKeyUp}" @keydown="${this.handleKeyDown}" @focusin="${this.handleFocusIn}" @focusout="${this.handleFocusOut}" ?divider="${this.divider}" _id="${ifDefined(this._id)}" data-selected="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.itemDescribedBy)}">${ this.modeMultiSelect ? block2.call(this, context, tags, suffix) : undefined }${ this.modeRadioGroup ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block4.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block5.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block6.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block7.call(this, context, tags, suffix) : undefined }${ this.image ? block8.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block9.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
+function block2 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-checkbox", tags, suffix)} class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-checkbox", tags, suffix)}>` : html`<udex-checkbox class="udex-list__checkbox" part="checkbox" tabindex="-1" ?indeterminate="${this.indeterminate}" accessible-name="checkbox ${ifDefined(this.stateAccessibleName)}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-checkbox>`;}
+function block3 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-radio-button", tags, suffix)} class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?aria-selected="${this.selected}" ?checked="${this.selected}" ?disabled="${this.disabled}"></${scopeTag("udex-radio-button", tags, suffix)}>` : html`<udex-radio-button class="udex-list__radio" part="radio" tabindex="-1" accessible-name="radio ${ifDefined(this.stateAccessibleName)}" ?aria-selected="${this.selected}" ?checked="${this.selected}" ?disabled="${this.disabled}"></udex-radio-button>`;}
 function block4 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
 function block5 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
 function block6 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
@@ -21,7 +21,7 @@ function block12 (this: ListItem, context: UI5Element, tags: string[], suffix: s
 function block13 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__add-text" part="additional-text">${ifDefined(this.additionalText)}</div>`;}
 function block14 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="firstIcon"></slot>`;}
 function block15 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="secondIcon"></slot>`;}
-function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<li part="item" role="${ifDefined(this.roleItem)}" class="${ifDefined(this.className)}"><div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block17.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block18.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block19.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block20.call(this, context, tags, suffix) : undefined }${ this.image ? block21.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block22.call(this, context, tags, suffix) : block24.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div></div></li>`;}
+function block16 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" role="${ifDefined(this.roleItem)}" aria-selected="${ifDefined(this.selected)}" class="${ifDefined(this.className)}"><div class="udex-list__content-wrap" _id="${ifDefined(this._id)}" aria-labelledby="${ifDefined(this._id)}-invisibleText" aria-label="${ifDefined(this.accessibleListItemName)}">${ this.flag ? block17.call(this, context, tags, suffix) : undefined }${ this.typeNumber ? block18.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block19.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block20.call(this, context, tags, suffix) : undefined }${ this.image ? block21.call(this, context, tags, suffix) : undefined }<div class="udex-list__content" part="content">${ this.label ? block22.call(this, context, tags, suffix) : block24.call(this, context, tags, suffix) }</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText">${ifDefined(this.accessibleListItemName)}</div><div class="hidden" id="${ifDefined(this._id)}-invisibleText-describedby">${ifDefined(this.itemState)}</div></div></div>`;}
 function block17 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__flag-wrap"><span class="udex-list__flag" style="background-position: ${ifDefined(this.flagPosition)}"></span></div>`;}
 function block18 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
 function block19 (this: ListItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}

package/src/generated/templates/ListSelectAllTemplate.lit.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type ListSelectAll from "../../ListSelectAll.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
-function block0 (this: ListSelectAll, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<ul class="udex-list__group-list"><li part="item" class="udex-list__group"><ul class="${ifDefined(this.groupListClassName)}" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><${scopeTag("udex-list-item", tags, suffix)} _tab-index="${ifDefined(this._effectiveTabIndex)}" role="listitem" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-current="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" accessible-role="none" divider>${ifDefined(this.selectAllLabel)}</${scopeTag("udex-list-item", tags, suffix)}><slot></slot></ul></li></ul>` : html`<ul class="udex-list__group-list"><li part="item" class="udex-list__group"><ul class="${ifDefined(this.groupListClassName)}" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><udex-list-item _tab-index="${ifDefined(this._effectiveTabIndex)}" role="listitem" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-current="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" accessible-role="none" divider>${ifDefined(this.selectAllLabel)}</udex-list-item><slot></slot></ul></li></ul>`;}
+function block0 (this: ListSelectAll, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div part="item" class="udex-list__group" role="group" aria-labelledby="group-select-all"><div role="listbox" class="${ifDefined(this.groupListClassName)}" aria-label="select-all-group" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><${scopeTag("udex-list-item", tags, suffix)} role="group" _tab-index="${ifDefined(this._effectiveTabIndex)}" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-current="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" accessible-role="option" divider>${ifDefined(this.selectAllLabel)}</${scopeTag("udex-list-item", tags, suffix)}><slot></slot></div></div>` : html`<div part="item" class="udex-list__group" role="group" aria-labelledby="group-select-all"><div role="listbox" class="${ifDefined(this.groupListClassName)}" aria-label="select-all-group" @ui5-item-press="${ifDefined(this.handleSelectAllGroupItemsPress)}"><udex-list-item role="group" _tab-index="${ifDefined(this._effectiveTabIndex)}" _additional-class-name="${ifDefined(this.additionalClassName)}" class="${ifDefined(this.className)}" ?selected="${this.selected}" aria-current="${ifDefined(this.selected)}" ?indeterminate="${this.indeterminate}" mode="${ifDefined(this.multiselectMode)}" part="group-item" @click="${this.handleSelectAllPress}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @keydown="${this.handleKeyDownPress}" accessible-role="option" divider>${ifDefined(this.selectAllLabel)}</udex-list-item><slot></slot></div></div>`;}
 function template(this: ListSelectAll) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;

package/src/generated/templates/ListTemplate.lit.ts CHANGED Viewed

@@ -6,9 +6,9 @@ import type List from "../../List.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 function block0 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.modeSelected ? block1.call(this, context, tags, suffix) : undefined }${ this.modeSingleContent ? block3.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list-root" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleItemPress)}" @keydown="${this.handleKeyDown}" style="height: ${ifDefined(this.holderHeight)}"><div class="udex-list__scroll-container">${ this.headerText ? block2.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-mode-label" class="udex-list__hidden-text">${ifDefined(this.ariaLabelModeText)}</span><ul id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}" aria-busy="${ifDefined(this.ariaBusy)}"><slot></slot></ul></div></div>`;}
+function block1 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list-root" @ui5-item-press="${ifDefined(this.handleItemPress)}" @ui5-header-press="${ifDefined(this.handleItemPress)}" @keydown="${this.handleKeyDown}" style="height: ${ifDefined(this.holderHeight)}"><div class="udex-list__scroll-container">${ this.headerText ? block2.call(this, context, tags, suffix) : undefined }<span id="${ifDefined(this._id)}-mode-label" class="udex-list__hidden-text">${ifDefined(this.ariaLabelModeText)}</span><div id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}" aria-busy="${ifDefined(this.ariaBusy)}"><slot></slot></div></div></div>`;}
 function block2 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-list__header-text" part="header" id="${ifDefined(this._id)}-mode-label">${ifDefined(this.headerText)}</header>`;}
-function block3 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.headerText ? block4.call(this, context, tags, suffix) : undefined }<ul id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}" aria-busy="${ifDefined(this.ariaBusy)}"><slot></slot></ul>`;}
+function block3 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.headerText ? block4.call(this, context, tags, suffix) : undefined }<div id="udex-list" class="udex-list" role="${ifDefined(this.accessibleRole)}" aria-labelledby="${ifDefined(this.ariaLabelledBy)}" aria-label="${ifDefined(this.accessibleName)}" aria-busy="${ifDefined(this.ariaBusy)}"><slot></slot></div>`;}
 function block4 (this: List, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header class="udex-list__header-text" part="header" id="${ifDefined(this._id)}-mode-label">${ifDefined(this.headerText)}</header>`;}
 function template(this: List) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }

package/src/generated/templates/MastheadMenuTemplate.lit.ts CHANGED Viewed

@@ -8,11 +8,13 @@ import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 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> `;}
 function block1 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-menu__title">${ifDefined(this.menuTitle)}</div>`;}
 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>`;}
-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) => block5.call(this, context, tags, suffix, item, index)) }</ul></div>`;}
-function block4 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<div class="udex-masthead-menu__header"><${scopeTag("udex-masthead-menu-item", tags, suffix)} part="menu-item" exportparts="menu-item" id="category-${ifDefined(item.categoryId)}" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.category)}" ?icon-end="${item.url}" type="Heading" has-border></${scopeTag("udex-masthead-menu-item", tags, suffix)}></div>` : html`<div class="udex-masthead-menu__header"><udex-masthead-menu-item part="menu-item" exportparts="menu-item" id="category-${ifDefined(item.categoryId)}" @click="${this.handleMenuItemClick}" url="${ifDefined(item.url)}" label="${ifDefined(item.category)}" ?icon-end="${item.url}" type="Heading" has-border></udex-masthead-menu-item></div>`;}
-function block5 (this: MastheadMenu, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return html`<li>${ item.isDivider ? block6.call(this, context, tags, suffix, item, index) : block7.call(this, context, tags, suffix, item, index) }</li>`;}
-function block6 (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>`;}
-function block7 (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" exportparts="menu-item" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" exportparts="badge"></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item part="menu-item" exportparts="menu-item" @click="${this.handleMenuItemClick}" badge="${ifDefined(item.badge)}" ?external-link="${item.externalLink}" url="${ifDefined(item.url)}" label="${ifDefined(item.title)}" exportparts="badge"></udex-masthead-menu-item>`;}
+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>`;}
+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>`;}
+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>`;}
+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>`;}
+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>`;}
+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>`;}
+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>`;}
 function template(this: MastheadMenu) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
 export default template;