@momentum-ui/web-components 2.16.1 → 2.16.3

package/src/components/taskitem/TaskItem.ts

@@ -0,0 +1,293 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "@/components/badge/Badge";
+import "@/components/icon/Icon";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import reset from "@/wc_scss/reset.scss";
+import { html, LitElement, property } from "lit-element";
+import { nothing } from "lit-html";
+import { classMap } from "lit-html/directives/class-map";
+import styles from "./scss/module.scss";
+
+export namespace TaskItem {
+  @customElementWithCheck("md-task-item")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) mediaType = "call";
+    @property({ type: String }) status = "";
+    @property({ type: String }) popovertitle = "";
+    @property({ type: String }) queue = "";
+    @property({ type: Boolean }) accepted = false;
+    @property({ type: Number }) quantity = 0;
+    @property({ type: String }) lastmessage = "";
+    @property({ type: Boolean }) selected = false;
+    @property({ type: String }) customAriaLabel = "";
+    @property({ type: String }) iconSrc = "";
+    @property({ type: String }) tabIndexForContainer = "0";
+
+    /**
+     * @deprecated Use `itemTitle` instead.
+     * Using title may cause an unwanted tooltip.
+     */
+    @property({ type: String, reflect: true })
+    get title(): string {
+      return this.displayTitle;
+    }
+    set title(title: string) {
+      this.titleValue = title;
+      this.updateTitle();
+    }
+    /**
+     * The visible text for the Title.
+     */
+    @property({ type: String, reflect: true, attribute: "item-title" })
+    get itemTitle() {
+      return this.displayTitle;
+    }
+    set itemTitle(itemTitle: string) {
+      this.itemTitleValue = itemTitle;
+      this.updateTitle();
+    }
+
+    private updateTitle() {
+      if (!this.itemTitleValue) {
+        this.displayTitle = this.titleValue;
+      } else {
+        this.displayTitle = this.itemTitleValue;
+      }
+    }
+
+    private displayTitle = "";
+    private titleValue = "";
+    private itemTitleValue = "";
+
+    renderTaskType = () => {
+      switch (this.mediaType.toLowerCase()) {
+        case "telephony":
+          return html`
+            <md-badge color="green" circle>
+              <md-icon name="handset-filled" size="20" iconSet="momentumDesign"></md-icon>
+            </md-badge>
+          `;
+        case "outbound telephony":
+          return html`
+            <md-badge color="green" circle>
+              <md-icon name="outgoing-call-legacy-filled" size="20" iconSet="momentumDesign"></md-icon>
+            </md-badge>
+          `;
+        case "inbound telephony":
+          return html`
+            <md-badge color="green" circle>
+              <md-icon name="incoming-call-legacy-filled" size="20" iconSet="momentumDesign"></md-icon>
+            </md-badge>
+          `;
+        case "applemessages":
+        case "midcall telephony":
+        case "icon src":
+          return html`
+            <md-badge circle>
+              <img src="${this.iconSrc}" />
+            </md-badge>
+          `;
+        case "callback":
+          return html`
+            <md-badge color="lime" circle>
+              <md-icon name="icon-icon-callback_18"></md-icon>
+            </md-badge>
+          `;
+        case "progressive_campaign":
+          return html`
+            <md-badge color="green" circle>
+              <md-icon name="icon-icon-campaign_18"></md-icon>
+            </md-badge>
+          `;
+        case "chat":
+          return html`
+            <md-badge color="blue" circle>
+              <md-icon name="chat-filled" size="20" iconSet="momentumDesign"></md-icon>
+            </md-badge>
+          `;
+        case "email":
+          return html`
+            <md-badge color="violet" circle>
+              <md-icon name="email-filled" size="20" iconSet="momentumDesign"></md-icon>
+            </md-badge>
+          `;
+        case "sms":
+          return html`
+            <md-badge color="darkmint" circle>
+              <md-icon name="sms-filled" size="20" iconSet="momentumDesign" color="white-100"></md-icon>
+            </md-badge>
+          `;
+        case "facebook":
+          return html`
+            <md-badge bgColor="#0078FF" circle>
+              <md-icon name="messenger_16" iconSet="momentumUI" color="white-100"></md-icon>
+            </md-badge>
+          `;
+        case "whatsapp":
+          return html`
+            <md-badge bgColor="#25D366" circle>
+              <md-icon name="whatsApp_16" iconSet="momentumUI" color="white-100"></md-icon>
+            </md-badge>
+          `;
+        default:
+          return html` <slot name="task-type"></slot> `;
+      }
+    };
+
+    renderStatus = () => {
+      switch (this.status) {
+        case "consulting":
+          return html` <md-icon name="headset-bold" size="12" iconSet="momentumDesign"></md-icon> `;
+        case "play":
+          return html` <md-icon name="play-bold" size="12" iconSet="momentumDesign"></md-icon> `;
+        case "hold":
+          return html` <md-icon name="pause-bold" size="12" iconSet="momentumDesign"></md-icon> `;
+        case "conference":
+          return html` <md-icon name="meet-bold" size="16" iconSet="momentumDesign"></md-icon> `;
+        case "transfered":
+          return html` <md-icon name="assign-privilege-bold" size="16" iconSet="momentumDesign"></md-icon> `;
+        case "courtesy_callback":
+          return html` <md-icon name="callrate-bold" size="12" iconSet="momentumDesign"></md-icon> `;
+        case "campaign":
+          return html` <md-icon name="announcement-bold" size="12" iconSet="momentumDesign"></md-icon> `;
+        default:
+          return html` <slot name="task-status"></slot> `;
+      }
+    };
+
+    handleClick(event: MouseEvent) {
+      this.dispatchEvent(
+        new CustomEvent("taskitem-click", {
+          composed: true,
+          bubbles: true,
+          detail: {
+            srcEvent: event
+          }
+        })
+      );
+      this.blur();
+    }
+
+    handleKeyDown(event: KeyboardEvent) {
+      this.dispatchEvent(
+        new CustomEvent("taskitem-keydown", {
+          detail: {
+            key: event.code
+          },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    renderChatCount() {
+      return this.quantity > 0
+        ? this.quantity > 99
+          ? html` <span class="new-chat-quantity">99+</span> `
+          : html` <span class="new-chat-quantity">${this.quantity}</span> `
+        : nothing;
+    }
+
+    getAriaLabel() {
+      if (this.customAriaLabel) {
+        return this.customAriaLabel;
+      }
+      let queueContent = this.queue;
+
+      if (!queueContent) {
+        const queueSlot = this.querySelector('[slot="queue"]') as HTMLElement;
+        if (queueSlot) {
+          queueContent = queueSlot.textContent?.trim() || queueSlot.innerText.trim();
+          const timeMatch = queueContent.match(/(?:([01]?\d|2[0-3]):)?([0-5]?\d):([0-5]?\d)/);
+
+          if (timeMatch) {
+            const [, hours = 0, minutes, seconds] = timeMatch.map(Number);
+
+            // Create a Date object from the time
+            const date = new Date();
+            date.setHours(hours, minutes, seconds);
+
+            // Format the new time and add it back to the queueContent string
+            queueContent = queueContent.replace(
+              /(?:([01]?\d|2[0-3]):)?([0-5]?\d):([0-5]?\d)/,
+              `${hours ? hours + " hours " : ""}${minutes} minutes ${seconds} seconds`
+            );
+          }
+        }
+      }
+      return `${this.mediaType} ${this.status} ${this.title} ${queueContent} ${this.quantity ? this.quantity : ""} ${
+        this.lastmessage
+      }`;
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    private get sanitizedTabIndexForContainer() {
+      return parseInt(this.tabIndexForContainer) ?? 0;
+    }
+
+    render() {
+      return html`
+        <div
+          part="task-item-container"
+          class="md-taskitem ${classMap({ selected: this.selected })}"
+          tabindex=${this.sanitizedTabIndexForContainer}
+          aria-selected="${this.selected}"
+          @click=${(e: MouseEvent) => this.handleClick(e)}
+          @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
+          aria-label=${this.getAriaLabel()}
+        >
+          <div class="md-taskitem__mediatype">
+            ${this.renderTaskType()}
+            ${this.status
+              ? html` <span class=${`md-taskitem__status ` + `${this.status}`}> ${this.renderStatus()} </span> `
+              : nothing}
+          </div>
+          <div class="md-taskitem__content" part="task-item-content">
+            ${this.popovertitle
+              ? html` <span class="md-taskitem__content_popover_title">${this.popovertitle}</span> `
+              : nothing}
+            ${this.title
+              ? html`
+                  <span class="md-taskitem__content_title ${classMap({ mainTitle: !this.popovertitle })}"
+                    >${this.title}</span
+                  >
+                `
+              : nothing}
+            <div class="md-taskitem__content_inner">
+              <span class="md-taskitem__content_queue">
+                ${this.queue.length > 0 ? this.queue : html` <slot name="queue"></slot> `}
+              </span>
+            </div>
+            ${this.lastmessage
+              ? html`
+                  <span class="md-taskitem__content_chat">
+                    <span class="new-chat_massages">${this.lastmessage}</span>
+                  </span>
+                `
+              : nothing}
+          </div>
+          <div class="md-taskitem__addition">
+            <slot></slot>
+            ${this.renderChatCount()}
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-task-item": TaskItem.ELEMENT;
+  }
+}

package/src/components/taskitem/scss/mixins.scss

@@ -0,0 +1,42 @@
+
+@mixin text-dots {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+@mixin task-flex-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: stretch;
+}
+@mixin task-after-focus {
+  bottom: 0;
+  content: "";
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+@mixin taskitem-status {
+  align-items: center;
+  display: inline-flex;
+  justify-content: space-around;
+  position: absolute;
+}
+@mixin taskitem-content {
+  align-content: stretch;
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex: 0 1 auto;
+  flex-direction: column;
+  justify-content: center;
+}
+@mixin taskitem-focus-boxshadow {
+  box-shadow: $taskitem-focus-boxshadow;
+}

package/src/components/taskitem/scss/module.scss

@@ -0,0 +1,15 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/colors/settings-transparencies";
+@import "@/wc_scss/settings/core";
+
+@import "@/wc_scss/typography/settings";
+
+@import "./vars/lm-taskitem-settings";
+
+@import "./settings";
+@import "./mixins";
+@import "./task-item";

package/src/components/taskitem/scss/settings.scss

@@ -0,0 +1,45 @@
+@use "sass:math";
+
+$taskitem-border-radius: rem-calc(8);
+$taskitem-border-circle: 50%;
+$taskitem-main-indent: rem-calc(2);
+$taskitem-base-unit: $base-unit; // 4px = 0.25rem
+$taskitem-main-size: rem-calc(20);
+$taskitem-main-curcor: $cursor-pointer-value;
+$taskitem-base-height: rem-calc(14);
+$taskitem-status-height: rem-calc(12);
+$taskitem-mediatype-width: rem-calc(42);
+
+$taskitem-max-width: rem-calc(500);
+$taskitem-min-width: rem-calc(270);
+$taskitem-min-height: rem-calc(80);
+$taskitem-main-padding: rem-calc(12);
+$taskitem-main-margin: rem-calc(8);
+$taskitem-focus-margin: -$taskitem-main-indent;
+$taskitem-focus-boxshadow: 0 0 0 rem-calc(2) var(--taskitem-focus-border-color, $lm-taskitem-focus-border-color-light);
+
+$taskitem-mediatype-margin: rem-calc(8);
+$taskitem-content-min-width: rem-cacl(120);
+
+$taskitem-title-height: rem-calc(19);
+$taskitem-title-font: $brand-font-bold;
+$taskitem-title-font-size: $font-size-large;
+$taskitem-popover-title-font-size: $font-size-base;
+$taskitem-popover-title-height: rem-calc(15);
+
+$taskitem-queue-font: $brand-font-regular;
+$taskitem-queue-font-size: $font-size-small;
+$taskitem-selected-shadow: rem-calc(0 2 4) $black-16;
+$taskitem-selected-bg: var(--taskitem-pressed-bg-color, $lm-taskitem-pressed-bg-color-light);
+
+$taskitem-additional-width: rem-calc(100);
+$taskitem-chat-padding: rem-calc(40);
+$taskitem-newchat-font-size: math.ceil($font-size-base * 0.71);
+$taskitem-newchat-right: -20%;
+$taskitem-newchat-margin: rem-calc(20);
+$taskitem-newchat-padding: rem-calc(2 4); 
+
+
+
+
+

package/src/components/taskitem/scss/task-item.scss

@@ -0,0 +1,229 @@
+:host {
+  width: 100%;  
+}
+
+.md-taskitem {
+  @include task-flex-container;
+  border-radius: $taskitem-border-radius;
+  color: var(--md-secondary-text-color);
+  cursor: $taskitem-main-curcor;
+  margin-bottom: $taskitem-base-unit;
+  min-height: $taskitem-min-height;
+  padding: $taskitem-main-padding;
+  position: relative;
+  width: auto;
+  z-index: 0;
+
+  &.selected {
+    background-color: $taskitem-selected-bg;
+    box-shadow: $taskitem-selected-shadow;
+
+    .md-taskitem__content {
+      &_queue,
+      &_chat,
+      &_popover_title {
+        color: var(--taskitem-selected-text-color, $lm-taskitem-selected-text-color-light);
+      }
+
+      &_title {
+        &.mainTitle {
+          color: var(--taskitem-selected-text-color, $lm-taskitem-selected-text-color-light);
+        }
+      }
+    }
+  }
+
+  &:hover {
+    background-color: var(--taskitem-hover-bg-color, $lm-taskitem-hover-bg-color-light);
+
+    .md-taskitem__content {
+      &_queue,
+      &_chat,
+      &_popover_title {
+        color: var(--taskitem-selected-text-color, $lm-taskitem-selected-text-color-light);
+      }
+
+      &_title {
+        &.mainTitle {
+          color: var(--taskitem-selected-text-color, $lm-taskitem-selected-text-color-light);
+        }
+      }
+    }
+  }
+
+  &:active {
+    background-color: var(--taskitem-pressed-bg-color, $lm-taskitem-pressed-bg-color-light);
+
+    .md-taskitem__content {
+      &_queue,
+      &_chat,
+      &_popover_title {
+        color: var(--taskitem-selected-text-color, $lm-taskitem-selected-text-color-light);
+      }
+
+      &_title {
+        &.mainTitle {
+          color: var(--taskitem-selected-text-color, $lm-taskitem-selected-text-color-light);
+        }
+      }
+    }
+  }
+
+  &:focus {
+    background: var(--taskitem-focus-bg-color, $lm-taskitem-focus-bg-color-light);
+    box-shadow: none;
+    outline: none;
+
+    &::after {
+      @include taskitem-focus-boxshadow;
+    }
+  }
+
+  &::after {
+    @include task-after-focus;
+    border-radius: $taskitem-border-radius;
+    margin: -$taskitem-main-indent;
+  }
+}
+
+.md-taskitem__mediatype {
+  margin-right: $taskitem-mediatype-margin;
+  position: relative;
+  width: $taskitem-mediatype-width;
+
+  img {
+    max-width: fit-content;
+  }
+
+  .md-taskitem__status {
+    @include taskitem-status;
+    background: var(--taskitem-status-bg-color, $lm-taskitem-status-bg-color-light);
+    border-radius: $taskitem-border-circle;
+    bottom: -$taskitem-base-unit;
+    color: var(--taskitem-status-text-color, $lm-taskitem-status-text-color-light);
+    height: $taskitem-main-size;
+    right: -$taskitem-base-unit;
+    width: $taskitem-main-size;
+
+    md-icon {
+      height: $taskitem-status-height;
+    }
+
+    md-icon::part(icon) {
+      
+      vertical-align: top;
+    }
+
+    &.hold {
+      background: var(--taskitem-status-pause-bg-color, $lm-taskitem-status-pause-bg-color-light);
+    }
+  }
+}
+
+.md-taskitem__content {
+  @include taskitem-content;
+  width: calc(100% - calc(#{$taskitem-mediatype-width} + #{$taskitem-additional-width}));
+
+
+  &_popover_title {
+    @include text-dots;
+    color: var(--taskitem-text-color, $lm-taskitem-text-color-light);
+    font-family: $taskitem-title-font;
+    font-size: $taskitem-popover-title-font-size;
+    line-height: $taskitem-popover-title-height;
+    margin-bottom: $taskitem-main-margin;
+    width: calc(100%);
+  }
+
+  &_title {
+    @include text-dots;
+    font-size: $taskitem-title-font-size;
+    line-height: $taskitem-title-height;
+    margin-bottom: $taskitem-main-margin;
+    width: calc(100%); //don't delete, it need for text overflow
+
+    &.mainTitle {
+      color: var(--taskitem-text-color, $lm-taskitem-text-color-light);
+      font-family: $taskitem-title-font;
+    }
+  }
+
+  &_inner {
+    display: flex;
+    flex: 0 1 auto;
+    width: 100%;
+  }
+
+  &_queue {
+    @include text-dots;
+    font-size: $taskitem-queue-font-size;
+    line-height: $taskitem-base-height;
+    width: 100%;
+  }
+
+  &_chat {
+    color: var(--taskitem-chat-text-color, $lm-taskitem-chat-text-color-light);
+    display: flex;
+    font-size: $taskitem-queue-font-size;
+    line-height: $taskitem-base-height;
+    margin-top: $taskitem-main-margin;
+    position: relative;
+    width: 100%;
+
+    .new-chat_massages {
+      @include text-dots;
+      padding-right: $taskitem-chat-padding;
+      width: calc(100% - $taskitem-main-margin);
+    }
+  }
+}
+
+.md-taskitem__addition {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  margin-left: $taskitem-mediatype-margin;
+  text-align: right;
+  width: $taskitem-additional-width;
+
+  .new-chat-quantity {
+    background: var(--taskitem-chat-quantity-bg-color, $lm-taskitem-chat-quantity-bg-color-light);
+    border-radius: 9px;
+    color: var(--taskitem-chat-quantity-text-color, $lm-taskitem-chat-quantity-text-color-light);
+    display: inline-block;
+    font-size: $taskitem-newchat-font-size;
+    line-height: $taskitem-base-height;
+    min-width: 18px;
+    padding: $taskitem-newchat-padding;
+    text-align: center;
+  }
+}
+
+@media (forced-colors:active) {
+  .md-taskitem {
+    &:focus {
+      outline: 1px solid Highlight;
+    }
+
+    &.selected,
+    &:hover {
+      forced-color-adjust: none;
+      outline: 1px solid Highlight;
+      background-color: Highlight;
+      color: HighlightText;
+      box-shadow: none;
+    }
+
+    &:active {
+      forced-color-adjust: none;
+      outline: 1px solid HighlightText;
+      background-color: Highlight;
+      color: HighlightText;
+      box-shadow: none;
+    }
+  }
+
+  .md-taskitem__addition .new-chat-quantity {
+    forced-color-adjust: auto;
+  }
+}

package/src/components/taskitem/tokens/lm-taskitem-tokens.js

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const task_item = {
+  prefix: "lm",
+  component: "taskitem",
+  "text-color": {
+    light: colors.gray[70].name,
+    dark: colors.gray[40].name
+  },
+  "hover-bg-color": {
+    light: colors.white[100].name,
+    dark: colors.gray[90].name
+  },
+  "pressed-bg-color": {
+    light: colors.white[100].name,
+    dark: colors.gray[90].name
+  },
+  "focus-bg-color": {
+    light: colors.white[100].name,
+    dark: colors.gray[95].name
+  },
+  "focus-border-color": {
+    light: colors.theme[60].name,
+    dark: colors.theme[40].name
+  },
+  status: {
+    "bg-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[80].name
+    },
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray[10].name
+    },
+    pause: {
+      "bg-color": {
+        light: colors.yellow[20].name,
+        dark: colors.yellow[70].name
+      }
+    }
+  },
+  selected: {
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray["05"].name
+    }
+  },
+  chat: {
+    "text-color": {
+      light: colors.gray[70].name,
+      dark: colors.gray[40].name
+    },
+    "quantity-bg-color": {
+      light: colors.cobalt[30].name,
+      dark: colors.cobalt[70].name
+    },
+    "quantity-text-color": {
+      light: colors.cobalt[80].name,
+      dark: colors.cobalt[20].name
+    }
+  },
+  timer: {
+    "text-color": {
+      light: colors.green[70].name,
+      dark: colors.green[50].name
+    }
+  }
+};
+
+module.exports = task_item;