@momentum-design/components 0.71.0 → 0.71.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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/avatar/avatar.component.js",
|
|
@@ -797,6 +736,67 @@
|
|
|
797
736
|
}
|
|
798
737
|
]
|
|
799
738
|
},
|
|
739
|
+
{
|
|
740
|
+
"kind": "javascript-module",
|
|
741
|
+
"path": "components/appheader/appheader.component.js",
|
|
742
|
+
"declarations": [
|
|
743
|
+
{
|
|
744
|
+
"kind": "class",
|
|
745
|
+
"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**.",
|
|
746
|
+
"name": "Appheader",
|
|
747
|
+
"cssParts": [
|
|
748
|
+
{
|
|
749
|
+
"description": "The main container for styling the header.",
|
|
750
|
+
"name": "container"
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"description": "The leading section of the header.",
|
|
754
|
+
"name": "leading-section"
|
|
755
|
+
},
|
|
756
|
+
{
|
|
757
|
+
"description": "The center section of the header.",
|
|
758
|
+
"name": "center-section"
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"description": "The trailing section of the header.",
|
|
762
|
+
"name": "trailing-section"
|
|
763
|
+
}
|
|
764
|
+
],
|
|
765
|
+
"slots": [
|
|
766
|
+
{
|
|
767
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
768
|
+
"name": "leading"
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
772
|
+
"name": "center"
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
776
|
+
"name": "trailing"
|
|
777
|
+
}
|
|
778
|
+
],
|
|
779
|
+
"members": [],
|
|
780
|
+
"superclass": {
|
|
781
|
+
"name": "Component",
|
|
782
|
+
"module": "/src/models"
|
|
783
|
+
},
|
|
784
|
+
"tagName": "mdc-appheader",
|
|
785
|
+
"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 */",
|
|
786
|
+
"customElement": true
|
|
787
|
+
}
|
|
788
|
+
],
|
|
789
|
+
"exports": [
|
|
790
|
+
{
|
|
791
|
+
"kind": "js",
|
|
792
|
+
"name": "default",
|
|
793
|
+
"declaration": {
|
|
794
|
+
"name": "Appheader",
|
|
795
|
+
"module": "components/appheader/appheader.component.js"
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
]
|
|
799
|
+
},
|
|
800
800
|
{
|
|
801
801
|
"kind": "javascript-module",
|
|
802
802
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -1937,75 +1937,57 @@
|
|
|
1937
1937
|
},
|
|
1938
1938
|
{
|
|
1939
1939
|
"kind": "javascript-module",
|
|
1940
|
-
"path": "components/
|
|
1940
|
+
"path": "components/buttonlink/buttonlink.component.js",
|
|
1941
1941
|
"declarations": [
|
|
1942
1942
|
{
|
|
1943
1943
|
"kind": "class",
|
|
1944
|
-
"description": "`mdc-
|
|
1945
|
-
"name": "
|
|
1946
|
-
"slots": [
|
|
1947
|
-
{
|
|
1948
|
-
"description": "Text label of the button.",
|
|
1949
|
-
"name": ""
|
|
1950
|
-
}
|
|
1951
|
-
],
|
|
1944
|
+
"description": "`mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\nfeatures of `mdc-button`. This includes support for variants, sizing, and optional\nprefix and postfix icons via slots.\n\n### Features:\n- Behaves like an link while visually resembling a button.\n- Supports slots for `prefix-icon` and `postfix-icon`.\n- Customizable size, color, and variant through attributes.\n- Inherits accessibility and keyboard interaction support from `mdc-linksimple`.",
|
|
1945
|
+
"name": "ButtonLink",
|
|
1952
1946
|
"members": [
|
|
1953
1947
|
{
|
|
1954
1948
|
"kind": "field",
|
|
1955
1949
|
"name": "size",
|
|
1956
1950
|
"type": {
|
|
1957
|
-
"text": "
|
|
1951
|
+
"text": "PillButtonSize | IconButtonSize"
|
|
1958
1952
|
},
|
|
1959
|
-
"description": "
|
|
1953
|
+
"description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
|
|
1960
1954
|
"default": "32",
|
|
1961
1955
|
"attribute": "size",
|
|
1962
|
-
"reflects": true,
|
|
1963
|
-
"inheritedFrom": {
|
|
1964
|
-
"name": "Buttonsimple",
|
|
1965
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
1966
|
-
}
|
|
1967
|
-
},
|
|
1968
|
-
{
|
|
1969
|
-
"kind": "field",
|
|
1970
|
-
"name": "inverted",
|
|
1971
|
-
"type": {
|
|
1972
|
-
"text": "boolean"
|
|
1973
|
-
},
|
|
1974
|
-
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
1975
|
-
"default": "false",
|
|
1976
|
-
"attribute": "inverted",
|
|
1977
1956
|
"reflects": true
|
|
1978
1957
|
},
|
|
1979
1958
|
{
|
|
1980
1959
|
"kind": "field",
|
|
1981
|
-
"name": "
|
|
1982
|
-
"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.",
|
|
1983
|
-
"default": "'button'",
|
|
1984
|
-
"attribute": "role",
|
|
1985
|
-
"reflects": true,
|
|
1960
|
+
"name": "softDisabled",
|
|
1986
1961
|
"type": {
|
|
1987
|
-
"text": "
|
|
1962
|
+
"text": "boolean | undefined"
|
|
1988
1963
|
},
|
|
1989
|
-
"
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1964
|
+
"description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
1965
|
+
"default": "undefined",
|
|
1966
|
+
"attribute": "soft-disabled",
|
|
1967
|
+
"reflects": true
|
|
1993
1968
|
},
|
|
1994
1969
|
{
|
|
1995
1970
|
"kind": "method",
|
|
1996
|
-
"name": "
|
|
1971
|
+
"name": "setSoftDisabled",
|
|
1997
1972
|
"privacy": "private",
|
|
1998
1973
|
"parameters": [
|
|
1999
1974
|
{
|
|
2000
|
-
"name": "
|
|
1975
|
+
"name": "element",
|
|
1976
|
+
"type": {
|
|
1977
|
+
"text": "HTMLElement"
|
|
1978
|
+
},
|
|
1979
|
+
"description": "The buttonlink element."
|
|
1980
|
+
},
|
|
1981
|
+
{
|
|
1982
|
+
"name": "softDisabled",
|
|
2001
1983
|
"optional": true,
|
|
2002
1984
|
"type": {
|
|
2003
1985
|
"text": "boolean"
|
|
2004
1986
|
},
|
|
2005
|
-
"description": "The
|
|
1987
|
+
"description": "The soft-disabled state."
|
|
2006
1988
|
}
|
|
2007
1989
|
],
|
|
2008
|
-
"description": "
|
|
1990
|
+
"description": "Sets the soft-disabled attribute for the buttonlink.\nWhen soft-disabled, the buttonlink looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute."
|
|
2009
1991
|
},
|
|
2010
1992
|
{
|
|
2011
1993
|
"kind": "field",
|
|
@@ -2136,6 +2118,21 @@
|
|
|
2136
2118
|
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2137
2119
|
}
|
|
2138
2120
|
},
|
|
2121
|
+
{
|
|
2122
|
+
"kind": "field",
|
|
2123
|
+
"name": "disabled",
|
|
2124
|
+
"type": {
|
|
2125
|
+
"text": "boolean | undefined"
|
|
2126
|
+
},
|
|
2127
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2128
|
+
"default": "undefined",
|
|
2129
|
+
"attribute": "disabled",
|
|
2130
|
+
"reflects": true,
|
|
2131
|
+
"inheritedFrom": {
|
|
2132
|
+
"name": "DisabledMixin",
|
|
2133
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
2134
|
+
}
|
|
2135
|
+
},
|
|
2139
2136
|
{
|
|
2140
2137
|
"kind": "field",
|
|
2141
2138
|
"name": "tabIndex",
|
|
@@ -2153,140 +2150,85 @@
|
|
|
2153
2150
|
},
|
|
2154
2151
|
{
|
|
2155
2152
|
"kind": "field",
|
|
2156
|
-
"name": "
|
|
2153
|
+
"name": "inline",
|
|
2157
2154
|
"type": {
|
|
2158
|
-
"text": "boolean
|
|
2155
|
+
"text": "boolean"
|
|
2159
2156
|
},
|
|
2160
|
-
"description": "
|
|
2161
|
-
"default": "
|
|
2162
|
-
"attribute": "
|
|
2157
|
+
"description": "The link can be inline or standalone.",
|
|
2158
|
+
"default": "false",
|
|
2159
|
+
"attribute": "inline",
|
|
2163
2160
|
"reflects": true,
|
|
2164
2161
|
"inheritedFrom": {
|
|
2165
|
-
"name": "
|
|
2166
|
-
"module": "
|
|
2162
|
+
"name": "Linksimple",
|
|
2163
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2167
2164
|
}
|
|
2168
2165
|
},
|
|
2169
2166
|
{
|
|
2170
2167
|
"kind": "field",
|
|
2171
|
-
"name": "
|
|
2168
|
+
"name": "inverted",
|
|
2172
2169
|
"type": {
|
|
2173
|
-
"text": "boolean
|
|
2170
|
+
"text": "boolean"
|
|
2174
2171
|
},
|
|
2175
|
-
"description": "The
|
|
2176
|
-
"default": "
|
|
2177
|
-
"attribute": "
|
|
2172
|
+
"description": "The link color can be inverted by setting the inverted attribute to true.",
|
|
2173
|
+
"default": "false",
|
|
2174
|
+
"attribute": "inverted",
|
|
2178
2175
|
"reflects": true,
|
|
2179
2176
|
"inheritedFrom": {
|
|
2180
|
-
"name": "
|
|
2181
|
-
"module": "components/
|
|
2177
|
+
"name": "Linksimple",
|
|
2178
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2182
2179
|
}
|
|
2183
2180
|
},
|
|
2184
2181
|
{
|
|
2185
2182
|
"kind": "field",
|
|
2186
|
-
"name": "
|
|
2183
|
+
"name": "href",
|
|
2187
2184
|
"type": {
|
|
2188
|
-
"text": "
|
|
2185
|
+
"text": "string"
|
|
2189
2186
|
},
|
|
2190
|
-
"
|
|
2191
|
-
"
|
|
2192
|
-
"attribute": "
|
|
2187
|
+
"default": "'#'",
|
|
2188
|
+
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
2189
|
+
"attribute": "href",
|
|
2193
2190
|
"reflects": true,
|
|
2194
2191
|
"inheritedFrom": {
|
|
2195
|
-
"name": "
|
|
2196
|
-
"module": "components/
|
|
2192
|
+
"name": "Linksimple",
|
|
2193
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2197
2194
|
}
|
|
2198
2195
|
},
|
|
2199
2196
|
{
|
|
2200
2197
|
"kind": "field",
|
|
2201
|
-
"name": "
|
|
2198
|
+
"name": "target",
|
|
2202
2199
|
"type": {
|
|
2203
|
-
"text": "string
|
|
2200
|
+
"text": "string"
|
|
2204
2201
|
},
|
|
2205
|
-
"
|
|
2206
|
-
"
|
|
2207
|
-
"attribute": "
|
|
2202
|
+
"default": "'_self'",
|
|
2203
|
+
"description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
|
|
2204
|
+
"attribute": "target",
|
|
2208
2205
|
"reflects": true,
|
|
2209
2206
|
"inheritedFrom": {
|
|
2210
|
-
"name": "
|
|
2211
|
-
"module": "components/
|
|
2207
|
+
"name": "Linksimple",
|
|
2208
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2212
2209
|
}
|
|
2213
2210
|
},
|
|
2214
2211
|
{
|
|
2215
2212
|
"kind": "field",
|
|
2216
|
-
"name": "
|
|
2213
|
+
"name": "rel",
|
|
2217
2214
|
"type": {
|
|
2218
|
-
"text": "
|
|
2215
|
+
"text": "string | undefined"
|
|
2219
2216
|
},
|
|
2220
|
-
"description": "
|
|
2221
|
-
"
|
|
2222
|
-
"attribute": "type",
|
|
2217
|
+
"description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
|
|
2218
|
+
"attribute": "rel",
|
|
2223
2219
|
"reflects": true,
|
|
2224
2220
|
"inheritedFrom": {
|
|
2225
|
-
"name": "
|
|
2226
|
-
"module": "components/
|
|
2227
|
-
}
|
|
2228
|
-
},
|
|
2229
|
-
{
|
|
2230
|
-
"kind": "method",
|
|
2231
|
-
"name": "executeAction",
|
|
2232
|
-
"privacy": "protected",
|
|
2233
|
-
"inheritedFrom": {
|
|
2234
|
-
"name": "Buttonsimple",
|
|
2235
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2236
|
-
}
|
|
2237
|
-
},
|
|
2238
|
-
{
|
|
2239
|
-
"kind": "method",
|
|
2240
|
-
"name": "setActive",
|
|
2241
|
-
"privacy": "protected",
|
|
2242
|
-
"parameters": [
|
|
2243
|
-
{
|
|
2244
|
-
"name": "element",
|
|
2245
|
-
"type": {
|
|
2246
|
-
"text": "HTMLElement"
|
|
2247
|
-
},
|
|
2248
|
-
"description": "The button element"
|
|
2249
|
-
},
|
|
2250
|
-
{
|
|
2251
|
-
"name": "active",
|
|
2252
|
-
"optional": true,
|
|
2253
|
-
"type": {
|
|
2254
|
-
"text": "boolean"
|
|
2255
|
-
},
|
|
2256
|
-
"description": "The active state of the element"
|
|
2257
|
-
}
|
|
2258
|
-
],
|
|
2259
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
2260
|
-
"inheritedFrom": {
|
|
2261
|
-
"name": "Buttonsimple",
|
|
2262
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2221
|
+
"name": "Linksimple",
|
|
2222
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2263
2223
|
}
|
|
2264
2224
|
},
|
|
2265
2225
|
{
|
|
2266
|
-
"kind": "
|
|
2267
|
-
"name": "
|
|
2226
|
+
"kind": "field",
|
|
2227
|
+
"name": "handleNavigation",
|
|
2268
2228
|
"privacy": "private",
|
|
2269
|
-
"parameters": [
|
|
2270
|
-
{
|
|
2271
|
-
"name": "element",
|
|
2272
|
-
"type": {
|
|
2273
|
-
"text": "HTMLElement"
|
|
2274
|
-
},
|
|
2275
|
-
"description": "The button element."
|
|
2276
|
-
},
|
|
2277
|
-
{
|
|
2278
|
-
"name": "softDisabled",
|
|
2279
|
-
"optional": true,
|
|
2280
|
-
"type": {
|
|
2281
|
-
"text": "boolean"
|
|
2282
|
-
},
|
|
2283
|
-
"description": "The soft-disabled state."
|
|
2284
|
-
}
|
|
2285
|
-
],
|
|
2286
|
-
"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.",
|
|
2287
2229
|
"inheritedFrom": {
|
|
2288
|
-
"name": "
|
|
2289
|
-
"module": "components/
|
|
2230
|
+
"name": "Linksimple",
|
|
2231
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2290
2232
|
}
|
|
2291
2233
|
},
|
|
2292
2234
|
{
|
|
@@ -2294,82 +2236,56 @@
|
|
|
2294
2236
|
"name": "setDisabled",
|
|
2295
2237
|
"privacy": "private",
|
|
2296
2238
|
"parameters": [
|
|
2297
|
-
{
|
|
2298
|
-
"name": "element",
|
|
2299
|
-
"type": {
|
|
2300
|
-
"text": "HTMLElement"
|
|
2301
|
-
},
|
|
2302
|
-
"description": "The button element."
|
|
2303
|
-
},
|
|
2304
2239
|
{
|
|
2305
2240
|
"name": "disabled",
|
|
2306
2241
|
"type": {
|
|
2307
2242
|
"text": "boolean"
|
|
2308
2243
|
},
|
|
2309
|
-
"description": "
|
|
2244
|
+
"description": "Whether the element should be disabled"
|
|
2310
2245
|
}
|
|
2311
2246
|
],
|
|
2312
|
-
"description": "Sets
|
|
2247
|
+
"description": "Sets or removes `aria-disabled` and updates `tabIndex` to reflect\nthe disabled state. When disabled, the element becomes unfocusable;\nwhen enabled, the previous `tabIndex` is restored.",
|
|
2313
2248
|
"inheritedFrom": {
|
|
2314
|
-
"name": "
|
|
2315
|
-
"module": "components/
|
|
2249
|
+
"name": "Linksimple",
|
|
2250
|
+
"module": "components/linksimple/linksimple.component.js"
|
|
2316
2251
|
}
|
|
2317
|
-
}
|
|
2252
|
+
}
|
|
2253
|
+
],
|
|
2254
|
+
"events": [
|
|
2318
2255
|
{
|
|
2319
|
-
"
|
|
2320
|
-
"name": "
|
|
2321
|
-
"
|
|
2256
|
+
"description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
|
|
2257
|
+
"name": "click",
|
|
2258
|
+
"reactName": "onClick",
|
|
2322
2259
|
"inheritedFrom": {
|
|
2323
|
-
"name": "
|
|
2324
|
-
"module": "components/
|
|
2260
|
+
"name": "Linksimple",
|
|
2261
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2325
2262
|
}
|
|
2326
2263
|
},
|
|
2327
2264
|
{
|
|
2328
|
-
"
|
|
2329
|
-
"name": "
|
|
2330
|
-
"
|
|
2331
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
2265
|
+
"description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
|
|
2266
|
+
"name": "keydown",
|
|
2267
|
+
"reactName": "onKeyDown",
|
|
2332
2268
|
"inheritedFrom": {
|
|
2333
|
-
"name": "
|
|
2334
|
-
"module": "components/
|
|
2269
|
+
"name": "Linksimple",
|
|
2270
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2335
2271
|
}
|
|
2336
2272
|
},
|
|
2337
2273
|
{
|
|
2338
|
-
"
|
|
2339
|
-
"name": "
|
|
2340
|
-
"
|
|
2341
|
-
"parameters": [
|
|
2342
|
-
{
|
|
2343
|
-
"name": "event",
|
|
2344
|
-
"type": {
|
|
2345
|
-
"text": "KeyboardEvent"
|
|
2346
|
-
},
|
|
2347
|
-
"description": "The keyboard event."
|
|
2348
|
-
}
|
|
2349
|
-
],
|
|
2350
|
-
"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.",
|
|
2274
|
+
"description": "(React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.",
|
|
2275
|
+
"name": "focus",
|
|
2276
|
+
"reactName": "onFocus",
|
|
2351
2277
|
"inheritedFrom": {
|
|
2352
|
-
"name": "
|
|
2353
|
-
"module": "components/
|
|
2278
|
+
"name": "Linksimple",
|
|
2279
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2354
2280
|
}
|
|
2355
2281
|
},
|
|
2356
2282
|
{
|
|
2357
|
-
"
|
|
2358
|
-
"name": "
|
|
2359
|
-
"
|
|
2360
|
-
"parameters": [
|
|
2361
|
-
{
|
|
2362
|
-
"name": "event",
|
|
2363
|
-
"type": {
|
|
2364
|
-
"text": "KeyboardEvent"
|
|
2365
|
-
},
|
|
2366
|
-
"description": "The keyboard event."
|
|
2367
|
-
}
|
|
2368
|
-
],
|
|
2369
|
-
"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.",
|
|
2283
|
+
"description": "(React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.",
|
|
2284
|
+
"name": "blur",
|
|
2285
|
+
"reactName": "onBlur",
|
|
2370
2286
|
"inheritedFrom": {
|
|
2371
|
-
"name": "
|
|
2372
|
-
"module": "components/
|
|
2287
|
+
"name": "Linksimple",
|
|
2288
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2373
2289
|
}
|
|
2374
2290
|
}
|
|
2375
2291
|
],
|
|
@@ -2377,37 +2293,20 @@
|
|
|
2377
2293
|
{
|
|
2378
2294
|
"name": "size",
|
|
2379
2295
|
"type": {
|
|
2380
|
-
"text": "
|
|
2296
|
+
"text": "PillButtonSize | IconButtonSize"
|
|
2381
2297
|
},
|
|
2382
|
-
"description": "
|
|
2298
|
+
"description": "ButtonLink sizing is based on the buttonlink type.\n - **Pill buttonlink**: 40, 32, 28, 24.\n - **Icon buttonlink**: 64, 52, 40, 32, 28, 24.\n - Tertiary icon buttonlink can also be 20.",
|
|
2383
2299
|
"default": "32",
|
|
2384
|
-
"fieldName": "size"
|
|
2385
|
-
"inheritedFrom": {
|
|
2386
|
-
"name": "Buttonsimple",
|
|
2387
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2388
|
-
}
|
|
2389
|
-
},
|
|
2390
|
-
{
|
|
2391
|
-
"name": "inverted",
|
|
2392
|
-
"type": {
|
|
2393
|
-
"text": "boolean"
|
|
2394
|
-
},
|
|
2395
|
-
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
2396
|
-
"default": "false",
|
|
2397
|
-
"fieldName": "inverted"
|
|
2300
|
+
"fieldName": "size"
|
|
2398
2301
|
},
|
|
2399
2302
|
{
|
|
2400
|
-
"name": "
|
|
2401
|
-
"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.",
|
|
2402
|
-
"default": "'button'",
|
|
2403
|
-
"fieldName": "role",
|
|
2303
|
+
"name": "soft-disabled",
|
|
2404
2304
|
"type": {
|
|
2405
|
-
"text": "
|
|
2305
|
+
"text": "boolean | undefined"
|
|
2406
2306
|
},
|
|
2407
|
-
"
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
}
|
|
2307
|
+
"description": "Indicates whether the buttonlink is soft disabled.\nWhen set to `true`, the buttonlink 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 buttonlink behaves like a disabled buttonlink, allowing only focus and\npreventing any interactions (clicks or keyboard actions) from triggering unintended actions.",
|
|
2308
|
+
"default": "undefined",
|
|
2309
|
+
"fieldName": "softDisabled"
|
|
2411
2310
|
},
|
|
2412
2311
|
{
|
|
2413
2312
|
"name": "prefix-icon",
|
|
@@ -2459,6 +2358,19 @@
|
|
|
2459
2358
|
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
2460
2359
|
}
|
|
2461
2360
|
},
|
|
2361
|
+
{
|
|
2362
|
+
"name": "disabled",
|
|
2363
|
+
"type": {
|
|
2364
|
+
"text": "boolean | undefined"
|
|
2365
|
+
},
|
|
2366
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2367
|
+
"default": "undefined",
|
|
2368
|
+
"fieldName": "disabled",
|
|
2369
|
+
"inheritedFrom": {
|
|
2370
|
+
"name": "DisabledMixin",
|
|
2371
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
2372
|
+
}
|
|
2373
|
+
},
|
|
2462
2374
|
{
|
|
2463
2375
|
"name": "tabIndex",
|
|
2464
2376
|
"type": {
|
|
@@ -2473,68 +2385,67 @@
|
|
|
2473
2385
|
}
|
|
2474
2386
|
},
|
|
2475
2387
|
{
|
|
2476
|
-
"name": "
|
|
2388
|
+
"name": "inline",
|
|
2477
2389
|
"type": {
|
|
2478
|
-
"text": "boolean
|
|
2390
|
+
"text": "boolean"
|
|
2479
2391
|
},
|
|
2480
|
-
"description": "
|
|
2481
|
-
"default": "
|
|
2482
|
-
"fieldName": "
|
|
2392
|
+
"description": "The link can be inline or standalone.",
|
|
2393
|
+
"default": "false",
|
|
2394
|
+
"fieldName": "inline",
|
|
2483
2395
|
"inheritedFrom": {
|
|
2484
|
-
"name": "
|
|
2485
|
-
"module": "src/
|
|
2396
|
+
"name": "Linksimple",
|
|
2397
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2486
2398
|
}
|
|
2487
2399
|
},
|
|
2488
2400
|
{
|
|
2489
|
-
"name": "
|
|
2401
|
+
"name": "inverted",
|
|
2490
2402
|
"type": {
|
|
2491
|
-
"text": "boolean
|
|
2403
|
+
"text": "boolean"
|
|
2492
2404
|
},
|
|
2493
|
-
"description": "The
|
|
2494
|
-
"default": "
|
|
2495
|
-
"fieldName": "
|
|
2405
|
+
"description": "The link color can be inverted by setting the inverted attribute to true.",
|
|
2406
|
+
"default": "false",
|
|
2407
|
+
"fieldName": "inverted",
|
|
2496
2408
|
"inheritedFrom": {
|
|
2497
|
-
"name": "
|
|
2498
|
-
"module": "src/components/
|
|
2409
|
+
"name": "Linksimple",
|
|
2410
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2499
2411
|
}
|
|
2500
2412
|
},
|
|
2501
2413
|
{
|
|
2502
|
-
"name": "
|
|
2414
|
+
"name": "href",
|
|
2503
2415
|
"type": {
|
|
2504
|
-
"text": "
|
|
2416
|
+
"text": "string"
|
|
2505
2417
|
},
|
|
2506
|
-
"
|
|
2507
|
-
"
|
|
2508
|
-
"fieldName": "
|
|
2418
|
+
"default": "'#'",
|
|
2419
|
+
"description": "Href for navigation. The URL that the hyperlink points to",
|
|
2420
|
+
"fieldName": "href",
|
|
2509
2421
|
"inheritedFrom": {
|
|
2510
|
-
"name": "
|
|
2511
|
-
"module": "src/components/
|
|
2422
|
+
"name": "Linksimple",
|
|
2423
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2512
2424
|
}
|
|
2513
2425
|
},
|
|
2514
2426
|
{
|
|
2515
|
-
"name": "
|
|
2427
|
+
"name": "target",
|
|
2516
2428
|
"type": {
|
|
2517
|
-
"text": "string
|
|
2429
|
+
"text": "string"
|
|
2518
2430
|
},
|
|
2519
|
-
"
|
|
2520
|
-
"
|
|
2521
|
-
"fieldName": "
|
|
2431
|
+
"default": "'_self'",
|
|
2432
|
+
"description": "Optional target: _blank, _self, _parent, _top and _unfencedTop",
|
|
2433
|
+
"fieldName": "target",
|
|
2522
2434
|
"inheritedFrom": {
|
|
2523
|
-
"name": "
|
|
2524
|
-
"module": "src/components/
|
|
2435
|
+
"name": "Linksimple",
|
|
2436
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2525
2437
|
}
|
|
2526
2438
|
},
|
|
2527
2439
|
{
|
|
2528
|
-
"name": "
|
|
2440
|
+
"name": "rel",
|
|
2529
2441
|
"type": {
|
|
2530
|
-
"text": "
|
|
2442
|
+
"text": "string | undefined"
|
|
2531
2443
|
},
|
|
2532
|
-
"description": "
|
|
2533
|
-
"
|
|
2534
|
-
"fieldName": "type",
|
|
2444
|
+
"description": "Optional rel attribute that defines the relationship of the linked URL as space-separated link types.",
|
|
2445
|
+
"fieldName": "rel",
|
|
2535
2446
|
"inheritedFrom": {
|
|
2536
|
-
"name": "
|
|
2537
|
-
"module": "src/components/
|
|
2447
|
+
"name": "Linksimple",
|
|
2448
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2538
2449
|
}
|
|
2539
2450
|
}
|
|
2540
2451
|
],
|
|
@@ -2545,47 +2456,83 @@
|
|
|
2545
2456
|
}
|
|
2546
2457
|
],
|
|
2547
2458
|
"superclass": {
|
|
2548
|
-
"name": "
|
|
2549
|
-
"module": "/src/components/
|
|
2459
|
+
"name": "Linksimple",
|
|
2460
|
+
"module": "/src/components/linksimple/linksimple.component"
|
|
2550
2461
|
},
|
|
2551
|
-
"tagName": "mdc-
|
|
2552
|
-
"jsDoc": "/**\n * `mdc-
|
|
2462
|
+
"tagName": "mdc-buttonlink",
|
|
2463
|
+
"jsDoc": "/**\n * `mdc-buttonlink` combines the functional behavior of `mdc-linksimple` with the visual and structural\n * features of `mdc-button`. This includes support for variants, sizing, and optional\n * prefix and postfix icons via slots.\n *\n * ### Features:\n * - Behaves like an link while visually resembling a button.\n * - Supports slots for `prefix-icon` and `postfix-icon`.\n * - Customizable size, color, and variant through attributes.\n * - Inherits accessibility and keyboard interaction support from `mdc-linksimple`.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-buttonlink\n *\n * @event click - (React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.\n * @event keydown - (React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.\n * @event focus - (React: onFocus) Fired when the buttonLink receives keyboard or mouse focus.\n * @event blur - (React: onBlur) Fired when the buttonLink loses keyboard or mouse focus.\n *\n */",
|
|
2553
2464
|
"customElement": true,
|
|
2554
|
-
"
|
|
2465
|
+
"cssProperties": [
|
|
2555
2466
|
{
|
|
2556
|
-
"description": "
|
|
2557
|
-
"name": "
|
|
2558
|
-
"reactName": "onClick",
|
|
2467
|
+
"description": "Border radius of the link.",
|
|
2468
|
+
"name": "--mdc-link-border-radius",
|
|
2559
2469
|
"inheritedFrom": {
|
|
2560
|
-
"name": "
|
|
2561
|
-
"module": "src/components/
|
|
2470
|
+
"name": "Linksimple",
|
|
2471
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2562
2472
|
}
|
|
2563
2473
|
},
|
|
2564
2474
|
{
|
|
2565
|
-
"description": "
|
|
2566
|
-
"name": "
|
|
2567
|
-
"reactName": "onKeyDown",
|
|
2475
|
+
"description": "Color of the link’s child content in the active state.",
|
|
2476
|
+
"name": "--mdc-link-color-active",
|
|
2568
2477
|
"inheritedFrom": {
|
|
2569
|
-
"name": "
|
|
2570
|
-
"module": "src/components/
|
|
2478
|
+
"name": "Linksimple",
|
|
2479
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2571
2480
|
}
|
|
2572
2481
|
},
|
|
2573
2482
|
{
|
|
2574
|
-
"description": "
|
|
2575
|
-
"name": "
|
|
2576
|
-
"reactName": "onKeyUp",
|
|
2483
|
+
"description": "Color of the link’s child content in the disabled state.",
|
|
2484
|
+
"name": "--mdc-link-color-disabled",
|
|
2577
2485
|
"inheritedFrom": {
|
|
2578
|
-
"name": "
|
|
2579
|
-
"module": "src/components/
|
|
2486
|
+
"name": "Linksimple",
|
|
2487
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2580
2488
|
}
|
|
2581
2489
|
},
|
|
2582
2490
|
{
|
|
2583
|
-
"description": "
|
|
2584
|
-
"name": "
|
|
2585
|
-
"reactName": "onFocus",
|
|
2491
|
+
"description": "Color of the link’s child content in the hover state.",
|
|
2492
|
+
"name": "--mdc-link-color-hover",
|
|
2586
2493
|
"inheritedFrom": {
|
|
2587
|
-
"name": "
|
|
2588
|
-
"module": "src/components/
|
|
2494
|
+
"name": "Linksimple",
|
|
2495
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2496
|
+
}
|
|
2497
|
+
},
|
|
2498
|
+
{
|
|
2499
|
+
"description": "Color of the link’s child content in the normal state.",
|
|
2500
|
+
"name": "--mdc-link-color-normal",
|
|
2501
|
+
"inheritedFrom": {
|
|
2502
|
+
"name": "Linksimple",
|
|
2503
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2504
|
+
}
|
|
2505
|
+
},
|
|
2506
|
+
{
|
|
2507
|
+
"description": "Color of the inverted link’s child content in the active state.",
|
|
2508
|
+
"name": "--mdc-link-inverted-color-active",
|
|
2509
|
+
"inheritedFrom": {
|
|
2510
|
+
"name": "Linksimple",
|
|
2511
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2512
|
+
}
|
|
2513
|
+
},
|
|
2514
|
+
{
|
|
2515
|
+
"description": "Color of the inverted link’s child content in the disabled state.",
|
|
2516
|
+
"name": "--mdc-link-inverted-color-disabled",
|
|
2517
|
+
"inheritedFrom": {
|
|
2518
|
+
"name": "Linksimple",
|
|
2519
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2520
|
+
}
|
|
2521
|
+
},
|
|
2522
|
+
{
|
|
2523
|
+
"description": "Color of the inverted link’s child content in the hover state.",
|
|
2524
|
+
"name": "--mdc-link-inverted-color-hover",
|
|
2525
|
+
"inheritedFrom": {
|
|
2526
|
+
"name": "Linksimple",
|
|
2527
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2528
|
+
}
|
|
2529
|
+
},
|
|
2530
|
+
{
|
|
2531
|
+
"description": "Color of the inverted link’s child content in the normal state.",
|
|
2532
|
+
"name": "--mdc-link-inverted-color-normal",
|
|
2533
|
+
"inheritedFrom": {
|
|
2534
|
+
"name": "Linksimple",
|
|
2535
|
+
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2589
2536
|
}
|
|
2590
2537
|
}
|
|
2591
2538
|
]
|
|
@@ -2596,65 +2543,83 @@
|
|
|
2596
2543
|
"kind": "js",
|
|
2597
2544
|
"name": "default",
|
|
2598
2545
|
"declaration": {
|
|
2599
|
-
"name": "
|
|
2600
|
-
"module": "components/
|
|
2546
|
+
"name": "ButtonLink",
|
|
2547
|
+
"module": "components/buttonlink/buttonlink.component.js"
|
|
2601
2548
|
}
|
|
2602
2549
|
}
|
|
2603
2550
|
]
|
|
2604
2551
|
},
|
|
2605
2552
|
{
|
|
2606
2553
|
"kind": "javascript-module",
|
|
2607
|
-
"path": "components/
|
|
2554
|
+
"path": "components/button/button.component.js",
|
|
2608
2555
|
"declarations": [
|
|
2609
2556
|
{
|
|
2610
2557
|
"kind": "class",
|
|
2611
|
-
"description": "`mdc-
|
|
2612
|
-
"name": "
|
|
2558
|
+
"description": "`mdc-button` is a component that can be configured in various ways to suit different use cases.\n\nButton Variants:\n- **Primary**: Solid background color.\n- **Secondary**: Transparent background with a solid border.\n- **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n\nButton Colors:\n- **Positive**: Green color.\n- **Negative**: Red color.\n- **Accent**: Blue color.\n- **Promotional**: Purple color.\n- **Default**: White color.\n\nButton Sizes (in REM units):\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- **Tertiary icon button**: 20.\n\nButton Types:\n- **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n- **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n- **Icon button**: A button represented by just an icon without any text.\nThe type of button is inferred based on the presence of slot and/or prefix and postfix icons.",
|
|
2559
|
+
"name": "Button",
|
|
2560
|
+
"slots": [
|
|
2561
|
+
{
|
|
2562
|
+
"description": "Text label of the button.",
|
|
2563
|
+
"name": ""
|
|
2564
|
+
}
|
|
2565
|
+
],
|
|
2613
2566
|
"members": [
|
|
2614
2567
|
{
|
|
2615
2568
|
"kind": "field",
|
|
2616
|
-
"name": "size",
|
|
2569
|
+
"name": "size",
|
|
2570
|
+
"type": {
|
|
2571
|
+
"text": "ButtonSize"
|
|
2572
|
+
},
|
|
2573
|
+
"description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
|
|
2574
|
+
"default": "32",
|
|
2575
|
+
"attribute": "size",
|
|
2576
|
+
"reflects": true,
|
|
2577
|
+
"inheritedFrom": {
|
|
2578
|
+
"name": "Buttonsimple",
|
|
2579
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2580
|
+
}
|
|
2581
|
+
},
|
|
2582
|
+
{
|
|
2583
|
+
"kind": "field",
|
|
2584
|
+
"name": "inverted",
|
|
2617
2585
|
"type": {
|
|
2618
|
-
"text": "
|
|
2586
|
+
"text": "boolean"
|
|
2619
2587
|
},
|
|
2620
|
-
"description": "
|
|
2621
|
-
"default": "
|
|
2622
|
-
"attribute": "
|
|
2588
|
+
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
2589
|
+
"default": "false",
|
|
2590
|
+
"attribute": "inverted",
|
|
2623
2591
|
"reflects": true
|
|
2624
2592
|
},
|
|
2625
2593
|
{
|
|
2626
2594
|
"kind": "field",
|
|
2627
|
-
"name": "
|
|
2595
|
+
"name": "role",
|
|
2596
|
+
"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.",
|
|
2597
|
+
"default": "'button'",
|
|
2598
|
+
"attribute": "role",
|
|
2599
|
+
"reflects": true,
|
|
2628
2600
|
"type": {
|
|
2629
|
-
"text": "
|
|
2601
|
+
"text": "string"
|
|
2630
2602
|
},
|
|
2631
|
-
"
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2603
|
+
"inheritedFrom": {
|
|
2604
|
+
"name": "Buttonsimple",
|
|
2605
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2606
|
+
}
|
|
2635
2607
|
},
|
|
2636
2608
|
{
|
|
2637
2609
|
"kind": "method",
|
|
2638
|
-
"name": "
|
|
2610
|
+
"name": "inferFilledIconName",
|
|
2639
2611
|
"privacy": "private",
|
|
2640
2612
|
"parameters": [
|
|
2641
2613
|
{
|
|
2642
|
-
"name": "
|
|
2643
|
-
"type": {
|
|
2644
|
-
"text": "HTMLElement"
|
|
2645
|
-
},
|
|
2646
|
-
"description": "The buttonlink element."
|
|
2647
|
-
},
|
|
2648
|
-
{
|
|
2649
|
-
"name": "softDisabled",
|
|
2614
|
+
"name": "active",
|
|
2650
2615
|
"optional": true,
|
|
2651
2616
|
"type": {
|
|
2652
2617
|
"text": "boolean"
|
|
2653
2618
|
},
|
|
2654
|
-
"description": "The
|
|
2619
|
+
"description": "The active state."
|
|
2655
2620
|
}
|
|
2656
2621
|
],
|
|
2657
|
-
"description": "
|
|
2622
|
+
"description": "Modifies the icon name based on the active state.\nIf the button is active, the icon name is suffixed with '-filled'.\nIf the button is inactive, the icon name is restored to its original value.\nIf '-filled' icon is not available, the icon name remains unchanged."
|
|
2658
2623
|
},
|
|
2659
2624
|
{
|
|
2660
2625
|
"kind": "field",
|
|
@@ -2785,21 +2750,6 @@
|
|
|
2785
2750
|
"module": "utils/mixins/ButtonComponentMixin.js"
|
|
2786
2751
|
}
|
|
2787
2752
|
},
|
|
2788
|
-
{
|
|
2789
|
-
"kind": "field",
|
|
2790
|
-
"name": "disabled",
|
|
2791
|
-
"type": {
|
|
2792
|
-
"text": "boolean | undefined"
|
|
2793
|
-
},
|
|
2794
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2795
|
-
"default": "undefined",
|
|
2796
|
-
"attribute": "disabled",
|
|
2797
|
-
"reflects": true,
|
|
2798
|
-
"inheritedFrom": {
|
|
2799
|
-
"name": "DisabledMixin",
|
|
2800
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
2801
|
-
}
|
|
2802
|
-
},
|
|
2803
2753
|
{
|
|
2804
2754
|
"kind": "field",
|
|
2805
2755
|
"name": "tabIndex",
|
|
@@ -2817,163 +2767,261 @@
|
|
|
2817
2767
|
},
|
|
2818
2768
|
{
|
|
2819
2769
|
"kind": "field",
|
|
2820
|
-
"name": "
|
|
2770
|
+
"name": "disabled",
|
|
2821
2771
|
"type": {
|
|
2822
|
-
"text": "boolean"
|
|
2772
|
+
"text": "boolean | undefined"
|
|
2823
2773
|
},
|
|
2824
|
-
"description": "
|
|
2825
|
-
"default": "
|
|
2826
|
-
"attribute": "
|
|
2774
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
2775
|
+
"default": "undefined",
|
|
2776
|
+
"attribute": "disabled",
|
|
2827
2777
|
"reflects": true,
|
|
2828
2778
|
"inheritedFrom": {
|
|
2829
|
-
"name": "
|
|
2830
|
-
"module": "
|
|
2779
|
+
"name": "DisabledMixin",
|
|
2780
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
2831
2781
|
}
|
|
2832
2782
|
},
|
|
2833
2783
|
{
|
|
2834
2784
|
"kind": "field",
|
|
2835
|
-
"name": "
|
|
2785
|
+
"name": "active",
|
|
2836
2786
|
"type": {
|
|
2837
|
-
"text": "boolean"
|
|
2787
|
+
"text": "boolean | undefined"
|
|
2838
2788
|
},
|
|
2839
|
-
"description": "The
|
|
2840
|
-
"default": "
|
|
2841
|
-
"attribute": "
|
|
2789
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
2790
|
+
"default": "undefined",
|
|
2791
|
+
"attribute": "active",
|
|
2842
2792
|
"reflects": true,
|
|
2843
2793
|
"inheritedFrom": {
|
|
2844
|
-
"name": "
|
|
2845
|
-
"module": "components/
|
|
2794
|
+
"name": "Buttonsimple",
|
|
2795
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2846
2796
|
}
|
|
2847
2797
|
},
|
|
2848
2798
|
{
|
|
2849
2799
|
"kind": "field",
|
|
2850
|
-
"name": "
|
|
2800
|
+
"name": "softDisabled",
|
|
2851
2801
|
"type": {
|
|
2852
|
-
"text": "
|
|
2802
|
+
"text": "boolean | undefined"
|
|
2853
2803
|
},
|
|
2854
|
-
"
|
|
2855
|
-
"
|
|
2856
|
-
"attribute": "
|
|
2804
|
+
"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.",
|
|
2805
|
+
"default": "undefined",
|
|
2806
|
+
"attribute": "soft-disabled",
|
|
2857
2807
|
"reflects": true,
|
|
2858
2808
|
"inheritedFrom": {
|
|
2859
|
-
"name": "
|
|
2860
|
-
"module": "components/
|
|
2809
|
+
"name": "Buttonsimple",
|
|
2810
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2861
2811
|
}
|
|
2862
2812
|
},
|
|
2863
2813
|
{
|
|
2864
2814
|
"kind": "field",
|
|
2865
|
-
"name": "
|
|
2815
|
+
"name": "ariaStateKey",
|
|
2866
2816
|
"type": {
|
|
2867
|
-
"text": "string"
|
|
2817
|
+
"text": "string | undefined"
|
|
2868
2818
|
},
|
|
2869
|
-
"
|
|
2870
|
-
"
|
|
2871
|
-
"attribute": "
|
|
2819
|
+
"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`",
|
|
2820
|
+
"default": "'aria-pressed' (when)",
|
|
2821
|
+
"attribute": "ariaStateKey",
|
|
2872
2822
|
"reflects": true,
|
|
2873
2823
|
"inheritedFrom": {
|
|
2874
|
-
"name": "
|
|
2875
|
-
"module": "components/
|
|
2824
|
+
"name": "Buttonsimple",
|
|
2825
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2876
2826
|
}
|
|
2877
2827
|
},
|
|
2878
2828
|
{
|
|
2879
2829
|
"kind": "field",
|
|
2880
|
-
"name": "
|
|
2830
|
+
"name": "type",
|
|
2881
2831
|
"type": {
|
|
2882
|
-
"text": "
|
|
2832
|
+
"text": "ButtonType"
|
|
2883
2833
|
},
|
|
2884
|
-
"description": "
|
|
2885
|
-
"
|
|
2834
|
+
"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.",
|
|
2835
|
+
"default": "button",
|
|
2836
|
+
"attribute": "type",
|
|
2886
2837
|
"reflects": true,
|
|
2887
2838
|
"inheritedFrom": {
|
|
2888
|
-
"name": "
|
|
2889
|
-
"module": "components/
|
|
2839
|
+
"name": "Buttonsimple",
|
|
2840
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2890
2841
|
}
|
|
2891
2842
|
},
|
|
2892
2843
|
{
|
|
2893
|
-
"kind": "
|
|
2894
|
-
"name": "
|
|
2844
|
+
"kind": "method",
|
|
2845
|
+
"name": "executeAction",
|
|
2846
|
+
"privacy": "protected",
|
|
2847
|
+
"inheritedFrom": {
|
|
2848
|
+
"name": "Buttonsimple",
|
|
2849
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2850
|
+
}
|
|
2851
|
+
},
|
|
2852
|
+
{
|
|
2853
|
+
"kind": "method",
|
|
2854
|
+
"name": "setActive",
|
|
2855
|
+
"privacy": "protected",
|
|
2856
|
+
"parameters": [
|
|
2857
|
+
{
|
|
2858
|
+
"name": "element",
|
|
2859
|
+
"type": {
|
|
2860
|
+
"text": "HTMLElement"
|
|
2861
|
+
},
|
|
2862
|
+
"description": "The button element"
|
|
2863
|
+
},
|
|
2864
|
+
{
|
|
2865
|
+
"name": "active",
|
|
2866
|
+
"optional": true,
|
|
2867
|
+
"type": {
|
|
2868
|
+
"text": "boolean"
|
|
2869
|
+
},
|
|
2870
|
+
"description": "The active state of the element"
|
|
2871
|
+
}
|
|
2872
|
+
],
|
|
2873
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
2874
|
+
"inheritedFrom": {
|
|
2875
|
+
"name": "Buttonsimple",
|
|
2876
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2877
|
+
}
|
|
2878
|
+
},
|
|
2879
|
+
{
|
|
2880
|
+
"kind": "method",
|
|
2881
|
+
"name": "setSoftDisabled",
|
|
2895
2882
|
"privacy": "private",
|
|
2883
|
+
"parameters": [
|
|
2884
|
+
{
|
|
2885
|
+
"name": "element",
|
|
2886
|
+
"type": {
|
|
2887
|
+
"text": "HTMLElement"
|
|
2888
|
+
},
|
|
2889
|
+
"description": "The button element."
|
|
2890
|
+
},
|
|
2891
|
+
{
|
|
2892
|
+
"name": "softDisabled",
|
|
2893
|
+
"optional": true,
|
|
2894
|
+
"type": {
|
|
2895
|
+
"text": "boolean"
|
|
2896
|
+
},
|
|
2897
|
+
"description": "The soft-disabled state."
|
|
2898
|
+
}
|
|
2899
|
+
],
|
|
2900
|
+
"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.",
|
|
2896
2901
|
"inheritedFrom": {
|
|
2897
|
-
"name": "
|
|
2898
|
-
"module": "components/
|
|
2902
|
+
"name": "Buttonsimple",
|
|
2903
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2904
|
+
}
|
|
2905
|
+
},
|
|
2906
|
+
{
|
|
2907
|
+
"kind": "method",
|
|
2908
|
+
"name": "setDisabled",
|
|
2909
|
+
"privacy": "private",
|
|
2910
|
+
"parameters": [
|
|
2911
|
+
{
|
|
2912
|
+
"name": "element",
|
|
2913
|
+
"type": {
|
|
2914
|
+
"text": "HTMLElement"
|
|
2915
|
+
},
|
|
2916
|
+
"description": "The button element."
|
|
2917
|
+
},
|
|
2918
|
+
{
|
|
2919
|
+
"name": "disabled",
|
|
2920
|
+
"type": {
|
|
2921
|
+
"text": "boolean"
|
|
2922
|
+
},
|
|
2923
|
+
"description": "The disabled state."
|
|
2924
|
+
}
|
|
2925
|
+
],
|
|
2926
|
+
"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.",
|
|
2927
|
+
"inheritedFrom": {
|
|
2928
|
+
"name": "Buttonsimple",
|
|
2929
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2930
|
+
}
|
|
2931
|
+
},
|
|
2932
|
+
{
|
|
2933
|
+
"kind": "method",
|
|
2934
|
+
"name": "triggerClickEvent",
|
|
2935
|
+
"privacy": "private",
|
|
2936
|
+
"inheritedFrom": {
|
|
2937
|
+
"name": "Buttonsimple",
|
|
2938
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2939
|
+
}
|
|
2940
|
+
},
|
|
2941
|
+
{
|
|
2942
|
+
"kind": "method",
|
|
2943
|
+
"name": "handleBlur",
|
|
2944
|
+
"privacy": "private",
|
|
2945
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
2946
|
+
"inheritedFrom": {
|
|
2947
|
+
"name": "Buttonsimple",
|
|
2948
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2949
|
+
}
|
|
2950
|
+
},
|
|
2951
|
+
{
|
|
2952
|
+
"kind": "method",
|
|
2953
|
+
"name": "handleKeyDown",
|
|
2954
|
+
"privacy": "private",
|
|
2955
|
+
"parameters": [
|
|
2956
|
+
{
|
|
2957
|
+
"name": "event",
|
|
2958
|
+
"type": {
|
|
2959
|
+
"text": "KeyboardEvent"
|
|
2960
|
+
},
|
|
2961
|
+
"description": "The keyboard event."
|
|
2962
|
+
}
|
|
2963
|
+
],
|
|
2964
|
+
"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.",
|
|
2965
|
+
"inheritedFrom": {
|
|
2966
|
+
"name": "Buttonsimple",
|
|
2967
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2899
2968
|
}
|
|
2900
2969
|
},
|
|
2901
2970
|
{
|
|
2902
2971
|
"kind": "method",
|
|
2903
|
-
"name": "
|
|
2972
|
+
"name": "handleKeyUp",
|
|
2904
2973
|
"privacy": "private",
|
|
2905
2974
|
"parameters": [
|
|
2906
2975
|
{
|
|
2907
|
-
"name": "
|
|
2976
|
+
"name": "event",
|
|
2908
2977
|
"type": {
|
|
2909
|
-
"text": "
|
|
2978
|
+
"text": "KeyboardEvent"
|
|
2910
2979
|
},
|
|
2911
|
-
"description": "
|
|
2980
|
+
"description": "The keyboard event."
|
|
2912
2981
|
}
|
|
2913
2982
|
],
|
|
2914
|
-
"description": "
|
|
2983
|
+
"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.",
|
|
2915
2984
|
"inheritedFrom": {
|
|
2916
|
-
"name": "
|
|
2917
|
-
"module": "components/
|
|
2985
|
+
"name": "Buttonsimple",
|
|
2986
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
2918
2987
|
}
|
|
2919
2988
|
}
|
|
2920
2989
|
],
|
|
2921
|
-
"
|
|
2922
|
-
{
|
|
2923
|
-
"description": "(React: onClick) Fired when the user activates the buttonLink using a mouse or assistive technology.",
|
|
2924
|
-
"name": "click",
|
|
2925
|
-
"reactName": "onClick",
|
|
2926
|
-
"inheritedFrom": {
|
|
2927
|
-
"name": "Linksimple",
|
|
2928
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2929
|
-
}
|
|
2930
|
-
},
|
|
2931
|
-
{
|
|
2932
|
-
"description": "(React: onKeyDown) Fired when the user presses a key while the buttonLink has focus.",
|
|
2933
|
-
"name": "keydown",
|
|
2934
|
-
"reactName": "onKeyDown",
|
|
2935
|
-
"inheritedFrom": {
|
|
2936
|
-
"name": "Linksimple",
|
|
2937
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2938
|
-
}
|
|
2939
|
-
},
|
|
2990
|
+
"attributes": [
|
|
2940
2991
|
{
|
|
2941
|
-
"
|
|
2942
|
-
"
|
|
2943
|
-
|
|
2992
|
+
"name": "size",
|
|
2993
|
+
"type": {
|
|
2994
|
+
"text": "ButtonSize"
|
|
2995
|
+
},
|
|
2996
|
+
"description": "Button sizing is based on the button type.\n- **Pill button**: 40, 32, 28, 24.\n- **Icon button**: 64, 52, 40, 32, 28, 24.\n- Tertiary icon button can also be 20.",
|
|
2997
|
+
"default": "32",
|
|
2998
|
+
"fieldName": "size",
|
|
2944
2999
|
"inheritedFrom": {
|
|
2945
|
-
"name": "
|
|
2946
|
-
"module": "src/components/
|
|
3000
|
+
"name": "Buttonsimple",
|
|
3001
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
2947
3002
|
}
|
|
2948
3003
|
},
|
|
2949
3004
|
{
|
|
2950
|
-
"
|
|
2951
|
-
"name": "blur",
|
|
2952
|
-
"reactName": "onBlur",
|
|
2953
|
-
"inheritedFrom": {
|
|
2954
|
-
"name": "Linksimple",
|
|
2955
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
2956
|
-
}
|
|
2957
|
-
}
|
|
2958
|
-
],
|
|
2959
|
-
"attributes": [
|
|
2960
|
-
{
|
|
2961
|
-
"name": "size",
|
|
3005
|
+
"name": "inverted",
|
|
2962
3006
|
"type": {
|
|
2963
|
-
"text": "
|
|
3007
|
+
"text": "boolean"
|
|
2964
3008
|
},
|
|
2965
|
-
"description": "
|
|
2966
|
-
"default": "
|
|
2967
|
-
"fieldName": "
|
|
3009
|
+
"description": "The button color can be inverted by setting the inverted attribute to true.\n\nOnly applies when variant is set to `primary`, color is set to `default`\nand button is not `active`.",
|
|
3010
|
+
"default": "false",
|
|
3011
|
+
"fieldName": "inverted"
|
|
2968
3012
|
},
|
|
2969
3013
|
{
|
|
2970
|
-
"name": "
|
|
3014
|
+
"name": "role",
|
|
3015
|
+
"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.",
|
|
3016
|
+
"default": "'button'",
|
|
3017
|
+
"fieldName": "role",
|
|
2971
3018
|
"type": {
|
|
2972
|
-
"text": "
|
|
3019
|
+
"text": "string"
|
|
2973
3020
|
},
|
|
2974
|
-
"
|
|
2975
|
-
|
|
2976
|
-
|
|
3021
|
+
"inheritedFrom": {
|
|
3022
|
+
"name": "Buttonsimple",
|
|
3023
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3024
|
+
}
|
|
2977
3025
|
},
|
|
2978
3026
|
{
|
|
2979
3027
|
"name": "prefix-icon",
|
|
@@ -3025,19 +3073,6 @@
|
|
|
3025
3073
|
"module": "src/utils/mixins/ButtonComponentMixin.ts"
|
|
3026
3074
|
}
|
|
3027
3075
|
},
|
|
3028
|
-
{
|
|
3029
|
-
"name": "disabled",
|
|
3030
|
-
"type": {
|
|
3031
|
-
"text": "boolean | undefined"
|
|
3032
|
-
},
|
|
3033
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3034
|
-
"default": "undefined",
|
|
3035
|
-
"fieldName": "disabled",
|
|
3036
|
-
"inheritedFrom": {
|
|
3037
|
-
"name": "DisabledMixin",
|
|
3038
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
3039
|
-
}
|
|
3040
|
-
},
|
|
3041
3076
|
{
|
|
3042
3077
|
"name": "tabIndex",
|
|
3043
3078
|
"type": {
|
|
@@ -3052,67 +3087,68 @@
|
|
|
3052
3087
|
}
|
|
3053
3088
|
},
|
|
3054
3089
|
{
|
|
3055
|
-
"name": "
|
|
3090
|
+
"name": "disabled",
|
|
3056
3091
|
"type": {
|
|
3057
|
-
"text": "boolean"
|
|
3092
|
+
"text": "boolean | undefined"
|
|
3058
3093
|
},
|
|
3059
|
-
"description": "
|
|
3060
|
-
"default": "
|
|
3061
|
-
"fieldName": "
|
|
3094
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3095
|
+
"default": "undefined",
|
|
3096
|
+
"fieldName": "disabled",
|
|
3062
3097
|
"inheritedFrom": {
|
|
3063
|
-
"name": "
|
|
3064
|
-
"module": "src/
|
|
3098
|
+
"name": "DisabledMixin",
|
|
3099
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
3065
3100
|
}
|
|
3066
3101
|
},
|
|
3067
3102
|
{
|
|
3068
|
-
"name": "
|
|
3103
|
+
"name": "active",
|
|
3069
3104
|
"type": {
|
|
3070
|
-
"text": "boolean"
|
|
3105
|
+
"text": "boolean | undefined"
|
|
3071
3106
|
},
|
|
3072
|
-
"description": "The
|
|
3073
|
-
"default": "
|
|
3074
|
-
"fieldName": "
|
|
3107
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
3108
|
+
"default": "undefined",
|
|
3109
|
+
"fieldName": "active",
|
|
3075
3110
|
"inheritedFrom": {
|
|
3076
|
-
"name": "
|
|
3077
|
-
"module": "src/components/
|
|
3111
|
+
"name": "Buttonsimple",
|
|
3112
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3078
3113
|
}
|
|
3079
3114
|
},
|
|
3080
3115
|
{
|
|
3081
|
-
"name": "
|
|
3116
|
+
"name": "soft-disabled",
|
|
3082
3117
|
"type": {
|
|
3083
|
-
"text": "
|
|
3118
|
+
"text": "boolean | undefined"
|
|
3084
3119
|
},
|
|
3085
|
-
"
|
|
3086
|
-
"
|
|
3087
|
-
"fieldName": "
|
|
3120
|
+
"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.",
|
|
3121
|
+
"default": "undefined",
|
|
3122
|
+
"fieldName": "softDisabled",
|
|
3088
3123
|
"inheritedFrom": {
|
|
3089
|
-
"name": "
|
|
3090
|
-
"module": "src/components/
|
|
3124
|
+
"name": "Buttonsimple",
|
|
3125
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3091
3126
|
}
|
|
3092
3127
|
},
|
|
3093
3128
|
{
|
|
3094
|
-
"name": "
|
|
3129
|
+
"name": "ariaStateKey",
|
|
3095
3130
|
"type": {
|
|
3096
|
-
"text": "string"
|
|
3131
|
+
"text": "string | undefined"
|
|
3097
3132
|
},
|
|
3098
|
-
"
|
|
3099
|
-
"
|
|
3100
|
-
"fieldName": "
|
|
3133
|
+
"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`",
|
|
3134
|
+
"default": "'aria-pressed' (when)",
|
|
3135
|
+
"fieldName": "ariaStateKey",
|
|
3101
3136
|
"inheritedFrom": {
|
|
3102
|
-
"name": "
|
|
3103
|
-
"module": "src/components/
|
|
3137
|
+
"name": "Buttonsimple",
|
|
3138
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3104
3139
|
}
|
|
3105
3140
|
},
|
|
3106
3141
|
{
|
|
3107
|
-
"name": "
|
|
3142
|
+
"name": "type",
|
|
3108
3143
|
"type": {
|
|
3109
|
-
"text": "
|
|
3144
|
+
"text": "ButtonType"
|
|
3110
3145
|
},
|
|
3111
|
-
"description": "
|
|
3112
|
-
"
|
|
3146
|
+
"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.",
|
|
3147
|
+
"default": "button",
|
|
3148
|
+
"fieldName": "type",
|
|
3113
3149
|
"inheritedFrom": {
|
|
3114
|
-
"name": "
|
|
3115
|
-
"module": "src/components/
|
|
3150
|
+
"name": "Buttonsimple",
|
|
3151
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3116
3152
|
}
|
|
3117
3153
|
}
|
|
3118
3154
|
],
|
|
@@ -3123,83 +3159,47 @@
|
|
|
3123
3159
|
}
|
|
3124
3160
|
],
|
|
3125
3161
|
"superclass": {
|
|
3126
|
-
"name": "
|
|
3127
|
-
"module": "/src/components/
|
|
3162
|
+
"name": "Buttonsimple",
|
|
3163
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
3128
3164
|
},
|
|
3129
|
-
"tagName": "mdc-
|
|
3130
|
-
"jsDoc": "/**\n * `mdc-
|
|
3165
|
+
"tagName": "mdc-button",
|
|
3166
|
+
"jsDoc": "/**\n * `mdc-button` is a component that can be configured in various ways to suit different use cases.\n *\n * Button Variants:\n * - **Primary**: Solid background color.\n * - **Secondary**: Transparent background with a solid border.\n * - **Tertiary**: No background or border, appears as plain text but retains all button functionalities.\n *\n * Button Colors:\n * - **Positive**: Green color.\n * - **Negative**: Red color.\n * - **Accent**: Blue color.\n * - **Promotional**: Purple color.\n * - **Default**: White color.\n *\n * Button Sizes (in REM units):\n * - **Pill button**: 40, 32, 28, 24.\n * - **Icon button**: 64, 52, 40, 32, 28, 24.\n * - **Tertiary icon button**: 20.\n *\n * Button Types:\n * - **Pill button**: A button that contains text value. Commonly used for call to action, tags, or filters.\n * - **Pill button with icons**: A button containing an icon either on the left or right side of the button.\n * - **Icon button**: A button represented by just an icon without any text.\n * The type of button is inferred based on the presence of slot and/or prefix and postfix icons.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-button\n *\n * @slot - Text label of the button.\n */",
|
|
3131
3167
|
"customElement": true,
|
|
3132
|
-
"
|
|
3133
|
-
{
|
|
3134
|
-
"description": "Border radius of the link.",
|
|
3135
|
-
"name": "--mdc-link-border-radius",
|
|
3136
|
-
"inheritedFrom": {
|
|
3137
|
-
"name": "Linksimple",
|
|
3138
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3139
|
-
}
|
|
3140
|
-
},
|
|
3141
|
-
{
|
|
3142
|
-
"description": "Color of the link’s child content in the active state.",
|
|
3143
|
-
"name": "--mdc-link-color-active",
|
|
3144
|
-
"inheritedFrom": {
|
|
3145
|
-
"name": "Linksimple",
|
|
3146
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3147
|
-
}
|
|
3148
|
-
},
|
|
3149
|
-
{
|
|
3150
|
-
"description": "Color of the link’s child content in the disabled state.",
|
|
3151
|
-
"name": "--mdc-link-color-disabled",
|
|
3152
|
-
"inheritedFrom": {
|
|
3153
|
-
"name": "Linksimple",
|
|
3154
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3155
|
-
}
|
|
3156
|
-
},
|
|
3157
|
-
{
|
|
3158
|
-
"description": "Color of the link’s child content in the hover state.",
|
|
3159
|
-
"name": "--mdc-link-color-hover",
|
|
3160
|
-
"inheritedFrom": {
|
|
3161
|
-
"name": "Linksimple",
|
|
3162
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3163
|
-
}
|
|
3164
|
-
},
|
|
3165
|
-
{
|
|
3166
|
-
"description": "Color of the link’s child content in the normal state.",
|
|
3167
|
-
"name": "--mdc-link-color-normal",
|
|
3168
|
-
"inheritedFrom": {
|
|
3169
|
-
"name": "Linksimple",
|
|
3170
|
-
"module": "src/components/linksimple/linksimple.component.ts"
|
|
3171
|
-
}
|
|
3172
|
-
},
|
|
3168
|
+
"events": [
|
|
3173
3169
|
{
|
|
3174
|
-
"description": "
|
|
3175
|
-
"name": "
|
|
3170
|
+
"description": "(React: onClick) This event is dispatched when the button is clicked.",
|
|
3171
|
+
"name": "click",
|
|
3172
|
+
"reactName": "onClick",
|
|
3176
3173
|
"inheritedFrom": {
|
|
3177
|
-
"name": "
|
|
3178
|
-
"module": "src/components/
|
|
3174
|
+
"name": "Buttonsimple",
|
|
3175
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3179
3176
|
}
|
|
3180
3177
|
},
|
|
3181
3178
|
{
|
|
3182
|
-
"description": "
|
|
3183
|
-
"name": "
|
|
3179
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the button.",
|
|
3180
|
+
"name": "keydown",
|
|
3181
|
+
"reactName": "onKeyDown",
|
|
3184
3182
|
"inheritedFrom": {
|
|
3185
|
-
"name": "
|
|
3186
|
-
"module": "src/components/
|
|
3183
|
+
"name": "Buttonsimple",
|
|
3184
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3187
3185
|
}
|
|
3188
3186
|
},
|
|
3189
3187
|
{
|
|
3190
|
-
"description": "
|
|
3191
|
-
"name": "
|
|
3188
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the button.",
|
|
3189
|
+
"name": "keyup",
|
|
3190
|
+
"reactName": "onKeyUp",
|
|
3192
3191
|
"inheritedFrom": {
|
|
3193
|
-
"name": "
|
|
3194
|
-
"module": "src/components/
|
|
3192
|
+
"name": "Buttonsimple",
|
|
3193
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3195
3194
|
}
|
|
3196
3195
|
},
|
|
3197
3196
|
{
|
|
3198
|
-
"description": "
|
|
3199
|
-
"name": "
|
|
3197
|
+
"description": "(React: onFocus) This event is dispatched when the button receives focus.",
|
|
3198
|
+
"name": "focus",
|
|
3199
|
+
"reactName": "onFocus",
|
|
3200
3200
|
"inheritedFrom": {
|
|
3201
|
-
"name": "
|
|
3202
|
-
"module": "src/components/
|
|
3201
|
+
"name": "Buttonsimple",
|
|
3202
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3203
3203
|
}
|
|
3204
3204
|
}
|
|
3205
3205
|
]
|
|
@@ -3210,8 +3210,8 @@
|
|
|
3210
3210
|
"kind": "js",
|
|
3211
3211
|
"name": "default",
|
|
3212
3212
|
"declaration": {
|
|
3213
|
-
"name": "
|
|
3214
|
-
"module": "components/
|
|
3213
|
+
"name": "Button",
|
|
3214
|
+
"module": "components/button/button.component.js"
|
|
3215
3215
|
}
|
|
3216
3216
|
}
|
|
3217
3217
|
]
|