@momentum-design/components 0.65.0 → 0.66.0
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.
- package/dist/custom-elements.json +362 -362
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -309,50 +309,143 @@
|
|
|
309
309
|
},
|
|
310
310
|
{
|
|
311
311
|
"kind": "javascript-module",
|
|
312
|
-
"path": "components/
|
|
312
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
313
313
|
"declarations": [
|
|
314
314
|
{
|
|
315
315
|
"kind": "class",
|
|
316
|
-
"description": "mdc-
|
|
317
|
-
"name": "
|
|
316
|
+
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
317
|
+
"name": "AvatarButton",
|
|
318
318
|
"cssProperties": [
|
|
319
319
|
{
|
|
320
|
-
"description": "
|
|
321
|
-
"name": "--mdc-
|
|
322
|
-
},
|
|
323
|
-
{
|
|
324
|
-
"description": "The color of the icon",
|
|
325
|
-
"name": "--mdc-chip-icon-color"
|
|
320
|
+
"description": "Background color of the overlay in rest state",
|
|
321
|
+
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
326
322
|
},
|
|
327
323
|
{
|
|
328
|
-
"description": "
|
|
329
|
-
"name": "--mdc-
|
|
324
|
+
"description": "Background color of the overlay in hover state",
|
|
325
|
+
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
330
326
|
},
|
|
331
327
|
{
|
|
332
|
-
"description": "
|
|
333
|
-
"name": "--mdc-
|
|
328
|
+
"description": "Background color of the overlay in active state",
|
|
329
|
+
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
334
330
|
}
|
|
335
331
|
],
|
|
336
332
|
"members": [
|
|
337
333
|
{
|
|
338
334
|
"kind": "field",
|
|
339
|
-
"name": "
|
|
335
|
+
"name": "ariaLabel",
|
|
340
336
|
"type": {
|
|
341
|
-
"text": "
|
|
337
|
+
"text": "string | null"
|
|
342
338
|
},
|
|
343
|
-
"
|
|
344
|
-
"
|
|
345
|
-
"attribute": "
|
|
339
|
+
"default": "null",
|
|
340
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
341
|
+
"attribute": "aria-label"
|
|
342
|
+
},
|
|
343
|
+
{
|
|
344
|
+
"kind": "method",
|
|
345
|
+
"name": "setSize",
|
|
346
|
+
"privacy": "private",
|
|
347
|
+
"parameters": [
|
|
348
|
+
{
|
|
349
|
+
"name": "size",
|
|
350
|
+
"type": {
|
|
351
|
+
"text": "AvatarSize"
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
]
|
|
346
355
|
},
|
|
347
356
|
{
|
|
348
357
|
"kind": "field",
|
|
349
|
-
"name": "
|
|
358
|
+
"name": "src",
|
|
350
359
|
"type": {
|
|
351
|
-
"text": "string"
|
|
360
|
+
"text": "string | undefined"
|
|
352
361
|
},
|
|
353
|
-
"
|
|
354
|
-
"
|
|
355
|
-
"
|
|
362
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
363
|
+
"attribute": "src",
|
|
364
|
+
"inheritedFrom": {
|
|
365
|
+
"name": "AvatarComponentMixin",
|
|
366
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
367
|
+
}
|
|
368
|
+
},
|
|
369
|
+
{
|
|
370
|
+
"kind": "field",
|
|
371
|
+
"name": "initials",
|
|
372
|
+
"type": {
|
|
373
|
+
"text": "string | undefined"
|
|
374
|
+
},
|
|
375
|
+
"description": "The initials to be displayed for the avatar.",
|
|
376
|
+
"attribute": "initials",
|
|
377
|
+
"inheritedFrom": {
|
|
378
|
+
"name": "AvatarComponentMixin",
|
|
379
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
380
|
+
}
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
"kind": "field",
|
|
384
|
+
"name": "presence",
|
|
385
|
+
"type": {
|
|
386
|
+
"text": "PresenceType | undefined"
|
|
387
|
+
},
|
|
388
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\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`",
|
|
389
|
+
"attribute": "presence",
|
|
390
|
+
"inheritedFrom": {
|
|
391
|
+
"name": "AvatarComponentMixin",
|
|
392
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
393
|
+
}
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"kind": "field",
|
|
397
|
+
"name": "size",
|
|
398
|
+
"type": {
|
|
399
|
+
"text": "ButtonSize"
|
|
400
|
+
},
|
|
401
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
402
|
+
"default": "32",
|
|
403
|
+
"attribute": "size",
|
|
404
|
+
"reflects": true,
|
|
405
|
+
"inheritedFrom": {
|
|
406
|
+
"name": "Buttonsimple",
|
|
407
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
408
|
+
}
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"kind": "field",
|
|
412
|
+
"name": "counter",
|
|
413
|
+
"type": {
|
|
414
|
+
"text": "number | undefined"
|
|
415
|
+
},
|
|
416
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
417
|
+
"attribute": "counter",
|
|
418
|
+
"inheritedFrom": {
|
|
419
|
+
"name": "AvatarComponentMixin",
|
|
420
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
421
|
+
}
|
|
422
|
+
},
|
|
423
|
+
{
|
|
424
|
+
"kind": "field",
|
|
425
|
+
"name": "isTyping",
|
|
426
|
+
"type": {
|
|
427
|
+
"text": "boolean"
|
|
428
|
+
},
|
|
429
|
+
"default": "false",
|
|
430
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
431
|
+
"attribute": "is-typing",
|
|
432
|
+
"inheritedFrom": {
|
|
433
|
+
"name": "AvatarComponentMixin",
|
|
434
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
435
|
+
}
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"kind": "field",
|
|
439
|
+
"name": "iconName",
|
|
440
|
+
"type": {
|
|
441
|
+
"text": "IconNames | undefined"
|
|
442
|
+
},
|
|
443
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
444
|
+
"attribute": "icon-name",
|
|
445
|
+
"inheritedFrom": {
|
|
446
|
+
"name": "IconNameMixin",
|
|
447
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
448
|
+
}
|
|
356
449
|
},
|
|
357
450
|
{
|
|
358
451
|
"kind": "field",
|
|
@@ -414,21 +507,6 @@
|
|
|
414
507
|
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
415
508
|
}
|
|
416
509
|
},
|
|
417
|
-
{
|
|
418
|
-
"kind": "field",
|
|
419
|
-
"name": "size",
|
|
420
|
-
"type": {
|
|
421
|
-
"text": "ButtonSize"
|
|
422
|
-
},
|
|
423
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
424
|
-
"default": "32",
|
|
425
|
-
"attribute": "size",
|
|
426
|
-
"reflects": true,
|
|
427
|
-
"inheritedFrom": {
|
|
428
|
-
"name": "Buttonsimple",
|
|
429
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
430
|
-
}
|
|
431
|
-
},
|
|
432
510
|
{
|
|
433
511
|
"kind": "field",
|
|
434
512
|
"name": "role",
|
|
@@ -618,24 +696,139 @@
|
|
|
618
696
|
}
|
|
619
697
|
}
|
|
620
698
|
],
|
|
699
|
+
"events": [
|
|
700
|
+
{
|
|
701
|
+
"description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
|
|
702
|
+
"name": "click",
|
|
703
|
+
"reactName": "onClick",
|
|
704
|
+
"inheritedFrom": {
|
|
705
|
+
"name": "Buttonsimple",
|
|
706
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
707
|
+
}
|
|
708
|
+
},
|
|
709
|
+
{
|
|
710
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
|
|
711
|
+
"name": "keydown",
|
|
712
|
+
"reactName": "onKeyDown",
|
|
713
|
+
"inheritedFrom": {
|
|
714
|
+
"name": "Buttonsimple",
|
|
715
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
716
|
+
}
|
|
717
|
+
},
|
|
718
|
+
{
|
|
719
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
|
|
720
|
+
"name": "keyup",
|
|
721
|
+
"reactName": "onKeyUp",
|
|
722
|
+
"inheritedFrom": {
|
|
723
|
+
"name": "Buttonsimple",
|
|
724
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
725
|
+
}
|
|
726
|
+
},
|
|
727
|
+
{
|
|
728
|
+
"description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
|
|
729
|
+
"name": "focus",
|
|
730
|
+
"reactName": "onFocus",
|
|
731
|
+
"inheritedFrom": {
|
|
732
|
+
"name": "Buttonsimple",
|
|
733
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
],
|
|
621
737
|
"attributes": [
|
|
622
738
|
{
|
|
623
|
-
"name": "
|
|
739
|
+
"name": "aria-label",
|
|
624
740
|
"type": {
|
|
625
|
-
"text": "
|
|
741
|
+
"text": "string | null"
|
|
626
742
|
},
|
|
627
|
-
"
|
|
628
|
-
"
|
|
629
|
-
"fieldName": "
|
|
743
|
+
"default": "null",
|
|
744
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
745
|
+
"fieldName": "ariaLabel"
|
|
630
746
|
},
|
|
631
747
|
{
|
|
632
|
-
"name": "
|
|
748
|
+
"name": "src",
|
|
633
749
|
"type": {
|
|
634
|
-
"text": "string"
|
|
750
|
+
"text": "string | undefined"
|
|
635
751
|
},
|
|
636
|
-
"
|
|
637
|
-
"
|
|
638
|
-
"
|
|
752
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
753
|
+
"fieldName": "src",
|
|
754
|
+
"inheritedFrom": {
|
|
755
|
+
"name": "AvatarComponentMixin",
|
|
756
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
757
|
+
}
|
|
758
|
+
},
|
|
759
|
+
{
|
|
760
|
+
"name": "initials",
|
|
761
|
+
"type": {
|
|
762
|
+
"text": "string | undefined"
|
|
763
|
+
},
|
|
764
|
+
"description": "The initials to be displayed for the avatar.",
|
|
765
|
+
"fieldName": "initials",
|
|
766
|
+
"inheritedFrom": {
|
|
767
|
+
"name": "AvatarComponentMixin",
|
|
768
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
769
|
+
}
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"name": "presence",
|
|
773
|
+
"type": {
|
|
774
|
+
"text": "PresenceType | undefined"
|
|
775
|
+
},
|
|
776
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\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`",
|
|
777
|
+
"fieldName": "presence",
|
|
778
|
+
"inheritedFrom": {
|
|
779
|
+
"name": "AvatarComponentMixin",
|
|
780
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
781
|
+
}
|
|
782
|
+
},
|
|
783
|
+
{
|
|
784
|
+
"name": "size",
|
|
785
|
+
"type": {
|
|
786
|
+
"text": "ButtonSize"
|
|
787
|
+
},
|
|
788
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
789
|
+
"default": "32",
|
|
790
|
+
"fieldName": "size",
|
|
791
|
+
"inheritedFrom": {
|
|
792
|
+
"name": "Buttonsimple",
|
|
793
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
794
|
+
}
|
|
795
|
+
},
|
|
796
|
+
{
|
|
797
|
+
"name": "counter",
|
|
798
|
+
"type": {
|
|
799
|
+
"text": "number | undefined"
|
|
800
|
+
},
|
|
801
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
802
|
+
"fieldName": "counter",
|
|
803
|
+
"inheritedFrom": {
|
|
804
|
+
"name": "AvatarComponentMixin",
|
|
805
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
806
|
+
}
|
|
807
|
+
},
|
|
808
|
+
{
|
|
809
|
+
"name": "is-typing",
|
|
810
|
+
"type": {
|
|
811
|
+
"text": "boolean"
|
|
812
|
+
},
|
|
813
|
+
"default": "false",
|
|
814
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
815
|
+
"fieldName": "isTyping",
|
|
816
|
+
"inheritedFrom": {
|
|
817
|
+
"name": "AvatarComponentMixin",
|
|
818
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
819
|
+
}
|
|
820
|
+
},
|
|
821
|
+
{
|
|
822
|
+
"name": "icon-name",
|
|
823
|
+
"type": {
|
|
824
|
+
"text": "IconNames | undefined"
|
|
825
|
+
},
|
|
826
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
827
|
+
"fieldName": "iconName",
|
|
828
|
+
"inheritedFrom": {
|
|
829
|
+
"name": "IconNameMixin",
|
|
830
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
831
|
+
}
|
|
639
832
|
},
|
|
640
833
|
{
|
|
641
834
|
"name": "tabIndex",
|
|
@@ -689,19 +882,6 @@
|
|
|
689
882
|
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
690
883
|
}
|
|
691
884
|
},
|
|
692
|
-
{
|
|
693
|
-
"name": "size",
|
|
694
|
-
"type": {
|
|
695
|
-
"text": "ButtonSize"
|
|
696
|
-
},
|
|
697
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
698
|
-
"default": "32",
|
|
699
|
-
"fieldName": "size",
|
|
700
|
-
"inheritedFrom": {
|
|
701
|
-
"name": "Buttonsimple",
|
|
702
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
703
|
-
}
|
|
704
|
-
},
|
|
705
885
|
{
|
|
706
886
|
"name": "role",
|
|
707
887
|
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
@@ -739,51 +919,23 @@
|
|
|
739
919
|
}
|
|
740
920
|
}
|
|
741
921
|
],
|
|
742
|
-
"
|
|
743
|
-
"name": "Buttonsimple",
|
|
744
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
745
|
-
},
|
|
746
|
-
"tagName": "mdc-alertchip",
|
|
747
|
-
"jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
748
|
-
"customElement": true,
|
|
749
|
-
"events": [
|
|
750
|
-
{
|
|
751
|
-
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
752
|
-
"name": "click",
|
|
753
|
-
"reactName": "onClick",
|
|
754
|
-
"inheritedFrom": {
|
|
755
|
-
"name": "Buttonsimple",
|
|
756
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
757
|
-
}
|
|
758
|
-
},
|
|
759
|
-
{
|
|
760
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
761
|
-
"name": "keydown",
|
|
762
|
-
"reactName": "onKeyDown",
|
|
763
|
-
"inheritedFrom": {
|
|
764
|
-
"name": "Buttonsimple",
|
|
765
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
766
|
-
}
|
|
767
|
-
},
|
|
922
|
+
"mixins": [
|
|
768
923
|
{
|
|
769
|
-
"
|
|
770
|
-
"
|
|
771
|
-
"reactName": "onKeyUp",
|
|
772
|
-
"inheritedFrom": {
|
|
773
|
-
"name": "Buttonsimple",
|
|
774
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
775
|
-
}
|
|
924
|
+
"name": "AvatarComponentMixin",
|
|
925
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
776
926
|
},
|
|
777
927
|
{
|
|
778
|
-
"
|
|
779
|
-
"
|
|
780
|
-
"reactName": "onFocus",
|
|
781
|
-
"inheritedFrom": {
|
|
782
|
-
"name": "Buttonsimple",
|
|
783
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
784
|
-
}
|
|
928
|
+
"name": "IconNameMixin",
|
|
929
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
785
930
|
}
|
|
786
|
-
]
|
|
931
|
+
],
|
|
932
|
+
"superclass": {
|
|
933
|
+
"name": "Buttonsimple",
|
|
934
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
935
|
+
},
|
|
936
|
+
"tagName": "mdc-avatarbutton",
|
|
937
|
+
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n */",
|
|
938
|
+
"customElement": true
|
|
787
939
|
}
|
|
788
940
|
],
|
|
789
941
|
"exports": [
|
|
@@ -791,151 +943,58 @@
|
|
|
791
943
|
"kind": "js",
|
|
792
944
|
"name": "default",
|
|
793
945
|
"declaration": {
|
|
794
|
-
"name": "
|
|
795
|
-
"module": "components/
|
|
946
|
+
"name": "AvatarButton",
|
|
947
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
796
948
|
}
|
|
797
949
|
}
|
|
798
950
|
]
|
|
799
951
|
},
|
|
800
952
|
{
|
|
801
953
|
"kind": "javascript-module",
|
|
802
|
-
"path": "components/
|
|
954
|
+
"path": "components/alertchip/alertchip.component.js",
|
|
803
955
|
"declarations": [
|
|
804
956
|
{
|
|
805
957
|
"kind": "class",
|
|
806
|
-
"description": "
|
|
807
|
-
"name": "
|
|
958
|
+
"description": "mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n\n- It supports a leading icon along with label.\n- It supports 5 variants of alerts - neutral, warning, error, success, and informational\n\nThis component is built by extending Buttonsimple.",
|
|
959
|
+
"name": "AlertChip",
|
|
808
960
|
"cssProperties": [
|
|
809
961
|
{
|
|
810
|
-
"description": "
|
|
811
|
-
"name": "--mdc-
|
|
812
|
-
},
|
|
813
|
-
{
|
|
814
|
-
"description": "Background color of the overlay in hover state",
|
|
815
|
-
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
816
|
-
},
|
|
817
|
-
{
|
|
818
|
-
"description": "Background color of the overlay in active state",
|
|
819
|
-
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
820
|
-
}
|
|
821
|
-
],
|
|
822
|
-
"members": [
|
|
823
|
-
{
|
|
824
|
-
"kind": "field",
|
|
825
|
-
"name": "ariaLabel",
|
|
826
|
-
"type": {
|
|
827
|
-
"text": "string | null"
|
|
828
|
-
},
|
|
829
|
-
"default": "null",
|
|
830
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
831
|
-
"attribute": "aria-label"
|
|
832
|
-
},
|
|
833
|
-
{
|
|
834
|
-
"kind": "method",
|
|
835
|
-
"name": "setSize",
|
|
836
|
-
"privacy": "private",
|
|
837
|
-
"parameters": [
|
|
838
|
-
{
|
|
839
|
-
"name": "size",
|
|
840
|
-
"type": {
|
|
841
|
-
"text": "AvatarSize"
|
|
842
|
-
}
|
|
843
|
-
}
|
|
844
|
-
]
|
|
845
|
-
},
|
|
846
|
-
{
|
|
847
|
-
"kind": "field",
|
|
848
|
-
"name": "src",
|
|
849
|
-
"type": {
|
|
850
|
-
"text": "string | undefined"
|
|
851
|
-
},
|
|
852
|
-
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
853
|
-
"attribute": "src",
|
|
854
|
-
"inheritedFrom": {
|
|
855
|
-
"name": "AvatarComponentMixin",
|
|
856
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
857
|
-
}
|
|
858
|
-
},
|
|
859
|
-
{
|
|
860
|
-
"kind": "field",
|
|
861
|
-
"name": "initials",
|
|
862
|
-
"type": {
|
|
863
|
-
"text": "string | undefined"
|
|
864
|
-
},
|
|
865
|
-
"description": "The initials to be displayed for the avatar.",
|
|
866
|
-
"attribute": "initials",
|
|
867
|
-
"inheritedFrom": {
|
|
868
|
-
"name": "AvatarComponentMixin",
|
|
869
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
870
|
-
}
|
|
871
|
-
},
|
|
872
|
-
{
|
|
873
|
-
"kind": "field",
|
|
874
|
-
"name": "presence",
|
|
875
|
-
"type": {
|
|
876
|
-
"text": "PresenceType | undefined"
|
|
877
|
-
},
|
|
878
|
-
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\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`",
|
|
879
|
-
"attribute": "presence",
|
|
880
|
-
"inheritedFrom": {
|
|
881
|
-
"name": "AvatarComponentMixin",
|
|
882
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
883
|
-
}
|
|
962
|
+
"description": "The color of the label text",
|
|
963
|
+
"name": "--mdc-chip-color"
|
|
884
964
|
},
|
|
885
965
|
{
|
|
886
|
-
"
|
|
887
|
-
"name": "
|
|
888
|
-
"type": {
|
|
889
|
-
"text": "ButtonSize"
|
|
890
|
-
},
|
|
891
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
892
|
-
"default": "32",
|
|
893
|
-
"attribute": "size",
|
|
894
|
-
"reflects": true,
|
|
895
|
-
"inheritedFrom": {
|
|
896
|
-
"name": "Buttonsimple",
|
|
897
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
898
|
-
}
|
|
966
|
+
"description": "The color of the icon",
|
|
967
|
+
"name": "--mdc-chip-icon-color"
|
|
899
968
|
},
|
|
900
969
|
{
|
|
901
|
-
"
|
|
902
|
-
"name": "
|
|
903
|
-
"type": {
|
|
904
|
-
"text": "number | undefined"
|
|
905
|
-
},
|
|
906
|
-
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
907
|
-
"attribute": "counter",
|
|
908
|
-
"inheritedFrom": {
|
|
909
|
-
"name": "AvatarComponentMixin",
|
|
910
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
911
|
-
}
|
|
970
|
+
"description": "The border color of the alertchip",
|
|
971
|
+
"name": "--mdc-chip-border-color"
|
|
912
972
|
},
|
|
973
|
+
{
|
|
974
|
+
"description": "The background color of the alertchip",
|
|
975
|
+
"name": "--mdc-chip-background-color"
|
|
976
|
+
}
|
|
977
|
+
],
|
|
978
|
+
"members": [
|
|
913
979
|
{
|
|
914
980
|
"kind": "field",
|
|
915
|
-
"name": "
|
|
981
|
+
"name": "variant",
|
|
916
982
|
"type": {
|
|
917
|
-
"text": "
|
|
983
|
+
"text": "VariantType"
|
|
918
984
|
},
|
|
919
|
-
"
|
|
920
|
-
"
|
|
921
|
-
"attribute": "
|
|
922
|
-
"inheritedFrom": {
|
|
923
|
-
"name": "AvatarComponentMixin",
|
|
924
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
925
|
-
}
|
|
985
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
986
|
+
"default": "neutral",
|
|
987
|
+
"attribute": "variant"
|
|
926
988
|
},
|
|
927
989
|
{
|
|
928
990
|
"kind": "field",
|
|
929
|
-
"name": "
|
|
991
|
+
"name": "label",
|
|
930
992
|
"type": {
|
|
931
|
-
"text": "
|
|
993
|
+
"text": "string"
|
|
932
994
|
},
|
|
933
|
-
"
|
|
934
|
-
"
|
|
935
|
-
"
|
|
936
|
-
"name": "IconNameMixin",
|
|
937
|
-
"module": "utils/mixins/IconNameMixin.js"
|
|
938
|
-
}
|
|
995
|
+
"default": "''",
|
|
996
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
997
|
+
"attribute": "label"
|
|
939
998
|
},
|
|
940
999
|
{
|
|
941
1000
|
"kind": "field",
|
|
@@ -997,6 +1056,21 @@
|
|
|
997
1056
|
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
998
1057
|
}
|
|
999
1058
|
},
|
|
1059
|
+
{
|
|
1060
|
+
"kind": "field",
|
|
1061
|
+
"name": "size",
|
|
1062
|
+
"type": {
|
|
1063
|
+
"text": "ButtonSize"
|
|
1064
|
+
},
|
|
1065
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
1066
|
+
"default": "32",
|
|
1067
|
+
"attribute": "size",
|
|
1068
|
+
"reflects": true,
|
|
1069
|
+
"inheritedFrom": {
|
|
1070
|
+
"name": "Buttonsimple",
|
|
1071
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1072
|
+
}
|
|
1073
|
+
},
|
|
1000
1074
|
{
|
|
1001
1075
|
"kind": "field",
|
|
1002
1076
|
"name": "role",
|
|
@@ -1186,139 +1260,24 @@
|
|
|
1186
1260
|
}
|
|
1187
1261
|
}
|
|
1188
1262
|
],
|
|
1189
|
-
"events": [
|
|
1190
|
-
{
|
|
1191
|
-
"description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
|
|
1192
|
-
"name": "click",
|
|
1193
|
-
"reactName": "onClick",
|
|
1194
|
-
"inheritedFrom": {
|
|
1195
|
-
"name": "Buttonsimple",
|
|
1196
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1197
|
-
}
|
|
1198
|
-
},
|
|
1199
|
-
{
|
|
1200
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
|
|
1201
|
-
"name": "keydown",
|
|
1202
|
-
"reactName": "onKeyDown",
|
|
1203
|
-
"inheritedFrom": {
|
|
1204
|
-
"name": "Buttonsimple",
|
|
1205
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1206
|
-
}
|
|
1207
|
-
},
|
|
1208
|
-
{
|
|
1209
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
|
|
1210
|
-
"name": "keyup",
|
|
1211
|
-
"reactName": "onKeyUp",
|
|
1212
|
-
"inheritedFrom": {
|
|
1213
|
-
"name": "Buttonsimple",
|
|
1214
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1215
|
-
}
|
|
1216
|
-
},
|
|
1217
|
-
{
|
|
1218
|
-
"description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
|
|
1219
|
-
"name": "focus",
|
|
1220
|
-
"reactName": "onFocus",
|
|
1221
|
-
"inheritedFrom": {
|
|
1222
|
-
"name": "Buttonsimple",
|
|
1223
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1224
|
-
}
|
|
1225
|
-
}
|
|
1226
|
-
],
|
|
1227
1263
|
"attributes": [
|
|
1228
1264
|
{
|
|
1229
|
-
"name": "
|
|
1230
|
-
"type": {
|
|
1231
|
-
"text": "string | null"
|
|
1232
|
-
},
|
|
1233
|
-
"default": "null",
|
|
1234
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
1235
|
-
"fieldName": "ariaLabel"
|
|
1236
|
-
},
|
|
1237
|
-
{
|
|
1238
|
-
"name": "src",
|
|
1239
|
-
"type": {
|
|
1240
|
-
"text": "string | undefined"
|
|
1241
|
-
},
|
|
1242
|
-
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
1243
|
-
"fieldName": "src",
|
|
1244
|
-
"inheritedFrom": {
|
|
1245
|
-
"name": "AvatarComponentMixin",
|
|
1246
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1247
|
-
}
|
|
1248
|
-
},
|
|
1249
|
-
{
|
|
1250
|
-
"name": "initials",
|
|
1251
|
-
"type": {
|
|
1252
|
-
"text": "string | undefined"
|
|
1253
|
-
},
|
|
1254
|
-
"description": "The initials to be displayed for the avatar.",
|
|
1255
|
-
"fieldName": "initials",
|
|
1256
|
-
"inheritedFrom": {
|
|
1257
|
-
"name": "AvatarComponentMixin",
|
|
1258
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1259
|
-
}
|
|
1260
|
-
},
|
|
1261
|
-
{
|
|
1262
|
-
"name": "presence",
|
|
1263
|
-
"type": {
|
|
1264
|
-
"text": "PresenceType | undefined"
|
|
1265
|
-
},
|
|
1266
|
-
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\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`",
|
|
1267
|
-
"fieldName": "presence",
|
|
1268
|
-
"inheritedFrom": {
|
|
1269
|
-
"name": "AvatarComponentMixin",
|
|
1270
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1271
|
-
}
|
|
1272
|
-
},
|
|
1273
|
-
{
|
|
1274
|
-
"name": "size",
|
|
1275
|
-
"type": {
|
|
1276
|
-
"text": "ButtonSize"
|
|
1277
|
-
},
|
|
1278
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
1279
|
-
"default": "32",
|
|
1280
|
-
"fieldName": "size",
|
|
1281
|
-
"inheritedFrom": {
|
|
1282
|
-
"name": "Buttonsimple",
|
|
1283
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1284
|
-
}
|
|
1285
|
-
},
|
|
1286
|
-
{
|
|
1287
|
-
"name": "counter",
|
|
1288
|
-
"type": {
|
|
1289
|
-
"text": "number | undefined"
|
|
1290
|
-
},
|
|
1291
|
-
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
1292
|
-
"fieldName": "counter",
|
|
1293
|
-
"inheritedFrom": {
|
|
1294
|
-
"name": "AvatarComponentMixin",
|
|
1295
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1296
|
-
}
|
|
1297
|
-
},
|
|
1298
|
-
{
|
|
1299
|
-
"name": "is-typing",
|
|
1265
|
+
"name": "variant",
|
|
1300
1266
|
"type": {
|
|
1301
|
-
"text": "
|
|
1267
|
+
"text": "VariantType"
|
|
1302
1268
|
},
|
|
1303
|
-
"
|
|
1304
|
-
"
|
|
1305
|
-
"fieldName": "
|
|
1306
|
-
"inheritedFrom": {
|
|
1307
|
-
"name": "AvatarComponentMixin",
|
|
1308
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
1309
|
-
}
|
|
1269
|
+
"description": "The variant of the alertchip. It supports 5 variants\n- neutral\n- warning\n- error\n- success\n- informational",
|
|
1270
|
+
"default": "neutral",
|
|
1271
|
+
"fieldName": "variant"
|
|
1310
1272
|
},
|
|
1311
1273
|
{
|
|
1312
|
-
"name": "
|
|
1274
|
+
"name": "label",
|
|
1313
1275
|
"type": {
|
|
1314
|
-
"text": "
|
|
1276
|
+
"text": "string"
|
|
1315
1277
|
},
|
|
1316
|
-
"
|
|
1317
|
-
"
|
|
1318
|
-
"
|
|
1319
|
-
"name": "IconNameMixin",
|
|
1320
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
1321
|
-
}
|
|
1278
|
+
"default": "''",
|
|
1279
|
+
"description": "The visible label text of the alertchip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
|
1280
|
+
"fieldName": "label"
|
|
1322
1281
|
},
|
|
1323
1282
|
{
|
|
1324
1283
|
"name": "tabIndex",
|
|
@@ -1372,6 +1331,19 @@
|
|
|
1372
1331
|
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1373
1332
|
}
|
|
1374
1333
|
},
|
|
1334
|
+
{
|
|
1335
|
+
"name": "size",
|
|
1336
|
+
"type": {
|
|
1337
|
+
"text": "ButtonSize"
|
|
1338
|
+
},
|
|
1339
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
|
1340
|
+
"default": "32",
|
|
1341
|
+
"fieldName": "size",
|
|
1342
|
+
"inheritedFrom": {
|
|
1343
|
+
"name": "Buttonsimple",
|
|
1344
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1345
|
+
}
|
|
1346
|
+
},
|
|
1375
1347
|
{
|
|
1376
1348
|
"name": "role",
|
|
1377
1349
|
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
|
@@ -1409,23 +1381,51 @@
|
|
|
1409
1381
|
}
|
|
1410
1382
|
}
|
|
1411
1383
|
],
|
|
1412
|
-
"mixins": [
|
|
1413
|
-
{
|
|
1414
|
-
"name": "AvatarComponentMixin",
|
|
1415
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1416
|
-
},
|
|
1417
|
-
{
|
|
1418
|
-
"name": "IconNameMixin",
|
|
1419
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
1420
|
-
}
|
|
1421
|
-
],
|
|
1422
1384
|
"superclass": {
|
|
1423
1385
|
"name": "Buttonsimple",
|
|
1424
1386
|
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
1425
1387
|
},
|
|
1426
|
-
"tagName": "mdc-
|
|
1427
|
-
"jsDoc": "/**\n *
|
|
1428
|
-
"customElement": true
|
|
1388
|
+
"tagName": "mdc-alertchip",
|
|
1389
|
+
"jsDoc": "/**\n * mdc-alertchip component is an interactive chip that consumers can use to represent an alert.\n *\n * - It supports a leading icon along with label.\n * - It supports 5 variants of alerts - neutral, warning, error, success, and informational\n *\n * This component is built by extending Buttonsimple.\n *\n * @tagname mdc-alertchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the label text\n * @cssproperty --mdc-chip-icon-color - The color of the icon\n * @cssproperty --mdc-chip-border-color - The border color of the alertchip\n * @cssproperty --mdc-chip-background-color - The background color of the alertchip\n *\n */",
|
|
1390
|
+
"customElement": true,
|
|
1391
|
+
"events": [
|
|
1392
|
+
{
|
|
1393
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
1394
|
+
"name": "click",
|
|
1395
|
+
"reactName": "onClick",
|
|
1396
|
+
"inheritedFrom": {
|
|
1397
|
+
"name": "Buttonsimple",
|
|
1398
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1399
|
+
}
|
|
1400
|
+
},
|
|
1401
|
+
{
|
|
1402
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
1403
|
+
"name": "keydown",
|
|
1404
|
+
"reactName": "onKeyDown",
|
|
1405
|
+
"inheritedFrom": {
|
|
1406
|
+
"name": "Buttonsimple",
|
|
1407
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1408
|
+
}
|
|
1409
|
+
},
|
|
1410
|
+
{
|
|
1411
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
1412
|
+
"name": "keyup",
|
|
1413
|
+
"reactName": "onKeyUp",
|
|
1414
|
+
"inheritedFrom": {
|
|
1415
|
+
"name": "Buttonsimple",
|
|
1416
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1417
|
+
}
|
|
1418
|
+
},
|
|
1419
|
+
{
|
|
1420
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
1421
|
+
"name": "focus",
|
|
1422
|
+
"reactName": "onFocus",
|
|
1423
|
+
"inheritedFrom": {
|
|
1424
|
+
"name": "Buttonsimple",
|
|
1425
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1426
|
+
}
|
|
1427
|
+
}
|
|
1428
|
+
]
|
|
1429
1429
|
}
|
|
1430
1430
|
],
|
|
1431
1431
|
"exports": [
|
|
@@ -1433,8 +1433,8 @@
|
|
|
1433
1433
|
"kind": "js",
|
|
1434
1434
|
"name": "default",
|
|
1435
1435
|
"declaration": {
|
|
1436
|
-
"name": "
|
|
1437
|
-
"module": "components/
|
|
1436
|
+
"name": "AlertChip",
|
|
1437
|
+
"module": "components/alertchip/alertchip.component.js"
|
|
1438
1438
|
}
|
|
1439
1439
|
}
|
|
1440
1440
|
]
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Appheader } from './appheader';
|
|
2
2
|
export { default as Avatar } from './avatar';
|
|
3
|
-
export { default as AlertChip } from './alertchip';
|
|
4
3
|
export { default as AvatarButton } from './avatarbutton';
|
|
4
|
+
export { default as AlertChip } from './alertchip';
|
|
5
5
|
export { default as Badge } from './badge';
|
|
6
6
|
export { default as Brandvisual } from './brandvisual';
|
|
7
7
|
export { default as Bullet } from './bullet';
|
package/dist/react/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { default as Appheader } from './appheader';
|
|
2
2
|
export { default as Avatar } from './avatar';
|
|
3
|
-
export { default as AlertChip } from './alertchip';
|
|
4
3
|
export { default as AvatarButton } from './avatarbutton';
|
|
4
|
+
export { default as AlertChip } from './alertchip';
|
|
5
5
|
export { default as Badge } from './badge';
|
|
6
6
|
export { default as Brandvisual } from './brandvisual';
|
|
7
7
|
export { default as Bullet } from './bullet';
|
package/package.json
CHANGED