@momentum-design/components 0.4.13 → 0.4.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (62) hide show
  1. package/dist/browser/index.js +86 -31
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/avatar/avatar.component.js +38 -32
  4. package/dist/components/avatar/avatar.constants.js +3 -9
  5. package/dist/components/avatar/avatar.styles.js +3 -5
  6. package/dist/components/avatar/avatar.types.js +1 -2
  7. package/dist/components/avatar/index.js +4 -7
  8. package/dist/components/badge/badge.component.d.ts +74 -29
  9. package/dist/components/badge/badge.component.js +182 -88
  10. package/dist/components/badge/badge.constants.d.ts +28 -4
  11. package/dist/components/badge/badge.constants.js +30 -12
  12. package/dist/components/badge/badge.styles.js +59 -19
  13. package/dist/components/badge/index.d.ts +2 -0
  14. package/dist/components/badge/index.js +6 -7
  15. package/dist/components/icon/icon.component.js +46 -40
  16. package/dist/components/icon/icon.constants.js +3 -8
  17. package/dist/components/icon/icon.styles.js +5 -7
  18. package/dist/components/icon/icon.utils.js +1 -4
  19. package/dist/components/icon/index.js +4 -7
  20. package/dist/components/iconprovider/iconprovider.component.js +39 -33
  21. package/dist/components/iconprovider/iconprovider.constants.js +3 -10
  22. package/dist/components/iconprovider/iconprovider.context.js +4 -6
  23. package/dist/components/iconprovider/index.js +4 -7
  24. package/dist/components/text/fonts.styles.js +2 -5
  25. package/dist/components/text/index.js +4 -7
  26. package/dist/components/text/text.component.js +35 -29
  27. package/dist/components/text/text.constants.js +3 -9
  28. package/dist/components/text/text.styles.js +5 -7
  29. package/dist/components/text/text.types.js +1 -2
  30. package/dist/components/themeprovider/index.js +4 -7
  31. package/dist/components/themeprovider/themeprovider.component.js +27 -21
  32. package/dist/components/themeprovider/themeprovider.constants.js +3 -8
  33. package/dist/components/themeprovider/themeprovider.context.js +4 -6
  34. package/dist/components/themeprovider/themeprovider.styles.js +3 -5
  35. package/dist/custom-elements.json +230 -51
  36. package/dist/index.js +7 -16
  37. package/dist/models/component/component.component.js +5 -8
  38. package/dist/models/component/component.styles.js +2 -4
  39. package/dist/models/component/component.types.js +1 -2
  40. package/dist/models/component/index.js +2 -5
  41. package/dist/models/index.js +3 -8
  42. package/dist/models/provider/index.js +2 -5
  43. package/dist/models/provider/provider.component.js +9 -12
  44. package/dist/models/provider/provider.styles.js +3 -5
  45. package/dist/react/avatar/index.js +8 -11
  46. package/dist/react/badge/index.d.ts +6 -3
  47. package/dist/react/badge/index.js +14 -14
  48. package/dist/react/icon/index.js +8 -11
  49. package/dist/react/iconprovider/index.js +8 -11
  50. package/dist/react/index.js +6 -18
  51. package/dist/react/text/index.js +8 -11
  52. package/dist/react/themeprovider/index.js +8 -11
  53. package/dist/utils/mixins/DisabledMixin.js +14 -10
  54. package/dist/utils/mixins/TabIndexMixin.js +14 -10
  55. package/dist/utils/provider/index.js +3 -5
  56. package/dist/utils/styles/index.js +4 -8
  57. package/dist/utils/tag-name/constants.js +1 -3
  58. package/dist/utils/tag-name/index.js +3 -6
  59. package/dist/utils/types.js +1 -2
  60. package/package.json +1 -1
  61. package/dist/components/badge/badge.types.d.ts +0 -1
  62. package/dist/components/badge/badge.types.js +0 -2
@@ -1,10 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const React = tslib_1.__importStar(require("react"));
5
- const react_1 = require("@lit/react");
6
- const iconprovider_1 = tslib_1.__importDefault(require("../../components/iconprovider"));
7
- const iconprovider_constants_1 = require("../../components/iconprovider/iconprovider.constants");
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/iconprovider';
4
+ import { TAG_NAME } from '../../components/iconprovider/iconprovider.constants';
8
5
  /**
9
6
  * IconProvider component, which allows to be consumed from sub components
10
7
  * (see `providerUtils.consume` for how to consume)
@@ -17,11 +14,11 @@ const iconprovider_constants_1 = require("../../components/iconprovider/iconprov
17
14
  *
18
15
  * @slot - children
19
16
  */
