@momentum-design/components 0.129.3 → 0.129.5

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.
@@ -7353,6 +7353,10 @@
7353
7353
  }
7354
7354
  ],
7355
7355
  "slots": [
7356
+ {
7357
+ "description": "This slot is for overriding the image content of the card",
7358
+ "name": "image"
7359
+ },
7356
7360
  {
7357
7361
  "description": "This slot is for passing the content before the body",
7358
7362
  "name": "before-body"
@@ -7604,7 +7608,7 @@
7604
7608
  "module": "/src/models"
7605
7609
  },
7606
7610
  "tagName": "mdc-card",
7607
- "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 */",
7611
+ "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 image - This slot is for overriding the image content of the card\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 */",
7608
7612
  "customElement": true,
7609
7613
  "attributes": [
7610
7614
  {
@@ -7826,6 +7830,10 @@
7826
7830
  }
7827
7831
  ],
7828
7832
  "slots": [
7833
+ {
7834
+ "description": "This slot is for overriding the image content of the card",
7835
+ "name": "image"
7836
+ },
7829
7837
  {
7830
7838
  "description": "This slot is for passing the content before the body",
7831
7839
  "name": "before-body"
@@ -8397,7 +8405,7 @@
8397
8405
  "module": "/src/components/buttonsimple/buttonsimple.component"
8398
8406
  },
8399
8407
  "tagName": "mdc-cardbutton",
8400
- "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 */",
8408
+ "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 image - This slot is for overriding the image content of the card\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 */",
8401
8409
  "customElement": true,
8402
8410
  "attributes": [
8403
8411
  {
@@ -8824,6 +8832,14 @@
8824
8832
  "module": "src/components/card/card.component.ts"
8825
8833
  }
8826
8834
  },
8835
+ {
8836
+ "description": "This slot is for overriding the image content of the card",
8837
+ "name": "image",
8838
+ "inheritedFrom": {
8839
+ "name": "Card",
8840
+ "module": "src/components/card/card.component.ts"
8841
+ }
8842
+ },
8827
8843
  {
8828
8844
  "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
8829
8845
  "name": "footer-button-secondary",
@@ -9526,6 +9542,14 @@
9526
9542
  "module": "src/components/card/card.component.ts"
9527
9543
  }
9528
9544
  },
9545
+ {
9546
+ "description": "This slot is for overriding the image content of the card",
9547
+ "name": "image",
9548
+ "inheritedFrom": {
9549
+ "name": "Card",
9550
+ "module": "src/components/card/card.component.ts"
9551
+ }
9552
+ },
9529
9553
  {
9530
9554
  "description": "This slot is for passing secondary variant of `mdc-button` component within the footer section.",
9531
9555
  "name": "footer-button-secondary",
@@ -48031,6 +48055,396 @@
48031
48055
  }
48032
48056
  ]
48033
48057
  },
