@momentum-design/components 0.118.0 → 0.118.2

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.
@@ -55,6 +55,8 @@ declare class List extends List_base {
55
55
  */
56
56
  private handleDestroyEvent;
57
57
  /** @internal */
58
+ private handleModifiedEvent;
59
+ /** @internal */
58
60
  private isValidItem;
59
61
  render(): import("lit-html").TemplateResult<1>;
60
62
  static styles: Array<CSSResult>;
@@ -83,7 +83,22 @@ class List extends ListNavigationMixin(CaptureDestroyEventForChildElement(Compon
83
83
  }
84
84
  this.resetTabIndexes(newIndex);
85
85
  };
86
+ /** @internal */
87
+ this.handleModifiedEvent = (event) => {
88
+ const item = event.target;
89
+ switch (event.detail.change) {
90
+ case 'enabled':
91
+ this.itemsStore.add(item);
92
+ break;
93
+ case 'disabled':
94
+ this.itemsStore.delete(item);
95
+ break;
96
+ default:
97
+ break;
98
+ }
99
+ };
86
100
  this.addEventListener(LIFE_CYCLE_EVENTS.CREATED, this.handleCreatedEvent);
101
+ this.addEventListener(LIFE_CYCLE_EVENTS.MODIFIED, this.handleModifiedEvent);
87
102
  this.addEventListener(LIFE_CYCLE_EVENTS.DESTROYED, this.handleDestroyEvent);
88
103
  // This must be initialized after the destroyed event listener
89
104
  // to keep the element in the itemStore in order to move the focus correctly
@@ -147,12 +147,10 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
147
147
  [...this.leadingControlsSlot, ...this.trailingControlsSlot].forEach(element => {
148
148
  if (disabled) {
149
149
  element.setAttribute('disabled', '');
150
- this.dispatchModifiedEvent('disabled');
151
150
  ListItemEventManager.onDisableListItem(this);
152
151
  }
153
152
  else {
154
153
  element.removeAttribute('disabled');
155
- this.dispatchModifiedEvent('enabled');
156
154
  ListItemEventManager.onEnableListItem(this);
157
155
  }
158
156
  });
@@ -164,6 +162,7 @@ class ListItem extends DisabledMixin(TabIndexMixin(LifeCycleMixin(Component))) {
164
162
  if (changedProperties.has('disabled')) {
165
163
  this.tabIndex = this.disabled ? -1 : 0;
166
164
  this.disableSlottedChildren(this.disabled);
165
+ this.dispatchModifiedEvent(this.disabled ? 'disabled' : 'enabled');
167
166
  }
168
167
  if (changedProperties.has('softDisabled')) {
169
168
  this.disableSlottedChildren(this.softDisabled);
@@ -258,6 +258,14 @@ class Select extends ListNavigationMixin(CaptureDestroyEventForChildElement(Auto
258
258
  }
259
259
  break;
260
260
  }
261
+ case 'enabled': {
262
+ this.itemsStore.add(option);
263
+ break;
264
+ }
265
+ case 'disabled': {
266
+ this.itemsStore.delete(option);
267
+ break;
268
+ }
261
269
  default:
262
270
  break;
263
271
  }
@@ -32320,6 +32320,187 @@
32320
32320
  }
32321
32321
  ]
32322
32322
  },