20
- const reactWrapper = (0, react_1.createComponent)({
21
- tagName: iconprovider_constants_1.TAG_NAME,
22
- elementClass: iconprovider_1.default,
17
+ const reactWrapper = createComponent({
18
+ tagName: TAG_NAME,
19
+ elementClass: Component,
23
20
  react: React,
24
21
  events: {},
25
22
  displayName: 'IconProvider',
26
23
  });
27
- exports.default = reactWrapper;
24
+ export default reactWrapper;
@@ -1,18 +1,6 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ThemeProvider = exports.Text = exports.IconProvider = exports.Icon = exports.Badge = exports.Avatar = void 0;
7
- var avatar_1 = require("./avatar");
8
- Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return __importDefault(avatar_1).default; } });
9
- var badge_1 = require("./badge");
10
- Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return __importDefault(badge_1).default; } });
11
- var icon_1 = require("./icon");
12
- Object.defineProperty(exports, "Icon", { enumerable: true, get: function () { return __importDefault(icon_1).default; } });
13
- var iconprovider_1 = require("./iconprovider");
14
- Object.defineProperty(exports, "IconProvider", { enumerable: true, get: function () { return __importDefault(iconprovider_1).default; } });
15
- var text_1 = require("./text");
16
- Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(text_1).default; } });
17
- var themeprovider_1 = require("./themeprovider");
18
- Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return __importDefault(themeprovider_1).default; } });
1
+ export { default as Avatar } from './avatar';
2
+ export { default as Badge } from './badge';
3
+ export { default as Icon } from './icon';
4
+ export { default as IconProvider } from './iconprovider';
5
+ export { default as Text } from './text';
6
+ export { default as ThemeProvider } from './themeprovider';
@@ -1,10 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const React = tslib_1.__importStar(require("react"));
5
- const react_1 = require("@lit/react");
6
- const text_1 = tslib_1.__importDefault(require("../../components/text"));
7
- const text_constants_1 = require("../../components/text/text.constants");
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/text';
4
+ import { TAG_NAME } from '../../components/text/text.constants';
8
5
  /**
9
6
  * Text component for creating styled text elements.
10
7
  * 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");
23
20
  *
24
21
  * @csspart text - The text element
25
22
  */
