@momentum-design/components 0.36.4 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5316,6 +5316,252 @@
5316
5316
  }
5317
5317
  ]
5318
5318
  },
5319
+ {
5320
+ "kind": "javascript-module",
5321
+ "path": "components/divider/divider.component.js",
5322
+ "declarations": [
5323
+ {
5324
+ "kind": "class",
5325
+ "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
5326
+ "name": "Divider",
5327
+ "cssProperties": [
5328
+ {
5329
+ "description": "background color of the divider",
5330
+ "name": "--mdc-divider-background-color"
5331
+ },
5332
+ {
5333
+ "description": "width of the divider",
5334
+ "name": "--mdc-divider-width"
5335
+ },
5336
+ {
5337
+ "description": "gradient of the horizontal divider",
5338
+ "name": "--mdc-divider-horizontal-gradient"
5339
+ },
5340
+ {
5341
+ "description": "gradient of the vertical divider",
5342
+ "name": "--mdc-divider-vertical-gradient"
5343
+ },
5344
+ {
5345
+ "description": "font size of label in the text divider",
5346
+ "name": "--mdc-divider-text-size"
5347
+ },
5348
+ {
5349
+ "description": "font color of label in the text divider",
5350
+ "name": "--mdc-divider-text-color"
5351
+ },
5352
+ {
5353
+ "description": "left and right margin of label in the text divider",
5354
+ "name": "--mdc-divider-text-margin"
5355
+ },
5356
+ {
5357
+ "description": "line height of label in the text divider",
5358
+ "name": "--mdc-divider-text-line-height"
5359
+ },
5360
+ {
5361
+ "description": "background color of the grabber button in rest state",
5362
+ "name": "--mdc-divider-grabber-button-background-color-normal"
5363
+ },
5364
+ {
5365
+ "description": "background color of the grabber button in hover state",
5366
+ "name": "--mdc-divider-grabber-button-background-color-hover"
5367
+ },
5368
+ {
5369
+ "description": "background color of the grabber button in pressed state",
5370
+ "name": "--mdc-divider-grabber-button-background-color-pressed"
5371
+ },
5372
+ {
5373
+ "description": "border color of the grabber button",
5374
+ "name": "--mdc-divider-grabber-button-border-color"
5375
+ },
5376
+ {
5377
+ "description": "border radius of the grabber button",
5378
+ "name": "--mdc-divider-grabber-button-border-radius"
5379
+ }
5380
+ ],
5381
+ "members": [
5382
+ {
5383
+ "kind": "field",
5384
+ "name": "orientation",
5385
+ "type": {
5386
+ "text": "DividerOrientation"
5387
+ },
5388
+ "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
5389
+ "default": "horizontal",
5390
+ "attribute": "orientation",
5391
+ "reflects": true
5392
+ },
5393
+ {
5394
+ "kind": "field",
5395
+ "name": "variant",
5396
+ "type": {
5397
+ "text": "DividerVariant"
5398
+ },
5399
+ "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
5400
+ "default": "solid",
5401
+ "attribute": "variant",
5402
+ "reflects": true
5403
+ },
5404
+ {
5405
+ "kind": "field",
5406
+ "name": "arrowDirection",
5407
+ "type": {
5408
+ "text": "Directions"
5409
+ },
5410
+ "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
5411
+ "default": "'negative'",
5412
+ "attribute": "arrow-direction",
5413
+ "reflects": true
5414
+ },
5415
+ {
5416
+ "kind": "field",
5417
+ "name": "buttonPosition",
5418
+ "type": {
5419
+ "text": "Directions"
5420
+ },
5421
+ "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
5422
+ "default": "'negative'",
5423
+ "attribute": "button-position",
5424
+ "reflects": true
5425
+ },
5426
+ {
5427
+ "kind": "method",
5428
+ "name": "setVariant",
5429
+ "privacy": "private",
5430
+ "parameters": [
5431
+ {
5432
+ "name": "variant",
5433
+ "type": {
5434
+ "text": "DividerVariant"
5435
+ },
5436
+ "description": "The variant to set."
5437
+ }
5438
+ ],
5439
+ "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
5440
+ },
5441
+ {
5442
+ "kind": "method",
5443
+ "name": "setOrientation",
5444
+ "privacy": "private",
5445
+ "parameters": [
5446
+ {
5447
+ "name": "orientation",
5448
+ "type": {
5449
+ "text": "DividerOrientation"
5450
+ },
5451
+ "description": "The orientation to set."
5452
+ }
5453
+ ],
5454
+ "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
5455
+ },
5456
+ {
5457
+ "kind": "method",
5458
+ "name": "ensureValidDirections",
5459
+ "privacy": "private",
5460
+ "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
5461
+ "parameters": [
5462
+ {
5463
+ "description": "The buttonPosition to set.",
5464
+ "name": "buttonPosition"
5465
+ },
5466
+ {
5467
+ "description": "The arrowDirection to set.",
5468
+ "name": "arrowDirection"
5469
+ }
5470
+ ]
5471
+ },
5472
+ {
5473
+ "kind": "method",
5474
+ "name": "setGrabberButton",
5475
+ "privacy": "private",
5476
+ "return": {
5477
+ "type": {
5478
+ "text": "void"
5479
+ }
5480
+ },
5481
+ "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
5482
+ },
5483
+ {
5484
+ "kind": "method",
5485
+ "name": "getArrowIcon",
5486
+ "privacy": "private",
5487
+ "return": {
5488
+ "type": {
5489
+ "text": ""
5490
+ }
5491
+ },
5492
+ "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
5493
+ },
5494
+ {
5495
+ "kind": "method",
5496
+ "name": "inferDividerType",
5497
+ "privacy": "private",
5498
+ "description": "Infers the type of divider based on the kind of slot present.",
5499
+ "parameters": [
5500
+ {
5501
+ "description": "default slot of divider",
5502
+ "name": "slot"
5503
+ }
5504
+ ]
5505
+ }
5506
+ ],
5507
+ "attributes": [
5508
+ {
5509
+ "name": "orientation",
5510
+ "type": {
5511
+ "text": "DividerOrientation"
5512
+ },
5513
+ "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
5514
+ "default": "horizontal",
5515
+ "fieldName": "orientation"
5516
+ },
5517
+ {
5518
+ "name": "variant",
5519
+ "type": {
5520
+ "text": "DividerVariant"
5521
+ },
5522
+ "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
5523
+ "default": "solid",
5524
+ "fieldName": "variant"
5525
+ },
5526
+ {
5527
+ "name": "arrow-direction",
5528
+ "type": {
5529
+ "text": "Directions"
5530
+ },
5531
+ "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
5532
+ "default": "'negative'",
5533
+ "fieldName": "arrowDirection"
5534
+ },
5535
+ {
5536
+ "name": "button-position",
5537
+ "type": {
5538
+ "text": "Directions"
5539
+ },
5540
+ "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
5541
+ "default": "'negative'",
5542
+ "fieldName": "buttonPosition"
5543
+ }
5544
+ ],
5545
+ "superclass": {
5546
+ "name": "Component",
5547
+ "module": "/src/models"
5548
+ },
5549
+ "tagName": "mdc-divider",
5550
+ "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n * in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n * in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n * in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
5551
+ "customElement": true
5552
+ }
5553
+ ],
5554
+ "exports": [
5555
+ {
5556
+ "kind": "js",
5557
+ "name": "default",
5558
+ "declaration": {
5559
+ "name": "Divider",
5560
+ "module": "components/divider/divider.component.js"
5561
+ }
5562
+ }
5563
+ ]
5564
+ },
5319
5565
  {
5320
5566
  "kind": "javascript-module",
5321
5567
  "path": "components/filterchip/filterchip.component.js",
@@ -5886,259 +6132,13 @@
5886
6132
  },