32323
+ {
32324
+ "kind": "javascript-module",
32325
+ "path": "components/presence/presence.component.js",
32326
+ "declarations": [
32327
+ {
32328
+ "kind": "class",
32329
+ "description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
32330
+ "name": "Presence",
32331
+ "cssProperties": [
32332
+ {
32333
+ "description": "The background color of the presence type active.",
32334
+ "name": "--mdc-presence-active-background-color"
32335
+ },
32336
+ {
32337
+ "description": "The background color of the presence type away.",
32338
+ "name": "--mdc-presence-away-background-color"
32339
+ },
32340
+ {
32341
+ "description": "The background color of the presence type away-calling.",
32342
+ "name": "--mdc-presence-away-calling-background-color"
32343
+ },
32344
+ {
32345
+ "description": "The background color of the presence type busy.",
32346
+ "name": "--mdc-presence-busy-background-color"
32347
+ },
32348
+ {
32349
+ "description": "The background color of the presence type dnd.",
32350
+ "name": "--mdc-presence-dnd-background-color"
32351
+ },
32352
+ {
32353
+ "description": "The background color of the presence type meeting.",
32354
+ "name": "--mdc-presence-meeting-background-color"
32355
+ },
32356
+ {
32357
+ "description": "The background color of the presence type on-call.",
32358
+ "name": "--mdc-presence-on-call-background-color"
32359
+ },
32360
+ {
32361
+ "description": "The background color of the presence type on-device.",
32362
+ "name": "--mdc-presence-on-device-background-color"
32363
+ },
32364
+ {
32365
+ "description": "The background color of the presence type on-mobile.",
32366
+ "name": "--mdc-presence-on-mobile-background-color"
32367
+ },
32368
+ {
32369
+ "description": "The background color of the presence type pause.",
32370
+ "name": "--mdc-presence-pause-background-color"
32371
+ },
32372
+ {
32373
+ "description": "The background color of the presence type pto.",
32374
+ "name": "--mdc-presence-pto-background-color"
32375
+ },
32376
+ {
32377
+ "description": "The background color of the presence type presenting.",
32378
+ "name": "--mdc-presence-presenting-background-color"
32379
+ },
32380
+ {
32381
+ "description": "The background color of the presence type quiet.",
32382
+ "name": "--mdc-presence-quiet-background-color"
32383
+ },
32384
+ {
32385
+ "description": "The background color of the presence type scheduled.",
32386
+ "name": "--mdc-presence-scheduled-background-color"
32387
+ },
32388
+ {
32389
+ "description": "The background color of the presence type overlay.",
32390
+ "name": "--mdc-presence-overlay-background-color"
32391
+ }
32392
+ ],
32393
+ "members": [
32394
+ {
32395
+ "kind": "field",
32396
+ "name": "type",
32397
+ "type": {
32398
+ "text": "PresenceType"
32399
+ },
32400
+ "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
32401
+ "default": "active",
32402
+ "attribute": "type",
32403
+ "reflects": true
32404
+ },
32405
+ {
32406
+ "kind": "field",
32407
+ "name": "size",
32408
+ "type": {
32409
+ "text": "PresenceSize"
32410
+ },
32411
+ "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
32412
+ "default": "32",
32413
+ "attribute": "size",
32414
+ "reflects": true
32415
+ },
32416
+ {
32417
+ "kind": "method",
32418
+ "name": "setSize",
32419
+ "privacy": "private",
32420
+ "return": {
32421
+ "type": {
32422
+ "text": "void"
32423
+ }
32424
+ },
32425
+ "parameters": [
32426
+ {
32427
+ "name": "size",
32428
+ "type": {
32429
+ "text": "PresenceSize"
32430
+ }
32431
+ }
32432
+ ]
32433
+ },
32434
+ {
32435
+ "kind": "field",
32436
+ "name": "icon",
32437
+ "privacy": "private",
32438
+ "description": "Get the icon name based on the presence type",
32439
+ "readonly": true
32440
+ },
32441
+ {
32442
+ "kind": "method",
32443
+ "name": "handleOnLoad",
32444
+ "privacy": "private",
32445
+ "return": {
32446
+ "type": {
32447
+ "text": "void"
32448
+ }
32449
+ },
32450
+ "description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
32451
+ },
32452
+ {
32453
+ "kind": "method",
32454
+ "name": "handleOnError",
32455
+ "privacy": "private",
32456
+ "return": {
32457
+ "type": {
32458
+ "text": "void"
32459
+ }
32460
+ },
32461
+ "description": "Handles an error that occurs when loading an icon."
32462
+ }
32463
+ ],
32464
+ "attributes": [
32465
+ {
32466
+ "name": "type",
32467
+ "type": {
32468
+ "text": "PresenceType"
32469
+ },
32470
+ "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
32471
+ "default": "active",
32472
+ "fieldName": "type"
32473
+ },
32474
+ {
32475
+ "name": "size",
32476
+ "type": {
32477
+ "text": "PresenceSize"
32478
+ },
32479
+ "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
32480
+ "default": "32",
32481
+ "fieldName": "size"
32482
+ }
32483
+ ],
32484
+ "superclass": {
32485
+ "name": "Component",
32486
+ "module": "/src/models"
32487
+ },
32488
+ "tagName": "mdc-presence",
32489
+ "jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n */",
32490
+ "customElement": true
32491
+ }
32492
+ ],
32493
+ "exports": [
32494
+ {
32495
+ "kind": "js",
32496
+ "name": "default",
32497
+ "declaration": {
32498
+ "name": "Presence",
32499
+ "module": "components/presence/presence.component.js"
32500
+ }
32501
+ }
32502
+ ]
32503
+ },
32323
32504
  {
32324
32505
  "kind": "javascript-module",
32325
32506
  "path": "components/progressbar/progressbar.component.js",
@@ -32849,187 +33030,6 @@
32849
33030
  }
