@momentum-design/components 0.18.6 → 0.18.7
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 +236 -66
- package/dist/browser/index.js.map +4 -4
- package/dist/components/iconprovider/iconprovider.constants.js +2 -1
- package/dist/components/toggle/index.d.ts +8 -0
- package/dist/components/toggle/index.js +5 -0
- package/dist/components/toggle/toggle.component.d.ts +84 -0
- package/dist/components/toggle/toggle.component.js +166 -0
- package/dist/components/toggle/toggle.constants.d.ts +17 -0
- package/dist/components/toggle/toggle.constants.js +18 -0
- package/dist/components/toggle/toggle.styles.d.ts +2 -0
- package/dist/components/toggle/toggle.styles.js +148 -0
- package/dist/components/toggle/toggle.types.d.ts +4 -0
- package/dist/components/toggle/toggle.types.js +1 -0
- package/dist/custom-elements.json +1263 -757
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/index.d.ts +4 -3
- package/dist/react/index.js +4 -3
- package/dist/react/toggle/index.d.ts +34 -0
- package/dist/react/toggle/index.js +43 -0
- package/package.json +1 -1
|
@@ -244,844 +244,915 @@
|
|
|
244
244
|
},
|
|
245
245
|
{
|
|
246
246
|
"kind": "javascript-module",
|
|
247
|
-
"path": "components/
|
|
247
|
+
"path": "components/badge/badge.component.js",
|
|
248
248
|
"declarations": [
|
|
249
249
|
{
|
|
250
250
|
"kind": "class",
|
|
251
|
-
"description": "The `mdc-
|
|
252
|
-
"name": "
|
|
253
|
-
"
|
|
251
|
+
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
252
|
+
"name": "Badge",
|
|
253
|
+
"cssProperties": [
|
|
254
254
|
{
|
|
255
|
-
"
|
|
256
|
-
"name": "
|
|
257
|
-
"type": {
|
|
258
|
-
"text": "string | null"
|
|
259
|
-
},
|
|
260
|
-
"default": "null",
|
|
261
|
-
"description": "Aria-label attribute to be set for accessibility",
|
|
262
|
-
"attribute": "aria-label"
|
|
255
|
+
"description": "The foreground color of the primary badge.",
|
|
256
|
+
"name": "--mdc-badge-primary-foreground-color"
|
|
263
257
|
},
|
|
264
258
|
{
|
|
265
|
-
"
|
|
266
|
-
"name": "
|
|
267
|
-
"privacy": "private",
|
|
268
|
-
"parameters": [
|
|
269
|
-
{
|
|
270
|
-
"name": "size",
|
|
271
|
-
"type": {
|
|
272
|
-
"text": "AvatarSize"
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
]
|
|
259
|
+
"description": "The background color of the primary badge.",
|
|
260
|
+
"name": "--mdc-badge-primary-background-color"
|
|
276
261
|
},
|
|
277
262
|
{
|
|
278
|
-
"
|
|
279
|
-
"name": "
|
|
280
|
-
"type": {
|
|
281
|
-
"text": "boolean"
|
|
282
|
-
},
|
|
283
|
-
"default": "undefined as unknown",
|
|
284
|
-
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
285
|
-
"attribute": "active",
|
|
286
|
-
"inheritedFrom": {
|
|
287
|
-
"name": "Buttonsimple",
|
|
288
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
289
|
-
}
|
|
263
|
+
"description": "The foreground color of the secondary badge.",
|
|
264
|
+
"name": "--mdc-badge-secondary-foreground-color"
|
|
290
265
|
},
|
|
291
266
|
{
|
|
292
|
-
"
|
|
293
|
-
"name": "
|
|
294
|
-
"type": {
|
|
295
|
-
"text": "boolean"
|
|
296
|
-
},
|
|
297
|
-
"default": "undefined as unknown",
|
|
298
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
299
|
-
"attribute": "disabled",
|
|
300
|
-
"reflects": true,
|
|
301
|
-
"inheritedFrom": {
|
|
302
|
-
"name": "DisabledMixin",
|
|
303
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
304
|
-
}
|
|
267
|
+
"description": "The background color of the secondary badge.",
|
|
268
|
+
"name": "--mdc-badge-secondary-background-color"
|
|
305
269
|
},
|
|
306
270
|
{
|
|
307
|
-
"
|
|
308
|
-
"name": "
|
|
309
|
-
"type": {
|
|
310
|
-
"text": "boolean"
|
|
311
|
-
},
|
|
312
|
-
"default": "undefined as unknown",
|
|
313
|
-
"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.",
|
|
314
|
-
"attribute": "soft-disabled",
|
|
315
|
-
"inheritedFrom": {
|
|
316
|
-
"name": "Buttonsimple",
|
|
317
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
318
|
-
}
|
|
271
|
+
"description": "The foreground color of the success badge.",
|
|
272
|
+
"name": "--mdc-badge-success-foreground-color"
|
|
319
273
|
},
|
|
320
274
|
{
|
|
321
|
-
"
|
|
322
|
-
"name": "
|
|
323
|
-
"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.",
|
|
324
|
-
"default": "'button'",
|
|
325
|
-
"attribute": "role",
|
|
326
|
-
"reflects": true,
|
|
327
|
-
"type": {
|
|
328
|
-
"text": "string"
|
|
329
|
-
},
|
|
330
|
-
"inheritedFrom": {
|
|
331
|
-
"name": "Buttonsimple",
|
|
332
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
333
|
-
}
|
|
275
|
+
"description": "The background color of the success badge.",
|
|
276
|
+
"name": "--mdc-badge-success-background-color"
|
|
334
277
|
},
|
|
335
278
|
{
|
|
336
|
-
"
|
|
337
|
-
"name": "
|
|
338
|
-
"type": {
|
|
339
|
-
"text": "ButtonType"
|
|
340
|
-
},
|
|
341
|
-
"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.",
|
|
342
|
-
"default": "button",
|
|
343
|
-
"attribute": "type",
|
|
344
|
-
"reflects": true,
|
|
345
|
-
"inheritedFrom": {
|
|
346
|
-
"name": "Buttonsimple",
|
|
347
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
348
|
-
}
|
|
279
|
+
"description": "The foreground color of the warning badge.",
|
|
280
|
+
"name": "--mdc-badge-warning-foreground-color"
|
|
349
281
|
},
|
|
350
282
|
{
|
|
351
|
-
"
|
|
352
|
-
"name": "
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
"
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
}
|
|
283
|
+
"description": "The background color of the warning badge.",
|
|
284
|
+
"name": "--mdc-badge-warning-background-color"
|
|
285
|
+
},
|
|
286
|
+
{
|
|
287
|
+
"description": "The foreground color of the error badge.",
|
|
288
|
+
"name": "--mdc-badge-error-foreground-color"
|
|
289
|
+
},
|
|
290
|
+
{
|
|
291
|
+
"description": "The background color of the error badge.",
|
|
292
|
+
"name": "--mdc-badge-error-background-color"
|
|
362
293
|
},
|
|
294
|
+
{
|
|
295
|
+
"description": "The background color of the badge overlay.",
|
|
296
|
+
"name": "--mdc-badge-overlay-background-color"
|
|
297
|
+
}
|
|
298
|
+
],
|
|
299
|
+
"members": [
|
|
363
300
|
{
|
|
364
301
|
"kind": "field",
|
|
365
|
-
"name": "
|
|
302
|
+
"name": "type",
|
|
366
303
|
"type": {
|
|
367
|
-
"text": "
|
|
304
|
+
"text": "BadgeType | undefined"
|
|
368
305
|
},
|
|
369
|
-
"description": "
|
|
370
|
-
"attribute": "
|
|
371
|
-
"
|
|
372
|
-
"name": "AvatarComponentMixin",
|
|
373
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
374
|
-
}
|
|
306
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
307
|
+
"attribute": "type",
|
|
308
|
+
"reflects": true
|
|
375
309
|
},
|
|
376
310
|
{
|
|
377
311
|
"kind": "field",
|
|
378
|
-
"name": "
|
|
312
|
+
"name": "iconName",
|
|
379
313
|
"type": {
|
|
380
|
-
"text": "
|
|
314
|
+
"text": "IconNames | undefined"
|
|
381
315
|
},
|
|
382
|
-
"description": "
|
|
383
|
-
"attribute": "
|
|
384
|
-
"inheritedFrom": {
|
|
385
|
-
"name": "AvatarComponentMixin",
|
|
386
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
387
|
-
}
|
|
316
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
317
|
+
"attribute": "icon-name"
|
|
388
318
|
},
|
|
389
319
|
{
|
|
390
320
|
"kind": "field",
|
|
391
|
-
"name": "
|
|
321
|
+
"name": "variant",
|
|
392
322
|
"type": {
|
|
393
|
-
"text": "
|
|
323
|
+
"text": "IconVariant"
|
|
394
324
|
},
|
|
395
|
-
"description": "
|
|
396
|
-
"default": "
|
|
397
|
-
"attribute": "
|
|
398
|
-
"reflects": true
|
|
399
|
-
"inheritedFrom": {
|
|
400
|
-
"name": "Buttonsimple",
|
|
401
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
402
|
-
}
|
|
325
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
326
|
+
"default": "primary",
|
|
327
|
+
"attribute": "variant",
|
|
328
|
+
"reflects": true
|
|
403
329
|
},
|
|
404
330
|
{
|
|
405
331
|
"kind": "field",
|
|
406
|
-
"name": "
|
|
332
|
+
"name": "counter",
|
|
407
333
|
"type": {
|
|
408
|
-
"text": "
|
|
334
|
+
"text": "number | undefined"
|
|
409
335
|
},
|
|
410
|
-
"description": "
|
|
411
|
-
"attribute": "
|
|
412
|
-
"inheritedFrom": {
|
|
413
|
-
"name": "AvatarComponentMixin",
|
|
414
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
415
|
-
}
|
|
336
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
337
|
+
"attribute": "counter"
|
|
416
338
|
},
|
|
417
339
|
{
|
|
418
340
|
"kind": "field",
|
|
419
|
-
"name": "
|
|
341
|
+
"name": "maxCounter",
|
|
420
342
|
"type": {
|
|
421
|
-
"text": "number
|
|
343
|
+
"text": "number"
|
|
422
344
|
},
|
|
423
|
-
"description": "The
|
|
424
|
-
"
|
|
425
|
-
"
|
|
426
|
-
|
|
427
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
428
|
-
}
|
|
345
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
346
|
+
"default": "99",
|
|
347
|
+
"attribute": "max-counter",
|
|
348
|
+
"reflects": true
|
|
429
349
|
},
|
|
430
350
|
{
|
|
431
351
|
"kind": "field",
|
|
432
|
-
"name": "
|
|
352
|
+
"name": "overlay",
|
|
433
353
|
"type": {
|
|
434
354
|
"text": "boolean"
|
|
435
355
|
},
|
|
436
356
|
"default": "false",
|
|
437
|
-
"description": "
|
|
438
|
-
"attribute": "
|
|
439
|
-
"inheritedFrom": {
|
|
440
|
-
"name": "AvatarComponentMixin",
|
|
441
|
-
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
442
|
-
}
|
|
357
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
358
|
+
"attribute": "overlay"
|
|
443
359
|
},
|
|
444
360
|
{
|
|
445
361
|
"kind": "field",
|
|
446
|
-
"name": "
|
|
362
|
+
"name": "ariaLabel",
|
|
447
363
|
"type": {
|
|
448
|
-
"text": "
|
|
364
|
+
"text": "string | null"
|
|
449
365
|
},
|
|
450
|
-
"default": "
|
|
451
|
-
"description": "
|
|
452
|
-
"attribute": "
|
|
453
|
-
"reflects": true,
|
|
454
|
-
"inheritedFrom": {
|
|
455
|
-
"name": "TabIndexMixin",
|
|
456
|
-
"module": "utils/mixins/TabIndexMixin.js"
|
|
457
|
-
}
|
|
458
|
-
},
|
|
459
|
-
{
|
|
460
|
-
"kind": "method",
|
|
461
|
-
"name": "executeAction",
|
|
462
|
-
"privacy": "private",
|
|
463
|
-
"inheritedFrom": {
|
|
464
|
-
"name": "Buttonsimple",
|
|
465
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
466
|
-
}
|
|
366
|
+
"default": "null",
|
|
367
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
368
|
+
"attribute": "aria-label"
|
|
467
369
|
},
|
|
468
370
|
{
|
|
469
371
|
"kind": "method",
|
|
470
|
-
"name": "
|
|
372
|
+
"name": "getCounterText",
|
|
471
373
|
"privacy": "private",
|
|
374
|
+
"return": {
|
|
375
|
+
"type": {
|
|
376
|
+
"text": ""
|
|
377
|
+
}
|
|
378
|
+
},
|
|
472
379
|
"parameters": [
|
|
473
380
|
{
|
|
474
|
-
"name": "
|
|
381
|
+
"name": "maxCounter",
|
|
475
382
|
"type": {
|
|
476
|
-
"text": "
|
|
383
|
+
"text": "number"
|
|
477
384
|
},
|
|
478
|
-
"description": "
|
|
385
|
+
"description": "the maximum limit which can be displayed on the badge"
|
|
479
386
|
},
|
|
480
387
|
{
|
|
481
|
-
"name": "
|
|
388
|
+
"name": "counter",
|
|
389
|
+
"optional": true,
|
|
482
390
|
"type": {
|
|
483
|
-
"text": "
|
|
391
|
+
"text": "number"
|
|
484
392
|
},
|
|
485
|
-
"description": "
|
|
393
|
+
"description": "the number to be displayed on the badge"
|
|
486
394
|
}
|
|
487
395
|
],
|
|
488
|
-
"description": "
|
|
489
|
-
"inheritedFrom": {
|
|
490
|
-
"name": "Buttonsimple",
|
|
491
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
492
|
-
}
|
|
396
|
+
"description": "If `type` is set to `counter` and if `counter` is greater than `maxCounter`,\nthen it will return a string the maxCounter value as string.\nOtherwise, it will return a string representation of `counter`.\nIf `counter` is not a number, it will return an empty string."
|
|
493
397
|
},
|
|
494
398
|
{
|
|
495
399
|
"kind": "method",
|
|
496
|
-
"name": "
|
|
400
|
+
"name": "getBadgeIcon",
|
|
497
401
|
"privacy": "private",
|
|
402
|
+
"return": {
|
|
403
|
+
"type": {
|
|
404
|
+
"text": ""
|
|
405
|
+
}
|
|
406
|
+
},
|
|
498
407
|
"parameters": [
|
|
499
408
|
{
|
|
500
|
-
"name": "
|
|
409
|
+
"name": "iconName",
|
|
501
410
|
"type": {
|
|
502
|
-
"text": "
|
|
411
|
+
"text": "string"
|
|
503
412
|
},
|
|
504
|
-
"description": "
|
|
413
|
+
"description": "the name of the icon from the icon set"
|
|
505
414
|
},
|
|
506
415
|
{
|
|
507
|
-
"name": "
|
|
416
|
+
"name": "backgroundClassPostfix",
|
|
508
417
|
"type": {
|
|
509
|
-
"text": "
|
|
418
|
+
"text": "string"
|
|
510
419
|
},
|
|
511
|
-
"description": "
|
|
420
|
+
"description": "postfix for the class to style the badge icon."
|
|
512
421
|
}
|
|
513
422
|
],
|
|
514
|
-
"description": "
|
|
515
|
-
"inheritedFrom": {
|
|
516
|
-
"name": "Buttonsimple",
|
|
517
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
518
|
-
}
|
|
423
|
+
"description": "Method to generate the badge icon."
|
|
519
424
|
},
|
|
520
425
|
{
|
|
521
426
|
"kind": "method",
|
|
522
|
-
"name": "
|
|
427
|
+
"name": "getBadgeDot",
|
|
523
428
|
"privacy": "private",
|
|
524
|
-
"
|
|
525
|
-
{
|
|
526
|
-
"
|
|
527
|
-
"type": {
|
|
528
|
-
"text": "HTMLElement"
|
|
529
|
-
},
|
|
530
|
-
"description": "The button element."
|
|
531
|
-
},
|
|
532
|
-
{
|
|
533
|
-
"name": "disabled",
|
|
534
|
-
"type": {
|
|
535
|
-
"text": "boolean"
|
|
536
|
-
},
|
|
537
|
-
"description": "The disabled state."
|
|
429
|
+
"return": {
|
|
430
|
+
"type": {
|
|
431
|
+
"text": ""
|
|
538
432
|
}
|
|
539
|
-
|
|
540
|
-
"description": "
|
|
541
|
-
"inheritedFrom": {
|
|
542
|
-
"name": "Buttonsimple",
|
|
543
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
544
|
-
}
|
|
433
|
+
},
|
|
434
|
+
"description": "Method to generate the badge dot template."
|
|
545
435
|
},
|
|
546
436
|
{
|
|
547
437
|
"kind": "method",
|
|
548
|
-
"name": "
|
|
438
|
+
"name": "getBadgeCounterText",
|
|
549
439
|
"privacy": "private",
|
|
550
|
-
"
|
|
551
|
-
"
|
|
552
|
-
|
|
553
|
-
|
|
440
|
+
"return": {
|
|
441
|
+
"type": {
|
|
442
|
+
"text": ""
|
|
443
|
+
}
|
|
444
|
+
},
|
|
445
|
+
"description": "Method to generate the badge text and counter template."
|
|
554
446
|
},
|
|
555
447
|
{
|
|
556
448
|
"kind": "method",
|
|
557
|
-
"name": "
|
|
449
|
+
"name": "setRoleByAriaLabel",
|
|
558
450
|
"privacy": "private",
|
|
559
|
-
"
|
|
560
|
-
{
|
|
561
|
-
"
|
|
562
|
-
"type": {
|
|
563
|
-
"text": "KeyboardEvent"
|
|
564
|
-
},
|
|
565
|
-
"description": "The keyboard event."
|
|
451
|
+
"return": {
|
|
452
|
+
"type": {
|
|
453
|
+
"text": "void"
|
|
566
454
|
}
|
|
567
|
-
|
|
568
|
-
"description": "
|
|
569
|
-
"inheritedFrom": {
|
|
570
|
-
"name": "Buttonsimple",
|
|
571
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
572
|
-
}
|
|
455
|
+
},
|
|
456
|
+
"description": "Method to set the role based on the aria-label provided.\nIf the aria-label is provided, the role of the element will be 'img'.\nOtherwise, the role will be null."
|
|
573
457
|
},
|
|
574
458
|
{
|
|
575
459
|
"kind": "method",
|
|
576
|
-
"name": "
|
|
460
|
+
"name": "getBadgeContentBasedOnType",
|
|
577
461
|
"privacy": "private",
|
|
578
|
-
"
|
|
579
|
-
{
|
|
580
|
-
"
|
|
581
|
-
"type": {
|
|
582
|
-
"text": "KeyboardEvent"
|
|
583
|
-
},
|
|
584
|
-
"description": "The keyboard event."
|
|
462
|
+
"return": {
|
|
463
|
+
"type": {
|
|
464
|
+
"text": ""
|
|
585
465
|
}
|
|
586
|
-
|
|
587
|
-
"description": "
|
|
588
|
-
"inheritedFrom": {
|
|
589
|
-
"name": "Buttonsimple",
|
|
590
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
591
|
-
}
|
|
466
|
+
},
|
|
467
|
+
"description": "Generates the badge content based on the badge type.\nUtilizes various helper methods to create the appropriate badge template based on the\ncurrent badge type. Supports 'dot', 'icon', 'counter', 'success', 'warning', and 'error'\ntypes, returning the corresponding template result for each type."
|
|
592
468
|
}
|
|
593
469
|
],
|
|
594
470
|
"attributes": [
|
|
595
471
|
{
|
|
596
|
-
"name": "
|
|
472
|
+
"name": "type",
|
|
597
473
|
"type": {
|
|
598
|
-
"text": "
|
|
474
|
+
"text": "BadgeType | undefined"
|
|
599
475
|
},
|
|
600
|
-
"
|
|
601
|
-
"
|
|
602
|
-
"fieldName": "ariaLabel"
|
|
476
|
+
"description": "Type of the badge\nCan be `dot` (notification) , `icon`, `counter`, `success`, `warning` or `error`.",
|
|
477
|
+
"fieldName": "type"
|
|
603
478
|
},
|
|
604
479
|
{
|
|
605
|
-
"name": "
|
|
480
|
+
"name": "icon-name",
|
|
606
481
|
"type": {
|
|
607
|
-
"text": "
|
|
482
|
+
"text": "IconNames | undefined"
|
|
608
483
|
},
|
|
609
|
-
"description": "
|
|
610
|
-
"fieldName": "
|
|
611
|
-
"inheritedFrom": {
|
|
612
|
-
"name": "AvatarComponentMixin",
|
|
613
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
614
|
-
}
|
|
484
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
485
|
+
"fieldName": "iconName"
|
|
615
486
|
},
|
|
616
487
|
{
|
|
617
|
-
"name": "
|
|
488
|
+
"name": "variant",
|
|
618
489
|
"type": {
|
|
619
|
-
"text": "
|
|
490
|
+
"text": "IconVariant"
|
|
620
491
|
},
|
|
621
|
-
"description": "
|
|
622
|
-
"
|
|
623
|
-
"
|
|
624
|
-
"name": "AvatarComponentMixin",
|
|
625
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
626
|
-
}
|
|
492
|
+
"description": "Type of the variant can be `primary` or `secondary`.\nIt defines the background and foreground color of the icon.",
|
|
493
|
+
"default": "primary",
|
|
494
|
+
"fieldName": "variant"
|
|
627
495
|
},
|
|
628
496
|
{
|
|
629
|
-
"name": "
|
|
497
|
+
"name": "counter",
|
|
630
498
|
"type": {
|
|
631
|
-
"text": "
|
|
499
|
+
"text": "number | undefined"
|
|
632
500
|
},
|
|
633
|
-
"description": "
|
|
634
|
-
"fieldName": "
|
|
635
|
-
"inheritedFrom": {
|
|
636
|
-
"name": "AvatarComponentMixin",
|
|
637
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
638
|
-
}
|
|
501
|
+
"description": "Counter is the number which can be provided in the badge.",
|
|
502
|
+
"fieldName": "counter"
|
|
639
503
|
},
|
|
640
504
|
{
|
|
641
|
-
"name": "
|
|
505
|
+
"name": "max-counter",
|
|
642
506
|
"type": {
|
|
643
|
-
"text": "
|
|
507
|
+
"text": "number"
|
|
644
508
|
},
|
|
645
|
-
"description": "
|
|
646
|
-
"default": "
|
|
647
|
-
"fieldName": "
|
|
648
|
-
"inheritedFrom": {
|
|
649
|
-
"name": "Buttonsimple",
|
|
650
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
651
|
-
}
|
|
509
|
+
"description": "The maximum number can be set up to 999, anything above that will be rendered as _999+_.\nThe max counter can be `9`, `99` or `999`.",
|
|
510
|
+
"default": "99",
|
|
511
|
+
"fieldName": "maxCounter"
|
|
652
512
|
},
|
|
653
513
|
{
|
|
654
|
-
"name": "
|
|
514
|
+
"name": "overlay",
|
|
655
515
|
"type": {
|
|
656
|
-
"text": "
|
|
516
|
+
"text": "boolean"
|
|
657
517
|
},
|
|
658
|
-
"
|
|
659
|
-
"
|
|
660
|
-
"
|
|
661
|
-
"name": "AvatarComponentMixin",
|
|
662
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
663
|
-
}
|
|
518
|
+
"default": "false",
|
|
519
|
+
"description": "Overlay is to add a thin outline to the badge.\nThis will help distinguish between the badge and the button,\nwhere the badge will be layered on top of a button.",
|
|
520
|
+
"fieldName": "overlay"
|
|
664
521
|
},
|
|
665
522
|
{
|
|
666
|
-
"name": "
|
|
523
|
+
"name": "aria-label",
|
|
667
524
|
"type": {
|
|
668
|
-
"text": "
|
|
525
|
+
"text": "string | null"
|
|
669
526
|
},
|
|
670
|
-
"
|
|
671
|
-
"
|
|
672
|
-
"
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
527
|
+
"default": "null",
|
|
528
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
529
|
+
"fieldName": "ariaLabel"
|
|
530
|
+
}
|
|
531
|
+
],
|
|
532
|
+
"superclass": {
|
|
533
|
+
"name": "Component",
|
|
534
|
+
"module": "/src/models"
|
|
535
|
+
},
|
|
536
|
+
"tagName": "mdc-badge",
|
|
537
|
+
"jsDoc": "/**\n * The `mdc-badge` component is a versatile UI element used to\n * display dot, icons, counters, success, warning and error type badge.\n *\n * Supported badge types:\n * - `dot`: Displays a dot notification badge with a blue color.\n * - `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n * - `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\n * it shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n * - `success`: Displays a success badge with a check circle icon and green color.\n * - `warning`: Displays a warning badge with a warning icon and yellow color.\n * - `error`: Displays a error badge with a error legacy icon and red color.\n *\n * For `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n *\n * For the `counter` type, the `mdc-text` component is used to render the counter value.\n *\n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @tagname mdc-badge\n *\n * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.\n * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.\n * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.\n * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.\n * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.\n * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.\n * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.\n * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.\n * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.\n * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.\n * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.\n */",
|
|
538
|
+
"customElement": true
|
|
539
|
+
}
|
|
540
|
+
],
|
|
541
|
+
"exports": [
|
|
542
|
+
{
|
|
543
|
+
"kind": "js",
|
|
544
|
+
"name": "default",
|
|
545
|
+
"declaration": {
|
|
546
|
+
"name": "Badge",
|
|
547
|
+
"module": "components/badge/badge.component.js"
|
|
548
|
+
}
|
|
549
|
+
}
|
|
550
|
+
]
|
|
551
|
+
},
|
|
552
|
+
{
|
|
553
|
+
"kind": "javascript-module",
|
|
554
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
555
|
+
"declarations": [
|
|
556
|
+
{
|
|
557
|
+
"kind": "class",
|
|
558
|
+
"description": "The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n\nThis component is made by extending `buttonsimple` class.\nThe button component acts as a wrapper for the avatar component.",
|
|
559
|
+
"name": "AvatarButton",
|
|
560
|
+
"members": [
|
|
677
561
|
{
|
|
678
|
-
"
|
|
562
|
+
"kind": "field",
|
|
563
|
+
"name": "ariaLabel",
|
|
679
564
|
"type": {
|
|
680
|
-
"text": "
|
|
565
|
+
"text": "string | null"
|
|
681
566
|
},
|
|
682
|
-
"default": "
|
|
683
|
-
"description": "
|
|
684
|
-
"
|
|
685
|
-
"inheritedFrom": {
|
|
686
|
-
"name": "AvatarComponentMixin",
|
|
687
|
-
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
688
|
-
}
|
|
567
|
+
"default": "null",
|
|
568
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
569
|
+
"attribute": "aria-label"
|
|
689
570
|
},
|
|
690
571
|
{
|
|
691
|
-
"
|
|
572
|
+
"kind": "method",
|
|
573
|
+
"name": "setSize",
|
|
574
|
+
"privacy": "private",
|
|
575
|
+
"parameters": [
|
|
576
|
+
{
|
|
577
|
+
"name": "size",
|
|
578
|
+
"type": {
|
|
579
|
+
"text": "AvatarSize"
|
|
580
|
+
}
|
|
581
|
+
}
|
|
582
|
+
]
|
|
583
|
+
},
|
|
584
|
+
{
|
|
585
|
+
"kind": "field",
|
|
586
|
+
"name": "active",
|
|
692
587
|
"type": {
|
|
693
|
-
"text": "
|
|
588
|
+
"text": "boolean"
|
|
694
589
|
},
|
|
695
|
-
"default": "
|
|
696
|
-
"description": "
|
|
697
|
-
"
|
|
590
|
+
"default": "undefined as unknown",
|
|
591
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
592
|
+
"attribute": "active",
|
|
698
593
|
"inheritedFrom": {
|
|
699
|
-
"name": "
|
|
700
|
-
"module": "
|
|
594
|
+
"name": "Buttonsimple",
|
|
595
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
701
596
|
}
|
|
702
597
|
},
|
|
703
598
|
{
|
|
599
|
+
"kind": "field",
|
|
704
600
|
"name": "disabled",
|
|
705
601
|
"type": {
|
|
706
602
|
"text": "boolean"
|
|
707
603
|
},
|
|
708
|
-
"default": "
|
|
604
|
+
"default": "undefined as unknown",
|
|
709
605
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
710
|
-
"
|
|
606
|
+
"attribute": "disabled",
|
|
607
|
+
"reflects": true,
|
|
711
608
|
"inheritedFrom": {
|
|
712
609
|
"name": "DisabledMixin",
|
|
713
|
-
"module": "
|
|
714
|
-
}
|
|
715
|
-
},
|
|
716
|
-
{
|
|
717
|
-
"name": "active",
|
|
718
|
-
"type": {
|
|
719
|
-
"text": "boolean"
|
|
720
|
-
},
|
|
721
|
-
"default": "false",
|
|
722
|
-
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
723
|
-
"fieldName": "active",
|
|
724
|
-
"inheritedFrom": {
|
|
725
|
-
"name": "Buttonsimple",
|
|
726
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
610
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
727
611
|
}
|
|
728
612
|
},
|
|
729
613
|
{
|
|
730
|
-
"
|
|
614
|
+
"kind": "field",
|
|
615
|
+
"name": "softDisabled",
|
|
731
616
|
"type": {
|
|
732
617
|
"text": "boolean"
|
|
733
618
|
},
|
|
734
|
-
"default": "
|
|
619
|
+
"default": "undefined as unknown",
|
|
735
620
|
"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.",
|
|
736
|
-
"
|
|
621
|
+
"attribute": "soft-disabled",
|
|
737
622
|
"inheritedFrom": {
|
|
738
623
|
"name": "Buttonsimple",
|
|
739
|
-
"module": "
|
|
624
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
740
625
|
}
|
|
741
626
|
},
|
|
742
627
|
{
|
|
628
|
+
"kind": "field",
|
|
743
629
|
"name": "role",
|
|
744
630
|
"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.",
|
|
745
|
-
"default": "button",
|
|
746
|
-
"
|
|
631
|
+
"default": "'button'",
|
|
632
|
+
"attribute": "role",
|
|
633
|
+
"reflects": true,
|
|
634
|
+
"type": {
|
|
635
|
+
"text": "string"
|
|
636
|
+
},
|
|
747
637
|
"inheritedFrom": {
|
|
748
638
|
"name": "Buttonsimple",
|
|
749
|
-
"module": "
|
|
639
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
750
640
|
}
|
|
751
641
|
},
|
|
752
642
|
{
|
|
643
|
+
"kind": "field",
|
|
753
644
|
"name": "type",
|
|
754
645
|
"type": {
|
|
755
646
|
"text": "ButtonType"
|
|
756
647
|
},
|
|
757
648
|
"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.",
|
|
758
649
|
"default": "button",
|
|
759
|
-
"
|
|
650
|
+
"attribute": "type",
|
|
651
|
+
"reflects": true,
|
|
760
652
|
"inheritedFrom": {
|
|
761
653
|
"name": "Buttonsimple",
|
|
762
|
-
"module": "
|
|
654
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
763
655
|
}
|
|
764
|
-
}
|
|
765
|
-
],
|
|
766
|
-
"mixins": [
|
|
767
|
-
{
|
|
768
|
-
"name": "AvatarComponentMixin",
|
|
769
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
770
|
-
}
|
|
771
|
-
],
|
|
772
|
-
"superclass": {
|
|
773
|
-
"name": "Buttonsimple",
|
|
774
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
775
|
-
},
|
|
776
|
-
"tagName": "mdc-avatarbutton",
|
|
777
|
-
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @tagname mdc-avatarbutton\n */",
|
|
778
|
-
"customElement": true
|
|
779
|
-
}
|
|
780
|
-
],
|
|
781
|
-
"exports": [
|
|
782
|
-
{
|
|
783
|
-
"kind": "js",
|
|
784
|
-
"name": "default",
|
|
785
|
-
"declaration": {
|
|
786
|
-
"name": "AvatarButton",
|
|
787
|
-
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
788
|
-
}
|
|
789
|
-
}
|
|
790
|
-
]
|
|
791
|
-
},
|
|
792
|
-
{
|
|
793
|
-
"kind": "javascript-module",
|
|
794
|
-
"path": "components/badge/badge.component.js",
|
|
795
|
-
"declarations": [
|
|
796
|
-
{
|
|
797
|
-
"kind": "class",
|
|
798
|
-
"description": "The `mdc-badge` component is a versatile UI element used to\ndisplay dot, icons, counters, success, warning and error type badge.\n\nSupported badge types:\n- `dot`: Displays a dot notification badge with a blue color.\n- `icon`: Displays a badge with a specified icon using the `icon-name` attribute.\n- `counter`: Displays a badge with a counter value. If the counter exceeds the `max-counter`,\nit shows `maxCounter+`. The maximum value of the counter is 999 and anything above that will be set to `999+`.\n- `success`: Displays a success badge with a check circle icon and green color.\n- `warning`: Displays a warning badge with a warning icon and yellow color.\n- `error`: Displays a error badge with a error legacy icon and red color.\n\nFor `icon`, `success`, `warning` and `error` types, the `mdc-icon` component is used to render the icon.\n\nFor the `counter` type, the `mdc-text` component is used to render the counter value.",
|
|
799
|
-
"name": "Badge",
|
|
800
|
-
"cssProperties": [
|
|
801
|
-
{
|
|
802
|
-
"description": "The foreground color of the primary badge.",
|
|
803
|
-
"name": "--mdc-badge-primary-foreground-color"
|
|
804
|
-
},
|
|
805
|
-
{
|
|
806
|
-
"description": "The background color of the primary badge.",
|
|
807
|
-
"name": "--mdc-badge-primary-background-color"
|
|
808
|
-
},
|
|
809
|
-
{
|
|
810
|
-
"description": "The foreground color of the secondary badge.",
|
|
811
|
-
"name": "--mdc-badge-secondary-foreground-color"
|
|
812
|
-
},
|
|
813
|
-
{
|
|
814
|
-
"description": "The background color of the secondary badge.",
|
|
815
|
-
"name": "--mdc-badge-secondary-background-color"
|
|
816
|
-
},
|
|
817
|
-
{
|
|
818
|
-
"description": "The foreground color of the success badge.",
|
|
819
|
-
"name": "--mdc-badge-success-foreground-color"
|
|
820
|
-
},
|
|
821
|
-
{
|
|
822
|
-
"description": "The background color of the success badge.",
|
|
823
|
-
"name": "--mdc-badge-success-background-color"
|
|
824
|
-
},
|
|
825
|
-
{
|
|
826
|
-
"description": "The foreground color of the warning badge.",
|
|
827
|
-
"name": "--mdc-badge-warning-foreground-color"
|
|
828
|
-
},
|
|
829
|
-
{
|
|
830
|
-
"description": "The background color of the warning badge.",
|
|
831
|
-
"name": "--mdc-badge-warning-background-color"
|
|
832
|
-
},
|
|
833
|
-
{
|
|
834
|
-
"description": "The foreground color of the error badge.",
|
|
835
|
-
"name": "--mdc-badge-error-foreground-color"
|
|
836
656
|
},
|
|
837
657
|
{
|
|
838
|
-
"
|
|
839
|
-
"name": "
|
|
658
|
+
"kind": "field",
|
|
659
|
+
"name": "src",
|
|
660
|
+
"type": {
|
|
661
|
+
"text": "string | undefined"
|
|
662
|
+
},
|
|
663
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
664
|
+
"attribute": "src",
|
|
665
|
+
"inheritedFrom": {
|
|
666
|
+
"name": "AvatarComponentMixin",
|
|
667
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
668
|
+
}
|
|
840
669
|
},
|
|
841
|
-
{
|
|
842
|
-
"description": "The background color of the badge overlay.",
|
|
843
|
-
"name": "--mdc-badge-overlay-background-color"
|
|
844
|
-
}
|
|
845
|
-
],
|
|
846
|
-
"members": [
|
|
847
670
|
{
|
|
848
671
|
"kind": "field",
|
|
849
|
-
"name": "
|
|
672
|
+
"name": "initials",
|
|
850
673
|
"type": {
|
|
851
|
-
"text": "
|
|
674
|
+
"text": "string | undefined"
|
|
852
675
|
},
|
|
853
|
-
"description": "
|
|
854
|
-
"attribute": "
|
|
855
|
-
"
|
|
676
|
+
"description": "The initials to be displayed for the avatar.",
|
|
677
|
+
"attribute": "initials",
|
|
678
|
+
"inheritedFrom": {
|
|
679
|
+
"name": "AvatarComponentMixin",
|
|
680
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
681
|
+
}
|
|
856
682
|
},
|
|
857
683
|
{
|
|
858
684
|
"kind": "field",
|
|
859
|
-
"name": "
|
|
685
|
+
"name": "presence",
|
|
860
686
|
"type": {
|
|
861
|
-
"text": "
|
|
687
|
+
"text": "PresenceType | undefined"
|
|
862
688
|
},
|
|
863
|
-
"description": "
|
|
864
|
-
"attribute": "
|
|
689
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
690
|
+
"attribute": "presence",
|
|
691
|
+
"inheritedFrom": {
|
|
692
|
+
"name": "AvatarComponentMixin",
|
|
693
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
694
|
+
}
|
|
865
695
|
},
|
|
866
696
|
{
|
|
867
697
|
"kind": "field",
|
|
868
|
-
"name": "
|
|
698
|
+
"name": "size",
|
|
869
699
|
"type": {
|
|
870
|
-
"text": "
|
|
700
|
+
"text": "ButtonSize"
|
|
871
701
|
},
|
|
872
|
-
"description": "
|
|
873
|
-
"default": "
|
|
874
|
-
"attribute": "
|
|
875
|
-
"reflects": true
|
|
702
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
703
|
+
"default": "32",
|
|
704
|
+
"attribute": "size",
|
|
705
|
+
"reflects": true,
|
|
706
|
+
"inheritedFrom": {
|
|
707
|
+
"name": "Buttonsimple",
|
|
708
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
709
|
+
}
|
|
876
710
|
},
|
|
877
711
|
{
|
|
878
712
|
"kind": "field",
|
|
879
|
-
"name": "
|
|
713
|
+
"name": "iconName",
|
|
880
714
|
"type": {
|
|
881
|
-
"text": "
|
|
715
|
+
"text": "IconNames | undefined"
|
|
882
716
|
},
|
|
883
|
-
"description": "
|
|
884
|
-
"attribute": "
|
|
717
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
718
|
+
"attribute": "icon-name",
|
|
719
|
+
"inheritedFrom": {
|
|
720
|
+
"name": "AvatarComponentMixin",
|
|
721
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
722
|
+
}
|
|
885
723
|
},
|
|
886
724
|
{
|
|
887
725
|
"kind": "field",
|
|
888
|
-
"name": "
|
|
726
|
+
"name": "counter",
|
|
889
727
|
"type": {
|
|
890
|
-
"text": "number"
|
|
728
|
+
"text": "number | undefined"
|
|
891
729
|
},
|
|
892
|
-
"description": "The
|
|
893
|
-
"
|
|
894
|
-
"
|
|
895
|
-
|
|
730
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
731
|
+
"attribute": "counter",
|
|
732
|
+
"inheritedFrom": {
|
|
733
|
+
"name": "AvatarComponentMixin",
|
|
734
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
735
|
+
}
|
|
896
736
|
},
|
|
897
737
|
{
|
|
898
738
|
"kind": "field",
|
|
899
|
-
"name": "
|
|
739
|
+
"name": "isTyping",
|
|
900
740
|
"type": {
|
|
901
741
|
"text": "boolean"
|
|
902
742
|
},
|
|
903
743
|
"default": "false",
|
|
904
|
-
"description": "
|
|
905
|
-
"attribute": "
|
|
744
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
745
|
+
"attribute": "is-typing",
|
|
746
|
+
"inheritedFrom": {
|
|
747
|
+
"name": "AvatarComponentMixin",
|
|
748
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
749
|
+
}
|
|
906
750
|
},
|
|
907
751
|
{
|
|
908
752
|
"kind": "field",
|
|
909
|
-
"name": "
|
|
753
|
+
"name": "tabIndex",
|
|
910
754
|
"type": {
|
|
911
|
-
"text": "
|
|
755
|
+
"text": "number"
|
|
912
756
|
},
|
|
913
|
-
"default": "
|
|
914
|
-
"description": "
|
|
915
|
-
"attribute": "
|
|
757
|
+
"default": "0",
|
|
758
|
+
"description": "This property specifies the tab order of the element.",
|
|
759
|
+
"attribute": "tabIndex",
|
|
760
|
+
"reflects": true,
|
|
761
|
+
"inheritedFrom": {
|
|
762
|
+
"name": "TabIndexMixin",
|
|
763
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
764
|
+
}
|
|
916
765
|
},
|
|
917
766
|
{
|
|
918
767
|
"kind": "method",
|
|
919
|
-
"name": "
|
|
768
|
+
"name": "executeAction",
|
|
920
769
|
"privacy": "private",
|
|
921
|
-
"
|
|
922
|
-
"
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
},
|
|
932
|
-
"description": "the maximum limit which can be displayed on the badge"
|
|
933
|
-
},
|
|
770
|
+
"inheritedFrom": {
|
|
771
|
+
"name": "Buttonsimple",
|
|
772
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
773
|
+
}
|
|
774
|
+
},
|
|
775
|
+
{
|
|
776
|
+
"kind": "method",
|
|
777
|
+
"name": "setAriaPressed",
|
|
778
|
+
"privacy": "private",
|
|
779
|
+
"parameters": [
|
|
934
780
|
{
|
|
935
|
-
"name": "
|
|
936
|
-
"optional": true,
|
|
781
|
+
"name": "element",
|
|
937
782
|
"type": {
|
|
938
|
-
"text": "
|
|
783
|
+
"text": "HTMLElement"
|
|
939
784
|
},
|
|
940
|
-
"description": "
|
|
785
|
+
"description": "The target element."
|
|
786
|
+
},
|
|
787
|
+
{
|
|
788
|
+
"name": "active",
|
|
789
|
+
"type": {
|
|
790
|
+
"text": "boolean"
|
|
791
|
+
},
|
|
792
|
+
"description": "The active state."
|
|
941
793
|
}
|
|
942
794
|
],
|
|
943
|
-
"description": "
|
|
795
|
+
"description": "Sets the aria-pressed attribute based on the active state.",
|
|
796
|
+
"inheritedFrom": {
|
|
797
|
+
"name": "Buttonsimple",
|
|
798
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
799
|
+
}
|
|
944
800
|
},
|
|
945
801
|
{
|
|
946
802
|
"kind": "method",
|
|
947
|
-
"name": "
|
|
803
|
+
"name": "setSoftDisabled",
|
|
948
804
|
"privacy": "private",
|
|
949
|
-
"return": {
|
|
950
|
-
"type": {
|
|
951
|
-
"text": ""
|
|
952
|
-
}
|
|
953
|
-
},
|
|
954
805
|
"parameters": [
|
|
955
806
|
{
|
|
956
|
-
"name": "
|
|
807
|
+
"name": "element",
|
|
957
808
|
"type": {
|
|
958
|
-
"text": "
|
|
809
|
+
"text": "HTMLElement"
|
|
959
810
|
},
|
|
960
|
-
"description": "
|
|
811
|
+
"description": "The button element."
|
|
961
812
|
},
|
|
962
813
|
{
|
|
963
|
-
"name": "
|
|
814
|
+
"name": "softDisabled",
|
|
964
815
|
"type": {
|
|
965
|
-
"text": "
|
|
816
|
+
"text": "boolean"
|
|
966
817
|
},
|
|
967
|
-
"description": "
|
|
818
|
+
"description": "The soft-disabled state."
|
|
968
819
|
}
|
|
969
820
|
],
|
|
970
|
-
"description": "
|
|
821
|
+
"description": "Sets the soft-disabled attribute for the button.\nWhen soft-disabled, the button looks to be disabled but remains focusable and clickable.\nAlso sets/removes aria-disabled attribute.",
|
|
822
|
+
"inheritedFrom": {
|
|
823
|
+
"name": "Buttonsimple",
|
|
824
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
825
|
+
}
|
|
971
826
|
},
|
|
972
827
|
{
|
|
973
828
|
"kind": "method",
|
|
974
|
-
"name": "
|
|
829
|
+
"name": "setDisabled",
|
|
975
830
|
"privacy": "private",
|
|
976
|
-
"
|
|
977
|
-
|
|
978
|
-
"
|
|
831
|
+
"parameters": [
|
|
832
|
+
{
|
|
833
|
+
"name": "element",
|
|
834
|
+
"type": {
|
|
835
|
+
"text": "HTMLElement"
|
|
836
|
+
},
|
|
837
|
+
"description": "The button element."
|
|
838
|
+
},
|
|
839
|
+
{
|
|
840
|
+
"name": "disabled",
|
|
841
|
+
"type": {
|
|
842
|
+
"text": "boolean"
|
|
843
|
+
},
|
|
844
|
+
"description": "The disabled state."
|
|
979
845
|
}
|
|
980
|
-
|
|
981
|
-
"description": "
|
|
846
|
+
],
|
|
847
|
+
"description": "Sets the disabled attribute for the button.\nWhen disabled, the button is not focusable or clickable, and tabindex is set to -1.\nThe previous tabindex is stored and restored when enabled.\nAlso sets/removes aria-disabled attribute.",
|
|
848
|
+
"inheritedFrom": {
|
|
849
|
+
"name": "Buttonsimple",
|
|
850
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
851
|
+
}
|
|
982
852
|
},
|
|
983
853
|
{
|
|
984
854
|
"kind": "method",
|
|
985
|
-
"name": "
|
|
855
|
+
"name": "triggerClickEvent",
|
|
986
856
|
"privacy": "private",
|
|
987
|
-
"
|
|
988
|
-
"
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
},
|
|
992
|
-
"description": "Method to generate the badge text and counter template."
|
|
857
|
+
"inheritedFrom": {
|
|
858
|
+
"name": "Buttonsimple",
|
|
859
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
860
|
+
}
|
|
993
861
|
},
|
|
994
862
|
{
|
|
995
863
|
"kind": "method",
|
|
996
|
-
"name": "
|
|
864
|
+
"name": "handleKeyDown",
|
|
997
865
|
"privacy": "private",
|
|
998
|
-
"
|
|
999
|
-
|
|
1000
|
-
"
|
|
866
|
+
"parameters": [
|
|
867
|
+
{
|
|
868
|
+
"name": "event",
|
|
869
|
+
"type": {
|
|
870
|
+
"text": "KeyboardEvent"
|
|
871
|
+
},
|
|
872
|
+
"description": "The keyboard event."
|
|
1001
873
|
}
|
|
1002
|
-
|
|
1003
|
-
"description": "
|
|
874
|
+
],
|
|
875
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.",
|
|
876
|
+
"inheritedFrom": {
|
|
877
|
+
"name": "Buttonsimple",
|
|
878
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
879
|
+
}
|
|
1004
880
|
},
|
|
1005
881
|
{
|
|
1006
882
|
"kind": "method",
|
|
1007
|
-
"name": "
|
|
883
|
+
"name": "handleKeyUp",
|
|
1008
884
|
"privacy": "private",
|
|
1009
|
-
"
|
|
1010
|
-
|
|
1011
|
-
"
|
|
885
|
+
"parameters": [
|
|
886
|
+
{
|
|
887
|
+
"name": "event",
|
|
888
|
+
"type": {
|
|
889
|
+
"text": "KeyboardEvent"
|
|
890
|
+
},
|
|
891
|
+
"description": "The keyboard event."
|
|
1012
892
|
}
|
|
1013
|
-
|
|
1014
|
-
"description": "
|
|
893
|
+
],
|
|
894
|
+
"description": "Handles the keyup event on the button.\nIf the key is 'Enter' or 'Space', the button is clicked.\nIf the key is 'Space', the button is pressed. The native HTML button works in the same way.",
|
|
895
|
+
"inheritedFrom": {
|
|
896
|
+
"name": "Buttonsimple",
|
|
897
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
898
|
+
}
|
|
1015
899
|
}
|
|
1016
900
|
],
|
|
1017
901
|
"attributes": [
|
|
1018
902
|
{
|
|
1019
|
-
"name": "
|
|
903
|
+
"name": "aria-label",
|
|
1020
904
|
"type": {
|
|
1021
|
-
"text": "
|
|
905
|
+
"text": "string | null"
|
|
1022
906
|
},
|
|
1023
|
-
"
|
|
1024
|
-
"
|
|
907
|
+
"default": "null",
|
|
908
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
909
|
+
"fieldName": "ariaLabel"
|
|
1025
910
|
},
|
|
1026
911
|
{
|
|
1027
|
-
"name": "
|
|
912
|
+
"name": "src",
|
|
1028
913
|
"type": {
|
|
1029
|
-
"text": "
|
|
914
|
+
"text": "string | undefined"
|
|
1030
915
|
},
|
|
1031
|
-
"description": "
|
|
1032
|
-
"fieldName": "
|
|
916
|
+
"description": "The src is the url which will be used to display the avatar.\nWhen the src is loading, we will display the initials as a placeholder.",
|
|
917
|
+
"fieldName": "src",
|
|
918
|
+
"inheritedFrom": {
|
|
919
|
+
"name": "AvatarComponentMixin",
|
|
920
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
921
|
+
}
|
|
1033
922
|
},
|
|
1034
923
|
{
|
|
1035
|
-
"name": "
|
|
924
|
+
"name": "initials",
|
|
1036
925
|
"type": {
|
|
1037
|
-
"text": "
|
|
926
|
+
"text": "string | undefined"
|
|
1038
927
|
},
|
|
1039
|
-
"description": "
|
|
1040
|
-
"
|
|
1041
|
-
"
|
|
928
|
+
"description": "The initials to be displayed for the avatar.",
|
|
929
|
+
"fieldName": "initials",
|
|
930
|
+
"inheritedFrom": {
|
|
931
|
+
"name": "AvatarComponentMixin",
|
|
932
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
933
|
+
}
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
"name": "presence",
|
|
937
|
+
"type": {
|
|
938
|
+
"text": "PresenceType | undefined"
|
|
939
|
+
},
|
|
940
|
+
"description": "The presence is the status which can be used to display the\nactivity state of a user or a space within an avatar component.\n\nAcceptable values include:\n- `active`\n- `away`\n- `away-calling`\n- `busy`\n- `dnd`\n- `meeting`\n- `on-call`\n- `on-device`\n- `on-mobile`\n- `pause`\n- `pto`\n- `presenting`\n- `quiet`\n- `scheduled`",
|
|
941
|
+
"fieldName": "presence",
|
|
942
|
+
"inheritedFrom": {
|
|
943
|
+
"name": "AvatarComponentMixin",
|
|
944
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
945
|
+
}
|
|
946
|
+
},
|
|
947
|
+
{
|
|
948
|
+
"name": "size",
|
|
949
|
+
"type": {
|
|
950
|
+
"text": "ButtonSize"
|
|
951
|
+
},
|
|
952
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
953
|
+
"default": "32",
|
|
954
|
+
"fieldName": "size",
|
|
955
|
+
"inheritedFrom": {
|
|
956
|
+
"name": "Buttonsimple",
|
|
957
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
958
|
+
}
|
|
959
|
+
},
|
|
960
|
+
{
|
|
961
|
+
"name": "icon-name",
|
|
962
|
+
"type": {
|
|
963
|
+
"text": "IconNames | undefined"
|
|
964
|
+
},
|
|
965
|
+
"description": "Name of the icon to be displayed inside the Avatar.\nMust be a valid icon name.",
|
|
966
|
+
"fieldName": "iconName",
|
|
967
|
+
"inheritedFrom": {
|
|
968
|
+
"name": "AvatarComponentMixin",
|
|
969
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
970
|
+
}
|
|
1042
971
|
},
|
|
1043
972
|
{
|
|
1044
973
|
"name": "counter",
|
|
1045
974
|
"type": {
|
|
1046
975
|
"text": "number | undefined"
|
|
1047
976
|
},
|
|
1048
|
-
"description": "
|
|
1049
|
-
"fieldName": "counter"
|
|
977
|
+
"description": "The counter is the number which can be displayed on the avatar.\nThe maximum number is 99 and if the given number is greater than 99,\nthen the avatar will be displayed as `99+`.\nIf the given number is a negative number,\nthen the avatar will be displayed as `0`.",
|
|
978
|
+
"fieldName": "counter",
|
|
979
|
+
"inheritedFrom": {
|
|
980
|
+
"name": "AvatarComponentMixin",
|
|
981
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
982
|
+
}
|
|
1050
983
|
},
|
|
1051
984
|
{
|
|
1052
|
-
"name": "
|
|
985
|
+
"name": "is-typing",
|
|
986
|
+
"type": {
|
|
987
|
+
"text": "boolean"
|
|
988
|
+
},
|
|
989
|
+
"default": "false",
|
|
990
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
991
|
+
"fieldName": "isTyping",
|
|
992
|
+
"inheritedFrom": {
|
|
993
|
+
"name": "AvatarComponentMixin",
|
|
994
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
995
|
+
}
|
|
996
|
+
},
|
|
997
|
+
{
|
|
998
|
+
"name": "tabIndex",
|
|
1053
999
|
"type": {
|
|
1054
1000
|
"text": "number"
|
|
1055
1001
|
},
|
|
1056
|
-
"
|
|
1057
|
-
"
|
|
1058
|
-
"fieldName": "
|
|
1002
|
+
"default": "0",
|
|
1003
|
+
"description": "This property specifies the tab order of the element.",
|
|
1004
|
+
"fieldName": "tabIndex",
|
|
1005
|
+
"inheritedFrom": {
|
|
1006
|
+
"name": "TabIndexMixin",
|
|
1007
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
1008
|
+
}
|
|
1059
1009
|
},
|
|
1060
1010
|
{
|
|
1061
|
-
"name": "
|
|
1011
|
+
"name": "disabled",
|
|
1062
1012
|
"type": {
|
|
1063
1013
|
"text": "boolean"
|
|
1064
1014
|
},
|
|
1065
1015
|
"default": "false",
|
|
1066
|
-
"description": "
|
|
1067
|
-
"fieldName": "
|
|
1016
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
1017
|
+
"fieldName": "disabled",
|
|
1018
|
+
"inheritedFrom": {
|
|
1019
|
+
"name": "DisabledMixin",
|
|
1020
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
1021
|
+
}
|
|
1068
1022
|
},
|
|
1069
1023
|
{
|
|
1070
|
-
"name": "
|
|
1024
|
+
"name": "active",
|
|
1071
1025
|
"type": {
|
|
1072
|
-
"text": "
|
|
1026
|
+
"text": "boolean"
|
|
1073
1027
|
},
|
|
1074
|
-
"default": "
|
|
1075
|
-
"description": "
|
|
1076
|
-
"fieldName": "
|
|
1077
|
-
|
|
1028
|
+
"default": "false",
|
|
1029
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.",
|
|
1030
|
+
"fieldName": "active",
|
|
1031
|
+
"inheritedFrom": {
|
|
1032
|
+
"name": "Buttonsimple",
|
|
1033
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1034
|
+
}
|
|
1035
|
+
},
|
|
1036
|
+
{
|
|
1037
|
+
"name": "soft-disabled",
|
|
1038
|
+
"type": {
|
|
1039
|
+
"text": "boolean"
|
|
1040
|
+
},
|
|
1041
|
+
"default": "false",
|
|
1042
|
+
"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.",
|
|
1043
|
+
"fieldName": "softDisabled",
|
|
1044
|
+
"inheritedFrom": {
|
|
1045
|
+
"name": "Buttonsimple",
|
|
1046
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1047
|
+
}
|
|
1048
|
+
},
|
|
1049
|
+
{
|
|
1050
|
+
"name": "role",
|
|
1051
|
+
"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.",
|
|
1052
|
+
"default": "button",
|
|
1053
|
+
"fieldName": "role",
|
|
1054
|
+
"inheritedFrom": {
|
|
1055
|
+
"name": "Buttonsimple",
|
|
1056
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1057
|
+
}
|
|
1058
|
+
},
|
|
1059
|
+
{
|
|
1060
|
+
"name": "type",
|
|
1061
|
+
"type": {
|
|
1062
|
+
"text": "ButtonType"
|
|
1063
|
+
},
|
|
1064
|
+
"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.",
|
|
1065
|
+
"default": "button",
|
|
1066
|
+
"fieldName": "type",
|
|
1067
|
+
"inheritedFrom": {
|
|
1068
|
+
"name": "Buttonsimple",
|
|
1069
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
],
|
|
1073
|
+
"mixins": [
|
|
1074
|
+
{
|
|
1075
|
+
"name": "AvatarComponentMixin",
|
|
1076
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
1077
|
+
}
|
|
1078
|
+
],
|
|
1079
|
+
"superclass": {
|
|
1080
|
+
"name": "Buttonsimple",
|
|
1081
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
1082
|
+
},
|
|
1083
|
+
"tagName": "mdc-avatarbutton",
|
|
1084
|
+
"jsDoc": "/**\n * The `mdc-avatarbutton` component is an interactable version of the `mdc-avatar` component.\n *\n * This component is made by extending `buttonsimple` class.\n * The button component acts as a wrapper for the avatar component.\n *\n * @dependency mdc-avatar\n *\n * @tagname mdc-avatarbutton\n */",
|
|
1085
|
+
"customElement": true
|
|
1086
|
+
}
|
|
1087
|
+
],
|
|
1088
|
+
"exports": [
|
|
1089
|
+
{
|
|
1090
|
+
"kind": "js",
|
|
1091
|
+
"name": "default",
|
|
1092
|
+
"declaration": {
|
|
1093
|
+
"name": "AvatarButton",
|
|
1094
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
1095
|
+
}
|
|
1096
|
+
}
|
|
1097
|
+
]
|
|
1098
|
+
},
|
|
1099
|
+
{
|
|
1100
|
+
"kind": "javascript-module",
|
|
1101
|
+
"path": "components/bullet/bullet.component.js",
|
|
1102
|
+
"declarations": [
|
|
1103
|
+
{
|
|
1104
|
+
"kind": "class",
|
|
1105
|
+
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1106
|
+
"name": "Bullet",
|
|
1107
|
+
"cssProperties": [
|
|
1108
|
+
{
|
|
1109
|
+
"description": "background color of the bullet",
|
|
1110
|
+
"name": "--mdc-bullet-background-color"
|
|
1111
|
+
},
|
|
1112
|
+
{
|
|
1113
|
+
"description": "small size value of the bullet",
|
|
1114
|
+
"name": "--mdc-bullet-size-small"
|
|
1115
|
+
},
|
|
1116
|
+
{
|
|
1117
|
+
"description": "medium size value of the bullet",
|
|
1118
|
+
"name": "--mdc-bullet-size-medium"
|
|
1119
|
+
},
|
|
1120
|
+
{
|
|
1121
|
+
"description": "large size value of the bullet",
|
|
1122
|
+
"name": "--mdc-bullet-size-large"
|
|
1123
|
+
}
|
|
1124
|
+
],
|
|
1125
|
+
"members": [
|
|
1126
|
+
{
|
|
1127
|
+
"kind": "field",
|
|
1128
|
+
"name": "size",
|
|
1129
|
+
"type": {
|
|
1130
|
+
"text": "Size"
|
|
1131
|
+
},
|
|
1132
|
+
"privacy": "public",
|
|
1133
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1134
|
+
"default": "small",
|
|
1135
|
+
"attribute": "size",
|
|
1136
|
+
"reflects": true
|
|
1137
|
+
}
|
|
1138
|
+
],
|
|
1139
|
+
"attributes": [
|
|
1140
|
+
{
|
|
1141
|
+
"name": "size",
|
|
1142
|
+
"type": {
|
|
1143
|
+
"text": "Size"
|
|
1144
|
+
},
|
|
1145
|
+
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1146
|
+
"default": "small",
|
|
1147
|
+
"fieldName": "size"
|
|
1148
|
+
}
|
|
1078
1149
|
],
|
|
1079
1150
|
"superclass": {
|
|
1080
1151
|
"name": "Component",
|
|
1081
1152
|
"module": "/src/models"
|
|
1082
1153
|
},
|
|
1083
|
-
"tagName": "mdc-
|
|
1084
|
-
"jsDoc": "/**\n *
|
|
1154
|
+
"tagName": "mdc-bullet",
|
|
1155
|
+
"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*/",
|
|
1085
1156
|
"customElement": true
|
|
1086
1157
|
}
|
|
1087
1158
|
],
|
|
@@ -1090,8 +1161,8 @@
|
|
|
1090
1161
|
"kind": "js",
|
|
1091
1162
|
"name": "default",
|
|
1092
1163
|
"declaration": {
|
|
1093
|
-
"name": "
|
|
1094
|
-
"module": "components/
|
|
1164
|
+
"name": "Bullet",
|
|
1165
|
+
"module": "components/bullet/bullet.component.js"
|
|
1095
1166
|
}
|
|
1096
1167
|
}
|
|
1097
1168
|
]
|
|
@@ -1904,77 +1975,6 @@
|
|
|
1904
1975
|
}
|
|
1905
1976
|
]
|
|
1906
1977
|
},
|
|
1907
|
-
{
|
|
1908
|
-
"kind": "javascript-module",
|
|
1909
|
-
"path": "components/bullet/bullet.component.js",
|
|
1910
|
-
"declarations": [
|
|
1911
|
-
{
|
|
1912
|
-
"kind": "class",
|
|
1913
|
-
"description": "Bullet component, which is a visual marker\nand be used to organize and present items in a list format.",
|
|
1914
|
-
"name": "Bullet",
|
|
1915
|
-
"cssProperties": [
|
|
1916
|
-
{
|
|
1917
|
-
"description": "background color of the bullet",
|
|
1918
|
-
"name": "--mdc-bullet-background-color"
|
|
1919
|
-
},
|
|
1920
|
-
{
|
|
1921
|
-
"description": "small size value of the bullet",
|
|
1922
|
-
"name": "--mdc-bullet-size-small"
|
|
1923
|
-
},
|
|
1924
|
-
{
|
|
1925
|
-
"description": "medium size value of the bullet",
|
|
1926
|
-
"name": "--mdc-bullet-size-medium"
|
|
1927
|
-
},
|
|
1928
|
-
{
|
|
1929
|
-
"description": "large size value of the bullet",
|
|
1930
|
-
"name": "--mdc-bullet-size-large"
|
|
1931
|
-
}
|
|
1932
|
-
],
|
|
1933
|
-
"members": [
|
|
1934
|
-
{
|
|
1935
|
-
"kind": "field",
|
|
1936
|
-
"name": "size",
|
|
1937
|
-
"type": {
|
|
1938
|
-
"text": "Size"
|
|
1939
|
-
},
|
|
1940
|
-
"privacy": "public",
|
|
1941
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1942
|
-
"default": "small",
|
|
1943
|
-
"attribute": "size",
|
|
1944
|
-
"reflects": true
|
|
1945
|
-
}
|
|
1946
|
-
],
|
|
1947
|
-
"attributes": [
|
|
1948
|
-
{
|
|
1949
|
-
"name": "size",
|
|
1950
|
-
"type": {
|
|
1951
|
-
"text": "Size"
|
|
1952
|
-
},
|
|
1953
|
-
"description": "Size of the bullet\n\nPossible values: 'small', 'medium', 'large'",
|
|
1954
|
-
"default": "small",
|
|
1955
|
-
"fieldName": "size"
|
|
1956
|
-
}
|
|
1957
|
-
],
|
|
1958
|
-
"superclass": {
|
|
1959
|
-
"name": "Component",
|
|
1960
|
-
"module": "/src/models"
|
|
1961
|
-
},
|
|
1962
|
-
"tagName": "mdc-bullet",
|
|
1963
|
-
"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*/",
|
|
1964
|
-
"customElement": true
|
|
1965
|
-
}
|
|
1966
|
-
],
|
|
1967
|
-
"exports": [
|
|
1968
|
-
{
|
|
1969
|
-
"kind": "js",
|
|
1970
|
-
"name": "default",
|
|
1971
|
-
"declaration": {
|
|
1972
|
-
"name": "Bullet",
|
|
1973
|
-
"module": "components/bullet/bullet.component.js"
|
|
1974
|
-
}
|
|
1975
|
-
}
|
|
1976
|
-
]
|
|
1977
|
-
},
|
|
1978
1978
|
{
|
|
1979
1979
|
"kind": "javascript-module",
|
|
1980
1980
|
"path": "components/checkbox/checkbox.component.js",
|
|
@@ -4328,49 +4328,168 @@
|
|
|
4328
4328
|
},
|
|
4329
4329
|
{
|
|
4330
4330
|
"kind": "javascript-module",
|
|
4331
|
-
"path": "components/
|
|
4331
|
+
"path": "components/modalcontainer/modalcontainer.component.js",
|
|
4332
4332
|
"declarations": [
|
|
4333
4333
|
{
|
|
4334
4334
|
"kind": "class",
|
|
4335
|
-
"description": "The `mdc-
|
|
4336
|
-
"name": "
|
|
4335
|
+
"description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
|
|
4336
|
+
"name": "Modalcontainer",
|
|
4337
4337
|
"cssProperties": [
|
|
4338
4338
|
{
|
|
4339
|
-
"description": "
|
|
4340
|
-
"name": "--mdc-
|
|
4341
|
-
},
|
|
4342
|
-
{
|
|
4343
|
-
"description": "The background color of the presence type away.",
|
|
4344
|
-
"name": "--mdc-presence-away-background-color"
|
|
4339
|
+
"description": "primary background color of the modalcontainer",
|
|
4340
|
+
"name": "--mdc-modalcontainer-primary-background-color"
|
|
4345
4341
|
},
|
|
4346
4342
|
{
|
|
4347
|
-
"description": "
|
|
4348
|
-
"name": "--mdc-
|
|
4343
|
+
"description": "border color of the modalcontainer",
|
|
4344
|
+
"name": "--mdc-modalcontainer-border-color"
|
|
4349
4345
|
},
|
|
4350
4346
|
{
|
|
4351
|
-
"description": "
|
|
4352
|
-
"name": "--mdc-
|
|
4347
|
+
"description": "inverted background color of the modalcontainer",
|
|
4348
|
+
"name": "--mdc-modalcontainer-inverted-background-color"
|
|
4353
4349
|
},
|
|
4354
4350
|
{
|
|
4355
|
-
"description": "
|
|
4356
|
-
"name": "--mdc-
|
|
4351
|
+
"description": "inverted border color of the modalcontainer",
|
|
4352
|
+
"name": "--mdc-modalcontainer-inverted-border-color"
|
|
4357
4353
|
},
|
|
4358
4354
|
{
|
|
4359
|
-
"description": "
|
|
4360
|
-
"name": "--mdc-
|
|
4361
|
-
}
|
|
4355
|
+
"description": "inverted text color of the modalcontainer",
|
|
4356
|
+
"name": "--mdc-modalcontainer-inverted-text-color"
|
|
4357
|
+
}
|
|
4358
|
+
],
|
|
4359
|
+
"slots": [
|
|
4362
4360
|
{
|
|
4363
|
-
"description": "
|
|
4364
|
-
"name": "
|
|
4365
|
-
}
|
|
4361
|
+
"description": "Default slot for modal container",
|
|
4362
|
+
"name": ""
|
|
4363
|
+
}
|
|
4364
|
+
],
|
|
4365
|
+
"members": [
|
|
4366
4366
|
{
|
|
4367
|
-
"
|
|
4368
|
-
"name": "
|
|
4367
|
+
"kind": "field",
|
|
4368
|
+
"name": "color",
|
|
4369
|
+
"type": {
|
|
4370
|
+
"text": "ModalContainerColor"
|
|
4371
|
+
},
|
|
4372
|
+
"description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
|
|
4373
|
+
"default": "tonal",
|
|
4374
|
+
"attribute": "color",
|
|
4375
|
+
"reflects": true
|
|
4369
4376
|
},
|
|
4370
4377
|
{
|
|
4371
|
-
"
|
|
4372
|
-
"name": "
|
|
4373
|
-
|
|
4378
|
+
"kind": "field",
|
|
4379
|
+
"name": "elevation",
|
|
4380
|
+
"type": {
|
|
4381
|
+
"text": "ModalContainerElevation"
|
|
4382
|
+
},
|
|
4383
|
+
"description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
|
|
4384
|
+
"default": "0",
|
|
4385
|
+
"attribute": "elevation",
|
|
4386
|
+
"reflects": true
|
|
4387
|
+
},
|
|
4388
|
+
{
|
|
4389
|
+
"kind": "field",
|
|
4390
|
+
"name": "role",
|
|
4391
|
+
"type": {
|
|
4392
|
+
"text": "ModalContainerRole"
|
|
4393
|
+
},
|
|
4394
|
+
"description": "Role of the modalcontainer",
|
|
4395
|
+
"default": "dialog",
|
|
4396
|
+
"attribute": "role"
|
|
4397
|
+
}
|
|
4398
|
+
],
|
|
4399
|
+
"attributes": [
|
|
4400
|
+
{
|
|
4401
|
+
"name": "color",
|
|
4402
|
+
"type": {
|
|
4403
|
+
"text": "ModalContainerColor"
|
|
4404
|
+
},
|
|
4405
|
+
"description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
|
|
4406
|
+
"default": "tonal",
|
|
4407
|
+
"fieldName": "color"
|
|
4408
|
+
},
|
|
4409
|
+
{
|
|
4410
|
+
"name": "elevation",
|
|
4411
|
+
"type": {
|
|
4412
|
+
"text": "ModalContainerElevation"
|
|
4413
|
+
},
|
|
4414
|
+
"description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
|
|
4415
|
+
"default": "0",
|
|
4416
|
+
"fieldName": "elevation"
|
|
4417
|
+
},
|
|
4418
|
+
{
|
|
4419
|
+
"name": "role",
|
|
4420
|
+
"type": {
|
|
4421
|
+
"text": "ModalContainerRole"
|
|
4422
|
+
},
|
|
4423
|
+
"description": "Role of the modalcontainer",
|
|
4424
|
+
"default": "dialog",
|
|
4425
|
+
"fieldName": "role"
|
|
4426
|
+
}
|
|
4427
|
+
],
|
|
4428
|
+
"superclass": {
|
|
4429
|
+
"name": "Component",
|
|
4430
|
+
"module": "/src/models"
|
|
4431
|
+
},
|
|
4432
|
+
"tagName": "mdc-modalcontainer",
|
|
4433
|
+
"jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
|
|
4434
|
+
"customElement": true
|
|
4435
|
+
}
|
|
4436
|
+
],
|
|
4437
|
+
"exports": [
|
|
4438
|
+
{
|
|
4439
|
+
"kind": "js",
|
|
4440
|
+
"name": "default",
|
|
4441
|
+
"declaration": {
|
|
4442
|
+
"name": "Modalcontainer",
|
|
4443
|
+
"module": "components/modalcontainer/modalcontainer.component.js"
|
|
4444
|
+
}
|
|
4445
|
+
}
|
|
4446
|
+
]
|
|
4447
|
+
},
|
|
4448
|
+
{
|
|
4449
|
+
"kind": "javascript-module",
|
|
4450
|
+
"path": "components/presence/presence.component.js",
|
|
4451
|
+
"declarations": [
|
|
4452
|
+
{
|
|
4453
|
+
"kind": "class",
|
|
4454
|
+
"description": "The `mdc-presence` component is a versatile UI element used to\ndisplay the presence status of a user or entity within an avatar component.\n\nThis component is ideal for use within avatar UIs where the presence status\nneeds to be visually represented.",
|
|
4455
|
+
"name": "Presence",
|
|
4456
|
+
"cssProperties": [
|
|
4457
|
+
{
|
|
4458
|
+
"description": "The background color of the presence type active.",
|
|
4459
|
+
"name": "--mdc-presence-active-background-color"
|
|
4460
|
+
},
|
|
4461
|
+
{
|
|
4462
|
+
"description": "The background color of the presence type away.",
|
|
4463
|
+
"name": "--mdc-presence-away-background-color"
|
|
4464
|
+
},
|
|
4465
|
+
{
|
|
4466
|
+
"description": "The background color of the presence type away-calling.",
|
|
4467
|
+
"name": "--mdc-presence-away-calling-background-color"
|
|
4468
|
+
},
|
|
4469
|
+
{
|
|
4470
|
+
"description": "The background color of the presence type busy.",
|
|
4471
|
+
"name": "--mdc-presence-busy-background-color"
|
|
4472
|
+
},
|
|
4473
|
+
{
|
|
4474
|
+
"description": "The background color of the presence type dnd.",
|
|
4475
|
+
"name": "--mdc-presence-dnd-background-color"
|
|
4476
|
+
},
|
|
4477
|
+
{
|
|
4478
|
+
"description": "The background color of the presence type meeting.",
|
|
4479
|
+
"name": "--mdc-presence-meeting-background-color"
|
|
4480
|
+
},
|
|
4481
|
+
{
|
|
4482
|
+
"description": "The background color of the presence type on-call.",
|
|
4483
|
+
"name": "--mdc-presence-on-call-background-color"
|
|
4484
|
+
},
|
|
4485
|
+
{
|
|
4486
|
+
"description": "The background color of the presence type on-device.",
|
|
4487
|
+
"name": "--mdc-presence-on-device-background-color"
|
|
4488
|
+
},
|
|
4489
|
+
{
|
|
4490
|
+
"description": "The background color of the presence type on-mobile.",
|
|
4491
|
+
"name": "--mdc-presence-on-mobile-background-color"
|
|
4492
|
+
},
|
|
4374
4493
|
{
|
|
4375
4494
|
"description": "The background color of the presence type pause.",
|
|
4376
4495
|
"name": "--mdc-presence-pause-background-color"
|
|
@@ -4496,125 +4615,6 @@
|
|
|
4496
4615
|
}
|
|
4497
4616
|
]
|
|
4498
4617
|
},
|
|
4499
|
-
{
|
|
4500
|
-
"kind": "javascript-module",
|
|
4501
|
-
"path": "components/modalcontainer/modalcontainer.component.js",
|
|
4502
|
-
"declarations": [
|
|
4503
|
-
{
|
|
4504
|
-
"kind": "class",
|
|
4505
|
-
"description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
|
|
4506
|
-
"name": "Modalcontainer",
|
|
4507
|
-
"cssProperties": [
|
|
4508
|
-
{
|
|
4509
|
-
"description": "primary background color of the modalcontainer",
|
|
4510
|
-
"name": "--mdc-modalcontainer-primary-background-color"
|
|
4511
|
-
},
|
|
4512
|
-
{
|
|
4513
|
-
"description": "border color of the modalcontainer",
|
|
4514
|
-
"name": "--mdc-modalcontainer-border-color"
|
|
4515
|
-
},
|
|
4516
|
-
{
|
|
4517
|
-
"description": "inverted background color of the modalcontainer",
|
|
4518
|
-
"name": "--mdc-modalcontainer-inverted-background-color"
|
|
4519
|
-
},
|
|
4520
|
-
{
|
|
4521
|
-
"description": "inverted border color of the modalcontainer",
|
|
4522
|
-
"name": "--mdc-modalcontainer-inverted-border-color"
|
|
4523
|
-
},
|
|
4524
|
-
{
|
|
4525
|
-
"description": "inverted text color of the modalcontainer",
|
|
4526
|
-
"name": "--mdc-modalcontainer-inverted-text-color"
|
|
4527
|
-
}
|
|
4528
|
-
],
|
|
4529
|
-
"slots": [
|
|
4530
|
-
{
|
|
4531
|
-
"description": "Default slot for modal container",
|
|
4532
|
-
"name": ""
|
|
4533
|
-
}
|
|
4534
|
-
],
|
|
4535
|
-
"members": [
|
|
4536
|
-
{
|
|
4537
|
-
"kind": "field",
|
|
4538
|
-
"name": "color",
|
|
4539
|
-
"type": {
|
|
4540
|
-
"text": "ModalContainerColor"
|
|
4541
|
-
},
|
|
4542
|
-
"description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
|
|
4543
|
-
"default": "tonal",
|
|
4544
|
-
"attribute": "color",
|
|
4545
|
-
"reflects": true
|
|
4546
|
-
},
|
|
4547
|
-
{
|
|
4548
|
-
"kind": "field",
|
|
4549
|
-
"name": "elevation",
|
|
4550
|
-
"type": {
|
|
4551
|
-
"text": "ModalContainerElevation"
|
|
4552
|
-
},
|
|
4553
|
-
"description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
|
|
4554
|
-
"default": "0",
|
|
4555
|
-
"attribute": "elevation",
|
|
4556
|
-
"reflects": true
|
|
4557
|
-
},
|
|
4558
|
-
{
|
|
4559
|
-
"kind": "field",
|
|
4560
|
-
"name": "role",
|
|
4561
|
-
"type": {
|
|
4562
|
-
"text": "ModalContainerRole"
|
|
4563
|
-
},
|
|
4564
|
-
"description": "Role of the modalcontainer",
|
|
4565
|
-
"default": "dialog",
|
|
4566
|
-
"attribute": "role"
|
|
4567
|
-
}
|
|
4568
|
-
],
|
|
4569
|
-
"attributes": [
|
|
4570
|
-
{
|
|
4571
|
-
"name": "color",
|
|
4572
|
-
"type": {
|
|
4573
|
-
"text": "ModalContainerColor"
|
|
4574
|
-
},
|
|
4575
|
-
"description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
|
|
4576
|
-
"default": "tonal",
|
|
4577
|
-
"fieldName": "color"
|
|
4578
|
-
},
|
|
4579
|
-
{
|
|
4580
|
-
"name": "elevation",
|
|
4581
|
-
"type": {
|
|
4582
|
-
"text": "ModalContainerElevation"
|
|
4583
|
-
},
|
|
4584
|
-
"description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
|
|
4585
|
-
"default": "0",
|
|
4586
|
-
"fieldName": "elevation"
|
|
4587
|
-
},
|
|
4588
|
-
{
|
|
4589
|
-
"name": "role",
|
|
4590
|
-
"type": {
|
|
4591
|
-
"text": "ModalContainerRole"
|
|
4592
|
-
},
|
|
4593
|
-
"description": "Role of the modalcontainer",
|
|
4594
|
-
"default": "dialog",
|
|
4595
|
-
"fieldName": "role"
|
|
4596
|
-
}
|
|
4597
|
-
],
|
|
4598
|
-
"superclass": {
|
|
4599
|
-
"name": "Component",
|
|
4600
|
-
"module": "/src/models"
|
|
4601
|
-
},
|
|
4602
|
-
"tagName": "mdc-modalcontainer",
|
|
4603
|
-
"jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
|
|
4604
|
-
"customElement": true
|
|
4605
|
-
}
|
|
4606
|
-
],
|
|
4607
|
-
"exports": [
|
|
4608
|
-
{
|
|
4609
|
-
"kind": "js",
|
|
4610
|
-
"name": "default",
|
|
4611
|
-
"declaration": {
|
|
4612
|
-
"name": "Modalcontainer",
|
|
4613
|
-
"module": "components/modalcontainer/modalcontainer.component.js"
|
|
4614
|
-
}
|
|
4615
|
-
}
|
|
4616
|
-
]
|
|
4617
|
-
},
|
|
4618
4618
|
{
|
|
4619
4619
|
"kind": "javascript-module",
|
|
4620
4620
|
"path": "components/text/text.component.js",
|
|
@@ -4797,6 +4797,512 @@
|
|
|
4797
4797
|
}
|
|
4798
4798
|
]
|
|
4799
4799
|
},
|
|
4800
|
+
{
|
|
4801
|
+
"kind": "javascript-module",
|
|
4802
|
+
"path": "components/toggle/toggle.component.js",
|
|
4803
|
+
"declarations": [
|
|
4804
|
+
{
|
|
4805
|
+
"kind": "class",
|
|
4806
|
+
"description": "Toggle Component is an interactive control used to switch between two mutually exclusive options,\nsuch as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\nwhere users need to enable or disable a feature.\nIt contains an optional label and an optional helper text.\n\nNote: It internally renders a checkbox styled as a toggle switch.",
|
|
4807
|
+
"name": "Toggle",
|
|
4808
|
+
"cssProperties": [
|
|
4809
|
+
{
|
|
4810
|
+
"description": "width of the toggle",
|
|
4811
|
+
"name": "--mdc-toggle-width"
|
|
4812
|
+
},
|
|
4813
|
+
{
|
|
4814
|
+
"description": "height of the toggle",
|
|
4815
|
+
"name": "--mdc-toggle-height"
|
|
4816
|
+
},
|
|
4817
|
+
{
|
|
4818
|
+
"description": "width of the toggle when it's size is compact",
|
|
4819
|
+
"name": "--mdc-toggle-width-compact"
|
|
4820
|
+
},
|
|
4821
|
+
{
|
|
4822
|
+
"description": "height of the toggle when it's size is compact",
|
|
4823
|
+
"name": "--mdc-toggle-height-compact"
|
|
4824
|
+
},
|
|
4825
|
+
{
|
|
4826
|
+
"description": "border radius of the toggle",
|
|
4827
|
+
"name": "--mdc-toggle-border-radius"
|
|
4828
|
+
},
|
|
4829
|
+
{
|
|
4830
|
+
"description": "border radius of the toggle when it's size is compact",
|
|
4831
|
+
"name": "--mdc-toggle-border-radius-compact"
|
|
4832
|
+
},
|
|
4833
|
+
{
|
|
4834
|
+
"description": "border of the toggle",
|
|
4835
|
+
"name": "--mdc-toggle-border"
|
|
4836
|
+
},
|
|
4837
|
+
{
|
|
4838
|
+
"description": "background color of the inactive toggle in rest state",
|
|
4839
|
+
"name": "--mdc-toggle-inactive-rest-color"
|
|
4840
|
+
},
|
|
4841
|
+
{
|
|
4842
|
+
"description": "background color of the inactive toggle in hover state",
|
|
4843
|
+
"name": "--mdc-toggle-inactive-hover-color"
|
|
4844
|
+
},
|
|
4845
|
+
{
|
|
4846
|
+
"description": "background color of the inactive toggle in pressed state",
|
|
4847
|
+
"name": "--mdc-toggle-inactive-pressed-color"
|
|
4848
|
+
},
|
|
4849
|
+
{
|
|
4850
|
+
"description": "background color of the inactive toggle in disabled state",
|
|
4851
|
+
"name": "--mdc-toggle-inactive-disabled-color"
|
|
4852
|
+
},
|
|
4853
|
+
{
|
|
4854
|
+
"description": "background color of the active toggle in rest state",
|
|
4855
|
+
"name": "--mdc-toggle-active-rest-color"
|
|
4856
|
+
},
|
|
4857
|
+
{
|
|
4858
|
+
"description": "background color of the active toggle in hover state",
|
|
4859
|
+
"name": "--mdc-toggle-active-hover-color"
|
|
4860
|
+
},
|
|
4861
|
+
{
|
|
4862
|
+
"description": "background color of the active toggle in pressed state",
|
|
4863
|
+
"name": "--mdc-toggle-active-pressed-color"
|
|
4864
|
+
},
|
|
4865
|
+
{
|
|
4866
|
+
"description": "background color of the active toggle in disabled state",
|
|
4867
|
+
"name": "--mdc-toggle-active-disabled-color"
|
|
4868
|
+
},
|
|
4869
|
+
{
|
|
4870
|
+
"description": " color of the help text label",
|
|
4871
|
+
"name": "--mdc-toggle-help-text-color"
|
|
4872
|
+
},
|
|
4873
|
+
{
|
|
4874
|
+
"description": "color of the toggle label and help text in disabled state",
|
|
4875
|
+
"name": "--mdc-toggle-label-color-disabled"
|
|
4876
|
+
}
|
|
4877
|
+
],
|
|
4878
|
+
"members": [
|
|
4879
|
+
{
|
|
4880
|
+
"kind": "field",
|
|
4881
|
+
"name": "checked",
|
|
4882
|
+
"type": {
|
|
4883
|
+
"text": "boolean"
|
|
4884
|
+
},
|
|
4885
|
+
"default": "false",
|
|
4886
|
+
"description": "Determines whether the toggle is active or inactive.",
|
|
4887
|
+
"attribute": "checked",
|
|
4888
|
+
"reflects": true
|
|
4889
|
+
},
|
|
4890
|
+
{
|
|
4891
|
+
"kind": "field",
|
|
4892
|
+
"name": "size",
|
|
4893
|
+
"type": {
|
|
4894
|
+
"text": "ToggleSize"
|
|
4895
|
+
},
|
|
4896
|
+
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
|
4897
|
+
"default": "default",
|
|
4898
|
+
"attribute": "size",
|
|
4899
|
+
"reflects": true
|
|
4900
|
+
},
|
|
4901
|
+
{
|
|
4902
|
+
"kind": "method",
|
|
4903
|
+
"name": "setFormValue",
|
|
4904
|
+
"privacy": "private",
|
|
4905
|
+
"description": "Updates the form value to reflect the current state of the toggle.\nIf toggle is switched on, the value is set to either the user-provided value or 'isActive' if no value is provided.\nIf toggle is switched off, the value is set to null."
|
|
4906
|
+
},
|
|
4907
|
+
{
|
|
4908
|
+
"kind": "method",
|
|
4909
|
+
"name": "toggleState",
|
|
4910
|
+
"privacy": "private",
|
|
4911
|
+
"return": {
|
|
4912
|
+
"type": {
|
|
4913
|
+
"text": "void"
|
|
4914
|
+
}
|
|
4915
|
+
},
|
|
4916
|
+
"description": "Toggles the state of the toggle element.\nIf the element is not disabled, then the checked property is toggled."
|
|
4917
|
+
},
|
|
4918
|
+
{
|
|
4919
|
+
"kind": "method",
|
|
4920
|
+
"name": "handleChange",
|
|
4921
|
+
"privacy": "private",
|
|
4922
|
+
"parameters": [
|
|
4923
|
+
{
|
|
4924
|
+
"name": "event",
|
|
4925
|
+
"type": {
|
|
4926
|
+
"text": "Event"
|
|
4927
|
+
}
|
|
4928
|
+
}
|
|
4929
|
+
],
|
|
4930
|
+
"description": "Toggles the state of the toggle element.\nand dispatch the new change event."
|
|
4931
|
+
},
|
|
4932
|
+
{
|
|
4933
|
+
"kind": "method",
|
|
4934
|
+
"name": "setToggleSize",
|
|
4935
|
+
"privacy": "private",
|
|
4936
|
+
"parameters": [
|
|
4937
|
+
{
|
|
4938
|
+
"name": "size",
|
|
4939
|
+
"type": {
|
|
4940
|
+
"text": "ToggleSize"
|
|
4941
|
+
},
|
|
4942
|
+
"description": "The size to set."
|
|
4943
|
+
}
|
|
4944
|
+
],
|
|
4945
|
+
"description": "Sets the size attribute for the toggle component.\nIf the provided size is not included in the TOGGLE_SIZE,\nit defaults to the value specified in DEFAULTS.SIZE."
|
|
4946
|
+
},
|
|
4947
|
+
{
|
|
4948
|
+
"kind": "field",
|
|
4949
|
+
"name": "helpTextType",
|
|
4950
|
+
"type": {
|
|
4951
|
+
"text": "ValidationType"
|
|
4952
|
+
},
|
|
4953
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
4954
|
+
"attribute": "help-text-type",
|
|
4955
|
+
"reflects": true,
|
|
4956
|
+
"default": "undefined as unknown",
|
|
4957
|
+
"inheritedFrom": {
|
|
4958
|
+
"name": "FormfieldWrapper",
|
|
4959
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
4960
|
+
}
|
|
4961
|
+
},
|
|
4962
|
+
{
|
|
4963
|
+
"kind": "field",
|
|
4964
|
+
"name": "name",
|
|
4965
|
+
"type": {
|
|
4966
|
+
"text": "string"
|
|
4967
|
+
},
|
|
4968
|
+
"default": "''",
|
|
4969
|
+
"description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
|
|
4970
|
+
"attribute": "name",
|
|
4971
|
+
"reflects": true,
|
|
4972
|
+
"inheritedFrom": {
|
|
4973
|
+
"name": "NameMixin",
|
|
4974
|
+
"module": "utils/mixins/NameMixin.js"
|
|
4975
|
+
}
|
|
4976
|
+
},
|
|
4977
|
+
{
|
|
4978
|
+
"kind": "field",
|
|
4979
|
+
"name": "value",
|
|
4980
|
+
"type": {
|
|
4981
|
+
"text": "string"
|
|
4982
|
+
},
|
|
4983
|
+
"default": "''",
|
|
4984
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
4985
|
+
"attribute": "value",
|
|
4986
|
+
"reflects": true,
|
|
4987
|
+
"inheritedFrom": {
|
|
4988
|
+
"name": "ValueMixin",
|
|
4989
|
+
"module": "utils/mixins/ValueMixin.js"
|
|
4990
|
+
}
|
|
4991
|
+
},
|
|
4992
|
+
{
|
|
4993
|
+
"kind": "field",
|
|
4994
|
+
"name": "dataAriaLabel",
|
|
4995
|
+
"type": {
|
|
4996
|
+
"text": "string | null"
|
|
4997
|
+
},
|
|
4998
|
+
"default": "null",
|
|
4999
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
5000
|
+
"attribute": "data-aria-label",
|
|
5001
|
+
"reflects": true,
|
|
5002
|
+
"inheritedFrom": {
|
|
5003
|
+
"name": "DataAriaLabelMixin",
|
|
5004
|
+
"module": "utils/mixins/DataAriaLabelMixin.js"
|
|
5005
|
+
}
|
|
5006
|
+
},
|
|
5007
|
+
{
|
|
5008
|
+
"kind": "field",
|
|
5009
|
+
"name": "disabled",
|
|
5010
|
+
"type": {
|
|
5011
|
+
"text": "boolean"
|
|
5012
|
+
},
|
|
5013
|
+
"default": "false",
|
|
5014
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
5015
|
+
"attribute": "disabled",
|
|
5016
|
+
"reflects": true,
|
|
5017
|
+
"inheritedFrom": {
|
|
5018
|
+
"name": "FormfieldWrapper",
|
|
5019
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5020
|
+
}
|
|
5021
|
+
},
|
|
5022
|
+
{
|
|
5023
|
+
"kind": "field",
|
|
5024
|
+
"name": "label",
|
|
5025
|
+
"type": {
|
|
5026
|
+
"text": "string | undefined"
|
|
5027
|
+
},
|
|
5028
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
5029
|
+
"attribute": "label",
|
|
5030
|
+
"reflects": true,
|
|
5031
|
+
"inheritedFrom": {
|
|
5032
|
+
"name": "FormfieldWrapper",
|
|
5033
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5034
|
+
}
|
|
5035
|
+
},
|
|
5036
|
+
{
|
|
5037
|
+
"kind": "field",
|
|
5038
|
+
"name": "id",
|
|
5039
|
+
"default": "`mdc-input-${uuidv4()}`",
|
|
5040
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
5041
|
+
"attribute": "id",
|
|
5042
|
+
"inheritedFrom": {
|
|
5043
|
+
"name": "FormfieldWrapper",
|
|
5044
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5045
|
+
}
|
|
5046
|
+
},
|
|
5047
|
+
{
|
|
5048
|
+
"kind": "field",
|
|
5049
|
+
"name": "helpText",
|
|
5050
|
+
"type": {
|
|
5051
|
+
"text": "string | undefined"
|
|
5052
|
+
},
|
|
5053
|
+
"description": "The help text that is displayed below the input field.",
|
|
5054
|
+
"attribute": "help-text",
|
|
5055
|
+
"reflects": true,
|
|
5056
|
+
"inheritedFrom": {
|
|
5057
|
+
"name": "FormfieldWrapper",
|
|
5058
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5059
|
+
}
|
|
5060
|
+
},
|
|
5061
|
+
{
|
|
5062
|
+
"kind": "method",
|
|
5063
|
+
"name": "renderLabelElement",
|
|
5064
|
+
"privacy": "protected",
|
|
5065
|
+
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
5066
|
+
"return": {
|
|
5067
|
+
"type": {
|
|
5068
|
+
"text": ""
|
|
5069
|
+
}
|
|
5070
|
+
},
|
|
5071
|
+
"inheritedFrom": {
|
|
5072
|
+
"name": "FormfieldWrapper",
|
|
5073
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5074
|
+
}
|
|
5075
|
+
},
|
|
5076
|
+
{
|
|
5077
|
+
"kind": "method",
|
|
5078
|
+
"name": "renderHelpTextIcon",
|
|
5079
|
+
"privacy": "protected",
|
|
5080
|
+
"description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
|
|
5081
|
+
"return": {
|
|
5082
|
+
"type": {
|
|
5083
|
+
"text": ""
|
|
5084
|
+
}
|
|
5085
|
+
},
|
|
5086
|
+
"inheritedFrom": {
|
|
5087
|
+
"name": "FormfieldWrapper",
|
|
5088
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5089
|
+
}
|
|
5090
|
+
},
|
|
5091
|
+
{
|
|
5092
|
+
"kind": "method",
|
|
5093
|
+
"name": "renderHelpText",
|
|
5094
|
+
"privacy": "protected",
|
|
5095
|
+
"description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
|
|
5096
|
+
"return": {
|
|
5097
|
+
"type": {
|
|
5098
|
+
"text": ""
|
|
5099
|
+
}
|
|
5100
|
+
},
|
|
5101
|
+
"inheritedFrom": {
|
|
5102
|
+
"name": "FormfieldWrapper",
|
|
5103
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5104
|
+
}
|
|
5105
|
+
},
|
|
5106
|
+
{
|
|
5107
|
+
"kind": "method",
|
|
5108
|
+
"name": "renderLabel",
|
|
5109
|
+
"privacy": "protected",
|
|
5110
|
+
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
5111
|
+
"return": {
|
|
5112
|
+
"type": {
|
|
5113
|
+
"text": ""
|
|
5114
|
+
}
|
|
5115
|
+
},
|
|
5116
|
+
"inheritedFrom": {
|
|
5117
|
+
"name": "FormfieldWrapper",
|
|
5118
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5119
|
+
}
|
|
5120
|
+
},
|
|
5121
|
+
{
|
|
5122
|
+
"kind": "method",
|
|
5123
|
+
"name": "renderHelperText",
|
|
5124
|
+
"privacy": "protected",
|
|
5125
|
+
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
5126
|
+
"return": {
|
|
5127
|
+
"type": {
|
|
5128
|
+
"text": ""
|
|
5129
|
+
}
|
|
5130
|
+
},
|
|
5131
|
+
"inheritedFrom": {
|
|
5132
|
+
"name": "FormfieldWrapper",
|
|
5133
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
5134
|
+
}
|
|
5135
|
+
}
|
|
5136
|
+
],
|
|
5137
|
+
"events": [
|
|
5138
|
+
{
|
|
5139
|
+
"type": {
|
|
5140
|
+
"text": "EventConstructor"
|
|
5141
|
+
}
|
|
5142
|
+
}
|
|
5143
|
+
],
|
|
5144
|
+
"attributes": [
|
|
5145
|
+
{
|
|
5146
|
+
"name": "checked",
|
|
5147
|
+
"type": {
|
|
5148
|
+
"text": "boolean"
|
|
5149
|
+
},
|
|
5150
|
+
"default": "false",
|
|
5151
|
+
"description": "Determines whether the toggle is active or inactive.",
|
|
5152
|
+
"fieldName": "checked"
|
|
5153
|
+
},
|
|
5154
|
+
{
|
|
5155
|
+
"name": "size",
|
|
5156
|
+
"type": {
|
|
5157
|
+
"text": "ToggleSize"
|
|
5158
|
+
},
|
|
5159
|
+
"description": "Determines toggle size in rem (height is specified here).\n- **Default**: 1.5\n- **Compact**: 1",
|
|
5160
|
+
"default": "default",
|
|
5161
|
+
"fieldName": "size"
|
|
5162
|
+
},
|
|
5163
|
+
{
|
|
5164
|
+
"name": "name",
|
|
5165
|
+
"type": {
|
|
5166
|
+
"text": "string"
|
|
5167
|
+
},
|
|
5168
|
+
"default": "''",
|
|
5169
|
+
"description": "Indicates the name of the component group (ex: checkbox, radio group).\nThey are used to group elements in a form together.",
|
|
5170
|
+
"fieldName": "name",
|
|
5171
|
+
"inheritedFrom": {
|
|
5172
|
+
"name": "NameMixin",
|
|
5173
|
+
"module": "src/utils/mixins/NameMixin.ts"
|
|
5174
|
+
}
|
|
5175
|
+
},
|
|
5176
|
+
{
|
|
5177
|
+
"name": "value",
|
|
5178
|
+
"type": {
|
|
5179
|
+
"text": "string"
|
|
5180
|
+
},
|
|
5181
|
+
"default": "''",
|
|
5182
|
+
"description": "Indicates the value of the component group (ex: input, checkbox, radio, select etc...)",
|
|
5183
|
+
"fieldName": "value",
|
|
5184
|
+
"inheritedFrom": {
|
|
5185
|
+
"name": "ValueMixin",
|
|
5186
|
+
"module": "src/utils/mixins/ValueMixin.ts"
|
|
5187
|
+
}
|
|
5188
|
+
},
|
|
5189
|
+
{
|
|
5190
|
+
"name": "data-aria-label",
|
|
5191
|
+
"type": {
|
|
5192
|
+
"text": "string | null"
|
|
5193
|
+
},
|
|
5194
|
+
"default": "null",
|
|
5195
|
+
"description": "Defines a string value that labels the current element.\nThe Aria-Label attribute to be set for accessibility.",
|
|
5196
|
+
"fieldName": "dataAriaLabel",
|
|
5197
|
+
"inheritedFrom": {
|
|
5198
|
+
"name": "DataAriaLabelMixin",
|
|
5199
|
+
"module": "src/utils/mixins/DataAriaLabelMixin.ts"
|
|
5200
|
+
}
|
|
5201
|
+
},
|
|
5202
|
+
{
|
|
5203
|
+
"name": "disabled",
|
|
5204
|
+
"type": {
|
|
5205
|
+
"text": "boolean"
|
|
5206
|
+
},
|
|
5207
|
+
"default": "false",
|
|
5208
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
5209
|
+
"fieldName": "disabled",
|
|
5210
|
+
"inheritedFrom": {
|
|
5211
|
+
"name": "FormfieldWrapper",
|
|
5212
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5213
|
+
}
|
|
5214
|
+
},
|
|
5215
|
+
{
|
|
5216
|
+
"name": "label",
|
|
5217
|
+
"type": {
|
|
5218
|
+
"text": "string | undefined"
|
|
5219
|
+
},
|
|
5220
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
5221
|
+
"fieldName": "label",
|
|
5222
|
+
"inheritedFrom": {
|
|
5223
|
+
"name": "FormfieldWrapper",
|
|
5224
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5225
|
+
}
|
|
5226
|
+
},
|
|
5227
|
+
{
|
|
5228
|
+
"name": "id",
|
|
5229
|
+
"default": "`mdc-input-${uuidv4()}`",
|
|
5230
|
+
"description": "The unique id of the input field. It is used to link the input field with the label.",
|
|
5231
|
+
"fieldName": "id",
|
|
5232
|
+
"inheritedFrom": {
|
|
5233
|
+
"name": "FormfieldWrapper",
|
|
5234
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5235
|
+
}
|
|
5236
|
+
},
|
|
5237
|
+
{
|
|
5238
|
+
"name": "help-text-type",
|
|
5239
|
+
"type": {
|
|
5240
|
+
"text": "ValidationType"
|
|
5241
|
+
},
|
|
5242
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
5243
|
+
"fieldName": "helpTextType",
|
|
5244
|
+
"inheritedFrom": {
|
|
5245
|
+
"name": "FormfieldWrapper",
|
|
5246
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5247
|
+
}
|
|
5248
|
+
},
|
|
5249
|
+
{
|
|
5250
|
+
"name": "help-text",
|
|
5251
|
+
"type": {
|
|
5252
|
+
"text": "string | undefined"
|
|
5253
|
+
},
|
|
5254
|
+
"description": "The help text that is displayed below the input field.",
|
|
5255
|
+
"fieldName": "helpText",
|
|
5256
|
+
"inheritedFrom": {
|
|
5257
|
+
"name": "FormfieldWrapper",
|
|
5258
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5259
|
+
}
|
|
5260
|
+
}
|
|
5261
|
+
],
|
|
5262
|
+
"mixins": [
|
|
5263
|
+
{
|
|
5264
|
+
"name": "NameMixin",
|
|
5265
|
+
"module": "/src/utils/mixins/NameMixin"
|
|
5266
|
+
},
|
|
5267
|
+
{
|
|
5268
|
+
"name": "ValueMixin",
|
|
5269
|
+
"module": "/src/utils/mixins/ValueMixin"
|
|
5270
|
+
},
|
|
5271
|
+
{
|
|
5272
|
+
"name": "DataAriaLabelMixin",
|
|
5273
|
+
"module": "/src/utils/mixins/DataAriaLabelMixin"
|
|
5274
|
+
}
|
|
5275
|
+
],
|
|
5276
|
+
"superclass": {
|
|
5277
|
+
"name": "FormfieldWrapper",
|
|
5278
|
+
"module": "/src/components/formfieldwrapper"
|
|
5279
|
+
},
|
|
5280
|
+
"tagName": "mdc-toggle",
|
|
5281
|
+
"jsDoc": "/**\n * Toggle Component is an interactive control used to switch between two mutually exclusive options,\n * such as On/Off, Active/Inactive. These are commonly used in settings panels, forms, and preference selections\n * where users need to enable or disable a feature.\n * It contains an optional label and an optional helper text.\n *\n * Note: It internally renders a checkbox styled as a toggle switch.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-toggle\n *\n * @cssproperty --mdc-toggle-width - width of the toggle\n * @cssproperty --mdc-toggle-height - height of the toggle\n * @cssproperty --mdc-toggle-width-compact - width of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-height-compact - height of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border-radius - border radius of the toggle\n * @cssproperty --mdc-toggle-border-radius-compact - border radius of the toggle when it's size is compact\n * @cssproperty --mdc-toggle-border - border of the toggle\n * @cssproperty --mdc-toggle-inactive-rest-color - background color of the inactive toggle in rest state\n * @cssproperty --mdc-toggle-inactive-hover-color - background color of the inactive toggle in hover state\n * @cssproperty --mdc-toggle-inactive-pressed-color - background color of the inactive toggle in pressed state\n * @cssproperty --mdc-toggle-inactive-disabled-color - background color of the inactive toggle in disabled state\n * @cssproperty --mdc-toggle-active-rest-color - background color of the active toggle in rest state\n * @cssproperty --mdc-toggle-active-hover-color - background color of the active toggle in hover state\n * @cssproperty --mdc-toggle-active-pressed-color - background color of the active toggle in pressed state\n * @cssproperty --mdc-toggle-active-disabled-color - background color of the active toggle in disabled state\n * @cssproperty --mdc-toggle-help-text-color - color of the help text label\n * @cssproperty --mdc-toggle-label-color-disabled - color of the toggle label and help text in disabled state\n *\n */",
|
|
5282
|
+
"customElement": true,
|
|
5283
|
+
"slots": [
|
|
5284
|
+
{
|
|
5285
|
+
"description": "slot to add the label info icon",
|
|
5286
|
+
"name": "label-info",
|
|
5287
|
+
"inheritedFrom": {
|
|
5288
|
+
"name": "FormfieldWrapper",
|
|
5289
|
+
"module": "src/components/formfieldwrapper/formfieldwrapper.component.ts"
|
|
5290
|
+
}
|
|
5291
|
+
}
|
|
5292
|
+
]
|
|
5293
|
+
}
|
|
5294
|
+
],
|
|
5295
|
+
"exports": [
|
|
5296
|
+
{
|
|
5297
|
+
"kind": "js",
|
|
5298
|
+
"name": "default",
|
|
5299
|
+
"declaration": {
|
|
5300
|
+
"name": "Toggle",
|
|
5301
|
+
"module": "components/toggle/toggle.component.js"
|
|
5302
|
+
}
|
|
5303
|
+
}
|
|
5304
|
+
]
|
|
5305
|
+
},
|
|
4800
5306
|
{
|
|
4801
5307
|
"kind": "javascript-module",
|
|
4802
5308
|
"path": "utils/mixins/AvatarComponentMixin.js",
|