@sapudex/web-components 2.20.0 → 2.21.0

package/src/DatePicker.ts

@@ -1,23 +1,20 @@
 import DateComponentBase from "@ui5/webcomponents/dist/DateComponentBase.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-// eslint-disable-next-line
-import Calendar, { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
-import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
+import type { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
-import UDExTextField from "./TextField.js";
-import UDExDropdown from "./Dropdown.js";
-import UDExStatusMessage from "./StatusMessage.js";
+import type UDExTextField from "./TextField.js";
+import type UDExDropdown from "./Dropdown.js";
 import UDExValueState from "./types/common.js";
 
 // Template
-import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
+import DatePickerTemplate from "./DatePickerTemplate.js";
 
 // Styles
 import DatePickerCss from "./generated/themes/DatePicker.css.js";
@@ -60,10 +57,9 @@ type UDExDatePickerValueStateChangeEventDetail = {
  */
 @customElement({
   tag: "udex-date-picker",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: [DatePickerCss, DatePickerPopoverCss],
   template: DatePickerTemplate,
-  dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],
 })
 /**
  * Fired when the selected dates change.
@@ -506,7 +502,7 @@ class UDExDatePicker extends DateComponentBase {
     this._updateValueAndFireDecoratorEvents((e.target as UDExDatePicker).value, true);
   }
 
-  handleInputClick(e: MouseEvent | KeyboardEvent): void {
+  handleInputClick(e: CustomEvent<void>): void {
     e.preventDefault();
 
     if (this.disabled || this.readonly) {

package/src/DatePickerPopoverTemplate.tsx

@@ -0,0 +1,35 @@
+import Calendar from "@ui5/webcomponents/dist/Calendar.js";
+import type DatePicker from "./DatePicker.js";
+import UDExDropdown from "./Dropdown.js";
+import { Placement } from "./types/Dropdown.js";
+import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
+import CalendarDateRange from "@ui5/webcomponents/dist/CalendarDateRange.js";
+
+export default function DatePickerPopoverTemplate(this: DatePicker) {
+  return (
+    <UDExDropdown
+      id={`udex-${this._id}-calendar__popover`}
+      opener={`udex-${this._id}-calendar__opener`}
+      class="udex-date-picker__popover"
+      placement={Placement.Bottom}
+      horizontal-align="Start"
+      onClose={this._afterDropdownClose}
+      onOpen={this._afterDropdownOpen}>
+      <Calendar
+        class="udex-date-picker__calendar"
+        onSelectionChange={this.handleCalendarChange}
+        selection-mode={this.selectionMode}
+        min-date={this.minDate}
+        max-date={this.maxDate}
+        format-pattern={this.formatPattern}>
+        { this.isRangeMode ?
+          <CalendarDateRange start-value={this.startValue} end-value={this.endValue}></CalendarDateRange>
+          :
+          this._calendarSelectedDates.map(date =>
+            <CalendarDate value={date}></CalendarDate>
+          )
+        }
+      </Calendar>
+    </UDExDropdown>
+  );
+}

package/src/DatePickerTemplate.tsx

@@ -0,0 +1,27 @@
+import type DatePicker from "./DatePicker.js";
+import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+import UDExTextField from "./TextField.js";
+
+export default function DatePickerTemplate(this: DatePicker) {
+  return (
+    <>
+      <UDExTextField
+        class="udex-date-picker__input"
+        _aria-has-popup="grid"
+        icon="appointment-2"
+        value={this.value}
+        label={this.label}
+        accessible-name={this.dateAccessibleName}
+        accessible-name-ref={this.accessibleNameRef}
+        accessible-icon-name={this.accessibleIconName}
+        {...(this.disabled ? { "disabled": true } : {})}
+        {...(this.required ? { "required": true } : {})}
+        {...(this.readonly ? { "readonly": true } : {})}
+        onClickIcon={this.handleInputClick}
+        onChange={this._onInputChange}
+        value-state={this.valueState}
+        supporting-text={this.supportingText} />
+      {DatePickerPopoverTemplate.call(this)}
+    </>
+  );
+}

package/src/Feed.ts

@@ -0,0 +1,144 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.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 UDExButtonDesign from "./types/ButtonDesign.js";
+import FeedItem from "./FeedItem.js";
+import type UDExFeedItem from "./FeedItem.js";
+import FeedTemplate from "./FeedTemplate.js";
+
+// Styles
+import FeedCss from "./generated/themes/Feed.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-feed</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Feed.js";</code>
+ *
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-feed
+ * @public
+ */
+@customElement({
+  tag: "udex-feed",
+  renderer: jsxRenderer,
+  styles: FeedCss,
+  template: FeedTemplate,
+  dependencies: [FeedItem],
+})
+
+/**
+ * Triggered when the user clicks on the CTA button
+ *
+ * @public
+ */
+@event("button-click", { cancelable: true, bubbles: true })
+
+class UDExFeed extends UI5Element {
+  eventDetails!: {
+      "button-click": void
+    };
+  /**
+   * Slot for feed items.
+   *
+   * @slot items
+   * @public
+   */
+  @slot({ type: HTMLElement, individualSlots: true })
+    items!: Array<UDExFeedItem>;
+
+  /**
+   * Defines the UI5 icon name in the pictogram section.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    icon?: string;
+
+  /**
+   * Defines the image URL in the pictogram section.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    imageUrl?: string;
+
+  /**
+   * Defines the image aria label and alt in the pictogram section.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    imageLabel?: string;
+
+  /**
+   * Defines the header text of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    header?: string;
+
+  /**
+   * Defines the CTA button label
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    button?: string;
+
+  /**
+   * Defines the CTA button design
+   *
+   * @default "UDExButtonDesign.Secondary"
+   * @public
+   */
+  @property()
+    buttonDesign: UDExButtonDesign = UDExButtonDesign.Secondary;
+
+  /**
+   * Defines the accessible ARIA name of the component.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    accessibleName?: string;
+
+  get _showPictogram(): boolean {
+    return !!this.icon || !!this.imageUrl;
+  }
+
+  get _showImage(): boolean {
+    return !this.icon && !!this.imageUrl;
+  }
+
+  get _imageLabel(): string {
+    return this.imageLabel || "";
+  }
+
+  handleCTAButtonClick() {
+    this.fireDecoratorEvent("button-click");
+  }
+}
+
+UDExFeed.define();
+
+export default UDExFeed;

package/src/FeedItem.ts

@@ -0,0 +1,198 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { UDExTarget } from "./types/common.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import FeedItemTemplate from "./FeedItemTemplate.js";
+import { LOCATION } from "./generated/i18n/i18n-defaults.js";
+
+// Styles
+import FeedItemCss from "./generated/themes/FeedItem.css.js";
+
+type UDExFeedItemClickEventDetail = {
+  originalEvent: Event,
+  item: UDExFeedItem,
+}
+
+export type FeedDate = {
+  day: string;
+  month: string;
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-feed-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/FeedItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-feed-item
+ * @public
+ */
+@customElement({
+  tag: "udex-feed-item",
+  renderer: jsxRenderer,
+  styles: FeedItemCss,
+  template: FeedItemTemplate,
+})
+
+/**
+ * Fires when item is clicked
+ *
+ * @public
+ */
+@event("item-click", { bubbles: true, cancelable: true })
+
+class UDExFeedItem extends UI5Element {
+  eventDetails!: {
+      "item-click": UDExFeedItemClickEventDetail,
+    };
+
+  /**
+   * Defines the link text
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    text?: string;
+
+  /**
+   * Defines the link text URL
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    href!: string;
+
+  /**
+   * Defines target for the link
+   *
+   * @default UDExTarget._self
+   * @public
+   */
+  @property()
+    target: UDExTarget = UDExTarget._self;
+
+  /**
+   * Defines the link text details
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    details?: string;
+
+  /**
+   * Defines the accessible ARIA name of the link.
+   *
+   * @default undefined
+   * @public
+   */
+  @property()
+    accessibleName?: string;
+
+  /**
+   * Defines the date of the event
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    date?: string;
+
+  /**
+   * Defines the location of the event
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    location?: string;
+
+  /**
+   * Defines the UI5 icon name
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    icon?: string;
+
+  /**
+   * Defines the UI5 icon label
+   *
+   * @default undefined
+   * @public
+   */
+  @property({ type: String })
+    iconAccessibleName?: string;
+
+  /**
+   * Receives the avatar
+   *
+   * @slot avatar
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    avatar!: Array<HTMLElement>;
+
+  @i18n("@sapudex/web-components")
+  static i18nBundle: I18nBundle;
+
+  get _date(): FeedDate {
+    return this.formatDate(this.date);
+  }
+
+  get _showAvatar(): boolean {
+    return !!this.avatar.length;
+  }
+
+  get _showIcon(): boolean {
+    return !!this.icon && !this._showAvatar;
+  }
+
+  get _showDate(): boolean {
+    return !!this.date && !this._showAvatar && !this._showIcon;
+  }
+
+  get locationIconLabel(): string {
+    return UDExFeedItem.i18nBundle.getText(LOCATION);
+  }
+
+  formatDate(d: string | undefined): FeedDate {
+    if (!d) {
+      return { day: "", month: "" };
+    }
+    const date = new Date(d);
+    const day = date.toLocaleString("default", { day: "2-digit" });
+    let month = date.toLocaleString("default", { month: "short" });
+    month = month.charAt(0).toUpperCase() + month.slice(1);
+    return { day, month };
+  }
+
+  handleLinkClick(e: Event): void {
+    this.fireDecoratorEvent("item-click", {
+      item: this,
+      originalEvent: e,
+    });
+  }
+}
+
+UDExFeedItem.define();
+
+export default UDExFeedItem;
+export type { UDExFeedItemClickEventDetail };

package/src/FeedItemTemplate.tsx

@@ -0,0 +1,60 @@
+import type FeedItem from "./FeedItem.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import IconDesign from "@ui5/webcomponents/dist/types/IconDesign.js";
+import UDExLink from "./Link.js";
+
+export default function FeedItemTemplate(this: FeedItem) {
+  const rootClass = "udex-feed-item";
+
+  return (
+    <div class={rootClass}>
+      {this._showAvatar &&
+        <slot name="avatar" slot="avatar" aria-hidden="true"></slot>
+      }
+      {this._showIcon &&
+        <UI5Icon
+          class={`${rootClass}__icon`}
+          name={this.icon?.toLowerCase()}
+          mode={IconMode.Decorative}
+          accessibleName={this.iconAccessibleName}>
+        </UI5Icon>
+      }
+      {this._showDate &&
+        <div class={`${rootClass}__date`}
+          aria-label={this.date}>
+          <span class={`${rootClass}__month`}>{this._date.month}</span>
+          <span class={`${rootClass}__day`}>{this._date.day}</span>
+        </div>
+      }
+      {(this.text || this.details || this.location) &&
+        <div class={`${rootClass}__content`}>
+          <UDExLink
+            class={`${rootClass}__link`}
+            accessibleName={this.accessibleName}
+            href={this.href}
+            target={this.target}
+            onClick={this.handleLinkClick}>
+            {this.text}
+          </UDExLink>
+          {this.details &&
+            <p class={`${rootClass}__details`}>
+              {this.details}
+            </p>
+          }
+          {this.location &&
+            <p class={`${rootClass}__location`}>
+              <UI5Icon
+                name="map"
+                mode={IconMode.Decorative}
+                design={IconDesign.Neutral}
+                accessibleName={this.locationIconLabel}>
+              </UI5Icon>
+              {this.location}
+            </p>
+          }
+        </div>
+      }
+    </div>
+  );
+}

package/src/FeedTemplate.tsx

@@ -0,0 +1,66 @@
+import type UDExFeed from "./Feed.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import UDExButton from "./Button.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonAccessibleRole from "./types/ButtonAccessibleRole.js";
+
+export default function FeedTemplate(this: UDExFeed) {
+  const rootClass = "udex-feed";
+
+  return (
+    <div
+      role="region"
+      class={`${rootClass}__container`}
+      aria-label={this.accessibleName}>
+      {this._showPictogram &&
+        <div
+          part="image"
+          class={`${rootClass}__pictogram`}
+          title={this._imageLabel}>
+          {this.icon &&
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.icon?.toLowerCase()}
+              mode={IconMode.Decorative}
+              accessibleName={this._imageLabel}>
+            </UI5Icon>}
+          {this._showImage &&
+            <img
+              src={this.imageUrl}
+              class={`${rootClass}__icon`}
+              aria-label={this._imageLabel}
+              alt={this._imageLabel} />}
+        </div>
+      }
+      <div part="content" class={`${rootClass}__content`}>
+        {this.header &&
+          <h3 part="header" class={`${rootClass}__header`}>{this.header}</h3>
+        }
+        {this.items.length > 0 &&
+          <div class={`${rootClass}__items`}>
+            {this.items.map(item =>
+              <slot name={item._individualSlot}></slot>
+            )}
+          </div>
+        }
+        {!!this.button && footerSection.call(this, rootClass)}
+      </div>
+    </div>
+  );
+}
+function footerSection(this: UDExFeed, rootClass: string) {
+  return (
+    <>
+      <div part="footer" class={`${rootClass}__footer`}>
+        <UDExButton class={`${rootClass}__btn`}
+          size={UDExButtonSize.Large}
+          design={this.buttonDesign}
+          onClick={this.handleCTAButtonClick}
+          accessibleRole={UDExButtonAccessibleRole.Button}>
+          {this.button}
+        </UDExButton>
+      </div>
+    </>
+  );
+}

package/src/Footer.ts

@@ -417,6 +417,22 @@ class UDExFooter extends UI5Element {
   @property({ type: String })
     chineseIcpNumberLink: string = chineseICPDefaultLink;
 
+  /**
+   * Defines text for the chinese ICP Number
+   *
+   * @public
+   */
+  @property({ type: String })
+    chineseIcpNumber!: string;
+
+  /**
+   * Defines text for the chinese security network number
+   *
+   * @public
+   */
+  @property({ type: String })
+    chineseSecurityNetworkNumber!: string;
+
   /**
    * Defines should render the mobile navigation.
    *
@@ -532,12 +548,12 @@ class UDExFooter extends UI5Element {
     return UDExFooter.i18nBundle.getText(COPYRIGHT, new Date().getFullYear());
   }
 
-  get chineseICPNumber(): string {
-    return `${UDExFooter.i18nBundle.getText(ICP_NUMBER)} `;
+  get chineseICPNumberText(): string {
+    return this.chineseIcpNumber ? `${this.chineseIcpNumber} ` : `${UDExFooter.i18nBundle.getText(ICP_NUMBER)} `;
   }
 
-  get chineseSecurityNetworkNumber(): string {
-    return UDExFooter.i18nBundle.getText(PUBLIC_SECURITY_NETWORK_NUMBER);
+  get chineseSecurityNetworkNumberText(): string {
+    return this.chineseSecurityNetworkNumber ?? UDExFooter.i18nBundle.getText(PUBLIC_SECURITY_NETWORK_NUMBER);
   }
 
   get isMobile(): boolean {