@momentum-design/components 0.4.13 → 0.4.15

package/dist/components/text/text.component.js

@@ -1,11 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const decorators_js_1 = require("lit/decorators.js");
-const text_styles_1 = tslib_1.__importDefault(require("./text.styles"));
-const models_1 = require("../../models");
-const text_constants_1 = require("./text.constants");
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import styles from './text.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './text.constants';
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -24,7 +30,7 @@ const text_constants_1 = require("./text.constants");
  *
  * @csspart text - The text element
  */
-class Text extends models_1.Component {
+class Text extends Component {
     constructor() {
         super(...arguments);
         /**
@@ -62,7 +68,7 @@ class Text extends models_1.Component {
          * - 'headline-small-light'
          * - 'headline-small-regular'
          */
-        this.type = text_constants_1.DEFAULTS.TYPE;
+        this.type = DEFAULTS.TYPE;
         /**
          * Specifies the HTML tag name for the text element. The default tag name is `p`.
          * This attribute is optional. When set, it changes the tag name of the text element.
@@ -83,33 +89,33 @@ class Text extends models_1.Component {
          * For instance, setting this attribute to `h2` will render the text element as an `h2` element.
          * Note that the styling is determined by the `type` attribute.
          */
-        this.tagname = text_constants_1.DEFAULTS.TEXT_ELEMENT_TAGNAME;
+        this.tagname = DEFAULTS.TEXT_ELEMENT_TAGNAME;
     }
     render() {
         // Lit does not support dynamically changing values for the tag name of a custom element.
         // Read more: https://lit.dev/docs/templates/expressions/#invalid-locations
         switch (this.tagname) {
-            case 'h1': return (0, lit_1.html) `<h1 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
-            case 'h2': return (0, lit_1.html) `<h2 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
-            case 'h3': return (0, lit_1.html) `<h3 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
-            case 'h4': return (0, lit_1.html) `<h4 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
-            case 'h5': return (0, lit_1.html) `<h5 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
-            case 'h6': return (0, lit_1.html) `<h6 part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
-            case 'div': return (0, lit_1.html) `<div part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
-            case 'span': return (0, lit_1.html) `<span part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
-            case 'small': return (0, lit_1.html) `<small part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
+            case 'h1': return html `<h1 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h1>`;
+            case 'h2': return html `<h2 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h2>`;
+            case 'h3': return html `<h3 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h3>`;
+            case 'h4': return html `<h4 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h4>`;
+            case 'h5': return html `<h5 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h5>`;
+            case 'h6': return html `<h6 part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></h6>`;
+            case 'div': return html `<div part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></div>`;
+            case 'span': return html `<span part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></span>`;
+            case 'small': return html `<small part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></small>`;
             case 'p':
-            default: return (0, lit_1.html) `<p part=${text_constants_1.DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
+            default: return html `<p part=${DEFAULTS.CSS_PART_TEXT}><slot></slot></p>`;
         }
     }
 }
-Text.styles = [...models_1.Component.styles, ...text_styles_1.default];
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ attribute: 'type', reflect: true, type: String }),
-    tslib_1.__metadata("design:type", String)
+Text.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ attribute: 'type', reflect: true, type: String }),
+    __metadata("design:type", String)
 ], Text.prototype, "type", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ attribute: 'tagname', reflect: true, type: String }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ attribute: 'tagname', reflect: true, type: String }),
+    __metadata("design:type", String)
 ], Text.prototype, "tagname", void 0);
-exports.default = Text;
+export default Text;

