@momentum-design/components 0.70.1 → 0.70.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -3566,37 +3566,13 @@
|
|
3566
3566
|
},
|
3567
3567
|
{
|
3568
3568
|
"kind": "javascript-module",
|
3569
|
-
"path": "components/
|
3569
|
+
"path": "components/cardbutton/cardbutton.component.js",
|
3570
3570
|
"declarations": [
|
3571
3571
|
{
|
3572
3572
|
"kind": "class",
|
3573
|
-
"description": "
|
3574
|
-
"name": "
|
3573
|
+
"description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
|
3574
|
+
"name": "CardButton",
|
3575
3575
|
"slots": [
|
3576
|
-
{
|
3577
|
-
"description": "This slot is for passing the content before the body",
|
3578
|
-
"name": "before-body"
|
3579
|
-
},
|
3580
|
-
{
|
3581
|
-
"description": "This slot is for passing the text content for the card",
|
3582
|
-
"name": "body"
|
3583
|
-
},
|
3584
|
-
{
|
3585
|
-
"description": "This slot is for passing the content after the body",
|
3586
|
-
"name": "after-body"
|
3587
|
-
},
|
3588
|
-
{
|
3589
|
-
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
3590
|
-
"name": "footer-link"
|
3591
|
-
},
|
3592
|
-
{
|
3593
|
-
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
3594
|
-
"name": "footer-button-primary"
|
3595
|
-
},
|
3596
|
-
{
|
3597
|
-
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
3598
|
-
"name": "footer-button-secondary"
|
3599
|
-
},
|
3600
3576
|
{
|
3601
3577
|
"description": "This slot is for passing the content before the body",
|
3602
3578
|
"name": "before-body"
|
@@ -3794,673 +3770,794 @@
|
|
3794
3770
|
}
|
3795
3771
|
},
|
3796
3772
|
{
|
3797
|
-
"kind": "
|
3798
|
-
"name": "
|
3799
|
-
"
|
3800
|
-
|
3801
|
-
"return": {
|
3802
|
-
"type": {
|
3803
|
-
"text": ""
|
3804
|
-
}
|
3773
|
+
"kind": "field",
|
3774
|
+
"name": "tabIndex",
|
3775
|
+
"type": {
|
3776
|
+
"text": "number"
|
3805
3777
|
},
|
3778
|
+
"default": "0",
|
3779
|
+
"description": "This property specifies the tab order of the element.",
|
3780
|
+
"attribute": "tabIndex",
|
3781
|
+
"reflects": true,
|
3806
3782
|
"inheritedFrom": {
|
3807
|
-
"name": "
|
3808
|
-
"module": "
|
3783
|
+
"name": "Buttonsimple",
|
3784
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3809
3785
|
}
|
3810
|
-
}
|
3811
|
-
],
|
3812
|
-
"mixins": [
|
3813
|
-
{
|
3814
|
-
"name": "CardComponentMixin",
|
3815
|
-
"module": "/src/utils/mixins/CardComponentMixin"
|
3816
3786
|
},
|
3817
3787
|
{
|
3818
|
-
"
|
3819
|
-
"
|
3820
|
-
}
|
3821
|
-
],
|
3822
|
-
"superclass": {
|
3823
|
-
"name": "Component",
|
3824
|
-
"module": "/src/models"
|
3825
|
-
},
|
3826
|
-
"tagName": "mdc-card",
|
3827
|
-
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n */",
|
3828
|
-
"customElement": true,
|
3829
|
-
"attributes": [
|
3830
|
-
{
|
3831
|
-
"name": "card-title",
|
3788
|
+
"kind": "field",
|
3789
|
+
"name": "disabled",
|
3832
3790
|
"type": {
|
3833
|
-
"text": "
|
3791
|
+
"text": "boolean | undefined"
|
3834
3792
|
},
|
3835
|
-
"
|
3836
|
-
"
|
3837
|
-
"
|
3793
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
3794
|
+
"default": "undefined",
|
3795
|
+
"attribute": "disabled",
|
3796
|
+
"reflects": true,
|
3838
3797
|
"inheritedFrom": {
|
3839
|
-
"name": "
|
3840
|
-
"module": "
|
3798
|
+
"name": "Buttonsimple",
|
3799
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3841
3800
|
}
|
3842
3801
|
},
|
3843
3802
|
{
|
3844
|
-
"
|
3803
|
+
"kind": "field",
|
3804
|
+
"name": "active",
|
3845
3805
|
"type": {
|
3846
|
-
"text": "
|
3806
|
+
"text": "boolean | undefined"
|
3847
3807
|
},
|
3848
|
-
"
|
3849
|
-
"
|
3850
|
-
"
|
3808
|
+
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
3809
|
+
"default": "undefined",
|
3810
|
+
"attribute": "active",
|
3811
|
+
"reflects": true,
|
3851
3812
|
"inheritedFrom": {
|
3852
|
-
"name": "
|
3853
|
-
"module": "
|
3813
|
+
"name": "Buttonsimple",
|
3814
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3854
3815
|
}
|
3855
3816
|
},
|
3856
3817
|
{
|
3857
|
-
"
|
3818
|
+
"kind": "field",
|
3819
|
+
"name": "softDisabled",
|
3858
3820
|
"type": {
|
3859
|
-
"text": "
|
3821
|
+
"text": "boolean | undefined"
|
3860
3822
|
},
|
3861
|
-
"
|
3862
|
-
"
|
3863
|
-
"
|
3823
|
+
"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.",
|
3824
|
+
"default": "undefined",
|
3825
|
+
"attribute": "soft-disabled",
|
3826
|
+
"reflects": true,
|
3864
3827
|
"inheritedFrom": {
|
3865
|
-
"name": "
|
3866
|
-
"module": "
|
3828
|
+
"name": "Buttonsimple",
|
3829
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3867
3830
|
}
|
3868
3831
|
},
|
3869
3832
|
{
|
3870
|
-
"
|
3833
|
+
"kind": "field",
|
3834
|
+
"name": "size",
|
3871
3835
|
"type": {
|
3872
|
-
"text": "
|
3836
|
+
"text": "ButtonSize"
|
3873
3837
|
},
|
3874
|
-
"
|
3875
|
-
"
|
3876
|
-
"
|
3838
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
3839
|
+
"default": "32",
|
3840
|
+
"attribute": "size",
|
3841
|
+
"reflects": true,
|
3877
3842
|
"inheritedFrom": {
|
3878
|
-
"name": "
|
3879
|
-
"module": "
|
3843
|
+
"name": "Buttonsimple",
|
3844
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3880
3845
|
}
|
3881
3846
|
},
|
3882
3847
|
{
|
3883
|
-
"
|
3884
|
-
"
|
3885
|
-
|
3886
|
-
|
3887
|
-
"
|
3888
|
-
"
|
3889
|
-
"fieldName": "variant",
|
3848
|
+
"kind": "field",
|
3849
|
+
"name": "role",
|
3850
|
+
"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.",
|
3851
|
+
"default": "button",
|
3852
|
+
"attribute": "role",
|
3853
|
+
"reflects": true,
|
3890
3854
|
"inheritedFrom": {
|
3891
|
-
"name": "
|
3892
|
-
"module": "
|
3855
|
+
"name": "Buttonsimple",
|
3856
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3893
3857
|
}
|
3894
3858
|
},
|
3895
3859
|
{
|
3896
|
-
"
|
3860
|
+
"kind": "field",
|
3861
|
+
"name": "ariaStateKey",
|
3897
3862
|
"type": {
|
3898
|
-
"text": "
|
3863
|
+
"text": "string | undefined"
|
3899
3864
|
},
|
3900
|
-
"description": "
|
3901
|
-
"default": "'
|
3902
|
-
"
|
3865
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
3866
|
+
"default": "'aria-pressed' (when)",
|
3867
|
+
"attribute": "ariaStateKey",
|
3868
|
+
"reflects": true,
|
3903
3869
|
"inheritedFrom": {
|
3904
|
-
"name": "
|
3905
|
-
"module": "
|
3870
|
+
"name": "Buttonsimple",
|
3871
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3906
3872
|
}
|
3907
3873
|
},
|
3908
3874
|
{
|
3909
|
-
"
|
3875
|
+
"kind": "field",
|
3876
|
+
"name": "type",
|
3910
3877
|
"type": {
|
3911
|
-
"text": "
|
3878
|
+
"text": "ButtonType"
|
3912
3879
|
},
|
3913
|
-
"description": "
|
3914
|
-
"default": "
|
3915
|
-
"
|
3880
|
+
"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.",
|
3881
|
+
"default": "button",
|
3882
|
+
"attribute": "type",
|
3883
|
+
"reflects": true,
|
3916
3884
|
"inheritedFrom": {
|
3917
|
-
"name": "
|
3918
|
-
"module": "
|
3885
|
+
"name": "Buttonsimple",
|
3886
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3919
3887
|
}
|
3920
3888
|
},
|
3921
3889
|
{
|
3922
|
-
"
|
3923
|
-
"
|
3924
|
-
|
3925
|
-
},
|
3926
|
-
"description": "The tag name for the subtitle. It supports all the types that `msc-text` supports",
|
3927
|
-
"default": "'span'",
|
3928
|
-
"fieldName": "subtitleTagName",
|
3890
|
+
"kind": "method",
|
3891
|
+
"name": "executeAction",
|
3892
|
+
"privacy": "protected",
|
3929
3893
|
"inheritedFrom": {
|
3930
|
-
"name": "
|
3931
|
-
"module": "
|
3894
|
+
"name": "Buttonsimple",
|
3895
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3932
3896
|
}
|
3933
3897
|
},
|
3934
3898
|
{
|
3935
|
-
"
|
3936
|
-
"
|
3937
|
-
|
3938
|
-
|
3939
|
-
|
3940
|
-
|
3899
|
+
"kind": "method",
|
3900
|
+
"name": "setActive",
|
3901
|
+
"privacy": "protected",
|
3902
|
+
"parameters": [
|
3903
|
+
{
|
3904
|
+
"name": "element",
|
3905
|
+
"type": {
|
3906
|
+
"text": "HTMLElement"
|
3907
|
+
},
|
3908
|
+
"description": "The button element"
|
3909
|
+
},
|
3910
|
+
{
|
3911
|
+
"name": "active",
|
3912
|
+
"optional": true,
|
3913
|
+
"type": {
|
3914
|
+
"text": "boolean"
|
3915
|
+
},
|
3916
|
+
"description": "The active state of the element"
|
3917
|
+
}
|
3918
|
+
],
|
3919
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
3941
3920
|
"inheritedFrom": {
|
3942
|
-
"name": "
|
3943
|
-
"module": "
|
3921
|
+
"name": "Buttonsimple",
|
3922
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3944
3923
|
}
|
3945
|
-
}
|
3946
|
-
]
|
3947
|
-
}
|
3948
|
-
],
|
3949
|
-
"exports": [
|
3950
|
-
{
|
3951
|
-
"kind": "js",
|
3952
|
-
"name": "default",
|
3953
|
-
"declaration": {
|
3954
|
-
"name": "Card",
|
3955
|
-
"module": "components/card/card.component.js"
|
3956
|
-
}
|
3957
|
-
}
|
3958
|
-
]
|
3959
|
-
},
|
3960
|
-
{
|
3961
|
-
"kind": "javascript-module",
|
3962
|
-
"path": "components/cardbutton/cardbutton.component.js",
|
3963
|
-
"declarations": [
|
3964
|
-
{
|
3965
|
-
"kind": "class",
|
3966
|
-
"description": "cardbutton component looks like a card and behaves as a button component.\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\nMake sure to pass only non-interactable elements within the slots.",
|
3967
|
-
"name": "CardButton",
|
3968
|
-
"slots": [
|
3969
|
-
{
|
3970
|
-
"description": "This slot is for passing the content before the body",
|
3971
|
-
"name": "before-body"
|
3972
3924
|
},
|
3973
3925
|
{
|
3974
|
-
"
|
3975
|
-
"name": "
|
3926
|
+
"kind": "method",
|
3927
|
+
"name": "setSoftDisabled",
|
3928
|
+
"privacy": "private",
|
3929
|
+
"parameters": [
|
3930
|
+
{
|
3931
|
+
"name": "element",
|
3932
|
+
"type": {
|
3933
|
+
"text": "HTMLElement"
|
3934
|
+
},
|
3935
|
+
"description": "The button element."
|
3936
|
+
},
|
3937
|
+
{
|
3938
|
+
"name": "softDisabled",
|
3939
|
+
"optional": true,
|
3940
|
+
"type": {
|
3941
|
+
"text": "boolean"
|
3942
|
+
},
|
3943
|
+
"description": "The soft-disabled state."
|
3944
|
+
}
|
3945
|
+
],
|
3946
|
+
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
3947
|
+
"inheritedFrom": {
|
3948
|
+
"name": "Buttonsimple",
|
3949
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3950
|
+
}
|
3976
3951
|
},
|
3977
3952
|
{
|
3978
|
-
"
|
3979
|
-
"name": "
|
3980
|
-
|
3981
|
-
|
3982
|
-
|
3953
|
+
"kind": "method",
|
3954
|
+
"name": "setDisabled",
|
3955
|
+
"privacy": "private",
|
3956
|
+
"parameters": [
|
3957
|
+
{
|
3958
|
+
"name": "element",
|
3959
|
+
"type": {
|
3960
|
+
"text": "HTMLElement"
|
3961
|
+
},
|
3962
|
+
"description": "The button element."
|
3963
|
+
},
|
3964
|
+
{
|
3965
|
+
"name": "disabled",
|
3966
|
+
"type": {
|
3967
|
+
"text": "boolean"
|
3968
|
+
},
|
3969
|
+
"description": "The disabled state."
|
3970
|
+
}
|
3971
|
+
],
|
3972
|
+
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
3973
|
+
"inheritedFrom": {
|
3974
|
+
"name": "Buttonsimple",
|
3975
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3976
|
+
}
|
3977
|
+
},
|
3983
3978
|
{
|
3984
3979
|
"kind": "method",
|
3985
|
-
"name": "
|
3986
|
-
"privacy": "
|
3987
|
-
"
|
3988
|
-
|
3989
|
-
"
|
3990
|
-
|
3980
|
+
"name": "triggerClickEvent",
|
3981
|
+
"privacy": "private",
|
3982
|
+
"inheritedFrom": {
|
3983
|
+
"name": "Buttonsimple",
|
3984
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3985
|
+
}
|
3986
|
+
},
|
3987
|
+
{
|
3988
|
+
"kind": "method",
|
3989
|
+
"name": "handleBlur",
|
3990
|
+
"privacy": "private",
|
3991
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
3992
|
+
"inheritedFrom": {
|
3993
|
+
"name": "Buttonsimple",
|
3994
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3995
|
+
}
|
3996
|
+
},
|
3997
|
+
{
|
3998
|
+
"kind": "method",
|
3999
|
+
"name": "handleKeyDown",
|
4000
|
+
"privacy": "private",
|
4001
|
+
"parameters": [
|
4002
|
+
{
|
4003
|
+
"name": "event",
|
4004
|
+
"type": {
|
4005
|
+
"text": "KeyboardEvent"
|
4006
|
+
},
|
4007
|
+
"description": "The keyboard event."
|
3991
4008
|
}
|
4009
|
+
],
|
4010
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
4011
|
+
"inheritedFrom": {
|
4012
|
+
"name": "Buttonsimple",
|
4013
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
3992
4014
|
}
|
3993
4015
|
},
|
3994
4016
|
{
|
3995
|
-
"kind": "
|
3996
|
-
"name": "
|
4017
|
+
"kind": "method",
|
4018
|
+
"name": "handleKeyUp",
|
4019
|
+
"privacy": "private",
|
4020
|
+
"parameters": [
|
4021
|
+
{
|
4022
|
+
"name": "event",
|
4023
|
+
"type": {
|
4024
|
+
"text": "KeyboardEvent"
|
4025
|
+
},
|
4026
|
+
"description": "The keyboard event."
|
4027
|
+
}
|
4028
|
+
],
|
4029
|
+
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
4030
|
+
"inheritedFrom": {
|
4031
|
+
"name": "Buttonsimple",
|
4032
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
4033
|
+
}
|
4034
|
+
}
|
4035
|
+
],
|
4036
|
+
"events": [
|
4037
|
+
{
|
4038
|
+
"description": "(React: onClick) Event that gets dispatched when the card is clicked.",
|
4039
|
+
"name": "click",
|
4040
|
+
"reactName": "onClick",
|
4041
|
+
"inheritedFrom": {
|
4042
|
+
"name": "Buttonsimple",
|
4043
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4044
|
+
}
|
4045
|
+
},
|
4046
|
+
{
|
4047
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It fires the click event when enter key is used.",
|
4048
|
+
"name": "keydown",
|
4049
|
+
"reactName": "onKeyDown",
|
4050
|
+
"inheritedFrom": {
|
4051
|
+
"name": "Buttonsimple",
|
4052
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4053
|
+
}
|
4054
|
+
},
|
4055
|
+
{
|
4056
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It fires the click event when space key is used.",
|
4057
|
+
"name": "keyup",
|
4058
|
+
"reactName": "onKeyUp",
|
4059
|
+
"inheritedFrom": {
|
4060
|
+
"name": "Buttonsimple",
|
4061
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4062
|
+
}
|
4063
|
+
},
|
4064
|
+
{
|
4065
|
+
"description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
|
4066
|
+
"name": "focus",
|
4067
|
+
"reactName": "onFocus",
|
4068
|
+
"inheritedFrom": {
|
4069
|
+
"name": "Buttonsimple",
|
4070
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4071
|
+
}
|
4072
|
+
}
|
4073
|
+
],
|
4074
|
+
"mixins": [
|
4075
|
+
{
|
4076
|
+
"name": "CardComponentMixin",
|
4077
|
+
"module": "/src/utils/mixins/CardComponentMixin"
|
4078
|
+
}
|
4079
|
+
],
|
4080
|
+
"superclass": {
|
4081
|
+
"name": "Buttonsimple",
|
4082
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
4083
|
+
},
|
4084
|
+
"tagName": "mdc-cardbutton",
|
4085
|
+
"jsDoc": "/**\n * cardbutton component looks like a card and behaves as a button component.\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would trigger the click event.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * @tagname mdc-cardbutton\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It fires the click event when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It fires the click event when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n *\n */",
|
4086
|
+
"customElement": true,
|
4087
|
+
"attributes": [
|
4088
|
+
{
|
4089
|
+
"name": "card-title",
|
3997
4090
|
"type": {
|
3998
4091
|
"text": "string"
|
3999
4092
|
},
|
4000
4093
|
"default": "''",
|
4001
4094
|
"description": "The title of the card - part of header section",
|
4002
|
-
"
|
4095
|
+
"fieldName": "cardTitle",
|
4003
4096
|
"inheritedFrom": {
|
4004
4097
|
"name": "CardComponentMixin",
|
4005
|
-
"module": "utils/mixins/CardComponentMixin.
|
4098
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4006
4099
|
}
|
4007
4100
|
},
|
4008
4101
|
{
|
4009
|
-
"kind": "field",
|
4010
4102
|
"name": "subtitle",
|
4011
4103
|
"type": {
|
4012
4104
|
"text": "string"
|
4013
4105
|
},
|
4014
4106
|
"default": "''",
|
4015
4107
|
"description": "The subtitle of the card - part of header section",
|
4016
|
-
"
|
4108
|
+
"fieldName": "subtitle",
|
4017
4109
|
"inheritedFrom": {
|
4018
4110
|
"name": "CardComponentMixin",
|
4019
|
-
"module": "utils/mixins/CardComponentMixin.
|
4111
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4020
4112
|
}
|
4021
4113
|
},
|
4022
4114
|
{
|
4023
|
-
"
|
4024
|
-
"name": "imageSrc",
|
4115
|
+
"name": "image-src",
|
4025
4116
|
"type": {
|
4026
4117
|
"text": "string"
|
4027
4118
|
},
|
4028
4119
|
"default": "''",
|
4029
4120
|
"description": "The image source URL to render on the card",
|
4030
|
-
"
|
4121
|
+
"fieldName": "imageSrc",
|
4031
4122
|
"inheritedFrom": {
|
4032
4123
|
"name": "CardComponentMixin",
|
4033
|
-
"module": "utils/mixins/CardComponentMixin.
|
4124
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4034
4125
|
}
|
4035
4126
|
},
|
4036
4127
|
{
|
4037
|
-
"
|
4038
|
-
"name": "imageAlt",
|
4128
|
+
"name": "image-alt",
|
4039
4129
|
"type": {
|
4040
4130
|
"text": "string"
|
4041
4131
|
},
|
4042
4132
|
"default": "''",
|
4043
4133
|
"description": "The image alt for accessibility support",
|
4044
|
-
"
|
4134
|
+
"fieldName": "imageAlt",
|
4045
4135
|
"inheritedFrom": {
|
4046
4136
|
"name": "CardComponentMixin",
|
4047
|
-
"module": "utils/mixins/CardComponentMixin.
|
4137
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4048
4138
|
}
|
4049
4139
|
},
|
4050
4140
|
{
|
4051
|
-
"kind": "field",
|
4052
4141
|
"name": "variant",
|
4053
4142
|
"type": {
|
4054
4143
|
"text": "CardVariant"
|
4055
4144
|
},
|
4056
4145
|
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
4057
4146
|
"default": "'border'",
|
4058
|
-
"
|
4147
|
+
"fieldName": "variant",
|
4059
4148
|
"inheritedFrom": {
|
4060
4149
|
"name": "CardComponentMixin",
|
4061
|
-
"module": "utils/mixins/CardComponentMixin.
|
4150
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4062
4151
|
}
|
4063
4152
|
},
|
4064
4153
|
{
|
4065
|
-
"kind": "field",
|
4066
4154
|
"name": "orientation",
|
4067
4155
|
"type": {
|
4068
4156
|
"text": "CardOrientation"
|
4069
4157
|
},
|
4070
4158
|
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
4071
4159
|
"default": "'vertical'",
|
4072
|
-
"
|
4073
|
-
"reflects": true,
|
4160
|
+
"fieldName": "orientation",
|
4074
4161
|
"inheritedFrom": {
|
4075
4162
|
"name": "CardComponentMixin",
|
4076
|
-
"module": "utils/mixins/CardComponentMixin.
|
4163
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4077
4164
|
}
|
4078
4165
|
},
|
4079
4166
|
{
|
4080
|
-
"
|
4081
|
-
"name": "titleTagName",
|
4167
|
+
"name": "title-tag-name",
|
4082
4168
|
"type": {
|
4083
4169
|
"text": "TagNameType"
|
4084
4170
|
},
|
4085
4171
|
"description": "The tag name for the card title. It supports all the types that `msc-text` supports",
|
4086
4172
|
"default": "'span'",
|
4087
|
-
"
|
4173
|
+
"fieldName": "titleTagName",
|
4088
4174
|
"inheritedFrom": {
|
4089
4175
|
"name": "CardComponentMixin",
|
4090
|
-
"module": "utils/mixins/CardComponentMixin.
|
4176
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4091
4177
|
}
|
4092
4178
|
},
|
4093
4179
|
{
|
4094
|
-
"
|
4095
|
-
"name": "subtitleTagName",
|
4180
|
+
"name": "subtitle-tag-name",
|
4096
4181
|
"type": {
|
4097
4182
|
"text": "TagNameType"
|
4098
4183
|
},
|
4099
4184
|
"description": "The tag name for the subtitle. It supports all the types that `msc-text` supports",
|
4100
4185
|
"default": "'span'",
|
4101
|
-
"
|
4186
|
+
"fieldName": "subtitleTagName",
|
4102
4187
|
"inheritedFrom": {
|
4103
4188
|
"name": "CardComponentMixin",
|
4104
|
-
"module": "utils/mixins/CardComponentMixin.
|
4189
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4105
4190
|
}
|
4106
4191
|
},
|
4107
4192
|
{
|
4108
|
-
"
|
4109
|
-
"name": "iconName",
|
4193
|
+
"name": "icon-name",
|
4110
4194
|
"type": {
|
4111
4195
|
"text": "IconNames | undefined"
|
4112
4196
|
},
|
4113
4197
|
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
4114
|
-
"
|
4198
|
+
"fieldName": "iconName",
|
4115
4199
|
"inheritedFrom": {
|
4116
4200
|
"name": "CardComponentMixin",
|
4117
|
-
"module": "utils/mixins/CardComponentMixin.
|
4201
|
+
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4118
4202
|
}
|
4119
4203
|
},
|
4120
4204
|
{
|
4121
|
-
"
|
4122
|
-
"
|
4123
|
-
|
4124
|
-
"description": "Renders the image on the card if image source is provided",
|
4125
|
-
"return": {
|
4126
|
-
"type": {
|
4127
|
-
"text": ""
|
4128
|
-
}
|
4205
|
+
"name": "tabIndex",
|
4206
|
+
"type": {
|
4207
|
+
"text": "number"
|
4129
4208
|
},
|
4209
|
+
"default": "0",
|
4210
|
+
"description": "This property specifies the tab order of the element.",
|
4211
|
+
"fieldName": "tabIndex",
|
4130
4212
|
"inheritedFrom": {
|
4131
|
-
"name": "
|
4132
|
-
"module": "
|
4213
|
+
"name": "Buttonsimple",
|
4214
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4133
4215
|
}
|
4134
4216
|
},
|
4135
4217
|
{
|
4136
|
-
"
|
4137
|
-
"
|
4138
|
-
|
4139
|
-
"description": "Renders the icon on the card if icon name is provided",
|
4140
|
-
"return": {
|
4141
|
-
"type": {
|
4142
|
-
"text": ""
|
4143
|
-
}
|
4218
|
+
"name": "disabled",
|
4219
|
+
"type": {
|
4220
|
+
"text": "boolean | undefined"
|
4144
4221
|
},
|
4145
|
-
"
|
4146
|
-
|
4147
|
-
|
4148
|
-
}
|
4149
|
-
},
|
4150
|
-
{
|
4151
|
-
"kind": "method",
|
4152
|
-
"name": "renderTitle",
|
4153
|
-
"privacy": "protected",
|
4154
|
-
"description": "Renders the title and subtitle on the card",
|
4155
|
-
"return": {
|
4156
|
-
"type": {
|
4157
|
-
"text": ""
|
4158
|
-
}
|
4159
|
-
},
|
4160
|
-
"inheritedFrom": {
|
4161
|
-
"name": "CardComponentMixin",
|
4162
|
-
"module": "utils/mixins/CardComponentMixin.js"
|
4163
|
-
}
|
4164
|
-
},
|
4165
|
-
{
|
4166
|
-
"kind": "field",
|
4167
|
-
"name": "tabIndex",
|
4168
|
-
"type": {
|
4169
|
-
"text": "number"
|
4170
|
-
},
|
4171
|
-
"default": "0",
|
4172
|
-
"description": "This property specifies the tab order of the element.",
|
4173
|
-
"attribute": "tabIndex",
|
4174
|
-
"reflects": true,
|
4222
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
4223
|
+
"default": "undefined",
|
4224
|
+
"fieldName": "disabled",
|
4175
4225
|
"inheritedFrom": {
|
4176
4226
|
"name": "Buttonsimple",
|
4177
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
4178
|
-
}
|
4179
|
-
},
|
4180
|
-
{
|
4181
|
-
"kind": "field",
|
4182
|
-
"name": "disabled",
|
4183
|
-
"type": {
|
4184
|
-
"text": "boolean | undefined"
|
4185
|
-
},
|
4186
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
4187
|
-
"default": "undefined",
|
4188
|
-
"attribute": "disabled",
|
4189
|
-
"reflects": true,
|
4190
|
-
"inheritedFrom": {
|
4191
|
-
"name": "Buttonsimple",
|
4192
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
4227
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4193
4228
|
}
|
4194
4229
|
},
|
4195
4230
|
{
|
4196
|
-
"kind": "field",
|
4197
4231
|
"name": "active",
|
4198
4232
|
"type": {
|
4199
4233
|
"text": "boolean | undefined"
|
4200
4234
|
},
|
4201
4235
|
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
4202
4236
|
"default": "undefined",
|
4203
|
-
"
|
4204
|
-
"reflects": true,
|
4237
|
+
"fieldName": "active",
|
4205
4238
|
"inheritedFrom": {
|
4206
4239
|
"name": "Buttonsimple",
|
4207
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
4240
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4208
4241
|
}
|
4209
4242
|
},
|
4210
4243
|
{
|
4211
|
-
"
|
4212
|
-
"name": "softDisabled",
|
4244
|
+
"name": "soft-disabled",
|
4213
4245
|
"type": {
|
4214
4246
|
"text": "boolean | undefined"
|
4215
4247
|
},
|
4216
4248
|
"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.",
|
4217
4249
|
"default": "undefined",
|
4218
|
-
"
|
4219
|
-
"reflects": true,
|
4250
|
+
"fieldName": "softDisabled",
|
4220
4251
|
"inheritedFrom": {
|
4221
4252
|
"name": "Buttonsimple",
|
4222
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
4253
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4223
4254
|
}
|
4224
4255
|
},
|
4225
4256
|
{
|
4226
|
-
"kind": "field",
|
4227
4257
|
"name": "size",
|
4228
4258
|
"type": {
|
4229
4259
|
"text": "ButtonSize"
|
4230
4260
|
},
|
4231
4261
|
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
4232
4262
|
"default": "32",
|
4233
|
-
"
|
4234
|
-
"reflects": true,
|
4263
|
+
"fieldName": "size",
|
4235
4264
|
"inheritedFrom": {
|
4236
4265
|
"name": "Buttonsimple",
|
4237
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
4266
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4238
4267
|
}
|
4239
4268
|
},
|
4240
4269
|
{
|
4241
|
-
"kind": "field",
|
4242
4270
|
"name": "role",
|
4243
4271
|
"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.",
|
4244
4272
|
"default": "button",
|
4245
|
-
"
|
4246
|
-
"reflects": true,
|
4273
|
+
"fieldName": "role",
|
4247
4274
|
"inheritedFrom": {
|
4248
4275
|
"name": "Buttonsimple",
|
4249
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
4276
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4250
4277
|
}
|
4251
4278
|
},
|
4252
4279
|
{
|
4253
|
-
"kind": "field",
|
4254
4280
|
"name": "ariaStateKey",
|
4255
4281
|
"type": {
|
4256
4282
|
"text": "string | undefined"
|
4257
4283
|
},
|
4258
4284
|
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
4259
4285
|
"default": "'aria-pressed' (when)",
|
4260
|
-
"
|
4261
|
-
"reflects": true,
|
4286
|
+
"fieldName": "ariaStateKey",
|
4262
4287
|
"inheritedFrom": {
|
4263
4288
|
"name": "Buttonsimple",
|
4264
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
4289
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4265
4290
|
}
|
4266
4291
|
},
|
4267
4292
|
{
|
4268
|
-
"kind": "field",
|
4269
4293
|
"name": "type",
|
4270
4294
|
"type": {
|
4271
4295
|
"text": "ButtonType"
|
4272
4296
|
},
|
4273
4297
|
"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.",
|
4274
4298
|
"default": "button",
|
4275
|
-
"
|
4276
|
-
"reflects": true,
|
4299
|
+
"fieldName": "type",
|
4277
4300
|
"inheritedFrom": {
|
4278
4301
|
"name": "Buttonsimple",
|
4279
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
4302
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4280
4303
|
}
|
4304
|
+
}
|
4305
|
+
]
|
4306
|
+
}
|
4307
|
+
],
|
4308
|
+
"exports": [
|
4309
|
+
{
|
4310
|
+
"kind": "js",
|
4311
|
+
"name": "default",
|
4312
|
+
"declaration": {
|
4313
|
+
"name": "CardButton",
|
4314
|
+
"module": "components/cardbutton/cardbutton.component.js"
|
4315
|
+
}
|
4316
|
+
}
|
4317
|
+
]
|
4318
|
+
},
|
4319
|
+
{
|
4320
|
+
"kind": "javascript-module",
|
4321
|
+
"path": "components/card/card.component.js",
|
4322
|
+
"declarations": [
|
4323
|
+
{
|
4324
|
+
"kind": "class",
|
4325
|
+
"description": "The card component allows users to organize information in a structured and tangible\nformat that is visually appealing. `mdc-card` is a static component that supports\nthe following features:\n- Image\n- Header\n - Icon\n - Title\n - Subtitle\n- Body\n\nThe card can either be vertically or horizontally oriented.\n\nThere are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n\nTo make this card interactive, use the following slots:\n- `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n- `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n- `footer-button-primary`: This slot is for passing primary variant of\n`mdc-button` component within the footer section.\n- `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\nwithin the footer section.\n\nInteractive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.",
|
4326
|
+
"name": "Card",
|
4327
|
+
"slots": [
|
4328
|
+
{
|
4329
|
+
"description": "This slot is for passing the content before the body",
|
4330
|
+
"name": "before-body"
|
4331
|
+
},
|
4332
|
+
{
|
4333
|
+
"description": "This slot is for passing the text content for the card",
|
4334
|
+
"name": "body"
|
4335
|
+
},
|
4336
|
+
{
|
4337
|
+
"description": "This slot is for passing the content after the body",
|
4338
|
+
"name": "after-body"
|
4339
|
+
},
|
4340
|
+
{
|
4341
|
+
"description": "This slot is for passing `mdc-link` component within the footer section.",
|
4342
|
+
"name": "footer-link"
|
4343
|
+
},
|
4344
|
+
{
|
4345
|
+
"description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
|
4346
|
+
"name": "footer-button-primary"
|
4281
4347
|
},
|
4348
|
+
{
|
4349
|
+
"description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
|
4350
|
+
"name": "footer-button-secondary"
|
4351
|
+
},
|
4352
|
+
{
|
4353
|
+
"description": "This slot is for passing the content before the body",
|
4354
|
+
"name": "before-body"
|
4355
|
+
},
|
4356
|
+
{
|
4357
|
+
"description": "This slot is for passing the text content for the card",
|
4358
|
+
"name": "body"
|
4359
|
+
},
|
4360
|
+
{
|
4361
|
+
"description": "This slot is for passing the content after the body",
|
4362
|
+
"name": "after-body"
|
4363
|
+
}
|
4364
|
+
],
|
4365
|
+
"members": [
|
4282
4366
|
{
|
4283
4367
|
"kind": "method",
|
4284
|
-
"name": "
|
4368
|
+
"name": "renderHeader",
|
4285
4369
|
"privacy": "protected",
|
4370
|
+
"description": "Renders the header of the card if title is provided",
|
4371
|
+
"return": {
|
4372
|
+
"type": {
|
4373
|
+
"text": ""
|
4374
|
+
}
|
4375
|
+
}
|
4376
|
+
},
|
4377
|
+
{
|
4378
|
+
"kind": "field",
|
4379
|
+
"name": "cardTitle",
|
4380
|
+
"type": {
|
4381
|
+
"text": "string"
|
4382
|
+
},
|
4383
|
+
"default": "''",
|
4384
|
+
"description": "The title of the card - part of header section",
|
4385
|
+
"attribute": "card-title",
|
4286
4386
|
"inheritedFrom": {
|
4287
|
-
"name": "
|
4288
|
-
"module": "
|
4387
|
+
"name": "CardComponentMixin",
|
4388
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4289
4389
|
}
|
4290
4390
|
},
|
4291
4391
|
{
|
4292
|
-
"kind": "
|
4293
|
-
"name": "
|
4294
|
-
"
|
4295
|
-
|
4296
|
-
|
4297
|
-
|
4298
|
-
|
4299
|
-
|
4300
|
-
},
|
4301
|
-
"description": "The button element"
|
4302
|
-
},
|
4303
|
-
{
|
4304
|
-
"name": "active",
|
4305
|
-
"optional": true,
|
4306
|
-
"type": {
|
4307
|
-
"text": "boolean"
|
4308
|
-
},
|
4309
|
-
"description": "The active state of the element"
|
4310
|
-
}
|
4311
|
-
],
|
4312
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
4392
|
+
"kind": "field",
|
4393
|
+
"name": "subtitle",
|
4394
|
+
"type": {
|
4395
|
+
"text": "string"
|
4396
|
+
},
|
4397
|
+
"default": "''",
|
4398
|
+
"description": "The subtitle of the card - part of header section",
|
4399
|
+
"attribute": "subtitle",
|
4313
4400
|
"inheritedFrom": {
|
4314
|
-
"name": "
|
4315
|
-
"module": "
|
4401
|
+
"name": "CardComponentMixin",
|
4402
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4316
4403
|
}
|
4317
4404
|
},
|
4318
4405
|
{
|
4319
|
-
"kind": "
|
4320
|
-
"name": "
|
4321
|
-
"
|
4322
|
-
|
4323
|
-
|
4324
|
-
|
4325
|
-
|
4326
|
-
|
4327
|
-
},
|
4328
|
-
"description": "The button element."
|
4329
|
-
},
|
4330
|
-
{
|
4331
|
-
"name": "softDisabled",
|
4332
|
-
"optional": true,
|
4333
|
-
"type": {
|
4334
|
-
"text": "boolean"
|
4335
|
-
},
|
4336
|
-
"description": "The soft-disabled state."
|
4337
|
-
}
|
4338
|
-
],
|
4339
|
-
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
4406
|
+
"kind": "field",
|
4407
|
+
"name": "imageSrc",
|
4408
|
+
"type": {
|
4409
|
+
"text": "string"
|
4410
|
+
},
|
4411
|
+
"default": "''",
|
4412
|
+
"description": "The image source URL to render on the card",
|
4413
|
+
"attribute": "image-src",
|
4340
4414
|
"inheritedFrom": {
|
4341
|
-
"name": "
|
4342
|
-
"module": "
|
4415
|
+
"name": "CardComponentMixin",
|
4416
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4343
4417
|
}
|
4344
4418
|
},
|
4345
4419
|
{
|
4346
|
-
"kind": "
|
4347
|
-
"name": "
|
4348
|
-
"
|
4349
|
-
|
4350
|
-
|
4351
|
-
|
4352
|
-
|
4353
|
-
|
4354
|
-
},
|
4355
|
-
"description": "The button element."
|
4356
|
-
},
|
4357
|
-
{
|
4358
|
-
"name": "disabled",
|
4359
|
-
"type": {
|
4360
|
-
"text": "boolean"
|
4361
|
-
},
|
4362
|
-
"description": "The disabled state."
|
4363
|
-
}
|
4364
|
-
],
|
4365
|
-
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
4420
|
+
"kind": "field",
|
4421
|
+
"name": "imageAlt",
|
4422
|
+
"type": {
|
4423
|
+
"text": "string"
|
4424
|
+
},
|
4425
|
+
"default": "''",
|
4426
|
+
"description": "The image alt for accessibility support",
|
4427
|
+
"attribute": "image-alt",
|
4366
4428
|
"inheritedFrom": {
|
4367
|
-
"name": "
|
4368
|
-
"module": "
|
4429
|
+
"name": "CardComponentMixin",
|
4430
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4431
|
+
}
|
4432
|
+
},
|
4433
|
+
{
|
4434
|
+
"kind": "field",
|
4435
|
+
"name": "variant",
|
4436
|
+
"type": {
|
4437
|
+
"text": "CardVariant"
|
4438
|
+
},
|
4439
|
+
"description": "The variant of the card. It can either be set to 'border' or 'ghost'",
|
4440
|
+
"default": "'border'",
|
4441
|
+
"attribute": "variant",
|
4442
|
+
"inheritedFrom": {
|
4443
|
+
"name": "CardComponentMixin",
|
4444
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4445
|
+
}
|
4446
|
+
},
|
4447
|
+
{
|
4448
|
+
"kind": "field",
|
4449
|
+
"name": "orientation",
|
4450
|
+
"type": {
|
4451
|
+
"text": "CardOrientation"
|
4452
|
+
},
|
4453
|
+
"description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
|
4454
|
+
"default": "'vertical'",
|
4455
|
+
"attribute": "orientation",
|
4456
|
+
"reflects": true,
|
4457
|
+
"inheritedFrom": {
|
4458
|
+
"name": "CardComponentMixin",
|
4459
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4369
4460
|
}
|
4370
4461
|
},
|
4371
4462
|
{
|
4372
|
-
"kind": "
|
4373
|
-
"name": "
|
4374
|
-
"
|
4463
|
+
"kind": "field",
|
4464
|
+
"name": "titleTagName",
|
4465
|
+
"type": {
|
4466
|
+
"text": "TagNameType"
|
4467
|
+
},
|
4468
|
+
"description": "The tag name for the card title. It supports all the types that `msc-text` supports",
|
4469
|
+
"default": "'span'",
|
4470
|
+
"attribute": "title-tag-name",
|
4375
4471
|
"inheritedFrom": {
|
4376
|
-
"name": "
|
4377
|
-
"module": "
|
4472
|
+
"name": "CardComponentMixin",
|
4473
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4378
4474
|
}
|
4379
4475
|
},
|
4380
4476
|
{
|
4381
|
-
"kind": "
|
4382
|
-
"name": "
|
4383
|
-
"
|
4384
|
-
|
4477
|
+
"kind": "field",
|
4478
|
+
"name": "subtitleTagName",
|
4479
|
+
"type": {
|
4480
|
+
"text": "TagNameType"
|
4481
|
+
},
|
4482
|
+
"description": "The tag name for the subtitle. It supports all the types that `msc-text` supports",
|
4483
|
+
"default": "'span'",
|
4484
|
+
"attribute": "subtitle-tag-name",
|
4385
4485
|
"inheritedFrom": {
|
4386
|
-
"name": "
|
4387
|
-
"module": "
|
4486
|
+
"name": "CardComponentMixin",
|
4487
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4388
4488
|
}
|
4389
4489
|
},
|
4390
4490
|
{
|
4391
|
-
"kind": "
|
4392
|
-
"name": "
|
4393
|
-
"
|
4394
|
-
|
4395
|
-
|
4396
|
-
|
4397
|
-
|
4398
|
-
"text": "KeyboardEvent"
|
4399
|
-
},
|
4400
|
-
"description": "The keyboard event."
|
4401
|
-
}
|
4402
|
-
],
|
4403
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
4491
|
+
"kind": "field",
|
4492
|
+
"name": "iconName",
|
4493
|
+
"type": {
|
4494
|
+
"text": "IconNames | undefined"
|
4495
|
+
},
|
4496
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
4497
|
+
"attribute": "icon-name",
|
4404
4498
|
"inheritedFrom": {
|
4405
|
-
"name": "
|
4406
|
-
"module": "
|
4499
|
+
"name": "CardComponentMixin",
|
4500
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4407
4501
|
}
|
4408
4502
|
},
|
4409
4503
|
{
|
4410
4504
|
"kind": "method",
|
4411
|
-
"name": "
|
4412
|
-
"privacy": "
|
4413
|
-
"
|
4414
|
-
|
4415
|
-
|
4416
|
-
"
|
4417
|
-
"text": "KeyboardEvent"
|
4418
|
-
},
|
4419
|
-
"description": "The keyboard event."
|
4505
|
+
"name": "renderImage",
|
4506
|
+
"privacy": "protected",
|
4507
|
+
"description": "Renders the image on the card if image source is provided",
|
4508
|
+
"return": {
|
4509
|
+
"type": {
|
4510
|
+
"text": ""
|
4420
4511
|
}
|
4421
|
-
|
4422
|
-
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
4423
|
-
"inheritedFrom": {
|
4424
|
-
"name": "Buttonsimple",
|
4425
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
4426
|
-
}
|
4427
|
-
}
|
4428
|
-
],
|
4429
|
-
"events": [
|
4430
|
-
{
|
4431
|
-
"description": "(React: onClick) Event that gets dispatched when the card is clicked.",
|
4432
|
-
"name": "click",
|
4433
|
-
"reactName": "onClick",
|
4512
|
+
},
|
4434
4513
|
"inheritedFrom": {
|
4435
|
-
"name": "
|
4436
|
-
"module": "
|
4514
|
+
"name": "CardComponentMixin",
|
4515
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4437
4516
|
}
|
4438
4517
|
},
|
4439
4518
|
{
|
4440
|
-
"
|
4441
|
-
"name": "
|
4442
|
-
"
|
4519
|
+
"kind": "method",
|
4520
|
+
"name": "renderIcon",
|
4521
|
+
"privacy": "protected",
|
4522
|
+
"description": "Renders the icon on the card if icon name is provided",
|
4523
|
+
"return": {
|
4524
|
+
"type": {
|
4525
|
+
"text": ""
|
4526
|
+
}
|
4527
|
+
},
|
4443
4528
|
"inheritedFrom": {
|
4444
|
-
"name": "
|
4445
|
-
"module": "
|
4529
|
+
"name": "CardComponentMixin",
|
4530
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4446
4531
|
}
|
4447
4532
|
},
|
4448
4533
|
{
|
4449
|
-
"
|
4450
|
-
"name": "
|
4451
|
-
"
|
4534
|
+
"kind": "method",
|
4535
|
+
"name": "renderTitle",
|
4536
|
+
"privacy": "protected",
|
4537
|
+
"description": "Renders the title and subtitle on the card",
|
4538
|
+
"return": {
|
4539
|
+
"type": {
|
4540
|
+
"text": ""
|
4541
|
+
}
|
4542
|
+
},
|
4452
4543
|
"inheritedFrom": {
|
4453
|
-
"name": "
|
4454
|
-
"module": "
|
4544
|
+
"name": "CardComponentMixin",
|
4545
|
+
"module": "utils/mixins/CardComponentMixin.js"
|
4455
4546
|
}
|
4456
4547
|
},
|
4457
4548
|
{
|
4458
|
-
"
|
4459
|
-
"name": "
|
4460
|
-
"
|
4549
|
+
"kind": "method",
|
4550
|
+
"name": "renderFooter",
|
4551
|
+
"privacy": "protected",
|
4552
|
+
"description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
|
4553
|
+
"return": {
|
4554
|
+
"type": {
|
4555
|
+
"text": ""
|
4556
|
+
}
|
4557
|
+
},
|
4461
4558
|
"inheritedFrom": {
|
4462
|
-
"name": "
|
4463
|
-
"module": "
|
4559
|
+
"name": "CardAndDialogFooterMixin",
|
4560
|
+
"module": "utils/mixins/CardAndDialogFooterMixin.js"
|
4464
4561
|
}
|
4465
4562
|
}
|
4466
4563
|
],
|
@@ -4468,14 +4565,18 @@
|
|
4468
4565
|
{
|
4469
4566
|
"name": "CardComponentMixin",
|
4470
4567
|
"module": "/src/utils/mixins/CardComponentMixin"
|
4568
|
+
},
|
4569
|
+
{
|
4570
|
+
"name": "CardAndDialogFooterMixin",
|
4571
|
+
"module": "/src/utils/mixins/CardAndDialogFooterMixin"
|
4471
4572
|
}
|
4472
4573
|
],
|
4473
4574
|
"superclass": {
|
4474
|
-
"name": "
|
4475
|
-
"module": "/src/
|
4575
|
+
"name": "Component",
|
4576
|
+
"module": "/src/models"
|
4476
4577
|
},
|
4477
|
-
"tagName": "mdc-
|
4478
|
-
"jsDoc": "/**\n *
|
4578
|
+
"tagName": "mdc-card",
|
4579
|
+
"jsDoc": "/**\n * The card component allows users to organize information in a structured and tangible\n * format that is visually appealing. `mdc-card` is a static component that supports\n * the following features:\n * - Image\n * - Header\n * - Icon\n * - Title\n * - Subtitle\n * - Body\n *\n * The card can either be vertically or horizontally oriented.\n *\n * There are 2 variants for the card that represent the border styling - 'border' and 'ghost'.\n *\n * To make this card interactive, use the following slots:\n * - `icon-button`: This slot supports action icon buttons in the header section (maximum of 3 buttons).\n * - `footer-link`: This slot is for passing `mdc-link` component within the footer section.\n * - `footer-button-primary`: This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * - `footer-button-secondary`: This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * Interactive card additionally supports 'promotional' variant that represents the border styling - 'promotional'.\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n * @slot footer-link - This slot is for passing `mdc-link` component within the footer section.\n * @slot footer-button-primary - This slot is for passing primary variant of\n * `mdc-button` component within the footer section.\n * @slot footer-button-secondary - This slot is for passing secondary variant of `mdc-button` component\n * within the footer section.\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot before-body - This slot is for passing the content before the body\n * @slot body - This slot is for passing the text content for the card\n * @slot after-body - This slot is for passing the content after the body\n *\n */",
|
4479
4580
|
"customElement": true,
|
4480
4581
|
"attributes": [
|
4481
4582
|
{
|
@@ -4593,107 +4694,6 @@
|
|
4593
4694
|
"name": "CardComponentMixin",
|
4594
4695
|
"module": "src/utils/mixins/CardComponentMixin.ts"
|
4595
4696
|
}
|
4596
|
-
},
|
4597
|
-
{
|
4598
|
-
"name": "tabIndex",
|
4599
|
-
"type": {
|
4600
|
-
"text": "number"
|
4601
|
-
},
|
4602
|
-
"default": "0",
|
4603
|
-
"description": "This property specifies the tab order of the element.",
|
4604
|
-
"fieldName": "tabIndex",
|
4605
|
-
"inheritedFrom": {
|
4606
|
-
"name": "Buttonsimple",
|
4607
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4608
|
-
}
|
4609
|
-
},
|
4610
|
-
{
|
4611
|
-
"name": "disabled",
|
4612
|
-
"type": {
|
4613
|
-
"text": "boolean | undefined"
|
4614
|
-
},
|
4615
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
4616
|
-
"default": "undefined",
|
4617
|
-
"fieldName": "disabled",
|
4618
|
-
"inheritedFrom": {
|
4619
|
-
"name": "Buttonsimple",
|
4620
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4621
|
-
}
|
4622
|
-
},
|
4623
|
-
{
|
4624
|
-
"name": "active",
|
4625
|
-
"type": {
|
4626
|
-
"text": "boolean | undefined"
|
4627
|
-
},
|
4628
|
-
"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.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
4629
|
-
"default": "undefined",
|
4630
|
-
"fieldName": "active",
|
4631
|
-
"inheritedFrom": {
|
4632
|
-
"name": "Buttonsimple",
|
4633
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4634
|
-
}
|
4635
|
-
},
|
4636
|
-
{
|
4637
|
-
"name": "soft-disabled",
|
4638
|
-
"type": {
|
4639
|
-
"text": "boolean | undefined"
|
4640
|
-
},
|
4641
|
-
"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.",
|
4642
|
-
"default": "undefined",
|
4643
|
-
"fieldName": "softDisabled",
|
4644
|
-
"inheritedFrom": {
|
4645
|
-
"name": "Buttonsimple",
|
4646
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4647
|
-
}
|
4648
|
-
},
|
4649
|
-
{
|
4650
|
-
"name": "size",
|
4651
|
-
"type": {
|
4652
|
-
"text": "ButtonSize"
|
4653
|
-
},
|
4654
|
-
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
4655
|
-
"default": "32",
|
4656
|
-
"fieldName": "size",
|
4657
|
-
"inheritedFrom": {
|
4658
|
-
"name": "Buttonsimple",
|
4659
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4660
|
-
}
|
4661
|
-
},
|
4662
|
-
{
|
4663
|
-
"name": "role",
|
4664
|
-
"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.",
|
4665
|
-
"default": "button",
|
4666
|
-
"fieldName": "role",
|
4667
|
-
"inheritedFrom": {
|
4668
|
-
"name": "Buttonsimple",
|
4669
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4670
|
-
}
|
4671
|
-
},
|
4672
|
-
{
|
4673
|
-
"name": "ariaStateKey",
|
4674
|
-
"type": {
|
4675
|
-
"text": "string | undefined"
|
4676
|
-
},
|
4677
|
-
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
4678
|
-
"default": "'aria-pressed' (when)",
|
4679
|
-
"fieldName": "ariaStateKey",
|
4680
|
-
"inheritedFrom": {
|
4681
|
-
"name": "Buttonsimple",
|
4682
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4683
|
-
}
|
4684
|
-
},
|
4685
|
-
{
|
4686
|
-
"name": "type",
|
4687
|
-
"type": {
|
4688
|
-
"text": "ButtonType"
|
4689
|
-
},
|
4690
|
-
"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.",
|
4691
|
-
"default": "button",
|
4692
|
-
"fieldName": "type",
|
4693
|
-
"inheritedFrom": {
|
4694
|
-
"name": "Buttonsimple",
|
4695
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
4696
|
-
}
|
4697
4697
|
}
|
4698
4698
|
]
|
4699
4699
|
}
|
@@ -4703,8 +4703,8 @@
|
|
4703
4703
|
"kind": "js",
|
4704
4704
|
"name": "default",
|
4705
4705
|
"declaration": {
|
4706
|
-
"name": "
|
4707
|
-
"module": "components/
|
4706
|
+
"name": "Card",
|
4707
|
+
"module": "components/card/card.component.js"
|
4708
4708
|
}
|
4709
4709
|
}
|
4710
4710
|
]
|