@momentum-design/components 0.106.5 → 0.106.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +475 -475
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -13777,134 +13777,90 @@
|
|
|
13777
13777
|
},
|
|
13778
13778
|
{
|
|
13779
13779
|
"kind": "javascript-module",
|
|
13780
|
-
"path": "components/
|
|
13780
|
+
"path": "components/formfieldwrapper/formfieldwrapper.component.js",
|
|
13781
13781
|
"declarations": [
|
|
13782
13782
|
{
|
|
13783
13783
|
"kind": "class",
|
|
13784
|
-
"description": "
|
|
13785
|
-
"name": "
|
|
13786
|
-
"cssProperties": [
|
|
13787
|
-
{
|
|
13788
|
-
"description": "Allows customization of the default fill color.",
|
|
13789
|
-
"name": "--mdc-icon-fill-color"
|
|
13790
|
-
},
|
|
13791
|
-
{
|
|
13792
|
-
"description": "Allows customization of the icon size.",
|
|
13793
|
-
"name": "--mdc-icon-size"
|
|
13794
|
-
},
|
|
13795
|
-
{
|
|
13796
|
-
"description": "Allows customization of the icon border radius.",
|
|
13797
|
-
"name": "--mdc-icon-border-radius"
|
|
13798
|
-
}
|
|
13799
|
-
],
|
|
13800
|
-
"cssParts": [
|
|
13801
|
-
{
|
|
13802
|
-
"description": "The svg inside the icon element.",
|
|
13803
|
-
"name": "icon"
|
|
13804
|
-
}
|
|
13805
|
-
],
|
|
13784
|
+
"description": "formfieldwrapper is a component that contains the label and helper/validation text\n that can be configured in various ways to suit different use cases (most of the input related components).\nIt is used as an internal component and is not intended to be used directly by consumers.",
|
|
13785
|
+
"name": "FormfieldWrapper",
|
|
13806
13786
|
"members": [
|
|
13807
13787
|
{
|
|
13808
13788
|
"kind": "field",
|
|
13809
|
-
"name": "
|
|
13810
|
-
"type": {
|
|
13811
|
-
"text": "HTMLElement | undefined"
|
|
13812
|
-
},
|
|
13813
|
-
"privacy": "private"
|
|
13814
|
-
},
|
|
13815
|
-
{
|
|
13816
|
-
"kind": "field",
|
|
13817
|
-
"name": "lengthUnitFromContext",
|
|
13789
|
+
"name": "label",
|
|
13818
13790
|
"type": {
|
|
13819
13791
|
"text": "string | undefined"
|
|
13820
13792
|
},
|
|
13821
|
-
"
|
|
13822
|
-
|
|
13823
|
-
|
|
13824
|
-
"kind": "field",
|
|
13825
|
-
"name": "sizeFromContext",
|
|
13826
|
-
"type": {
|
|
13827
|
-
"text": "number | undefined"
|
|
13828
|
-
},
|
|
13829
|
-
"privacy": "private"
|
|
13793
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
13794
|
+
"attribute": "label",
|
|
13795
|
+
"reflects": true
|
|
13830
13796
|
},
|
|
13831
13797
|
{
|
|
13832
13798
|
"kind": "field",
|
|
13833
|
-
"name": "
|
|
13799
|
+
"name": "required",
|
|
13834
13800
|
"type": {
|
|
13835
|
-
"text": "
|
|
13801
|
+
"text": "boolean"
|
|
13836
13802
|
},
|
|
13837
|
-
"
|
|
13838
|
-
"
|
|
13803
|
+
"default": "false",
|
|
13804
|
+
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
13805
|
+
"attribute": "required",
|
|
13839
13806
|
"reflects": true
|
|
13840
13807
|
},
|
|
13841
13808
|
{
|
|
13842
13809
|
"kind": "field",
|
|
13843
|
-
"name": "
|
|
13810
|
+
"name": "helpTextType",
|
|
13844
13811
|
"type": {
|
|
13845
|
-
"text": "
|
|
13812
|
+
"text": "ValidationType"
|
|
13846
13813
|
},
|
|
13847
|
-
"description": "
|
|
13848
|
-
"attribute": "
|
|
13814
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
13815
|
+
"attribute": "help-text-type",
|
|
13816
|
+
"reflects": true
|
|
13849
13817
|
},
|
|
13850
13818
|
{
|
|
13851
13819
|
"kind": "field",
|
|
13852
|
-
"name": "
|
|
13820
|
+
"name": "helpText",
|
|
13853
13821
|
"type": {
|
|
13854
13822
|
"text": "string | undefined"
|
|
13855
13823
|
},
|
|
13856
|
-
"description": "
|
|
13857
|
-
"attribute": "
|
|
13824
|
+
"description": "The help text that is displayed below the input field.",
|
|
13825
|
+
"attribute": "help-text",
|
|
13826
|
+
"reflects": true
|
|
13858
13827
|
},
|
|
13859
13828
|
{
|
|
13860
13829
|
"kind": "field",
|
|
13861
|
-
"name": "
|
|
13830
|
+
"name": "toggletipText",
|
|
13862
13831
|
"type": {
|
|
13863
|
-
"text": "string |
|
|
13832
|
+
"text": "string | undefined"
|
|
13864
13833
|
},
|
|
13865
|
-
"
|
|
13866
|
-
"
|
|
13867
|
-
"
|
|
13834
|
+
"description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
|
|
13835
|
+
"attribute": "toggletip-text",
|
|
13836
|
+
"reflects": true
|
|
13868
13837
|
},
|
|
13869
13838
|
{
|
|
13870
13839
|
"kind": "field",
|
|
13871
|
-
"name": "
|
|
13840
|
+
"name": "toggletipPlacement",
|
|
13872
13841
|
"type": {
|
|
13873
|
-
"text": "
|
|
13842
|
+
"text": "PopoverPlacement"
|
|
13874
13843
|
},
|
|
13875
|
-
"
|
|
13876
|
-
"
|
|
13877
|
-
"attribute": "
|
|
13878
|
-
|
|
13879
|
-
{
|
|
13880
|
-
"kind": "field",
|
|
13881
|
-
"name": "iconProviderContext",
|
|
13882
|
-
"privacy": "private",
|
|
13883
|
-
"readonly": true
|
|
13844
|
+
"description": "The placement of the toggletip that is displayed when the info icon is hovered.",
|
|
13845
|
+
"default": "'top'",
|
|
13846
|
+
"attribute": "toggletip-placement",
|
|
13847
|
+
"reflects": true
|
|
13884
13848
|
},
|
|
13885
13849
|
{
|
|
13886
13850
|
"kind": "field",
|
|
13887
|
-
"name": "
|
|
13851
|
+
"name": "infoIconAriaLabel",
|
|
13888
13852
|
"type": {
|
|
13889
|
-
"text": "
|
|
13853
|
+
"text": "string | undefined"
|
|
13890
13854
|
},
|
|
13891
|
-
"
|
|
13892
|
-
"
|
|
13855
|
+
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
13856
|
+
"attribute": "info-icon-aria-label",
|
|
13857
|
+
"reflects": true
|
|
13893
13858
|
},
|
|
13894
13859
|
{
|
|
13895
13860
|
"kind": "method",
|
|
13896
|
-
"name": "
|
|
13897
|
-
"privacy": "
|
|
13898
|
-
"
|
|
13899
|
-
{
|
|
13900
|
-
"name": "iconData",
|
|
13901
|
-
"type": {
|
|
13902
|
-
"text": "string"
|
|
13903
|
-
},
|
|
13904
|
-
"description": "The icon string to be parsed"
|
|
13905
|
-
}
|
|
13906
|
-
],
|
|
13907
|
-
"description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
|
|
13861
|
+
"name": "renderLabelElement",
|
|
13862
|
+
"privacy": "protected",
|
|
13863
|
+
"description": "creates the label element when the label property is set.\nid is used to link the label with the input field.",
|
|
13908
13864
|
"return": {
|
|
13909
13865
|
"type": {
|
|
13910
13866
|
"text": ""
|
|
@@ -13913,102 +13869,149 @@
|
|
|
13913
13869
|
},
|
|
13914
13870
|
{
|
|
13915
13871
|
"kind": "method",
|
|
13916
|
-
"name": "
|
|
13917
|
-
"privacy": "
|
|
13918
|
-
"description": "
|
|
13872
|
+
"name": "renderHelpTextIcon",
|
|
13873
|
+
"privacy": "protected",
|
|
13874
|
+
"description": "creates the helpertext icon based on the helpTextType for validation.\nIf the helpTextType is not set, it defaults to 'default' and it doesn't display any icon.",
|
|
13875
|
+
"return": {
|
|
13876
|
+
"type": {
|
|
13877
|
+
"text": ""
|
|
13878
|
+
}
|
|
13879
|
+
}
|
|
13919
13880
|
},
|
|
13920
13881
|
{
|
|
13921
13882
|
"kind": "method",
|
|
13922
|
-
"name": "
|
|
13923
|
-
"privacy": "
|
|
13924
|
-
"
|
|
13925
|
-
|
|
13926
|
-
|
|
13927
|
-
"
|
|
13928
|
-
"text": "HTMLElement"
|
|
13929
|
-
},
|
|
13930
|
-
"description": "The icon html element which has been fetched from the icon provider."
|
|
13883
|
+
"name": "renderHelpText",
|
|
13884
|
+
"privacy": "protected",
|
|
13885
|
+
"description": "creates the helper text component when the helpertext value is set.\nIt is also used to display the validation message based on the helpTextType.",
|
|
13886
|
+
"return": {
|
|
13887
|
+
"type": {
|
|
13888
|
+
"text": ""
|
|
13931
13889
|
}
|
|
13932
|
-
|
|
13933
|
-
"description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
|
|
13890
|
+
}
|
|
13934
13891
|
},
|
|
13935
13892
|
{
|
|
13936
13893
|
"kind": "method",
|
|
13937
|
-
"name": "
|
|
13938
|
-
"privacy": "
|
|
13939
|
-
"
|
|
13940
|
-
|
|
13941
|
-
|
|
13942
|
-
"
|
|
13943
|
-
"text": "unknown"
|
|
13944
|
-
}
|
|
13894
|
+
"name": "renderLabel",
|
|
13895
|
+
"privacy": "protected",
|
|
13896
|
+
"description": "renders the mdc-label-text container that contains the label and labelInfoToggleTip.",
|
|
13897
|
+
"return": {
|
|
13898
|
+
"type": {
|
|
13899
|
+
"text": ""
|
|
13945
13900
|
}
|
|
13946
|
-
|
|
13947
|
-
"description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
13901
|
+
}
|
|
13948
13902
|
},
|
|
13949
13903
|
{
|
|
13950
13904
|
"kind": "method",
|
|
13951
|
-
"name": "
|
|
13952
|
-
"privacy": "
|
|
13953
|
-
"description": "
|
|
13905
|
+
"name": "renderHelperText",
|
|
13906
|
+
"privacy": "protected",
|
|
13907
|
+
"description": "renders the mdc-help-text container that contains the helpertext icon and helpertext.",
|
|
13908
|
+
"return": {
|
|
13909
|
+
"type": {
|
|
13910
|
+
"text": ""
|
|
13911
|
+
}
|
|
13912
|
+
}
|
|
13954
13913
|
},
|
|
13955
13914
|
{
|
|
13956
13915
|
"kind": "field",
|
|
13957
|
-
"name": "
|
|
13958
|
-
"
|
|
13959
|
-
|
|
13916
|
+
"name": "disabled",
|
|
13917
|
+
"type": {
|
|
13918
|
+
"text": "boolean | undefined"
|
|
13919
|
+
},
|
|
13920
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
13921
|
+
"default": "undefined",
|
|
13922
|
+
"attribute": "disabled",
|
|
13923
|
+
"reflects": true,
|
|
13924
|
+
"inheritedFrom": {
|
|
13925
|
+
"name": "DisabledMixin",
|
|
13926
|
+
"module": "utils/mixins/DisabledMixin.js"
|
|
13927
|
+
}
|
|
13960
13928
|
}
|
|
13961
13929
|
],
|
|
13962
13930
|
"attributes": [
|
|
13963
13931
|
{
|
|
13964
|
-
"name": "
|
|
13932
|
+
"name": "label",
|
|
13965
13933
|
"type": {
|
|
13966
|
-
"text": "
|
|
13934
|
+
"text": "string | undefined"
|
|
13967
13935
|
},
|
|
13968
|
-
"description": "
|
|
13969
|
-
"fieldName": "
|
|
13936
|
+
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
13937
|
+
"fieldName": "label"
|
|
13970
13938
|
},
|
|
13971
13939
|
{
|
|
13972
|
-
"name": "
|
|
13940
|
+
"name": "required",
|
|
13973
13941
|
"type": {
|
|
13974
|
-
"text": "
|
|
13942
|
+
"text": "boolean"
|
|
13975
13943
|
},
|
|
13976
|
-
"
|
|
13977
|
-
"
|
|
13944
|
+
"default": "false",
|
|
13945
|
+
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
13946
|
+
"fieldName": "required"
|
|
13978
13947
|
},
|
|
13979
13948
|
{
|
|
13980
|
-
"name": "
|
|
13949
|
+
"name": "help-text-type",
|
|
13950
|
+
"type": {
|
|
13951
|
+
"text": "ValidationType"
|
|
13952
|
+
},
|
|
13953
|
+
"description": "The type of help text. It can be 'default', 'error', 'warning', 'success', 'priority'.",
|
|
13954
|
+
"fieldName": "helpTextType"
|
|
13955
|
+
},
|
|
13956
|
+
{
|
|
13957
|
+
"name": "help-text",
|
|
13981
13958
|
"type": {
|
|
13982
13959
|
"text": "string | undefined"
|
|
13983
13960
|
},
|
|
13984
|
-
"description": "
|
|
13985
|
-
"fieldName": "
|
|
13961
|
+
"description": "The help text that is displayed below the input field.",
|
|
13962
|
+
"fieldName": "helpText"
|
|
13986
13963
|
},
|
|
13987
13964
|
{
|
|
13988
|
-
"name": "
|
|
13965
|
+
"name": "toggletip-text",
|
|
13989
13966
|
"type": {
|
|
13990
|
-
"text": "string |
|
|
13967
|
+
"text": "string | undefined"
|
|
13991
13968
|
},
|
|
13992
|
-
"
|
|
13993
|
-
"
|
|
13994
|
-
"fieldName": "ariaLabel"
|
|
13969
|
+
"description": "The toggletip text that is displayed when the label is hovered.\nIt is used to provide additional information about the label.",
|
|
13970
|
+
"fieldName": "toggletipText"
|
|
13995
13971
|
},
|
|
13996
13972
|
{
|
|
13997
|
-
"name": "
|
|
13973
|
+
"name": "toggletip-placement",
|
|
13998
13974
|
"type": {
|
|
13999
|
-
"text": "
|
|
13975
|
+
"text": "PopoverPlacement"
|
|
14000
13976
|
},
|
|
14001
|
-
"
|
|
14002
|
-
"
|
|
14003
|
-
"fieldName": "
|
|
13977
|
+
"description": "The placement of the toggletip that is displayed when the info icon is hovered.",
|
|
13978
|
+
"default": "'top'",
|
|
13979
|
+
"fieldName": "toggletipPlacement"
|
|
13980
|
+
},
|
|
13981
|
+
{
|
|
13982
|
+
"name": "info-icon-aria-label",
|
|
13983
|
+
"type": {
|
|
13984
|
+
"text": "string | undefined"
|
|
13985
|
+
},
|
|
13986
|
+
"description": "Aria label for the info icon that is displayed next to the label when `toggletipText` is set.\nThis is used for accessibility purposes to provide a description of the icon.",
|
|
13987
|
+
"fieldName": "infoIconAriaLabel"
|
|
13988
|
+
},
|
|
13989
|
+
{
|
|
13990
|
+
"name": "disabled",
|
|
13991
|
+
"type": {
|
|
13992
|
+
"text": "boolean | undefined"
|
|
13993
|
+
},
|
|
13994
|
+
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
13995
|
+
"default": "undefined",
|
|
13996
|
+
"fieldName": "disabled",
|
|
13997
|
+
"inheritedFrom": {
|
|
13998
|
+
"name": "DisabledMixin",
|
|
13999
|
+
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
14000
|
+
}
|
|
14001
|
+
}
|
|
14002
|
+
],
|
|
14003
|
+
"mixins": [
|
|
14004
|
+
{
|
|
14005
|
+
"name": "DisabledMixin",
|
|
14006
|
+
"module": "/src/utils/mixins/DisabledMixin"
|
|
14004
14007
|
}
|
|
14005
14008
|
],
|
|
14006
14009
|
"superclass": {
|
|
14007
14010
|
"name": "Component",
|
|
14008
14011
|
"module": "/src/models"
|
|
14009
14012
|
},
|
|
14010
|
-
"tagName": "mdc-
|
|
14011
|
-
"jsDoc": "/**\n *
|
|
14013
|
+
"tagName": "mdc-formfieldwrapper",
|
|
14014
|
+
"jsDoc": "/**\n * formfieldwrapper is a component that contains the label and helper/validation text\n * that can be configured in various ways to suit different use cases (most of the input related components).\n * It is used as an internal component and is not intended to be used directly by consumers.\n *\n * @tagname mdc-formfieldwrapper\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n * @dependency mdc-button\n * @dependency mdc-toggletip\n *\n *\n */",
|
|
14012
14015
|
"customElement": true
|
|
14013
14016
|
}
|
|
14014
14017
|
],
|
|
@@ -14017,109 +14020,142 @@
|
|
|
14017
14020
|
"kind": "js",
|
|
14018
14021
|
"name": "default",
|
|
14019
14022
|
"declaration": {
|
|
14020
|
-
"name": "
|
|
14021
|
-
"module": "components/
|
|
14023
|
+
"name": "FormfieldWrapper",
|
|
14024
|
+
"module": "components/formfieldwrapper/formfieldwrapper.component.js"
|
|
14022
14025
|
}
|
|
14023
14026
|
}
|
|
14024
14027
|
]
|
|
14025
14028
|
},
|
|
14026
14029
|
{
|
|
14027
14030
|
"kind": "javascript-module",
|
|
14028
|
-
"path": "components/
|
|
14031
|
+
"path": "components/icon/icon.component.js",
|
|
14029
14032
|
"declarations": [
|
|
14030
14033
|
{
|
|
14031
14034
|
"kind": "class",
|
|
14032
|
-
"description": "
|
|
14033
|
-
"name": "
|
|
14035
|
+
"description": "Icon component that dynamically displays SVG icons based on a valid name.\n\nThis component must be mounted within an `IconProvider` component.\n\nThe `IconProvider` defines the source URL from which icons are consumed.\nThe `Icon` component accepts a `name` attribute, which corresponds to\nthe file name of the icon to be loaded from the specified URL.\n\nOnce fetched, the icon will be rendered. If the fetching process is unsuccessful,\nno icon will be displayed.\n\nThe `size` attribute allows for dynamic sizing of the icon based on the provided\n`length-unit` attribute. This unit can either come from the `IconProvider`\nor can be overridden for each individual icon. For example:\nif `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n`width: 1em; height: 1em`.\n\nRegarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n\n### Decorative Icons\n- Decorative icons do not convey any essential information to the content of a page.\n- They should be hidden from screen readers (SR) to prevent confusion for users.\n- For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n\n### Informative Icons\n- Informative icons convey important information that is not adequately represented\n by surrounding text or components.\n- They provide valuable context and must be announced by assistive technologies.\n- For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n- If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n the role will be unset.\n\n### Informative Standalone Icons\n- If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\nhave a Tooltip that describes what it means.\n- For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\nand the `role` will be set to \"img\" automatically.\n- **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**",
|
|
14036
|
+
"name": "Icon",
|
|
14037
|
+
"cssProperties": [
|
|
14038
|
+
{
|
|
14039
|
+
"description": "Allows customization of the default fill color.",
|
|
14040
|
+
"name": "--mdc-icon-fill-color"
|
|
14041
|
+
},
|
|
14042
|
+
{
|
|
14043
|
+
"description": "Allows customization of the icon size.",
|
|
14044
|
+
"name": "--mdc-icon-size"
|
|
14045
|
+
},
|
|
14046
|
+
{
|
|
14047
|
+
"description": "Allows customization of the icon border radius.",
|
|
14048
|
+
"name": "--mdc-icon-border-radius"
|
|
14049
|
+
}
|
|
14050
|
+
],
|
|
14051
|
+
"cssParts": [
|
|
14052
|
+
{
|
|
14053
|
+
"description": "The svg inside the icon element.",
|
|
14054
|
+
"name": "icon"
|
|
14055
|
+
}
|
|
14056
|
+
],
|
|
14034
14057
|
"members": [
|
|
14035
14058
|
{
|
|
14036
14059
|
"kind": "field",
|
|
14037
|
-
"name": "
|
|
14060
|
+
"name": "iconData",
|
|
14061
|
+
"type": {
|
|
14062
|
+
"text": "HTMLElement | undefined"
|
|
14063
|
+
},
|
|
14064
|
+
"privacy": "private"
|
|
14065
|
+
},
|
|
14066
|
+
{
|
|
14067
|
+
"kind": "field",
|
|
14068
|
+
"name": "lengthUnitFromContext",
|
|
14038
14069
|
"type": {
|
|
14039
14070
|
"text": "string | undefined"
|
|
14040
14071
|
},
|
|
14041
|
-
"
|
|
14042
|
-
"attribute": "label",
|
|
14043
|
-
"reflects": true
|
|
14072
|
+
"privacy": "private"
|
|
14044
14073
|
},
|
|
14045
14074
|
{
|
|
14046
14075
|
"kind": "field",
|
|
14047
|
-
"name": "
|
|
14076
|
+
"name": "sizeFromContext",
|
|
14048
14077
|
"type": {
|
|
14049
|
-
"text": "
|
|
14078
|
+
"text": "number | undefined"
|
|
14050
14079
|
},
|
|
14051
|
-
"
|
|
14052
|
-
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
14053
|
-
"attribute": "required",
|
|
14054
|
-
"reflects": true
|
|
14080
|
+
"privacy": "private"
|
|
14055
14081
|
},
|
|
14056
14082
|
{
|
|
14057
14083
|
"kind": "field",
|
|
14058
|
-
"name": "
|
|
14084
|
+
"name": "name",
|
|
14059
14085
|
"type": {
|
|
14060
|
-
"text": "
|
|
14086
|
+
"text": "IconNames | undefined"
|
|
14061
14087
|
},
|
|
14062
|
-
"description": "
|
|
14063
|
-
"attribute": "
|
|
14088
|
+
"description": "Name of the icon (= filename)",
|
|
14089
|
+
"attribute": "name",
|
|
14064
14090
|
"reflects": true
|
|
14065
14091
|
},
|
|
14066
14092
|
{
|
|
14067
14093
|
"kind": "field",
|
|
14068
|
-
"name": "
|
|
14094
|
+
"name": "size",
|
|
14069
14095
|
"type": {
|
|
14070
|
-
"text": "
|
|
14096
|
+
"text": "number | undefined"
|
|
14071
14097
|
},
|
|
14072
|
-
"description": "
|
|
14073
|
-
"attribute": "
|
|
14074
|
-
"reflects": true
|
|
14098
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
14099
|
+
"attribute": "size"
|
|
14075
14100
|
},
|
|
14076
14101
|
{
|
|
14077
14102
|
"kind": "field",
|
|
14078
|
-
"name": "
|
|
14103
|
+
"name": "lengthUnit",
|
|
14079
14104
|
"type": {
|
|
14080
14105
|
"text": "string | undefined"
|
|
14081
14106
|
},
|
|
14082
|
-
"description": "
|
|
14083
|
-
"attribute": "
|
|
14084
|
-
"reflects": true
|
|
14107
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
14108
|
+
"attribute": "length-unit"
|
|
14085
14109
|
},
|
|
14086
14110
|
{
|
|
14087
14111
|
"kind": "field",
|
|
14088
|
-
"name": "
|
|
14112
|
+
"name": "ariaLabel",
|
|
14089
14113
|
"type": {
|
|
14090
|
-
"text": "
|
|
14114
|
+
"text": "string | null"
|
|
14091
14115
|
},
|
|
14092
|
-
"
|
|
14093
|
-
"
|
|
14094
|
-
"attribute": "
|
|
14095
|
-
"reflects": true
|
|
14116
|
+
"default": "null",
|
|
14117
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
14118
|
+
"attribute": "aria-label"
|
|
14096
14119
|
},
|
|
14097
14120
|
{
|
|
14098
14121
|
"kind": "field",
|
|
14099
|
-
"name": "
|
|
14122
|
+
"name": "ariaLabelledBy",
|
|
14100
14123
|
"type": {
|
|
14101
|
-
"text": "string |
|
|
14124
|
+
"text": "string | null"
|
|
14102
14125
|
},
|
|
14103
|
-
"
|
|
14104
|
-
"
|
|
14105
|
-
"
|
|
14126
|
+
"default": "null",
|
|
14127
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
14128
|
+
"attribute": "aria-labelledby"
|
|
14106
14129
|
},
|
|
14107
14130
|
{
|
|
14108
|
-
"kind": "
|
|
14109
|
-
"name": "
|
|
14110
|
-
"privacy": "
|
|
14111
|
-
"
|
|
14112
|
-
|
|
14113
|
-
|
|
14114
|
-
|
|
14115
|
-
|
|
14116
|
-
|
|
14131
|
+
"kind": "field",
|
|
14132
|
+
"name": "iconProviderContext",
|
|
14133
|
+
"privacy": "private",
|
|
14134
|
+
"readonly": true
|
|
14135
|
+
},
|
|
14136
|
+
{
|
|
14137
|
+
"kind": "field",
|
|
14138
|
+
"name": "abortController",
|
|
14139
|
+
"type": {
|
|
14140
|
+
"text": "AbortController | undefined"
|
|
14141
|
+
},
|
|
14142
|
+
"privacy": "private",
|
|
14143
|
+
"default": "new AbortController()"
|
|
14117
14144
|
},
|
|
14118
14145
|
{
|
|
14119
14146
|
"kind": "method",
|
|
14120
|
-
"name": "
|
|
14121
|
-
"privacy": "
|
|
14122
|
-
"
|
|
14147
|
+
"name": "prepareIconElement",
|
|
14148
|
+
"privacy": "private",
|
|
14149
|
+
"parameters": [
|
|
14150
|
+
{
|
|
14151
|
+
"name": "iconData",
|
|
14152
|
+
"type": {
|
|
14153
|
+
"text": "string"
|
|
14154
|
+
},
|
|
14155
|
+
"description": "The icon string to be parsed"
|
|
14156
|
+
}
|
|
14157
|
+
],
|
|
14158
|
+
"description": "Parse the icon string to an html element, set the attributes and\nreturn the icon element",
|
|
14123
14159
|
"return": {
|
|
14124
14160
|
"type": {
|
|
14125
14161
|
"text": ""
|
|
@@ -14128,138 +14164,102 @@
|
|
|
14128
14164
|
},
|
|
14129
14165
|
{
|
|
14130
14166
|
"kind": "method",
|
|
14131
|
-
"name": "
|
|
14132
|
-
"privacy": "
|
|
14133
|
-
"description": "
|
|
14134
|
-
"return": {
|
|
14135
|
-
"type": {
|
|
14136
|
-
"text": ""
|
|
14137
|
-
}
|
|
14138
|
-
}
|
|
14167
|
+
"name": "getIconData",
|
|
14168
|
+
"privacy": "private",
|
|
14169
|
+
"description": "Fetches the icon (currently only svg) and sets state and attributes once fetched successfully\n\nThis method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.\nIf the request is aborted after the fetch() call has been fulfilled but before the response body has been read,\nthen attempting to read the response body will reject with an AbortError exception."
|
|
14139
14170
|
},
|
|
14140
14171
|
{
|
|
14141
14172
|
"kind": "method",
|
|
14142
|
-
"name": "
|
|
14143
|
-
"privacy": "
|
|
14144
|
-
"
|
|
14145
|
-
|
|
14146
|
-
|
|
14147
|
-
"
|
|
14173
|
+
"name": "handleIconLoadedSuccess",
|
|
14174
|
+
"privacy": "private",
|
|
14175
|
+
"parameters": [
|
|
14176
|
+
{
|
|
14177
|
+
"name": "iconHtml",
|
|
14178
|
+
"type": {
|
|
14179
|
+
"text": "HTMLElement"
|
|
14180
|
+
},
|
|
14181
|
+
"description": "The icon html element which has been fetched from the icon provider."
|
|
14148
14182
|
}
|
|
14149
|
-
|
|
14183
|
+
],
|
|
14184
|
+
"description": "Sets the iconData state to the fetched icon.\nDispatches a 'load' event on the component once the icon has been successfully loaded."
|
|
14150
14185
|
},
|
|
14151
14186
|
{
|
|
14152
14187
|
"kind": "method",
|
|
14153
|
-
"name": "
|
|
14154
|
-
"privacy": "
|
|
14155
|
-
"
|
|
14156
|
-
|
|
14157
|
-
|
|
14158
|
-
"
|
|
14188
|
+
"name": "handleIconLoadedFailure",
|
|
14189
|
+
"privacy": "private",
|
|
14190
|
+
"parameters": [
|
|
14191
|
+
{
|
|
14192
|
+
"name": "error",
|
|
14193
|
+
"type": {
|
|
14194
|
+
"text": "unknown"
|
|
14195
|
+
}
|
|
14159
14196
|
}
|
|
14160
|
-
|
|
14197
|
+
],
|
|
14198
|
+
"description": "Dispatches an 'error' event on the component when the icon fetching has failed.\nThis event bubbles and is cancelable.\nThe error detail is set to the error object."
|
|
14199
|
+
},
|
|
14200
|
+
{
|
|
14201
|
+
"kind": "method",
|
|
14202
|
+
"name": "updateSize",
|
|
14203
|
+
"privacy": "private",
|
|
14204
|
+
"description": "Updates the size by setting the width and height"
|
|
14161
14205
|
},
|
|
14162
14206
|
{
|
|
14163
14207
|
"kind": "field",
|
|
14164
|
-
"name": "
|
|
14165
|
-
"
|
|
14166
|
-
|
|
14167
|
-
},
|
|
14168
|
-
"description": "Indicates whether the component is disabled.\nWhen the component is disabled for user interaction; it is not focusable or clickable.",
|
|
14169
|
-
"default": "undefined",
|
|
14170
|
-
"attribute": "disabled",
|
|
14171
|
-
"reflects": true,
|
|
14172
|
-
"inheritedFrom": {
|
|
14173
|
-
"name": "DisabledMixin",
|
|
14174
|
-
"module": "utils/mixins/DisabledMixin.js"
|
|
14175
|
-
}
|
|
14208
|
+
"name": "computedIconSize",
|
|
14209
|
+
"privacy": "private",
|
|
14210
|
+
"readonly": true
|
|
14176
14211
|
}
|
|
14177
14212
|
],
|
|
14178
14213
|
"attributes": [
|
|
14179
14214
|
{
|
|
14180
|
-
"name": "
|
|
14181
|
-
"type": {
|
|
14182
|
-
"text": "string | undefined"
|
|
14183
|
-
},
|
|
14184
|
-
"description": "The label of the input field. It is linked to the input field using the `for` attribute.",
|
|
14185
|
-
"fieldName": "label"
|
|
14186
|
-
},
|
|
14187
|
-
{
|
|
14188
|
-
"name": "required",
|
|
14189
|
-
"type": {
|
|
14190
|
-
"text": "boolean"
|
|
14191
|
-
},
|
|
14192
|
-
"default": "false",
|
|
14193
|
-
"description": "The required attribute to indicate that the input field is required.\nIt is used to append a required indicator (*) to the label.",
|
|
14194
|
-
"fieldName": "required"
|
|
14195
|
-
},
|
|
14196
|
-
{
|
|
14197
|
-
"name": "help-text-type",
|
|
14215
|
+
"name": "name",
|
|
14198
14216
|
"type": {
|
|
14199
|
-
"text": "
|
|
14217
|
+
"text": "IconNames | undefined"
|
|
14200
14218
|
},
|
|
14201
|
-
"description": "
|
|
14202
|
-
"fieldName": "
|
|
14219
|
+
"description": "Name of the icon (= filename)",
|
|
14220
|
+
"fieldName": "name"
|
|
14203
14221
|
},
|
|
14204
14222
|
{
|
|
14205
|
-
"name": "
|
|
14223
|
+
"name": "size",
|
|
14206
14224
|
"type": {
|
|
14207
|
-
"text": "
|
|
14225
|
+
"text": "number | undefined"
|
|
14208
14226
|
},
|
|
14209
|
-
"description": "
|
|
14210
|
-
"fieldName": "
|
|
14227
|
+
"description": "Size of the icon (works in combination with length unit)",
|
|
14228
|
+
"fieldName": "size"
|
|
14211
14229
|
},
|
|
14212
14230
|
{
|
|
14213
|
-
"name": "
|
|
14231
|
+
"name": "length-unit",
|
|
14214
14232
|
"type": {
|
|
14215
14233
|
"text": "string | undefined"
|
|
14216
14234
|
},
|
|
14217
|
-
"description": "
|
|
14218
|
-
"fieldName": "
|
|
14219
|
-
},
|
|
14220
|
-
{
|
|
14221
|
-
"name": "toggletip-placement",
|
|
14222
|
-
"type": {
|
|
14223
|
-
"text": "PopoverPlacement"
|
|
14224
|
-
},
|
|
14225
|
-
"description": "The placement of the toggletip that is displayed when the info icon is hovered.",
|
|
14226
|
-
"default": "'top'",
|
|
14227
|
-
"fieldName": "toggletipPlacement"
|
|
14235
|
+
"description": "Length unit attribute for overriding length-unit from `IconProvider`",
|
|
14236
|
+
"fieldName": "lengthUnit"
|
|
14228
14237
|
},
|
|
14229
14238
|
{
|
|
14230
|
-
"name": "
|
|
14239
|
+
"name": "aria-label",
|
|
14231
14240
|
"type": {
|
|
14232
|
-
"text": "string |
|
|
14241
|
+
"text": "string | null"
|
|
14233
14242
|
},
|
|
14234
|
-
"
|
|
14235
|
-
"
|
|
14243
|
+
"default": "null",
|
|
14244
|
+
"description": "Aria-label attribute to be set for accessibility",
|
|
14245
|
+
"fieldName": "ariaLabel"
|
|
14236
14246
|
},
|
|
14237
14247
|
{
|
|
14238
|
-
"name": "
|
|
14248
|
+
"name": "aria-labelledby",
|
|
14239
14249
|
"type": {
|
|
14240
|
-
"text": "
|
|
14250
|
+
"text": "string | null"
|
|
14241
14251
|
},
|
|
14242
|
-
"
|
|
14243
|
-
"
|
|
14244
|
-
"fieldName": "
|
|
14245
|
-
"inheritedFrom": {
|
|
14246
|
-
"name": "DisabledMixin",
|
|
14247
|
-
"module": "src/utils/mixins/DisabledMixin.ts"
|
|
14248
|
-
}
|
|
14249
|
-
}
|
|
14250
|
-
],
|
|
14251
|
-
"mixins": [
|
|
14252
|
-
{
|
|
14253
|
-
"name": "DisabledMixin",
|
|
14254
|
-
"module": "/src/utils/mixins/DisabledMixin"
|
|
14252
|
+
"default": "null",
|
|
14253
|
+
"description": "Aria-labelledby attribute to be set for accessibility",
|
|
14254
|
+
"fieldName": "ariaLabelledBy"
|
|
14255
14255
|
}
|
|
14256
14256
|
],
|
|
14257
14257
|
"superclass": {
|
|
14258
14258
|
"name": "Component",
|
|
14259
14259
|
"module": "/src/models"
|
|
14260
14260
|
},
|
|
14261
|
-
"tagName": "mdc-
|
|
14262
|
-
"jsDoc": "/**\n *
|
|
14261
|
+
"tagName": "mdc-icon",
|
|
14262
|
+
"jsDoc": "/**\n * Icon component that dynamically displays SVG icons based on a valid name.\n *\n * This component must be mounted within an `IconProvider` component.\n *\n * The `IconProvider` defines the source URL from which icons are consumed.\n * The `Icon` component accepts a `name` attribute, which corresponds to\n * the file name of the icon to be loaded from the specified URL.\n *\n * Once fetched, the icon will be rendered. If the fetching process is unsuccessful,\n * no icon will be displayed.\n *\n * The `size` attribute allows for dynamic sizing of the icon based on the provided\n * `length-unit` attribute. This unit can either come from the `IconProvider`\n * or can be overridden for each individual icon. For example:\n * if `size = 1` and `length-unit = 'em'`, the dimensions of the icon will be\n * `width: 1em; height: 1em`.\n *\n * Regarding accessibility, there are three types of icons: decorative, informative and informative standalone.\n *\n * ### Decorative Icons\n * - Decorative icons do not convey any essential information to the content of a page.\n * - They should be hidden from screen readers (SR) to prevent confusion for users.\n * - For decorative icons, an `aria-label` is not required, and the `role` will be set to null.\n *\n * ### Informative Icons\n * - Informative icons convey important information that is not adequately represented\n * by surrounding text or components.\n * - They provide valuable context and must be announced by assistive technologies.\n * - For informative icons, an `aria-label` is required, and the `role` will be set to \"img\" automatically.\n * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,\n * the role will be unset.\n *\n * ### Informative Standalone Icons\n * - If an icon is informative (as mentioned above) and does not belong to a button (=standalone), it must\n * have a Tooltip that describes what it means.\n * - For informative standalone icons, an `aria-label` & `tabindex=\"0\"` is required,\n * and the `role` will be set to \"img\" automatically.\n * - **Only use this when a Icon is standalone and is not part of a button or other interactive elements.**\n *\n * @tagname mdc-icon\n *\n * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.\n * @cssproperty --mdc-icon-size - Allows customization of the icon size.\n * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.\n *\n * @csspart icon - The svg inside the icon element.\n */",
|
|
14263
14263
|
"customElement": true
|
|
14264
14264
|
}
|
|
14265
14265
|
],
|
|
@@ -14268,8 +14268,8 @@
|
|
|
14268
14268
|
"kind": "js",
|
|
14269
14269
|
"name": "default",
|
|
14270
14270
|
"declaration": {
|
|
14271
|
-
"name": "
|
|
14272
|
-
"module": "components/
|
|
14271
|
+
"name": "Icon",
|
|
14272
|
+
"module": "components/icon/icon.component.js"
|
|
14273
14273
|
}
|
|
14274
14274
|
}
|
|
14275
14275
|
]
|
|
@@ -18540,15 +18540,15 @@
|
|
|
18540
18540
|
},
|
|
18541
18541
|
{
|
|
18542
18542
|
"kind": "javascript-module",
|
|
18543
|
-
"path": "components/
|
|
18543
|
+
"path": "components/menuitemcheckbox/menuitemcheckbox.component.js",
|
|
18544
18544
|
"declarations": [
|
|
18545
18545
|
{
|
|
18546
18546
|
"kind": "class",
|
|
18547
|
-
"description": "
|
|
18548
|
-
"name": "
|
|
18547
|
+
"description": "A menuitemcheckbox component is a checkable menuitem.\nThere should be no focusable descendants inside this menuitemcheckbox component.\n\nThe `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n\nMenu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\nThe `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\nBy default, the `indicator` is set to <b>checkbox</b>.<br/>\n\nThe checkbox will always be positioned on the leading side of the menuitem label and\nthe toggle and checkmark will always be positioned on the trailing side.\n\nThe checkbox will have the possible states of `true` or `false`.\nIf the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\nthen the checkmark will be displayed. if not, then no indicator will be displayed.\n\nThe forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\nIt is intended to be used for customised menu items where the indicator is implemented differently.\nFor example, you can use a custom icon or a different visual element to indicate the state of the menu item.\nMake sure the new indicator is accessible.\n\nIf you want only one item in a group to be checked, consider using menuitemradio component.",
|
|
18548
|
+
"name": "MenuItemCheckbox",
|
|
18549
18549
|
"slots": [
|
|
18550
18550
|
{
|
|
18551
|
-
"description": "slot for menu item controls to appear of leading end.",
|
|
18551
|
+
"description": "slot for menu item checkbox controls to appear of leading end.",
|
|
18552
18552
|
"name": "leading-controls",
|
|
18553
18553
|
"inheritedFrom": {
|
|
18554
18554
|
"name": "ListItem",
|
|
@@ -18556,7 +18556,7 @@
|
|
|
18556
18556
|
}
|
|
18557
18557
|
},
|
|
18558
18558
|
{
|
|
18559
|
-
"description": "slot for menu item primary label.",
|
|
18559
|
+
"description": "slot for menu item checkbox primary label.",
|
|
18560
18560
|
"name": "leading-text-primary-label",
|
|
18561
18561
|
"inheritedFrom": {
|
|
18562
18562
|
"name": "ListItem",
|
|
@@ -18564,7 +18564,7 @@
|
|
|
18564
18564
|
}
|
|
18565
18565
|
},
|
|
18566
18566
|
{
|
|
18567
|
-
"description": "slot for menu item secondary label.",
|
|
18567
|
+
"description": "slot for menu item checkbox secondary label.",
|
|
18568
18568
|
"name": "leading-text-secondary-label",
|
|
18569
18569
|
"inheritedFrom": {
|
|
18570
18570
|
"name": "ListItem",
|
|
@@ -18572,7 +18572,7 @@
|
|
|
18572
18572
|
}
|
|
18573
18573
|
},
|
|
18574
18574
|
{
|
|
18575
|
-
"description": "slot for menu item tertiary label.",
|
|
18575
|
+
"description": "slot for menu item checkbox tertiary label.",
|
|
18576
18576
|
"name": "leading-text-tertiary-label",
|
|
18577
18577
|
"inheritedFrom": {
|
|
18578
18578
|
"name": "ListItem",
|
|
@@ -18580,7 +18580,7 @@
|
|
|
18580
18580
|
}
|
|
18581
18581
|
},
|
|
18582
18582
|
{
|
|
18583
|
-
"description": "slot for menu item side header text.",
|
|
18583
|
+
"description": "slot for menu item checkbox side header text.",
|
|
18584
18584
|
"name": "trailing-text-side-header",
|
|
18585
18585
|
"inheritedFrom": {
|
|
18586
18586
|
"name": "ListItem",
|
|
@@ -18588,7 +18588,7 @@
|
|
|
18588
18588
|
}
|
|
18589
18589
|
},
|
|
18590
18590
|
{
|
|
18591
|
-
"description": "slot for menu item subline text.",
|
|
18591
|
+
"description": "slot for menu item checkbox subline text.",
|
|
18592
18592
|
"name": "trailing-text-subline",
|
|
18593
18593
|
"inheritedFrom": {
|
|
18594
18594
|
"name": "ListItem",
|
|
@@ -18596,7 +18596,7 @@
|
|
|
18596
18596
|
}
|
|
18597
18597
|
},
|
|
18598
18598
|
{
|
|
18599
|
-
"description": "slot for menu item controls to appear of trailing end.",
|
|
18599
|
+
"description": "slot for menu item checkbox controls to appear of trailing end.",
|
|
18600
18600
|
"name": "trailing-controls",
|
|
18601
18601
|
"inheritedFrom": {
|
|
18602
18602
|
"name": "ListItem",
|
|
@@ -18613,6 +18613,67 @@
|
|
|
18613
18613
|
}
|
|
18614
18614
|
],
|
|
18615
18615
|
"members": [
|
|
18616
|
+
{
|
|
18617
|
+
"kind": "field",
|
|
18618
|
+
"name": "checked",
|
|
18619
|
+
"type": {
|
|
18620
|
+
"text": "boolean"
|
|
18621
|
+
},
|
|
18622
|
+
"default": "false",
|
|
18623
|
+
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
18624
|
+
"attribute": "checked",
|
|
18625
|
+
"reflects": true
|
|
18626
|
+
},
|
|
18627
|
+
{
|
|
18628
|
+
"kind": "field",
|
|
18629
|
+
"name": "indicator",
|
|
18630
|
+
"type": {
|
|
18631
|
+
"text": "Indicator"
|
|
18632
|
+
},
|
|
18633
|
+
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
18634
|
+
"default": "'checkbox'",
|
|
18635
|
+
"attribute": "indicator",
|
|
18636
|
+
"reflects": true
|
|
18637
|
+
},
|
|
18638
|
+
{
|
|
18639
|
+
"kind": "method",
|
|
18640
|
+
"name": "handleMouseClick",
|
|
18641
|
+
"privacy": "private",
|
|
18642
|
+
"description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
|
|
18643
|
+
},
|
|
18644
|
+
{
|
|
18645
|
+
"kind": "method",
|
|
18646
|
+
"name": "staticCheckbox",
|
|
18647
|
+
"privacy": "private",
|
|
18648
|
+
"return": {
|
|
18649
|
+
"type": {
|
|
18650
|
+
"text": ""
|
|
18651
|
+
}
|
|
18652
|
+
},
|
|
18653
|
+
"description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
|
|
18654
|
+
},
|
|
18655
|
+
{
|
|
18656
|
+
"kind": "method",
|
|
18657
|
+
"name": "staticToggle",
|
|
18658
|
+
"privacy": "private",
|
|
18659
|
+
"return": {
|
|
18660
|
+
"type": {
|
|
18661
|
+
"text": ""
|
|
18662
|
+
}
|
|
18663
|
+
},
|
|
18664
|
+
"description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
|
|
18665
|
+
},
|
|
18666
|
+
{
|
|
18667
|
+
"kind": "method",
|
|
18668
|
+
"name": "getCheckmarkIcon",
|
|
18669
|
+
"privacy": "private",
|
|
18670
|
+
"return": {
|
|
18671
|
+
"type": {
|
|
18672
|
+
"text": ""
|
|
18673
|
+
}
|
|
18674
|
+
},
|
|
18675
|
+
"description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
|
|
18676
|
+
},
|
|
18616
18677
|
{
|
|
18617
18678
|
"kind": "field",
|
|
18618
18679
|
"name": "arrowPosition",
|
|
@@ -18621,7 +18682,11 @@
|
|
|
18621
18682
|
},
|
|
18622
18683
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
18623
18684
|
"attribute": "arrow-position",
|
|
18624
|
-
"reflects": true
|
|
18685
|
+
"reflects": true,
|
|
18686
|
+
"inheritedFrom": {
|
|
18687
|
+
"name": "MenuItem",
|
|
18688
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
18689
|
+
}
|
|
18625
18690
|
},
|
|
18626
18691
|
{
|
|
18627
18692
|
"kind": "field",
|
|
@@ -18631,7 +18696,11 @@
|
|
|
18631
18696
|
},
|
|
18632
18697
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
18633
18698
|
"attribute": "arrow-direction",
|
|
18634
|
-
"reflects": true
|
|
18699
|
+
"reflects": true,
|
|
18700
|
+
"inheritedFrom": {
|
|
18701
|
+
"name": "MenuItem",
|
|
18702
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
18703
|
+
}
|
|
18635
18704
|
},
|
|
18636
18705
|
{
|
|
18637
18706
|
"kind": "field",
|
|
@@ -18641,7 +18710,11 @@
|
|
|
18641
18710
|
},
|
|
18642
18711
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
18643
18712
|
"attribute": "name",
|
|
18644
|
-
"reflects": true
|
|
18713
|
+
"reflects": true,
|
|
18714
|
+
"inheritedFrom": {
|
|
18715
|
+
"name": "MenuItem",
|
|
18716
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
18717
|
+
}
|
|
18645
18718
|
},
|
|
18646
18719
|
{
|
|
18647
18720
|
"kind": "field",
|
|
@@ -18651,7 +18724,11 @@
|
|
|
18651
18724
|
},
|
|
18652
18725
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
18653
18726
|
"attribute": "value",
|
|
18654
|
-
"reflects": true
|
|
18727
|
+
"reflects": true,
|
|
18728
|
+
"inheritedFrom": {
|
|
18729
|
+
"name": "MenuItem",
|
|
18730
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
18731
|
+
}
|
|
18655
18732
|
},
|
|
18656
18733
|
{
|
|
18657
18734
|
"kind": "method",
|
|
@@ -18695,7 +18772,11 @@
|
|
|
18695
18772
|
"description": "The keyboard event that triggered the action."
|
|
18696
18773
|
}
|
|
18697
18774
|
],
|
|
18698
|
-
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
|
|
18775
|
+
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event.",
|
|
18776
|
+
"inheritedFrom": {
|
|
18777
|
+
"name": "MenuItem",
|
|
18778
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
18779
|
+
}
|
|
18699
18780
|
},
|
|
18700
18781
|
{
|
|
18701
18782
|
"kind": "method",
|
|
@@ -18982,7 +19063,15 @@
|
|
|
18982
19063
|
],
|
|
18983
19064
|
"events": [
|
|
18984
19065
|
{
|
|
18985
|
-
"
|
|
19066
|
+
"name": "change",
|
|
19067
|
+
"type": {
|
|
19068
|
+
"text": "Event"
|
|
19069
|
+
},
|
|
19070
|
+
"description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
|
|
19071
|
+
"reactName": "onChange"
|
|
19072
|
+
},
|
|
19073
|
+
{
|
|
19074
|
+
"description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
|
|
18986
19075
|
"name": "click",
|
|
18987
19076
|
"reactName": "onClick",
|
|
18988
19077
|
"inheritedFrom": {
|
|
@@ -18990,6 +19079,15 @@
|
|
|
18990
19079
|
"module": "src/components/listitem/listitem.component.ts"
|
|
18991
19080
|
}
|
|
18992
19081
|
},
|
|
19082
|
+
{
|
|
19083
|
+
"description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
|
|
19084
|
+
"name": "focus",
|
|
19085
|
+
"reactName": "onFocus",
|
|
19086
|
+
"inheritedFrom": {
|
|
19087
|
+
"name": "ListItem",
|
|
19088
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
19089
|
+
}
|
|
19090
|
+
},
|
|
18993
19091
|
{
|
|
18994
19092
|
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
|
|
18995
19093
|
"name": "keydown",
|
|
@@ -19008,15 +19106,6 @@
|
|
|
19008
19106
|
"module": "src/components/listitem/listitem.component.ts"
|
|
19009
19107
|
}
|
|
19010
19108
|
},
|
|
19011
|
-
{
|
|
19012
|
-
"description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
|
|
19013
|
-
"name": "focus",
|
|
19014
|
-
"reactName": "onFocus",
|
|
19015
|
-
"inheritedFrom": {
|
|
19016
|
-
"name": "ListItem",
|
|
19017
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
19018
|
-
}
|
|
19019
|
-
},
|
|
19020
19109
|
{
|
|
19021
19110
|
"description": "(React: onEnabled) This event is dispatched after the menuitem is enabled",
|
|
19022
19111
|
"name": "enabled",
|
|
@@ -19055,13 +19144,35 @@
|
|
|
19055
19144
|
}
|
|
19056
19145
|
],
|
|
19057
19146
|
"attributes": [
|
|
19147
|
+
{
|
|
19148
|
+
"name": "checked",
|
|
19149
|
+
"type": {
|
|
19150
|
+
"text": "boolean"
|
|
19151
|
+
},
|
|
19152
|
+
"default": "false",
|
|
19153
|
+
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
19154
|
+
"fieldName": "checked"
|
|
19155
|
+
},
|
|
19156
|
+
{
|
|
19157
|
+
"name": "indicator",
|
|
19158
|
+
"type": {
|
|
19159
|
+
"text": "Indicator"
|
|
19160
|
+
},
|
|
19161
|
+
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
19162
|
+
"default": "'checkbox'",
|
|
19163
|
+
"fieldName": "indicator"
|
|
19164
|
+
},
|
|
19058
19165
|
{
|
|
19059
19166
|
"name": "arrow-position",
|
|
19060
19167
|
"type": {
|
|
19061
19168
|
"text": "ArrowPositions | undefined"
|
|
19062
19169
|
},
|
|
19063
19170
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
19064
|
-
"fieldName": "arrowPosition"
|
|
19171
|
+
"fieldName": "arrowPosition",
|
|
19172
|
+
"inheritedFrom": {
|
|
19173
|
+
"name": "MenuItem",
|
|
19174
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19175
|
+
}
|
|
19065
19176
|
},
|
|
19066
19177
|
{
|
|
19067
19178
|
"name": "arrow-direction",
|
|
@@ -19069,7 +19180,11 @@
|
|
|
19069
19180
|
"text": "ArrowDirections | undefined"
|
|
19070
19181
|
},
|
|
19071
19182
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
19072
|
-
"fieldName": "arrowDirection"
|
|
19183
|
+
"fieldName": "arrowDirection",
|
|
19184
|
+
"inheritedFrom": {
|
|
19185
|
+
"name": "MenuItem",
|
|
19186
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19187
|
+
}
|
|
19073
19188
|
},
|
|
19074
19189
|
{
|
|
19075
19190
|
"name": "name",
|
|
@@ -19077,7 +19192,11 @@
|
|
|
19077
19192
|
"text": "string | undefined"
|
|
19078
19193
|
},
|
|
19079
19194
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
19080
|
-
"fieldName": "name"
|
|
19195
|
+
"fieldName": "name",
|
|
19196
|
+
"inheritedFrom": {
|
|
19197
|
+
"name": "MenuItem",
|
|
19198
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19199
|
+
}
|
|
19081
19200
|
},
|
|
19082
19201
|
{
|
|
19083
19202
|
"name": "value",
|
|
@@ -19085,7 +19204,11 @@
|
|
|
19085
19204
|
"text": "string | undefined"
|
|
19086
19205
|
},
|
|
19087
19206
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
19088
|
-
"fieldName": "value"
|
|
19207
|
+
"fieldName": "value",
|
|
19208
|
+
"inheritedFrom": {
|
|
19209
|
+
"name": "MenuItem",
|
|
19210
|
+
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19211
|
+
}
|
|
19089
19212
|
},
|
|
19090
19213
|
{
|
|
19091
19214
|
"name": "disabled",
|
|
@@ -19201,11 +19324,11 @@
|
|
|
19201
19324
|
}
|
|
19202
19325
|
],
|
|
19203
19326
|
"superclass": {
|
|
19204
|
-
"name": "
|
|
19205
|
-
"module": "/src/components/
|
|
19327
|
+
"name": "MenuItem",
|
|
19328
|
+
"module": "/src/components/menuitem/menuitem.component"
|
|
19206
19329
|
},
|
|
19207
|
-
"tagName": "mdc-
|
|
19208
|
-
"jsDoc": "/**\n *
|
|
19330
|
+
"tagName": "mdc-menuitemcheckbox",
|
|
19331
|
+
"jsDoc": "/**\n * A menuitemcheckbox component is a checkable menuitem.\n * There should be no focusable descendants inside this menuitemcheckbox component.\n *\n * The `checked` attribute indicates whether the menuitemcheckbox is checked or not.\n *\n * Menu item checkbox has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * The `indicator` attribute is used to differentiate between <b>checkbox</b>, <b>checkmark</b>, <b>toggle</b> and <b>none</b>.\n * By default, the `indicator` is set to <b>checkbox</b>.<br/>\n *\n * The checkbox will always be positioned on the leading side of the menuitem label and\n * the toggle and checkmark will always be positioned on the trailing side.\n *\n * The checkbox will have the possible states of `true` or `false`.\n * If the indicator is set to <b>checkmark</b> and if the `checked` attribute is set to `true`,\n * then the checkmark will be displayed. if not, then no indicator will be displayed.\n *\n * The forth options for the `indicator` is <b>none</b>, which will not display any indicator at all.\n * It is intended to be used for customised menu items where the indicator is implemented differently.\n * For example, you can use a custom icon or a different visual element to indicate the state of the menu item.\n * Make sure the new indicator is accessible.\n *\n * If you want only one item in a group to be checked, consider using menuitemradio component.\n *\n * @dependency mdc-staticcheckbox\n * @dependency mdc-statictoggle\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitemcheckbox\n *\n * @slot leading-controls - slot for menu item checkbox controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item checkbox primary label.\n * @slot leading-text-secondary-label - slot for menu item checkbox secondary label.\n * @slot leading-text-tertiary-label - slot for menu item checkbox tertiary label.\n * @slot trailing-text-side-header - slot for menu item checkbox side header text.\n * @slot trailing-text-subline - slot for menu item checkbox subline text.\n * @slot trailing-controls - slot for menu item checkbox controls to appear of trailing end.\n *\n * @event change - (React: onChange) This event is dispatched when the menuitemcheckbox changes.\n * @event click - (React: onClick) This event is dispatched when the menuitemcheckbox is clicked.\n * @event focus - (React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.\n */",
|
|
19209
19332
|
"customElement": true,
|
|
19210
19333
|
"cssProperties": [
|
|
19211
19334
|
{
|
|
@@ -19312,23 +19435,23 @@
|
|
|
19312
19435
|
"kind": "js",
|
|
19313
19436
|
"name": "default",
|
|
19314
19437
|
"declaration": {
|
|
19315
|
-
"name": "
|
|
19316
|
-
"module": "components/
|
|
19438
|
+
"name": "MenuItemCheckbox",
|
|
19439
|
+
"module": "components/menuitemcheckbox/menuitemcheckbox.component.js"
|
|
19317
19440
|
}
|
|
19318
19441
|
}
|
|
19319
19442
|
]
|
|
19320
19443
|
},
|
|
19321
19444
|
{
|
|
19322
19445
|
"kind": "javascript-module",
|
|
19323
|
-
"path": "components/
|
|
19446
|
+
"path": "components/menuitem/menuitem.component.js",
|
|
19324
19447
|
"declarations": [
|
|
19325
19448
|
{
|
|
19326
19449
|
"kind": "class",
|
|
19327
|
-
"description": "
|
|
19328
|
-
"name": "
|
|
19450
|
+
"description": "menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\nA menu item can contain an icon on the leading or trailing side.\n\nThe leading and trailing slots can be used to display controls and text.<br/>\nBased on the leading/trailing slot, the position of the controls and text can be adjusted.\n\nPlease use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\nFor example mdc-menupopover or mdc-menubar.\n\nMenu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n\n**Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\nConsumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.",
|
|
19451
|
+
"name": "MenuItem",
|
|
19329
19452
|
"slots": [
|
|
19330
19453
|
{
|
|
19331
|
-
"description": "slot for menu item
|
|
19454
|
+
"description": "slot for menu item controls to appear of leading end.",
|
|
19332
19455
|
"name": "leading-controls",
|
|
19333
19456
|
"inheritedFrom": {
|
|
19334
19457
|
"name": "ListItem",
|
|
@@ -19336,7 +19459,7 @@
|
|
|
19336
19459
|
}
|
|
19337
19460
|
},
|
|
19338
19461
|
{
|
|
19339
|
-
"description": "slot for menu item
|
|
19462
|
+
"description": "slot for menu item primary label.",
|
|
19340
19463
|
"name": "leading-text-primary-label",
|
|
19341
19464
|
"inheritedFrom": {
|
|
19342
19465
|
"name": "ListItem",
|
|
@@ -19344,7 +19467,7 @@
|
|
|
19344
19467
|
}
|
|
19345
19468
|
},
|
|
19346
19469
|
{
|
|
19347
|
-
"description": "slot for menu item
|
|
19470
|
+
"description": "slot for menu item secondary label.",
|
|
19348
19471
|
"name": "leading-text-secondary-label",
|
|
19349
19472
|
"inheritedFrom": {
|
|
19350
19473
|
"name": "ListItem",
|
|
@@ -19352,7 +19475,7 @@
|
|
|
19352
19475
|
}
|
|
19353
19476
|
},
|
|
19354
19477
|
{
|
|
19355
|
-
"description": "slot for menu item
|
|
19478
|
+
"description": "slot for menu item tertiary label.",
|
|
19356
19479
|
"name": "leading-text-tertiary-label",
|
|
19357
19480
|
"inheritedFrom": {
|
|
19358
19481
|
"name": "ListItem",
|
|
@@ -19360,7 +19483,7 @@
|
|
|
19360
19483
|
}
|
|
19361
19484
|
},
|
|
19362
19485
|
{
|
|
19363
|
-
"description": "slot for menu item
|
|
19486
|
+
"description": "slot for menu item side header text.",
|
|
19364
19487
|
"name": "trailing-text-side-header",
|
|
19365
19488
|
"inheritedFrom": {
|
|
19366
19489
|
"name": "ListItem",
|
|
@@ -19368,7 +19491,7 @@
|
|
|
19368
19491
|
}
|
|
19369
19492
|
},
|
|
19370
19493
|
{
|
|
19371
|
-
"description": "slot for menu item
|
|
19494
|
+
"description": "slot for menu item subline text.",
|
|
19372
19495
|
"name": "trailing-text-subline",
|
|
19373
19496
|
"inheritedFrom": {
|
|
19374
19497
|
"name": "ListItem",
|
|
@@ -19376,7 +19499,7 @@
|
|
|
19376
19499
|
}
|
|
19377
19500
|
},
|
|
19378
19501
|
{
|
|
19379
|
-
"description": "slot for menu item
|
|
19502
|
+
"description": "slot for menu item controls to appear of trailing end.",
|
|
19380
19503
|
"name": "trailing-controls",
|
|
19381
19504
|
"inheritedFrom": {
|
|
19382
19505
|
"name": "ListItem",
|
|
@@ -19393,67 +19516,6 @@
|
|
|
19393
19516
|
}
|
|
19394
19517
|
],
|
|
19395
19518
|
"members": [
|
|
19396
|
-
{
|
|
19397
|
-
"kind": "field",
|
|
19398
|
-
"name": "checked",
|
|
19399
|
-
"type": {
|
|
19400
|
-
"text": "boolean"
|
|
19401
|
-
},
|
|
19402
|
-
"default": "false",
|
|
19403
|
-
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
19404
|
-
"attribute": "checked",
|
|
19405
|
-
"reflects": true
|
|
19406
|
-
},
|
|
19407
|
-
{
|
|
19408
|
-
"kind": "field",
|
|
19409
|
-
"name": "indicator",
|
|
19410
|
-
"type": {
|
|
19411
|
-
"text": "Indicator"
|
|
19412
|
-
},
|
|
19413
|
-
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
19414
|
-
"default": "'checkbox'",
|
|
19415
|
-
"attribute": "indicator",
|
|
19416
|
-
"reflects": true
|
|
19417
|
-
},
|
|
19418
|
-
{
|
|
19419
|
-
"kind": "method",
|
|
19420
|
-
"name": "handleMouseClick",
|
|
19421
|
-
"privacy": "private",
|
|
19422
|
-
"description": "Handles click events to toggle checked state\nIf the menuitemcheckbox is disabled, it does nothing.\nIf the menuitemcheckbox is not disabled, it toggles the `checked` state between `true` and `false`."
|
|
19423
|
-
},
|
|
19424
|
-
{
|
|
19425
|
-
"kind": "method",
|
|
19426
|
-
"name": "staticCheckbox",
|
|
19427
|
-
"privacy": "private",
|
|
19428
|
-
"return": {
|
|
19429
|
-
"type": {
|
|
19430
|
-
"text": ""
|
|
19431
|
-
}
|
|
19432
|
-
},
|
|
19433
|
-
"description": "Returns a static checkbox element if the indicator is set to checkbox.\nIf the indicator is not set to checkbox, it returns nothing."
|
|
19434
|
-
},
|
|
19435
|
-
{
|
|
19436
|
-
"kind": "method",
|
|
19437
|
-
"name": "staticToggle",
|
|
19438
|
-
"privacy": "private",
|
|
19439
|
-
"return": {
|
|
19440
|
-
"type": {
|
|
19441
|
-
"text": ""
|
|
19442
|
-
}
|
|
19443
|
-
},
|
|
19444
|
-
"description": "Returns a static toggle element if the indicator is set to toggle.\nIf the indicator is not set to toggle, it returns nothing.\n\nThe toggle will always be positioned on the trailing side of the menuitem label."
|
|
19445
|
-
},
|
|
19446
|
-
{
|
|
19447
|
-
"kind": "method",
|
|
19448
|
-
"name": "getCheckmarkIcon",
|
|
19449
|
-
"privacy": "private",
|
|
19450
|
-
"return": {
|
|
19451
|
-
"type": {
|
|
19452
|
-
"text": ""
|
|
19453
|
-
}
|
|
19454
|
-
},
|
|
19455
|
-
"description": "Returns a checkmark icon if the indicator is set to checkmark and the checked state is true.\nIf the indicator is not set to checkmark or the checked state is false, it returns nothing.\n\nThe checkmark icon will always be positioned on the trailing side of the menuitem label."
|
|
19456
|
-
},
|
|
19457
19519
|
{
|
|
19458
19520
|
"kind": "field",
|
|
19459
19521
|
"name": "arrowPosition",
|
|
@@ -19462,11 +19524,7 @@
|
|
|
19462
19524
|
},
|
|
19463
19525
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
19464
19526
|
"attribute": "arrow-position",
|
|
19465
|
-
"reflects": true
|
|
19466
|
-
"inheritedFrom": {
|
|
19467
|
-
"name": "MenuItem",
|
|
19468
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
19469
|
-
}
|
|
19527
|
+
"reflects": true
|
|
19470
19528
|
},
|
|
19471
19529
|
{
|
|
19472
19530
|
"kind": "field",
|
|
@@ -19476,11 +19534,7 @@
|
|
|
19476
19534
|
},
|
|
19477
19535
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
19478
19536
|
"attribute": "arrow-direction",
|
|
19479
|
-
"reflects": true
|
|
19480
|
-
"inheritedFrom": {
|
|
19481
|
-
"name": "MenuItem",
|
|
19482
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
19483
|
-
}
|
|
19537
|
+
"reflects": true
|
|
19484
19538
|
},
|
|
19485
19539
|
{
|
|
19486
19540
|
"kind": "field",
|
|
@@ -19490,11 +19544,7 @@
|
|
|
19490
19544
|
},
|
|
19491
19545
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
19492
19546
|
"attribute": "name",
|
|
19493
|
-
"reflects": true
|
|
19494
|
-
"inheritedFrom": {
|
|
19495
|
-
"name": "MenuItem",
|
|
19496
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
19497
|
-
}
|
|
19547
|
+
"reflects": true
|
|
19498
19548
|
},
|
|
19499
19549
|
{
|
|
19500
19550
|
"kind": "field",
|
|
@@ -19504,11 +19554,7 @@
|
|
|
19504
19554
|
},
|
|
19505
19555
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
19506
19556
|
"attribute": "value",
|
|
19507
|
-
"reflects": true
|
|
19508
|
-
"inheritedFrom": {
|
|
19509
|
-
"name": "MenuItem",
|
|
19510
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
19511
|
-
}
|
|
19557
|
+
"reflects": true
|
|
19512
19558
|
},
|
|
19513
19559
|
{
|
|
19514
19560
|
"kind": "method",
|
|
@@ -19552,11 +19598,7 @@
|
|
|
19552
19598
|
"description": "The keyboard event that triggered the action."
|
|
19553
19599
|
}
|
|
19554
19600
|
],
|
|
19555
|
-
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
|
|
19556
|
-
"inheritedFrom": {
|
|
19557
|
-
"name": "MenuItem",
|
|
19558
|
-
"module": "components/menuitem/menuitem.component.js"
|
|
19559
|
-
}
|
|
19601
|
+
"description": "Handles the keyup event for the menu item.\nIf the Space key is released, it triggers a click event on the menu item.\nThis allows keyboard users to activate the menu item using the Space key.\nIt also prevents the default action of the Space key to avoid scrolling the page.\n\nThis follows the native behaviour, actionable element can be triggered by Space\nkey on the keyup event.\n\nNote: Action triggered by Enter on the keydown event."
|
|
19560
19602
|
},
|
|
19561
19603
|
{
|
|
19562
19604
|
"kind": "method",
|
|
@@ -19843,15 +19885,7 @@
|
|
|
19843
19885
|
],
|
|
19844
19886
|
"events": [
|
|
19845
19887
|
{
|
|
19846
|
-
"
|
|
19847
|
-
"type": {
|
|
19848
|
-
"text": "Event"
|
|
19849
|
-
},
|
|
19850
|
-
"description": "(React: onChange) This event is dispatched when the menuitemcheckbox changes.",
|
|
19851
|
-
"reactName": "onChange"
|
|
19852
|
-
},
|
|
19853
|
-
{
|
|
19854
|
-
"description": "(React: onClick) This event is dispatched when the menuitemcheckbox is clicked.",
|
|
19888
|
+
"description": "(React: onClick) This event is dispatched when the menuitem is clicked.",
|
|
19855
19889
|
"name": "click",
|
|
19856
19890
|
"reactName": "onClick",
|
|
19857
19891
|
"inheritedFrom": {
|
|
@@ -19859,15 +19893,6 @@
|
|
|
19859
19893
|
"module": "src/components/listitem/listitem.component.ts"
|
|
19860
19894
|
}
|
|
19861
19895
|
},
|
|
19862
|
-
{
|
|
19863
|
-
"description": "(React: onFocus) This event is dispatched when the menuitemcheckbox receives focus.",
|
|
19864
|
-
"name": "focus",
|
|
19865
|
-
"reactName": "onFocus",
|
|
19866
|
-
"inheritedFrom": {
|
|
19867
|
-
"name": "ListItem",
|
|
19868
|
-
"module": "src/components/listitem/listitem.component.ts"
|
|
19869
|
-
}
|
|
19870
|
-
},
|
|
19871
19896
|
{
|
|
19872
19897
|
"description": "(React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.",
|
|
19873
19898
|
"name": "keydown",
|
|
@@ -19886,6 +19911,15 @@
|
|
|
19886
19911
|
"module": "src/components/listitem/listitem.component.ts"
|
|
19887
19912
|
}
|
|
19888
19913
|
},
|
|
19914
|
+
{
|
|
19915
|
+
"description": "(React: onFocus) This event is dispatched when the menuitem receives focus.",
|
|
19916
|
+
"name": "focus",
|
|
19917
|
+
"reactName": "onFocus",
|
|
19918
|
+
"inheritedFrom": {
|
|
19919
|
+
"name": "ListItem",
|
|
19920
|
+
"module": "src/components/listitem/listitem.component.ts"
|
|
19921
|
+
}
|
|
19922
|
+
},
|
|
19889
19923
|
{
|
|
19890
19924
|
"description": "(React: onEnabled) This event is dispatched after the menuitem is enabled",
|
|
19891
19925
|
"name": "enabled",
|
|
@@ -19924,35 +19958,13 @@
|
|
|
19924
19958
|
}
|
|
19925
19959
|
],
|
|
19926
19960
|
"attributes": [
|
|
19927
|
-
{
|
|
19928
|
-
"name": "checked",
|
|
19929
|
-
"type": {
|
|
19930
|
-
"text": "boolean"
|
|
19931
|
-
},
|
|
19932
|
-
"default": "false",
|
|
19933
|
-
"description": "The checked attribute is used to indicate that the menuitemcheckbox is checked or not.",
|
|
19934
|
-
"fieldName": "checked"
|
|
19935
|
-
},
|
|
19936
|
-
{
|
|
19937
|
-
"name": "indicator",
|
|
19938
|
-
"type": {
|
|
19939
|
-
"text": "Indicator"
|
|
19940
|
-
},
|
|
19941
|
-
"description": "The indicator attribute is used to differentiate between <b>checkbox</b> and <b>toggle</b>.",
|
|
19942
|
-
"default": "'checkbox'",
|
|
19943
|
-
"fieldName": "indicator"
|
|
19944
|
-
},
|
|
19945
19961
|
{
|
|
19946
19962
|
"name": "arrow-position",
|
|
19947
19963
|
"type": {
|
|
19948
19964
|
"text": "ArrowPositions | undefined"
|
|
19949
19965
|
},
|
|
19950
19966
|
"description": "Defines where the arrow icon will appear.\n- `'leading'`: Icon appears on the leading edge (start).\n- `'trailing'`: Icon appears on the trailing edge (end).\n\nIf not set, no arrow is displayed.",
|
|
19951
|
-
"fieldName": "arrowPosition"
|
|
19952
|
-
"inheritedFrom": {
|
|
19953
|
-
"name": "MenuItem",
|
|
19954
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19955
|
-
}
|
|
19967
|
+
"fieldName": "arrowPosition"
|
|
19956
19968
|
},
|
|
19957
19969
|
{
|
|
19958
19970
|
"name": "arrow-direction",
|
|
@@ -19960,11 +19972,7 @@
|
|
|
19960
19972
|
"text": "ArrowDirections | undefined"
|
|
19961
19973
|
},
|
|
19962
19974
|
"description": "Defines the direction the arrow icon points.\n- `'positive'`: Arrow points toward the trailing side.\n- `'negative'`: Arrow points toward the leading side.",
|
|
19963
|
-
"fieldName": "arrowDirection"
|
|
19964
|
-
"inheritedFrom": {
|
|
19965
|
-
"name": "MenuItem",
|
|
19966
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19967
|
-
}
|
|
19975
|
+
"fieldName": "arrowDirection"
|
|
19968
19976
|
},
|
|
19969
19977
|
{
|
|
19970
19978
|
"name": "name",
|
|
@@ -19972,11 +19980,7 @@
|
|
|
19972
19980
|
"text": "string | undefined"
|
|
19973
19981
|
},
|
|
19974
19982
|
"description": "The name attribute is used to identify the menu item when it is selected.",
|
|
19975
|
-
"fieldName": "name"
|
|
19976
|
-
"inheritedFrom": {
|
|
19977
|
-
"name": "MenuItem",
|
|
19978
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19979
|
-
}
|
|
19983
|
+
"fieldName": "name"
|
|
19980
19984
|
},
|
|
19981
19985
|
{
|
|
19982
19986
|
"name": "value",
|
|
@@ -19984,11 +19988,7 @@
|
|
|
19984
19988
|
"text": "string | undefined"
|
|
19985
19989
|
},
|
|
19986
19990
|
"description": "The value attribute is used to represent a value when the menu item is selected.\nIt is typically used with checkbox and radio menu items, but can be handy for any menu item.",
|
|
19987
|
-
"fieldName": "value"
|
|
19988
|
-
"inheritedFrom": {
|
|
19989
|
-
"name": "MenuItem",
|
|
19990
|
-
"module": "src/components/menuitem/menuitem.component.ts"
|
|
19991
|
-
}
|
|
19991
|
+
"fieldName": "value"
|
|
19992
19992
|
},
|
|
19993
19993
|
{
|
|
19994
19994
|
"name": "disabled",
|
|
@@ -20104,11 +20104,11 @@
|
|
|
20104
20104
|
}
|
|
20105
20105
|
],
|
|
20106
20106
|
"superclass": {
|
|
20107
|
-
"name": "
|
|
20108
|
-
"module": "/src/components/
|
|
20107
|
+
"name": "ListItem",
|
|
20108
|
+
"module": "/src/components/listitem/listitem.component"
|
|
20109
20109
|
},
|
|
20110
|
-
"tagName": "mdc-
|
|
20111
|
-
"jsDoc": "/**\n *
|
|
20110
|
+
"tagName": "mdc-menuitem",
|
|
20111
|
+
"jsDoc": "/**\n * menuitem component is inherited by listitem component with the role set `menuitem`.<br/>\n * A menu item can contain an icon on the leading or trailing side.\n *\n * The leading and trailing slots can be used to display controls and text.<br/>\n * Based on the leading/trailing slot, the position of the controls and text can be adjusted.\n *\n * Please use element with role=menu as a parent element even when there is only menuitem for a11y purpose.\n * For example mdc-menupopover or mdc-menubar.\n *\n * Menu item has `name` and `value` attribute that can be used to identify the menu item when it is selected.\n *\n * **Note**: If a menuitem contains a long text, it is recommended to create a tooltip for the menuitem that displays the full text on hover.\n * Consumers need to add a unique ID to this menuitem and use that ID in the tooltip's `triggerID` attribute. We are not creating the tooltip automatically, consumers need to add `<mdc-tooltip>` element manually and associate it with the menuitem using the `triggerID` attribute.\n *\n * @dependency mdc-text\n * @dependency mdc-icon\n *\n * @tagname mdc-menuitem\n *\n * @slot leading-controls - slot for menu item controls to appear of leading end.\n * @slot leading-text-primary-label - slot for menu item primary label.\n * @slot leading-text-secondary-label - slot for menu item secondary label.\n * @slot leading-text-tertiary-label - slot for menu item tertiary label.\n * @slot trailing-text-side-header - slot for menu item side header text.\n * @slot trailing-text-subline - slot for menu item subline text.\n * @slot trailing-controls - slot for menu item controls to appear of trailing end.\n *\n * @event click - (React: onClick) This event is dispatched when the menuitem is clicked.\n * @event keydown - (React: onKeyDown) This event is dispatched when a key is pressed down on the menuitem.\n * @event keyup - (React: onKeyUp) This event is dispatched when a key is released on the menuitem.\n * @event focus - (React: onFocus) This event is dispatched when the menuitem receives focus.\n * @event enabled - (React: onEnabled) This event is dispatched after the menuitem is enabled\n * @event disabled - (React: onDisabled) This event is dispatched after the menuitem is disabled\n * @event created - (React: onCreated) This event is dispatched after the menuitem is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched after the menuitem is destroyed (removed from the DOM)\n */",
|
|
20112
20112
|
"customElement": true,
|
|
20113
20113
|
"cssProperties": [
|
|
20114
20114
|
{
|
|
@@ -20215,8 +20215,8 @@
|
|
|
20215
20215
|
"kind": "js",
|
|
20216
20216
|
"name": "default",
|
|
20217
20217
|
"declaration": {
|
|
20218
|
-
"name": "
|
|
20219
|
-
"module": "components/
|
|
20218
|
+
"name": "MenuItem",
|
|
20219
|
+
"module": "components/menuitem/menuitem.component.js"
|
|
20220
20220
|
}
|
|
20221
20221
|
}
|
|
20222
20222
|
]
|