@momentum-design/components 0.124.1 → 0.125.1
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 +161 -161
- package/dist/browser/index.js.map +3 -3
- package/dist/custom-elements.json +369 -369
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/utils/controllers/ElementStore.d.ts +10 -0
- package/dist/utils/controllers/ElementStore.js +30 -2
- package/dist/utils/dom.d.ts +13 -0
- package/dist/utils/dom.js +13 -0
- package/package.json +1 -1
|
@@ -4838,77 +4838,6 @@
|
|
|
4838
4838
|
}
|
|
4839
4839
|
]
|
|
4840
4840
|
},
|
|
4841
|
-
{
|
|
4842
|
-
"kind": "javascript-module",
|
|
4843
|
-
"path": "components/bullet/bullet.component.js",
|
|
4844
|
-
"declarations": [
|
|
4845
|
-
{
|
|
4846
|
-
"kind": "class",
|
|
4847
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
4848
|
-
"name": "Bullet",
|
|
4849
|
-
"cssProperties": [
|
|
4850
|
-
{
|
|
4851
|
-
"description": "background color of the bullet",
|
|
4852
|
-
"name": "--mdc-bullet-background-color"
|
|
4853
|
-
},
|
|
4854
|
-
{
|
|
4855
|
-
"description": "small size value of the bullet",
|
|
4856
|
-
"name": "--mdc-bullet-size-small"
|
|
4857
|
-
},
|
|
4858
|
-
{
|
|
4859
|
-
"description": "medium size value of the bullet",
|
|
4860
|
-
"name": "--mdc-bullet-size-medium"
|
|
4861
|
-
},
|
|
4862
|
-
{
|
|
4863
|
-
"description": "large size value of the bullet",
|
|
4864
|
-
"name": "--mdc-bullet-size-large"
|
|
4865
|
-
}
|
|
4866
|
-
],
|
|
4867
|
-
"members": [
|
|
4868
|
-
{
|
|
4869
|
-
"kind": "field",
|
|
4870
|
-
"name": "size",
|
|
4871
|
-
"type": {
|
|
4872
|
-
"text": "Size"
|
|
4873
|
-
},
|
|
4874
|
-
"privacy": "public",
|
|
4875
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
4876
|
-
"default": "small",
|
|
4877
|
-
"attribute": "size",
|
|
4878
|
-
"reflects": true
|
|
4879
|
-
}
|
|
4880
|
-
],
|
|
4881
|
-
"attributes": [
|
|
4882
|
-
{
|
|
4883
|
-
"name": "size",
|
|
4884
|
-
"type": {
|
|
4885
|
-
"text": "Size"
|
|
4886
|
-
},
|
|
4887
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
4888
|
-
"default": "small",
|
|
4889
|
-
"fieldName": "size"
|
|
4890
|
-
}
|
|
4891
|
-
],
|
|
4892
|
-
"superclass": {
|
|
4893
|
-
"name": "Component",
|
|
4894
|
-
"module": "/src/models"
|
|
4895
|
-
},
|
|
4896
|
-
"tagName": "mdc-bullet",
|
|
4897
|
-
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
|
|
4898
|
-
"customElement": true
|
|
4899
|
-
}
|
|
4900
|
-
],
|
|
4901
|
-
"exports": [
|
|
4902
|
-
{
|
|
4903
|
-
"kind": "js",
|
|
4904
|
-
"name": "default",
|
|
4905
|
-
"declaration": {
|
|
4906
|
-
"name": "Bullet",
|
|
4907
|
-
"module": "components/bullet/bullet.component.js"
|
|
4908
|
-
}
|
|
4909
|
-
}
|
|
4910
|
-
]
|
|
4911
|
-
},
|
|
4912
4841
|
{
|
|
4913
4842
|
"kind": "javascript-module",
|
|
4914
4843
|
"path": "components/brandvisual/brandvisual.component.js",
|
|
@@ -5085,6 +5014,77 @@
|
|
|
5085
5014
|
}
|
|
5086
5015
|
]
|
|
5087
5016
|
},
|
|
5017
|
+
{
|
|
5018
|
+
"kind": "javascript-module",
|
|
5019
|
+
"path": "components/bullet/bullet.component.js",
|
|
5020
|
+
"declarations": [
|
|
5021
|
+
{
|
|
5022
|
+
"kind": "class",
|
|
5023
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
5024
|
+
"name": "Bullet",
|
|
5025
|
+
"cssProperties": [
|
|
5026
|
+
{
|
|
5027
|
+
"description": "background color of the bullet",
|
|
5028
|
+
"name": "--mdc-bullet-background-color"
|
|
5029
|
+
},
|
|
5030
|
+
{
|
|
5031
|
+
"description": "small size value of the bullet",
|
|
5032
|
+
"name": "--mdc-bullet-size-small"
|
|
5033
|
+
},
|
|
5034
|
+
{
|
|
5035
|
+
"description": "medium size value of the bullet",
|
|
5036
|
+
"name": "--mdc-bullet-size-medium"
|
|
5037
|
+
},
|
|
5038
|
+
{
|
|
5039
|
+
"description": "large size value of the bullet",
|
|
5040
|
+
"name": "--mdc-bullet-size-large"
|
|
5041
|
+
}
|
|
5042
|
+
],
|
|
5043
|
+
"members": [
|
|
5044
|
+
{
|
|
5045
|
+
"kind": "field",
|
|
5046
|
+
"name": "size",
|
|
5047
|
+
"type": {
|
|
5048
|
+
"text": "Size"
|
|
5049
|
+
},
|
|
5050
|
+
"privacy": "public",
|
|
5051
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
5052
|
+
"default": "small",
|
|
5053
|
+
"attribute": "size",
|
|
5054
|
+
"reflects": true
|
|
5055
|
+
}
|
|
5056
|
+
],
|
|
5057
|
+
"attributes": [
|
|
5058
|
+
{
|
|
5059
|
+
"name": "size",
|
|
5060
|
+
"type": {
|
|
5061
|
+
"text": "Size"
|
|
5062
|
+
},
|
|
5063
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
5064
|
+
"default": "small",
|
|
5065
|
+
"fieldName": "size"
|
|
5066
|
+
}
|
|
5067
|
+
],
|
|
5068
|
+
"superclass": {
|
|
5069
|
+
"name": "Component",
|
|
5070
|
+
"module": "/src/models"
|
|
5071
|
+
},
|
|
5072
|
+
"tagName": "mdc-bullet",
|
|
5073
|
+
"jsDoc": "/**\n * Bullet component, which is a visual marker\n * and be used to organize and present items in a list format.\n *\n * @tagname mdc-bullet\n *\n * @cssproperty --mdc-bullet-background-color - background color of the bullet\n * @cssproperty --mdc-bullet-size-small - small size value of the bullet\n * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet\n * @cssproperty --mdc-bullet-size-large - large size value of the bullet\n */",
|
|
5074
|
+
"customElement": true
|
|
5075
|
+
}
|
|
5076
|
+
],
|
|
5077
|
+
"exports": [
|
|
5078
|
+
{
|
|
5079
|
+
"kind": "js",
|
|
5080
|
+
"name": "default",
|
|
5081
|
+
"declaration": {
|
|
5082
|
+
"name": "Bullet",
|
|
5083
|
+
"module": "components/bullet/bullet.component.js"
|
|
5084
|
+
}
|
|
5085
|
+
}
|
|
5086
|
+
]
|
|
5087
|
+
},
|
|
5088
5088
|
{
|
|
5089
5089
|
"kind": "javascript-module",
|
|
5090
5090
|
"path": "components/button/button.component.js",
|
|
@@ -31034,7 +31034,7 @@
|
|
|
31034
31034
|
{
|
|
31035
31035
|
"name": "iconName",
|
|
31036
31036
|
"type": {
|
|
31037
|
-
"text": "
|
|
31037
|
+
"text": "IconNames"
|
|
31038
31038
|
}
|
|
31039
31039
|
}
|
|
31040
31040
|
]
|
|
@@ -45160,303 +45160,6 @@
|
|
|
45160
45160
|
}
|
|
45161
45161
|
]
|
|
45162
45162
|
},
|
|
45163
|
-
{
|
|
45164
|
-
"kind": "javascript-module",
|
|
45165
|
-
"path": "components/stepperitem/stepperitem.component.js",
|
|
45166
|
-
"declarations": [
|
|
45167
|
-
{
|
|
45168
|
-
"kind": "class",
|
|
45169
|
-
"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.",
|
|
45170
|
-
"name": "StepperItem",
|
|
45171
|
-
"cssProperties": [
|
|
45172
|
-
{
|
|
45173
|
-
"description": "The background color of the status container.",
|
|
45174
|
-
"name": "--mdc-stepperitem-status-container-background"
|
|
45175
|
-
},
|
|
45176
|
-
{
|
|
45177
|
-
"description": "The border color of the status container.",
|
|
45178
|
-
"name": "--mdc-stepperitem-status-container-border-color"
|
|
45179
|
-
},
|
|
45180
|
-
{
|
|
45181
|
-
"description": "The color of the label text.",
|
|
45182
|
-
"name": "--mdc-stepperitem-label-color"
|
|
45183
|
-
},
|
|
45184
|
-
{
|
|
45185
|
-
"description": "The color of the optional label text.",
|
|
45186
|
-
"name": "--mdc-stepperitem-help-text-color"
|
|
45187
|
-
},
|
|
45188
|
-
{
|
|
45189
|
-
"description": "The background color of the label container.",
|
|
45190
|
-
"name": "--mdc-stepperitem-label-container-background"
|
|
45191
|
-
}
|
|
45192
|
-
],
|
|
45193
|
-
"cssParts": [
|
|
45194
|
-
{
|
|
45195
|
-
"description": "The container for the status icon or step number.",
|
|
45196
|
-
"name": "status-container"
|
|
45197
|
-
},
|
|
45198
|
-
{
|
|
45199
|
-
"description": "The container for the label and help text.",
|
|
45200
|
-
"name": "label-container"
|
|
45201
|
-
},
|
|
45202
|
-
{
|
|
45203
|
-
"description": "The container for the help text and error icon when applicable.",
|
|
45204
|
-
"name": "help-text-container"
|
|
45205
|
-
},
|
|
45206
|
-
{
|
|
45207
|
-
"description": "The icon representing the status of the stepper item.",
|
|
45208
|
-
"name": "status-icon"
|
|
45209
|
-
},
|
|
45210
|
-
{
|
|
45211
|
-
"description": "The text representing the step number.",
|
|
45212
|
-
"name": "step-number"
|
|
45213
|
-
},
|
|
45214
|
-
{
|
|
45215
|
-
"description": "The text representing the label of the stepper item.",
|
|
45216
|
-
"name": "label"
|
|
45217
|
-
},
|
|
45218
|
-
{
|
|
45219
|
-
"description": "The text providing additional information about the stepper item.",
|
|
45220
|
-
"name": "help-text"
|
|
45221
|
-
},
|
|
45222
|
-
{
|
|
45223
|
-
"description": "The icon representing an error in the stepper item.",
|
|
45224
|
-
"name": "help-icon"
|
|
45225
|
-
}
|
|
45226
|
-
],
|
|
45227
|
-
"members": [
|
|
45228
|
-
{
|
|
45229
|
-
"kind": "field",
|
|
45230
|
-
"name": "variant",
|
|
45231
|
-
"type": {
|
|
45232
|
-
"text": "VariantType"
|
|
45233
|
-
},
|
|
45234
|
-
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
|
45235
|
-
"default": "'inline'",
|
|
45236
|
-
"attribute": "variant",
|
|
45237
|
-
"reflects": true
|
|
45238
|
-
},
|
|
45239
|
-
{
|
|
45240
|
-
"kind": "field",
|
|
45241
|
-
"name": "status",
|
|
45242
|
-
"type": {
|
|
45243
|
-
"text": "StatusType"
|
|
45244
|
-
},
|
|
45245
|
-
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
|
45246
|
-
"default": "'not-started'",
|
|
45247
|
-
"attribute": "status",
|
|
45248
|
-
"reflects": true
|
|
45249
|
-
},
|
|
45250
|
-
{
|
|
45251
|
-
"kind": "field",
|
|
45252
|
-
"name": "label",
|
|
45253
|
-
"type": {
|
|
45254
|
-
"text": "string"
|
|
45255
|
-
},
|
|
45256
|
-
"default": "''",
|
|
45257
|
-
"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.",
|
|
45258
|
-
"attribute": "label",
|
|
45259
|
-
"reflects": true
|
|
45260
|
-
},
|
|
45261
|
-
{
|
|
45262
|
-
"kind": "field",
|
|
45263
|
-
"name": "helpText",
|
|
45264
|
-
"type": {
|
|
45265
|
-
"text": "string | undefined"
|
|
45266
|
-
},
|
|
45267
|
-
"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.",
|
|
45268
|
-
"default": "''",
|
|
45269
|
-
"attribute": "help-text",
|
|
45270
|
-
"reflects": true
|
|
45271
|
-
},
|
|
45272
|
-
{
|
|
45273
|
-
"kind": "field",
|
|
45274
|
-
"name": "stepNumber",
|
|
45275
|
-
"type": {
|
|
45276
|
-
"text": "number | undefined"
|
|
45277
|
-
},
|
|
45278
|
-
"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.",
|
|
45279
|
-
"default": "''",
|
|
45280
|
-
"attribute": "step-number",
|
|
45281
|
-
"reflects": true
|
|
45282
|
-
},
|
|
45283
|
-
{
|
|
45284
|
-
"kind": "method",
|
|
45285
|
-
"name": "handleKeyDown",
|
|
45286
|
-
"privacy": "private",
|
|
45287
|
-
"parameters": [
|
|
45288
|
-
{
|
|
45289
|
-
"name": "event",
|
|
45290
|
-
"type": {
|
|
45291
|
-
"text": "KeyboardEvent"
|
|
45292
|
-
},
|
|
45293
|
-
"description": "The keyboard event."
|
|
45294
|
-
}
|
|
45295
|
-
],
|
|
45296
|
-
"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."
|
|
45297
|
-
},
|
|
45298
|
-
{
|
|
45299
|
-
"kind": "method",
|
|
45300
|
-
"name": "triggerClickEvent",
|
|
45301
|
-
"privacy": "private",
|
|
45302
|
-
"description": "Triggers a click event on the stepper item."
|
|
45303
|
-
},
|
|
45304
|
-
{
|
|
45305
|
-
"kind": "method",
|
|
45306
|
-
"name": "handleKeyUp",
|
|
45307
|
-
"privacy": "private",
|
|
45308
|
-
"parameters": [
|
|
45309
|
-
{
|
|
45310
|
-
"name": "event",
|
|
45311
|
-
"type": {
|
|
45312
|
-
"text": "KeyboardEvent"
|
|
45313
|
-
},
|
|
45314
|
-
"description": "The keyboard event."
|
|
45315
|
-
}
|
|
45316
|
-
],
|
|
45317
|
-
"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."
|
|
45318
|
-
},
|
|
45319
|
-
{
|
|
45320
|
-
"kind": "method",
|
|
45321
|
-
"name": "renderStatusIcon",
|
|
45322
|
-
"privacy": "private",
|
|
45323
|
-
"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.",
|
|
45324
|
-
"return": {
|
|
45325
|
-
"type": {
|
|
45326
|
-
"text": ""
|
|
45327
|
-
}
|
|
45328
|
-
}
|
|
45329
|
-
},
|
|
45330
|
-
{
|
|
45331
|
-
"kind": "method",
|
|
45332
|
-
"name": "renderHelpText",
|
|
45333
|
-
"privacy": "private",
|
|
45334
|
-
"description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
|
|
45335
|
-
"return": {
|
|
45336
|
-
"type": {
|
|
45337
|
-
"text": ""
|
|
45338
|
-
}
|
|
45339
|
-
}
|
|
45340
|
-
},
|
|
45341
|
-
{
|
|
45342
|
-
"kind": "field",
|
|
45343
|
-
"name": "tabIndex",
|
|
45344
|
-
"type": {
|
|
45345
|
-
"text": "number"
|
|
45346
|
-
},
|
|
45347
|
-
"default": "0",
|
|
45348
|
-
"description": "This property specifies the tab order of the element.",
|
|
45349
|
-
"attribute": "tabIndex",
|
|
45350
|
-
"reflects": true,
|
|
45351
|
-
"inheritedFrom": {
|
|
45352
|
-
"name": "TabIndexMixin",
|
|
45353
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
45354
|
-
}
|
|
45355
|
-
}
|
|
45356
|
-
],
|
|
45357
|
-
"events": [
|
|
45358
|
-
{
|
|
45359
|
-
"description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
|
|
45360
|
-
"name": "click",
|
|
45361
|
-
"reactName": "onClick"
|
|
45362
|
-
},
|
|
45363
|
-
{
|
|
45364
|
-
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
|
|
45365
|
-
"name": "keydown",
|
|
45366
|
-
"reactName": "onKeyDown"
|
|
45367
|
-
},
|
|
45368
|
-
{
|
|
45369
|
-
"description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
|
|
45370
|
-
"name": "keyup",
|
|
45371
|
-
"reactName": "onKeyUp"
|
|
45372
|
-
}
|
|
45373
|
-
],
|
|
45374
|
-
"attributes": [
|
|
45375
|
-
{
|
|
45376
|
-
"name": "variant",
|
|
45377
|
-
"type": {
|
|
45378
|
-
"text": "VariantType"
|
|
45379
|
-
},
|
|
45380
|
-
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
|
45381
|
-
"default": "'inline'",
|
|
45382
|
-
"fieldName": "variant"
|
|
45383
|
-
},
|
|
45384
|
-
{
|
|
45385
|
-
"name": "status",
|
|
45386
|
-
"type": {
|
|
45387
|
-
"text": "StatusType"
|
|
45388
|
-
},
|
|
45389
|
-
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
|
45390
|
-
"default": "'not-started'",
|
|
45391
|
-
"fieldName": "status"
|
|
45392
|
-
},
|
|
45393
|
-
{
|
|
45394
|
-
"name": "label",
|
|
45395
|
-
"type": {
|
|
45396
|
-
"text": "string"
|
|
45397
|
-
},
|
|
45398
|
-
"default": "''",
|
|
45399
|
-
"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.",
|
|
45400
|
-
"fieldName": "label"
|
|
45401
|
-
},
|
|
45402
|
-
{
|
|
45403
|
-
"name": "help-text",
|
|
45404
|
-
"type": {
|
|
45405
|
-
"text": "string | undefined"
|
|
45406
|
-
},
|
|
45407
|
-
"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.",
|
|
45408
|
-
"default": "''",
|
|
45409
|
-
"fieldName": "helpText"
|
|
45410
|
-
},
|
|
45411
|
-
{
|
|
45412
|
-
"name": "step-number",
|
|
45413
|
-
"type": {
|
|
45414
|
-
"text": "number | undefined"
|
|
45415
|
-
},
|
|
45416
|
-
"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.",
|
|
45417
|
-
"default": "''",
|
|
45418
|
-
"fieldName": "stepNumber"
|
|
45419
|
-
},
|
|
45420
|
-
{
|
|
45421
|
-
"name": "tabIndex",
|
|
45422
|
-
"type": {
|
|
45423
|
-
"text": "number"
|
|
45424
|
-
},
|
|
45425
|
-
"default": "0",
|
|
45426
|
-
"description": "This property specifies the tab order of the element.",
|
|
45427
|
-
"fieldName": "tabIndex",
|
|
45428
|
-
"inheritedFrom": {
|
|
45429
|
-
"name": "TabIndexMixin",
|
|
45430
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
45431
|
-
}
|
|
45432
|
-
}
|
|
45433
|
-
],
|
|
45434
|
-
"mixins": [
|
|
45435
|
-
{
|
|
45436
|
-
"name": "TabIndexMixin",
|
|
45437
|
-
"module": "/src/utils/mixins/TabIndexMixin"
|
|
45438
|
-
}
|
|
45439
|
-
],
|
|
45440
|
-
"superclass": {
|
|
45441
|
-
"name": "Component",
|
|
45442
|
-
"module": "/src/models"
|
|
45443
|
-
},
|
|
45444
|
-
"tagName": "mdc-stepperitem",
|
|
45445
|
-
"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 */",
|
|
45446
|
-
"customElement": true
|
|
45447
|
-
}
|
|
45448
|
-
],
|
|
45449
|
-
"exports": [
|
|
45450
|
-
{
|
|
45451
|
-
"kind": "js",
|
|
45452
|
-
"name": "default",
|
|
45453
|
-
"declaration": {
|
|
45454
|
-
"name": "StepperItem",
|
|
45455
|
-
"module": "components/stepperitem/stepperitem.component.js"
|
|
45456
|
-
}
|
|
45457
|
-
}
|
|
45458
|
-
]
|
|
45459
|
-
},
|
|
45460
45163
|
{
|
|
45461
45164
|
"kind": "javascript-module",
|
|
45462
45165
|
"path": "components/tab/tab.component.js",
|
|
@@ -46474,6 +46177,303 @@
|
|
|
46474
46177
|
}
|
|
46475
46178
|
]
|
|
46476
46179
|
},
|
|
46180
|
+
{
|
|
46181
|
+
"kind": "javascript-module",
|
|
46182
|
+
"path": "components/stepperitem/stepperitem.component.js",
|
|
46183
|
+
"declarations": [
|
|
46184
|
+
{
|
|
46185
|
+
"kind": "class",
|
|
46186
|
+
"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.",
|
|
46187
|
+
"name": "StepperItem",
|
|
46188
|
+
"cssProperties": [
|
|
46189
|
+
{
|
|
46190
|
+
"description": "The background color of the status container.",
|
|
46191
|
+
"name": "--mdc-stepperitem-status-container-background"
|
|
46192
|
+
},
|
|
46193
|
+
{
|
|
46194
|
+
"description": "The border color of the status container.",
|
|
46195
|
+
"name": "--mdc-stepperitem-status-container-border-color"
|
|
46196
|
+
},
|
|
46197
|
+
{
|
|
46198
|
+
"description": "The color of the label text.",
|
|
46199
|
+
"name": "--mdc-stepperitem-label-color"
|
|
46200
|
+
},
|
|
46201
|
+
{
|
|
46202
|
+
"description": "The color of the optional label text.",
|
|
46203
|
+
"name": "--mdc-stepperitem-help-text-color"
|
|
46204
|
+
},
|
|
46205
|
+
{
|
|
46206
|
+
"description": "The background color of the label container.",
|
|
46207
|
+
"name": "--mdc-stepperitem-label-container-background"
|
|
46208
|
+
}
|
|
46209
|
+
],
|
|
46210
|
+
"cssParts": [
|
|
46211
|
+
{
|
|
46212
|
+
"description": "The container for the status icon or step number.",
|
|
46213
|
+
"name": "status-container"
|
|
46214
|
+
},
|
|
46215
|
+
{
|
|
46216
|
+
"description": "The container for the label and help text.",
|
|
46217
|
+
"name": "label-container"
|
|
46218
|
+
},
|
|
46219
|
+
{
|
|
46220
|
+
"description": "The container for the help text and error icon when applicable.",
|
|
46221
|
+
"name": "help-text-container"
|
|
46222
|
+
},
|
|
46223
|
+
{
|
|
46224
|
+
"description": "The icon representing the status of the stepper item.",
|
|
46225
|
+
"name": "status-icon"
|
|
46226
|
+
},
|
|
46227
|
+
{
|
|
46228
|
+
"description": "The text representing the step number.",
|
|
46229
|
+
"name": "step-number"
|
|
46230
|
+
},
|
|
46231
|
+
{
|
|
46232
|
+
"description": "The text representing the label of the stepper item.",
|
|
46233
|
+
"name": "label"
|
|
46234
|
+
},
|
|
46235
|
+
{
|
|
46236
|
+
"description": "The text providing additional information about the stepper item.",
|
|
46237
|
+
"name": "help-text"
|
|
46238
|
+
},
|
|
46239
|
+
{
|
|
46240
|
+
"description": "The icon representing an error in the stepper item.",
|
|
46241
|
+
"name": "help-icon"
|
|
46242
|
+
}
|
|
46243
|
+
],
|
|
46244
|
+
"members": [
|
|
46245
|
+
{
|
|
46246
|
+
"kind": "field",
|
|
46247
|
+
"name": "variant",
|
|
46248
|
+
"type": {
|
|
46249
|
+
"text": "VariantType"
|
|
46250
|
+
},
|
|
46251
|
+
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
|
46252
|
+
"default": "'inline'",
|
|
46253
|
+
"attribute": "variant",
|
|
46254
|
+
"reflects": true
|
|
46255
|
+
},
|
|
46256
|
+
{
|
|
46257
|
+
"kind": "field",
|
|
46258
|
+
"name": "status",
|
|
46259
|
+
"type": {
|
|
46260
|
+
"text": "StatusType"
|
|
46261
|
+
},
|
|
46262
|
+
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
|
46263
|
+
"default": "'not-started'",
|
|
46264
|
+
"attribute": "status",
|
|
46265
|
+
"reflects": true
|
|
46266
|
+
},
|
|
46267
|
+
{
|
|
46268
|
+
"kind": "field",
|
|
46269
|
+
"name": "label",
|
|
46270
|
+
"type": {
|
|
46271
|
+
"text": "string"
|
|
46272
|
+
},
|
|
46273
|
+
"default": "''",
|
|
46274
|
+
"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.",
|
|
46275
|
+
"attribute": "label",
|
|
46276
|
+
"reflects": true
|
|
46277
|
+
},
|
|
46278
|
+
{
|
|
46279
|
+
"kind": "field",
|
|
46280
|
+
"name": "helpText",
|
|
46281
|
+
"type": {
|
|
46282
|
+
"text": "string | undefined"
|
|
46283
|
+
},
|
|
46284
|
+
"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.",
|
|
46285
|
+
"default": "''",
|
|
46286
|
+
"attribute": "help-text",
|
|
46287
|
+
"reflects": true
|
|
46288
|
+
},
|
|
46289
|
+
{
|
|
46290
|
+
"kind": "field",
|
|
46291
|
+
"name": "stepNumber",
|
|
46292
|
+
"type": {
|
|
46293
|
+
"text": "number | undefined"
|
|
46294
|
+
},
|
|
46295
|
+
"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.",
|
|
46296
|
+
"default": "''",
|
|
46297
|
+
"attribute": "step-number",
|
|
46298
|
+
"reflects": true
|
|
46299
|
+
},
|
|
46300
|
+
{
|
|
46301
|
+
"kind": "method",
|
|
46302
|
+
"name": "handleKeyDown",
|
|
46303
|
+
"privacy": "private",
|
|
46304
|
+
"parameters": [
|
|
46305
|
+
{
|
|
46306
|
+
"name": "event",
|
|
46307
|
+
"type": {
|
|
46308
|
+
"text": "KeyboardEvent"
|
|
46309
|
+
},
|
|
46310
|
+
"description": "The keyboard event."
|
|
46311
|
+
}
|
|
46312
|
+
],
|
|
46313
|
+
"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."
|
|
46314
|
+
},
|
|
46315
|
+
{
|
|
46316
|
+
"kind": "method",
|
|
46317
|
+
"name": "triggerClickEvent",
|
|
46318
|
+
"privacy": "private",
|
|
46319
|
+
"description": "Triggers a click event on the stepper item."
|
|
46320
|
+
},
|
|
46321
|
+
{
|
|
46322
|
+
"kind": "method",
|
|
46323
|
+
"name": "handleKeyUp",
|
|
46324
|
+
"privacy": "private",
|
|
46325
|
+
"parameters": [
|
|
46326
|
+
{
|
|
46327
|
+
"name": "event",
|
|
46328
|
+
"type": {
|
|
46329
|
+
"text": "KeyboardEvent"
|
|
46330
|
+
},
|
|
46331
|
+
"description": "The keyboard event."
|
|
46332
|
+
}
|
|
46333
|
+
],
|
|
46334
|
+
"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."
|
|
46335
|
+
},
|
|
46336
|
+
{
|
|
46337
|
+
"kind": "method",
|
|
46338
|
+
"name": "renderStatusIcon",
|
|
46339
|
+
"privacy": "private",
|
|
46340
|
+
"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.",
|
|
46341
|
+
"return": {
|
|
46342
|
+
"type": {
|
|
46343
|
+
"text": ""
|
|
46344
|
+
}
|
|
46345
|
+
}
|
|
46346
|
+
},
|
|
46347
|
+
{
|
|
46348
|
+
"kind": "method",
|
|
46349
|
+
"name": "renderHelpText",
|
|
46350
|
+
"privacy": "private",
|
|
46351
|
+
"description": "Renders the help text for the stepper item.\nIf the `helpText` property is not set, it returns nothing.",
|
|
46352
|
+
"return": {
|
|
46353
|
+
"type": {
|
|
46354
|
+
"text": ""
|
|
46355
|
+
}
|
|
46356
|
+
}
|
|
46357
|
+
},
|
|
46358
|
+
{
|
|
46359
|
+
"kind": "field",
|
|
46360
|
+
"name": "tabIndex",
|
|
46361
|
+
"type": {
|
|
46362
|
+
"text": "number"
|
|
46363
|
+
},
|
|
46364
|
+
"default": "0",
|
|
46365
|
+
"description": "This property specifies the tab order of the element.",
|
|
46366
|
+
"attribute": "tabIndex",
|
|
46367
|
+
"reflects": true,
|
|
46368
|
+
"inheritedFrom": {
|
|
46369
|
+
"name": "TabIndexMixin",
|
|
46370
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
46371
|
+
}
|
|
46372
|
+
}
|
|
46373
|
+
],
|
|
46374
|
+
"events": [
|
|
46375
|
+
{
|
|
46376
|
+
"description": "(React: onClick) This event is dispatched when the stepperitem is clicked.",
|
|
46377
|
+
"name": "click",
|
|
46378
|
+
"reactName": "onClick"
|
|
46379
|
+
},
|
|
46380
|
+
{
|
|
46381
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the stepperitem.",
|
|
46382
|
+
"name": "keydown",
|
|
46383
|
+
"reactName": "onKeyDown"
|
|
46384
|
+
},
|
|
46385
|
+
{
|
|
46386
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the stepperitem.",
|
|
46387
|
+
"name": "keyup",
|
|
46388
|
+
"reactName": "onKeyUp"
|
|
46389
|
+
}
|
|
46390
|
+
],
|
|
46391
|
+
"attributes": [
|
|
46392
|
+
{
|
|
46393
|
+
"name": "variant",
|
|
46394
|
+
"type": {
|
|
46395
|
+
"text": "VariantType"
|
|
46396
|
+
},
|
|
46397
|
+
"description": "The variant of the stepper item, which can be `inline` or `stacked`.",
|
|
46398
|
+
"default": "'inline'",
|
|
46399
|
+
"fieldName": "variant"
|
|
46400
|
+
},
|
|
46401
|
+
{
|
|
46402
|
+
"name": "status",
|
|
46403
|
+
"type": {
|
|
46404
|
+
"text": "StatusType"
|
|
46405
|
+
},
|
|
46406
|
+
"description": "The status of the stepper item, which can be `completed`, `current`, `not-started`, `error-current`, or `error-incomplete`.",
|
|
46407
|
+
"default": "'not-started'",
|
|
46408
|
+
"fieldName": "status"
|
|
46409
|
+
},
|
|
46410
|
+
{
|
|
46411
|
+
"name": "label",
|
|
46412
|
+
"type": {
|
|
46413
|
+
"text": "string"
|
|
46414
|
+
},
|
|
46415
|
+
"default": "''",
|
|
46416
|
+
"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.",
|
|
46417
|
+
"fieldName": "label"
|
|
46418
|
+
},
|
|
46419
|
+
{
|
|
46420
|
+
"name": "help-text",
|
|
46421
|
+
"type": {
|
|
46422
|
+
"text": "string | undefined"
|
|
46423
|
+
},
|
|
46424
|
+
"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.",
|
|
46425
|
+
"default": "''",
|
|
46426
|
+
"fieldName": "helpText"
|
|
46427
|
+
},
|
|
46428
|
+
{
|
|
46429
|
+
"name": "step-number",
|
|
46430
|
+
"type": {
|
|
46431
|
+
"text": "number | undefined"
|
|
46432
|
+
},
|
|
46433
|
+
"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.",
|
|
46434
|
+
"default": "''",
|
|
46435
|
+
"fieldName": "stepNumber"
|
|
46436
|
+
},
|
|
46437
|
+
{
|
|
46438
|
+
"name": "tabIndex",
|
|
46439
|
+
"type": {
|
|
46440
|
+
"text": "number"
|
|
46441
|
+
},
|
|
46442
|
+
"default": "0",
|
|
46443
|
+
"description": "This property specifies the tab order of the element.",
|
|
46444
|
+
"fieldName": "tabIndex",
|
|
46445
|
+
"inheritedFrom": {
|
|
46446
|
+
"name": "TabIndexMixin",
|
|
46447
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
46448
|
+
}
|
|
46449
|
+
}
|
|
46450
|
+
],
|
|
46451
|
+
"mixins": [
|
|
46452
|
+
{
|
|
46453
|
+
"name": "TabIndexMixin",
|
|
46454
|
+
"module": "/src/utils/mixins/TabIndexMixin"
|
|
46455
|
+
}
|
|
46456
|
+
],
|
|
46457
|
+
"superclass": {
|
|
46458
|
+
"name": "Component",
|
|
46459
|
+
"module": "/src/models"
|
|
46460
|
+
},
|
|
46461
|
+
"tagName": "mdc-stepperitem",
|
|
46462
|
+
"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 */",
|
|
46463
|
+
"customElement": true
|
|
46464
|
+
}
|
|
46465
|
+
],
|
|
46466
|
+
"exports": [
|
|
46467
|
+
{
|
|
46468
|
+
"kind": "js",
|
|
46469
|
+
"name": "default",
|
|
46470
|
+
"declaration": {
|
|
46471
|
+
"name": "StepperItem",
|
|
46472
|
+
"module": "components/stepperitem/stepperitem.component.js"
|
|
46473
|
+
}
|
|
46474
|
+
}
|
|
46475
|
+
]
|
|
46476
|
+
},
|
|
46477
46477
|
{
|
|
46478
46478
|
"kind": "javascript-module",
|
|
46479
46479
|
"path": "components/text/text.component.js",
|