@sapudex/web-components 2.22.0 → 2.24.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/Checkbox.js

@@ -10,6 +10,7 @@ import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
 import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from "./generated/i18n/i18n-defaults.js";
 import UDExCheckboxValueState from "./types/Checkbox.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
@@ -57,6 +58,9 @@ let UDExCheckbox = UDExCheckbox_1 = class UDExCheckbox extends CheckBox {
     }
     onEnterDOM() {
         ResizeHandler.register(this, this._handleResizeBound);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
     }
     onAfterRendering() {
         this.shadowRoot?.querySelector(".ui5-checkbox-label")?.removeAttribute("required");

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckboxValueState from \"./types/Checkbox.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport type Label from \"@ui5/webcomponents/dist/Label.js\";\n\n// Styles\nimport CheckboxCss from \"./generated/themes/Checkbox.css.js\";\n\nconst LABEL_TEXT_HEIGHT = 18.5;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: jsxRenderer,\n  styles: [CheckBox.styles, CheckboxCss],\n})\n\nclass UDExCheckbox extends CheckBox {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;\n\n  /**\n   * Defines whether the component text wraps when there is not enough space..\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n    wrappingType: `${WrappingType}` = WrappingType.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onAfterRendering() {\n    this.shadowRoot?.querySelector(\".ui5-checkbox-label\")?.removeAttribute(\"required\");\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  valueStateMappings(): Record<string, string> {\n    return {\n      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),\n      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n    };\n  }\n\n  _handleResize(): void {\n    const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;\n\n    if (labelOverflows && this.wrappingType === WrappingType.Normal) {\n      this.label?.classList.add(\"udex-checkbox__label-multiline\");\n    } else {\n      this.label?.classList.remove(\"udex-checkbox__label-multiline\");\n    }\n  }\n\n  get valueStateText(): string | undefined {\n    if (this.valueState !== UDExCheckboxValueState.None) {\n      return this.valueStateMappings()[this.valueState];\n    }\n  }\n\n  get label(): Label | null {\n    return this.shadowRoot!.querySelector<Label>(\"[ui5-label]\");\n  }\n\n  get labelHeight(): number {\n    return this.label?.getBoundingClientRect().height || 0;\n  }\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckboxValueState from \"./types/Checkbox.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport type Label from \"@ui5/webcomponents/dist/Label.js\";\n\n// Styles\nimport CheckboxCss from \"./generated/themes/Checkbox.css.js\";\n\nconst LABEL_TEXT_HEIGHT = 18.5;\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: jsxRenderer,\n  styles: [CheckBox.styles, CheckboxCss],\n})\n\nclass UDExCheckbox extends CheckBox {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;\n\n  /**\n   * Defines whether the component text wraps when there is not enough space..\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n    wrappingType: `${WrappingType}` = WrappingType.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  onAfterRendering() {\n    this.shadowRoot?.querySelector(\".ui5-checkbox-label\")?.removeAttribute(\"required\");\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  valueStateMappings(): Record<string, string> {\n    return {\n      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),\n      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n    };\n  }\n\n  _handleResize(): void {\n    const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;\n\n    if (labelOverflows && this.wrappingType === WrappingType.Normal) {\n      this.label?.classList.add(\"udex-checkbox__label-multiline\");\n    } else {\n      this.label?.classList.remove(\"udex-checkbox__label-multiline\");\n    }\n  }\n\n  get valueStateText(): string | undefined {\n    if (this.valueState !== UDExCheckboxValueState.None) {\n      return this.valueStateMappings()[this.valueState];\n    }\n  }\n\n  get label(): Label | null {\n    return this.shadowRoot!.querySelector<Label>(\"[ui5-label]\");\n  }\n\n  get labelHeight(): number {\n    return this.label?.getBoundingClientRect().height || 0;\n  }\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}

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 };