@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/card-ai/CardAi.ts

@@ -1,232 +0,0 @@
-/* eslint-disable prettier/prettier */
-/**
- * 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/button/Button";
-import "@/components/icon/Icon";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-import { html, internalProperty, LitElement, property } from "lit-element";
-import { nothing } from "lit-html";
-import styles from "./scss/module.scss";
-import { classMap } from "lit-html/directives/class-map.js";
-
-export enum CardAiVariant {
-  USER_QUERY = "user_query",
-  RESPONSE = "response"
-}
-
-export namespace CardAi {
-  @customElementWithCheck("md-card-ai")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) id = "";
-    @property({ type: String }) title = "";
-    @property({ type: String }) cardText = "";
-    @property({ type: String }) timestamp = "";
-    @property({ type: Boolean }) summariseMoreVisible = false;
-    @property({ type: String }) variant: CardAiVariant = CardAiVariant.RESPONSE;
-    @internalProperty() private copyChecked = false;
-    @internalProperty() private thumbsUpChecked = false;
-    @internalProperty() private thumbsDownChecked = false;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    thumbsUpToggled() {
-      this.thumbsDownChecked = false;
-      this.thumbsUpChecked = !this.thumbsUpChecked;
-      this.dispatchEvent(
-        new CustomEvent<{ id: string }>("thumbs-up-toggled", {
-          detail: {
-            id: this.id
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    thumbsDownToggled() {
-      this.thumbsUpChecked = false;
-      this.thumbsDownChecked = !this.thumbsDownChecked;
-      this.dispatchEvent(
-        new CustomEvent<{ id: string }>("thumbs-down-toggled", {
-          detail: {
-            id: this.id
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    summariseMoreToggled() {
-      this.dispatchEvent(
-        new CustomEvent<{ id: string }>("summarise-more-toggled", {
-          detail: {
-            id: this.id
-          },
-          bubbles: true,
-          composed: true
-        })
-      );
-    }
-
-    private copyToggled() {
-      navigator.clipboard.writeText(this.cardText);
-      this.copyChecked = true;
-      setTimeout(() => {
-        this.copyChecked = false;
-      }, 2000);
-    }
-
-    private renderHeader() {
-      if (this.variant === CardAiVariant.RESPONSE && this.title !== "") {
-        return html`
-          <div class="md-card-ai-header">
-            <slot name="card-header-aside">
-              <md-icon name="cisco-ai-assistant-color" iconSet="momentumBrandVisuals"></md-icon>
-            </slot>
-            <div class="md-card-ai-header-title">
-              <slot name="card-header-title">
-                <h3>${this.title}</h3>
-              </slot>
-            </div>
-          </div>
-        `;
-      }
-      return nothing;
-    }
-
-    private renderCardText() {
-      const bottomBorderRadiusClass = this.timestamp ? "with-bottom-border-radius" : "no-bottom-border-radius";
-      const classes = {
-        "md-card-ai-card-body-user-query": this.variant === CardAiVariant.USER_QUERY,
-        [`md-card-ai-card-body-response-${bottomBorderRadiusClass}`]: this.variant === CardAiVariant.RESPONSE
-      };
-
-      if (this.cardText !== "") {
-        return html`
-          <div class=${classMap(classes)}>
-            <h3>${this.cardText}</h3>
-            ${this.renderResponseCard()}
-          </div>
-        `;
-      }
-      return nothing;
-    }
-
-    private renderThumbsUpButton() {
-      const thumbsUpButtonVariant = this.thumbsUpChecked ? "secondary" : "ghost";
-      const thumbsUpAriaLabel = this.thumbsUpChecked ? "This is helpful, selected" : "This is helpful";
-
-      return html`
-        <div class="md-card-ai-thumbs-up">
-          <md-button
-            circle
-            variant=${thumbsUpButtonVariant}
-            size="28"
-            ariaLabel=${thumbsUpAriaLabel}
-            @click=${this.thumbsUpToggled}
-          >
-            <md-icon slot="icon" name="like-regular" iconSet="momentumDesign"></md-icon>
-          </md-button>
-        </div>
-      `;
-    }
-
-    private renderThumbsDownButton() {
-      const thumbsDownButtonVariant = this.thumbsDownChecked ? "secondary" : "ghost";
-      const thumbsDownAriaLabel = this.thumbsDownChecked ? "This is not helpful, selected" : "This is not helpful";
-
-      return html`
-        <div>
-          <md-button
-            circle
-            variant=${thumbsDownButtonVariant}
-            size="28"
-            ariaLabel=${thumbsDownAriaLabel}
-            @click=${this.thumbsDownToggled}
-          >
-            <md-icon slot="icon" name="dislike-regular" iconSet="momentumDesign"></md-icon>
-          </md-button>
-        </div>
-      `;
-    }
-
-    private renderCopyButton() {
-      const copyButtonVariant = this.copyChecked ? "secondary" : "ghost";
-      const copyAriaLabel = this.copyChecked ? "Copied, selected" : "Copy summary";
-
-      return html`
-        <div class="md-card-ai-copy-button-container">
-          <md-button
-            size="32"
-            variant=${copyButtonVariant}
-            ariaLabel=${copyAriaLabel}
-            outline
-            @click=${this.copyToggled}
-          >
-            <md-icon
-              slot="icon"
-              name=${this.copyChecked ? "check-regular" : "copy-regular"}
-              iconSet="momentumDesign"
-            ></md-icon>
-            <span slot="text">${this.copyChecked ? "Copied" : "Copy"}</span>
-          </md-button>
-        </div>
-      `;
-    }
-
-    private renderResponseCard() {
-      const shouldRenderResponse = this.variant === CardAiVariant.RESPONSE && this.timestamp !== "";
-      if (shouldRenderResponse) {
-        return html`
-          <div class="md-card-ai-divider"></div>
-          <div class="md-card-ai-time-wrapper">
-            <time class="md-card-ai-time" aria-hidden="true" datetime=${this.timestamp}> ${this.timestamp} </time>
-            <span class="md-card-ai-dot-separator">&#8226;</span>
-            <div class="md-card-ai-feedback">${this.renderThumbsUpButton()} ${this.renderThumbsDownButton()}</div>
-            ${this.renderCopyButton()}
-          </div>
-        `;
-      }
-      return nothing;
-    }
-
-    private renderFooter() {
-      const shouldRenderFooter = this.variant === CardAiVariant.RESPONSE && this.summariseMoreVisible;
-      if (shouldRenderFooter) {
-        return html`
-          <div class="md-card-ai-footer">
-            <md-button size="32" variant="ghost" outline @click=${this.summariseMoreToggled}>
-              <span slot="text">Summarise more</span>
-            </md-button>
-          </div>
-        `;
-      }
-      return nothing;
-    }
-
-    render() {
-      return html`
-        <div class="md-card-ai" id="${this.id}" part="card" tabindex="0">
-          ${this.renderHeader()}
-          <div class="content-margin">${this.renderCardText()} ${this.renderFooter()}</div>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-card-ai": CardAi.ELEMENT;
-  }
-}

package/src/components/card-ai/scss/card-ai.scss

@@ -1,107 +0,0 @@
-:host(md-card-ai) {
-  display: inline-block;
-
-  .content-margin {
-    margin-left: $md-card-ai-margin-left;
-  }
-
-  .md-card-ai {
-    @include flex($fd: column, $jc: flex-start, $ai: stretch);
-    color: $md-card-ai-color;
-    min-width: $md-card-ai-min-width;
-    max-width: $md-card-ai-width;
-    padding: 0;
-    position: relative;
-    width: 100%;
-
-    &-header {
-      @include flex($jc: space-between, $ac: flex-start, $ai: flex-start);
-      flex: 1 0 100%;
-      margin-bottom: $md-card-ai-indent;
-
-      md-icon {
-        padding-top: calc(#{$md-card-ai-indent} * 0.5);
-      }
-
-      &-title {
-        display: flex;
-        flex: 1 1 100%;
-        flex-direction: column;
-        margin: 0 $md-card-ai-indent;
-        color: $md-card-ai-title-color;
-
-        h3 {
-          font-weight: $md-card-ai-font-weight-bold;
-        }
-      }
-    }
-
-    &-card-body-response {
-      color: $md-card-ai-title-color;
-      background: $md-card-ai-card-body-bg;
-      background-color: $md-card-ai-card-body-response-bg-color;
-      border: $md-card-ai-border;
-      margin-bottom: calc(#{$md-card-ai-indent} * 2);
-      padding: $md-card-ai-margin-eight $md-card-ai-margin-twelve $md-card-ai-margin-twelve $md-card-ai-margin-twelve;
-
-      &-with-bottom-border-radius {
-        @extend .md-card-ai-card-body-response;
-        border-radius: $md-card-ai-card-body-border-radius;
-      }
-
-      &-no-bottom-border-radius {
-        @extend .md-card-ai-card-body-response;
-        border-radius: $md-card-ai-card-body-border-radius $md-card-ai-card-body-border-radius 0 0;
-      }
-    }
-
-    &-card-body-user-query {
-      color: $md-card-ai-title-color;
-      background: $md-card-ai-card-body-bg;
-      background-color: $md-card-ai-blue-bg-color;
-      border: $md-card-ai-border;
-      border-radius: $md-card-ai-card-body-border-radius $md-card-ai-card-body-border-radius 0
-        $md-card-ai-card-body-border-radius;
-      margin-bottom: calc(#{$md-card-ai-indent} * 2);
-      padding: $md-card-ai-margin-eight;
-    }
-
-    &-divider {
-      border-bottom: 1px solid $md-card-ai-title-color;
-      margin: $md-card-ai-margin-sixteen 0;
-    }
-
-    &-time {
-      font-weight: $md-card-ai-font-weight-semi-bold;
-      margin-right: 0.5rem;
-    }
-
-    &-time-wrapper {
-      display: flex;
-      align-items: center;
-    }
-
-    &-dot-separator {
-      margin-right: 0.5rem;
-    }
-
-    &-feedback {
-      display: flex;
-      align-items: center;
-    }
-
-    &-thumbs-up {
-      padding-right: $md-card-ai-margin-five;
-    }
-
-    &-copy-button-container {
-      margin-left: auto;
-    }
-
-    &-footer {
-      display: flex;
-      flex-wrap: wrap;
-      gap: $md-card-ai-indent;
-    }
-  }
-}

package/src/components/card-ai/scss/module.scss

@@ -1,13 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-@import "@/wc_scss/tools/mixins/flex";
-
-@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 "./settings";
-@import "./card-ai";

package/src/components/card-ai/scss/settings.scss

@@ -1,17 +0,0 @@
-$md-card-ai-margin-five: rem-calc(5);
-$md-card-ai-margin-eight: rem-calc(8);
-$md-card-ai-margin-twelve: rem-calc(12);
-$md-card-ai-margin-sixteen: rem-calc(16);
-$md-card-ai-margin-left: rem-calc(24);
-$md-card-ai-min-width: rem-calc(350);
-$md-card-ai-width: rem-calc(424);
-$md-card-ai-font-weight-semi-bold: 400;
-$md-card-ai-font-weight-bold: 600;
-$md-card-ai-color: var(--md-secondary-text-color);
-$md-card-ai-title-color: var(--md-primary-text-color);
-$md-card-ai-card-body-bg: var(--md-secondary-bg-color);
-$md-card-ai-card-body-response-bg-color: var(--md-background-tertiary);
-$md-card-ai-blue-bg-color: var(--card-ai-blue-bg-color);
-$md-card-ai-card-body-border-radius: rem-calc(8);
-$md-card-ai-border: var(--md-quaternary-bg-color);
-$md-card-ai-indent: rem-calc(8);

package/src/components/card-ai/tokens/lm-card-ai-tokens.js

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const cardAi = {
-  prefix: "lm",
-  component: "card-ai",
-  blue: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-theme-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    }
-  }
-};
-
-module.exports = cardAi;

package/src/components/card-ai/tokens/md-card-ai-tokens.js

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const cardAi = {
-  prefix: "md",
-  component: "card-ai",
-  blue: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-theme-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    }
-  }
-};
-
-module.exports = cardAi;

package/src/components/card-ai/tokens/mdv2-card-ai-tokens.js

@@ -1,16 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const cardAi = {
-  prefix: "mdv2",
-  component: "card-ai",
-  blue: {
-    "bg-color": {
-      common: "$mds-color-theme-background-alert-theme-normal"
-    },
-    "text-color": {
-      common: "$mds-color-theme-text-primary-normal"
-    }
-  }
-};
-
-module.exports = cardAi;

package/src/components/chat-message/ChatMessage.stories.ts

@@ -1,39 +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/chat-message/ChatMessage";
-import { ThemeNameValues } from "@/components/theme/Theme";
-import { Args } from "@storybook/web-components";
-import { html } from "lit-element";
-
-export default {
-  title: "Components/Chat Message",
-  component: "md-chat-message",
-  argTypes: {
-    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
-    darkTheme: { control: "boolean", defaultValue: false },
-    title: { control: "text", defaultValue: "John Doe" },
-    message: { control: "text", defaultValue: "I have issue with my silencer" },
-    selfMode: { control: "boolean", defaultValue: false }
-  },
-  parameters: {
-    a11y: {
-      element: "md-chat-message"
-    }
-  }
-};
-
-export const ChatMessage = (args: Args) => {
-  return html`
-    <md-theme class="theme-toggle" id="chat" ?darkTheme=${args.darkTheme} theme=${args.theme}>
-      <md-chat-message .self=${args.selfMode} title=${args.title} time="11:27AM">
-        <p slot="message">${args.message}</p>
-      </md-chat-message>
-    </md-theme>
-  `;
-};

package/src/components/chat-message/ChatMessage.test.ts

@@ -1,53 +0,0 @@
-import "./ChatMessage";
-import { ChatMessage } from "./ChatMessage";
-import { elementUpdated, fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-import { Avatar } from "../avatar/Avatar"; // Keep type import as a relative path
-
-describe("Chat Message Component", () => {
-  let element: ChatMessage.ELEMENT;
-
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    element = await fixture<ChatMessage.ELEMENT>(html`
-      <md-chat-message
-        title="John Doe"
-        time="11:27AM"
-        src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
-      ></md-chat-message>
-    `);
-  });
-
-  test("should render correctly if property self is provided", async () => {
-    element.self = true;
-
-    await elementUpdated(element);
-    expect(element.self).toBeTruthy();
-
-    const avatar = element.shadowRoot!.querySelector<Avatar.ELEMENT>("md-avatar");
-    expect(avatar!.title).toEqual("self");
-
-    element.self = false;
-
-    await elementUpdated(element);
-    expect(element.self).toBeFalsy();
-    expect(avatar!.title).toEqual("John Doe");
-  });
-
-  test("should render correct src", async () => {
-    element.self = true;
-    await elementUpdated(element);
-    expect(element.self).toBeTruthy();
-
-    const avatar = element.shadowRoot!.querySelector<Avatar.ELEMENT>("md-avatar");
-    expect(avatar?.src).toBeNull();
-
-    element.self = false;
-    await elementUpdated(element);
-    expect(element.self).toBeFalsy();
-    expect(avatar!.src).toEqual(
-      "https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
-    );
-  });
-});

package/src/components/chat-message/ChatMessage.ts

@@ -1,52 +0,0 @@
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, LitElement, property } from "lit-element";
-import styles from "./scss/module.scss";
-import "@/components/avatar/Avatar";
-import { ifDefined } from "lit-html/directives/if-defined";
-
-export namespace ChatMessage {
-  @customElementWithCheck("md-chat-message")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) title = "";
-    @property({ type: String }) src = "";
-    @property({ type: String }) time = "";
-    @property({ type: String }) label = "Avatar";
-    @property({ type: Boolean }) self = false;
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    render() {
-      return html`
-        <div class="md-chat-message">
-          <md-avatar
-            type=${ifDefined(this.self ? "self" : undefined)}
-            title=${this.self ? "self" : this.title}
-            label="${this.label}"
-            src=${ifDefined(this.self ? undefined : this.src)}
-          ></md-avatar>
-
-          <div class="md-chat-message_content">
-            <div class="md-chat-message_heading">
-              <div class="md-chat-message_title">
-                <span>${this.self ? "You" : this.title}</span>
-              </div>
-              <div class="md-chat-message_time">${this.time}</div>
-            </div>
-            <div class="md-chat-message_text">
-              <slot name="message"></slot>
-            </div>
-          </div>
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-chat-message": ChatMessage.ELEMENT;
-  }
-}

package/src/components/chat-message/scss/chat-message.scss

@@ -1,49 +0,0 @@
-:host(:focus) {
-  box-shadow: none;
-  outline: none !important;
-}
-
-:host(md-chat-message) {
-  .md-chat-message {
-    color: $chat-message-color;
-    display: flex;
-    font-size: $chat-message-font-size;
-    line-height: $chat-message-line-height;
-    margin: $chat-message-indent 0;
-
-    &_content {
-      display: flex;
-      flex-direction: column;
-      padding-left: $chat-message-indent;
-    }
-
-    &_heading {
-      color: $chat-message_heading-color;
-      display: flex;
-      flex: 0 1 auto;
-      font-size: $chat-message_heading-font-size;
-      line-height: $chat-message_heading-line-height;
-      margin-bottom: calc(#{$chat-message-indent} * 0.5);
-    }
-
-    &_title {
-      @include flex();
-      flex: 0 1 auto;
-      
-      span {
-        @include text-dots;
-        display: block;
-      }
-    }
-
-    &_time {
-      margin-left: calc(#{$chat-message-indent} * 1.5);
-    }
-  }
-}
-
-@media (forced-colors: active) {
-  .md-alert__icon{
-    background-color: Canvas;
-  }
-}

package/src/components/chat-message/scss/mixins.scss

@@ -1,6 +0,0 @@
-@mixin text-dots() {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: calc(100%);
-}

package/src/components/chat-message/scss/module.scss

@@ -1,16 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/typography/settings";
-
-@import "@/wc_scss/tools/mixins/flex";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "./vars/md-chat-message-settings";
-
-@import "./mixins";
-@import "./settings";
-@import "./chat-message";

package/src/components/chat-message/scss/settings.scss

@@ -1,7 +0,0 @@
-$chat-message-indent: rem-calc(12) !default;
-$chat-message-font-size: rem-calc(14) !default;
-$chat-message-line-height: rem-calc(22) !default;
-$chat-message_heading-font-size: rem-calc(12) !default;
-$chat-message_heading-line-height: rem-calc(12) !default;
-$chat-message-color: var(--chat-message-color, $md-chat-message-color-light) !default;
-$chat-message_heading-color: var(--chat-message-color-heading, $md-chat-message-color-heading-light) !default;

package/src/components/chat-message/tokens/lm-chat-message-tokens.js

@@ -1,18 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const chatMessage = {
-  prefix: "lm",
-  component: "chat-message",
-  color: {
-    light: colors.gray[100].name,
-    dark: colors.gray[40].name
-  },
-  "color-heading": {
-    light: colors.gray[70].name,
-    dark: colors.gray[30].name
-  }
-};
-
-module.exports = chatMessage;