@momentum-design/components 0.108.3 → 0.109.1

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.
@@ -1766,67 +1766,6 @@
1766
1766
  }
1767
1767
  ]
1768
1768
  },
1769
- {
1770
- "kind": "javascript-module",
1771
- "path": "components/appheader/appheader.component.js",
1772
- "declarations": [
1773
- {
1774
- "kind": "class",
1775
- "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**.",
1776
- "name": "Appheader",
1777
- "cssParts": [
1778
- {
1779
- "description": "The main container for styling the header.",
1780
- "name": "container"
1781
- },
1782
- {
1783
- "description": "The leading section of the header.",
1784
- "name": "leading-section"
1785
- },
1786
- {
1787
- "description": "The center section of the header.",
1788
- "name": "center-section"
1789
- },
1790
- {
1791
- "description": "The trailing section of the header.",
1792
- "name": "trailing-section"
1793
- }
1794
- ],
1795
- "slots": [
1796
- {
1797
- "description": "Slot for the leading section (e.g., brand logo, brand name).",
1798
- "name": "leading"
1799
- },
1800
- {
1801
- "description": "Slot for the center section (e.g., search bar, icons).",
1802
- "name": "center"
1803
- },
1804
- {
1805
- "description": "Slot for the trailing section (e.g., profile avatar, icons).",
1806
- "name": "trailing"
1807
- }
1808
- ],
1809
- "members": [],
1810
- "superclass": {
1811
- "name": "Component",
1812
- "module": "/src/models"
1813
- },
1814
- "tagName": "mdc-appheader",
1815
- "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 */",
1816
- "customElement": true
1817
- }
1818
- ],
1819
- "exports": [
1820
- {
1821
- "kind": "js",
1822
- "name": "default",
1823
- "declaration": {
1824
- "name": "Appheader",
1825
- "module": "components/appheader/appheader.component.js"
1826
- }
1827
- }
1828
- ]
1829
- },
1830
1769
  {
1831
1770
  "kind": "javascript-module",
1832
1771
  "path": "components/avatar/avatar.component.js",
@@ -2847,6 +2786,67 @@
2847
2786
  }
2848
2787
  ]
2849
2788
  },
2789
+ {
2790
+ "kind": "javascript-module",
2791
+ "path": "components/appheader/appheader.component.js",
2792
+ "declarations": [
2793
+ {
2794
+ "kind": "class",
2795
+ "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**.",
2796
+ "name": "Appheader",
2797
+ "cssParts": [
2798
+ {
2799
+ "description": "The main container for styling the header.",
2800
+ "name": "container"
2801
+ },
2802
+ {
2803
+ "description": "The leading section of the header.",
2804
+ "name": "leading-section"
2805
+ },
2806
+ {
2807
+ "description": "The center section of the header.",
2808
+ "name": "center-section"
2809
+ },
2810
+ {
2811
+ "description": "The trailing section of the header.",
2812
+ "name": "trailing-section"
2813
+ }
2814
+ ],
2815
+ "slots": [
2816
+ {
2817
+ "description": "Slot for the leading section (e.g., brand logo, brand name).",
2818
+ "name": "leading"
2819
+ },
2820
+ {
2821
+ "description": "Slot for the center section (e.g., search bar, icons).",
2822
+ "name": "center"
2823
+ },
2824
+ {
2825
+ "description": "Slot for the trailing section (e.g., profile avatar, icons).",
2826
+ "name": "trailing"
2827
+ }
2828
+ ],
2829
+ "members": [],
2830
+ "superclass": {
2831
+ "name": "Component",
2832
+ "module": "/src/models"
2833
+ },
2834
+ "tagName": "mdc-appheader",
2835
+ "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 */",
2836
+ "customElement": true
2837
+ }
2838
+ ],
2839
+ "exports": [
2840
+ {
2841
+ "kind": "js",
2842
+ "name": "default",
2843
+ "declaration": {
2844
+ "name": "Appheader",
2845
+ "module": "components/appheader/appheader.component.js"
2846
+ }
2847
+ }
2848
+ ]
2849
+ },
2850
2850
  {
2851
2851
  "kind": "javascript-module",
2852
2852
  "path": "components/badge/badge.component.js",
@@ -5367,12 +5367,12 @@
5367
5367
  },
