@momentum-ui/web-components 2.16.1 → 2.16.3

package/codecov.yml

@@ -0,0 +1,10 @@
+coverage:
+  range: 80..100
+  round: down
+  precision: 2
+  status:
+    project:
+      default:
+        # basic
+        target: 80%
+        threshold: 5%

package/jest/cssTransform.js

@@ -0,0 +1,9 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+  process() {
+    return "module.exports = {};";
+  },
+  getCacheKey() {
+    return "cssTransform";
+  }
+};

package/jest/imgTransform.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+module.exports = {
+  process() {
+    return "module.exports = 'fake-file-url';";
+  },
+  getCacheKey() {
+    return "imgTransform";
+  }
+};

package/jest/svgTransform.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+module.exports = {
+  process() {
+    return "module.exports = '<svg></svg>';";
+  },
+  getCacheKey() {
+    return "svgTransform";
+  }
+};

package/jest.config.js

@@ -0,0 +1,37 @@
+/* eslint-disable */
+module.exports = {
+  testEnvironment: "jsdom",
+  collectCoverage: true,
+  coverageProvider: "v8",
+  transform: {
+    "^.+\\.ts$": "ts-jest",
+    "^.+\\.js$": "babel-jest",
+    "\\.(png|jpg|jpeg)$": "<rootDir>/jest/imgTransform.js",
+    "\\.svg$": "<rootDir>/jest/svgTransform.js",
+    "\\.(scss)$": "<rootDir>/jest/cssTransform.js"
+  },
+  testRegex: "^.+\\.test\\.ts$",
+  testPathIgnorePatterns: ["/node_modules/", "/build/", "/dist/", "/publish/", "/coverage/", "/stats", "/src/components/sass-stats/"],
+  transformIgnorePatterns: ["/node_modules/?!(@open-wc).+js$"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "^@css/(.*)$": "<rootDir>/src/assets/styles/$1",
+    "^@img/(.*)$": "<rootDir>/src/assets/images/$1"
+  },
+  globals: {
+    "ts-jest": {
+      diagnostics: false,
+      tsConfig: {
+        target: "ES2016",
+        module: "esnext",
+        moduleResolution: "node",
+        allowJs: true,
+        strict: true,
+        esModuleInterop: true,
+        experimentalDecorators: true,
+        resolveJsonModule: true
+      }
+    }
+  }
+};

package/package.json