5887
6133
  {
5888
6134
  "kind": "javascript-module",
5889
- "path": "components/divider/divider.component.js",
6135
+ "path": "components/formfieldgroup/formfieldgroup.component.js",
5890
6136
  "declarations": [
5891
6137
  {
5892
6138
  "kind": "class",
5893
- "description": "`mdc-divider` is a component that provides a line to separate and organize content.\nIt can also include a button or text positioned centrally, allowing users to interact with the layout.\n\n**Divider Orientation:**\n- **Horizontal**: A thin, horizontal line.\n- **Vertical**: A thin, vertical line.\n\n**Divider Variants:**\n- **solid**: Solid line.\n- **gradient**: Gradient Line.\n\n**Divider Types:**\n- The type of divider is inferred based on the kind of slot present.\n - **Primary**: A simple horizontal or vertical divider.\n - **Text**: A horizontal divider with a text label in the center.\n - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n\n**Accessibility:**\n- When the slot is replaced by an `mdc-button`:\n - `aria-label` should be passed to the `mdc-button`.\n - `aria-expanded` should be passed to the `mdc-button`.\n\n**Notes:**\n- If the slot is replaced by an invalid tag name or contains multiple elements,\n the divider defaults to the **Primary** type.\n- To override the styles of the divider, use the provided CSS custom properties.",
5894
- "name": "Divider",
5895
- "cssProperties": [
5896
- {
5897
- "description": "background color of the divider",
5898
- "name": "--mdc-divider-background-color"
5899
- },
5900
- {
5901
- "description": "width of the divider",
5902
- "name": "--mdc-divider-width"
5903
- },
5904
- {
5905
- "description": "gradient of the horizontal divider",
5906
- "name": "--mdc-divider-horizontal-gradient"
5907
- },
5908
- {
5909
- "description": "gradient of the vertical divider",
5910
- "name": "--mdc-divider-vertical-gradient"
5911
- },
5912
- {
5913
- "description": "font size of label in the text divider",
5914
- "name": "--mdc-divider-text-size"
5915
- },
5916
- {
5917
- "description": "font color of label in the text divider",
5918
- "name": "--mdc-divider-text-color"
5919
- },
5920
- {
5921
- "description": "left and right margin of label in the text divider",
5922
- "name": "--mdc-divider-text-margin"
5923
- },
5924
- {
5925
- "description": "line height of label in the text divider",
5926
- "name": "--mdc-divider-text-line-height"
5927
- },
5928
- {
5929
- "description": "background color of the grabber button in rest state",
5930
- "name": "--mdc-divider-grabber-button-background-color-normal"
5931
- },
5932
- {
5933
- "description": "background color of the grabber button in hover state",
5934
- "name": "--mdc-divider-grabber-button-background-color-hover"
5935
- },
5936
- {
5937
- "description": "background color of the grabber button in pressed state",
5938
- "name": "--mdc-divider-grabber-button-background-color-pressed"
5939
- },
5940
- {
5941
- "description": "border color of the grabber button",
5942
- "name": "--mdc-divider-grabber-button-border-color"
5943
- },
5944
- {
5945
- "description": "border radius of the grabber button",
5946
- "name": "--mdc-divider-grabber-button-border-radius"
5947
- }
5948
- ],
5949
- "members": [
5950
- {
5951
- "kind": "field",
5952
- "name": "orientation",
5953
- "type": {
5954
- "text": "DividerOrientation"
5955
- },
5956
- "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
5957
- "default": "horizontal",
5958
- "attribute": "orientation",
5959
- "reflects": true
5960
- },
5961
- {
5962
- "kind": "field",
5963
- "name": "variant",
5964
- "type": {
5965
- "text": "DividerVariant"
5966
- },
5967
- "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
5968
- "default": "solid",
5969
- "attribute": "variant",
5970
- "reflects": true
5971
- },
5972
- {
5973
- "kind": "field",
5974
- "name": "arrowDirection",
5975
- "type": {
5976
- "text": "Directions"
5977
- },
5978
- "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
5979
- "default": "'negative'",
5980
- "attribute": "arrow-direction",
5981
- "reflects": true
5982
- },
5983
- {
5984
- "kind": "field",
5985
- "name": "buttonPosition",
5986
- "type": {
5987
- "text": "Directions"
5988
- },
5989
- "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
5990
- "default": "'negative'",
5991
- "attribute": "button-position",
5992
- "reflects": true
5993
- },
5994
- {
5995
- "kind": "method",
5996
- "name": "setVariant",
5997
- "privacy": "private",
5998
- "parameters": [
5999
- {
6000
- "name": "variant",
6001
- "type": {
6002
- "text": "DividerVariant"
6003
- },
6004
- "description": "The variant to set."
6005
- }
6006
- ],
6007
- "description": "Sets the variant attribute for the divider component.\nIf the provided variant is not included in the DIVIDER_VARIANT,\nit defaults to the value specified in DEFAULTS.VARIANT."
6008
- },
6009
- {
6010
- "kind": "method",
6011
- "name": "setOrientation",
6012
- "privacy": "private",
6013
- "parameters": [
6014
- {
6015
- "name": "orientation",
6016
- "type": {
6017
- "text": "DividerOrientation"
6018
- },
6019
- "description": "The orientation to set."
6020
- }
6021
- ],
6022
- "description": "Sets the orientation attribute for the divider component.\nIf the provided orientation is not included in the DIVIDER_ORIENTATION,\nit defaults to the value specified in DEFAULTS.ORIENTATION."
6023
- },
6024
- {
6025
- "kind": "method",
6026
- "name": "ensureValidDirections",
6027
- "privacy": "private",
6028
- "description": "Sets the buttonPosition and arrowDirection attribute for the divider component.\nIf the provided buttonPosition and arrowDirection are not included in the DIRECTIONS,\nit defaults to the value specified in DIRECTIONS based on the ORIENTATION.",
6029
- "parameters": [
6030
- {
6031
- "description": "The buttonPosition to set.",
6032
- "name": "buttonPosition"
6033
- },
6034
- {
6035
- "description": "The arrowDirection to set.",
6036
- "name": "arrowDirection"
6037
- }
6038
- ]
6039
- },
6040
- {
6041
- "kind": "method",
6042
- "name": "setGrabberButton",
6043
- "privacy": "private",
6044
- "return": {
6045
- "type": {
6046
- "text": "void"
6047
- }
6048
- },
6049
- "description": "Configures the grabber button within the divider.\n\n- Sets the `prefix-icon` attribute for the grabber button based\non the `arrow-direction` and `orientation` properties.\n\nThis method updates the DOM element dynamically if a grabber button is present."
6050
- },
6051
- {
6052
- "kind": "method",
6053
- "name": "getArrowIcon",
6054
- "privacy": "private",
6055
- "return": {
6056
- "type": {
6057
- "text": ""
6058
- }
6059
- },
6060
- "description": "Determines the arrow icon based on the consumer-defined `arrowDirection`."
6061
- },
6062
- {
6063
- "kind": "method",
6064
- "name": "inferDividerType",
6065
- "privacy": "private",
6066
- "description": "Infers the type of divider based on the kind of slot present.",
6067
- "parameters": [
6068
- {
6069
- "description": "default slot of divider",
6070
- "name": "slot"
6071
- }
6072
- ]
6073
- }
6074
- ],
6075
- "attributes": [
6076
- {
6077
- "name": "orientation",
6078
- "type": {
6079
- "text": "DividerOrientation"
6080
- },
6081
- "description": "Two orientations of divider\n- **horizontal**: A thin, horizontal line with 0.0625rem width.\n- **vertical**: A thin, vertical line with 0.0625rem width.\n\nNote: We do not support \"Vertical Text Divider\" as of now.",
6082
- "default": "horizontal",
6083
- "fieldName": "orientation"
6084
- },
6085
- {
6086
- "name": "variant",
6087
- "type": {
6088
- "text": "DividerVariant"
6089
- },
6090
- "description": "Two variants of divider\n- **solid**: Solid line.\n- **gradient**: Gradient Line that fades on either sides of the divider.",
6091
- "default": "solid",
6092
- "fieldName": "variant"
6093
- },
6094
- {
6095
- "name": "arrow-direction",
6096
- "type": {
6097
- "text": "Directions"
6098
- },
6099
- "description": "Direction of the arrow icon, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
6100
- "default": "'negative'",
6101
- "fieldName": "arrowDirection"
6102
- },
6103
- {
6104
- "name": "button-position",
6105
- "type": {
6106
- "text": "Directions"
6107
- },
6108
- "description": "Position of the button, if applicable.\n- **positive**\n- **negative**\n\nNote: Positive and Negative directions are defined based on Cartesian plane.",
6109
- "default": "'negative'",
6110
- "fieldName": "buttonPosition"
6111
- }
6112
- ],
6113
- "superclass": {
6114
- "name": "Component",
6115
- "module": "/src/models"
6116
- },
6117
- "tagName": "mdc-divider",
6118
- "jsDoc": "/**\n * `mdc-divider` is a component that provides a line to separate and organize content.\n * It can also include a button or text positioned centrally, allowing users to interact with the layout.\n *\n * **Divider Orientation:**\n * - **Horizontal**: A thin, horizontal line.\n * - **Vertical**: A thin, vertical line.\n *\n * **Divider Variants:**\n * - **solid**: Solid line.\n * - **gradient**: Gradient Line.\n *\n * **Divider Types:**\n * - The type of divider is inferred based on the kind of slot present.\n * - **Primary**: A simple horizontal or vertical divider.\n * - **Text**: A horizontal divider with a text label in the center.\n * - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.\n *\n * **Accessibility:**\n * - When the slot is replaced by an `mdc-button`:\n * - `aria-label` should be passed to the `mdc-button`.\n * - `aria-expanded` should be passed to the `mdc-button`.\n *\n * **Notes:**\n * - If the slot is replaced by an invalid tag name or contains multiple elements,\n * the divider defaults to the **Primary** type.\n * - To override the styles of the divider, use the provided CSS custom properties.\n *\n * @tagname mdc-divider\n *\n * @cssproperty --mdc-divider-background-color - background color of the divider\n * @cssproperty --mdc-divider-width - width of the divider\n * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider\n * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider\n * @cssproperty --mdc-divider-text-size - font size of label in the text divider\n * @cssproperty --mdc-divider-text-color - font color of label in the text divider\n * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider\n * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider\n * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button\n * in rest state\n * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button\n * in hover state\n * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button\n * in pressed state\n * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button\n * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button\n */",
6119
- "customElement": true
6120
- }
6121
- ],
6122
- "exports": [
6123
- {
6124
- "kind": "js",
6125
- "name": "default",
6126
- "declaration": {
6127
- "name": "Divider",
6128
- "module": "components/divider/divider.component.js"
6129
- }
6130
- }
6131
- ]
6132
- },
6133
- {
6134
- "kind": "javascript-module",
6135
- "path": "components/formfieldgroup/formfieldgroup.component.js",
6136
- "declarations": [
6137
- {
6138
- "kind": "class",
6139
- "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
6140
- "name": "FormfieldGroup",
6141
- "slots": [
6139
+ "description": "`mdc-formfieldgroup` component, groups the form field components together.\nAll passed in children will have a gap of 12px (0.75rem) each applied.\n\nThis component is specifically for creating a `checkbox` group and a `toggle` group component.\nFor the radiogroup use the RadioGroup component instead.\n\nThe header text and description text are displayed above the items with accessible labels.<br/>\nThe consumer has to provide atleast the header-text or the aria-label,\nlike one of them <b>has</b> to be passed in always, otherwise its not accessible.\n\nThe role will be set to `group`.\nThe aria-label will be set with the data-aria-label property.\nThe aria-labelledby will be set with the header id which contains the header text information.\nThe aria-describedby will be set with the description id which contains the description text information.",
6140
+ "name": "FormfieldGroup",
6141
+ "slots": [
6142
6142
  {
6143
6143
  "description": "This is a default slot for checkbox or toggle components.",
6144
6144
  "name": "default"
@@ -6456,128 +6456,90 @@
6456
6456
  },
6457
6457
  {
6458
6458
  "kind": "javascript-module",
6459
- "path": "components/icon/icon.component.js",
6459
+ "path": "components/formfieldwrapper/formfieldwrapper.component.js",
6460
6460
  "declarations": [
6461
6461
  {
6462
6462
  "kind": "class",
6463
- "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
6464
- "name": "Icon",
6465
- "cssProperties": [
6466
- {
6467
- "description": "Allows customization of the default fill color.",
6468
- "name": "--mdc-icon-fill-color"
6469
- },
6463
+ "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
6464
+ "name": "FormfieldWrapper",
6465
+ "slots": [
6470
6466
  {
6471
- "description": "Allows customization of the icon size.",
6472
- "name": "--mdc-icon-size"
6473
- },
6474
- {
6475
- "description": "Allows customization of the icon border radius.",
6476
- "name": "--mdc-icon-border-radius"
6467
+ "description": "slot to add the label info icon",
6468
+ "name": "label-info"
6477
6469
  }
6478
6470
  ],
6479
6471
  "members": [
6480
6472
  {
6481
6473
  "kind": "field",
6482
- "name": "iconData",
6474
+ "name": "label",
6483
6475
  "type": {
6484
- "text": "HTMLElement | undefined"
6476
+ "text": "string | undefined"
6485
6477
  },
6486
- "privacy": "private"
6478
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6479
+ "attribute": "label",
6480
+ "reflects": true
6487
6481
  },
6488
6482
  {
6489
6483
  "kind": "field",
6490
- "name": "lengthUnitFromContext",
6484
+ "name": "requiredLabel",
6491
6485
  "type": {
6492
6486
  "text": "string | undefined"
6493
6487
  },
6494
- "privacy": "private"
6488
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
6489
+ "attribute": "required-label",
6490
+ "reflects": true
6495
6491
  },
6496
6492
  {
6497
6493
  "kind": "field",
6498
- "name": "sizeFromContext",
6494
+ "name": "id",
6499
6495
  "type": {
6500
- "text": "number | undefined"
6496
+ "text": "string"
6501
6497
  },
6502
- "privacy": "private"
6498
+ "default": "''",
6499
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
6500
+ "attribute": "id"
6503
6501
  },
6504
6502
  {
6505
6503
  "kind": "field",
6506
- "name": "name",
6504
+ "name": "helpTextType",
6507
6505
  "type": {
6508
- "text": "IconNames | undefined"
6506
+ "text": "ValidationType"
6509
6507
  },
6510
- "description": "Name of the icon (= filename)",
6511
- "attribute": "name",
6508
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6509
+ "attribute": "help-text-type",
6512
6510
  "reflects": true
6513
6511
  },
6514
6512
  {
6515
6513
  "kind": "field",
6516
- "name": "size",
6517
- "type": {
6518
- "text": "number | undefined"
6519
- },
6520
- "description": "Size of the icon (works in combination with length unit)",
6521
- "attribute": "size"
6522
- },
6523
- {
6524
- "kind": "field",
6525
- "name": "lengthUnit",
6514
+ "name": "helpText",
6526
6515
  "type": {
6527
6516
  "text": "string | undefined"
6528
6517
  },
6529
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
6530
- "attribute": "length-unit"
6531
- },
6532
- {
6533
- "kind": "field",
6534
- "name": "ariaLabel",
6535
- "type": {
6536
- "text": "string | null"
6537
- },
6538
- "default": "null",
6539
- "description": "Aria-label attribute to be set for accessibility",
6540
- "attribute": "aria-label"
6541
- },
6542
- {
6543
- "kind": "field",
6544
- "name": "ariaLabelledBy",
6545
- "type": {
6546
- "text": "string | null"
6547
- },
6548
- "default": "null",
6549
- "description": "Aria-labelledby attribute to be set for accessibility",
6550
- "attribute": "aria-labelledby"
6518
+ "description": "The help text that is displayed below the input field.",
6519
+ "attribute": "help-text",
6520
+ "reflects": true
6551
6521
  },
6552
6522
  {
6553
- "kind": "field",
6554
- "name": "iconProviderContext",
6555
- "privacy": "private",
6556
- "readonly": true
6523
+ "kind": "method",
6524
+ "name": "renderLabelElement",
6525
+ "privacy": "protected",
6526
+ "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
6527
+ "return": {
6528
+ "type": {
6529
+ "text": ""
6530
+ }
6531
+ }
6557
6532
  },
6558
6533
  {
6559
- "kind": "field",
6560
- "name": "abortController",
6561
- "type": {
6562
- "text": "AbortController"
6563
- },
6564
- "privacy": "private",
6565
- "default": "new AbortController()"
6534
+ "kind": "method",
6535
+ "name": "renderRequiredLabel",
6536
+ "privacy": "protected"
6566
6537
  },
6567
6538
  {
6568
6539
  "kind": "method",
6569
- "name": "prepareIconElement",
6570
- "privacy": "private",
6571
- "parameters": [
6572
- {
6573
- "name": "iconData",
6574
- "type": {
6575
- "text": "string"
6576
- },
6577
- "description": "The icon string to be parsed"
6578
- }
6579
- ],
6580
- "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
6540
+ "name": "renderHelpTextIcon",
6541
+ "privacy": "protected",
6542
+ "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
6581
6543
  "return": {
6582
6544
  "type": {
6583
6545
  "text": ""
@@ -6586,102 +6548,121 @@
6586
6548
  },
6587
6549
  {
6588
6550
  "kind": "method",
6589
- "name": "getIconData",
6590
- "privacy": "private",
6591
- "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
6592
- },
6593
- {
6594
- "kind": "method",
6595
- "name": "handleIconLoadedSuccess",
6596
- "privacy": "private",
6597
- "parameters": [
6598
- {
6599
- "name": "iconHtml",
6600
- "type": {
6601
- "text": "HTMLElement"
6602
- },
6603
- "description": "The icon html element which has been fetched from the icon provider."
6551
+ "name": "renderHelpText",
6552
+ "privacy": "protected",
6553
+ "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
6554
+ "return": {
6555
+ "type": {
6556
+ "text": ""
6604
6557
  }
6605
- ],
6606
- "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
6558
+ }
6607
6559
  },
6608
6560
  {
6609
6561
  "kind": "method",
6610
- "name": "handleIconLoadedFailure",
6611
- "privacy": "private",
6612
- "parameters": [
6613
- {
6614
- "name": "error",
6615
- "type": {
6616
- "text": "unknown"
6617
- }
6562
+ "name": "renderLabel",
6563
+ "privacy": "protected",
6564
+ "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
6565
+ "return": {
6566
+ "type": {
6567
+ "text": ""
6618
6568
  }
6619
- ],
6620
- "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
6569
+ }
6621
6570
  },
6622
6571
  {
6623
6572
  "kind": "method",
6624
- "name": "updateSize",
6625
- "privacy": "private",
6626
- "description": "Updates the size by setting the width and height"
6573
+ "name": "renderHelperText",
6574
+ "privacy": "protected",
6575
+ "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
6576
+ "return": {
6577
+ "type": {
6578
+ "text": ""
6579
+ }
6580
+ }
6627
6581
  },
6628
6582
  {
6629
6583
  "kind": "field",
6630
- "name": "computedIconSize",
6631
- "privacy": "private",
6632
- "readonly": true
6584
+ "name": "disabled",
6585
+ "type": {
6586
+ "text": "boolean"
6587
+ },
6588
+ "default": "false",
6589
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6590
+ "attribute": "disabled",
6591
+ "reflects": true,
6592
+ "inheritedFrom": {
6593
+ "name": "DisabledMixin",
6594
+ "module": "utils/mixins/DisabledMixin.js"
6595
+ }
6633
6596
  }
6634
6597
  ],
6635
6598
  "attributes": [
6636
6599
  {
6637
- "name": "name",
6600
+ "name": "label",
6638
6601
  "type": {
6639
- "text": "IconNames | undefined"
6602
+ "text": "string | undefined"
6640
6603
  },
6641
- "description": "Name of the icon (= filename)",
6642
- "fieldName": "name"
6604
+ "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6605
+ "fieldName": "label"
6643
6606
  },
6644
6607
  {
6645
- "name": "size",
6608
+ "name": "required-label",
6646
6609
  "type": {
6647
- "text": "number | undefined"
6610
+ "text": "string | undefined"
6648
6611
  },
6649
- "description": "Size of the icon (works in combination with length unit)",
6650
- "fieldName": "size"
6612
+ "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
6613
+ "fieldName": "requiredLabel"
6651
6614
  },
6652
6615
  {
6653
- "name": "length-unit",
6616
+ "name": "id",
6654
6617
  "type": {
6655
- "text": "string | undefined"
6618
+ "text": "string"
6656
6619
  },
6657
- "description": "Length unit attribute for overriding length-unit from `IconProvider`",
6658
- "fieldName": "lengthUnit"
6620
+ "default": "''",
6621
+ "description": "The unique id of the input field. It is used to link the input field with the label.",
6622
+ "fieldName": "id"
6659
6623
  },
6660
6624
  {
6661
- "name": "aria-label",
6625
+ "name": "help-text-type",
6662
6626
  "type": {
6663
- "text": "string | null"
6627
+ "text": "ValidationType"
6664
6628
  },
6665
- "default": "null",
6666
- "description": "Aria-label attribute to be set for accessibility",
6667
- "fieldName": "ariaLabel"
6629
+ "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6630
+ "fieldName": "helpTextType"
6668
6631
  },
6669
6632
  {
6670
- "name": "aria-labelledby",
6633
+ "name": "help-text",
6671
6634
  "type": {
6672
- "text": "string | null"
6635
+ "text": "string | undefined"
6673
6636
  },
6674
- "default": "null",
6675
- "description": "Aria-labelledby attribute to be set for accessibility",
6676
- "fieldName": "ariaLabelledBy"
6637
+ "description": "The help text that is displayed below the input field.",
6638
+ "fieldName": "helpText"
6639
+ },
6640
+ {
6641
+ "name": "disabled",
6642
+ "type": {
6643
+ "text": "boolean"
6644
+ },
6645
+ "default": "false",
6646
+ "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6647
+ "fieldName": "disabled",
6648
+ "inheritedFrom": {
6649
+ "name": "DisabledMixin",
6650
+ "module": "src/utils/mixins/DisabledMixin.ts"
6651
+ }
6652
+ }
6653
+ ],
6654
+ "mixins": [
6655
+ {
6656
+ "name": "DisabledMixin",
6657
+ "module": "/src/utils/mixins/DisabledMixin"
6677
6658
  }
6678
6659
  ],
6679
6660
  "superclass": {
6680
6661
  "name": "Component",
6681
6662
  "module": "/src/models"
6682
6663
  },
6683
- "tagName": "mdc-icon",
6684
- "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
6664
+ "tagName": "mdc-formfieldwrapper",
6665
+ "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @slot label-info - slot to add the label info icon\n *\n */",
6685
6666
  "customElement": true
6686
6667
  }
6687
6668
  ],
@@ -6690,98 +6671,136 @@
6690
6671
  "kind": "js",
6691
6672
  "name": "default",
6692
6673
  "declaration": {
6693
- "name": "Icon",
6694
- "module": "components/icon/icon.component.js"
6674
+ "name": "FormfieldWrapper",
6675
+ "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6695
6676
  }
6696
6677
  }
6697
6678
  ]
6698
6679
  },
6699
6680
  {
6700
6681
  "kind": "javascript-module",
6701
- "path": "components/formfieldwrapper/formfieldwrapper.component.js",
6682
+ "path": "components/icon/icon.component.js",
6702
6683
  "declarations": [
6703
6684
  {
6704
6685
  "kind": "class",
6705
- "description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
6706
- "name": "FormfieldWrapper",
6707
- "slots": [
6686
+ "description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
6687
+ "name": "Icon",
6688
+ "cssProperties": [
6708
6689
  {
6709
- "description": "slot to add the label info icon",
6710
- "name": "label-info"
6690
+ "description": "Allows customization of the default fill color.",
6691
+ "name": "--mdc-icon-fill-color"
6692
+ },
6693
+ {
6694
+ "description": "Allows customization of the icon size.",
6695
+ "name": "--mdc-icon-size"
6696
+ },
6697
+ {
6698
+ "description": "Allows customization of the icon border radius.",
6699
+ "name": "--mdc-icon-border-radius"
6711
6700
  }
6712
6701
  ],
6713
6702
  "members": [
6714
6703
  {
6715
6704
  "kind": "field",
6716
- "name": "label",
6705
+ "name": "iconData",
6717
6706
  "type": {
6718
- "text": "string | undefined"
6707
+ "text": "HTMLElement | undefined"
6719
6708
  },
6720
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6721
- "attribute": "label",
6722
- "reflects": true
6709
+ "privacy": "private"
6723
6710
  },
6724
6711
  {
6725
6712
  "kind": "field",
6726
- "name": "requiredLabel",
6713
+ "name": "lengthUnitFromContext",
6727
6714
  "type": {
6728
6715
  "text": "string | undefined"
6729
6716
  },
6730
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
6731
- "attribute": "required-label",
6732
- "reflects": true
6717
+ "privacy": "private"
6733
6718
  },
6734
6719
  {
6735
6720
  "kind": "field",
6736
- "name": "id",
6721
+ "name": "sizeFromContext",
6737
6722
  "type": {
6738
- "text": "string"
6723
+ "text": "number | undefined"
6739
6724
  },
6740
- "default": "''",
6741
- "description": "The unique id of the input field. It is used to link the input field with the label.",
6742
- "attribute": "id"
6725
+ "privacy": "private"
6743
6726
  },
6744
6727
  {
6745
6728
  "kind": "field",
6746
- "name": "helpTextType",
6729
+ "name": "name",
6747
6730
  "type": {
6748
- "text": "ValidationType"
6731
+ "text": "IconNames | undefined"
6749
6732
  },
6750
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6751
- "attribute": "help-text-type",
6733
+ "description": "Name of the icon (= filename)",
6734
+ "attribute": "name",
6752
6735
  "reflects": true
6753
6736
  },
6754
6737
  {
6755
6738
  "kind": "field",
6756
- "name": "helpText",
6739
+ "name": "size",
6740
+ "type": {
6741
+ "text": "number | undefined"
6742
+ },
6743
+ "description": "Size of the icon (works in combination with length unit)",
6744
+ "attribute": "size"
6745
+ },
6746
+ {
6747
+ "kind": "field",
6748
+ "name": "lengthUnit",
6757
6749
  "type": {
6758
6750
  "text": "string | undefined"
6759
6751
  },
6760
- "description": "The help text that is displayed below the input field.",
6761
- "attribute": "help-text",
6762
- "reflects": true
6752
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
6753
+ "attribute": "length-unit"
6763
6754
  },
6764
6755
  {
6765
- "kind": "method",
6766
- "name": "renderLabelElement",
6767
- "privacy": "protected",
6768
- "description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
6769
- "return": {
6770
- "type": {
6771
- "text": ""
6772
- }
6773
- }
6756
+ "kind": "field",
6757
+ "name": "ariaLabel",
6758
+ "type": {
6759
+ "text": "string | null"
6760
+ },
6761
+ "default": "null",
6762
+ "description": "Aria-label attribute to be set for accessibility",
6763
+ "attribute": "aria-label"
6774
6764
  },
6775
6765
  {
6776
- "kind": "method",
6777
- "name": "renderRequiredLabel",
6778
- "privacy": "protected"
6766
+ "kind": "field",
6767
+ "name": "ariaLabelledBy",
6768
+ "type": {
6769
+ "text": "string | null"
6770
+ },
6771
+ "default": "null",
6772
+ "description": "Aria-labelledby attribute to be set for accessibility",
6773
+ "attribute": "aria-labelledby"
6774
+ },
6775
+ {
6776
+ "kind": "field",
6777
+ "name": "iconProviderContext",
6778
+ "privacy": "private",
6779
+ "readonly": true
6780
+ },
6781
+ {
6782
+ "kind": "field",
6783
+ "name": "abortController",
6784
+ "type": {
6785
+ "text": "AbortController"
6786
+ },
6787
+ "privacy": "private",
6788
+ "default": "new AbortController()"
6779
6789
  },
6780
6790
  {
6781
6791
  "kind": "method",
6782
- "name": "renderHelpTextIcon",
6783
- "privacy": "protected",
6784
- "description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
6792
+ "name": "prepareIconElement",
6793
+ "privacy": "private",
6794
+ "parameters": [
6795
+ {
6796
+ "name": "iconData",
6797
+ "type": {
6798
+ "text": "string"
6799
+ },
6800
+ "description": "The icon string to be parsed"
6801
+ }
6802
+ ],
6803
+ "description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
6785
6804
  "return": {
6786
6805
  "type": {
6787
6806
  "text": ""
@@ -6790,121 +6809,102 @@
6790
6809
  },
6791
6810
  {
6792
6811
  "kind": "method",
6793
- "name": "renderHelpText",
6794
- "privacy": "protected",
6795
- "description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
6796
- "return": {
6797
- "type": {
6798
- "text": ""
6799
- }
6800
- }
6812
+ "name": "getIconData",
6813
+ "privacy": "private",
6814
+ "description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
6801
6815
  },
6802
6816
  {
6803
6817
  "kind": "method",
6804
- "name": "renderLabel",
6805
- "privacy": "protected",
6806
- "description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
6807
- "return": {
6808
- "type": {
6809
- "text": ""
6818
+ "name": "handleIconLoadedSuccess",
6819
+ "privacy": "private",
6820
+ "parameters": [
6821
+ {
6822
+ "name": "iconHtml",
6823
+ "type": {
6824
+ "text": "HTMLElement"
6825
+ },
6826
+ "description": "The icon html element which has been fetched from the icon provider."
6810
6827
  }
6811
- }
6828
+ ],
6829
+ "description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
6812
6830
  },
6813
6831
  {
6814
6832
  "kind": "method",
6815
- "name": "renderHelperText",
6816
- "privacy": "protected",
6817
- "description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
6818
- "return": {
6819
- "type": {
6820
- "text": ""
6833
+ "name": "handleIconLoadedFailure",
6834
+ "privacy": "private",
6835
+ "parameters": [
6836
+ {
6837
+ "name": "error",
6838
+ "type": {
6839
+ "text": "unknown"
6840
+ }
6821
6841
  }
6822
- }
6842
+ ],
6843
+ "description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
6844
+ },
6845
+ {
6846
+ "kind": "method",
6847
+ "name": "updateSize",
6848
+ "privacy": "private",
6849
+ "description": "Updates the size by setting the width and height"
6823
6850
  },
6824
6851
  {
6825
6852
  "kind": "field",
6826
- "name": "disabled",
6827
- "type": {
6828
- "text": "boolean"
6829
- },
6830
- "default": "false",
6831
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6832
- "attribute": "disabled",
6833
- "reflects": true,
6834
- "inheritedFrom": {
6835
- "name": "DisabledMixin",
6836
- "module": "utils/mixins/DisabledMixin.js"
6837
- }
6853
+ "name": "computedIconSize",
6854
+ "privacy": "private",
6855
+ "readonly": true
6838
6856
  }
6839
6857
  ],
6840
6858
  "attributes": [
6841
6859
  {
6842
- "name": "label",
6843
- "type": {
6844
- "text": "string | undefined"
6845
- },
6846
- "description": "The label of the input field. It is linked to the input field using the `for` attribute.",
6847
- "fieldName": "label"
6848
- },
6849
- {
6850
- "name": "required-label",
6860
+ "name": "name",
6851
6861
  "type": {
6852
- "text": "string | undefined"
6862
+ "text": "IconNames | undefined"
6853
6863
  },
6854
- "description": "The required label of the input field.\nWhen an appropriate string value is set,\nthe input field is marked as required and the label is appended with this text.",
6855
- "fieldName": "requiredLabel"
6864
+ "description": "Name of the icon (= filename)",
6865
+ "fieldName": "name"
6856
6866
  },
6857
6867
  {
6858
- "name": "id",
6868
+ "name": "size",
6859
6869
  "type": {
6860
- "text": "string"
6870
+ "text": "number | undefined"
6861
6871
  },
6862
- "default": "''",
6863
- "description": "The unique id of the input field. It is used to link the input field with the label.",
6864
- "fieldName": "id"
6872
+ "description": "Size of the icon (works in combination with length unit)",
6873
+ "fieldName": "size"
6865
6874
  },
6866
6875
  {
6867
- "name": "help-text-type",
6876
+ "name": "length-unit",
6868
6877
  "type": {
6869
- "text": "ValidationType"
6878
+ "text": "string | undefined"
6870
6879
  },
6871
- "description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
6872
- "fieldName": "helpTextType"
6880
+ "description": "Length unit attribute for overriding length-unit from `IconProvider`",
6881
+ "fieldName": "lengthUnit"
6873
6882
  },
6874
6883
  {
6875
- "name": "help-text",
6884
+ "name": "aria-label",
6876
6885
  "type": {
6877
- "text": "string | undefined"
6886
+ "text": "string | null"
6878
6887
  },
6879
- "description": "The help text that is displayed below the input field.",
6880
- "fieldName": "helpText"
6888
+ "default": "null",
6889
+ "description": "Aria-label attribute to be set for accessibility",
6890
+ "fieldName": "ariaLabel"
6881
6891
  },
6882
6892
  {
6883
- "name": "disabled",
6893
+ "name": "aria-labelledby",
6884
6894
  "type": {
6885
- "text": "boolean"
6895
+ "text": "string | null"
6886
6896
  },
6887
- "default": "false",
6888
- "description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
6889
- "fieldName": "disabled",
6890
- "inheritedFrom": {
6891
- "name": "DisabledMixin",
6892
- "module": "src/utils/mixins/DisabledMixin.ts"
6893
- }
6894
- }
6895
- ],
6896
- "mixins": [
6897
- {
6898
- "name": "DisabledMixin",
6899
- "module": "/src/utils/mixins/DisabledMixin"
6897
+ "default": "null",
6898
+ "description": "Aria-labelledby attribute to be set for accessibility",
6899
+ "fieldName": "ariaLabelledBy"
6900
6900
  }
6901
6901
  ],
6902
6902
  "superclass": {
6903
6903
  "name": "Component",
6904
6904
  "module": "/src/models"
6905
6905
  },
6906
- "tagName": "mdc-formfieldwrapper",
6907
- "jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @slot label-info - slot to add the label info icon\n *\n */",
6906
+ "tagName": "mdc-icon",
6907
+ "jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n */",
6908
6908
  "customElement": true
6909
6909
  }
6910
6910
  ],
@@ -6913,8 +6913,8 @@
6913
6913
  "kind": "js",
6914
6914
  "name": "default",
6915
6915
  "declaration": {
6916
- "name": "FormfieldWrapper",
6917
- "module": "components/formfieldwrapper/formfieldwrapper.component.js"
6916
+ "name": "Icon",
6917
+ "module": "components/icon/icon.component.js"
6918
6918
  }
6919
6919
  }
6920
6920
  ]
@@ -13399,6 +13399,90 @@
13399
13399
  }
13400
13400
  ]
13401
13401
  },
13402
+ {
13403
+ "kind": "javascript-module",
13404
+ "path": "components/text/text.component.js",
13405
+ "declarations": [
13406
+ {
13407
+ "kind": "class",
13408
+ "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
13409
+ "name": "Text",
13410
+ "cssParts": [
13411
+ {
13412
+ "description": "The text element",
13413
+ "name": "text"
13414
+ }
13415
+ ],
13416
+ "slots": [
13417
+ {
13418
+ "description": "Default slot for text content",
13419
+ "name": ""
13420
+ }
13421
+ ],
13422
+ "members": [
13423
+ {
13424
+ "kind": "field",
13425
+ "name": "type",
13426
+ "type": {
13427
+ "text": "TextType"
13428
+ },
13429
+ "privacy": "public",
13430
+ "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
13431
+ "default": "body-large-regular",
13432
+ "attribute": "type",
13433
+ "reflects": true
13434
+ },
13435
+ {
13436
+ "kind": "field",
13437
+ "name": "tagname",
13438
+ "type": {
13439
+ "text": "TagName | undefined"
13440
+ },
13441
+ "privacy": "public",
13442
+ "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
13443
+ "attribute": "tagname",
13444
+ "reflects": true
13445
+ }
13446
+ ],
13447
+ "attributes": [
13448
+ {
13449
+ "name": "type",
13450
+ "type": {
13451
+ "text": "TextType"
13452
+ },
13453
+ "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
13454
+ "default": "body-large-regular",
13455
+ "fieldName": "type"
13456
+ },
13457
+ {
13458
+ "name": "tagname",
13459
+ "type": {
13460
+ "text": "TagName | undefined"
13461
+ },
13462
+ "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
13463
+ "fieldName": "tagname"
13464
+ }
13465
+ ],
13466
+ "superclass": {
13467
+ "name": "Component",
13468
+ "module": "/src/models"
13469
+ },
13470
+ "tagName": "mdc-text",
13471
+ "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
13472
+ "customElement": true
13473
+ }
13474
+ ],
13475
+ "exports": [
13476
+ {
13477
+ "kind": "js",
13478
+ "name": "default",
13479
+ "declaration": {
13480
+ "name": "Text",
13481
+ "module": "components/text/text.component.js"
13482
+ }
13483
+ }
13484
+ ]
13485
+ },
13402
13486
  {
13403
13487
  "kind": "javascript-module",
13404
13488
  "path": "components/textarea/textarea.component.js",
@@ -14335,90 +14419,6 @@
14335
14419
  }
14336
14420
  ]
14337
14421
  },
14338
- {
14339
- "kind": "javascript-module",
14340
- "path": "components/text/text.component.js",
14341
- "declarations": [
14342
- {
14343
- "kind": "class",
14344
- "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
14345
- "name": "Text",
14346
- "cssParts": [
14347
- {
14348
- "description": "The text element",
14349
- "name": "text"
14350
- }
14351
- ],
14352
- "slots": [
14353
- {
14354
- "description": "Default slot for text content",
14355
- "name": ""
14356
- }
14357
- ],
14358
- "members": [
14359
- {
14360
- "kind": "field",
14361
- "name": "type",
14362
- "type": {
14363
- "text": "TextType"
14364
- },
14365
- "privacy": "public",
14366
- "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
14367
- "default": "body-large-regular",
14368
- "attribute": "type",
14369
- "reflects": true
14370
- },
14371
- {
14372
- "kind": "field",
14373
- "name": "tagname",
14374
- "type": {
14375
- "text": "TagName | undefined"
14376
- },
14377
- "privacy": "public",
14378
- "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
14379
- "attribute": "tagname",
14380
- "reflects": true
14381
- }
14382
- ],
14383
- "attributes": [
14384
- {
14385
- "name": "type",
14386
- "type": {
14387
- "text": "TextType"
14388
- },
14389
- "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
14390
- "default": "body-large-regular",
14391
- "fieldName": "type"
14392
- },
14393
- {
14394
- "name": "tagname",
14395
- "type": {
14396
- "text": "TagName | undefined"
14397
- },
14398
- "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
14399
- "fieldName": "tagname"
14400
- }
14401
- ],
14402
- "superclass": {
14403
- "name": "Component",
14404
- "module": "/src/models"
14405
- },
14406
- "tagName": "mdc-text",
14407
- "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
14408
- "customElement": true
14409
- }
14410
- ],
14411
- "exports": [
14412
- {
14413
- "kind": "js",
14414
- "name": "default",
14415
- "declaration": {
14416
- "name": "Text",
14417
- "module": "components/text/text.component.js"
14418
- }
14419
- }
14420
- ]
14421
- },
14422
14422
  {
14423
14423
  "kind": "javascript-module",
14424
14424
  "path": "components/themeprovider/themeprovider.component.js",