@sapudex/web-components 0.111.0

package/src/TableGroupRow.ts

@@ -0,0 +1,133 @@
+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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isEscape } from "@ui5/webcomponents-base/dist/Keys.js";
+import UDExTableRow from "./TableRow.js";
+
+import TableGroupRowTemplate from "./generated/templates/TableGroupRowTemplate.lit.js";
+
+// Styles
+import TableGroupRowCss from "./generated/themes/TableGroupRow.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-table-group-row</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/TableGroupRow.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+@customElement({
+  tag: "udex-table-group-row",
+  renderer: litRender,
+  styles: TableGroupRowCss,
+  template: TableGroupRowTemplate,
+  dependencies: [UDExTableRow, UI5Icon],
+})
+
+class UDExTableGroupRow extends UI5Element {
+  /**
+   * Defines collapsible type the group row.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    collapsible?: boolean;
+
+  /**
+   * Defines the title of the group row.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    groupTitle!: string;
+
+  /**
+   * Defines the rows of the group row.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true })
+    rows!: Array<UDExTableRow>;
+
+  /**
+   * Defines if the row is expanded
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    expanded?: boolean;
+
+  /**
+   * Defines the index of the component.
+   *
+   * @private
+   */
+  @property({ validator: Integer })
+    _index!: number;
+
+  /**
+   * Defines if the collapsible row is open.
+   *
+   * @private
+   */
+  @property({ type: Boolean })
+    _isOpen?: boolean = true;
+
+  onAfterRendering() {
+    this.setIndexToRows();
+
+    if (this.collapsible && !this.expanded) {
+      this._isOpen = false;
+    }
+  }
+
+  onEnterDOM() {
+    this.setAttribute("role", "rowgroup");
+  }
+
+  toggleExpanded(): void {
+    if (this.collapsible) {
+      this.expanded = !this.expanded;
+      this._isOpen = !this._isOpen;
+    }
+  }
+
+  handleEscapeKey(e: KeyboardEvent) {
+    if (isEscape(e)) {
+      const btn = this.shadowRoot?.querySelector(".udex-table-grow-btn") as HTMLElement;
+      this.toggleExpanded();
+      btn.focus();
+    }
+  }
+
+  setIndexToRows(): void {
+    this.rows.forEach((row, index) => {
+      row._index = index;
+    });
+  }
+
+  get isGroup() {
+    return true;
+  }
+}
+
+UDExTableGroupRow.define();
+
+export default UDExTableGroupRow;

package/src/TableHeaderCell.hbs