5368
5368
  {
5369
5369
  "kind": "javascript-module",
5370
- "path": "components/card/card.component.js",
5370
+ "path": "components/cardbutton/cardbutton.component.js",
5371
5371
  "declarations": [
5372
5372
  {
5373
5373
  "kind": "class",
5374
- "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. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\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 `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'.",
5375
- "name": "Card",
5374
+ "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.",
5375
+ "name": "CardButton",
5376
5376
  "cssProperties": [
5377
5377
  {
5378
5378
  "description": "The width of the card",
@@ -5441,14 +5441,6 @@
5441
5441
  {
5442
5442
  "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
5443
5443
  "name": "footer-button-primary"
5444
- },
5445
- {
5446
- "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
5447
- "name": "footer-button-secondary"
5448
- },
5449
- {
5450
- "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
5451
- "name": "footer"
5452
5444
  }
5453
5445
  ],
5454
5446
  "members": [
@@ -5643,712 +5635,840 @@
5643
5635
  }
5644
5636
  },
5645
5637
  {
5646
- "kind": "method",
5647
- "name": "renderFooter",
5648
- "privacy": "protected",
5649
- "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
5650
- "return": {
5651
- "type": {
5652
- "text": ""
5653
- }
5638
+ "kind": "field",
5639
+ "name": "autoFocusOnMount",
5640
+ "type": {
5641
+ "text": "boolean"
5654
5642
  },
5643
+ "default": "false",
5644
+ "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
5645
+ "attribute": "auto-focus-on-mount",
5646
+ "reflects": true,
5655
5647
  "inheritedFrom": {
5656
- "name": "FooterMixin",
5657
- "module": "utils/mixins/FooterMixin.js"
5648
+ "name": "Buttonsimple",
5649
+ "module": "components/buttonsimple/buttonsimple.component.js"
5658
5650
  }
5659
- }
5660
- ],
5661
- "mixins": [
5662
- {
5663
- "name": "CardComponentMixin",
5664
- "module": "/src/utils/mixins/CardComponentMixin"
5665
5651
  },
5666
5652
  {
5667
- "name": "FooterMixin",
5668
- "module": "/src/utils/mixins/FooterMixin"
5669
- }
5670
- ],
5671
- "superclass": {
5672
- "name": "Component",
5673
- "module": "/src/models"
5674
- },
5675
- "tagName": "mdc-card",
5676
- "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. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\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 `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 * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
5677
- "customElement": true,
5678
- "attributes": [
5679
- {
5680
- "name": "card-title",
5653
+ "kind": "field",
5654
+ "name": "tabIndex",
5681
5655
  "type": {
5682
- "text": "string"
5656
+ "text": "number"
5683
5657
  },
5684
- "default": "''",
5685
- "description": "The title of the card - part of header section",
5686
- "fieldName": "cardTitle",
5658
+ "default": "0",
5659
+ "description": "This property specifies the tab order of the element.",
5660
+ "attribute": "tabIndex",
5661
+ "reflects": true,
5687
5662
  "inheritedFrom": {
5688
- "name": "CardComponentMixin",
5689
- "module": "src/utils/mixins/CardComponentMixin.ts"
5663
+ "name": "Buttonsimple",
5664
+ "module": "components/buttonsimple/buttonsimple.component.js"
5690
5665
  }
5691
5666
  },
5692
5667
  {
5693
- "name": "subtitle",
5668
+ "kind": "field",
5669
+ "name": "disabled",
5694
5670
  "type": {
5695
- "text": "string"
5671
+ "text": "boolean | undefined"
5696
5672
  },
5697
- "default": "''",
5698
- "description": "The subtitle of the card - part of header section",
5699
- "fieldName": "subtitle",
5673
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
5674
+ "default": "undefined",
5675
+ "attribute": "disabled",
5676
+ "reflects": true,
5700
5677
  "inheritedFrom": {
5701
- "name": "CardComponentMixin",
5702
- "module": "src/utils/mixins/CardComponentMixin.ts"
5678
+ "name": "Buttonsimple",
5679
+ "module": "components/buttonsimple/buttonsimple.component.js"
5703
5680
  }
5704
5681
  },
5705
5682
  {
5706
- "name": "image-src",
5683
+ "kind": "field",
5684
+ "name": "active",
5707
5685
  "type": {
5708
- "text": "string"
5686
+ "text": "boolean | undefined"
5709
5687
  },
5710
- "default": "''",
5711
- "description": "The image source URL to render on the card",
5712
- "fieldName": "imageSrc",
5688
+ "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.",
5689
+ "default": "undefined",
5690
+ "attribute": "active",
5691
+ "reflects": true,
5713
5692
  "inheritedFrom": {
5714
- "name": "CardComponentMixin",
5715
- "module": "src/utils/mixins/CardComponentMixin.ts"
5693
+ "name": "Buttonsimple",
5694
+ "module": "components/buttonsimple/buttonsimple.component.js"
5716
5695
  }
5717
5696
  },
5718
5697
  {
5719
- "name": "image-alt",
5698
+ "kind": "field",
5699
+ "name": "softDisabled",
5720
5700
  "type": {
5721
- "text": "string"
5701
+ "text": "boolean | undefined"
5722
5702
  },
5723
- "default": "''",
5724
- "description": "The image alt for accessibility support",
5725
- "fieldName": "imageAlt",
5703
+ "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.",
5704
+ "default": "undefined",
5705
+ "attribute": "soft-disabled",
5706
+ "reflects": true,
5726
5707
  "inheritedFrom": {
5727
- "name": "CardComponentMixin",
5728
- "module": "src/utils/mixins/CardComponentMixin.ts"
5708
+ "name": "Buttonsimple",
5709
+ "module": "components/buttonsimple/buttonsimple.component.js"
5729
5710
  }
5730
5711
  },
5731
5712
  {
5732
- "name": "variant",
5713
+ "kind": "field",
5714
+ "name": "size",
5733
5715
  "type": {
5734
- "text": "CardVariant"
5716
+ "text": "ButtonSize"
5735
5717
  },
5736
- "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
5737
- "default": "'border'",
5738
- "fieldName": "variant",
5718
+ "description": "Simplebutton size is a super set of all the sizes supported by children components.",
5719
+ "default": "32",
5720
+ "attribute": "size",
5721
+ "reflects": true,
5739
5722
  "inheritedFrom": {
5740
- "name": "CardComponentMixin",
5741
- "module": "src/utils/mixins/CardComponentMixin.ts"
5723
+ "name": "Buttonsimple",
5724
+ "module": "components/buttonsimple/buttonsimple.component.js"
5742
5725
  }
5743
5726
  },
5744
5727
  {
5745
- "name": "orientation",
5728
+ "kind": "field",
5729
+ "name": "role",
5746
5730
  "type": {
5747
- "text": "CardOrientation"
5731
+ "text": "RoleType"
5748
5732
  },
5749
- "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
5750
- "default": "'vertical'",
5751
- "fieldName": "orientation",
5733
+ "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.",
5734
+ "default": "button",
5735
+ "attribute": "role",
5736
+ "reflects": true,
5752
5737
  "inheritedFrom": {
5753
- "name": "CardComponentMixin",
5754
- "module": "src/utils/mixins/CardComponentMixin.ts"
5738
+ "name": "Buttonsimple",
5739
+ "module": "components/buttonsimple/buttonsimple.component.js"
5755
5740
  }
5756
5741
  },
5757
5742
  {
5758
- "name": "title-tag-name",
5743
+ "kind": "field",
5744
+ "name": "ariaStateKey",
5759
5745
  "type": {
5760
- "text": "TagNameType"
5746
+ "text": "string | undefined"
5761
5747
  },
5762
- "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
5763
- "default": "'span'",
5764
- "fieldName": "titleTagName",
5748
+ "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`",
5749
+ "default": "'aria-pressed' (when)",
5750
+ "attribute": "ariaStateKey",
5751
+ "reflects": true,
5765
5752
  "inheritedFrom": {
5766
- "name": "CardComponentMixin",
5767
- "module": "src/utils/mixins/CardComponentMixin.ts"
5753
+ "name": "Buttonsimple",
5754
+ "module": "components/buttonsimple/buttonsimple.component.js"
5768
5755
  }
5769
5756
  },
5770
5757
  {
5771
- "name": "subtitle-tag-name",
5758
+ "kind": "field",
5759
+ "name": "type",
5772
5760
  "type": {
5773
- "text": "TagNameType"
5761
+ "text": "ButtonType"
5774
5762
  },
5775
- "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
5776
- "default": "'span'",
5777
- "fieldName": "subtitleTagName",
5763
+ "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.",
5764
+ "default": "button",
5765
+ "attribute": "type",
5766
+ "reflects": true,
5778
5767
  "inheritedFrom": {
5779
- "name": "CardComponentMixin",
5780
- "module": "src/utils/mixins/CardComponentMixin.ts"
5768
+ "name": "Buttonsimple",
5769
+ "module": "components/buttonsimple/buttonsimple.component.js"
5781
5770
  }
5782
5771
  },
5783
5772
  {
5784
- "name": "icon-name",
5773
+ "kind": "field",
5774
+ "name": "name",
5785
5775
  "type": {
5786
- "text": "IconNames | undefined"
5776
+ "text": "string | undefined"
5787
5777
  },
5788
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
5789
- "fieldName": "iconName",
5778
+ "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
5779
+ "attribute": "name",
5780
+ "reflects": true,
5790
5781
  "inheritedFrom": {
5791
- "name": "CardComponentMixin",
5792
- "module": "src/utils/mixins/CardComponentMixin.ts"
5782
+ "name": "Buttonsimple",
5783
+ "module": "components/buttonsimple/buttonsimple.component.js"
5793
5784
  }
5794
- }
5795
- ]
5796
- }
5797
- ],
5798
- "exports": [
5799
- {
5800
- "kind": "js",
5801
- "name": "default",
5802
- "declaration": {
5803
- "name": "Card",
5804
- "module": "components/card/card.component.js"
5805
- }
5806
- }
5807
- ]
5808
- },
5809
- {
5810
- "kind": "javascript-module",
5811
- "path": "components/cardbutton/cardbutton.component.js",
5812
- "declarations": [
5813
- {
5814
- "kind": "class",
5815
- "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.",
5816
- "name": "CardButton",
5817
- "cssProperties": [
5818
- {
5819
- "description": "The width of the card",
5820
- "name": "--mdc-card-width"
5821
- }
5822
- ],
5823
- "cssParts": [
5824
- {
5825
- "description": "The header part of the card",
5826
- "name": "header"
5827
5785
  },
5828
5786
  {
5829
- "description": "The icon part of the card header",
5830
- "name": "icon"
5787
+ "kind": "field",
5788
+ "name": "value",
5789
+ "type": {
5790
+ "text": "string | undefined"
5791
+ },
5792
+ "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
5793
+ "attribute": "value",
5794
+ "reflects": true,
5795
+ "inheritedFrom": {
5796
+ "name": "Buttonsimple",
5797
+ "module": "components/buttonsimple/buttonsimple.component.js"
5798
+ }
5831
5799
  },
5832
5800
  {
5833
- "description": "The body part of the card",
5834
- "name": "body"
5801
+ "kind": "method",
5802
+ "name": "executeAction",
5803
+ "privacy": "protected",
5804
+ "inheritedFrom": {
5805
+ "name": "Buttonsimple",
5806
+ "module": "components/buttonsimple/buttonsimple.component.js"
5807
+ }
5835
5808
  },
5836
5809
  {
5837
- "description": "The image part of the card",
5838
- "name": "image"
5810
+ "kind": "method",
5811
+ "name": "setActive",
5812
+ "privacy": "protected",
5813
+ "parameters": [
5814
+ {
5815
+ "name": "element",
5816
+ "type": {
5817
+ "text": "HTMLElement"
5818
+ },
5819
+ "description": "The button element"
5820
+ },
5821
+ {
5822
+ "name": "active",
5823
+ "optional": true,
5824
+ "type": {
5825
+ "text": "boolean"
5826
+ },
5827
+ "description": "The active state of the element"
5828
+ }
5829
+ ],
5830
+ "description": "Sets the ariaStateKey attributes based on the active state of the button.",
5831
+ "inheritedFrom": {
5832
+ "name": "Buttonsimple",
5833
+ "module": "components/buttonsimple/buttonsimple.component.js"
5834
+ }
5839
5835
  },
5840
5836
  {
5841
- "description": "The footer part of the card",
5842
- "name": "footer"
5837
+ "kind": "method",
5838
+ "name": "setSoftDisabled",
5839
+ "privacy": "private",
5840
+ "parameters": [
5841
+ {
5842
+ "name": "element",
5843
+ "type": {
5844
+ "text": "HTMLElement"
5845
+ },
5846
+ "description": "The button element."
5847
+ },
5848
+ {
5849
+ "name": "softDisabled",
5850
+ "optional": true,
5851
+ "type": {
5852
+ "text": "boolean"
5853
+ },
5854
+ "description": "The soft-disabled state."
5855
+ }
5856
+ ],
5857
+ "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.",
5858
+ "inheritedFrom": {
5859
+ "name": "Buttonsimple",
5860
+ "module": "components/buttonsimple/buttonsimple.component.js"
5861
+ }
5843
5862
  },
5844
5863
  {
5845
- "description": "The link part of the card footer",
5846
- "name": "footer-link"
5864
+ "kind": "method",
5865
+ "name": "setDisabled",
5866
+ "privacy": "private",
5867
+ "parameters": [
5868
+ {
5869
+ "name": "element",
5870
+ "type": {
5871
+ "text": "HTMLElement"
5872
+ },
5873
+ "description": "The button element."
5874
+ },
5875
+ {
5876
+ "name": "disabled",
5877
+ "type": {
5878
+ "text": "boolean"
5879
+ },
5880
+ "description": "The disabled state."
5881
+ }
5882
+ ],
5883
+ "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.",
5884
+ "inheritedFrom": {
5885
+ "name": "Buttonsimple",
5886
+ "module": "components/buttonsimple/buttonsimple.component.js"
5887
+ }
5847
5888
  },
5848
5889
  {
5849
- "description": "The primary button part of the card footer",
5850
- "name": "footer-button-primary"
5890
+ "kind": "method",
5891
+ "name": "triggerClickEvent",
5892
+ "privacy": "private",
5893
+ "inheritedFrom": {
5894
+ "name": "Buttonsimple",
5895
+ "module": "components/buttonsimple/buttonsimple.component.js"
5896
+ }
5851
5897
  },
5852
5898
  {
5853
- "description": "The secondary button part of the card footer",
5854
- "name": "footer-button-secondary"
5899
+ "kind": "method",
5900
+ "name": "handleBlur",
5901
+ "privacy": "private",
5902
+ "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
5903
+ "inheritedFrom": {
5904
+ "name": "Buttonsimple",
5905
+ "module": "components/buttonsimple/buttonsimple.component.js"
5906
+ }
5855
5907
  },
5856
5908
  {
5857
- "description": "The icon button part of the card header",
5858
- "name": "icon-button"
5909
+ "kind": "method",
5910
+ "name": "handleKeyDown",
5911
+ "privacy": "private",
5912
+ "parameters": [
5913
+ {
5914
+ "name": "event",
5915
+ "type": {
5916
+ "text": "KeyboardEvent"
5917
+ },
5918
+ "description": "The keyboard event."
5919
+ }
5920
+ ],
5921
+ "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.",
5922
+ "inheritedFrom": {
5923
+ "name": "Buttonsimple",
5924
+ "module": "components/buttonsimple/buttonsimple.component.js"
5925
+ }
5859
5926
  },
5860
5927
  {
5861
- "description": "The text part of the card",
5862
- "name": "text"
5928
+ "kind": "method",
5929
+ "name": "handleKeyUp",
5930
+ "privacy": "private",
5931
+ "parameters": [
5932
+ {
5933
+ "name": "event",
5934
+ "type": {
5935
+ "text": "KeyboardEvent"
5936
+ },
5937
+ "description": "The keyboard event."
5938
+ }
5939
+ ],
5940
+ "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.",
5941
+ "inheritedFrom": {
5942
+ "name": "Buttonsimple",
5943
+ "module": "components/buttonsimple/buttonsimple.component.js"
5944
+ }
5863
5945
  }
5864
5946
  ],
5865
- "slots": [
5866
- {
5867
- "description": "This slot is for passing the content before the body",
5868
- "name": "before-body"
5869
- },
5947
+ "events": [
5870
5948
  {
5871
- "description": "This slot is for passing the text content for the card",
5872
- "name": "body"
5949
+ "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
5950
+ "name": "click",
5951
+ "reactName": "onClick",
5952
+ "inheritedFrom": {
5953
+ "name": "Buttonsimple",
5954
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
5955
+ }
5873
5956
  },
5874
5957
  {
5875
- "description": "This slot is for passing the content after the body",
5876
- "name": "after-body"
5958
+ "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.",
5959
+ "name": "keydown",
5960
+ "reactName": "onKeyDown",
5961
+ "inheritedFrom": {
5962
+ "name": "Buttonsimple",
5963
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
5964
+ }
5877
5965
  },
5878
5966
  {
5879
- "description": "This slot is for passing `mdc-link` component within the footer section.",
5880
- "name": "footer-link"
5967
+ "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.",
5968
+ "name": "keyup",
5969
+ "reactName": "onKeyUp",
5970
+ "inheritedFrom": {
5971
+ "name": "Buttonsimple",
5972
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
5973
+ }
5881
5974
  },
5882
5975
  {
5883
- "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
5884
- "name": "footer-button-primary"
5976
+ "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
5977
+ "name": "focus",
5978
+ "reactName": "onFocus",
5979
+ "inheritedFrom": {
5980
+ "name": "Buttonsimple",
5981
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
5982
+ }
5885
5983
  }
5886
5984
  ],
5887
- "members": [
5985
+ "mixins": [
5888
5986
  {
5889
- "kind": "method",
5890
- "name": "renderHeader",
5891
- "privacy": "protected",
5892
- "description": "Renders the header of the card if title is provided",
5893
- "return": {
5894
- "type": {
5895
- "text": ""
5896
- }
5897
- }
5898
- },
5987
+ "name": "CardComponentMixin",
5988
+ "module": "/src/utils/mixins/CardComponentMixin"
5989
+ }
5990
+ ],
5991
+ "superclass": {
5992
+ "name": "Buttonsimple",
5993
+ "module": "/src/components/buttonsimple/buttonsimple.component"
5994
+ },
5995
+ "tagName": "mdc-cardbutton",
5996
+ "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 * @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 * @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 `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
5997
+ "customElement": true,
5998
+ "attributes": [
5899
5999
  {
5900
- "kind": "field",
5901
- "name": "cardTitle",
6000
+ "name": "card-title",
5902
6001
  "type": {
5903
6002
  "text": "string"
5904
6003
  },
5905
6004
  "default": "''",
5906
6005
  "description": "The title of the card - part of header section",
5907
- "attribute": "card-title",
5908
- "reflects": true,
6006
+ "fieldName": "cardTitle",
5909
6007
  "inheritedFrom": {
5910
6008
  "name": "CardComponentMixin",
5911
- "module": "utils/mixins/CardComponentMixin.js"
6009
+ "module": "src/utils/mixins/CardComponentMixin.ts"
5912
6010
  }
5913
6011
  },
5914
6012
  {
5915
- "kind": "field",
5916
6013
  "name": "subtitle",
5917
6014
  "type": {
5918
6015
  "text": "string"
5919
6016
  },
5920
6017
  "default": "''",
5921
6018
  "description": "The subtitle of the card - part of header section",
5922
- "attribute": "subtitle",
5923
- "reflects": true,
6019
+ "fieldName": "subtitle",
5924
6020
  "inheritedFrom": {
5925
6021
  "name": "CardComponentMixin",
5926
- "module": "utils/mixins/CardComponentMixin.js"
6022
+ "module": "src/utils/mixins/CardComponentMixin.ts"
5927
6023
  }
5928
6024
  },
5929
6025
  {
5930
- "kind": "field",
5931
- "name": "imageSrc",
6026
+ "name": "image-src",
5932
6027
  "type": {
5933
6028
  "text": "string"
5934
6029
  },
5935
6030
  "default": "''",
5936
6031
  "description": "The image source URL to render on the card",
5937
- "attribute": "image-src",
5938
- "reflects": true,
6032
+ "fieldName": "imageSrc",
5939
6033
  "inheritedFrom": {
5940
6034
  "name": "CardComponentMixin",
5941
- "module": "utils/mixins/CardComponentMixin.js"
6035
+ "module": "src/utils/mixins/CardComponentMixin.ts"
5942
6036
  }
5943
6037
  },
5944
6038
  {
5945
- "kind": "field",
5946
- "name": "imageAlt",
6039
+ "name": "image-alt",
5947
6040
  "type": {
5948
6041
  "text": "string"
5949
6042
  },
5950
6043
  "default": "''",
5951
6044
  "description": "The image alt for accessibility support",
5952
- "attribute": "image-alt",
5953
- "reflects": true,
6045
+ "fieldName": "imageAlt",
5954
6046
  "inheritedFrom": {
5955
6047
  "name": "CardComponentMixin",
5956
- "module": "utils/mixins/CardComponentMixin.js"
6048
+ "module": "src/utils/mixins/CardComponentMixin.ts"
5957
6049
  }
5958
6050
  },
5959
6051
  {
5960
- "kind": "field",
5961
6052
  "name": "variant",
5962
6053
  "type": {
5963
6054
  "text": "CardVariant"
5964
6055
  },
5965
6056
  "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
5966
6057
  "default": "'border'",
5967
- "attribute": "variant",
5968
- "reflects": true,
6058
+ "fieldName": "variant",
5969
6059
  "inheritedFrom": {
5970
6060
  "name": "CardComponentMixin",
5971
- "module": "utils/mixins/CardComponentMixin.js"
6061
+ "module": "src/utils/mixins/CardComponentMixin.ts"
5972
6062
  }
5973
6063
  },
5974
6064
  {
5975
- "kind": "field",
5976
6065
  "name": "orientation",
5977
6066
  "type": {
5978
6067
  "text": "CardOrientation"
5979
6068
  },
5980
6069
  "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
5981
6070
  "default": "'vertical'",
5982
- "attribute": "orientation",
5983
- "reflects": true,
5984
- "inheritedFrom": {
5985
- "name": "CardComponentMixin",
5986
- "module": "utils/mixins/CardComponentMixin.js"
5987
- }
5988
- },
5989
- {
5990
- "kind": "field",
5991
- "name": "titleTagName",
5992
- "type": {
5993
- "text": "TagNameType"
5994
- },
5995
- "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
5996
- "default": "'span'",
5997
- "attribute": "title-tag-name",
5998
- "reflects": true,
5999
- "inheritedFrom": {
6000
- "name": "CardComponentMixin",
6001
- "module": "utils/mixins/CardComponentMixin.js"
6002
- }
6003
- },
6004
- {
6005
- "kind": "field",
6006
- "name": "subtitleTagName",
6007
- "type": {
6008
- "text": "TagNameType"
6009
- },
6010
- "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
6011
- "default": "'span'",
6012
- "attribute": "subtitle-tag-name",
6013
- "reflects": true,
6014
- "inheritedFrom": {
6015
- "name": "CardComponentMixin",
6016
- "module": "utils/mixins/CardComponentMixin.js"
6017
- }
6018
- },
6019
- {
6020
- "kind": "field",
6021
- "name": "iconName",
6022
- "type": {
6023
- "text": "IconNames | undefined"
6024
- },
6025
- "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6026
- "attribute": "icon-name",
6027
- "reflects": true,
6028
- "inheritedFrom": {
6029
- "name": "CardComponentMixin",
6030
- "module": "utils/mixins/CardComponentMixin.js"
6031
- }
6032
- },
6033
- {
6034
- "kind": "method",
6035
- "name": "renderImage",
6036
- "privacy": "protected",
6037
- "description": "Renders the image on the card if image source is provided",
6038
- "return": {
6039
- "type": {
6040
- "text": ""
6041
- }
6071
+ "fieldName": "orientation",
6072
+ "inheritedFrom": {
6073
+ "name": "CardComponentMixin",
6074
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6075
+ }
6076
+ },
6077
+ {
6078
+ "name": "title-tag-name",
6079
+ "type": {
6080
+ "text": "TagNameType"
6042
6081
  },
6082
+ "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
6083
+ "default": "'span'",
6084
+ "fieldName": "titleTagName",
6043
6085
  "inheritedFrom": {
6044
6086
  "name": "CardComponentMixin",
6045
- "module": "utils/mixins/CardComponentMixin.js"
6087
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6046
6088
  }
6047
6089
  },
6048
6090
  {
6049
- "kind": "method",
6050
- "name": "renderIcon",
6051
- "privacy": "protected",
6052
- "description": "Renders the icon on the card if icon name is provided",
6053
- "return": {
6054
- "type": {
6055
- "text": ""
6056
- }
6091
+ "name": "subtitle-tag-name",
6092
+ "type": {
6093
+ "text": "TagNameType"
6057
6094
  },
6095
+ "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
6096
+ "default": "'span'",
6097
+ "fieldName": "subtitleTagName",
6058
6098
  "inheritedFrom": {
6059
6099
  "name": "CardComponentMixin",
6060
- "module": "utils/mixins/CardComponentMixin.js"
6100
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6061
6101
  }
6062
6102
  },
6063
6103
  {
6064
- "kind": "method",
6065
- "name": "renderTitle",
6066
- "privacy": "protected",
6067
- "description": "Renders the title and subtitle on the card",
6068
- "return": {
6069
- "type": {
6070
- "text": ""
6071
- }
6104
+ "name": "icon-name",
6105
+ "type": {
6106
+ "text": "IconNames | undefined"
6072
6107
  },
6108
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6109
+ "fieldName": "iconName",
6073
6110
  "inheritedFrom": {
6074
6111
  "name": "CardComponentMixin",
6075
- "module": "utils/mixins/CardComponentMixin.js"
6112
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6076
6113
  }
6077
6114
  },
6078
6115
  {
6079
- "kind": "field",
6080
- "name": "autoFocusOnMount",
6116
+ "name": "auto-focus-on-mount",
6081
6117
  "type": {
6082
6118
  "text": "boolean"
6083
6119
  },
6084
6120
  "default": "false",
6085
6121
  "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
6086
- "attribute": "auto-focus-on-mount",
6087
- "reflects": true,
6122
+ "fieldName": "autoFocusOnMount",
6088
6123
  "inheritedFrom": {
6089
6124
  "name": "Buttonsimple",
6090
- "module": "components/buttonsimple/buttonsimple.component.js"
6125
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6091
6126
  }
6092
6127
  },
6093
6128
  {
6094
- "kind": "field",
6095
6129
  "name": "tabIndex",
6096
6130
  "type": {
6097
6131
  "text": "number"
6098
6132
  },
6099
6133
  "default": "0",
6100
6134
  "description": "This property specifies the tab order of the element.",
6101
- "attribute": "tabIndex",
6102
- "reflects": true,
6135
+ "fieldName": "tabIndex",
6103
6136
  "inheritedFrom": {
6104
6137
  "name": "Buttonsimple",
6105
- "module": "components/buttonsimple/buttonsimple.component.js"
6138
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6106
6139
  }
6107
6140
  },
6108
6141
  {
6109
- "kind": "field",
6110
6142
  "name": "disabled",
6111
6143
  "type": {
6112
6144
  "text": "boolean | undefined"
6113
6145
  },
6114
6146
  "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6115
6147
  "default": "undefined",
6116
- "attribute": "disabled",
6117
- "reflects": true,
6148
+ "fieldName": "disabled",
6118
6149
  "inheritedFrom": {
6119
6150
  "name": "Buttonsimple",
6120
- "module": "components/buttonsimple/buttonsimple.component.js"
6151
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6121
6152
  }
6122
6153
  },
6123
6154
  {
6124
- "kind": "field",
6125
6155
  "name": "active",
6126
6156
  "type": {
6127
6157
  "text": "boolean | undefined"
6128
6158
  },
6129
6159
  "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.",
6130
6160
  "default": "undefined",
6131
- "attribute": "active",
6132
- "reflects": true,
6161
+ "fieldName": "active",
6133
6162
  "inheritedFrom": {
6134
6163
  "name": "Buttonsimple",
6135
- "module": "components/buttonsimple/buttonsimple.component.js"
6164
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6136
6165
  }
6137
6166
  },
6138
6167
  {
6139
- "kind": "field",
6140
- "name": "softDisabled",
6168
+ "name": "soft-disabled",
6141
6169
  "type": {
6142
6170
  "text": "boolean | undefined"
6143
6171
  },
6144
6172
  "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.",
6145
6173
  "default": "undefined",
6146
- "attribute": "soft-disabled",
6147
- "reflects": true,
6174
+ "fieldName": "softDisabled",
6148
6175
  "inheritedFrom": {
6149
6176
  "name": "Buttonsimple",
6150
- "module": "components/buttonsimple/buttonsimple.component.js"
6177
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6151
6178
  }
6152
6179
  },
6153
6180
  {
6154
- "kind": "field",
6155
6181
  "name": "size",
6156
6182
  "type": {
6157
6183
  "text": "ButtonSize"
6158
6184
  },
6159
6185
  "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6160
6186
  "default": "32",
6161
- "attribute": "size",
6162
- "reflects": true,
6187
+ "fieldName": "size",
6163
6188
  "inheritedFrom": {
6164
6189
  "name": "Buttonsimple",
6165
- "module": "components/buttonsimple/buttonsimple.component.js"
6190
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6166
6191
  }
6167
6192
  },
6168
6193
  {
6169
- "kind": "field",
6170
6194
  "name": "role",
6171
6195
  "type": {
6172
6196
  "text": "RoleType"
6173
6197
  },
6174
6198
  "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.",
6175
6199
  "default": "button",
6176
- "attribute": "role",
6177
- "reflects": true,
6200
+ "fieldName": "role",
6178
6201
  "inheritedFrom": {
6179
6202
  "name": "Buttonsimple",
6180
- "module": "components/buttonsimple/buttonsimple.component.js"
6203
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6181
6204
  }
6182
6205
  },
6183
6206
  {
6184
- "kind": "field",
6185
6207
  "name": "ariaStateKey",
6186
6208
  "type": {
6187
6209
  "text": "string | undefined"
6188
6210
  },
6189
6211
  "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`",
6190
6212
  "default": "'aria-pressed' (when)",
6191
- "attribute": "ariaStateKey",
6192
- "reflects": true,
6213
+ "fieldName": "ariaStateKey",
6193
6214
  "inheritedFrom": {
6194
6215
  "name": "Buttonsimple",
6195
- "module": "components/buttonsimple/buttonsimple.component.js"
6216
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6196
6217
  }
6197
6218
  },
6198
6219
  {
6199
- "kind": "field",
6200
6220
  "name": "type",
6201
6221
  "type": {
6202
6222
  "text": "ButtonType"
6203
6223
  },
6204
6224
  "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.",
6205
6225
  "default": "button",
6206
- "attribute": "type",
6207
- "reflects": true,
6226
+ "fieldName": "type",
6208
6227
  "inheritedFrom": {
6209
6228
  "name": "Buttonsimple",
6210
- "module": "components/buttonsimple/buttonsimple.component.js"
6229
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6211
6230
  }
6212
6231
  },
6213
6232
  {
6214
- "kind": "field",
6215
6233
  "name": "name",
6216
6234
  "type": {
6217
6235
  "text": "string | undefined"
6218
6236
  },
6219
6237
  "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
6220
- "attribute": "name",
6221
- "reflects": true,
6238
+ "fieldName": "name",
6222
6239
  "inheritedFrom": {
6223
6240
  "name": "Buttonsimple",
6224
- "module": "components/buttonsimple/buttonsimple.component.js"
6241
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6225
6242
  }
6226
6243
  },
6227
6244
  {
6228
- "kind": "field",
6229
6245
  "name": "value",
6230
6246
  "type": {
6231
6247
  "text": "string | undefined"
6232
6248
  },
6233
6249
  "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
6234
- "attribute": "value",
6235
- "reflects": true,
6250
+ "fieldName": "value",
6251
+ "inheritedFrom": {
6252
+ "name": "Buttonsimple",
6253
+ "module": "src/components/buttonsimple/buttonsimple.component.ts"
6254
+ }
6255
+ }
6256
+ ]
6257
+ }
6258
+ ],
6259
+ "exports": [
6260
+ {
6261
+ "kind": "js",
6262
+ "name": "default",
6263
+ "declaration": {
6264
+ "name": "CardButton",
6265
+ "module": "components/cardbutton/cardbutton.component.js"
6266
+ }
6267
+ }
6268
+ ]
6269
+ },
6270
+ {
6271
+ "kind": "javascript-module",
6272
+ "path": "components/cardcheckbox/cardcheckbox.component.js",
6273
+ "declarations": [
6274
+ {
6275
+ "kind": "class",
6276
+ "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
6277
+ "name": "CardCheckbox",
6278
+ "cssProperties": [
6279
+ {
6280
+ "description": "The width of the card",
6281
+ "name": "--mdc-card-width",
6282
+ "inheritedFrom": {
6283
+ "name": "Card",
6284
+ "module": "src/components/card/card.component.ts"
6285
+ }
6286
+ }
6287
+ ],
6288
+ "cssParts": [
6289
+ {
6290
+ "description": "The header part of the card",
6291
+ "name": "header",
6292
+ "inheritedFrom": {
6293
+ "name": "Card",
6294
+ "module": "src/components/card/card.component.ts"
6295
+ }
6296
+ },
6297
+ {
6298
+ "description": "The icon part of the card header",
6299
+ "name": "icon",
6300
+ "inheritedFrom": {
6301
+ "name": "Card",
6302
+ "module": "src/components/card/card.component.ts"
6303
+ }
6304
+ },
6305
+ {
6306
+ "description": "The body part of the card",
6307
+ "name": "body",
6308
+ "inheritedFrom": {
6309
+ "name": "Card",
6310
+ "module": "src/components/card/card.component.ts"
6311
+ }
6312
+ },
6313
+ {
6314
+ "description": "The image part of the card",
6315
+ "name": "image",
6316
+ "inheritedFrom": {
6317
+ "name": "Card",
6318
+ "module": "src/components/card/card.component.ts"
6319
+ }
6320
+ },
6321
+ {
6322
+ "description": "The footer part of the card",
6323
+ "name": "footer",
6324
+ "inheritedFrom": {
6325
+ "name": "Card",
6326
+ "module": "src/components/card/card.component.ts"
6327
+ }
6328
+ },
6329
+ {
6330
+ "description": "The link part of the card footer",
6331
+ "name": "footer-link",
6332
+ "inheritedFrom": {
6333
+ "name": "Card",
6334
+ "module": "src/components/card/card.component.ts"
6335
+ }
6336
+ },
6337
+ {
6338
+ "description": "The primary button part of the card footer",
6339
+ "name": "footer-button-primary",
6340
+ "inheritedFrom": {
6341
+ "name": "Card",
6342
+ "module": "src/components/card/card.component.ts"
6343
+ }
6344
+ },
6345
+ {
6346
+ "description": "The secondary button part of the card footer",
6347
+ "name": "footer-button-secondary",
6348
+ "inheritedFrom": {
6349
+ "name": "Card",
6350
+ "module": "src/components/card/card.component.ts"
6351
+ }
6352
+ },
6353
+ {
6354
+ "description": "The icon button part of the card header",
6355
+ "name": "icon-button",
6356
+ "inheritedFrom": {
6357
+ "name": "Card",
6358
+ "module": "src/components/card/card.component.ts"
6359
+ }
6360
+ },
6361
+ {
6362
+ "description": "The text part of the card",
6363
+ "name": "text",
6364
+ "inheritedFrom": {
6365
+ "name": "Card",
6366
+ "module": "src/components/card/card.component.ts"
6367
+ }
6368
+ },
6369
+ {
6370
+ "description": "The check part of the card",
6371
+ "name": "check"
6372
+ },
6373
+ {
6374
+ "description": "The check icon part of the card",
6375
+ "name": "check-icon"
6376
+ },
6377
+ {
6378
+ "description": "The check icon button part of the card",
6379
+ "name": "check-icon-button"
6380
+ }
6381
+ ],
6382
+ "slots": [
6383
+ {
6384
+ "description": "This slot is for passing the content before the body",
6385
+ "name": "before-body",
6386
+ "inheritedFrom": {
6387
+ "name": "Card",
6388
+ "module": "src/components/card/card.component.ts"
6389
+ }
6390
+ },
6391
+ {
6392
+ "description": "This slot is for passing the text content for the card",
6393
+ "name": "body",
6236
6394
  "inheritedFrom": {
6237
- "name": "Buttonsimple",
6238
- "module": "components/buttonsimple/buttonsimple.component.js"
6395
+ "name": "Card",
6396
+ "module": "src/components/card/card.component.ts"
6239
6397
  }
6240
6398
  },
6241
6399
  {
6242
- "kind": "method",
6243
- "name": "executeAction",
6244
- "privacy": "protected",
6400
+ "description": "This slot is for passing the content after the body",
6401
+ "name": "after-body",
6245
6402
  "inheritedFrom": {
6246
- "name": "Buttonsimple",
6247
- "module": "components/buttonsimple/buttonsimple.component.js"
6403
+ "name": "Card",
6404
+ "module": "src/components/card/card.component.ts"
6248
6405
  }
6249
6406
  },
6250
6407
  {
6251
- "kind": "method",
6252
- "name": "setActive",
6253
- "privacy": "protected",
6254
- "parameters": [
6255
- {
6256
- "name": "element",
6257
- "type": {
6258
- "text": "HTMLElement"
6259
- },
6260
- "description": "The button element"
6261
- },
6262
- {
6263
- "name": "active",
6264
- "optional": true,
6265
- "type": {
6266
- "text": "boolean"
6267
- },
6268
- "description": "The active state of the element"
6269
- }
6270
- ],
6271
- "description": "Sets the ariaStateKey attributes based on the active state of the button.",
6408
+ "description": "This slot is for passing `mdc-link` component within the footer section.",
6409
+ "name": "footer-link",
6272
6410
  "inheritedFrom": {
6273
- "name": "Buttonsimple",
6274
- "module": "components/buttonsimple/buttonsimple.component.js"
6411
+ "name": "Card",
6412
+ "module": "src/components/card/card.component.ts"
6275
6413
  }
6276
6414
  },
6277
6415
  {
6278
- "kind": "method",
6279
- "name": "setSoftDisabled",
6280
- "privacy": "private",
6281
- "parameters": [
6282
- {
6283
- "name": "element",
6284
- "type": {
6285
- "text": "HTMLElement"
6286
- },
6287
- "description": "The button element."
6288
- },
6289
- {
6290
- "name": "softDisabled",
6291
- "optional": true,
6292
- "type": {
6293
- "text": "boolean"
6294
- },
6295
- "description": "The soft-disabled state."
6296
- }
6297
- ],
6298
- "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.",
6416
+ "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
6417
+ "name": "footer-button-primary",
6299
6418
  "inheritedFrom": {
6300
- "name": "Buttonsimple",
6301
- "module": "components/buttonsimple/buttonsimple.component.js"
6419
+ "name": "Card",
6420
+ "module": "src/components/card/card.component.ts"
6302
6421
  }
6303
6422
  },
6304
6423
  {
6305
- "kind": "method",
6306
- "name": "setDisabled",
6307
- "privacy": "private",
6308
- "parameters": [
6309
- {
6310
- "name": "element",
6311
- "type": {
6312
- "text": "HTMLElement"
6313
- },
6314
- "description": "The button element."
6315
- },
6316
- {
6317
- "name": "disabled",
6318
- "type": {
6319
- "text": "boolean"
6320
- },
6321
- "description": "The disabled state."
6322
- }
6323
- ],
6324
- "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.",
6424
+ "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
6425
+ "name": "footer-button-secondary",
6325
6426
  "inheritedFrom": {
6326
- "name": "Buttonsimple",
6327
- "module": "components/buttonsimple/buttonsimple.component.js"
6427
+ "name": "Card",
6428
+ "module": "src/components/card/card.component.ts"
6328
6429
  }
6329
6430
  },
6330
6431
  {
6331
- "kind": "method",
6332
- "name": "triggerClickEvent",
6333
- "privacy": "private",
6432
+ "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
6433
+ "name": "footer",
6334
6434
  "inheritedFrom": {
6335
- "name": "Buttonsimple",
6336
- "module": "components/buttonsimple/buttonsimple.component.js"
6435
+ "name": "Card",
6436
+ "module": "src/components/card/card.component.ts"
6337
6437
  }
6438
+ }
6439
+ ],
6440
+ "members": [
6441
+ {
6442
+ "kind": "field",
6443
+ "name": "checked",
6444
+ "type": {
6445
+ "text": "boolean"
6446
+ },
6447
+ "default": "false",
6448
+ "description": "The checked state of the card",
6449
+ "attribute": "checked",
6450
+ "reflects": true
6451
+ },
6452
+ {
6453
+ "kind": "field",
6454
+ "name": "selectionType",
6455
+ "type": {
6456
+ "text": "SelectionType"
6457
+ },
6458
+ "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
6459
+ "default": "'check'",
6460
+ "attribute": "selection-type",
6461
+ "reflects": true
6338
6462
  },
6339
6463
  {
6340
6464
  "kind": "method",
6341
- "name": "handleBlur",
6465
+ "name": "toggleChecked",
6342
6466
  "privacy": "private",
6343
- "description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
6344
- "inheritedFrom": {
6345
- "name": "Buttonsimple",
6346
- "module": "components/buttonsimple/buttonsimple.component.js"
6347
- }
6467
+ "description": "Toggles the checked state"
6348
6468
  },
6349
6469
  {
6350
6470
  "kind": "method",
6351
- "name": "handleKeyDown",
6471
+ "name": "toggleOnEnter",
6352
6472
  "privacy": "private",
6353
6473
  "parameters": [
6354
6474
  {
@@ -6356,18 +6476,14 @@
6356
6476
  "type": {
6357
6477
  "text": "KeyboardEvent"
6358
6478
  },
6359
- "description": "The keyboard event."
6479
+ "description": "The keyboard event"
6360
6480
  }
6361
6481
  ],
6362
- "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.",
6363
- "inheritedFrom": {
6364
- "name": "Buttonsimple",
6365
- "module": "components/buttonsimple/buttonsimple.component.js"
6366
- }
6482
+ "description": "Toggles the checked state when enter key is used"
6367
6483
  },
6368
6484
  {
6369
6485
  "kind": "method",
6370
- "name": "handleKeyUp",
6486
+ "name": "toggleOnSpace",
6371
6487
  "privacy": "private",
6372
6488
  "parameters": [
6373
6489
  {
@@ -6375,195 +6491,322 @@
6375
6491
  "type": {
6376
6492
  "text": "KeyboardEvent"
6377
6493
  },
6378
- "description": "The keyboard event."
6494
+ "description": "The keyboard event"
6379
6495
  }
6380
6496
  ],
6381
- "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.",
6382
- "inheritedFrom": {
6383
- "name": "Buttonsimple",
6384
- "module": "components/buttonsimple/buttonsimple.component.js"
6385
- }
6386
- }
6387
- ],
6388
- "events": [
6497
+ "description": "Toggles the checked state when space key is used"
6498
+ },
6389
6499
  {
6390
- "description": "(React: onClick) Event that gets dispatched when the card is clicked.",
6391
- "name": "click",
6392
- "reactName": "onClick",
6393
- "inheritedFrom": {
6394
- "name": "Buttonsimple",
6395
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6500
+ "kind": "method",
6501
+ "name": "renderSelection",
6502
+ "privacy": "private",
6503
+ "description": "Renders the selection icon or checkbox based on the selection type",
6504
+ "return": {
6505
+ "type": {
6506
+ "text": ""
6507
+ }
6396
6508
  }
6397
6509
  },
6398
6510
  {
6399
- "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.",
6400
- "name": "keydown",
6401
- "reactName": "onKeyDown",
6511
+ "kind": "method",
6512
+ "name": "renderHeader",
6513
+ "privacy": "protected",
6514
+ "description": "Renders the header of the card",
6515
+ "return": {
6516
+ "type": {
6517
+ "text": ""
6518
+ }
6519
+ },
6402
6520
  "inheritedFrom": {
6403
- "name": "Buttonsimple",
6404
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6521
+ "name": "Card",
6522
+ "module": "components/card/card.component.js"
6405
6523
  }
6406
6524
  },
6407
6525
  {
6408
- "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.",
6409
- "name": "keyup",
6410
- "reactName": "onKeyUp",
6526
+ "kind": "field",
6527
+ "name": "disabled",
6528
+ "type": {
6529
+ "text": "boolean | undefined"
6530
+ },
6531
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6532
+ "default": "undefined",
6533
+ "attribute": "disabled",
6534
+ "reflects": true,
6411
6535
  "inheritedFrom": {
6412
- "name": "Buttonsimple",
6413
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6536
+ "name": "DisabledMixin",
6537
+ "module": "utils/mixins/DisabledMixin.js"
6414
6538
  }
6415
6539
  },
6416
6540
  {
6417
- "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
6418
- "name": "focus",
6419
- "reactName": "onFocus",
6541
+ "kind": "field",
6542
+ "name": "tabIndex",
6543
+ "type": {
6544
+ "text": "number"
6545
+ },
6546
+ "default": "0",
6547
+ "description": "This property specifies the tab order of the element.",
6548
+ "attribute": "tabIndex",
6549
+ "reflects": true,
6420
6550
  "inheritedFrom": {
6421
- "name": "Buttonsimple",
6422
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6551
+ "name": "TabIndexMixin",
6552
+ "module": "utils/mixins/TabIndexMixin.js"
6423
6553
  }
6424
- }
6425
- ],
6426
- "mixins": [
6427
- {
6428
- "name": "CardComponentMixin",
6429
- "module": "/src/utils/mixins/CardComponentMixin"
6430
- }
6431
- ],
6432
- "superclass": {
6433
- "name": "Buttonsimple",
6434
- "module": "/src/components/buttonsimple/buttonsimple.component"
6435
- },
6436
- "tagName": "mdc-cardbutton",
6437
- "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 * @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 * @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 `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n */",
6438
- "customElement": true,
6439
- "attributes": [
6554
+ },
6440
6555
  {
6441
- "name": "card-title",
6556
+ "kind": "field",
6557
+ "name": "cardTitle",
6442
6558
  "type": {
6443
6559
  "text": "string"
6444
6560
  },
6445
6561
  "default": "''",
6446
6562
  "description": "The title of the card - part of header section",
6447
- "fieldName": "cardTitle",
6563
+ "attribute": "card-title",
6564
+ "reflects": true,
6448
6565
  "inheritedFrom": {
6449
6566
  "name": "CardComponentMixin",
6450
- "module": "src/utils/mixins/CardComponentMixin.ts"
6567
+ "module": "utils/mixins/CardComponentMixin.js"
6451
6568
  }
6452
6569
  },
6453
6570
  {
6571
+ "kind": "field",
6454
6572
  "name": "subtitle",
6455
6573
  "type": {
6456
6574
  "text": "string"
6457
6575
  },
6458
6576
  "default": "''",
6459
6577
  "description": "The subtitle of the card - part of header section",
6460
- "fieldName": "subtitle",
6578
+ "attribute": "subtitle",
6579
+ "reflects": true,
6461
6580
  "inheritedFrom": {
6462
6581
  "name": "CardComponentMixin",
6463
- "module": "src/utils/mixins/CardComponentMixin.ts"
6582
+ "module": "utils/mixins/CardComponentMixin.js"
6464
6583
  }
6465
6584
  },
6466
6585
  {
6467
- "name": "image-src",
6586
+ "kind": "field",
6587
+ "name": "imageSrc",
6468
6588
  "type": {
6469
6589
  "text": "string"
6470
6590
  },
6471
6591
  "default": "''",
6472
6592
  "description": "The image source URL to render on the card",
6473
- "fieldName": "imageSrc",
6593
+ "attribute": "image-src",
6594
+ "reflects": true,
6474
6595
  "inheritedFrom": {
6475
6596
  "name": "CardComponentMixin",
6476
- "module": "src/utils/mixins/CardComponentMixin.ts"
6597
+ "module": "utils/mixins/CardComponentMixin.js"
6477
6598
  }
6478
6599
  },
6479
6600
  {
6480
- "name": "image-alt",
6601
+ "kind": "field",
6602
+ "name": "imageAlt",
6481
6603
  "type": {
6482
6604
  "text": "string"
6483
6605
  },
6484
6606
  "default": "''",
6485
6607
  "description": "The image alt for accessibility support",
6486
- "fieldName": "imageAlt",
6608
+ "attribute": "image-alt",
6609
+ "reflects": true,
6487
6610
  "inheritedFrom": {
6488
6611
  "name": "CardComponentMixin",
6489
- "module": "src/utils/mixins/CardComponentMixin.ts"
6612
+ "module": "utils/mixins/CardComponentMixin.js"
6490
6613
  }
6491
6614
  },
6492
6615
  {
6616
+ "kind": "field",
6493
6617
  "name": "variant",
6494
6618
  "type": {
6495
6619
  "text": "CardVariant"
6496
6620
  },
6497
6621
  "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
6498
6622
  "default": "'border'",
6499
- "fieldName": "variant",
6623
+ "attribute": "variant",
6624
+ "reflects": true,
6500
6625
  "inheritedFrom": {
6501
6626
  "name": "CardComponentMixin",
6502
- "module": "src/utils/mixins/CardComponentMixin.ts"
6627
+ "module": "utils/mixins/CardComponentMixin.js"
6503
6628
  }
6504
6629
  },
6505
6630
  {
6631
+ "kind": "field",
6506
6632
  "name": "orientation",
6507
6633
  "type": {
6508
6634
  "text": "CardOrientation"
6509
6635
  },
6510
6636
  "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
6511
6637
  "default": "'vertical'",
6512
- "fieldName": "orientation",
6638
+ "attribute": "orientation",
6639
+ "reflects": true,
6513
6640
  "inheritedFrom": {
6514
6641
  "name": "CardComponentMixin",
6515
- "module": "src/utils/mixins/CardComponentMixin.ts"
6642
+ "module": "utils/mixins/CardComponentMixin.js"
6516
6643
  }
6517
6644
  },
6518
6645
  {
6519
- "name": "title-tag-name",
6646
+ "kind": "field",
6647
+ "name": "titleTagName",
6520
6648
  "type": {
6521
6649
  "text": "TagNameType"
6522
6650
  },
6523
6651
  "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
6524
6652
  "default": "'span'",
6525
- "fieldName": "titleTagName",
6653
+ "attribute": "title-tag-name",
6654
+ "reflects": true,
6526
6655
  "inheritedFrom": {
6527
6656
  "name": "CardComponentMixin",
6528
- "module": "src/utils/mixins/CardComponentMixin.ts"
6657
+ "module": "utils/mixins/CardComponentMixin.js"
6529
6658
  }
6530
6659
  },
6531
6660
  {
6532
- "name": "subtitle-tag-name",
6661
+ "kind": "field",
6662
+ "name": "subtitleTagName",
6533
6663
  "type": {
6534
6664
  "text": "TagNameType"
6535
6665
  },
6536
6666
  "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
6537
6667
  "default": "'span'",
6538
- "fieldName": "subtitleTagName",
6668
+ "attribute": "subtitle-tag-name",
6669
+ "reflects": true,
6539
6670
  "inheritedFrom": {
6540
6671
  "name": "CardComponentMixin",
6541
- "module": "src/utils/mixins/CardComponentMixin.ts"
6672
+ "module": "utils/mixins/CardComponentMixin.js"
6542
6673
  }
6543
6674
  },
6544
6675
  {
6545
- "name": "icon-name",
6676
+ "kind": "field",
6677
+ "name": "iconName",
6546
6678
  "type": {
6547
6679
  "text": "IconNames | undefined"
6548
6680
  },
6549
6681
  "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6550
- "fieldName": "iconName",
6682
+ "attribute": "icon-name",
6683
+ "reflects": true,
6551
6684
  "inheritedFrom": {
6552
6685
  "name": "CardComponentMixin",
6553
- "module": "src/utils/mixins/CardComponentMixin.ts"
6686
+ "module": "utils/mixins/CardComponentMixin.js"
6554
6687
  }
6555
6688
  },
6556
6689
  {
6557
- "name": "auto-focus-on-mount",
6690
+ "kind": "method",
6691
+ "name": "renderImage",
6692
+ "privacy": "protected",
6693
+ "description": "Renders the image on the card if image source is provided",
6694
+ "return": {
6695
+ "type": {
6696
+ "text": ""
6697
+ }
6698
+ },
6699
+ "inheritedFrom": {
6700
+ "name": "CardComponentMixin",
6701
+ "module": "utils/mixins/CardComponentMixin.js"
6702
+ }
6703
+ },
6704
+ {
6705
+ "kind": "method",
6706
+ "name": "renderIcon",
6707
+ "privacy": "protected",
6708
+ "description": "Renders the icon on the card if icon name is provided",
6709
+ "return": {
6710
+ "type": {
6711
+ "text": ""
6712
+ }
6713
+ },
6714
+ "inheritedFrom": {
6715
+ "name": "CardComponentMixin",
6716
+ "module": "utils/mixins/CardComponentMixin.js"
6717
+ }
6718
+ },
6719
+ {
6720
+ "kind": "method",
6721
+ "name": "renderTitle",
6722
+ "privacy": "protected",
6723
+ "description": "Renders the title and subtitle on the card",
6724
+ "return": {
6725
+ "type": {
6726
+ "text": ""
6727
+ }
6728
+ },
6729
+ "inheritedFrom": {
6730
+ "name": "CardComponentMixin",
6731
+ "module": "utils/mixins/CardComponentMixin.js"
6732
+ }
6733
+ },
6734
+ {
6735
+ "kind": "method",
6736
+ "name": "renderFooter",
6737
+ "privacy": "protected",
6738
+ "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
6739
+ "return": {
6740
+ "type": {
6741
+ "text": ""
6742
+ }
6743
+ },
6744
+ "inheritedFrom": {
6745
+ "name": "FooterMixin",
6746
+ "module": "utils/mixins/FooterMixin.js"
6747
+ }
6748
+ }
6749
+ ],
6750
+ "events": [
6751
+ {
6752
+ "name": "change",
6753
+ "type": {
6754
+ "text": "Event"
6755
+ },
6756
+ "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
6757
+ "reactName": "onChange"
6758
+ },
6759
+ {
6760
+ "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
6761
+ "name": "click",
6762
+ "reactName": "onClick"
6763
+ },
6764
+ {
6765
+ "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It toggles the checked state when enter key is used.",
6766
+ "name": "keydown",
6767
+ "reactName": "onKeyDown"
6768
+ },
6769
+ {
6770
+ "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
6771
+ "name": "keyup",
6772
+ "reactName": "onKeyUp"
6773
+ },
6774
+ {
6775
+ "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
6776
+ "name": "focus",
6777
+ "reactName": "onFocus"
6778
+ }
6779
+ ],
6780
+ "attributes": [
6781
+ {
6782
+ "name": "checked",
6558
6783
  "type": {
6559
6784
  "text": "boolean"
6560
6785
  },
6561
6786
  "default": "false",
6562
- "description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
6563
- "fieldName": "autoFocusOnMount",
6787
+ "description": "The checked state of the card",
6788
+ "fieldName": "checked"
6789
+ },
6790
+ {
6791
+ "name": "selection-type",
6792
+ "type": {
6793
+ "text": "SelectionType"
6794
+ },
6795
+ "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
6796
+ "default": "'check'",
6797
+ "fieldName": "selectionType"
6798
+ },
6799
+ {
6800
+ "name": "disabled",
6801
+ "type": {
6802
+ "text": "boolean | undefined"
6803
+ },
6804
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6805
+ "default": "undefined",
6806
+ "fieldName": "disabled",
6564
6807
  "inheritedFrom": {
6565
- "name": "Buttonsimple",
6566
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6808
+ "name": "DisabledMixin",
6809
+ "module": "src/utils/mixins/DisabledMixin.ts"
6567
6810
  }
6568
6811
  },
6569
6812
  {
@@ -6575,126 +6818,144 @@
6575
6818
  "description": "This property specifies the tab order of the element.",
6576
6819
  "fieldName": "tabIndex",
6577
6820
  "inheritedFrom": {
6578
- "name": "Buttonsimple",
6579
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6821
+ "name": "TabIndexMixin",
6822
+ "module": "src/utils/mixins/TabIndexMixin.ts"
6580
6823
  }
6581
6824
  },
6582
6825
  {
6583
- "name": "disabled",
6826
+ "name": "card-title",
6584
6827
  "type": {
6585
- "text": "boolean | undefined"
6828
+ "text": "string"
6586
6829
  },
6587
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6588
- "default": "undefined",
6589
- "fieldName": "disabled",
6830
+ "default": "''",
6831
+ "description": "The title of the card - part of header section",
6832
+ "fieldName": "cardTitle",
6590
6833
  "inheritedFrom": {
6591
- "name": "Buttonsimple",
6592
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6834
+ "name": "CardComponentMixin",
6835
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6593
6836
  }
6594
6837
  },
6595
6838
  {
6596
- "name": "active",
6839
+ "name": "subtitle",
6597
6840
  "type": {
6598
- "text": "boolean | undefined"
6841
+ "text": "string"
6599
6842
  },
6600
- "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.",
6601
- "default": "undefined",
6602
- "fieldName": "active",
6843
+ "default": "''",
6844
+ "description": "The subtitle of the card - part of header section",
6845
+ "fieldName": "subtitle",
6603
6846
  "inheritedFrom": {
6604
- "name": "Buttonsimple",
6605
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6847
+ "name": "CardComponentMixin",
6848
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6606
6849
  }
6607
6850
  },
6608
6851
  {
6609
- "name": "soft-disabled",
6852
+ "name": "image-src",
6610
6853
  "type": {
6611
- "text": "boolean | undefined"
6854
+ "text": "string"
6612
6855
  },
6613
- "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.",
6614
- "default": "undefined",
6615
- "fieldName": "softDisabled",
6856
+ "default": "''",
6857
+ "description": "The image source URL to render on the card",
6858
+ "fieldName": "imageSrc",
6616
6859
  "inheritedFrom": {
6617
- "name": "Buttonsimple",
6618
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6860
+ "name": "CardComponentMixin",
6861
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6619
6862
  }
6620
6863
  },
6621
6864
  {
6622
- "name": "size",
6865
+ "name": "image-alt",
6623
6866
  "type": {
6624
- "text": "ButtonSize"
6867
+ "text": "string"
6625
6868
  },
6626
- "description": "Simplebutton size is a super set of all the sizes supported by children components.",
6627
- "default": "32",
6628
- "fieldName": "size",
6869
+ "default": "''",
6870
+ "description": "The image alt for accessibility support",
6871
+ "fieldName": "imageAlt",
6629
6872
  "inheritedFrom": {
6630
- "name": "Buttonsimple",
6631
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6873
+ "name": "CardComponentMixin",
6874
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6632
6875
  }
6633
6876
  },
6634
6877
  {
6635
- "name": "role",
6878
+ "name": "variant",
6636
6879
  "type": {
6637
- "text": "RoleType"
6880
+ "text": "CardVariant"
6638
6881
  },
6639
- "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.",
6640
- "default": "button",
6641
- "fieldName": "role",
6882
+ "description": "The variant of the card. It can either be set to 'border' or 'ghost'",
6883
+ "default": "'border'",
6884
+ "fieldName": "variant",
6642
6885
  "inheritedFrom": {
6643
- "name": "Buttonsimple",
6644
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6886
+ "name": "CardComponentMixin",
6887
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6645
6888
  }
6646
6889
  },
6647
6890
  {
6648
- "name": "ariaStateKey",
6891
+ "name": "orientation",
6649
6892
  "type": {
6650
- "text": "string | undefined"
6893
+ "text": "CardOrientation"
6651
6894
  },
6652
- "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`",
6653
- "default": "'aria-pressed' (when)",
6654
- "fieldName": "ariaStateKey",
6895
+ "description": "The orientation of the card. It can either be set to 'vertical' or 'horizontal'",
6896
+ "default": "'vertical'",
6897
+ "fieldName": "orientation",
6655
6898
  "inheritedFrom": {
6656
- "name": "Buttonsimple",
6657
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6899
+ "name": "CardComponentMixin",
6900
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6658
6901
  }
6659
6902
  },
6660
6903
  {
6661
- "name": "type",
6904
+ "name": "title-tag-name",
6662
6905
  "type": {
6663
- "text": "ButtonType"
6906
+ "text": "TagNameType"
6664
6907
  },
6665
- "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.",
6666
- "default": "button",
6667
- "fieldName": "type",
6908
+ "description": "The tag name for the card title. It supports all the types that `mdc-text` supports",
6909
+ "default": "'span'",
6910
+ "fieldName": "titleTagName",
6668
6911
  "inheritedFrom": {
6669
- "name": "Buttonsimple",
6670
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6912
+ "name": "CardComponentMixin",
6913
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6671
6914
  }
6672
6915
  },
6673
6916
  {
6674
- "name": "name",
6917
+ "name": "subtitle-tag-name",
6675
6918
  "type": {
6676
- "text": "string | undefined"
6919
+ "text": "TagNameType"
6677
6920
  },
6678
- "description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
6679
- "fieldName": "name",
6921
+ "description": "The tag name for the subtitle. It supports all the types that `mdc-text` supports",
6922
+ "default": "'span'",
6923
+ "fieldName": "subtitleTagName",
6680
6924
  "inheritedFrom": {
6681
- "name": "Buttonsimple",
6682
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6925
+ "name": "CardComponentMixin",
6926
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6683
6927
  }
6684
6928
  },
6685
6929
  {
6686
- "name": "value",
6930
+ "name": "icon-name",
6687
6931
  "type": {
6688
- "text": "string | undefined"
6932
+ "text": "IconNames | undefined"
6689
6933
  },
6690
- "description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
6691
- "fieldName": "value",
6934
+ "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
6935
+ "fieldName": "iconName",
6692
6936
  "inheritedFrom": {
6693
- "name": "Buttonsimple",
6694
- "module": "src/components/buttonsimple/buttonsimple.component.ts"
6937
+ "name": "CardComponentMixin",
6938
+ "module": "src/utils/mixins/CardComponentMixin.ts"
6695
6939
  }
6696
6940
  }
6697
- ]
6941
+ ],
6942
+ "mixins": [
6943
+ {
6944
+ "name": "DisabledMixin",
6945
+ "module": "/src/utils/mixins/DisabledMixin"
6946
+ },
6947
+ {
6948
+ "name": "TabIndexMixin",
6949
+ "module": "/src/utils/mixins/TabIndexMixin"
6950
+ }
6951
+ ],
6952
+ "superclass": {
6953
+ "name": "Card",
6954
+ "module": "/src/components/card/card.component"
6955
+ },
6956
+ "tagName": "mdc-cardcheckbox",
6957
+ "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\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 * @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 `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
6958
+ "customElement": true
6698
6959
  }
6699
6960
  ],
6700
6961
  "exports": [
@@ -6702,295 +6963,108 @@
6702
6963
  "kind": "js",
6703
6964
  "name": "default",
6704
6965
  "declaration": {
6705
- "name": "CardButton",
6706
- "module": "components/cardbutton/cardbutton.component.js"
6966
+ "name": "CardCheckbox",
6967
+ "module": "components/cardcheckbox/cardcheckbox.component.js"
6707
6968
  }
6708
6969
  }
6709
6970
  ]
6710
6971
  },
6711
6972
  {
6712
6973
  "kind": "javascript-module",
6713
- "path": "components/cardcheckbox/cardcheckbox.component.js",
6974
+ "path": "components/card/card.component.js",
6714
6975
  "declarations": [
6715
6976
  {
6716
6977
  "kind": "class",
6717
- "description": "cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n\nWhile using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\nThis card would have events for selected and unselected (similar to checkbox)\n\n**Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\nMake sure to pass only non-interactable elements within the slots.\n\nMake sure to pass the `card-title` mandatorily for this card.",
6718
- "name": "CardCheckbox",
6978
+ "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. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\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 `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'.",
6979
+ "name": "Card",
6719
6980
  "cssProperties": [
6720
6981
  {
6721
6982
  "description": "The width of the card",
6722
- "name": "--mdc-card-width",
6723
- "inheritedFrom": {
6724
- "name": "Card",
6725
- "module": "src/components/card/card.component.ts"
6726
- }
6983
+ "name": "--mdc-card-width"
6727
6984
  }
6728
6985
  ],
6729
6986
  "cssParts": [
6730
6987
  {
6731
6988
  "description": "The header part of the card",
6732
- "name": "header",
6733
- "inheritedFrom": {
6734
- "name": "Card",
6735
- "module": "src/components/card/card.component.ts"
6736
- }
6989
+ "name": "header"
6737
6990
  },
6738
6991
  {
6739
6992
  "description": "The icon part of the card header",
6740
- "name": "icon",
6741
- "inheritedFrom": {
6742
- "name": "Card",
6743
- "module": "src/components/card/card.component.ts"
6744
- }
6993
+ "name": "icon"
6745
6994
  },
6746
6995
  {
6747
6996
  "description": "The body part of the card",
6748
- "name": "body",
6749
- "inheritedFrom": {
6750
- "name": "Card",
6751
- "module": "src/components/card/card.component.ts"
6752
- }
6997
+ "name": "body"
6753
6998
  },
6754
6999
  {
6755
7000
  "description": "The image part of the card",
6756
- "name": "image",
6757
- "inheritedFrom": {
6758
- "name": "Card",
6759
- "module": "src/components/card/card.component.ts"
6760
- }
7001
+ "name": "image"
6761
7002
  },
6762
7003
  {
6763
7004
  "description": "The footer part of the card",
6764
- "name": "footer",
6765
- "inheritedFrom": {
6766
- "name": "Card",
6767
- "module": "src/components/card/card.component.ts"
6768
- }
7005
+ "name": "footer"
6769
7006
  },
6770
7007
  {
6771
7008
  "description": "The link part of the card footer",
6772
- "name": "footer-link",
6773
- "inheritedFrom": {
6774
- "name": "Card",
6775
- "module": "src/components/card/card.component.ts"
6776
- }
7009
+ "name": "footer-link"
6777
7010
  },
6778
7011
  {
6779
7012
  "description": "The primary button part of the card footer",
6780
- "name": "footer-button-primary",
6781
- "inheritedFrom": {
6782
- "name": "Card",
6783
- "module": "src/components/card/card.component.ts"
6784
- }
7013
+ "name": "footer-button-primary"
6785
7014
  },
6786
7015
  {
6787
7016
  "description": "The secondary button part of the card footer",
6788
- "name": "footer-button-secondary",
6789
- "inheritedFrom": {
6790
- "name": "Card",
6791
- "module": "src/components/card/card.component.ts"
6792
- }
7017
+ "name": "footer-button-secondary"
6793
7018
  },
6794
7019
  {
6795
7020
  "description": "The icon button part of the card header",
6796
- "name": "icon-button",
6797
- "inheritedFrom": {
6798
- "name": "Card",
6799
- "module": "src/components/card/card.component.ts"
6800
- }
7021
+ "name": "icon-button"
6801
7022
  },
6802
7023
  {
6803
7024
  "description": "The text part of the card",
6804
- "name": "text",
6805
- "inheritedFrom": {
6806
- "name": "Card",
6807
- "module": "src/components/card/card.component.ts"
6808
- }
6809
- },
6810
- {
6811
- "description": "The check part of the card",
6812
- "name": "check"
6813
- },
6814
- {
6815
- "description": "The check icon part of the card",
6816
- "name": "check-icon"
6817
- },
6818
- {
6819
- "description": "The check icon button part of the card",
6820
- "name": "check-icon-button"
7025
+ "name": "text"
6821
7026
  }
6822
7027
  ],
6823
7028
  "slots": [
6824
7029
  {
6825
7030
  "description": "This slot is for passing the content before the body",
6826
- "name": "before-body",
6827
- "inheritedFrom": {
6828
- "name": "Card",
6829
- "module": "src/components/card/card.component.ts"
6830
- }
7031
+ "name": "before-body"
6831
7032
  },
6832
7033
  {
6833
7034
  "description": "This slot is for passing the text content for the card",
6834
- "name": "body",
6835
- "inheritedFrom": {
6836
- "name": "Card",
6837
- "module": "src/components/card/card.component.ts"
6838
- }
6839
- },
6840
- {
6841
- "description": "This slot is for passing the content after the body",
6842
- "name": "after-body",
6843
- "inheritedFrom": {
6844
- "name": "Card",
6845
- "module": "src/components/card/card.component.ts"
6846
- }
6847
- },
6848
- {
6849
- "description": "This slot is for passing `mdc-link` component within the footer section.",
6850
- "name": "footer-link",
6851
- "inheritedFrom": {
6852
- "name": "Card",
6853
- "module": "src/components/card/card.component.ts"
6854
- }
6855
- },
6856
- {
6857
- "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
6858
- "name": "footer-button-primary",
6859
- "inheritedFrom": {
6860
- "name": "Card",
6861
- "module": "src/components/card/card.component.ts"
6862
- }
6863
- },
6864
- {
6865
- "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
6866
- "name": "footer-button-secondary",
6867
- "inheritedFrom": {
6868
- "name": "Card",
6869
- "module": "src/components/card/card.component.ts"
6870
- }
6871
- },
6872
- {
6873
- "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
6874
- "name": "footer",
6875
- "inheritedFrom": {
6876
- "name": "Card",
6877
- "module": "src/components/card/card.component.ts"
6878
- }
6879
- }
6880
- ],
6881
- "members": [
6882
- {
6883
- "kind": "field",
6884
- "name": "checked",
6885
- "type": {
6886
- "text": "boolean"
6887
- },
6888
- "default": "false",
6889
- "description": "The checked state of the card",
6890
- "attribute": "checked",
6891
- "reflects": true
6892
- },
6893
- {
6894
- "kind": "field",
6895
- "name": "selectionType",
6896
- "type": {
6897
- "text": "SelectionType"
6898
- },
6899
- "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
6900
- "default": "'check'",
6901
- "attribute": "selection-type",
6902
- "reflects": true
6903
- },
6904
- {
6905
- "kind": "method",
6906
- "name": "toggleChecked",
6907
- "privacy": "private",
6908
- "description": "Toggles the checked state"
6909
- },
6910
- {
6911
- "kind": "method",
6912
- "name": "toggleOnEnter",
6913
- "privacy": "private",
6914
- "parameters": [
6915
- {
6916
- "name": "event",
6917
- "type": {
6918
- "text": "KeyboardEvent"
6919
- },
6920
- "description": "The keyboard event"
6921
- }
6922
- ],
6923
- "description": "Toggles the checked state when enter key is used"
7035
+ "name": "body"
6924
7036
  },
6925
- {
6926
- "kind": "method",
6927
- "name": "toggleOnSpace",
6928
- "privacy": "private",
6929
- "parameters": [
6930
- {
6931
- "name": "event",
6932
- "type": {
6933
- "text": "KeyboardEvent"
6934
- },
6935
- "description": "The keyboard event"
6936
- }
6937
- ],
6938
- "description": "Toggles the checked state when space key is used"
7037
+ {
7038
+ "description": "This slot is for passing the content after the body",
7039
+ "name": "after-body"
6939
7040
  },
6940
7041
  {
6941
- "kind": "method",
6942
- "name": "renderSelection",
6943
- "privacy": "private",
6944
- "description": "Renders the selection icon or checkbox based on the selection type",
6945
- "return": {
6946
- "type": {
6947
- "text": ""
6948
- }
6949
- }
7042
+ "description": "This slot is for passing `mdc-link` component within the footer section.",
7043
+ "name": "footer-link"
7044
+ },
7045
+ {
7046
+ "description": "This slot is for passing primary variant of `mdc-button` component within the footer section.",
7047
+ "name": "footer-button-primary"
7048
+ },
7049
+ {
7050
+ "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
7051
+ "name": "footer-button-secondary"
6950
7052
  },
7053
+ {
7054
+ "description": " This slot is for passing custom footer content. Only use this if really needed, using the footer-link and footer-button slots is preferred.",
7055
+ "name": "footer"
7056
+ }
7057
+ ],
7058
+ "members": [
6951
7059
  {
6952
7060
  "kind": "method",
6953
7061
  "name": "renderHeader",
6954
7062
  "privacy": "protected",
6955
- "description": "Renders the header of the card",
7063
+ "description": "Renders the header of the card if title is provided",
6956
7064
  "return": {
6957
7065
  "type": {
6958
7066
  "text": ""
6959
7067
  }
6960
- },
6961
- "inheritedFrom": {
6962
- "name": "Card",
6963
- "module": "components/card/card.component.js"
6964
- }
6965
- },
6966
- {
6967
- "kind": "field",
6968
- "name": "disabled",
6969
- "type": {
6970
- "text": "boolean | undefined"
6971
- },
6972
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6973
- "default": "undefined",
6974
- "attribute": "disabled",
6975
- "reflects": true,
6976
- "inheritedFrom": {
6977
- "name": "DisabledMixin",
6978
- "module": "utils/mixins/DisabledMixin.js"
6979
- }
6980
- },
6981
- {
6982
- "kind": "field",
6983
- "name": "tabIndex",
6984
- "type": {
6985
- "text": "number"
6986
- },
6987
- "default": "0",
6988
- "description": "This property specifies the tab order of the element.",
6989
- "attribute": "tabIndex",
6990
- "reflects": true,
6991
- "inheritedFrom": {
6992
- "name": "TabIndexMixin",
6993
- "module": "utils/mixins/TabIndexMixin.js"
6994
7068
  }
6995
7069
  },
6996
7070
  {
@@ -7004,8 +7078,8 @@
7004
7078
  "attribute": "card-title",
7005
7079
  "reflects": true,
7006
7080
  "inheritedFrom": {
7007
- "name": "Card",
7008
- "module": "components/card/card.component.js"
7081
+ "name": "CardComponentMixin",
7082
+ "module": "utils/mixins/CardComponentMixin.js"
7009
7083
  }
7010
7084
  },
7011
7085
  {
@@ -7019,8 +7093,8 @@
7019
7093
  "attribute": "subtitle",
7020
7094
  "reflects": true,
7021
7095
  "inheritedFrom": {
7022
- "name": "Card",
7023
- "module": "components/card/card.component.js"
7096
+ "name": "CardComponentMixin",
7097
+ "module": "utils/mixins/CardComponentMixin.js"
7024
7098
  }
7025
7099
  },
7026
7100
  {
@@ -7034,8 +7108,8 @@
7034
7108
  "attribute": "image-src",
7035
7109
  "reflects": true,
7036
7110
  "inheritedFrom": {
7037
- "name": "Card",
7038
- "module": "components/card/card.component.js"
7111
+ "name": "CardComponentMixin",
7112
+ "module": "utils/mixins/CardComponentMixin.js"
7039
7113
  }
7040
7114
  },
7041
7115
  {
@@ -7049,8 +7123,8 @@
7049
7123
  "attribute": "image-alt",
7050
7124
  "reflects": true,
7051
7125
  "inheritedFrom": {
7052
- "name": "Card",
7053
- "module": "components/card/card.component.js"
7126
+ "name": "CardComponentMixin",
7127
+ "module": "utils/mixins/CardComponentMixin.js"
7054
7128
  }
7055
7129
  },
7056
7130
  {
@@ -7064,8 +7138,8 @@
7064
7138
  "attribute": "variant",
7065
7139
  "reflects": true,
7066
7140
  "inheritedFrom": {
7067
- "name": "Card",
7068
- "module": "components/card/card.component.js"
7141
+ "name": "CardComponentMixin",
7142
+ "module": "utils/mixins/CardComponentMixin.js"
7069
7143
  }
7070
7144
  },
7071
7145
  {
@@ -7079,8 +7153,8 @@
7079
7153
  "attribute": "orientation",
7080
7154
  "reflects": true,
7081
7155
  "inheritedFrom": {
7082
- "name": "Card",
7083
- "module": "components/card/card.component.js"
7156
+ "name": "CardComponentMixin",
7157
+ "module": "utils/mixins/CardComponentMixin.js"
7084
7158
  }
7085
7159
  },
7086
7160
  {
@@ -7094,8 +7168,8 @@
7094
7168
  "attribute": "title-tag-name",
7095
7169
  "reflects": true,
7096
7170
  "inheritedFrom": {
7097
- "name": "Card",
7098
- "module": "components/card/card.component.js"
7171
+ "name": "CardComponentMixin",
7172
+ "module": "utils/mixins/CardComponentMixin.js"
7099
7173
  }
7100
7174
  },
7101
7175
  {
@@ -7109,8 +7183,8 @@
7109
7183
  "attribute": "subtitle-tag-name",
7110
7184
  "reflects": true,
7111
7185
  "inheritedFrom": {
7112
- "name": "Card",
7113
- "module": "components/card/card.component.js"
7186
+ "name": "CardComponentMixin",
7187
+ "module": "utils/mixins/CardComponentMixin.js"
7114
7188
  }
7115
7189
  },
7116
7190
  {
@@ -7123,8 +7197,8 @@
7123
7197
  "attribute": "icon-name",
7124
7198
  "reflects": true,
7125
7199
  "inheritedFrom": {
7126
- "name": "Card",
7127
- "module": "components/card/card.component.js"
7200
+ "name": "CardComponentMixin",
7201
+ "module": "utils/mixins/CardComponentMixin.js"
7128
7202
  }
7129
7203
  },
7130
7204
  {
@@ -7138,8 +7212,8 @@
7138
7212
  }
7139
7213
  },
7140
7214
  "inheritedFrom": {
7141
- "name": "Card",
7142
- "module": "components/card/card.component.js"
7215
+ "name": "CardComponentMixin",
7216
+ "module": "utils/mixins/CardComponentMixin.js"
7143
7217
  }
7144
7218
  },
7145
7219
  {
@@ -7153,8 +7227,8 @@
7153
7227
  }
7154
7228
  },
7155
7229
  "inheritedFrom": {
7156
- "name": "Card",
7157
- "module": "components/card/card.component.js"
7230
+ "name": "CardComponentMixin",
7231
+ "module": "utils/mixins/CardComponentMixin.js"
7158
7232
  }
7159
7233
  },
7160
7234
  {
@@ -7168,8 +7242,8 @@
7168
7242
  }
7169
7243
  },
7170
7244
  "inheritedFrom": {
7171
- "name": "Card",
7172
- "module": "components/card/card.component.js"
7245
+ "name": "CardComponentMixin",
7246
+ "module": "utils/mixins/CardComponentMixin.js"
7173
7247
  }
7174
7248
  },
