@momentum-ui/web-components 2.14.13 → 2.14.15

package/sonar.config.js

@@ -1,22 +0,0 @@
-const scanner = require("sonarqube-scanner");
-const propertiesReader = require("properties-reader");
-const properties = propertiesReader("./sonar-project.properties");
-
-(function scan() {
-  const myArgs = process.argv.slice(2);
-  const branchName = myArgs.length > 0 ? { "sonar.branch.name": myArgs[0] } : {};
-  scanner(
-    {
-      serverUrl: "https://engci-sonar-sjc.cisco.com/sonar",
-      token: "2e83bdec5368441f6e150b02e7e74aa185522462",
-      options: {
-        "sonar.sources": properties.get("sonar.tests"),
-        "sonar.exclusions": properties.get("sonar.exclusions"),
-        "sonar.test.inclusions": properties.get("sonar.test.inclusions"),
-        "sonar.typescript.lcov.reportPaths": properties.get("sonar.typescript.lcov.reportPaths"),
-        ...branchName
-      }
-    },
-    () => process.exit()
-  );
-})();

package/src/[sandbox]/examples/AdvanceList/components/ErrorLoader/ErrorLoader.scss

@@ -1,22 +0,0 @@
-.infinite-scroll-error {
-    display: flex;
-    padding-left: 15px;
-    font-size: var(--font-size-small);
-    color: var(--md-alert-error-text-color, --red-70-color);
-    flex-direction: column;
-    .error-block {
-      display: flex;
-      flex-direction: column;
-      .error-span-padding {
-        padding-right: 8px;
-      }
-      .tracking-error-block {
-        display: inline-flex;
-      }
-      .infinite-scroll-retry-link::part(link) {
-        font-size: var(--font-size-small);
-        color: var(--md-alert-error-text-color, --red-70-color);
-      }
-    }
-  }
-  

package/src/[sandbox]/examples/AdvanceList/components/ErrorLoader/ErrorLoader.ts

@@ -1,77 +0,0 @@
-import { html, LitElement, css, property, internalProperty, PropertyValues } from 'lit-element';
-import { customElementWithCheck } from '@/mixins/CustomElementCheck';
-import './ErrorLoader.scss';
-import '@/components/help-text/HelpText';
-import '@/components/link/Link';
-export namespace MdFetchError {
-  @customElementWithCheck('md-fetch-error')
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) messageType = 'error';
-    @property({ type: String }) customStyle = '';
-    @property({ type: String }) commonErrorMsg = '';
-    @property({ type: String }) commonTryAgain = '';
-    @property({ type: String }) trackingId = '';
-    @property({ type: String }) trackingIdInputLabel = '';
-
-    @internalProperty() isLoading = false;
-    @internalProperty() hasError = false;
-
-
-    private onRetry(event: Event) {
-      this.dispatchEvent(
-        new CustomEvent('retry', {
-          detail: { message: 'Retrying fetch...' },
-          bubbles: true,
-          composed: true,
-        })
-      );
-    }
-
-    render() {
-      return html`
-        <md-help-text
-          .messageType="${this.messageType}"
-          class="infinite-scroll-error"
-          style="${this.style}"
-          aria-live="polite"
-        >
-          <div class="error-block">
-            <span>
-              <span class="error-span-padding">
-                ${this.commonErrorMsg}.
-              </span>
-              <md-link
-                inline
-                class="infinite-scroll-retry-link"
-                aria-label="${this.commonTryAgain}"
-                @click="${this.onRetry}"
-                @keydown="${this.onRetry}"
-                tag="span"
-                data-testid="retry-page"
-              >
-                ${this.commonTryAgain}
-              </md-link>
-            </span>
-            ${this.trackingId && this.trackingId !== ''
-              ? html`<span class="tracking-error-block">
-                  ${this.trackingIdInputLabel} ${this.trackingId}
-                </span>`
-              : null}
-          </div>
-        </md-help-text>
-      `;
-    }
-
-    updated(changedProperties: PropertyValues) {
-      if (changedProperties.has('hasError') && this.hasError) {
-        this.requestUpdate();
-      }
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'md-fetch-error': MdFetchError.ELEMENT;
-  }
-}