48058
+ {
48059
+ "kind": "javascript-module",
48060
+ "path": "components/toast/toast.component.js",
48061
+ "declarations": [
48062
+ {
48063
+ "kind": "class",
48064
+ "description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
48065
+ "name": "Toast",
48066
+ "cssProperties": [
48067
+ {
48068
+ "description": "Background color of the toast.",
48069
+ "name": "--mdc-toast-background-color"
48070
+ },
48071
+ {
48072
+ "description": "Border color of the toast.",
48073
+ "name": "--mdc-toast-border-color"
48074
+ },
48075
+ {
48076
+ "description": "Color of the header text in the toast.",
48077
+ "name": "--mdc-toast-header-text-color"
48078
+ },
48079
+ {
48080
+ "description": "Color of the icon in the toast.",
48081
+ "name": "--mdc-toast-icon-color"
48082
+ },
48083
+ {
48084
+ "description": "Elevation effect applied to the toast.",
48085
+ "name": "--mdc-toast-elevation-3"
48086
+ },
48087
+ {
48088
+ "description": "Width of the toast.",
48089
+ "name": "--mdc-toast-width"
48090
+ },
48091
+ {
48092
+ "description": "Padding inside the toast.",
48093
+ "name": "--mdc-toast-padding"
48094
+ }
48095
+ ],
48096
+ "cssParts": [
48097
+ {
48098
+ "description": "The container for the toast's main content, including icon, text, and close button.",
48099
+ "name": "content-container"
48100
+ },
48101
+ {
48102
+ "description": "The icon shown at the start of the toast, styled by variant.",
48103
+ "name": "toast-prefix-icon"
48104
+ },
48105
+ {
48106
+ "description": "The container for the header and body content of the toast.",
48107
+ "name": "toast-content"
48108
+ },
48109
+ {
48110
+ "description": "The header text of the toast.",
48111
+ "name": "toast-header"
48112
+ },
48113
+ {
48114
+ "description": "The container for the toast's footer, including toggle and action buttons.",
48115
+ "name": "footer"
48116
+ },
48117
+ {
48118
+ "description": "The toggle button for showing/hiding detailed content.",
48119
+ "name": "footer-button-toggle"
48120
+ },
48121
+ {
48122
+ "description": "The close button for the toast.",
48123
+ "name": "toast-close-btn"
48124
+ },
48125
+ {
48126
+ "description": "Applied to the footer when it contains buttons or a toggle button.",
48127
+ "name": "has-footer-buttons"
48128
+ }
48129
+ ],
48130
+ "slots": [
48131
+ {
48132
+ "description": "Slot for custom content before the icon (only for custom variant).",
48133
+ "name": "content-prefix"
48134
+ },
48135
+ {
48136
+ "description": "Slot for the main body content of the toast.",
48137
+ "name": "toast-body-normal"
48138
+ },
48139
+ {
48140
+ "description": "Slot for additional detailed content, shown when expanded.",
48141
+ "name": "toast-body-detailed"
48142
+ },
48143
+ {
48144
+ "description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
48145
+ "name": "footer"
48146
+ },
48147
+ {
48148
+ "description": "Slot for passing the primary variant of `mdc-button` in the footer.",
48149
+ "name": "footer-button-primary"
48150
+ },
48151
+ {
48152
+ "description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
48153
+ "name": "footer-button-secondary"
48154
+ }
48155
+ ],
48156
+ "members": [
48157
+ {
48158
+ "kind": "field",
48159
+ "name": "variant",
48160
+ "type": {
48161
+ "text": "ToastVariant"
48162
+ },
48163
+ "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.\n\nNote: When using the `custom` variant, provide your own icon via the `content-prefix` slot; otherwise, no icon will be shown.",
48164
+ "default": "'custom'",
48165
+ "attribute": "variant",
48166
+ "reflects": true
48167
+ },
48168
+ {
48169
+ "kind": "field",
48170
+ "name": "closeButtonAriaLabel",
48171
+ "type": {
48172
+ "text": "string | undefined"
48173
+ },
48174
+ "description": "Defines aria-label attribute for close button accessibility",
48175
+ "attribute": "close-button-aria-label"
48176
+ },
48177
+ {
48178
+ "kind": "field",
48179
+ "name": "headerText",
48180
+ "type": {
48181
+ "text": "string | undefined"
48182
+ },
48183
+ "description": "Defines a string value to display as the title of the toast",
48184
+ "attribute": "header-text",
48185
+ "reflects": true
48186
+ },
48187
+ {
48188
+ "kind": "field",
48189
+ "name": "headerTagName",
48190
+ "type": {
48191
+ "text": "TagName"
48192
+ },
48193
+ "description": "The html tag to be used for the header text",
48194
+ "default": "'h2'",
48195
+ "attribute": "header-tag-name",
48196
+ "reflects": true
48197
+ },
48198
+ {
48199
+ "kind": "field",
48200
+ "name": "ariaLabel",
48201
+ "type": {
48202
+ "text": "string | null"
48203
+ },
48204
+ "default": "null",
48205
+ "description": "Defines aria-label attribute when header is not used",
48206
+ "attribute": "aria-label",
48207
+ "reflects": true
48208
+ },
48209
+ {
48210
+ "kind": "field",
48211
+ "name": "showMoreText",
48212
+ "type": {
48213
+ "text": "string | undefined"
48214
+ },
48215
+ "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
48216
+ "attribute": "show-more-text",
48217
+ "reflects": true
48218
+ },
48219
+ {
48220
+ "kind": "field",
48221
+ "name": "showLessText",
48222
+ "type": {
48223
+ "text": "string | undefined"
48224
+ },
48225
+ "description": "Defines the text shown on the linkbutton when detailed content is visible.",
48226
+ "attribute": "show-less-text",
48227
+ "reflects": true
48228
+ },
48229
+ {
48230
+ "kind": "field",
48231
+ "name": "isDetailVisible",
48232
+ "type": {
48233
+ "text": "boolean"
48234
+ },
48235
+ "privacy": "private",
48236
+ "default": "false"
48237
+ },
48238
+ {
48239
+ "kind": "field",
48240
+ "name": "hasDetailedSlot",
48241
+ "type": {
48242
+ "text": "boolean"
48243
+ },
48244
+ "privacy": "private",
48245
+ "default": "false"
48246
+ },
48247
+ {
48248
+ "kind": "field",
48249
+ "name": "detailedElements",
48250
+ "type": {
48251
+ "text": "HTMLElement[]"
48252
+ },
48253
+ "privacy": "private"
48254
+ },
48255
+ {
48256
+ "kind": "field",
48257
+ "name": "hasFooterButtons",
48258
+ "type": {
48259
+ "text": "string"
48260
+ },
48261
+ "privacy": "private",
48262
+ "default": "''"
48263
+ },
48264
+ {
48265
+ "kind": "method",
48266
+ "name": "closeToast",
48267
+ "privacy": "private",
48268
+ "description": "Fired when Close Button is clicked using mouse or keyboard.\nThis method dispatches the close event.\nIt is used to notify that the toast should be closed."
48269
+ },
48270
+ {
48271
+ "kind": "method",
48272
+ "name": "toggleDetailVisibility",
48273
+ "privacy": "private"
48274
+ },
48275
+ {
48276
+ "kind": "method",
48277
+ "name": "updateDetailedSlotPresence",
48278
+ "privacy": "private"
48279
+ },
48280
+ {
48281
+ "kind": "method",
48282
+ "name": "updateFooterButtonsPresence",
48283
+ "privacy": "private"
48284
+ },
48285
+ {
48286
+ "kind": "method",
48287
+ "name": "renderIcon",
48288
+ "privacy": "protected",
48289
+ "parameters": [
48290
+ {
48291
+ "name": "iconName",
48292
+ "type": {
48293
+ "text": "string"
48294
+ }
48295
+ }
48296
+ ]
48297
+ },
48298
+ {
48299
+ "kind": "method",
48300
+ "name": "shouldRenderToggleButton",
48301
+ "privacy": "private"
48302
+ },
48303
+ {
48304
+ "kind": "method",
48305
+ "name": "renderToggleDetailButton",
48306
+ "privacy": "private"
48307
+ },
48308
+ {
48309
+ "kind": "method",
48310
+ "name": "renderHeader",
48311
+ "privacy": "protected"
48312
+ },
48313
+ {
48314
+ "kind": "method",
48315
+ "name": "handleFooterSlot",
48316
+ "privacy": "protected",
48317
+ "return": {
48318
+ "type": {
48319
+ "text": "void"
48320
+ }
48321
+ },
48322
+ "parameters": [
48323
+ {
48324
+ "name": "tagname",
48325
+ "type": {
48326
+ "text": "string"
48327
+ }
48328
+ },
48329
+ {
48330
+ "name": "variant",
48331
+ "optional": true,
48332
+ "type": {
48333
+ "text": "string | undefined"
48334
+ }
48335
+ }
48336
+ ]
48337
+ },
48338
+ {
48339
+ "kind": "method",
48340
+ "name": "renderFooter",
48341
+ "privacy": "protected",
48342
+ "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
48343
+ "return": {
48344
+ "type": {
48345
+ "text": ""
48346
+ }
48347
+ },
48348
+ "inheritedFrom": {
48349
+ "name": "FooterMixin",
48350
+ "module": "utils/mixins/FooterMixin.js"
48351
+ }
48352
+ }
48353
+ ],
48354
+ "events": [
48355
+ {
48356
+ "description": "(React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.",
48357
+ "name": "close",
48358
+ "reactName": "onClose"
48359
+ }
48360
+ ],
48361
+ "attributes": [
48362
+ {
48363
+ "name": "variant",
48364
+ "type": {
48365
+ "text": "ToastVariant"
48366
+ },
48367
+ "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.\n\nNote: When using the `custom` variant, provide your own icon via the `content-prefix` slot; otherwise, no icon will be shown.",
48368
+ "default": "'custom'",
48369
+ "fieldName": "variant"
48370
+ },
48371
+ {
48372
+ "name": "close-button-aria-label",
48373
+ "type": {
48374
+ "text": "string | undefined"
48375
+ },
48376
+ "description": "Defines aria-label attribute for close button accessibility",
48377
+ "fieldName": "closeButtonAriaLabel"
48378
+ },
48379
+ {
48380
+ "name": "header-text",
48381
+ "type": {
48382
+ "text": "string | undefined"
48383
+ },
48384
+ "description": "Defines a string value to display as the title of the toast",
48385
+ "fieldName": "headerText"
48386
+ },
48387
+ {
48388
+ "name": "header-tag-name",
48389
+ "type": {
48390
+ "text": "TagName"
48391
+ },
48392
+ "description": "The html tag to be used for the header text",
48393
+ "default": "'h2'",
48394
+ "fieldName": "headerTagName"
48395
+ },
48396
+ {
48397
+ "name": "aria-label",
48398
+ "type": {
48399
+ "text": "string | null"
48400
+ },
48401
+ "default": "null",
48402
+ "description": "Defines aria-label attribute when header is not used",
48403
+ "fieldName": "ariaLabel"
48404
+ },
48405
+ {
48406
+ "name": "show-more-text",
48407
+ "type": {
48408
+ "text": "string | undefined"
48409
+ },
48410
+ "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
48411
+ "fieldName": "showMoreText"
48412
+ },
48413
+ {
48414
+ "name": "show-less-text",
48415
+ "type": {
48416
+ "text": "string | undefined"
48417
+ },
48418
+ "description": "Defines the text shown on the linkbutton when detailed content is visible.",
48419
+ "fieldName": "showLessText"
48420
+ }
48421
+ ],
48422
+ "mixins": [
48423
+ {
48424
+ "name": "FooterMixin",
48425
+ "module": "/src/utils/mixins/FooterMixin"
48426
+ }
48427
+ ],
48428
+ "superclass": {
48429
+ "name": "Component",
48430
+ "module": "/src/models"
48431
+ },
48432
+ "tagName": "mdc-toast",
48433
+ "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n *\n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n *\n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n * @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
48434
+ "customElement": true
48435
+ }
48436
+ ],
48437
+ "exports": [
48438
+ {
48439
+ "kind": "js",
48440
+ "name": "default",
48441
+ "declaration": {
48442
+ "name": "Toast",
48443
+ "module": "components/toast/toast.component.js"
48444
+ }
48445
+ }
48446
+ ]
48447
+ },
48034
48448
  {
48035
48449
  "kind": "javascript-module",
48036
48450
  "path": "components/toggle/toggle.component.js",
@@ -51027,396 +51441,6 @@
51027
51441
  }