7175
7249
  {
@@ -7183,86 +7257,29 @@
7183
7257
  }
7184
7258
  },
7185
7259
  "inheritedFrom": {
7186
- "name": "Card",
7187
- "module": "components/card/card.component.js"
7260
+ "name": "FooterMixin",
7261
+ "module": "utils/mixins/FooterMixin.js"
7188
7262
  }
7189
7263
  }
7190
7264
  ],
7191
- "events": [
7192
- {
7193
- "name": "change",
7194
- "type": {
7195
- "text": "Event"
7196
- },
7197
- "description": "(React: onChange) Event that gets dispatched when the card's checked state changes.",
7198
- "reactName": "onChange"
7199
- },
7200
- {
7201
- "description": "(React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.",
7202
- "name": "click",
7203
- "reactName": "onClick"
7204
- },
7205
- {
7206
- "description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the card. It toggles the checked state when enter key is used.",
7207
- "name": "keydown",
7208
- "reactName": "onKeyDown"
7209
- },
7265
+ "mixins": [
7210
7266
  {
7211
- "description": "(React: onKeyUp) This event is dispatched when a key is released on the card. It toggles the checked state when space key is used.",
7212
- "name": "keyup",
7213
- "reactName": "onKeyUp"
7267
+ "name": "CardComponentMixin",
7268
+ "module": "/src/utils/mixins/CardComponentMixin"
7214
7269
  },
7215
7270
  {
7216
- "description": "(React: onFocus) Event that gets dispatched when the card receives focus.",
7217
- "name": "focus",
7218
- "reactName": "onFocus"
7271
+ "name": "FooterMixin",
7272
+ "module": "/src/utils/mixins/FooterMixin"
7219
7273
  }
7220
7274
  ],
7275
+ "superclass": {
7276
+ "name": "Component",
7277
+ "module": "/src/models"
7278
+ },
7279
+ "tagName": "mdc-card",
7280
+ "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. The vertical card has a min-width of 20rem and the horizontal card has a min-width of 40rem.\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 `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 * @slot footer - This slot is for passing custom footer content. Only use this if really needed,\n * using the footer-link and footer-button slots is preferred.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n *\n * @tagname mdc-card\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n */",
7281
+ "customElement": true,
7221
7282
  "attributes": [
7222
- {
7223
- "name": "checked",
7224
- "type": {
7225
- "text": "boolean"
7226
- },
7227
- "default": "false",
7228
- "description": "The checked state of the card",
7229
- "fieldName": "checked"
7230
- },
7231
- {
7232
- "name": "selection-type",
7233
- "type": {
7234
- "text": "SelectionType"
7235
- },
7236
- "description": "The selection type of the card. It can either be set to 'check' or 'checkbox'",
7237
- "default": "'check'",
7238
- "fieldName": "selectionType"
7239
- },
7240
- {
7241
- "name": "disabled",
7242
- "type": {
7243
- "text": "boolean | undefined"
7244
- },
7245
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
7246
- "default": "undefined",
7247
- "fieldName": "disabled",
7248
- "inheritedFrom": {
7249
- "name": "DisabledMixin",
7250
- "module": "src/utils/mixins/DisabledMixin.ts"
7251
- }
7252
- },
7253
- {
7254
- "name": "tabIndex",
7255
- "type": {
7256
- "text": "number"
7257
- },
7258
- "default": "0",
7259
- "description": "This property specifies the tab order of the element.",
7260
- "fieldName": "tabIndex",
7261
- "inheritedFrom": {
7262
- "name": "TabIndexMixin",
7263
- "module": "src/utils/mixins/TabIndexMixin.ts"
7264
- }
7265
- },
7266
7283
  {
7267
7284
  "name": "card-title",
7268
7285
  "type": {
@@ -7272,8 +7289,8 @@
7272
7289
  "description": "The title of the card - part of header section",
7273
7290
  "fieldName": "cardTitle",
7274
7291
  "inheritedFrom": {
7275
- "name": "Card",
7276
- "module": "src/components/card/card.component.ts"
7292
+ "name": "CardComponentMixin",
7293
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7277
7294
  }
7278
7295
  },
7279
7296
  {
@@ -7285,8 +7302,8 @@
7285
7302
  "description": "The subtitle of the card - part of header section",
7286
7303
  "fieldName": "subtitle",
7287
7304
  "inheritedFrom": {
7288
- "name": "Card",
7289
- "module": "src/components/card/card.component.ts"
7305
+ "name": "CardComponentMixin",
7306
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7290
7307
  }
7291
7308
  },
7292
7309
  {
@@ -7298,8 +7315,8 @@
7298
7315
  "description": "The image source URL to render on the card",
7299
7316
  "fieldName": "imageSrc",
7300
7317
  "inheritedFrom": {
7301
- "name": "Card",
7302
- "module": "src/components/card/card.component.ts"
7318
+ "name": "CardComponentMixin",
7319
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7303
7320
  }
7304
7321
  },
7305
7322
  {
@@ -7311,8 +7328,8 @@
7311
7328
  "description": "The image alt for accessibility support",
7312
7329
  "fieldName": "imageAlt",
7313
7330
  "inheritedFrom": {
7314
- "name": "Card",
7315
- "module": "src/components/card/card.component.ts"
7331
+ "name": "CardComponentMixin",
7332
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7316
7333
  }
7317
7334
  },
7318
7335
  {
@@ -7324,8 +7341,8 @@
7324
7341
  "default": "'border'",
7325
7342
  "fieldName": "variant",
7326
7343
  "inheritedFrom": {
7327
- "name": "Card",
7328
- "module": "src/components/card/card.component.ts"
7344
+ "name": "CardComponentMixin",
7345
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7329
7346
  }
7330
7347
  },
7331
7348
  {
@@ -7337,8 +7354,8 @@
7337
7354
  "default": "'vertical'",
7338
7355
  "fieldName": "orientation",
7339
7356
  "inheritedFrom": {
7340
- "name": "Card",
7341
- "module": "src/components/card/card.component.ts"
7357
+ "name": "CardComponentMixin",
7358
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7342
7359
  }
7343
7360
  },
7344
7361
  {
@@ -7350,8 +7367,8 @@
7350
7367
  "default": "'span'",
7351
7368
  "fieldName": "titleTagName",
7352
7369
  "inheritedFrom": {
7353
- "name": "Card",
7354
- "module": "src/components/card/card.component.ts"
7370
+ "name": "CardComponentMixin",
7371
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7355
7372
  }
7356
7373
  },
7357
7374
  {
@@ -7363,8 +7380,8 @@
7363
7380
  "default": "'span'",
7364
7381
  "fieldName": "subtitleTagName",
7365
7382
  "inheritedFrom": {
7366
- "name": "Card",
7367
- "module": "src/components/card/card.component.ts"
7383
+ "name": "CardComponentMixin",
7384
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7368
7385
  }
7369
7386
  },
7370
7387
  {
@@ -7375,28 +7392,11 @@
7375
7392
  "description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
7376
7393
  "fieldName": "iconName",
7377
7394
  "inheritedFrom": {
7378
- "name": "Card",
7379
- "module": "src/components/card/card.component.ts"
7395
+ "name": "CardComponentMixin",
7396
+ "module": "src/utils/mixins/CardComponentMixin.ts"
7380
7397
  }
7381
7398
  }
7382
- ],
7383
- "mixins": [
7384
- {
7385
- "name": "DisabledMixin",
7386
- "module": "/src/utils/mixins/DisabledMixin"
7387
- },
7388
- {
7389
- "name": "TabIndexMixin",
7390
- "module": "/src/utils/mixins/TabIndexMixin"
7391
- }
7392
- ],
7393
- "superclass": {
7394
- "name": "Card",
7395
- "module": "/src/components/card/card.component"
7396
- },
7397
- "tagName": "mdc-cardcheckbox",
7398
- "jsDoc": "/**\n * cardcheckbox component extends `mdc-card` and supports checkbox selection interaction addtionally.\n *\n * While using this component within a form or group of cards, make sure cards are in a role = \"checkbox-group\".\n * This card would have events for selected and unselected (similar to checkbox)\n *\n * **Note**: This is a single selection card i.e. interacting anywhere on the card would toggle the checked state.\n * Make sure to pass only non-interactable elements within the slots.\n *\n * Make sure to pass the `card-title` mandatorily for this card.\n *\n * @tagname mdc-cardcheckbox\n *\n * @dependency mdc-icon\n * @dependency mdc-staticcheckbox\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 * @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 `mdc-button` component within the footer section.\n *\n * @csspart header - The header part of the card\n * @csspart icon - The icon part of the card header\n * @csspart body - The body part of the card\n * @csspart image - The image part of the card\n * @csspart footer - The footer part of the card\n * @csspart footer-link - The link part of the card footer\n * @csspart footer-button-primary - The primary button part of the card footer\n * @csspart footer-button-secondary - The secondary button part of the card footer\n * @csspart icon-button - The icon button part of the card header\n * @csspart text - The text part of the card\n * @csspart check - The check part of the card\n * @csspart check-icon - The check icon part of the card\n * @csspart check-icon-button - The check icon button part of the card\n *\n * @cssproperty --mdc-card-width - The width of the card\n *\n * @event click - (React: onClick) Event that gets dispatched when the card is clicked. It toggles the checked state.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the card.\n * It toggles the checked state when enter key is used.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the card.\n * It toggles the checked state when space key is used.\n * @event focus - (React: onFocus) Event that gets dispatched when the card receives focus.\n * @event change - (React: onChange) Event that gets dispatched when the card's checked state changes.\n */",
7399
- "customElement": true
7399
+ ]
7400
7400
  }
7401
7401
  ],
7402
7402
  "exports": [
@@ -7404,8 +7404,8 @@
7404
7404
  "kind": "js",
7405
7405
  "name": "default",
7406
7406
  "declaration": {
7407
- "name": "CardCheckbox",
7408
- "module": "components/cardcheckbox/cardcheckbox.component.js"
7407
+ "name": "Card",
7408
+ "module": "components/card/card.component.js"
7409
7409
  }
7410
7410
  }
7411
7411
  ]