@sapudex/web-components 2.2.0 → 2.4.0

package/src/Contact.ts

@@ -0,0 +1,200 @@
+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 slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ContactTemplate from "./ContactTemplate.js";
+import type UDExContactItem from "./ContactItem.js";
+import type UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import parseArrayFromString from "./utils/parseArrayFromString.js";
+import {
+  LOCAL_COUNTRY_NAMES, COMPLETE_LIST_OF, CALL_US_TODAY, CONTACT_US,
+} from "./generated/i18n/i18n-defaults.js";
+import i18n from "@ui5/webcomponents-base/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/i18nBundle.js";
+
+// Styles
+import ContactCss from "./generated/themes/Contact.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+
+export type ContactNumber = {
+  number: string;
+  country: string;
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-contact</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Contact.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-contact
+ * @public
+ */
+@customElement({
+  tag: "udex-contact",
+  renderer: jsxRenderer,
+  styles: ContactCss,
+  template: ContactTemplate,
+})
+
+class UDExContact extends UI5Element {
+  /**
+   * Defines the <code>text</code> for the contact button.
+   *
+   * @public
+   */
+  @property({ type: String })
+    buttonText!: string;
+
+  /**
+   * List of the contact numbers
+   *
+   * @default "[]"
+   * @public
+   */
+  @property({ type: String })
+    contactNumbers: string = "";
+
+  /**
+   * Defines the local country numbers link's href
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    localCountryNumbersLink: string = "";
+
+  /**
+   * Defines if the initial focus should be prevented.
+   * @public
+   */
+  @property({ type: Boolean })
+    preventInitialFocus!: boolean;
+
+  /**
+   * Defines if the focus should be returned to the previously focused element.
+   * @public
+   */
+  @property({ type: Boolean })
+    preventFocusRestore!: boolean;
+
+  /**
+   * Defines the accessible name of the component.
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    accessibleName?: string;
+
+  /**
+   * Defines the IDs of the elements that label the component.
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    accessibleNameRef?: string;
+
+  /**
+   * Slot for list items.
+   *
+   * @slot items
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    items!: Array<UDExContactItem>;
+
+  /**
+   * Defines the mobile mode for component
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isMobileMode: boolean = BreakpointUtils.isAtMost("M");
+
+  _screenResizeHandler: () => void;
+  _screenResizeHandlerAttached?: boolean;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  constructor() {
+    super();
+    this._screenResizeHandler = this._screenResize.bind(this);
+  }
+
+  onEnterDOM() {
+    this._attachScreenResizeHandler();
+  }
+
+  onExitDOM() {
+    this._detachScreenResizeHandler();
+  }
+
+  _openPopover(): void {
+    this._responsivePopover.open = !this._responsivePopover.open;
+  }
+
+  _closePopover(): void {
+    this._responsivePopover.open = false;
+  }
+
+  _screenResize(): void {
+    this._isMobileMode = BreakpointUtils.isAtMost("M");
+  }
+
+  _attachScreenResizeHandler(): void {
+    if (!this._screenResizeHandlerAttached) {
+      window.addEventListener("resize", this._screenResizeHandler);
+      this._screenResizeHandlerAttached = true;
+    }
+  }
+
+  _detachScreenResizeHandler(): void {
+    if (this._screenResizeHandlerAttached) {
+      window.removeEventListener("resize", this._screenResizeHandler);
+      this._screenResizeHandlerAttached = false;
+    }
+  }
+
+  get _contactNumbersArray(): ContactNumber[] {
+    return parseArrayFromString<ContactNumber>(this.contactNumbers);
+  }
+
+  get _responsivePopover(): UI5ResponsivePopover {
+    return this.shadowRoot!.querySelector<UI5ResponsivePopover>(".udex-contact__popover")!;
+  }
+
+  get _completeListTitle(): string {
+    return `${UDExContact.i18nBundle.getText(COMPLETE_LIST_OF)} `;
+  }
+
+  get _localCountryTitle(): string {
+    return UDExContact.i18nBundle.getText(LOCAL_COUNTRY_NAMES);
+  }
+
+  get _numbersTitle(): string {
+    return UDExContact.i18nBundle.getText(CALL_US_TODAY);
+  }
+
+  get _contactUsTitle(): string {
+    return UDExContact.i18nBundle.getText(CONTACT_US);
+  }
+
+  get _hasNumbersList(): boolean {
+    return this._contactNumbersArray.length > 0;
+  }
+}
+
+UDExContact.define();
+
+export default UDExContact;

package/src/ContactItem.ts

@@ -0,0 +1,119 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import slot from "@ui5/webcomponents-base/decorators/slot.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ContactItemTemplate from "./ContactItemTemplate.js";
+import { UDExTarget } from "./types/common.js";
+import UDExContactItemIcon from "./types/ContactItemIcon.js";
+import "@ui5/webcomponents-icons/dist/headset.js";
+import "@ui5/webcomponents-icons/dist/discussion-2.js";
+import "@ui5/webcomponents-icons/dist/email.js";
+
+// Styles
+import ContactItemCss from "./generated/themes/ContactItem.css.js";
+
+type UDExContactItemClickEventDetail = {
+  originalEvent: Event,
+  item: UDExContactItem,
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-contact-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ContactItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-contact-item
+ * @public
+ */
+@customElement({
+  tag: "udex-contact-item",
+  renderer: jsxRenderer,
+  styles: ContactItemCss,
+  template: ContactItemTemplate,
+})
+
+/**
+ * Fires when item is clicked
+ *
+ * @public
+ */
+@event("item-click", {
+  bubbles: true,
+  cancelable: true,
+})
+
+class UDExContactItem extends UI5Element {
+  eventDetails!: {
+    "item-click": UDExContactItemClickEventDetail,
+  };
+
+  /**
+   * Defines the label for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    label!: string;
+
+  /**
+   * Defines the href for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    href!: string;
+
+  /**
+   * Defines the icon name for the item.
+   *
+   * @public
+   */
+  @property({ type: String })
+    icon?: `${UDExContactItemIcon}`;
+
+  /**
+   * Defines target for the item
+   *
+   * @public
+   */
+  @property({ type: String })
+    target: `${UDExTarget}` = UDExTarget._self;
+
+  /**
+   * Slot for the item content.
+   *
+   * @slot
+   * @public
+   */
+  @slot({ type: Node, "default": true })
+    content!: Array<Node>;
+
+  _fireItemClickEvent(e: Event): void {
+    this.fireDecoratorEvent("item-click", {
+      item: this,
+      originalEvent: e,
+    });
+  }
+
+  get _iconName(): string | undefined {
+    if (this.icon) {
+      return UDExContactItemIcon[this.icon].toLowerCase();
+    }
+  }
+}
+
+UDExContactItem.define();
+
+export default UDExContactItem;

package/src/ContactItemTemplate.tsx

@@ -0,0 +1,22 @@
+import type ContactItem from "./ContactItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExLink from "./Link.js";
+
+export default function ContactItemTemplate(this: ContactItem) {
+  return (
+    <div class="udex-contact-item">
+      {this.icon && <UI5Icon class="udex-contact-item__icon" name={this._iconName} mode="Decorative"></UI5Icon>}
+      <div class="udex-contact-item__content">
+        {labelContent.call(this)}
+        <p class="udex-contact-item__description"><slot></slot></p>
+      </div>
+    </div>
+  );
+}
+
+function labelContent(this: ContactItem) {
+  if (this.href) {
+    return <UDExLink onClick={this._fireItemClickEvent} target={this.target} class="udex-contact-item__link" href={this.href}>{this.label}</UDExLink>;
+  }
+  return <span class="udex-contact-item__text">{this.label}</span>;
+}

package/src/ContactTemplate.tsx

@@ -0,0 +1,105 @@
+import type Contact from "./Contact.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButton from "./Button.js";
+import UDExLink from "./Link.js";
+import ButtonType from "@ui5/webcomponents/dist/types/ButtonType.js";
+import UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.js";
+import PopoverHorizontalAlign from "@ui5/webcomponents/dist/types/PopoverHorizontalAlign.js";
+import PopupAccessibleRole from "@ui5/webcomponents/dist/types/PopupAccessibleRole.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+import "@ui5/webcomponents-icons/dist/discussion-2.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+
+export default function ContactTemplate(this: Contact) {
+  return (
+    <div class="udex-contact">
+      {responsivePopover.call(this)}
+      {openerButton.call(this)}
+    </div>
+  );
+}
+
+function responsivePopover(this: Contact) {
+  return (
+    <UI5ResponsivePopover
+      id={`${this._id}-popover`}
+      opener={`${this._id}-opener`}
+      class="udex-contact__popover"
+      placement={PopoverPlacement.Top}
+      horizontalAlign={PopoverHorizontalAlign.End}
+      accessible-role={PopupAccessibleRole.Dialog}
+      preventInitialFocus={this.preventInitialFocus}
+      preventFocusRestore={this.preventFocusRestore}
+      accessibleName={this.accessibleName}
+      accessibleNameRef={this.accessibleNameRef}
+      hideArrow={true}>
+      <div
+        class={{
+          "udex-contact__call-us": true,
+          "udex-contact__call-us_empty": !this._hasNumbersList,
+        }}>
+        {!this._hasNumbersList && <span class="udex-contact__call-us-heading">{this._contactUsTitle}</span>}
+        <UDExButton
+          class="udex-contact__close-btn"
+          icon="sap-icon://decline"
+          type="Button"
+          onClick={this._closePopover}
+          size={UDExButtonSize.Medium}
+          design={UDExButtonDesign.Invisible}
+          accessible-role={UDExButtonAccessibleRole.Button}
+          icon-only>
+        </UDExButton>
+        {this._hasNumbersList && callUsSection.call(this)}
+      </div>
+      <div class="udex-contact__items"><slot></slot></div>
+    </UI5ResponsivePopover>
+  );
+}
+
+function openerButton(this: Contact) {
+  return (
+    <div id={`${this._id}-opener`} class="udex-contact__opener">
+      <UDExButton
+        onClick={this._openPopover}
+        class="udex-contact__button"
+        design={UDExButtonDesign.Primary}
+        size={UDExButtonSize.Large}
+        type={ButtonType.Button}
+        accessibleName={this._isMobileMode ? this.buttonText : undefined}
+        tooltip={this._isMobileMode ? this.buttonText : undefined}
+        icon="sap-icon://discussion-2">
+        {!this._isMobileMode && this.buttonText}
+      </UDExButton>
+    </div>
+  );
+}
+
+function callUsSection(this: Contact) {
+  return (
+    <>
+      <h4 class="udex-contact__call-us-title">{this._numbersTitle}</h4>
+      <div class="udex-contact__numbers">
+        {this._contactNumbersArray.map(({ number, country }) => (
+          <div class="udex-contact__number-wrapper">
+            <span class="udex-contact__country">{country}</span>
+            <UDExLink
+              class="udex-contact__number"
+              href={"tel:".concat(number)}>
+              {number}
+            </UDExLink>
+          </div>
+        ))}
+      </div>
+      <p class="udex-contact__complete-list">
+        {this._completeListTitle}
+        <UDExLink
+          class="udex-contact__local-country-link"
+          href={this.localCountryNumbersLink}>
+          {this._localCountryTitle}
+        </UDExLink>
+      </p>
+    </>
+  );
+}

package/src/CountrySelector.ts

@@ -1,8 +1,6 @@
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
-import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import executeTemplate from "@ui5/webcomponents-base/dist/renderer/executeTemplate.js";
 import {
   isEscape,
@@ -267,15 +265,12 @@ class UDExCountrySelector extends UDExSearchableListBase {
 
   countryList: Country[] = CountryListDB;
   selectedCountry!: Country | undefined;
-  _trigger!: HTMLElement;
+  _trigger!: UDExTextField;
 
   _dropdown!: UDExDropdown;
   _search!: Search;
   _handleResizeBound: ResizeObserverCallback;
 
-  @i18n("@sapudex/web-components")
-  static i18nBundle: I18nBundle;
-
   constructor() {
     super();
     this._shouldFilterItems = false;
@@ -314,16 +309,18 @@ class UDExCountrySelector extends UDExSearchableListBase {
     this._trigger = this.getTrigger();
   }
 
-  getTrigger(): HTMLElement {
-    return this.shadowRoot!.querySelector(".udex-country-selector__dropdown")!;
+  getTrigger(): UDExTextField {
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   _dropdownClose() {
     this.fireDecoratorEvent("close");
+    this._trigger.iconActive = false;
   }
 
   _dropdownOpen() {
     this.fireDecoratorEvent("open");
+    this._trigger.iconActive = true;
   }
 
   _dropdownBeforeOpen() {

package/src/DatePicker.ts

@@ -230,12 +230,13 @@ class UDExDatePicker extends DateComponentBase {
 
   _afterDropdownClose(): void {
     this._dropdownTrigger.active = false;
+    this._dropdownTrigger.iconActive = false;
     this._dropdownTrigger.shadowRoot?.querySelector("input")?.blur();
     this._tempValue = "";
   }
 
   _afterDropdownOpen(): void {
-    this._dropdownTrigger.active = true;
+    this._dropdownTrigger.iconActive = true;
   }
 
   _closeRespPopover(): void {

package/src/EventRibbon.ts

@@ -0,0 +1,143 @@
+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 jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import type {
+  UDExEventRibbonColorSheme, UDExEventRibbonLink, UDExEventRibbonIcon, UDExEventRibbonLogo,
+} from "./types/EventRibbon.js";
+import { eventLogoText, UDExEventRibbonMode } from "./types/EventRibbon.js";
+import "@ui5/webcomponents-icons/add-calendar.js";
+import "@ui5/webcomponents-icons/media-play.js";
+import EventRibbonTemplate from "./EventRibbonTemplate.js";
+
+// Styles
+import EventRibbonCss from "./generated/themes/EventRibbon.css.js";
+import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-event-ribbon</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/EventRibbon.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-event-ribbon",
+  renderer: jsxRenderer,
+  styles: EventRibbonCss,
+  template: EventRibbonTemplate,
+})
+
+class UDExEventRibbon extends UI5Element {
+  /**
+   * Defines the text of the event logo.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventLogo!: `${UDExEventRibbonLogo}`;
+
+  /**
+   * Defines the link details of the event ribbon.
+   *
+   * @default "{}"
+   * @public
+   */
+  @property({ type: String })
+    eventLink: string = "{}";
+
+  /**
+   * Defines the icon displayed next to the link.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventLinkIcon!: `${UDExEventRibbonIcon}`;
+
+  /**
+   * Defines the text displayed in event ribbon.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    eventText!: string;
+
+  /**
+   * Defines whether event-ribbon uses dark or light theme.
+   *
+   * @default "light"
+   * @public
+   */
+  @property({ type: String })
+    mode: `${UDExEventRibbonMode}` = UDExEventRibbonMode.light;
+
+  /**
+   * Defines the solid background color.
+   *
+   * @default "Blue"
+   * @public
+   */
+  @property({ type: String })
+    backgroundColorScheme!: UDExEventRibbonColorSheme;
+
+  /**
+   * Allows control over the background image source.
+   *
+   * @public
+   */
+  @property({ type: String })
+    backgroundImage?: string;
+
+  _eventLink!: UDExEventRibbonLink;
+
+  onBeforeRendering(): void {
+    this._eventLink = JSON.parse(this.eventLink);
+  }
+
+  onAfterRendering(): void {
+    this.applyColorScheme();
+  }
+
+  applyColorScheme(): void {
+    const backgroundColorLowercase = this.backgroundColorScheme.toLowerCase();
+    const backgroundColor: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-default-background-color)`;
+    const backgroundColorHover: string = `var(--udex-event-ribbon-${this.mode}-${backgroundColorLowercase}-hover-background-color)`;
+
+    this.style.setProperty("--udex-event-ribbon-background-color", backgroundColor);
+    this.style.setProperty("--udex-event-ribbon-hover-background-color", backgroundColorHover);
+
+    this.style.setProperty("--udex-event-ribbon-background-image", `url("${this.backgroundImage}")`);
+  }
+
+  handleKeyDown(e: KeyboardEvent): void {
+    if (isSpace(e) || isEnter(e)) {
+      e.preventDefault();
+      this.shadowRoot!.querySelector("a")?.click();
+    }
+  }
+
+  get eventLogoAlt(): string {
+    return eventLogoText[this.eventLogo];
+  }
+
+  get eventLogoPath(): string {
+    return `https://cdn.udex.services.sap.com/dds/design-tokens/assets/logos/event-ribbon-logo-${this.eventLogo}.svg`;
+  }
+}
+
+UDExEventRibbon.define();
+
+export default UDExEventRibbon;

package/src/EventRibbonTemplate.tsx

@@ -0,0 +1,18 @@
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import type UDExEventRibbon from "./EventRibbon.js";
+
+export default function EventRibbonTemplate(this: UDExEventRibbon) {
+  const { text, target, url } = this._eventLink;
+  return (
+    <a onKeyDown={this.handleKeyDown} role="banner" aria-label={this.eventText} class= {{ "udex-event-ribbon__container": true, "udex-event-ribbon__container-with-background-image": this.backgroundImage }} target={target} href={url} title={text}>
+      <div class="udex-event-ribbon__logo">
+        <img src={this.eventLogoPath} alt={this.eventLogoAlt}/>
+      </div>
+      {this.eventText && <p class="udex-event-ribbon__text">{this.eventText}</p>}
+      <div class="udex-event-ribbon__link-container">
+        {this.eventLinkIcon && <Icon name={this.eventLinkIcon}></Icon>}
+        <span>{text}</span>
+      </div>
+    </a>
+  );
+}