@sapudex/web-components 2.22.0 → 2.23.0

package/cypress/specs/Tag.cy.tsx

@@ -16,7 +16,7 @@ const linkTag = <UDExTag id="tag-link" text="SAP home page" href="https://sap.co
 
 describe("Tag", () => {
   it("is rendered", () => {
-    cy.mount(<UDExTag></UDExTag>)
+    cy.mount(<UDExTag text="tag"></UDExTag>)
     cy.get("[udex-tag]").should("exist")
   });
 

package/cypress/specs/TextField.cy.tsx

@@ -85,6 +85,12 @@ describe("Text Field", () => {
     cy.get("[udex-text-field]").shadow().find("input").should("have.attr", "readonly")
   });
 
+  it("sets name attribute to input element", () => {
+    const name = "my-name";
+    cy.mount(<UDExTextField name={name}></UDExTextField>);
+    cy.get("[udex-text-field]").shadow().find("input").should("have.attr", "name", name)
+  });
+
   it("Value attribute is set", () => {
     const TEST_VALUE = "Test value";
     cy.get("#defaultTextField").shadow().find("input").should("have.value", TEST_VALUE);
@@ -132,6 +138,15 @@ describe("Text Field", () => {
     })
   });
 
+  it("sets object fieldRef current to input element inside shadow root", () => {
+    const fieldRefObj = { current: null as HTMLInputElement | null };
+    cy.mount(<UDExTextField fieldRef={fieldRefObj}></UDExTextField>);
+    cy.get('[udex-text-field]').shadow().find('.udex-text-field__input').then(($input) => {
+        expect(fieldRefObj.current).to.be.instanceOf(HTMLInputElement);
+        expect(fieldRefObj.current?.className).to.include("udex-text-field__input");
+      });
+  });
+
   describe("Label classes", () => {
     beforeEach(() => {
       cy.mount(textFieldWithLabel)

package/cypress/specs/Textarea.cy.tsx

@@ -1,36 +1,18 @@
 import { UDExTextArea } from  "../support/component-imports.js";
+import { UDExValueState } from "../../src/types/common.js";
 
-const defaultTextarea = <UDExTextArea
-  valueState="Standard"
-  id="defaultTextArea">
-</UDExTextArea>
-
-const textareaWithAttributes = <UDExTextArea
-  valueState="Standard"
-  label="Label"
-  value="Value"
-  rows={3}
-  supportingText="Supporting Text"
-  id="textAreaWithAttributes">
-</UDExTextArea>
-
-const textareaWithMaxLength = <UDExTextArea       
-  value="Test value"
-  maxlength={10}
-  id="limitedTextArea">
-</UDExTextArea>
-
-const growingTextarea = <UDExTextArea       
-  valueState="Standard"
-  value="123"
-  growing
-  growingMaxLines={5}
-  id="growingTextarea">
-</UDExTextArea>
+const state = UDExValueState.Standard;
+const label = "Label";
+const value = "Value";
+const text = "Supporting Text";
+const LABEL_ACTIVE_CLASS = "udex-textarea__label--active";
 
-describe("Textarea", () => {
-  const LABEL_ACTIVE_CLASS = "udex-textarea__label--active";
+const defaultTextarea = <UDExTextArea valueState={state} id="defaultTextArea"></UDExTextArea>
+const textareaWithAttributes = <UDExTextArea valueState={state} label={label} value={value} rows={3} supportingText={text} id="textAreaWithAttributes"></UDExTextArea>
+const textareaWithMaxLength = <UDExTextArea value="Test value" maxlength={10} id="limitedTextArea"></UDExTextArea>
+const growingTextarea = <UDExTextArea valueState={state} value="123" growing growingMaxLines={5} id="growingTextarea"></UDExTextArea>
 
+describe("Textarea", () => {
   beforeEach(() => {
     cy.mount(defaultTextarea);
   })
@@ -70,13 +52,13 @@ describe("Textarea", () => {
 
     it("label attribute is set", () => {
       cy.get("#textAreaWithAttributes").then($textArea => {
-        expect($textArea.attr("label")).eqls("Label")
+        expect($textArea.attr("label")).eqls(label)
       })
     });
 
     it("value attribute is set", () => {
       cy.get("#textAreaWithAttributes").then($textArea => {
-        expect($textArea.attr("value")).eqls("Value")
+        expect($textArea.attr("value")).eqls(value)
       })
     });
 
@@ -88,7 +70,7 @@ describe("Textarea", () => {
 
     it("supportingText attribute is set", () => {
       cy.get("#textAreaWithAttributes").then($textArea => {
-        expect($textArea.attr("supporting-text")).eqls("Supporting Text")
+        expect($textArea.attr("supporting-text")).eqls(text)
       })
     });
 
@@ -122,7 +104,7 @@ describe("Textarea", () => {
     });
 
     it("aria-invalid attribute is set when valueState is Error", () => {
-      cy.mount(<UDExTextArea id="invalidTextArea" valueState="Error"></UDExTextArea>)
+      cy.mount(<UDExTextArea id="invalidTextArea" valueState={UDExValueState.Error}></UDExTextArea>)
       cy.get("#invalidTextArea").shadow().find("textarea").should("have.attr", "aria-invalid")
     });
   });

package/dist/CountrySelector.d.ts

@@ -1,16 +1,7 @@
-import type Popover from "@ui5/webcomponents/dist/Popover.js";
-import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
 import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
 import type { Country } from "./data/CountryListISO3166.js";
-import Search from "./Search.js";
-import UDExDropdown from "./Dropdown.js";
-import UDExSearchableListBase from "./SearchableListBase.js";
-import UDExTextField from "./TextField.js";
-import UDExValueState from "./types/common.js";
-import type { UDExSearchKeydownEventDetail } from "./Search.js";
-import type { UDExSearchableListBaseEvents } from "./SearchableListBase.js";
-import SearchableListBaseTemplate from "./generated/templates/SearchableListBaseTemplate.lit.js";
+import UDExSelectBase from "./SelectBase.js";
 type UDExCountrySelectorChangeSearchEventDetail = {
     value: string;
 };
@@ -32,76 +23,7 @@ type UDExCountrySelectorChangeSearchEventDetail = {
  * @tagname udex-country-selector
  * @public
  */
-declare class UDExCountrySelector extends UDExSearchableListBase {
-    eventDetails: {
-        "open": void;
-        "close": void;
-        "before-close": void;
-        "before-open": void;
-        "change-search": UDExCountrySelectorChangeSearchEventDetail;
-    } & Omit<UDExSearchableListBaseEvents, "change-search">;
-    /**
-     * Defines label text for the input field.
-     *
-     * @default undefined
-     * @public
-     */
-    label?: string;
-    /**
-     * Defines the accessible ARIA name of the component.
-     *
-     * @default undefined
-     * @public
-     */
-    accessibleName?: string;
-    /**
-     * Receives id (or many ids) of the elements that label the component.
-     * @default ""
-     * @public
-     */
-    accessibleNameRef: string;
-    /**
-     * Defines whether the component is required.
-     *
-     * @default false
-     * @public
-     */
-    required: boolean;
-    /**
-     * Allows control over the height.
-     *
-     * @public
-     */
-    height?: string;
-    /**
-     * Defines whether the component is in disabled state.
-     * <br><br>
-     * <b>Note:</b> A disabled component is completely noninteractive.
-     *
-     * @default false
-     * @public
-     */
-    disabled: boolean;
-    /**
-     * Defines whether the component is read-only.
-     * <br><br>
-     * <b>Note:</b> A read-only component is not editable,
-     * but still provides visual feedback upon user interaction.
-     *
-     * @default false
-     * @public
-     */
-    readonly: boolean;
-    /**
-     * Defines whether the component is display-only.
-     * <br><br>
-     * <b>Note:</b> A display-only component is not editable,
-     * but still provides visual feedback upon user interaction, input border is not visible.
-     *
-     * @default false
-     * @public
-     */
-    displayonly: boolean;
+declare class UDExCountrySelector extends UDExSelectBase {
     /**
      * Allows to define the initially preselected country.
      *
@@ -117,81 +39,42 @@ declare class UDExCountrySelector extends UDExSearchableListBase {
      */
     blockedCountryCodes?: string;
     /**
-     * Defines the placeholder of the search.
+     * Allows to hide the flag images in the country selector.
      *
-     * @default ""
-     * @public
-     */
-    searchPlaceholder: string;
-    /**
-     * Defines the value state of the component.
-     *
-     * @default "Standard"
-     * @public
-     */
-    valueState: `${UDExValueState}`;
-    /**
-     * Defines supporting text under the country selector.
-     *
-     * @default undefined
+     * @default false
      * @public
      */
-    supportingText?: string;
+    hideFlagImages?: boolean;
     /**
+     * Indicates whether the country selector is enabled.
      *
-     * @public
+     * @default true
+     * @private
      */
-    hideFlagImages?: boolean;
-    _open?: boolean;
-    countryList: Country[];
-    selectedCountry: Country | undefined;
-    _trigger: UDExTextField;
-    _dropdown: UDExDropdown;
-    _search: Search;
-    _handleResizeBound: ResizeObserverCallback;
-    constructor();
-    onEnterDOM(): void;
-    onExitDOM(): void;
-    onBeforeRendering(): void;
+    _countrySelector: boolean;
+    _countryList: Country[];
+    _selectedCountry: Country | undefined;
     onAfterRendering(): void;
-    getTrigger(): UDExTextField;
-    _dropdownClose(): void;
-    _dropdownOpen(): void;
-    _dropdownBeforeOpen(): void;
-    _dropdownBeforeClose(): void;
-    get searchableList(): object;
-    static get searchableListBaseTemplate(): typeof SearchableListBaseTemplate;
-    _handleResize(): void;
-    handleCloseSearch(): void;
+    onBeforeRendering(): void;
     handleItemPress(e: CustomEvent): void;
-    handleKeyPress(keyEvent: KeyboardEvent): void;
-    handleInputMouseDown(e: CustomEvent): void;
-    handleTriggerClick(): void;
-    handleValueSearch(e: CustomEvent): void;
-    handleSubmitSearch(): void;
-    handleKeyDownSearch(keyEvent: CustomEvent<UDExSearchKeydownEventDetail>): void;
-    handleKeyDownDropdown(e: KeyboardEvent): void;
-    dropDownClose(): void;
-    handleResetSearch(): void;
+    handleInputFocusIn(): void;
+    handleInputFocusOut(e: FocusEvent): void;
+    handleKeyDownSearch(e: KeyboardEvent): void;
+    handleDropdownBeforeOpen(): void;
+    handleDropdownClose(): void;
+    handleOutsideClick(): void;
+    updateImagePosition(): void;
+    filterBlockedCountries(): void;
+    setPreselectedCountry(): void;
+    selectCountryByElement(el: HTMLElement): void;
     prepareCountrySelectorItems(): void;
-    fireChangeSearch(): void;
     getItemTemplate(country: Country): string | undefined;
     getCountryLabel(countryName?: string, localName?: string): string | null;
-    get ariaControls(): string | null | undefined;
-    get selectedCountryFlagX(): string | undefined;
-    get selectedCountryFlagY(): string | undefined;
     get selectedCountryName(): string | null;
     get flagAriaLabel(): string;
-    get triggerIcon(): string | undefined;
-    get countrySelectorClasses(): string;
-    get countrySelectorTriggerClasses(): string;
-    get showFlagImages(): boolean;
-    get isOpenerDisabled(): boolean;
-    getSearch(): Search;
-    getDropdownPopover(): Popover;
-    getDropdown(): UDExDropdown;
-    getTextField(): UDExTextField;
-    get effectiveAriaLabel(): string;
+    get selectedCountryFlagX(): string | undefined;
+    get selectedCountryFlagY(): string | undefined;
+    get showImageFlags(): boolean;
 }
 export default UDExCountrySelector;
 export type { UDExCountrySelectorChangeSearchEventDetail };