package/src/[sandbox]/examples/AdvanceList/components/ParentComponentError.ts

@@ -1,116 +0,0 @@
-import { html, LitElement, css, property, internalProperty } from "lit-element";
-import "@/components/advance-list/AdvanceList";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import './ErrorLoader/ErrorLoader';
-
-export namespace ParentComponentError {
-  @customElementWithCheck("parent-component-error")
-  export class ELEMENT extends LitElement {
-    @property({ type: Array }) items: any = [];
-    @internalProperty() page = 1;
-    @property({ type: Boolean }) isLoading = false;
-    @internalProperty() shouldFail = false;
-    @property({ type: Boolean }) isError = false;
-    @internalProperty() totalRecords = 0;
-
-
-    constructor() {
-      super();
-      this.items = [];
-      this.page = 1;
-      this.isLoading = false;
-      this.isError = false;
-      this.loadMoreItems();
-      this.shouldFail = false; // Initialize the flag
-    }
-
-    generateUUID() {
-      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-          const r = Math.random() * 16 | 0;
-          const v = c === 'x' ? r : (r & 0x3 | 0x8);
-          return v.toString(16);
-      });
-  }
-
-    async loadMoreItems() {
-      try {
-        if (this.shouldFail) {
-          throw new Error('Simulated alternating failure');
-        }
-        this.isLoading = true;
-        const newItems = await this.fetchItems(this.page);
-
-        this.items = [...this.items, ...newItems];
-        this.totalRecords = 60000;
-        this.page += 1;
-        this.isLoading = false;
-        this.isError = false;
-
-      } catch (err) {
-        this.isLoading = false;
-        this.isError = true;
-      } finally {
-        // Toggle the flag after each attempt
-        this.shouldFail = !this.shouldFail;
-        // this.requestUpdate(); // re-rendering is not happening
-      }
-    }
-
-    private handleListItemChange(event: CustomEvent) {
-      //API call send to end point to upate the item
-  }
-    async fetchItems(page: number) {
-      await new Promise(resolve => setTimeout(resolve, 1000));
-
-      const newItems = Array.from({ length: 2000 }, (_, i) => ({
-        name: `Item ${(page - 1) * 2000 + i + 1}`,
-        id: this.generateUUID(),
-        index: i,
-        template: (data: any, index: number) => html`<div style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;" indexing="${index}" >${data.name}</div>`
-
-      }));
-      return newItems;
-    }
-
-    handleRetry() {
-      this.loadMoreItems();
-    }
-
-    render() {
-      return html`
-        <h2>Error scenario</h2>
-        <md-advance-list
-          class="advance-list"
-          .items=${this.items}
-          .isLoading=${this.isLoading}
-          ariaRoleList="listbox"
-          ariaLabelList="state selector"
-          .isError=${this.isError}
-          .totalRecords=${this.totalRecords}
-          @list-item-change=${this.handleListItemChange}
-          @load-more=${this.loadMoreItems}>
-          <md-spinner size="24" slot="spin-loader"></md-spinner>
-        </md-advance-list>
-        
-        ${this.isError ? html`
-          <md-fetch-error 
-            class="fetch-error"
-            messageType="error"
-            style="color: red;"
-            commonErrorMsg="An error occurred while fetching data"
-            commonTryAgain="Try Again"
-            trackingId="12345"
-            trackingIdInputLabel="Tracking ID:"
-            @retry="${this.handleRetry}">
-          </md-fetch-error>
-        ` : ''}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "parent-component-error": ParentComponentError.ELEMENT;
-  }
-}

package/src/[sandbox]/examples/AdvanceList/components/ParentComponentGeneric.ts

@@ -1,95 +0,0 @@
-import { html, LitElement, css, property, internalProperty } from "lit-element";
-// import "@/components/list/InfiniteScrollList";
-import "@/components/advance-list/AdvanceList";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-
-export namespace ParentComponentGeneric {
-    @customElementWithCheck("parent-component-generic")
-    export class ELEMENT extends LitElement {
-        @property({ type: Array }) items: any = [];
-        @internalProperty() page = 1;
-        @property({ type: Boolean }) isLoading = false;
-        @property({ type: String })  value = '';
-        @property({ type: String }) isError = false;
-        @internalProperty() totalRecords = 60000;  // Total count is set to 6000
-
-        constructor() {
-            super();
-            this.items = [];
-            this.page = 1;
-            this.isLoading = false;
-            this.isError = false;
-            this.loadMoreItems();
-        }
-
-         generateUUID() {
-            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-                const r = Math.random() * 16 | 0;
-                const v = c === 'x' ? r : (r & 0x3 | 0x8);
-                return v.toString(16);
-            });
-        }
-                
-
-        async loadMoreItems() {
-            try {
-                this.isLoading = true;
-                const newItems = await this.fetchItems(this.page);
-                this.items = [...this.items, ...newItems];
-                this.page += 1;
-                this.isLoading = false;
-                this.value = this.items[1].id;
-            } catch (err) {
-                this.isLoading = false;
-                this.isError = true;
-            }finally{
-                this.isLoading = false;
-            }
-        }
-
-        async fetchItems(page: number) {
-            await new Promise(resolve => setTimeout(resolve, 1000));
-
-            // Adjusted the length to 200 for initial render
-            const newItems = Array.from({ length: 2000 }, (_, i) => ({
-                name: `Item ${(page - 1) * 2000 + i + 1}`,
-                id: this.generateUUID(),
-                index: i,
-                ariaLabel: `Item ${(page - 1) * 2000 + i + 1}`,
-                template: (data: any, index: number) => html`
-                    <div style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;" ?disabled="${index % 2 === 0}" aria-hidden="true" indexing="${index}">
-                        ${data.name}
-                    </div>`
-            }));
-            return newItems;
-        }
-
-        private handleListItemChange(event: CustomEvent) {
-            //API call send to end point to update the item
-        }
-
-        render() { 
-            return html`
-        <h2>Generic Item List</h2>
-        <md-advance-list
-          .items=${this.items}
-          .isLoading=${this.isLoading}
-          .isError=${this.isError}
-          ariaRoleList="listbox"
-          ariaRoleListItem="option"
-          ariaLabelList="state selector"
-          .totalRecords=${this.totalRecords}
-          @list-item-change=${this.handleListItemChange}
-          @load-more=${this.loadMoreItems}>
-          <md-spinner size="24" slot="spin-loader"></md-spinner>
-          </md-advance-list>
-          `;
-        }
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "parent-component-generic": ParentComponentGeneric.ELEMENT;
-    }
-}

package/src/[sandbox]/examples/AdvanceList/components/ParentComponentPreSelect.ts

@@ -1,90 +0,0 @@
-import { html, LitElement, css, property, internalProperty } from "lit-element";
-// import "@/components/list/InfiniteScrollList";
-import "@/components/advance-list/AdvanceList";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-
-export namespace ParentComponentPreSelect {
-    @customElementWithCheck("parent-component-pre-select")
-    export class ELEMENT extends LitElement {
-        @property({ type: Array }) items: any = [];
-        @internalProperty() page = 1;
-        @property({ type: Boolean }) isLoading = false;
-        @property({ type: String })  value = '';
-        @property({ type: String }) isError = false;
-        @internalProperty() totalRecords = 0;
-
-        constructor() {
-            super();
-            this.items = [];
-            this.page = 1;
-            this.isLoading = false;
-            this.isError = false;
-            this.loadMoreItems();
-        }
-        generateUUID() {
-            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
-                const r = Math.random() * 16 | 0;
-                const v = c === 'x' ? r : (r & 0x3 | 0x8);
-                return v.toString(16);
-            });
-        }
-        async loadMoreItems() {
-            try {
-                this.isLoading = true;
-                const newItems = await this.fetchItems(this.page);
-                this.items = [...this.items, ...newItems];
-                this.totalRecords = 60000;
-                this.page += 1;
-                this.isLoading = false;
-                this.value = this.items[1].id;
-            } catch (err) {
-                this.isLoading = false;
-                this.isError = true;
-            }finally{
-                this.isLoading = false;
-            }
-        }
-
-        async fetchItems(page: number) {
-            await new Promise(resolve => setTimeout(resolve, 1000));
-
-            const newItems = Array.from({ length: 2000 }, (_, i) => ({
-                name: `Item ${(page - 1) * 2000 + i + 1}`,
-                id: this.generateUUID(),
-                index: i,
-                ariaLabel : `Item ${(page - 1) * 2000 + i + 1}`,
-                template: (data: any, index: number) => html`<div style="position:relative;min-height:1.25rem;box-sizing: border-box;display:flex;flex-flow:row unwrap;justify-content:flex-start;align-items:center;line-height:30px;" ?disabled="${index % 2 === 0}" aria-hidden="true" indexing="${index}" >${data.name}</div>`
-                
-            }));
-            return newItems;
-        }
-
-        private handleListItemChange(event: CustomEvent) {
-           
-        }
-
-        render() {
-            return html`
-        <h2>Pre Select Item List</h2>
-        <md-advance-list
-          .items=${this.items}
-          .isLoading=${this.isLoading}
-          .isError=${this.isError}
-          .value=${this.value}
-          ariaRoleList="listbox"
-          ariaLabelList="state selector"
-          .totalRecords=${this.totalRecords}
-          @list-item-change=${this.handleListItemChange}  
-          @load-more=${this.loadMoreItems}>
-          <md-spinner size="24" slot="spin-loader"></md-spinner>
-        </md-advance-list>
-          `;
-        }
-    }
-}
-
-declare global {
-    interface HTMLElementTagNameMap {
-        "parent-component-pre-select": ParentComponentPreSelect.ELEMENT;
-    }
-}

package/src/[sandbox]/examples/accordion.ts

@@ -1,67 +0,0 @@
-import "@/components/accordion/Accordion";
-import "@/components/accordion/AccordionItem";
-import "@/components/input/Input";
-import { html } from "lit-element";
-
-export const accordionTemplate = html`
-  <style>
-    .test-class {
-      background-color: aliceblue;
-      flex-direction: column;
-      text-align: left;
-      padding: 0.5rem;
-      border-radius: 0.5rem;
-    }
-    md-accordion-item.part-demo::part(accordion-header) {
-      background-color: #c7c7c7;
-    }
-  </style>
-  <h3>Default</h3>
-  <md-accordion class="part-demo">
-    <md-accordion-item slot="accordion-item" label="Header №1" expanded class="part-demo">
-      <div slot="header-content" class="test-class">
-        <h4>Slotted Header Content</h4>
-        <p>lorem ipsum ploppum bootum flossy noop</p>
-      </div>
-      <div>Panel №1</div>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №2">
-      <div>Panel №2</div>
-      <md-input type="text"></md-input>
-      <md-input type="text" disabled></md-input>
-      <md-input type="text"></md-input>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №3" expanded>
-      <div>Panel №3</div>
-      <md-input type="text"></md-input>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №4" disabled>
-      <div>Panel №4</div>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №5">
-      <div>Panel №5</div>
-    </md-accordion-item>
-  </md-accordion>
-  <h3>Multiline</h3>
-  <md-accordion multiple>
-    <md-accordion-item slot="accordion-item" label="Header №1" expanded>
-      <div>Panel №1</div>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №2" expanded>
-      <div>Panel №2</div>
-      <md-input type="text"></md-input>
-      <md-input type="text" disabled></md-input>
-      <md-input type="text"></md-input>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №3">
-      <div>Panel №3</div>
-      <md-input type="text"></md-input>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №4" disabled expanded>
-      <div>Panel №4</div>
-    </md-accordion-item>
-    <md-accordion-item slot="accordion-item" label="Header №5">
-      <div>Panel №5</div>
-    </md-accordion-item>
-  </md-accordion>
-`;

package/src/[sandbox]/examples/advance-list.ts

@@ -1,14 +0,0 @@
-import "@/components/list/ListItem";
-import "./AdvanceList/components/ParentComponentGeneric";
-import "./AdvanceList/components/ParentComponentError";
-import "./AdvanceList/components/ParentComponentPreSelect";
-import { html } from "lit-element";
-
-export const advanceListTemplate = html`
-  <div style="width: 300px">
-    <parent-component-generic></parent-component-generic>
-    <parent-component-pre-select></parent-component-pre-select>
-    <parent-component-error></parent-component-error>
-  <div class="empty-div" style="height: 200px"></div>
-  </div>
-`;

package/src/[sandbox]/examples/alert-banner.ts

@@ -1,100 +0,0 @@
-import "@/components/alert-banner/AlertBanner";
-import "@/components/button/Button";
-import { customElement, html, LitElement, property } from "lit-element";
-
-@customElement("alert-banner-template-sandbox")
-export class AlertBannerTemplateSandbox extends LitElement {
-  @property({ type: Boolean }) default = false;
-  @property({ type: Boolean }) warning = false;
-  @property({ type: Boolean }) error = false;
-  @property({ type: Boolean }) success = false;
-
-  async openAlert(kind: string) {
-    switch (kind) {
-      case "default":
-        this.default = true;
-        break;
-      case "warning":
-        this.warning = true;
-        break;
-      case "error":
-        this.error = true;
-        break;
-      case "success":
-        this.success = true;
-        break;
-      default:
-        break;
-    }
-    await this.requestUpdate();
-  }
-
-  async hideAlert(kind: string) {
-    switch (kind) {
-      case "default":
-        this.default = false;
-        break;
-      case "warning":
-        this.warning = false;
-        break;
-      case "error":
-        this.error = false;
-        break;
-      case "success":
-        this.success = false;
-        break;
-      default:
-        break;
-    }
-    await this.requestUpdate();
-  }
-
-  render() {
-    return html`
-      <h2>Alert Banner</h2>
-      <div style="margin-bottom: 15px;">
-        <md-button variant="secondary" @click=${() => this.openAlert("warning")}>Trigger Warning Alert</md-button>
-      </div>
-      <div style="margin-bottom: 15px;">
-        <md-button variant="secondary" @click=${() => this.openAlert("error")}>Trigger Error Alert</md-button>
-      </div>
-      <div style="margin-bottom: 15px;">
-        <md-button variant="secondary" @click=${() => this.openAlert("default")}>Trigger Default Alert</md-button>
-      </div>
-      <div style="margin-bottom: 15px;">
-        <md-button variant="secondary" @click=${() => this.openAlert("success")}>Trigger Success Alert</md-button>
-      </div>
-      <md-alert-banner ?show=${this.default} type="default" @alertBanner-hide=${() => this.hideAlert("default")}>
-        Test Alert Message
-      </md-alert-banner>
-      <md-alert-banner
-        ?show="${this.warning}"
-        closable
-        type="warning"
-        @alertBanner-hide=${() => this.hideAlert("warning")}
-      >
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum."
-      </md-alert-banner>
-      <md-alert-banner
-        ?show=${this.error}
-        closable
-        type="error"
-        @alertBanner-hide=${() => this.hideAlert("error")}
-        message="text from a message attribute instead"
-      ></md-alert-banner>
-      <md-alert-banner
-        ?show=${this.success}
-        closable
-        type="success"
-        @alertBanner-hide=${() => this.hideAlert("success")}
-        message="success text from a message attribute"
-      ></md-alert-banner>
-    `;
-  }
-}
-
-export const alertBannerTemplate = html` <alert-banner-template-sandbox></alert-banner-template-sandbox> `;