package/dist/components/text/text.constants.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
-const tslib_1 = require("tslib");
-const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
-const TAG_NAME = tag_name_1.default.constructTagName('text');
-exports.TAG_NAME = TAG_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('text');
 const VALUES = {
     TYPE: [
         'body-small-regular',
@@ -50,10 +45,9 @@ const VALUES = {
         'div',
     ],
 };
-exports.VALUES = VALUES;
 const DEFAULTS = {
     TYPE: 'body-midsize-regular',
     TEXT_ELEMENT_TAGNAME: 'p',
     CSS_PART_TEXT: 'text',
 };
-exports.DEFAULTS = DEFAULTS;
+export { TAG_NAME, DEFAULTS, VALUES };

package/dist/components/text/text.styles.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-const fonts_styles_1 = require("./fonts.styles");
+import { css } from 'lit';
+import { fontsStyles } from './fonts.styles';
 const styles = [
-    (0, lit_1.css) `
+    css `
     :host {
       --mdc-text-font-family: var(--mdc-themeprovider-font-family);
 
@@ -12,6 +10,6 @@ const styles = [
     }
   `,
     // type specific font styles:
-    fonts_styles_1.fontsStyles,
+    fontsStyles,
 ];
-exports.default = styles;
+export default styles;

package/dist/components/text/text.types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/components/themeprovider/index.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const themeprovider_component_1 = tslib_1.__importDefault(require("./themeprovider.component"));
-const themeprovider_constants_1 = require("./themeprovider.constants");
-themeprovider_component_1.default.register(themeprovider_constants_1.TAG_NAME);
-exports.default = themeprovider_component_1.default;
+import ThemeProvider from './themeprovider.component';
+import { TAG_NAME } from './themeprovider.constants';
+ThemeProvider.register(TAG_NAME);
+export default ThemeProvider;

package/dist/components/themeprovider/themeprovider.component.js

@@ -1,11 +1,17 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const decorators_js_1 = require("lit/decorators.js");
-const themeprovider_constants_1 = require("./themeprovider.constants");
-const models_1 = require("../../models");
-const themeprovider_context_1 = tslib_1.__importDefault(require("./themeprovider.context"));
-const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.styles"));
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { property, state } from 'lit/decorators.js';
+import { DEFAULTS } from './themeprovider.constants';
+import { Provider } from '../../models';
+import ThemeProviderContext from './themeprovider.context';
+import styles from './themeprovider.styles';
 /**
  * ThemeProvider component, which sets the passed in themeclass as class.
  * If the themeclass switches, the existing themeclass will be removed as a class
@@ -30,11 +36,11 @@ const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
  */
-class ThemeProvider extends models_1.Provider {
+class ThemeProvider extends Provider {
     constructor() {
         super({
-            context: themeprovider_context_1.default.context,
-            initialValue: new themeprovider_context_1.default(themeprovider_constants_1.DEFAULTS.THEMECLASS),
+            context: ThemeProviderContext.context,
+            initialValue: new ThemeProviderContext(DEFAULTS.THEMECLASS),
         });
         /**
          * Current theme class
@@ -45,13 +51,13 @@ class ThemeProvider extends models_1.Provider {
          *
          * Default: 'mds-theme-stable-darkWebex'
          */
-        this.themeclass = themeprovider_constants_1.DEFAULTS.THEMECLASS;
+        this.themeclass = DEFAULTS.THEMECLASS;
     }
     /**
      * Context object of the ThemeProvider, to be consumed by child components
      */
     static get Context() {
-        return themeprovider_context_1.default.context;
+        return ThemeProviderContext.context;
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -87,13 +93,13 @@ class ThemeProvider extends models_1.Provider {
         }
     }
 }
-ThemeProvider.styles = [...models_1.Provider.styles, ...themeprovider_styles_1.default];
-tslib_1.__decorate([
-    (0, decorators_js_1.state)(),
-    tslib_1.__metadata("design:type", String)
+ThemeProvider.styles = [...Provider.styles, ...styles];
+__decorate([
+    state(),
+    __metadata("design:type", String)
 ], ThemeProvider.prototype, "currentThemeClass", void 0);
-tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
-    tslib_1.__metadata("design:type", String)
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
 ], ThemeProvider.prototype, "themeclass", void 0);
-exports.default = ThemeProvider;
+export default ThemeProvider;

package/dist/components/themeprovider/themeprovider.constants.js

@@ -1,12 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TAG_NAME = exports.DEFAULTS = void 0;
-const tslib_1 = require("tslib");
 /* eslint-disable implicit-arrow-linebreak */
-const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
-const TAG_NAME = tag_name_1.default.constructTagName('themeprovider');
-exports.TAG_NAME = TAG_NAME;
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('themeprovider');
 const DEFAULTS = {
     THEMECLASS: 'mds-theme-stable-darkWebex',
 };
-exports.DEFAULTS = DEFAULTS;
+export { DEFAULTS, TAG_NAME };

package/dist/components/themeprovider/themeprovider.context.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const context_1 = require("@lit/context");
-const themeprovider_constants_1 = require("./themeprovider.constants");
+import { createContext } from '@lit/context';
+import { TAG_NAME } from './themeprovider.constants';
 class ThemeProviderContext {
     // constructor to allow setting the defaultThemeClass
     constructor(defaultThemeClass) {
@@ -9,5 +7,5 @@ class ThemeProviderContext {
     }
 }
 // create typed lit context as part of the ThemeProviderContext
-ThemeProviderContext.context = (0, context_1.createContext)(themeprovider_constants_1.TAG_NAME);
-exports.default = ThemeProviderContext;
+ThemeProviderContext.context = createContext(TAG_NAME);
+export default ThemeProviderContext;

package/dist/components/themeprovider/themeprovider.styles.js

@@ -1,7 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lit_1 = require("lit");
-const styles = (0, lit_1.css) `
+import { css } from 'lit';
+const styles = css `
   :host {
     --mdc-themeprovider-color-default: var(--mds-color-theme-text-primary-normal);
     --mdc-themeprovider-font-family: var(--mds-font-family-primary);
@@ -15,4 +13,4 @@ const styles = (0, lit_1.css) `
     letter-spacing: var(--mdc-themeprovider-letter-spacing-adjustment);
   }
 `;
-exports.default = [styles];
+export default [styles];