@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/avatar/Avatar.test.ts

@@ -1,202 +0,0 @@
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, oneEvent } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-import "./Avatar";
-import { Avatar } from "./Avatar";
-
-describe("Avatar", () => {
-  afterEach(fixtureCleanup);
-
-  test("should set source property", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar alt="avatar" title="Alyson Born" src="https://example.com"></md-avatar>
-    `);
-    expect(element.src).toEqual("https://example.com");
-  });
-
-  test("should set color property", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar alt="avatar" title="Alyson Born" color="mint"></md-avatar>
-    `);
-    expect(element.color).toEqual("mint");
-  });
-
-  test("should set size property", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html` <md-avatar alt="avatar" size="44"></md-avatar> `);
-    expect(element.size).toEqual(44);
-  });
-
-  test("should set correct pretify title", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar alt="avatar" title=" Alyson Born Hoaland "></md-avatar>
-    `);
-    const letter = element.shadowRoot!.querySelector(".md-avatar__letter");
-
-    expect(letter!.textContent!.trim()).toEqual("AH");
-
-    const element2 = await fixture<Avatar.ELEMENT>(html` <md-avatar alt="avatar" title="Chandler"></md-avatar> `);
-    const letter2 = element2.shadowRoot!.querySelector(".md-avatar__letter");
-
-    expect(letter2!.textContent!.trim()).toEqual("C");
-
-    const element3 = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar alt="avatar" title="Joseph Francis Tribbiani Junior"></md-avatar>
-    `);
-    const letter3 = element3.shadowRoot!.querySelector(".md-avatar__letter");
-
-    expect(letter3!.textContent!.trim()).toEqual("JJ");
-  });
-
-  test("should render icon even if title is provided", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar alt="avatar" title="Alyson Born Hoaland" color="mint" icon-name="warning_20"></md-avatar>
-    `);
-
-    expect(element.shadowRoot!.querySelector(".md-avatar__img")).toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector(".md-avatar__letter")).toBeNull();
-  });
-
-  test("should render self avatar type if type property provided with self value", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar alt="avatar" size="36" title="Alyson Born Hoaland" type="self"></md-avatar>
-    `);
-    expect(element.shadowRoot!.querySelector(".md-avatar__self")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector("md-icon")!.name).toEqual("chat-filled");
-    expect(element.shadowRoot!.querySelector("md-icon")!.size).toEqual("18");
-
-    element.size = 44;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector("md-icon")!.name).toEqual("chat-filled");
-    expect(element.shadowRoot!.querySelector("md-icon")!.size).toEqual("22");
-
-    element.size = 28;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelector("md-icon")!.name).toEqual("chat-filled");
-    expect(element.shadowRoot!.querySelector("md-icon")!.size).toEqual("14");
-  });
-
-  test("should render notification bange", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar has-notification type="active" size="72" title="Tom Smith"></md-avatar>
-    `);
-
-    expect(element.hasNotification).toBeTruthy();
-    expect(element.shadowRoot!.querySelector(".md-avatar__notification-badge")).not.toBeNull();
-  });
-
-  test("should provide loading status if type is typing", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html` <md-avatar type="typing" title="Tom Smith"></md-avatar> `);
-
-    expect(element.shadowRoot!.querySelector("md-loading")).not.toBeNull();
-  });
-
-  test("should provide loading status if boolean typing is true", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html` <md-avatar typing="true" title="Tom Smith"></md-avatar> `);
-
-    expect(element.shadowRoot!.querySelector("md-loading")).not.toBeNull();
-  });
-
-  test("should render presence if boolean newMomentum is true", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar type="active" title="active" newMomentum="true"></md-avatar>
-    `);
-
-    expect(element.shadowRoot!.querySelector("md-presence")).not.toBeNull();
-    expect(element.shadowRoot!.querySelector(".md-avatar--active")).toBeNull();
-  });
-
-  test("should set presenceColor, presenceIcon, and isCircularWrapper based on type", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar type="active" title="active" newMomentum="true"></md-avatar>
-    `);
-
-    await element.updateComplete;
-
-    const presenceIndicator = element.shadowRoot!.querySelector(".avatar-presence");
-    expect(presenceIndicator).not.toBeNull();
-    if (presenceIndicator) {
-      const computedStyle = window.getComputedStyle(presenceIndicator);
-      expect(computedStyle.color).toBe(
-        getComputedStyle(document.documentElement).getPropertyValue("--avatar-presence-active")
-      );
-      expect(presenceIndicator.getAttribute("name")).toBe("unread-filled");
-      expect(presenceIndicator.hasAttribute("isCircularWrapper"));
-    }
-  });
-
-  test("should handle click event in avatar", async () => {
-    jest.spyOn(Avatar.ELEMENT.prototype, "blur");
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar title="active" size="40" type="active" newMomentum clickable="true" role="button"></md-avatar>
-    `);
-    const evt = new MouseEvent("click");
-    setTimeout(() => element.handleClick(evt));
-    const { detail } = await oneEvent(element, "button-click");
-    expect(detail).toBeDefined();
-    expect(detail.srcEvent.type).toBe("click");
-  });
-
-  test("should handle keydown event in avatar", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar title="active" size="40" type="active" newMomentum clickable="true" role="button"></md-avatar>
-    `);
-    const spyKeyDown = jest.spyOn(element, "handleKeyDown");
-
-    const mockFn = jest.fn();
-    element.addEventListener("button-keydown", mockFn);
-
-    const keyEvent = new KeyboardEvent("keydown", { code: Key.Enter });
-    const keyEvent2 = new KeyboardEvent("keydown", { code: Key.Space });
-    const keyEvent3 = new KeyboardEvent("keydown", { code: Key.NumpadEnter });
-    element.handleKeyDown(keyEvent);
-    element.handleKeyDown(keyEvent2);
-    element.handleKeyDown(keyEvent3);
-    expect(spyKeyDown).toHaveBeenCalledTimes(3);
-    expect(mockFn).toHaveBeenCalledTimes(3);
-    spyKeyDown.mockRestore();
-  });
-
-  test("should not dispatch custom keydown event if not clickable", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar title="active" size="40" type="active" newMomentum></md-avatar>
-    `);
-    const spyKeyDown = jest.spyOn(element, "handleKeyDown");
-
-    const mockFn = jest.fn();
-    element.addEventListener("button-keydown", mockFn);
-
-    const keyEvent = new KeyboardEvent("keydown", { code: Key.Enter });
-    const keyEvent2 = new KeyboardEvent("keydown", { code: Key.Space });
-    const keyEvent3 = new KeyboardEvent("keydown", { code: Key.NumpadEnter });
-    element.handleKeyDown(keyEvent);
-    element.handleKeyDown(keyEvent2);
-    element.handleKeyDown(keyEvent3);
-    expect(spyKeyDown).toHaveBeenCalledTimes(3);
-    expect(mockFn).toHaveBeenCalledTimes(0);
-    spyKeyDown.mockRestore();
-  });
-
-  test("should not dispatch custom click if not clickable", async () => {
-    const element = await fixture<Avatar.ELEMENT>(html`
-      <md-avatar title="active" size="40" type="active" newMomentum></md-avatar>
-    `);
-    const spyHandleClick = jest.spyOn(element, "handleClick");
-
-    const clickFunction = jest.fn();
-    element.clickFunction = clickFunction;
-
-    const mockFn = jest.fn();
-    element.addEventListener("button-click", mockFn);
-
-    const evt = new MouseEvent("click");
-    element.handleClick(evt);
-    expect(spyHandleClick).toHaveBeenCalledTimes(1);
-    expect(clickFunction).toHaveBeenCalledTimes(0);
-    expect(mockFn).toHaveBeenCalledTimes(0);
-    spyHandleClick.mockRestore();
-  });
-});

