@sapudex/web-components 0.176.0 → 0.192.2

package/src/DatePicker.ts

@@ -1,11 +1,11 @@
-import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import DateComponentBase from "@ui5/webcomponents/dist/DateComponentBase.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 // eslint-disable-next-line
 import Calendar, { CalendarSelectedDatesChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
-import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
+import CalendarDateComponent from "@ui5/webcomponents/dist/CalendarDate.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
@@ -31,7 +31,7 @@ export enum UDExDatePickerSelectionMode {
 
 export type DatePickerSelectionChangeEventDetail = {
   selectedValues: Array<string>;
-  selectedDates: Array<number>;
+  selectedDates: Array<number | undefined>;
   timestamp: number | undefined;
 };
 
@@ -50,7 +50,7 @@ export type DatePickerSelectionChangeEventDetail = {
  *
  * @constructor
  * @author SAP SE
- * @extends UI5Element
+ * @extends DateComponentBase
  * @tagname udex-date-picker
  * @public
  */
@@ -61,7 +61,7 @@ export type DatePickerSelectionChangeEventDetail = {
   template: DatePickerTemplate,
   staticAreaTemplate: DatePickerPopover,
   staticAreaStyles: [DatePickerPopoverCss],
-  dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],
+  dependencies: [CalendarDateComponent, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],
 })
 /**
  * Fired when the selected dates change.
@@ -85,7 +85,7 @@ export type DatePickerSelectionChangeEventDetail = {
     timestamp: { type: Number },
   },
 })
-class UDExDatePicker extends UI5Element {
+class UDExDatePicker extends DateComponentBase {
   /**
    * Defines selection mode of the calendar component.
    *
@@ -171,28 +171,6 @@ class UDExDatePicker extends UI5Element {
   @property({ type: String, defaultValue: "" })
     label!: string;
 
-  /**
-   * Determines the minimum date available for selection.
-   * <br/><br/>
-   * <b>Note:</b> The minDate value must be provided in the ISO date format (YYYY-MM-dd).
-   *
-   * @default ""
-   * @public
-   */
-  @property({ type: String, defaultValue: "" })
-    minDate!: string;
-
-  /**
-   * Determines the maximum date available for selection.
-   * <br/><br/>
-   * <b>Note:</b> The maxDate value must be provided in the ISO date format (YYYY-MM-dd).
-   *
-   * @default ""
-   * @public
-   */
-  @property({ type: String, defaultValue: "" })
-    maxDate!: string;
-
   /**
    * Defines selected dates values.
    *
@@ -219,19 +197,23 @@ class UDExDatePicker extends UI5Element {
   @property({ type: String, defaultValue: "MMM dd, yyyy" })
     formatPattern!: string;
 
+  /**
+   * The first date in the range during selection (this is a temporary value, not the first date in the value range)
+   * @private
+   */
+  @property()
+    _tempValue!: string;
+
   responsivePopover?: UDExDropdown;
 
   static i18nBundle: I18nBundle;
 
+  private _prevDelimiter!: string | null;
+
   static async onDefine(): Promise<void> {
     UDExDatePicker.i18nBundle = await getI18nBundle("@udex/web-components");
   }
 
-  async _getCalendar(): Promise<Calendar> {
-    const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<Calendar>("#ui5-calendar")!;
-  }
-
   async _getResponsePopover(): Promise<UDExDropdown> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
     return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;
@@ -242,12 +224,13 @@ class UDExDatePicker extends UI5Element {
    * @private
    */
   get _dropdownTrigger(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__trigger")!;
+    return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__input")!;
   }
 
   _afterDropdownClose(): void {
     this._dropdownTrigger.active = false;
-    this._dropdownTrigger.shadowRoot?.querySelector("input")?.focus();
+    this._dropdownTrigger.shadowRoot?.querySelector("input")?.blur();
+    this._tempValue = "";
   }
 
   _afterDropdownOpen(): void {
@@ -273,35 +256,251 @@ class UDExDatePicker extends UI5Element {
   }
 
   handleCalendarChange(e: CustomEvent<CalendarSelectedDatesChangeEventDetail>): void {
-    const { dates, timestamp, values } = e.detail;
+    e.preventDefault();
+    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {
+      const newValue = e.detail.values && e.detail.values[0];
+      this._updateValueAndFireEvents(newValue, true, e);
+    }
+
+    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {
+      const values = e.detail.values;
+
+      if (values.length === 0) {
+        return;
+      }
+
+      if (values.length === 1) { // Do nothing until the user selects 2 dates, we don't change any state at all for one date
+        this._tempValue = values[0];
+        return;
+      }
 
-    const formattedValues = values;
+      const newValue = this._buildValue(e.detail.dates[0], e.detail.dates[1]);
+      this._updateValueAndFireEvents(newValue, true, e);
+    }
+
+    this.hideCalendar();
+  }
+
+  get _effectiveDelimiter(): string {
+    return "-";
+  }
+
+  _getInput(): HTMLInputElement | null | undefined {
+    return this._dropdownTrigger.shadowRoot?.querySelector("input");
+  }
+
+  _splitValueByDelimiter(value: string) {
+    const valuesArray: Array<string> = [];
+    const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);
 
+    // if format successfully parse the value, the value contains only single date
+    if (this.getFormat().parse(value)) {
+      valuesArray[0] = partsArray.join(this._effectiveDelimiter);
+      valuesArray[1] = "";
+
+      return valuesArray;
+    }
+
+    valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+    valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+
+    return valuesArray;
+  }
+
+  /**
+   * Returns a UTC timestamp, representing the last date in the value string or undefined if the value is empty or there is just one date
+   * @private
+   */
+  _extractLastTimestamp(value: string) {
+    if (!value || !this._checkValueValidity(value)) {
+      return undefined;
+    }
+
+    const dateStrings = this._splitValueByDelimiter(value);
+    if (dateStrings[1]) {
+      const parsedDate = this.getFormat().parse(dateStrings[1], true) as Date;
+      return parsedDate.getTime() / 1000;
+    }
+
+    return undefined;
+  }
+
+  /**
+   * Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty
+   * @private
+   */
+  _extractFirstTimestamp(value: string) {
+    if (!value || !this._checkValueValidity(value)) {
+      return undefined;
+    }
+
+    const dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)
+
+    const parsedDate = this.getFormat().parse(dateStrings[0], true) as Date;
+    return parsedDate.getTime() / 1000;
+  }
+
+  /**
+   * Checks if a value is valid against the current date format of the DatePicker.
+   * @public
+   * @param value A value to be tested against the current date format
+   */
+  isValid(value: string): boolean {
+    if (value === "" || value === undefined) {
+      return true;
+    }
+
+    return !!this.getFormat().parse(value);
+  }
+
+  isValidRange(value: string): boolean {
+    const parts = this._splitValueByDelimiter(value);
+    return parts.length <= 2 && parts.every(dateString => this.isValid(dateString)); // must be at most 2 dates and each must be valid
+  }
+
+  isInValidRange(value: string): boolean {
+    if (value === "" || value === undefined) {
+      return true;
+    }
+
+    const calendarDate = this._getCalendarDateFromString(value);
+
+    if (!calendarDate || !this._minDate || !this._maxDate) {
+      return false;
+    }
+
+    return calendarDate.valueOf() >= this._minDate.valueOf() && calendarDate.valueOf() <= this._maxDate.valueOf();
+  }
+
+  /**
+   * Checks if a date is between the minimum and maximum date.
+   * @public
+   * @param value A value to be checked
+   */
+  isInValidRangeRange(value: string): boolean {
+    return this._splitValueByDelimiter(value).every(dateString => this.isInValidRange(dateString));
+  }
+
+  _checkValueValidity(value: string): boolean {
+    let result = false;
+    if (value === "") {
+      return true;
+    }
     if (this.selectionMode === UDExDatePickerSelectionMode.Single) {
-      this.value = formattedValues[0];
-      this.selectedDates = formattedValues[0];
+      result = this.isValid(value) && this.isInValidRange(value);
+    }
+    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {
+      result = this.isValidRange(value) && this.isInValidRangeRange(value);
+    }
+    return result;
+  }
+
+  /**
+   * Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp
+   * @private
+   */
+  _buildValue(firstDateTimestamp: number | undefined, lastDateTimestamp: number | undefined) {
+    this._prevDelimiter = this._effectiveDelimiter;
+    if (firstDateTimestamp) {
+      const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);
+
+      if (!lastDateTimestamp) {
+        return firstDateString;
+      }
+
+      const lastDateString = this._getStringFromTimestamp(lastDateTimestamp * 1000);
+      return `${firstDateString} ${this._effectiveDelimiter} ${lastDateString}`;
     }
 
+    return "";
+  }
+
+  /**
+   * The parser understands many formats, but we need one format OR extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)
+   * @protected
+   */
+  normalizeValue(value: string) {
+    let result = "";
+    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {
+      if (value === "") {
+        return value;
+      }
+      result = this.getFormat().format(this.getFormat().parse(value, true), true); // it is important to both parse and format the date as UTC
+    }
     if (this.selectionMode === UDExDatePickerSelectionMode.Range) {
-      if (dates.length < 2) {
-        return;
+      const firstDateTimestamp = this._extractFirstTimestamp(value);
+      const lastDateTimestamp = this._extractLastTimestamp(value);
+      if (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary
+        return this._buildValue(lastDateTimestamp, firstDateTimestamp);
       }
+      result = this._buildValue(firstDateTimestamp, lastDateTimestamp);
+    }
+    return result;
+  }
+
+  _updateValueState() {
+    const valid = this._checkValueValidity(this.value);
+    const previousValueState = this.valueState;
+
+    this.valueState = valid ? ValueState.Standard : ValueState.Error;
+
+    const eventPrevented = !this.fireEvent("value-state-change", { valueState: this.valueState, valid });
+
+    if (eventPrevented) {
+      this.valueState = previousValueState;
+    }
+  }
 
-      this.value = `${formattedValues[0]} - ${formattedValues[1]}`;
-      this.selectedDates = `${formattedValues[0]}, ${formattedValues[1]}`;
+  _buildEventData(value: string): DatePickerSelectionChangeEventDetail {
+    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {
+      return {
+        selectedDates: [this._extractFirstTimestamp(value), this._extractLastTimestamp(value)],
+        selectedValues: this._splitValueByDelimiter(this.value),
+        timestamp: this._extractLastTimestamp(value),
+      };
     }
+    return {
+      selectedDates: [this._extractFirstTimestamp(value)],
+      selectedValues: [value],
+      timestamp: this._extractFirstTimestamp(value),
+    };
+  }
 
-    this.fireEvent(
-      "selection-change",
-      {
-        timestamp,
-        selectedDates: [...dates],
-        selectedValues: formattedValues,
-      },
-      true,
-    );
+  _updateValueAndFireEvents(value: string, normalizeValue: boolean, e?: CustomEvent<CalendarSelectedDatesChangeEventDetail> | null) {
+    const valid = this._checkValueValidity(value);
 
-    this.hideCalendar();
+    if (valid && normalizeValue) {
+      value = this.normalizeValue(value); // transform valid values (in any format) to the correct format
+    }
+
+    this.value = value;
+    this._updateValueState(); // Change the value state to Error/None, but only if needed
+
+    if (!valid) { return; }
+
+    if (e) {
+      const { dates, timestamp, values } = e.detail;
+
+      this.fireEvent(
+        "selection-change",
+        {
+          timestamp,
+          selectedDates: [...dates],
+          selectedValues: values,
+        },
+        true,
+      );
+    } else {
+      this.fireEvent(
+        "selection-change",
+        this._buildEventData(value),
+        true,
+      );
+    }
+  }
+
+  _onInputChange(e: Event) {
+    this._updateValueAndFireEvents((e.target as UDExDatePicker).value, true);
   }
 
   handleInputClick(e: Event | KeyboardEvent): void {
@@ -314,23 +513,17 @@ class UDExDatePicker extends UI5Element {
     this.showCalendar();
   }
 
-  handleInputMouseDown(e: Event): void {
-    e.preventDefault();
-  }
-
-  handleInputKeyDown(e: KeyboardEvent): void {
-    if (e.key === "Enter") {
-      this.handleInputClick(e);
-    }
-  }
-
   /**
    * Used to provide selectedDates to the calendar based on the component's state
    * Override in derivatives to provide different rules for setting the calendar's selected dates
    * @protected
    */
   get _calendarSelectedDates(): Array<string> {
-    if (this.value) {
+    if (this._tempValue) {
+      return [this._tempValue];
+    }
+
+    if (this.value && this._checkValueValidity(this.value)) {
       return this.value.split(" - ");
     }
 

package/src/DatePickerPopover.hbs

@@ -3,8 +3,8 @@
   class="udex-date-picker__popover"
   placement-type="Bottom"
   horizontal-align="Left"
-  @after-close="{{_afterDropdownClose}}"
-  @after-open="{{_afterDropdownOpen}}"
+  @ui5-after-close="{{_afterDropdownClose}}"
+  @ui5-after-open="{{_afterDropdownOpen}}"
 >
   <ui5-calendar
       class="udex-date-picker__calendar"

package/src/FilterMenu.hbs

@@ -67,7 +67,7 @@
                     class="udex-filter-menu__result-btn"
                     size="Medium"
                     design="Primary"
-                    ?disabled="{{disabledResultBtn}}"
+                    ?disabled="{{disabledButtons}}"
                     @keydown="{{handleKeyDownResultBtn}}"
                     @click="{{handleResult}}">
                     {{getResultLabelText}}
@@ -79,6 +79,7 @@
                     size="Medium"
                     design="Tertiary"
                     @keydown="{{handleKeyDownResetBtn}}"
+                    ?disabled="{{disabledButtons}}"
                     @click="{{handleReset}}">
                     {{getResetLabelText}}
                 </udex-button>

package/src/FilterMenu.ts

@@ -3,7 +3,6 @@ import event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
-import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
@@ -11,7 +10,8 @@ import {
   isTabPrevious, isTabNext, isEscape, isSpace, isEnter,
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
-import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Popover from "@ui5/webcomponents/dist/Popover.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExList from "./List.js";
 import UDExListItem from "./ListItem.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
@@ -59,7 +59,8 @@ import SearchableListCss from "./generated/themes/SearchableList.css.js";
   styles: [FilterMenuCss, SearchableListCss],
   template: FilterMenuTemplate,
   dependencies: [
-    ResponsivePopover,
+    Popover,
+    Icon,
     UDExFilterMenuItem,
     UDExFilterMenuGroupHeader,
     UDExFilterMenuSelectAll,
@@ -293,8 +294,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
 
   _trigger!: UDExButton;
   _search!: UDExSearch;
-  _hasFooterButtons!: boolean;
-  _popover!: ResponsivePopover;
+  _popover!: Popover;
   _breakpointSizeXS = 640;
 
   onEnterDOM(): void {
@@ -311,7 +311,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this._search = this.getSearch();
     this._popover = this.getPopover();
     this._trigger = this.getTriggerButton();
-    this._hasFooterButtons = this.hasFooterButtons;
   }
 
   handleSelectAll(e:CustomEvent): void {
@@ -352,7 +351,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleResult(): void {
-    if (!this.disabledResultBtn) {
+    if (!this.disabledButtons) {
       this._popover.close();
       this.fireEvent("result-click", {
         selectedItems: this.selectedItems,
@@ -361,7 +360,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleKeyDownList(e: KeyboardEvent): void {
-    const isTabNextPress = isTabNext(e) && !this._hasFooterButtons;
+    const isTabNextPress = isTabNext(e) && !this.hasFooterButtons;
     const isTabPrevPress = isTabPrevious(e) && !this._search;
     const target = e.target as HTMLElement;
     const isSearchResetTrigger = target === this._search;
@@ -425,7 +424,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   getSearch(): UDExSearch {
-    return this.shadowRoot!.querySelector<UDExSearch>("udex-search")!;
+    return this.shadowRoot!.querySelector<UDExSearch>("[udex-search]")!;
   }
 
   _dropdownBeforeOpen(): void {
@@ -472,7 +471,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return hasLabel ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledResultBtn(): boolean {
+  get disabledButtons(): boolean {
     return !this.selectedItems.length && !this.selectAll;
   }
 
@@ -493,11 +492,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   get hasFooterButtons(): boolean {
-    return (this.hasResultBtn || this.hasResetBtn) && this.modeMultiSelect;
+    return (this.hasResultBtn || this.hasResetBtn) && !this.disabledButtons;
   }
 
   get hasResultBtn(): boolean {
-    return !this.hideResultBtn && !this.disabledResultBtn;
+    return !this.hideResultBtn && !this.disabledButtons;
   }
 
   get hasResetBtn(): boolean {
@@ -508,8 +507,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }
 
-  getPopover(): ResponsivePopover {
-    return this.shadowRoot!.querySelector<ResponsivePopover>("[ui5-popover]")!;
+  getPopover(): Popover {
+    return this.shadowRoot!.querySelector<Popover>("[ui5-popover]")!;
   }
 
   getItems(): Array<UDExListItemBase> {

package/src/Footer.ts

@@ -14,13 +14,17 @@ import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExAccordionItem from "./AccordionItem.js";
+import UDExButton from "./Button.js";
+import UDExAccordion from "./Accordion.js";
+import UDExDivider from "./Divider.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
 
 // Styles
 import FooterCss from "./generated/themes/Footer.css";
-import UDExAccordionItem from "./AccordionItem.js";
 import {
   ABOUT_SAP,
   CHAT_WITH_US,
@@ -116,7 +120,7 @@ export const FooterDetailedEvent = {
   renderer: litRender,
   styles: [FooterCss],
   template: FooterTemplate,
-  dependencies: [UDExAccordionItem],
+  dependencies: [UDExAccordion, UDExAccordionItem, Icon, UDExButton, UDExDivider],
 })
 /**
  * Triggered on click interaction with logo in footer

package/src/HeroBanner.ts

@@ -4,7 +4,7 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
-import "@ui5/webcomponents/dist/Icon.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/media-play.js";
 import "@ui5/webcomponents-icons/dist/media-pause.js";
 
@@ -31,6 +31,7 @@ export enum imageLoadingStrategies {
   renderer: litRender,
   styles: HeroBannerCss,
   template: HeroBannerTemplate,
+  dependencies: [Icon],
 })
 class UDExHeroBanner extends UI5Element {
   /**

package/src/Link.ts

@@ -2,6 +2,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import Link from "@ui5/webcomponents/dist/Link.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import linkCss from "@ui5/webcomponents/dist/generated/themes/Link.css.js";
 import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
@@ -34,6 +35,7 @@ import IconPlacement from "./types/IconPlacement.js";
   renderer: litRender,
   styles: [linkCss, LinkCss],
   template: LinkTemplate,
+  dependencies: [Icon],
 })
 
 class UDExLink extends Link {

package/src/ListSelectAll.ts

@@ -8,6 +8,7 @@ import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import { ListMode } from "./types/List.js";
 import { SELECT_ALL } from "./generated/i18n/i18n-defaults.js";
 import ListSelectAllTemplate from "./generated/templates/ListSelectAllTemplate.lit";
+import UDExListItem from "./ListItem.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
@@ -34,6 +35,7 @@ import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css";
   renderer: litRender,
   styles: ListGroupHeaderCss,
   template: ListSelectAllTemplate,
+  dependencies: [UDExListItem],
 })
 
 @event("select-all", {

package/src/MastheadItem.hbs

@@ -15,7 +15,7 @@
         href="{{href}}"
         aria-label="{{accessibleLabel}}"
         aria-describedby="{{ariaDescribedBy}}"
-        @click="{{handleNavigationItemClick}}">
+        @click="{{handleItemClick}}">
         {{> content}}
     </a>
 {{else if isProfileBtn}}
@@ -29,7 +29,7 @@
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{handleNavigationItemClick}}">
+        @click="{{handleItemClick}}">
         {{> content}}
     </span>
     {{#if showDropdown}}
@@ -45,7 +45,7 @@
         aria-haspopup="{{hasDropdownSlot}}"
         aria-label="{{accessibleLabel}}"
         @keydown="{{handleKeyDown}}"
-        @click="{{handleNavigationItemClick}}">
+        @click="{{handleItemClick}}">
         {{> content}}
     </button>
     {{#if showDropdown}}