@momentum-design/components 0.120.17 → 0.120.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/browser/index.js +212 -212
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/controltypeprovider/controltypeprovider.component.d.ts +34 -0
  4. package/dist/components/controltypeprovider/controltypeprovider.component.js +66 -0
  5. package/dist/components/controltypeprovider/controltypeprovider.constants.d.ts +6 -0
  6. package/dist/components/controltypeprovider/controltypeprovider.constants.js +7 -0
  7. package/dist/components/controltypeprovider/controltypeprovider.context.d.ts +5 -0
  8. package/dist/components/controltypeprovider/controltypeprovider.context.js +4 -0
  9. package/dist/components/controltypeprovider/controltypeprovider.types.d.ts +2 -0
  10. package/dist/components/controltypeprovider/controltypeprovider.types.js +1 -0
  11. package/dist/components/controltypeprovider/index.d.ts +7 -0
  12. package/dist/components/controltypeprovider/index.js +4 -0
  13. package/dist/components/formfieldwrapper/formfieldwrapper.subcomponent.js +1 -1
  14. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.d.ts +1 -1
  15. package/dist/components/menuitemcheckbox/menuitemcheckbox.component.js +3 -3
  16. package/dist/custom-elements.json +3375 -3285
  17. package/dist/index.d.ts +2 -1
  18. package/dist/index.js +2 -1
  19. package/dist/react/controltypeprovider/index.d.ts +17 -0
  20. package/dist/react/controltypeprovider/index.js +26 -0
  21. package/dist/react/index.d.ts +5 -4
  22. package/dist/react/index.js +5 -4
  23. package/dist/utils/mixins/ControlTypeMixin.d.ts +7 -0
  24. package/dist/utils/mixins/ControlTypeMixin.js +40 -0
  25. package/package.json +1 -1
  26. package/dist/utils/mixins/ControlledMixin.d.ts +0 -6
  27. package/dist/utils/mixins/ControlledMixin.js +0 -20
@@ -0,0 +1,34 @@
1
+ import { Provider } from '../../models';
2
+ import type { ControlType } from './controltypeprovider.types';
3
+ /**
4
+ * ContolTypeProvider component, which allows to be consumed from sub components
5
+ * (see `providerUtils.consume` for how to consume)
6
+ *
7
+ * attribute 'control-type' sets the default control type for all consumers
8
+ - 'controlled' the consumer component will not handle any interaction itself, e.g. toggling a checkbox.
9
+ - 'uncontrolled' the consumer component will handle interactions
10
+ *
11
+ * ControlTypeMixin allows components to consume this context
12
+ * note that this is intended to be set once, ControlTypeMixin will not update on changes to control-type
13
+ *
14
+ * @tagname mdc-controltypeprovider
15
+ *
16
+ */
17
+ declare class ControlTypeProvider extends Provider<ControlType> {
18
+ constructor();
19
+ /**
20
+ * Context object of the ControlTypeProvider, to be consumed by child components
21
+ */
22
+ static get Context(): {
23
+ __context__: ControlType;
24
+ };
25
+ private innerControlType;
26
+ /**
27
+ * Whether the control type is 'controlled' or 'uncontrolled'
28
+ * @default 'uncontrolled'
29
+ */
30
+ set controlType(value: ControlType);
31
+ get controlType(): ControlType;
32
+ protected updateContext(): void;
33
+ }
34
+ export default ControlTypeProvider;
@@ -0,0 +1,66 @@
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
+ import { Provider } from '../../models';
12
+ import ControlTypeProviderContext from './controltypeprovider.context';
13
+ import { DEFAULTS, VALID_VALUES } from './controltypeprovider.constants';
14
+ /**
15
+ * ContolTypeProvider component, which allows to be consumed from sub components
16
+ * (see `providerUtils.consume` for how to consume)
17
+ *
18
+ * attribute 'control-type' sets the default control type for all consumers
19
+ - 'controlled' the consumer component will not handle any interaction itself, e.g. toggling a checkbox.
20
+ - 'uncontrolled' the consumer component will handle interactions
21
+ *
22
+ * ControlTypeMixin allows components to consume this context
23
+ * note that this is intended to be set once, ControlTypeMixin will not update on changes to control-type
24
+ *
25
+ * @tagname mdc-controltypeprovider
26
+ *
27
+ */
28
+ class ControlTypeProvider extends Provider {
29
+ constructor() {
30
+ // initialise the context by running the Provider constructor:
31
+ super({
32
+ context: ControlTypeProviderContext,
33
+ });
34
+ this.innerControlType = DEFAULTS.CONTROL_TYPE;
35
+ }
36
+ /**
37
+ * Context object of the ControlTypeProvider, to be consumed by child components
38
+ */
39
+ static get Context() {
40
+ return ControlTypeProviderContext;
41
+ }
42
+ /**
43
+ * Whether the control type is 'controlled' or 'uncontrolled'
44
+ * @default 'uncontrolled'
45
+ */
46
+ set controlType(value) {
47
+ if (VALID_VALUES.includes(value)) {
48
+ this.innerControlType = value;
49
+ }
50
+ }
51
+ get controlType() {
52
+ return this.innerControlType;
53
+ }
54
+ updateContext() {
55
+ if (this.context.value !== this.controlType) {
56
+ this.context.value = this.controlType;
57
+ this.context.updateObservers();
58
+ }
59
+ }
60
+ }
61
+ __decorate([
62
+ property({ type: String, attribute: 'control-type', reflect: true }),
63
+ __metadata("design:type", String),
64
+ __metadata("design:paramtypes", [String])
65
+ ], ControlTypeProvider.prototype, "controlType", null);
66
+ export default ControlTypeProvider;
@@ -0,0 +1,6 @@
1
+ declare const TAG_NAME: "mdc-controltypeprovider";
2
+ declare const DEFAULTS: {
3
+ readonly CONTROL_TYPE: "uncontrolled";
4
+ };
5
+ declare const VALID_VALUES: readonly ["controlled", "uncontrolled"];
6
+ export { TAG_NAME, DEFAULTS, VALID_VALUES };
@@ -0,0 +1,7 @@
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('controltypeprovider');
3
+ const DEFAULTS = {
4
+ CONTROL_TYPE: 'uncontrolled',
5
+ };
6
+ const VALID_VALUES = ['controlled', 'uncontrolled'];
7
+ export { TAG_NAME, DEFAULTS, VALID_VALUES };
@@ -0,0 +1,5 @@
1
+ import type { ControlType } from './controltypeprovider.types';
2
+ declare const ControlTypeProviderContext: {
3
+ __context__: ControlType;
4
+ };
5
+ export default ControlTypeProviderContext;
@@ -0,0 +1,4 @@
1
+ import { createContext } from '@lit/context';
2
+ import { TAG_NAME } from './controltypeprovider.constants';
3
+ const ControlTypeProviderContext = createContext(TAG_NAME);
4
+ export default ControlTypeProviderContext;
@@ -0,0 +1,2 @@
1
+ type ControlType = 'controlled' | 'uncontrolled';
2
+ export type { ControlType };
@@ -0,0 +1,7 @@
1
+ import ControlTypeProvider from './controltypeprovider.component';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ ['mdc-controltypeprovider']: ControlTypeProvider;
5
+ }
6
+ }
7
+ export default ControlTypeProvider;
@@ -0,0 +1,4 @@
1
+ import ControlTypeProvider from './controltypeprovider.component';
2
+ import { TAG_NAME } from './controltypeprovider.constants';
3
+ ControlTypeProvider.register(TAG_NAME);
4
+ export default ControlTypeProvider;
@@ -2,7 +2,7 @@ import { html } from 'lit';
2
2
  import FormfieldWrapper from './formfieldwrapper.component';