package/src/components/avatar/Avatar.ts

@@ -1,294 +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/avatar/Presence";
-import "@/components/icon/Icon";
-import "@/components/loading/Loading";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { isActionKey } from "@/utils/keyboard";
-import reset from "@/wc_scss/reset.scss";
-import { html, internalProperty, LitElement, property, PropertyValues } from "lit-element";
-import { nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
-import { until } from "lit-html/directives/until.js";
-import { AvatarSize, AvatarType } from "./Avatar.constants";
-import { getPresenceIconColor } from "./Presence.utils";
-import styles from "./scss/module.scss";
-
-export namespace Avatar {
-  export type Type = (typeof AvatarType)[number];
-  export type Size = (typeof AvatarSize)[number];
-  export type Role = "img" | "button";
-
-  @customElementWithCheck("md-avatar")
-  export class ELEMENT extends LitElement {
-    private _tabIndex = 0;
-    @property({ type: Number, attribute: "tab-index", reflect: true })
-    get tabIndex() {
-      return this._tabIndex;
-    }
-    set tabIndex(newValue: number) {
-      const oldValue = this._tabIndex;
-      this._tabIndex = newValue;
-      this.requestUpdate("tabIndex", oldValue);
-    }
-
-    @property({ type: String }) alt = "";
-    @property({ type: String }) src = "";
-    @property({ type: String }) label = "";
-    @property({ type: String }) title = "";
-    @property({ type: String }) color = "";
-    @property({ type: Boolean }) decrypting = false;
-    @property({ type: String }) role: Avatar.Role = "img";
-    @property({ type: String, attribute: "icon-name" }) iconName = "";
-    @property({ type: String }) type: Type = "";
-    @property({ type: Boolean }) newMomentum = false;
-    @property({ type: Boolean }) typing = false;
-    @property({ type: Number }) size: Size = 40;
-    @property({ type: Boolean, attribute: "has-notification" }) hasNotification = false;
-    @property({ type: Boolean }) clickable = false;
-    @property({ attribute: false }) clickFunction?: () => void;
-
-    @internalProperty() private imageLoaded = false;
-    @internalProperty() private imageErrored = false;
-    @internalProperty() private presenceColor = "";
-    @internalProperty() private presenceIcon = "";
-    @internalProperty() private isCircularWrapper = false;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    firstUpdated() {
-      const { presenceColor, presenceIcon, isCircularWrapper } = getPresenceIconColor(
-        this.type,
-        false,
-        this.newMomentum
-      );
-      this.presenceColor = presenceColor!;
-      this.presenceIcon = presenceIcon!;
-      this.isCircularWrapper = isCircularWrapper!;
-    }
-
-    updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("type")) {
-        const { presenceColor, presenceIcon, isCircularWrapper } = getPresenceIconColor(
-          this.type,
-          false,
-          this.newMomentum
-        );
-        this.presenceColor = presenceColor!;
-        this.presenceIcon = presenceIcon!;
-        this.isCircularWrapper = isCircularWrapper!;
-      }
-      if (changedProperties.has("role")) {
-        this.style.setProperty("--avatar-cursor", this.role === "button" ? "pointer" : "default");
-      }
-    }
-
-    private get avatarClassMap() {
-      return {
-        ...((!this.newMomentum || this.type === "bot") && this.type ? { [`md-avatar--${this.type}`]: true } : {}),
-        [`md-avatar--${this.size}`]: !!this.size
-      };
-    }
-
-    private get avatarLetterClassMap() {
-      return {
-        "md-decrypting": this.decrypting,
-        [`md-avatar--${this.color}`]: this.color
-      };
-    }
-
-    private get avatarStyleMap() {
-      return {
-        [`md-avatar--${this.color}`]: this.color
-      };
-    }
-
-    private get pretifyTitle() {
-      if (this.title.length) {
-        const fullName = this.title.trim().split(" ");
-        if (fullName.length === 1) return fullName[0].charAt(0);
-        else {
-          return fullName[0].charAt(0) + fullName[fullName.length - 1].charAt(0);
-        }
-      }
-
-      return this.title;
-    }
-
-    private get chatIconName() {
-      return "chat-filled";
-    }
-
-    private get chatIconSize() {
-      return this.iconSize;
-    }
-
-    private get iconSize() {
-      return (this.size / 2).toString();
-    }
-
-    get renderIsTyping() {
-      return this.type === "typing" || this.typing ? html` <md-loading></md-loading> ` : nothing;
-    }
-
-    private get avatarLetter() {
-      return this.title
-        ? html`
-            <span class="md-avatar__letter ${classMap(this.avatarLetterClassMap)}">
-              ${this.pretifyTitle}
-              <slot></slot>
-              ${this.renderIsTyping}
-            </span>
-          `
-        : nothing;
-    }
-
-    private get avatarIcon() {
-      return html`
-        <span class="md-avatar__icon ${classMap(this.avatarStyleMap)}">
-          <md-icon
-            .name=${this.iconName}
-            .iconSet=${this.newMomentum ? "momentumDesign" : "momentumUI"}
-            .size=${this.newMomentum ? this.iconSize : ""}
-          ></md-icon>
-        </span>
-      `;
-    }
-
-    private get avatarImage() {
-      return html`
-        ${until(
-          this.loadImage()
-            .then((image) => {
-              this.handleImageLoad();
-              return html` ${image} `;
-            })
-            .catch(() => this.handleImageError()),
-          html` ${this.iconName ? this.avatarIcon : this.title ? html` ${this.avatarLetter} ` : nothing} `
-        )}
-      `;
-    }
-
-    private async loadImage() {
-      return new Promise((resolve, reject) => {
-        const img = document.createElement("img");
-        img.src = this.src;
-        img.alt = this.alt;
-        img.onload = () => resolve(img);
-        img.onerror = (error) => reject(error);
-        img.classList.add("md-avatar__img");
-        img.classList.toggle("md-avatar__img--hidden", !this.imageLoaded);
-      });
-    }
-
-    private handleImageLoad() {
-      this.imageLoaded = true;
-    }
-
-    private handleImageError() {
-      this.imageErrored = true;
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      if (!this.clickable) {
-        return;
-      }
-      const { code } = event;
-      if (isActionKey(code)) {
-        this.dispatchEvent(
-          new CustomEvent("button-keydown", {
-            composed: true,
-            bubbles: true,
-            detail: {
-              srcEvent: event
-            }
-          })
-        );
-      }
-    }
-
-    handleClick(event: MouseEvent) {
-      if (!this.clickable) {
-        return;
-      }
-      this.clickFunction && this.clickFunction();
-      this.dispatchEvent(
-        new CustomEvent("button-click", {
-          composed: true,
-          bubbles: true,
-          detail: {
-            srcEvent: event
-          }
-        })
-      );
-    }
-
-    get avatarContent() {
-      if (this.src && !this.imageErrored) {
-        return this.avatarImage;
-      } else if (this.iconName) {
-        return this.avatarIcon;
-      } else if (this.title) {
-        return this.avatarLetter;
-      }
-      return nothing;
-    }
-
-    renderPresence() {
-      return this.newMomentum && this.type && this.type !== "self" && this.presenceIcon
-        ? html`
-            <md-presence
-              class="avatar-presence"
-              name="${this.presenceIcon}"
-              color="${this.presenceColor}"
-              .isCircularWrapper=${this.isCircularWrapper}
-              size="${this.size}"
-            >
-            </md-presence>
-          `
-        : nothing;
-    }
-
-    render() {
-      return html`
-        <div
-          part="avatar"
-          class="md-avatar
-          ${classMap(this.avatarClassMap)}"
-          role=${this.role}
-          @click=${(e: MouseEvent) => this.handleClick(e)}
-          @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e)}
-          tabindex=${ifDefined(this.tabIndex || undefined)}
-          aria-label=${ifDefined(this.label)}
-        >
-          ${this.type === "self"
-            ? html`
-                <span class="md-avatar__self" style=${styleMap(this.avatarStyleMap)}>
-                  <md-icon .name=${this.chatIconName} .iconSet=${"momentumDesign"} .size=${this.chatIconSize}></md-icon>
-                </span>
-              `
-            : this.avatarContent}
-          ${this.hasNotification ? html` <span class="md-avatar__notification-badge"></span> ` : nothing}
-          ${this.renderPresence()}
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-avatar": Avatar.ELEMENT;
-  }
-}

package/src/components/avatar/CompositeAvatar.ts

@@ -1,47 +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 reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { AvatarSize } from "./Avatar.constants"; // Keep type import as a relative path
-import styles from "./scss/module.scss";
-
-export namespace CompositeAvatar {
-  export type Size = (typeof AvatarSize)[number];
-
-  @customElementWithCheck("md-composite-avatar")
-  export class ELEMENT extends LitElement {
-    @property({ type: Number }) size: Size = 0;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    get avatarClassMap() {
-      return {
-        [`md-composite-avatar--${this.size}`]: !!this.size
-      };
-    }
-
-    render() {
-      return html`
-        <div class="md-composite-avatar ${classMap(this.avatarClassMap)}">
-          <slot></slot>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-composite-avatar": CompositeAvatar.ELEMENT;
-  }
-}