@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/tooltip/scss/tooltip.scss

@@ -0,0 +1,151 @@
+/** @component tooltip */
+
+:host {
+  display: inline-flex;
+}
+
+.md-tooltip {
+  position: relative;
+  width: 100%;
+
+  &.md-tooltip--disabled {
+    .md-tooltip__popper {
+      display: none;
+    }
+  }
+
+  &__content {
+    display: inline-block;
+  }
+
+  &__popper {
+    animation-duration: 0.15s;
+    animation-name: tooltip-fade;
+    background-color: var(--tooltip-bg-color, $lm-tooltip-bg-color-light);
+    border: 1px solid $tooltip-border-color;
+    border-radius: $tooltip__radius;
+    box-shadow: $tooltip-box-shadow;
+    color: var(--tooltip-font-color, $lm-tooltip-font-color-light);
+    display: none;
+    font-size: $tooltip__font-size;
+    line-height: $tooltip__line-height;
+    max-width: $tooltip__max-width;
+    padding: $tooltip__padding;
+    position: relative;
+    text-align: center;
+    width: max-content;
+    word-break: break-word;
+    z-index: 9999;
+
+    .md-tooltip__arrow,
+    .md-tooltip__arrow::before {
+      height: $tooltip-arrow__size;
+      position: absolute;
+      width: $tooltip-arrow__size;
+      z-index: -1;
+    }
+
+    .md-tooltip__arrow::before {
+      background-color: var(--tooltip-bg-color, $lm-tooltip-bg-color-light);
+      border: 1px solid var(--tooltip-bg-color, $lm-tooltip-bg-color-light);
+      box-shadow: inset 0 0 0 1px $tooltip-border-color;
+      content: "";
+      pointer-events: none;
+      transform: rotate(45deg);
+      z-index: 1;
+    }
+
+    &[data-show] {
+      display: block;
+      z-index: 9999;
+    }
+
+    &[data-popper-placement^="top"] > .md-tooltip__arrow {
+      bottom: -7px;
+
+      &::before {
+        border-radius: 0 0 $tooltip__radius 0;
+        clip-path: polygon(0% 100%, 100% 100%, 100% 0%);
+        left: 0;
+      }
+    }
+
+    &[data-popper-placement^="bottom"] > .md-tooltip__arrow {
+      top: -8px;
+
+      &::before {
+        border-radius: $tooltip__radius 0 0 0;
+        clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
+        left: 0;
+      }
+    }
+
+    &[data-popper-placement^="left"] > .md-tooltip__arrow {
+      right: 1px;
+
+      &::before {
+        border-radius: 0 $tooltip__radius 0 0;
+        clip-path: polygon(0% 0%, 100% 100%, 100% 0%);
+      }
+    }
+
+    &[data-popper-placement^="right"] > .md-tooltip__arrow {
+      left: -15px;
+
+      &::before {
+        border-radius: 0 0 0 $tooltip__radius;
+        clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
+      }
+    }
+  }
+
+  @keyframes tooltip-fade {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes tooltip-slide-bottom {
+    from {
+      top: 100%;
+    }
+
+    to {
+      top: calc(100% + 0.7rem);
+    }
+  }
+
+  @keyframes tooltip-slide-top {
+    from {
+      bottom: 100%;
+    }
+
+    to {
+      bottom: calc(100% + 0.7rem);
+    }
+  }
+
+  @keyframes tooltip-slide-left {
+    from {
+      right: 100%;
+    }
+
+    to {
+      right: calc(100% + 0.7rem);
+    }
+  }
+
+  @keyframes tooltip-slide-right {
+    from {
+      left: 100%;
+    }
+
+    to {
+      left: calc(100% + 0.7rem);
+    }
+  }
+}

package/src/components/tooltip/tokens/lm-tooltip-tokens.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const tooltip = {
+  prefix: "lm",
+  component: "tooltip",
+  "font-color": {
+    light: colors.gray["05"].name,
+    dark: colors.gray["05"].name
+  },
+  "bg-color": {
+    light: colors.gray[90].name,
+    dark: colors.gray[90].name
+  }
+};
+
+module.exports = tooltip;

package/src/components/tooltip/tokens/md-tooltip-tokens.js

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const tooltip = {
+  prefix: "md",
+  component: "tooltip",
+  "font-color": {
+    light: colors.gray["05"].name,
+    dark: colors.gray["05"].name
+  },
+  "bg-color": {
+    light: colors.gray["90"].name,
+    dark: colors.gray["90"].name
+  }
+};
+
+module.exports = tooltip;

package/src/constants.ts

@@ -0,0 +1,37 @@
+export enum Key {
+  ArrowDown = "ArrowDown",
+  ArrowLeft = "ArrowLeft",
+  ArrowRight = "ArrowRight",
+  ArrowUp = "ArrowUp",
+  Backspace = "Backspace",
+  Delete = "Delete",
+  End = "End",
+  Enter = "Enter",
+  Escape = "Escape",
+  Home = "Home",
+  Space = "Space",
+  Tab = "Tab",
+  Digit1 = "Digit1",
+  Digit2 = "Digit2",
+  Digit3 = "Digit3",
+  Digit4 = "Digit4",
+  Digit5 = "Digit5",
+  Digit6 = "Digit6",
+  Digit7 = "Digit7",
+  Digit8 = "Digit8",
+  Digit9 = "Digit9"
+}
+
+export enum TIME_UNIT {
+  HOUR = "hour",
+  MINUTE = "minute",
+  SECOND = "second",
+  AM_PM = "am_pm"
+}
+
+export enum ARIA_INVALID {
+  GRAMMAR = "grammar",
+  FALSE = "false",
+  SPELLING = "spelling",
+  TRUE = "true"
+}

package/src/index.ts

@@ -0,0 +1,75 @@
+/**
+ * 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.
+ *
+ */
+
+export { Accordion } from "./components/accordion/Accordion";
+export { AccordionItem } from "./components/accordion/AccordionItem";
+export { ActivityButton } from "./components/activity-button/ActivityButton";
+export { AlertBanner } from "./components/alert-banner/AlertBanner";
+export { Alert } from "./components/alert/Alert";
+export { Avatar } from "./components/avatar/Avatar";
+export { CompositeAvatar } from "./components/avatar/CompositeAvatar";
+export { Badge } from "./components/badge/Badge";
+export { Breadcrumb } from "./components/breadcrumb/Breadcrumb";
+export { ButtonGroup } from "./components/button-group/ButtonGroup";
+export { Button } from "./components/button/Button";
+export { Card } from "./components/card/Card";
+export { ChatMessage } from "./components/chat-message/ChatMessage";
+export { Checkbox } from "./components/checkbox/Checkbox";
+export { CheckboxGroup } from "./components/checkbox/CheckboxGroup";
+export { Chip } from "./components/chip/Chip";
+export { Coachmark } from "./components/coachmark/Coachmark";
+export { CodeEditor } from "./components/code-editor/CodeEditor";
+export { ComboBox } from "./components/combobox/ComboBox";
+export { DateRangePicker } from "./components/date-range-picker/DateRangePicker";
+export { DateTimePicker } from "./components/date-time-picker/DateTimePicker";
+export { DatePicker } from "./components/datepicker/DatePicker";
+export { DatePickerCalendar } from "./components/datepicker/datepicker-calendar/DatePickerCalendar";
+export { DatePickerDay } from "./components/datepicker/datepicker-day/DatePickerDay";
+export { DatePickerMonth } from "./components/datepicker/datepicker-month/DatePickerMonth";
+export { DatePickerWeek } from "./components/datepicker/datepicker-week/DatePickerWeek";
+export { Draggable } from "./components/draggable/Draggable";
+export { DraggableItem } from "./components/draggable/DraggableItem";
+export { Dropdown } from "./components/dropdown/Dropdown";
+export { EditableTextfield } from "./components/editable-textfield/EditableTextfield";
+export { Favorite } from "./components/favorite/Favorite";
+export { FloatingModal } from "./components/floating-modal/FloatingModal";
+export { FloatingMinimizedModal } from "./components/floating-modal/FloatingMinimizedModal";
+export { Form } from "./components/form/Form";
+export { HelpText } from "./components/help-text/HelpText";
+export { Icon } from "./components/icon/Icon";
+export { InputFile } from "./components/input-file/InputFile";
+export { Input } from "./components/input/Input";
+export { Label } from "./components/label/Label";
+export { Link } from "./components/link/Link";
+export { List } from "./components/list/List";
+export { ListItem } from "./components/list/ListItem";
+export { Loading } from "./components/loading/Loading";
+export { MeetingAlert } from "./components/meeting-alert/MeetingAlert";
+export { MenuOverlay } from "./components/menu-overlay/MenuOverlay";
+export { Menu } from "./components/menu/Menu";
+export { MenuItem } from "./components/menu/MenuItem";
+export { Modal } from "./components/modal/Modal";
+export { Pagination } from "./components/pagination/Pagination";
+export { PhoneInput } from "./components/phone-input/PhoneInput";
+export { ProgressBar } from "./components/progress-bar/ProgressBar";
+export { Radio } from "./components/radio/Radio";
+export { RadioGroup } from "./components/radio/RadioGroup";
+export { Slider } from "./components/slider/Slider";
+export { Spinner } from "./components/spinner/Spinner";
+export { Table } from "./components/table/Table";
+export { TableAdvanced } from "./components/table-advanced/TableAdvanced";
+export { Tab } from "./components/tabs/Tab";
+export { TabPanel } from "./components/tabs/TabPanel";
+export { Tabs } from "./components/tabs/Tabs";
+export { TaskItem } from "./components/taskitem/TaskItem";
+export { Theme } from "./components/theme/Theme";
+export { TimePicker } from "./components/timepicker/TimePicker";
+export { ToggleSwitch } from "./components/toggle-switch/ToggleSwitch";
+export { Tooltip } from "./components/tooltip/Tooltip";
+
+// eslint-disable-next-line prettier/prettier

package/src/internal-components/color-table/ColorTable.stories.ts

@@ -0,0 +1,35 @@
+/**
+ * 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 { withA11y } from "@storybook/addon-a11y";
+import { boolean, withKnobs } from "@storybook/addon-knobs";
+import { html } from "lit-element";
+import "@/components/theme/Theme";
+import "@/internal-components/color-table/ColorTable";
+
+export default {
+  title: "Internal References/Color Table",
+  component: "color-table",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    a11y: {
+      element: "color-table"
+    }
+  }
+};
+
+export const ColorTable = () => {
+  const darkTheme = boolean("darkMode", false);
+  const lumos = boolean("Lumos Theme", false);
+
+  return html`
+  <md-theme class="theme-toggle" id="color-table" ?darkTheme=${darkTheme} ?lumos=${lumos}>
+    <color-table></color-table>
+  </md-theme>
+  `;
+};

package/src/internal-components/color-table/ColorTable.ts

@@ -0,0 +1,85 @@
+import "@/components/table-advanced/TableAdvanced";
+import { customElement, html, internalProperty, LitElement, PropertyValues } from "lit-element";
+import { colorTableData } from "@/wc_scss/colors/vars/color-table-data-string";
+import { TableAdvanced } from "@/components/table-advanced/TableAdvanced";
+import { nothing } from "lit-html";
+import { colorCellTemplates } from "./data";
+import { allColorTemplates } from "./utils";
+import reset from "@/wc_scss/reset.scss";
+import styles from "./scss/module.scss";
+
+@customElement("color-table")
+export class ColorTableSandbox extends LitElement {
+  @internalProperty() colorTokenTableData:
+    | { config: TableAdvanced.Config; data: TableAdvanced.Data }
+    | undefined = undefined;
+
+  firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+
+    // convert string to 2d array
+    const colorTableRowData = colorTableData.split("\n");
+
+    const colorTable2DArray: any = [];
+    for (let i = 1; i < colorTableRowData.length - 1; i++) {
+      colorTable2DArray[i] = colorTableRowData[i].split(",");
+    }
+
+    this.colorTokenTableData = {
+      config: {
+        cellTemplates: colorCellTemplates,
+        isStickyHeader: true,
+
+        rows: {
+          isDraggable: true,
+          selectable: "multiple"
+        },
+
+        cols: {
+          isResizable: true,
+          define: [
+            { id: "c1", title: "Color Token CSS Variable", width: "40%", sorter: "byString", filters: "forString" },
+            { id: "c2", title: "Light Mode", width: "30%", sorter: "byString", filters: "forString" },
+            { id: "c3", title: "Dark Mode", width: "30%", filters: "forString" }
+          ]
+        }
+      },
+
+      data: {
+        list2d: colorTable2DArray
+      }
+    };
+  }
+
+  renderColorTable() {
+    if (this.colorTokenTableData?.config && this.colorTokenTableData?.data) {
+      return html`
+        </br>
+        <h3>Color Token Instructions</h3>
+        <p>
+          Within your stylesheet, you may use any of the CSS variables along with a fallback color as the second value.
+        </p>
+        <code class="code-block">background-color: var(--md-button-primary-bg-color, $md-button-primary-bg-color-light);</code>
+        <md-table-advanced
+          class="color-table"
+          .config=${this.colorTokenTableData.config}
+          .data=${this.colorTokenTableData.data}
+        >
+          ${allColorTemplates()}
+        </md-table-advanced>
+      `;
+    } else {
+      return nothing;
+    }
+  }
+
+  static get styles() {
+    return [reset, styles];
+  }
+
+  render() {
+    return html`
+      ${this.renderColorTable()}
+    `;
+  }
+}

package/src/internal-components/color-table/data.ts

@@ -0,0 +1,204 @@
+export const colorCellTemplates = {
+    _none_: { templateName: "nocolor" },
+    _$mdblue10_: { templateName: "mdblue10" },
+    _$mdblue20_: { templateName: "mdblue20" },
+    _$mdblue30_: { templateName: "mdblue30" },
+    _$mdblue40_: { templateName: "mdblue40" },
+    _$mdblue50_: { templateName: "mdblue50" },
+    _$mdblue60_: { templateName: "mdblue60" },
+    _$mdblue70_: { templateName: "mdblue70" },
+    _$mdblue80_: { templateName: "mdblue80" },
+    _$mdblue90_: { templateName: "mdblue90" },
+    _$mdblue95_: { templateName: "mdblue95" },
+    _$mdblue05_: { templateName: "mdblue05" },
+    
+    _$mdred10_: { templateName: "mdred10" },
+    _$mdred20_: { templateName: "mdred20" },
+    _$mdred30_: { templateName: "mdred30" },
+    _$mdred40_: { templateName: "mdred40" },
+    _$mdred50_: { templateName: "mdred50" },
+    _$mdred60_: { templateName: "mdred60" },
+    _$mdred70_: { templateName: "mdred70" },
+    _$mdred80_: { templateName: "mdred80" },
+    _$mdred90_: { templateName: "mdred90" },
+    _$mdred95_: { templateName: "mdred95" },
+    _$mdred05_: { templateName: "mdred05" },
+    
+    _$mdyellow10_: { templateName: "mdyellow10" },
+    _$mdyellow20_: { templateName: "mdyellow20" },
+    _$mdyellow30_: { templateName: "mdyellow30" },
+    _$mdyellow40_: { templateName: "mdyellow40" },
+    _$mdyellow50_: { templateName: "mdyellow50" },
+    _$mdyellow60_: { templateName: "mdyellow60" },
+    _$mdyellow70_: { templateName: "mdyellow70" },
+    _$mdyellow80_: { templateName: "mdyellow80" },
+    _$mdyellow90_: { templateName: "mdyellow90" },
+    _$mdyellow95_: { templateName: "mdyellow95" },
+    _$mdyellow05_: { templateName: "mdyellow05" },
+    
+    _$mdgreen10_: { templateName: "mdgreen10" },
+    _$mdgreen20_: { templateName: "mdgreen20" },
+    _$mdgreen30_: { templateName: "mdgreen30" },
+    _$mdgreen40_: { templateName: "mdgreen40" },
+    _$mdgreen50_: { templateName: "mdgreen50" },
+    _$mdgreen60_: { templateName: "mdgreen60" },
+    _$mdgreen70_: { templateName: "mdgreen70" },
+    _$mdgreen80_: { templateName: "mdgreen80" },
+    _$mdgreen90_: { templateName: "mdgreen90" },
+    _$mdgreen95_: { templateName: "mdgreen95" },
+    _$mdgreen05_: { templateName: "mdgreen05" },
+    
+    _$mdgray10_: { templateName: "mdgray10" },
+    _$mdgray20_: { templateName: "mdgray20" },
+    _$mdgray30_: { templateName: "mdgray30" },
+    _$mdgray40_: { templateName: "mdgray40" },
+    _$mdgray50_: { templateName: "mdgray50" },
+    _$mdgray60_: { templateName: "mdgray60" },
+    _$mdgray70_: { templateName: "mdgray70" },
+    _$mdgray80_: { templateName: "mdgray80" },
+    _$mdgray90_: { templateName: "mdgray90" },
+    _$mdgray95_: { templateName: "mdgray95" },
+    _$mdgray100_: { templateName: "mdgray100" },
+    _$mdgray05_: { templateName: "mdgray05" },
+    
+    _$mdwhite60_: { templateName: "mdwhite60" },
+    _$mdwhite100_: { templateName: "mdwhite100" },
+    _$mdwhite_: { templateName: "white" },
+    
+    _$mdblack100_: { templateName: "mdblack100" },
+    _$mdblack_: { templateName: "black" },
+    
+    _$mdorange10_: { templateName: "mdorange10" },
+    _$mdorange20_: { templateName: "mdorange20" },
+    _$mdorange30_: { templateName: "mdorange30" },
+    _$mdorange40_: { templateName: "mdorange40" },
+    _$mdorange50_: { templateName: "mdorange50" },
+    _$mdorange60_: { templateName: "mdorange60" },
+    _$mdorange70_: { templateName: "mdorange70" },
+    _$mdorange80_: { templateName: "mdorange80" },
+    _$mdorange90_: { templateName: "mdorange90" },
+    _$mdorange100_: { templateName: "mdorange100" },
+    
+    _$mdgold10_: { templateName: "mdgold10" },
+    _$mdgold20_: { templateName: "mdgold20" },
+    _$mdgold30_: { templateName: "mdgold30" },
+    _$mdgold40_: { templateName: "mdgold40" },
+    _$mdgold50_: { templateName: "mdgold50" },
+    _$mdgold60_: { templateName: "mdgold60" },
+    _$mdgold70_: { templateName: "mdgold70" },
+    _$mdgold80_: { templateName: "mdgold80" },
+    _$mdgold90_: { templateName: "mdgold90" },
+    _$mdgold100_: { templateName: "mdgold100" },
+    
+    _$mdolive10_: { templateName: "mdolive10" },
+    _$mdolive20_: { templateName: "mdolive20" },
+    _$mdolive30_: { templateName: "mdolive30" },
+    _$mdolive40_: { templateName: "mdolive40" },
+    _$mdolive50_: { templateName: "mdolive50" },
+    _$mdolive60_: { templateName: "mdolive60" },
+    _$mdolive70_: { templateName: "mdolive70" },
+    _$mdolive80_: { templateName: "mdolive80" },
+    _$mdolive90_: { templateName: "mdolive90" },
+    _$mdolive100_: { templateName: "mdolive100" },
+    
+    _$mdlime10_: { templateName: "mdlime10" },
+    _$mdlime20_: { templateName: "mdlime20" },
+    _$mdlime30_: { templateName: "mdlime30" },
+    _$mdlime40_: { templateName: "mdlime40" },
+    _$mdlime50_: { templateName: "mdlime50" },
+    _$mdlime60_: { templateName: "mdlime60" },
+    _$mdlime70_: { templateName: "mdlime70" },
+    _$mdlime80_: { templateName: "mdlime80" },
+    _$mdlime90_: { templateName: "mdlime90" },
+    _$mdlime100_: { templateName: "mdlime100" },
+    
+    _$mdmint10_: { templateName: "mdmint10" },
+    _$mdmint20_: { templateName: "mdmint20" },
+    _$mdmint30_: { templateName: "mdmint30" },
+    _$mdmint40_: { templateName: "mdmint40" },
+    _$mdmint50_: { templateName: "mdmint50" },
+    _$mdmint60_: { templateName: "mdmint60" },
+    _$mdmint70_: { templateName: "mdmint70" },
+    _$mdmint80_: { templateName: "mdmint80" },
+    _$mdmint90_: { templateName: "mdmint90" },
+    _$mdmint100_: { templateName: "mdmint100" },
+    
+    _$mdcyan10_: { templateName: "mdcyan10" },
+    _$mdcyan20_: { templateName: "mdcyan20" },
+    _$mdcyan30_: { templateName: "mdcyan30" },
+    _$mdcyan40_: { templateName: "mdcyan40" },
+    _$mdcyan50_: { templateName: "mdcyan50" },
+    _$mdcyan60_: { templateName: "mdcyan60" },
+    _$mdcyan70_: { templateName: "mdcyan70" },
+    _$mdcyan80_: { templateName: "mdcyan80" },
+    _$mdcyan90_: { templateName: "mdcyan90" },
+    _$mdcyan100_: { templateName: "mdcyan100" },
+    
+    _$mdcobalt10_: { templateName: "mdcobalt10" },
+    _$mdcobalt20_: { templateName: "mdcobalt20" },
+    _$mdcobalt30_: { templateName: "mdcobalt30" },
+    _$mdcobalt40_: { templateName: "mdcobalt40" },
+    _$mdcobalt50_: { templateName: "mdcobalt50" },
+    _$mdcobalt60_: { templateName: "mdcobalt60" },
+    _$mdcobalt70_: { templateName: "mdcobalt70" },
+    _$mdcobalt80_: { templateName: "mdcobalt80" },
+    _$mdcobalt90_: { templateName: "mdcobalt90" },
+    _$mdcobalt100_: { templateName: "mdcobalt100" },
+    
+    _$mdslate10_: { templateName: "mdslate10" },
+    _$mdslate20_: { templateName: "mdslate20" },
+    _$mdslate30_: { templateName: "mdslate30" },
+    _$mdslate40_: { templateName: "mdslate40" },
+    _$mdslate50_: { templateName: "mdslate50" },
+    _$mdslate60_: { templateName: "mdslate60" },
+    _$mdslate70_: { templateName: "mdslate70" },
+    _$mdslate80_: { templateName: "mdslate80" },
+    _$mdslate90_: { templateName: "mdslate90" },
+    _$mdslate100_: { templateName: "mdslate100" },
+    
+    _$mdviolet10_: { templateName: "mdviolet10" },
+    _$mdviolet20_: { templateName: "mdviolet20" },
+    _$mdviolet30_: { templateName: "mdviolet30" },
+    _$mdviolet40_: { templateName: "mdviolet40" },
+    _$mdviolet50_: { templateName: "mdviolet50" },
+    _$mdviolet60_: { templateName: "mdviolet60" },
+    _$mdviolet70_: { templateName: "mdviolet70" },
+    _$mdviolet80_: { templateName: "mdviolet80" },
+    _$mdviolet90_: { templateName: "mdviolet90" },
+    _$mdviolet100_: { templateName: "mdviolet100" },
+    
+    _$mdpurple10_: { templateName: "mdpurple10" },
+    _$mdpurple20_: { templateName: "mdpurple20" },
+    _$mdpurple30_: { templateName: "mdpurple30" },
+    _$mdpurple40_: { templateName: "mdpurple40" },
+    _$mdpurple50_: { templateName: "mdpurple50" },
+    _$mdpurple60_: { templateName: "mdpurple60" },
+    _$mdpurple70_: { templateName: "mdpurple70" },
+    _$mdpurple80_: { templateName: "mdpurple80" },
+    _$mdpurple90_: { templateName: "mdpurple90" },
+    _$mdpurple100_: { templateName: "mdpurple100" },
+    
+    _$mdpink10_: { templateName: "mdpink10" },
+    _$mdpink20_: { templateName: "mdpink20" },
+    _$mdpink30_: { templateName: "mdpink30" },
+    _$mdpink40_: { templateName: "mdpink40" },
+    _$mdpink50_: { templateName: "mdpink50" },
+    _$mdpink60_: { templateName: "mdpink60" },
+    _$mdpink70_: { templateName: "mdpink70" },
+    _$mdpink80_: { templateName: "mdpink80" },
+    _$mdpink90_: { templateName: "mdpink90" },
+    _$mdpink100_: { templateName: "mdpink100" },
+    
+    _$mdtheme10_: { templateName: "mdtheme10" },
+    _$mdtheme20_: { templateName: "mdtheme20" },
+    _$mdtheme30_: { templateName: "mdtheme30" },
+    _$mdtheme40_: { templateName: "mdtheme40" },
+    _$mdtheme50_: { templateName: "mdtheme50" },
+    _$mdtheme60_: { templateName: "mdtheme60" },
+    _$mdtheme70_: { templateName: "mdtheme70" },
+    _$mdtheme80_: { templateName: "mdtheme80" },
+    _$mdtheme90_: { templateName: "mdtheme90" },
+    _$mdtheme95_: { templateName: "mdtheme95" },
+    _$mdtheme05_: { templateName: "mdtheme05" }
+  };
+