@@ -0,0 +1,19 @@
+{{#if _hasIcons}}
+    <div class="udex-table-header-cell-wrap">
+        {{#if iconStart}}
+            <ui5-icon
+                class="udex-table-header-cell-wrap__icon"
+                name="{{iconStart}}">
+            </ui5-icon>
+        {{/if}}
+        <slot></slot>
+        {{#if iconEnd}}
+            <ui5-icon
+                class="udex-table-header-cell-wrap__icon"
+                name="{{iconEnd}}">
+            </ui5-icon>
+        {{/if}}
+    </div>
+{{else}}
+    <slot></slot>
+{{/if}}

package/src/TableHeaderCell.ts

@@ -0,0 +1,77 @@
+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 TableHeaderCellTemplate from "./generated/templates/TableHeaderCellTemplate.lit.js";
+import UDExTableCellBase from "./TableCellBase.js";
+
+// Styles
+import TableHeaderCellCss from "./generated/themes/TableHeaderCell.css.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-table-header-cell</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/TableHeaderCell.js";</code>
+ *
+ * @constructor
+ * @extends UDExTableCellBase
+ * @public
+ */
+@customElement({
+  tag: "udex-table-header-cell",
+  renderer: litRender,
+  styles: [UDExTableCellBase.styles, TableHeaderCellCss],
+  template: TableHeaderCellTemplate,
+  dependencies: [...UDExTableCellBase.dependencies],
+})
+
+class UDExTableHeaderCell extends UDExTableCellBase {
+  /**
+   * Defines highlighted the header cell.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    highlighted?: boolean;
+
+  /**
+   * Defines the name of the UI5 Icon, that will be displayed at the beginning of the content.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    iconStart!: string;
+
+  /**
+   * Defines the name of the UI5 Icon, that will be displayed at the end of the content.
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String, defaultValue: "" })
+    iconEnd!: string;
+
+  protected ariaRole: string = "columnheader";
+
+  onBeforeRendering() {
+    super.onBeforeRendering();
+    this.style.justifyContent = `var(--horizontal-align-${this._individualSlot})`;
+  }
+
+  get _hasIcons(): boolean {
+    return this.iconStart.length > 0 || this.iconEnd.length > 0;
+  }
+}
+
+UDExTableHeaderCell.define();
+
+export default UDExTableHeaderCell;

package/src/TableHeaderRow.hbs

@@ -0,0 +1,3 @@
+{{#each cells}}
+    <slot name="{{_individualSlot}}"></slot>
+{{/each}}

package/src/TableHeaderRow.ts

@@ -0,0 +1,39 @@
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import UDExTableHeaderCell from "./TableHeaderCell.js";
+import UDExTableRowBase from "./TableRowBase.js";
+import TableHeaderRowTemplate from "./generated/templates/TableHeaderRowTemplate.lit.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-table-header-row</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/TableHeaderRow.js";</code>
+ *
+ * @constructor
+ * @extends UDExTableRowBase
+ * @public
+ */
+@customElement({
+  tag: "udex-table-header-row",
+  renderer: litRender,
+  styles: [UDExTableRowBase.styles],
+  template: TableHeaderRowTemplate,
+  dependencies: [UDExTableHeaderCell],
+})
+
+class UDExTableHeaderRow extends UDExTableRowBase {
+  get isGroup() {
+    return false;
+  }
+}
+
+UDExTableHeaderRow.define();
+
+export default UDExTableHeaderRow;

package/src/TableRow.hbs

@@ -0,0 +1,3 @@
+{{#each cells}}
+    <slot name="{{_individualSlot}}"></slot>
+{{/each}}

package/src/TableRow.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 UDExTableRowBase from "./TableRowBase.js";
+import TableRowTemplate from "./generated/templates/TableRowTemplate.lit.js";
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-table-row</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/TableRow.js";</code>
+ *
+ * @constructor
+ * @extends UDExTableRowBase
+ * @public
+ */
+@customElement({
+  tag: "udex-table-row",
+  renderer: litRender,
+  styles: [UDExTableRowBase.styles],
+  template: TableRowTemplate,
+  dependencies: [...UDExTableRowBase.dependencies],
+})
+
+class UDExTableRow extends UDExTableRowBase {
+  /**
+   * Defines the interactive state of the row.
+   *
+   * @default false
+   * @public
+   */
+  @property({ type: Boolean })
+    interactive?: boolean;
+
+  get isGroup() {
+    return false;
+  }
+}
+
+UDExTableRow.define();
+
+export default UDExTableRow;

package/src/TableRowBase.ts

@@ -0,0 +1,50 @@
+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 Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import UDExTableCell from "./TableCell.js";
+import UDExTableHeaderCell from "./TableHeaderCell.js";
+
+// Styles
+import TableRowBase from "./generated/themes/TableRowBase.css.js";
+
+/**
+ * @class
+ * A class to serve as a foundation for the `UDExTableRow` and `UDExTableHeaderRow` classes.
+ * @constructor
+ * @abstract
+ * @extends UI5Element
+ * @public
+ */
+
+@customElement({
+  renderer: litRender,
+  styles: TableRowBase,
+  dependencies: [UDExTableCell],
+})
+
+abstract class UDExTableRowBase extends UI5Element {
+  /**
+   * Defines the cells of the component.
+   *
+   * @public
+   */
+  @slot({ type: HTMLElement, "default": true, individualSlots: true })
+    cells!: Array<UDExTableCell | UDExTableHeaderCell>;
+
+  /**
+   * Defines the index of the component.
+   *
+   * @private
+   */
+  @property({ validator: Integer })
+    _index!: number;
+
+  onEnterDOM() {
+    this.setAttribute("role", "row");
+  }
+}
+
+export default UDExTableRowBase;

package/src/Tag.hbs

@@ -0,0 +1,26 @@
+<div
+    tabindex="{{_tabIndex}}"
+    class="{{tagClasses}}"
+    @click="{{tagClickHandler}}"
+    @focusin="{{_focusin}}"
+    @focusout="{{_focusout}}"
+    @keydown="{{tagKeyDown}}"
+    role="{{accessibleRole}}"
+    aria-label="{{accessibleName}}"
+    aria-pressed="{{selected}}">
+    {{#if startIcon}}
+        <ui5-icon
+            class="udex-tag__icon udex-tag__icon--start"
+            name="{{icon}}"
+            @click="{{iconClickHandler}}">
+        </ui5-icon>
+    {{/if}}
+    <span class="udex-tag__text">{{{text}}}</span>
+    {{#if endIcon}}
+        <ui5-icon
+            class="udex-tag__icon udex-tag__icon--end"
+            name="{{icon}}"
+            @click="{{iconClickHandler}}">
+        </ui5-icon>
+    {{/if}}
+</div>

package/src/Tag.ts

@@ -0,0 +1,256 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import { isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
+import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+
+import TagTemplate from "./generated/templates/TagTemplate.lit.js";
+
+// Styles
+import TagCss from "./generated/themes/Tag.css.js";
+
+export enum TagType {
+    Text = "Text",
+    White = "White",
+    Outlined = "Outlined",
+    Grey = "Grey"
+}
+
+export enum IconPlacement {
+    Start = "Start",
+    End = "End"
+}
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-tag</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @udex/web-components/dist/Tag.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @extends UI5Element
+ * @tagname udex-tag
+ * @public
+ */
+@customElement({
+  tag: "udex-tag",
+  renderer: litRender,
+  styles: TagCss,
+  template: TagTemplate,
+  dependencies: [Icon],
+})
+
+/**
+ * Emitted when tag was clicked
+ *
+ * @event sap.ui.webc.web-components.UDExTag#selectionChange
+ * @public
+ */
+@event("selectionChange")
+/**
+ * Emitted when icon in tag was clicked
+ *
+ * @event sap.ui.webc.web-components.UDExTag#iconClick
+ * @public
+ */
+@event("iconClick")
+class UDExTag extends UI5Element {
+  /**
+   * Defines the text of the tag
+  *
+  * @default ""
+  * @public
+  */
+  @property()
+    text!: string;
+
+  /**
+   * Defines the design type of tag
+  *
+  * @default "Grey"
+  * @public
+  */
+  @property({ type: TagType, defaultValue: TagType.Grey })
+    design?: `${TagType}`;
+  /**
+   * Defines the size of the component.
+   *
+   * @default "Small"
+   * @public
+   */
+  @property({ type: String, defaultValue: "Small" })
+    size!: "Small" | "Medium";
+  /**
+   * Defines icon name
+  *
+  * @default ""
+  * @public
+  */
+  @property()
+    icon!: string;
+
+  /**
+   * Defines icon placement if icon was provided
+  *
+  * @default "End"
+  * @public
+  */
+  @property({ type: IconPlacement, defaultValue: IconPlacement.End })
+    iconPlacement? : `${IconPlacement}`;
+
+  /**
+   * Defines if tag is in readonly state
+  *
+  * @default false
+  * @public
+  */
+  @property({ type: Boolean })
+    readOnly!: boolean;
+
+  /**
+   * Defines the accessible ARIA name of the component.
+   * @default ""
+   * @public
+   */
+  @property()
+    accessibleName!: string;
+
+  /**
+   * Defines the role attribute of component
+  *
+  * @default "button"
+  * @public
+  */
+  @property({ defaultValue: "button" })
+    accessibleRole!: string;
+
+  /**
+   * Defines if tag is selected
+  *
+  * @default false
+  * @public
+  */
+  @property({ type: Boolean })
+    selected!: boolean;
+
+  /**
+   * Defines whether the component is focused or not.
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    focused!: boolean;
+
+  /**
+   * Defines whether the token is being deleted
+   * This flag is used in the udex-select-box
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    toBeDeleted!: boolean;
+
+  /**
+   * Set by the tokenizer when a token is in the "more" area (overflowing)
+   *
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    overflows!: boolean;
+
+  @property({ type: Boolean })
+    singleToken!: boolean;
+
+  onBeforeRendering() {
+    this.toBeDeleted = false;
+  }
+
+  onEnterDOM(): void {
+    if (isDesktop()) {
+      this.setAttribute("desktop", "");
+    }
+  }
+
+  get tagClasses() {
+    return `udex-tag udex-tag--${this.size.toLocaleLowerCase()} udex-tag-${this.design?.toLowerCase()}
+    ${this.readOnly ? "udex-tag--readonly" : ""}
+    ${this.selected ? "udex-tag--selected" : ""}`;
+  }
+
+  get startIcon() {
+    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.Start;
+  }
+
+  get endIcon() {
+    return this.icon && !this.readOnly && this.iconPlacement === IconPlacement.End;
+  }
+
+  setSelected() {
+    this.selected = !this.selected;
+  }
+
+  iconClickHandler(e: Event) {
+    e.stopPropagation();
+    if (!this.readOnly) {
+      this.fireEvent("iconClick");
+    }
+  }
+
+  tagClickHandler() {
+    if (!this.readOnly && !this.toBeDeleted) {
+      this.setSelected();
+      this.fireEvent("selectionChange");
+    }
+  }
+
+  tagKeyDown(e: KeyboardEvent) {
+    if (isEnter(e)) {
+      this.tagClickHandler();
+    }
+  }
+
+  _focusin() {
+    this.focused = true;
+  }
+
+  _focusout() {
+    this.focused = !this.focused;
+  }
+
+  get _tabIndex() {
+    if (this.readOnly || this.overflows) {
+      return -1;
+    }
+    return 0;
+  }
+
+  get textDom() {
+    return this.getDomRef()?.querySelector(".udex-tag__text");
+  }
+
+  get isTruncatable() {
+    if (!this.textDom) {
+      return false;
+    }
+
+    return Math.ceil(this.textDom.getBoundingClientRect().width) < Math.ceil(this.textDom.scrollWidth);
+  }
+}
+
+UDExTag.define();
+
+export default UDExTag;