@momentum-design/components 0.120.24 → 0.120.25
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.
- package/dist/browser/index.js +3 -3
- package/dist/browser/index.js.map +3 -3
- package/dist/components/combobox/combobox.component.js +2 -2
- package/dist/components/list/list.component.js +1 -1
- package/dist/custom-elements.json +846 -1114
- package/dist/react/index.d.ts +3 -3
- package/dist/react/index.js +3 -3
- package/dist/utils/controllers/ElementStore.d.ts +1 -1
- package/dist/utils/controllers/ElementStore.js +1 -1
- package/dist/utils/mixins/lifecycle/CaptureDestroyEventForChildElement.js +6 -5
- package/package.json +1 -1
- package/dist/utils/mixins/ItemCollectionMixin.d.ts +0 -68
- package/dist/utils/mixins/ItemCollectionMixin.js +0 -89
@@ -41861,6 +41861,139 @@
|
|
41861
41861
|
}
|
41862
41862
|
]
|
41863
41863
|
},
|
41864
|
+
{
|
41865
|
+
"kind": "javascript-module",
|
41866
|
+
"path": "components/staticchip/staticchip.component.js",
|
41867
|
+
"declarations": [
|
41868
|
+
{
|
41869
|
+
"kind": "class",
|
41870
|
+
"description": "mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n\nIt is recommended to keep the label text for the chip component concise and compact.\nFor best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.",
|
41871
|
+
"name": "StaticChip",
|
41872
|
+
"cssProperties": [
|
41873
|
+
{
|
41874
|
+
"description": "The color of the static chip.",
|
41875
|
+
"name": "--mdc-chip-color"
|
41876
|
+
},
|
41877
|
+
{
|
41878
|
+
"description": "The border color of the static chip.",
|
41879
|
+
"name": "--mdc-chip-border-color"
|
41880
|
+
},
|
41881
|
+
{
|
41882
|
+
"description": "The background color of the static chip.",
|
41883
|
+
"name": "--mdc-chip-background-color"
|
41884
|
+
}
|
41885
|
+
],
|
41886
|
+
"cssParts": [
|
41887
|
+
{
|
41888
|
+
"description": "The label of the static chip.",
|
41889
|
+
"name": "label"
|
41890
|
+
}
|
41891
|
+
],
|
41892
|
+
"members": [
|
41893
|
+
{
|
41894
|
+
"kind": "field",
|
41895
|
+
"name": "color",
|
41896
|
+
"type": {
|
41897
|
+
"text": "ColorType"
|
41898
|
+
},
|
41899
|
+
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
|
41900
|
+
"default": "default",
|
41901
|
+
"attribute": "color",
|
41902
|
+
"reflects": true
|
41903
|
+
},
|
41904
|
+
{
|
41905
|
+
"kind": "field",
|
41906
|
+
"name": "label",
|
41907
|
+
"type": {
|
41908
|
+
"text": "string"
|
41909
|
+
},
|
41910
|
+
"default": "''",
|
41911
|
+
"description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
41912
|
+
"attribute": "label"
|
41913
|
+
},
|
41914
|
+
{
|
41915
|
+
"kind": "method",
|
41916
|
+
"name": "renderIcon",
|
41917
|
+
"privacy": "private",
|
41918
|
+
"description": "Renders the icon element if available.",
|
41919
|
+
"return": {
|
41920
|
+
"type": {
|
41921
|
+
"text": ""
|
41922
|
+
}
|
41923
|
+
}
|
41924
|
+
},
|
41925
|
+
{
|
41926
|
+
"kind": "field",
|
41927
|
+
"name": "iconName",
|
41928
|
+
"type": {
|
41929
|
+
"text": "IconNames | undefined"
|
41930
|
+
},
|
41931
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
41932
|
+
"attribute": "icon-name",
|
41933
|
+
"inheritedFrom": {
|
41934
|
+
"name": "IconNameMixin",
|
41935
|
+
"module": "utils/mixins/IconNameMixin.js"
|
41936
|
+
}
|
41937
|
+
}
|
41938
|
+
],
|
41939
|
+
"attributes": [
|
41940
|
+
{
|
41941
|
+
"name": "color",
|
41942
|
+
"type": {
|
41943
|
+
"text": "ColorType"
|
41944
|
+
},
|
41945
|
+
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
|
41946
|
+
"default": "default",
|
41947
|
+
"fieldName": "color"
|
41948
|
+
},
|
41949
|
+
{
|
41950
|
+
"name": "label",
|
41951
|
+
"type": {
|
41952
|
+
"text": "string"
|
41953
|
+
},
|
41954
|
+
"default": "''",
|
41955
|
+
"description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
41956
|
+
"fieldName": "label"
|
41957
|
+
},
|
41958
|
+
{
|
41959
|
+
"name": "icon-name",
|
41960
|
+
"type": {
|
41961
|
+
"text": "IconNames | undefined"
|
41962
|
+
},
|
41963
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
41964
|
+
"fieldName": "iconName",
|
41965
|
+
"inheritedFrom": {
|
41966
|
+
"name": "IconNameMixin",
|
41967
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
41968
|
+
}
|
41969
|
+
}
|
41970
|
+
],
|
41971
|
+
"mixins": [
|
41972
|
+
{
|
41973
|
+
"name": "IconNameMixin",
|
41974
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
41975
|
+
}
|
41976
|
+
],
|
41977
|
+
"superclass": {
|
41978
|
+
"name": "Component",
|
41979
|
+
"module": "/src/models"
|
41980
|
+
},
|
41981
|
+
"tagName": "mdc-staticchip",
|
41982
|
+
"jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n */",
|
41983
|
+
"customElement": true
|
41984
|
+
}
|
41985
|
+
],
|
41986
|
+
"exports": [
|
41987
|
+
{
|
41988
|
+
"kind": "js",
|
41989
|
+
"name": "default",
|
41990
|
+
"declaration": {
|
41991
|
+
"name": "StaticChip",
|
41992
|
+
"module": "components/staticchip/staticchip.component.js"
|
41993
|
+
}
|
41994
|
+
}
|
41995
|
+
]
|
41996
|
+
},
|
41864
41997
|
{
|
41865
41998
|
"kind": "javascript-module",
|
41866
41999
|
"path": "components/staticradio/staticradio.component.js",
|
@@ -42043,255 +42176,122 @@
|
|
42043
42176
|
},
|
42044
42177
|
{
|
42045
42178
|
"kind": "javascript-module",
|
42046
|
-
"path": "components/
|
42179
|
+
"path": "components/statictoggle/statictoggle.component.js",
|
42047
42180
|
"declarations": [
|
42048
42181
|
{
|
42049
42182
|
"kind": "class",
|
42050
|
-
"description": "
|
42051
|
-
"name": "
|
42183
|
+
"description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
|
42184
|
+
"name": "StaticToggle",
|
42052
42185
|
"cssProperties": [
|
42053
42186
|
{
|
42054
|
-
"description": "
|
42055
|
-
"name": "--mdc-
|
42187
|
+
"description": "Width of the toggle",
|
42188
|
+
"name": "--mdc-statictoggle-width"
|
42056
42189
|
},
|
42057
42190
|
{
|
42058
|
-
"description": "
|
42059
|
-
"name": "--mdc-
|
42191
|
+
"description": "Height of the toggle",
|
42192
|
+
"name": "--mdc-statictoggle-height"
|
42060
42193
|
},
|
42061
42194
|
{
|
42062
|
-
"description": "
|
42063
|
-
"name": "--mdc-
|
42195
|
+
"description": "Width of the toggle when it's size is compact",
|
42196
|
+
"name": "--mdc-statictoggle-width-compact"
|
42197
|
+
},
|
42198
|
+
{
|
42199
|
+
"description": "Height of the toggle when it's size is compact",
|
42200
|
+
"name": "--mdc-statictoggle-height-compact"
|
42201
|
+
},
|
42202
|
+
{
|
42203
|
+
"description": "Border radius of the toggle",
|
42204
|
+
"name": "--mdc-statictoggle-border-radius"
|
42205
|
+
},
|
42206
|
+
{
|
42207
|
+
"description": "Border radius of the toggle when it's size is compact",
|
42208
|
+
"name": "--mdc-statictoggle-border-radius-compact"
|
42209
|
+
},
|
42210
|
+
{
|
42211
|
+
"description": "Border of the toggle",
|
42212
|
+
"name": "--mdc-statictoggle-border"
|
42213
|
+
},
|
42214
|
+
{
|
42215
|
+
"description": "Background color of the inactive toggle in rest state",
|
42216
|
+
"name": "--mdc-statictoggle-inactive-rest-color"
|
42217
|
+
},
|
42218
|
+
{
|
42219
|
+
"description": "Background color of the inactive toggle in disabled state",
|
42220
|
+
"name": "--mdc-statictoggle-inactive-disabled-color"
|
42221
|
+
},
|
42222
|
+
{
|
42223
|
+
"description": "Background color of the active toggle in rest state",
|
42224
|
+
"name": "--mdc-statictoggle-active-rest-color"
|
42225
|
+
},
|
42226
|
+
{
|
42227
|
+
"description": "Background color of the active toggle in disabled state",
|
42228
|
+
"name": "--mdc-statictoggle-active-disabled-color"
|
42229
|
+
},
|
42230
|
+
{
|
42231
|
+
"description": "Color of the icon in normal state",
|
42232
|
+
"name": "--mdc-statictoggle-icon-color-normal"
|
42233
|
+
},
|
42234
|
+
{
|
42235
|
+
"description": "Color of the icon in disabled state",
|
42236
|
+
"name": "--mdc-statictoggle-icon-color-disabled"
|
42237
|
+
},
|
42238
|
+
{
|
42239
|
+
"description": "Background color of the icon in normal state",
|
42240
|
+
"name": "--mdc-statictoggle-icon-background-color-normal"
|
42241
|
+
},
|
42242
|
+
{
|
42243
|
+
"description": "Background color of the icon in disabled state",
|
42244
|
+
"name": "--mdc-statictoggle-icon-background-color-disabled"
|
42064
42245
|
}
|
42065
42246
|
],
|
42066
42247
|
"cssParts": [
|
42067
42248
|
{
|
42068
|
-
"description": "The
|
42069
|
-
"name": "
|
42249
|
+
"description": "The slider part of the toggle",
|
42250
|
+
"name": "slider"
|
42251
|
+
},
|
42252
|
+
{
|
42253
|
+
"description": "The icon part of the toggle",
|
42254
|
+
"name": "toggle-icon"
|
42255
|
+
}
|
42256
|
+
],
|
42257
|
+
"slots": [
|
42258
|
+
{
|
42259
|
+
"description": "This is a default/unnamed slot",
|
42260
|
+
"name": "default"
|
42261
|
+
},
|
42262
|
+
{
|
42263
|
+
"description": "Default slot for adding label text.",
|
42264
|
+
"name": ""
|
42070
42265
|
}
|
42071
42266
|
],
|
42072
42267
|
"members": [
|
42073
42268
|
{
|
42074
42269
|
"kind": "field",
|
42075
|
-
"name": "
|
42270
|
+
"name": "checked",
|
42076
42271
|
"type": {
|
42077
|
-
"text": "
|
42272
|
+
"text": "boolean"
|
42078
42273
|
},
|
42079
|
-
"
|
42080
|
-
"
|
42081
|
-
"attribute": "
|
42274
|
+
"default": "false",
|
42275
|
+
"description": "Determines whether the toggle is active or inactive.",
|
42276
|
+
"attribute": "checked",
|
42082
42277
|
"reflects": true
|
42083
42278
|
},
|
42084
42279
|
{
|
42085
42280
|
"kind": "field",
|
42086
|
-
"name": "
|
42281
|
+
"name": "size",
|
42087
42282
|
"type": {
|
42088
|
-
"text": "
|
42283
|
+
"text": "ToggleSize"
|
42089
42284
|
},
|
42090
|
-
"
|
42091
|
-
"
|
42092
|
-
"attribute": "
|
42093
|
-
|
42094
|
-
{
|
42095
|
-
"kind": "method",
|
42096
|
-
"name": "renderIcon",
|
42097
|
-
"privacy": "private",
|
42098
|
-
"description": "Renders the icon element if available.",
|
42099
|
-
"return": {
|
42100
|
-
"type": {
|
42101
|
-
"text": ""
|
42102
|
-
}
|
42103
|
-
}
|
42285
|
+
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
42286
|
+
"default": "default",
|
42287
|
+
"attribute": "size",
|
42288
|
+
"reflects": true
|
42104
42289
|
},
|
42105
42290
|
{
|
42106
42291
|
"kind": "field",
|
42107
|
-
"name": "
|
42292
|
+
"name": "readonly",
|
42108
42293
|
"type": {
|
42109
|
-
"text": "
|
42110
|
-
},
|
42111
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
42112
|
-
"attribute": "icon-name",
|
42113
|
-
"inheritedFrom": {
|
42114
|
-
"name": "IconNameMixin",
|
42115
|
-
"module": "utils/mixins/IconNameMixin.js"
|
42116
|
-
}
|
42117
|
-
}
|
42118
|
-
],
|
42119
|
-
"attributes": [
|
42120
|
-
{
|
42121
|
-
"name": "color",
|
42122
|
-
"type": {
|
42123
|
-
"text": "ColorType"
|
42124
|
-
},
|
42125
|
-
"description": "The color of the chip. It supports the following colors\n- default\n- cobalt\n- gold\n- lime\n- mint\n- orange\n- pink\n- purple\n- slate\n- violet",
|
42126
|
-
"default": "default",
|
42127
|
-
"fieldName": "color"
|
42128
|
-
},
|
42129
|
-
{
|
42130
|
-
"name": "label",
|
42131
|
-
"type": {
|
42132
|
-
"text": "string"
|
42133
|
-
},
|
42134
|
-
"default": "''",
|
42135
|
-
"description": "The visible label text of the chip.\n\nWe recommend limiting the <b>maximum length of the label text to 20 characters</b>,\nincluding empty spaces to split words.",
|
42136
|
-
"fieldName": "label"
|
42137
|
-
},
|
42138
|
-
{
|
42139
|
-
"name": "icon-name",
|
42140
|
-
"type": {
|
42141
|
-
"text": "IconNames | undefined"
|
42142
|
-
},
|
42143
|
-
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
42144
|
-
"fieldName": "iconName",
|
42145
|
-
"inheritedFrom": {
|
42146
|
-
"name": "IconNameMixin",
|
42147
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
42148
|
-
}
|
42149
|
-
}
|
42150
|
-
],
|
42151
|
-
"mixins": [
|
42152
|
-
{
|
42153
|
-
"name": "IconNameMixin",
|
42154
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
42155
|
-
}
|
42156
|
-
],
|
42157
|
-
"superclass": {
|
42158
|
-
"name": "Component",
|
42159
|
-
"module": "/src/models"
|
42160
|
-
},
|
42161
|
-
"tagName": "mdc-staticchip",
|
42162
|
-
"jsDoc": "/**\n * mdc-staticchip is an static element that can be used to represent a chip. It supports a leading icon along with label.\n *\n * It is recommended to keep the label text for the chip component concise and compact.\n * For best results, we recommend limiting the <b>maximum length of the label text to 20 characters</b>, including empty spaces to split words.\n *\n *\n * @tagname mdc-staticchip\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @cssproperty --mdc-chip-color - The color of the static chip.\n * @cssproperty --mdc-chip-border-color - The border color of the static chip.\n * @cssproperty --mdc-chip-background-color - The background color of the static chip.\n *\n * @csspart label - The label of the static chip.\n */",
|
42163
|
-
"customElement": true
|
42164
|
-
}
|
42165
|
-
],
|
42166
|
-
"exports": [
|
42167
|
-
{
|
42168
|
-
"kind": "js",
|
42169
|
-
"name": "default",
|
42170
|
-
"declaration": {
|
42171
|
-
"name": "StaticChip",
|
42172
|
-
"module": "components/staticchip/staticchip.component.js"
|
42173
|
-
}
|
42174
|
-
}
|
42175
|
-
]
|
42176
|
-
},
|
42177
|
-
{
|
42178
|
-
"kind": "javascript-module",
|
42179
|
-
"path": "components/statictoggle/statictoggle.component.js",
|
42180
|
-
"declarations": [
|
42181
|
-
{
|
42182
|
-
"kind": "class",
|
42183
|
-
"description": "This is a decorative component that is styled to look as a toggle. <br/>\nIt has 5 properties - checked, size, disabled, readonly and soft-disabled. <br/>\nWe are using the same styling that has been created for the `mdc-toggle` component.",
|
42184
|
-
"name": "StaticToggle",
|
42185
|
-
"cssProperties": [
|
42186
|
-
{
|
42187
|
-
"description": "Width of the toggle",
|
42188
|
-
"name": "--mdc-statictoggle-width"
|
42189
|
-
},
|
42190
|
-
{
|
42191
|
-
"description": "Height of the toggle",
|
42192
|
-
"name": "--mdc-statictoggle-height"
|
42193
|
-
},
|
42194
|
-
{
|
42195
|
-
"description": "Width of the toggle when it's size is compact",
|
42196
|
-
"name": "--mdc-statictoggle-width-compact"
|
42197
|
-
},
|
42198
|
-
{
|
42199
|
-
"description": "Height of the toggle when it's size is compact",
|
42200
|
-
"name": "--mdc-statictoggle-height-compact"
|
42201
|
-
},
|
42202
|
-
{
|
42203
|
-
"description": "Border radius of the toggle",
|
42204
|
-
"name": "--mdc-statictoggle-border-radius"
|
42205
|
-
},
|
42206
|
-
{
|
42207
|
-
"description": "Border radius of the toggle when it's size is compact",
|
42208
|
-
"name": "--mdc-statictoggle-border-radius-compact"
|
42209
|
-
},
|
42210
|
-
{
|
42211
|
-
"description": "Border of the toggle",
|
42212
|
-
"name": "--mdc-statictoggle-border"
|
42213
|
-
},
|
42214
|
-
{
|
42215
|
-
"description": "Background color of the inactive toggle in rest state",
|
42216
|
-
"name": "--mdc-statictoggle-inactive-rest-color"
|
42217
|
-
},
|
42218
|
-
{
|
42219
|
-
"description": "Background color of the inactive toggle in disabled state",
|
42220
|
-
"name": "--mdc-statictoggle-inactive-disabled-color"
|
42221
|
-
},
|
42222
|
-
{
|
42223
|
-
"description": "Background color of the active toggle in rest state",
|
42224
|
-
"name": "--mdc-statictoggle-active-rest-color"
|
42225
|
-
},
|
42226
|
-
{
|
42227
|
-
"description": "Background color of the active toggle in disabled state",
|
42228
|
-
"name": "--mdc-statictoggle-active-disabled-color"
|
42229
|
-
},
|
42230
|
-
{
|
42231
|
-
"description": "Color of the icon in normal state",
|
42232
|
-
"name": "--mdc-statictoggle-icon-color-normal"
|
42233
|
-
},
|
42234
|
-
{
|
42235
|
-
"description": "Color of the icon in disabled state",
|
42236
|
-
"name": "--mdc-statictoggle-icon-color-disabled"
|
42237
|
-
},
|
42238
|
-
{
|
42239
|
-
"description": "Background color of the icon in normal state",
|
42240
|
-
"name": "--mdc-statictoggle-icon-background-color-normal"
|
42241
|
-
},
|
42242
|
-
{
|
42243
|
-
"description": "Background color of the icon in disabled state",
|
42244
|
-
"name": "--mdc-statictoggle-icon-background-color-disabled"
|
42245
|
-
}
|
42246
|
-
],
|
42247
|
-
"cssParts": [
|
42248
|
-
{
|
42249
|
-
"description": "The slider part of the toggle",
|
42250
|
-
"name": "slider"
|
42251
|
-
},
|
42252
|
-
{
|
42253
|
-
"description": "The icon part of the toggle",
|
42254
|
-
"name": "toggle-icon"
|
42255
|
-
}
|
42256
|
-
],
|
42257
|
-
"slots": [
|
42258
|
-
{
|
42259
|
-
"description": "This is a default/unnamed slot",
|
42260
|
-
"name": "default"
|
42261
|
-
},
|
42262
|
-
{
|
42263
|
-
"description": "Default slot for adding label text.",
|
42264
|
-
"name": ""
|
42265
|
-
}
|
42266
|
-
],
|
42267
|
-
"members": [
|
42268
|
-
{
|
42269
|
-
"kind": "field",
|
42270
|
-
"name": "checked",
|
42271
|
-
"type": {
|
42272
|
-
"text": "boolean"
|
42273
|
-
},
|
42274
|
-
"default": "false",
|
42275
|
-
"description": "Determines whether the toggle is active or inactive.",
|
42276
|
-
"attribute": "checked",
|
42277
|
-
"reflects": true
|
42278
|
-
},
|
42279
|
-
{
|
42280
|
-
"kind": "field",
|
42281
|
-
"name": "size",
|
42282
|
-
"type": {
|
42283
|
-
"text": "ToggleSize"
|
42284
|
-
},
|
42285
|
-
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
42286
|
-
"default": "default",
|
42287
|
-
"attribute": "size",
|
42288
|
-
"reflects": true
|
42289
|
-
},
|
42290
|
-
{
|
42291
|
-
"kind": "field",
|
42292
|
-
"name": "readonly",
|
42293
|
-
"type": {
|
42294
|
-
"text": "boolean"
|
42294
|
+
"text": "boolean"
|
42295
42295
|
},
|
42296
42296
|
"default": "false",
|
42297
42297
|
"description": "Determines whether the toggle is read-only.",
|
@@ -42501,541 +42501,156 @@
|
|
42501
42501
|
},
|
42502
42502
|
{
|
42503
42503
|
"kind": "javascript-module",
|
42504
|
-
"path": "components/
|
42504
|
+
"path": "components/tab/tab.component.js",
|
42505
42505
|
"declarations": [
|
42506
42506
|
{
|
42507
42507
|
"kind": "class",
|
42508
|
-
"description": "
|
42509
|
-
"name": "
|
42508
|
+
"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.",
|
42509
|
+
"name": "Tab",
|
42510
42510
|
"cssProperties": [
|
42511
42511
|
{
|
42512
|
-
"description": "
|
42513
|
-
"name": "--mdc-
|
42512
|
+
"description": "Height for button size",
|
42513
|
+
"name": "--mdc-button-height",
|
42514
|
+
"inheritedFrom": {
|
42515
|
+
"name": "Buttonsimple",
|
42516
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
42517
|
+
}
|
42514
42518
|
},
|
42515
42519
|
{
|
42516
|
-
"description": "
|
42517
|
-
"name": "--mdc-
|
42518
|
-
}
|
42519
|
-
],
|
42520
|
-
"cssParts": [
|
42520
|
+
"description": "Gap between the badge(if provided), icon and text.",
|
42521
|
+
"name": "--mdc-tab-content-gap"
|
42522
|
+
},
|
42521
42523
|
{
|
42522
|
-
"description": "
|
42523
|
-
"name": "
|
42524
|
-
}
|
42525
|
-
],
|
42526
|
-
"members": [
|
42524
|
+
"description": "Height of the tab.",
|
42525
|
+
"name": "--mdc-tab-height"
|
42526
|
+
},
|
42527
42527
|
{
|
42528
|
-
"
|
42529
|
-
"name": "
|
42530
|
-
"type": {
|
42531
|
-
"text": "StatusType"
|
42532
|
-
},
|
42533
|
-
"description": "The status of the connector (complete or incomplete)",
|
42534
|
-
"default": "\"incomplete\"",
|
42535
|
-
"attribute": "status",
|
42536
|
-
"reflects": true
|
42528
|
+
"description": "Background color for active glass tab in disabled state.",
|
42529
|
+
"name": "--mdc-tab-glass-active-background-color-disabled"
|
42537
42530
|
},
|
42538
42531
|
{
|
42539
|
-
"
|
42540
|
-
"name": "
|
42541
|
-
|
42542
|
-
"text": "OrientationType"
|
42543
|
-
},
|
42544
|
-
"description": "The orientation of the connector (vertical or horizontal)",
|
42545
|
-
"default": "\"horizontal\"",
|
42546
|
-
"attribute": "orientation",
|
42547
|
-
"reflects": true
|
42548
|
-
}
|
42549
|
-
],
|
42550
|
-
"attributes": [
|
42532
|
+
"description": "Background color for active glass tab in hover state.",
|
42533
|
+
"name": "--mdc-tab-glass-active-background-color-hover"
|
42534
|
+
},
|
42551
42535
|
{
|
42552
|
-
"
|
42553
|
-
"
|
42554
|
-
"text": "StatusType"
|
42555
|
-
},
|
42556
|
-
"description": "The status of the connector (complete or incomplete)",
|
42557
|
-
"default": "\"incomplete\"",
|
42558
|
-
"fieldName": "status"
|
42536
|
+
"description": "Background color for active glass tab in rest state.",
|
42537
|
+
"name": "--mdc-tab-glass-active-background-color-normal"
|
42559
42538
|
},
|
42560
42539
|
{
|
42561
|
-
"
|
42562
|
-
"
|
42563
|
-
|
42564
|
-
},
|
42565
|
-
"description": "The orientation of the connector (vertical or horizontal)",
|
42566
|
-
"default": "\"horizontal\"",
|
42567
|
-
"fieldName": "orientation"
|
42568
|
-
}
|
42569
|
-
],
|
42570
|
-
"superclass": {
|
42571
|
-
"name": "Component",
|
42572
|
-
"module": "/src/models"
|
42573
|
-
},
|
42574
|
-
"tagName": "mdc-stepperconnector",
|
42575
|
-
"jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
|
42576
|
-
"customElement": true
|
42577
|
-
}
|
42578
|
-
],
|
42579
|
-
"exports": [
|
42580
|
-
{
|
42581
|
-
"kind": "js",
|
42582
|
-
"name": "default",
|
42583
|
-
"declaration": {
|
42584
|
-
"name": "StepperConnector",
|
42585
|
-
"module": "components/stepperconnector/stepperconnector.component.js"
|
42586
|
-
}
|
42587
|
-
}
|
42588
|
-
]
|
42589
|
-
},
|
42590
|
-
{
|
42591
|
-
"kind": "javascript-module",
|
42592
|
-
"path": "components/stepperitem/stepperitem.component.js",
|
42593
|
-
"declarations": [
|
42594
|
-
{
|
42595
|
-
"kind": "class",
|
42596
|
-
"description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
|
42597
|
-
"name": "StepperItem",
|
42598
|
-
"cssProperties": [
|
42540
|
+
"description": "Background color for active glass tab in pressed state.",
|
42541
|
+
"name": "--mdc-tab-glass-active-background-color-pressed"
|
42542
|
+
},
|
42599
42543
|
{
|
42600
|
-
"description": "
|
42601
|
-
"name": "--mdc-
|
42544
|
+
"description": "Text and icon color for active glass tab.",
|
42545
|
+
"name": "--mdc-tab-glass-active-color"
|
42602
42546
|
},
|
42603
42547
|
{
|
42604
|
-
"description": "
|
42605
|
-
"name": "--mdc-
|
42548
|
+
"description": "Text and icon color for active glass tab in disabled state.",
|
42549
|
+
"name": "--mdc-tab-glass-active-color-disabled"
|
42606
42550
|
},
|
42607
42551
|
{
|
42608
|
-
"description": "
|
42609
|
-
"name": "--mdc-
|
42552
|
+
"description": "Border radius for glass tab.",
|
42553
|
+
"name": "--mdc-tab-glass-border-radius"
|
42610
42554
|
},
|
42611
42555
|
{
|
42612
|
-
"description": "
|
42613
|
-
"name": "--mdc-
|
42556
|
+
"description": "Background color for inactive glass tab in disabled state.",
|
42557
|
+
"name": "--mdc-tab-glass-inactive-background-color-disabled"
|
42614
42558
|
},
|
42615
42559
|
{
|
42616
|
-
"description": "
|
42617
|
-
"name": "--mdc-
|
42618
|
-
}
|
42619
|
-
],
|
42620
|
-
"cssParts": [
|
42560
|
+
"description": "Background color for inactive glass tab in hover state.",
|
42561
|
+
"name": "--mdc-tab-glass-inactive-background-color-hover"
|
42562
|
+
},
|
42621
42563
|
{
|
42622
|
-
"description": "
|
42623
|
-
"name": "
|
42564
|
+
"description": "Background color for inactive glass tab in rest state.",
|
42565
|
+
"name": "--mdc-tab-glass-inactive-background-color-normal"
|
42624
42566
|
},
|
42625
42567
|
{
|
42626
|
-
"description": "
|
42627
|
-
"name": "
|
42568
|
+
"description": "Background color for inactive glass tab in pressed state.",
|
42569
|
+
"name": "--mdc-tab-glass-inactive-background-color-pressed"
|
42628
42570
|
},
|
42629
42571
|
{
|
42630
|
-
"description": "
|
42631
|
-
"name": "
|
42572
|
+
"description": "Text and icon color for inactive glass tab.",
|
42573
|
+
"name": "--mdc-tab-glass-inactive-color"
|
42632
42574
|
},
|
42633
42575
|
{
|
42634
|
-
"description": "
|
42635
|
-
"name": "
|
42576
|
+
"description": "Text and icon color for inactive glass tab in disabled state.",
|
42577
|
+
"name": "--mdc-tab-glass-inactive-color-disabled"
|
42636
42578
|
},
|
42637
42579
|
{
|
42638
|
-
"description": "
|
42639
|
-
"name": "
|
42580
|
+
"description": "Background color for active line tab in pressed state.",
|
42581
|
+
"name": "--mdc-tab-line-active-background-color-pressed"
|
42640
42582
|
},
|
42641
42583
|
{
|
42642
|
-
"description": "
|
42643
|
-
"name": "
|
42584
|
+
"description": "Background color for active line tab in disabled state.",
|
42585
|
+
"name": "--mdc-tab-line-active-background-color-disabled"
|
42644
42586
|
},
|
42645
42587
|
{
|
42646
|
-
"description": "
|
42647
|
-
"name": "
|
42588
|
+
"description": "Background color for active line tab in hover state.",
|
42589
|
+
"name": "--mdc-tab-line-active-background-color-hover"
|
42648
42590
|
},
|
42649
42591
|
{
|
42650
|
-
"description": "
|
42651
|
-
"name": "
|
42652
|
-
}
|
42653
|
-
],
|
42654
|
-
"members": [
|
42592
|
+
"description": "Background color for active line tab in rest state.",
|
42593
|
+
"name": "--mdc-tab-line-active-background-color-normal"
|
42594
|
+
},
|
42655
42595
|
{
|
42656
|
-
"
|
42657
|
-
"name": "
|
42658
|
-
"type": {
|
42659
|
-
"text": "VariantType"
|
42660
|
-
},
|
42661
|
-
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
42662
|
-
"default": "'inline'",
|
42663
|
-
"attribute": "variant",
|
42664
|
-
"reflects": true
|
42596
|
+
"description": "Text and icon color for active line tab.",
|
42597
|
+
"name": "--mdc-tab-line-active-color"
|
42665
42598
|
},
|
42666
42599
|
{
|
42667
|
-
"
|
42668
|
-
"name": "
|
42669
|
-
"type": {
|
42670
|
-
"text": "StatusType"
|
42671
|
-
},
|
42672
|
-
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
42673
|
-
"default": "'not-started'",
|
42674
|
-
"attribute": "status",
|
42675
|
-
"reflects": true
|
42600
|
+
"description": "Text and icon color for active line tab in disabled state.",
|
42601
|
+
"name": "--mdc-tab-line-active-color-disabled"
|
42676
42602
|
},
|
42677
42603
|
{
|
42678
|
-
"
|
42679
|
-
"name": "
|
42680
|
-
"type": {
|
42681
|
-
"text": "string"
|
42682
|
-
},
|
42683
|
-
"default": "''",
|
42684
|
-
"description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
|
42685
|
-
"attribute": "label",
|
42686
|
-
"reflects": true
|
42604
|
+
"description": "color for indicator in active line tab.",
|
42605
|
+
"name": "--mdc-tab-line-active-indicator-color"
|
42687
42606
|
},
|
42688
42607
|
{
|
42689
|
-
"
|
42690
|
-
"name": "
|
42691
|
-
"type": {
|
42692
|
-
"text": "string | undefined"
|
42693
|
-
},
|
42694
|
-
"description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
|
42695
|
-
"default": "''",
|
42696
|
-
"attribute": "help-text",
|
42697
|
-
"reflects": true
|
42608
|
+
"description": "Color for indicator in active line tab in disabled state.",
|
42609
|
+
"name": "--mdc-tab-line-active-indicator-color-disabled"
|
42698
42610
|
},
|
42699
42611
|
{
|
42700
|
-
"
|
42701
|
-
"name": "
|
42702
|
-
"type": {
|
42703
|
-
"text": "number | undefined"
|
42704
|
-
},
|
42705
|
-
"description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
|
42706
|
-
"default": "''",
|
42707
|
-
"attribute": "step-number",
|
42708
|
-
"reflects": true
|
42612
|
+
"description": "Height for indicator in active line tab.",
|
42613
|
+
"name": "--mdc-tab-line-active-indicator-height"
|
42709
42614
|
},
|
42710
42615
|
{
|
42711
|
-
"
|
42712
|
-
"name": "
|
42713
|
-
"privacy": "private",
|
42714
|
-
"parameters": [
|
42715
|
-
{
|
42716
|
-
"name": "event",
|
42717
|
-
"type": {
|
42718
|
-
"text": "KeyboardEvent"
|
42719
|
-
},
|
42720
|
-
"description": "The keyboard event."
|
42721
|
-
}
|
42722
|
-
],
|
42723
|
-
"description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
|
42616
|
+
"description": "Width for indicator in active line tab.",
|
42617
|
+
"name": "--mdc-tab-line-active-indicator-width"
|
42724
42618
|
},
|
42725
42619
|
{
|
42726
|
-
"
|
42727
|
-
"name": "
|
42728
|
-
"privacy": "private",
|
42729
|
-
"description": "Triggers a click event on the stepper item."
|
42620
|
+
"description": "Bottom left border radius for line tab.",
|
42621
|
+
"name": "--mdc-tab-line-border-bottom-left-radius"
|
42730
42622
|
},
|
42731
42623
|
{
|
42732
|
-
"
|
42733
|
-
"name": "
|
42734
|
-
"privacy": "private",
|
42735
|
-
"parameters": [
|
42736
|
-
{
|
42737
|
-
"name": "event",
|
42738
|
-
"type": {
|
42739
|
-
"text": "KeyboardEvent"
|
42740
|
-
},
|
42741
|
-
"description": "The keyboard event."
|
42742
|
-
}
|
42743
|
-
],
|
42744
|
-
"description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
|
42624
|
+
"description": "Bottom right border radius for line tab.",
|
42625
|
+
"name": "--mdc-tab-line-border-bottom-right-radius"
|
42745
42626
|
},
|
42746
42627
|
{
|
42747
|
-
"
|
42748
|
-
"name": "
|
42749
|
-
"privacy": "private",
|
42750
|
-
"description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
|
42751
|
-
"return": {
|
42752
|
-
"type": {
|
42753
|
-
"text": ""
|
42754
|
-
}
|
42755
|
-
}
|
42628
|
+
"description": "Top left border radius for line tab.",
|
42629
|
+
"name": "--mdc-tab-line-border-top-left-radius"
|
42756
42630
|
},
|
42757
42631
|
{
|
42758
|
-
"
|
42759
|
-
"name": "
|
42760
|
-
"privacy": "private",
|
42761
|
-
"description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
|
42762
|
-
"return": {
|
42763
|
-
"type": {
|
42764
|
-
"text": ""
|
42765
|
-
}
|
42766
|
-
}
|
42632
|
+
"description": "Top right border radius for line tab.",
|
42633
|
+
"name": "--mdc-tab-line-border-top-right-radius"
|
42767
42634
|
},
|
42768
42635
|
{
|
42769
|
-
"
|
42770
|
-
"name": "
|
42771
|
-
|
42772
|
-
"text": "number"
|
42773
|
-
},
|
42774
|
-
"default": "0",
|
42775
|
-
"description": "This property specifies the tab order of the element.",
|
42776
|
-
"attribute": "tabIndex",
|
42777
|
-
"reflects": true,
|
42778
|
-
"inheritedFrom": {
|
42779
|
-
"name": "TabIndexMixin",
|
42780
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
42781
|
-
}
|
42782
|
-
}
|
42783
|
-
],
|
42784
|
-
"events": [
|
42636
|
+
"description": "Background color for inactive line tab in pressed state.",
|
42637
|
+
"name": "--mdc-tab-line-inactive-background-color-pressed"
|
42638
|
+
},
|
42785
42639
|
{
|
42786
|
-
"description": "
|
42787
|
-
"name": "
|
42788
|
-
"reactName": "onClick"
|
42640
|
+
"description": "Background color for inactive line tab in disabled state",
|
42641
|
+
"name": "--mdc-tab-line-inactive-background-color-disabled"
|
42789
42642
|
},
|
42790
42643
|
{
|
42791
|
-
"description": "
|
42792
|
-
"name": "
|
42793
|
-
"reactName": "onKeyDown"
|
42644
|
+
"description": "Background color for inactive line tab in hover state.",
|
42645
|
+
"name": "--mdc-tab-line-inactive-background-color-hover"
|
42794
42646
|
},
|
42795
42647
|
{
|
42796
|
-
"description": "
|
42797
|
-
"name": "
|
42798
|
-
|
42799
|
-
}
|
42800
|
-
],
|
42801
|
-
"attributes": [
|
42648
|
+
"description": "Background color for inactive line tab in rest state.",
|
42649
|
+
"name": "--mdc-tab-line-inactive-background-color-normal"
|
42650
|
+
},
|
42802
42651
|
{
|
42803
|
-
"
|
42804
|
-
"
|
42805
|
-
"text": "VariantType"
|
42806
|
-
},
|
42807
|
-
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
42808
|
-
"default": "'inline'",
|
42809
|
-
"fieldName": "variant"
|
42810
|
-
},
|
42811
|
-
{
|
42812
|
-
"name": "status",
|
42813
|
-
"type": {
|
42814
|
-
"text": "StatusType"
|
42815
|
-
},
|
42816
|
-
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
42817
|
-
"default": "'not-started'",
|
42818
|
-
"fieldName": "status"
|
42819
|
-
},
|
42820
|
-
{
|
42821
|
-
"name": "label",
|
42822
|
-
"type": {
|
42823
|
-
"text": "string"
|
42824
|
-
},
|
42825
|
-
"default": "''",
|
42826
|
-
"description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
|
42827
|
-
"fieldName": "label"
|
42828
|
-
},
|
42829
|
-
{
|
42830
|
-
"name": "help-text",
|
42831
|
-
"type": {
|
42832
|
-
"text": "string | undefined"
|
42833
|
-
},
|
42834
|
-
"description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
|
42835
|
-
"default": "''",
|
42836
|
-
"fieldName": "helpText"
|
42837
|
-
},
|
42838
|
-
{
|
42839
|
-
"name": "step-number",
|
42840
|
-
"type": {
|
42841
|
-
"text": "number | undefined"
|
42842
|
-
},
|
42843
|
-
"description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
|
42844
|
-
"default": "''",
|
42845
|
-
"fieldName": "stepNumber"
|
42846
|
-
},
|
42847
|
-
{
|
42848
|
-
"name": "tabIndex",
|
42849
|
-
"type": {
|
42850
|
-
"text": "number"
|
42851
|
-
},
|
42852
|
-
"default": "0",
|
42853
|
-
"description": "This property specifies the tab order of the element.",
|
42854
|
-
"fieldName": "tabIndex",
|
42855
|
-
"inheritedFrom": {
|
42856
|
-
"name": "TabIndexMixin",
|
42857
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
42858
|
-
}
|
42859
|
-
}
|
42860
|
-
],
|
42861
|
-
"mixins": [
|
42862
|
-
{
|
42863
|
-
"name": "TabIndexMixin",
|
42864
|
-
"module": "/src/utils/mixins/TabIndexMixin"
|
42865
|
-
}
|
42866
|
-
],
|
42867
|
-
"superclass": {
|
42868
|
-
"name": "Component",
|
42869
|
-
"module": "/src/models"
|
42870
|
-
},
|
42871
|
-
"tagName": "mdc-stepperitem",
|
42872
|
-
"jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
|
42873
|
-
"customElement": true
|
42874
|
-
}
|
42875
|
-
],
|
42876
|
-
"exports": [
|
42877
|
-
{
|
42878
|
-
"kind": "js",
|
42879
|
-
"name": "default",
|
42880
|
-
"declaration": {
|
42881
|
-
"name": "StepperItem",
|
42882
|
-
"module": "components/stepperitem/stepperitem.component.js"
|
42883
|
-
}
|
42884
|
-
}
|
42885
|
-
]
|
42886
|
-
},
|
42887
|
-
{
|
42888
|
-
"kind": "javascript-module",
|
42889
|
-
"path": "components/tab/tab.component.js",
|
42890
|
-
"declarations": [
|
42891
|
-
{
|
42892
|
-
"kind": "class",
|
42893
|
-
"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.",
|
42894
|
-
"name": "Tab",
|
42895
|
-
"cssProperties": [
|
42896
|
-
{
|
42897
|
-
"description": "Height for button size",
|
42898
|
-
"name": "--mdc-button-height",
|
42899
|
-
"inheritedFrom": {
|
42900
|
-
"name": "Buttonsimple",
|
42901
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
42902
|
-
}
|
42903
|
-
},
|
42904
|
-
{
|
42905
|
-
"description": "Gap between the badge(if provided), icon and text.",
|
42906
|
-
"name": "--mdc-tab-content-gap"
|
42907
|
-
},
|
42908
|
-
{
|
42909
|
-
"description": "Height of the tab.",
|
42910
|
-
"name": "--mdc-tab-height"
|
42911
|
-
},
|
42912
|
-
{
|
42913
|
-
"description": "Background color for active glass tab in disabled state.",
|
42914
|
-
"name": "--mdc-tab-glass-active-background-color-disabled"
|
42915
|
-
},
|
42916
|
-
{
|
42917
|
-
"description": "Background color for active glass tab in hover state.",
|
42918
|
-
"name": "--mdc-tab-glass-active-background-color-hover"
|
42919
|
-
},
|
42920
|
-
{
|
42921
|
-
"description": "Background color for active glass tab in rest state.",
|
42922
|
-
"name": "--mdc-tab-glass-active-background-color-normal"
|
42923
|
-
},
|
42924
|
-
{
|
42925
|
-
"description": "Background color for active glass tab in pressed state.",
|
42926
|
-
"name": "--mdc-tab-glass-active-background-color-pressed"
|
42927
|
-
},
|
42928
|
-
{
|
42929
|
-
"description": "Text and icon color for active glass tab.",
|
42930
|
-
"name": "--mdc-tab-glass-active-color"
|
42931
|
-
},
|
42932
|
-
{
|
42933
|
-
"description": "Text and icon color for active glass tab in disabled state.",
|
42934
|
-
"name": "--mdc-tab-glass-active-color-disabled"
|
42935
|
-
},
|
42936
|
-
{
|
42937
|
-
"description": "Border radius for glass tab.",
|
42938
|
-
"name": "--mdc-tab-glass-border-radius"
|
42939
|
-
},
|
42940
|
-
{
|
42941
|
-
"description": "Background color for inactive glass tab in disabled state.",
|
42942
|
-
"name": "--mdc-tab-glass-inactive-background-color-disabled"
|
42943
|
-
},
|
42944
|
-
{
|
42945
|
-
"description": "Background color for inactive glass tab in hover state.",
|
42946
|
-
"name": "--mdc-tab-glass-inactive-background-color-hover"
|
42947
|
-
},
|
42948
|
-
{
|
42949
|
-
"description": "Background color for inactive glass tab in rest state.",
|
42950
|
-
"name": "--mdc-tab-glass-inactive-background-color-normal"
|
42951
|
-
},
|
42952
|
-
{
|
42953
|
-
"description": "Background color for inactive glass tab in pressed state.",
|
42954
|
-
"name": "--mdc-tab-glass-inactive-background-color-pressed"
|
42955
|
-
},
|
42956
|
-
{
|
42957
|
-
"description": "Text and icon color for inactive glass tab.",
|
42958
|
-
"name": "--mdc-tab-glass-inactive-color"
|
42959
|
-
},
|
42960
|
-
{
|
42961
|
-
"description": "Text and icon color for inactive glass tab in disabled state.",
|
42962
|
-
"name": "--mdc-tab-glass-inactive-color-disabled"
|
42963
|
-
},
|
42964
|
-
{
|
42965
|
-
"description": "Background color for active line tab in pressed state.",
|
42966
|
-
"name": "--mdc-tab-line-active-background-color-pressed"
|
42967
|
-
},
|
42968
|
-
{
|
42969
|
-
"description": "Background color for active line tab in disabled state.",
|
42970
|
-
"name": "--mdc-tab-line-active-background-color-disabled"
|
42971
|
-
},
|
42972
|
-
{
|
42973
|
-
"description": "Background color for active line tab in hover state.",
|
42974
|
-
"name": "--mdc-tab-line-active-background-color-hover"
|
42975
|
-
},
|
42976
|
-
{
|
42977
|
-
"description": "Background color for active line tab in rest state.",
|
42978
|
-
"name": "--mdc-tab-line-active-background-color-normal"
|
42979
|
-
},
|
42980
|
-
{
|
42981
|
-
"description": "Text and icon color for active line tab.",
|
42982
|
-
"name": "--mdc-tab-line-active-color"
|
42983
|
-
},
|
42984
|
-
{
|
42985
|
-
"description": "Text and icon color for active line tab in disabled state.",
|
42986
|
-
"name": "--mdc-tab-line-active-color-disabled"
|
42987
|
-
},
|
42988
|
-
{
|
42989
|
-
"description": "color for indicator in active line tab.",
|
42990
|
-
"name": "--mdc-tab-line-active-indicator-color"
|
42991
|
-
},
|
42992
|
-
{
|
42993
|
-
"description": "Color for indicator in active line tab in disabled state.",
|
42994
|
-
"name": "--mdc-tab-line-active-indicator-color-disabled"
|
42995
|
-
},
|
42996
|
-
{
|
42997
|
-
"description": "Height for indicator in active line tab.",
|
42998
|
-
"name": "--mdc-tab-line-active-indicator-height"
|
42999
|
-
},
|
43000
|
-
{
|
43001
|
-
"description": "Width for indicator in active line tab.",
|
43002
|
-
"name": "--mdc-tab-line-active-indicator-width"
|
43003
|
-
},
|
43004
|
-
{
|
43005
|
-
"description": "Bottom left border radius for line tab.",
|
43006
|
-
"name": "--mdc-tab-line-border-bottom-left-radius"
|
43007
|
-
},
|
43008
|
-
{
|
43009
|
-
"description": "Bottom right border radius for line tab.",
|
43010
|
-
"name": "--mdc-tab-line-border-bottom-right-radius"
|
43011
|
-
},
|
43012
|
-
{
|
43013
|
-
"description": "Top left border radius for line tab.",
|
43014
|
-
"name": "--mdc-tab-line-border-top-left-radius"
|
43015
|
-
},
|
43016
|
-
{
|
43017
|
-
"description": "Top right border radius for line tab.",
|
43018
|
-
"name": "--mdc-tab-line-border-top-right-radius"
|
43019
|
-
},
|
43020
|
-
{
|
43021
|
-
"description": "Background color for inactive line tab in pressed state.",
|
43022
|
-
"name": "--mdc-tab-line-inactive-background-color-pressed"
|
43023
|
-
},
|
43024
|
-
{
|
43025
|
-
"description": "Background color for inactive line tab in disabled state",
|
43026
|
-
"name": "--mdc-tab-line-inactive-background-color-disabled"
|
43027
|
-
},
|
43028
|
-
{
|
43029
|
-
"description": "Background color for inactive line tab in hover state.",
|
43030
|
-
"name": "--mdc-tab-line-inactive-background-color-hover"
|
43031
|
-
},
|
43032
|
-
{
|
43033
|
-
"description": "Background color for inactive line tab in rest state.",
|
43034
|
-
"name": "--mdc-tab-line-inactive-background-color-normal"
|
43035
|
-
},
|
43036
|
-
{
|
43037
|
-
"description": "Text and icon color for inactive line tab.",
|
43038
|
-
"name": "--mdc-tab-line-inactive-color"
|
42652
|
+
"description": "Text and icon color for inactive line tab.",
|
42653
|
+
"name": "--mdc-tab-line-inactive-color"
|
43039
42654
|
},
|
43040
42655
|
{
|
43041
42656
|
"description": "Text and icon color for inactive line tab in disabled state.",
|
@@ -43626,167 +43241,564 @@
|
|
43626
43241
|
"fieldName": "variant"
|
43627
43242
|
},
|
43628
43243
|
{
|
43629
|
-
"name": "tab-id",
|
43630
|
-
"type": {
|
43631
|
-
"text": "string | undefined"
|
43632
|
-
},
|
43633
|
-
"description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
|
43634
|
-
"default": "undefined",
|
43635
|
-
"fieldName": "tabId"
|
43244
|
+
"name": "tab-id",
|
43245
|
+
"type": {
|
43246
|
+
"text": "string | undefined"
|
43247
|
+
},
|
43248
|
+
"description": "Id of the tab (used as a identificator when used in the tablist)\nNote: has to be unique!",
|
43249
|
+
"default": "undefined",
|
43250
|
+
"fieldName": "tabId"
|
43251
|
+
},
|
43252
|
+
{
|
43253
|
+
"name": "icon-name",
|
43254
|
+
"type": {
|
43255
|
+
"text": "IconNames | undefined"
|
43256
|
+
},
|
43257
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
43258
|
+
"fieldName": "iconName",
|
43259
|
+
"inheritedFrom": {
|
43260
|
+
"name": "IconNameMixin",
|
43261
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
43262
|
+
}
|
43263
|
+
},
|
43264
|
+
{
|
43265
|
+
"name": "auto-focus-on-mount",
|
43266
|
+
"type": {
|
43267
|
+
"text": "boolean"
|
43268
|
+
},
|
43269
|
+
"default": "false",
|
43270
|
+
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
43271
|
+
"fieldName": "autoFocusOnMount",
|
43272
|
+
"inheritedFrom": {
|
43273
|
+
"name": "Buttonsimple",
|
43274
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43275
|
+
}
|
43276
|
+
},
|
43277
|
+
{
|
43278
|
+
"name": "tabIndex",
|
43279
|
+
"type": {
|
43280
|
+
"text": "number"
|
43281
|
+
},
|
43282
|
+
"default": "0",
|
43283
|
+
"description": "This property specifies the tab order of the element.",
|
43284
|
+
"fieldName": "tabIndex",
|
43285
|
+
"inheritedFrom": {
|
43286
|
+
"name": "Buttonsimple",
|
43287
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43288
|
+
}
|
43289
|
+
},
|
43290
|
+
{
|
43291
|
+
"name": "disabled",
|
43292
|
+
"type": {
|
43293
|
+
"text": "boolean | undefined"
|
43294
|
+
},
|
43295
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
43296
|
+
"default": "undefined",
|
43297
|
+
"fieldName": "disabled",
|
43298
|
+
"inheritedFrom": {
|
43299
|
+
"name": "Buttonsimple",
|
43300
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43301
|
+
}
|
43302
|
+
},
|
43303
|
+
{
|
43304
|
+
"name": "soft-disabled",
|
43305
|
+
"type": {
|
43306
|
+
"text": "boolean | undefined"
|
43307
|
+
},
|
43308
|
+
"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.",
|
43309
|
+
"default": "undefined",
|
43310
|
+
"fieldName": "softDisabled",
|
43311
|
+
"inheritedFrom": {
|
43312
|
+
"name": "Buttonsimple",
|
43313
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43314
|
+
}
|
43315
|
+
},
|
43316
|
+
{
|
43317
|
+
"name": "size",
|
43318
|
+
"type": {
|
43319
|
+
"text": "ButtonSize"
|
43320
|
+
},
|
43321
|
+
"description": "Simplebutton size is a super set of all the sizes supported by children components.",
|
43322
|
+
"default": "32",
|
43323
|
+
"fieldName": "size",
|
43324
|
+
"inheritedFrom": {
|
43325
|
+
"name": "Buttonsimple",
|
43326
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43327
|
+
}
|
43328
|
+
},
|
43329
|
+
{
|
43330
|
+
"name": "role",
|
43331
|
+
"type": {
|
43332
|
+
"text": "RoleType"
|
43333
|
+
},
|
43334
|
+
"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.",
|
43335
|
+
"default": "button",
|
43336
|
+
"fieldName": "role",
|
43337
|
+
"inheritedFrom": {
|
43338
|
+
"name": "Buttonsimple",
|
43339
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43340
|
+
}
|
43341
|
+
},
|
43342
|
+
{
|
43343
|
+
"name": "ariaStateKey",
|
43344
|
+
"type": {
|
43345
|
+
"text": "string | undefined"
|
43346
|
+
},
|
43347
|
+
"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`",
|
43348
|
+
"default": "'aria-pressed' (when)",
|
43349
|
+
"fieldName": "ariaStateKey",
|
43350
|
+
"inheritedFrom": {
|
43351
|
+
"name": "Buttonsimple",
|
43352
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43353
|
+
}
|
43354
|
+
},
|
43355
|
+
{
|
43356
|
+
"name": "type",
|
43357
|
+
"type": {
|
43358
|
+
"text": "ButtonType"
|
43359
|
+
},
|
43360
|
+
"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.",
|
43361
|
+
"default": "button",
|
43362
|
+
"fieldName": "type",
|
43363
|
+
"inheritedFrom": {
|
43364
|
+
"name": "Buttonsimple",
|
43365
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43366
|
+
}
|
43367
|
+
},
|
43368
|
+
{
|
43369
|
+
"name": "name",
|
43370
|
+
"type": {
|
43371
|
+
"text": "string | undefined"
|
43372
|
+
},
|
43373
|
+
"description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
|
43374
|
+
"fieldName": "name",
|
43375
|
+
"inheritedFrom": {
|
43376
|
+
"name": "Buttonsimple",
|
43377
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43378
|
+
}
|
43379
|
+
},
|
43380
|
+
{
|
43381
|
+
"name": "value",
|
43382
|
+
"type": {
|
43383
|
+
"text": "string | undefined"
|
43384
|
+
},
|
43385
|
+
"description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
|
43386
|
+
"fieldName": "value",
|
43387
|
+
"inheritedFrom": {
|
43388
|
+
"name": "Buttonsimple",
|
43389
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43390
|
+
}
|
43391
|
+
}
|
43392
|
+
],
|
43393
|
+
"mixins": [
|
43394
|
+
{
|
43395
|
+
"name": "IconNameMixin",
|
43396
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
43397
|
+
}
|
43398
|
+
],
|
43399
|
+
"superclass": {
|
43400
|
+
"name": "Buttonsimple",
|
43401
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
43402
|
+
},
|
43403
|
+
"tagName": "mdc-tab",
|
43404
|
+
"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-button-height - Height for button size\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 *\n * @csspart container - The container of the tab.\n * @csspart icon - The icon of the tab.\n * @csspart indicator - The indicator of the tab.\n * @csspart text - The text of the tab.\n */",
|
43405
|
+
"customElement": true
|
43406
|
+
}
|
43407
|
+
],
|
43408
|
+
"exports": [
|
43409
|
+
{
|
43410
|
+
"kind": "js",
|
43411
|
+
"name": "default",
|
43412
|
+
"declaration": {
|
43413
|
+
"name": "Tab",
|
43414
|
+
"module": "components/tab/tab.component.js"
|
43415
|
+
}
|
43416
|
+
}
|
43417
|
+
]
|
43418
|
+
},
|
43419
|
+
{
|
43420
|
+
"kind": "javascript-module",
|
43421
|
+
"path": "components/tablist/tablist.component.js",
|
43422
|
+
"declarations": [
|
43423
|
+
{
|
43424
|
+
"kind": "class",
|
43425
|
+
"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`.",
|
43426
|
+
"name": "TabList",
|
43427
|
+
"cssProperties": [
|
43428
|
+
{
|
43429
|
+
"description": "Gap between tabs",
|
43430
|
+
"name": "--mdc-tablist-gap"
|
43431
|
+
},
|
43432
|
+
{
|
43433
|
+
"description": "Width of the tablist",
|
43434
|
+
"name": "--mdc-tablist-width"
|
43435
|
+
},
|
43436
|
+
{
|
43437
|
+
"description": "Margin value for the arrow button",
|
43438
|
+
"name": "--mdc-tablist-arrow-button-margin"
|
43439
|
+
}
|
43440
|
+
],
|
43441
|
+
"cssParts": [
|
43442
|
+
{
|
43443
|
+
"description": "The tablist container.",
|
43444
|
+
"name": "container"
|
43445
|
+
}
|
43446
|
+
],
|
43447
|
+
"slots": [
|
43448
|
+
{
|
43449
|
+
"description": "slot for mdc-tab elements.",
|
43450
|
+
"name": "Default"
|
43451
|
+
}
|
43452
|
+
],
|
43453
|
+
"members": [
|
43454
|
+
{
|
43455
|
+
"kind": "field",
|
43456
|
+
"name": "activeTabId",
|
43457
|
+
"type": {
|
43458
|
+
"text": "string | undefined"
|
43459
|
+
},
|
43460
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
43461
|
+
"attribute": "active-tab-id",
|
43462
|
+
"reflects": true
|
43463
|
+
},
|
43464
|
+
{
|
43465
|
+
"kind": "field",
|
43466
|
+
"name": "dataAriaLabel",
|
43467
|
+
"type": {
|
43468
|
+
"text": "string | undefined"
|
43469
|
+
},
|
43470
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
43471
|
+
"attribute": "data-aria-label"
|
43472
|
+
}
|
43473
|
+
],
|
43474
|
+
"events": [
|
43475
|
+
{
|
43476
|
+
"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);`",
|
43477
|
+
"name": "change",
|
43478
|
+
"reactName": "onChange"
|
43479
|
+
}
|
43480
|
+
],
|
43481
|
+
"attributes": [
|
43482
|
+
{
|
43483
|
+
"name": "active-tab-id",
|
43484
|
+
"type": {
|
43485
|
+
"text": "string | undefined"
|
43486
|
+
},
|
43487
|
+
"description": "ID of the active tab, defaults to the first tab if not provided",
|
43488
|
+
"fieldName": "activeTabId"
|
43489
|
+
},
|
43490
|
+
{
|
43491
|
+
"name": "data-aria-label",
|
43492
|
+
"type": {
|
43493
|
+
"text": "string | undefined"
|
43494
|
+
},
|
43495
|
+
"description": "Label for the tablist.\nThis is used when the tablist does not have a visible label.",
|
43496
|
+
"fieldName": "dataAriaLabel"
|
43497
|
+
}
|
43498
|
+
],
|
43499
|
+
"superclass": {
|
43500
|
+
"name": "Component",
|
43501
|
+
"module": "/src/models"
|
43502
|
+
},
|
43503
|
+
"tagName": "mdc-tablist",
|
43504
|
+
"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 *\n * @csspart container - The tablist container.\n */",
|
43505
|
+
"customElement": true
|
43506
|
+
}
|
43507
|
+
],
|
43508
|
+
"exports": [
|
43509
|
+
{
|
43510
|
+
"kind": "js",
|
43511
|
+
"name": "default",
|
43512
|
+
"declaration": {
|
43513
|
+
"name": "TabList",
|
43514
|
+
"module": "components/tablist/tablist.component.js"
|
43515
|
+
}
|
43516
|
+
}
|
43517
|
+
]
|
43518
|
+
},
|
43519
|
+
{
|
43520
|
+
"kind": "javascript-module",
|
43521
|
+
"path": "components/stepperitem/stepperitem.component.js",
|
43522
|
+
"declarations": [
|
43523
|
+
{
|
43524
|
+
"kind": "class",
|
43525
|
+
"description": "stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\nIt can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\nThe component supports various visual styles and can be customized with labels, help text, and step numbers.\n\nThis is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\nMake sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n\nAdditionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.",
|
43526
|
+
"name": "StepperItem",
|
43527
|
+
"cssProperties": [
|
43528
|
+
{
|
43529
|
+
"description": "The background color of the status container.",
|
43530
|
+
"name": "--mdc-stepperitem-status-container-background"
|
43531
|
+
},
|
43532
|
+
{
|
43533
|
+
"description": "The border color of the status container.",
|
43534
|
+
"name": "--mdc-stepperitem-status-container-border-color"
|
43535
|
+
},
|
43536
|
+
{
|
43537
|
+
"description": "The color of the label text.",
|
43538
|
+
"name": "--mdc-stepperitem-label-color"
|
43539
|
+
},
|
43540
|
+
{
|
43541
|
+
"description": "The color of the optional label text.",
|
43542
|
+
"name": "--mdc-stepperitem-help-text-color"
|
43543
|
+
},
|
43544
|
+
{
|
43545
|
+
"description": "The background color of the label container.",
|
43546
|
+
"name": "--mdc-stepperitem-label-container-background"
|
43547
|
+
}
|
43548
|
+
],
|
43549
|
+
"cssParts": [
|
43550
|
+
{
|
43551
|
+
"description": "The container for the status icon or step number.",
|
43552
|
+
"name": "status-container"
|
43553
|
+
},
|
43554
|
+
{
|
43555
|
+
"description": "The container for the label and help text.",
|
43556
|
+
"name": "label-container"
|
43557
|
+
},
|
43558
|
+
{
|
43559
|
+
"description": "The container for the help text and error icon when applicable.",
|
43560
|
+
"name": "help-text-container"
|
43561
|
+
},
|
43562
|
+
{
|
43563
|
+
"description": "The icon representing the status of the stepper item.",
|
43564
|
+
"name": "status-icon"
|
43565
|
+
},
|
43566
|
+
{
|
43567
|
+
"description": "The text representing the step number.",
|
43568
|
+
"name": "step-number"
|
43569
|
+
},
|
43570
|
+
{
|
43571
|
+
"description": "The text representing the label of the stepper item.",
|
43572
|
+
"name": "label"
|
43573
|
+
},
|
43574
|
+
{
|
43575
|
+
"description": "The text providing additional information about the stepper item.",
|
43576
|
+
"name": "help-text"
|
43577
|
+
},
|
43578
|
+
{
|
43579
|
+
"description": "The icon representing an error in the stepper item.",
|
43580
|
+
"name": "help-icon"
|
43581
|
+
}
|
43582
|
+
],
|
43583
|
+
"members": [
|
43584
|
+
{
|
43585
|
+
"kind": "field",
|
43586
|
+
"name": "variant",
|
43587
|
+
"type": {
|
43588
|
+
"text": "VariantType"
|
43589
|
+
},
|
43590
|
+
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
43591
|
+
"default": "'inline'",
|
43592
|
+
"attribute": "variant",
|
43593
|
+
"reflects": true
|
43594
|
+
},
|
43595
|
+
{
|
43596
|
+
"kind": "field",
|
43597
|
+
"name": "status",
|
43598
|
+
"type": {
|
43599
|
+
"text": "StatusType"
|
43600
|
+
},
|
43601
|
+
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
43602
|
+
"default": "'not-started'",
|
43603
|
+
"attribute": "status",
|
43604
|
+
"reflects": true
|
43605
|
+
},
|
43606
|
+
{
|
43607
|
+
"kind": "field",
|
43608
|
+
"name": "label",
|
43609
|
+
"type": {
|
43610
|
+
"text": "string"
|
43611
|
+
},
|
43612
|
+
"default": "''",
|
43613
|
+
"description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
|
43614
|
+
"attribute": "label",
|
43615
|
+
"reflects": true
|
43616
|
+
},
|
43617
|
+
{
|
43618
|
+
"kind": "field",
|
43619
|
+
"name": "helpText",
|
43620
|
+
"type": {
|
43621
|
+
"text": "string | undefined"
|
43622
|
+
},
|
43623
|
+
"description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
|
43624
|
+
"default": "''",
|
43625
|
+
"attribute": "help-text",
|
43626
|
+
"reflects": true
|
43627
|
+
},
|
43628
|
+
{
|
43629
|
+
"kind": "field",
|
43630
|
+
"name": "stepNumber",
|
43631
|
+
"type": {
|
43632
|
+
"text": "number | undefined"
|
43633
|
+
},
|
43634
|
+
"description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
|
43635
|
+
"default": "''",
|
43636
|
+
"attribute": "step-number",
|
43637
|
+
"reflects": true
|
43638
|
+
},
|
43639
|
+
{
|
43640
|
+
"kind": "method",
|
43641
|
+
"name": "handleKeyDown",
|
43642
|
+
"privacy": "private",
|
43643
|
+
"parameters": [
|
43644
|
+
{
|
43645
|
+
"name": "event",
|
43646
|
+
"type": {
|
43647
|
+
"text": "KeyboardEvent"
|
43648
|
+
},
|
43649
|
+
"description": "The keyboard event."
|
43650
|
+
}
|
43651
|
+
],
|
43652
|
+
"description": "Handles the keydown event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is pressed.\nIf the key is 'Enter', the stepperitem is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the stepperitem's default is prevent to avoid scrolling etc in the host application."
|
43653
|
+
},
|
43654
|
+
{
|
43655
|
+
"kind": "method",
|
43656
|
+
"name": "triggerClickEvent",
|
43657
|
+
"privacy": "private",
|
43658
|
+
"description": "Triggers a click event on the stepper item."
|
43659
|
+
},
|
43660
|
+
{
|
43661
|
+
"kind": "method",
|
43662
|
+
"name": "handleKeyUp",
|
43663
|
+
"privacy": "private",
|
43664
|
+
"parameters": [
|
43665
|
+
{
|
43666
|
+
"name": "event",
|
43667
|
+
"type": {
|
43668
|
+
"text": "KeyboardEvent"
|
43669
|
+
},
|
43670
|
+
"description": "The keyboard event."
|
43671
|
+
}
|
43672
|
+
],
|
43673
|
+
"description": "Handles the keyup event on the stepperitem.\nIf the key is 'Enter' or 'Space', the stepperitem is clicked.\nIf the key is 'Space', the stepperitem is pressed. The native HTML button works in the same way."
|
43636
43674
|
},
|
43637
43675
|
{
|
43638
|
-
"
|
43639
|
-
"
|
43640
|
-
|
43641
|
-
|
43642
|
-
"
|
43643
|
-
|
43644
|
-
|
43645
|
-
|
43646
|
-
"module": "src/utils/mixins/IconNameMixin.ts"
|
43676
|
+
"kind": "method",
|
43677
|
+
"name": "renderStatusIcon",
|
43678
|
+
"privacy": "private",
|
43679
|
+
"description": "Renders the status icon based on the current status of the stepper item.\n- If the status is `completed`, it renders a check icon.\n- If the status is `current` or `error-current`, it renders a pencil icon.\n- If the status is `not-started` or `error-incomplete`, it renders the step number.\n- If the status is anything else, it renders nothing.",
|
43680
|
+
"return": {
|
43681
|
+
"type": {
|
43682
|
+
"text": ""
|
43683
|
+
}
|
43647
43684
|
}
|
43648
43685
|
},
|
43649
43686
|
{
|
43650
|
-
"
|
43651
|
-
"
|
43652
|
-
|
43653
|
-
|
43654
|
-
"
|
43655
|
-
|
43656
|
-
|
43657
|
-
|
43658
|
-
"name": "Buttonsimple",
|
43659
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43687
|
+
"kind": "method",
|
43688
|
+
"name": "renderHelpText",
|
43689
|
+
"privacy": "private",
|
43690
|
+
"description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
|
43691
|
+
"return": {
|
43692
|
+
"type": {
|
43693
|
+
"text": ""
|
43694
|
+
}
|
43660
43695
|
}
|
43661
43696
|
},
|
43662
43697
|
{
|
43698
|
+
"kind": "field",
|
43663
43699
|
"name": "tabIndex",
|
43664
43700
|
"type": {
|
43665
43701
|
"text": "number"
|
43666
43702
|
},
|
43667
43703
|
"default": "0",
|
43668
43704
|
"description": "This property specifies the tab order of the element.",
|
43669
|
-
"
|
43705
|
+
"attribute": "tabIndex",
|
43706
|
+
"reflects": true,
|
43670
43707
|
"inheritedFrom": {
|
43671
|
-
"name": "
|
43672
|
-
"module": "
|
43708
|
+
"name": "TabIndexMixin",
|
43709
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
43673
43710
|
}
|
43674
|
-
}
|
43711
|
+
}
|
43712
|
+
],
|
43713
|
+
"events": [
|
43675
43714
|
{
|
43676
|
-
"
|
43677
|
-
"
|
43678
|
-
|
43679
|
-
},
|
43680
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
43681
|
-
"default": "undefined",
|
43682
|
-
"fieldName": "disabled",
|
43683
|
-
"inheritedFrom": {
|
43684
|
-
"name": "Buttonsimple",
|
43685
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43686
|
-
}
|
43715
|
+
"description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
|
43716
|
+
"name": "click",
|
43717
|
+
"reactName": "onClick"
|
43687
43718
|
},
|
43688
43719
|
{
|
43689
|
-
"
|
43690
|
-
"
|
43691
|
-
|
43692
|
-
},
|
43693
|
-
"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.",
|
43694
|
-
"default": "undefined",
|
43695
|
-
"fieldName": "softDisabled",
|
43696
|
-
"inheritedFrom": {
|
43697
|
-
"name": "Buttonsimple",
|
43698
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43699
|
-
}
|
43720
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
|
43721
|
+
"name": "keydown",
|
43722
|
+
"reactName": "onKeyDown"
|
43700
43723
|
},
|
43701
43724
|
{
|
43702
|
-
"
|
43725
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
|
43726
|
+
"name": "keyup",
|
43727
|
+
"reactName": "onKeyUp"
|
43728
|
+
}
|
43729
|
+
],
|
43730
|
+
"attributes": [
|
43731
|
+
{
|
43732
|
+
"name": "variant",
|
43703
43733
|
"type": {
|
43704
|
-
"text": "
|
43734
|
+
"text": "VariantType"
|
43705
43735
|
},
|
43706
|
-
"description": "
|
43707
|
-
"default": "
|
43708
|
-
"fieldName": "
|
43709
|
-
"inheritedFrom": {
|
43710
|
-
"name": "Buttonsimple",
|
43711
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43712
|
-
}
|
43736
|
+
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
43737
|
+
"default": "'inline'",
|
43738
|
+
"fieldName": "variant"
|
43713
43739
|
},
|
43714
43740
|
{
|
43715
|
-
"name": "
|
43741
|
+
"name": "status",
|
43716
43742
|
"type": {
|
43717
|
-
"text": "
|
43743
|
+
"text": "StatusType"
|
43718
43744
|
},
|
43719
|
-
"description": "
|
43720
|
-
"default": "
|
43721
|
-
"fieldName": "
|
43722
|
-
"inheritedFrom": {
|
43723
|
-
"name": "Buttonsimple",
|
43724
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43725
|
-
}
|
43745
|
+
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
43746
|
+
"default": "'not-started'",
|
43747
|
+
"fieldName": "status"
|
43726
43748
|
},
|
43727
43749
|
{
|
43728
|
-
"name": "
|
43750
|
+
"name": "label",
|
43729
43751
|
"type": {
|
43730
|
-
"text": "string
|
43752
|
+
"text": "string"
|
43731
43753
|
},
|
43732
|
-
"
|
43733
|
-
"
|
43734
|
-
"fieldName": "
|
43735
|
-
"inheritedFrom": {
|
43736
|
-
"name": "Buttonsimple",
|
43737
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43738
|
-
}
|
43754
|
+
"default": "''",
|
43755
|
+
"description": "The label for the stepper item, which is displayed as the main text of the step.\nThis label is typically used to describe the step or action that the step represents.",
|
43756
|
+
"fieldName": "label"
|
43739
43757
|
},
|
43740
43758
|
{
|
43741
|
-
"name": "
|
43759
|
+
"name": "help-text",
|
43742
43760
|
"type": {
|
43743
|
-
"text": "
|
43761
|
+
"text": "string | undefined"
|
43744
43762
|
},
|
43745
|
-
"description": "
|
43746
|
-
"default": "
|
43747
|
-
"fieldName": "
|
43748
|
-
"inheritedFrom": {
|
43749
|
-
"name": "Buttonsimple",
|
43750
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43751
|
-
}
|
43763
|
+
"description": "Additional informational text that appears below the label\nThis text is optional and can be used to provide more context or instructions for the step.",
|
43764
|
+
"default": "''",
|
43765
|
+
"fieldName": "helpText"
|
43752
43766
|
},
|
43753
43767
|
{
|
43754
|
-
"name": "
|
43768
|
+
"name": "step-number",
|
43755
43769
|
"type": {
|
43756
|
-
"text": "
|
43770
|
+
"text": "number | undefined"
|
43757
43771
|
},
|
43758
|
-
"description": "The
|
43759
|
-
"
|
43760
|
-
"
|
43761
|
-
"name": "Buttonsimple",
|
43762
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
43763
|
-
}
|
43772
|
+
"description": "The step number for the stepper item, which is displayed as a numeric indicator of the step's position in the sequence.\nThis is useful for indicating the order of steps in a process.",
|
43773
|
+
"default": "''",
|
43774
|
+
"fieldName": "stepNumber"
|
43764
43775
|
},
|
43765
43776
|
{
|
43766
|
-
"name": "
|
43777
|
+
"name": "tabIndex",
|
43767
43778
|
"type": {
|
43768
|
-
"text": "
|
43779
|
+
"text": "number"
|
43769
43780
|
},
|
43770
|
-
"
|
43771
|
-
"
|
43781
|
+
"default": "0",
|
43782
|
+
"description": "This property specifies the tab order of the element.",
|
43783
|
+
"fieldName": "tabIndex",
|
43772
43784
|
"inheritedFrom": {
|
43773
|
-
"name": "
|
43774
|
-
"module": "src/
|
43785
|
+
"name": "TabIndexMixin",
|
43786
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
43775
43787
|
}
|
43776
43788
|
}
|
43777
43789
|
],
|
43778
43790
|
"mixins": [
|
43779
43791
|
{
|
43780
|
-
"name": "
|
43781
|
-
"module": "/src/utils/mixins/
|
43792
|
+
"name": "TabIndexMixin",
|
43793
|
+
"module": "/src/utils/mixins/TabIndexMixin"
|
43782
43794
|
}
|
43783
43795
|
],
|
43784
43796
|
"superclass": {
|
43785
|
-
"name": "
|
43786
|
-
"module": "/src/
|
43797
|
+
"name": "Component",
|
43798
|
+
"module": "/src/models"
|
43787
43799
|
},
|
43788
|
-
"tagName": "mdc-
|
43789
|
-
"jsDoc": "/**\n *
|
43800
|
+
"tagName": "mdc-stepperitem",
|
43801
|
+
"jsDoc": "/**\n * stepperitem component is used to represent a single step in a stepper component. It is used within a `mdc-stepper` component to indicate the current step in a process.\n * It can have different statuses such as `completed`, `current`, `incomplete`, `error-current`, and `error-incomplete`.\n * The component supports various visual styles and can be customized with labels, help text, and step numbers.\n *\n * This is an uncontrolled component, meaning it does not manage its own state. Instead, it relies on the consumer's to manage the state of each step.\n * Make sure to set `aria-current=\"step\"` on the current stepper item. It is applicable only when status is `current` or `error-current`. This ensures accessibility for the stepper component. Only one stepper item should have this attribute at a time.\n *\n * Additionally, make use of `aria-label` to provide a descriptive detail about the stepper item, especially for screen readers. If this aria-label is not set, it would read out only the label text and doesn't provide enough context for the user.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-stepperitem\n *\n * @event click - (React: onClick) This event is dispatched when the stepperitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the stepperitem.\n *\n * @csspart status-container - The container for the status icon or step number.\n * @csspart label-container - The container for the label and help text.\n * @csspart help-text-container - The container for the help text and error icon when applicable.\n * @csspart status-icon - The icon representing the status of the stepper item.\n * @csspart step-number - The text representing the step number.\n * @csspart label - The text representing the label of the stepper item.\n * @csspart help-text - The text providing additional information about the stepper item.\n * @csspart help-icon - The icon representing an error in the stepper item.\n *\n * @cssproperty --mdc-stepperitem-status-container-background - The background color of the status container.\n * @cssproperty --mdc-stepperitem-status-container-border-color - The border color of the status container.\n * @cssproperty --mdc-stepperitem-label-color - The color of the label text.\n * @cssproperty --mdc-stepperitem-help-text-color - The color of the optional label text.\n * @cssproperty --mdc-stepperitem-label-container-background - The background color of the label container.\n */",
|
43790
43802
|
"customElement": true
|
43791
43803
|
}
|
43792
43804
|
],
|
@@ -43795,98 +43807,86 @@
|
|
43795
43807
|
"kind": "js",
|
43796
43808
|
"name": "default",
|
43797
43809
|
"declaration": {
|
43798
|
-
"name": "
|
43799
|
-
"module": "components/
|
43810
|
+
"name": "StepperItem",
|
43811
|
+
"module": "components/stepperitem/stepperitem.component.js"
|
43800
43812
|
}
|
43801
43813
|
}
|
43802
43814
|
]
|
43803
43815
|
},
|
43804
43816
|
{
|
43805
43817
|
"kind": "javascript-module",
|
43806
|
-
"path": "components/
|
43818
|
+
"path": "components/stepperconnector/stepperconnector.component.js",
|
43807
43819
|
"declarations": [
|
43808
43820
|
{
|
43809
43821
|
"kind": "class",
|
43810
|
-
"description": "
|
43811
|
-
"name": "
|
43822
|
+
"description": "StepperConnector component visually represents the connection between two stepper items.\nIndicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\nThey are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.",
|
43823
|
+
"name": "StepperConnector",
|
43812
43824
|
"cssProperties": [
|
43813
43825
|
{
|
43814
|
-
"description": "
|
43815
|
-
"name": "--mdc-
|
43816
|
-
},
|
43817
|
-
{
|
43818
|
-
"description": "Width of the tablist",
|
43819
|
-
"name": "--mdc-tablist-width"
|
43826
|
+
"description": "Background color for the complete connector",
|
43827
|
+
"name": "--mdc-stepperconnector-complete-background"
|
43820
43828
|
},
|
43821
43829
|
{
|
43822
|
-
"description": "
|
43823
|
-
"name": "--mdc-
|
43830
|
+
"description": "Background color for the incomplete connector",
|
43831
|
+
"name": "--mdc-stepperconnector-incomplete-background"
|
43824
43832
|
}
|
43825
43833
|
],
|
43826
43834
|
"cssParts": [
|
43827
43835
|
{
|
43828
|
-
"description": "The
|
43829
|
-
"name": "
|
43830
|
-
}
|
43831
|
-
],
|
43832
|
-
"slots": [
|
43833
|
-
{
|
43834
|
-
"description": "slot for mdc-tab elements.",
|
43835
|
-
"name": "Default"
|
43836
|
+
"description": "The main connector line between steps",
|
43837
|
+
"name": "connector"
|
43836
43838
|
}
|
43837
43839
|
],
|
43838
43840
|
"members": [
|
43839
43841
|
{
|
43840
43842
|
"kind": "field",
|
43841
|
-
"name": "
|
43843
|
+
"name": "status",
|
43842
43844
|
"type": {
|
43843
|
-
"text": "
|
43845
|
+
"text": "StatusType"
|
43844
43846
|
},
|
43845
|
-
"description": "
|
43846
|
-
"
|
43847
|
+
"description": "The status of the connector (complete or incomplete)",
|
43848
|
+
"default": "\"incomplete\"",
|
43849
|
+
"attribute": "status",
|
43847
43850
|
"reflects": true
|
43848
43851
|
},
|
43849
43852
|
{
|
43850
43853
|
"kind": "field",
|
43851
|
-
"name": "
|
43854
|
+
"name": "orientation",
|
43852
43855
|
"type": {
|
43853
|
-
"text": "
|
43854
|
-
},
|
43855
|
-
"description": "
|
43856
|
-
"
|
43857
|
-
|
43858
|
-
|
43859
|
-
"events": [
|
43860
|
-
{
|
43861
|
-
"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);`",
|
43862
|
-
"name": "change",
|
43863
|
-
"reactName": "onChange"
|
43856
|
+
"text": "OrientationType"
|
43857
|
+
},
|
43858
|
+
"description": "The orientation of the connector (vertical or horizontal)",
|
43859
|
+
"default": "\"horizontal\"",
|
43860
|
+
"attribute": "orientation",
|
43861
|
+
"reflects": true
|
43864
43862
|
}
|
43865
43863
|
],
|
43866
43864
|
"attributes": [
|
43867
43865
|
{
|
43868
|
-
"name": "
|
43866
|
+
"name": "status",
|
43869
43867
|
"type": {
|
43870
|
-
"text": "
|
43868
|
+
"text": "StatusType"
|
43871
43869
|
},
|
43872
|
-
"description": "
|
43873
|
-
"
|
43870
|
+
"description": "The status of the connector (complete or incomplete)",
|
43871
|
+
"default": "\"incomplete\"",
|
43872
|
+
"fieldName": "status"
|
43874
43873
|
},
|
43875
43874
|
{
|
43876
|
-
"name": "
|
43875
|
+
"name": "orientation",
|
43877
43876
|
"type": {
|
43878
|
-
"text": "
|
43877
|
+
"text": "OrientationType"
|
43879
43878
|
},
|
43880
|
-
"description": "
|
43881
|
-
"
|
43879
|
+
"description": "The orientation of the connector (vertical or horizontal)",
|
43880
|
+
"default": "\"horizontal\"",
|
43881
|
+
"fieldName": "orientation"
|
43882
43882
|
}
|
43883
43883
|
],
|
43884
43884
|
"superclass": {
|
43885
43885
|
"name": "Component",
|
43886
43886
|
"module": "/src/models"
|
43887
43887
|
},
|
43888
|
-
"tagName": "mdc-
|
43889
|
-
"jsDoc": "/**\n *
|
43888
|
+
"tagName": "mdc-stepperconnector",
|
43889
|
+
"jsDoc": "/**\n * StepperConnector component visually represents the connection between two stepper items.\n * Indicates whether the connection is complete or incomplete, and supports vertical or horizontal orientation.\n * They are used between 2 `mdc-stepperitem` components to visually connect them and wrapped in a `mdc-stepper` component.\n *\n * @tagname mdc-stepperconnector\n *\n * @csspart connector - The main connector line between steps\n *\n * @cssproperty --mdc-stepperconnector-complete-background - Background color for the complete connector\n * @cssproperty --mdc-stepperconnector-incomplete-background - Background color for the incomplete connector\n */",
|
43890
43890
|
"customElement": true
|
43891
43891
|
}
|
43892
43892
|
],
|
@@ -43895,8 +43895,8 @@
|
|
43895
43895
|
"kind": "js",
|
43896
43896
|
"name": "default",
|
43897
43897
|
"declaration": {
|
43898
|
-
"name": "
|
43899
|
-
"module": "components/
|
43898
|
+
"name": "StepperConnector",
|
43899
|
+
"module": "components/stepperconnector/stepperconnector.component.js"
|
43900
43900
|
}
|
43901
43901
|
}
|
43902
43902
|
]
|
@@ -53258,274 +53258,6 @@
|
|
53258
53258
|
}
|
53259
53259
|
]
|
53260
53260
|
},
|
53261
|
-
{
|
53262
|
-
"kind": "javascript-module",
|
53263
|
-
"path": "utils/mixins/ItemCollectionMixin.js",
|
53264
|
-
"declarations": [
|
53265
|
-
{
|
53266
|
-
"kind": "class",
|
53267
|
-
"description": "",
|
53268
|
-
"name": "ItemCollectionMixinInterface",
|
53269
|
-
"members": [
|
53270
|
-
{
|
53271
|
-
"kind": "field",
|
53272
|
-
"name": "items",
|
53273
|
-
"type": {
|
53274
|
-
"text": "TItem[]"
|
53275
|
-
},
|
53276
|
-
"privacy": "public",
|
53277
|
-
"description": "List of items (cached)",
|
53278
|
-
"readonly": true
|
53279
|
-
},
|
53280
|
-
{
|
53281
|
-
"kind": "method",
|
53282
|
-
"name": "isValidItem",
|
53283
|
-
"privacy": "protected",
|
53284
|
-
"return": {
|
53285
|
-
"type": {
|
53286
|
-
"text": ""
|
53287
|
-
}
|
53288
|
-
},
|
53289
|
-
"parameters": [
|
53290
|
-
{
|
53291
|
-
"name": "item",
|
53292
|
-
"type": {
|
53293
|
-
"text": "Element"
|
53294
|
-
},
|
53295
|
-
"description": "The item to validate."
|
53296
|
-
}
|
53297
|
-
],
|
53298
|
-
"description": "Checks if the item is valid.\nInvalid items will not be collected or processed.\nThis method can be overridden by subclasses to define custom validation logic."
|
53299
|
-
},
|
53300
|
-
{
|
53301
|
-
"kind": "method",
|
53302
|
-
"name": "addItemToCacheAt",
|
53303
|
-
"privacy": "protected",
|
53304
|
-
"return": {
|
53305
|
-
"type": {
|
53306
|
-
"text": "void"
|
53307
|
-
}
|
53308
|
-
},
|
53309
|
-
"parameters": [
|
53310
|
-
{
|
53311
|
-
"name": "item",
|
53312
|
-
"type": {
|
53313
|
-
"text": "Element"
|
53314
|
-
},
|
53315
|
-
"description": "The item to add to the cache."
|
53316
|
-
},
|
53317
|
-
{
|
53318
|
-
"name": "index",
|
53319
|
-
"optional": true,
|
53320
|
-
"type": {
|
53321
|
-
"text": "number"
|
53322
|
-
},
|
53323
|
-
"description": "The index at which to add the item. If -1, adds to the end."
|
53324
|
-
}
|
53325
|
-
],
|
53326
|
-
"description": "Adds an item to the cache at the specified index.\nWhen the index\n is `undefined`, the item is added automatically keeping the DOM order.\n is `-1`, the item is added to the end of the cache.\n is `>= 0`, the item is added at that index.\n otherwise, do nothing."
|
53327
|
-
},
|
53328
|
-
{
|
53329
|
-
"kind": "method",
|
53330
|
-
"name": "removeItemFromCache",
|
53331
|
-
"privacy": "protected",
|
53332
|
-
"return": {
|
53333
|
-
"type": {
|
53334
|
-
"text": "void"
|
53335
|
-
}
|
53336
|
-
},
|
53337
|
-
"parameters": [
|
53338
|
-
{
|
53339
|
-
"name": "item",
|
53340
|
-
"type": {
|
53341
|
-
"text": "Element"
|
53342
|
-
},
|
53343
|
-
"description": "The item to remove from the cache."
|
53344
|
-
}
|
53345
|
-
],
|
53346
|
-
"description": "Removes an item from the cache."
|
53347
|
-
},
|
53348
|
-
{
|
53349
|
-
"kind": "method",
|
53350
|
-
"name": "setItemCache",
|
53351
|
-
"privacy": "protected",
|
53352
|
-
"return": {
|
53353
|
-
"type": {
|
53354
|
-
"text": "void"
|
53355
|
-
}
|
53356
|
-
},
|
53357
|
-
"parameters": [
|
53358
|
-
{
|
53359
|
-
"name": "items",
|
53360
|
-
"optional": true,
|
53361
|
-
"type": {
|
53362
|
-
"text": "TItem[]"
|
53363
|
-
},
|
53364
|
-
"description": "The items to set in the cache."
|
53365
|
-
}
|
53366
|
-
],
|
53367
|
-
"description": "Sets the item cache to the provided items.\nIf no items are provided, it clears the cache."
|
53368
|
-
}
|
53369
|
-
]
|
53370
|
-
},
|
53371
|
-
{
|
53372
|
-
"kind": "mixin",
|
53373
|
-
"description": "This mixin collects and cache items based on the `created` and `destroyed` lifecycle events.\nAlso provides methods to manage the item cache.",
|
53374
|
-
"name": "ItemCollectionMixin",
|
53375
|
-
"members": [
|
53376
|
-
{
|
53377
|
-
"kind": "field",
|
53378
|
-
"name": "itemCache",
|
53379
|
-
"type": {
|
53380
|
-
"text": "TItem[]"
|
53381
|
-
},
|
53382
|
-
"privacy": "private",
|
53383
|
-
"default": "[]"
|
53384
|
-
},
|
53385
|
-
{
|
53386
|
-
"kind": "field",
|
53387
|
-
"name": "items",
|
53388
|
-
"type": {
|
53389
|
-
"text": "TItem[]"
|
53390
|
-
},
|
53391
|
-
"privacy": "protected",
|
53392
|
-
"readonly": true
|
53393
|
-
},
|
53394
|
-
{
|
53395
|
-
"kind": "method",
|
53396
|
-
"name": "itemCreationHandler",
|
53397
|
-
"privacy": "protected",
|
53398
|
-
"parameters": [
|
53399
|
-
{
|
53400
|
-
"name": "event",
|
53401
|
-
"type": {
|
53402
|
-
"text": "Event"
|
53403
|
-
},
|
53404
|
-
"description": "The event triggered when an item is created."
|
53405
|
-
}
|
53406
|
-
],
|
53407
|
-
"description": "Handles the item creation event."
|
53408
|
-
},
|
53409
|
-
{
|
53410
|
-
"kind": "method",
|
53411
|
-
"name": "itemDestroyHandler",
|
53412
|
-
"privacy": "protected",
|
53413
|
-
"parameters": [
|
53414
|
-
{
|
53415
|
-
"name": "event",
|
53416
|
-
"type": {
|
53417
|
-
"text": "Event"
|
53418
|
-
},
|
53419
|
-
"description": "The event triggered when an item is destroyed."
|
53420
|
-
}
|
53421
|
-
],
|
53422
|
-
"description": "Handles the item destroy event."
|
53423
|
-
},
|
53424
|
-
{
|
53425
|
-
"kind": "method",
|
53426
|
-
"name": "isValidItem",
|
53427
|
-
"privacy": "protected",
|
53428
|
-
"return": {
|
53429
|
-
"type": {
|
53430
|
-
"text": "boolean"
|
53431
|
-
}
|
53432
|
-
},
|
53433
|
-
"parameters": [
|
53434
|
-
{
|
53435
|
-
"name": "item",
|
53436
|
-
"type": {
|
53437
|
-
"text": "Element"
|
53438
|
-
}
|
53439
|
-
}
|
53440
|
-
]
|
53441
|
-
},
|
53442
|
-
{
|
53443
|
-
"kind": "method",
|
53444
|
-
"name": "addItemToCacheAt",
|
53445
|
-
"privacy": "protected",
|
53446
|
-
"parameters": [
|
53447
|
-
{
|
53448
|
-
"name": "newItem",
|
53449
|
-
"type": {
|
53450
|
-
"text": "Element"
|
53451
|
-
}
|
53452
|
-
},
|
53453
|
-
{
|
53454
|
-
"name": "index",
|
53455
|
-
"optional": true,
|
53456
|
-
"type": {
|
53457
|
-
"text": "number"
|
53458
|
-
}
|
53459
|
-
}
|
53460
|
-
]
|
53461
|
-
},
|
53462
|
-
{
|
53463
|
-
"kind": "method",
|
53464
|
-
"name": "removeItemFromCache",
|
53465
|
-
"privacy": "protected",
|
53466
|
-
"return": {
|
53467
|
-
"type": {
|
53468
|
-
"text": "void"
|
53469
|
-
}
|
53470
|
-
},
|
53471
|
-
"parameters": [
|
53472
|
-
{
|
53473
|
-
"name": "item",
|
53474
|
-
"type": {
|
53475
|
-
"text": "Element"
|
53476
|
-
}
|
53477
|
-
}
|
53478
|
-
]
|
53479
|
-
},
|
53480
|
-
{
|
53481
|
-
"kind": "method",
|
53482
|
-
"name": "setItemCache",
|
53483
|
-
"privacy": "protected",
|
53484
|
-
"return": {
|
53485
|
-
"type": {
|
53486
|
-
"text": "void"
|
53487
|
-
}
|
53488
|
-
},
|
53489
|
-
"parameters": [
|
53490
|
-
{
|
53491
|
-
"name": "items",
|
53492
|
-
"type": {
|
53493
|
-
"text": "TItem[]"
|
53494
|
-
}
|
53495
|
-
}
|
53496
|
-
]
|
53497
|
-
}
|
53498
|
-
],
|
53499
|
-
"parameters": [
|
53500
|
-
{
|
53501
|
-
"name": "superClass",
|
53502
|
-
"type": {
|
53503
|
-
"text": "T"
|
53504
|
-
},
|
53505
|
-
"description": "The class to extend with the mixin."
|
53506
|
-
}
|
53507
|
-
]
|
53508
|
-
}
|
53509
|
-
],
|
53510
|
-
"exports": [
|
53511
|
-
{
|
53512
|
-
"kind": "js",
|
53513
|
-
"name": "ItemCollectionMixinInterface",
|
53514
|
-
"declaration": {
|
53515
|
-
"name": "ItemCollectionMixinInterface",
|
53516
|
-
"module": "utils/mixins/ItemCollectionMixin.js"
|
53517
|
-
}
|
53518
|
-
},
|
53519
|
-
{
|
53520
|
-
"kind": "js",
|
53521
|
-
"name": "ItemCollectionMixin",
|
53522
|
-
"declaration": {
|
53523
|
-
"name": "ItemCollectionMixin",
|
53524
|
-
"module": "utils/mixins/ItemCollectionMixin.js"
|
53525
|
-
}
|
53526
|
-
}
|
53527
|
-
]
|
53528
|
-
},
|
53529
53261
|
{
|
53530
53262
|
"kind": "javascript-module",
|
53531
53263
|
"path": "utils/mixins/ListNavigationMixin.js",
|