@momentum-design/components 0.128.0 → 0.129.0
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/custom-elements.json +530 -530
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
|
@@ -3296,53 +3296,108 @@
|
|
|
3296
3296
|
},
|
|
3297
3297
|
{
|
|
3298
3298
|
"kind": "javascript-module",
|
|
3299
|
-
"path": "components/
|
|
3299
|
+
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
3300
3300
|
"declarations": [
|
|
3301
3301
|
{
|
|
3302
3302
|
"kind": "class",
|
|
3303
|
-
"description": "The `mdc-
|
|
3304
|
-
"name": "
|
|
3303
|
+
"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.\n\nTo override styles of the avatar inside, use the specified css parts.",
|
|
3304
|
+
"name": "AvatarButton",
|
|
3305
3305
|
"cssProperties": [
|
|
3306
3306
|
{
|
|
3307
|
-
"description": "
|
|
3308
|
-
"name": "--mdc-
|
|
3307
|
+
"description": "Background color of the overlay in rest state",
|
|
3308
|
+
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
3309
3309
|
},
|
|
3310
3310
|
{
|
|
3311
|
-
"description": "
|
|
3312
|
-
"name": "--mdc-
|
|
3311
|
+
"description": "Background color of the overlay in hover state",
|
|
3312
|
+
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
3313
3313
|
},
|
|
3314
3314
|
{
|
|
3315
|
-
"description": "
|
|
3316
|
-
"name": "--mdc-
|
|
3315
|
+
"description": "Background color of the overlay in active state",
|
|
3316
|
+
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
3317
3317
|
},
|
|
3318
3318
|
{
|
|
3319
|
-
"description": "
|
|
3320
|
-
"name": "--mdc-
|
|
3319
|
+
"description": "Height for button size",
|
|
3320
|
+
"name": "--mdc-button-height",
|
|
3321
|
+
"inheritedFrom": {
|
|
3322
|
+
"name": "Buttonsimple",
|
|
3323
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3324
|
+
}
|
|
3321
3325
|
},
|
|
3322
3326
|
{
|
|
3323
|
-
"description": "
|
|
3324
|
-
"name": "--mdc-
|
|
3327
|
+
"description": "Background color of the button",
|
|
3328
|
+
"name": "--mdc-button-background",
|
|
3329
|
+
"inheritedFrom": {
|
|
3330
|
+
"name": "Buttonsimple",
|
|
3331
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3332
|
+
}
|
|
3333
|
+
},
|
|
3334
|
+
{
|
|
3335
|
+
"description": "Borer color of the button",
|
|
3336
|
+
"name": "--mdc-button-border-color",
|
|
3337
|
+
"inheritedFrom": {
|
|
3338
|
+
"name": "Buttonsimple",
|
|
3339
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3340
|
+
}
|
|
3341
|
+
},
|
|
3342
|
+
{
|
|
3343
|
+
"description": "Text color of the button",
|
|
3344
|
+
"name": "--mdc-button-text-color",
|
|
3345
|
+
"inheritedFrom": {
|
|
3346
|
+
"name": "Buttonsimple",
|
|
3347
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3348
|
+
}
|
|
3325
3349
|
}
|
|
3326
3350
|
],
|
|
3327
3351
|
"cssParts": [
|
|
3328
3352
|
{
|
|
3329
|
-
"description": "The
|
|
3353
|
+
"description": "The overlay part of the avatar button.",
|
|
3354
|
+
"name": "overlay"
|
|
3355
|
+
},
|
|
3356
|
+
{
|
|
3357
|
+
"description": "The main content of the avatar.",
|
|
3358
|
+
"name": "content"
|
|
3359
|
+
},
|
|
3360
|
+
{
|
|
3361
|
+
"description": "The photo part of the avatar.",
|
|
3330
3362
|
"name": "photo"
|
|
3331
3363
|
},
|
|
3332
3364
|
{
|
|
3333
|
-
"description": "The presence indicator of the avatar.",
|
|
3365
|
+
"description": "The presence indicator part of the avatar.",
|
|
3334
3366
|
"name": "presence"
|
|
3335
3367
|
},
|
|
3336
3368
|
{
|
|
3337
|
-
"description": "The wrapper for the loading indicator.",
|
|
3369
|
+
"description": "The wrapper for the loading indicator of the avatar.",
|
|
3338
3370
|
"name": "loading-wrapper"
|
|
3339
3371
|
},
|
|
3340
3372
|
{
|
|
3341
|
-
"description": "The loading indicator of the avatar.",
|
|
3373
|
+
"description": "The loading indicator part of the avatar.",
|
|
3342
3374
|
"name": "loader"
|
|
3343
3375
|
}
|
|
3344
3376
|
],
|
|
3345
3377
|
"members": [
|
|
3378
|
+
{
|
|
3379
|
+
"kind": "field",
|
|
3380
|
+
"name": "ariaLabel",
|
|
3381
|
+
"type": {
|
|
3382
|
+
"text": "string | null"
|
|
3383
|
+
},
|
|
3384
|
+
"default": "null",
|
|
3385
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
3386
|
+
"attribute": "aria-label"
|
|
3387
|
+
},
|
|
3388
|
+
{
|
|
3389
|
+
"kind": "method",
|
|
3390
|
+
"name": "setSize",
|
|
3391
|
+
"privacy": "private",
|
|
3392
|
+
"parameters": [
|
|
3393
|
+
{
|
|
3394
|
+
"name": "size",
|
|
3395
|
+
"type": {
|
|
3396
|
+
"text": "AvatarSize"
|
|
3397
|
+
}
|
|
3398
|
+
}
|
|
3399
|
+
]
|
|
3400
|
+
},
|
|
3346
3401
|
{
|
|
3347
3402
|
"kind": "field",
|
|
3348
3403
|
"name": "src",
|
|
@@ -3386,15 +3441,15 @@
|
|
|
3386
3441
|
"kind": "field",
|
|
3387
3442
|
"name": "size",
|
|
3388
3443
|
"type": {
|
|
3389
|
-
"text": "
|
|
3444
|
+
"text": "ButtonSize"
|
|
3390
3445
|
},
|
|
3391
3446
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
3392
3447
|
"default": "32",
|
|
3393
3448
|
"attribute": "size",
|
|
3394
3449
|
"reflects": true,
|
|
3395
3450
|
"inheritedFrom": {
|
|
3396
|
-
"name": "
|
|
3397
|
-
"module": "
|
|
3451
|
+
"name": "Buttonsimple",
|
|
3452
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3398
3453
|
}
|
|
3399
3454
|
},
|
|
3400
3455
|
{
|
|
@@ -3436,899 +3491,844 @@
|
|
|
3436
3491
|
"name": "IconNameMixin",
|
|
3437
3492
|
"module": "utils/mixins/IconNameMixin.js"
|
|
3438
3493
|
}
|
|
3439
|
-
}
|
|
3440
|
-
],
|
|
3441
|
-
"mixins": [
|
|
3442
|
-
{
|
|
3443
|
-
"name": "AvatarComponentMixin",
|
|
3444
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
3445
3494
|
},
|
|
3446
3495
|
{
|
|
3447
|
-
"
|
|
3448
|
-
"
|
|
3449
|
-
}
|
|
3450
|
-
],
|
|
3451
|
-
"superclass": {
|
|
3452
|
-
"name": "Component",
|
|
3453
|
-
"module": "/src/models"
|
|
3454
|
-
},
|
|
3455
|
-
"tagName": "mdc-avatar",
|
|
3456
|
-
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
|
|
3457
|
-
"customElement": true,
|
|
3458
|
-
"attributes": [
|
|
3459
|
-
{
|
|
3460
|
-
"name": "src",
|
|
3496
|
+
"kind": "field",
|
|
3497
|
+
"name": "autoFocusOnMount",
|
|
3461
3498
|
"type": {
|
|
3462
|
-
"text": "
|
|
3499
|
+
"text": "boolean"
|
|
3463
3500
|
},
|
|
3464
|
-
"
|
|
3465
|
-
"
|
|
3501
|
+
"default": "false",
|
|
3502
|
+
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
|
3503
|
+
"attribute": "auto-focus-on-mount",
|
|
3504
|
+
"reflects": true,
|
|
3466
3505
|
"inheritedFrom": {
|
|
3467
|
-
"name": "
|
|
3468
|
-
"module": "
|
|
3506
|
+
"name": "AutoFocusOnMountMixin",
|
|
3507
|
+
"module": "utils/mixins/AutoFocusOnMountMixin.js"
|
|
3469
3508
|
}
|
|
3470
3509
|
},
|
|
3471
3510
|
{
|
|
3472
|
-
"
|
|
3511
|
+
"kind": "field",
|
|
3512
|
+
"name": "tabIndex",
|
|
3473
3513
|
"type": {
|
|
3474
|
-
"text": "
|
|
3514
|
+
"text": "number"
|
|
3475
3515
|
},
|
|
3476
|
-
"
|
|
3477
|
-
"
|
|
3516
|
+
"default": "0",
|
|
3517
|
+
"description": "This property specifies the tab order of the element.",
|
|
3518
|
+
"attribute": "tabIndex",
|
|
3519
|
+
"reflects": true,
|
|
3478
3520
|
"inheritedFrom": {
|
|
3479
|
-
"name": "
|
|
3480
|
-
"module": "
|
|
3521
|
+
"name": "TabIndexMixin",
|
|
3522
|
+
"module": "utils/mixins/TabIndexMixin.js"
|
|
3481
3523
|
}
|
|
3482
3524
|
},
|
|
3483
3525
|
{
|
|
3484
|
-
"
|
|
3526
|
+
"kind": "field",
|
|
3527
|
+
"name": "disabled",
|
|
3485
3528
|
"type": {
|
|
3486
|
-
"text": "
|
|
3529
|
+
"text": "boolean | undefined"
|
|
3487
3530
|
},
|
|
3488
|
-
"description": "
|
|
3489
|
-
"
|
|
3531
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3532
|
+
"default": "undefined",
|
|
3533
|
+
"attribute": "disabled",
|
|
3534
|
+
"reflects": true,
|
|
3490
3535
|
"inheritedFrom": {
|
|
3491
|
-
"name": "
|
|
3492
|
-
"module": "
|
|
3536
|
+
"name": "DisabledMixin",
|
|
3537
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
3493
3538
|
}
|
|
3494
3539
|
},
|
|
3495
3540
|
{
|
|
3496
|
-
"
|
|
3541
|
+
"kind": "field",
|
|
3542
|
+
"name": "active",
|
|
3497
3543
|
"type": {
|
|
3498
|
-
"text": "
|
|
3544
|
+
"text": "boolean | undefined"
|
|
3499
3545
|
},
|
|
3500
|
-
"description": "
|
|
3501
|
-
"default": "
|
|
3502
|
-
"
|
|
3546
|
+
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
3547
|
+
"default": "undefined",
|
|
3548
|
+
"attribute": "active",
|
|
3549
|
+
"reflects": true,
|
|
3503
3550
|
"inheritedFrom": {
|
|
3504
|
-
"name": "
|
|
3505
|
-
"module": "
|
|
3551
|
+
"name": "Buttonsimple",
|
|
3552
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3506
3553
|
}
|
|
3507
3554
|
},
|
|
3508
3555
|
{
|
|
3509
|
-
"
|
|
3556
|
+
"kind": "field",
|
|
3557
|
+
"name": "softDisabled",
|
|
3510
3558
|
"type": {
|
|
3511
|
-
"text": "
|
|
3559
|
+
"text": "boolean | undefined"
|
|
3512
3560
|
},
|
|
3513
|
-
"description": "
|
|
3514
|
-
"
|
|
3561
|
+
"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.",
|
|
3562
|
+
"default": "undefined",
|
|
3563
|
+
"attribute": "soft-disabled",
|
|
3564
|
+
"reflects": true,
|
|
3515
3565
|
"inheritedFrom": {
|
|
3516
|
-
"name": "
|
|
3517
|
-
"module": "
|
|
3566
|
+
"name": "Buttonsimple",
|
|
3567
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3518
3568
|
}
|
|
3519
3569
|
},
|
|
3520
3570
|
{
|
|
3521
|
-
"
|
|
3571
|
+
"kind": "field",
|
|
3572
|
+
"name": "role",
|
|
3522
3573
|
"type": {
|
|
3523
|
-
"text": "
|
|
3574
|
+
"text": "RoleType"
|
|
3524
3575
|
},
|
|
3525
|
-
"
|
|
3526
|
-
"
|
|
3527
|
-
"
|
|
3576
|
+
"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.",
|
|
3577
|
+
"default": "button",
|
|
3578
|
+
"attribute": "role",
|
|
3579
|
+
"reflects": true,
|
|
3528
3580
|
"inheritedFrom": {
|
|
3529
|
-
"name": "
|
|
3530
|
-
"module": "
|
|
3581
|
+
"name": "Buttonsimple",
|
|
3582
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3531
3583
|
}
|
|
3532
3584
|
},
|
|
3533
3585
|
{
|
|
3534
|
-
"
|
|
3586
|
+
"kind": "field",
|
|
3587
|
+
"name": "ariaStateKey",
|
|
3535
3588
|
"type": {
|
|
3536
|
-
"text": "
|
|
3589
|
+
"text": "string | undefined"
|
|
3537
3590
|
},
|
|
3538
|
-
"description": "
|
|
3539
|
-
"
|
|
3591
|
+
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
3592
|
+
"default": "'aria-pressed' (when)",
|
|
3593
|
+
"attribute": "ariaStateKey",
|
|
3594
|
+
"reflects": true,
|
|
3540
3595
|
"inheritedFrom": {
|
|
3541
|
-
"name": "
|
|
3542
|
-
"module": "
|
|
3596
|
+
"name": "Buttonsimple",
|
|
3597
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3543
3598
|
}
|
|
3544
|
-
}
|
|
3545
|
-
]
|
|
3546
|
-
}
|
|
3547
|
-
],
|
|
3548
|
-
"exports": [
|
|
3549
|
-
{
|
|
3550
|
-
"kind": "js",
|
|
3551
|
-
"name": "default",
|
|
3552
|
-
"declaration": {
|
|
3553
|
-
"name": "Avatar",
|
|
3554
|
-
"module": "components/avatar/avatar.component.js"
|
|
3555
|
-
}
|
|
3556
|
-
}
|
|
3557
|
-
]
|
|
3558
|
-
},
|
|
3559
|
-
{
|
|
3560
|
-
"kind": "javascript-module",
|
|
3561
|
-
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
3562
|
-
"declarations": [
|
|
3563
|
-
{
|
|
3564
|
-
"kind": "class",
|
|
3565
|
-
"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.\n\nTo override styles of the avatar inside, use the specified css parts.",
|
|
3566
|
-
"name": "AvatarButton",
|
|
3567
|
-
"cssProperties": [
|
|
3568
|
-
{
|
|
3569
|
-
"description": "Background color of the overlay in rest state",
|
|
3570
|
-
"name": "--mdc-avatarbutton-overlay-background-color-rest"
|
|
3571
|
-
},
|
|
3572
|
-
{
|
|
3573
|
-
"description": "Background color of the overlay in hover state",
|
|
3574
|
-
"name": "--mdc-avatarbutton-overlay-background-color-hover"
|
|
3575
|
-
},
|
|
3576
|
-
{
|
|
3577
|
-
"description": "Background color of the overlay in active state",
|
|
3578
|
-
"name": "--mdc-avatarbutton-overlay-background-color-active"
|
|
3579
3599
|
},
|
|
3580
3600
|
{
|
|
3581
|
-
"
|
|
3582
|
-
"name": "
|
|
3601
|
+
"kind": "field",
|
|
3602
|
+
"name": "type",
|
|
3603
|
+
"type": {
|
|
3604
|
+
"text": "ButtonType"
|
|
3605
|
+
},
|
|
3606
|
+
"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.",
|
|
3607
|
+
"default": "button",
|
|
3608
|
+
"attribute": "type",
|
|
3609
|
+
"reflects": true,
|
|
3583
3610
|
"inheritedFrom": {
|
|
3584
3611
|
"name": "Buttonsimple",
|
|
3585
|
-
"module": "
|
|
3612
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3586
3613
|
}
|
|
3587
3614
|
},
|
|
3588
3615
|
{
|
|
3589
|
-
"
|
|
3590
|
-
"name": "
|
|
3616
|
+
"kind": "field",
|
|
3617
|
+
"name": "name",
|
|
3618
|
+
"type": {
|
|
3619
|
+
"text": "string | undefined"
|
|
3620
|
+
},
|
|
3621
|
+
"description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
|
|
3622
|
+
"attribute": "name",
|
|
3623
|
+
"reflects": true,
|
|
3591
3624
|
"inheritedFrom": {
|
|
3592
3625
|
"name": "Buttonsimple",
|
|
3593
|
-
"module": "
|
|
3626
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3594
3627
|
}
|
|
3595
3628
|
},
|
|
3596
3629
|
{
|
|
3597
|
-
"
|
|
3598
|
-
"name": "
|
|
3630
|
+
"kind": "field",
|
|
3631
|
+
"name": "value",
|
|
3632
|
+
"type": {
|
|
3633
|
+
"text": "string | undefined"
|
|
3634
|
+
},
|
|
3635
|
+
"description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
|
|
3636
|
+
"attribute": "value",
|
|
3637
|
+
"reflects": true,
|
|
3599
3638
|
"inheritedFrom": {
|
|
3600
3639
|
"name": "Buttonsimple",
|
|
3601
|
-
"module": "
|
|
3640
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3602
3641
|
}
|
|
3603
3642
|
},
|
|
3604
3643
|
{
|
|
3605
|
-
"
|
|
3606
|
-
"name": "
|
|
3644
|
+
"kind": "method",
|
|
3645
|
+
"name": "executeAction",
|
|
3646
|
+
"privacy": "protected",
|
|
3607
3647
|
"inheritedFrom": {
|
|
3608
3648
|
"name": "Buttonsimple",
|
|
3609
|
-
"module": "
|
|
3649
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3610
3650
|
}
|
|
3611
|
-
}
|
|
3612
|
-
],
|
|
3613
|
-
"cssParts": [
|
|
3614
|
-
{
|
|
3615
|
-
"description": "The overlay part of the avatar button.",
|
|
3616
|
-
"name": "overlay"
|
|
3617
3651
|
},
|
|
3618
3652
|
{
|
|
3619
|
-
"
|
|
3620
|
-
"name": "
|
|
3653
|
+
"kind": "method",
|
|
3654
|
+
"name": "setActive",
|
|
3655
|
+
"privacy": "protected",
|
|
3656
|
+
"parameters": [
|
|
3657
|
+
{
|
|
3658
|
+
"name": "element",
|
|
3659
|
+
"type": {
|
|
3660
|
+
"text": "HTMLElement"
|
|
3661
|
+
},
|
|
3662
|
+
"description": "The button element"
|
|
3663
|
+
},
|
|
3664
|
+
{
|
|
3665
|
+
"name": "active",
|
|
3666
|
+
"optional": true,
|
|
3667
|
+
"type": {
|
|
3668
|
+
"text": "boolean"
|
|
3669
|
+
},
|
|
3670
|
+
"description": "The active state of the element"
|
|
3671
|
+
}
|
|
3672
|
+
],
|
|
3673
|
+
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
3674
|
+
"inheritedFrom": {
|
|
3675
|
+
"name": "Buttonsimple",
|
|
3676
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3677
|
+
}
|
|
3621
3678
|
},
|
|
3622
3679
|
{
|
|
3623
|
-
"
|
|
3624
|
-
"name": "
|
|
3680
|
+
"kind": "method",
|
|
3681
|
+
"name": "setSoftDisabled",
|
|
3682
|
+
"privacy": "private",
|
|
3683
|
+
"parameters": [
|
|
3684
|
+
{
|
|
3685
|
+
"name": "element",
|
|
3686
|
+
"type": {
|
|
3687
|
+
"text": "HTMLElement"
|
|
3688
|
+
},
|
|
3689
|
+
"description": "The button element."
|
|
3690
|
+
},
|
|
3691
|
+
{
|
|
3692
|
+
"name": "softDisabled",
|
|
3693
|
+
"optional": true,
|
|
3694
|
+
"type": {
|
|
3695
|
+
"text": "boolean"
|
|
3696
|
+
},
|
|
3697
|
+
"description": "The soft-disabled state."
|
|
3698
|
+
}
|
|
3699
|
+
],
|
|
3700
|
+
"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.",
|
|
3701
|
+
"inheritedFrom": {
|
|
3702
|
+
"name": "Buttonsimple",
|
|
3703
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3704
|
+
}
|
|
3625
3705
|
},
|
|
3626
3706
|
{
|
|
3627
|
-
"
|
|
3628
|
-
"name": "
|
|
3707
|
+
"kind": "method",
|
|
3708
|
+
"name": "setDisabled",
|
|
3709
|
+
"privacy": "private",
|
|
3710
|
+
"parameters": [
|
|
3711
|
+
{
|
|
3712
|
+
"name": "element",
|
|
3713
|
+
"type": {
|
|
3714
|
+
"text": "HTMLElement"
|
|
3715
|
+
},
|
|
3716
|
+
"description": "The button element."
|
|
3717
|
+
},
|
|
3718
|
+
{
|
|
3719
|
+
"name": "disabled",
|
|
3720
|
+
"type": {
|
|
3721
|
+
"text": "boolean"
|
|
3722
|
+
},
|
|
3723
|
+
"description": "The disabled state."
|
|
3724
|
+
}
|
|
3725
|
+
],
|
|
3726
|
+
"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.",
|
|
3727
|
+
"inheritedFrom": {
|
|
3728
|
+
"name": "Buttonsimple",
|
|
3729
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3730
|
+
}
|
|
3629
3731
|
},
|
|
3630
3732
|
{
|
|
3631
|
-
"
|
|
3632
|
-
"name": "
|
|
3733
|
+
"kind": "method",
|
|
3734
|
+
"name": "triggerClickEvent",
|
|
3735
|
+
"privacy": "private",
|
|
3736
|
+
"inheritedFrom": {
|
|
3737
|
+
"name": "Buttonsimple",
|
|
3738
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3739
|
+
}
|
|
3633
3740
|
},
|
|
3634
3741
|
{
|
|
3635
|
-
"
|
|
3636
|
-
"name": "
|
|
3637
|
-
|
|
3638
|
-
|
|
3639
|
-
|
|
3742
|
+
"kind": "method",
|
|
3743
|
+
"name": "handleBlur",
|
|
3744
|
+
"privacy": "private",
|
|
3745
|
+
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
3746
|
+
"inheritedFrom": {
|
|
3747
|
+
"name": "Buttonsimple",
|
|
3748
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3749
|
+
}
|
|
3750
|
+
},
|
|
3640
3751
|
{
|
|
3641
|
-
"kind": "
|
|
3642
|
-
"name": "
|
|
3643
|
-
"
|
|
3644
|
-
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
|
|
3648
|
-
|
|
3752
|
+
"kind": "method",
|
|
3753
|
+
"name": "handleKeyDown",
|
|
3754
|
+
"privacy": "private",
|
|
3755
|
+
"parameters": [
|
|
3756
|
+
{
|
|
3757
|
+
"name": "event",
|
|
3758
|
+
"type": {
|
|
3759
|
+
"text": "KeyboardEvent"
|
|
3760
|
+
},
|
|
3761
|
+
"description": "The keyboard event."
|
|
3762
|
+
}
|
|
3763
|
+
],
|
|
3764
|
+
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
3765
|
+
"inheritedFrom": {
|
|
3766
|
+
"name": "Buttonsimple",
|
|
3767
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3768
|
+
}
|
|
3649
3769
|
},
|
|
3650
3770
|
{
|
|
3651
3771
|
"kind": "method",
|
|
3652
|
-
"name": "
|
|
3772
|
+
"name": "handleKeyUp",
|
|
3653
3773
|
"privacy": "private",
|
|
3654
3774
|
"parameters": [
|
|
3655
3775
|
{
|
|
3656
|
-
"name": "
|
|
3776
|
+
"name": "event",
|
|
3657
3777
|
"type": {
|
|
3658
|
-
"text": "
|
|
3659
|
-
}
|
|
3778
|
+
"text": "KeyboardEvent"
|
|
3779
|
+
},
|
|
3780
|
+
"description": "The keyboard event."
|
|
3660
3781
|
}
|
|
3661
|
-
]
|
|
3782
|
+
],
|
|
3783
|
+
"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.",
|
|
3784
|
+
"inheritedFrom": {
|
|
3785
|
+
"name": "Buttonsimple",
|
|
3786
|
+
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3787
|
+
}
|
|
3788
|
+
}
|
|
3789
|
+
],
|
|
3790
|
+
"events": [
|
|
3791
|
+
{
|
|
3792
|
+
"description": "(React: onClick) This event is dispatched when the avatarbutton is clicked.",
|
|
3793
|
+
"name": "click",
|
|
3794
|
+
"reactName": "onClick",
|
|
3795
|
+
"inheritedFrom": {
|
|
3796
|
+
"name": "Buttonsimple",
|
|
3797
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3798
|
+
}
|
|
3799
|
+
},
|
|
3800
|
+
{
|
|
3801
|
+
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.",
|
|
3802
|
+
"name": "keydown",
|
|
3803
|
+
"reactName": "onKeyDown",
|
|
3804
|
+
"inheritedFrom": {
|
|
3805
|
+
"name": "Buttonsimple",
|
|
3806
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3807
|
+
}
|
|
3808
|
+
},
|
|
3809
|
+
{
|
|
3810
|
+
"description": "(React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.",
|
|
3811
|
+
"name": "keyup",
|
|
3812
|
+
"reactName": "onKeyUp",
|
|
3813
|
+
"inheritedFrom": {
|
|
3814
|
+
"name": "Buttonsimple",
|
|
3815
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3816
|
+
}
|
|
3817
|
+
},
|
|
3818
|
+
{
|
|
3819
|
+
"description": "(React: onFocus) This event is dispatched when the avatarbutton receives focus.",
|
|
3820
|
+
"name": "focus",
|
|
3821
|
+
"reactName": "onFocus",
|
|
3822
|
+
"inheritedFrom": {
|
|
3823
|
+
"name": "Buttonsimple",
|
|
3824
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3825
|
+
}
|
|
3826
|
+
}
|
|
3827
|
+
],
|
|
3828
|
+
"attributes": [
|
|
3829
|
+
{
|
|
3830
|
+
"name": "aria-label",
|
|
3831
|
+
"type": {
|
|
3832
|
+
"text": "string | null"
|
|
3833
|
+
},
|
|
3834
|
+
"default": "null",
|
|
3835
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
3836
|
+
"fieldName": "ariaLabel"
|
|
3662
3837
|
},
|
|
3663
3838
|
{
|
|
3664
|
-
"kind": "field",
|
|
3665
3839
|
"name": "src",
|
|
3666
3840
|
"type": {
|
|
3667
3841
|
"text": "string | undefined"
|
|
3668
3842
|
},
|
|
3669
3843
|
"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.",
|
|
3670
|
-
"
|
|
3844
|
+
"fieldName": "src",
|
|
3671
3845
|
"inheritedFrom": {
|
|
3672
3846
|
"name": "AvatarComponentMixin",
|
|
3673
|
-
"module": "utils/mixins/AvatarComponentMixin.
|
|
3847
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3674
3848
|
}
|
|
3675
3849
|
},
|
|
3676
3850
|
{
|
|
3677
|
-
"kind": "field",
|
|
3678
3851
|
"name": "initials",
|
|
3679
3852
|
"type": {
|
|
3680
3853
|
"text": "string | undefined"
|
|
3681
3854
|
},
|
|
3682
3855
|
"description": "The initials to be displayed for the avatar.",
|
|
3683
|
-
"
|
|
3856
|
+
"fieldName": "initials",
|
|
3684
3857
|
"inheritedFrom": {
|
|
3685
3858
|
"name": "AvatarComponentMixin",
|
|
3686
|
-
"module": "utils/mixins/AvatarComponentMixin.
|
|
3859
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3687
3860
|
}
|
|
3688
3861
|
},
|
|
3689
3862
|
{
|
|
3690
|
-
"kind": "field",
|
|
3691
3863
|
"name": "presence",
|
|
3692
3864
|
"type": {
|
|
3693
3865
|
"text": "PresenceType | undefined"
|
|
3694
3866
|
},
|
|
3695
3867
|
"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`",
|
|
3696
|
-
"
|
|
3868
|
+
"fieldName": "presence",
|
|
3697
3869
|
"inheritedFrom": {
|
|
3698
3870
|
"name": "AvatarComponentMixin",
|
|
3699
|
-
"module": "utils/mixins/AvatarComponentMixin.
|
|
3871
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3700
3872
|
}
|
|
3701
3873
|
},
|
|
3702
3874
|
{
|
|
3703
|
-
"kind": "field",
|
|
3704
3875
|
"name": "size",
|
|
3705
3876
|
"type": {
|
|
3706
3877
|
"text": "ButtonSize"
|
|
3707
3878
|
},
|
|
3708
3879
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
3709
3880
|
"default": "32",
|
|
3710
|
-
"
|
|
3711
|
-
"reflects": true,
|
|
3881
|
+
"fieldName": "size",
|
|
3712
3882
|
"inheritedFrom": {
|
|
3713
3883
|
"name": "Buttonsimple",
|
|
3714
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
3884
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3715
3885
|
}
|
|
3716
3886
|
},
|
|
3717
3887
|
{
|
|
3718
|
-
"kind": "field",
|
|
3719
3888
|
"name": "counter",
|
|
3720
3889
|
"type": {
|
|
3721
3890
|
"text": "number | undefined"
|
|
3722
3891
|
},
|
|
3723
3892
|
"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`.",
|
|
3724
|
-
"
|
|
3893
|
+
"fieldName": "counter",
|
|
3725
3894
|
"inheritedFrom": {
|
|
3726
3895
|
"name": "AvatarComponentMixin",
|
|
3727
|
-
"module": "utils/mixins/AvatarComponentMixin.
|
|
3896
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3728
3897
|
}
|
|
3729
3898
|
},
|
|
3730
3899
|
{
|
|
3731
|
-
"
|
|
3732
|
-
"name": "isTyping",
|
|
3900
|
+
"name": "is-typing",
|
|
3733
3901
|
"type": {
|
|
3734
3902
|
"text": "boolean"
|
|
3735
3903
|
},
|
|
3736
3904
|
"default": "false",
|
|
3737
3905
|
"description": "Represents the typing indicator when the user is typing.",
|
|
3738
|
-
"
|
|
3906
|
+
"fieldName": "isTyping",
|
|
3739
3907
|
"inheritedFrom": {
|
|
3740
3908
|
"name": "AvatarComponentMixin",
|
|
3741
|
-
"module": "utils/mixins/AvatarComponentMixin.
|
|
3909
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
3742
3910
|
}
|
|
3743
3911
|
},
|
|
3744
3912
|
{
|
|
3745
|
-
"
|
|
3746
|
-
"name": "iconName",
|
|
3913
|
+
"name": "icon-name",
|
|
3747
3914
|
"type": {
|
|
3748
3915
|
"text": "IconNames | undefined"
|
|
3749
3916
|
},
|
|
3750
3917
|
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
3751
|
-
"
|
|
3918
|
+
"fieldName": "iconName",
|
|
3752
3919
|
"inheritedFrom": {
|
|
3753
3920
|
"name": "IconNameMixin",
|
|
3754
|
-
"module": "utils/mixins/IconNameMixin.
|
|
3921
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
3755
3922
|
}
|
|
3756
3923
|
},
|
|
3757
3924
|
{
|
|
3758
|
-
"
|
|
3759
|
-
"name": "autoFocusOnMount",
|
|
3925
|
+
"name": "auto-focus-on-mount",
|
|
3760
3926
|
"type": {
|
|
3761
3927
|
"text": "boolean"
|
|
3762
3928
|
},
|
|
3763
3929
|
"default": "false",
|
|
3764
3930
|
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
|
3765
|
-
"
|
|
3766
|
-
"reflects": true,
|
|
3931
|
+
"fieldName": "autoFocusOnMount",
|
|
3767
3932
|
"inheritedFrom": {
|
|
3768
3933
|
"name": "AutoFocusOnMountMixin",
|
|
3769
|
-
"module": "utils/mixins/AutoFocusOnMountMixin.
|
|
3934
|
+
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
|
3770
3935
|
}
|
|
3771
3936
|
},
|
|
3772
3937
|
{
|
|
3773
|
-
"kind": "field",
|
|
3774
3938
|
"name": "tabIndex",
|
|
3775
3939
|
"type": {
|
|
3776
3940
|
"text": "number"
|
|
3777
3941
|
},
|
|
3778
3942
|
"default": "0",
|
|
3779
3943
|
"description": "This property specifies the tab order of the element.",
|
|
3780
|
-
"
|
|
3781
|
-
"reflects": true,
|
|
3944
|
+
"fieldName": "tabIndex",
|
|
3782
3945
|
"inheritedFrom": {
|
|
3783
3946
|
"name": "TabIndexMixin",
|
|
3784
|
-
"module": "utils/mixins/TabIndexMixin.
|
|
3947
|
+
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
3785
3948
|
}
|
|
3786
3949
|
},
|
|
3787
3950
|
{
|
|
3788
|
-
"kind": "field",
|
|
3789
3951
|
"name": "disabled",
|
|
3790
3952
|
"type": {
|
|
3791
3953
|
"text": "boolean | undefined"
|
|
3792
3954
|
},
|
|
3793
3955
|
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
3794
3956
|
"default": "undefined",
|
|
3795
|
-
"
|
|
3796
|
-
"reflects": true,
|
|
3957
|
+
"fieldName": "disabled",
|
|
3797
3958
|
"inheritedFrom": {
|
|
3798
3959
|
"name": "DisabledMixin",
|
|
3799
|
-
"module": "utils/mixins/DisabledMixin.
|
|
3960
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
3800
3961
|
}
|
|
3801
3962
|
},
|
|
3802
3963
|
{
|
|
3803
|
-
"kind": "field",
|
|
3804
3964
|
"name": "active",
|
|
3805
3965
|
"type": {
|
|
3806
3966
|
"text": "boolean | undefined"
|
|
3807
3967
|
},
|
|
3808
3968
|
"description": "The button's active state indicates whether it is currently toggled on (active) or off (inactive).\nWhen the active state is true, the button is considered to be in an active state, meaning it is toggled on.\nConversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.\n\nThis attribute is used to set the provided `ariaStateKey` to true or false.",
|
|
3809
3969
|
"default": "undefined",
|
|
3810
|
-
"
|
|
3811
|
-
"reflects": true,
|
|
3970
|
+
"fieldName": "active",
|
|
3812
3971
|
"inheritedFrom": {
|
|
3813
3972
|
"name": "Buttonsimple",
|
|
3814
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
3973
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3815
3974
|
}
|
|
3816
3975
|
},
|
|
3817
3976
|
{
|
|
3818
|
-
"
|
|
3819
|
-
"name": "softDisabled",
|
|
3977
|
+
"name": "soft-disabled",
|
|
3820
3978
|
"type": {
|
|
3821
3979
|
"text": "boolean | undefined"
|
|
3822
3980
|
},
|
|
3823
3981
|
"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.",
|
|
3824
3982
|
"default": "undefined",
|
|
3825
|
-
"
|
|
3826
|
-
"reflects": true,
|
|
3983
|
+
"fieldName": "softDisabled",
|
|
3827
3984
|
"inheritedFrom": {
|
|
3828
3985
|
"name": "Buttonsimple",
|
|
3829
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
3986
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3830
3987
|
}
|
|
3831
3988
|
},
|
|
3832
3989
|
{
|
|
3833
|
-
"kind": "field",
|
|
3834
3990
|
"name": "role",
|
|
3835
3991
|
"type": {
|
|
3836
3992
|
"text": "RoleType"
|
|
3837
3993
|
},
|
|
3838
3994
|
"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.",
|
|
3839
3995
|
"default": "button",
|
|
3840
|
-
"
|
|
3841
|
-
"reflects": true,
|
|
3996
|
+
"fieldName": "role",
|
|
3842
3997
|
"inheritedFrom": {
|
|
3843
3998
|
"name": "Buttonsimple",
|
|
3844
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
3999
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3845
4000
|
}
|
|
3846
4001
|
},
|
|
3847
4002
|
{
|
|
3848
|
-
"kind": "field",
|
|
3849
4003
|
"name": "ariaStateKey",
|
|
3850
4004
|
"type": {
|
|
3851
4005
|
"text": "string | undefined"
|
|
3852
4006
|
},
|
|
3853
4007
|
"description": "This property defines the ARIA state key, which will be toggled when the\nButton is set to `active`.\nThe default value is 'aria-pressed', which is commonly used for toggle buttons.\n\nConsumers can override this property to use a different ARIA state key if needed.\nIn case multiple aria attributes should be toggled, they can be passed in as\na comma separated string.\nFor example: `aria-pressed,aria-expanded`",
|
|
3854
4008
|
"default": "'aria-pressed' (when)",
|
|
3855
|
-
"
|
|
3856
|
-
"reflects": true,
|
|
4009
|
+
"fieldName": "ariaStateKey",
|
|
3857
4010
|
"inheritedFrom": {
|
|
3858
4011
|
"name": "Buttonsimple",
|
|
3859
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4012
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3860
4013
|
}
|
|
3861
4014
|
},
|
|
3862
4015
|
{
|
|
3863
|
-
"kind": "field",
|
|
3864
4016
|
"name": "type",
|
|
3865
4017
|
"type": {
|
|
3866
4018
|
"text": "ButtonType"
|
|
3867
4019
|
},
|
|
3868
4020
|
"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.",
|
|
3869
4021
|
"default": "button",
|
|
3870
|
-
"
|
|
3871
|
-
"reflects": true,
|
|
4022
|
+
"fieldName": "type",
|
|
3872
4023
|
"inheritedFrom": {
|
|
3873
4024
|
"name": "Buttonsimple",
|
|
3874
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4025
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3875
4026
|
}
|
|
3876
4027
|
},
|
|
3877
4028
|
{
|
|
3878
|
-
"kind": "field",
|
|
3879
4029
|
"name": "name",
|
|
3880
4030
|
"type": {
|
|
3881
4031
|
"text": "string | undefined"
|
|
3882
4032
|
},
|
|
3883
4033
|
"description": "The name of the button, submitted as a pair with the button's value as part of the form data,\nwhen that button is used to submit the form.",
|
|
3884
|
-
"
|
|
3885
|
-
"reflects": true,
|
|
4034
|
+
"fieldName": "name",
|
|
3886
4035
|
"inheritedFrom": {
|
|
3887
4036
|
"name": "Buttonsimple",
|
|
3888
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4037
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
3889
4038
|
}
|
|
3890
4039
|
},
|
|
3891
4040
|
{
|
|
3892
|
-
"kind": "field",
|
|
3893
4041
|
"name": "value",
|
|
3894
4042
|
"type": {
|
|
3895
4043
|
"text": "string | undefined"
|
|
3896
4044
|
},
|
|
3897
4045
|
"description": "Defines the value associated with the button's name when it's submitted with the form data.\nThis value is passed to the server in params when the form is submitted using this button.",
|
|
3898
|
-
"
|
|
3899
|
-
"reflects": true,
|
|
3900
|
-
"inheritedFrom": {
|
|
3901
|
-
"name": "Buttonsimple",
|
|
3902
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3903
|
-
}
|
|
3904
|
-
},
|
|
3905
|
-
{
|
|
3906
|
-
"kind": "method",
|
|
3907
|
-
"name": "executeAction",
|
|
3908
|
-
"privacy": "protected",
|
|
3909
|
-
"inheritedFrom": {
|
|
3910
|
-
"name": "Buttonsimple",
|
|
3911
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3912
|
-
}
|
|
3913
|
-
},
|
|
3914
|
-
{
|
|
3915
|
-
"kind": "method",
|
|
3916
|
-
"name": "setActive",
|
|
3917
|
-
"privacy": "protected",
|
|
3918
|
-
"parameters": [
|
|
3919
|
-
{
|
|
3920
|
-
"name": "element",
|
|
3921
|
-
"type": {
|
|
3922
|
-
"text": "HTMLElement"
|
|
3923
|
-
},
|
|
3924
|
-
"description": "The button element"
|
|
3925
|
-
},
|
|
3926
|
-
{
|
|
3927
|
-
"name": "active",
|
|
3928
|
-
"optional": true,
|
|
3929
|
-
"type": {
|
|
3930
|
-
"text": "boolean"
|
|
3931
|
-
},
|
|
3932
|
-
"description": "The active state of the element"
|
|
3933
|
-
}
|
|
3934
|
-
],
|
|
3935
|
-
"description": "Sets the ariaStateKey attributes based on the active state of the button.",
|
|
3936
|
-
"inheritedFrom": {
|
|
3937
|
-
"name": "Buttonsimple",
|
|
3938
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3939
|
-
}
|
|
3940
|
-
},
|
|
3941
|
-
{
|
|
3942
|
-
"kind": "method",
|
|
3943
|
-
"name": "setSoftDisabled",
|
|
3944
|
-
"privacy": "private",
|
|
3945
|
-
"parameters": [
|
|
3946
|
-
{
|
|
3947
|
-
"name": "element",
|
|
3948
|
-
"type": {
|
|
3949
|
-
"text": "HTMLElement"
|
|
3950
|
-
},
|
|
3951
|
-
"description": "The button element."
|
|
3952
|
-
},
|
|
3953
|
-
{
|
|
3954
|
-
"name": "softDisabled",
|
|
3955
|
-
"optional": true,
|
|
3956
|
-
"type": {
|
|
3957
|
-
"text": "boolean"
|
|
3958
|
-
},
|
|
3959
|
-
"description": "The soft-disabled state."
|
|
3960
|
-
}
|
|
3961
|
-
],
|
|
3962
|
-
"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.",
|
|
3963
|
-
"inheritedFrom": {
|
|
3964
|
-
"name": "Buttonsimple",
|
|
3965
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3966
|
-
}
|
|
3967
|
-
},
|
|
3968
|
-
{
|
|
3969
|
-
"kind": "method",
|
|
3970
|
-
"name": "setDisabled",
|
|
3971
|
-
"privacy": "private",
|
|
3972
|
-
"parameters": [
|
|
3973
|
-
{
|
|
3974
|
-
"name": "element",
|
|
3975
|
-
"type": {
|
|
3976
|
-
"text": "HTMLElement"
|
|
3977
|
-
},
|
|
3978
|
-
"description": "The button element."
|
|
3979
|
-
},
|
|
3980
|
-
{
|
|
3981
|
-
"name": "disabled",
|
|
3982
|
-
"type": {
|
|
3983
|
-
"text": "boolean"
|
|
3984
|
-
},
|
|
3985
|
-
"description": "The disabled state."
|
|
3986
|
-
}
|
|
3987
|
-
],
|
|
3988
|
-
"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.",
|
|
3989
|
-
"inheritedFrom": {
|
|
3990
|
-
"name": "Buttonsimple",
|
|
3991
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
3992
|
-
}
|
|
3993
|
-
},
|
|
3994
|
-
{
|
|
3995
|
-
"kind": "method",
|
|
3996
|
-
"name": "triggerClickEvent",
|
|
3997
|
-
"privacy": "private",
|
|
3998
|
-
"inheritedFrom": {
|
|
3999
|
-
"name": "Buttonsimple",
|
|
4000
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4001
|
-
}
|
|
4002
|
-
},
|
|
4003
|
-
{
|
|
4004
|
-
"kind": "method",
|
|
4005
|
-
"name": "handleBlur",
|
|
4006
|
-
"privacy": "private",
|
|
4007
|
-
"description": "In case the button is pressed and the focus is lost while pressing,\nthe pressed class is removed.",
|
|
4046
|
+
"fieldName": "value",
|
|
4008
4047
|
"inheritedFrom": {
|
|
4009
4048
|
"name": "Buttonsimple",
|
|
4010
|
-
"module": "components/buttonsimple/buttonsimple.component.
|
|
4049
|
+
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4011
4050
|
}
|
|
4012
|
-
}
|
|
4051
|
+
}
|
|
4052
|
+
],
|
|
4053
|
+
"mixins": [
|
|
4013
4054
|
{
|
|
4014
|
-
"
|
|
4015
|
-
"
|
|
4016
|
-
"privacy": "private",
|
|
4017
|
-
"parameters": [
|
|
4018
|
-
{
|
|
4019
|
-
"name": "event",
|
|
4020
|
-
"type": {
|
|
4021
|
-
"text": "KeyboardEvent"
|
|
4022
|
-
},
|
|
4023
|
-
"description": "The keyboard event."
|
|
4024
|
-
}
|
|
4025
|
-
],
|
|
4026
|
-
"description": "Handles the keydown event on the button.\nIf the key is 'Enter' or 'Space', the button is pressed.\nIf the key is 'Enter', the button is pressed. The native HTML button works in the same way.\nIf the key is 'Space', the button's default is prevent to avoid scrolling etc in the host application.",
|
|
4027
|
-
"inheritedFrom": {
|
|
4028
|
-
"name": "Buttonsimple",
|
|
4029
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4030
|
-
}
|
|
4055
|
+
"name": "AvatarComponentMixin",
|
|
4056
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
4031
4057
|
},
|
|
4032
4058
|
{
|
|
4033
|
-
"
|
|
4034
|
-
"
|
|
4035
|
-
"privacy": "private",
|
|
4036
|
-
"parameters": [
|
|
4037
|
-
{
|
|
4038
|
-
"name": "event",
|
|
4039
|
-
"type": {
|
|
4040
|
-
"text": "KeyboardEvent"
|
|
4041
|
-
},
|
|
4042
|
-
"description": "The keyboard event."
|
|
4043
|
-
}
|
|
4044
|
-
],
|
|
4045
|
-
"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.",
|
|
4046
|
-
"inheritedFrom": {
|
|
4047
|
-
"name": "Buttonsimple",
|
|
4048
|
-
"module": "components/buttonsimple/buttonsimple.component.js"
|
|
4049
|
-
}
|
|
4059
|
+
"name": "IconNameMixin",
|
|
4060
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
4050
4061
|
}
|
|
4051
4062
|
],
|
|
4052
|
-
"
|
|
4063
|
+
"superclass": {
|
|
4064
|
+
"name": "Buttonsimple",
|
|
4065
|
+
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
4066
|
+
},
|
|
4067
|
+
"tagName": "mdc-avatarbutton",
|
|
4068
|
+
"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 * To override styles of the avatar inside, use the specified css parts.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
|
|
4069
|
+
"customElement": true
|
|
4070
|
+
}
|
|
4071
|
+
],
|
|
4072
|
+
"exports": [
|
|
4073
|
+
{
|
|
4074
|
+
"kind": "js",
|
|
4075
|
+
"name": "default",
|
|
4076
|
+
"declaration": {
|
|
4077
|
+
"name": "AvatarButton",
|
|
4078
|
+
"module": "components/avatarbutton/avatarbutton.component.js"
|
|
4079
|
+
}
|
|
4080
|
+
}
|
|
4081
|
+
]
|
|
4082
|
+
},
|
|
4083
|
+
{
|
|
4084
|
+
"kind": "javascript-module",
|
|
4085
|
+
"path": "components/avatar/avatar.component.js",
|
|
4086
|
+
"declarations": [
|
|
4087
|
+
{
|
|
4088
|
+
"kind": "class",
|
|
4089
|
+
"description": "The `mdc-avatar` component is used to represent a person or a space.\nAn avatar can be an icon, initials, counter and photo.\n\nTo set the photo of an avatar,\nyou need to set \"src\" attribute.\n\nWhile the avatar image is loading, as a placeholder,\nwe will show the initials text.\nIf the initials are not specified then,\nwe will show `user-regular` icon as a placeholder.\n\nBy default, if there are no attributes specified,\nthen the default avatar will be an icon with `user-regular` name.\n\nThe avatar component is non clickable and non interactive/focusable component.\nIf the avatar is typing, then the loading indicator will be displayed.\nIf the counter type avatar is set to a negative number, then we will display 0.\nThe presence indicator will be hidden when the counter property is set.",
|
|
4090
|
+
"name": "Avatar",
|
|
4091
|
+
"cssProperties": [
|
|
4053
4092
|
{
|
|
4054
|
-
"description": "
|
|
4055
|
-
"name": "
|
|
4056
|
-
"reactName": "onClick",
|
|
4057
|
-
"inheritedFrom": {
|
|
4058
|
-
"name": "Buttonsimple",
|
|
4059
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4060
|
-
}
|
|
4093
|
+
"description": "Allows customization of the default background color.",
|
|
4094
|
+
"name": "--mdc-avatar-default-background-color"
|
|
4061
4095
|
},
|
|
4062
4096
|
{
|
|
4063
|
-
"description": "
|
|
4064
|
-
"name": "
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
|
|
4068
|
-
|
|
4069
|
-
}
|
|
4097
|
+
"description": "Allows customization of the default foreground color.",
|
|
4098
|
+
"name": "--mdc-avatar-default-foreground-color"
|
|
4099
|
+
},
|
|
4100
|
+
{
|
|
4101
|
+
"description": "Allows customization of the loading indicator background color.",
|
|
4102
|
+
"name": "--mdc-avatar-loading-indicator-background-color"
|
|
4070
4103
|
},
|
|
4071
4104
|
{
|
|
4072
|
-
"description": "
|
|
4073
|
-
"name": "
|
|
4074
|
-
"reactName": "onKeyUp",
|
|
4075
|
-
"inheritedFrom": {
|
|
4076
|
-
"name": "Buttonsimple",
|
|
4077
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4078
|
-
}
|
|
4105
|
+
"description": "Allows customization of the loading indicator foreground color.",
|
|
4106
|
+
"name": "--mdc-avatar-loading-indicator-foreground-color"
|
|
4079
4107
|
},
|
|
4080
4108
|
{
|
|
4081
|
-
"description": "
|
|
4082
|
-
"name": "
|
|
4083
|
-
"reactName": "onFocus",
|
|
4084
|
-
"inheritedFrom": {
|
|
4085
|
-
"name": "Buttonsimple",
|
|
4086
|
-
"module": "src/components/buttonsimple/buttonsimple.component.ts"
|
|
4087
|
-
}
|
|
4109
|
+
"description": "Allows customization of the loading overlay background color.",
|
|
4110
|
+
"name": "--mdc-avatar-loading-overlay-background-color"
|
|
4088
4111
|
}
|
|
4089
4112
|
],
|
|
4090
|
-
"
|
|
4113
|
+
"cssParts": [
|
|
4091
4114
|
{
|
|
4092
|
-
"
|
|
4093
|
-
"
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
"
|
|
4097
|
-
"
|
|
4098
|
-
|
|
4115
|
+
"description": "The photo of the avatar.",
|
|
4116
|
+
"name": "photo"
|
|
4117
|
+
},
|
|
4118
|
+
{
|
|
4119
|
+
"description": "The presence indicator of the avatar.",
|
|
4120
|
+
"name": "presence"
|
|
4121
|
+
},
|
|
4122
|
+
{
|
|
4123
|
+
"description": "The wrapper for the loading indicator.",
|
|
4124
|
+
"name": "loading-wrapper"
|
|
4099
4125
|
},
|
|
4100
4126
|
{
|
|
4127
|
+
"description": "The loading indicator of the avatar.",
|
|
4128
|
+
"name": "loader"
|
|
4129
|
+
}
|
|
4130
|
+
],
|
|
4131
|
+
"members": [
|
|
4132
|
+
{
|
|
4133
|
+
"kind": "field",
|
|
4101
4134
|
"name": "src",
|
|
4102
4135
|
"type": {
|
|
4103
4136
|
"text": "string | undefined"
|
|
4104
4137
|
},
|
|
4105
4138
|
"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.",
|
|
4106
|
-
"
|
|
4139
|
+
"attribute": "src",
|
|
4107
4140
|
"inheritedFrom": {
|
|
4108
4141
|
"name": "AvatarComponentMixin",
|
|
4109
|
-
"module": "
|
|
4142
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
4110
4143
|
}
|
|
4111
4144
|
},
|
|
4112
4145
|
{
|
|
4146
|
+
"kind": "field",
|
|
4113
4147
|
"name": "initials",
|
|
4114
4148
|
"type": {
|
|
4115
4149
|
"text": "string | undefined"
|
|
4116
4150
|
},
|
|
4117
4151
|
"description": "The initials to be displayed for the avatar.",
|
|
4118
|
-
"
|
|
4152
|
+
"attribute": "initials",
|
|
4119
4153
|
"inheritedFrom": {
|
|
4120
4154
|
"name": "AvatarComponentMixin",
|
|
4121
|
-
"module": "
|
|
4155
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
4122
4156
|
}
|
|
4123
4157
|
},
|
|
4124
4158
|
{
|
|
4159
|
+
"kind": "field",
|
|
4125
4160
|
"name": "presence",
|
|
4126
4161
|
"type": {
|
|
4127
4162
|
"text": "PresenceType | undefined"
|
|
4128
4163
|
},
|
|
4129
4164
|
"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`",
|
|
4130
|
-
"
|
|
4165
|
+
"attribute": "presence",
|
|
4131
4166
|
"inheritedFrom": {
|
|
4132
4167
|
"name": "AvatarComponentMixin",
|
|
4133
|
-
"module": "
|
|
4168
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
4134
4169
|
}
|
|
4135
4170
|
},
|
|
4136
4171
|
{
|
|
4172
|
+
"kind": "field",
|
|
4137
4173
|
"name": "size",
|
|
4138
4174
|
"type": {
|
|
4139
|
-
"text": "
|
|
4175
|
+
"text": "AvatarSize"
|
|
4140
4176
|
},
|
|
4141
4177
|
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
4142
4178
|
"default": "32",
|
|
4143
|
-
"
|
|
4179
|
+
"attribute": "size",
|
|
4180
|
+
"reflects": true,
|
|
4144
4181
|
"inheritedFrom": {
|
|
4145
|
-
"name": "
|
|
4146
|
-
"module": "
|
|
4182
|
+
"name": "AvatarComponentMixin",
|
|
4183
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
4147
4184
|
}
|
|
4148
4185
|
},
|
|
4149
4186
|
{
|
|
4187
|
+
"kind": "field",
|
|
4150
4188
|
"name": "counter",
|
|
4151
4189
|
"type": {
|
|
4152
4190
|
"text": "number | undefined"
|
|
4153
4191
|
},
|
|
4154
4192
|
"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`.",
|
|
4155
|
-
"
|
|
4193
|
+
"attribute": "counter",
|
|
4156
4194
|
"inheritedFrom": {
|
|
4157
4195
|
"name": "AvatarComponentMixin",
|
|
4158
|
-
"module": "
|
|
4196
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
4159
4197
|
}
|
|
4160
4198
|
},
|
|
4161
4199
|
{
|
|
4162
|
-
"
|
|
4200
|
+
"kind": "field",
|
|
4201
|
+
"name": "isTyping",
|
|
4163
4202
|
"type": {
|
|
4164
4203
|
"text": "boolean"
|
|
4165
4204
|
},
|
|
4166
4205
|
"default": "false",
|
|
4167
4206
|
"description": "Represents the typing indicator when the user is typing.",
|
|
4168
|
-
"
|
|
4207
|
+
"attribute": "is-typing",
|
|
4169
4208
|
"inheritedFrom": {
|
|
4170
4209
|
"name": "AvatarComponentMixin",
|
|
4171
|
-
"module": "
|
|
4210
|
+
"module": "utils/mixins/AvatarComponentMixin.js"
|
|
4172
4211
|
}
|
|
4173
4212
|
},
|
|
4174
4213
|
{
|
|
4175
|
-
"
|
|
4214
|
+
"kind": "field",
|
|
4215
|
+
"name": "iconName",
|
|
4176
4216
|
"type": {
|
|
4177
4217
|
"text": "IconNames | undefined"
|
|
4178
4218
|
},
|
|
4179
4219
|
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
4180
|
-
"
|
|
4220
|
+
"attribute": "icon-name",
|
|
4181
4221
|
"inheritedFrom": {
|
|
4182
4222
|
"name": "IconNameMixin",
|
|
4183
|
-
"module": "
|
|
4184
|
-
}
|
|
4185
|
-
},
|
|
4186
|
-
{
|
|
4187
|
-
"name": "auto-focus-on-mount",
|
|
4188
|
-
"type": {
|
|
4189
|
-
"text": "boolean"
|
|
4190
|
-
},
|
|
4191
|
-
"default": "false",
|
|
4192
|
-
"description": "This property indicates whether the element should receive focus automatically when it is mounted.\n\nIt will not focus if the element is re-attached to the DOM after being removed.",
|
|
4193
|
-
"fieldName": "autoFocusOnMount",
|
|
4194
|
-
"inheritedFrom": {
|
|
4195
|
-
"name": "AutoFocusOnMountMixin",
|
|
4196
|
-
"module": "src/utils/mixins/AutoFocusOnMountMixin.ts"
|
|
4223
|
+
"module": "utils/mixins/IconNameMixin.js"
|
|
4197
4224
|
}
|
|
4198
|
-
}
|
|
4225
|
+
}
|
|
4226
|
+
],
|
|
4227
|
+
"mixins": [
|
|
4199
4228
|
{
|
|
4200
|
-
"name": "
|
|
4201
|
-
"
|
|
4202
|
-
"text": "number"
|
|
4203
|
-
},
|
|
4204
|
-
"default": "0",
|
|
4205
|
-
"description": "This property specifies the tab order of the element.",
|
|
4206
|
-
"fieldName": "tabIndex",
|
|
4207
|
-
"inheritedFrom": {
|
|
4208
|
-
"name": "TabIndexMixin",
|
|
4209
|
-
"module": "src/utils/mixins/TabIndexMixin.ts"
|
|
4210
|
-
}
|
|
4229
|
+
"name": "AvatarComponentMixin",
|
|
4230
|
+
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
4211
4231
|
},
|
|
4212
4232
|
{
|
|
4213
|
-
"name": "
|
|
4214
|
-
"
|
|
4215
|
-
|
|
4216
|
-
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
-
|
|
4220
|
-
|
|
4221
|
-
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
|
|
4233
|
+
"name": "IconNameMixin",
|
|
4234
|
+
"module": "/src/utils/mixins/IconNameMixin"
|
|
4235
|
+
}
|
|
4236
|
+
],
|
|
4237
|
+
"superclass": {
|
|
4238
|
+
"name": "Component",
|
|
4239
|
+
"module": "/src/models"
|
|
4240
|
+
},
|
|
4241
|
+
"tagName": "mdc-avatar",
|
|
4242
|
+
"jsDoc": "/**\n * The `mdc-avatar` component is used to represent a person or a space.\n * An avatar can be an icon, initials, counter and photo.\n *\n * To set the photo of an avatar,\n * you need to set \"src\" attribute.\n *\n * While the avatar image is loading, as a placeholder,\n * we will show the initials text.\n * If the initials are not specified then,\n * we will show `user-regular` icon as a placeholder.\n *\n * By default, if there are no attributes specified,\n * then the default avatar will be an icon with `user-regular` name.\n *\n * The avatar component is non clickable and non interactive/focusable component.\n * If the avatar is typing, then the loading indicator will be displayed.\n * If the counter type avatar is set to a negative number, then we will display 0.\n * The presence indicator will be hidden when the counter property is set.\n *\n * @dependency mdc-icon\n * @dependency mdc-presence\n * @dependency mdc-text\n *\n * @tagname mdc-avatar\n *\n * @cssproperty --mdc-avatar-default-background-color - Allows customization of the default background color.\n * @cssproperty --mdc-avatar-default-foreground-color - Allows customization of the default foreground color.\n * @cssproperty --mdc-avatar-loading-indicator-background-color -\n * Allows customization of the loading indicator background color.\n * @cssproperty --mdc-avatar-loading-indicator-foreground-color -\n * Allows customization of the loading indicator foreground color.\n * @cssproperty --mdc-avatar-loading-overlay-background-color -\n * Allows customization of the loading overlay background color.\n *\n * @csspart photo - The photo of the avatar.\n * @csspart presence - The presence indicator of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator.\n * @csspart loader - The loading indicator of the avatar.\n */",
|
|
4243
|
+
"customElement": true,
|
|
4244
|
+
"attributes": [
|
|
4225
4245
|
{
|
|
4226
|
-
"name": "
|
|
4246
|
+
"name": "src",
|
|
4227
4247
|
"type": {
|
|
4228
|
-
"text": "
|
|
4248
|
+
"text": "string | undefined"
|
|
4229
4249
|
},
|
|
4230
|
-
"description": "The
|
|
4231
|
-
"
|
|
4232
|
-
"fieldName": "active",
|
|
4250
|
+
"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.",
|
|
4251
|
+
"fieldName": "src",
|
|
4233
4252
|
"inheritedFrom": {
|
|
4234
|
-
"name": "
|
|
4235
|
-
"module": "src/
|
|
4253
|
+
"name": "AvatarComponentMixin",
|
|
4254
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
4236
4255
|
}
|
|
4237
4256
|
},
|
|
4238
4257
|
{
|
|
4239
|
-
"name": "
|
|
4258
|
+
"name": "initials",
|
|
4240
4259
|
"type": {
|
|
4241
|
-
"text": "
|
|
4260
|
+
"text": "string | undefined"
|
|
4242
4261
|
},
|
|
4243
|
-
"description": "
|
|
4244
|
-
"
|
|
4245
|
-
"fieldName": "softDisabled",
|
|
4262
|
+
"description": "The initials to be displayed for the avatar.",
|
|
4263
|
+
"fieldName": "initials",
|
|
4246
4264
|
"inheritedFrom": {
|
|
4247
|
-
"name": "
|
|
4248
|
-
"module": "src/
|
|
4265
|
+
"name": "AvatarComponentMixin",
|
|
4266
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
4249
4267
|
}
|
|
4250
4268
|
},
|
|
4251
4269
|
{
|
|
4252
|
-
"name": "
|
|
4270
|
+
"name": "presence",
|
|
4253
4271
|
"type": {
|
|
4254
|
-
"text": "
|
|
4272
|
+
"text": "PresenceType | undefined"
|
|
4255
4273
|
},
|
|
4256
|
-
"description": "
|
|
4257
|
-
"
|
|
4258
|
-
"fieldName": "role",
|
|
4274
|
+
"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`",
|
|
4275
|
+
"fieldName": "presence",
|
|
4259
4276
|
"inheritedFrom": {
|
|
4260
|
-
"name": "
|
|
4261
|
-
"module": "src/
|
|
4277
|
+
"name": "AvatarComponentMixin",
|
|
4278
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
4262
4279
|
}
|
|
4263
4280
|
},
|
|
4264
4281
|
{
|
|
4265
|
-
"name": "
|
|
4282
|
+
"name": "size",
|
|
4266
4283
|
"type": {
|
|
4267
|
-
"text": "
|
|
4284
|
+
"text": "AvatarSize"
|
|
4268
4285
|
},
|
|
4269
|
-
"description": "
|
|
4270
|
-
"default": "
|
|
4271
|
-
"fieldName": "
|
|
4286
|
+
"description": "Acceptable values include (size in px unit):\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124",
|
|
4287
|
+
"default": "32",
|
|
4288
|
+
"fieldName": "size",
|
|
4272
4289
|
"inheritedFrom": {
|
|
4273
|
-
"name": "
|
|
4274
|
-
"module": "src/
|
|
4290
|
+
"name": "AvatarComponentMixin",
|
|
4291
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
4275
4292
|
}
|
|
4276
4293
|
},
|
|
4277
4294
|
{
|
|
4278
|
-
"name": "
|
|
4295
|
+
"name": "counter",
|
|
4279
4296
|
"type": {
|
|
4280
|
-
"text": "
|
|
4297
|
+
"text": "number | undefined"
|
|
4281
4298
|
},
|
|
4282
|
-
"description": "
|
|
4283
|
-
"
|
|
4284
|
-
"fieldName": "type",
|
|
4299
|
+
"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`.",
|
|
4300
|
+
"fieldName": "counter",
|
|
4285
4301
|
"inheritedFrom": {
|
|
4286
|
-
"name": "
|
|
4287
|
-
"module": "src/
|
|
4302
|
+
"name": "AvatarComponentMixin",
|
|
4303
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
4288
4304
|
}
|
|
4289
4305
|
},
|
|
4290
4306
|
{
|
|
4291
|
-
"name": "
|
|
4307
|
+
"name": "is-typing",
|
|
4292
4308
|
"type": {
|
|
4293
|
-
"text": "
|
|
4309
|
+
"text": "boolean"
|
|
4294
4310
|
},
|
|
4295
|
-
"
|
|
4296
|
-
"
|
|
4311
|
+
"default": "false",
|
|
4312
|
+
"description": "Represents the typing indicator when the user is typing.",
|
|
4313
|
+
"fieldName": "isTyping",
|
|
4297
4314
|
"inheritedFrom": {
|
|
4298
|
-
"name": "
|
|
4299
|
-
"module": "src/
|
|
4315
|
+
"name": "AvatarComponentMixin",
|
|
4316
|
+
"module": "src/utils/mixins/AvatarComponentMixin.ts"
|
|
4300
4317
|
}
|
|
4301
4318
|
},
|
|
4302
4319
|
{
|
|
4303
|
-
"name": "
|
|
4320
|
+
"name": "icon-name",
|
|
4304
4321
|
"type": {
|
|
4305
|
-
"text": "
|
|
4322
|
+
"text": "IconNames | undefined"
|
|
4306
4323
|
},
|
|
4307
|
-
"description": "
|
|
4308
|
-
"fieldName": "
|
|
4324
|
+
"description": "Name of the icon (= filename).\n\nIf no `icon-name` is provided, no icon will be rendered.",
|
|
4325
|
+
"fieldName": "iconName",
|
|
4309
4326
|
"inheritedFrom": {
|
|
4310
|
-
"name": "
|
|
4311
|
-
"module": "src/
|
|
4327
|
+
"name": "IconNameMixin",
|
|
4328
|
+
"module": "src/utils/mixins/IconNameMixin.ts"
|
|
4312
4329
|
}
|
|
4313
4330
|
}
|
|
4314
|
-
]
|
|
4315
|
-
"mixins": [
|
|
4316
|
-
{
|
|
4317
|
-
"name": "AvatarComponentMixin",
|
|
4318
|
-
"module": "/src/utils/mixins/AvatarComponentMixin"
|
|
4319
|
-
},
|
|
4320
|
-
{
|
|
4321
|
-
"name": "IconNameMixin",
|
|
4322
|
-
"module": "/src/utils/mixins/IconNameMixin"
|
|
4323
|
-
}
|
|
4324
|
-
],
|
|
4325
|
-
"superclass": {
|
|
4326
|
-
"name": "Buttonsimple",
|
|
4327
|
-
"module": "/src/components/buttonsimple/buttonsimple.component"
|
|
4328
|
-
},
|
|
4329
|
-
"tagName": "mdc-avatarbutton",
|
|
4330
|
-
"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 * To override styles of the avatar inside, use the specified css parts.\n *\n * @dependency mdc-avatar\n *\n * @event click - (React: onClick) This event is dispatched when the avatarbutton is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the avatarbutton.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the avatarbutton.\n * @event focus - (React: onFocus) This event is dispatched when the avatarbutton receives focus.\n *\n * @tagname mdc-avatarbutton\n *\n * @cssproperty --mdc-avatarbutton-overlay-background-color-rest - Background color of the overlay in rest state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-hover - Background color of the overlay in hover state\n * @cssproperty --mdc-avatarbutton-overlay-background-color-active - Background color of the overlay in active state\n *\n * @csspart overlay - The overlay part of the avatar button.\n * @csspart content - The main content of the avatar.\n * @csspart photo - The photo part of the avatar.\n * @csspart presence - The presence indicator part of the avatar.\n * @csspart loading-wrapper - The wrapper for the loading indicator of the avatar.\n * @csspart loader - The loading indicator part of the avatar.\n */",
|
|
4331
|
-
"customElement": true
|
|
4331
|
+
]
|
|
4332
4332
|
}
|
|
4333
4333
|
],
|
|
4334
4334
|
"exports": [
|
|
@@ -4336,8 +4336,8 @@
|
|
|
4336
4336
|
"kind": "js",
|
|
4337
4337
|
"name": "default",
|
|
4338
4338
|
"declaration": {
|
|
4339
|
-
"name": "
|
|
4340
|
-
"module": "components/
|
|
4339
|
+
"name": "Avatar",
|
|
4340
|
+
"module": "components/avatar/avatar.component.js"
|
|
4341
4341
|
}
|
|
4342
4342
|
}
|
|
4343
4343
|
]
|