@sapudex/web-components 2.10.0 → 2.12.0

package/package.json

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

package/src/Accordion.ts

@@ -18,6 +18,16 @@ import AccordionCss from "./generated/themes/Accordion.css.js";
 type UDExAccordionToggleItemsEventDetail = {
   isOpen: boolean
 }
+
+export enum UDExAccordionHeadlineLevel {
+  H1 = "H1",
+  H2 = "H2",
+  H3 = "H3",
+  H4 = "H4",
+  H5 = "H5",
+  H6 = "H6"
+}
+
 /**
  * @class
  *
@@ -90,6 +100,15 @@ class UDExAccordion extends UI5Element {
   @property({ type: String })
     headline!: string;
 
+  /**
+   * Defines the semantic level of the headline.
+   *
+   * @default UDExAccordionHeadlineLevel.h3
+   * @public
+   */
+  @property()
+    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;
+
   /**
    * Slot for accordion items.
    *

package/src/AccordionItem.ts

@@ -11,6 +11,10 @@ import AccordionItemTemplate from "./AccordionItemTemplate.js";
 // Styles
 import AccordionItemCss from "./generated/themes/AccordionItem.css.js";
 
+export enum UDExAccordionItemTitleSize {
+  Standard = "Standard",
+  Large = "Large"
+}
 /**
  * @class
  *
@@ -72,6 +76,24 @@ class UDExAccordionItem extends UI5Element {
   @property()
     label!: string;
 
+  /**
+   * Defines the size of label.
+   *
+   * @default UDExAccordionItemTitleSize.Standard
+   * @public
+   */
+  @property()
+    labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;
+
+  /**
+   * Defines icon name to be display with title.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    labelIcon!: string;
+
   /**
    * Defines if the accordion item is expanded by default
    *
@@ -113,6 +135,7 @@ class UDExAccordionItem extends UI5Element {
 
   onAfterRendering() {
     this.handleDirection();
+    this.setContentHeight();
   }
 
   onEnterDOM(): void {
@@ -121,6 +144,10 @@ class UDExAccordionItem extends UI5Element {
     }
   }
 
+  setContentHeight() {
+    this.style.setProperty("--udex-accordion-item-content-max-height", `${this.shadowRoot?.querySelector(".udex-accordion-item__content")?.scrollHeight}px`);
+  }
+
   contentKeydown(e: KeyboardEvent) {
     e.stopPropagation();
   }
@@ -128,6 +155,7 @@ class UDExAccordionItem extends UI5Element {
   itemClickHandler(e: Event) {
     e.preventDefault();
     this.expanded = !this.expanded;
+    this.setContentHeight();
     this.fireDecoratorEvent("accordion-item-click");
   }
 

package/src/AccordionItemTemplate.tsx

@@ -4,30 +4,35 @@ import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import { UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTypeBadgeDesign } from "./types/BadgeDesign.js";
 import UDExBadge from "./Badge.js";
+import UDExDivider from "./Divider.js";
 
 export default function AccordionItemTemplate(this: AccordionItem) {
   const ariaControlsId = `udex-accordion-item__${this._id}-content`;
   const ariaLabelledbyId = `udex-accordion-item__${this._id}`;
   const rootClass = "udex-accordion-item";
+  const titleClass = this.labelIcon ? `${rootClass}--with-title` : "";
+  const headlineClass = `${rootClass}__header ${rootClass}__header--${this.labelSize.toLowerCase()}`;
 
   return (
     <>
       <button
         id={ariaLabelledbyId}
         aria-controls={ariaControlsId}
-        className={`${rootClass}__header`}
+        className={`${headlineClass}`}
         onFocusIn={this.focusHandler}
         onClick={this.itemClickHandler}
         onKeyDown={this.keydownHandler}
         aria-expanded={this.expanded}
         type="button">
-        <div className={`${rootClass}__icon-wrapper`}>
-          <UI5Icon
-            class={`${rootClass}__icon`}
-            mode={IconMode.Decorative}
-            name={slimArrowRight}>
-          </UI5Icon>
-        </div>
+        {this.labelIcon ?
+          <div className={`${rootClass}__icon-wrapper ${rootClass}__label-icon-wrapper`}>
+            <UI5Icon
+              class={`${rootClass}__icon ${rootClass}__label-icon`}
+              mode={IconMode.Decorative}
+              name={this.labelIcon}>
+            </UI5Icon>
+          </div>
+          : ""}
         <span className={`${rootClass}__title`}>
           {this.label}
           {this.numberBadge &&
@@ -40,15 +45,25 @@ export default function AccordionItemTemplate(this: AccordionItem) {
             </UDExBadge>
           }
         </span>
+        <div className={`${rootClass}__icon-wrapper`}>
+          <UI5Icon
+            class={`${rootClass}__icon`}
+            mode={IconMode.Decorative}
+            name={slimArrowRight}>
+          </UI5Icon>
+        </div>
       </button>
       <div
         id={ariaControlsId}
         aria-labelledby={ariaLabelledbyId}
-        className={`${rootClass}__content`}
+        className={`${rootClass}__content ${titleClass}`}
         onKeyDown={this.contentKeydown}
         role="region">
-        <slot></slot>
+        <div className={`${rootClass}__content-inner`}>
+          <slot></slot>
+        </div>
       </div>
+      <UDExDivider></UDExDivider>
     </>
   );
 }

package/src/AccordionTemplate.tsx

@@ -2,6 +2,7 @@ import type Accordion from "./Accordion.js";
 import UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
+import { UDExAccordionHeadlineLevel } from "./Accordion.js";
 
 export default function AccordionTemplate(this: Accordion) {
   const rootClass = "udex-accordion";
@@ -14,7 +15,7 @@ export default function AccordionTemplate(this: Accordion) {
       onui5-accordion-item-focus={this.itemFocusHandler}>
       <div className={`${rootClass}__head`} part="head">
         {this.headline &&
-          <h3 className={`${rootClass}__headline`}>{this.headline}</h3>
+          headline.call(this, rootClass)
         }
         {!this.hideExpandButton &&
           <UDExButton class={`${rootClass}__btn`}
@@ -35,3 +36,23 @@ export default function AccordionTemplate(this: Accordion) {
     </div>
   );
 }
+
+function headline(this: Accordion, rootClass: string) {
+  const { headline: title, headlineLevel } = this;
+  switch (headlineLevel) {
+  case UDExAccordionHeadlineLevel.H1:
+    return <h1 className={`${rootClass}__headline`}>{title}</h1>;
+  case UDExAccordionHeadlineLevel.H2:
+    return <h2 className={`${rootClass}__headline`}>{title}</h2>;
+  case UDExAccordionHeadlineLevel.H3:
+    return <h3 className={`${rootClass}__headline`}>{title}</h3>;
+  case UDExAccordionHeadlineLevel.H4:
+    return <h4 className={`${rootClass}__headline`}>{title}</h4>;
+  case UDExAccordionHeadlineLevel.H5:
+    return <h5 className={`${rootClass}__headline`}>{title}</h5>;
+  case UDExAccordionHeadlineLevel.H6:
+    return <h6 className={`${rootClass}__headline`}>{title}</h6>;
+  default:
+    return <h3 className={`${rootClass}__headline`}>{title}</h3>;
+  }
+}

package/src/Button.ts

@@ -8,6 +8,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import {
   BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,
 } from "./generated/i18n/i18n-defaults.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
 
@@ -77,6 +78,15 @@ class UDExButton extends Button {
   @property({ type: Boolean })
     _ariaDisabled!: boolean;
 
+  /**
+   * Defines if button should wrap text inside
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: String })
+    wrappingType: `${WrappingType}` = WrappingType.None;
+
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 

package/src/Footer.hbs

@@ -1,14 +1,17 @@
 <footer class="udex-footer">
   <div class="udex-footer__content">
     <div class="udex-footer__contact-social">
-        {{#if logoUrl}}
+        {{#if hasLogo}}
           <div class="udex-footer__logo">
-            {{#if logoLink}}
-            <a href="{{parsedRef}}" @click="{{_onLogoClick}}" title="{{logoTitle}}" aria-label="{{logoAriaLabel}}">
-              <img id="udex-footer__logo-image" src="{{logoUrl}}" class="udex-footer__logo-image" alt="{{logoAlt}}"/>
-            </a>
+            {{#if hasLogoLink}}
+              <a href="{{logoHref}}" @click="{{_onLogoClick}}" title="{{logoTitle}}" aria-label="{{logoAriaLabel}}">
+                <img id="udex-footer__logo-image" src="{{currentLogoUrl}}" class="{{logoClass}}" alt="{{logoAlt}}"/>
+              </a>
             {{else}}
-              <img id="udex-footer__logo-image" src="{{logoUrl}}" class="udex-footer__logo-image" alt="{{logoAlt}}"/>
+              <img id="udex-footer__logo-image" src="{{currentLogoUrl}}" class="{{logoClass}}" alt="{{logoAlt}}"/>
+            {{/if}}
+            {{#if hasTagline}}
+              <img id="udex-footer__tagline-image" src="{{currentTaglineUrl}}" class="{{taglineClass}}" alt="{{taglineAlt}}"/>
             {{/if}}
           </div>
         {{/if}}
@@ -83,40 +86,40 @@
     {{/if}}
 
     <udex-divider class="udex-footer__divider"></udex-divider>
+  </div>
 
-    <div class="udex-footer__copyright">
-        {{#if isChineseLang}}
-            <span class="udex-footer__copyright-chinese-text">
-                <a
-                    href="{{chineseIcpNumberLink}}"
-                    title="{{chineseICPNumber}}"
-                    class="udex-footer__copyright-chinese-link"
-                    target="_blank">
-                    {{chineseICPNumber}}
-                </a>
-                {{chineseSecurityNetworkNumber}}
-            </span>
-        {{/if}}
-        <span class="udex-footer__copyright-text">{{copyrightText}}</span>
-    </div>
-
-    {{#if socialLinksArray.length}}
-        <div class="udex-footer__social-container">
-          {{#each socialLinksArray}}
-              <udex-social-media-button
-                type="{{this.name}}"
-                url="{{this.url}}"
-                target="{{this.target}}"
-                accessible-name="{{this.accessibleName}}"
-                data-name="{{this.name}}"
-                data-id="{{this.id}}"
-                @ui5-click="{{../_onSocialMediaLinkClick}}"
-                ></udex-social-media-button>
-          {{/each}}
-        </div>
+  <div class="udex-footer__copyright">
+    {{#if isChineseLang}}
+      <span class="udex-footer__copyright-chinese-text">
+        <a
+          href="{{chineseIcpNumberLink}}"
+          title="{{chineseICPNumber}}"
+          class="udex-footer__copyright-chinese-link"
+          target="_blank">
+          {{chineseICPNumber}}
+        </a>
+        {{chineseSecurityNetworkNumber}}
+      </span>
     {{/if}}
+    <span class="udex-footer__copyright-text">{{copyrightText}}</span>
   </div>
 
+  {{#if socialLinksArray.length}}
+    <div class="udex-footer__social-container">
+      {{#each socialLinksArray}}
+        <udex-social-media-button
+          type="{{this.name}}"
+          url="{{this.url}}"
+          target="{{this.target}}"
+          accessible-name="{{this.accessibleName}}"
+          data-name="{{this.name}}"
+          data-id="{{this.id}}"
+          @ui5-click="{{../_onSocialMediaLinkClick}}"
+        ></udex-social-media-button>
+      {{/each}}
+    </div>
+  {{/if}}
+
   <udex-button
     class="udex-footer__back-to-top-button"
     icon="back-to-top"

package/src/Footer.ts

@@ -199,7 +199,7 @@ class UDExFooter extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoTitle: string = "";
+    logoTitle?: string;
 
   /**
    * Defines the Logo URL
@@ -208,7 +208,7 @@ class UDExFooter extends UI5Element {
    * @public
    */
   @property({ type: String })
