@sapudex/web-components 0.231.4 → 0.231.6

package/src/FilterMenu.hbs

@@ -1,38 +1,38 @@
 <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"
-            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"
+                accessible-name="{{_iconAccessibleNameText}}">
+            </ui5-icon>
+        </span>
+    </button>
     <ui5-popover
         id="{{this._id}}_udex-filter-menu-dropdown"
         hide-arrow
@@ -59,8 +59,6 @@
     </ui5-popover>
 </div>
 
-
-
 {{#*inline "buttons"}}
     {{#unless hideActionBar}}
         <div class="udex-filter-menu__footer" slot="footer" name="footer">
@@ -69,7 +67,6 @@
                     class="udex-filter-menu__result-btn"
                     size="Medium"
                     design="Primary"
-                    ?disabled="{{disabledButtons}}"
                     @keydown="{{handleKeyDownResultBtn}}"
                     @click="{{handleResult}}">
                     {{getResultLabelText}}
@@ -81,7 +78,6 @@
                     size="Medium"
                     design="Tertiary"
                     @keydown="{{handleKeyDownResetBtn}}"
-                    ?disabled="{{disabledButtons}}"
                     @click="{{handleReset}}">
                     {{getResetLabelText}}
                 </udex-button>

package/src/FilterMenu.ts

@@ -27,6 +27,7 @@ import UDExFilterMenuSelectAll from "./FilterMenuSelectAll.js";
 import UDExListSelectAll from "./ListSelectAll.js";
 import UDExBadge from "./Badge.js";
 import UDExListItemBase from "./ListItemBase.js";
+import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 
 import { RESET, SHOW_RESULTS, SELECT_OPTIONS } from "./generated/i18n/i18n-defaults.js";
 import FilterMenuTemplate from "./generated/templates/FilterMenuTemplate.lit.js";
@@ -36,6 +37,11 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 
+type initialItemState = {
+  id: string,
+  selected: boolean,
+  indeterminate?: boolean,
+}
 /**
  * @class
  *
@@ -251,7 +257,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
    * Hides the result button in the footer.
    *
    * @type {boolean}
-   * @name sap.ui.webc.web-components.UDExFilterMenu.prototype.hideResultBtn
    * @defaultvalue false
    * @public
    */
@@ -262,7 +267,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
    * Hides the reset button in the footer.
    *
    * @type {boolean}
-   * @name sap.ui.webc.web-components.UDExFilterMenu.prototype.hideResetBtn
    * @defaultvalue false
    * @public
    */
@@ -303,10 +307,27 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: String, defaultValue: "combobox" })
     triggerAccessibleRole!: string;
 
+  /**
+   * Determines whether the filter should be applied.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _shouldApplyFilter: boolean = false;
+
+  /**
+   * Internal flag to request a re-render of the component.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
   _trigger!: UDExButton;
   _search!: UDExSearch;
   _popover!: Popover;
   _breakpointSizeXS = 640;
+  _initialState: Array<initialItemState> = [];
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -355,6 +376,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleReset(): void {
+    this._shouldApplyFilter = true;
+    this.onDropdownClose();
     this.fireEvent("reset-click", {
       restoredItems: this.selectedItems,
     });
@@ -362,12 +385,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleResult(): void {
-    if (!this.disabledButtons) {
-      this._popover.close();
-      this.fireEvent("result-click", {
-        selectedItems: this.selectedItems,
-      });
-    }
+    this._shouldApplyFilter = true;
+    this.onDropdownClose();
+    this.fireEvent("result-click", {
+      selectedItems: this.selectedItems,
+    });
   }
 
   handleKeyDownList(e: KeyboardEvent): void {
@@ -443,6 +465,8 @@ class UDExFilterMenu extends UDExSearchableListBase {
       const content = this._popover.shadowRoot!.querySelector("[part=content]") as HTMLElement;
       content.style.maxHeight = this.height;
     }
+
+    this._initialState = this._getInitialState(this.items);
     this.fireEvent("before-open");
   }
 
@@ -459,11 +483,54 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   _dropdownAfterClose(): void {
+    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.fireEvent("after-close");
   }
 
+  _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;
+  }
+
   get disableAllowTargetOverlap(): boolean {
     return !this.disableTargetOverlap;
   }
@@ -482,10 +549,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return hasLabel ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledButtons(): boolean {
-    return !this.selectedItems.length && !this.selectAll;
-  }
-
   get _iconAccessibleNameText(): string {
     return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
   }
@@ -503,17 +566,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/MastheadShell.ts

@@ -3,6 +3,7 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 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 type { ChangeInfo } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import ResizeHandler, { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -30,7 +31,7 @@ import AnalyticsName from "./types/AnalyticsName.js";
 // Styles
 import MastheadShellCss from "./generated/themes/MastheadShell.css.js";
 
-const canvasContentFont = "16px '72 Brand Variable'";
+const canvasContentFont = "14px '72 Brand Variable'";
 type MastheadSlottedItem = UDExMastheadItem | UDExMastheadProfileMenu | UDExMastheadMenu | UDExMastheadCountrySelector | undefined | null;
 type MastheadItemType = UDExMastheadItem | null | undefined;
 export const MastheadOriginalEvent = {
@@ -48,6 +49,7 @@ export const AnalyticsNameEventDetail = {
 };
 
 export enum UDExMastheadVariable {
+  itemArrowIconMarginInlineStart = "--udex-masthead-item-arrow-margin-inline-start",
   mobileMenuHeight = "--udex-masthead-shell-mobile-menu-height",
   itemButtonIconSize = "--udex-masthead-item-button-icon-size",
   itemArrowIconSize = "--udex-masthead-item-arrow-icon-size",
@@ -262,7 +264,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines overflow style for the body after clicking mobile menu opener button
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -271,7 +273,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines the visibility of the Search by default.
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -280,7 +282,7 @@ class UDExMastheadShell extends UI5Element {
   /**
    * Defines sticky position for component
    *
-   * @default ""
+   * @default false
    * @public
    */
   @property({ type: Boolean })
@@ -417,7 +419,9 @@ class UDExMastheadShell extends UI5Element {
       this.focusSearchBtn();
     }
 
-    this.updateVisibility();
+    if (this.shouldHandleMobileView) {
+      this.updateVisibility();
+    }
   }
 
   onEnterDOM(): void {
@@ -503,6 +507,12 @@ class UDExMastheadShell extends UI5Element {
     }
   }
 
+  onInvalidation({ name }: ChangeInfo): void {
+    if (name === "default" && this.shouldHandleMobileView) {
+      this.handleMobileMode();
+    }
+  }
+
   handleRightArrow(e: KeyboardEvent): void {
     if (isRight(e)) {
       const currentItem = e.target as UDExMastheadItem;
@@ -685,7 +695,9 @@ class UDExMastheadShell extends UI5Element {
   }
 
   getItemArrowIconWidth(): number {
-    return this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
+    const arrowIconSize = this.getItemIconSize(UDExMastheadVariable.itemArrowIconSize);
+    const marginInlineStart = this.getItemIconSize(UDExMastheadVariable.itemArrowIconMarginInlineStart);
+    return arrowIconSize + marginInlineStart;
   }
 
   getMainMenuWidth(): number {
@@ -695,7 +707,7 @@ class UDExMastheadShell extends UI5Element {
       const mainItem = item as UDExMastheadItem;
       const hasArrowIcon = mainItem.hasArrowDown && !mainItem.hideArrowIcon;
       const arrowIconWidth = hasArrowIcon ? this.getItemArrowIconWidth() : 0;
-      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar) + arrowIconWidth);
+      return accumulatedWidth + this.getItemWidth(mainItem) + (index && parseInt(gapItemVar)) + arrowIconWidth;
     }, 0);
   }
 

