@momentum-ui/web-components 2.14.12 → 2.14.13

package/src/components/advance-list/AdvanceList.ts

@@ -0,0 +1,267 @@
+import { Key } from "@/constants";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { FocusMixin } from "@/mixins/FocusMixin";
+import reset from "@/wc_scss/reset.scss";
+import { LitElement, PropertyValues, html, internalProperty, property, query, queryAll } from "lit-element";
+import { scroll } from "lit-virtualizer";
+import styles from "./scss/module.scss";
+
+export namespace AdvanceList {
+  export const prefixId = "item-";
+  @customElementWithCheck("md-advance-list")
+  export class ELEMENT extends FocusMixin(LitElement) {
+    @property({ type: Array }) items: any[] = [];
+    @property({ type: Boolean }) isLoading = false;
+    @property({ type: String }) selectedItemId = "";
+    @property({ type: String }) value = "";
+    @property({ type: String }) ariaRoleList = "listbox";
+    @property({ type: String }) ariaRoleListItem = "option";
+    @property({ type: String }) ariaLabelList = "";
+    @property({ type: Boolean }) isError = false;
+    @queryAll("div.default-wrapper") lists?: HTMLDivElement[];
+    @query(".virtual-scroll") listContainer?: HTMLDivElement;
+    @property({ type: Number }) totalRecords = 0;
+    @internalProperty() scrollIndex = -1;
+    @internalProperty() activeId: string = "";
+    @internalProperty() isUserNavigated = false; // this flag is used to control scroll to index this will became true only when user navigated using keyboard
+
+    connectedCallback(): void {
+      super.connectedCallback();
+      this.addEventListener("click", this.handleClick);
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      // Clean up event listeners when the component is removed
+      this.removeEventListener("click", this.handleClick);
+      this.listContainer?.addEventListener("keydown", this.handleKeyDown);
+
+    }
+
+    protected firstUpdated(_changedProperties: PropertyValues): void {
+      // Add keydown event listener to the list container
+      this.listContainer?.addEventListener("keydown", this.handleKeyDown);
+    }
+
+    updated(changedProperties: PropertyValues) {
+      if (changedProperties.has("value")) {
+        // Update the selected item for the preselect
+        this.requestUpdate().then(() => {
+          this.selectedItemId = `${this.value}`;
+          this.updateSelectedState();
+        });
+      }
+    }
+
+    updateWrapperAttributes(wrapper: HTMLElement, isSelected: boolean) {
+      wrapper.classList.toggle("selected", isSelected);
+      wrapper.setAttribute("selected", isSelected.toString());
+      wrapper.setAttribute("aria-selected", isSelected.toString());
+      wrapper.setAttribute("tabindex", isSelected ? "0" : "-1");
+    }
+
+    protected updateSelectedState() {
+      const wrappers = Array.from(this.shadowRoot?.querySelectorAll(".default-wrapper") || []);
+      wrappers.forEach((wrapper) => {
+        const isSelected = wrapper.id === `${prefixId}${this.selectedItemId}`;
+        // update the wrapper attributes
+        this.updateWrapperAttributes(wrapper as HTMLElement, isSelected);
+
+        //active item should be focusable
+        if (wrapper.id === `${prefixId}${this.activeId}`) {
+          wrapper.setAttribute("tabindex", "0");
+          (wrapper as any).focus();
+        } else {
+          wrapper.setAttribute("tabindex", "-1");
+        }
+
+        // Handle pre-selection of the active item if none is currently active
+        if (this.activeId == "" && wrapper.id === `${prefixId}${this.value}`) {
+          wrapper.setAttribute("tabindex", "0");
+        }
+
+        const childWithDisabled = wrapper.firstElementChild?.hasAttribute("disabled") || wrapper.firstElementChild?.getAttribute("aria-disabled") === "true";
+        if (childWithDisabled) {
+          wrapper.setAttribute("disabled", "");
+          wrapper.setAttribute("aria-disabled", "true");
+        } else {
+          wrapper.removeAttribute("disabled");
+          wrapper.removeAttribute("aria-disabled");
+        }
+      });
+    }
+
+    findClickedItem(event: Event): HTMLElement | 0 | undefined {
+      const wrappers = Array.from(this.shadowRoot?.querySelectorAll(".default-wrapper") || []);
+      const eventPath = event.composedPath();
+      const clickedItem = wrappers.find((wrapper) => eventPath.includes(wrapper)) as HTMLElement | undefined;
+
+      if (clickedItem) {
+        const isDisabled =
+          clickedItem?.hasAttribute("disabled") ||
+          clickedItem?.getAttribute("aria-disabled") === "true";
+        if (isDisabled) {
+          return 0; // Return 0 if the item is disabled
+        }
+        return clickedItem;
+      }
+      return undefined;
+    }
+
+     handleKeyDown = (event: KeyboardEvent): void => {
+      switch (event.key) {
+        case Key.ArrowDown:
+          event.preventDefault();
+          this.isUserNavigated = true;
+          // incase of preselected value
+          if (this.activeId === "" && this.value) {
+            this.activeId = this.value;
+          }
+          const currentIndex = this.items.findIndex(item => item.id === this.activeId);
+          if (currentIndex < this.items.length - 1) {
+            this.scrollIndex = currentIndex + 1;
+            this.activeId = this.items[this.scrollIndex].id;  
+          }
+          break;
+
+        case Key.ArrowUp:
+          event.preventDefault();
+          this.isUserNavigated = true;
+          // in case of preselected value
+          if (this.activeId === "" && this.value) {
+            this.activeId = this.value;
+          }
+          const upIndex = this.items.findIndex(item => item.id === this.activeId);
+          if (upIndex > 0) {
+            this.scrollIndex = upIndex - 1;
+            this.activeId = this.items[this.scrollIndex].id;  
+          }
+          break;
+
+        case Key.Enter:
+          event.preventDefault();
+          if (this.activeId) {
+            const selectedItem = this.shadowRoot?.querySelector(`#${prefixId}${this.activeId}`);
+            if (selectedItem) {
+              const isDisabled = selectedItem.getAttribute("aria-disabled") === "true" || selectedItem.hasAttribute("disabled");
+              if (!isDisabled) {
+                this.selectItem(selectedItem as HTMLElement);
+              }
+            }
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+
+    selectItem(clickedItem: HTMLElement) {
+      if (!clickedItem) return;
+
+      this.activeId = clickedItem.id.substring(clickedItem.id.indexOf("-") + 1);
+      this.selectedItemId = this.activeId;
+      this.updateSelectedState();
+      this.notifySelectedChange();
+    }
+
+    handleClick(event: Event) {
+      event.preventDefault();
+      this.isUserNavigated = false; // Clear navigation flag on click
+      const clickedItem = this.findClickedItem(event);
+      if (clickedItem) {
+        this.scrollIndex = parseInt(clickedItem.getAttribute("index") || "0");
+        this.selectItem(clickedItem);
+      }
+    }
+
+    handleRangeChange = (e: any) => {
+      const { last } = e;
+      this.updateSelectedState();
+      
+      // Trigger 'load-more' event when more items need to be loaded
+      if (this.items.length < this.totalRecords && last >= this.items.length - 1 && !this.isLoading && !this.isError) {
+        this.dispatchEvent(
+          new CustomEvent("load-more", {
+            bubbles: true,
+            composed: true
+          })
+        );
+      }
+      this.isUserNavigated = false;
+    };
+
+    notifySelectedChange() {
+      this.dispatchEvent(
+        new CustomEvent("list-item-change", {
+          detail: { selected: this.selectedItemId },
+          bubbles: true,
+          composed: true
+        })
+      );
+    }
+
+    renderItem(item: any, index: number) {
+      return html`
+        <div
+          class="default-wrapper"
+          aria-setsize="${this.totalRecords}"
+          aria-posinset="${index + 1}"
+          role="${this.ariaRoleListItem}"
+          aria-label=${item.name}
+          id="${prefixId}${item.id}"
+          index="${index}"
+        >
+          ${item.template(item, index)}
+        </div>
+      `;
+    }
+
+    getActiveDescendant(){
+      if (this.activeId) {
+        return  `${prefixId}${this.activeId}`;
+      } else if (this.value) {
+        return `${prefixId}${this.value}`;
+      }else{
+        return "";
+      }
+    }
+
+    render() {
+      return html`
+        <div
+          class="md-advance-list-wrapper virtual-scroll"
+          tabindex="0"
+          aria-live="polite"
+          aria-activedescendant=${this.getActiveDescendant()}
+          aria-label=${this.ariaLabelList}
+          role=${this.ariaRoleList}
+          @rangechange=${this.handleRangeChange}
+        >
+          ${scroll({
+            items: this.items,
+            renderItem: (item: any, index?: number) => this.renderItem(item, index || 0),
+            useShadowDOM: true,
+            scrollToIndex: this.isUserNavigated
+              ? {
+                index: this.scrollIndex,
+                position: this.scrollIndex === 0 ? "start" : "center"
+              }
+              : undefined
+          })}
+        </div>
+        ${this.isLoading ? html`<slot class="spin-loader" name="spin-loader"></slot>` : null}
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-advance-list": AdvanceList.ELEMENT;
+  }
+}

package/src/components/advance-list/scss/AdvanceList.scss

@@ -0,0 +1,69 @@
+:host(md-advance-list) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  position: relative;
+}
+
+.virtual-scroll {
+  width: 100%;
+  overflow-y: auto;
+  height: 400px;
+  overflow-x: hidden;
+  position: relative;
+  padding: 1px;
+}
+
+.virtual-scroll:focus-visible {
+  outline: 2px solid var(--md-default-focus-outline-color);
+}
+
+.default-wrapper:focus-visible,
+.default-wrapper:focus {
+  outline: 2px solid var(--md-default-focus-outline-color);
+  outline-offset: -2px;
+}
+
+.default-wrapper[aria-disabled="true"],
+.default-wrapper:has([disabled]),
+.default-wrapper:has([disabled]):hover {
+  color: var(--advance-list-disabled-text-color);
+  background-color: transparent;
+}
+
+.spin-loader {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+
+.default-wrapper.selected {
+  background-color: var(--list-active-background, $md-advance-list-active-background-light);
+  color: var(--list-active-text-color, $md-advance-list-active-text-color-light);
+}
+
+.default-wrapper.focused {
+  outline: 2px solid var(--md-default-focus-outline-color);
+  outline-offset: -2px;
+}
+
+.default-wrapper {
+  margin-bottom: 2px;
+  padding: 5px;
+  color: var( --advance-list-text-color, $md-advance-list-text-color-light);
+  cursor: pointer;
+  width: calc(100% - 2px);
+  box-sizing: border-box;
+  position: relative;
+}
+
+.default-wrapper:hover {
+  background-color: var(--list-hover-background, $md-advance-list-hover-background-light);
+  color: var(--list-hover-text-color, $md-advance-list-hover-text-color-light);
+}
+
+.default-wrapper.selected:hover {
+  background-color: var(--list-active-background, $md-advance-list-active-background-light);
+  color: var(--list-active-text-color, $md-advance-list-active-text-color-light);
+}

package/src/components/advance-list/scss/module.scss

@@ -0,0 +1,11 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+
+@import "@/wc_scss/settings/rem.scss";
+@import "@/wc_scss/colors/settings-base.scss";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/core";
+@import "@/wc_scss/tools/mixins/flex";
+
+@import "./vars/md-advance-list-settings.scss";
+@import "./AdvanceList.scss";

package/src/components/advance-list/tokens/lm-advance-list-tokens.js

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const list = {
+  prefix: "lm",
+  component: "advance-list",
+  "text-color": {
+    light: colors.gray[100].name,
+    dark: colors.gray["05"].name
+  },
+  hover: {
+    background: {
+      light: colors.blue[20].name,
+      dark: colors.blue[50].name
+    },
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray[100].name
+    }
+  },
+  disabled: {
+    "text-color": {
+      light: colors.gray[40].name,
+      dark: colors.gray[70].name
+    }
+  },
+  active: {
+    background: {
+      light: colors.blue[50].name,
+      dark: colors.blue[40].name
+    },
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray[100].name
+    }
+  },
+  focus: {
+    "border-color": {
+      light: colors.blue[70].name,
+      dark: colors.blue[40].name
+    }
+  }
+};
+
+module.exports = list;

package/src/components/advance-list/tokens/md-advance-list-tokens.js

@@ -0,0 +1,46 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const list = {
+  prefix: "md",
+  component: "advance-list",
+  "text-color": {
+    light: colors.gray[100].name,
+    dark: colors.gray["05"].name
+  },
+  hover: {
+    background: {
+      light: colors.blue[20].name,
+      dark: colors.blue[50].name
+    },
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray[100].name
+    }
+  },
+  disabled: {
+    "text-color": {
+      light: colors.gray[40].name,
+      dark: colors.gray[70].name
+    }
+  },
+  active: {
+    background: {
+      light: colors.blue[50].name,
+      dark: colors.blue[40].name
+    },
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray[100].name
+    }
+  },
+  focus: {
+    "border-color": {
+      light: colors.blue[70].name,
+      dark: colors.blue[40].name
+    }
+  }
+};
+
+module.exports = list;

package/src/components/advance-list/tokens/mdv2-adavance-list-tokens.js

@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const list = {
+  prefix: "mdv2",
+  component: "advance-list",
+  "text-color": {
+    common: "$mds-color-theme-text-primary-normal"
+  },
+  hover: {
+    background: {
+      common: "$mds-color-theme-background-primary-hover"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    }
+  },
+  disabled: {
+    "text-color": {
+      common: "$mds-color-theme-text-primary-disabled"
+    }
+  },
+  active: {
+    background: {
+      common: "$mds-color-theme-background-primary-active"
+    },
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    }
+  },
+  focus: {
+    "border-color": {
+      common: "$mds-color-theme-outline-theme-normal"
+    }
+  },
+  "border-radius": {
+    pill: {
+      common: "9999px"
+    },
+    rounded: {
+      common: "0.5rem"
+    }
+  },
+  "line-height": {
+    common: "1.5rem"
+  }
+};
+
+module.exports = list;

package/src/components/alert/Alert.mdx

@@ -0,0 +1,72 @@
+import { Meta, Story, Props } from "@storybook/addon-docs";
+import { Alert } from "./Alert.ts";
+
+# Alert
+
+The `<md-alert/>` component
+
+### Attributes
+
+- `closable` : Boolean - sets the close button visibility on the `<md-alert></md-alert>`.
+- `message` : String - renders the text to be displayed on the `<md-alert></md-alert>`.
+- `show` : Boolean - sets the visibility of the `<md-alert></md-alert>`.
+- `internalClose` : Boolean - sets by default closing internally, otherwise - controlling via .show
+- `title` : String - renders text to be displayed as title in the `<md-alert></md-alert>`.
+- `btnlabel` : String - accessibility text that labels the close button in the meeting alert when there is visible text on screen.
+- `type` : String - renders the type of the alert - `error, info, success, warning, default`.
+- `inline` : Boolean - sets whether the alert is to be displayed inline.
+- `renderIconTemplate` : Function - returns the icon in the alert based on the type of the alert (error, info, success, warning, default).
+- `alertClassMap` : Object - returns the classmap for the alert.
+- `alert-close` : event - mapped to a function which handles the closing of the alert.
+
+### Styling
+
+The wrapping container of the alert can be reached via CSS by using the `:part()` selector. For example, in your application's stylesheet you can say:
+
+```CSS
+md-alert::part(alert) {
+    min-height: 200px;
+    min-width: 600px
+}
+```
+
+### A simple usage of Alert
+
+Renders an alert with dynamic properties
+
+```html
+<md-alert @alert-close=${(action('dispatchEvent'))} title=${`Alert Title`} message=${`Alert Message`} type="warning" ?closable=${true} ?show=${true} .inline=${false}>
+</md-alert>
+```
+
+### Alert With Icon
+
+Any icon can be displayed in the alert by passing the `<md-icon name="_name" color="_colour"></md-icon>` inside the `<md-alert></md-alert>` tags.
+
+```html
+<md-alert  @alert-close=${(action('dispatchEvent'))} title="Alert Title" message="Alert Message" ?show=${true} ?closable=${true}>
+  <md-badge slot="alert-icon" color="darkmint" circle>
+    <md-icon name="social-sms" size="16" iconSet="momentumDesign" color="var(--md-white-text-color)"></md-icon>
+  </md-badge>
+</md-alert>
+```
+
+### Slots
+
+#### Named Slot
+
+Any template can be passed through `named slot` in alert by enclosing the template in the `<md-alert></md-alert>` tags.
+
+- `alert-body slot` will render text as the body of the alert with default padding
+- `alert-footer slot` will render text as the footer of the alert with default padding
+
+```html
+<md-alert message="Alert Message" show>
+  <a slot="alert-body" href="/">Test</a>
+  <div slot="alert-footer">
+    <md-button variant="primary"><span slot="text">Blue</span></md-button>
+  </div>
+</md-alert>
+```
+
+<Props of={"md-alert"} />

package/src/components/alert/Alert.stories.ts

@@ -0,0 +1,123 @@
+/**
+ * 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/alert/Alert";
+import { ThemeNameValues } from "@/components/theme/Theme";
+import { alertTypes } from "@/utils/enums";
+import { action } from "@storybook/addon-actions";
+import type { Args, Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit-html";
+import "../badge/Badge";
+import mdx from "./Alert.mdx";
+
+const render = (args: Args) => html`
+  <md-theme class="theme-toggle" id="alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+    <md-alert
+      @alert-close=${action("dispatchEvent")}
+      title=${args.title}
+      message=${args.message}
+      type=${args.type}
+      ?closable=${args.closable}
+      ?show=${args.show}
+      .inline=${args.inline}
+    ></md-alert>
+  </md-theme>
+`;
+
+const alertWithIconRender = (args: Args) => html`
+  <md-theme class="theme-toggle" id="alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+    <md-alert
+      @alert-close=${action("dispatchEvent")}
+      title=${args.title}
+      message=${args.message}
+      ?show=${args.show}
+      ?closable=${args.closable}
+    >
+      <md-badge slot="alert-icon" color="darkmint" circle>
+        <md-icon name="sms_16" color="white-100"></md-icon>
+      </md-badge>
+    </md-alert>
+  </md-theme>
+`;
+
+const alertWithSlots = (args: Args) => html`
+  <md-theme class="theme-toggle" id="alert" ?darkTheme=${args.darkTheme} theme=${args.theme}>
+    <md-alert message=${args.message} show>
+      <a slot="alert-body" href="/">Test</a>
+      <div slot="alert-footer">
+        <md-button variant="primary"><span slot="text">Blue</span></md-button>
+      </div>
+    </md-alert>
+  </md-theme>
+`;
+
+export const Alerts: StoryObj = {
+  args: {
+    theme: "lumos",
+    darkTheme: false,
+    show: true,
+    title: "Alert",
+    message: "Who is awesome? You are!",
+    type: "default",
+    closable: true,
+    inline: false
+  },
+  render: render
+};
+
+export const AlertWithIcon: StoryObj = {
+  args: {
+    show: true,
+    title: "Alert",
+    message: "Who is awesome? You are!",
+    type: "default",
+    closable: true,
+    inline: false
+  },
+  render: alertWithIconRender
+};
+
+export const AlertWithSlots: StoryObj = {
+  args: {
+    show: true,
+    title: "Alert",
+    message: "Who is awesome? You are!",
+    type: "default",
+    closable: true,
+    inline: false
+  },
+  render: alertWithSlots
+};
+
+const meta: Meta = {
+  title: "Components/Alerts",
+  component: "md-alert",
+  argTypes: {
+    renderIconTemplate: { table: { disable: true } },
+    alertClassMap: { table: { disable: true } },
+    hasFooterSlotContent: { table: { disable: true } },
+    slottedFooterClassMap: { table: { disable: true } },
+    internalClose: { description: "By default closing internally, otherwise - controlling outer via .show" },
+    theme: { control: { type: "select", options: ThemeNameValues }, defaultValue: "lumos" },
+    darkTheme: { control: "boolean" },
+    type: { control: { type: "select", options: alertTypes } }
+  },
+  parameters: {
+    a11y: {
+      element: "md-alert"
+    },
+    docs: {
+      page: mdx,
+      description: {
+        component: "A typical usage of Alert, with text added within the element tags or message attribute"
+      }
+    }
+  }
+};
+
+export default meta;