@momentum-design/components 0.73.4 → 0.73.6
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.
@@ -492,67 +492,6 @@
|
|
492
492
|
}
|
493
493
|
]
|
494
494
|
},
|
495
|
-
{
|
496
|
-
"kind": "javascript-module",
|
497
|
-
"path": "components/appheader/appheader.component.js",
|
498
|
-
"declarations": [
|
499
|
-
{
|
500
|
-
"kind": "class",
|
501
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
502
|
-
"name": "Appheader",
|
503
|
-
"cssParts": [
|
504
|
-
{
|
505
|
-
"description": "The main container for styling the header.",
|
506
|
-
"name": "container"
|
507
|
-
},
|
508
|
-
{
|
509
|
-
"description": "The leading section of the header.",
|
510
|
-
"name": "leading-section"
|
511
|
-
},
|
512
|
-
{
|
513
|
-
"description": "The center section of the header.",
|
514
|
-
"name": "center-section"
|
515
|
-
},
|
516
|
-
{
|
517
|
-
"description": "The trailing section of the header.",
|
518
|
-
"name": "trailing-section"
|
519
|
-
}
|
520
|
-
],
|
521
|
-
"slots": [
|
522
|
-
{
|
523
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
524
|
-
"name": "leading"
|
525
|
-
},
|
526
|
-
{
|
527
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
528
|
-
"name": "center"
|
529
|
-
},
|
530
|
-
{
|
531
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
532
|
-
"name": "trailing"
|
533
|
-
}
|
534
|
-
],
|
535
|
-
"members": [],
|
536
|
-
"superclass": {
|
537
|
-
"name": "Component",
|
538
|
-
"module": "/src/models"
|
539
|
-
},
|
540
|
-
"tagName": "mdc-appheader",
|
541
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
542
|
-
"customElement": true
|
543
|
-
}
|
544
|
-
],
|
545
|
-
"exports": [
|
546
|
-
{
|
547
|
-
"kind": "js",
|
548
|
-
"name": "default",
|
549
|
-
"declaration": {
|
550
|
-
"name": "Appheader",
|
551
|
-
"module": "components/appheader/appheader.component.js"
|
552
|
-
}
|
553
|
-
}
|
554
|
-
]
|
555
|
-
},
|
556
495
|
{
|
557
496
|
"kind": "javascript-module",
|
558
497
|
"path": "components/animation/animation.component.js",
|
@@ -765,6 +704,67 @@
|
|
765
704
|
}
|
766
705
|
]
|
767
706
|
},
|
707
|
+
{
|
708
|
+
"kind": "javascript-module",
|
709
|
+
"path": "components/appheader/appheader.component.js",
|
710
|
+
"declarations": [
|
711
|
+
{
|
712
|
+
"kind": "class",
|
713
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
714
|
+
"name": "Appheader",
|
715
|
+
"cssParts": [
|
716
|
+
{
|
717
|
+
"description": "The main container for styling the header.",
|
718
|
+
"name": "container"
|
719
|
+
},
|
720
|
+
{
|
721
|
+
"description": "The leading section of the header.",
|
722
|
+
"name": "leading-section"
|
723
|
+
},
|
724
|
+
{
|
725
|
+
"description": "The center section of the header.",
|
726
|
+
"name": "center-section"
|
727
|
+
},
|
728
|
+
{
|
729
|
+
"description": "The trailing section of the header.",
|
730
|
+
"name": "trailing-section"
|
731
|
+
}
|
732
|
+
],
|
733
|
+
"slots": [
|
734
|
+
{
|
735
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
736
|
+
"name": "leading"
|
737
|
+
},
|
738
|
+
{
|
739
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
740
|
+
"name": "center"
|
741
|
+
},
|
742
|
+
{
|
743
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
744
|
+
"name": "trailing"
|
745
|
+
}
|
746
|
+
],
|
747
|
+
"members": [],
|
748
|
+
"superclass": {
|
749
|
+
"name": "Component",
|
750
|
+
"module": "/src/models"
|
751
|
+
},
|
752
|
+
"tagName": "mdc-appheader",
|
753
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
754
|
+
"customElement": true
|
755
|
+
}
|
756
|
+
],
|
757
|
+
"exports": [
|
758
|
+
{
|
759
|
+
"kind": "js",
|
760
|
+
"name": "default",
|
761
|
+
"declaration": {
|
762
|
+
"name": "Appheader",
|
763
|
+
"module": "components/appheader/appheader.component.js"
|
764
|
+
}
|
765
|
+
}
|
766
|
+
]
|
767
|
+
},
|
768
768
|
{
|
769
769
|
"kind": "javascript-module",
|
770
770
|
"path": "components/avatar/avatar.component.js",
|
@@ -23343,950 +23343,1020 @@
|
|
23343
23343
|
},
|
23344
23344
|
{
|
23345
23345
|
"kind": "javascript-module",
|
23346
|
-
"path": "components/
|
23346
|
+
"path": "components/tablist/tablist.component.js",
|
23347
23347
|
"declarations": [
|
23348
23348
|
{
|
23349
23349
|
"kind": "class",
|
23350
|
-
"description": "`mdc-tab`
|
23351
|
-
"name": "
|
23350
|
+
"description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
|
23351
|
+
"name": "TabList",
|
23352
23352
|
"cssProperties": [
|
23353
23353
|
{
|
23354
|
-
"description": "Gap between
|
23355
|
-
"name": "--mdc-
|
23356
|
-
},
|
23357
|
-
{
|
23358
|
-
"description": "Height of the tab.",
|
23359
|
-
"name": "--mdc-tab-height"
|
23360
|
-
},
|
23361
|
-
{
|
23362
|
-
"description": "Background color for active glass tab in disabled state.",
|
23363
|
-
"name": "--mdc-tab-glass-active-background-color-disabled"
|
23354
|
+
"description": "Gap between tabs",
|
23355
|
+
"name": "--mdc-tablist-gap"
|
23364
23356
|
},
|
23365
23357
|
{
|
23366
|
-
"description": "
|
23367
|
-
"name": "--mdc-
|
23358
|
+
"description": "Width of the tablist",
|
23359
|
+
"name": "--mdc-tablist-width"
|
23368
23360
|
},
|
23369
23361
|
{
|
23370
|
-
"description": "
|
23371
|
-
"name": "--mdc-
|
23372
|
-
}
|
23362
|
+
"description": "Margin value for the arrow button",
|
23363
|
+
"name": "--mdc-tablist-arrow-button-margin"
|
23364
|
+
}
|
23365
|
+
],
|
23366
|
+
"slots": [
|
23373
23367
|
{
|
23374
|
-
"description": "
|
23375
|
-
"name": "
|
23376
|
-
}
|
23368
|
+
"description": "slot for mdc-tab elements.",
|
23369
|
+
"name": "Default"
|
23370
|
+
}
|
23371
|
+
],
|
23372
|
+
"members": [
|
23377
23373
|
{
|
23378
|
-
"
|
23379
|
-
"name": "
|
23374
|
+
"kind": "field",
|
23375
|
+
"name": "activeTabId",
|
23376
|
+
"type": {
|
23377
|
+
"text": "string | undefined"
|
23378
|
+
},
|
23379
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
23380
|
+
"attribute": "active-tab-id",
|
23381
|
+
"reflects": true
|
23380
23382
|
},
|
23381
23383
|
{
|
23382
|
-
"
|
23383
|
-
"name": "
|
23384
|
-
|
23384
|
+
"kind": "field",
|
23385
|
+
"name": "dataAriaLabel",
|
23386
|
+
"type": {
|
23387
|
+
"text": "string | undefined"
|
23388
|
+
},
|
23389
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
23390
|
+
"attribute": "data-aria-label"
|
23391
|
+
}
|
23392
|
+
],
|
23393
|
+
"events": [
|
23385
23394
|
{
|
23386
|
-
"description": "
|
23387
|
-
"name": "
|
23388
|
-
|
23395
|
+
"description": "(React: onChange) This event is dispatched when the tab is selected. Event that fires when user changes the active tab. The function sent as the argument will receive the fired event and the new tab id can be fetched from event.detail.tabId. `(event: CustomEvent) => handleTabChange(event.detail.tabId);`",
|
23396
|
+
"name": "change",
|
23397
|
+
"reactName": "onChange"
|
23398
|
+
}
|
23399
|
+
],
|
23400
|
+
"attributes": [
|
23389
23401
|
{
|
23390
|
-
"
|
23391
|
-
"
|
23402
|
+
"name": "active-tab-id",
|
23403
|
+
"type": {
|
23404
|
+
"text": "string | undefined"
|
23405
|
+
},
|
23406
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
23407
|
+
"fieldName": "activeTabId"
|
23392
23408
|
},
|
23393
23409
|
{
|
23394
|
-
"
|
23395
|
-
"
|
23396
|
-
|
23410
|
+
"name": "data-aria-label",
|
23411
|
+
"type": {
|
23412
|
+
"text": "string | undefined"
|
23413
|
+
},
|
23414
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
23415
|
+
"fieldName": "dataAriaLabel"
|
23416
|
+
}
|
23417
|
+
],
|
23418
|
+
"superclass": {
|
23419
|
+
"name": "Component",
|
23420
|
+
"module": "/src/models"
|
23421
|
+
},
|
23422
|
+
"tagName": "mdc-tablist",
|
23423
|
+
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
23424
|
+
"customElement": true
|
23425
|
+
}
|
23426
|
+
],
|
23427
|
+
"exports": [
|
23428
|
+
{
|
23429
|
+
"kind": "js",
|
23430
|
+
"name": "default",
|
23431
|
+
"declaration": {
|
23432
|
+
"name": "TabList",
|
23433
|
+
"module": "components/tablist/tablist.component.js"
|
23434
|
+
}
|
23435
|
+
}
|
23436
|
+
]
|
23437
|
+
},
|
23438
|
+
{
|
23439
|
+
"kind": "javascript-module",
|
23440
|
+
"path": "components/text/text.component.js",
|
23441
|
+
"declarations": [
|
23442
|
+
{
|
23443
|
+
"kind": "class",
|
23444
|
+
"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.",
|
23445
|
+
"name": "Text",
|
23446
|
+
"cssParts": [
|
23397
23447
|
{
|
23398
|
-
"description": "
|
23399
|
-
"name": "
|
23400
|
-
}
|
23448
|
+
"description": "The text element",
|
23449
|
+
"name": "text"
|
23450
|
+
}
|
23451
|
+
],
|
23452
|
+
"slots": [
|
23401
23453
|
{
|
23402
|
-
"description": "
|
23403
|
-
"name": "
|
23404
|
-
}
|
23454
|
+
"description": "Default slot for text content",
|
23455
|
+
"name": ""
|
23456
|
+
}
|
23457
|
+
],
|
23458
|
+
"members": [
|
23405
23459
|
{
|
23406
|
-
"
|
23407
|
-
"name": "
|
23460
|
+
"kind": "field",
|
23461
|
+
"name": "type",
|
23462
|
+
"type": {
|
23463
|
+
"text": "TextType"
|
23464
|
+
},
|
23465
|
+
"privacy": "public",
|
23466
|
+
"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'",
|
23467
|
+
"default": "body-large-regular",
|
23468
|
+
"attribute": "type",
|
23469
|
+
"reflects": true
|
23408
23470
|
},
|
23409
23471
|
{
|
23410
|
-
"
|
23411
|
-
"name": "
|
23412
|
-
|
23472
|
+
"kind": "field",
|
23473
|
+
"name": "tagname",
|
23474
|
+
"type": {
|
23475
|
+
"text": "TagName | undefined"
|
23476
|
+
},
|
23477
|
+
"privacy": "public",
|
23478
|
+
"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.",
|
23479
|
+
"attribute": "tagname",
|
23480
|
+
"reflects": true
|
23481
|
+
}
|
23482
|
+
],
|
23483
|
+
"attributes": [
|
23413
23484
|
{
|
23414
|
-
"
|
23415
|
-
"
|
23485
|
+
"name": "type",
|
23486
|
+
"type": {
|
23487
|
+
"text": "TextType"
|
23488
|
+
},
|
23489
|
+
"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'",
|
23490
|
+
"default": "body-large-regular",
|
23491
|
+
"fieldName": "type"
|
23416
23492
|
},
|
23417
23493
|
{
|
23418
|
-
"
|
23419
|
-
"
|
23420
|
-
|
23494
|
+
"name": "tagname",
|
23495
|
+
"type": {
|
23496
|
+
"text": "TagName | undefined"
|
23497
|
+
},
|
23498
|
+
"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.",
|
23499
|
+
"fieldName": "tagname"
|
23500
|
+
}
|
23501
|
+
],
|
23502
|
+
"superclass": {
|
23503
|
+
"name": "Component",
|
23504
|
+
"module": "/src/models"
|
23505
|
+
},
|
23506
|
+
"tagName": "mdc-text",
|
23507
|
+
"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 */",
|
23508
|
+
"customElement": true
|
23509
|
+
}
|
23510
|
+
],
|
23511
|
+
"exports": [
|
23512
|
+
{
|
23513
|
+
"kind": "js",
|
23514
|
+
"name": "default",
|
23515
|
+
"declaration": {
|
23516
|
+
"name": "Text",
|
23517
|
+
"module": "components/text/text.component.js"
|
23518
|
+
}
|
23519
|
+
}
|
23520
|
+
]
|
23521
|
+
},
|
23522
|
+
{
|
23523
|
+
"kind": "javascript-module",
|
23524
|
+
"path": "components/textarea/textarea.component.js",
|
23525
|
+
"declarations": [
|
23526
|
+
{
|
23527
|
+
"kind": "class",
|
23528
|
+
"description": "mdc-textarea component, which is used to get the multi-line text input from the user.\nIt contains:\n- label: It is the title of the textarea field.\n- required-label: A string depicting that the textarea field is required.\n- Textarea: It is the multi-line text input field.\n- helper-text: It is the text that provides additional information about the textarea field.\n- max-character-limit: It is the text that shows the character count of the textarea field.\n- Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n about the textarea field based on the validation state.\n- limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n This event exposes 3 properties:\n - currentCharacterCount - the current number of characters in the textarea field,\n - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n - value - the current value of the textarea field,\n\n**Note**: Consumers must set the help-text-type with 'error' and\nhelp-text attribute with the error message using limitexceeded event.\nThe same help-text value will be used for the validation message to be displayed.",
|
23529
|
+
"name": "Textarea",
|
23530
|
+
"cssProperties": [
|
23421
23531
|
{
|
23422
|
-
"description": "
|
23423
|
-
"name": "--mdc-
|
23532
|
+
"description": "Border color for the textarea container when disabled",
|
23533
|
+
"name": "--mdc-textarea-disabled-border-color"
|
23424
23534
|
},
|
23425
23535
|
{
|
23426
|
-
"description": "
|
23427
|
-
"name": "--mdc-
|
23536
|
+
"description": "Text color for the textarea field when disabled",
|
23537
|
+
"name": "--mdc-textarea-disabled-text-color"
|
23428
23538
|
},
|
23429
23539
|
{
|
23430
|
-
"description": "
|
23431
|
-
"name": "--mdc-
|
23540
|
+
"description": "Background color for the textarea field when disabled",
|
23541
|
+
"name": "--mdc-textarea-disabled-background-color"
|
23432
23542
|
},
|
23433
23543
|
{
|
23434
|
-
"description": "Text
|
23435
|
-
"name": "--mdc-
|
23544
|
+
"description": "Text color for the textarea field",
|
23545
|
+
"name": "--mdc-textarea-text-color"
|
23436
23546
|
},
|
23437
23547
|
{
|
23438
|
-
"description": "color for
|
23439
|
-
"name": "--mdc-
|
23548
|
+
"description": "Background color for the textarea field",
|
23549
|
+
"name": "--mdc-textarea-background-color"
|
23440
23550
|
},
|
23441
23551
|
{
|
23442
|
-
"description": "
|
23443
|
-
"name": "--mdc-
|
23552
|
+
"description": "Border color for the textarea field",
|
23553
|
+
"name": "--mdc-textarea-border-color"
|
23444
23554
|
},
|
23445
23555
|
{
|
23446
|
-
"description": "
|
23447
|
-
"name": "--mdc-
|
23556
|
+
"description": "Text color for the character counter",
|
23557
|
+
"name": "--mdc-textarea-text-secondary-normal"
|
23448
23558
|
},
|
23449
23559
|
{
|
23450
|
-
"description": "
|
23451
|
-
"name": "--mdc-
|
23560
|
+
"description": "Border color for the error related help text",
|
23561
|
+
"name": "--mdc-textarea-error-border-color"
|
23452
23562
|
},
|
23453
23563
|
{
|
23454
|
-
"description": "
|
23455
|
-
"name": "--mdc-
|
23564
|
+
"description": "Border color for the warning related help text",
|
23565
|
+
"name": "--mdc-textarea-warning-border-color"
|
23456
23566
|
},
|
23457
23567
|
{
|
23458
|
-
"description": "
|
23459
|
-
"name": "--mdc-
|
23568
|
+
"description": "Border color for the success related help text",
|
23569
|
+
"name": "--mdc-textarea-success-border-color"
|
23460
23570
|
},
|
23461
23571
|
{
|
23462
|
-
"description": "
|
23463
|
-
"name": "--mdc-
|
23572
|
+
"description": "Border color for the priority related help text",
|
23573
|
+
"name": "--mdc-textarea-primary-border-color"
|
23464
23574
|
},
|
23465
23575
|
{
|
23466
|
-
"description": "
|
23467
|
-
"name": "--mdc-
|
23576
|
+
"description": "Background color for the textarea container when hover",
|
23577
|
+
"name": "--mdc-textarea-hover-background-color"
|
23468
23578
|
},
|
23469
23579
|
{
|
23470
|
-
"description": "Background color for
|
23471
|
-
"name": "--mdc-
|
23580
|
+
"description": "Background color for the textarea container when focused",
|
23581
|
+
"name": "--mdc-textarea-focused-background-color"
|
23472
23582
|
},
|
23473
23583
|
{
|
23474
|
-
"description": "
|
23475
|
-
"name": "--mdc-
|
23476
|
-
}
|
23584
|
+
"description": "Border color for the textarea container when focused",
|
23585
|
+
"name": "--mdc-textarea-focused-border-color"
|
23586
|
+
}
|
23587
|
+
],
|
23588
|
+
"members": [
|
23477
23589
|
{
|
23478
|
-
"
|
23479
|
-
"name": "
|
23590
|
+
"kind": "field",
|
23591
|
+
"name": "placeholder",
|
23592
|
+
"type": {
|
23593
|
+
"text": "string | undefined"
|
23594
|
+
},
|
23595
|
+
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
23596
|
+
"attribute": "placeholder"
|
23480
23597
|
},
|
23481
23598
|
{
|
23482
|
-
"
|
23483
|
-
"name": "
|
23599
|
+
"kind": "field",
|
23600
|
+
"name": "readonly",
|
23601
|
+
"type": {
|
23602
|
+
"text": "boolean"
|
23603
|
+
},
|
23604
|
+
"default": "false",
|
23605
|
+
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
23606
|
+
"attribute": "readonly"
|
23484
23607
|
},
|
23485
23608
|
{
|
23486
|
-
"
|
23487
|
-
"name": "
|
23609
|
+
"kind": "field",
|
23610
|
+
"name": "rows",
|
23611
|
+
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
23612
|
+
"default": "5",
|
23613
|
+
"attribute": "rows"
|
23488
23614
|
},
|
23489
23615
|
{
|
23490
|
-
"
|
23491
|
-
"name": "
|
23616
|
+
"kind": "field",
|
23617
|
+
"name": "cols",
|
23618
|
+
"description": "The cols attribute specifies the visible number of lines in a text area.",
|
23619
|
+
"default": "40",
|
23620
|
+
"attribute": "cols"
|
23492
23621
|
},
|
23493
23622
|
{
|
23494
|
-
"
|
23495
|
-
"name": "
|
23623
|
+
"kind": "field",
|
23624
|
+
"name": "wrap",
|
23625
|
+
"type": {
|
23626
|
+
"text": "WrapType"
|
23627
|
+
},
|
23628
|
+
"description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
|
23629
|
+
"default": "'soft'",
|
23630
|
+
"attribute": "wrap"
|
23496
23631
|
},
|
23497
23632
|
{
|
23498
|
-
"
|
23499
|
-
"name": "
|
23633
|
+
"kind": "field",
|
23634
|
+
"name": "autocapitalize",
|
23635
|
+
"type": {
|
23636
|
+
"text": "AutoCapitalizeType"
|
23637
|
+
},
|
23638
|
+
"description": "The autocapitalize attribute of the textarea field.",
|
23639
|
+
"default": "'off'",
|
23640
|
+
"attribute": "autocapitalize"
|
23500
23641
|
},
|
23501
23642
|
{
|
23502
|
-
"
|
23503
|
-
"name": "
|
23643
|
+
"kind": "field",
|
23644
|
+
"name": "autocomplete",
|
23645
|
+
"type": {
|
23646
|
+
"text": "AutoCompleteType"
|
23647
|
+
},
|
23648
|
+
"description": "The autocomplete attribute of the textarea field.",
|
23649
|
+
"default": "'off'",
|
23650
|
+
"attribute": "autocomplete"
|
23504
23651
|
},
|
23505
23652
|
{
|
23506
|
-
"
|
23507
|
-
"name": "
|
23653
|
+
"kind": "field",
|
23654
|
+
"name": "autofocus",
|
23655
|
+
"type": {
|
23656
|
+
"text": "boolean"
|
23657
|
+
},
|
23658
|
+
"default": "false",
|
23659
|
+
"description": "If true, the textarea field is focused when the component is rendered.",
|
23660
|
+
"attribute": "autofocus"
|
23508
23661
|
},
|
23509
23662
|
{
|
23510
|
-
"
|
23511
|
-
"name": "
|
23663
|
+
"kind": "field",
|
23664
|
+
"name": "dirname",
|
23665
|
+
"type": {
|
23666
|
+
"text": "string | undefined"
|
23667
|
+
},
|
23668
|
+
"description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
|
23669
|
+
"attribute": "dirname"
|
23512
23670
|
},
|
23513
23671
|
{
|
23514
|
-
"
|
23515
|
-
"name": "
|
23672
|
+
"kind": "field",
|
23673
|
+
"name": "maxlength",
|
23674
|
+
"type": {
|
23675
|
+
"text": "number | undefined"
|
23676
|
+
},
|
23677
|
+
"description": "The maximum number of characters that the textarea field can accept.",
|
23678
|
+
"attribute": "maxlength"
|
23516
23679
|
},
|
23517
23680
|
{
|
23518
|
-
"
|
23519
|
-
"name": "
|
23681
|
+
"kind": "field",
|
23682
|
+
"name": "minlength",
|
23683
|
+
"type": {
|
23684
|
+
"text": "number | undefined"
|
23685
|
+
},
|
23686
|
+
"description": "The minimum number of characters that the textarea field can accept.",
|
23687
|
+
"attribute": "minlength"
|
23520
23688
|
},
|
23521
23689
|
{
|
23522
|
-
"
|
23523
|
-
"name": "
|
23690
|
+
"kind": "field",
|
23691
|
+
"name": "maxCharacterLimit",
|
23692
|
+
"type": {
|
23693
|
+
"text": "number | undefined"
|
23694
|
+
},
|
23695
|
+
"description": "maximum character limit for the textarea field for character counter.",
|
23696
|
+
"attribute": "max-character-limit"
|
23524
23697
|
},
|
23525
23698
|
{
|
23526
|
-
"
|
23527
|
-
"name": "
|
23528
|
-
|
23529
|
-
|
23530
|
-
|
23531
|
-
"
|
23532
|
-
|
23533
|
-
{
|
23534
|
-
"description": "Background color for inactive pill tab in disabled state.",
|
23535
|
-
"name": "--mdc-tab-pill-inactive-background-color-disabled"
|
23536
|
-
},
|
23537
|
-
{
|
23538
|
-
"description": "Background color for inactive pill tab in hover state.",
|
23539
|
-
"name": "--mdc-tab-pill-inactive-background-color-hover"
|
23540
|
-
},
|
23541
|
-
{
|
23542
|
-
"description": "Background color for inactive pill tab in rest state.",
|
23543
|
-
"name": "--mdc-tab-pill-inactive-background-color-normal"
|
23544
|
-
},
|
23545
|
-
{
|
23546
|
-
"description": "Text and icon color for inactive pill tab.",
|
23547
|
-
"name": "--mdc-tab-pill-inactive-color"
|
23548
|
-
},
|
23549
|
-
{
|
23550
|
-
"description": "Text and icon color for inactive pill tab in disabled state.",
|
23551
|
-
"name": "--mdc-tab-pill-inactive-color-disabled"
|
23552
|
-
}
|
23553
|
-
],
|
23554
|
-
"members": [
|
23555
|
-
{
|
23556
|
-
"kind": "field",
|
23557
|
-
"name": "active",
|
23558
|
-
"type": {
|
23559
|
-
"text": "boolean | undefined"
|
23560
|
-
},
|
23561
|
-
"description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
|
23562
|
-
"default": "false",
|
23563
|
-
"attribute": "active",
|
23564
|
-
"reflects": true,
|
23565
|
-
"inheritedFrom": {
|
23566
|
-
"name": "Buttonsimple",
|
23567
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
23568
|
-
}
|
23699
|
+
"kind": "field",
|
23700
|
+
"name": "characterLimitExceedingFired",
|
23701
|
+
"type": {
|
23702
|
+
"text": "boolean"
|
23703
|
+
},
|
23704
|
+
"privacy": "private",
|
23705
|
+
"default": "false"
|
23569
23706
|
},
|
23570
23707
|
{
|
23571
23708
|
"kind": "field",
|
23572
|
-
"name": "
|
23709
|
+
"name": "textarea",
|
23573
23710
|
"type": {
|
23574
|
-
"text": "
|
23711
|
+
"text": "HTMLTextAreaElement"
|
23575
23712
|
},
|
23576
|
-
"
|
23577
|
-
"
|
23578
|
-
"reflects": true
|
23713
|
+
"privacy": "protected",
|
23714
|
+
"readonly": true
|
23579
23715
|
},
|
23580
23716
|
{
|
23581
|
-
"kind": "
|
23582
|
-
"name": "
|
23583
|
-
"
|
23584
|
-
"text": "Variant"
|
23585
|
-
},
|
23586
|
-
"description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
|
23587
|
-
"default": "pill",
|
23588
|
-
"attribute": "variant",
|
23589
|
-
"reflects": true
|
23717
|
+
"kind": "method",
|
23718
|
+
"name": "setTextareaValidity",
|
23719
|
+
"privacy": "private"
|
23590
23720
|
},
|
23591
23721
|
{
|
23592
|
-
"kind": "
|
23593
|
-
"name": "
|
23594
|
-
"
|
23595
|
-
|
23596
|
-
|
23597
|
-
|
23598
|
-
|
23599
|
-
|
23600
|
-
"reflects": true
|
23722
|
+
"kind": "method",
|
23723
|
+
"name": "handleValueChange",
|
23724
|
+
"description": "Handles the value change of the textarea field.\nSets the form value and updates the validity of the textarea field.",
|
23725
|
+
"return": {
|
23726
|
+
"type": {
|
23727
|
+
"text": ""
|
23728
|
+
}
|
23729
|
+
}
|
23601
23730
|
},
|
23602
23731
|
{
|
23603
23732
|
"kind": "method",
|
23604
|
-
"name": "
|
23733
|
+
"name": "dispatchCharacterOverflowStateChangeEvent",
|
23605
23734
|
"privacy": "private",
|
23735
|
+
"description": "Dispatches the character overflow state change event.",
|
23606
23736
|
"return": {
|
23607
23737
|
"type": {
|
23608
|
-
"text": "
|
23609
|
-
}
|
23610
|
-
},
|
23611
|
-
"parameters": [
|
23612
|
-
{
|
23613
|
-
"name": "active",
|
23614
|
-
"type": {
|
23615
|
-
"text": "boolean"
|
23616
|
-
},
|
23617
|
-
"description": "The active state."
|
23738
|
+
"text": ""
|
23618
23739
|
}
|
23619
|
-
|
23620
|
-
"description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
23740
|
+
}
|
23621
23741
|
},
|
23622
23742
|
{
|
23623
23743
|
"kind": "method",
|
23624
|
-
"name": "
|
23744
|
+
"name": "handleCharacterOverflowStateChange",
|
23625
23745
|
"privacy": "private",
|
23746
|
+
"description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
|
23626
23747
|
"return": {
|
23627
23748
|
"type": {
|
23628
|
-
"text": "
|
23629
|
-
}
|
23630
|
-
},
|
23631
|
-
"parameters": [
|
23632
|
-
{
|
23633
|
-
"name": "variant",
|
23634
|
-
"type": {
|
23635
|
-
"text": "Variant"
|
23636
|
-
},
|
23637
|
-
"description": "The variant to set."
|
23749
|
+
"text": ""
|
23638
23750
|
}
|
23639
|
-
|
23640
|
-
"description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
23751
|
+
}
|
23641
23752
|
},
|
23642
23753
|
{
|
23643
|
-
"kind": "
|
23644
|
-
"name": "
|
23754
|
+
"kind": "method",
|
23755
|
+
"name": "updateValue",
|
23645
23756
|
"privacy": "private",
|
23646
|
-
"description": "
|
23647
|
-
"
|
23648
|
-
{
|
23649
|
-
"
|
23650
|
-
"name": "active"
|
23757
|
+
"description": "Updates the value of the textarea field.\nSets the form value.",
|
23758
|
+
"return": {
|
23759
|
+
"type": {
|
23760
|
+
"text": ""
|
23651
23761
|
}
|
23652
|
-
|
23762
|
+
}
|
23653
23763
|
},
|
23654
23764
|
{
|
23655
23765
|
"kind": "method",
|
23656
|
-
"name": "
|
23657
|
-
"privacy": "
|
23766
|
+
"name": "onChange",
|
23767
|
+
"privacy": "private",
|
23658
23768
|
"parameters": [
|
23659
23769
|
{
|
23660
|
-
"name": "
|
23661
|
-
"type": {
|
23662
|
-
"text": "HTMLElement"
|
23663
|
-
},
|
23664
|
-
"description": "The tab element."
|
23665
|
-
},
|
23666
|
-
{
|
23667
|
-
"name": "active",
|
23770
|
+
"name": "event",
|
23668
23771
|
"type": {
|
23669
|
-
"text": "
|
23772
|
+
"text": "Event"
|
23670
23773
|
},
|
23671
|
-
"description": "
|
23774
|
+
"description": "Event which contains information about the value change."
|
23672
23775
|
}
|
23673
23776
|
],
|
23674
|
-
"description": "
|
23675
|
-
"inheritedFrom": {
|
23676
|
-
"name": "Buttonsimple",
|
23677
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
23678
|
-
}
|
23777
|
+
"description": "Handles the change event of the textarea field.\nUpdates the value and sets the validity of the textarea field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
|
23679
23778
|
},
|
23680
23779
|
{
|
23681
23780
|
"kind": "method",
|
23682
|
-
"name": "
|
23683
|
-
"privacy": "protected"
|
23684
|
-
"inheritedFrom": {
|
23685
|
-
"name": "Buttonsimple",
|
23686
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
23687
|
-
}
|
23781
|
+
"name": "renderCharacterCounter",
|
23782
|
+
"privacy": "protected"
|
23688
23783
|
},
|
23689
23784
|
{
|
23690
|
-
"kind": "
|
23691
|
-
"name": "
|
23692
|
-
"
|
23693
|
-
"text": "IconNames | undefined"
|
23694
|
-
},
|
23695
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
23696
|
-
"attribute": "icon-name",
|
23697
|
-
"inheritedFrom": {
|
23698
|
-
"name": "IconNameMixin",
|
23699
|
-
"module": "utils/mixins/IconNameMixin.js"
|
23700
|
-
}
|
23785
|
+
"kind": "method",
|
23786
|
+
"name": "renderTextareaFooter",
|
23787
|
+
"privacy": "protected"
|
23701
23788
|
},
|
23702
23789
|
{
|
23703
23790
|
"kind": "field",
|
23704
|
-
"name": "
|
23791
|
+
"name": "name",
|
23705
23792
|
"type": {
|
23706
|
-
"text": "
|
23793
|
+
"text": "string"
|
23707
23794
|
},
|
23708
|
-
"default": "
|
23709
|
-
"description": "
|
23710
|
-
"attribute": "
|
23795
|
+
"default": "''",
|
23796
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
23797
|
+
"attribute": "name",
|
23711
23798
|
"reflects": true,
|
23712
23799
|
"inheritedFrom": {
|
23713
|
-
"name": "
|
23714
|
-
"module": "
|
23800
|
+
"name": "FormInternalsMixin",
|
23801
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23715
23802
|
}
|
23716
23803
|
},
|
23717
23804
|
{
|
23718
23805
|
"kind": "field",
|
23719
|
-
"name": "
|
23806
|
+
"name": "value",
|
23720
23807
|
"type": {
|
23721
|
-
"text": "
|
23808
|
+
"text": "string"
|
23722
23809
|
},
|
23723
|
-
"
|
23724
|
-
"
|
23725
|
-
"attribute": "
|
23810
|
+
"default": "''",
|
23811
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
23812
|
+
"attribute": "value",
|
23726
23813
|
"reflects": true,
|
23727
23814
|
"inheritedFrom": {
|
23728
|
-
"name": "
|
23729
|
-
"module": "
|
23815
|
+
"name": "FormInternalsMixin",
|
23816
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23730
23817
|
}
|
23731
23818
|
},
|
23732
23819
|
{
|
23733
23820
|
"kind": "field",
|
23734
|
-
"name": "
|
23821
|
+
"name": "validationMessage",
|
23735
23822
|
"type": {
|
23736
|
-
"text": "
|
23823
|
+
"text": "string | undefined"
|
23737
23824
|
},
|
23738
|
-
"description": "
|
23739
|
-
"
|
23740
|
-
"attribute": "soft-disabled",
|
23825
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.",
|
23826
|
+
"attribute": "validation-message",
|
23741
23827
|
"reflects": true,
|
23742
23828
|
"inheritedFrom": {
|
23743
|
-
"name": "
|
23744
|
-
"module": "
|
23829
|
+
"name": "FormInternalsMixin",
|
23830
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23745
23831
|
}
|
23746
23832
|
},
|
23747
23833
|
{
|
23748
23834
|
"kind": "field",
|
23749
|
-
"name": "
|
23835
|
+
"name": "validity",
|
23750
23836
|
"type": {
|
23751
|
-
"text": "
|
23837
|
+
"text": "ValidityState"
|
23752
23838
|
},
|
23753
|
-
"
|
23754
|
-
"default": "32",
|
23755
|
-
"attribute": "size",
|
23756
|
-
"reflects": true,
|
23839
|
+
"readonly": true,
|
23757
23840
|
"inheritedFrom": {
|
23758
|
-
"name": "
|
23759
|
-
"module": "
|
23841
|
+
"name": "FormInternalsMixin",
|
23842
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23760
23843
|
}
|
23761
23844
|
},
|
23762
23845
|
{
|
23763
23846
|
"kind": "field",
|
23764
|
-
"name": "
|
23765
|
-
"
|
23766
|
-
"default": "button",
|
23767
|
-
"attribute": "role",
|
23768
|
-
"reflects": true,
|
23847
|
+
"name": "willValidate",
|
23848
|
+
"readonly": true,
|
23769
23849
|
"inheritedFrom": {
|
23770
|
-
"name": "
|
23771
|
-
"module": "
|
23850
|
+
"name": "FormInternalsMixin",
|
23851
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23772
23852
|
}
|
23773
23853
|
},
|
23774
23854
|
{
|
23775
|
-
"kind": "
|
23776
|
-
"name": "
|
23777
|
-
"
|
23778
|
-
|
23855
|
+
"kind": "method",
|
23856
|
+
"name": "setValidity",
|
23857
|
+
"description": "Sets the validity of the input field based on the input field's validity.",
|
23858
|
+
"return": {
|
23859
|
+
"type": {
|
23860
|
+
"text": ""
|
23861
|
+
}
|
23779
23862
|
},
|
23780
|
-
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
23781
|
-
"default": "'aria-pressed' (when)",
|
23782
|
-
"attribute": "ariaStateKey",
|
23783
|
-
"reflects": true,
|
23784
23863
|
"inheritedFrom": {
|
23785
|
-
"name": "
|
23786
|
-
"module": "
|
23864
|
+
"name": "FormInternalsMixin",
|
23865
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23787
23866
|
}
|
23788
23867
|
},
|
23789
23868
|
{
|
23790
|
-
"kind": "
|
23791
|
-
"name": "
|
23792
|
-
"
|
23793
|
-
"
|
23869
|
+
"kind": "method",
|
23870
|
+
"name": "checkValidity",
|
23871
|
+
"return": {
|
23872
|
+
"type": {
|
23873
|
+
"text": "boolean"
|
23874
|
+
}
|
23794
23875
|
},
|
23795
|
-
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
23796
|
-
"default": "button",
|
23797
|
-
"attribute": "type",
|
23798
|
-
"reflects": true,
|
23799
23876
|
"inheritedFrom": {
|
23800
|
-
"name": "
|
23801
|
-
"module": "
|
23877
|
+
"name": "FormInternalsMixin",
|
23878
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23802
23879
|
}
|
23803
23880
|
},
|
23804
23881
|
{
|
23805
23882
|
"kind": "method",
|
23806
|
-
"name": "
|
23807
|
-
"privacy": "private",
|
23808
|
-
"parameters": [
|
23809
|
-
{
|
23810
|
-
"name": "element",
|
23811
|
-
"type": {
|
23812
|
-
"text": "HTMLElement"
|
23813
|
-
},
|
23814
|
-
"description": "The button element."
|
23815
|
-
},
|
23816
|
-
{
|
23817
|
-
"name": "softDisabled",
|
23818
|
-
"optional": true,
|
23819
|
-
"type": {
|
23820
|
-
"text": "boolean"
|
23821
|
-
},
|
23822
|
-
"description": "The soft-disabled state."
|
23823
|
-
}
|
23824
|
-
],
|
23825
|
-
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
23883
|
+
"name": "reportValidity",
|
23826
23884
|
"inheritedFrom": {
|
23827
|
-
"name": "
|
23828
|
-
"module": "
|
23885
|
+
"name": "FormInternalsMixin",
|
23886
|
+
"module": "utils/mixins/FormInternalsMixin.js"
|
23829
23887
|
}
|
23830
23888
|
},
|
23831
23889
|
{
|
23832
|
-
"kind": "
|
23833
|
-
"name": "
|
23834
|
-
"
|
23835
|
-
|
23836
|
-
|
23837
|
-
|
23838
|
-
|
23839
|
-
|
23840
|
-
|
23841
|
-
"description": "The button element."
|
23842
|
-
},
|
23843
|
-
{
|
23844
|
-
"name": "disabled",
|
23845
|
-
"type": {
|
23846
|
-
"text": "boolean"
|
23847
|
-
},
|
23848
|
-
"description": "The disabled state."
|
23849
|
-
}
|
23850
|
-
],
|
23851
|
-
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
23890
|
+
"kind": "field",
|
23891
|
+
"name": "dataAriaLabel",
|
23892
|
+
"type": {
|
23893
|
+
"text": "string | null"
|
23894
|
+
},
|
23895
|
+
"default": "null",
|
23896
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
23897
|
+
"attribute": "data-aria-label",
|
23898
|
+
"reflects": true,
|
23852
23899
|
"inheritedFrom": {
|
23853
|
-
"name": "
|
23854
|
-
"module": "
|
23900
|
+
"name": "DataAriaLabelMixin",
|
23901
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
23855
23902
|
}
|
23856
23903
|
},
|
23857
23904
|
{
|
23858
|
-
"kind": "
|
23859
|
-
"name": "
|
23860
|
-
"
|
23905
|
+
"kind": "field",
|
23906
|
+
"name": "disabled",
|
23907
|
+
"type": {
|
23908
|
+
"text": "boolean | undefined"
|
23909
|
+
},
|
23910
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
23911
|
+
"default": "undefined",
|
23912
|
+
"attribute": "disabled",
|
23913
|
+
"reflects": true,
|
23861
23914
|
"inheritedFrom": {
|
23862
|
-
"name": "
|
23863
|
-
"module": "components/
|
23915
|
+
"name": "FormfieldWrapper",
|
23916
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23864
23917
|
}
|
23865
23918
|
},
|
23866
23919
|
{
|
23867
|
-
"kind": "
|
23868
|
-
"name": "
|
23869
|
-
"
|
23870
|
-
|
23920
|
+
"kind": "field",
|
23921
|
+
"name": "label",
|
23922
|
+
"type": {
|
23923
|
+
"text": "string | undefined"
|
23924
|
+
},
|
23925
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
23926
|
+
"attribute": "label",
|
23927
|
+
"reflects": true,
|
23871
23928
|
"inheritedFrom": {
|
23872
|
-
"name": "
|
23873
|
-
"module": "components/
|
23929
|
+
"name": "FormfieldWrapper",
|
23930
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23874
23931
|
}
|
23875
23932
|
},
|
23876
23933
|
{
|
23877
|
-
"kind": "
|
23878
|
-
"name": "
|
23879
|
-
"
|
23880
|
-
|
23881
|
-
|
23882
|
-
|
23883
|
-
|
23884
|
-
|
23885
|
-
},
|
23886
|
-
"description": "The keyboard event."
|
23887
|
-
}
|
23888
|
-
],
|
23889
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
23934
|
+
"kind": "field",
|
23935
|
+
"name": "requiredLabel",
|
23936
|
+
"type": {
|
23937
|
+
"text": "string | undefined"
|
23938
|
+
},
|
23939
|
+
"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.",
|
23940
|
+
"attribute": "required-label",
|
23941
|
+
"reflects": true,
|
23890
23942
|
"inheritedFrom": {
|
23891
|
-
"name": "
|
23892
|
-
"module": "components/
|
23943
|
+
"name": "FormfieldWrapper",
|
23944
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23893
23945
|
}
|
23894
23946
|
},
|
23895
23947
|
{
|
23896
|
-
"kind": "
|
23897
|
-
"name": "
|
23898
|
-
"
|
23899
|
-
|
23900
|
-
|
23901
|
-
|
23902
|
-
|
23903
|
-
|
23904
|
-
},
|
23905
|
-
"description": "The keyboard event."
|
23906
|
-
}
|
23907
|
-
],
|
23908
|
-
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
23948
|
+
"kind": "field",
|
23949
|
+
"name": "id",
|
23950
|
+
"type": {
|
23951
|
+
"text": "string"
|
23952
|
+
},
|
23953
|
+
"default": "''",
|
23954
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
23955
|
+
"attribute": "id",
|
23909
23956
|
"inheritedFrom": {
|
23910
|
-
"name": "
|
23911
|
-
"module": "components/
|
23957
|
+
"name": "FormfieldWrapper",
|
23958
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23912
23959
|
}
|
23913
|
-
}
|
23914
|
-
],
|
23915
|
-
"events": [
|
23960
|
+
},
|
23916
23961
|
{
|
23917
|
-
"
|
23918
|
-
"name": "
|
23919
|
-
"
|
23962
|
+
"kind": "field",
|
23963
|
+
"name": "helpTextType",
|
23964
|
+
"type": {
|
23965
|
+
"text": "ValidationType"
|
23966
|
+
},
|
23967
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
23968
|
+
"attribute": "help-text-type",
|
23969
|
+
"reflects": true,
|
23920
23970
|
"inheritedFrom": {
|
23921
|
-
"name": "
|
23922
|
-
"module": "
|
23971
|
+
"name": "FormfieldWrapper",
|
23972
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23923
23973
|
}
|
23924
23974
|
},
|
23925
23975
|
{
|
23926
|
-
"
|
23927
|
-
"name": "
|
23928
|
-
"
|
23976
|
+
"kind": "field",
|
23977
|
+
"name": "helpText",
|
23978
|
+
"type": {
|
23979
|
+
"text": "string | undefined"
|
23980
|
+
},
|
23981
|
+
"description": "The help text that is displayed below the input field.",
|
23982
|
+
"attribute": "help-text",
|
23983
|
+
"reflects": true,
|
23929
23984
|
"inheritedFrom": {
|
23930
|
-
"name": "
|
23931
|
-
"module": "
|
23985
|
+
"name": "FormfieldWrapper",
|
23986
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23932
23987
|
}
|
23933
23988
|
},
|
23934
23989
|
{
|
23935
|
-
"
|
23936
|
-
"name": "
|
23937
|
-
"
|
23990
|
+
"kind": "method",
|
23991
|
+
"name": "renderLabelElement",
|
23992
|
+
"privacy": "protected",
|
23993
|
+
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
23994
|
+
"return": {
|
23995
|
+
"type": {
|
23996
|
+
"text": ""
|
23997
|
+
}
|
23998
|
+
},
|
23938
23999
|
"inheritedFrom": {
|
23939
|
-
"name": "
|
23940
|
-
"module": "
|
24000
|
+
"name": "FormfieldWrapper",
|
24001
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23941
24002
|
}
|
23942
24003
|
},
|
23943
24004
|
{
|
23944
|
-
"
|
23945
|
-
"name": "
|
23946
|
-
"
|
24005
|
+
"kind": "method",
|
24006
|
+
"name": "renderRequiredLabel",
|
24007
|
+
"privacy": "protected",
|
23947
24008
|
"inheritedFrom": {
|
23948
|
-
"name": "
|
23949
|
-
"module": "
|
24009
|
+
"name": "FormfieldWrapper",
|
24010
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23950
24011
|
}
|
23951
24012
|
},
|
23952
24013
|
{
|
23953
|
-
"
|
23954
|
-
"name": "
|
23955
|
-
"
|
23956
|
-
|
23957
|
-
|
23958
|
-
|
23959
|
-
|
23960
|
-
|
23961
|
-
"type": {
|
23962
|
-
"text": "boolean | undefined"
|
24014
|
+
"kind": "method",
|
24015
|
+
"name": "renderHelpTextIcon",
|
24016
|
+
"privacy": "protected",
|
24017
|
+
"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.",
|
24018
|
+
"return": {
|
24019
|
+
"type": {
|
24020
|
+
"text": ""
|
24021
|
+
}
|
23963
24022
|
},
|
23964
|
-
"description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
|
23965
|
-
"default": "false",
|
23966
|
-
"fieldName": "active",
|
23967
24023
|
"inheritedFrom": {
|
23968
|
-
"name": "
|
23969
|
-
"module": "
|
24024
|
+
"name": "FormfieldWrapper",
|
24025
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
23970
24026
|
}
|
23971
24027
|
},
|
23972
24028
|
{
|
23973
|
-
"
|
23974
|
-
"
|
23975
|
-
|
24029
|
+
"kind": "method",
|
24030
|
+
"name": "renderHelpText",
|
24031
|
+
"privacy": "protected",
|
24032
|
+
"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.",
|
24033
|
+
"return": {
|
24034
|
+
"type": {
|
24035
|
+
"text": ""
|
24036
|
+
}
|
23976
24037
|
},
|
23977
|
-
"
|
23978
|
-
|
23979
|
-
|
24038
|
+
"inheritedFrom": {
|
24039
|
+
"name": "FormfieldWrapper",
|
24040
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
24041
|
+
}
|
24042
|
+
},
|
23980
24043
|
{
|
23981
|
-
"
|
24044
|
+
"kind": "method",
|
24045
|
+
"name": "renderLabel",
|
24046
|
+
"privacy": "protected",
|
24047
|
+
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
24048
|
+
"return": {
|
24049
|
+
"type": {
|
24050
|
+
"text": ""
|
24051
|
+
}
|
24052
|
+
},
|
24053
|
+
"inheritedFrom": {
|
24054
|
+
"name": "FormfieldWrapper",
|
24055
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
24056
|
+
}
|
24057
|
+
},
|
24058
|
+
{
|
24059
|
+
"kind": "method",
|
24060
|
+
"name": "renderHelperText",
|
24061
|
+
"privacy": "protected",
|
24062
|
+
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
24063
|
+
"return": {
|
24064
|
+
"type": {
|
24065
|
+
"text": ""
|
24066
|
+
}
|
24067
|
+
},
|
24068
|
+
"inheritedFrom": {
|
24069
|
+
"name": "FormfieldWrapper",
|
24070
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
24071
|
+
}
|
24072
|
+
}
|
24073
|
+
],
|
24074
|
+
"events": [
|
24075
|
+
{
|
24076
|
+
"name": "limitexceeded",
|
23982
24077
|
"type": {
|
23983
|
-
"text": "
|
24078
|
+
"text": "CustomEvent"
|
23984
24079
|
},
|
23985
|
-
"description": "
|
23986
|
-
"
|
23987
|
-
"fieldName": "variant"
|
24080
|
+
"description": "(React: onLimitExceeded) This event is dispatched once when the character limit exceeds or restored.",
|
24081
|
+
"reactName": "onLimitExceeded"
|
23988
24082
|
},
|
23989
24083
|
{
|
23990
|
-
"
|
24084
|
+
"type": {
|
24085
|
+
"text": "EventConstructor"
|
24086
|
+
}
|
24087
|
+
},
|
24088
|
+
{
|
24089
|
+
"description": "(React: onInput) This event is dispatched when the value of the textarea field changes (every press).",
|
24090
|
+
"name": "input",
|
24091
|
+
"reactName": "onInput"
|
24092
|
+
},
|
24093
|
+
{
|
24094
|
+
"description": "(React: onChange) This event is dispatched when the value of the textarea field changes (on blur).",
|
24095
|
+
"name": "change",
|
24096
|
+
"reactName": "onChange"
|
24097
|
+
},
|
24098
|
+
{
|
24099
|
+
"description": "(React: onFocus) This event is dispatched when the textarea receives focus.",
|
24100
|
+
"name": "focus",
|
24101
|
+
"reactName": "onFocus"
|
24102
|
+
},
|
24103
|
+
{
|
24104
|
+
"description": "(React: onBlur) This event is dispatched when the textarea loses focus.",
|
24105
|
+
"name": "blur",
|
24106
|
+
"reactName": "onBlur"
|
24107
|
+
}
|
24108
|
+
],
|
24109
|
+
"attributes": [
|
24110
|
+
{
|
24111
|
+
"name": "placeholder",
|
23991
24112
|
"type": {
|
23992
24113
|
"text": "string | undefined"
|
23993
24114
|
},
|
23994
|
-
"description": "
|
23995
|
-
"
|
23996
|
-
"fieldName": "tabId"
|
24115
|
+
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
24116
|
+
"fieldName": "placeholder"
|
23997
24117
|
},
|
23998
24118
|
{
|
23999
|
-
"name": "
|
24119
|
+
"name": "readonly",
|
24000
24120
|
"type": {
|
24001
|
-
"text": "
|
24121
|
+
"text": "boolean"
|
24002
24122
|
},
|
24003
|
-
"
|
24004
|
-
"
|
24005
|
-
"
|
24006
|
-
"name": "IconNameMixin",
|
24007
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
24008
|
-
}
|
24123
|
+
"default": "false",
|
24124
|
+
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
24125
|
+
"fieldName": "readonly"
|
24009
24126
|
},
|
24010
24127
|
{
|
24011
|
-
"name": "
|
24128
|
+
"name": "rows",
|
24129
|
+
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
24130
|
+
"default": "5",
|
24131
|
+
"fieldName": "rows"
|
24132
|
+
},
|
24133
|
+
{
|
24134
|
+
"name": "cols",
|
24135
|
+
"description": "The cols attribute specifies the visible number of lines in a text area.",
|
24136
|
+
"default": "40",
|
24137
|
+
"fieldName": "cols"
|
24138
|
+
},
|
24139
|
+
{
|
24140
|
+
"name": "wrap",
|
24012
24141
|
"type": {
|
24013
|
-
"text": "
|
24142
|
+
"text": "WrapType"
|
24014
24143
|
},
|
24015
|
-
"
|
24016
|
-
"
|
24017
|
-
"fieldName": "
|
24018
|
-
"inheritedFrom": {
|
24019
|
-
"name": "Buttonsimple",
|
24020
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24021
|
-
}
|
24144
|
+
"description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
|
24145
|
+
"default": "'soft'",
|
24146
|
+
"fieldName": "wrap"
|
24022
24147
|
},
|
24023
24148
|
{
|
24024
|
-
"name": "
|
24149
|
+
"name": "autocapitalize",
|
24025
24150
|
"type": {
|
24026
|
-
"text": "
|
24151
|
+
"text": "AutoCapitalizeType"
|
24027
24152
|
},
|
24028
|
-
"description": "
|
24029
|
-
"default": "
|
24030
|
-
"fieldName": "
|
24031
|
-
"inheritedFrom": {
|
24032
|
-
"name": "Buttonsimple",
|
24033
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24034
|
-
}
|
24153
|
+
"description": "The autocapitalize attribute of the textarea field.",
|
24154
|
+
"default": "'off'",
|
24155
|
+
"fieldName": "autocapitalize"
|
24035
24156
|
},
|
24036
24157
|
{
|
24037
|
-
"name": "
|
24158
|
+
"name": "autocomplete",
|
24038
24159
|
"type": {
|
24039
|
-
"text": "
|
24160
|
+
"text": "AutoCompleteType"
|
24040
24161
|
},
|
24041
|
-
"description": "
|
24042
|
-
"default": "
|
24043
|
-
"fieldName": "
|
24044
|
-
"inheritedFrom": {
|
24045
|
-
"name": "Buttonsimple",
|
24046
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24047
|
-
}
|
24162
|
+
"description": "The autocomplete attribute of the textarea field.",
|
24163
|
+
"default": "'off'",
|
24164
|
+
"fieldName": "autocomplete"
|
24048
24165
|
},
|
24049
24166
|
{
|
24050
|
-
"name": "
|
24167
|
+
"name": "autofocus",
|
24051
24168
|
"type": {
|
24052
|
-
"text": "
|
24169
|
+
"text": "boolean"
|
24053
24170
|
},
|
24054
|
-
"
|
24055
|
-
"
|
24056
|
-
"fieldName": "
|
24171
|
+
"default": "false",
|
24172
|
+
"description": "If true, the textarea field is focused when the component is rendered.",
|
24173
|
+
"fieldName": "autofocus"
|
24174
|
+
},
|
24175
|
+
{
|
24176
|
+
"name": "dirname",
|
24177
|
+
"type": {
|
24178
|
+
"text": "string | undefined"
|
24179
|
+
},
|
24180
|
+
"description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
|
24181
|
+
"fieldName": "dirname"
|
24182
|
+
},
|
24183
|
+
{
|
24184
|
+
"name": "maxlength",
|
24185
|
+
"type": {
|
24186
|
+
"text": "number | undefined"
|
24187
|
+
},
|
24188
|
+
"description": "The maximum number of characters that the textarea field can accept.",
|
24189
|
+
"fieldName": "maxlength"
|
24190
|
+
},
|
24191
|
+
{
|
24192
|
+
"name": "minlength",
|
24193
|
+
"type": {
|
24194
|
+
"text": "number | undefined"
|
24195
|
+
},
|
24196
|
+
"description": "The minimum number of characters that the textarea field can accept.",
|
24197
|
+
"fieldName": "minlength"
|
24198
|
+
},
|
24199
|
+
{
|
24200
|
+
"name": "max-character-limit",
|
24201
|
+
"type": {
|
24202
|
+
"text": "number | undefined"
|
24203
|
+
},
|
24204
|
+
"description": "maximum character limit for the textarea field for character counter.",
|
24205
|
+
"fieldName": "maxCharacterLimit"
|
24206
|
+
},
|
24207
|
+
{
|
24208
|
+
"name": "name",
|
24209
|
+
"type": {
|
24210
|
+
"text": "string"
|
24211
|
+
},
|
24212
|
+
"default": "''",
|
24213
|
+
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
24214
|
+
"fieldName": "name",
|
24057
24215
|
"inheritedFrom": {
|
24058
|
-
"name": "
|
24059
|
-
"module": "src/
|
24216
|
+
"name": "FormInternalsMixin",
|
24217
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
24060
24218
|
}
|
24061
24219
|
},
|
24062
24220
|
{
|
24063
|
-
"name": "
|
24064
|
-
"
|
24065
|
-
|
24066
|
-
|
24221
|
+
"name": "value",
|
24222
|
+
"type": {
|
24223
|
+
"text": "string"
|
24224
|
+
},
|
24225
|
+
"default": "''",
|
24226
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
24227
|
+
"fieldName": "value",
|
24067
24228
|
"inheritedFrom": {
|
24068
|
-
"name": "
|
24069
|
-
"module": "src/
|
24229
|
+
"name": "FormInternalsMixin",
|
24230
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
24070
24231
|
}
|
24071
24232
|
},
|
24072
24233
|
{
|
24073
|
-
"name": "
|
24234
|
+
"name": "validation-message",
|
24074
24235
|
"type": {
|
24075
24236
|
"text": "string | undefined"
|
24076
24237
|
},
|
24077
|
-
"description": "
|
24078
|
-
"
|
24079
|
-
"fieldName": "ariaStateKey",
|
24238
|
+
"description": "Custom validation message that will override the default message and displayed when the input is invalid.",
|
24239
|
+
"fieldName": "validationMessage",
|
24080
24240
|
"inheritedFrom": {
|
24081
|
-
"name": "
|
24082
|
-
"module": "src/
|
24241
|
+
"name": "FormInternalsMixin",
|
24242
|
+
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
24083
24243
|
}
|
24084
24244
|
},
|
24085
24245
|
{
|
24086
|
-
"name": "
|
24246
|
+
"name": "data-aria-label",
|
24087
24247
|
"type": {
|
24088
|
-
"text": "
|
24248
|
+
"text": "string | null"
|
24089
24249
|
},
|
24090
|
-
"
|
24091
|
-
"
|
24092
|
-
"fieldName": "
|
24250
|
+
"default": "null",
|
24251
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
24252
|
+
"fieldName": "dataAriaLabel",
|
24093
24253
|
"inheritedFrom": {
|
24094
|
-
"name": "
|
24095
|
-
"module": "src/
|
24254
|
+
"name": "DataAriaLabelMixin",
|
24255
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
24096
24256
|
}
|
24097
|
-
}
|
24098
|
-
],
|
24099
|
-
"mixins": [
|
24100
|
-
{
|
24101
|
-
"name": "IconNameMixin",
|
24102
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
24103
|
-
}
|
24104
|
-
],
|
24105
|
-
"superclass": {
|
24106
|
-
"name": "Buttonsimple",
|
24107
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
24108
|
-
},
|
24109
|
-
"tagName": "mdc-tab",
|
24110
|
-
"jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
|
24111
|
-
"customElement": true
|
24112
|
-
}
|
24113
|
-
],
|
24114
|
-
"exports": [
|
24115
|
-
{
|
24116
|
-
"kind": "js",
|
24117
|
-
"name": "default",
|
24118
|
-
"declaration": {
|
24119
|
-
"name": "Tab",
|
24120
|
-
"module": "components/tab/tab.component.js"
|
24121
|
-
}
|
24122
|
-
}
|
24123
|
-
]
|
24124
|
-
},
|
24125
|
-
{
|
24126
|
-
"kind": "javascript-module",
|
24127
|
-
"path": "components/tablist/tablist.component.js",
|
24128
|
-
"declarations": [
|
24129
|
-
{
|
24130
|
-
"kind": "class",
|
24131
|
-
"description": "Tab list organizes tabs into a container.\n\nChildren of the tab list are `mdc-tab` elements, sent to the default slot.\n\nThe tabs can be navigated using the left/right arrow keys, and selected by clicking,\n or pressing the Enter and Space keys.\n\n**Implicit accessibility rules**\n\n- The element that serves as the container for the set of tabs has role `tablist`.\n- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n- The active tab element has the state `aria-selected` set to `true`\n and all other tab elements have it set to `false`.\n\n\n**Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n\n- Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n- The `tablist` element needs to have a label provided by `data-aria-label`.\n- Each element with role `tab` has the property `aria-controls`\n that should refer to its associated `tabpanel` element.\n- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n- If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.",
|
24132
|
-
"name": "TabList",
|
24133
|
-
"cssProperties": [
|
24134
|
-
{
|
24135
|
-
"description": "Gap between tabs",
|
24136
|
-
"name": "--mdc-tablist-gap"
|
24137
|
-
},
|
24138
|
-
{
|
24139
|
-
"description": "Width of the tablist",
|
24140
|
-
"name": "--mdc-tablist-width"
|
24141
24257
|
},
|
24142
24258
|
{
|
24143
|
-
"
|
24144
|
-
"name": "--mdc-tablist-arrow-button-margin"
|
24145
|
-
}
|
24146
|
-
],
|
24147
|
-
"slots": [
|
24148
|
-
{
|
24149
|
-
"description": "slot for mdc-tab elements.",
|
24150
|
-
"name": "Default"
|
24151
|
-
}
|
24152
|
-
],
|
24153
|
-
"members": [
|
24154
|
-
{
|
24155
|
-
"kind": "field",
|
24156
|
-
"name": "activeTabId",
|
24259
|
+
"name": "disabled",
|
24157
24260
|
"type": {
|
24158
|
-
"text": "
|
24261
|
+
"text": "boolean | undefined"
|
24159
24262
|
},
|
24160
|
-
"description": "
|
24161
|
-
"
|
24162
|
-
"
|
24263
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
24264
|
+
"default": "undefined",
|
24265
|
+
"fieldName": "disabled",
|
24266
|
+
"inheritedFrom": {
|
24267
|
+
"name": "FormfieldWrapper",
|
24268
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
24269
|
+
}
|
24163
24270
|
},
|
24164
24271
|
{
|
24165
|
-
"
|
24166
|
-
"name": "dataAriaLabel",
|
24272
|
+
"name": "label",
|
24167
24273
|
"type": {
|
24168
24274
|
"text": "string | undefined"
|
24169
24275
|
},
|
24170
|
-
"description": "
|
24171
|
-
"
|
24172
|
-
|
24173
|
-
|
24174
|
-
|
24175
|
-
|
24176
|
-
|
24177
|
-
"name": "change",
|
24178
|
-
"reactName": "onChange"
|
24179
|
-
}
|
24180
|
-
],
|
24181
|
-
"attributes": [
|
24276
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
24277
|
+
"fieldName": "label",
|
24278
|
+
"inheritedFrom": {
|
24279
|
+
"name": "FormfieldWrapper",
|
24280
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
24281
|
+
}
|
24282
|
+
},
|
24182
24283
|
{
|
24183
|
-
"name": "
|
24284
|
+
"name": "required-label",
|
24184
24285
|
"type": {
|
24185
24286
|
"text": "string | undefined"
|
24186
24287
|
},
|
24187
|
-
"description": "
|
24188
|
-
"fieldName": "
|
24288
|
+
"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.",
|
24289
|
+
"fieldName": "requiredLabel",
|
24290
|
+
"inheritedFrom": {
|
24291
|
+
"name": "FormfieldWrapper",
|
24292
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
24293
|
+
}
|
24189
24294
|
},
|
24190
24295
|
{
|
24191
|
-
"name": "
|
24296
|
+
"name": "id",
|
24192
24297
|
"type": {
|
24193
|
-
"text": "string
|
24298
|
+
"text": "string"
|
24194
24299
|
},
|
24195
|
-
"
|
24196
|
-
"
|
24197
|
-
|
24198
|
-
|
24199
|
-
|
24200
|
-
|
24201
|
-
|
24202
|
-
|
24203
|
-
"tagName": "mdc-tablist",
|
24204
|
-
"jsDoc": "/**\n * Tab list organizes tabs into a container.\n *\n * Children of the tab list are `mdc-tab` elements, sent to the default slot.\n *\n * The tabs can be navigated using the left/right arrow keys, and selected by clicking,\n * or pressing the Enter and Space keys.\n *\n * **Implicit accessibility rules**\n *\n * - The element that serves as the container for the set of tabs has role `tablist`.\n * - Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`.\n * - The active tab element has the state `aria-selected` set to `true`\n * and all other tab elements have it set to `false`.\n *\n *\n * **Accessibility notes for consuming (have to be explicitly set when you consume the component)**\n *\n * - Each element that contains the `content panel` for a `tab` has role `tabpanel`.\n * - The `tablist` element needs to have a label provided by `data-aria-label`.\n * - Each element with role `tab` has the property `aria-controls`\n * that should refer to its associated `tabpanel` element.\n * - Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element.\n * - If a `tab` element has a popup menu, it needs to have the property `aria-haspopup` set to either `menu` or `true`.\n *\n * @tagname mdc-tablist\n *\n * @dependency mdc-tab\n * @dependency mdc-button\n *\n * @event change - (React: onChange) This event is dispatched when the tab is selected.\n * Event that fires when user changes the active tab.\n * The function sent as the argument will receive the fired event\n * and the new tab id can be fetched from event.detail.tabId.\n *\n * `(event: CustomEvent) => handleTabChange(event.detail.tabId);`\n *\n * @slot Default slot for mdc-tab elements.\n *\n * @cssproperty --mdc-tablist-gap - Gap between tabs\n * @cssproperty --mdc-tablist-width - Width of the tablist\n * @cssproperty --mdc-tablist-arrow-button-margin - Margin value for the arrow button\n */",
|
24205
|
-
"customElement": true
|
24206
|
-
}
|
24207
|
-
],
|
24208
|
-
"exports": [
|
24209
|
-
{
|
24210
|
-
"kind": "js",
|
24211
|
-
"name": "default",
|
24212
|
-
"declaration": {
|
24213
|
-
"name": "TabList",
|
24214
|
-
"module": "components/tablist/tablist.component.js"
|
24215
|
-
}
|
24216
|
-
}
|
24217
|
-
]
|
24218
|
-
},
|
24219
|
-
{
|
24220
|
-
"kind": "javascript-module",
|
24221
|
-
"path": "components/text/text.component.js",
|
24222
|
-
"declarations": [
|
24223
|
-
{
|
24224
|
-
"kind": "class",
|
24225
|
-
"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.",
|
24226
|
-
"name": "Text",
|
24227
|
-
"cssParts": [
|
24228
|
-
{
|
24229
|
-
"description": "The text element",
|
24230
|
-
"name": "text"
|
24231
|
-
}
|
24232
|
-
],
|
24233
|
-
"slots": [
|
24234
|
-
{
|
24235
|
-
"description": "Default slot for text content",
|
24236
|
-
"name": ""
|
24237
|
-
}
|
24238
|
-
],
|
24239
|
-
"members": [
|
24300
|
+
"default": "''",
|
24301
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
24302
|
+
"fieldName": "id",
|
24303
|
+
"inheritedFrom": {
|
24304
|
+
"name": "FormfieldWrapper",
|
24305
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
24306
|
+
}
|
24307
|
+
},
|
24240
24308
|
{
|
24241
|
-
"
|
24242
|
-
"name": "type",
|
24309
|
+
"name": "help-text-type",
|
24243
24310
|
"type": {
|
24244
|
-
"text": "
|
24311
|
+
"text": "ValidationType"
|
24245
24312
|
},
|
24246
|
-
"
|
24247
|
-
"
|
24248
|
-
"
|
24249
|
-
|
24250
|
-
|
24313
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
24314
|
+
"fieldName": "helpTextType",
|
24315
|
+
"inheritedFrom": {
|
24316
|
+
"name": "FormfieldWrapper",
|
24317
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
24318
|
+
}
|
24251
24319
|
},
|
24252
24320
|
{
|
24253
|
-
"
|
24254
|
-
"name": "tagname",
|
24321
|
+
"name": "help-text",
|
24255
24322
|
"type": {
|
24256
|
-
"text": "
|
24323
|
+
"text": "string | undefined"
|
24257
24324
|
},
|
24258
|
-
"
|
24259
|
-
"
|
24260
|
-
"
|
24261
|
-
|
24325
|
+
"description": "The help text that is displayed below the input field.",
|
24326
|
+
"fieldName": "helpText",
|
24327
|
+
"inheritedFrom": {
|
24328
|
+
"name": "FormfieldWrapper",
|
24329
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
24330
|
+
}
|
24262
24331
|
}
|
24263
24332
|
],
|
24264
|
-
"
|
24333
|
+
"mixins": [
|
24265
24334
|
{
|
24266
|
-
"name": "
|
24267
|
-
"
|
24268
|
-
"text": "TextType"
|
24269
|
-
},
|
24270
|
-
"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'",
|
24271
|
-
"default": "body-large-regular",
|
24272
|
-
"fieldName": "type"
|
24335
|
+
"name": "FormInternalsMixin",
|
24336
|
+
"module": "/src/utils/mixins/FormInternalsMixin"
|
24273
24337
|
},
|
24274
24338
|
{
|
24275
|
-
"name": "
|
24276
|
-
"
|
24277
|
-
"text": "TagName | undefined"
|
24278
|
-
},
|
24279
|
-
"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.",
|
24280
|
-
"fieldName": "tagname"
|
24339
|
+
"name": "DataAriaLabelMixin",
|
24340
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
24281
24341
|
}
|
24282
24342
|
],
|
24283
24343
|
"superclass": {
|
24284
|
-
"name": "
|
24285
|
-
"module": "/src/
|
24344
|
+
"name": "FormfieldWrapper",
|
24345
|
+
"module": "/src/components/formfieldwrapper"
|
24286
24346
|
},
|
24287
|
-
"tagName": "mdc-
|
24288
|
-
"jsDoc": "/**\n *
|
24289
|
-
"customElement": true
|
24347
|
+
"tagName": "mdc-textarea",
|
24348
|
+
"jsDoc": "/**\n * mdc-textarea component, which is used to get the multi-line text input from the user.\n * It contains:\n * - label: It is the title of the textarea field.\n * - required-label: A string depicting that the textarea field is required.\n * - Textarea: It is the multi-line text input field.\n * - helper-text: It is the text that provides additional information about the textarea field.\n * - max-character-limit: It is the text that shows the character count of the textarea field.\n * - Error, Warning, Success, Priority Help Text type: It is the text that provides additional information\n * about the textarea field based on the validation state.\n * - limitexceeded: It is the event that is dispatched when the character limit exceeds or restored.\n * This event exposes 3 properties:\n * - currentCharacterCount - the current number of characters in the textarea field,\n * - maxCharacterLimit - the maximum number of characters allowed in the textarea field,\n * - value - the current value of the textarea field,\n *\n * **Note**: Consumers must set the help-text-type with 'error' and\n * help-text attribute with the error message using limitexceeded event.\n * The same help-text value will be used for the validation message to be displayed.\n *\n * @tagname mdc-textarea\n *\n * @event input - (React: onInput) This event is dispatched when the value of the textarea field changes (every press).\n * @event change - (React: onChange) This event is dispatched when the value of the textarea field changes (on blur).\n * @event focus - (React: onFocus) This event is dispatched when the textarea receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the textarea loses focus.\n * @event limitexceeded - (React: onLimitExceeded) This event is dispatched once when the character limit\n * exceeds or restored.\n *\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n * @dependency mdc-button\n *\n * @cssproperty --mdc-textarea-disabled-border-color - Border color for the textarea container when disabled\n * @cssproperty --mdc-textarea-disabled-text-color - Text color for the textarea field when disabled\n * @cssproperty --mdc-textarea-disabled-background-color - Background color for the textarea field when disabled\n * @cssproperty --mdc-textarea-text-color - Text color for the textarea field\n * @cssproperty --mdc-textarea-background-color - Background color for the textarea field\n * @cssproperty --mdc-textarea-border-color - Border color for the textarea field\n * @cssproperty --mdc-textarea-text-secondary-normal - Text color for the character counter\n * @cssproperty --mdc-textarea-error-border-color - Border color for the error related help text\n * @cssproperty --mdc-textarea-warning-border-color - Border color for the warning related help text\n * @cssproperty --mdc-textarea-success-border-color - Border color for the success related help text\n * @cssproperty --mdc-textarea-primary-border-color - Border color for the priority related help text\n * @cssproperty --mdc-textarea-hover-background-color - Background color for the textarea container when hover\n * @cssproperty --mdc-textarea-focused-background-color - Background color for the textarea container when focused\n * @cssproperty --mdc-textarea-focused-border-color - Border color for the textarea container when focused\n */",
|
24349
|
+
"customElement": true,
|
24350
|
+
"slots": [
|
24351
|
+
{
|
24352
|
+
"description": "slot to add the label info icon",
|
24353
|
+
"name": "label-info",
|
24354
|
+
"inheritedFrom": {
|
24355
|
+
"name": "FormfieldWrapper",
|
24356
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
24357
|
+
}
|
24358
|
+
}
|
24359
|
+
]
|
24290
24360
|
}
|
24291
24361
|
],
|
24292
24362
|
"exports": [
|
@@ -24294,392 +24364,383 @@
|
|
24294
24364
|
"kind": "js",
|
24295
24365
|
"name": "default",
|
24296
24366
|
"declaration": {
|
24297
|
-
"name": "
|
24298
|
-
"module": "components/
|
24367
|
+
"name": "Textarea",
|
24368
|
+
"module": "components/textarea/textarea.component.js"
|
24299
24369
|
}
|
24300
24370
|
}
|
24301
24371
|
]
|
24302
24372
|
},
|
24303
24373
|
{
|
24304
24374
|
"kind": "javascript-module",
|
24305
|
-
"path": "components/
|
24375
|
+
"path": "components/tab/tab.component.js",
|
24306
24376
|
"declarations": [
|
24307
24377
|
{
|
24308
24378
|
"kind": "class",
|
24309
|
-
"description": "mdc-
|
24310
|
-
"name": "
|
24379
|
+
"description": "`mdc-tab` is Tab component to be used within the Tabgroup.\n\nPassing in the attribute `text` to the tab component is changing the text displayed in the tab.\n\nPass attribute `tabid` when using inside of `tablist` component.\n\nThe `slot=\"badge\"` can be used to add a badge to the tab.\n\nThe `slot=\"chip\"` can be used to add a chip to the tab.\n\nFor `icon`, the `mdc-icon` component is used to render the icon.\n\nNote: Icons can be used in conjunction with badges or chips.\nBadges and chips should not be used at the same time.",
|
24380
|
+
"name": "Tab",
|
24311
24381
|
"cssProperties": [
|
24312
24382
|
{
|
24313
|
-
"description": "
|
24314
|
-
"name": "--mdc-
|
24383
|
+
"description": "Gap between the badge(if provided), icon and text.",
|
24384
|
+
"name": "--mdc-tab-content-gap"
|
24315
24385
|
},
|
24316
24386
|
{
|
24317
|
-
"description": "
|
24318
|
-
"name": "--mdc-
|
24387
|
+
"description": "Height of the tab.",
|
24388
|
+
"name": "--mdc-tab-height"
|
24319
24389
|
},
|
24320
24390
|
{
|
24321
|
-
"description": "Background color for
|
24322
|
-
"name": "--mdc-
|
24391
|
+
"description": "Background color for active glass tab in disabled state.",
|
24392
|
+
"name": "--mdc-tab-glass-active-background-color-disabled"
|
24323
24393
|
},
|
24324
24394
|
{
|
24325
|
-
"description": "
|
24326
|
-
"name": "--mdc-
|
24395
|
+
"description": "Background color for active glass tab in hover state.",
|
24396
|
+
"name": "--mdc-tab-glass-active-background-color-hover"
|
24327
24397
|
},
|
24328
24398
|
{
|
24329
|
-
"description": "Background color for
|
24330
|
-
"name": "--mdc-
|
24399
|
+
"description": "Background color for active glass tab in rest state.",
|
24400
|
+
"name": "--mdc-tab-glass-active-background-color-normal"
|
24331
24401
|
},
|
24332
24402
|
{
|
24333
|
-
"description": "
|
24334
|
-
"name": "--mdc-
|
24403
|
+
"description": "Background color for active glass tab in pressed state.",
|
24404
|
+
"name": "--mdc-tab-glass-active-background-color-pressed"
|
24335
24405
|
},
|
24336
24406
|
{
|
24337
|
-
"description": "Text color for
|
24338
|
-
"name": "--mdc-
|
24407
|
+
"description": "Text and icon color for active glass tab.",
|
24408
|
+
"name": "--mdc-tab-glass-active-color"
|
24339
24409
|
},
|
24340
24410
|
{
|
24341
|
-
"description": "
|
24342
|
-
"name": "--mdc-
|
24411
|
+
"description": "Text and icon color for active glass tab in disabled state.",
|
24412
|
+
"name": "--mdc-tab-glass-active-color-disabled"
|
24343
24413
|
},
|
24344
24414
|
{
|
24345
|
-
"description": "Border
|
24346
|
-
"name": "--mdc-
|
24415
|
+
"description": "Border radius for glass tab.",
|
24416
|
+
"name": "--mdc-tab-glass-border-radius"
|
24347
24417
|
},
|
24348
24418
|
{
|
24349
|
-
"description": "
|
24350
|
-
"name": "--mdc-
|
24419
|
+
"description": "Background color for inactive glass tab in disabled state.",
|
24420
|
+
"name": "--mdc-tab-glass-inactive-background-color-disabled"
|
24351
24421
|
},
|
24352
24422
|
{
|
24353
|
-
"description": "
|
24354
|
-
"name": "--mdc-
|
24423
|
+
"description": "Background color for inactive glass tab in hover state.",
|
24424
|
+
"name": "--mdc-tab-glass-inactive-background-color-hover"
|
24355
24425
|
},
|
24356
24426
|
{
|
24357
|
-
"description": "Background color for
|
24358
|
-
"name": "--mdc-
|
24427
|
+
"description": "Background color for inactive glass tab in rest state.",
|
24428
|
+
"name": "--mdc-tab-glass-inactive-background-color-normal"
|
24359
24429
|
},
|
24360
24430
|
{
|
24361
|
-
"description": "Background color for
|
24362
|
-
"name": "--mdc-
|
24431
|
+
"description": "Background color for inactive glass tab in pressed state.",
|
24432
|
+
"name": "--mdc-tab-glass-inactive-background-color-pressed"
|
24363
24433
|
},
|
24364
24434
|
{
|
24365
|
-
"description": "
|
24366
|
-
"name": "--mdc-
|
24367
|
-
}
|
24368
|
-
],
|
24369
|
-
"members": [
|
24435
|
+
"description": "Text and icon color for inactive glass tab.",
|
24436
|
+
"name": "--mdc-tab-glass-inactive-color"
|
24437
|
+
},
|
24370
24438
|
{
|
24371
|
-
"
|
24372
|
-
"name": "
|
24373
|
-
"type": {
|
24374
|
-
"text": "string | undefined"
|
24375
|
-
},
|
24376
|
-
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
24377
|
-
"attribute": "placeholder"
|
24439
|
+
"description": "Text and icon color for inactive glass tab in disabled state.",
|
24440
|
+
"name": "--mdc-tab-glass-inactive-color-disabled"
|
24378
24441
|
},
|
24379
24442
|
{
|
24380
|
-
"
|
24381
|
-
"name": "
|
24382
|
-
"type": {
|
24383
|
-
"text": "boolean"
|
24384
|
-
},
|
24385
|
-
"default": "false",
|
24386
|
-
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
24387
|
-
"attribute": "readonly"
|
24443
|
+
"description": "Background color for active line tab in pressed state.",
|
24444
|
+
"name": "--mdc-tab-line-active-background-color-pressed"
|
24388
24445
|
},
|
24389
24446
|
{
|
24390
|
-
"
|
24391
|
-
"name": "
|
24392
|
-
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
24393
|
-
"default": "5",
|
24394
|
-
"attribute": "rows"
|
24447
|
+
"description": "Background color for active line tab in disabled state.",
|
24448
|
+
"name": "--mdc-tab-line-active-background-color-disabled"
|
24395
24449
|
},
|
24396
24450
|
{
|
24397
|
-
"
|
24398
|
-
"name": "
|
24399
|
-
"description": "The cols attribute specifies the visible number of lines in a text area.",
|
24400
|
-
"default": "40",
|
24401
|
-
"attribute": "cols"
|
24451
|
+
"description": "Background color for active line tab in hover state.",
|
24452
|
+
"name": "--mdc-tab-line-active-background-color-hover"
|
24402
24453
|
},
|
24403
24454
|
{
|
24404
|
-
"
|
24405
|
-
"name": "
|
24406
|
-
"type": {
|
24407
|
-
"text": "WrapType"
|
24408
|
-
},
|
24409
|
-
"description": "The wrap attribute specifies how the text in a text area is to be wrapped when submitted in a form.",
|
24410
|
-
"default": "'soft'",
|
24411
|
-
"attribute": "wrap"
|
24455
|
+
"description": "Background color for active line tab in rest state.",
|
24456
|
+
"name": "--mdc-tab-line-active-background-color-normal"
|
24412
24457
|
},
|
24413
24458
|
{
|
24414
|
-
"
|
24415
|
-
"name": "
|
24416
|
-
"type": {
|
24417
|
-
"text": "AutoCapitalizeType"
|
24418
|
-
},
|
24419
|
-
"description": "The autocapitalize attribute of the textarea field.",
|
24420
|
-
"default": "'off'",
|
24421
|
-
"attribute": "autocapitalize"
|
24459
|
+
"description": "Text and icon color for active line tab.",
|
24460
|
+
"name": "--mdc-tab-line-active-color"
|
24422
24461
|
},
|
24423
24462
|
{
|
24424
|
-
"
|
24425
|
-
"name": "
|
24426
|
-
"type": {
|
24427
|
-
"text": "AutoCompleteType"
|
24428
|
-
},
|
24429
|
-
"description": "The autocomplete attribute of the textarea field.",
|
24430
|
-
"default": "'off'",
|
24431
|
-
"attribute": "autocomplete"
|
24463
|
+
"description": "Text and icon color for active line tab in disabled state.",
|
24464
|
+
"name": "--mdc-tab-line-active-color-disabled"
|
24432
24465
|
},
|
24433
24466
|
{
|
24434
|
-
"
|
24435
|
-
"name": "
|
24436
|
-
"type": {
|
24437
|
-
"text": "boolean"
|
24438
|
-
},
|
24439
|
-
"default": "false",
|
24440
|
-
"description": "If true, the textarea field is focused when the component is rendered.",
|
24441
|
-
"attribute": "autofocus"
|
24467
|
+
"description": "color for indicator in active line tab.",
|
24468
|
+
"name": "--mdc-tab-line-active-indicator-color"
|
24442
24469
|
},
|
24443
24470
|
{
|
24444
|
-
"
|
24445
|
-
"name": "
|
24446
|
-
"type": {
|
24447
|
-
"text": "string | undefined"
|
24448
|
-
},
|
24449
|
-
"description": "Specifies the name of the directionality of text for submission purposes (e.g., \"rtl\" for right-to-left).",
|
24450
|
-
"attribute": "dirname"
|
24471
|
+
"description": "Color for indicator in active line tab in disabled state.",
|
24472
|
+
"name": "--mdc-tab-line-active-indicator-color-disabled"
|
24451
24473
|
},
|
24452
24474
|
{
|
24453
|
-
"
|
24454
|
-
"name": "
|
24455
|
-
"type": {
|
24456
|
-
"text": "number | undefined"
|
24457
|
-
},
|
24458
|
-
"description": "The maximum number of characters that the textarea field can accept.",
|
24459
|
-
"attribute": "maxlength"
|
24475
|
+
"description": "Height for indicator in active line tab.",
|
24476
|
+
"name": "--mdc-tab-line-active-indicator-height"
|
24460
24477
|
},
|
24461
24478
|
{
|
24462
|
-
"
|
24463
|
-
"name": "
|
24464
|
-
"type": {
|
24465
|
-
"text": "number | undefined"
|
24466
|
-
},
|
24467
|
-
"description": "The minimum number of characters that the textarea field can accept.",
|
24468
|
-
"attribute": "minlength"
|
24479
|
+
"description": "Width for indicator in active line tab.",
|
24480
|
+
"name": "--mdc-tab-line-active-indicator-width"
|
24469
24481
|
},
|
24470
24482
|
{
|
24471
|
-
"
|
24472
|
-
"name": "
|
24473
|
-
"type": {
|
24474
|
-
"text": "number | undefined"
|
24475
|
-
},
|
24476
|
-
"description": "maximum character limit for the textarea field for character counter.",
|
24477
|
-
"attribute": "max-character-limit"
|
24483
|
+
"description": "Bottom left border radius for line tab.",
|
24484
|
+
"name": "--mdc-tab-line-border-bottom-left-radius"
|
24478
24485
|
},
|
24479
24486
|
{
|
24480
|
-
"
|
24481
|
-
"name": "
|
24482
|
-
"type": {
|
24483
|
-
"text": "boolean"
|
24484
|
-
},
|
24485
|
-
"privacy": "private",
|
24486
|
-
"default": "false"
|
24487
|
+
"description": "Bottom right border radius for line tab.",
|
24488
|
+
"name": "--mdc-tab-line-border-bottom-right-radius"
|
24487
24489
|
},
|
24488
24490
|
{
|
24489
|
-
"
|
24490
|
-
"name": "
|
24491
|
-
|
24492
|
-
|
24493
|
-
|
24494
|
-
"
|
24495
|
-
|
24491
|
+
"description": "Top left border radius for line tab.",
|
24492
|
+
"name": "--mdc-tab-line-border-top-left-radius"
|
24493
|
+
},
|
24494
|
+
{
|
24495
|
+
"description": "Top right border radius for line tab.",
|
24496
|
+
"name": "--mdc-tab-line-border-top-right-radius"
|
24497
|
+
},
|
24498
|
+
{
|
24499
|
+
"description": "Background color for inactive line tab in pressed state.",
|
24500
|
+
"name": "--mdc-tab-line-inactive-background-color-pressed"
|
24501
|
+
},
|
24502
|
+
{
|
24503
|
+
"description": "Background color for inactive line tab in disabled state",
|
24504
|
+
"name": "--mdc-tab-line-inactive-background-color-disabled"
|
24505
|
+
},
|
24506
|
+
{
|
24507
|
+
"description": "Background color for inactive line tab in hover state.",
|
24508
|
+
"name": "--mdc-tab-line-inactive-background-color-hover"
|
24509
|
+
},
|
24510
|
+
{
|
24511
|
+
"description": "Background color for inactive line tab in rest state.",
|
24512
|
+
"name": "--mdc-tab-line-inactive-background-color-normal"
|
24513
|
+
},
|
24514
|
+
{
|
24515
|
+
"description": "Text and icon color for inactive line tab.",
|
24516
|
+
"name": "--mdc-tab-line-inactive-color"
|
24517
|
+
},
|
24518
|
+
{
|
24519
|
+
"description": "Text and icon color for inactive line tab in disabled state.",
|
24520
|
+
"name": "--mdc-tab-line-inactive-color-disabled"
|
24521
|
+
},
|
24522
|
+
{
|
24523
|
+
"description": "Padding left for the tab.",
|
24524
|
+
"name": "--mdc-tab-padding-left"
|
24525
|
+
},
|
24526
|
+
{
|
24527
|
+
"description": "Padding right for the tab.",
|
24528
|
+
"name": "--mdc-tab-padding-right"
|
24529
|
+
},
|
24530
|
+
{
|
24531
|
+
"description": "Background color for active pill tab in pressed state.",
|
24532
|
+
"name": "--mdc-tab-pill-active-background-color-pressed"
|
24533
|
+
},
|
24534
|
+
{
|
24535
|
+
"description": "Background color for active pill tab in disabled state.",
|
24536
|
+
"name": "--mdc-tab-pill-active-background-color-disabled"
|
24537
|
+
},
|
24538
|
+
{
|
24539
|
+
"description": "Background color for active pill tab in hover state.",
|
24540
|
+
"name": "--mdc-tab-pill-active-background-color-hover"
|
24541
|
+
},
|
24542
|
+
{
|
24543
|
+
"description": "Background color for active pill tab in rest state.",
|
24544
|
+
"name": "--mdc-tab-pill-active-background-color-normal"
|
24496
24545
|
},
|
24497
24546
|
{
|
24498
|
-
"
|
24499
|
-
"name": "
|
24500
|
-
"privacy": "private"
|
24547
|
+
"description": "Text and icon color for active pill tab.",
|
24548
|
+
"name": "--mdc-tab-pill-active-color"
|
24501
24549
|
},
|
24502
24550
|
{
|
24503
|
-
"
|
24504
|
-
"name": "
|
24505
|
-
"description": "Handles the value change of the textarea field.\nSets the form value and updates the validity of the textarea field.",
|
24506
|
-
"return": {
|
24507
|
-
"type": {
|
24508
|
-
"text": ""
|
24509
|
-
}
|
24510
|
-
}
|
24551
|
+
"description": "Text and icon color for active pill tab in disabled state.",
|
24552
|
+
"name": "--mdc-tab-pill-active-color-disabled"
|
24511
24553
|
},
|
24512
24554
|
{
|
24513
|
-
"
|
24514
|
-
"name": "
|
24515
|
-
"privacy": "private",
|
24516
|
-
"description": "Dispatches the character overflow state change event.",
|
24517
|
-
"return": {
|
24518
|
-
"type": {
|
24519
|
-
"text": ""
|
24520
|
-
}
|
24521
|
-
}
|
24555
|
+
"description": "Border radius for pill tab.",
|
24556
|
+
"name": "--mdc-tab-pill-border-radius"
|
24522
24557
|
},
|
24523
24558
|
{
|
24524
|
-
"
|
24525
|
-
"name": "
|
24526
|
-
"privacy": "private",
|
24527
|
-
"description": "Handles the character overflow state change.\nDispatches the character overflow state change event if the character limit is exceeded or restored.",
|
24528
|
-
"return": {
|
24529
|
-
"type": {
|
24530
|
-
"text": ""
|
24531
|
-
}
|
24532
|
-
}
|
24559
|
+
"description": "Background color for inactive pill tab in pressed state.",
|
24560
|
+
"name": "--mdc-tab-pill-inactive-background-color-pressed"
|
24533
24561
|
},
|
24534
24562
|
{
|
24535
|
-
"
|
24536
|
-
"name": "
|
24537
|
-
"privacy": "private",
|
24538
|
-
"description": "Updates the value of the textarea field.\nSets the form value.",
|
24539
|
-
"return": {
|
24540
|
-
"type": {
|
24541
|
-
"text": ""
|
24542
|
-
}
|
24543
|
-
}
|
24563
|
+
"description": "Background color for inactive pill tab in disabled state.",
|
24564
|
+
"name": "--mdc-tab-pill-inactive-background-color-disabled"
|
24544
24565
|
},
|
24545
24566
|
{
|
24546
|
-
"
|
24547
|
-
"name": "
|
24548
|
-
"privacy": "private",
|
24549
|
-
"parameters": [
|
24550
|
-
{
|
24551
|
-
"name": "event",
|
24552
|
-
"type": {
|
24553
|
-
"text": "Event"
|
24554
|
-
},
|
24555
|
-
"description": "Event which contains information about the value change."
|
24556
|
-
}
|
24557
|
-
],
|
24558
|
-
"description": "Handles the change event of the textarea field.\nUpdates the value and sets the validity of the textarea field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
|
24567
|
+
"description": "Background color for inactive pill tab in hover state.",
|
24568
|
+
"name": "--mdc-tab-pill-inactive-background-color-hover"
|
24559
24569
|
},
|
24560
24570
|
{
|
24561
|
-
"
|
24562
|
-
"name": "
|
24563
|
-
"privacy": "protected"
|
24571
|
+
"description": "Background color for inactive pill tab in rest state.",
|
24572
|
+
"name": "--mdc-tab-pill-inactive-background-color-normal"
|
24564
24573
|
},
|
24565
24574
|
{
|
24566
|
-
"
|
24567
|
-
"name": "
|
24568
|
-
"privacy": "protected"
|
24575
|
+
"description": "Text and icon color for inactive pill tab.",
|
24576
|
+
"name": "--mdc-tab-pill-inactive-color"
|
24569
24577
|
},
|
24570
24578
|
{
|
24571
|
-
"
|
24572
|
-
"name": "
|
24573
|
-
|
24574
|
-
|
24575
|
-
|
24576
|
-
"default": "''",
|
24577
|
-
"description": "Indicates the name of the component group.\nThey are used to group elements in a form together.",
|
24578
|
-
"attribute": "name",
|
24579
|
-
"reflects": true,
|
24580
|
-
"inheritedFrom": {
|
24581
|
-
"name": "FormInternalsMixin",
|
24582
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
24583
|
-
}
|
24584
|
-
},
|
24579
|
+
"description": "Text and icon color for inactive pill tab in disabled state.",
|
24580
|
+
"name": "--mdc-tab-pill-inactive-color-disabled"
|
24581
|
+
}
|
24582
|
+
],
|
24583
|
+
"members": [
|
24585
24584
|
{
|
24586
24585
|
"kind": "field",
|
24587
|
-
"name": "
|
24586
|
+
"name": "active",
|
24588
24587
|
"type": {
|
24589
|
-
"text": "
|
24588
|
+
"text": "boolean | undefined"
|
24590
24589
|
},
|
24591
|
-
"
|
24592
|
-
"
|
24593
|
-
"attribute": "
|
24590
|
+
"description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
|
24591
|
+
"default": "false",
|
24592
|
+
"attribute": "active",
|
24594
24593
|
"reflects": true,
|
24595
24594
|
"inheritedFrom": {
|
24596
|
-
"name": "
|
24597
|
-
"module": "
|
24595
|
+
"name": "Buttonsimple",
|
24596
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24598
24597
|
}
|
24599
24598
|
},
|
24600
24599
|
{
|
24601
24600
|
"kind": "field",
|
24602
|
-
"name": "
|
24601
|
+
"name": "text",
|
24603
24602
|
"type": {
|
24604
24603
|
"text": "string | undefined"
|
24605
24604
|
},
|
24606
|
-
"description": "
|
24607
|
-
"attribute": "
|
24608
|
-
"reflects": true
|
24609
|
-
"inheritedFrom": {
|
24610
|
-
"name": "FormInternalsMixin",
|
24611
|
-
"module": "utils/mixins/FormInternalsMixin.js"
|
24612
|
-
}
|
24605
|
+
"description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
|
24606
|
+
"attribute": "text",
|
24607
|
+
"reflects": true
|
24613
24608
|
},
|
24614
24609
|
{
|
24615
24610
|
"kind": "field",
|
24616
|
-
"name": "
|
24611
|
+
"name": "variant",
|
24617
24612
|
"type": {
|
24618
|
-
"text": "
|
24613
|
+
"text": "Variant"
|
24619
24614
|
},
|
24620
|
-
"
|
24621
|
-
"
|
24622
|
-
|
24623
|
-
|
24624
|
-
}
|
24615
|
+
"description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
|
24616
|
+
"default": "pill",
|
24617
|
+
"attribute": "variant",
|
24618
|
+
"reflects": true
|
24625
24619
|
},
|
24626
24620
|
{
|
24627
24621
|
"kind": "field",
|
24628
|
-
"name": "
|
24629
|
-
"
|
24630
|
-
|
24631
|
-
|
24632
|
-
|
24633
|
-
|
24622
|
+
"name": "tabId",
|
24623
|
+
"type": {
|
24624
|
+
"text": "string | undefined"
|
24625
|
+
},
|
24626
|
+
"description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
|
24627
|
+
"default": "undefined",
|
24628
|
+
"attribute": "tab-id",
|
24629
|
+
"reflects": true
|
24634
24630
|
},
|
24635
24631
|
{
|
24636
24632
|
"kind": "method",
|
24637
|
-
"name": "
|
24638
|
-
"
|
24633
|
+
"name": "modifyIconName",
|
24634
|
+
"privacy": "private",
|
24639
24635
|
"return": {
|
24640
24636
|
"type": {
|
24641
|
-
"text": ""
|
24637
|
+
"text": "void"
|
24642
24638
|
}
|
24643
24639
|
},
|
24644
|
-
"
|
24645
|
-
|
24646
|
-
|
24647
|
-
|
24640
|
+
"parameters": [
|
24641
|
+
{
|
24642
|
+
"name": "active",
|
24643
|
+
"type": {
|
24644
|
+
"text": "boolean"
|
24645
|
+
},
|
24646
|
+
"description": "The active state."
|
24647
|
+
}
|
24648
|
+
],
|
24649
|
+
"description": "Modifies the icon name based on the active state.\nIf the tab is active, the icon name is suffixed with '-filled'.\nIf the tab is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
24648
24650
|
},
|
24649
24651
|
{
|
24650
24652
|
"kind": "method",
|
24651
|
-
"name": "
|
24653
|
+
"name": "setVariant",
|
24654
|
+
"privacy": "private",
|
24652
24655
|
"return": {
|
24653
24656
|
"type": {
|
24654
|
-
"text": "
|
24657
|
+
"text": "void"
|
24655
24658
|
}
|
24656
24659
|
},
|
24660
|
+
"parameters": [
|
24661
|
+
{
|
24662
|
+
"name": "variant",
|
24663
|
+
"type": {
|
24664
|
+
"text": "Variant"
|
24665
|
+
},
|
24666
|
+
"description": "The variant to set."
|
24667
|
+
}
|
24668
|
+
],
|
24669
|
+
"description": "Sets the variant attribute for the tab component.\nIf the provided variant is not included in the TAB_VARIANTS,\nit defaults to the value specified in DEFAULTS.VARIANT."
|
24670
|
+
},
|
24671
|
+
{
|
24672
|
+
"kind": "field",
|
24673
|
+
"name": "handleTabActiveChange",
|
24674
|
+
"privacy": "private",
|
24675
|
+
"description": "Dispatch the activechange event.",
|
24676
|
+
"parameters": [
|
24677
|
+
{
|
24678
|
+
"description": "The active state of the tab.",
|
24679
|
+
"name": "active"
|
24680
|
+
}
|
24681
|
+
]
|
24682
|
+
},
|
24683
|
+
{
|
24684
|
+
"kind": "method",
|
24685
|
+
"name": "setActive",
|
24686
|
+
"privacy": "protected",
|
24687
|
+
"parameters": [
|
24688
|
+
{
|
24689
|
+
"name": "element",
|
24690
|
+
"type": {
|
24691
|
+
"text": "HTMLElement"
|
24692
|
+
},
|
24693
|
+
"description": "The tab element."
|
24694
|
+
},
|
24695
|
+
{
|
24696
|
+
"name": "active",
|
24697
|
+
"type": {
|
24698
|
+
"text": "boolean"
|
24699
|
+
},
|
24700
|
+
"description": "The active state of the tab."
|
24701
|
+
}
|
24702
|
+
],
|
24703
|
+
"description": "Sets the aria-selected attribute based on the active state of the Tab.\nIf the tab is active, the filled version of the icon is displayed,\nelse the icon is restored to its original value.",
|
24657
24704
|
"inheritedFrom": {
|
24658
|
-
"name": "
|
24659
|
-
"module": "
|
24705
|
+
"name": "Buttonsimple",
|
24706
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24660
24707
|
}
|
24661
24708
|
},
|
24662
24709
|
{
|
24663
24710
|
"kind": "method",
|
24664
|
-
"name": "
|
24711
|
+
"name": "executeAction",
|
24712
|
+
"privacy": "protected",
|
24665
24713
|
"inheritedFrom": {
|
24666
|
-
"name": "
|
24667
|
-
"module": "
|
24714
|
+
"name": "Buttonsimple",
|
24715
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24668
24716
|
}
|
24669
24717
|
},
|
24670
24718
|
{
|
24671
24719
|
"kind": "field",
|
24672
|
-
"name": "
|
24720
|
+
"name": "iconName",
|
24673
24721
|
"type": {
|
24674
|
-
"text": "
|
24722
|
+
"text": "IconNames | undefined"
|
24675
24723
|
},
|
24676
|
-
"
|
24677
|
-
"
|
24678
|
-
"
|
24724
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
24725
|
+
"attribute": "icon-name",
|
24726
|
+
"inheritedFrom": {
|
24727
|
+
"name": "IconNameMixin",
|
24728
|
+
"module": "utils/mixins/IconNameMixin.js"
|
24729
|
+
}
|
24730
|
+
},
|
24731
|
+
{
|
24732
|
+
"kind": "field",
|
24733
|
+
"name": "tabIndex",
|
24734
|
+
"type": {
|
24735
|
+
"text": "number"
|
24736
|
+
},
|
24737
|
+
"default": "0",
|
24738
|
+
"description": "This property specifies the tab order of the element.",
|
24739
|
+
"attribute": "tabIndex",
|
24679
24740
|
"reflects": true,
|
24680
24741
|
"inheritedFrom": {
|
24681
|
-
"name": "
|
24682
|
-
"module": "
|
24742
|
+
"name": "Buttonsimple",
|
24743
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24683
24744
|
}
|
24684
24745
|
},
|
24685
24746
|
{
|
@@ -24693,347 +24754,299 @@
|
|
24693
24754
|
"attribute": "disabled",
|
24694
24755
|
"reflects": true,
|
24695
24756
|
"inheritedFrom": {
|
24696
|
-
"name": "
|
24697
|
-
"module": "components/
|
24757
|
+
"name": "Buttonsimple",
|
24758
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24698
24759
|
}
|
24699
24760
|
},
|
24700
24761
|
{
|
24701
24762
|
"kind": "field",
|
24702
|
-
"name": "
|
24763
|
+
"name": "softDisabled",
|
24703
24764
|
"type": {
|
24704
|
-
"text": "
|
24765
|
+
"text": "boolean | undefined"
|
24705
24766
|
},
|
24706
|
-
"description": "
|
24707
|
-
"
|
24767
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
24768
|
+
"default": "undefined",
|
24769
|
+
"attribute": "soft-disabled",
|
24708
24770
|
"reflects": true,
|
24709
24771
|
"inheritedFrom": {
|
24710
|
-
"name": "
|
24711
|
-
"module": "components/
|
24772
|
+
"name": "Buttonsimple",
|
24773
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24712
24774
|
}
|
24713
24775
|
},
|
24714
24776
|
{
|
24715
24777
|
"kind": "field",
|
24716
|
-
"name": "
|
24778
|
+
"name": "size",
|
24717
24779
|
"type": {
|
24718
|
-
"text": "
|
24780
|
+
"text": "ButtonSize"
|
24719
24781
|
},
|
24720
|
-
"description": "
|
24721
|
-
"
|
24782
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
24783
|
+
"default": "32",
|
24784
|
+
"attribute": "size",
|
24722
24785
|
"reflects": true,
|
24723
24786
|
"inheritedFrom": {
|
24724
|
-
"name": "
|
24725
|
-
"module": "components/
|
24787
|
+
"name": "Buttonsimple",
|
24788
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24726
24789
|
}
|
24727
24790
|
},
|
24728
24791
|
{
|
24729
24792
|
"kind": "field",
|
24730
|
-
"name": "
|
24731
|
-
"
|
24732
|
-
|
24733
|
-
|
24734
|
-
"
|
24735
|
-
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
24736
|
-
"attribute": "id",
|
24793
|
+
"name": "role",
|
24794
|
+
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
24795
|
+
"default": "button",
|
24796
|
+
"attribute": "role",
|
24797
|
+
"reflects": true,
|
24737
24798
|
"inheritedFrom": {
|
24738
|
-
"name": "
|
24739
|
-
"module": "components/
|
24799
|
+
"name": "Buttonsimple",
|
24800
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24740
24801
|
}
|
24741
24802
|
},
|
24742
24803
|
{
|
24743
24804
|
"kind": "field",
|
24744
|
-
"name": "
|
24805
|
+
"name": "ariaStateKey",
|
24745
24806
|
"type": {
|
24746
|
-
"text": "
|
24807
|
+
"text": "string | undefined"
|
24747
24808
|
},
|
24748
|
-
"description": "
|
24749
|
-
"
|
24809
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
24810
|
+
"default": "'aria-pressed' (when)",
|
24811
|
+
"attribute": "ariaStateKey",
|
24750
24812
|
"reflects": true,
|
24751
24813
|
"inheritedFrom": {
|
24752
|
-
"name": "
|
24753
|
-
"module": "components/
|
24814
|
+
"name": "Buttonsimple",
|
24815
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24754
24816
|
}
|
24755
24817
|
},
|
24756
24818
|
{
|
24757
24819
|
"kind": "field",
|
24758
|
-
"name": "
|
24820
|
+
"name": "type",
|
24759
24821
|
"type": {
|
24760
|
-
"text": "
|
24822
|
+
"text": "ButtonType"
|
24761
24823
|
},
|
24762
|
-
"description": "
|
24763
|
-
"
|
24824
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
24825
|
+
"default": "button",
|
24826
|
+
"attribute": "type",
|
24764
24827
|
"reflects": true,
|
24765
24828
|
"inheritedFrom": {
|
24766
|
-
"name": "
|
24767
|
-
"module": "components/
|
24829
|
+
"name": "Buttonsimple",
|
24830
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24768
24831
|
}
|
24769
24832
|
},
|
24770
24833
|
{
|
24771
24834
|
"kind": "method",
|
24772
|
-
"name": "
|
24773
|
-
"privacy": "
|
24774
|
-
"
|
24775
|
-
|
24776
|
-
|
24777
|
-
"
|
24835
|
+
"name": "setSoftDisabled",
|
24836
|
+
"privacy": "private",
|
24837
|
+
"parameters": [
|
24838
|
+
{
|
24839
|
+
"name": "element",
|
24840
|
+
"type": {
|
24841
|
+
"text": "HTMLElement"
|
24842
|
+
},
|
24843
|
+
"description": "The button element."
|
24844
|
+
},
|
24845
|
+
{
|
24846
|
+
"name": "softDisabled",
|
24847
|
+
"optional": true,
|
24848
|
+
"type": {
|
24849
|
+
"text": "boolean"
|
24850
|
+
},
|
24851
|
+
"description": "The soft-disabled state."
|
24778
24852
|
}
|
24779
|
-
|
24853
|
+
],
|
24854
|
+
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
24780
24855
|
"inheritedFrom": {
|
24781
|
-
"name": "
|
24782
|
-
"module": "components/
|
24856
|
+
"name": "Buttonsimple",
|
24857
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24783
24858
|
}
|
24784
24859
|
},
|
24785
24860
|
{
|
24786
24861
|
"kind": "method",
|
24787
|
-
"name": "
|
24788
|
-
"privacy": "
|
24862
|
+
"name": "setDisabled",
|
24863
|
+
"privacy": "private",
|
24864
|
+
"parameters": [
|
24865
|
+
{
|
24866
|
+
"name": "element",
|
24867
|
+
"type": {
|
24868
|
+
"text": "HTMLElement"
|
24869
|
+
},
|
24870
|
+
"description": "The button element."
|
24871
|
+
},
|
24872
|
+
{
|
24873
|
+
"name": "disabled",
|
24874
|
+
"type": {
|
24875
|
+
"text": "boolean"
|
24876
|
+
},
|
24877
|
+
"description": "The disabled state."
|
24878
|
+
}
|
24879
|
+
],
|
24880
|
+
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
24789
24881
|
"inheritedFrom": {
|
24790
|
-
"name": "
|
24791
|
-
"module": "components/
|
24882
|
+
"name": "Buttonsimple",
|
24883
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24792
24884
|
}
|
24793
24885
|
},
|
24794
24886
|
{
|
24795
24887
|
"kind": "method",
|
24796
|
-
"name": "
|
24797
|
-
"privacy": "
|
24798
|
-
"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.",
|
24799
|
-
"return": {
|
24800
|
-
"type": {
|
24801
|
-
"text": ""
|
24802
|
-
}
|
24803
|
-
},
|
24888
|
+
"name": "triggerClickEvent",
|
24889
|
+
"privacy": "private",
|
24804
24890
|
"inheritedFrom": {
|
24805
|
-
"name": "
|
24806
|
-
"module": "components/
|
24891
|
+
"name": "Buttonsimple",
|
24892
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24807
24893
|
}
|
24808
24894
|
},
|
24809
24895
|
{
|
24810
24896
|
"kind": "method",
|
24811
|
-
"name": "
|
24812
|
-
"privacy": "
|
24813
|
-
"description": "
|
24814
|
-
"return": {
|
24815
|
-
"type": {
|
24816
|
-
"text": ""
|
24817
|
-
}
|
24818
|
-
},
|
24897
|
+
"name": "handleBlur",
|
24898
|
+
"privacy": "private",
|
24899
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
24819
24900
|
"inheritedFrom": {
|
24820
|
-
"name": "
|
24821
|
-
"module": "components/
|
24901
|
+
"name": "Buttonsimple",
|
24902
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24822
24903
|
}
|
24823
24904
|
},
|
24824
24905
|
{
|
24825
24906
|
"kind": "method",
|
24826
|
-
"name": "
|
24827
|
-
"privacy": "
|
24828
|
-
"
|
24829
|
-
|
24830
|
-
|
24831
|
-
"
|
24907
|
+
"name": "handleKeyDown",
|
24908
|
+
"privacy": "private",
|
24909
|
+
"parameters": [
|
24910
|
+
{
|
24911
|
+
"name": "event",
|
24912
|
+
"type": {
|
24913
|
+
"text": "KeyboardEvent"
|
24914
|
+
},
|
24915
|
+
"description": "The keyboard event."
|
24832
24916
|
}
|
24833
|
-
|
24917
|
+
],
|
24918
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
24834
24919
|
"inheritedFrom": {
|
24835
|
-
"name": "
|
24836
|
-
"module": "components/
|
24920
|
+
"name": "Buttonsimple",
|
24921
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24837
24922
|
}
|
24838
24923
|
},
|
24839
24924
|
{
|
24840
24925
|
"kind": "method",
|
24841
|
-
"name": "
|
24842
|
-
"privacy": "
|
24843
|
-
"
|
24844
|
-
|
24845
|
-
|
24846
|
-
"
|
24926
|
+
"name": "handleKeyUp",
|
24927
|
+
"privacy": "private",
|
24928
|
+
"parameters": [
|
24929
|
+
{
|
24930
|
+
"name": "event",
|
24931
|
+
"type": {
|
24932
|
+
"text": "KeyboardEvent"
|
24933
|
+
},
|
24934
|
+
"description": "The keyboard event."
|
24847
24935
|
}
|
24848
|
-
|
24936
|
+
],
|
24937
|
+
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
24849
24938
|
"inheritedFrom": {
|
24850
|
-
"name": "
|
24851
|
-
"module": "components/
|
24939
|
+
"name": "Buttonsimple",
|
24940
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
24852
24941
|
}
|
24853
24942
|
}
|
24854
24943
|
],
|
24855
24944
|
"events": [
|
24856
24945
|
{
|
24857
|
-
"
|
24858
|
-
"
|
24859
|
-
|
24860
|
-
|
24861
|
-
|
24862
|
-
|
24863
|
-
|
24864
|
-
{
|
24865
|
-
"type": {
|
24866
|
-
"text": "EventConstructor"
|
24867
|
-
}
|
24868
|
-
},
|
24869
|
-
{
|
24870
|
-
"description": "(React: onInput) This event is dispatched when the value of the textarea field changes (every press).",
|
24871
|
-
"name": "input",
|
24872
|
-
"reactName": "onInput"
|
24873
|
-
},
|
24874
|
-
{
|
24875
|
-
"description": "(React: onChange) This event is dispatched when the value of the textarea field changes (on blur).",
|
24876
|
-
"name": "change",
|
24877
|
-
"reactName": "onChange"
|
24878
|
-
},
|
24879
|
-
{
|
24880
|
-
"description": "(React: onFocus) This event is dispatched when the textarea receives focus.",
|
24881
|
-
"name": "focus",
|
24882
|
-
"reactName": "onFocus"
|
24883
|
-
},
|
24884
|
-
{
|
24885
|
-
"description": "(React: onBlur) This event is dispatched when the textarea loses focus.",
|
24886
|
-
"name": "blur",
|
24887
|
-
"reactName": "onBlur"
|
24888
|
-
}
|
24889
|
-
],
|
24890
|
-
"attributes": [
|
24891
|
-
{
|
24892
|
-
"name": "placeholder",
|
24893
|
-
"type": {
|
24894
|
-
"text": "string | undefined"
|
24895
|
-
},
|
24896
|
-
"description": "The placeholder text that is displayed when the textarea field is empty.",
|
24897
|
-
"fieldName": "placeholder"
|
24898
|
-
},
|
24899
|
-
{
|
24900
|
-
"name": "readonly",
|
24901
|
-
"type": {
|
24902
|
-
"text": "boolean"
|
24903
|
-
},
|
24904
|
-
"default": "false",
|
24905
|
-
"description": "readonly attribute of the textarea field. If true, the textarea field is read-only.",
|
24906
|
-
"fieldName": "readonly"
|
24907
|
-
},
|
24908
|
-
{
|
24909
|
-
"name": "rows",
|
24910
|
-
"description": "The rows attribute specifies the visible number of lines in a text area.",
|
24911
|
-
"default": "5",
|
24912
|
-
"fieldName": "rows"
|
24946
|
+
"description": "(React: onClick) This event is dispatched when the tab is clicked.",
|
24947
|
+
"name": "click",
|
24948
|
+
"reactName": "onClick",
|
24949
|
+
"inheritedFrom": {
|
24950
|
+
"name": "Buttonsimple",
|
24951
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24952
|
+
}
|
24913
24953
|
},
|
24914
24954
|
{
|
24915
|
-
"
|
24916
|
-
"
|
24917
|
-
"
|
24918
|
-
"
|
24955
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the tab.",
|
24956
|
+
"name": "keydown",
|
24957
|
+
"reactName": "onKeyDown",
|
24958
|
+
"inheritedFrom": {
|
24959
|
+
"name": "Buttonsimple",
|
24960
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24961
|
+
}
|
24919
24962
|
},
|
24920
24963
|
{
|
24921
|
-
"
|
24922
|
-
"
|
24923
|
-
|
24924
|
-
|
24925
|
-
|
24926
|
-
|
24927
|
-
|
24964
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the tab.",
|
24965
|
+
"name": "keyup",
|
24966
|
+
"reactName": "onKeyUp",
|
24967
|
+
"inheritedFrom": {
|
24968
|
+
"name": "Buttonsimple",
|
24969
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24970
|
+
}
|
24928
24971
|
},
|
24929
24972
|
{
|
24930
|
-
"
|
24931
|
-
"
|
24932
|
-
|
24933
|
-
|
24934
|
-
|
24935
|
-
|
24936
|
-
|
24973
|
+
"description": "(React: onFocus) This event is dispatched when the tab receives focus.",
|
24974
|
+
"name": "focus",
|
24975
|
+
"reactName": "onFocus",
|
24976
|
+
"inheritedFrom": {
|
24977
|
+
"name": "Buttonsimple",
|
24978
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24979
|
+
}
|
24937
24980
|
},
|
24938
24981
|
{
|
24939
|
-
"
|
24940
|
-
"
|
24941
|
-
|
24942
|
-
|
24943
|
-
|
24944
|
-
|
24945
|
-
"fieldName": "autocomplete"
|
24946
|
-
},
|
24982
|
+
"description": "(React: onActiveChange) This event is dispatched when the active state of the tab changes <br /> Event Data: `detail: { tabId: this.tabId, active }` <br /> Note: the activechange event is used by the tab list component to react to the change in state of the tab, so this event won't be needed if the tab list is used.",
|
24983
|
+
"name": "activechange",
|
24984
|
+
"reactName": "onActiveChange"
|
24985
|
+
}
|
24986
|
+
],
|
24987
|
+
"attributes": [
|
24947
24988
|
{
|
24948
|
-
"name": "
|
24989
|
+
"name": "active",
|
24949
24990
|
"type": {
|
24950
|
-
"text": "boolean"
|
24991
|
+
"text": "boolean | undefined"
|
24951
24992
|
},
|
24993
|
+
"description": "The tab's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the tab is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the tab is in an inactive state, indicating it is toggled off.\n\nThis attribute also controls the \"aria-selected\" attribute of the tab.\nWhen the tab is active, \"aria-selected\" is set to true, indicating that the tab is selected.\nWhen the tab is inactive, \"aria-selected\" is set to false, indicating that the tab is not selected.",
|
24952
24994
|
"default": "false",
|
24953
|
-
"
|
24954
|
-
"
|
24995
|
+
"fieldName": "active",
|
24996
|
+
"inheritedFrom": {
|
24997
|
+
"name": "Buttonsimple",
|
24998
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
24999
|
+
}
|
24955
25000
|
},
|
24956
25001
|
{
|
24957
|
-
"name": "
|
25002
|
+
"name": "text",
|
24958
25003
|
"type": {
|
24959
25004
|
"text": "string | undefined"
|
24960
25005
|
},
|
24961
|
-
"description": "
|
24962
|
-
"fieldName": "
|
24963
|
-
},
|
24964
|
-
{
|
24965
|
-
"name": "maxlength",
|
24966
|
-
"type": {
|
24967
|
-
"text": "number | undefined"
|
24968
|
-
},
|
24969
|
-
"description": "The maximum number of characters that the textarea field can accept.",
|
24970
|
-
"fieldName": "maxlength"
|
24971
|
-
},
|
24972
|
-
{
|
24973
|
-
"name": "minlength",
|
24974
|
-
"type": {
|
24975
|
-
"text": "number | undefined"
|
24976
|
-
},
|
24977
|
-
"description": "The minimum number of characters that the textarea field can accept.",
|
24978
|
-
"fieldName": "minlength"
|
24979
|
-
},
|
24980
|
-
{
|
24981
|
-
"name": "max-character-limit",
|
24982
|
-
"type": {
|
24983
|
-
"text": "number | undefined"
|
24984
|
-
},
|
24985
|
-
"description": "maximum character limit for the textarea field for character counter.",
|
24986
|
-
"fieldName": "maxCharacterLimit"
|
25006
|
+
"description": "Text to be displayed in the tab.\nIf no `text` is provided, no text will be rendered,\n`aria-label` should be set on the tab.",
|
25007
|
+
"fieldName": "text"
|
24987
25008
|
},
|
24988
25009
|
{
|
24989
|
-
"name": "
|
25010
|
+
"name": "variant",
|
24990
25011
|
"type": {
|
24991
|
-
"text": "
|
25012
|
+
"text": "Variant"
|
24992
25013
|
},
|
24993
|
-
"
|
24994
|
-
"
|
24995
|
-
"fieldName": "
|
24996
|
-
"inheritedFrom": {
|
24997
|
-
"name": "FormInternalsMixin",
|
24998
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
24999
|
-
}
|
25014
|
+
"description": "Tab can have three variants:\n- `glass`\n- `line`\n- `pill`\n\nIt defines the background and foreground color of the tab.",
|
25015
|
+
"default": "pill",
|
25016
|
+
"fieldName": "variant"
|
25000
25017
|
},
|
25001
25018
|
{
|
25002
|
-
"name": "
|
25019
|
+
"name": "tab-id",
|
25003
25020
|
"type": {
|
25004
|
-
"text": "string"
|
25021
|
+
"text": "string | undefined"
|
25005
25022
|
},
|
25006
|
-
"
|
25007
|
-
"
|
25008
|
-
"fieldName": "
|
25009
|
-
"inheritedFrom": {
|
25010
|
-
"name": "FormInternalsMixin",
|
25011
|
-
"module": "src/utils/mixins/FormInternalsMixin.ts"
|
25012
|
-
}
|
25023
|
+
"description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
|
25024
|
+
"default": "undefined",
|
25025
|
+
"fieldName": "tabId"
|
25013
25026
|
},
|
25014
25027
|
{
|
25015
|
-
"name": "
|
25028
|
+
"name": "icon-name",
|
25016
25029
|
"type": {
|
25017
|
-
"text": "
|
25030
|
+
"text": "IconNames | undefined"
|
25018
25031
|
},
|
25019
|
-
"description": "
|
25020
|
-
"fieldName": "
|
25032
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
25033
|
+
"fieldName": "iconName",
|
25021
25034
|
"inheritedFrom": {
|
25022
|
-
"name": "
|
25023
|
-
"module": "src/utils/mixins/
|
25035
|
+
"name": "IconNameMixin",
|
25036
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
25024
25037
|
}
|
25025
25038
|
},
|
25026
25039
|
{
|
25027
|
-
"name": "
|
25040
|
+
"name": "tabIndex",
|
25028
25041
|
"type": {
|
25029
|
-
"text": "
|
25042
|
+
"text": "number"
|
25030
25043
|
},
|
25031
|
-
"default": "
|
25032
|
-
"description": "
|
25033
|
-
"fieldName": "
|
25044
|
+
"default": "0",
|
25045
|
+
"description": "This property specifies the tab order of the element.",
|
25046
|
+
"fieldName": "tabIndex",
|
25034
25047
|
"inheritedFrom": {
|
25035
|
-
"name": "
|
25036
|
-
"module": "src/
|
25048
|
+
"name": "Buttonsimple",
|
25049
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
25037
25050
|
}
|
25038
25051
|
},
|
25039
25052
|
{
|
@@ -25045,99 +25058,86 @@
|
|
25045
25058
|
"default": "undefined",
|
25046
25059
|
"fieldName": "disabled",
|
25047
25060
|
"inheritedFrom": {
|
25048
|
-
"name": "
|
25049
|
-
"module": "src/components/
|
25061
|
+
"name": "Buttonsimple",
|
25062
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
25050
25063
|
}
|
25051
25064
|
},
|
25052
25065
|
{
|
25053
|
-
"name": "
|
25066
|
+
"name": "soft-disabled",
|
25054
25067
|
"type": {
|
25055
|
-
"text": "
|
25068
|
+
"text": "boolean | undefined"
|
25056
25069
|
},
|
25057
|
-
"description": "
|
25058
|
-
"
|
25070
|
+
"description": "Indicates whether the button is soft disabled.\nWhen set to `true`, the button appears visually disabled but still allows\nfocus, click, and keyboard actions to be passed through.\n\n**Important:** When using soft disabled, consumers must ensure that\nthe button behaves like a disabled button, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
25071
|
+
"default": "undefined",
|
25072
|
+
"fieldName": "softDisabled",
|
25059
25073
|
"inheritedFrom": {
|
25060
|
-
"name": "
|
25061
|
-
"module": "src/components/
|
25074
|
+
"name": "Buttonsimple",
|
25075
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
25062
25076
|
}
|
25063
25077
|
},
|
25064
25078
|
{
|
25065
|
-
"name": "
|
25079
|
+
"name": "size",
|
25066
25080
|
"type": {
|
25067
|
-
"text": "
|
25081
|
+
"text": "ButtonSize"
|
25068
25082
|
},
|
25069
|
-
"description": "
|
25070
|
-
"
|
25083
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
25084
|
+
"default": "32",
|
25085
|
+
"fieldName": "size",
|
25071
25086
|
"inheritedFrom": {
|
25072
|
-
"name": "
|
25073
|
-
"module": "src/components/
|
25087
|
+
"name": "Buttonsimple",
|
25088
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
25074
25089
|
}
|
25075
25090
|
},
|
25076
25091
|
{
|
25077
|
-
"name": "
|
25078
|
-
"
|
25079
|
-
|
25080
|
-
|
25081
|
-
"default": "''",
|
25082
|
-
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
25083
|
-
"fieldName": "id",
|
25092
|
+
"name": "role",
|
25093
|
+
"description": "This property defines the ARIA role for the element. By default, it is set to 'button'.\nConsumers should override this role when:\n- The element is being used in a context where a different role is more appropriate.\n- Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.",
|
25094
|
+
"default": "button",
|
25095
|
+
"fieldName": "role",
|
25084
25096
|
"inheritedFrom": {
|
25085
|
-
"name": "
|
25086
|
-
"module": "src/components/
|
25097
|
+
"name": "Buttonsimple",
|
25098
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
25087
25099
|
}
|
25088
25100
|
},
|
25089
25101
|
{
|
25090
|
-
"name": "
|
25102
|
+
"name": "ariaStateKey",
|
25091
25103
|
"type": {
|
25092
|
-
"text": "
|
25104
|
+
"text": "string | undefined"
|
25093
25105
|
},
|
25094
|
-
"description": "
|
25095
|
-
"
|
25106
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
25107
|
+
"default": "'aria-pressed' (when)",
|
25108
|
+
"fieldName": "ariaStateKey",
|
25096
25109
|
"inheritedFrom": {
|
25097
|
-
"name": "
|
25098
|
-
"module": "src/components/
|
25110
|
+
"name": "Buttonsimple",
|
25111
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
25099
25112
|
}
|
25100
25113
|
},
|
25101
25114
|
{
|
25102
|
-
"name": "
|
25115
|
+
"name": "type",
|
25103
25116
|
"type": {
|
25104
|
-
"text": "
|
25117
|
+
"text": "ButtonType"
|
25105
25118
|
},
|
25106
|
-
"description": "
|
25107
|
-
"
|
25119
|
+
"description": "This property defines the type attribute for the button element.\nThe type attribute specifies the behavior of the button when it is clicked.\n- **submit**: The button submits the form data to the server.\n- **reset**: The button resets the form data to its initial state.\n- **button**: The button does nothing when clicked.",
|
25120
|
+
"default": "button",
|
25121
|
+
"fieldName": "type",
|
25108
25122
|
"inheritedFrom": {
|
25109
|
-
"name": "
|
25110
|
-
"module": "src/components/
|
25123
|
+
"name": "Buttonsimple",
|
25124
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
25111
25125
|
}
|
25112
25126
|
}
|
25113
25127
|
],
|
25114
25128
|
"mixins": [
|
25115
25129
|
{
|
25116
|
-
"name": "
|
25117
|
-
"module": "/src/utils/mixins/
|
25118
|
-
},
|
25119
|
-
{
|
25120
|
-
"name": "DataAriaLabelMixin",
|
25121
|
-
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
25130
|
+
"name": "IconNameMixin",
|
25131
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
25122
25132
|
}
|
25123
25133
|
],
|
25124
25134
|
"superclass": {
|
25125
|
-
"name": "
|
25126
|
-
"module": "/src/components/
|
25135
|
+
"name": "Buttonsimple",
|
25136
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
25127
25137
|
},
|
25128
|
-
"tagName": "mdc-
|
25129
|
-
"jsDoc": "/**\n * mdc-
|
25130
|
-
"customElement": true
|
25131
|
-
"slots": [
|
25132
|
-
{
|
25133
|
-
"description": "slot to add the label info icon",
|
25134
|
-
"name": "label-info",
|
25135
|
-
"inheritedFrom": {
|
25136
|
-
"name": "FormfieldWrapper",
|
25137
|
-
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
25138
|
-
}
|
25139
|
-
}
|
25140
|
-
]
|
25138
|
+
"tagName": "mdc-tab",
|
25139
|
+
"jsDoc": "/**\n * `mdc-tab` is Tab component to be used within the Tabgroup.\n *\n * Passing in the attribute `text` to the tab component is changing the text displayed in the tab.\n *\n * Pass attribute `tabid` when using inside of `tablist` component.\n *\n * The `slot=\"badge\"` can be used to add a badge to the tab.\n *\n * The `slot=\"chip\"` can be used to add a chip to the tab.\n *\n * For `icon`, the `mdc-icon` component is used to render the icon.\n *\n * Note: Icons can be used in conjunction with badges or chips.\n * Badges and chips should not be used at the same time.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @event click - (React: onClick) This event is dispatched when the tab is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the tab.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the tab.\n * @event focus - (React: onFocus) This event is dispatched when the tab receives focus.\n * @event activechange - (React: onActiveChange) This event is dispatched when the active state of the tab changes\n * <br />\n * Event Data: `detail: { tabId: this.tabId, active }`\n * <br />\n * Note: the activechange event is used by the tab list component to react to the change in state of the tab,\n * so this event won't be needed if the tab list is used.\n *\n * @tagname mdc-tab\n *\n * @cssproperty --mdc-tab-content-gap - Gap between the badge(if provided), icon and text.\n * @cssproperty --mdc-tab-height - Height of the tab.\n * @cssproperty --mdc-tab-glass-active-background-color-disabled - Background color for active glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-active-background-color-hover - Background color for active glass tab in hover state.\n * @cssproperty --mdc-tab-glass-active-background-color-normal - Background color for active glass tab in rest state.\n * @cssproperty --mdc-tab-glass-active-background-color-pressed - Background color for active glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-active-color - Text and icon color for active glass tab.\n * @cssproperty --mdc-tab-glass-active-color-disabled - Text and icon color for active glass tab in disabled state.\n * @cssproperty --mdc-tab-glass-border-radius - Border radius for glass tab.\n * @cssproperty --mdc-tab-glass-inactive-background-color-disabled - Background color for inactive glass tab\n * in disabled state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-hover - Background color for inactive glass tab\n * in hover state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-normal - Background color for inactive glass tab\n * in rest state.\n * @cssproperty --mdc-tab-glass-inactive-background-color-pressed - Background color for inactive glass tab\n * in pressed state.\n * @cssproperty --mdc-tab-glass-inactive-color - Text and icon color for inactive glass tab.\n * @cssproperty --mdc-tab-glass-inactive-color-disabled - Text and icon color for inactive glass tab in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-pressed - Background color for active line tab in pressed state.\n * @cssproperty --mdc-tab-line-active-background-color-disabled - Background color for active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-background-color-hover - Background color for active line tab in hover state.\n * @cssproperty --mdc-tab-line-active-background-color-normal - Background color for active line tab in rest state.\n * @cssproperty --mdc-tab-line-active-color - Text and icon color for active line tab.\n * @cssproperty --mdc-tab-line-active-color-disabled - Text and icon color for active line tab in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-color - color for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-color-disabled - Color for indicator in active line tab\n * in disabled state.\n * @cssproperty --mdc-tab-line-active-indicator-height - Height for indicator in active line tab.\n * @cssproperty --mdc-tab-line-active-indicator-width - Width for indicator in active line tab.\n * @cssproperty --mdc-tab-line-border-bottom-left-radius - Bottom left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-bottom-right-radius - Bottom right border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-left-radius - Top left border radius for line tab.\n * @cssproperty --mdc-tab-line-border-top-right-radius - Top right border radius for line tab.\n * @cssproperty --mdc-tab-line-inactive-background-color-pressed - Background color for inactive line tab\n * in pressed state.\n * @cssproperty --mdc-tab-line-inactive-background-color-disabled - Background color for inactive line tab\n * in disabled state\n * @cssproperty --mdc-tab-line-inactive-background-color-hover - Background color for inactive line tab in hover state.\n * @cssproperty --mdc-tab-line-inactive-background-color-normal - Background color for inactive line tab\n * in rest state.\n * @cssproperty --mdc-tab-line-inactive-color - Text and icon color for inactive line tab.\n * @cssproperty --mdc-tab-line-inactive-color-disabled - Text and icon color for inactive line tab in disabled state.\n * @cssproperty --mdc-tab-padding-left - Padding left for the tab.\n * @cssproperty --mdc-tab-padding-right - Padding right for the tab.\n * @cssproperty --mdc-tab-pill-active-background-color-pressed - Background color for active pill tab in pressed state.\n * @cssproperty --mdc-tab-pill-active-background-color-disabled - Background color for active pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-active-background-color-hover - Background color for active pill tab in hover state.\n * @cssproperty --mdc-tab-pill-active-background-color-normal - Background color for active pill tab in rest state.\n * @cssproperty --mdc-tab-pill-active-color - Text and icon color for active pill tab.\n * @cssproperty --mdc-tab-pill-active-color-disabled - Text and icon color for active pill tab in disabled state.\n * @cssproperty --mdc-tab-pill-border-radius - Border radius for pill tab.\n * @cssproperty --mdc-tab-pill-inactive-background-color-pressed - Background color for inactive pill tab\n * in pressed state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-disabled - Background color for inactive pill tab\n * in disabled state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-hover - Background color for inactive pill tab in hover state.\n * @cssproperty --mdc-tab-pill-inactive-background-color-normal - Background color for inactive pill tab in rest state.\n * @cssproperty --mdc-tab-pill-inactive-color - Text and icon color for inactive pill tab.\n * @cssproperty --mdc-tab-pill-inactive-color-disabled - Text and icon color for inactive pill tab in disabled state.\n */",
|
25140
|
+
"customElement": true
|
25141
25141
|
}
|
25142
25142
|
],
|
25143
25143
|
"exports": [
|
@@ -25145,8 +25145,8 @@
|
|
25145
25145
|
"kind": "js",
|
25146
25146
|
"name": "default",
|
25147
25147
|
"declaration": {
|
25148
|
-
"name": "
|
25149
|
-
"module": "components/
|
25148
|
+
"name": "Tab",
|
25149
|
+
"module": "components/tab/tab.component.js"
|
25150
25150
|
}
|
25151
25151
|
}
|
25152
25152
|
]
|