26
- const reactWrapper = (0, react_1.createComponent)({
27
- tagName: text_constants_1.TAG_NAME,
28
- elementClass: text_1.default,
23
+ const reactWrapper = createComponent({
24
+ tagName: TAG_NAME,
25
+ elementClass: Component,
29
26
  react: React,
30
27
  events: {},
31
28
  displayName: 'Text',
32
29
  });
33
- exports.default = reactWrapper;
30
+ export default reactWrapper;
@@ -1,10 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
- const React = tslib_1.__importStar(require("react"));
5
- const react_1 = require("@lit/react");
6
- const themeprovider_1 = tslib_1.__importDefault(require("../../components/themeprovider"));
7
- const themeprovider_constants_1 = require("../../components/themeprovider/themeprovider.constants");
1
+ import * as React from 'react';
2
+ import { createComponent } from '@lit/react';
3
+ import Component from '../../components/themeprovider';
4
+ import { TAG_NAME } from '../../components/themeprovider/themeprovider.constants';
8
5
  /**
9
6
  * ThemeProvider component, which sets the passed in themeclass as class.
10
7
  * 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
29
26
  * @cssproperty --mdc-themeprovider-letter-spacing-adjustment - Option to override the default letter-spacing,
30
27
  * default: `-0.25px` (this is to match the old CiscoSans)
31
28
  */
32
- const reactWrapper = (0, react_1.createComponent)({
33
- tagName: themeprovider_constants_1.TAG_NAME,
34
- elementClass: themeprovider_1.default,
29
+ const reactWrapper = createComponent({
30
+ tagName: TAG_NAME,
31
+ elementClass: Component,
35
32
  react: React,
36
33
  events: {},
37
34
  displayName: 'ThemeProvider',
38
35
  });
39
- exports.default = reactWrapper;
36
+ export default reactWrapper;
@@ -1,20 +1,24 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.DisabledMixin = void 0;
4
- const tslib_1 = require("tslib");
5
- const decorators_js_1 = require("lit/decorators.js");
6
- const DisabledMixin = (superClass) => {
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { property } from 'lit/decorators.js';
11
+ export const DisabledMixin = (superClass) => {
7
12
  class InnerMixinClass extends superClass {
8
13
  constructor() {
9
14
  super(...arguments);
10
15
  this.disabled = false;
11
16
  }
12
17
  }
13
- tslib_1.__decorate([
14
- (0, decorators_js_1.property)({ reflect: true, type: Boolean }),
15
- tslib_1.__metadata("design:type", Object)
18
+ __decorate([
19
+ property({ reflect: true, type: Boolean }),
20
+ __metadata("design:type", Object)
16
21
  ], InnerMixinClass.prototype, "disabled", void 0);
17
22
  // Cast return type to your mixin's interface intersected with the superClass type
18
23
  return InnerMixinClass;
19
24
  };
20
- exports.DisabledMixin = DisabledMixin;
@@ -1,20 +1,24 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TabIndexMixin = void 0;
4
- const tslib_1 = require("tslib");
5
- const decorators_js_1 = require("lit/decorators.js");
6
- const TabIndexMixin = (superClass) => {
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ 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;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ var __metadata = (this && this.__metadata) || function (k, v) {
8
+ if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
9
+ };
10
+ import { property } from 'lit/decorators.js';
11
+ export const TabIndexMixin = (superClass) => {
7
12
  class InnerMixinClass extends superClass {
8
13
  constructor() {
9
14
  super(...arguments);
10
15
  this.tabIndex = 0;
11
16
  }
12
17
  }
13
- tslib_1.__decorate([
14
- (0, decorators_js_1.property)({ reflect: true, type: Number, attribute: 'tabindex' }),
15
- tslib_1.__metadata("design:type", Object)
18
+ __decorate([
19
+ property({ reflect: true, type: Number, attribute: 'tabindex' }),
20
+ __metadata("design:type", Object)
16
21
  ], InnerMixinClass.prototype, "tabIndex", void 0);
17
22
  // Cast return type to your mixin's interface intersected with the superClass type
18
23
  return InnerMixinClass;
19
24
  };
20
- exports.TabIndexMixin = TabIndexMixin;
@@ -1,9 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const context_1 = require("@lit/context");
1
+ import { ContextConsumer } from '@lit/context';
4
2
  const consume = (options) => {
5
3
  const { host, context, subscribe } = options;
6
- return new context_1.ContextConsumer(host, {
4
+ return new ContextConsumer(host, {
7
5
  context,
8
6
  subscribe: subscribe !== null && subscribe !== void 0 ? subscribe : true,
9
7
  });
@@ -11,4 +9,4 @@ const consume = (options) => {
11
9
  const providerUtils = {
12
10
  consume,
13
11
  };
14
- exports.default = providerUtils;
12
+ export default providerUtils;
@@ -1,8 +1,5 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.hostFocusRingStyles = exports.hostFitContentStyles = void 0;
4
- const lit_1 = require("lit");
5
- const hostFitContentStyles = (0, lit_1.css) `
1
+ import { css } from 'lit';
2
+ const hostFitContentStyles = css `
6
3
  :host {
7
4
  align-items: center;
8
5
  display: flex;
@@ -11,8 +8,7 @@ const hostFitContentStyles = (0, lit_1.css) `
11
8
  width: fit-content;
12
9
  }
13
10
  `;
14
- exports.hostFitContentStyles = hostFitContentStyles;
15
- const hostFocusRingStyles = (0, lit_1.css) `
11
+ const hostFocusRingStyles = css `
16
12
  :host {
17
13
  --mdc-focus-ring-inner-color: var(--mds-color-theme-focus-0);
18
14
  --mdc-focus-ring-middle-color: var(--mds-color-theme-focus-1);
@@ -34,4 +30,4 @@ const hostFocusRingStyles = (0, lit_1.css) `
34
30
  0 0 0 var(--mdc-focus-ring-outer-width) var(--mdc-focus-ring-outer-color);
35
31
  }
36
32
  `;
37
- exports.hostFocusRingStyles = hostFocusRingStyles;
33
+ export { hostFitContentStyles, hostFocusRingStyles };
@@ -1,5 +1,3 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
1
  const NAMESPACE = {
4
2
  PREFIX: 'mdc',
5
3
  SEPARATOR: '-',
@@ -7,4 +5,4 @@ const NAMESPACE = {
7
5
  const CONSTANTS = {
8
6
  NAMESPACE,
9
7
  };
10
- exports.default = CONSTANTS;
8
+ export default CONSTANTS;
@@ -1,10 +1,7 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const tslib_1 = require("tslib");
4
1
  /* eslint-disable implicit-arrow-linebreak */
5
2
  /* eslint-disable max-len */
6
- const constants_1 = tslib_1.__importDefault(require("./constants"));
7
- const constructTagName = (componentName) => [constants_1.default.NAMESPACE.PREFIX, componentName].join(constants_1.default.NAMESPACE.SEPARATOR);
8
- exports.default = {
3
+ import CONSTANTS from './constants';
4
+ const constructTagName = (componentName) => [CONSTANTS.NAMESPACE.PREFIX, componentName].join(CONSTANTS.NAMESPACE.SEPARATOR);
5
+ export default {
9
6
  constructTagName,
10
7
  };
@@ -1,2 +1 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
1
+ export {};
package/package.json CHANGED
@@ -37,5 +37,5 @@
37
37
  "@momentum-design/icons": "*",
38
38
  "@momentum-design/tokens": "*"
39
39
  },
40
- "version": "0.4.13"
40
+ "version": "0.4.15"
41
41
  }
@@ -1 +0,0 @@
1
- export type BadgeType = 'regular' | 'text' | 'icon' | 'warning';
@@ -1,2 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });