@momentum-ui/web-components 2.5.7 → 2.6.0

package/.github/pull_request_template.md

@@ -1,191 +0,0 @@
-## Types of changes
-<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to change)
-
-## Please check if any of the following apply
-- [ ] Awating dependency on `agentx-services`, `uuip-sdk` or other and has a label added (please specify PR link below in *Other* section)
-- [ ] Is a dependency for PR up the chain (in `AgentX` repo) (please specify the PR link below in *Other* section, optional for non-breaking change)
-- [ ] Has a design wiki (please add a link below in *Other* section)
-- [ ] Is relying on Declarative data model (e.g. not subscribing to individual Web Socket events outside of the SERVICE Promise unless truly asynchronous. If not, explain why below in *Other* section)
-
-
-## What kind of change does this PR introduce?
-#### (Bug fix, feature, docs update, etc...)
-
-`[Type here]`
-
-## Other relevant information
-#### (Dependency PR link, asynchronous SERVICE event subscription call out, wiki, etc...)
-
-<details>
-<summary>
-## If this is a bug fix:
-</summary>
-
-## What is the current behavior?
-#### (You can link to an open issue)
-
-`[Type here]`
-
-## What is the new behavior
-#### (if this is a feature change)?
-
-`[Type here]`
-</details>
-
-## The Gold Standard Checklist for Web Components
-<details>
-<summary>Is it a new Web Component/custom element? Please assure you are following the checklist below (click to expand)</summary>
-
-### Loading
-
-- [ ] [Expressed Dependencies](https://github.com/webcomponents/gold-standard/wiki/Expressed-Dependencies) — Does the component import or otherwise load all of its own dependencies?
-
-- [ ] [Load Order Independence](https://github.com/webcomponents/gold-standard/wiki/Load-Order-Independence) — Can you load the component at any point?
-
-- [ ] [Relative Paths](https://github.com/webcomponents/gold-standard/wiki/Relative-Paths) — Are all paths relative to required resources (images, etc.) relative to the component source?
-
-### DOM Presence
-
-- [ ] [Plain Tag](https://github.com/webcomponents/gold-standard/wiki/Plain-Tag) — Can you instantiate the component with just a plain tag (<my-element>)?
-
-- [ ] [Parent/Child Independence](https://github.com/webcomponents/gold-standard/wiki/Parent-Child-Independence) — Can you use the component inside any type of parent element, or with any type of child elements?
-
-- [ ] [Declared Semantics](https://github.com/webcomponents/gold-standard/wiki/Declared-Semantics) — Does the component expose its semantics by wrapping/extending a native element, or using ARIA roles, states, and properties? *Accessibility*
-
-- [ ] [Meaningful Structure](https://github.com/webcomponents/gold-standard/wiki/Meaningful-Structure) — Does the component's DOM structure reflect the meaningful relationship between elements, such that those relationships are clear to a user relying on an assistive device? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Labels](https://github.com/webcomponents/gold-standard/wiki/Labels) — Are the component's significant elements labeled such that a user relying on an assistive device can understand what those elements are for? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Local Effects](https://github.com/webcomponents/gold-standard/wiki/Local-Effects) — Does the component limit its effects to itself (or a designated target element)?
-
-- [ ] [Detached Instantiation](https://github.com/webcomponents/gold-standard/wiki/Detached-Instantiation) — Can the component be instantiated without being part of the document?
-
-- [ ] [Detachment](https://github.com/webcomponents/gold-standard/wiki/Detachment) — If the component is detached, does it stop listening to page events, and generally suspend non-essential tasks?
-
-- [ ] [Reattachment](https://github.com/webcomponents/gold-standard/wiki/Reattachment) — Can a detached component be added back to the page?
-
-### Content
-
-- [ ] [Children Visible](https://github.com/webcomponents/gold-standard/wiki/Children-Visible) — If the component is visible and given an initial set of children, are those children visible without any attributes, methods, event handlers, or styles required?
-
-- [ ] [Content Assignment](https://github.com/webcomponents/gold-standard/wiki/Content-Assignment) — Can you place a `<slot>` element inside a component instance and have the component treat the assigned content as if it were directly inside the component?
-
-- [ ] [Content Changes](https://github.com/webcomponents/gold-standard/wiki/Content-Changes) — Will the component respond to runtime changes in its content (including distributed content)?
-
-- [ ] [Child Independence](https://github.com/webcomponents/gold-standard/wiki/Child-Independence) — Can you use the component with a wide range of child element types?
-
-- [ ] [Auxiliary Content](https://github.com/webcomponents/gold-standard/wiki/Auxiliary-Content) — Does the component permit the use of child elements that perform auxiliary functions?
-
-- [ ] [Back-End Independence](https://github.com/webcomponents/gold-standard/wiki/Back-End-Independence) — Can the component retrieve its content from a variety of a back-end services?
-
-### Interaction
-
-- [ ] [Focusable](https://github.com/webcomponents/gold-standard/wiki/Focusable) — If the component is interactive, can you navigate to/through it with Tab and Shift+Tab? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Keyboard Support](https://github.com/webcomponents/gold-standard/wiki/Keyboard-Support) — Can you use the basic aspects of component exclusively with the keyboard? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Redundant Sound](https://github.com/webcomponents/gold-standard/wiki/Redundant-Sound) — If the component uses sound to communicate information, does it also provide the same information another way? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-### Styling
-
-- [ ] [Presentable](https://github.com/webcomponents/gold-standard/wiki/Presentable) — If the component is instantiated with no explicit styling, is it reasonably attractive, such that someone could feel comfortable presenting it as is?
-
-- [ ] [Generic Styling](https://github.com/webcomponents/gold-standard/wiki/Generic-Styling) — Generally speaking, is the component’s default appearance straightforward and subdued?
-
-- [ ] [Informational Animation](https://github.com/webcomponents/gold-standard/wiki/Informational-Animation) — Does the component’s default styling only use animation to communicate visually what is happening, rather than for purely artistic effects?
-
-- [ ] [Static Initial Render](https://github.com/webcomponents/gold-standard/wiki/Static-Initial-Render) — Does the component avoid initial animated transitions?
-
-- [ ] [Default Font](https://github.com/webcomponents/gold-standard/wiki/Default-Font) — By default, does the component use the inherited font face, size, style, and weight?
-
-- [ ] [Default Colors](https://github.com/webcomponents/gold-standard/wiki/Default-Colors) — By default, does the component make use of the inherited forecolor and backcolor?
-
-- [ ] [Focus Visible](https://github.com/webcomponents/gold-standard/wiki/Focus-Visible) — Can you easily see when the component has focus? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Redundant Color](https://github.com/webcomponents/gold-standard/wiki/Redundant-Color) — If the component uses color to communicate information, does it also provide the same information another way? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Size to Content](https://github.com/webcomponents/gold-standard/wiki/Size-to-Content) — Does the component automatically size itself to contain its content by default?
-
-- [ ] [Stretch to Fit](https://github.com/webcomponents/gold-standard/wiki/Stretch-to-Fit) — If you stretch the component (e.g., with absolute positioning or CSS flex), do its elements appropriately stretch as well?
-
-- [ ] [Sufficient Contrast](https://github.com/webcomponents/gold-standard/wiki/Sufficient-Contrast) — Are labels, icons, etc. perceivable and usable by low vision users? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [High Contrast](https://github.com/webcomponents/gold-standard/wiki/High-Contrast) — Is the component perceivable and usable when High Contrast Mode is enabled? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Automatic Positioning](https://github.com/webcomponents/gold-standard/wiki/Automatic-Positioning) — Does the component automatically calculate positions for its elements?
-
-- [ ] [Child Positioning](https://github.com/webcomponents/gold-standard/wiki/Child-Positioning) — Can child elements be positioned relative to their container within the component?
-
-- [ ] [Responsive](https://github.com/webcomponents/gold-standard/wiki/Responsive) — Does the component scale well to standard mobile, tablet, and desktop screen sizes?
-
-- [ ] [Magnification](https://github.com/webcomponents/gold-standard/wiki/Magnification) — Does the component render correctly when magnified? [*Accessibility*](https://github.com/webcomponents/gold-standard/wiki#accessibility)
-
-- [ ] [Style Recalc](https://github.com/webcomponents/gold-standard/wiki/Style-Recalc) — Can you apply styles to a component instance even after it’s attached to the document?
-
-- [ ] [Size Recalc](https://github.com/webcomponents/gold-standard/wiki/Size-Recalc) — If the component manually positions any subelements relative to its own size, does it appropriately recalc these positions when its own size changes?
-
-### API
-
-- [ ] [Member Order Independence](https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence) — Can you set or invoke the component’s attributes, properties, and methods in any order?
-
-- [ ] [Member Combinations](https://github.com/webcomponents/gold-standard/wiki/Member-Combinations) — Can you generally use all the component’s attributes, properties, and methods in any combination?
-
-- [ ] [Member Stability](https://github.com/webcomponents/gold-standard/wiki/Member-Stability) — If you change a component property or contents, then immediately get that property or contents, do you generally get the same result back?
-
-- [ ] [Required Properties](https://github.com/webcomponents/gold-standard/wiki/Required-Properties) — Does the component avoid requiring properties to be set unless absolutely necessary?
-
-- [ ] [Exposed Methods](https://github.com/webcomponents/gold-standard/wiki/Exposed-Methods) — Can you programmatically trigger all of the component’s key functionality through methods, rather than relying on user interaction?
-
-- [ ] [Exposed Events](https://github.com/webcomponents/gold-standard/wiki/Exposed-Events) — Does the component raise events for all key points in its use?
-
-- [ ] [Property Change Events](https://github.com/webcomponents/gold-standard/wiki/Property-Change-Events) — Does the component raise property change events when — and only when — properties change in response to internal component activity?
-
-- [ ] [Documented API](https://github.com/webcomponents/gold-standard/wiki/Documented-API) — Does the component document its public API?
-
-- [ ] [Hide Internal Members](https://github.com/webcomponents/gold-standard/wiki/Hide-Internal-Members) — Does the component avoid exposing internal members in its public API?
-
-### Performance
-
-- [ ] [Computational Performance](https://github.com/webcomponents/gold-standard/wiki/Computational-Performance) — Generally speaking, does the component perform its core functions reasonably quickly?
-
-- [ ] [Network Performance](https://github.com/webcomponents/gold-standard/wiki/Network-Performance) — If the component uses the network, does it do so efficiently?
-
-- [ ] [Render Performance](https://github.com/webcomponents/gold-standard/wiki/Render-Performance) — Is the component quick to get pixels on the screen when first loading and when updating?
-
-- [ ] [Vector Graphics](https://github.com/webcomponents/gold-standard/wiki/Vector-Graphics) — Where possible and appropriate, are the component’s graphics in a scalable vector form?
-
-- [ ] [Progress Feedback](https://github.com/webcomponents/gold-standard/wiki/Progress-Feedback) — For long operations, can the component provide appropriate feedback?
-
-### Localization
-
-- [ ] [Localizable Strings](https://github.com/webcomponents/gold-standard/wiki/Localizable-Strings) — Can text presented by the component be replaced for use in other languages?
-
-- [ ] [Date+Time Format](https://github.com/webcomponents/gold-standard/wiki/Date+Time-Format) — If the component accepts or renders dates and/or times, can you change the date/time format?
-
-- [ ] [Currency Format](https://github.com/webcomponents/gold-standard/wiki/Currency-Format) — If the component accepts or renders currency amounts, can you change the currency format?
-
-- [ ] [Right-to-Left](https://github.com/webcomponents/gold-standard/wiki/Right-to-Left) — Can the component be configured to flip its presentation for use in right-to-left languages like Arabic and Hebrew?
-
-### Factoring
-
-- [ ] [Base Class](https://github.com/webcomponents/gold-standard/wiki/Base-Class) — If the component is a special case of another component, does it appropriately subclass from (or at least compose an instance of) that base class?
-
-- [ ] [Composition](https://github.com/webcomponents/gold-standard/wiki/Composition) — Does the component appropriately delegate responsibilities to existing standard components when possible?
-
-- [ ] [Subclassable](https://github.com/webcomponents/gold-standard/wiki/Subclassable) — Is the component subclassable?
-
-- [ ] [Overridable Methods](https://github.com/webcomponents/gold-standard/wiki/Overridable-Methods) — Does the component provide internal methods for key functionality, such that a subclass can override those methods to refine their behavior?
-
-### Development
-
-- [ ] [Code Style Guide](https://github.com/webcomponents/gold-standard/wiki/Code-Style-Guide) — Does the source code comply with a standard source code style guide?
-
-- [ ] [Open License](https://github.com/webcomponents/gold-standard/wiki/Open-License) — If the component presents itself as open source, has it been assigned a standard form of a common open source license?
-
-- [ ] [Clean Console](https://github.com/webcomponents/gold-standard/wiki/Clean-Console) — Does the component avoid writing to the debug console unless specifically requested to do so?
-
-- [ ] [Prefixed Name](https://github.com/webcomponents/gold-standard/wiki/Prefixed-Name) — Does the component have a name prefixed with a project name, element collection name, organization, or something with semantic meaning?
-</details>

package/.prettierignore

@@ -1,6 +0,0 @@
-/node_modules
-/coverage
-/build
-/dist
-/publish
-publish.auth.js

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "printWidth": 120,
-  "tabWidth": 2,
-  "semi": true
-}

package/.storybook/main.ts

@@ -1,75 +0,0 @@
-import { commonDev } from '../webpack.config';
-import * as webpack from "webpack";
-
-/**
- * merge two arrays into one and remove the duplicates
- *
- * @param merger
- * @param mergee
- * @returns {Array<any>} merged unique array
- */
-const mergeUnique = (merger: Array<any>, mergee?: Array<any>) =>
-  mergee ?
-    merger.concat(mergee.filter((item: any) => merger.indexOf(item) === -1)) :
-    merger;
-
-module.exports = {
-  stories: [
-    "../src/components/**/*.stories.ts",
-    "../src/components/**/*.stories.mdx",
-    "../src/internal-components/color-table/ColorTable.stories.ts",
-    "../src/internal-components/color-table/*.stories.mdx"
-  ],
-
-  addons: [
-    "@storybook/addon-knobs/register",
-    "@storybook/addon-a11y/register",
-    "@storybook/addon-docs",
-    "@storybook/addon-controls",
-    "@storybook/addon-actions",
-    "@storybook/addon-viewport"
-  ],
-
-  webpackFinal: async (storybookConfig: webpack.Configuration, { configType }: { configType : "DEVELOPMENT" | "PRODUCTION" }) => {
-
-    console.log("Storybook build mode: ", configType);
-
-    // RESOLVE
-    {
-      storybookConfig.resolve = storybookConfig.resolve || {};
-
-      // EXTENSIONS
-      {
-        storybookConfig.resolve.extensions = mergeUnique(storybookConfig.resolve?.extensions || [], commonDev.resolve?.extensions || []);
-      }
-
-      // ALIAS
-      {
-        storybookConfig.resolve.alias = commonDev.resolve?.alias;
-      }
-    }
-
-    // MODULE
-    {
-      storybookConfig.module = storybookConfig.module || { rules: [] };
-
-      // RULES
-      {
-        storybookConfig.module.rules = mergeUnique(storybookConfig.module.rules, commonDev.module?.rules || []);
-      }
-    }
-
-    // PLUGINS
-    {
-
-      // Storybook production has it's own tuned HtmlWebpackPlugin
-      const omitPluginNames = (configType === "DEVELOPMENT") ? [] : ["HtmlWebpackPlugin"];
-
-      const plugins = (commonDev.plugins || []).filter(p => omitPluginNames.indexOf(p.constructor.name) === -1);
-
-      storybookConfig.plugins = mergeUnique(storybookConfig.plugins || [], plugins);
-    }
-
-    return storybookConfig;
-  }
-}

package/.storybook/manager.ts

@@ -1,14 +0,0 @@
-import { addons } from '@storybook/addons';
-
-addons.setConfig({
-  isFullscreen: false,
-  showNav: true,
-  showPanel: true,
-  panelPosition: 'bottom',
-  sidebarAnimations: true,
-  enableShortcuts: true,
-  isToolshown: true,
-  selectedPanel: undefined,
-  initialActive: 'sidebar',
-  showRoots: true,
-});

package/.storybook/preview-body.html

@@ -1,43 +0,0 @@
-<style>
-  body {padding: 0 !important;}
-
-  #root {
-    height: 100%;
-    width: 100%;
-  }
-
-  #root-inner {
-    width: 100%;
-  }
-
-  md-theme.theme-toggle {
-    background: #fff;
-    height: 100%;
-    min-height: 450px;
-    padding: 1rem;
-    width: 100%;
-  }
-
-  md-theme.theme-toggle[darktheme] {
-    background: #000;
-    color: #F7F7F7;
-  }
-
-  .sorting {
-    opacity: 0.4;
-    border-style: dashed;
-    border-color: #333;
-  }
-
-  .shared-draggable-wrapper {
-    display: flex;
-    justify-content: space-evenly;
-  }
-  
-  .ghost {
-    opacity: 0.4;
-    border-style: dashed;
-    border-color: red;
-    background-color: yellow;
-  }
-</style>

package/.storybook/preview-head.html

@@ -1,3 +0,0 @@
-<link href="css/fonts.css" rel="stylesheet" />
-<link href="css/momentum-ui.min.css" rel="stylesheet" />
-<link href="css/momentum-ui-icons.min.css" rel="stylesheet" />

package/.storybook/preview.ts

@@ -1,32 +0,0 @@
-import { addDecorator, addParameters, configure, setCustomElements } from "@storybook/web-components";
-import customElements from './custom-elements.json';
-import { withA11y } from "@storybook/addon-a11y";
-
-/** 
- * Custom element file generated automatically by execute this command
- * npx web-component-analyzer src\components\**\*.ts --outFile .storybook\custom-elements.json
-*/
-
-addDecorator(withA11y);
-
-setCustomElements(customElements);
-
-addParameters({
-  docs: {
-    inlineStories: false,
-  },
-  controls: { expanded: true },
-  a11y: {
-    config: {},
-    options: {
-      checks: { 'color-contrast': { options: { noScroll: true } } },
-      restoreScroll: true,
-    },
-  },
-  options: {
-    storySort: {
-      order: ['Components', 'Internal References'],
-      method: 'alphabetical'
-    }
-  }
-});

package/.stylelintignore

@@ -1,6 +0,0 @@
-/node_modules
-/coverage
-/build
-/dist
-/publish
-publish.auth.js

package/.stylelintrc.js

@@ -1,18 +0,0 @@
-module.exports = {
-  plugins: [
-    "stylelint-prettier",
-  ],
-  extends: [
-    "stylelint-config-sass-guidelines"
-  ],
-  rules: {
-    "string-quotes": "double",
-    "max-nesting-depth": 5,
-    "selector-class-pattern": null,
-    "scss/at-import-partial-extension-blacklist": null,
-    "declaration-property-value-blacklist": {
-      "border": ["none"]
-    },
-    "scss/dollar-variable-pattern": null
-  }
-};

package/.vscode/extensions.json

@@ -1,13 +0,0 @@
-{
-  "recommendations": [
-    "mikestead.dotenv",
-    "dbaeumer.vscode-eslint",
-    "orta.vscode-jest",
-    "runem.lit-plugin",
-    "ionutvmi.path-autocomplete",
-    "esbenp.prettier-vscode",
-    "mrmlnc.vscode-scss",
-    "stylelint.vscode-stylelint",
-    "sonarsource.sonarlint-vscode"
-  ]
-}

package/.vscode/launch.json

@@ -1,13 +0,0 @@
-{
-  "version": "0.0.1",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "vscode-jest-tests",
-      "program": "${workspaceRoot}/node_modules/.bin/jest",
-      "cwd": "${workspaceRoot}",
-      "args": ["--i", "--config", "jest.config.js"]
-    }
-  ]
-}

package/.vscode/settings.json

@@ -1,29 +0,0 @@
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true,
-    "source.organizeImports": true
-  },
-
-  "css.validate": false,
-  "scss.validate": false,
-
-  "lit-plugin.strict": true,
-  "lit-plugin.rules.no-unknown-event": "warning",
-
-  "jest.autoEnable": false,
-
-  "path-autocomplete.extensionOnImport": true,
-  "path-autocomplete.pathMappings": {
-    "@": "${folder}/src",
-    "@img": "${folder}/src/assets/images",
-    "@css": "${folder}/src/assets/styles"
-  },
-
-  "sonarlint.connectedMode.project": {
-    "connectionId": "cisco",
-    "projectKey": "Momentum-UI-Web-Components"
-  }
-}

package/ANGULAR_USAGE.md

@@ -1,102 +0,0 @@
-# Usage With Angular (11)
-
-The following walk-through uses angular-cli my-app to quick start a simple usage scenario. Please read through, and adapt for your project's specific needs.
-
-### Create-react-app
-First and foremost, follow the instructions in order to get the angular my-app running locally.
-<https://angular.io/guide/setup-local>
-1. `npm install -g @angular/cli`
-2. `ng new my-app`
-3. `cd my-app`
-4. `ng serve --open`
-
-### Include Required Dependencies in package.json
-##### In package.json (`create-react-app/my-app/package.json`)
-Add peerDependencies & devDependencies to match the following: <br>
-<sub>*Note: at this point, only version `2.1.5-dev` works for "@momentum-ui/web-components" within an angular application.*</sub>
-  ```json
-  "peerDependencies": {
-    "@momentum-ui/core": "^19.9.12",
-    "@momentum-ui/icons": "^7.54.0",
-    "@momentum-ui/tokens": "^1.5.0",
-    "@momentum-ui/utils": "^6.2.7",
-    "@momentum-ui/web-components": "2.1.5-dev",
-    "lit-element": "^2.3.1",
-    "lit-html": "^1.2.1"
-  },
-  ```
-  
-  and add these to the `devDependencies`:
-
-  ```json
-    "@momentum-ui/core": "^19.9.12",
-    "@momentum-ui/icons": "^7.54.0",
-    "@momentum-ui/tokens": "^1.5.0",
-    "@momentum-ui/utils": "^6.2.7",
-    "@momentum-ui/web-components": "2.1.5-dev",
-    "lit-element": "2.3.1",
-    "lit-html": "1.2.1",
-  ```
-  <sub>*The changes to scripts commands enable the following Webpack modifications to be run within the Create React App environment. <br> The addition of `jest` as a resolution is important for tests to run*</sub>
-  
-### Add CUSTOM_ELEMENTS_SCHEMA
-##### In app.module.ts (`my-app/src/app/app.module.ts`)
-Update the file to match the following (line 1 and line 15 changed):
-```javascript=
-import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class AppModule { }
-```
-
-### Modify tsconfig.json
-##### In tsconfig.json (`my-app/tsconfig.json`)
-Set esModuleInterop to true under compilerOptions
-```json
-  "compilerOptions": {
-    "esModuleInterop": true,
-```
-
-### Add a Web Components to your Project
-1. Add the following import:
-##### In app.component.ts (`my-app/src/app/app.component.ts`)
-```js
-  import '@momentum-ui/web-components';
-```
-OR import each individual web component
-```js
-  import '@momentum-ui/web-components/dist/comp/md-button';
-  import '@momentum-ui/web-components/dist/comp/md-icon';
-```
-<sub>*NOTE: You only need to import the web-components module at the top level of your application in order to use web components anywhere throughout.*
-</sub>
-
-2. Insert the following sample web component for testing purposes:
-##### In app.component.html (`my-app/src/app/app.component.html`)
-```html
-<md-theme>
-  <md-button variant="green"><md-icon slot="icon" name="play_16"></md-icon><span slot="text">Code On!</span></md-button>
-</md-theme>
-```
-<sub>*NOTE: You must wrap your application with the `<md-theme>` element. It provides a set of core style resets and CSS custom variables that provide Theme color tokens, among other things. You can test these by toggling attributes `lumos` and/or `darkTheme` on the `<md-theme>` element.*
-</sub>
-
-##### Now it is time to get your app running locally! <br>
-(within `my-app` directory)
-
-1. `yarn` installs all dependencies.
-2. `yarn build` copies the required static assets for fonts and icons.
-3. `yarn start` launches project locally.

package/APPLYING_STYLES.md

@@ -1,44 +0,0 @@
-# Contributing to Momentum UI Web Components
-
-Thank you for contributing to this library! This is a guide to properly connect your new component's modularized styles to utilize the efficiency and Shadow DOM support of Constructable Stylesheets.
-
-## IMPORTING EXISTING STYLES TO WEB COMPONENT
-
-Most components have existing style modules that were carried over from the Momentum Core SMACSS library. While they can be used directly with minimal setup, as we work on setting up Lumos and Web Component specific style changes, these steps will lead to a successful migration and refactor of styles in to our own SCSS library.
-
-1. Create a `scss` folder in the component's directory.
-2. If available, copy over the `module.scss`, `component-name.scss`, `mixins.scss` and `settings.scss` found in `src/momentum_scss/components/component-name/`, and paste them to `src/components/component-name/scss`. 
-3. Inside your `ComponentName.ts` file, import the scss file: `import styles from "./scss/module.scss";`
-4. Check the `@import` paths in `module.scss` to ensure successful compilation of styles.
-5. Webpack will compile the CSS for you, but in order to adopt the styles into your component, place this LitElement function before `render()` :
-
-```javascript
-static get styles():
-  return [styles]
-}
-```
-
-### USING COMMON RESETS TO SOLVE SHADOW DOM ISSUES
-
-In many cases, particularly within components whose child elements need box-position and typography styles, it is necessary to also adopt the basic normalize and reset styles provided by Momentum. Because styles cannot cross into new Shadow Roots, this needs to be done on most components. 
-
-1. Import the reset styles from `src/assets/styles/reset.scss`
-2. Add it to the start of the `CSSResultArray` in `getStyles()`, adopting them before others. 
-
-```javascript
-static get styles():
-  return [reset, styles]
-}
-```
-
-### EDITING AND ADDING NEW STYLES TO COMPONENTS
-
-By linking to the `momentum_scss` library we are referring to the legacy rulesets that render the older Momentum design look and is optomized for React applications. 
-
-New Lumos style updates will take place in the styles made local to the component files themselves, moving away from the convention of keeping component style markup inside the SMACSS library, and only keeping global settings and shared styles there.
-
-1. Begin edits within `component-name.scss`, and do not write any styles to `module.scss`. Find and replace selectors that rely upon old Momentum scss variables, for example `%#{button-class}` should become `.md-button`, making the code easier to read. Check existing style definitions and styles that do not exist in Lumos. For any new style you write, find existing selectors and style decorations to edit, and avoid writing overrides. 
-2. If any mixins associated with the component are never used, delete them from the local `mixins.scss` file. If a `settings.scss` file is present, remove unused and legacy variables that are not applicable to Lumos.
-3. Once component-specific modules are edited, remove the `@import`s of global scss modules from `momentum_scss` and replace with imports from `wc_scss`. Best practice is to have `yarn start` running and following the compile errors that appear in the console to identify the modules that have the right dependencies.
-4. If a scss module is not yet present in the `wc_scss` directory, copy it over from the `momentum_scss` following the familiar file structure, taking a moment to inspect it for irellevant legacy code, repition, or other bloat you can confidently delete.
-5. Once the `module.scss` file compiles successfully with the minimal imports needed, your component should render correctly with you new styles, and no longer depend on legacy style from the momentum_scss library!