@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/taskitem/TaskItem.test.ts

@@ -1,349 +0,0 @@
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
-import "./TaskItem";
-import { TaskItem } from "./TaskItem";
-
-const fixtureFactory = async (
-  mediaType: string,
-  popovertitle: string,
-  title: string,
-  queue: string,
-  status: string,
-  quantity: number,
-  lastmessage: string,
-  selected: boolean,
-  customAriaLabel = ""
-): Promise<TaskItem.ELEMENT> => {
-  return await fixture(
-    html`
-      <md-task-item
-        mediaType="${mediaType}"
-        title="${title}"
-        popovertitle="${popovertitle}"
-        queue="${queue}"
-        status="${status}"
-        quantity="${quantity}"
-        lastmessage="${lastmessage}"
-        .selected="${selected}"
-        customAriaLabel="${customAriaLabel}"
-      >
-        <div slot="task-addition">00:08</div>
-      </md-task-item>
-    `
-  );
-};
-
-describe("TaskItem", () => {
-  afterEach(fixtureCleanup);
-
-  test("should render TaskItem Component", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "telephony",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "consulting",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("handset-active_16");
-    expect(status?.getAttribute("name")).toEqual("headset_12");
-  });
-
-  test("should render TaskItem Component", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "facebook",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "consulting",
-      0,
-      "",
-      false
-    );
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("messenger_16");
-  });
-
-  test("should render TaskItem Component", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "whatsapp",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "consulting",
-      0,
-      "",
-      false
-    );
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("whatsApp_16");
-  });
-
-  test("should render correct type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "chat",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("chat-active_16");
-    expect(status?.getAttribute("name")).toEqual("play_12");
-  });
-
-  test("should render correct outbound type ", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "outbound telephony",
-      "Mihael Varificantare",
-      "Mihael Varificantare",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("outgoing-call-active_16");
-  });
-
-  test("should render caalback type ", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "callback",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("icon-icon-callback_18");
-  });
-
-  test("should render correct inbound type ", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "inbound telephony",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "play",
-      0,
-      "",
-      false
-    );
-
-    const type = element.shadowRoot?.querySelector("md-icon");
-    expect(type?.getAttribute("name")).toEqual("incoming-call-active_16");
-  });
-
-  test("should update type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "email",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "hold",
-      0,
-      "",
-      true
-    );
-
-    expect(element.selected).toBeTruthy;
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("email-active_16");
-    expect(status?.getAttribute("name")).toEqual("pause_12");
-  });
-
-  test("should update type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "sms",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "conference",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const type = element.shadowRoot?.querySelector("md-icon");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("sms_16");
-    expect(status?.getAttribute("name")).toEqual("meet_12");
-  });
-
-  test("should update type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const type = element.shadowRoot?.querySelector(".md-taskitem__mediatype slot");
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(type?.getAttribute("name")).toEqual("task-type");
-    expect(status?.getAttribute("name")).toEqual("assign-privilege_12");
-  });
-
-  test("should update campaign status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "campaign",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(status?.getAttribute("name")).toEqual("announcement_12");
-  });
-
-  test("should update courtesy_callback status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "courtesy_callback",
-      0,
-      "",
-      false
-    );
-    expect(element).not.toBeNull();
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status md-icon");
-    expect(status?.getAttribute("name")).toEqual("call-log_12");
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "call",
-      10,
-      "Test message",
-      false
-    );
-    expect(element).not.toBeNull();
-    const status = element.shadowRoot?.querySelector(".md-taskitem__status slot");
-    const quantity = element.shadowRoot?.querySelector(".new-chat-quantity");
-    expect(element.lastmessage).toEqual("Test message");
-    const chat = element.shadowRoot?.querySelector(".md-taskitem__content_chat");
-    expect(status?.getAttribute("name")).toEqual("task-status");
-    expect(quantity).toBeUndefined;
-    expect(chat).toBeUndefined;
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "call",
-      101,
-      "Test message",
-      false
-    );
-    expect(element).not.toBeNull();
-    const quantity = element.shadowRoot?.querySelector(".new-chat-quantity span");
-    expect(quantity).toBeUndefined;
-  });
-
-  test("should render slot quele", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "",
-      "call",
-      0,
-      "Test message",
-      false
-    );
-    expect(element).not.toBeNull();
-    const quelle = element.shadowRoot?.querySelector(".md-taskitem__content_queue slot[name='queue']");
-    expect(quelle).toBeUndefined;
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false
-    );
-    const mockClick = jest.spyOn(element, "handleClick");
-    element.handleClick(new MouseEvent("click"));
-    await elementUpdated(element);
-
-    expect(mockClick).toHaveBeenCalled();
-
-    mockClick.mockRestore();
-  });
-
-  test("should upadte type and status", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false
-    );
-    const mockKeydown = jest.spyOn(element, "handleKeyDown");
-    element.handleKeyDown(new KeyboardEvent(Key.Enter));
-    await elementUpdated(element);
-
-    expect(mockKeydown).toHaveBeenCalled();
-
-    mockKeydown.mockRestore();
-  });
-
-  test("should have custom aria label", async () => {
-    const element: TaskItem.ELEMENT = await fixtureFactory(
-      "twitter",
-      "Mihael Varificantare",
-      "",
-      "quelle_1",
-      "transfered",
-      0,
-      "",
-      false,
-      "Custom area label"
-    );
-    await elementUpdated(element);
-    const ariaLabel = element.shadowRoot?.querySelector(".md-taskitem")?.getAttribute("aria-label");
-    expect(ariaLabel).toEqual("Custom area label");
-  });
-});

