@momentum-design/components 0.4.14 → 0.4.15

package/dist/models/provider/provider.component.js

@@ -1,17 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const context_1 = require("@lit/context");
-const lit_1 = require("lit");
-const component_1 = tslib_1.__importDefault(require("../component"));
-const provider_styles_1 = tslib_1.__importDefault(require("./provider.styles"));
+import { ContextProvider } from '@lit/context';
+import { html } from 'lit';
+import Component from '../component';
+import styles from './provider.styles';
 /**
  * Provider Component class to ultimately be inherited by all Provider-type Web
  * Components within this package.
  *
  * @public
  */
-class Provider extends component_1.default {
+class Provider extends Component {
     /**
      * Constructor of the Provider.
      *
@@ -29,7 +26,7 @@ class Provider extends component_1.default {
      */
     constructor({ context, initialValue }) {
         super();
-        this.context = new context_1.ContextProvider(this, {
+        this.context = new ContextProvider(this, {
             context,
             initialValue,
         });
@@ -46,11 +43,11 @@ class Provider extends component_1.default {
      */
     render() {
         this.updateContext();
-        return (0, lit_1.html) `<slot></slot>`;
+        return html `<slot></slot>`;
     }
 }
 /**
  * Styles associated with this Provider Component.
  */
-Provider.styles = [...component_1.default.styles, provider_styles_1.default];
-exports.default = Provider;
+Provider.styles = [...Component.styles, styles];
+export default Provider;

package/dist/models/provider/provider.styles.js

@@ -1,9 +1,7 @@
-"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 {
     display: contents;
   }
 `;
-exports.default = styles;
+export default styles;

package/dist/react/avatar/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const avatar_1 = tslib_1.__importDefault(require("../../components/avatar"));
-const avatar_constants_1 = require("../../components/avatar/avatar.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/avatar';
+import { TAG_NAME } from '../../components/avatar/avatar.constants';
 /**
  * @slot - This is a default/unnamed slot
  *
@@ -12,11 +9,11 @@ const avatar_constants_1 = require("../../components/avatar/avatar.constants");
  *
  * @tagname mdc-avatar
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: avatar_constants_1.TAG_NAME,
-    elementClass: avatar_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Avatar',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/badge/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const badge_1 = tslib_1.__importDefault(require("../../components/badge"));
-const badge_constants_1 = require("../../components/badge/badge.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/badge';
+import { TAG_NAME } from '../../components/badge/badge.constants';
 /**
  * A badge is a small, visually distinct element that provides additional information
  * or highlights the status of an item.
@@ -15,11 +12,11 @@ const badge_constants_1 = require("../../components/badge/badge.constants");
  *
  * @tagname mdc-badge
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: badge_constants_1.TAG_NAME,
-    elementClass: badge_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Badge',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/icon/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const icon_1 = tslib_1.__importDefault(require("../../components/icon"));
-const icon_constants_1 = require("../../components/icon/icon.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/icon';
+import { TAG_NAME } from '../../components/icon/icon.constants';
 /**
  * Icon component that dynamically displays SVG icons based on a valid name.
  *
@@ -42,11 +39,11 @@ const icon_constants_1 = require("../../components/icon/icon.constants");
  *
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: icon_constants_1.TAG_NAME,
-    elementClass: icon_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Icon',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/iconprovider/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const iconprovider_1 = tslib_1.__importDefault(require("../../components/iconprovider"));
-const iconprovider_constants_1 = require("../../components/iconprovider/iconprovider.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/iconprovider';
+import { TAG_NAME } from '../../components/iconprovider/iconprovider.constants';
 /**
  * IconProvider component, which allows to be consumed from sub components
  * (see `providerUtils.consume` for how to consume)
@@ -17,11 +14,11 @@ const iconprovider_constants_1 = require("../../components/iconprovider/iconprov
  *
  * @slot - children
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: iconprovider_constants_1.TAG_NAME,
-    elementClass: iconprovider_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'IconProvider',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/index.js

@@ -1,18 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Icon = exports.Badge = exports.Avatar = void 0;
-var avatar_1 = require("./avatar");
-Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
-var badge_1 = require("./badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
-var icon_1 = require("./icon");
-Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
-var iconprovider_1 = require("./iconprovider");
-Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });
-var text_1 = require("./text");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
-var themeprovider_1 = require("./themeprovider");
-Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return __importDefault(themeprovider_1).default; } });
+export { default as Avatar } from './avatar';
+export { default as Badge } from './badge';
+export { default as Icon } from './icon';
+export { default as IconProvider } from './iconprovider';
+export { default as Text } from './text';
+export { default as ThemeProvider } from './themeprovider';

package/dist/react/text/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const text_1 = tslib_1.__importDefault(require("../../components/text"));
-const text_constants_1 = require("../../components/text/text.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/text';
+import { TAG_NAME } from '../../components/text/text.constants';
 /**
  * Text component for creating styled text elements.
  * It has to be mounted within the ThemeProvider to access color and font tokens.
@@ -23,11 +20,11 @@ const text_constants_1 = require("../../components/text/text.constants");
  *
  * @csspart text - The text element
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: text_constants_1.TAG_NAME,
-    elementClass: text_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'Text',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/react/themeprovider/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("@lit/react");
-const themeprovider_1 = tslib_1.__importDefault(require("../../components/themeprovider"));
-const themeprovider_constants_1 = require("../../components/themeprovider/themeprovider.constants");
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/themeprovider';
+import { TAG_NAME } from '../../components/themeprovider/themeprovider.constants';
 /**
  * ThemeProvider component, which sets the passed in themeclass as class.
  * If the themeclass switches, the existing themeclass will be removed as a class
@@ -29,11 +26,11 @@ const themeprovider_constants_1 = require("../../components/themeprovider/themep
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
  * default: `-0.25px` (this is to match the old CiscoSans)
  */
-const reactWrapper = (0, react_1.createComponent)({
-    tagName: themeprovider_constants_1.TAG_NAME,
-    elementClass: themeprovider_1.default,
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
     react: React,
     events: {},
     displayName: 'ThemeProvider',
 });
-exports.default = reactWrapper;
+export default reactWrapper;

package/dist/utils/mixins/DisabledMixin.js

@@ -1,20 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DisabledMixin = void 0;
-const tslib_1 = require("tslib");
-const decorators_js_1 = require("lit/decorators.js");
-const DisabledMixin = (superClass) => {
+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 } from 'lit/decorators.js';
+export const DisabledMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);
             this.disabled = false;
         }
     }
-    tslib_1.__decorate([
-        (0, decorators_js_1.property)({ reflect: true, type: Boolean }),
-        tslib_1.__metadata("design:type", Object)
+    __decorate([
+        property({ reflect: true, type: Boolean }),
+        __metadata("design:type", Object)
     ], InnerMixinClass.prototype, "disabled", void 0);
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;
 };
-exports.DisabledMixin = DisabledMixin;

package/dist/utils/mixins/TabIndexMixin.js

@@ -1,20 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TabIndexMixin = void 0;
-const tslib_1 = require("tslib");
-const decorators_js_1 = require("lit/decorators.js");
-const TabIndexMixin = (superClass) => {
+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 } from 'lit/decorators.js';
+export const TabIndexMixin = (superClass) => {
     class InnerMixinClass extends superClass {
         constructor() {
             super(...arguments);
             this.tabIndex = 0;
         }
     }
-    tslib_1.__decorate([
-        (0, decorators_js_1.property)({ reflect: true, type: Number, attribute: 'tabindex' }),
-        tslib_1.__metadata("design:type", Object)
+    __decorate([
+        property({ reflect: true, type: Number, attribute: 'tabindex' }),
+        __metadata("design:type", Object)
     ], InnerMixinClass.prototype, "tabIndex", void 0);
     // Cast return type to your mixin's interface intersected with the superClass type
     return InnerMixinClass;
 };
-exports.TabIndexMixin = TabIndexMixin;

package/dist/utils/provider/index.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const context_1 = require("@lit/context");
+import { ContextConsumer } from '@lit/context';
 const consume = (options) => {
     const { host, context, subscribe } = options;
-    return new context_1.ContextConsumer(host, {
+    return new ContextConsumer(host, {
         context,
         subscribe: subscribe !== null && subscribe !== void 0 ? subscribe : true,
     });
@@ -11,4 +9,4 @@ const consume = (options) => {
 const providerUtils = {
     consume,
 };
-exports.default = providerUtils;
+export default providerUtils;

package/dist/utils/styles/index.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hostFocusRingStyles = exports.hostFitContentStyles = void 0;
-const lit_1 = require("lit");
-const hostFitContentStyles = (0, lit_1.css) `
+import { css } from 'lit';
+const hostFitContentStyles = css `
   :host {
     align-items: center;
     display: flex;
@@ -11,8 +8,7 @@ const hostFitContentStyles = (0, lit_1.css) `
     width: fit-content;
   }
 `;
-exports.hostFitContentStyles = hostFitContentStyles;
-const hostFocusRingStyles = (0, lit_1.css) `
+const hostFocusRingStyles = css `
   :host {
     --mdc-focus-ring-inner-color: var(--mds-color-theme-focus-0);
     --mdc-focus-ring-middle-color: var(--mds-color-theme-focus-1);
@@ -34,4 +30,4 @@ const hostFocusRingStyles = (0, lit_1.css) `
         0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color);
   }
 `;
-exports.hostFocusRingStyles = hostFocusRingStyles;
+export { hostFitContentStyles, hostFocusRingStyles };

package/dist/utils/tag-name/constants.js

@@ -1,5 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
 const NAMESPACE = {
     PREFIX: 'mdc',
     SEPARATOR: '-',
@@ -7,4 +5,4 @@ const NAMESPACE = {
 const CONSTANTS = {
     NAMESPACE,
 };
-exports.default = CONSTANTS;
+export default CONSTANTS;

package/dist/utils/tag-name/index.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 /* eslint-disable implicit-arrow-linebreak */
 /* eslint-disable max-len */
-const constants_1 = tslib_1.__importDefault(require("./constants"));
-const constructTagName = (componentName) => [constants_1.default.NAMESPACE.PREFIX, componentName].join(constants_1.default.NAMESPACE.SEPARATOR);
-exports.default = {
+import CONSTANTS from './constants';
+const constructTagName = (componentName) => [CONSTANTS.NAMESPACE.PREFIX, componentName].join(CONSTANTS.NAMESPACE.SEPARATOR);
+export default {
     constructTagName,
 };

package/dist/utils/types.js

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

package/package.json

@@ -37,5 +37,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.4.14"
+  "version": "0.4.15"
 }