32850
33031
  ]
32851
33032
  },
32852
- {
32853
- "kind": "javascript-module",
32854
- "path": "components/presence/presence.component.js",
32855
- "declarations": [
32856
- {
32857
- "kind": "class",
32858
- "description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
32859
- "name": "Presence",
32860
- "cssProperties": [
32861
- {
32862
- "description": "The background color of the presence type active.",
32863
- "name": "--mdc-presence-active-background-color"
32864
- },
32865
- {
32866
- "description": "The background color of the presence type away.",
32867
- "name": "--mdc-presence-away-background-color"
32868
- },
32869
- {
32870
- "description": "The background color of the presence type away-calling.",
32871
- "name": "--mdc-presence-away-calling-background-color"
32872
- },
32873
- {
32874
- "description": "The background color of the presence type busy.",
32875
- "name": "--mdc-presence-busy-background-color"
32876
- },
32877
- {
32878
- "description": "The background color of the presence type dnd.",
32879
- "name": "--mdc-presence-dnd-background-color"
32880
- },
32881
- {
32882
- "description": "The background color of the presence type meeting.",
32883
- "name": "--mdc-presence-meeting-background-color"
32884
- },
32885
- {
32886
- "description": "The background color of the presence type on-call.",
32887
- "name": "--mdc-presence-on-call-background-color"
32888
- },
32889
- {
32890
- "description": "The background color of the presence type on-device.",
32891
- "name": "--mdc-presence-on-device-background-color"
32892
- },
32893
- {
32894
- "description": "The background color of the presence type on-mobile.",
32895
- "name": "--mdc-presence-on-mobile-background-color"
32896
- },
32897
- {
32898
- "description": "The background color of the presence type pause.",
32899
- "name": "--mdc-presence-pause-background-color"
32900
- },
32901
- {
32902
- "description": "The background color of the presence type pto.",
32903
- "name": "--mdc-presence-pto-background-color"
32904
- },
32905
- {
32906
- "description": "The background color of the presence type presenting.",
32907
- "name": "--mdc-presence-presenting-background-color"
32908
- },
32909
- {
32910
- "description": "The background color of the presence type quiet.",
32911
- "name": "--mdc-presence-quiet-background-color"
32912
- },
32913
- {
32914
- "description": "The background color of the presence type scheduled.",
32915
- "name": "--mdc-presence-scheduled-background-color"
32916
- },
32917
- {
32918
- "description": "The background color of the presence type overlay.",
32919
- "name": "--mdc-presence-overlay-background-color"
32920
- }
32921
- ],
32922
- "members": [
32923
- {
32924
- "kind": "field",
32925
- "name": "type",
32926
- "type": {
32927
- "text": "PresenceType"
32928
- },
32929
- "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
32930
- "default": "active",
32931
- "attribute": "type",
32932
- "reflects": true
32933
- },
32934
- {
32935
- "kind": "field",
32936
- "name": "size",
32937
- "type": {
32938
- "text": "PresenceSize"
32939
- },
32940
- "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
32941
- "default": "32",
32942
- "attribute": "size",
32943
- "reflects": true
32944
- },
32945
- {
32946
- "kind": "method",
32947
- "name": "setSize",
32948
- "privacy": "private",
32949
- "return": {
32950
- "type": {
32951
- "text": "void"
32952
- }
32953
- },
32954
- "parameters": [
32955
- {
32956
- "name": "size",
32957
- "type": {
32958
- "text": "PresenceSize"
32959
- }
32960
- }
32961
- ]
32962
- },
32963
- {
32964
- "kind": "field",
32965
- "name": "icon",
32966
- "privacy": "private",
32967
- "description": "Get the icon name based on the presence type",
32968
- "readonly": true
32969
- },
32970
- {
32971
- "kind": "method",
32972
- "name": "handleOnLoad",
32973
- "privacy": "private",
32974
- "return": {
32975
- "type": {
32976
- "text": "void"
32977
- }
32978
- },
32979
- "description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
32980
- },
32981
- {
32982
- "kind": "method",
32983
- "name": "handleOnError",
32984
- "privacy": "private",
32985
- "return": {
32986
- "type": {
32987
- "text": "void"
32988
- }
32989
- },
32990
- "description": "Handles an error that occurs when loading an icon."
32991
- }
32992
- ],
32993
- "attributes": [
32994
- {
32995
- "name": "type",
32996
- "type": {
32997
- "text": "PresenceType"
32998
- },
32999
- "description": "Supported presence types:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
33000
- "default": "active",
33001
- "fieldName": "type"
33002
- },
33003
- {
33004
- "name": "size",
33005
- "type": {
33006
- "text": "PresenceSize"
33007
- },
33008
- "description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
33009
- "default": "32",
33010
- "fieldName": "size"
33011
- }
33012
- ],
33013
- "superclass": {
33014
- "name": "Component",
33015
- "module": "/src/models"
33016
- },
33017
- "tagName": "mdc-presence",
33018
- "jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n */",
33019
- "customElement": true
33020
- }
33021
- ],
33022
- "exports": [
33023
- {
33024
- "kind": "js",
33025
- "name": "default",
33026
- "declaration": {
33027
- "name": "Presence",
33028
- "module": "components/presence/presence.component.js"
33029
- }
33030
- }
33031
- ]
33032
- },
33033
33033
  {
33034
33034
  "kind": "javascript-module",
33035
33035
  "path": "components/progressspinner/progressspinner.component.js",
@@ -53,8 +53,8 @@ export { default as OptGroup } from './optgroup';
53
53
  export { default as Option } from './option';
54
54
  export { default as Password } from './password';
55
55
  export { default as Popover } from './popover';
56
- export { default as Progressbar } from './progressbar';
57
56
  export { default as Presence } from './presence';
57
+ export { default as Progressbar } from './progressbar';
58
58
  export { default as Progressspinner } from './progressspinner';
59
59
  export { default as Radio } from './radio';
60
60
  export { default as RadioGroup } from './radiogroup';
@@ -53,8 +53,8 @@ export { default as OptGroup } from './optgroup';
53
53
  export { default as Option } from './option';
54
54
  export { default as Password } from './password';
55
55
  export { default as Popover } from './popover';
56
- export { default as Progressbar } from './progressbar';
57
56
  export { default as Presence } from './presence';
57
+ export { default as Progressbar } from './progressbar';
58
58
  export { default as Progressspinner } from './progressspinner';
59
59
  export { default as Radio } from './radio';
60
60
  export { default as RadioGroup } from './radiogroup';
@@ -1,5 +1,5 @@
1
1
  export declare const LIFE_CYCLE_EVENTS: {
2
- CREATED: string;
3
- DESTROYED: string;
4
- MODIFIED: string;
2
+ readonly CREATED: "created";
3
+ readonly DESTROYED: "destroyed";
4
+ readonly MODIFIED: "modified";
5
5
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@momentum-design/components",
3
3
  "packageManager": "yarn@3.2.4",
4
- "version": "0.118.0",
4
+ "version": "0.118.2",
5
5
  "engines": {
6
6
  "node": ">=20.0.0",
7
7
  "npm": ">=8.0.0"