@sapudex/web-components 0.111.0

package/src/SelectBoxSelectAll.ts

@@ -0,0 +1,35 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-select-box-select-all</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SelectBoxSelectAll.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UDExListGroupHeaderBase
+ * @tagname udex-select-box-select-all
+ * @public
+ */
+@customElement({
+  tag: "udex-select-box-select-all",
+})
+
+class UDExSelectBoxSelectAll extends UDExListGroupHeaderBase {
+  get isSelectAllHeader() {
+    return true;
+  }
+}
+
+UDExSelectBoxSelectAll.define();
+
+export default UDExSelectBoxSelectAll;

package/src/SideNavigation.ts

@@ -0,0 +1,49 @@
+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 SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
+import UDExSideNavigationItem from "./SideNavigationItem.js";
+import UDExSideNavigationGroup from "./SideNavigationGroup.js";
+import UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
+
+// Styles
+import SideNavigationCss from "./generated/themes/SideNavigation.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-side-navigation</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SideNavigation.js";</code>
+ *
+ * @constructor
+ * @extends SideNavigation
+ * @public
+ */
+@customElement({
+  tag: "udex-side-navigation",
+  renderer: litRender,
+  styles: [SideNavigation.styles, SideNavigationCss],
+  dependencies: [UDExSideNavigationItem, UDExSideNavigationGroup, UDExSideNavigationSubItem],
+})
+
+class UDExSideNavigation extends SideNavigation {
+  /**
+   * Defines if Side Navigation is fixed in place or scrollable with the content.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    isFixedInPlace!: boolean;
+}
+
+UDExSideNavigation.define();
+
+export default UDExSideNavigation;

package/src/SideNavigationGroup.ts

@@ -0,0 +1,36 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import SideNavigationGroup from "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
+
+// Styles
+import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-side-navigation-group</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SideNavigationGroup.js";</code>
+ *
+ * @constructor
+ * @extends SideNavigationGroup
+ * @public
+ */
+@customElement({
+  tag: "udex-side-navigation-group",
+  renderer: litRender,
+  styles: [SideNavigationGroup.styles, SideNavigationGroupCss],
+  dependencies: [],
+})
+
+class UDExSideNavigationGroup extends SideNavigationGroup {}
+
+UDExSideNavigationGroup.define();
+
+export default UDExSideNavigationGroup;

package/src/SideNavigationItem.ts

@@ -0,0 +1,46 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import SideNavigationItem from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+
+// Styles
+import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-side-navigation-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SideNavigationItem.js";</code>
+ *
+ * @constructor
+ * @extends SideNavigationItem
+ * @public
+ */
+@customElement({
+  tag: "udex-side-navigation-item",
+  renderer: litRender,
+  styles: [SideNavigationItem.styles, SideNavigationItemCss],
+  dependencies: [],
+})
+
+class UDExSideNavigationItem extends SideNavigationItem {
+  onEnterDOM() {
+    this.setAttribute("id", this._id);
+    this.items.map(item => {
+      if (this.icon) {
+        item.setAttribute("with-icon", "true");
+      }
+      return item;
+    });
+  }
+}
+
+UDExSideNavigationItem.define();
+
+export default UDExSideNavigationItem;

package/src/SideNavigationMobile.hbs

@@ -0,0 +1,19 @@
+<div
+  class="udex-side-navigation-mobile__trigger"
+  slot="trigger"
+  accessible-role="button"
+  aria-haspopup="true"
+  ?active="{{_dropdownOpened}}"
+  tabindex="0"
+  @keydown="{{handleKeydown}}"
+  @click="{{handleTriggerClick}}">
+  <div class="udex-side-navigation-mobile__selected-item">
+    {{#if _selectedItem}}
+      {{#if _selectedItem?.icon}}
+        <ui5-icon class="udex-side-navigation-mobile__selected-item-icon" name="{{_selectedItem?.icon}}"></ui5-icon>
+      {{/if}}
+      <span>{{_selectedItem?.text}}</span>
+    {{/if}}
+  </div>
+  <ui5-icon class="udex-side-navigation-mobile__trigger-toggle-icon" name="slim-arrow-down"></ui5-icon>
+</div>

package/src/SideNavigationMobile.ts

@@ -0,0 +1,160 @@
+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 litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import UDExSideNavigation from "./SideNavigation.js";
+import UDExDropdown from "./Dropdown.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+
+import SideNavigationMobileTemplate from "./generated/templates/SideNavigationMobileTemplate.lit.js";
+import SideNavigationMobileDropdownTemplate from "./generated/templates/SideNavigationMobileDropdownTemplate.lit.js";
+import UDExSideNavigationItem from "./SideNavigationItem.js";
+import UDExSideNavigationSubItem from "./SideNavigationSubItem.js";
+import UDExSideNavigationGroup from "./SideNavigationGroup.js";
+
+// Styles
+import SideNavigationMobileCss from "./generated/themes/SideNavigationMobile.css.js";
+import SideNavigationMobileDropdownCss from "./generated/themes/SideNavigationMobileDropdown.css.js";
+
+type SelectedItem = UDExSideNavigationItem | UDExSideNavigationSubItem | null;
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-side-navigation-mobile</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SideNavigation.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-side-navigation-mobile",
+  renderer: litRender,
+  template: SideNavigationMobileTemplate,
+  styles: SideNavigationMobileCss,
+  staticAreaTemplate: SideNavigationMobileDropdownTemplate,
+  staticAreaStyles: [SideNavigationMobileCss, SideNavigationMobileDropdownCss],
+  dependencies: [UDExSideNavigation, UDExDropdown, Icon],
+})
+
+class UDExSideNavigationMobile extends UI5Element {
+  /**
+   * Indicates if dropdown is opened
+   *
+   * @default false
+   * @private
+   */
+  @property({ noAttribute: true, type: Boolean })
+    _dropdownOpened!: boolean;
+
+  /**
+   * Defines the main items of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component
+   * for the top-level items, and the `ui5-side-navigation-sub-item` component for second-level items, nested
+   * inside the items.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+    navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
+
+  /**
+   * Defines the fixed items at the bottom of the `ui5-side-navigation`. Use the `ui5-side-navigation-item` component
+   * for the fixed items, and optionally the `ui5-side-navigation-sub-item` component to provide second-level items inside them.
+   *
+   * **Note:** In order to achieve the best user experience, it is recommended that you keep the fixed items "flat" (do not pass sub-items)
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement, invalidateOnChildChange: true })
+    fixedItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
+
+  /**
+   * Indicates selected item element
+   *
+   * @default false
+   * @private
+   */
+  @property({ noAttribute: true, type: Object })
+    _selectedItem!: SelectedItem;
+
+  _navItems!: Array<UDExSideNavigationItem | UDExSideNavigationGroup>;
+  _initialized = false;
+  _dropdown!: UDExDropdown;
+
+  /**
+   * Getter for the interactive element that opens the dropdown
+   * @private
+   */
+  get _dropdownTrigger() {
+    return this.shadowRoot!.querySelector<HTMLElement>(".udex-side-navigation-mobile__trigger")!;
+  }
+
+  async _getResponsePopover() {
+    const staticAreaItem = await this.getStaticAreaItemDomRef();
+    return staticAreaItem!.querySelector<UDExDropdown>(`udex-dropdown`)!;
+  }
+
+  _afterDropdownOpen() {
+    this._dropdownOpened = true;
+  }
+
+  _afterDropdownClose() {
+    this._dropdownOpened = false;
+  }
+
+  async handleTriggerClick() {
+    this._dropdown = await this._getResponsePopover();
+    if (this._dropdown?.open) {
+      this._dropdown.onClose();
+    } else {
+      this._dropdown.onOpen(this._dropdownTrigger);
+    }
+  }
+
+  async handleKeydown(event: KeyboardEvent) {
+    if ((event.key === "Enter" || event.key === " ")) {
+      await this.handleTriggerClick();
+    }
+  }
+
+  async _handleSelectionChanged(event: {detail: { item: UDExSideNavigationItem | UDExSideNavigationSubItem }}) {
+    this._dropdown = await this._getResponsePopover();
+    this._dropdown.onClose();
+    this._selectedItem = event.detail.item;
+  }
+
+  getSelectedItem() {
+    const items = this._navItems.reduce((result, item) => {
+      return (result).concat(item.allItems as UDExSideNavigationSubItem[]);
+    }, new Array<UDExSideNavigationItem | UDExSideNavigationSubItem>());
+    return items.find(item => item._selected);
+  }
+
+  onBeforeRendering() {
+    if (!this._initialized) {
+      const items = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("navItems");
+      const fixedItems = this.getSlottedNodes<UDExSideNavigationItem | UDExSideNavigationGroup>("fixedItems");
+      this._navItems = items.concat(fixedItems);
+      this._selectedItem = this.getSelectedItem() || null;
+    }
+    this._initialized = true;
+  }
+
+  async onAfterRendering() {
+    this._dropdown = await this._getResponsePopover();
+  }
+}
+
+UDExSideNavigationMobile.define();
+
+export default UDExSideNavigationMobile;

package/src/SideNavigationMobileDropdown.hbs

@@ -0,0 +1,17 @@
+<udex-dropdown
+  class="udex-side-navigation-mobile__popover"
+  id="udex-{{this._id}}-side-navigation-mobile__popover"
+  placement-type="Bottom"
+  horizontal-align="Stretch"
+  disable-target-overlap="true"
+  height="none"
+  @click-trigger="{{handleTriggerClick}}"
+  @after-open="{{_afterDropdownOpen}}"
+  @after-close="{{_afterDropdownClose}}"
+>
+  <udex-side-navigation @ui5-selection-change="{{_handleSelectionChanged}}">
+    {{#each _navItems}}
+      {{this}}
+    {{/each}}
+  </udex-side-navigation>
+</udex-dropdown>

package/src/SideNavigationSubItem.ts

@@ -0,0 +1,36 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+
+// Styles
+import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-side-navigation-sub-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/SideNavigationSubItem.js";</code>
+ *
+ * @constructor
+ * @extends SideNavigationSubItem
+ * @public
+ */
+@customElement({
+  tag: "udex-side-navigation-sub-item",
+  renderer: litRender,
+  styles: [SideNavigationSubItem.styles, SideNavigationSubItemCss],
+  dependencies: [],
+})
+
+class UDExSideNavigationSubItem extends SideNavigationSubItem {}
+
+UDExSideNavigationSubItem.define();
+
+export default UDExSideNavigationSubItem;

package/src/Slider.ts

@@ -0,0 +1,43 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Slider from "@ui5/webcomponents/dist/Slider.js";
+import SliderBase from "@ui5/webcomponents/dist/SliderBase.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+
+// Styles
+import SliderCss from "./generated/themes/Slider.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-slider</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Slider.js";</code>
+ *
+ * @constructor
+ * @extends Slider
+ * @public
+ */
+@customElement({
+  tag: "udex-slider",
+  renderer: litRender,
+  styles: [SliderBase.styles, SliderCss],
+  dependencies: [],
+})
+class UDExSlider extends Slider {
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+}
+
+UDExSlider.define();
+
+export default UDExSlider;

package/src/StatusMessage.hbs

@@ -0,0 +1,6 @@
+<div class="udex-status-message udex-status-message__supporting-text">
+    {{#if iconFieldName}}
+        <ui5-icon name="{{iconFieldName}}" class="udex-status-message__icon"></ui5-icon>
+    {{/if}}
+    {{supportingText}}
+</div>

package/src/StatusMessage.ts

@@ -0,0 +1,92 @@
+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 Icon from "@ui5/webcomponents/dist/Icon.js";
+import ValueState from "./types/common.js";
+import "@ui5/webcomponents-icons/dist/accept.js";
+import "@ui5/webcomponents-icons/dist/error.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
+
+import StatusMessageTemplate from "./generated/templates/StatusMessageTemplate.lit.js";
+
+// Styles
+import StatusMessageCss from "./generated/themes/StatusMessage.css.js";
+
+export enum IconMapping {
+  Success = "accept",
+  Error = "error",
+  Warning = "alert",
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-status-message</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/StatusMessage.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-status-message",
+  renderer: litRender,
+  styles: StatusMessageCss,
+  template: StatusMessageTemplate,
+  dependencies: [Icon],
+})
+class UDExStatusMessage extends UI5Element {
+  /**
+   * Defines supporting text under the input field.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    supportingText!: string;
+
+  /**
+   * Defines supporting text alignment. It aligns only Standard state text.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "left" })
+    supportingTextAlignment!: "Left" | "Right";
+
+  /**
+   * Defines if component should have disabled styles.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    disabled!: string;
+  /**
+   * Defines the value state of the component.
+   *
+   * @default "Standard"
+   * @public
+   */
+  @property({ type: ValueState, defaultValue: "Standard" })
+    valueState!: "Standard" | "Warning" | "Error" | "Success";
+
+  get iconFieldName(): string {
+    if (this.valueState !== ValueState.Standard) {
+      return IconMapping[this.valueState];
+    }
+    return "";
+  }
+}
+
+UDExStatusMessage.define();
+
+export default UDExStatusMessage;

package/src/StepInput.hbs

@@ -0,0 +1,54 @@
+<div class="udex-step-input__root"
+    @keydown="{{_onkeydown}}"
+>
+    <udex-text-field
+        type="{{type}}"
+        label="{{label}}"
+        supporting-text="{{supportingText}}"
+        value="{{_valuePrecisioned}}"
+        aria-label="{{accessibleName}}"
+        aria-labelledby="{{accessibleNameRef}}"
+        @focusin="{{_onInputFocusIn}}"
+        @focusout="{{_onInputFocusOut}}"
+        ?disabled="{{disabled}}"
+        ?readonly="{{readonly}}"
+        ?required="{{required}}"
+        ?displayonly="{{displayonly}}"
+        value-state="{{valueState}}"
+        min="{{min}}"
+        max="{{max}}"
+        step="{{step}}"
+    ></udex-text-field>
+    {{#unless displayonly}}
+        <udex-control-button
+            class="udex-step-input__button udex-step-input__button_inc"
+            title="{{incIconTitle}}"
+            accessible-name="{{incIconTitle}}"
+            icon="add"
+            size="Large"
+            design="{{valueState}}"
+            @click="{{_incValue}}"
+            @mousedown="{{_incSpin}}"
+            @mouseup="{{_resetSpin}}"
+            @mouseout="{{_resetSpinOut}}"
+            ?disabled="{{_incIconInactive}}"
+            ?active="{{incIconActive}}"
+            ?readonly="{{readonly}}"
+        ></udex-control-button>
+        <udex-control-button
+            class="udex-step-input__button udex-step-input__button_dec"
+            title="{{decIconTitle}}"
+            accessible-name="{{decIconTitle}}"
+            icon="less"
+            size="Large"
+            design="{{valueState}}"
+            @click="{{_decValue}}"
+            @mousedown="{{_decSpin}}"
+            @mouseup="{{_resetSpin}}"
+            @mouseout="{{_resetSpinOut}}"
+            ?disabled="{{_decIconInactive}}"
+            ?active="{{decIconActive}}"
+            ?readonly="{{readonly}}"
+        ></udex-control-button>
+    {{/unless}}
+</div>