package/src/Search.ts

@@ -786,6 +786,7 @@ class UDExSearch extends UI5Element {
   }
 
   handleSubmitValue(): void {
+    this.handleDebounce.cancel();
     this.onClosePopover();
     this.fireEvent("submit-search-value", { value: this.value });
   }

package/src/SearchableListBase.hbs

@@ -16,7 +16,7 @@
     </span>
 {{/if}}
 {{#if isListEmpty}}
-    <div class="udex-no-result"><span>{{getNoResultText}}&lrm;</span></div>
+    <div class="udex-no-result"><span>{{getNoResultText}}</span></div>
 {{else if busy}}
     <ui5-busy-indicator
         class="udex-busy-indicator"

package/src/SelectBox.hbs

@@ -23,16 +23,17 @@
                 aria-expanded="{{tokenizerExpanded}}"
                 aria-activedescendant>
                 {{#if label}}
-                    <span id="{{this._id}}-single-label" class="{{labelClass}}">
-                    {{label}}
-                    {{#if required}}
-                        *
-                    {{/if}}
-                </span>
+                    <span class="{{labelClass}}">
+                      {{label}}
+                      {{#if required}}
+                          *
+                      {{/if}}
+                    </span>
+                    <span class="hidden" id="{{this._id}}-single-label">{{accInfo.ariaLabel}}</span>
                 {{/if}}
                 {{#if showSingleSelectedOption}}
                     <div class="udex-text-field__text-holder">
-                        <span class="udex-text-field__single-label">
+                        <span class="udex-text-field__single-label" aria-hidden="true">
                             {{{_singleSelectedOption}}}
                         </span>
                     </div>
@@ -66,15 +67,12 @@
                         aria-expanded="{{accessibilityAttributes.expanded}}"
                         aria-controls="{{accessibilityAttributes.controls}}"
                         aria-haspopup="{{accessibilityAttributes.hasPopup}}"
-                        aria-label="{{accessibilityAttributes.ariaLabel}}"
                         class="udex-text-field__trigger"
                         tabindex="{{triggerTabIndex}}"
                         @keydown="{{handleKeyDownTrigger}}"
                         @click="{{getHandleMultiSelectOpen}}">
-                            <ui5-icon
-                                name="navigation-down-arrow"
-                                accessible-name="{{iconAccessibleNameText}}">
-                            </ui5-icon>
+                        <ui5-icon name="navigation-down-arrow"></ui5-icon>
+                        <span class="hidden">{{accessibilityAttributes.ariaLabel}}</span>
                     </button>
                 {{/if}}
             </div>

package/src/TextField.hbs

@@ -39,20 +39,22 @@
       />
 
       {{#if icon}}
-        <udex-control-button
-          accessible-name="{{accessibleIconName}}"
-          tooltip="{{showButtonTooltip}}"
-          ?active="{{active}}"
-          ?disabled="{{disabled}}"
-          ?readonly="{{readonly}}"
-          ?non-interactive="{{readonly}}"
-          design="{{valueState}}"
-          icon="{{icon}}"
-          @click="{{handleIconClick}}"
-          part="textfield-control-btn"
-          size="Large"
-          class="udex-text-field_icon-container"
-        ></udex-control-button>
+          <udex-control-button
+              accessible-name="{{buttonAccessibleName}}"
+              accessible-description="{{buttonAccessibleDescription}}"
+              tooltip="{{showButtonTooltip}}"
+              ?active="{{active}}"
+              ?disabled="{{disabled}}"
+              ?readonly="{{readonly}}"
+              ?non-interactive="{{readonly}}"
+              ?_is-combobox-role="{{_isComboboxRole}}"
+              design="{{valueState}}"
+              icon="{{icon}}"
+              @click="{{handleIconClick}}"
+              part="textfield-control-btn"
+              size="Large"
+              class="udex-text-field_icon-container">
+          </udex-control-button>
       {{/if}}
   </div>
 

package/src/TextField.ts

@@ -313,65 +313,42 @@ class UDExTextField extends UI5Element {
   @property({ type: Boolean })
     _isTouched!: boolean;
 
+  /**
+   * Determines Combobox role for the button.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isComboboxRole?: boolean;
+
   static i18nBundle: I18nBundle;
 
   static async onDefine(): Promise<void> {
     UDExTextField.i18nBundle = await getI18nBundle("@sapudex/web-components");
   }
 
-  get valueStateTypeMappings(): Record<string, string> {
-    return {
-      "Success": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),
-      "Standard": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),
-      "Error": UDExTextField.i18nBundle.getText(VALUE_STATE_ERROR),
-      "Warning": UDExTextField.i18nBundle.getText(VALUE_STATE_WARNING),
-    };
-  }
-
-  get hasValueState(): boolean {
-    return this.valueState !== ValueState.Standard;
-  }
-
-  get valueStateText(): string | undefined {
-    return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : undefined;
-  }
-
-  get readOnlyStateText(): string {
-    return UDExTextField.i18nBundle.getText(READ_ONLY);
-  }
-
-  get ariaDescribedById(): string {
-    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
-  }
-
-  get supportingTextId(): string {
-    return this.supportingText ? `${this._id}-supportingTextDesc` : "";
-  }
-
-  get valueStateTextId(): string {
-    return this.hasValueState ? `${this._id}-valueStateDesc` : "";
-  }
+  onBeforeRendering(): void {
+    if ((this.value || this.active) && this.labelActiveClass === "") {
+      this.labelActiveClass = this._labelActiveClassName;
+    } else if (!this.active && !this.value && this.labelActiveClass.length) {
+      this.labelActiveClass = "";
+    }
 
-  get readOnlyStateTextId(): string {
-    return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
-  }
+    this.isInputReadonly = this.readonly || this.displayonly;
 
-  get accInfo(): AccInfo {
-    return {
-      "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
-      "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
-      "ariaLabelledBy": this.accessibleNameRef || undefined,
-      "ariaLabel": this.accessibleName || undefined,
-      "ariaHasPopup": this._ariaHasPopup || undefined,
-    };
+    this.labelClasses = `udex-text-field__label ${this.labelActiveClass}`;
   }
 
-  get inputRole(): string | undefined {
-    return this.isAutoCompleteDisabled ? "presentation" : undefined;
-  }
+  onAfterRendering(): void {
+    const directionStyles: string = window
+      .getComputedStyle(this)
+      .getPropertyValue("direction");
 
-  get isAutoCompleteDisabled(): boolean {
-    return this.autocomplete === "off" || this.autocomplete === "new-password";
+    if (!directionStyles) {
+      this.direction = "ltr";
+    } else {
+      this.direction = directionStyles;
+    }
   }
 
   handleKeydown(e: KeyboardEvent): void {
@@ -415,33 +392,77 @@ class UDExTextField extends UI5Element {
     this.fireEvent("click-icon");
   }
 
-  onBeforeRendering(): void {
-    if ((this.value || this.active) && this.labelActiveClass === "") {
-      this.labelActiveClass = this._labelActiveClassName;
-    } else if (!this.active && !this.value && this.labelActiveClass.length) {
-      this.labelActiveClass = "";
-    }
+  get _inputHolder(): HTMLElement {
+    return this.shadowRoot!.querySelector<HTMLElement>(".udex-text-field__wrap")!;
+  }
 
-    this.isInputReadonly = this.readonly || this.displayonly;
+  get valueStateTypeMappings(): Record<string, string> {
+    return {
+      "Success": UDExTextField.i18nBundle.getText(VALUE_STATE_SUCCESS),
+      "Standard": UDExTextField.i18nBundle.getText(VALUE_STATE_INFORMATION),
+      "Error": UDExTextField.i18nBundle.getText(VALUE_STATE_ERROR),
+      "Warning": UDExTextField.i18nBundle.getText(VALUE_STATE_WARNING),
+    };
+  }
 
-    this.labelClasses = `udex-text-field__label ${this.labelActiveClass}`;
+  get hasValueState(): boolean {
+    return this.valueState !== ValueState.Standard;
   }
 
-  onAfterRendering(): void {
-    const directionStyles: string = window
-      .getComputedStyle(this)
-      .getPropertyValue("direction");
+  get valueStateText(): string {
+    return this.valueState !== ValueState.Standard ? this.valueStateTypeMappings[this.valueState] : "";
+  }
 
-    if (!directionStyles) {
-      this.direction = "ltr";
-    } else {
-      this.direction = directionStyles;
-    }
+  get readOnlyStateText(): string {
+    return UDExTextField.i18nBundle.getText(READ_ONLY);
+  }
+
+  get ariaDescribedById(): string {
+    return `${this.supportingTextId} ${this.valueStateTextId} ${this.readOnlyStateTextId}`.trim();
+  }
+
+  get supportingTextId(): string {
+    return this.supportingText ? `${this._id}-supportingTextDesc` : "";
+  }
+
+  get valueStateTextId(): string {
+    return this.hasValueState ? `${this._id}-valueStateDesc` : "";
+  }
+
+  get readOnlyStateTextId(): string {
+    return this.readonly ? `${this._id}-stateReadOnlyDesc` : "";
+  }
+
+  get accInfo(): AccInfo {
+    return {
+      "ariaInvalid": this.valueState === ValueState.Error ? "true" : undefined,
+      "ariaDescribedBy": this.ariaDescribedBy ? this.ariaDescribedBy : this.ariaDescribedById || undefined,
+      "ariaLabelledBy": this.accessibleNameRef || undefined,
+      "ariaLabel": this.accessibleName || undefined,
+      "ariaHasPopup": this._ariaHasPopup || undefined,
+    };
+  }
+
+  get inputRole(): string | undefined {
+    return this.isAutoCompleteDisabled ? "presentation" : undefined;
+  }
+
+  get isAutoCompleteDisabled(): boolean {
+    return this.autocomplete === "off" || this.autocomplete === "new-password";
   }
 
   get readonlyNotDisabled(): boolean {
     return this.isInputReadonly && !this.disabled;
   }
+
+  get buttonAccessibleName(): string {
+    return this._isComboboxRole ? this.label : this.accessibleIconName || this.icon;
+  }
+
+  get buttonAccessibleDescription(): string {
+    const label = this._isComboboxRole ? this.value : "";
+    return `${label} ${this.supportingText || ""} ${this.valueStateText}`;
+  }
 }
 
 UDExTextField.define();