@momentum-design/components 0.44.0 → 0.46.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/browser/index.js +136 -90
- package/dist/browser/index.js.map +4 -4
- package/dist/components/appheader/appheader.component.d.ts +30 -0
- package/dist/components/appheader/appheader.component.js +44 -0
- package/dist/components/appheader/appheader.constants.d.ts +2 -0
- package/dist/components/appheader/appheader.constants.js +3 -0
- package/dist/components/appheader/appheader.styles.d.ts +2 -0
- package/dist/components/appheader/appheader.styles.js +37 -0
- package/dist/components/appheader/index.d.ts +7 -0
- package/dist/components/appheader/index.js +4 -0
- package/dist/components/brandvisual/brandvisual.styles.js +1 -0
- package/dist/custom-elements.json +664 -603
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/appheader/index.d.ts +22 -0
- package/dist/react/appheader/index.js +31 -0
- package/dist/react/index.d.ts +3 -2
- package/dist/react/index.js +3 -2
- package/package.json +1 -1
@@ -467,36 +467,96 @@
|
|
467
467
|
},
|
468
468
|
{
|
469
469
|
"kind": "javascript-module",
|
470
|
-
"path": "components/
|
470
|
+
"path": "components/appheader/appheader.component.js",
|
471
471
|
"declarations": [
|
472
472
|
{
|
473
473
|
"kind": "class",
|
474
|
-
"description": "The `mdc-
|
475
|
-
"name": "
|
476
|
-
"
|
474
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
475
|
+
"name": "Appheader",
|
476
|
+
"cssParts": [
|
477
477
|
{
|
478
|
-
"
|
479
|
-
"name": "
|
480
|
-
"type": {
|
481
|
-
"text": "string | null"
|
482
|
-
},
|
483
|
-
"default": "null",
|
484
|
-
"description": "Aria-label attribute to be set for accessibility",
|
485
|
-
"attribute": "aria-label"
|
478
|
+
"description": "The main container for styling the header.",
|
479
|
+
"name": "container"
|
486
480
|
},
|
487
481
|
{
|
488
|
-
"
|
489
|
-
"name": "
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
482
|
+
"description": "The leading section of the header.",
|
483
|
+
"name": "leading-section"
|
484
|
+
},
|
485
|
+
{
|
486
|
+
"description": "The center section of the header.",
|
487
|
+
"name": "center-section"
|
488
|
+
},
|
489
|
+
{
|
490
|
+
"description": "The trailing section of the header.",
|
491
|
+
"name": "trailing-section"
|
492
|
+
}
|
493
|
+
],
|
494
|
+
"slots": [
|
495
|
+
{
|
496
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
497
|
+
"name": "leading"
|
498
|
+
},
|
499
|
+
{
|
500
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
501
|
+
"name": "center"
|
502
|
+
},
|
503
|
+
{
|
504
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
505
|
+
"name": "trailing"
|
506
|
+
}
|
507
|
+
],
|
508
|
+
"members": [],
|
509
|
+
"superclass": {
|
510
|
+
"name": "Component",
|
511
|
+
"module": "/src/models"
|
512
|
+
},
|
513
|
+
"tagName": "mdc-appheader",
|
514
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
515
|
+
"customElement": true
|
516
|
+
}
|
517
|
+
],
|
518
|
+
"exports": [
|
519
|
+
{
|
520
|
+
"kind": "js",
|
521
|
+
"name": "default",
|
522
|
+
"declaration": {
|
523
|
+
"name": "Appheader",
|
524
|
+
"module": "components/appheader/appheader.component.js"
|
525
|
+
}
|
526
|
+
}
|
527
|
+
]
|
528
|
+
},
|
529
|
+
{
|
530
|
+
"kind": "javascript-module",
|
531
|
+
"path": "components/avatar/avatar.component.js",
|
532
|
+
"declarations": [
|
533
|
+
{
|
534
|
+
"kind": "class",
|
535
|
+
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
536
|
+
"name": "Avatar",
|
537
|
+
"cssProperties": [
|
538
|
+
{
|
539
|
+
"description": "Allows customization of the default background color.",
|
540
|
+
"name": "--mdc-avatar-default-background-color"
|
541
|
+
},
|
542
|
+
{
|
543
|
+
"description": "Allows customization of the default foreground color.",
|
544
|
+
"name": "--mdc-avatar-default-foreground-color"
|
545
|
+
},
|
546
|
+
{
|
547
|
+
"description": "Allows customization of the loading indicator background color.",
|
548
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
549
|
+
},
|
550
|
+
{
|
551
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
552
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
499
553
|
},
|
554
|
+
{
|
555
|
+
"description": "Allows customization of the loading overlay background color.",
|
556
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
557
|
+
}
|
558
|
+
],
|
559
|
+
"members": [
|
500
560
|
{
|
501
561
|
"kind": "field",
|
502
562
|
"name": "src",
|
@@ -540,15 +600,15 @@
|
|
540
600
|
"kind": "field",
|
541
601
|
"name": "size",
|
542
602
|
"type": {
|
543
|
-
"text": "
|
603
|
+
"text": "AvatarSize"
|
544
604
|
},
|
545
605
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
546
606
|
"default": "32",
|
547
607
|
"attribute": "size",
|
548
608
|
"reflects": true,
|
549
609
|
"inheritedFrom": {
|
550
|
-
"name": "
|
551
|
-
"module": "
|
610
|
+
"name": "AvatarComponentMixin",
|
611
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
552
612
|
}
|
553
613
|
},
|
554
614
|
{
|
@@ -590,112 +650,357 @@
|
|
590
650
|
"name": "IconNameMixin",
|
591
651
|
"module": "utils/mixins/IconNameMixin.js"
|
592
652
|
}
|
653
|
+
}
|
654
|
+
],
|
655
|
+
"mixins": [
|
656
|
+
{
|
657
|
+
"name": "AvatarComponentMixin",
|
658
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
593
659
|
},
|
594
660
|
{
|
595
|
-
"
|
596
|
-
"
|
661
|
+
"name": "IconNameMixin",
|
662
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
663
|
+
}
|
664
|
+
],
|
665
|
+
"superclass": {
|
666
|
+
"name": "Component",
|
667
|
+
"module": "/src/models"
|
668
|
+
},
|
669
|
+
"tagName": "mdc-avatar",
|
670
|
+
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
671
|
+
"customElement": true,
|
672
|
+
"attributes": [
|
673
|
+
{
|
674
|
+
"name": "src",
|
597
675
|
"type": {
|
598
|
-
"text": "
|
676
|
+
"text": "string | undefined"
|
599
677
|
},
|
600
|
-
"
|
601
|
-
"
|
602
|
-
"attribute": "tabIndex",
|
603
|
-
"reflects": true,
|
678
|
+
"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.",
|
679
|
+
"fieldName": "src",
|
604
680
|
"inheritedFrom": {
|
605
|
-
"name": "
|
606
|
-
"module": "utils/mixins/
|
681
|
+
"name": "AvatarComponentMixin",
|
682
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
607
683
|
}
|
608
684
|
},
|
609
685
|
{
|
610
|
-
"
|
611
|
-
"name": "disabled",
|
686
|
+
"name": "initials",
|
612
687
|
"type": {
|
613
|
-
"text": "
|
688
|
+
"text": "string | undefined"
|
614
689
|
},
|
615
|
-
"description": "
|
616
|
-
"
|
617
|
-
"attribute": "disabled",
|
618
|
-
"reflects": true,
|
690
|
+
"description": "The initials to be displayed for the avatar.",
|
691
|
+
"fieldName": "initials",
|
619
692
|
"inheritedFrom": {
|
620
|
-
"name": "
|
621
|
-
"module": "utils/mixins/
|
693
|
+
"name": "AvatarComponentMixin",
|
694
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
622
695
|
}
|
623
696
|
},
|
624
697
|
{
|
625
|
-
"
|
626
|
-
"name": "active",
|
698
|
+
"name": "presence",
|
627
699
|
"type": {
|
628
|
-
"text": "
|
700
|
+
"text": "PresenceType | undefined"
|
629
701
|
},
|
630
|
-
"
|
631
|
-
"
|
632
|
-
"attribute": "active",
|
633
|
-
"reflects": true,
|
702
|
+
"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`",
|
703
|
+
"fieldName": "presence",
|
634
704
|
"inheritedFrom": {
|
635
|
-
"name": "
|
636
|
-
"module": "
|
705
|
+
"name": "AvatarComponentMixin",
|
706
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
637
707
|
}
|
638
708
|
},
|
639
709
|
{
|
640
|
-
"
|
641
|
-
"name": "softDisabled",
|
710
|
+
"name": "size",
|
642
711
|
"type": {
|
643
|
-
"text": "
|
712
|
+
"text": "AvatarSize"
|
644
713
|
},
|
645
|
-
"
|
646
|
-
"
|
647
|
-
"
|
714
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
715
|
+
"default": "32",
|
716
|
+
"fieldName": "size",
|
648
717
|
"inheritedFrom": {
|
649
|
-
"name": "
|
650
|
-
"module": "
|
718
|
+
"name": "AvatarComponentMixin",
|
719
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
651
720
|
}
|
652
721
|
},
|
653
722
|
{
|
654
|
-
"
|
655
|
-
"
|
656
|
-
|
657
|
-
|
658
|
-
"
|
659
|
-
"
|
723
|
+
"name": "counter",
|
724
|
+
"type": {
|
725
|
+
"text": "number | undefined"
|
726
|
+
},
|
727
|
+
"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`.",
|
728
|
+
"fieldName": "counter",
|
660
729
|
"inheritedFrom": {
|
661
|
-
"name": "
|
662
|
-
"module": "
|
730
|
+
"name": "AvatarComponentMixin",
|
731
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
663
732
|
}
|
664
733
|
},
|
665
734
|
{
|
666
|
-
"
|
667
|
-
"name": "type",
|
735
|
+
"name": "is-typing",
|
668
736
|
"type": {
|
669
|
-
"text": "
|
737
|
+
"text": "boolean"
|
670
738
|
},
|
671
|
-
"
|
672
|
-
"
|
673
|
-
"
|
674
|
-
"reflects": true,
|
739
|
+
"default": "false",
|
740
|
+
"description": "Represents the typing indicator when the user is typing.",
|
741
|
+
"fieldName": "isTyping",
|
675
742
|
"inheritedFrom": {
|
676
|
-
"name": "
|
677
|
-
"module": "
|
743
|
+
"name": "AvatarComponentMixin",
|
744
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
678
745
|
}
|
679
746
|
},
|
680
747
|
{
|
681
|
-
"
|
682
|
-
"
|
683
|
-
|
748
|
+
"name": "icon-name",
|
749
|
+
"type": {
|
750
|
+
"text": "IconNames | undefined"
|
751
|
+
},
|
752
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
753
|
+
"fieldName": "iconName",
|
684
754
|
"inheritedFrom": {
|
685
|
-
"name": "
|
686
|
-
"module": "
|
755
|
+
"name": "IconNameMixin",
|
756
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
687
757
|
}
|
758
|
+
}
|
759
|
+
]
|
760
|
+
}
|
761
|
+
],
|
762
|
+
"exports": [
|
763
|
+
{
|
764
|
+
"kind": "js",
|
765
|
+
"name": "default",
|
766
|
+
"declaration": {
|
767
|
+
"name": "Avatar",
|
768
|
+
"module": "components/avatar/avatar.component.js"
|
769
|
+
}
|
770
|
+
}
|
771
|
+
]
|
772
|
+
},
|
773
|
+
{
|
774
|
+
"kind": "javascript-module",
|
775
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
776
|
+
"declarations": [
|
777
|
+
{
|
778
|
+
"kind": "class",
|
779
|
+
"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.",
|
780
|
+
"name": "AvatarButton",
|
781
|
+
"members": [
|
782
|
+
{
|
783
|
+
"kind": "field",
|
784
|
+
"name": "ariaLabel",
|
785
|
+
"type": {
|
786
|
+
"text": "string | null"
|
787
|
+
},
|
788
|
+
"default": "null",
|
789
|
+
"description": "Aria-label attribute to be set for accessibility",
|
790
|
+
"attribute": "aria-label"
|
688
791
|
},
|
689
792
|
{
|
690
793
|
"kind": "method",
|
691
|
-
"name": "
|
692
|
-
"privacy": "
|
794
|
+
"name": "setSize",
|
795
|
+
"privacy": "private",
|
693
796
|
"parameters": [
|
694
797
|
{
|
695
|
-
"name": "
|
798
|
+
"name": "size",
|
696
799
|
"type": {
|
697
|
-
"text": "
|
698
|
-
}
|
800
|
+
"text": "AvatarSize"
|
801
|
+
}
|
802
|
+
}
|
803
|
+
]
|
804
|
+
},
|
805
|
+
{
|
806
|
+
"kind": "field",
|
807
|
+
"name": "src",
|
808
|
+
"type": {
|
809
|
+
"text": "string | undefined"
|
810
|
+
},
|
811
|
+
"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.",
|
812
|
+
"attribute": "src",
|
813
|
+
"inheritedFrom": {
|
814
|
+
"name": "AvatarComponentMixin",
|
815
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
816
|
+
}
|
817
|
+
},
|
818
|
+
{
|
819
|
+
"kind": "field",
|
820
|
+
"name": "initials",
|
821
|
+
"type": {
|
822
|
+
"text": "string | undefined"
|
823
|
+
},
|
824
|
+
"description": "The initials to be displayed for the avatar.",
|
825
|
+
"attribute": "initials",
|
826
|
+
"inheritedFrom": {
|
827
|
+
"name": "AvatarComponentMixin",
|
828
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
829
|
+
}
|
830
|
+
},
|
831
|
+
{
|
832
|
+
"kind": "field",
|
833
|
+
"name": "presence",
|
834
|
+
"type": {
|
835
|
+
"text": "PresenceType | undefined"
|
836
|
+
},
|
837
|
+
"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`",
|
838
|
+
"attribute": "presence",
|
839
|
+
"inheritedFrom": {
|
840
|
+
"name": "AvatarComponentMixin",
|
841
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
842
|
+
}
|
843
|
+
},
|
844
|
+
{
|
845
|
+
"kind": "field",
|
846
|
+
"name": "size",
|
847
|
+
"type": {
|
848
|
+
"text": "ButtonSize"
|
849
|
+
},
|
850
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
851
|
+
"default": "32",
|
852
|
+
"attribute": "size",
|
853
|
+
"reflects": true,
|
854
|
+
"inheritedFrom": {
|
855
|
+
"name": "Buttonsimple",
|
856
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
857
|
+
}
|
858
|
+
},
|
859
|
+
{
|
860
|
+
"kind": "field",
|
861
|
+
"name": "counter",
|
862
|
+
"type": {
|
863
|
+
"text": "number | undefined"
|
864
|
+
},
|
865
|
+
"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`.",
|
866
|
+
"attribute": "counter",
|
867
|
+
"inheritedFrom": {
|
868
|
+
"name": "AvatarComponentMixin",
|
869
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
870
|
+
}
|
871
|
+
},
|
872
|
+
{
|
873
|
+
"kind": "field",
|
874
|
+
"name": "isTyping",
|
875
|
+
"type": {
|
876
|
+
"text": "boolean"
|
877
|
+
},
|
878
|
+
"default": "false",
|
879
|
+
"description": "Represents the typing indicator when the user is typing.",
|
880
|
+
"attribute": "is-typing",
|
881
|
+
"inheritedFrom": {
|
882
|
+
"name": "AvatarComponentMixin",
|
883
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
884
|
+
}
|
885
|
+
},
|
886
|
+
{
|
887
|
+
"kind": "field",
|
888
|
+
"name": "iconName",
|
889
|
+
"type": {
|
890
|
+
"text": "IconNames | undefined"
|
891
|
+
},
|
892
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
893
|
+
"attribute": "icon-name",
|
894
|
+
"inheritedFrom": {
|
895
|
+
"name": "IconNameMixin",
|
896
|
+
"module": "utils/mixins/IconNameMixin.js"
|
897
|
+
}
|
898
|
+
},
|
899
|
+
{
|
900
|
+
"kind": "field",
|
901
|
+
"name": "tabIndex",
|
902
|
+
"type": {
|
903
|
+
"text": "number"
|
904
|
+
},
|
905
|
+
"default": "0",
|
906
|
+
"description": "This property specifies the tab order of the element.",
|
907
|
+
"attribute": "tabIndex",
|
908
|
+
"reflects": true,
|
909
|
+
"inheritedFrom": {
|
910
|
+
"name": "TabIndexMixin",
|
911
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
912
|
+
}
|
913
|
+
},
|
914
|
+
{
|
915
|
+
"kind": "field",
|
916
|
+
"name": "disabled",
|
917
|
+
"type": {
|
918
|
+
"text": "boolean | undefined"
|
919
|
+
},
|
920
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
921
|
+
"default": "undefined",
|
922
|
+
"attribute": "disabled",
|
923
|
+
"reflects": true,
|
924
|
+
"inheritedFrom": {
|
925
|
+
"name": "DisabledMixin",
|
926
|
+
"module": "utils/mixins/DisabledMixin.js"
|
927
|
+
}
|
928
|
+
},
|
929
|
+
{
|
930
|
+
"kind": "field",
|
931
|
+
"name": "active",
|
932
|
+
"type": {
|
933
|
+
"text": "boolean"
|
934
|
+
},
|
935
|
+
"default": "false",
|
936
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
937
|
+
"attribute": "active",
|
938
|
+
"reflects": true,
|
939
|
+
"inheritedFrom": {
|
940
|
+
"name": "Buttonsimple",
|
941
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
942
|
+
}
|
943
|
+
},
|
944
|
+
{
|
945
|
+
"kind": "field",
|
946
|
+
"name": "softDisabled",
|
947
|
+
"type": {
|
948
|
+
"text": "boolean"
|
949
|
+
},
|
950
|
+
"default": "false",
|
951
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
952
|
+
"attribute": "soft-disabled",
|
953
|
+
"inheritedFrom": {
|
954
|
+
"name": "Buttonsimple",
|
955
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
956
|
+
}
|
957
|
+
},
|
958
|
+
{
|
959
|
+
"kind": "field",
|
960
|
+
"name": "role",
|
961
|
+
"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.",
|
962
|
+
"default": "button",
|
963
|
+
"attribute": "role",
|
964
|
+
"reflects": true,
|
965
|
+
"inheritedFrom": {
|
966
|
+
"name": "Buttonsimple",
|
967
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
968
|
+
}
|
969
|
+
},
|
970
|
+
{
|
971
|
+
"kind": "field",
|
972
|
+
"name": "type",
|
973
|
+
"type": {
|
974
|
+
"text": "ButtonType"
|
975
|
+
},
|
976
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
977
|
+
"default": "button",
|
978
|
+
"attribute": "type",
|
979
|
+
"reflects": true,
|
980
|
+
"inheritedFrom": {
|
981
|
+
"name": "Buttonsimple",
|
982
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
983
|
+
}
|
984
|
+
},
|
985
|
+
{
|
986
|
+
"kind": "method",
|
987
|
+
"name": "executeAction",
|
988
|
+
"privacy": "protected",
|
989
|
+
"inheritedFrom": {
|
990
|
+
"name": "Buttonsimple",
|
991
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
992
|
+
}
|
993
|
+
},
|
994
|
+
{
|
995
|
+
"kind": "method",
|
996
|
+
"name": "setActive",
|
997
|
+
"privacy": "protected",
|
998
|
+
"parameters": [
|
999
|
+
{
|
1000
|
+
"name": "element",
|
1001
|
+
"type": {
|
1002
|
+
"text": "HTMLElement"
|
1003
|
+
},
|
699
1004
|
"description": "The button element"
|
700
1005
|
},
|
701
1006
|
{
|
@@ -961,342 +1266,98 @@
|
|
961
1266
|
}
|
962
1267
|
},
|
963
1268
|
{
|
964
|
-
"name": "tabIndex",
|
965
|
-
"type": {
|
966
|
-
"text": "number"
|
967
|
-
},
|
968
|
-
"default": "0",
|
969
|
-
"description": "This property specifies the tab order of the element.",
|
970
|
-
"fieldName": "tabIndex",
|
971
|
-
"inheritedFrom": {
|
972
|
-
"name": "TabIndexMixin",
|
973
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
974
|
-
}
|
975
|
-
},
|
976
|
-
{
|
977
|
-
"name": "disabled",
|
978
|
-
"type": {
|
979
|
-
"text": "boolean | undefined"
|
980
|
-
},
|
981
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
982
|
-
"default": "undefined",
|
983
|
-
"fieldName": "disabled",
|
984
|
-
"inheritedFrom": {
|
985
|
-
"name": "DisabledMixin",
|
986
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
987
|
-
}
|
988
|
-
},
|
989
|
-
{
|
990
|
-
"name": "active",
|
991
|
-
"type": {
|
992
|
-
"text": "boolean"
|
993
|
-
},
|
994
|
-
"default": "false",
|
995
|
-
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
996
|
-
"fieldName": "active",
|
997
|
-
"inheritedFrom": {
|
998
|
-
"name": "Buttonsimple",
|
999
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1000
|
-
}
|
1001
|
-
},
|
1002
|
-
{
|
1003
|
-
"name": "soft-disabled",
|
1004
|
-
"type": {
|
1005
|
-
"text": "boolean"
|
1006
|
-
},
|
1007
|
-
"default": "false",
|
1008
|
-
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
1009
|
-
"fieldName": "softDisabled",
|
1010
|
-
"inheritedFrom": {
|
1011
|
-
"name": "Buttonsimple",
|
1012
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1013
|
-
}
|
1014
|
-
},
|
1015
|
-
{
|
1016
|
-
"name": "role",
|
1017
|
-
"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.",
|
1018
|
-
"default": "button",
|
1019
|
-
"fieldName": "role",
|
1020
|
-
"inheritedFrom": {
|
1021
|
-
"name": "Buttonsimple",
|
1022
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1023
|
-
}
|
1024
|
-
},
|
1025
|
-
{
|
1026
|
-
"name": "type",
|
1027
|
-
"type": {
|
1028
|
-
"text": "ButtonType"
|
1029
|
-
},
|
1030
|
-
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
1031
|
-
"default": "button",
|
1032
|
-
"fieldName": "type",
|
1033
|
-
"inheritedFrom": {
|
1034
|
-
"name": "Buttonsimple",
|
1035
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1036
|
-
}
|
1037
|
-
}
|
1038
|
-
],
|
1039
|
-
"mixins": [
|
1040
|
-
{
|
1041
|
-
"name": "AvatarComponentMixin",
|
1042
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
1043
|
-
},
|
1044
|
-
{
|
1045
|
-
"name": "IconNameMixin",
|
1046
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
1047
|
-
}
|
1048
|
-
],
|
1049
|
-
"superclass": {
|
1050
|
-
"name": "Buttonsimple",
|
1051
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
1052
|
-
},
|
1053
|
-
"tagName": "mdc-avatarbutton",
|
1054
|
-
"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 */",
|
1055
|
-
"customElement": true
|
1056
|
-
}
|
1057
|
-
],
|
1058
|
-
"exports": [
|
1059
|
-
{
|
1060
|
-
"kind": "js",
|
1061
|
-
"name": "default",
|
1062
|
-
"declaration": {
|
1063
|
-
"name": "AvatarButton",
|
1064
|
-
"module": "components/avatarbutton/avatarbutton.component.js"
|
1065
|
-
}
|
1066
|
-
}
|
1067
|
-
]
|
1068
|
-
},
|
1069
|
-
{
|
1070
|
-
"kind": "javascript-module",
|
1071
|
-
"path": "components/avatar/avatar.component.js",
|
1072
|
-
"declarations": [
|
1073
|
-
{
|
1074
|
-
"kind": "class",
|
1075
|
-
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
1076
|
-
"name": "Avatar",
|
1077
|
-
"cssProperties": [
|
1078
|
-
{
|
1079
|
-
"description": "Allows customization of the default background color.",
|
1080
|
-
"name": "--mdc-avatar-default-background-color"
|
1081
|
-
},
|
1082
|
-
{
|
1083
|
-
"description": "Allows customization of the default foreground color.",
|
1084
|
-
"name": "--mdc-avatar-default-foreground-color"
|
1085
|
-
},
|
1086
|
-
{
|
1087
|
-
"description": "Allows customization of the loading indicator background color.",
|
1088
|
-
"name": "--mdc-avatar-loading-indicator-background-color"
|
1089
|
-
},
|
1090
|
-
{
|
1091
|
-
"description": "Allows customization of the loading indicator foreground color.",
|
1092
|
-
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
1093
|
-
},
|
1094
|
-
{
|
1095
|
-
"description": "Allows customization of the loading overlay background color.",
|
1096
|
-
"name": "--mdc-avatar-loading-overlay-background-color"
|
1097
|
-
}
|
1098
|
-
],
|
1099
|
-
"members": [
|
1100
|
-
{
|
1101
|
-
"kind": "field",
|
1102
|
-
"name": "src",
|
1103
|
-
"type": {
|
1104
|
-
"text": "string | undefined"
|
1105
|
-
},
|
1106
|
-
"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.",
|
1107
|
-
"attribute": "src",
|
1108
|
-
"inheritedFrom": {
|
1109
|
-
"name": "AvatarComponentMixin",
|
1110
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
1111
|
-
}
|
1112
|
-
},
|
1113
|
-
{
|
1114
|
-
"kind": "field",
|
1115
|
-
"name": "initials",
|
1116
|
-
"type": {
|
1117
|
-
"text": "string | undefined"
|
1118
|
-
},
|
1119
|
-
"description": "The initials to be displayed for the avatar.",
|
1120
|
-
"attribute": "initials",
|
1121
|
-
"inheritedFrom": {
|
1122
|
-
"name": "AvatarComponentMixin",
|
1123
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
1124
|
-
}
|
1125
|
-
},
|
1126
|
-
{
|
1127
|
-
"kind": "field",
|
1128
|
-
"name": "presence",
|
1129
|
-
"type": {
|
1130
|
-
"text": "PresenceType | undefined"
|
1131
|
-
},
|
1132
|
-
"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`",
|
1133
|
-
"attribute": "presence",
|
1134
|
-
"inheritedFrom": {
|
1135
|
-
"name": "AvatarComponentMixin",
|
1136
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
1137
|
-
}
|
1138
|
-
},
|
1139
|
-
{
|
1140
|
-
"kind": "field",
|
1141
|
-
"name": "size",
|
1142
|
-
"type": {
|
1143
|
-
"text": "AvatarSize"
|
1144
|
-
},
|
1145
|
-
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
1146
|
-
"default": "32",
|
1147
|
-
"attribute": "size",
|
1148
|
-
"reflects": true,
|
1149
|
-
"inheritedFrom": {
|
1150
|
-
"name": "AvatarComponentMixin",
|
1151
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
1152
|
-
}
|
1153
|
-
},
|
1154
|
-
{
|
1155
|
-
"kind": "field",
|
1156
|
-
"name": "counter",
|
1157
|
-
"type": {
|
1158
|
-
"text": "number | undefined"
|
1159
|
-
},
|
1160
|
-
"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`.",
|
1161
|
-
"attribute": "counter",
|
1162
|
-
"inheritedFrom": {
|
1163
|
-
"name": "AvatarComponentMixin",
|
1164
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
1165
|
-
}
|
1166
|
-
},
|
1167
|
-
{
|
1168
|
-
"kind": "field",
|
1169
|
-
"name": "isTyping",
|
1170
|
-
"type": {
|
1171
|
-
"text": "boolean"
|
1172
|
-
},
|
1173
|
-
"default": "false",
|
1174
|
-
"description": "Represents the typing indicator when the user is typing.",
|
1175
|
-
"attribute": "is-typing",
|
1176
|
-
"inheritedFrom": {
|
1177
|
-
"name": "AvatarComponentMixin",
|
1178
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
1179
|
-
}
|
1180
|
-
},
|
1181
|
-
{
|
1182
|
-
"kind": "field",
|
1183
|
-
"name": "iconName",
|
1184
|
-
"type": {
|
1185
|
-
"text": "IconNames | undefined"
|
1186
|
-
},
|
1187
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
1188
|
-
"attribute": "icon-name",
|
1189
|
-
"inheritedFrom": {
|
1190
|
-
"name": "IconNameMixin",
|
1191
|
-
"module": "utils/mixins/IconNameMixin.js"
|
1192
|
-
}
|
1193
|
-
}
|
1194
|
-
],
|
1195
|
-
"mixins": [
|
1196
|
-
{
|
1197
|
-
"name": "AvatarComponentMixin",
|
1198
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
1199
|
-
},
|
1200
|
-
{
|
1201
|
-
"name": "IconNameMixin",
|
1202
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
1203
|
-
}
|
1204
|
-
],
|
1205
|
-
"superclass": {
|
1206
|
-
"name": "Component",
|
1207
|
-
"module": "/src/models"
|
1208
|
-
},
|
1209
|
-
"tagName": "mdc-avatar",
|
1210
|
-
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n */",
|
1211
|
-
"customElement": true,
|
1212
|
-
"attributes": [
|
1213
|
-
{
|
1214
|
-
"name": "src",
|
1215
|
-
"type": {
|
1216
|
-
"text": "string | undefined"
|
1217
|
-
},
|
1218
|
-
"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.",
|
1219
|
-
"fieldName": "src",
|
1220
|
-
"inheritedFrom": {
|
1221
|
-
"name": "AvatarComponentMixin",
|
1222
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
1223
|
-
}
|
1224
|
-
},
|
1225
|
-
{
|
1226
|
-
"name": "initials",
|
1227
|
-
"type": {
|
1228
|
-
"text": "string | undefined"
|
1229
|
-
},
|
1230
|
-
"description": "The initials to be displayed for the avatar.",
|
1231
|
-
"fieldName": "initials",
|
1232
|
-
"inheritedFrom": {
|
1233
|
-
"name": "AvatarComponentMixin",
|
1234
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
1235
|
-
}
|
1236
|
-
},
|
1237
|
-
{
|
1238
|
-
"name": "presence",
|
1269
|
+
"name": "tabIndex",
|
1239
1270
|
"type": {
|
1240
|
-
"text": "
|
1271
|
+
"text": "number"
|
1241
1272
|
},
|
1242
|
-
"
|
1243
|
-
"
|
1273
|
+
"default": "0",
|
1274
|
+
"description": "This property specifies the tab order of the element.",
|
1275
|
+
"fieldName": "tabIndex",
|
1244
1276
|
"inheritedFrom": {
|
1245
|
-
"name": "
|
1246
|
-
"module": "src/utils/mixins/
|
1277
|
+
"name": "TabIndexMixin",
|
1278
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
1247
1279
|
}
|
1248
1280
|
},
|
1249
1281
|
{
|
1250
|
-
"name": "
|
1282
|
+
"name": "disabled",
|
1251
1283
|
"type": {
|
1252
|
-
"text": "
|
1284
|
+
"text": "boolean | undefined"
|
1253
1285
|
},
|
1254
|
-
"description": "
|
1255
|
-
"default": "
|
1256
|
-
"fieldName": "
|
1286
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
1287
|
+
"default": "undefined",
|
1288
|
+
"fieldName": "disabled",
|
1257
1289
|
"inheritedFrom": {
|
1258
|
-
"name": "
|
1259
|
-
"module": "src/utils/mixins/
|
1290
|
+
"name": "DisabledMixin",
|
1291
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
1260
1292
|
}
|
1261
1293
|
},
|
1262
1294
|
{
|
1263
|
-
"name": "
|
1295
|
+
"name": "active",
|
1264
1296
|
"type": {
|
1265
|
-
"text": "
|
1297
|
+
"text": "boolean"
|
1266
1298
|
},
|
1267
|
-
"
|
1268
|
-
"
|
1299
|
+
"default": "false",
|
1300
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
1301
|
+
"fieldName": "active",
|
1269
1302
|
"inheritedFrom": {
|
1270
|
-
"name": "
|
1271
|
-
"module": "src/
|
1303
|
+
"name": "Buttonsimple",
|
1304
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1272
1305
|
}
|
1273
1306
|
},
|
1274
1307
|
{
|
1275
|
-
"name": "
|
1308
|
+
"name": "soft-disabled",
|
1276
1309
|
"type": {
|
1277
1310
|
"text": "boolean"
|
1278
1311
|
},
|
1279
1312
|
"default": "false",
|
1280
|
-
"description": "
|
1281
|
-
"fieldName": "
|
1313
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
1314
|
+
"fieldName": "softDisabled",
|
1282
1315
|
"inheritedFrom": {
|
1283
|
-
"name": "
|
1284
|
-
"module": "src/
|
1316
|
+
"name": "Buttonsimple",
|
1317
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1285
1318
|
}
|
1286
1319
|
},
|
1287
1320
|
{
|
1288
|
-
"name": "
|
1321
|
+
"name": "role",
|
1322
|
+
"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.",
|
1323
|
+
"default": "button",
|
1324
|
+
"fieldName": "role",
|
1325
|
+
"inheritedFrom": {
|
1326
|
+
"name": "Buttonsimple",
|
1327
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1328
|
+
}
|
1329
|
+
},
|
1330
|
+
{
|
1331
|
+
"name": "type",
|
1289
1332
|
"type": {
|
1290
|
-
"text": "
|
1333
|
+
"text": "ButtonType"
|
1291
1334
|
},
|
1292
|
-
"description": "
|
1293
|
-
"
|
1335
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
1336
|
+
"default": "button",
|
1337
|
+
"fieldName": "type",
|
1294
1338
|
"inheritedFrom": {
|
1295
|
-
"name": "
|
1296
|
-
"module": "src/
|
1339
|
+
"name": "Buttonsimple",
|
1340
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
1297
1341
|
}
|
1298
1342
|
}
|
1299
|
-
]
|
1343
|
+
],
|
1344
|
+
"mixins": [
|
1345
|
+
{
|
1346
|
+
"name": "AvatarComponentMixin",
|
1347
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
1348
|
+
},
|
1349
|
+
{
|
1350
|
+
"name": "IconNameMixin",
|
1351
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
1352
|
+
}
|
1353
|
+
],
|
1354
|
+
"superclass": {
|
1355
|
+
"name": "Buttonsimple",
|
1356
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
1357
|
+
},
|
1358
|
+
"tagName": "mdc-avatarbutton",
|
1359
|
+
"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 */",
|
1360
|
+
"customElement": true
|
1300
1361
|
}
|
1301
1362
|
],
|
1302
1363
|
"exports": [
|
@@ -1304,8 +1365,8 @@
|
|
1304
1365
|
"kind": "js",
|
1305
1366
|
"name": "default",
|
1306
1367
|
"declaration": {
|
1307
|
-
"name": "
|
1308
|
-
"module": "components/
|
1368
|
+
"name": "AvatarButton",
|
1369
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
1309
1370
|
}
|
1310
1371
|
}
|
1311
1372
|
]
|
@@ -13006,238 +13067,105 @@
|
|
13006
13067
|
}
|
13007
13068
|
},
|
13008
13069
|
{
|
13009
|
-
"name": "disabled",
|
13010
|
-
"type": {
|
13011
|
-
"text": "boolean | undefined"
|
13012
|
-
},
|
13013
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
13014
|
-
"default": "undefined",
|
13015
|
-
"fieldName": "disabled",
|
13016
|
-
"inheritedFrom": {
|
13017
|
-
"name": "FormfieldWrapper",
|
13018
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13019
|
-
}
|
13020
|
-
},
|
13021
|
-
{
|
13022
|
-
"name": "label",
|
13023
|
-
"type": {
|
13024
|
-
"text": "string | undefined"
|
13025
|
-
},
|
13026
|
-
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
13027
|
-
"fieldName": "label",
|
13028
|
-
"inheritedFrom": {
|
13029
|
-
"name": "FormfieldWrapper",
|
13030
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13031
|
-
}
|
13032
|
-
},
|
13033
|
-
{
|
13034
|
-
"name": "required-label",
|
13035
|
-
"type": {
|
13036
|
-
"text": "string | undefined"
|
13037
|
-
},
|
13038
|
-
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
13039
|
-
"fieldName": "requiredLabel",
|
13040
|
-
"inheritedFrom": {
|
13041
|
-
"name": "FormfieldWrapper",
|
13042
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13043
|
-
}
|
13044
|
-
},
|
13045
|
-
{
|
13046
|
-
"name": "id",
|
13047
|
-
"type": {
|
13048
|
-
"text": "string"
|
13049
|
-
},
|
13050
|
-
"default": "''",
|
13051
|
-
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
13052
|
-
"fieldName": "id",
|
13053
|
-
"inheritedFrom": {
|
13054
|
-
"name": "FormfieldWrapper",
|
13055
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13056
|
-
}
|
13057
|
-
},
|
13058
|
-
{
|
13059
|
-
"name": "help-text-type",
|
13060
|
-
"type": {
|
13061
|
-
"text": "ValidationType"
|
13062
|
-
},
|
13063
|
-
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
13064
|
-
"fieldName": "helpTextType",
|
13065
|
-
"inheritedFrom": {
|
13066
|
-
"name": "FormfieldWrapper",
|
13067
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13068
|
-
}
|
13069
|
-
},
|
13070
|
-
{
|
13071
|
-
"name": "help-text",
|
13072
|
-
"type": {
|
13073
|
-
"text": "string | undefined"
|
13074
|
-
},
|
13075
|
-
"description": "The help text that is displayed below the input field.",
|
13076
|
-
"fieldName": "helpText",
|
13077
|
-
"inheritedFrom": {
|
13078
|
-
"name": "FormfieldWrapper",
|
13079
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13080
|
-
}
|
13081
|
-
}
|
13082
|
-
],
|
13083
|
-
"superclass": {
|
13084
|
-
"name": "FormfieldGroup",
|
13085
|
-
"module": "/src/components/formfieldgroup"
|
13086
|
-
},
|
13087
|
-
"tagName": "mdc-radiogroup",
|
13088
|
-
"jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
|
13089
|
-
"customElement": true,
|
13090
|
-
"slots": [
|
13091
|
-
{
|
13092
|
-
"description": "This is a default slot for checkbox or toggle components.",
|
13093
|
-
"name": "default",
|
13094
|
-
"inheritedFrom": {
|
13095
|
-
"name": "FormfieldGroup",
|
13096
|
-
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
13097
|
-
}
|
13098
|
-
},
|
13099
|
-
{
|
13100
|
-
"description": "slot to add the label info icon",
|
13101
|
-
"name": "label-info",
|
13102
|
-
"inheritedFrom": {
|
13103
|
-
"name": "FormfieldWrapper",
|
13104
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13105
|
-
}
|
13106
|
-
}
|
13107
|
-
]
|
13108
|
-
}
|
13109
|
-
],
|
13110
|
-
"exports": [
|
13111
|
-
{
|
13112
|
-
"kind": "js",
|
13113
|
-
"name": "default",
|
13114
|
-
"declaration": {
|
13115
|
-
"name": "RadioGroup",
|
13116
|
-
"module": "components/radiogroup/radiogroup.component.js"
|
13117
|
-
}
|
13118
|
-
}
|
13119
|
-
]
|
13120
|
-
},
|
13121
|
-
{
|
13122
|
-
"kind": "javascript-module",
|
13123
|
-
"path": "components/spinner/spinner.component.js",
|
13124
|
-
"declarations": [
|
13125
|
-
{
|
13126
|
-
"kind": "class",
|
13127
|
-
"description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
|
13128
|
-
"name": "Spinner",
|
13129
|
-
"cssProperties": [
|
13130
|
-
{
|
13131
|
-
"description": "Allows customization of the default spinner color.",
|
13132
|
-
"name": "--mdc-spinner-default-color"
|
13133
|
-
},
|
13134
|
-
{
|
13135
|
-
"description": "Allows customization of the inverted spinner color.",
|
13136
|
-
"name": "--mdc-spinner-inverted-color"
|
13137
|
-
},
|
13138
|
-
{
|
13139
|
-
"description": "Allows customization of the spinner Button variant color.",
|
13140
|
-
"name": "--mdc-spinner-button-variant-color"
|
13141
|
-
},
|
13142
|
-
{
|
13143
|
-
"description": "Allows customization of the spinner size.",
|
13144
|
-
"name": "--mdc-spinner-size"
|
13145
|
-
}
|
13146
|
-
],
|
13147
|
-
"cssParts": [
|
13148
|
-
{
|
13149
|
-
"description": "The svg which contains the circle spinner.",
|
13150
|
-
"name": "container"
|
13151
|
-
},
|
13152
|
-
{
|
13153
|
-
"description": "The circle of the spinner.",
|
13154
|
-
"name": "circle"
|
13155
|
-
}
|
13156
|
-
],
|
13157
|
-
"members": [
|
13158
|
-
{
|
13159
|
-
"kind": "field",
|
13160
|
-
"name": "inverted",
|
13161
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
13162
|
-
"default": "false",
|
13163
|
-
"attribute": "inverted",
|
13164
|
-
"reflects": true
|
13165
|
-
},
|
13166
|
-
{
|
13167
|
-
"kind": "field",
|
13168
|
-
"name": "size",
|
13070
|
+
"name": "disabled",
|
13169
13071
|
"type": {
|
13170
|
-
"text": "
|
13072
|
+
"text": "boolean | undefined"
|
13171
13073
|
},
|
13172
|
-
"description": "
|
13173
|
-
"default": "
|
13174
|
-
"
|
13175
|
-
"
|
13074
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
13075
|
+
"default": "undefined",
|
13076
|
+
"fieldName": "disabled",
|
13077
|
+
"inheritedFrom": {
|
13078
|
+
"name": "FormfieldWrapper",
|
13079
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13080
|
+
}
|
13176
13081
|
},
|
13177
13082
|
{
|
13178
|
-
"
|
13179
|
-
"name": "ariaLabel",
|
13083
|
+
"name": "label",
|
13180
13084
|
"type": {
|
13181
|
-
"text": "string |
|
13085
|
+
"text": "string | undefined"
|
13182
13086
|
},
|
13183
|
-
"
|
13184
|
-
"
|
13185
|
-
"
|
13087
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
13088
|
+
"fieldName": "label",
|
13089
|
+
"inheritedFrom": {
|
13090
|
+
"name": "FormfieldWrapper",
|
13091
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13092
|
+
}
|
13186
13093
|
},
|
13187
13094
|
{
|
13188
|
-
"
|
13189
|
-
"name": "variant",
|
13095
|
+
"name": "required-label",
|
13190
13096
|
"type": {
|
13191
|
-
"text": "
|
13097
|
+
"text": "string | undefined"
|
13192
13098
|
},
|
13193
|
-
"description": "
|
13194
|
-
"
|
13195
|
-
"
|
13196
|
-
|
13197
|
-
|
13198
|
-
|
13199
|
-
"attributes": [
|
13200
|
-
{
|
13201
|
-
"name": "inverted",
|
13202
|
-
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
13203
|
-
"default": "false",
|
13204
|
-
"fieldName": "inverted"
|
13099
|
+
"description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
|
13100
|
+
"fieldName": "requiredLabel",
|
13101
|
+
"inheritedFrom": {
|
13102
|
+
"name": "FormfieldWrapper",
|
13103
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13104
|
+
}
|
13205
13105
|
},
|
13206
13106
|
{
|
13207
|
-
"name": "
|
13107
|
+
"name": "id",
|
13208
13108
|
"type": {
|
13209
|
-
"text": "
|
13109
|
+
"text": "string"
|
13210
13110
|
},
|
13211
|
-
"
|
13212
|
-
"
|
13213
|
-
"fieldName": "
|
13111
|
+
"default": "''",
|
13112
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
13113
|
+
"fieldName": "id",
|
13114
|
+
"inheritedFrom": {
|
13115
|
+
"name": "FormfieldWrapper",
|
13116
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13117
|
+
}
|
13214
13118
|
},
|
13215
13119
|
{
|
13216
|
-
"name": "
|
13120
|
+
"name": "help-text-type",
|
13217
13121
|
"type": {
|
13218
|
-
"text": "
|
13122
|
+
"text": "ValidationType"
|
13219
13123
|
},
|
13220
|
-
"
|
13221
|
-
"
|
13222
|
-
"
|
13124
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
13125
|
+
"fieldName": "helpTextType",
|
13126
|
+
"inheritedFrom": {
|
13127
|
+
"name": "FormfieldWrapper",
|
13128
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13129
|
+
}
|
13223
13130
|
},
|
13224
13131
|
{
|
13225
|
-
"name": "
|
13132
|
+
"name": "help-text",
|
13226
13133
|
"type": {
|
13227
|
-
"text": "
|
13134
|
+
"text": "string | undefined"
|
13228
13135
|
},
|
13229
|
-
"description": "
|
13230
|
-
"
|
13231
|
-
"
|
13136
|
+
"description": "The help text that is displayed below the input field.",
|
13137
|
+
"fieldName": "helpText",
|
13138
|
+
"inheritedFrom": {
|
13139
|
+
"name": "FormfieldWrapper",
|
13140
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13141
|
+
}
|
13232
13142
|
}
|
13233
13143
|
],
|
13234
13144
|
"superclass": {
|
13235
|
-
"name": "
|
13236
|
-
"module": "/src/
|
13145
|
+
"name": "FormfieldGroup",
|
13146
|
+
"module": "/src/components/formfieldgroup"
|
13237
13147
|
},
|
13238
|
-
"tagName": "mdc-
|
13239
|
-
"jsDoc": "/**\n * `mdc-
|
13240
|
-
"customElement": true
|
13148
|
+
"tagName": "mdc-radiogroup",
|
13149
|
+
"jsDoc": "/**\n * `mdc-radiogroup` - This is the wrapper component for radio buttons which are grouped together.\n * It can have a header text and a description. It enables users to select a single option from a set of options.\n * It is often used in forms, settings, and selection in lists. It automatically group the radio buttons inside it.\n *\n * @tagname mdc-radiogroup\n *\n * @cssproperty --mdc-radiogroup-description-text-normal - color of the description text\n *\n */",
|
13150
|
+
"customElement": true,
|
13151
|
+
"slots": [
|
13152
|
+
{
|
13153
|
+
"description": "This is a default slot for checkbox or toggle components.",
|
13154
|
+
"name": "default",
|
13155
|
+
"inheritedFrom": {
|
13156
|
+
"name": "FormfieldGroup",
|
13157
|
+
"module": "src/components/formfieldgroup/formfieldgroup.component.ts"
|
13158
|
+
}
|
13159
|
+
},
|
13160
|
+
{
|
13161
|
+
"description": "slot to add the label info icon",
|
13162
|
+
"name": "label-info",
|
13163
|
+
"inheritedFrom": {
|
13164
|
+
"name": "FormfieldWrapper",
|
13165
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
13166
|
+
}
|
13167
|
+
}
|
13168
|
+
]
|
13241
13169
|
}
|
13242
13170
|
],
|
13243
13171
|
"exports": [
|
@@ -13245,8 +13173,8 @@
|
|
13245
13173
|
"kind": "js",
|
13246
13174
|
"name": "default",
|
13247
13175
|
"declaration": {
|
13248
|
-
"name": "
|
13249
|
-
"module": "components/
|
13176
|
+
"name": "RadioGroup",
|
13177
|
+
"module": "components/radiogroup/radiogroup.component.js"
|
13250
13178
|
}
|
13251
13179
|
}
|
13252
13180
|
]
|
@@ -14449,6 +14377,139 @@
|
|
14449
14377
|
}
|
14450
14378
|
]
|
14451
14379
|
},
|
14380
|
+
{
|
14381
|
+
"kind": "javascript-module",
|
14382
|
+
"path": "components/spinner/spinner.component.js",
|
14383
|
+
"declarations": [
|
14384
|
+
{
|
14385
|
+
"kind": "class",
|
14386
|
+
"description": "`mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\nit's best for cases where the progress or duration of a process is variable or unknown.\n\nSpinner Variants:\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\nicon or label text.\n\nSpinner Sizes:\n- **Large (96px)**: Use when replacing entire regions or pages that are still loading\n- **MidSize (48px) (Default)**: Use for most use cases.\n- **Small (24px)**: Use for inline with loading text.\n\nCustomisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\nCSS property.\n\nSpinner Colors:\n- **Default**: Use for most use cases.\n- **Inverted**: Only to be used within inverted components, such as coachmarks.\n\nRegarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\nwill be unset\nand aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.",
|
14387
|
+
"name": "Spinner",
|
14388
|
+
"cssProperties": [
|
14389
|
+
{
|
14390
|
+
"description": "Allows customization of the default spinner color.",
|
14391
|
+
"name": "--mdc-spinner-default-color"
|
14392
|
+
},
|
14393
|
+
{
|
14394
|
+
"description": "Allows customization of the inverted spinner color.",
|
14395
|
+
"name": "--mdc-spinner-inverted-color"
|
14396
|
+
},
|
14397
|
+
{
|
14398
|
+
"description": "Allows customization of the spinner Button variant color.",
|
14399
|
+
"name": "--mdc-spinner-button-variant-color"
|
14400
|
+
},
|
14401
|
+
{
|
14402
|
+
"description": "Allows customization of the spinner size.",
|
14403
|
+
"name": "--mdc-spinner-size"
|
14404
|
+
}
|
14405
|
+
],
|
14406
|
+
"cssParts": [
|
14407
|
+
{
|
14408
|
+
"description": "The svg which contains the circle spinner.",
|
14409
|
+
"name": "container"
|
14410
|
+
},
|
14411
|
+
{
|
14412
|
+
"description": "The circle of the spinner.",
|
14413
|
+
"name": "circle"
|
14414
|
+
}
|
14415
|
+
],
|
14416
|
+
"members": [
|
14417
|
+
{
|
14418
|
+
"kind": "field",
|
14419
|
+
"name": "inverted",
|
14420
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
14421
|
+
"default": "false",
|
14422
|
+
"attribute": "inverted",
|
14423
|
+
"reflects": true
|
14424
|
+
},
|
14425
|
+
{
|
14426
|
+
"kind": "field",
|
14427
|
+
"name": "size",
|
14428
|
+
"type": {
|
14429
|
+
"text": "SpinnerSize | undefined"
|
14430
|
+
},
|
14431
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
14432
|
+
"default": "midsize",
|
14433
|
+
"attribute": "size",
|
14434
|
+
"reflects": true
|
14435
|
+
},
|
14436
|
+
{
|
14437
|
+
"kind": "field",
|
14438
|
+
"name": "ariaLabel",
|
14439
|
+
"type": {
|
14440
|
+
"text": "string | null"
|
14441
|
+
},
|
14442
|
+
"default": "null",
|
14443
|
+
"description": "Aria-label attribute to be set for accessibility",
|
14444
|
+
"attribute": "aria-label"
|
14445
|
+
},
|
14446
|
+
{
|
14447
|
+
"kind": "field",
|
14448
|
+
"name": "variant",
|
14449
|
+
"type": {
|
14450
|
+
"text": "SpinnerVariant"
|
14451
|
+
},
|
14452
|
+
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
14453
|
+
"default": "standalone",
|
14454
|
+
"attribute": "variant",
|
14455
|
+
"reflects": true
|
14456
|
+
}
|
14457
|
+
],
|
14458
|
+
"attributes": [
|
14459
|
+
{
|
14460
|
+
"name": "inverted",
|
14461
|
+
"description": "The spinner color can be inverted by setting the inverted attribute to true.",
|
14462
|
+
"default": "false",
|
14463
|
+
"fieldName": "inverted"
|
14464
|
+
},
|
14465
|
+
{
|
14466
|
+
"name": "size",
|
14467
|
+
"type": {
|
14468
|
+
"text": "SpinnerSize | undefined"
|
14469
|
+
},
|
14470
|
+
"description": "Size of the spinner.\nAcceptable values include:\n\n- 'small'\n- 'midsize'\n- 'large'\n- 'undefined'",
|
14471
|
+
"default": "midsize",
|
14472
|
+
"fieldName": "size"
|
14473
|
+
},
|
14474
|
+
{
|
14475
|
+
"name": "aria-label",
|
14476
|
+
"type": {
|
14477
|
+
"text": "string | null"
|
14478
|
+
},
|
14479
|
+
"default": "null",
|
14480
|
+
"description": "Aria-label attribute to be set for accessibility",
|
14481
|
+
"fieldName": "ariaLabel"
|
14482
|
+
},
|
14483
|
+
{
|
14484
|
+
"name": "variant",
|
14485
|
+
"type": {
|
14486
|
+
"text": "SpinnerVariant"
|
14487
|
+
},
|
14488
|
+
"description": "There are 2 variants of spinner: default and button. Their coloring is different.\n- **Standalone (Default)**: Track has a blue color.\n- **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\nTo ensure a minimum 3:1 contrast ratio, change the active indicator color to be the same color as the button’s\nicon or label text.",
|
14489
|
+
"default": "standalone",
|
14490
|
+
"fieldName": "variant"
|
14491
|
+
}
|
14492
|
+
],
|
14493
|
+
"superclass": {
|
14494
|
+
"name": "Component",
|
14495
|
+
"module": "/src/models"
|
14496
|
+
},
|
14497
|
+
"tagName": "mdc-spinner",
|
14498
|
+
"jsDoc": "/**\n * `mdc-spinner` is loading spinner which is an indeterminate progress indicator, meaning\n * it's best for cases where the progress or duration of a process is variable or unknown.\n *\n * Spinner Variants:\n * - **Standalone (Default)**: Track has a blue color.\n * - **Button**: To be used when placed in a button to show that the button’s action is currently in progress.\n * To ensure a minimum 3:1 contrast ratio, the color is changed internally to be the same color as the button’s\n * icon or label text.\n *\n * Spinner Sizes:\n * - **Large (96px)**: Use when replacing entire regions or pages that are still loading\n * - **MidSize (48px) (Default)**: Use for most use cases.\n * - **Small (24px)**: Use for inline with loading text.\n *\n * Customisation of the spinner size is allowed by setting the size to undefined and using the --mdc-spinner-size\n * CSS property.\n *\n * Spinner Colors:\n * - **Default**: Use for most use cases.\n * - **Inverted**: Only to be used within inverted components, such as coachmarks.\n *\n * Regarding accessibility, if an aria-label is provided, the role will be set to 'img'; if it is absent, the role\n * will be unset\n * and aria-hidden will be set to 'true' so the spinner will be ignored by screen readers.\n *\n * @tagname mdc-spinner\n *\n * @cssproperty --mdc-spinner-default-color - Allows customization of the default spinner color.\n * @cssproperty --mdc-spinner-inverted-color - Allows customization of the inverted spinner color.\n * @cssproperty --mdc-spinner-button-variant-color - Allows customization of the spinner Button variant color.\n * @cssproperty --mdc-spinner-size - Allows customization of the spinner size.\n *\n * @csspart container - The svg which contains the circle spinner.\n * @csspart circle - The circle of the spinner.\n */",
|
14499
|
+
"customElement": true
|
14500
|
+
}
|
14501
|
+
],
|
14502
|
+
"exports": [
|
14503
|
+
{
|
14504
|
+
"kind": "js",
|
14505
|
+
"name": "default",
|
14506
|
+
"declaration": {
|
14507
|
+
"name": "Spinner",
|
14508
|
+
"module": "components/spinner/spinner.component.js"
|
14509
|
+
}
|
14510
|
+
}
|
14511
|
+
]
|
14512
|
+
},
|
14452
14513
|
{
|
14453
14514
|
"kind": "javascript-module",
|
14454
14515
|
"path": "components/tab/tab.component.js",
|