@sapudex/web-components 2.57.0 → 2.58.0

package/src/MastheadItem.hbs

@@ -1,136 +0,0 @@
-{{#if hasHref}}
-    <a
-        id="{{this._id}}"
-        class="{{additionalClass}}"
-        tabindex="0"
-        role="{{accessibleRoleName}}"
-        target="{{target}}"
-        href="{{href}}"
-        aria-label="{{accessibleLabel}}"
-        aria-describedby="{{ariaDescribedBy}}"
-        @click="{{handleItemClick}}"
-        @mousedown="{{handleMouseDown}}"
-        @mouseup="{{handleMouseUp}}">
-        {{> content}}
-        {{> badge}}
-    </a>
-    {{#if isTargetBlank}}
-        <span
-            id="new-win-desc"
-            class="udex-masthead-hidden-text">
-            {{openInNewWindowText}}
-        </span>
-    {{/if}}
-{{else if isProfileBtn}}
-    <button
-        id="{{this._id}}"
-        class="udex-masthead-item__btn udex-masthead-item__profile-btn {{additionalClass}}"
-        tabindex="0"
-        aria-expanded="{{buttonAriaExpanded}}"
-        aria-describedby="{{ariaDescribedBy}}"
-        aria-controls="{{this._id}}_dropdown"
-        aria-label="{{accessibleLabel}}"
-        @keydown="{{handleKeyDown}}"
-        @click="{{handleItemClick}}"
-        @click-default="{{handleItemClick}}"
-        @mousedown="{{handleMouseDown}}"
-        @mouseup="{{handleMouseUp}}">
-        {{> content}}
-        {{> badge}}
-    </button>
-    {{> dropdown}}
-{{else}}
-    <button
-        role="{{accessibleRoleName}}"
-        id="{{this._id}}"
-        class="udex-masthead-item__btn {{additionalClass}}"
-        tabindex="0"
-        aria-expanded="{{buttonAriaExpanded}}"
-        aria-controls="{{this._id}}_dropdown"
-        aria-describedby="{{ariaDescribedBy}}"
-        aria-label="{{accessibleLabel}}"
-        @keydown="{{handleKeyDown}}"
-        @mousedown="{{handleMouseDown}}"
-        @mouseup="{{handleMouseUp}}"
-        @click="{{handleItemClick}}">
-        {{> content}}
-        {{> badge}}
-    </button>
-    {{> dropdown}}
-{{/if}}
-
-{{#*inline "content"}}
-    {{#if icon}}
-        <ui5-icon
-            class="udex-masthead-item__icon"
-            name="{{icon}}"
-            show-tooltip="{{iconAltText}}"
-            accessible-name="{{iconAltText}}"
-            mode="Decorative">
-        </ui5-icon>
-    {{else if image}}
-        {{#if imageLoadError}}
-            <ui5-icon
-                class="udex-masthead-item__icon"
-                name="sap-icon://world"
-                mode="Decorative">
-            </ui5-icon>
-        {{else}}
-            <div class="udex-masthead-item__image-wrap">
-                <img
-                    class="udex-masthead-item__image"
-                    id="{{this._id}}_image-alt"
-                    src="{{image}}"
-                    aria-hidden="{{isCountrySelectorBtn}}"
-                    alt="{{imageAlt}}"
-                    @error="{{handleImageError}}"/>
-            </div>
-        {{/if}}
-        {{#if imageAlt}}
-            <span
-                id="image-desc"
-                class="udex-masthead-hidden-text">
-                {{imageAlt}}
-            </span>
-        {{/if}}
-    {{else}}
-        <span class="udex-masthead-item__text">
-            <slot></slot>
-            {{#if hasArrowDown}}
-                 <ui5-icon
-                     class="udex-masthead-item__dropdown-icon"
-                     name="slim-arrow-down"
-                     mode="Decorative">
-                </ui5-icon>
-            {{/if}}
-        </span>
-    {{/if}}
-{{/inline}}
-
-{{#*inline "dropdown"}}
-    {{#if isDropdownOpened}}
-    <div
-        id="{{this._id}}_dropdown"
-        class="udex-masthead-item__dropdown"
-        @keydown="{{handleKeyDown}}"
-        @focusout="{{handleFocusout}}">
-          <div class="udex-masthead-item__dropdown-holder">
-              <slot name="dropdown"></slot>
-          </div>
-    </div>
-    {{else}}
-      <div id="{{this._id}}_dropdown"></div>
-    {{/if}}
-{{/inline}}
-
-{{#*inline "badge"}}
-    {{#if this.numberBadge}}
-        <udex-badge
-            class="udex-masthead-item__badge"
-            type="Number"
-            number-design="Red"
-            size="Small">
-            {{this.numberBadge}}
-        </udex-badge>
-    {{/if}}
-{{/inline}}

package/src/MastheadMenu.hbs

@@ -1,131 +0,0 @@
-<div
-    class="udex-masthead-menu {{oneRowClass}}"
-    part="menu"
-    @keydown="{{handleKeyDown}}">
-    {{#if menuTitle}}
-        <div class="udex-masthead-menu__title">{{menuTitle}}</div>
-    {{/if}}
-    {{#each itemsList}}
-        <div class="udex-masthead-menu__row">
-            {{#each subMenuLinkItems}}
-                <div class="udex-masthead-menu__column" part="column">
-                    {{#if this.category}}
-                        {{> header}}
-                    {{/if}}
-                    {{> list}}
-                </div>
-            {{/each}}
-        </div>
-    {{/each}}
-</div>
-
-{{#*inline "header"}}
-    <div class="udex-masthead-menu__header">
-        {{#if this.url}}
-            {{#if ../_isMobileMode}}
-                <udex-masthead-menu-item
-                    id="category-{{categoryId}}"
-                    type="Heading"
-                    part="menu-item"
-                    exportparts="menu-item"
-                    label="{{this.category}}"
-                    has-border>
-                </udex-masthead-menu-item>
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    accessible-role="link"
-                    exportparts="menu-item"
-                    part="menu-item"
-                    exportparts="menu-item"
-                    label="{{../overviewHeaderLinkText}}"
-                    url="{{this.url}}"
-                    has-border>
-                </udex-masthead-menu-item>
-            {{else}}
-                <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>
-            {{/if}}
-        {{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}}
-
-{{#*inline "list"}}
-    <ul
-        class="udex-masthead-menu__list"
-        aria-labelledby="category-{{categoryId}}"
-        category="{{this.category}}">
-        {{#each this.items}}
-            <li>
-                {{#if this.isDivider}}
-                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
-                {{else if this.subItems}}
-                    {{#if this.url}}
-                        <udex-masthead-menu-item
-                            part="menu-item"
-                            accessible-role="link"
-                            exportparts="menu-item"
-                            @click="{{../../../handleMenuItemClick}}"
-                            url="{{this.url}}"
-                            label="{{this.title}}"
-                            class="udex-masthead-menu__sub-category">
-                        </udex-masthead-menu-item>
-                    {{else}}
-                        <span class="udex-masthead-menu__sub-category">{{this.title}}</span>
-                    {{/if}}
-                    <ul class="udex-masthead-menu__sub-list" aria-label="{{this.title}}">
-                        {{#each this.subItems}}
-                            <li>
-                                {{#if this.isDivider}}
-                                    <udex-divider class="udex-masthead-menu__item-divider"></udex-divider>
-                                {{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}}">
-                                    </udex-masthead-menu-item>
-                                {{/if}}
-                            </li>
-                        {{/each}}
-                    </ul>
-                {{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}}">
-                    </udex-masthead-menu-item>
-                {{/if}}
-            </li>
-        {{/each}}
-    </ul>
-{{/inline}}

package/src/MastheadMenuItem.hbs

@@ -1,102 +0,0 @@
-{{#if isActive}}
-    <a
-        class="udex-masthead-menu-item {{rootClass}}"
-        aria-describedby="{{ariaDescribedby}}"
-        role="{{accessibleRoleText}}"
-        href="{{url}}"
-        part="{{partAttr}}"
-        target="{{targetLink}}"
-        tabindex="{{_tabIndex}}">
-        {{#if iconStart}}
-            {{>arrow-left}}
-        {{/if}}
-        <span class="{{labelClass}}">
-           {{>label}}
-        </span>
-        {{#if iconEnd}}
-            {{>arrow-right}}
-        {{/if}}
-    </a>
-    {{#if externalLink}}
-        <span
-            id="new-win-desc"
-            class="udex-masthead-hidden-text">
-            {{openInNewWindowText}}
-        </span>
-    {{/if}}
-    {{#if badge}}
-        <udex-badge
-            part="badge"
-            class="udex-masthead-menu-item-badge"
-            type="Number"
-            number-design="Blue"
-            size="Small">
-            {{badge}}
-        </udex-badge>
-    {{/if}}
-{{else}}
-    {{#if isButtonType}}
-        <button
-            _id="{{id}}"
-            aria-label="{{_accessibleName}}"
-            class="udex-masthead-menu-item {{rootClass}}"
-            part="menu-item-button"
-            aria-haspopup="{{ariaHasPopup}}"
-            role="{{accessibleRoleText}}"
-            tabindex="{{_tabIndex}}">
-            {{#if iconStart}}
-                {{>arrow-left}}
-            {{/if}}
-            {{label}}
-            {{#if iconEnd}}
-                {{>arrow-right}}
-            {{/if}}
-        </button>
-    {{else}}
-        <span
-            class="udex-masthead-menu-item {{rootClass}}"
-            part="menu-item">
-            {{#if iconStart}}
-                {{>arrow-left}}
-            {{/if}}
-            {{label}}
-            {{#if iconEnd}}
-                {{>arrow-right}}
-            {{/if}}
-        </span>
-    {{/if}}
-{{/if}}
-
-{{#*inline "label"}}
-    {{#if externalLink}}
-        {{leadingWordsOfLabel}}
-        <span class="udex-masthead-menu-item__text-with-icon">
-            {{lastWordOfLabel}}
-            <ui5-icon
-                class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-action"
-                name="action"
-                mode="Decorative">
-            </ui5-icon>
-        </span>
-    {{else}}
-        <span>{{label}}</span>
-    {{/if}}
-{{/inline}}
-
-{{#*inline "arrow-left"}}
-    <ui5-icon
-        class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-left"
-        name="slim-arrow-left"
-        part="left"
-        mode="Decorative">
-    </ui5-icon>
-{{/inline}}
-
-{{#*inline "arrow-right"}}
-    <ui5-icon
-        class="udex-masthead-menu-item__icon udex-masthead-menu-item_icon-right"
-        name="slim-arrow-right"
-        part="right"
-        mode="Decorative">
-    </ui5-icon>
-{{/inline}}

package/src/MastheadMobileMenu.hbs

@@ -1,253 +0,0 @@
-<nav class="udex-masthead-mobile-menu">
-    <div class="udex-masthead-mobile-menu__nav-holder">
-        {{#if hasSearchSlot}}
-            <div class="udex-masthead-mobile-menu__list-search">
-                <slot name="search"></slot>
-            </div>
-        {{/if}}
-        <ul class="udex-masthead-mobile-menu__list" role="menu" @keydown="{{handlePressKey}}">
-            {{#if showNavigation}}
-                {{>nav-items}}
-            {{/if}}
-            {{#if _showCategories}}
-                <li class="udex-masthead-mobile-menu__list-item" role="none">
-                    {{#if _hideExploreSapBtn}}
-                        <udex-masthead-menu-item
-                            part="menu-item"
-                            class="udex-masthead-mobile-menu__back-item"
-                            @click="{{handleExploreBackToMenuItems}}"
-                            label="{{_clickedItem.innerText}}"
-                            type="Button"
-                            is-back
-                            has-border
-                            icon-start
-                            is-explore-back>
-                        </udex-masthead-menu-item>
-                    {{else}}
-                        {{#if isNotMultipleMode}}
-                            <udex-masthead-menu-item
-                                part="menu-item"
-                                class="udex-masthead-mobile-menu__heading"
-                                label="{{_clickedItem.innerText}}"
-                                type="Heading"
-                                has-border>
-                            </udex-masthead-menu-item>
-                        {{else}}
-                            <udex-masthead-menu-item
-                                part="menu-item"
-                                class="udex-masthead-mobile-menu__back-item"
-                                @click="{{handleBackToMenuItems}}"
-                                label="{{_clickedItem.innerText}}"
-                                aria-haspopup="true"
-                                type="Button"
-                                is-back
-                                has-border
-                                icon-start
-                                is-back-to-nav>
-                            </udex-masthead-menu-item>
-                        {{/if}}
-                    {{/if}}
-                </li>
-                {{>categories}}
-            {{/if}}
-            {{#if _showCategoryItems}}
-                <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="{{handleBackToCategories}}"
-                        label="{{_category.category}}"
-                        type="Button"
-                        aria-haspopup="true"
-                        has-border
-                        icon-start
-                        is-back
-                        is-back-to-categories>
-                    </udex-masthead-menu-item>
-                </li>
-                {{>category-items}}
-            {{/if}}
-        </ul>
-    </div>
-    {{#if showExploreBtn}}
-        <udex-masthead-menu-item
-            part="menu-item"
-            class="udex-masthead-mobile-menu__explore-btn"
-            id="{{exploreItem._id}}"
-            @click="{{handleExploreSapClick}}"
-            accessible-role-text="button"
-            aria-haspopup="true"
-            type="Button"
-            first-level-btn
-            first-level
-            icon-end
-            is-explore
-            label="{{exploreItem.innerText}}">
-        </udex-masthead-menu-item>
-    {{/if}}
-</nav>
-
-{{#*inline "nav-items"}}
-    {{#each items}}
-        <li class="udex-masthead-mobile-menu__list-item" role="none">
-            {{#if this.subItems}}
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    @click="{{../handleMenuItemClick}}"
-                    label="{{this.innerText}}"
-                    aria-haspopup="true"
-                    id="{{this._id}}"
-                    type="Button"
-                    first-level-btn
-                    first-level
-                    has-border
-                    icon-end>
-                </udex-masthead-menu-item>
-            {{else}}
-                <udex-masthead-menu-item
-                    part="menu-item"
-                    @click="{{../handleMobileItemEvent}}"
-                    url="{{this.href}}"
-                    label="{{this.innerText}}"
-                    target="{{this.target}}"
-                    first-level
-                    has-border>
-                </udex-masthead-menu-item>
-            {{/if}}
-        </li>
-    {{/each}}
-{{/inline}}
-
-{{#*inline "categories"}}
-    {{#if _clickedItem.href}}
-        <li class="udex-masthead-mobile-menu__list-item" role="none">
-            <udex-masthead-menu-item
-                part="menu-item"
-                url="{{_clickedItem.href}}"
-                label="{{overviewLinkText}}"
-                @click="{{handleMobileItemEvent}}"
-                second-level
-                has-border>
-            </udex-masthead-menu-item>
-        </li>
-    {{/if}}
-    {{#each _categories}}
-        {{#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-haspopup="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}}"
-                        part="menu-item"
-                        type="Link"
-                        second-level
-                        has-border>
-                    </udex-masthead-menu-item>
-                {{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}}
-
-{{#*inline "category-items"}}
-    {{#if _category.url}}
-        <li class="udex-masthead-mobile-menu__list-item" role="none">
-            <udex-masthead-menu-item
-                part="menu-item"
-                @click="{{../handleMobileCategoryItemEvent}}"
-                url="{{this._category.url}}"
-                label="{{overviewLinkText}}"
-                third-level
-                has-border>
-            </udex-masthead-menu-item>
-        </li>
-    {{/if}}
-    {{#each _category.items}}
-        {{#if this.subItems}}
-            <li class="udex-masthead-mobile-menu__list-item" role="none">
-                {{#if this.url}}
-                    <udex-masthead-menu-item
-                        part="menu-item"
-                        @click="{{../handleMobileCategoryItemEvent}}"
-                        label="{{this.title}}"
-                        url="{{this.url}}"
-                        class="udex-masthead-mobile-menu__sub-category"
-                        third-level>
-                    </udex-masthead-menu-item>
-                {{else}}
-                    <span class="udex-masthead-mobile-menu__sub-category">{{this.title}}</span>
-                {{/if}}
-                <ul class="udex-masthead-mobile-menu__sub-list" aria-label="{{this.title}}">
-                    {{#each this.subItems}}
-                        {{#if this.url}}
-                            <li class="udex-masthead-mobile-menu__list-item" role="none">
-                                <udex-masthead-menu-item
-                                    part="menu-item"
-                                    @click="{{../../handleMobileCategoryItemEvent}}"
-                                    label="{{this.title}}"
-                                    url="{{this.url}}"
-                                    third-level>
-                                </udex-masthead-menu-item>
-                            </li>
-                        {{/if}}
-                    {{/each}}
-                </ul>
-            </li>
-        {{else}}
-            {{#if this.url}}
-                <li class="udex-masthead-mobile-menu__list-item" role="none">
-                    <udex-masthead-menu-item
-                        part="menu-item"
-                        @click="{{../handleMobileCategoryItemEvent}}"
-                        label="{{this.title}}"
-                        url="{{this.url}}"
-                        has-border
-                        third-level>
-                    </udex-masthead-menu-item>
-                </li>
-            {{/if}}
-        {{/if}}
-    {{/each}}
-{{/inline}}