-    logoUrl: string = "";
+    logoUrl?: string;
 
   /**
    * Defines the optional component href link for the logo.
@@ -219,6 +219,51 @@ class UDExFooter extends UI5Element {
   @property({ type: String })
     logoLink: string = "";
 
+  /**
+   * Defines the tagline alt text.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    taglineAlt?: string;
+
+  /**
+   * Defines the tagline url.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    taglineUrl?: string;
+
+  /**
+   * Defines the chinese tagline url.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseTaglineUrl?: string;
+
+  /**
+   * Defines the chinese logo url
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseLogoUrl?: string;
+
+  /**
+   * Defines the optional component href link for the chinese logo.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    chineseLogoLink?: string;
+
   /**
    * List of the Quick links
    *
@@ -398,10 +443,6 @@ class UDExFooter extends UI5Element {
     window.scrollTo(0, 0);
   }
 
-  get parsedRef(): string | undefined {
-    return (this.logoLink && this.logoLink.length > 0) ? this.logoLink : undefined;
-  }
-
   get quickLinksArray(): FooterLink[] {
     return parseArrayFromString<FooterLink>(this.quickLinks);
   }
@@ -493,6 +534,40 @@ class UDExFooter extends UI5Element {
     return getLanguage()?.toLowerCase() === "zh_cn";
   }
 
+  get hasLogo(): boolean {
+    return !!(this.logoUrl || this.chineseLogoUrl);
+  }
+
+  get hasLogoLink(): boolean {
+    return !!(this.logoLink || this.chineseLogoLink);
+  }
+
+  get currentLogoUrl(): string | undefined {
+    return this.isChineseLang && this.chineseLogoUrl ? this.chineseLogoUrl : this.logoUrl;
+  }
+
+  get logoHref(): string {
+    return this.isChineseLang && this.chineseLogoLink ? this.chineseLogoLink : this.logoLink;
+  }
+
+  get hasTagline(): boolean {
+    return !!(this.taglineUrl || this.chineseTaglineUrl);
+  }
+
+  get currentTaglineUrl(): string | undefined {
+    return this.isChineseLang && this.chineseTaglineUrl ? this.chineseTaglineUrl : this.taglineUrl;
+  }
+
+  get taglineClass(): string {
+    const root = "udex-footer__tagline-image";
+    return this.isChineseLang && this.chineseTaglineUrl ? `${root}-chinese` : root;
+  }
+
+  get logoClass(): string {
+    const root = "udex-footer__logo-image";
+    return this.isChineseLang && this.chineseLogoUrl ? `${root}-chinese` : root;
+  }
+
   _onLogoClick(e: PointerEvent): void {
     this.fireFooterBaseEvent(e, "logo-click");
   }

package/src/HeroBanner.hbs

@@ -38,7 +38,6 @@
     <slot id="udex-hero-banner__content" name="content" part="content"></slot>
 
     {{#if hasAdditionalContent}}
-    <udex-media-player source="http://media.w3.org/2010/05/sintel/trailer.mp4"  aspect-ratio="16:9"></udex-media-player>
         <slot id="udex-hero-banner__additionalContent" name="additionalContent" part="additionalContent"></slot>
     {{/if}}
 {{/inline}}

package/src/List.hbs

@@ -13,7 +13,6 @@
                 class="udex-list"
                 role="{{accessibleRole}}"
                 aria-labelledby="{{ariaLabelledBy}}"
-                aria-label="{{accessibleName}}"
                 aria-busy="{{ariaBusy}}">
                 <slot></slot>
             </div>
@@ -27,7 +26,6 @@
         class="udex-list"
         role="{{accessibleRole}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleName}}"
         aria-busy="{{ariaBusy}}">
         <slot></slot>
     </div>

package/src/List.ts

@@ -135,12 +135,21 @@ class UDExList extends UI5Element {
   /**
    * Defines the name of the UI5 Icon, that will be displayed for each item of the list.
    *
-   * @defaultv ""
-   * @private
+   * @default ""
+   * @public
    */
   @property({ type: String })
     itemIcon: string = "";
 
+  /**
+   * Enables tab navigation for the list.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: Boolean })
+    tabNavigationEnabled?: boolean;
+
   /**
    * Slot for list items.
    *
@@ -167,6 +176,9 @@ class UDExList extends UI5Element {
   }
 
   handleKeyDown(e: KeyboardEvent): void {
+    if (this.tabNavigationEnabled) {
+      return;
+    }
     if (isUp(e)) {
       this.handleUpArrow(e);
     }
@@ -323,8 +335,10 @@ class UDExList extends UI5Element {
       clickedItem.selected = true;
     }
 
-    this.resetTabIndexes();
-    clickedItem._tabIndex = "0";
+    if (!this.tabNavigationEnabled) {
+      this.resetTabIndexes();
+      clickedItem._tabIndex = "0";
+    }
 
     this.fireDecoratorEvent("selection-change", {
       listItems: this.getItemsFromList(),
@@ -406,6 +420,10 @@ class UDExList extends UI5Element {
   }
 
   getTabIndex(index: number, item: UDExListItemBase): string {
+    if (this.tabNavigationEnabled) {
+      return "0";
+    }
+
     const isFirstItem = this.modeSelected && index === 0;
     const isFirstItemInGroupList = this.isGroupList && index === 1;
     const listGroupHeader = item.closest("[udex-list-group-header]") as UDExListGroupHeader;
@@ -433,10 +451,11 @@ class UDExList extends UI5Element {
   }
 
   get ariaLabelModeText(): string {
-    if (this.modeSingleSelect || this.modeRadioGroup) {
-      return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_SELECTABLE);
-    }
-    return UDExList.i18nBundle.getText(ARIA_LABEL_LIST_MULTISELECTABLE);
+    const defaultText = this.modeSingleSelect || this.modeRadioGroup
+      ? ARIA_LABEL_LIST_SELECTABLE
+      : ARIA_LABEL_LIST_MULTISELECTABLE;
+
+    return this.accessibleName || UDExList.i18nBundle.getText(defaultText);
   }
 
   get ariaLabelledBy(): string {

package/src/ListGroupHeader.ts

@@ -6,6 +6,7 @@ import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import ListGroupHeaderTemplate from "./generated/templates/ListGroupHeaderTemplate.lit.js";
 import { UDExListItemSize } from "./types/List.js";
+import type { UDExListItemBaseEvents } from "./ListItemBase.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
@@ -48,7 +49,7 @@ type UDExListGroupHeaderBaseHeaderPressEventDetail = {
 class UDExListGroupHeader extends UDExListGroupHeaderBase {
   eventDetails!: {
     "header-press": UDExListGroupHeaderBaseHeaderPressEventDetail,
-  };
+  } & UDExListItemBaseEvents;
 
   handleHeaderPress() {
     if (!this.controlled) {

package/src/ListItem.hbs

@@ -74,6 +74,13 @@
                 shape="{{imageShape}}"
                 size="{{imageSize}}"
                 part="avatar">
+                {{#if imageBadgeState}}
+                    <udex-status-badge
+                        slot="badge"
+                        value-state="{{imageBadgeState}}"
+                        size="{{imageSize}}">
+                    </udex-status-badge>
+                {{/if}}
                 <img src="{{image}}" alt="{{imageAlt}}" />
             </udex-avatar>
         {{/if}}
@@ -86,6 +93,13 @@
                     {{/if}}
                     <slot part="content"></slot>
                 </div>
+                {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
+                {{#if hasFirstIcon}}
+                  <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
+                {{/if}}
+                {{#if hasSecondIcon}}
+                  <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
+                {{/if}}
             {{else}}
                 <div class="udex-list__text-holder">
                     <slot part="content"></slot>
@@ -93,10 +107,10 @@
                 </div>
                 {{#if additionalText}}<div class="udex-list__add-text" part="additional-text">{{additionalText}}</div>{{/if}}
                 {{#if hasFirstIcon}}
-                    <slot name="firstIcon"></slot>
+                    <slot name="firstIcon" @click={{_fireIconClickEvent}}></slot>
                 {{/if}}
                 {{#if hasSecondIcon}}
-                    <slot name="secondIcon"></slot>
+                    <slot name="secondIcon" @click={{_fireIconClickEvent}}></slot>
                 {{/if}}
             {{/if}}
         </div>