@sapudex/web-components 0.176.0 → 0.184.0

package/src/AccordionItem.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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import "@ui5/webcomponents/dist/Icon.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/AllIcons.js";
 import "@ui5/webcomponents-icons/dist/feeder-arrow.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
@@ -42,7 +42,7 @@ type ToggleAllEvent = {
   renderer: litRender,
   styles: AccordionItemCss,
   template: AccordionItemTemplate,
-  dependencies: [UDExBadge],
+  dependencies: [UDExBadge, Icon],
 })
 
 /**

package/src/Badge.ts

@@ -4,6 +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 "@ui5/webcomponents/dist/Badge.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
 
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 
@@ -44,7 +45,7 @@ export enum BadgeSize {
   renderer: litRender,
   styles: BadgeCss,
   template: BadgeTemplate,
-  dependencies: [],
+  dependencies: [Icon],
 })
 class UDExBadge extends UI5Element {
   /**

package/src/Breadcrumbs.hbs

@@ -10,9 +10,9 @@
 				aria-label="{{_dropdownArrowAccessibleNameText}}"
 				aria-haspopup="true">
 				<ui5-icon
-                    name="slim-arrow-down"
-                    title="{{_dropdownArrowAccessibleNameText}}">
-                </ui5-icon>
+            name="slim-arrow-down"
+            title="{{_dropdownArrowAccessibleNameText}}">
+        </ui5-icon>
 			</button>
 		</li>
 		{{#each _linksData}}

package/src/Breadcrumbs.ts

@@ -19,8 +19,8 @@ import breadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs
 import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
 import BreadcrumbsPopover from "./generated/templates/BreadcrumbsPopoverTemplate.lit.js";
 import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
-import Link from "./Link.js";
-import Dropdown from "./Dropdown.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExLink from "./Link.js";
 import {
   BREADCRUMBS_ARIA_LABEL,
   BREADCRUMBS_OVERFLOW_ARIA_LABEL,
@@ -66,7 +66,7 @@ export type UDExBreadcrumbsItemClickEventDetail = {
   template: BreadcrumbsTemplate,
   staticAreaTemplate: BreadcrumbsPopover,
   staticAreaStyles: [BreadcrumbsPopoverCss],
-  dependencies: [UDExBreadcrumbsItem, Link, Dropdown, Icon],
+  dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, Icon],
 })
 /**
  * Fires when a `BreadcrumbsItem` is clicked.
@@ -132,7 +132,7 @@ class UDExBreadcrumbs extends UI5Element {
   @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
     items!: Array<UDExBreadcrumbsItem>;
 
-  responsivePopover?: Dropdown;
+  responsivePopover?: UDExDropdown;
   _itemNavigation?: ItemNavigation;
   _shouldFocusFirstVisibleItem!: boolean;
 
@@ -156,12 +156,12 @@ class UDExBreadcrumbs extends UI5Element {
     });
   }
 
-  async _getResponsePopover(): Promise<Dropdown> {
+  async _getResponsePopover(): Promise<UDExDropdown> {
     const staticAreaItem = await this.getStaticAreaItemDomRef();
-    return staticAreaItem!.querySelector<Dropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;
+    return staticAreaItem!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;
   }
 
-  _getFocusableItems(): Array<Link> {
+  _getFocusableItems(): Array<UDExLink> {
     const items = this._links;
     items.unshift(this._dropdownArrowLink);
 
@@ -206,7 +206,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {
-    const link = e.target as Link,
+    const link = e.target as UDExLink,
       items = this._getItems(),
       item = items.find(x => `${x._id}-link` === link.id)!,
       {
@@ -251,7 +251,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _onfocusin(e: FocusEvent): void {
-    const currentItem = e.target as Link;
+    const currentItem = e.target as UDExLink;
 
     this._itemNavigation?.setCurrentItem(currentItem);
   }
@@ -272,7 +272,7 @@ class UDExBreadcrumbs extends UI5Element {
   }
 
   _focusFirstVisibleItem(): void {
-    Array.from(this.shadowRoot!.querySelectorAll<Link>("[udex-link]"))[0].focus();
+    Array.from(this.shadowRoot!.querySelectorAll<UDExLink>("[udex-link]"))[0].focus();
     this._shouldFocusFirstVisibleItem = false;
   }
 
@@ -280,15 +280,15 @@ class UDExBreadcrumbs extends UI5Element {
    * Getter for the interactive element that opens the overflow
    * @private
    */
-  get _dropdownArrowLink(): Link {
-    return this.shadowRoot!.querySelector<Link>(".udex-breadcrumbs__trigger")!;
+  get _dropdownArrowLink(): UDExLink {
+    return this.shadowRoot!.querySelector<UDExLink>(".udex-breadcrumbs__trigger")!;
   }
 
   /**
    * Getter for the list of links corresponding to the abstract breadcrumb items
    */
-  get _links(): Array<Link> {
-    return Array.from(this.shadowRoot!.querySelectorAll<Link>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
+  get _links(): Array<UDExLink> {
+    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(".udex-breadcrumbs__link-wrapper [ui5-link]"));
   }
 
   /**

package/src/BreadcrumbsPopover.hbs

@@ -17,7 +17,7 @@
           target="{{this.target}}"
           class="udex-breadcrumbs__item udex-breadcrumbs__item--{{@index}} udex-breadcrumbs__item--with-icon" 
           icon={{this.icon}}
-          icon-placement="start" 
+          icon-placement="Start" 
           accessible-name="{{this.textContent}}"
           data-ui5-stable="{{this.stableDomRef}}">
           {{this.textContent}}

package/src/CountrySelector.ts

@@ -350,7 +350,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   get ariaControls(): string | null | undefined {
-    const list = this.shadowRoot!.querySelector<UDExList>("udex-list");
+    const list = this.shadowRoot!.querySelector<UDExList>("[udex-list]");
     return list?.getAttribute("id");
   }
 
@@ -415,7 +415,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
-    this.getInput()?.shadowRoot!.querySelector<Button>("udex-control-button")?.focus();
+    this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
   handleItemPress(e: CustomEvent) {
@@ -529,7 +529,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   getSearch(): Search {
-    return this.shadowRoot!.querySelector<Search>("udex-search")!;
+    return this.shadowRoot!.querySelector<Search>("[udex-search]")!;
   }
 
   getDropdownPopover() {
@@ -537,11 +537,11 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   getDropdown(): UDExDropdown {
-    return this.shadowRoot!.querySelector<UDExDropdown>("udex-dropdown")!;
+    return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
   }
 
   getInput(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>("udex-text-field")!;
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   get effectiveAriaLabel(): string {

package/src/DatePicker.hbs

@@ -1,10 +1,9 @@
 <div
     class="udex-date-picker__container">
     <udex-text-field
-        @click="{{handleInputClick}}"
-        @mousedown="{{handleInputMouseDown}}"
-        @keydown="{{handleInputKeyDown}}"
-        class="udex-date-picker__input udex-date-picker__trigger"
+        value="{{value}}"
+        @ui5-change="{{_onInputChange}}"
+        class="udex-date-picker__input"
         label="{{label}}"
         accessible-name="{{dateAccessibleName}}"
         accessible-name-ref="{{accessibleNameRef}}"
@@ -13,8 +12,8 @@
         ?disabled="{{disabled}}"
         ?required="{{required}}"
         ?readonly="{{readonly}}"
-        value="{{value}}"
         icon="appointment-2"
+        @ui5-click-icon="{{handleInputClick}}"
         value-state="{{valueState}}"
     >
     </udex-text-field>

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>