@sapudex/web-components 2.9.0 → 2.11.0

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/Assets.ts

@@ -1,4 +1,5 @@
 import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
+import "@ui5/webcomponents-localization/dist/Assets.js";
 
 // own web-components package assets
 import "./generated/json-imports/Themes.js";

package/src/CountrySelector.hbs

@@ -17,13 +17,6 @@
         @keydown="{{handleKeyDownDropdown}}">
         {{searchableList}}
     </udex-dropdown>
-    {{#if supportingText}}
-        <udex-status-message
-            ?disabled="{{disabled}}"
-            supporting-text="{{supportingText}}"
-            value-state="{{valueState}}">
-        </udex-status-message>
-    {{/if}}
 </div>
 
 {{#*inline "trigger"}}
@@ -45,12 +38,12 @@
             class="udex-country-selector__text"
             value="{{selectedCountryName}}"
             value-state="{{valueState}}"
+            supporting-text="{{supportingText}}"
             direction="left"
             aria-label="{{effectiveAriaLabel}}"
             accessible-name="{{supportingText}}"
             accessible-name-ref="{{accessibleNameRef}}"
             aria-controls="{{ariaControls}}"
-            role="combobox"
             aria-haspopup="true"
             aria-expanded="{{_open}}"
             ?required="{{required}}"
@@ -61,7 +54,8 @@
             @mousedown="{{handleInputMouseDown}}"
             icon="{{triggerIcon}}"
             accessible-icon-name="{{effectiveAriaLabel}}"
-            maxlength="0">
+            maxlength="0"
+            _is-combobox-role>
         </udex-text-field>
     </div>
 {{/inline}}

package/src/CountrySelector.ts

@@ -348,7 +348,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
-    this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
+    this.getTextField()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
   handleItemPress(e: CustomEvent) {
@@ -373,6 +373,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
 
   handleTriggerClick() {
     if (!this.isOpenerDisabled) {
+      this._dropdown.opener = this.getTextField()._inputHolder;
       this._dropdown.open = !this._dropdown.open;
     }
   }
@@ -456,8 +457,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
   }
 
-  get triggerIcon(): string {
-    return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+  get triggerIcon(): string | undefined {
+    if (!this.displayonly) {
+      return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+    }
   }
 
   get countrySelectorClasses(): string {
@@ -504,7 +507,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
   }
 
-  getInput(): UDExTextField {
+  getTextField(): UDExTextField {
     return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 

package/src/DatePicker.hbs

@@ -1,28 +1,19 @@
-<div
-    class="udex-date-picker__container">
-    <udex-text-field
-        class="udex-date-picker__input"
-        _aria-has-popup="grid"
-        icon="appointment-2"
-        value="{{value}}"
-        label="{{label}}"
-        accessible-name="{{dateAccessibleName}}"
-        accessible-name-ref="{{accessibleNameRef}}"
-        accessible-icon-name="{{accessibleIconName}}"
-        ?disabled="{{disabled}}"
-        ?required="{{required}}"
-        ?readonly="{{readonly}}"
-        @ui5-click-icon="{{handleInputClick}}"
-        @ui5-change="{{_onInputChange}}"
-        value-state="{{valueState}}">
-    </udex-text-field>
-    {{#if supportingText}}
-        <udex-status-message
-            ?disabled="{{disabled}}"
-            supporting-text="{{supportingText}}"
-            value-state="{{valueState}}">
-        </udex-status-message>
-    {{/if}}
-</div>
+<udex-text-field
+    class="udex-date-picker__input"
+    _aria-has-popup="grid"
+    icon="appointment-2"
+    value="{{value}}"
+    label="{{label}}"
+    accessible-name="{{dateAccessibleName}}"
+    accessible-name-ref="{{accessibleNameRef}}"
+    accessible-icon-name="{{accessibleIconName}}"
+    ?disabled="{{disabled}}"
+    ?required="{{required}}"
+    ?readonly="{{readonly}}"
+    @ui5-click-icon="{{handleInputClick}}"
+    @ui5-change="{{_onInputChange}}"
+    value-state="{{valueState}}"
+    supporting-text="{{supportingText}}">
+</udex-text-field>
 
 {{>include "./DatePickerPopover.hbs"}}

package/src/DatePicker.ts

@@ -225,7 +225,7 @@ class UDExDatePicker extends DateComponentBase {
    * @private
    */
   get _dropdownTrigger(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__input")!;
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   _afterDropdownClose(): void {
@@ -248,7 +248,7 @@ class UDExDatePicker extends DateComponentBase {
   _openRespPopover(): void {
     this._dropdownTrigger.active = true;
     this.responsivePopover = this._getResponsePopover();
-    this.responsivePopover.opener = this._dropdownTrigger;
+    this.responsivePopover.opener = this._dropdownTrigger._inputHolder;
     this.responsivePopover.open = true;
   }
 

package/src/FilterMenu.hbs

@@ -1,39 +1,39 @@
 <div>
     <button
-    id="filterMenuTrigger"
-    @click="{{handleTriggerClick}}"
-    @keydown="{{handleTriggerKeydown}}"
-    aria-label="{{triggerButtonAccessibleName}}"
-    aria-labelledby="{{accessibleNameRef}}"
-    aria-expanded="{{_open}}"
-    aria-haspopup="true"
-    role="{{triggerAccessibleRole}}"
-    aria-controls="{{this._id}}_udex-filter-menu-dropdown"
-    ?disabled="{{disabled}}"
-    class="udex-filter-menu__trigger"
-    tabindex="0">
-    {{#if hasFilterNamePrefix}}
-        <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
-    {{/if}}
-    <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
-        <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
-        {{#if badgeValue}}
-            <udex-badge
-                class="udex-filter-menu__badge"
-                type="Number"
-                design="Info"
-                size="Small">
-                {{badgeValue}}
-            </udex-badge>
+        id="filterMenuTrigger"
+        @click="{{handleTriggerClick}}"
+        @keydown="{{handleTriggerKeydown}}"
+        aria-label="{{triggerButtonAccessibleName}}"
+        aria-labelledby="{{accessibleNameRef}}"
+        aria-expanded="{{_open}}"
+        aria-haspopup="true"
+        role="{{triggerAccessibleRole}}"
+        aria-controls="{{this._id}}_udex-filter-menu-dropdown"
+        ?disabled="{{disabled}}"
+        class="udex-filter-menu__trigger"
+        tabindex="0">
+        {{#if hasFilterNamePrefix}}
+            <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
         {{/if}}
-        <ui5-icon
-            class="udex-filter-menu__trigger-icon"
-            name="navigation-down-arrow"
-            mode="Decorative"
-            accessible-name="{{_iconAccessibleNameText}}">
-        </ui5-icon>
-    </span>
-</button>
+        <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
+            <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
+            {{#if badgeValue}}
+                <udex-badge
+                    class="udex-filter-menu__badge"
+                    type="Number"
+                    design="Info"
+                    size="Small">
+                    {{badgeValue}}
+                </udex-badge>
+            {{/if}}
+            <ui5-icon
+                class="udex-filter-menu__trigger-icon"
+                name="navigation-down-arrow"
+                mode="Decorative"
+                accessible-name="{{_iconAccessibleNameText}}">
+            </ui5-icon>
+        </span>
+    </button>
     <ui5-popover
         id="{{this._id}}_udex-filter-menu-dropdown"
         hide-arrow
@@ -60,8 +60,6 @@
     </ui5-popover>
 </div>
 
-
-
 {{#*inline "buttons"}}
     {{#unless hideActionBar}}
         <div class="udex-filter-menu__footer" slot="footer" name="footer">
@@ -70,7 +68,6 @@
                     class="udex-filter-menu__result-btn"
                     size="Medium"
                     design="Primary"
-                    ?disabled="{{disabledButtons}}"
                     @keydown="{{handleKeyDownResultBtn}}"
                     @click="{{handleResult}}">
                     {{getResultLabelText}}
@@ -82,7 +79,6 @@
                     size="Medium"
                     design="Tertiary"
                     @keydown="{{handleKeyDownResetBtn}}"
-                    ?disabled="{{disabledButtons}}"
                     @click="{{handleReset}}">
                     {{getResetLabelText}}
                 </udex-button>

package/src/FilterMenu.ts

@@ -37,6 +37,7 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 
 type UDExFilterMenuResultClickEventDetail = {
   selectedItems: Array<UDExListItemBase>,
@@ -46,6 +47,12 @@ type UDExFilterMenuResetClickEventDetail = {
   restoredItems: Array<UDExListItemBase>,
 }
 
+type initialItemState = {
+  id: string,
+  selected: boolean,
+  indeterminate?: boolean,
+}
+
 /**
  * @class
  *
@@ -296,10 +303,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: String })
     triggerAccessibleRole: string = "combobox";
 
+  @property({ type: Boolean })
+    _shouldApplyFilter: boolean = false;
+
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
   _trigger!: UDExButton;
   _search!: UDExSearch;
   _popover!: Popover;
   _breakpointSizeXS = 640;
+  _initialState: Array<initialItemState> = [];
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -348,6 +362,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleReset(): void {
+    this.onDropdownClose();
     this.fireDecoratorEvent("reset-click", {
       restoredItems: this.selectedItems,
     });
@@ -355,12 +370,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleResult(): void {
-    if (!this.disabledButtons) {
-      this._popover.open = false;
-      this.fireDecoratorEvent("result-click", {
-        selectedItems: this.selectedItems,
-      });
-    }
+    this._shouldApplyFilter = true;
+    this.onDropdownClose();
+    this.fireDecoratorEvent("result-click", {
+      selectedItems: this.selectedItems,
+    });
   }
 
   handleKeyDownList(e: KeyboardEvent): void {
@@ -438,6 +452,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
       this._setContentHeight();
     }
 
+    this._initialState = this._getInitialState(this.items);
     this.fireDecoratorEvent("before-open");
   }
 
@@ -449,6 +464,44 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.fireDecoratorEvent("after-open");
   }
 
+  _getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState> {
+    return items.flatMap(item => {
+      if (item.isGroup) {
+        const groupState: initialItemState = {
+          id: item._id,
+          selected: item.selected,
+          indeterminate: item.indeterminate,
+        };
+        const subItemsState = (item as UDExListGroupHeaderBase).getItems().map(subItem => ({
+          id: subItem._id,
+          selected: subItem.selected,
+        }));
+        return [groupState, ...subItemsState];
+      }
+      return {
+        id: item._id,
+        selected: item.selected,
+      };
+    });
+  }
+
+  _setInitialListState(): void {
+    this.getSlottedItems(this.items).forEach((item, index) => {
+      const initialState = this._initialState[index];
+      if (item._id === initialState?.id) {
+        item.selected = initialState.selected;
+        if (item.isGroup) {
+          item.indeterminate = initialState.indeterminate;
+        }
+      }
+    });
+  }
+
+  _setInitialState(): void {
+    this._setInitialListState();
+    this._requestRender = true;
+  }
+
   _dropdownBeforeClose(): void {
     this.fireDecoratorEvent("before-close");
   }
@@ -459,6 +512,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
       this._managePopupListeners(UDExPopoverPart.Footer, "removeEventListener");
     }
 
+    if (!this._shouldApplyFilter && this.modeMultiSelect && !this.modeSelectAll) {
+      this._setInitialState();
+    }
+
+    this._shouldApplyFilter = false;
     this._open = false;
     this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireDecoratorEvent("after-close");
@@ -480,10 +538,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.resetBtnLabel !== undefined && this.resetBtnLabel.length > 0 ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledButtons(): boolean {
-    return !this.selectedItems.length && !this.selectAll;
-  }
-
   get _iconAccessibleNameText(): string {
     return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
   }
@@ -501,17 +555,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   get hasFooterButtons(): boolean {
-    return (this.hasResultBtn || this.hasResetBtn) && !this.disabledButtons;
-  }
-
-  get hasResultBtn(): boolean {
-    return !this.hideResultBtn && !this.disabledButtons;
+    return !!this.shadowRoot!.querySelector("[udex-button]");
   }
 
   get hasResetBtn(): boolean {
     return !this.hideResetBtn;
   }
 
+  get modeSelectAll(): boolean {
+    return !!this.querySelector<UDExFilterMenuSelectAll>("[udex-filter-menu-select-all]");
+  }
+
   getTriggerButton(): UDExButton {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }

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,47 +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}}
-              <a
-                target="{{target}}"
-                href="{{this.url}}"
-                class="udex-footer__social-icon"
-                data-name="{{this.name}}"
-                data-id="{{this.id}}"
-                @click="{{../_onSocialMediaLinkClick}}"
-              >
-                <img
-                  data-name="{{this.name}}"
-                  data-id="{{this.id}}"
-                  alt="{{this.name}} {{../socialIconAccessibleName}}"
-                  src="{{this.iconUrl}}"
-                  loading="lazy"
-                />
-              </a>
-          {{/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"