@@ -1,12 +1,58 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.16.1",
+  "version": "2.16.3",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
-  "dependencies": {
+  "scripts": {
+    "start": "npm run dev",
+    "dev": "webpack-dev-server --config ./webpack.config.dev.server.ts",
+    "dev:build": "webpack --config-name=dev",
+    "dist": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config-name=distProd",
+    "dist:dev": "webpack --config-name=distDev",
+    "dist:watch": "webpack --config-name=distDevWatch",
+    "npm:auth": "uuip-publish-auth [momentum-ui-private]",
+    "npm:publish": "npm run npm:auth && npm run dist && uuip-publish dist momentum-ui-private",
+    "npm:publish:external": "npm run dist && npm run create-package && cp -R ./README.md ./publish/ && cd ./publish && json -I -f package.json -e 'this.publishConfig={\"registry\": \"https://registry.npmjs.org\"}' && npm publish",
+    "test": "jest",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
+    "test:ci": "jest --coverage --updateSnapshot --maxWorkers=4",
+    "storybook:resource": "npx web-component-analyzer src/*components/**/*.ts --outFile .storybook/custom-elements.json",
+    "storybook:dist": "npm run storybook:resource && build-storybook -c .storybook -o .out",
+    "storybook:local": "npm run storybook:resource && storybook-to-ghpages --dry-run --out=.out && npx http-server .out",
+    "storybook": "npm run storybook:resource && start-storybook -p 1234",
+    "deploy-storybook": "storybook-to-ghpages",
+    "storybook:deploy": "npm run deploy-storybook",
+    "storybook:deploy-ci": "storybook-to-ghpages --ci",
+    "snapshot": "npm run storybook:resource && build-storybook && percy-storybook --widths=1280",
+    "postinstall": "npm run build:tokens",
+    "clearVars": "node ./src/utils/clearVars.js",
+    "createTokensModule": "node ./src/utils/createTokenFilesModule.js",
+    "build:tokens": "yarn createTokensModule && node ./src/utils/generateScssFromTokens.js && node ./src/utils/generateColorTableData.js",
+    "sonar": "yarn install && yarn test && node sonar.config.js",
+    "eslint": "eslint --ext .ts,.js ./src --ignore-path .eslintignore",
+    "eslint:fix": "eslint --ext .ts,.js ./src --ignore-path .eslintignore --fix",
+    "create-package": "node -e 'require(\"./publish-conf\").createPackageJson()'",
+    "notify": "node -e 'require(\"./publish-conf\").notify()'",
+    "validateIconMapping": "node ./src/utils/validateIconMapping.js"
+  },
+  "resolutions": {
+    "jest": "^26.4.2",
+    "jest-config": "^26.4.2",
+    "lit-element": "2.3.1",
+    "lit-html": "^1.2.1"
+  },
+  "peerDependencies": {
+    "@momentum-ui/core": "19.16.0",
+    "@momentum-ui/icons": "8.28.5",
+    "@momentum-ui/tokens": "1.7.1",
+    "@momentum-ui/utils": "6.2.15",
+    "lit-element": "2.3.1",
+    "lit-html": "^1.2.1"
+  },
+  "dependencies": {    
     "@interactjs/actions": "1.10.3",
     "@interactjs/auto-start": "1.10.3",
     "@interactjs/core": "1.10.3",
@@ -30,15 +76,95 @@
     "papaparse": "^5.4.1",
     "sortablejs": "^1.15.3"
   },
-  "peerDependencies": {
+  "devDependencies": {
+    "@adobe/lit-mobx": "^1.0.1",
+    "@babel/core": "^7.25.7",
+    "@babel/preset-env": "^7.25.7",
+    "@interactjs/types": "1.10.3",
     "@momentum-ui/core": "19.16.0",
     "@momentum-ui/icons": "8.28.5",
     "@momentum-ui/tokens": "1.7.1",
     "@momentum-ui/utils": "6.2.15",
+    "@open-wc/testing-helpers": "1.8.9",
+    "@percy/storybook": "^3.3.0",
+    "@storybook/addon-a11y": "6.4.0",
+    "@storybook/addon-actions": "6.4.0",
+    "@storybook/addon-controls": "6.4.0",
+    "@storybook/addon-docs": "6.4.0",
+    "@storybook/addon-essentials": "6.4.0",
+    "@storybook/addons": "6.4.0",
+    "@storybook/client-api": "6.4.0",
+    "@storybook/core": "6.4.0",
+    "@storybook/core-common": "6.4.0",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/web-components": "6.4.0",
+    "@types/copy-webpack-plugin": "^5.0.0",
+    "@types/dompurify": "^3.0.5",
+    "@types/express": "5.0.0",
+    "@types/express-serve-static-core": "5.0.0",
+    "@types/highlight.js": "^10.1.0",
+    "@types/html-webpack-plugin": "^3.2.9",
+    "@types/jest": "26.0.10",
+    "@types/luxon": "^1.25.0",
+    "@types/node": "^20.15.1",
+    "@types/papaparse": "^5.3.14",
+    "@types/sortablejs": "^1.10.6",
+    "@types/webpack": "^4.41.38",
+    "@types/webpack-dev-server": "^3.10.0",
+    "@types/webpack-node-externals": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@wxcc-desktop/eslint-plugin-no-blocked-words-plugin": "1.0.4",
+    "alias-resolve-loader": "^2.0.4",
+    "babel-jest": "26.3.0",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^3.4.2",
+    "cssstats": "^4.0.5",
+    "eslint": "^8.56.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "extract-loader": "^4.0.3",
+    "file-loader": "^4.3.0",
+    "fs-extra": "^9.0.1",
+    "fs-path": "^0.0.24",
+    "handlebars": "^4.7.6",
+    "html-webpack-plugin": "^3.2.0",
+    "husky": "3.1.0",
+    "import-local": "^3.0.0",
+    "jest": "26.4.2",
+    "jest-config": "26.4.2",
     "lit-element": "2.3.1",
-    "lit-html": "^1.2.1"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
+    "lit-html": "^1.2.1",
+    "lit-scss-loader": "1.0.1",
+    "postcss": "^8.4.47",
+    "postcss-selector-parser": "^6.1.2",
+    "prettier": "^3.3.3",
+    "properties-reader": "^2.3.0",
+    "query-selector-shadow-dom": "^1.0.1",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "remove-files-webpack-plugin": "1.4.0",
+    "sass": "^1.79.4",
+    "sass-loader": "^10.5.2",
+    "sonarqube-scanner": "^2.8.1",
+    "string-replace-loader": "^2.3.0",
+    "strip-css-comments": "^4.1.0",
+    "stylelint": "^15.0.0",
+    "stylelint-config-sass-guidelines": "^10.0.0",
+    "stylelint-prettier": "^4.0.2",
+    "ts-jest": "26.3.0",
+    "ts-loader": "^8.4.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^4.9.0",
+    "url-loader": "^4.1.1",
+    "wc-sass-render": "^1.4.0",
+    "wcag-color": "^1.1.1",
+    "webpack": "^4.47.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.15.2",
+    "webpack-merge": "^5.7.3",
+    "webpack-node-externals": "^3.0.0"
   }
 }

package/publish-conf.js

@@ -0,0 +1,65 @@
+const fs = require("fs");
+const fse = require("fs-extra");
+const path = require("path");
+const spawnSync = require("child_process").spawnSync;
+const exec = require("child_process").exec;
+
+const filePkg = fs.readFileSync(path.resolve("./package.json"));
+const p = JSON.parse(filePkg.toString());
+
+module.exports.notify = function () {
+  const email = spawn(`npm config get email`).result.trim();
+  const markdown = `**${p.name} - ${p.version}** by ${email} at https://www.npmjs.com/package/@momentum-ui/web-components`;
+  const curl = `curl -X POST -H "Content-Type: application/json" -d '{"markdown" : "${markdown}"}' "https://webexapis.com/v1/webhooks/incoming/Y2lzY29zcGFyazovL3VzL1dFQkhPT0svMDc3ZjBlNTMtZjhlNC00NDM2LTk2MzYtNGVmYzk3NmRkNjNj"`;
+  //spawn(curl);
+};
+
+function spawn(cmd) {
+  const exec = spawnSync(cmd, { shell: true });
+  const isError = exec.status != 0;
+  return {
+    isError,
+    result: isError ? exec.stderr.toString() : exec.stdout.toString()
+  };
+}
+
+module.exports.createPackageJson = function () {
+  const pkg = {
+    name: p.name,
+    version: p.version,
+    description: p.description || p.description,
+    author: p.author,
+    license: p.license,
+    repository: p.repository,
+    main: p.main,
+    types: p.types,
+    exports: p.exports,
+    dependencies: p.dependencies,
+    peerDependencies: p.peerDependencies,
+    publishConfig: {
+      registry: `https://registry.npmjs.org`
+    }
+  };
+
+  const publishDir = path.resolve("./publish");
+
+  if (!fse.existsSync(publishDir)) {
+    fse.mkdirSync(publishDir);
+  } else {
+    fse.removeSync(publishDir);
+    fse.mkdirSync(publishDir);
+  }
+  const publishDistDir = path.resolve("./publish/dist");
+
+  if (!fse.existsSync(publishDistDir)) {
+    fse.mkdirSync(`./publish/dist`);
+  }
+
+  const dist = path.resolve("./dist");
+  const pPublishDist = path.resolve(`./publish/dist`);
+  //fse.removeSync(publishDir);
+  fse.ensureDirSync(pPublishDist);
+  fse.copySync(dist, pPublishDist);
+  const data = JSON.stringify(pkg, null, 2);
+  fs.writeFileSync(path.resolve(`./publish/package.json`), data);
+};

package/sonar-project.properties

@@ -0,0 +1,22 @@
+# must be unique in a given SonarQube instance
+sonar.projectKey=Momentum-UI-Web-Components
+
+# --- optional properties ---
+
+# defaults to project key
+#sonar.projectName=My project
+# defaults to 'not provided'
+#sonar.projectVersion=1.0
+ 
+# Path is relative to the sonar-project.properties file. Defaults to .
+#sonar.sources=.
+ 
+# Encoding of the source code. Default is default system encoding
+#sonar.sourceEncoding=UTF-8
+
+sonar.tests=src
+sonar.test.inclusions=**/*.test.js
+
+sonar.typescript.lcov.reportPaths=coverage/lcov.info
+
+sonar.exclusions=node_modules/**, coverage/**, dist/**, stats, src/**/*.test.*, src/**/*.stories.ts, src/[sandbox]/**, src/assets/**/*, storybook-static/**/*, src/wc_scss/**/tests/*, src/utils/*, src/components/sass-stats/*, src/components/**/tokens/*

package/sonar.config.js

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

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

@@ -0,0 +1,72 @@
+import "@/components/help-text/HelpText";
+import "@/components/link/Link";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, internalProperty, LitElement, property, PropertyValues } from "lit-element";
+import "./ErrorLoader.scss";
+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

@@ -0,0 +1,123 @@
+import "@/components/advance-list/AdvanceList";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { html, internalProperty, LitElement, property } from "lit-element";
+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

@@ -0,0 +1,101 @@
+import { html, internalProperty, LitElement, property } 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: Boolean }) 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:20px; gap:0.5rem;"
+            ?disabled="${index % 2 === 0}"
+            aria-hidden="true"
+            indexing="${index}"
+          >
+            <md-icon name="info-badge-filled" iconSet="momentumDesign"> </md-icon>
+            ${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;
+  }
+}