3
3
  // Subcomponent to be rendered in E2E Tests, to showcase that the
4
4
  // theme can be consumed as a subcomponent
5
- // (this file is imported in the esbuild config for e2e tests ('/config/esbuild/esbuild-e2e.config.js'))
5
+ // (this file is imported in the esbuild config for e2e tests ('/config/esbuild/esbuild-e2e.config.js') and the test index.html (/config/playwright/public/index.html))
6
6
  class SubComponentFormFieldWrapper extends FormfieldWrapper {
7
7
  render() {
8
8
  return html `
@@ -1,7 +1,7 @@
1
1
  import type { PropertyValues, CSSResult, TemplateResult } from 'lit';
2
2
  import MenuItem from '../menuitem/menuitem.component';
3
3
  import type { Indicator } from './menuitemcheckbox.types';
4
- declare const MenuItemCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlledMixin").ControlledMixinInterface> & typeof MenuItem;
4
+ declare const MenuItemCheckbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ControlTypeMixin").ControlTypeMixinInterface> & typeof MenuItem;
5
5
  /**
6
6
  * A menuitemcheckbox component is a checkable menuitem.
7
7
  * There should be no focusable descendants inside this menuitemcheckbox component.
@@ -14,7 +14,7 @@ import { ROLE } from '../../utils/roles';
14
14
  import MenuItem from '../menuitem/menuitem.component';
15
15
  import { TYPE } from '../text/text.constants';
16
16
  import { TOGGLE_SIZE } from '../toggle/toggle.constants';
17
- import { ControlledMixin } from '../../utils/mixins/ControlledMixin';
17
+ import { ControlTypeMixin } from '../../utils/mixins/ControlTypeMixin';
18
18
  import { DEFAULTS, INDICATOR } from './menuitemcheckbox.constants';
19
19
  import styles from './menuitemcheckbox.styles';
20
20
  /**
@@ -70,7 +70,7 @@ import styles from './menuitemcheckbox.styles';
70
70
  * @csspart trailing-arrow - Allows customization of trailing arrow icon.
71
71
  * @csspart trailing-text - Allows customization of the trailing text part.
72
72
  */
73
- class MenuItemCheckbox extends ControlledMixin(MenuItem) {
73
+ class MenuItemCheckbox extends ControlTypeMixin(MenuItem) {
74
74
  constructor() {
75
75
  super();
76
76
  /**
@@ -97,7 +97,7 @@ class MenuItemCheckbox extends ControlledMixin(MenuItem) {
97
97
  handleMouseClick() {
98
98
  if (this.disabled)
99
99
  return;
100
- if (!this.controlled) {
100
+ if (this.controlType !== 'controlled') {
101
101
  this.checked = !this.checked;
102
102
  }
103
103
  this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));