@sapudex/web-components 2.32.0 → 2.33.0

package/src/themes/HeroBanner.css

@@ -8,9 +8,11 @@
   --udexHeroBannerBackroundVideoZIndex: 1;
   --udexHeroBannerContentZIndex: 2;
   --udexHeroBannerContentPaddingHorizontal: var(--udexGridXSMargins, 24px);
-  --udexHeroBannerContentPaddingVertical: var(--udexGridXSMargins, 24px);
+  --udexHeroBannerContentPaddingVertical: 40px;
   --udexHeroBannerContentPaddingVerticalXLtoM: var(--udexSpacer56, 56px);
   --udexHeroBannerPaddingHorizontalLandM: var(--udexSpacer72);
+  --udexHeroBannerPaddingVerticalBottomS: var(--udexSpacer48);
+  --udexHeroBannerPaddingVerticalBottomXS: var(--udexSpacer48);
   --udexHeroBannerPaddingHorizontalS: var(--udexSpacer48);
   --udexHeroBannerPaddingHorizontalXS: var(--udexSpacer24);
   --udexHeroBannerBackgroundVideoColor: trasparent;
@@ -58,41 +60,20 @@
   padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexSpacer84);
   height: 100%;
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
 
 .udex-hero-banner__background-video-wrapper .udex-hero-banner__background-image {
   display: none;
 }
 
-.udex-hero-banner__media-button:dir(rtl) {
-  left: 0;
-  right: initial;
-}
-
-.udex-hero-banner__media-button:hover {
-  cursor: pointer;
-  background: var(--udexColorNeutralBlack70);
-}
-
-.udex-hero-banner__media-button ui5-icon {
-  color: var(--udexColorNeutralWhite);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.5rem;
-  width: 1.5rem;
-}
 .udex-hero-banner__background-image:dir(rtl),
 .udex-hero-banner__background-video-overlay:dir(rtl) {
   transform: scaleX(-1);
 }
 
-.udex-hero-banner__background-video,
-.udex-hero-banner__background-video-overlay,
-.udex-hero-banner__media-button {
-  display: none;
-}
-
 #udex-hero-banner__content,
 #udex-hero-banner__additionalContent {
   position: relative;
@@ -115,6 +96,77 @@
   height: var(--udexHeroBannerHeight, auto);
 }
 
+.udex-hero-banner--video {
+  height: 28.125rem; /* 450px */
+}
+
+.udex-hero-banner__media-button {
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  padding: 0;
+  width: 3rem;
+  height: 3rem;
+  position: absolute;
+  bottom: var(--udexSpacer48);
+  right: var(--udexSpacer84);
+  z-index: 3;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.udex-hero-banner__media-button:before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--udexColorNeutralBlack);
+  opacity: 0.8;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.udex-hero-banner__media-button:dir(rtl) {
+  left: var(--udexSpacer84);
+  right: auto;
+}
+
+.udex-hero-banner__media-button:hover [ui5-icon] {
+  color: var(--udexColorGrey4);
+}
+
+.udex-hero-banner__media-button [ui5-icon] {
+  color: var(--udexColorNeutralWhite);
+  height: 100%;
+  width: 100%;
+}
+
+.udex-hero-banner__background-video {
+  position: absolute;
+  display: block;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.udex-hero-banner__background-video-overlay {
+  position: absolute;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, rgba(18, 23, 28, 0.765) 0%, rgba(18, 23, 28, 0.09) 100%);
+  top: 0;
+  left: 0;
+}
+
+.udex-hero-banner__background-image {
+  object-position: var(--udexHeroBannerHorizontalLayoutBackgroundImageAlignment, top right);
+}
+
 @media (max-width: 1599px) {
   .udex-hero-banner__container {
     padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM);
@@ -124,9 +176,23 @@
   .udex-hero-banner__background-video-wrapper {
     padding: var(--udexHeroBannerContentPaddingVerticalXLtoM) var(--udexHeroBannerPaddingHorizontalLandM);
   }
+
+  .udex-hero-banner__media-button {
+    right: var(--udexSpacer72);
+  }
+
+  .udex-hero-banner__media-button:dir(rtl) {
+    left: var(--udexSpacer72);
+  }
 }
 
 @media (max-width: 979px) {
+  .udex-hero-banner__background-video,
+  .udex-hero-banner__background-video-overlay,
+  .udex-hero-banner__media-button {
+    display: none;
+  }
+
   .udex-hero-banner__container {
     padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS);
     max-width: 100%;
@@ -139,7 +205,7 @@
   }
 
   .udex-hero-banner__background-video-wrapper {
-    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS);
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalS) var(--udexHeroBannerPaddingVerticalBottomS);
     background-color: var(--udexHeroBannerBackgroundVideoColor);
   }
 
@@ -161,59 +227,10 @@
   }
 
   .udex-hero-banner__background-video-wrapper {
-    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS);
+    padding: var(--udexHeroBannerContentPaddingVertical) var(--udexHeroBannerPaddingHorizontalXS) var(--udexHeroBannerPaddingVerticalBottomXS);
   }
 
   .udex-hero-banner__background-video-wrapper .udex-hero-banner__background-image {
     display: none;
   }
 }
-
-@media (min-width: 980px) {
-  .udex-hero-banner--video {
-    height: 28.125rem; /* 450px */
-  }
-
-  .udex-hero-banner__media-button {
-    border: 3px solid var(--udexColorNeutralWhite);
-    color: var(--udexColorNeutralWhite);
-    background: var(--udexColorNeutralBlack40);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    padding: 0;
-    width: 3rem;
-    height: 3rem;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    margin: var(--udexHeroBannerContentPaddingHorizontal);
-    z-index: 3;
-  }
-
-  .udex-hero-banner__background-video {
-    position: absolute;
-    display: block;
-    width: 100%;
-    object-fit: cover;
-    object-position: center;
-    height: 100%;
-    top: 0;
-    left: 0;
-  }
-
-  .udex-hero-banner__background-video-overlay {
-    position: absolute;
-    display: block;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, rgba(18, 23, 28, 0.765) 0%, rgba(18, 23, 28, 0.09) 100%);
-    top: 0;
-    left: 0;
-  }
-
-  .udex-hero-banner__background-image {
-    object-position: var(--udexHeroBannerHorizontalLayoutBackgroundImageAlignment, top right);
-  }
-}

package/src/themes/ListItem.css

@@ -159,7 +159,7 @@
 
 :host::part(additional-text) {
   margin-inline-start: 0;
-  margin-inline-end: var(--udexSpacer8, 8px);
+  margin-inline-end: var(--udexSpacer12, 12px);
 }
 
 :host([mode="SingleContent"])::part(button) {
@@ -206,6 +206,11 @@
   width: 100%;
 }
 
+.udex-list__btn-wrap {
+  display: flex;
+  gap: var(--udexSpacer8, 8px);
+}
+
 .udex-list__number {
   margin-inline-end: var(--udexSpacer8, 8px);
 }

package/src/themes/Modal.css

@@ -52,7 +52,8 @@
 
 @media (max-width: 979px) {
   :host(:not([type="basic"])) {
-    max-width: 100%;
-    max-height: 100%;
+    min-width: 100%;
+    min-height: 100%;
+    --udex-modal-border-radius: 0;
   }
 }

package/src/themes/SecondaryNavigationItem.css

@@ -190,7 +190,6 @@
     display: none;
   }
 
-
   :host([desktop]) .udex-secondary-navigation__item:focus {
     outline: none;
   }
@@ -226,6 +225,10 @@
   .udex-secondary-navigation__item:hover {
     color: var(--udex-secondary-navigation-item-color);
   }
+
+  .udex-secondary-navigation__dropdown-list {
+    padding: var(--udexSpacer16) 0;
+  }
 }
 
 @media (max-width: 639px) {

package/src/themes/TabNavigation.css

@@ -11,19 +11,20 @@
   --udex-button-tab-font-size-default: var(--sapFontSize, var(--udexTypographyNavigationBoldXLFontSize));
   --udex-button-tab-font-family: var(--sapFontFamily, sans-serif);
   --udex-button-tab-font-weight: var(--sapButton_Emphasized_FontWeight, var(--udexTypographyFontWeightBold));
-  --udex-button-tab-line-height: 1.125;
+  --udex-button-tab-line-height: 1.1;
   --udex-button-tab-padding-vertical: var(--udexSpacer12, 12px);
   --udex-button-tab-padding-horizontal: var(--udexSpacer4, 4px);
 
   --udex-button-tab-with-icon-without-background-border-color-active: transparent;
 
-  --udex-button-tab-with-icon-background: var(--sapList_SelectionBackgroundColor, var(--udexColorBlue1));
-  --udex-button-tab-with-icon-background-hover: var(--sapAvatar_6_Background, var(--udexColorBlue2));
-  --udex-button-tab-with-icon-color: var(--sapAccentColor6, var(--udexColorBlue7));
-  --udex-button-tab-with-icon-color-hover: var(--sapContent_MarkerIconColor, var(--udexColorBlue9));
+  --udex-button-tab-with-icon-background: var(--udexColorNeutralWhite, #FFFFFF);
+  --udex-button-tab-with-icon-background-hover: var(--udexColorBlue2, #D1EFFF);
+  --udex-button-tab-with-icon-color: var(--udexColorGrey7, #475E75);
+  --udex-button-tab-with-icon-color-hover: var(--udexColorGrey9, #223548);
   --udex-button-tab-with-icon-margin-bottom: var(--udexSpacer8, 8px);
-  --udex-button-tab-with-icon-background-active: var(--sapHighlightColor, var(--udexColorBlue7));
+  --udex-button-tab-with-icon-background-active: var(--udexColorBlue8, #0057D2);
   --udex-button-tab-with-icon-color-active: var(--sapBackgroundColor, var(--udexColorNeutralWhite));
+  --udex-button-tab-with-icon-border-color: var(--udexColorGrey3, #D5DADD);
 
   --udex-button-tab-with-icon-without-background-color: var(--sapShell_Navigation_TextColor, var(--udexColorGrey9));
   --udex-button-tab-with-icon-without-background-color-active: var(--sapHighlightColor, var(--udexColorBlue7));
@@ -37,26 +38,6 @@
   --udex-tab-navigation-tab-with-icon-without-background-color-active: transparent;
 
   --udex-button-more-margin-inline-end: 0;
-  --udex-button-more-s-font-size: var(--udexTypographyNavigationMediumMFontSize, 14px);
-  --udex-button-more-s-font-family: var(--sapFontFamily, sans-serif);
-  --udex-button-more-s-font-weight: var(--udexTypographyFontWeightMedium, 500);
-  --udex-button-more-s-line-height: 1.07143;
-  --udex-button-more-s-text-color: var(--sapTextColor, var(--udexColorGrey9));
-  --udex-button-more-s-padding-vertical: var(--udexSpacer4, 4px);
-  --udex-button-more-s-padding-horizontal: var(--udexSpacer8, 8px);
-  --udex-button-more-s-border-color: var(--sapButton_Neutral_BorderColor, var(--udexColorGrey4));
-  --udex-button-more-s-icon-margin-inline-start: var(--udexSpacer4, 4px);
-  --udex-button-more-s-icon-color: var(--sapTextColor, var(--udexColorGrey9));
-  --udex-button-more-s-border-color-toggled: var(--udexColorBlue4);
-  --udex-button-more-s-text-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));
-  --udex-button-more-s-icon-color-toggled: var(--sapContent_Selected_FocusColor, var(--udexColorBlue9));
-
-  --udex-button-more-m-font-size: var(--sapFontSize, var(--udexTypographyNavigationMediumXLFontSize));
-  --udex-button-more-m-font-family: var(--sapFontFamily, sans-serif);
-  --udex-button-more-m-font-weight: var(--udexTypographyFontWeightMedium, 500);
-  --udex-button-more-m-line-height: 1.125;
-  --udex-button-more-m-padding-vertical: var(--udexSpacer8, 8px);
-  --udex-button-more-m-padding-horizontal: var(--udexSpacer12, 12px);
 
   --udex-tab-navigation-content-padding-vertical-desktop: var(--udexSpacer40, 40px);
   --udex-tab-navigation-content-padding-vertical-mobile: var(--udexSpacer32, 32px);
@@ -132,14 +113,6 @@
   height: 32px;
 }
 
-:host([size-more-button="Medium"]) .udex-tab-navigation__button-more {
-  padding: var(--udex-button-more-m-padding-vertical) var(--udex-button-more-m-padding-horizontal);
-  height: 34px;
-  font-size: var(--udex-button-more-m-font-size);
-  font-family: var(--udex-button-more-m-font-family);
-  font-weight: var(--udex-button-more-m-font-weight);
-  line-height: var(--udex-button-more-m-line-height);
-}
 
 :host([desktop]) .udex-tab-navigation__button-tab:focus .udex-tab-navigation__button-text,
 .udex-tab-navigation__button-tab:focus-visible .udex-tab-navigation__button-text {
@@ -176,8 +149,7 @@
   white-space: nowrap;
 }
 
-.udex-tab-navigation__button-tab,
-.udex-tab-navigation__button-more {
+.udex-tab-navigation__button-tab {
   padding: 0;
   display: block;
   background: none;
@@ -270,50 +242,14 @@
 
 .udex-tab-navigation__button-more {
   margin-inline-start: auto;
-  padding: var(--udex-button-more-s-padding-vertical) var(--udex-button-more-s-padding-horizontal);
-  display: flex;
-  align-items: center;
-  flex: 0 0 0;
-  font-size: var(--udex-button-more-s-font-size);
-  font-family: var(--udex-button-more-s-font-family);
-  font-weight: var(--udex-button-more-s-font-weight);
-  line-height: var(--udex-button-more-s-line-height);
-  color: var(--udex-button-more-s-text-color);
-  border: 1px solid var(--udex-button-more-s-border-color);
-  border-radius: var(--udexRadiusM, 8px);
+  flex: 0 0 auto;
   margin-inline-end: var(--udex-button-more-margin-inline-end);
 }
-:host([desktop]) .udex-tab-navigation__button-more:focus,
-.udex-tab-navigation__button-more:focus-visible {
-  outline: 2px solid var(--udex-button-tab-text-color-active);
-  outline-offset: 2px;
-}
 
 .udex-tab-navigation__button-more[hidden] {
   display: none;
 }
 
-.udex-tab-navigation__button-more--lg .udex-tab-navigation__button-more-icon {
-  width: 16px;
-  height: 16px;
-}
-
-.udex-tab-navigation__button-more-icon {
-  margin-inline-start: var(--udex-button-more-s-icon-margin-inline-start);
-  width: 14px;
-  height: 14px;
-  color: var(--udex-button-more-s-icon-color);
-}
-
-.udex-tab-navigation__button-more--toggled {
-  border-color: var(--udex-button-more-s-border-color-toggled);
-  color: var(--udex-button-more-s-text-color-toggled);
-}
-
-.udex-tab-navigation__button-more--toggled .udex-tab-navigation__button-more-icon {
-  color: var(--udex-button-more-s-icon-color-toggled);
-}
-
 .udex-tab-navigation__button-icon-outer {
   margin-left: auto;
   margin-right: auto;
@@ -327,6 +263,7 @@
   border-radius: 50%;
   background-color: var(--udex-button-tab-with-icon-background);
   color: var(--udex-button-tab-with-icon-color);
+  box-shadow: inset 0 0 0 1px var(--udex-button-tab-with-icon-border-color);
   position: relative;
   z-index: 0;
 }
@@ -344,6 +281,7 @@
 
 .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon-outer {
   background-color: var(--udex-button-tab-with-icon-background-active);
+  box-shadow: none;
 }
 
 .udex-tab-navigation__button-tab--active .udex-tab-navigation__button-icon {
@@ -352,6 +290,7 @@
 
 .udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon-outer {
   background-color: var(--udex-button-tab-with-icon-background-hover);
+  box-shadow: none;
 }
 
 .udex-tab-navigation__button-tab.udex-tab-navigation__button-tab--icon-tab:not(.udex-tab-navigation__button-tab--active):hover .udex-tab-navigation__button-icon {
@@ -598,3 +537,49 @@
   margin-block-start: var(--udex-tab-navigation-footer-spacing, var(--udexSpacer20, 20px));
   padding-inline-start: var(--udexSpacer16, 16px);
 }
+
+/* ===== Process Tab Variant ===== */
+
+:host([process-tab]) {
+  --udex-button-tab-process-item-count-font-size: var(--udexTypographyNavigationRegularXSFontSize, 12px);
+  --udex-button-tab-process-item-count-font-weight: var(--udexTypographyFontWeightRegular, 400);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-tab--process {
+  flex-direction: row;
+  align-items: flex-start;
+  padding: var(--udexSpacer12, 12px) 0 calc(var(--udexSpacer12, 12px) + 3px);
+  gap: var(--udexSpacer8, 8px);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-tab--process:not(:last-child) {
+  margin-inline-end: var(--udexSpacer32, 32px);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-tab--process .udex-tab-navigation__button-icon-outer {
+  flex-shrink: 0;
+  margin: 0;
+  align-self: center;
+}
+
+:host([process-tab]) .udex-tab-navigation__button-text-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--udexSpacer4, 4px);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-item-count {
+  display: block;
+  font-size: var(--udex-button-tab-process-item-count-font-size);
+  font-weight: var(--udex-button-tab-process-item-count-font-weight);
+  line-height: 1.1;
+  color: var(--udexColorGrey7, #475E75);
+}
+
+:host([process-tab]) .udex-tab-navigation__button-text-block .udex-tab-navigation__button-text {
+  text-align: start;
+  font-weight: var(--udex-button-tab-font-weight);
+  font-size: var(--udex-button-tab-font-size-default);
+}

package/dist/generated/templates/HeroBannerTemplate.lit.d.ts

@@ -1,3 +0,0 @@
-import type HeroBanner from "../../HeroBanner.js";
-declare function template(this: HeroBanner): import("lit-html").TemplateResult;
-export default template;

package/dist/generated/templates/HeroBannerTemplate.lit.js

@@ -1,15 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import { html, ifDefined, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
-function block0(context, tags, suffix) { return html `<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}; ${ifDefined(this.wrapperBackgroundImage)}">${this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix)}</div>${this.hasMediaContent ? block8.call(this, context, tags, suffix) : undefined} `; }
-function block1(context, tags, suffix) { return suffix ? html `<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined}<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.mediaButtonIconName)}"></${scopeTag("ui5-icon", tags, suffix)}></button></div>` : html `<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined}<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><ui5-icon name="${ifDefined(this.mediaButtonIconName)}"></ui5-icon></button></div>`; }
-function block2(context, tags, suffix) { return html `<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`; }
-function block3(context, tags, suffix) { return html `<div class="udex-hero-banner__container">${this.hasCustomBackgroundPicture ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix)}<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot>${this.hasAdditionalContent ? block7.call(this, context, tags, suffix) : undefined}</div></div>`; }
-function block4(context, tags, suffix) { return html `<slot name="backgroundPicture"></slot>`; }
-function block5(context, tags, suffix) { return html `${this.hasBackgroundImage ? block6.call(this, context, tags, suffix) : undefined}`; }
-function block6(context, tags, suffix) { return html `<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`; }
-function block7(context, tags, suffix) { return html `<slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>`; }
-function block8(context, tags, suffix) { return html `<slot id="udex-hero-banner__mediaContent" name="mediaContent" part="mediaContent"></slot>`; }
-function template() { return block0.call(this, this, this.constructor.tagsToScope, getCustomElementsScopingSuffix()); }
-export default template;
-//# sourceMappingURL=HeroBannerTemplate.lit.js.map

package/dist/generated/templates/HeroBannerTemplate.lit.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeroBannerTemplate.lit.js","sourceRoot":"","sources":["../../../src/generated/templates/HeroBannerTemplate.lit.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint no-unused-vars: 0 */\nimport { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { getCustomElementsScopingSuffix } from \"@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js\";\nimport type UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type HeroBanner from \"../../HeroBanner.js\";\nimport type { ClassMapValue } from \"@ui5/webcomponents-base/dist/types.js\";\n\t\nfunction block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class=\"${ifDefined(this.heroBannerClasses)}\" part=\"wrapper\" style=\"background-color: ${ifDefined(this.wrapperBackgroundColor)}; ${ifDefined(this.wrapperBackgroundImage)}\">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div>${ this.hasMediaContent ? block8.call(this, context, tags, suffix) : undefined } `;}\nfunction block1 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class=\"udex-hero-banner__background-video-wrapper\" tabindex=\"0\" @keydown=\"${this._handleKeydown}\"><video ?autoplay=\"${this.shouldVideoAutoplay}\" muted loop playsinline part=\"background-video\" class=\"udex-hero-banner__background-video\" alt=\"${ifDefined(this.backgroundVideoLabel)}\"><source src=\"${ifDefined(this.backgroundVideo)}\" type=\"video/mp4\" /></video><div class=\"udex-hero-banner__background-video-overlay\"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class=\"udex-hero-banner__content-container\"><slot id=\"udex-hero-banner__content\" name=\"content\" part=\"content\"></slot><slot id=\"udex-hero-banner__additionalContent\" name=\"additionalContent\" part=\"additionalContent\"></slot></div><button class=\"udex-hero-banner__media-button\" aria-label=\"Play / Pause button\" role=\"button\" @click=\"${this._toggleMediaButton}\"><${scopeTag(\"ui5-icon\", tags, suffix)} name=\"${ifDefined(this.mediaButtonIconName)}\"></${scopeTag(\"ui5-icon\", tags, suffix)}></button></div>` : html`<div class=\"udex-hero-banner__background-video-wrapper\" tabindex=\"0\" @keydown=\"${this._handleKeydown}\"><video ?autoplay=\"${this.shouldVideoAutoplay}\" muted loop playsinline part=\"background-video\" class=\"udex-hero-banner__background-video\" alt=\"${ifDefined(this.backgroundVideoLabel)}\"><source src=\"${ifDefined(this.backgroundVideo)}\" type=\"video/mp4\" /></video><div class=\"udex-hero-banner__background-video-overlay\"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class=\"udex-hero-banner__content-container\"><slot id=\"udex-hero-banner__content\" name=\"content\" part=\"content\"></slot><slot id=\"udex-hero-banner__additionalContent\" name=\"additionalContent\" part=\"additionalContent\"></slot></div><button class=\"udex-hero-banner__media-button\" aria-label=\"Play / Pause button\" role=\"button\" @click=\"${this._toggleMediaButton}\"><ui5-icon name=\"${ifDefined(this.mediaButtonIconName)}\"></ui5-icon></button></div>`;}\nfunction block2 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading=\"${ifDefined(this.backgroundImageLoadingStrategy)}\" src=\"${ifDefined(this.backgroundImage)}\" part=\"background-image\" class=\"udex-hero-banner__background-image\" alt=\"${ifDefined(this.backgroundImageLabel)}\" /></picture>`;}\nfunction block3 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class=\"udex-hero-banner__container\">${ this.hasCustomBackgroundPicture ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<div class=\"udex-hero-banner__content-container\"><slot id=\"udex-hero-banner__content\" name=\"content\" part=\"content\"></slot>${ this.hasAdditionalContent ? block7.call(this, context, tags, suffix) : undefined }</div></div>`;}\nfunction block4 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name=\"backgroundPicture\"></slot>`;}\nfunction block5 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBackgroundImage ? block6.call(this, context, tags, suffix) : undefined }`;}\nfunction block6 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading=\"${ifDefined(this.backgroundImageLoadingStrategy)}\" src=\"${ifDefined(this.backgroundImage)}\" part=\"background-image\" class=\"udex-hero-banner__background-image\" alt=\"${ifDefined(this.backgroundImageLabel)}\" /></picture>`;}\nfunction block7 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id=\"udex-hero-banner__additionalContent\" name=\"additionalContent\" part=\"additionalContent\"></slot>`;}\nfunction block8 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id=\"udex-hero-banner__mediaContent\" name=\"mediaContent\" part=\"mediaContent\"></slot>`;}\n\nfunction template(this: HeroBanner) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }\nexport default template;"]}

package/src/HeroBanner.hbs

@@ -1,46 +0,0 @@
-<div class="{{heroBannerClasses}}" part="wrapper" style="background-color: {{wrapperBackgroundColor}}; {{wrapperBackgroundImage}}">
-  {{#if hasBackgroundVideo}}
-    <div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="{{_handleKeydown}}">
-        <video ?autoplay="{{shouldVideoAutoplay}}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="{{backgroundVideoLabel}}">
-            <source src="{{backgroundVideo}}" type="video/mp4" />
-        </video>
-        <div class="udex-hero-banner__background-video-overlay"></div>
-        {{#if hasBackgroundImage}}
-          <picture>
-            <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
-          </picture>
-        {{/if}}
-        <div class="udex-hero-banner__content-container">
-            <slot id="udex-hero-banner__content" name="content" part="content"></slot>
-            <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
-        </div>
-        <button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="{{_toggleMediaButton}}">
-            <ui5-icon name="{{mediaButtonIconName}}"></ui5-icon>
-        </button>
-    </div>
-    {{else}}
-    <div class="udex-hero-banner__container">
-      {{#if hasCustomBackgroundPicture}}
-        <slot name="backgroundPicture"></slot>
-      {{else if hasBackgroundImage}}
-        <picture>
-          <img loading="{{backgroundImageLoadingStrategy}}" src="{{backgroundImage}}" part="background-image" class="udex-hero-banner__background-image" alt="{{backgroundImageLabel}}" />
-        </picture>
-      {{/if}}
-      <div class="udex-hero-banner__content-container">
-          {{> hero-content}}
-      </div>
-    </div>
-  {{/if}}
-</div>
-{{#if hasMediaContent}}
-  <slot id="udex-hero-banner__mediaContent" name="mediaContent" part="mediaContent"></slot>
-{{/if}}
-
-{{#*inline "hero-content"}}
-    <slot id="udex-hero-banner__content" name="content" part="content"></slot>
-
-    {{#if hasAdditionalContent}}
-        <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
-    {{/if}}
-{{/inline}}

package/src/generated/templates/HeroBannerTemplate.lit.ts

@@ -1,19 +0,0 @@
-/* eslint no-unused-vars: 0 */
-import { html, svg, repeat, classMap, styleMap, ifDefined, unsafeHTML, scopeTag } from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { getCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScopeUtils.js";
-import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type HeroBanner from "../../HeroBanner.js";
-import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
-	
-function block0 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="${ifDefined(this.heroBannerClasses)}" part="wrapper" style="background-color: ${ifDefined(this.wrapperBackgroundColor)}; ${ifDefined(this.wrapperBackgroundImage)}">${ this.hasBackgroundVideo ? block1.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</div>${ this.hasMediaContent ? block8.call(this, context, tags, suffix) : undefined } `;}
-function block1 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><${scopeTag("ui5-icon", tags, suffix)} name="${ifDefined(this.mediaButtonIconName)}"></${scopeTag("ui5-icon", tags, suffix)}></button></div>` : html`<div class="udex-hero-banner__background-video-wrapper" tabindex="0" @keydown="${this._handleKeydown}"><video ?autoplay="${this.shouldVideoAutoplay}" muted loop playsinline part="background-video" class="udex-hero-banner__background-video" alt="${ifDefined(this.backgroundVideoLabel)}"><source src="${ifDefined(this.backgroundVideo)}" type="video/mp4" /></video><div class="udex-hero-banner__background-video-overlay"></div>${ this.hasBackgroundImage ? block2.call(this, context, tags, suffix) : undefined }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot><slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot></div><button class="udex-hero-banner__media-button" aria-label="Play / Pause button" role="button" @click="${this._toggleMediaButton}"><ui5-icon name="${ifDefined(this.mediaButtonIconName)}"></ui5-icon></button></div>`;}
-function block2 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
-function block3 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-hero-banner__container">${ this.hasCustomBackgroundPicture ? block4.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }<div class="udex-hero-banner__content-container"><slot id="udex-hero-banner__content" name="content" part="content"></slot>${ this.hasAdditionalContent ? block7.call(this, context, tags, suffix) : undefined }</div></div>`;}
-function block4 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot name="backgroundPicture"></slot>`;}
-function block5 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.hasBackgroundImage ? block6.call(this, context, tags, suffix) : undefined }`;}
-function block6 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<picture><img loading="${ifDefined(this.backgroundImageLoadingStrategy)}" src="${ifDefined(this.backgroundImage)}" part="background-image" class="udex-hero-banner__background-image" alt="${ifDefined(this.backgroundImageLabel)}" /></picture>`;}
-function block7 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>`;}
-function block8 (this: HeroBanner, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<slot id="udex-hero-banner__mediaContent" name="mediaContent" part="mediaContent"></slot>`;}
-
-function template(this: HeroBanner) { return block0.call(this, this, (this.constructor as typeof UI5Element).tagsToScope, getCustomElementsScopingSuffix()); }
-export default template;