@momentum-design/components 0.118.5 → 0.118.6
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 +198 -198
- package/dist/browser/index.js.map +4 -4
- package/dist/components/popover/index.js +2 -0
- package/dist/components/popover/popover.component.d.ts +44 -8
- package/dist/components/popover/popover.component.js +53 -11
- package/dist/components/popover/popover.portal.component.d.ts +29 -0
- package/dist/components/popover/popover.portal.component.js +37 -0
- package/dist/components/popover/popover.utils.d.ts +15 -0
- package/dist/components/popover/popover.utils.js +32 -3
- package/dist/custom-elements.json +432 -412
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/dist/react/popover/index.d.ts +43 -7
- package/dist/react/popover/index.js +43 -7
- package/package.json +1 -1
|
@@ -4569,6 +4569,166 @@
|
|
|
4569
4569
|
}
|
|
4570
4570
|
]
|
|
4571
4571
|
},
|
|
4572
|
+
{
|
|
4573
|
+
"kind": "javascript-module",
|
|
4574
|
+
"path": "components/banner/banner.component.js",
|
|
4575
|
+
"declarations": [
|
|
4576
|
+
{
|
|
4577
|
+
"kind": "class",
|
|
4578
|
+
"description": "`mdc-banner` is a component that allows applications to communicate important messages to users \nand requires user action to dismiss them. It supports different message types with appropriate styling \nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
|
|
4579
|
+
"name": "Banner",
|
|
4580
|
+
"cssProperties": [
|
|
4581
|
+
{
|
|
4582
|
+
"description": "Background color of the banner.",
|
|
4583
|
+
"name": "--mdc-banner-background-color"
|
|
4584
|
+
},
|
|
4585
|
+
{
|
|
4586
|
+
"description": "Border color of the banner.",
|
|
4587
|
+
"name": "--mdc-banner-border-color"
|
|
4588
|
+
},
|
|
4589
|
+
{
|
|
4590
|
+
"description": "Color of the icon in the banner.",
|
|
4591
|
+
"name": "--mdc-banner-icon-color"
|
|
4592
|
+
},
|
|
4593
|
+
{
|
|
4594
|
+
"description": "Elevation/shadow of the banner.",
|
|
4595
|
+
"name": "--mdc-banner-elevation"
|
|
4596
|
+
},
|
|
4597
|
+
{
|
|
4598
|
+
"description": "Padding inside the banner.",
|
|
4599
|
+
"name": "--mdc-banner-padding"
|
|
4600
|
+
},
|
|
4601
|
+
{
|
|
4602
|
+
"description": "Gap between banner elements.",
|
|
4603
|
+
"name": "--mdc-banner-gap"
|
|
4604
|
+
}
|
|
4605
|
+
],
|
|
4606
|
+
"cssParts": [
|
|
4607
|
+
{
|
|
4608
|
+
"description": "The leading section containing the icon and text.",
|
|
4609
|
+
"name": "leading"
|
|
4610
|
+
},
|
|
4611
|
+
{
|
|
4612
|
+
"description": "The icon displayed for variants or custom icon slot.",
|
|
4613
|
+
"name": "leading-icon"
|
|
4614
|
+
},
|
|
4615
|
+
{
|
|
4616
|
+
"description": "The leading section containing label and secondary label text.",
|
|
4617
|
+
"name": "leading-text"
|
|
4618
|
+
},
|
|
4619
|
+
{
|
|
4620
|
+
"description": "The trailing section containing action buttons and controls.",
|
|
4621
|
+
"name": "trailing"
|
|
4622
|
+
},
|
|
4623
|
+
{
|
|
4624
|
+
"description": "The label text of the banner.",
|
|
4625
|
+
"name": "leading-label"
|
|
4626
|
+
},
|
|
4627
|
+
{
|
|
4628
|
+
"description": "The secondary label text of the banner.",
|
|
4629
|
+
"name": "leading-secondary-label"
|
|
4630
|
+
}
|
|
4631
|
+
],
|
|
4632
|
+
"slots": [
|
|
4633
|
+
{
|
|
4634
|
+
"description": "Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.",
|
|
4635
|
+
"name": "content"
|
|
4636
|
+
},
|
|
4637
|
+
{
|
|
4638
|
+
"description": "Custom icon content. Overrides the default variant-based icon.",
|
|
4639
|
+
"name": "leading-icon"
|
|
4640
|
+
},
|
|
4641
|
+
{
|
|
4642
|
+
"description": "Custom text content. Overrides the label and secondaryLabel properties.",
|
|
4643
|
+
"name": "leading-text"
|
|
4644
|
+
},
|
|
4645
|
+
{
|
|
4646
|
+
"description": "Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.",
|
|
4647
|
+
"name": "trailing-actions"
|
|
4648
|
+
}
|
|
4649
|
+
],
|
|
4650
|
+
"members": [
|
|
4651
|
+
{
|
|
4652
|
+
"kind": "field",
|
|
4653
|
+
"name": "variant",
|
|
4654
|
+
"type": {
|
|
4655
|
+
"text": "BannerVariant"
|
|
4656
|
+
},
|
|
4657
|
+
"description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
|
|
4658
|
+
"default": "'custom'",
|
|
4659
|
+
"attribute": "variant",
|
|
4660
|
+
"reflects": true
|
|
4661
|
+
},
|
|
4662
|
+
{
|
|
4663
|
+
"kind": "field",
|
|
4664
|
+
"name": "label",
|
|
4665
|
+
"type": {
|
|
4666
|
+
"text": "string"
|
|
4667
|
+
},
|
|
4668
|
+
"default": "''",
|
|
4669
|
+
"description": "Banner label text",
|
|
4670
|
+
"attribute": "label",
|
|
4671
|
+
"reflects": true
|
|
4672
|
+
},
|
|
4673
|
+
{
|
|
4674
|
+
"kind": "field",
|
|
4675
|
+
"name": "secondaryLabel",
|
|
4676
|
+
"type": {
|
|
4677
|
+
"text": "string | undefined"
|
|
4678
|
+
},
|
|
4679
|
+
"description": "Banner secondary label text\n\nNote: Optional supporting text that appears below the label. Only rendered when label is also provided.",
|
|
4680
|
+
"attribute": "secondary-label",
|
|
4681
|
+
"reflects": true
|
|
4682
|
+
}
|
|
4683
|
+
],
|
|
4684
|
+
"attributes": [
|
|
4685
|
+
{
|
|
4686
|
+
"name": "variant",
|
|
4687
|
+
"type": {
|
|
4688
|
+
"text": "BannerVariant"
|
|
4689
|
+
},
|
|
4690
|
+
"description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
|
|
4691
|
+
"default": "'custom'",
|
|
4692
|
+
"fieldName": "variant"
|
|
4693
|
+
},
|
|
4694
|
+
{
|
|
4695
|
+
"name": "label",
|
|
4696
|
+
"type": {
|
|
4697
|
+
"text": "string"
|
|
4698
|
+
},
|
|
4699
|
+
"default": "''",
|
|
4700
|
+
"description": "Banner label text",
|
|
4701
|
+
"fieldName": "label"
|
|
4702
|
+
},
|
|
4703
|
+
{
|
|
4704
|
+
"name": "secondary-label",
|
|
4705
|
+
"type": {
|
|
4706
|
+
"text": "string | undefined"
|
|
4707
|
+
},
|
|
4708
|
+
"description": "Banner secondary label text\n\nNote: Optional supporting text that appears below the label. Only rendered when label is also provided.",
|
|
4709
|
+
"fieldName": "secondaryLabel"
|
|
4710
|
+
}
|
|
4711
|
+
],
|
|
4712
|
+
"superclass": {
|
|
4713
|
+
"name": "Component",
|
|
4714
|
+
"module": "/src/models"
|
|
4715
|
+
},
|
|
4716
|
+
"tagName": "mdc-banner",
|
|
4717
|
+
"jsDoc": "/**\n * `mdc-banner` is a component that allows applications to communicate important messages to users \n * and requires user action to dismiss them. It supports different message types with appropriate styling \n * and icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n * \n * They are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n *\n * This component supports both structured content via properties and flexible customization via slots:\n * - Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n * - Use slots for custom content and complete layout control.\n * - Combine both approaches for maximum flexibility.\n * - Create custom orientations and actions using CSS parts and slots.\n * \n * @dependency mdc-icon\n * @dependency mdc-text\n *\n * @slot content - Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.\n * @slot leading-icon - Custom icon content. Overrides the default variant-based icon.\n * @slot leading-text - Custom text content. Overrides the label and secondaryLabel properties.\n * @slot trailing-actions - Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.\n *\n * @tagname mdc-banner\n *\n * @csspart leading - The leading section containing the icon and text.\n * @csspart leading-icon - The icon displayed for variants or custom icon slot.\n * @csspart leading-text - The leading section containing label and secondary label text.\n * @csspart trailing - The trailing section containing action buttons and controls.\n * @csspart leading-label - The label text of the banner.\n * @csspart leading-secondary-label - The secondary label text of the banner.\n *\n * @cssproperty --mdc-banner-background-color - Background color of the banner.\n * @cssproperty --mdc-banner-border-color - Border color of the banner.\n * @cssproperty --mdc-banner-icon-color - Color of the icon in the banner.\n * @cssproperty --mdc-banner-elevation - Elevation/shadow of the banner.\n * @cssproperty --mdc-banner-padding - Padding inside the banner.\n * @cssproperty --mdc-banner-gap - Gap between banner elements.\n */",
|
|
4718
|
+
"customElement": true
|
|
4719
|
+
}
|
|
4720
|
+
],
|
|
4721
|
+
"exports": [
|
|
4722
|
+
{
|
|
4723
|
+
"kind": "js",
|
|
4724
|
+
"name": "default",
|
|
4725
|
+
"declaration": {
|
|
4726
|
+
"name": "Banner",
|
|
4727
|
+
"module": "components/banner/banner.component.js"
|
|
4728
|
+
}
|
|
4729
|
+
}
|
|
4730
|
+
]
|
|
4731
|
+
},
|
|
4572
4732
|
{
|
|
4573
4733
|
"kind": "javascript-module",
|
|
4574
4734
|
"path": "components/brandvisual/brandvisual.component.js",
|
|
@@ -4705,192 +4865,32 @@
|
|
|
4705
4865
|
"description": "(React: onError) This event is dispatched when the brandvisual fetching has failed.",
|
|
4706
4866
|
"name": "error",
|
|
4707
4867
|
"reactName": "onError"
|
|
4708
|
-
}
|
|
4709
|
-
],
|
|
4710
|
-
"attributes": [
|
|
4711
|
-
{
|
|
4712
|
-
"name": "name",
|
|
4713
|
-
"type": {
|
|
4714
|
-
"text": "BrandVisualNames | undefined"
|
|
4715
|
-
},
|
|
4716
|
-
"description": "Name of the brandVisual (= filename)",
|
|
4717
|
-
"fieldName": "name"
|
|
4718
|
-
},
|
|
4719
|
-
{
|
|
4720
|
-
"name": "altText",
|
|
4721
|
-
"type": {
|
|
4722
|
-
"text": "string | undefined"
|
|
4723
|
-
},
|
|
4724
|
-
"description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
|
|
4725
|
-
"fieldName": "altText"
|
|
4726
|
-
}
|
|
4727
|
-
],
|
|
4728
|
-
"superclass": {
|
|
4729
|
-
"name": "Component",
|
|
4730
|
-
"module": "/src/models"
|
|
4731
|
-
},
|
|
4732
|
-
"tagName": "mdc-brandvisual",
|
|
4733
|
-
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
4734
|
-
"customElement": true
|
|
4735
|
-
}
|
|
4736
|
-
],
|
|
4737
|
-
"exports": [
|
|
4738
|
-
{
|
|
4739
|
-
"kind": "js",
|
|
4740
|
-
"name": "default",
|
|
4741
|
-
"declaration": {
|
|
4742
|
-
"name": "Brandvisual",
|
|
4743
|
-
"module": "components/brandvisual/brandvisual.component.js"
|
|
4744
|
-
}
|
|
4745
|
-
}
|
|
4746
|
-
]
|
|
4747
|
-
},
|
|
4748
|
-
{
|
|
4749
|
-
"kind": "javascript-module",
|
|
4750
|
-
"path": "components/banner/banner.component.js",
|
|
4751
|
-
"declarations": [
|
|
4752
|
-
{
|
|
4753
|
-
"kind": "class",
|
|
4754
|
-
"description": "`mdc-banner` is a component that allows applications to communicate important messages to users \nand requires user action to dismiss them. It supports different message types with appropriate styling \nand icons, and provides flexibility for customization through label, secondary label, icons, and actions.\n\nThey are designed to be noticeable yet non-intrusive, helping users stay informed without interrupting their workflow.\n\nThis component supports both structured content via properties and flexible customization via slots:\n- Use the properties (`label`, `secondaryLabel`, `variant`) for standard banner layouts with automatic icon selection.\n- Use slots for custom content and complete layout control.\n- Combine both approaches for maximum flexibility.\n- Create custom orientations and actions using CSS parts and slots.",
|
|
4755
|
-
"name": "Banner",
|
|
4756
|
-
"cssProperties": [
|
|
4757
|
-
{
|
|
4758
|
-
"description": "Background color of the banner.",
|
|
4759
|
-
"name": "--mdc-banner-background-color"
|
|
4760
|
-
},
|
|
4761
|
-
{
|
|
4762
|
-
"description": "Border color of the banner.",
|
|
4763
|
-
"name": "--mdc-banner-border-color"
|
|
4764
|
-
},
|
|
4765
|
-
{
|
|
4766
|
-
"description": "Color of the icon in the banner.",
|
|
4767
|
-
"name": "--mdc-banner-icon-color"
|
|
4768
|
-
},
|
|
4769
|
-
{
|
|
4770
|
-
"description": "Elevation/shadow of the banner.",
|
|
4771
|
-
"name": "--mdc-banner-elevation"
|
|
4772
|
-
},
|
|
4773
|
-
{
|
|
4774
|
-
"description": "Padding inside the banner.",
|
|
4775
|
-
"name": "--mdc-banner-padding"
|
|
4776
|
-
},
|
|
4777
|
-
{
|
|
4778
|
-
"description": "Gap between banner elements.",
|
|
4779
|
-
"name": "--mdc-banner-gap"
|
|
4780
|
-
}
|
|
4781
|
-
],
|
|
4782
|
-
"cssParts": [
|
|
4783
|
-
{
|
|
4784
|
-
"description": "The leading section containing the icon and text.",
|
|
4785
|
-
"name": "leading"
|
|
4786
|
-
},
|
|
4787
|
-
{
|
|
4788
|
-
"description": "The icon displayed for variants or custom icon slot.",
|
|
4789
|
-
"name": "leading-icon"
|
|
4790
|
-
},
|
|
4791
|
-
{
|
|
4792
|
-
"description": "The leading section containing label and secondary label text.",
|
|
4793
|
-
"name": "leading-text"
|
|
4794
|
-
},
|
|
4795
|
-
{
|
|
4796
|
-
"description": "The trailing section containing action buttons and controls.",
|
|
4797
|
-
"name": "trailing"
|
|
4798
|
-
},
|
|
4799
|
-
{
|
|
4800
|
-
"description": "The label text of the banner.",
|
|
4801
|
-
"name": "leading-label"
|
|
4802
|
-
},
|
|
4803
|
-
{
|
|
4804
|
-
"description": "The secondary label text of the banner.",
|
|
4805
|
-
"name": "leading-secondary-label"
|
|
4806
|
-
}
|
|
4807
|
-
],
|
|
4808
|
-
"slots": [
|
|
4809
|
-
{
|
|
4810
|
-
"description": "Complete content override. When used, it replaces all default banner content including icon, label, secondary label, and actions.",
|
|
4811
|
-
"name": "content"
|
|
4812
|
-
},
|
|
4813
|
-
{
|
|
4814
|
-
"description": "Custom icon content. Overrides the default variant-based icon.",
|
|
4815
|
-
"name": "leading-icon"
|
|
4816
|
-
},
|
|
4817
|
-
{
|
|
4818
|
-
"description": "Custom text content. Overrides the label and secondaryLabel properties.",
|
|
4819
|
-
"name": "leading-text"
|
|
4820
|
-
},
|
|
4821
|
-
{
|
|
4822
|
-
"description": "Custom action buttons and controls. Use this for dismiss buttons, reset buttons, or any other actions.",
|
|
4823
|
-
"name": "trailing-actions"
|
|
4824
|
-
}
|
|
4825
|
-
],
|
|
4826
|
-
"members": [
|
|
4827
|
-
{
|
|
4828
|
-
"kind": "field",
|
|
4829
|
-
"name": "variant",
|
|
4830
|
-
"type": {
|
|
4831
|
-
"text": "BannerVariant"
|
|
4832
|
-
},
|
|
4833
|
-
"description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
|
|
4834
|
-
"default": "'custom'",
|
|
4835
|
-
"attribute": "variant",
|
|
4836
|
-
"reflects": true
|
|
4837
|
-
},
|
|
4838
|
-
{
|
|
4839
|
-
"kind": "field",
|
|
4840
|
-
"name": "label",
|
|
4841
|
-
"type": {
|
|
4842
|
-
"text": "string"
|
|
4843
|
-
},
|
|
4844
|
-
"default": "''",
|
|
4845
|
-
"description": "Banner label text",
|
|
4846
|
-
"attribute": "label",
|
|
4847
|
-
"reflects": true
|
|
4848
|
-
},
|
|
4849
|
-
{
|
|
4850
|
-
"kind": "field",
|
|
4851
|
-
"name": "secondaryLabel",
|
|
4852
|
-
"type": {
|
|
4853
|
-
"text": "string | undefined"
|
|
4854
|
-
},
|
|
4855
|
-
"description": "Banner secondary label text\n\nNote: Optional supporting text that appears below the label. Only rendered when label is also provided.",
|
|
4856
|
-
"attribute": "secondary-label",
|
|
4857
|
-
"reflects": true
|
|
4858
|
-
}
|
|
4859
|
-
],
|
|
4860
|
-
"attributes": [
|
|
4861
|
-
{
|
|
4862
|
-
"name": "variant",
|
|
4863
|
-
"type": {
|
|
4864
|
-
"text": "BannerVariant"
|
|
4865
|
-
},
|
|
4866
|
-
"description": "The type of banner variant.\n- Can be `custom`, `informational`, `warning`, `error`, or `success`.\n\nNote: When using the `custom` variant, provide your own icon via the `leading-icon` slot; otherwise, no icon will be shown.",
|
|
4867
|
-
"default": "'custom'",
|
|
4868
|
-
"fieldName": "variant"
|
|
4869
|
-
},
|
|
4868
|
+
}
|
|
4869
|
+
],
|
|
4870
|
+
"attributes": [
|
|
4870
4871
|
{
|
|
4871
|
-
"name": "
|
|
4872
|
+
"name": "name",
|
|
4872
4873
|
"type": {
|
|
4873
|
-
"text": "
|
|
4874
|
+
"text": "BrandVisualNames | undefined"
|
|
4874
4875
|
},
|
|
4875
|
-
"
|
|
4876
|
-
"
|
|
4877
|
-
"fieldName": "label"
|
|
4876
|
+
"description": "Name of the brandVisual (= filename)",
|
|
4877
|
+
"fieldName": "name"
|
|
4878
4878
|
},
|
|
4879
4879
|
{
|
|
4880
|
-
"name": "
|
|
4880
|
+
"name": "altText",
|
|
4881
4881
|
"type": {
|
|
4882
4882
|
"text": "string | undefined"
|
|
4883
4883
|
},
|
|
4884
|
-
"description": "
|
|
4885
|
-
"fieldName": "
|
|
4884
|
+
"description": "Alt text for the brandvisual image for accessibility.\nThis will only be set if the brandvisual is an image (png).",
|
|
4885
|
+
"fieldName": "altText"
|
|
4886
4886
|
}
|
|
4887
4887
|
],
|
|
4888
4888
|
"superclass": {
|
|
4889
4889
|
"name": "Component",
|
|
4890
4890
|
"module": "/src/models"
|
|
4891
4891
|
},
|
|
4892
|
-
"tagName": "mdc-
|
|
4893
|
-
"jsDoc": "/**\n * `mdc-
|
|
4892
|
+
"tagName": "mdc-brandvisual",
|
|
4893
|
+
"jsDoc": "/**\n * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are\n * displayed correctly within applications.\n *\n * Features:\n * - Dynamically loads brandvisuals based on the `name` attribute.\n * - Emits a `load` event when the brandvisual is successfully fetched.\n * - Emits an `error` event when the brandvisual import fails.\n * - Supports accessibility best practices.\n * - Used for brand representation within the design system.\n *\n * @tagname mdc-brandvisual\n *\n * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.\n * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.\n *\n */",
|
|
4894
4894
|
"customElement": true
|
|
4895
4895
|
}
|
|
4896
4896
|
],
|
|
@@ -4899,8 +4899,8 @@
|
|
|
4899
4899
|
"kind": "js",
|
|
4900
4900
|
"name": "default",
|
|
4901
4901
|
"declaration": {
|
|
4902
|
-
"name": "
|
|
4903
|
-
"module": "components/
|
|
4902
|
+
"name": "Brandvisual",
|
|
4903
|
+
"module": "components/brandvisual/brandvisual.component.js"
|
|
4904
4904
|
}
|
|
4905
4905
|
}
|
|
4906
4906
|
]
|
|
@@ -31256,7 +31256,254 @@
|
|
|
31256
31256
|
"module": "src/components/input/input.component.ts"
|
|
31257
31257
|
}
|
|
31258
31258
|
}
|
|
31259
|
-
]
|
|
31259
|
+
]
|
|
31260
|
+
}
|
|
31261
|
+
],
|
|
31262
|
+
"exports": [
|
|
31263
|
+
{
|
|
31264
|
+
"kind": "js",
|
|
31265
|
+
"name": "default",
|
|
31266
|
+
"declaration": {
|
|
31267
|
+
"name": "Password",
|
|
31268
|
+
"module": "components/password/password.component.js"
|
|
31269
|
+
}
|
|
31270
|
+
}
|
|
31271
|
+
]
|
|
31272
|
+
},
|
|
31273
|
+
{
|
|
31274
|
+
"kind": "javascript-module",
|
|
31275
|
+
"path": "components/presence/presence.component.js",
|
|
31276
|
+
"declarations": [
|
|
31277
|
+
{
|
|
31278
|
+
"kind": "class",
|
|
31279
|
+
"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.",
|
|
31280
|
+
"name": "Presence",
|
|
31281
|
+
"cssProperties": [
|
|
31282
|
+
{
|
|
31283
|
+
"description": "The background color of the presence type active.",
|
|
31284
|
+
"name": "--mdc-presence-active-background-color"
|
|
31285
|
+
},
|
|
31286
|
+
{
|
|
31287
|
+
"description": "The background color of the presence type away.",
|
|
31288
|
+
"name": "--mdc-presence-away-background-color"
|
|
31289
|
+
},
|
|
31290
|
+
{
|
|
31291
|
+
"description": "The background color of the presence type away-calling.",
|
|
31292
|
+
"name": "--mdc-presence-away-calling-background-color"
|
|
31293
|
+
},
|
|
31294
|
+
{
|
|
31295
|
+
"description": "The background color of the presence type busy.",
|
|
31296
|
+
"name": "--mdc-presence-busy-background-color"
|
|
31297
|
+
},
|
|
31298
|
+
{
|
|
31299
|
+
"description": "The background color of the presence type dnd.",
|
|
31300
|
+
"name": "--mdc-presence-dnd-background-color"
|
|
31301
|
+
},
|
|
31302
|
+
{
|
|
31303
|
+
"description": "The background color of the presence type meeting.",
|
|
31304
|
+
"name": "--mdc-presence-meeting-background-color"
|
|
31305
|
+
},
|
|
31306
|
+
{
|
|
31307
|
+
"description": "The background color of the presence type on-call.",
|
|
31308
|
+
"name": "--mdc-presence-on-call-background-color"
|
|
31309
|
+
},
|
|
31310
|
+
{
|
|
31311
|
+
"description": "The background color of the presence type on-device.",
|
|
31312
|
+
"name": "--mdc-presence-on-device-background-color"
|
|
31313
|
+
},
|
|
31314
|
+
{
|
|
31315
|
+
"description": "The background color of the presence type on-mobile.",
|
|
31316
|
+
"name": "--mdc-presence-on-mobile-background-color"
|
|
31317
|
+
},
|
|
31318
|
+
{
|
|
31319
|
+
"description": "The background color of the presence type pause.",
|
|
31320
|
+
"name": "--mdc-presence-pause-background-color"
|
|
31321
|
+
},
|
|
31322
|
+
{
|
|
31323
|
+
"description": "The background color of the presence type pto.",
|
|
31324
|
+
"name": "--mdc-presence-pto-background-color"
|
|
31325
|
+
},
|
|
31326
|
+
{
|
|
31327
|
+
"description": "The background color of the presence type presenting.",
|
|
31328
|
+
"name": "--mdc-presence-presenting-background-color"
|
|
31329
|
+
},
|
|
31330
|
+
{
|
|
31331
|
+
"description": "The background color of the presence type quiet.",
|
|
31332
|
+
"name": "--mdc-presence-quiet-background-color"
|
|
31333
|
+
},
|
|
31334
|
+
{
|
|
31335
|
+
"description": "The background color of the presence type scheduled.",
|
|
31336
|
+
"name": "--mdc-presence-scheduled-background-color"
|
|
31337
|
+
},
|
|
31338
|
+
{
|
|
31339
|
+
"description": "The background color of the presence type overlay.",
|
|
31340
|
+
"name": "--mdc-presence-overlay-background-color"
|
|
31341
|
+
}
|
|
31342
|
+
],
|
|
31343
|
+
"cssParts": [
|
|
31344
|
+
{
|
|
31345
|
+
"description": "The presence content.",
|
|
31346
|
+
"name": "presence-content"
|
|
31347
|
+
},
|
|
31348
|
+
{
|
|
31349
|
+
"description": "The presence icon.",
|
|
31350
|
+
"name": "mdc-presence-icon"
|
|
31351
|
+
},
|
|
31352
|
+
{
|
|
31353
|
+
"description": "The presence icon for active.",
|
|
31354
|
+
"name": "mdc-presence-icon__active"
|
|
31355
|
+
},
|
|
31356
|
+
{
|
|
31357
|
+
"description": "The presence icon for away.",
|
|
31358
|
+
"name": "mdc-presence-icon__away"
|
|
31359
|
+
},
|
|
31360
|
+
{
|
|
31361
|
+
"description": "The presence icon for away-calling.",
|
|
31362
|
+
"name": "mdc-presence-icon__away-calling"
|
|
31363
|
+
},
|
|
31364
|
+
{
|
|
31365
|
+
"description": "The presence icon for busy.",
|
|
31366
|
+
"name": "mdc-presence-icon__busy"
|
|
31367
|
+
},
|
|
31368
|
+
{
|
|
31369
|
+
"description": "The presence icon for dnd.",
|
|
31370
|
+
"name": "mdc-presence-icon__dnd"
|
|
31371
|
+
},
|
|
31372
|
+
{
|
|
31373
|
+
"description": "The presence icon for meeting.",
|
|
31374
|
+
"name": "mdc-presence-icon__meeting"
|
|
31375
|
+
},
|
|
31376
|
+
{
|
|
31377
|
+
"description": "The presence icon for on-call.",
|
|
31378
|
+
"name": "mdc-presence-icon__on-call"
|
|
31379
|
+
},
|
|
31380
|
+
{
|
|
31381
|
+
"description": "The presence icon for on-device.",
|
|
31382
|
+
"name": "mdc-presence-icon__on-device"
|
|
31383
|
+
},
|
|
31384
|
+
{
|
|
31385
|
+
"description": "The presence icon for on-mobile.",
|
|
31386
|
+
"name": "mdc-presence-icon__on-mobile"
|
|
31387
|
+
},
|
|
31388
|
+
{
|
|
31389
|
+
"description": "The presence icon for pause.",
|
|
31390
|
+
"name": "mdc-presence-icon__pause"
|
|
31391
|
+
},
|
|
31392
|
+
{
|
|
31393
|
+
"description": "The presence icon for pto.",
|
|
31394
|
+
"name": "mdc-presence-icon__pto"
|
|
31395
|
+
},
|
|
31396
|
+
{
|
|
31397
|
+
"description": "The presence icon for presenting.",
|
|
31398
|
+
"name": "mdc-presence-icon__presenting"
|
|
31399
|
+
},
|
|
31400
|
+
{
|
|
31401
|
+
"description": "The presence icon for quiet.",
|
|
31402
|
+
"name": "mdc-presence-icon__quiet"
|
|
31403
|
+
},
|
|
31404
|
+
{
|
|
31405
|
+
"description": "The presence icon for scheduled.",
|
|
31406
|
+
"name": "mdc-presence-icon__scheduled"
|
|
31407
|
+
}
|
|
31408
|
+
],
|
|
31409
|
+
"members": [
|
|
31410
|
+
{
|
|
31411
|
+
"kind": "field",
|
|
31412
|
+
"name": "type",
|
|
31413
|
+
"type": {
|
|
31414
|
+
"text": "PresenceType"
|
|
31415
|
+
},
|
|
31416
|
+
"description": "Supported presence types:\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`",
|
|
31417
|
+
"default": "active",
|
|
31418
|
+
"attribute": "type",
|
|
31419
|
+
"reflects": true
|
|
31420
|
+
},
|
|
31421
|
+
{
|
|
31422
|
+
"kind": "field",
|
|
31423
|
+
"name": "size",
|
|
31424
|
+
"type": {
|
|
31425
|
+
"text": "PresenceSize"
|
|
31426
|
+
},
|
|
31427
|
+
"description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
|
|
31428
|
+
"default": "32",
|
|
31429
|
+
"attribute": "size",
|
|
31430
|
+
"reflects": true
|
|
31431
|
+
},
|
|
31432
|
+
{
|
|
31433
|
+
"kind": "method",
|
|
31434
|
+
"name": "setSize",
|
|
31435
|
+
"privacy": "private",
|
|
31436
|
+
"return": {
|
|
31437
|
+
"type": {
|
|
31438
|
+
"text": "void"
|
|
31439
|
+
}
|
|
31440
|
+
},
|
|
31441
|
+
"parameters": [
|
|
31442
|
+
{
|
|
31443
|
+
"name": "size",
|
|
31444
|
+
"type": {
|
|
31445
|
+
"text": "PresenceSize"
|
|
31446
|
+
}
|
|
31447
|
+
}
|
|
31448
|
+
]
|
|
31449
|
+
},
|
|
31450
|
+
{
|
|
31451
|
+
"kind": "field",
|
|
31452
|
+
"name": "icon",
|
|
31453
|
+
"privacy": "private",
|
|
31454
|
+
"description": "Get the icon name based on the presence type",
|
|
31455
|
+
"readonly": true
|
|
31456
|
+
},
|
|
31457
|
+
{
|
|
31458
|
+
"kind": "method",
|
|
31459
|
+
"name": "handleOnLoad",
|
|
31460
|
+
"privacy": "private",
|
|
31461
|
+
"return": {
|
|
31462
|
+
"type": {
|
|
31463
|
+
"text": "void"
|
|
31464
|
+
}
|
|
31465
|
+
},
|
|
31466
|
+
"description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
|
|
31467
|
+
},
|
|
31468
|
+
{
|
|
31469
|
+
"kind": "method",
|
|
31470
|
+
"name": "handleOnError",
|
|
31471
|
+
"privacy": "private",
|
|
31472
|
+
"return": {
|
|
31473
|
+
"type": {
|
|
31474
|
+
"text": "void"
|
|
31475
|
+
}
|
|
31476
|
+
},
|
|
31477
|
+
"description": "Handles an error that occurs when loading an icon."
|
|
31478
|
+
}
|
|
31479
|
+
],
|
|
31480
|
+
"attributes": [
|
|
31481
|
+
{
|
|
31482
|
+
"name": "type",
|
|
31483
|
+
"type": {
|
|
31484
|
+
"text": "PresenceType"
|
|
31485
|
+
},
|
|
31486
|
+
"description": "Supported presence types:\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`",
|
|
31487
|
+
"default": "active",
|
|
31488
|
+
"fieldName": "type"
|
|
31489
|
+
},
|
|
31490
|
+
{
|
|
31491
|
+
"name": "size",
|
|
31492
|
+
"type": {
|
|
31493
|
+
"text": "PresenceSize"
|
|
31494
|
+
},
|
|
31495
|
+
"description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
|
|
31496
|
+
"default": "32",
|
|
31497
|
+
"fieldName": "size"
|
|
31498
|
+
}
|
|
31499
|
+
],
|
|
31500
|
+
"superclass": {
|
|
31501
|
+
"name": "Component",
|
|
31502
|
+
"module": "/src/models"
|
|
31503
|
+
},
|
|
31504
|
+
"tagName": "mdc-presence",
|
|
31505
|
+
"jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n *\n * @csspart presence-content - The presence content.\n * @csspart mdc-presence-icon - The presence icon.\n * @csspart mdc-presence-icon__active - The presence icon for active.\n * @csspart mdc-presence-icon__away - The presence icon for away.\n * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.\n * @csspart mdc-presence-icon__busy - The presence icon for busy.\n * @csspart mdc-presence-icon__dnd - The presence icon for dnd.\n * @csspart mdc-presence-icon__meeting - The presence icon for meeting.\n * @csspart mdc-presence-icon__on-call - The presence icon for on-call.\n * @csspart mdc-presence-icon__on-device - The presence icon for on-device.\n * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.\n * @csspart mdc-presence-icon__pause - The presence icon for pause.\n * @csspart mdc-presence-icon__pto - The presence icon for pto.\n * @csspart mdc-presence-icon__presenting - The presence icon for presenting.\n * @csspart mdc-presence-icon__quiet - The presence icon for quiet.\n * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.\n */",
|
|
31506
|
+
"customElement": true
|
|
31260
31507
|
}
|
|
31261
31508
|
],
|
|
31262
31509
|
"exports": [
|
|
@@ -31264,8 +31511,8 @@
|
|
|
31264
31511
|
"kind": "js",
|
|
31265
31512
|
"name": "default",
|
|
31266
31513
|
"declaration": {
|
|
31267
|
-
"name": "
|
|
31268
|
-
"module": "components/
|
|
31514
|
+
"name": "Presence",
|
|
31515
|
+
"module": "components/presence/presence.component.js"
|
|
31269
31516
|
}
|
|
31270
31517
|
}
|
|
31271
31518
|
]
|
|
@@ -31276,7 +31523,7 @@
|
|
|
31276
31523
|
"declarations": [
|
|
31277
31524
|
{
|
|
31278
31525
|
"kind": "class",
|
|
31279
|
-
"description": "Popover
|
|
31526
|
+
"description": "Popover is genric overlay which can be trigered by any actinable element.\n\nIt can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n\nThe popover automatically positions itself based on available space and\nsupports dynamic height adjustments with scrollable content when needed.\nIt uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n\n## Limitations\n\n### On trigger for multiple popovers\n\nA component (button, etc.) can trigger more than one popover, but only one of them should change the\naria-expanded and aria-haspopup attributes on the trigger.\n\nTo prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\nPopoers except one.\n\n### React Popover with append-to attribute\n\nReact mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\nand mounts to the specified element. React will not know about the move and will not know about the\nnewly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\nadded/removed by React, for example:\n\n```tsx\nconst SomeComponent = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (<div>\n {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n </div>);\n}\n```\nAs a workaround Popover need to wrap with any other element/component, for example:\n```tsx\nconst SomeComponent = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (<div>\n {isOpen && <div>\n <Popover append-to=\"some-element-id\">...</mdc-popover>\n <div>}\n </div>);\n}\n```\nNote the wrapper <div> around the Popover component (React.Fragment does not work).",
|
|
31280
31527
|
"name": "Popover",
|
|
31281
31528
|
"cssProperties": [
|
|
31282
31529
|
{
|
|
@@ -32799,7 +33046,7 @@
|
|
|
32799
33046
|
"module": "/src/models"
|
|
32800
33047
|
},
|
|
32801
33048
|
"tagName": "mdc-popover",
|
|
32802
|
-
"jsDoc": "/**\n * Popover
|
|
33049
|
+
"jsDoc": "/**\n * Popover is genric overlay which can be trigered by any actinable element.\n *\n * It can be used for tooltips, dropdowns, menus or any showing any other contextual content.\n *\n * The popover automatically positions itself based on available space and\n * supports dynamic height adjustments with scrollable content when needed.\n * It uses [Floating UI](https://floating-ui.com/) for maintaining the position of the popover.\n *\n * ## Limitations\n *\n * ### On trigger for multiple popovers\n *\n * A component (button, etc.) can trigger more than one popover, but only one of them should change the\n * aria-expanded and aria-haspopup attributes on the trigger.\n *\n * To prevent unexpected attribute changes on the trigger `disable-aria-expanded` attribute must be set on all linked\n * Popoers except one.\n *\n * ### React Popover with append-to attribute\n *\n * React mounts the popover based on the virtual DOM, but when the append-to attribute is set, the popover removes itself\n * and mounts to the specified element. React will not know about the move and will not know about the\n * newly created mdc-popoverportal element either. This throws a `NotFoundError` error when the Popover is directly\n * added/removed by React, for example:\n *\n * ```tsx\n * const SomeComponent = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * return (<div>\n * {isOpen && <Popover append-to=\"some-element-id\">...</mdc-popover>}\n * </div>);\n * }\n * ```\n * As a workaround Popover need to wrap with any other element/component, for example:\n * ```tsx\n * const SomeComponent = () => {\n * const [isOpen, setIsOpen] = useState(false);\n * return (<div>\n * {isOpen && <div>\n * <Popover append-to=\"some-element-id\">...</mdc-popover>\n * <div>}\n * </div>);\n * }\n * ```\n * Note the wrapper <div> around the Popover component (React.Fragment does not work).\n *\n * @dependency mdc-button\n *\n * @tagname mdc-popover\n *\n * @event shown - (React: onShown) This event is dispatched when the popover is shown\n * @event hidden - (React: onHidden) This event is dispatched when the popover is hidden\n * @event created - (React: onCreated) This event is dispatched when the popover is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the popover is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-popover-arrow-border-radius - radius of the arrow border\n * @cssproperty --mdc-popover-arrow-border - border of the arrow\n * @cssproperty --mdc-popover-primary-background-color - primary background color of the popover\n * @cssproperty --mdc-popover-border-color - border color of the popover\n * @cssproperty --mdc-popover-inverted-background-color - inverted background color of the popover\n * @cssproperty --mdc-popover-inverted-border-color - inverted border color of the popover\n * @cssproperty --mdc-popover-inverted-text-color - inverted text color of the popover\n * @cssproperty --mdc-popover-elevation-3 - elevation of the popover\n * @cssproperty --mdc-popover-max-width - max width of the popover\n * @cssproperty --mdc-popover-max-height - max height of the popover\n * @cssproperty --mdc-popover-width - width of the popover\n *\n * @slot - Default slot for the popover content\n *\n * @csspart popover-close - The close button of the popover.\n * @csspart popover-content - The content of the popover.\n * @csspart popover-hover-bridge - The hover bridge of the popover.\n */",
|
|
32803
33050
|
"customElement": true
|
|
32804
33051
|
}
|
|
32805
33052
|
],
|
|
@@ -32816,247 +33063,20 @@
|
|
|
32816
33063
|
},
|
|
32817
33064
|
{
|
|
32818
33065
|
"kind": "javascript-module",
|
|
32819
|
-
"path": "components/
|
|
33066
|
+
"path": "components/popover/popover.portal.component.js",
|
|
32820
33067
|
"declarations": [
|
|
32821
33068
|
{
|
|
32822
|
-
"kind": "
|
|
32823
|
-
"
|
|
32824
|
-
"name": "Presence",
|
|
32825
|
-
"cssProperties": [
|
|
32826
|
-
{
|
|
32827
|
-
"description": "The background color of the presence type active.",
|
|
32828
|
-
"name": "--mdc-presence-active-background-color"
|
|
32829
|
-
},
|
|
32830
|
-
{
|
|
32831
|
-
"description": "The background color of the presence type away.",
|
|
32832
|
-
"name": "--mdc-presence-away-background-color"
|
|
32833
|
-
},
|
|
32834
|
-
{
|
|
32835
|
-
"description": "The background color of the presence type away-calling.",
|
|
32836
|
-
"name": "--mdc-presence-away-calling-background-color"
|
|
32837
|
-
},
|
|
32838
|
-
{
|
|
32839
|
-
"description": "The background color of the presence type busy.",
|
|
32840
|
-
"name": "--mdc-presence-busy-background-color"
|
|
32841
|
-
},
|
|
32842
|
-
{
|
|
32843
|
-
"description": "The background color of the presence type dnd.",
|
|
32844
|
-
"name": "--mdc-presence-dnd-background-color"
|
|
32845
|
-
},
|
|
32846
|
-
{
|
|
32847
|
-
"description": "The background color of the presence type meeting.",
|
|
32848
|
-
"name": "--mdc-presence-meeting-background-color"
|
|
32849
|
-
},
|
|
32850
|
-
{
|
|
32851
|
-
"description": "The background color of the presence type on-call.",
|
|
32852
|
-
"name": "--mdc-presence-on-call-background-color"
|
|
32853
|
-
},
|
|
32854
|
-
{
|
|
32855
|
-
"description": "The background color of the presence type on-device.",
|
|
32856
|
-
"name": "--mdc-presence-on-device-background-color"
|
|
32857
|
-
},
|
|
32858
|
-
{
|
|
32859
|
-
"description": "The background color of the presence type on-mobile.",
|
|
32860
|
-
"name": "--mdc-presence-on-mobile-background-color"
|
|
32861
|
-
},
|
|
32862
|
-
{
|
|
32863
|
-
"description": "The background color of the presence type pause.",
|
|
32864
|
-
"name": "--mdc-presence-pause-background-color"
|
|
32865
|
-
},
|
|
32866
|
-
{
|
|
32867
|
-
"description": "The background color of the presence type pto.",
|
|
32868
|
-
"name": "--mdc-presence-pto-background-color"
|
|
32869
|
-
},
|
|
32870
|
-
{
|
|
32871
|
-
"description": "The background color of the presence type presenting.",
|
|
32872
|
-
"name": "--mdc-presence-presenting-background-color"
|
|
32873
|
-
},
|
|
32874
|
-
{
|
|
32875
|
-
"description": "The background color of the presence type quiet.",
|
|
32876
|
-
"name": "--mdc-presence-quiet-background-color"
|
|
32877
|
-
},
|
|
32878
|
-
{
|
|
32879
|
-
"description": "The background color of the presence type scheduled.",
|
|
32880
|
-
"name": "--mdc-presence-scheduled-background-color"
|
|
32881
|
-
},
|
|
32882
|
-
{
|
|
32883
|
-
"description": "The background color of the presence type overlay.",
|
|
32884
|
-
"name": "--mdc-presence-overlay-background-color"
|
|
32885
|
-
}
|
|
32886
|
-
],
|
|
32887
|
-
"cssParts": [
|
|
32888
|
-
{
|
|
32889
|
-
"description": "The presence content.",
|
|
32890
|
-
"name": "presence-content"
|
|
32891
|
-
},
|
|
32892
|
-
{
|
|
32893
|
-
"description": "The presence icon.",
|
|
32894
|
-
"name": "mdc-presence-icon"
|
|
32895
|
-
},
|
|
32896
|
-
{
|
|
32897
|
-
"description": "The presence icon for active.",
|
|
32898
|
-
"name": "mdc-presence-icon__active"
|
|
32899
|
-
},
|
|
32900
|
-
{
|
|
32901
|
-
"description": "The presence icon for away.",
|
|
32902
|
-
"name": "mdc-presence-icon__away"
|
|
32903
|
-
},
|
|
32904
|
-
{
|
|
32905
|
-
"description": "The presence icon for away-calling.",
|
|
32906
|
-
"name": "mdc-presence-icon__away-calling"
|
|
32907
|
-
},
|
|
32908
|
-
{
|
|
32909
|
-
"description": "The presence icon for busy.",
|
|
32910
|
-
"name": "mdc-presence-icon__busy"
|
|
32911
|
-
},
|
|
32912
|
-
{
|
|
32913
|
-
"description": "The presence icon for dnd.",
|
|
32914
|
-
"name": "mdc-presence-icon__dnd"
|
|
32915
|
-
},
|
|
32916
|
-
{
|
|
32917
|
-
"description": "The presence icon for meeting.",
|
|
32918
|
-
"name": "mdc-presence-icon__meeting"
|
|
32919
|
-
},
|
|
32920
|
-
{
|
|
32921
|
-
"description": "The presence icon for on-call.",
|
|
32922
|
-
"name": "mdc-presence-icon__on-call"
|
|
32923
|
-
},
|
|
32924
|
-
{
|
|
32925
|
-
"description": "The presence icon for on-device.",
|
|
32926
|
-
"name": "mdc-presence-icon__on-device"
|
|
32927
|
-
},
|
|
32928
|
-
{
|
|
32929
|
-
"description": "The presence icon for on-mobile.",
|
|
32930
|
-
"name": "mdc-presence-icon__on-mobile"
|
|
32931
|
-
},
|
|
32932
|
-
{
|
|
32933
|
-
"description": "The presence icon for pause.",
|
|
32934
|
-
"name": "mdc-presence-icon__pause"
|
|
32935
|
-
},
|
|
32936
|
-
{
|
|
32937
|
-
"description": "The presence icon for pto.",
|
|
32938
|
-
"name": "mdc-presence-icon__pto"
|
|
32939
|
-
},
|
|
32940
|
-
{
|
|
32941
|
-
"description": "The presence icon for presenting.",
|
|
32942
|
-
"name": "mdc-presence-icon__presenting"
|
|
32943
|
-
},
|
|
32944
|
-
{
|
|
32945
|
-
"description": "The presence icon for quiet.",
|
|
32946
|
-
"name": "mdc-presence-icon__quiet"
|
|
32947
|
-
},
|
|
32948
|
-
{
|
|
32949
|
-
"description": "The presence icon for scheduled.",
|
|
32950
|
-
"name": "mdc-presence-icon__scheduled"
|
|
32951
|
-
}
|
|
32952
|
-
],
|
|
32953
|
-
"members": [
|
|
32954
|
-
{
|
|
32955
|
-
"kind": "field",
|
|
32956
|
-
"name": "type",
|
|
32957
|
-
"type": {
|
|
32958
|
-
"text": "PresenceType"
|
|
32959
|
-
},
|
|
32960
|
-
"description": "Supported presence types:\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`",
|
|
32961
|
-
"default": "active",
|
|
32962
|
-
"attribute": "type",
|
|
32963
|
-
"reflects": true
|
|
32964
|
-
},
|
|
32965
|
-
{
|
|
32966
|
-
"kind": "field",
|
|
32967
|
-
"name": "size",
|
|
32968
|
-
"type": {
|
|
32969
|
-
"text": "PresenceSize"
|
|
32970
|
-
},
|
|
32971
|
-
"description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
|
|
32972
|
-
"default": "32",
|
|
32973
|
-
"attribute": "size",
|
|
32974
|
-
"reflects": true
|
|
32975
|
-
},
|
|
32976
|
-
{
|
|
32977
|
-
"kind": "method",
|
|
32978
|
-
"name": "setSize",
|
|
32979
|
-
"privacy": "private",
|
|
32980
|
-
"return": {
|
|
32981
|
-
"type": {
|
|
32982
|
-
"text": "void"
|
|
32983
|
-
}
|
|
32984
|
-
},
|
|
32985
|
-
"parameters": [
|
|
32986
|
-
{
|
|
32987
|
-
"name": "size",
|
|
32988
|
-
"type": {
|
|
32989
|
-
"text": "PresenceSize"
|
|
32990
|
-
}
|
|
32991
|
-
}
|
|
32992
|
-
]
|
|
32993
|
-
},
|
|
32994
|
-
{
|
|
32995
|
-
"kind": "field",
|
|
32996
|
-
"name": "icon",
|
|
32997
|
-
"privacy": "private",
|
|
32998
|
-
"description": "Get the icon name based on the presence type",
|
|
32999
|
-
"readonly": true
|
|
33000
|
-
},
|
|
33001
|
-
{
|
|
33002
|
-
"kind": "method",
|
|
33003
|
-
"name": "handleOnLoad",
|
|
33004
|
-
"privacy": "private",
|
|
33005
|
-
"return": {
|
|
33006
|
-
"type": {
|
|
33007
|
-
"text": "void"
|
|
33008
|
-
}
|
|
33009
|
-
},
|
|
33010
|
-
"description": "Handles the successful load of an icon.\nSets the `currentIconType` property to match the `type` property."
|
|
33011
|
-
},
|
|
33012
|
-
{
|
|
33013
|
-
"kind": "method",
|
|
33014
|
-
"name": "handleOnError",
|
|
33015
|
-
"privacy": "private",
|
|
33016
|
-
"return": {
|
|
33017
|
-
"type": {
|
|
33018
|
-
"text": "void"
|
|
33019
|
-
}
|
|
33020
|
-
},
|
|
33021
|
-
"description": "Handles an error that occurs when loading an icon."
|
|
33022
|
-
}
|
|
33023
|
-
],
|
|
33024
|
-
"attributes": [
|
|
33025
|
-
{
|
|
33026
|
-
"name": "type",
|
|
33027
|
-
"type": {
|
|
33028
|
-
"text": "PresenceType"
|
|
33029
|
-
},
|
|
33030
|
-
"description": "Supported presence types:\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`",
|
|
33031
|
-
"default": "active",
|
|
33032
|
-
"fieldName": "type"
|
|
33033
|
-
},
|
|
33034
|
-
{
|
|
33035
|
-
"name": "size",
|
|
33036
|
-
"type": {
|
|
33037
|
-
"text": "PresenceSize"
|
|
33038
|
-
},
|
|
33039
|
-
"description": "Acceptable numeric values include:\n- 24\n- 32\n- 48\n- 64\n- 72\n- 88\n- 124\n\nPresence icons are minimum 14px in size, meaning 24, 32, and 48 presence\nicons will be no smaller than 14px (for sizes 24, 32, 48).",
|
|
33040
|
-
"default": "32",
|
|
33041
|
-
"fieldName": "size"
|
|
33042
|
-
}
|
|
33043
|
-
],
|
|
33044
|
-
"superclass": {
|
|
33045
|
-
"name": "Component",
|
|
33046
|
-
"module": "/src/models"
|
|
33047
|
-
},
|
|
33048
|
-
"tagName": "mdc-presence",
|
|
33049
|
-
"jsDoc": "/**\n * The `mdc-presence` component is a versatile UI element used to\n * display the presence status of a user or entity within an avatar component.\n *\n * This component is ideal for use within avatar UIs where the presence status\n * needs to be visually represented.\n *\n * @dependency mdc-icon\n *\n * @tagname mdc-presence\n *\n * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.\n * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.\n * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.\n * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.\n * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.\n * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.\n * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.\n * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.\n * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.\n * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.\n * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.\n * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.\n * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.\n * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.\n * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.\n *\n * @csspart presence-content - The presence content.\n * @csspart mdc-presence-icon - The presence icon.\n * @csspart mdc-presence-icon__active - The presence icon for active.\n * @csspart mdc-presence-icon__away - The presence icon for away.\n * @csspart mdc-presence-icon__away-calling - The presence icon for away-calling.\n * @csspart mdc-presence-icon__busy - The presence icon for busy.\n * @csspart mdc-presence-icon__dnd - The presence icon for dnd.\n * @csspart mdc-presence-icon__meeting - The presence icon for meeting.\n * @csspart mdc-presence-icon__on-call - The presence icon for on-call.\n * @csspart mdc-presence-icon__on-device - The presence icon for on-device.\n * @csspart mdc-presence-icon__on-mobile - The presence icon for on-mobile.\n * @csspart mdc-presence-icon__pause - The presence icon for pause.\n * @csspart mdc-presence-icon__pto - The presence icon for pto.\n * @csspart mdc-presence-icon__presenting - The presence icon for presenting.\n * @csspart mdc-presence-icon__quiet - The presence icon for quiet.\n * @csspart mdc-presence-icon__scheduled - The presence icon for scheduled.\n */",
|
|
33050
|
-
"customElement": true
|
|
33069
|
+
"kind": "variable",
|
|
33070
|
+
"name": "TAG_NAME"
|
|
33051
33071
|
}
|
|
33052
33072
|
],
|
|
33053
33073
|
"exports": [
|
|
33054
33074
|
{
|
|
33055
33075
|
"kind": "js",
|
|
33056
|
-
"name": "
|
|
33076
|
+
"name": "TAG_NAME",
|
|
33057
33077
|
"declaration": {
|
|
33058
|
-
"name": "
|
|
33059
|
-
"module": "components/
|
|
33078
|
+
"name": "TAG_NAME",
|
|
33079
|
+
"module": "components/popover/popover.portal.component.js"
|
|
33060
33080
|
}
|
|
33061
33081
|
}
|
|
33062
33082
|
]
|