@sapudex/web-components 0.111.0

package/src/PhoneNumberField.hbs

@@ -0,0 +1,103 @@
+<div
+    class="udex-phone-number-field"
+    @ui5-selection-change="{{handleSelect}}"
+    @ui5-before-open="{{handleDropdownOpen}}"
+    @ui5-before-close="{{handleDropdownClose}}"
+>
+    {{#if label}}
+        <label
+            class="udex-phone-number-field__label"
+            for="phone"
+        >
+            {{label}}
+            {{#if required}}
+                *
+            {{/if}}
+        </label>
+    {{/if}}
+    <udex-dropdown
+        class="udex-phone-number-field__dropdown"
+        id="dropdown-menu"
+        horizontal-align="Left"
+        height="{{height}}"
+    >
+        <udex-list>
+            {{#each countriesList}}
+                <udex-list-item
+                    id="{{iso}}"
+                    ?selected="{{selected}}"
+                >
+                    <div class="udex-phone-number-field__dropdown-list-item">
+                        <div
+                            class="udex-phone-number-field__flag"
+                            style="background-position-x: {{flagX}}; background-position-y: {{flagY}}"
+                        ></div>
+                        <span class="udex-phone-number-field__country-name">{{countryName}}
+                          {{#if localName}}
+                              ({{localName}})
+                          {{/if}}
+                          {{phonePrefix}}
+                        </span>
+                    </div>
+                </udex-list-item>
+            {{/each}}
+        </udex-list>
+    </udex-dropdown>
+    <div class="udex-phone-number-field__input-wrapper">
+        {{#unless displayonly}}
+            <udex-button
+                class="udex-phone-number-field__open-button"
+                size="Large"
+                icon="{{buttonIcon}}"
+                design="Tertiary"
+                icon-end
+                ?disabled="{{isButtonDisabled}}"
+                aria-disabled="{{isButtonDisabled}}"
+                aria-haspopup="true"
+                accessible-name="{{countrySelectorAriaLabel}}"
+                @click="{{onClick}}"
+            >
+                <div class="udex-phone-number-field__open-button-text">
+                    {{selectedCountryName}} {{selectedPhonePrefix}}
+                </div>
+                <div class="udex-phone-number-field__button-content">
+                    <div
+                        class="udex-phone-number-field__flag"
+                        style="{{selectedFlagBackgroundPosition}}"
+                    ></div>
+                </div>
+            </udex-button>
+        {{/unless}}
+        <input
+            class="udex-phone-number-field__input"
+            id="phone"
+            type="tel"
+            .value="{{value}}"
+            placeholder="{{phoneFormat}}"
+            maxlength="{{maxlength}}"
+            ?disabled="{{disabled}}"
+            ?readonly="{{isInputReadonly}}"
+            ?required="{{required}}"
+            autocomplete="tel"
+            aria-label="{{accessibleName}}"
+            aria-labelledby="{{accessibleNameRef}}"
+            aria-required="{{required}}"
+            aria-readonly="{{isInputReadonly}}"
+            aria-disabled="{{disabled}}"
+            aria-invalid="{{ariaInvalid}}"
+            @input="{{handleInput}}"
+            @change="{{handleChange}}"
+            @focus="{{handleFocus}}"
+            @blur="{{handleBlur}}"
+            @keydown={{handleKeyDown}}
+            @keyup={{handleKeyUp}}
+        >
+    </div>
+</div>
+{{#if supportingText}}
+  <udex-status-message
+  ?disabled="{{disabled}}"
+  supporting-text="{{supportingText}}"
+  value-state="{{fieldState}}">
+  </udex-status-message>
+{{/if}}

package/src/PhoneNumberField.ts

@@ -0,0 +1,529 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { COUNTRY_SELECT } from "./generated/i18n/i18n-defaults.js";
+import { Country, CountryListDB } from "./data/CountryListISO3166.js";
+import UDExDropdown from "./Dropdown.js";
+import UDExList from "./List.js";
+import UDExListItem from "./ListItem.js";
+import UDExButton from "./Button.js";
+import UDExStatusMessage from "./StatusMessage.js";
+
+import "@ui5/webcomponents/dist/Icon.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-up.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+import PhoneNumberFieldTemplate from "./generated/templates/PhoneNumberFieldTemplate.lit.js";
+
+// Styles
+import PhoneNumberFieldCss from "./generated/themes/PhoneNumberField.css.js";
+
+export interface ExtendedCountriesListPhoneNumberData extends Country {
+  selected?: boolean;
+}
+
+export enum OpenButtonIcon {
+  iconUp = "slim-arrow-up",
+  iconDown = "slim-arrow-down",
+}
+
+export enum FieldState {
+  Standard = "Standard",
+  Success = "Success",
+  Error = "Error",
+}
+
+const initialPlaceholder: string = "+X XXX-XXX-XXXX";
+
+/**
+ * @class
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-phone-number-field
+ * @public
+ */
+@customElement({
+  tag: "udex-phone-number-field",
+  renderer: litRender,
+  styles: PhoneNumberFieldCss,
+  template: PhoneNumberFieldTemplate,
+  dependencies: [
+    UDExDropdown,
+    UDExList,
+    UDExListItem,
+    UDExButton,
+    UDExStatusMessage,
+  ],
+})
+/**
+   * Fired when the value of the component changes at each keystroke.
+   *
+   * @public
+   */
+@event("input")
+/**
+   * Fired when the input operation has finished by pressing Enter or on focusout.
+   *
+   * @public
+   */
+@event("change")
+class UDExPhoneNumberField extends UI5Element {
+  /**
+   * Defines label text for the textarea field.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    label!: string;
+
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "Standard"
+   * @public
+   */
+  @property({ type: FieldState, defaultValue: FieldState.Standard })
+    fieldState!: `${FieldState}`;
+
+  /**
+   * Defines supporting text under the input field.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    supportingText!: string;
+
+  /**
+   * Defines whether the component is required.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    required!: boolean;
+
+  /**
+   * Defines whether the component is in disabled state.
+   * <br><br>
+   * <b>Note:</b> A disabled component is completely noninteractive.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    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
+   */
+  @property({ type: Boolean })
+    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
+   */
+  @property({ type: Boolean })
+    displayonly!: boolean;
+
+  /**
+   * Defines the country iso code selected by the user
+   * <br><br>
+   * Note: should be used two-letter country codes, e.g.: "DE" | "PL" | "UA" | "US"
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    selectedIso!: string;
+
+  /**
+   * Defines the autoselected country iso code
+   *
+   * @default ""
+   * @private
+   */
+  @property({ type: String, noAttribute: true, defaultValue: "" })
+    autoSelectedIso!: string;
+
+  /**
+   * Allows to define the list of blocked country.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    blockedCountryCodes?: string;
+
+  /**
+   * Allows control over the height.
+   *
+   * @public
+   */
+  @property({ type: String })
+    height?: string;
+
+  /**
+   * Defines the value of the component.
+   *
+   * @default ""
+   */
+  @property({ type: String, defaultValue: "" })
+    value!: string;
+
+  /**
+   * Defines the open button icon
+   *
+   * @private
+   */
+  @property({ type: String, noAttribute: true, defaultValue: OpenButtonIcon.iconDown })
+    buttonIcon!: string;
+
+  /**
+   * Defines the phone format of the input
+   *
+   * @private
+   */
+  @property({ type: String, defaultValue: initialPlaceholder, noAttribute: true })
+    phoneFormat!: string;
+
+  /**
+   * Defines the maxlength of the input
+   *
+   * @private
+   */
+  @property({ validator: Integer })
+    maxlength!: number;
+
+  /**
+   * Defines the accessible ARIA name of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    accessibleName!: string;
+
+  /**
+   * Receives id (or many ids) of the elements that label the component.
+   * @default ""
+   * @public
+   */
+  @property({ defaultValue: "" })
+    accessibleNameRef!: string;
+
+  /**
+   * Defines the allowed keys for the input
+   *
+   * @private
+   */
+  @property({ type: String, multiple: true, noAttribute: true })
+    allowedKeys: string[] = [
+      "Backspace",
+      "Delete",
+      "ArrowLeft",
+      "ArrowRight",
+      "Tab",
+      "Enter",
+      "Home",
+      "End",
+      "Escape",
+    ];
+
+  /**
+   * Keeps the value of previously pressed key
+   *
+   * @private
+   */
+  @property({ type: String, multiple: false, noAttribute: true })
+    previousKey!: string;
+
+  static i18nBundle: I18nBundle;
+
+  static async onDefine() {
+    UDExPhoneNumberField.i18nBundle = await getI18nBundle("sap-ui-webcomponents-bundle");
+  }
+
+  get countrySelectorAriaLabel() {
+    return this.accessibleName || UDExPhoneNumberField.i18nBundle.getText(COUNTRY_SELECT);
+  }
+
+  get countryIso() {
+    return this.selectedIso || this.autoSelectedIso;
+  }
+
+  countriesList: ExtendedCountriesListPhoneNumberData[] = CountryListDB;
+
+  onClick(): void {
+    if (this.isButtonDisabled) {
+      return;
+    }
+    const button = this.getButton();
+    const dropdown = this.getDropdown();
+
+    if (dropdown.open) {
+      dropdown.onClose();
+    } else {
+      dropdown.onOpen(button);
+    }
+  }
+
+  handleInput(e: InputEvent) {
+    this.value = (e.target as HTMLInputElement)?.value.trim();
+
+    this.applyPhoneMask();
+
+    if (!this.value.startsWith(this.selectedPhonePrefix)) {
+      this.selectedIso = "";
+    }
+
+    if (this.value.length === 0 || this.value === "+") {
+      this.autoSelectedIso = "";
+      this.selectedIso = "";
+    }
+
+    this.fireEvent("input");
+  }
+
+  handleChange() {
+    this.fireEvent("change");
+  }
+
+  handleKeyDown = (e: KeyboardEvent) => {
+    const isKeyAllowed = e.key?.match(/[\d+-]/g)
+      || this.allowedKeys.includes(e.key)
+      || e.metaKey
+      || e.ctrlKey
+      || (e.key === " " && this.previousKey !== " ");
+    if (!isKeyAllowed) {
+      e.preventDefault();
+    }
+
+    e.stopPropagation();
+    this.previousKey = e.key;
+  };
+
+  handleKeyUp() {
+    this.value = this.value.replace(/[^\d+ ()-]/g, "").trim();
+    this.applyPhoneMask();
+  }
+
+  handleFocus() {
+    if (this.countryIso.length === 0) {
+      this.phoneFormat = initialPlaceholder;
+    }
+
+    if (this.value.length === 0 || this.value === "+") {
+      this.value = this.selectedPhonePrefix;
+    }
+  }
+
+  handleBlur() {
+    this.applyPlaceholder();
+
+    const prefixLength = this.selectedPhonePrefix.length;
+    const enteredPrefix = this.value.substring(0, prefixLength);
+    const isIncorrectPrefixEntered = enteredPrefix !== this.selectedPhonePrefix;
+
+    const isIncorrectNumberEntered = !this.countryIso || this.value.length <= prefixLength || isIncorrectPrefixEntered;
+
+    if (isIncorrectNumberEntered) {
+      this.value = "";
+    }
+
+    this.fireEvent("change");
+  }
+
+  handleSelect(e: CustomEvent) {
+    const dropdown = this.getDropdown();
+
+    dropdown.onClose();
+
+    this.selectedIso = e.detail.item.id;
+    this.value = this.selectedPhonePrefix;
+    this.phoneFormat = this.value + this.selectedPlaceholder;
+    this.maxlength = this.phoneFormat.length;
+    this.getInputField().focus();
+  }
+
+  handleDropdownOpen() {
+    this.buttonIcon = OpenButtonIcon.iconUp;
+  }
+  handleDropdownClose() {
+    this.buttonIcon = OpenButtonIcon.iconDown;
+  }
+
+  autoSelectCountry(value: string) {
+    const countryToSelect = this.updatedCountriesList.find(country => {
+      const valuePhonePrefix = value.substring(0, country.phonePrefix.length);
+
+      return country.phonePrefix === valuePhonePrefix;
+    });
+
+    if (countryToSelect) {
+      this.autoSelectedIso = countryToSelect.iso;
+    }
+
+    if (this.selectedPhonePrefix && this.selectedPlaceholder) {
+      this.maxlength = this.selectedPhonePrefix.length + this.selectedPlaceholder.length;
+    }
+  }
+
+  applyPhoneMask() {
+    const isNewPrefixEntered = this.value.substring(0, this.selectedPhonePrefix.length) !== this.selectedPhonePrefix;
+    if (this.value.split("")[0] !== "+") {
+      this.value = `+${this.value}`;
+    }
+
+    this.autoSelectCountry(this.value);
+
+    if (isNewPrefixEntered) {
+      return;
+    }
+
+    const mask = this.selectedPhonePrefix + this.selectedPlaceholder;
+    const maskSymbols = [" ", "-", "(", ")"];
+
+    const valueWithMask = this.value.split("").map((char, index) => {
+      if (maskSymbols.includes(char) && char === mask[index]) {
+        return char;
+      }
+      if (maskSymbols.includes(char) && char !== mask[index]) {
+        return "";
+      }
+      if (maskSymbols.includes(mask[index]) && char !== mask[index]) {
+        return `${mask[index]}${char}`;
+      }
+      return char;
+    }).join("");
+
+    this.value = valueWithMask;
+
+    if (this.value.length > this.maxlength) {
+      this.value = this.value.substring(0, this.maxlength);
+    }
+  }
+
+  applyPlaceholder() {
+    this.phoneFormat = this.countryIso.length > 0
+      ? this.selectedPhonePrefix + this.selectedPlaceholder : initialPlaceholder;
+  }
+
+  getDropdown() {
+    return this.shadowRoot!.querySelector<UDExDropdown>(
+      "[udex-dropdown]",
+    )!;
+  }
+
+  getButton() {
+    return this.shadowRoot!.querySelector<UDExButton>(
+      "[udex-button]",
+    )!;
+  }
+
+  getInputField() {
+    return this.shadowRoot!.querySelector<HTMLFormElement>(
+      "input",
+    )!;
+  }
+
+  get selectedPhonePrefix(): string {
+    if (!this.countryIso) {
+      return "";
+    }
+
+    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.phonePrefix
+    || this.updatedCountriesList[0]?.phonePrefix;
+  }
+
+  get selectedPlaceholder(): string {
+    if (!this.countryIso) {
+      return "";
+    }
+
+    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.phoneFmt
+      || this.updatedCountriesList[0]?.phoneFmt;
+  }
+
+  get selectedCountryName(): string {
+    if (!this.countryIso) {
+      return "";
+    }
+
+    return this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0]?.countryName
+      || this.updatedCountriesList[0]?.countryName;
+  }
+
+  get selectedFlagBackgroundPosition() {
+    if (!this.countryIso) {
+      return {};
+    }
+
+    const selectedCountry = this.updatedCountriesList.filter(country => country.iso === this.countryIso)[0];
+
+    if (!selectedCountry) {
+      return {};
+    }
+
+    return { "backgroundPosition": `${selectedCountry.flagX} ${selectedCountry.flagY}` };
+  }
+
+  get ariaInvalid() {
+    return this.fieldState === FieldState.Error ? "true" : null;
+  }
+
+  get isInputReadonly() {
+    return this.readonly || this.displayonly;
+  }
+
+  get isButtonDisabled() {
+    return this.disabled || this.isInputReadonly;
+  }
+
+  get updatedCountriesList(): ExtendedCountriesListPhoneNumberData[] {
+    return this.countriesList.map(country => {
+      if (country.selected) {
+        delete country.selected;
+      }
+
+      if (country.iso === this.countryIso) {
+        country.selected = true;
+      }
+
+      return country;
+    });
+  }
+
+  onBeforeRendering() {
+    this.applyPlaceholder();
+
+    if (this.blockedCountryCodes?.length) {
+      const blockedCountryCodesArray = this.blockedCountryCodes.split(",").map(code => code.trim().toUpperCase());
+      this.countriesList = this.countriesList
+        .filter(country => !blockedCountryCodesArray?.includes(country.iso.toUpperCase()));
+    }
+  }
+}
+
+UDExPhoneNumberField.define();
+
+export default UDExPhoneNumberField;

package/src/ProgressBar.ts

@@ -0,0 +1,35 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ProgressIndicator from "@ui5/webcomponents/dist/ProgressIndicator.js";
+
+// Styles
+import ProgressBarCss from "./generated/themes/ProgressBar.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-progress-bar</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/ProgressBar.js";</code>
+ *
+ * @constructor
+ * @extends ProgressIndicator
+ * @public
+ */
+@customElement({
+  tag: "udex-progress-bar",
+  renderer: litRender,
+  styles: [ProgressIndicator.styles, ProgressBarCss],
+})
+class UDExProgressBar extends ProgressIndicator {
+}
+
+UDExProgressBar.define();
+
+export default UDExProgressBar;

package/src/Quote.hbs

@@ -0,0 +1,20 @@
+<div class="udex-quote__container">
+    <div class="udex-quote__image-container">
+        {{#if image}}
+            <slot name="image" slot="image"></slot>
+        {{/if}}
+    </div>
+    <div class="udex-quote__content-container">
+        <div class="content-container__text-container">
+            <p class="content-container__text">
+                <slot></slot>
+            </p>
+        </div>
+        {{#if author}}
+            <slot slot="author" name="author"></slot>
+        {{/if}}
+        {{#if link}}
+            <slot slot="link" name="link"></slot>
+        {{/if}}
+    </div>
+</div>