51028
51442
  ]
51029
51443
  },
51030
- {
51031
- "kind": "javascript-module",
51032
- "path": "components/toast/toast.component.js",
51033
- "declarations": [
51034
- {
51035
- "kind": "class",
51036
- "description": "`mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\nIt supports success, warning, error, and custom messages, and is designed to be controlled externally.\n\n**Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\nIf not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.",
51037
- "name": "Toast",
51038
- "cssProperties": [
51039
- {
51040
- "description": "Background color of the toast.",
51041
- "name": "--mdc-toast-background-color"
51042
- },
51043
- {
51044
- "description": "Border color of the toast.",
51045
- "name": "--mdc-toast-border-color"
51046
- },
51047
- {
51048
- "description": "Color of the header text in the toast.",
51049
- "name": "--mdc-toast-header-text-color"
51050
- },
51051
- {
51052
- "description": "Color of the icon in the toast.",
51053
- "name": "--mdc-toast-icon-color"
51054
- },
51055
- {
51056
- "description": "Elevation effect applied to the toast.",
51057
- "name": "--mdc-toast-elevation-3"
51058
- },
51059
- {
51060
- "description": "Width of the toast.",
51061
- "name": "--mdc-toast-width"
51062
- },
51063
- {
51064
- "description": "Padding inside the toast.",
51065
- "name": "--mdc-toast-padding"
51066
- }
51067
- ],
51068
- "cssParts": [
51069
- {
51070
- "description": "The container for the toast's main content, including icon, text, and close button.",
51071
- "name": "content-container"
51072
- },
51073
- {
51074
- "description": "The icon shown at the start of the toast, styled by variant.",
51075
- "name": "toast-prefix-icon"
51076
- },
51077
- {
51078
- "description": "The container for the header and body content of the toast.",
51079
- "name": "toast-content"
51080
- },
51081
- {
51082
- "description": "The header text of the toast.",
51083
- "name": "toast-header"
51084
- },
51085
- {
51086
- "description": "The container for the toast's footer, including toggle and action buttons.",
51087
- "name": "footer"
51088
- },
51089
- {
51090
- "description": "The toggle button for showing/hiding detailed content.",
51091
- "name": "footer-button-toggle"
51092
- },
51093
- {
51094
- "description": "The close button for the toast.",
51095
- "name": "toast-close-btn"
51096
- },
51097
- {
51098
- "description": "Applied to the footer when it contains buttons or a toggle button.",
51099
- "name": "has-footer-buttons"
51100
- }
51101
- ],
51102
- "slots": [
51103
- {
51104
- "description": "Slot for custom content before the icon (only for custom variant).",
51105
- "name": "content-prefix"
51106
- },
51107
- {
51108
- "description": "Slot for the main body content of the toast.",
51109
- "name": "toast-body-normal"
51110
- },
51111
- {
51112
- "description": "Slot for additional detailed content, shown when expanded.",
51113
- "name": "toast-body-detailed"
51114
- },
51115
- {
51116
- "description": "Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.",
51117
- "name": "footer"
51118
- },
51119
- {
51120
- "description": "Slot for passing the primary variant of `mdc-button` in the footer.",
51121
- "name": "footer-button-primary"
51122
- },
51123
- {
51124
- "description": "Slot for passing the secondary variant of `mdc-button` in the footer.",
51125
- "name": "footer-button-secondary"
51126
- }
51127
- ],
51128
- "members": [
51129
- {
51130
- "kind": "field",
51131
- "name": "variant",
51132
- "type": {
51133
- "text": "ToastVariant"
51134
- },
51135
- "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.\n\nNote: When using the `custom` variant, provide your own icon via the `content-prefix` slot; otherwise, no icon will be shown.",
51136
- "default": "'custom'",
51137
- "attribute": "variant",
51138
- "reflects": true
51139
- },
51140
- {
51141
- "kind": "field",
51142
- "name": "closeButtonAriaLabel",
51143
- "type": {
51144
- "text": "string | undefined"
51145
- },
51146
- "description": "Defines aria-label attribute for close button accessibility",
51147
- "attribute": "close-button-aria-label"
51148
- },
51149
- {
51150
- "kind": "field",
51151
- "name": "headerText",
51152
- "type": {
51153
- "text": "string | undefined"
51154
- },
51155
- "description": "Defines a string value to display as the title of the toast",
51156
- "attribute": "header-text",
51157
- "reflects": true
51158
- },
51159
- {
51160
- "kind": "field",
51161
- "name": "headerTagName",
51162
- "type": {
51163
- "text": "TagName"
51164
- },
51165
- "description": "The html tag to be used for the header text",
51166
- "default": "'h2'",
51167
- "attribute": "header-tag-name",
51168
- "reflects": true
51169
- },
51170
- {
51171
- "kind": "field",
51172
- "name": "ariaLabel",
51173
- "type": {
51174
- "text": "string | null"
51175
- },
51176
- "default": "null",
51177
- "description": "Defines aria-label attribute when header is not used",
51178
- "attribute": "aria-label",
51179
- "reflects": true
51180
- },
51181
- {
51182
- "kind": "field",
51183
- "name": "showMoreText",
51184
- "type": {
51185
- "text": "string | undefined"
51186
- },
51187
- "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
51188
- "attribute": "show-more-text",
51189
- "reflects": true
51190
- },
51191
- {
51192
- "kind": "field",
51193
- "name": "showLessText",
51194
- "type": {
51195
- "text": "string | undefined"
51196
- },
51197
- "description": "Defines the text shown on the linkbutton when detailed content is visible.",
51198
- "attribute": "show-less-text",
51199
- "reflects": true
51200
- },
51201
- {
51202
- "kind": "field",
51203
- "name": "isDetailVisible",
51204
- "type": {
51205
- "text": "boolean"
51206
- },
51207
- "privacy": "private",
51208
- "default": "false"
51209
- },
51210
- {
51211
- "kind": "field",
51212
- "name": "hasDetailedSlot",
51213
- "type": {
51214
- "text": "boolean"
51215
- },
51216
- "privacy": "private",
51217
- "default": "false"
51218
- },
51219
- {
51220
- "kind": "field",
51221
- "name": "detailedElements",
51222
- "type": {
51223
- "text": "HTMLElement[]"
51224
- },
51225
- "privacy": "private"
51226
- },
51227
- {
51228
- "kind": "field",
51229
- "name": "hasFooterButtons",
51230
- "type": {
51231
- "text": "string"
51232
- },
51233
- "privacy": "private",
51234
- "default": "''"
51235
- },
51236
- {
51237
- "kind": "method",
51238
- "name": "closeToast",
51239
- "privacy": "private",
51240
- "description": "Fired when Close Button is clicked using mouse or keyboard.\nThis method dispatches the close event.\nIt is used to notify that the toast should be closed."
51241
- },
51242
- {
51243
- "kind": "method",
51244
- "name": "toggleDetailVisibility",
51245
- "privacy": "private"
51246
- },
51247
- {
51248
- "kind": "method",
51249
- "name": "updateDetailedSlotPresence",
51250
- "privacy": "private"
51251
- },
51252
- {
51253
- "kind": "method",
51254
- "name": "updateFooterButtonsPresence",
51255
- "privacy": "private"
51256
- },
51257
- {
51258
- "kind": "method",
51259
- "name": "renderIcon",
51260
- "privacy": "protected",
51261
- "parameters": [
51262
- {
51263
- "name": "iconName",
51264
- "type": {
51265
- "text": "string"
51266
- }
51267
- }
51268
- ]
51269
- },
51270
- {
51271
- "kind": "method",
51272
- "name": "shouldRenderToggleButton",
51273
- "privacy": "private"
51274
- },
51275
- {
51276
- "kind": "method",
51277
- "name": "renderToggleDetailButton",
51278
- "privacy": "private"
51279
- },
51280
- {
51281
- "kind": "method",
51282
- "name": "renderHeader",
51283
- "privacy": "protected"
51284
- },
51285
- {
51286
- "kind": "method",
51287
- "name": "handleFooterSlot",
51288
- "privacy": "protected",
51289
- "return": {
51290
- "type": {
51291
- "text": "void"
51292
- }
51293
- },
51294
- "parameters": [
51295
- {
51296
- "name": "tagname",
51297
- "type": {
51298
- "text": "string"
51299
- }
51300
- },
51301
- {
51302
- "name": "variant",
51303
- "optional": true,
51304
- "type": {
51305
- "text": "string | undefined"
51306
- }
51307
- }
51308
- ]
51309
- },
51310
- {
51311
- "kind": "method",
51312
- "name": "renderFooter",
51313
- "privacy": "protected",
51314
- "description": "Renders the footer of the card if footer-link,\nfooter-button-primary, or footer-button-secondary slots are provided",
51315
- "return": {
51316
- "type": {
51317
- "text": ""
51318
- }
51319
- },
51320
- "inheritedFrom": {
51321
- "name": "FooterMixin",
51322
- "module": "utils/mixins/FooterMixin.js"
51323
- }
51324
- }
51325
- ],
51326
- "events": [
51327
- {
51328
- "description": "(React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.",
51329
- "name": "close",
51330
- "reactName": "onClose"
51331
- }
51332
- ],
51333
- "attributes": [
51334
- {
51335
- "name": "variant",
51336
- "type": {
51337
- "text": "ToastVariant"
51338
- },
51339
- "description": "Type of toast\n- Can be `custom`, `success`, `warning` or `error`.\n\nNote: When using the `custom` variant, provide your own icon via the `content-prefix` slot; otherwise, no icon will be shown.",
51340
- "default": "'custom'",
51341
- "fieldName": "variant"
51342
- },
51343
- {
51344
- "name": "close-button-aria-label",
51345
- "type": {
51346
- "text": "string | undefined"
51347
- },
51348
- "description": "Defines aria-label attribute for close button accessibility",
51349
- "fieldName": "closeButtonAriaLabel"
51350
- },
51351
- {
51352
- "name": "header-text",
51353
- "type": {
51354
- "text": "string | undefined"
51355
- },
51356
- "description": "Defines a string value to display as the title of the toast",
51357
- "fieldName": "headerText"
51358
- },
51359
- {
51360
- "name": "header-tag-name",
51361
- "type": {
51362
- "text": "TagName"
51363
- },
51364
- "description": "The html tag to be used for the header text",
51365
- "default": "'h2'",
51366
- "fieldName": "headerTagName"
51367
- },
51368
- {
51369
- "name": "aria-label",
51370
- "type": {
51371
- "text": "string | null"
51372
- },
51373
- "default": "null",
51374
- "description": "Defines aria-label attribute when header is not used",
51375
- "fieldName": "ariaLabel"
51376
- },
51377
- {
51378
- "name": "show-more-text",
51379
- "type": {
51380
- "text": "string | undefined"
51381
- },
51382
- "description": "Defines the text shown on the linkbutton when detailed content is hidden.",
51383
- "fieldName": "showMoreText"
51384
- },
51385
- {
51386
- "name": "show-less-text",
51387
- "type": {
51388
- "text": "string | undefined"
51389
- },
51390
- "description": "Defines the text shown on the linkbutton when detailed content is visible.",
51391
- "fieldName": "showLessText"
51392
- }
51393
- ],
51394
- "mixins": [
51395
- {
51396
- "name": "FooterMixin",
51397
- "module": "/src/utils/mixins/FooterMixin"
51398
- }
51399
- ],
51400
- "superclass": {
51401
- "name": "Component",
51402
- "module": "/src/models"
51403
- },
51404
- "tagName": "mdc-toast",
51405
- "jsDoc": "/**\n * `mdc-toast` is a lightweight, non-blocking alert used to inform users about application processes.\n * It supports success, warning, error, and custom messages, and is designed to be controlled externally.\n *\n * **Note**: When using `slot=\"toast-body-normal\"` and `slot=\"toast-body-detailed\"`, it's strongly recommended to wrap the content with `<mdc-text tagname=\"span\">`.\n * If not used, ensure your custom content is styled appropriately to match the design and alignment expectations of the toast component.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @slot content-prefix - Slot for custom content before the icon (only for custom variant).\n * @slot toast-body-normal - Slot for the main body content of the toast.\n * @slot toast-body-detailed - Slot for additional detailed content, shown when expanded.\n * @slot footer - Slot for custom footer content. Prefer using footer-button-primary and footer-button-secondary slots.\n * @slot footer-button-primary - Slot for passing the primary variant of `mdc-button` in the footer.\n * @slot footer-button-secondary - Slot for passing the secondary variant of `mdc-button` in the footer.\n *\n * @tagname mdc-toast\n *\n * @event close - (React: onClose) Dispatched when the Close Button is clicked using mouse or keyboard.\n *\n * @csspart content-container - The container for the toast's main content, including icon, text, and close button.\n * @csspart toast-prefix-icon - The icon shown at the start of the toast, styled by variant.\n * @csspart toast-content - The container for the header and body content of the toast.\n * @csspart toast-header - The header text of the toast.\n * @csspart footer - The container for the toast's footer, including toggle and action buttons.\n * @csspart footer-button-toggle - The toggle button for showing/hiding detailed content.\n * @csspart toast-close-btn - The close button for the toast.\n * @csspart has-footer-buttons - Applied to the footer when it contains buttons or a toggle button.\n *\n * @cssproperty --mdc-toast-background-color - Background color of the toast.\n * @cssproperty --mdc-toast-border-color - Border color of the toast.\n * @cssproperty --mdc-toast-header-text-color - Color of the header text in the toast.\n * @cssproperty --mdc-toast-icon-color - Color of the icon in the toast.\n * @cssproperty --mdc-toast-elevation-3 - Elevation effect applied to the toast.\n * @cssproperty --mdc-toast-width - Width of the toast.\n * @cssproperty --mdc-toast-padding - Padding inside the toast.\n */",
51406
- "customElement": true
51407
- }
51408
- ],
51409
- "exports": [
51410
- {
51411
- "kind": "js",
51412
- "name": "default",
51413
- "declaration": {
51414
- "name": "Toast",
51415
- "module": "components/toast/toast.component.js"
51416
- }
51417
- }
51418
- ]
51419
- },
51420
51444
  {
51421
51445
  "kind": "javascript-module",
51422
51446
  "path": "components/tooltip/tooltip.component.js",