package/src/components/taskitem/TaskItem.ts

@@ -1,249 +0,0 @@
-/**
- * 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 }) title = "";
-    @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 = "";
-
-    renderTaskType = () => {
-      switch (this.mediaType.toLowerCase()) {
-        case "telephony":
-          return html`
-            <md-badge color="green" circle>
-              <md-icon name="handset-active_16"></md-icon>
-            </md-badge>
-          `;
-        case "outbound telephony":
-          return html`
-            <md-badge color="green" circle>
-              <md-icon name="outgoing-call-active_16"></md-icon>
-            </md-badge>
-          `;
-        case "inbound telephony":
-          return html`
-            <md-badge color="green" circle>
-              <md-icon name="incoming-call-active_16"></md-icon>
-            </md-badge>
-          `;
-        case "callback":
-          return html`
-            <md-badge color="lime" circle>
-              <md-icon name="icon-icon-callback_18"></md-icon>
-            </md-badge>
-          `;
-        case "chat":
-          return html`
-            <md-badge color="blue" circle>
-              <md-icon name="chat-active_16"></md-icon>
-            </md-badge>
-          `;
-        case "email":
-          return html`
-            <md-badge color="violet" circle>
-              <md-icon name="email-active_16"></md-icon>
-            </md-badge>
-          `;
-        case "sms":
-          return html`
-            <md-badge color="darkmint" circle>
-              <md-icon name="sms_16" color="white"></md-icon>
-            </md-badge>
-          `;
-        case "facebook":
-          return html`
-            <md-badge bgColor="#0078FF" circle>
-              <md-icon name="messenger_16" color="white"></md-icon>
-            </md-badge>
-          `;
-        case "whatsapp":
-          return html`
-            <md-badge bgColor="#25D366" circle>
-              <md-icon name="whatsApp_16" color="white"></md-icon>
-            </md-badge>
-          `;
-        default:
-          return html`
-            <slot name="task-type"></slot>
-          `;
-      }
-    };
-
-    renderStatus = () => {
-      switch (this.status) {
-        case "consulting":
-          return html`
-            <md-icon name="headset_12"></md-icon>
-          `;
-        case "play":
-          return html`
-            <md-icon name="play_12"></md-icon>
-          `;
-        case "hold":
-          return html`
-            <md-icon name="pause_12"></md-icon>
-          `;
-        case "conference":
-          return html`
-            <md-icon name="meet_12"></md-icon>
-          `;
-        case "transfered":
-          return html`
-            <md-icon name="assign-privilege_12"></md-icon>
-          `;
-        case "courtesy_callback":
-          return html`
-            <md-icon name="call-log_12"></md-icon>
-          `;
-        case "campaign":
-          return html`
-            <md-icon name="announcement_12"></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) {
-      event.preventDefault();
-
-      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;
-      }
-      return `${this.mediaType} ${this.status} ${this.title} ${this.queue} ${this.quantity ? this.quantity : ""} ${
-        this.lastmessage
-      }`;
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html`
-        <div
-          part="task-item-container"
-          class="md-taskitem ${classMap({ selected: this.selected })}"
-          tabindex="0"
-          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

@@ -1,42 +0,0 @@
-
-@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

@@ -1,15 +0,0 @@
-@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

@@ -1,43 +0,0 @@
-$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: ceil($font-size-base * 0.71);
-$taskitem-newchat-right: -20%;
-$taskitem-newchat-margin: rem-calc(20);
-$taskitem-newchat-padding: rem-calc(2 4); 
-
-
-
-
-