@sapudex/web-components 2.57.0 → 2.59.0

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}}

package/src/MastheadProfileMenu.hbs

@@ -1,121 +0,0 @@
-<div
-  @keydown="{{handleKeydown}}"
-  class="{{rootClass}}">
-  {{#if _openIdentities}}
-    {{> account-indetities}}
-  {{else}}
-    {{> account-profile}}
-  {{/if}}
-</div>
-
-{{#*inline "account-profile"}}
-    {{#if hasUserData}}
-      <div class="udex-masthead-profile-menu__header">
-          <udex-avatar
-            aria-hidden="true"
-            size="L"
-            initials="{{userData.avatarInitials}}"
-            fallback-icon="{{userData.fallbackIcon}}">
-            {{#if userData.avatarUrl}}
-              <img src="{{userData.avatarUrl}}" alt="avatar"/>
-            {{/if}}
-          </udex-avatar>
-          <div>
-            <p class="udex-profile-menu__account-name">{{userData.name}}</p>
-            <p class="udex-profile-menu__account-email">{{userData.email}}</p>
-            {{#if hasIdentities}}
-              <udex-button
-                @click="{{handleSwitcherClick}}"
-                class="udex-masthead-profile-menu__btn-switcher"
-                size="Large"
-                end-icon="slim-arrow-right"
-                design="Invisible">
-                {{switcherAccountText}}
-              </udex-button>
-            {{/if}}
-          </div>
-      </div>
-    {{/if}}
-  {{#if messageAvailable}}
-    <div class="udex-masthead-profile-menu__message">
-      <slot name="message"></slot>
-    </div>
-  {{/if}}
-  <div class="udex-masthead-profile-menu__content">
-      <div
-          class="udex-masthead-profile-menu__links"
-          @scroll="{{handleProfileMenuShadowVisible}}">
-          <udex-masthead-menu
-            exportparts="badge, menu-item"
-            part="menu"
-            sub-items='{{linksList}}'
-            @ui5-menu-item-click="{{handleProfileMenuItemClick}}"
-            _scroll-into-view="Center">
-          </udex-masthead-menu>
-      </div>
-  </div>
-  {{#if hasActionButton}}
-      <div class="udex-masthead-profile-menu__actions">
-          {{#if hasLogoutButton}}
-              <div class="udex-masthead-profile-menu__btn">
-                <slot name="logoutButton"></slot>
-              </div>
-          {{else}}
-              <udex-link
-                  @click="{{handleUserLogoutClick}}"
-                  end-icon="action"
-                  design="Default"
-                  accessible-role="Link"
-                  href="{{logoutUrl}}">
-                  {{logoutText}}
-              </udex-link>
-          {{/if}}
-      </div>
-  {{/if}}
-{{/inline}}
- 
-{{#*inline "account-indetities"}}
-  <div class="udex-masthead-profile-menu__header-wrap back-btn">
-    <udex-masthead-menu-item
-      class="udex-masthead-profile-menu__btn-back"
-      @click="{{handleSwitcherClick}}"
-      label="{{btnBackText}}"
-      type="Button"
-      icon-start>
-    </udex-masthead-menu-item>
-    <span class="udex-masthead-profile-menu__switcher-title">{{switcherAccountText}}</span>
-  </div>
-  <span class="udex-masthead-profile-menu__identities-list-title">{{listTitleText}}</span>
-  <div class="udex-masthead-profile-menu__identities-list-wrap">
-    {{#if identitiesList.length}}
-      <udex-list
-        class="udex-masthead-profile-menu__identities-list"
-        mode="SingleSelect"
-        accessible-name="{{listTitleText}}"
-        @scroll="{{handleIdentitiesListShadowVisible}}"
-        _scroll-into-view="Center"
-        controlled>
-        {{#each identitiesList}}
-          <udex-list-item
-            id="{{this.idsUser}}"
-            class="udex-masthead-profile-menu__identities-list-item"
-            @ui5-item-press="{{../fireEventIdentityItemClick}}"
-            supporting-text="{{this.supportingText}}"
-            image-badge-state="{{this.statusBadge}}"
-            image="{{this.avatarUrl}}"
-            image-alt="{{this.name}}">
-            {{this.email}}
-          </udex-list-item>
-        {{/each}}
-      </udex-list>
-    {{/if}}
-  </div>
-  <udex-button
-    @click="{{fireEventAddOrRemoveAccountClick}}"
-    class="udex-masthead-profile-menu__add-remove-btn"
-    design="Primary"
-    end-icon="action"
-    size="Large">
-    {{addOrRemoveAccountText}}
-  </udex-button>
-{{/inline}}

package/src/MastheadShell.hbs

@@ -1,223 +0,0 @@
-<header
-    class="{{mainClass}}"
-    @keydown="{{handleKeyDown}}">
-    <div class="udex-masthead-shell__main-content">
-        <div class="udex-masthead-shell__landing-wrap">
-            {{#if logoUrl}}
-                {{>logo}}
-            {{/if}}
-
-            {{#if siteLabel}}
-                {{>siteLabel}}
-            {{/if}}
-
-            {{#if coBrandImage}}
-                {{>coBrand}}
-            {{/if}}
-        </div>
-
-        {{#if isMainMenuVisible}}
-            <nav
-                class="udex-masthead-shell__nav"
-                aria-label="{{mainNavigationAriaLabel}}">
-                <ul
-                    class="udex-masthead-shell__main-menu"
-                    aria-label="{{mainNavigationAriaLabel}}">
-                    {{#each menuItems}}
-                        {{>item}}
-                    {{/each}}
-                </ul>
-            </nav>
-        {{/if}}
-    </div>
-
-    {{#if isSearchVisible}}
-        <div
-            class="udex-masthead-shell__search-container"
-            @ui5-search-keydown="{{handleSearchKeyDown}}">
-            <slot name="search"></slot>
-        </div>
-        {{#if _isSearchOpened}}
-            <div class="udex-masthead-shell__btn-holder">
-                <udex-control-button
-                    class="udex-masthead-shell__close-search-btn"
-                    size="Small"
-                    icon="decline"
-                    part="search-close-button"
-                    tooltip="{{closeButtonAccessibleName}}"
-                    accessible-name="{{closeButtonAccessibleName}}"
-                    @click="{{handleCloseSearch}}">
-                </udex-control-button>
-            </div>
-        {{/if}}
-    {{/if}}
-
-    <div class="{{rightMenuClass}}">
-        {{#if hasExploreSAP}}
-            <div
-                class="udex-masthead-shell__explore"
-                @ui5-item-click="{{setSelectedItem}}">
-                <slot name="exploreSAP"></slot>
-            </div>
-        {{/if}}
-        {{#if hasSearch}}
-            <div class="udex-masthead-shell__search-icon udex-masthead-shell__item_icon">
-                <udex-masthead-item
-                    class="udex-masthead-shell__search-btn"
-                    icon="search"
-                    part="search-button"
-                    @click="{{handleSearchClick}}"
-                    accessible-name="{{openSearchButtonAccessibleNameText}}"
-                    icon-alt="{{openSearchButtonAccessibleNameText}}">
-                </udex-masthead-item>
-            </div>
-        {{/if}}
-        {{#if hasJoule}}
-            <div
-                class="udex-masthead-shell__joule udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleJouleClick}}">
-                <slot name="joule"></slot>
-            </div>
-        {{/if}}
-        {{#if hasCart}}
-            <div
-                class="udex-masthead-shell__cart udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCartClick}}">
-                <slot name="cart"></slot>
-            </div>
-        {{/if}}
-        {{#if hasSupport}}
-            <div
-                class="udex-masthead-shell__support udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleSupportClick}}">
-                <slot name="support"></slot>
-            </div>
-        {{/if}}
-        {{#if hasProfile}}
-            <div
-                class="udex-masthead-shell__profile udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click-default="{{handleProfileClick}}">
-                <slot name="profile"></slot>
-            </div>
-        {{/if}}
-        {{#if hasCountrySelector}}
-            <div
-                class="udex-masthead-shell__country-selector udex-masthead-shell__item_icon"
-                @ui5-item-click="{{setSelectedItem}}"
-                @click="{{handleCountrySelectorClick}}">
-                <slot name="countrySelector"></slot>
-            </div>
-        {{/if}}
-        {{#if hasMobileMenuButtons}}
-            <udex-masthead-item
-                @ui5-item-click="{{handleOpenMobileMenu}}"
-                class="udex-masthead-shell__menu-btn"
-                accessible-role="button"
-                icon="menu2"
-                part="menu-open-btn"
-                accessible-name="menu"
-                _is-menu-open-btn>
-                <slot slot="dropdown" name="mobileMenu"></slot>
-            </udex-masthead-item>
-            <udex-masthead-item
-                @keydown="{{handleEnterAndSpaceOnCloseBtn}}"
-                @ui5-item-click="{{closeMobileMenu}}"
-                class="udex-masthead-shell__close-btn"
-                accessible-role="button"
-                icon="decline"
-                accessible-name="{{mobileCloseButtonAccessibleName}}"
-                part="menu-close-btn"
-                hide-active-border
-                _is-menu-close-btn>
-            </udex-masthead-item>
-        {{/if}}
-    </div>
-</header>
-
-{{#*inline "item"}}
-    <li
-        class="udex-masthead-shell__item"
-        @ui5-item-click="{{../setSelectedItem}}">
-        <slot name="{{_individualSlot}}"></slot>
-    </li>
-{{/inline}}
-
-{{#*inline "logo"}}
-    {{#if homeUrl}}
-        <a
-            @click="{{handleLogoClick}}"
-            role="link"
-            href="{{homeUrl}}"
-            tabindex="0"
-            title="{{logoTitle}}"
-            target="_self"
-            aria-label="{{homepageAriaLabel}}"
-            class="udex-masthead-shell__logo udex-masthead-shell__logo--link">
-            <img
-                src="{{logoUrl}}"
-                class="udex-masthead-shell__logo-image"
-                alt="{{logoAlt}}"
-            />
-        </a>
-    {{else}}
-        <div class="udex-masthead-shell__logo">
-            <img
-                src="{{logoUrl}}"
-                class="udex-masthead-shell__logo-image"
-                alt="{{logoAlt}}"
-            />
-        </div>
-    {{/if}}
-{{/inline}}
-
-{{#*inline "siteLabel"}}
-    {{#if siteLabelUrl}}
-        <a
-            @click="{{handleSiteLabelClick}}"
-            role="link"
-            href="{{siteLabelUrl}}"
-            tabindex="0"
-            title="{{siteLabelTitle}}"
-            target="_self"
-            aria-label="{{siteLabelAriaLabel}}"
-            class="udex-masthead-shell__site-label udex-masthead-shell__site-label--link">
-            {{siteLabel}}
-        </a>
-    {{else}}
-        <div class="udex-masthead-shell__site-label">{{siteLabel}}</div>
-    {{/if}}
-{{/inline}}
-
-{{#*inline "coBrand"}}
-    {{#if coBrandUrl}}
-        <div class="udex-masthead-shell__co-brand">
-            <a
-                class="udex-masthead-shell__co-brand-link"
-                @click="{{handleCoBrandClick}}"
-                href="{{coBrandUrl}}"
-                tabindex="0"
-                title="{{coBrandTitle}}"
-                aria-label="{{coBrandAriaLabel}}"
-                target="_self"
-                role="link">
-                <img
-                    class="udex-masthead-shell__co-brand-image"
-                    src="{{coBrandImage}}"
-                    alt="{{coBrandAlt}}"
-                />
-            </a>
-        </div>
-    {{else}}
-        <div class="udex-masthead-shell__co-brand">
-            <img
-                class="udex-masthead-shell__co-brand-image"
-                src="{{coBrandImage}}"
-                alt="{{coBrandAlt}}"
-            />
-        </div>
-    {{/if}}
-{{/inline}}

package/src/SecondaryNavigation.hbs

@@ -1,87 +0,0 @@
-<div class="{{rootClass}}">
-    {{#if hasBreadcrumbsSlot}}
-        <div class="udex-secondary-navigation__breadcrumbs">
-            <slot name="breadcrumbs"></slot>
-        </div>
-    {{/if}}
-    <div class="udex-secondary-navigation__holder">
-        {{#if heading.length}}
-            <div class="udex-secondary-navigation__heading">
-                {{#if headingHref.length}}
-                    <a
-                        class="udex-secondary-navigation__title"
-                        tabindex="0"
-                        @click="{{handleHeadingClick}}"
-                        href="{{headingHref}}">
-                        {{heading}}
-                    </a>
-                {{else}}
-                    <span class="udex-secondary-navigation__title">{{heading}}</span>
-                {{/if}}
-            </div>
-        {{/if}}
-        <nav class="udex-secondary-navigation__wrap">
-            <ul
-                class="udex-secondary-navigation__list"
-                @keydown="{{handleKeyDown}}">
-                {{#each visibleItems}}
-                    <li
-                        class="udex-secondary-navigation__list-item">
-                        <udex-secondary-navigation-item
-                            index="{{@index}}"
-                            ?active="{{this.active}}"
-                            path="{{this.path}}"
-                            label="{{this.title}}"
-                            mobile-link-title="{{this.mobileLinkTitle}}"
-                            target="{{this.target}}"
-                            .subItems="{{this.items}}"
-                            _nav-items-length="{{../visibleItems.length}}"
-                            @ui5-sub-item-click="{{../handleSubItemClick}}"
-                            @ui5-nav-item-click="{{../handleItemClick}}">
-                        </udex-secondary-navigation-item>
-                    </li>
-                {{/each}}
-                {{#if _showMoreButton}}
-                    <li
-                        class="udex-secondary-navigation__list-item">
-                        <udex-secondary-navigation-item
-                            _nav-items-length="{{visibleItems.length}}"
-                            index="{{visibleItems.length}}"
-                            @ui5-sub-item-click="{{../handleSubItemClick}}"
-                            @ui5-nav-item-click="{{../handleItemClick}}"
-                            label="{{this.moreButtonText}}"
-                            .subItems="{{this._overflowItems}}">
-                        </udex-secondary-navigation-item>
-                    </li>
-                {{/if}}
-            </ul>
-            {{#if hasDesktopButtonsSlot}}
-                {{>buttons}}
-            {{/if}}
-        </nav>
-    </div>
-    <udex-secondary-navigation-item
-        @keydown="{{handleKeyDown}}"
-        _max-height="{{maxDropdownHeight}}"
-        class="udex-secondary-navigation__mobile-nav"
-        role="button"
-        aria-label="{{mobileMenuOpenerAriaLabel}}"
-        label="{{heading}}"
-        mobile-link-title="{{title}}"
-        @ui5-nav-item-click="{{handleMobileMenuOpenerClick}}"
-        @ui5-sub-item-click="{{handleSubItemClick}}"
-        _is-mobile-menu-opener
-        .subItems="{{this.parsedItems}}">
-        {{#if hasMobileButtonsSlot}}
-            <div class="udex-secondary-navigation__buttons" @click="{{handleMobileButtonsClick}}">
-                <slot name="buttons"></slot>
-            </div>
-        {{/if}}
-    </udex-secondary-navigation-item>
-</div>
-
-{{#*inline "buttons"}}
-    <div class="udex-secondary-navigation__buttons">
-        <slot name="buttons"></slot>
-    </div>
-{{/inline}}