@momentum-design/components 0.62.0 → 0.62.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/custom-elements.json +352 -352
- package/dist/react/index.d.ts +2 -2
- package/dist/react/index.js +2 -2
- package/package.json +1 -1
|
@@ -2,67 +2,6 @@
|
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
4
|
"modules": [
|
|
5
|
-
{
|
|
6
|
-
"kind": "javascript-module",
|
|
7
|
-
"path": "components/appheader/appheader.component.js",
|
|
8
|
-
"declarations": [
|
|
9
|
-
{
|
|
10
|
-
"kind": "class",
|
|
11
|
-
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
12
|
-
"name": "Appheader",
|
|
13
|
-
"cssParts": [
|
|
14
|
-
{
|
|
15
|
-
"description": "The main container for styling the header.",
|
|
16
|
-
"name": "container"
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
"description": "The leading section of the header.",
|
|
20
|
-
"name": "leading-section"
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
"description": "The center section of the header.",
|
|
24
|
-
"name": "center-section"
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
"description": "The trailing section of the header.",
|
|
28
|
-
"name": "trailing-section"
|
|
29
|
-
}
|
|
30
|
-
],
|
|
31
|
-
"slots": [
|
|
32
|
-
{
|
|
33
|
-
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
34
|
-
"name": "leading"
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
38
|
-
"name": "center"
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
42
|
-
"name": "trailing"
|
|
43
|
-
}
|
|
44
|
-
],
|
|
45
|
-
"members": [],
|
|
46
|
-
"superclass": {
|
|
47
|
-
"name": "Component",
|
|
48
|
-
"module": "/src/models"
|
|
49
|
-
},
|
|
50
|
-
"tagName": "mdc-appheader",
|
|
51
|
-
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
52
|
-
"customElement": true
|
|
53
|
-
}
|
|
54
|
-
],
|
|
55
|
-
"exports": [
|
|
56
|
-
{
|
|
57
|
-
"kind": "js",
|
|
58
|
-
"name": "default",
|
|
59
|
-
"declaration": {
|
|
60
|
-
"name": "Appheader",
|
|
61
|
-
"module": "components/appheader/appheader.component.js"
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
5
|
{
|
|
67
6
|
"kind": "javascript-module",
|
|
68
7
|
"path": "components/alertchip/alertchip.component.js",
|
|
@@ -797,6 +736,67 @@
|
|
|
797
736
|
}
|
|
798
737
|
]
|
|
799
738
|
},
|
|
739
|
+
{
|
|
740
|
+
"kind": "javascript-module",
|
|
741
|
+
"path": "components/appheader/appheader.component.js",
|
|
742
|
+
"declarations": [
|
|
743
|
+
{
|
|
744
|
+
"kind": "class",
|
|
745
|
+
"description": "The `mdc-appheader` component provides a structured and accessible app header layout.\nIt consists of three primary sections: leading, center, and trailing.\n\n- The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n- The **center section** can contain a **search bar**, **icons** or action controls.\n- The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.",
|
|
746
|
+
"name": "Appheader",
|
|
747
|
+
"cssParts": [
|
|
748
|
+
{
|
|
749
|
+
"description": "The main container for styling the header.",
|
|
750
|
+
"name": "container"
|
|
751
|
+
},
|
|
752
|
+
{
|
|
753
|
+
"description": "The leading section of the header.",
|
|
754
|
+
"name": "leading-section"
|
|
755
|
+
},
|
|
756
|
+
{
|
|
757
|
+
"description": "The center section of the header.",
|
|
758
|
+
"name": "center-section"
|
|
759
|
+
},
|
|
760
|
+
{
|
|
761
|
+
"description": "The trailing section of the header.",
|
|
762
|
+
"name": "trailing-section"
|
|
763
|
+
}
|
|
764
|
+
],
|
|
765
|
+
"slots": [
|
|
766
|
+
{
|
|
767
|
+
"description": "Slot for the leading section (e.g., brand logo, brand name).",
|
|
768
|
+
"name": "leading"
|
|
769
|
+
},
|
|
770
|
+
{
|
|
771
|
+
"description": "Slot for the center section (e.g., search bar, icons).",
|
|
772
|
+
"name": "center"
|
|
773
|
+
},
|
|
774
|
+
{
|
|
775
|
+
"description": "Slot for the trailing section (e.g., profile avatar, icons).",
|
|
776
|
+
"name": "trailing"
|
|
777
|
+
}
|
|
778
|
+
],
|
|
779
|
+
"members": [],
|
|
780
|
+
"superclass": {
|
|
781
|
+
"name": "Component",
|
|
782
|
+
"module": "/src/models"
|
|
783
|
+
},
|
|
784
|
+
"tagName": "mdc-appheader",
|
|
785
|
+
"jsDoc": "/**\n * The `mdc-appheader` component provides a structured and accessible app header layout.\n * It consists of three primary sections: leading, center, and trailing.\n *\n * - The **leading section** typically holds a **brand logo**, **brand name** or **menu icon**.\n * - The **center section** can contain a **search bar**, **icons** or action controls.\n * - The **trailing section** generally includes a **profile avatar**, **additional icons** or **action controls**.\n *\n * @tagname mdc-appheader\n *\n * @slot leading - Slot for the leading section (e.g., brand logo, brand name).\n * @slot center - Slot for the center section (e.g., search bar, icons).\n * @slot trailing - Slot for the trailing section (e.g., profile avatar, icons).\n *\n * @csspart container - The main container for styling the header.\n * @csspart leading-section - The leading section of the header.\n * @csspart center-section - The center section of the header.\n * @csspart trailing-section - The trailing section of the header.\n */",
|
|
786
|
+
"customElement": true
|
|
787
|
+
}
|
|
788
|
+
],
|
|
789
|
+
"exports": [
|
|
790
|
+
{
|
|
791
|
+
"kind": "js",
|
|
792
|
+
"name": "default",
|
|
793
|
+
"declaration": {
|
|
794
|
+
"name": "Appheader",
|
|
795
|
+
"module": "components/appheader/appheader.component.js"
|
|
796
|
+
}
|
|
797
|
+
}
|
|
798
|
+
]
|
|
799
|
+
},
|
|
800
800
|
{
|
|
801
801
|
"kind": "javascript-module",
|
|
802
802
|
"path": "components/avatarbutton/avatarbutton.component.js",
|
|
@@ -7951,337 +7951,141 @@
|
|
|
7951
7951
|
},
|
|
7952
7952
|
{
|
|
7953
7953
|
"kind": "javascript-module",
|
|
7954
|
-
"path": "components/
|
|
7954
|
+
"path": "components/input/input.component.js",
|
|
7955
7955
|
"declarations": [
|
|
7956
7956
|
{
|
|
7957
7957
|
"kind": "class",
|
|
7958
|
-
"description": "
|
|
7959
|
-
"name": "
|
|
7960
|
-
"
|
|
7958
|
+
"description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
|
|
7959
|
+
"name": "Input",
|
|
7960
|
+
"cssProperties": [
|
|
7961
7961
|
{
|
|
7962
|
-
"description": "
|
|
7963
|
-
"name": ""
|
|
7962
|
+
"description": "Border color for the input container when disabled",
|
|
7963
|
+
"name": "--mdc-input-disabled-border-color"
|
|
7964
|
+
},
|
|
7965
|
+
{
|
|
7966
|
+
"description": "Text color for the input field when disabled",
|
|
7967
|
+
"name": "--mdc-input-disabled-text-color"
|
|
7968
|
+
},
|
|
7969
|
+
{
|
|
7970
|
+
"description": "Background color for the input field when disabled",
|
|
7971
|
+
"name": "--mdc-input-disabled-background-color"
|
|
7972
|
+
},
|
|
7973
|
+
{
|
|
7974
|
+
"description": "Border color for the input container",
|
|
7975
|
+
"name": "--mdc-input-border-color"
|
|
7976
|
+
},
|
|
7977
|
+
{
|
|
7978
|
+
"description": "Text color for the input field",
|
|
7979
|
+
"name": "--mdc-input-text-color"
|
|
7980
|
+
},
|
|
7981
|
+
{
|
|
7982
|
+
"description": "Background color for the input field",
|
|
7983
|
+
"name": "--mdc-input-background-color"
|
|
7984
|
+
},
|
|
7985
|
+
{
|
|
7986
|
+
"description": "Background color for the selected text",
|
|
7987
|
+
"name": "--mdc-input-selection-background-color"
|
|
7988
|
+
},
|
|
7989
|
+
{
|
|
7990
|
+
"description": "Text color for the selected text",
|
|
7991
|
+
"name": "--mdc-input-selection-text-color"
|
|
7992
|
+
},
|
|
7993
|
+
{
|
|
7994
|
+
"description": "Text color for the help text",
|
|
7995
|
+
"name": "--mdc-input-support-text-color"
|
|
7996
|
+
},
|
|
7997
|
+
{
|
|
7998
|
+
"description": "Background color for the input field when hovered",
|
|
7999
|
+
"name": "--mdc-input-hover-background-color"
|
|
8000
|
+
},
|
|
8001
|
+
{
|
|
8002
|
+
"description": "Background color for the input field when focused",
|
|
8003
|
+
"name": "--mdc-input-focused-background-color"
|
|
8004
|
+
},
|
|
8005
|
+
{
|
|
8006
|
+
"description": "Border color for the input container when focused",
|
|
8007
|
+
"name": "--mdc-input-focused-border-color"
|
|
8008
|
+
},
|
|
8009
|
+
{
|
|
8010
|
+
"description": "Border color for the input container when error",
|
|
8011
|
+
"name": "--mdc-input-error-border-color"
|
|
8012
|
+
},
|
|
8013
|
+
{
|
|
8014
|
+
"description": "Border color for the input container when warning",
|
|
8015
|
+
"name": "--mdc-input-warning-border-color"
|
|
8016
|
+
},
|
|
8017
|
+
{
|
|
8018
|
+
"description": "Border color for the input container when success",
|
|
8019
|
+
"name": "--mdc-input-success-border-color"
|
|
8020
|
+
},
|
|
8021
|
+
{
|
|
8022
|
+
"description": "Border color for the input container when primary",
|
|
8023
|
+
"name": "--mdc-input-primary-border-color"
|
|
7964
8024
|
}
|
|
7965
8025
|
],
|
|
7966
8026
|
"members": [
|
|
7967
8027
|
{
|
|
7968
8028
|
"kind": "field",
|
|
7969
|
-
"name": "
|
|
7970
|
-
"
|
|
7971
|
-
|
|
7972
|
-
|
|
7973
|
-
"
|
|
8029
|
+
"name": "placeholder",
|
|
8030
|
+
"type": {
|
|
8031
|
+
"text": "string"
|
|
8032
|
+
},
|
|
8033
|
+
"default": "''",
|
|
8034
|
+
"description": "The placeholder text that is displayed when the input field is empty.",
|
|
8035
|
+
"attribute": "placeholder"
|
|
7974
8036
|
},
|
|
7975
8037
|
{
|
|
7976
8038
|
"kind": "field",
|
|
7977
|
-
"name": "
|
|
8039
|
+
"name": "readonly",
|
|
7978
8040
|
"type": {
|
|
7979
|
-
"text": "
|
|
8041
|
+
"text": "boolean"
|
|
7980
8042
|
},
|
|
7981
|
-
"
|
|
7982
|
-
"
|
|
7983
|
-
"attribute": "
|
|
7984
|
-
"reflects": true
|
|
8043
|
+
"default": "false",
|
|
8044
|
+
"description": "readonly attribute of the input field. If true, the input field is read-only.",
|
|
8045
|
+
"attribute": "readonly"
|
|
7985
8046
|
},
|
|
7986
8047
|
{
|
|
7987
8048
|
"kind": "field",
|
|
7988
|
-
"name": "
|
|
8049
|
+
"name": "prefixText",
|
|
7989
8050
|
"type": {
|
|
7990
8051
|
"text": "string | undefined"
|
|
7991
8052
|
},
|
|
7992
|
-
"description": "
|
|
7993
|
-
"attribute": "
|
|
8053
|
+
"description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
|
|
8054
|
+
"attribute": "prefix-text"
|
|
7994
8055
|
},
|
|
7995
8056
|
{
|
|
7996
8057
|
"kind": "field",
|
|
7997
|
-
"name": "
|
|
8058
|
+
"name": "leadingIcon",
|
|
7998
8059
|
"type": {
|
|
7999
|
-
"text": "
|
|
8060
|
+
"text": "IconNames | undefined"
|
|
8000
8061
|
},
|
|
8001
|
-
"description": "
|
|
8002
|
-
"
|
|
8003
|
-
"attribute": "file-extension",
|
|
8004
|
-
"reflects": true
|
|
8062
|
+
"description": "The leading icon that is displayed before the input field.",
|
|
8063
|
+
"attribute": "leading-icon"
|
|
8005
8064
|
},
|
|
8006
8065
|
{
|
|
8007
8066
|
"kind": "field",
|
|
8008
|
-
"name": "
|
|
8067
|
+
"name": "trailingButton",
|
|
8009
8068
|
"type": {
|
|
8010
|
-
"text": "
|
|
8069
|
+
"text": "boolean"
|
|
8011
8070
|
},
|
|
8012
|
-
"
|
|
8013
|
-
"
|
|
8014
|
-
"attribute": "
|
|
8015
|
-
"reflects": true
|
|
8071
|
+
"default": "false",
|
|
8072
|
+
"description": "The trailing button when set to true, shows a clear button that clears the input field.",
|
|
8073
|
+
"attribute": "trailing-button"
|
|
8016
8074
|
},
|
|
8017
8075
|
{
|
|
8018
8076
|
"kind": "field",
|
|
8019
|
-
"name": "
|
|
8077
|
+
"name": "maxlength",
|
|
8020
8078
|
"type": {
|
|
8021
8079
|
"text": "number | undefined"
|
|
8022
8080
|
},
|
|
8023
|
-
"description": "The
|
|
8024
|
-
"
|
|
8025
|
-
"attribute": "size",
|
|
8026
|
-
"reflects": true
|
|
8081
|
+
"description": "The maximum number of characters that the input field can accept.",
|
|
8082
|
+
"attribute": "maxlength"
|
|
8027
8083
|
},
|
|
8028
8084
|
{
|
|
8029
8085
|
"kind": "field",
|
|
8030
|
-
"name": "
|
|
8086
|
+
"name": "minlength",
|
|
8031
8087
|
"type": {
|
|
8032
|
-
"text": "
|
|
8033
|
-
},
|
|
8034
|
-
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
8035
|
-
"default": "undefined",
|
|
8036
|
-
"attribute": "cache-strategy"
|
|
8037
|
-
},
|
|
8038
|
-
{
|
|
8039
|
-
"kind": "field",
|
|
8040
|
-
"name": "cacheName",
|
|
8041
|
-
"type": {
|
|
8042
|
-
"text": "string | undefined"
|
|
8043
|
-
},
|
|
8044
|
-
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
8045
|
-
"default": "undefined",
|
|
8046
|
-
"attribute": "cache-name"
|
|
8047
|
-
},
|
|
8048
|
-
{
|
|
8049
|
-
"kind": "method",
|
|
8050
|
-
"name": "updateValuesInContext",
|
|
8051
|
-
"privacy": "private"
|
|
8052
|
-
},
|
|
8053
|
-
{
|
|
8054
|
-
"kind": "method",
|
|
8055
|
-
"name": "updateContext",
|
|
8056
|
-
"privacy": "protected",
|
|
8057
|
-
"return": {
|
|
8058
|
-
"type": {
|
|
8059
|
-
"text": "void"
|
|
8060
|
-
}
|
|
8061
|
-
}
|
|
8062
|
-
}
|
|
8063
|
-
],
|
|
8064
|
-
"attributes": [
|
|
8065
|
-
{
|
|
8066
|
-
"name": "icon-set",
|
|
8067
|
-
"type": {
|
|
8068
|
-
"text": "IconSet | undefined"
|
|
8069
|
-
},
|
|
8070
|
-
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
8071
|
-
"default": "momentum-icons",
|
|
8072
|
-
"fieldName": "iconSet"
|
|
8073
|
-
},
|
|
8074
|
-
{
|
|
8075
|
-
"name": "url",
|
|
8076
|
-
"type": {
|
|
8077
|
-
"text": "string | undefined"
|
|
8078
|
-
},
|
|
8079
|
-
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
8080
|
-
"fieldName": "url"
|
|
8081
|
-
},
|
|
8082
|
-
{
|
|
8083
|
-
"name": "file-extension",
|
|
8084
|
-
"type": {
|
|
8085
|
-
"text": "string | undefined"
|
|
8086
|
-
},
|
|
8087
|
-
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
8088
|
-
"default": "svg",
|
|
8089
|
-
"fieldName": "fileExtension"
|
|
8090
|
-
},
|
|
8091
|
-
{
|
|
8092
|
-
"name": "length-unit",
|
|
8093
|
-
"type": {
|
|
8094
|
-
"text": "string"
|
|
8095
|
-
},
|
|
8096
|
-
"description": "Length unit used for sizing of icons",
|
|
8097
|
-
"default": "em",
|
|
8098
|
-
"fieldName": "lengthUnit"
|
|
8099
|
-
},
|
|
8100
|
-
{
|
|
8101
|
-
"name": "size",
|
|
8102
|
-
"type": {
|
|
8103
|
-
"text": "number | undefined"
|
|
8104
|
-
},
|
|
8105
|
-
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
8106
|
-
"default": "1",
|
|
8107
|
-
"fieldName": "size"
|
|
8108
|
-
},
|
|
8109
|
-
{
|
|
8110
|
-
"name": "cache-strategy",
|
|
8111
|
-
"type": {
|
|
8112
|
-
"text": "CacheStrategy | undefined"
|
|
8113
|
-
},
|
|
8114
|
-
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
8115
|
-
"default": "undefined",
|
|
8116
|
-
"fieldName": "cacheStrategy"
|
|
8117
|
-
},
|
|
8118
|
-
{
|
|
8119
|
-
"name": "cache-name",
|
|
8120
|
-
"type": {
|
|
8121
|
-
"text": "string | undefined"
|
|
8122
|
-
},
|
|
8123
|
-
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
8124
|
-
"default": "undefined",
|
|
8125
|
-
"fieldName": "cacheName"
|
|
8126
|
-
}
|
|
8127
|
-
],
|
|
8128
|
-
"superclass": {
|
|
8129
|
-
"name": "Provider",
|
|
8130
|
-
"module": "/src/models"
|
|
8131
|
-
},
|
|
8132
|
-
"tagName": "mdc-iconprovider",
|
|
8133
|
-
"jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
|
|
8134
|
-
"customElement": true
|
|
8135
|
-
}
|
|
8136
|
-
],
|
|
8137
|
-
"exports": [
|
|
8138
|
-
{
|
|
8139
|
-
"kind": "js",
|
|
8140
|
-
"name": "default",
|
|
8141
|
-
"declaration": {
|
|
8142
|
-
"name": "IconProvider",
|
|
8143
|
-
"module": "components/iconprovider/iconprovider.component.js"
|
|
8144
|
-
}
|
|
8145
|
-
}
|
|
8146
|
-
]
|
|
8147
|
-
},
|
|
8148
|
-
{
|
|
8149
|
-
"kind": "javascript-module",
|
|
8150
|
-
"path": "components/input/input.component.js",
|
|
8151
|
-
"declarations": [
|
|
8152
|
-
{
|
|
8153
|
-
"kind": "class",
|
|
8154
|
-
"description": "mdc-input is a component that allows users to input text.\n It contains:\n- label field - describe the input field.\n- input field - contains the value\n- help text or validation message - displayed below the input field.\n- trailing button - it displays a clear the input field.\n- prefix text - displayed before the input field.\n- leading icon - displayed before the input field.\n- clear-aria-label - aria label for the trailing button.\n- all the attributes of the input field.",
|
|
8155
|
-
"name": "Input",
|
|
8156
|
-
"cssProperties": [
|
|
8157
|
-
{
|
|
8158
|
-
"description": "Border color for the input container when disabled",
|
|
8159
|
-
"name": "--mdc-input-disabled-border-color"
|
|
8160
|
-
},
|
|
8161
|
-
{
|
|
8162
|
-
"description": "Text color for the input field when disabled",
|
|
8163
|
-
"name": "--mdc-input-disabled-text-color"
|
|
8164
|
-
},
|
|
8165
|
-
{
|
|
8166
|
-
"description": "Background color for the input field when disabled",
|
|
8167
|
-
"name": "--mdc-input-disabled-background-color"
|
|
8168
|
-
},
|
|
8169
|
-
{
|
|
8170
|
-
"description": "Border color for the input container",
|
|
8171
|
-
"name": "--mdc-input-border-color"
|
|
8172
|
-
},
|
|
8173
|
-
{
|
|
8174
|
-
"description": "Text color for the input field",
|
|
8175
|
-
"name": "--mdc-input-text-color"
|
|
8176
|
-
},
|
|
8177
|
-
{
|
|
8178
|
-
"description": "Background color for the input field",
|
|
8179
|
-
"name": "--mdc-input-background-color"
|
|
8180
|
-
},
|
|
8181
|
-
{
|
|
8182
|
-
"description": "Background color for the selected text",
|
|
8183
|
-
"name": "--mdc-input-selection-background-color"
|
|
8184
|
-
},
|
|
8185
|
-
{
|
|
8186
|
-
"description": "Text color for the selected text",
|
|
8187
|
-
"name": "--mdc-input-selection-text-color"
|
|
8188
|
-
},
|
|
8189
|
-
{
|
|
8190
|
-
"description": "Text color for the help text",
|
|
8191
|
-
"name": "--mdc-input-support-text-color"
|
|
8192
|
-
},
|
|
8193
|
-
{
|
|
8194
|
-
"description": "Background color for the input field when hovered",
|
|
8195
|
-
"name": "--mdc-input-hover-background-color"
|
|
8196
|
-
},
|
|
8197
|
-
{
|
|
8198
|
-
"description": "Background color for the input field when focused",
|
|
8199
|
-
"name": "--mdc-input-focused-background-color"
|
|
8200
|
-
},
|
|
8201
|
-
{
|
|
8202
|
-
"description": "Border color for the input container when focused",
|
|
8203
|
-
"name": "--mdc-input-focused-border-color"
|
|
8204
|
-
},
|
|
8205
|
-
{
|
|
8206
|
-
"description": "Border color for the input container when error",
|
|
8207
|
-
"name": "--mdc-input-error-border-color"
|
|
8208
|
-
},
|
|
8209
|
-
{
|
|
8210
|
-
"description": "Border color for the input container when warning",
|
|
8211
|
-
"name": "--mdc-input-warning-border-color"
|
|
8212
|
-
},
|
|
8213
|
-
{
|
|
8214
|
-
"description": "Border color for the input container when success",
|
|
8215
|
-
"name": "--mdc-input-success-border-color"
|
|
8216
|
-
},
|
|
8217
|
-
{
|
|
8218
|
-
"description": "Border color for the input container when primary",
|
|
8219
|
-
"name": "--mdc-input-primary-border-color"
|
|
8220
|
-
}
|
|
8221
|
-
],
|
|
8222
|
-
"members": [
|
|
8223
|
-
{
|
|
8224
|
-
"kind": "field",
|
|
8225
|
-
"name": "placeholder",
|
|
8226
|
-
"type": {
|
|
8227
|
-
"text": "string"
|
|
8228
|
-
},
|
|
8229
|
-
"default": "''",
|
|
8230
|
-
"description": "The placeholder text that is displayed when the input field is empty.",
|
|
8231
|
-
"attribute": "placeholder"
|
|
8232
|
-
},
|
|
8233
|
-
{
|
|
8234
|
-
"kind": "field",
|
|
8235
|
-
"name": "readonly",
|
|
8236
|
-
"type": {
|
|
8237
|
-
"text": "boolean"
|
|
8238
|
-
},
|
|
8239
|
-
"default": "false",
|
|
8240
|
-
"description": "readonly attribute of the input field. If true, the input field is read-only.",
|
|
8241
|
-
"attribute": "readonly"
|
|
8242
|
-
},
|
|
8243
|
-
{
|
|
8244
|
-
"kind": "field",
|
|
8245
|
-
"name": "prefixText",
|
|
8246
|
-
"type": {
|
|
8247
|
-
"text": "string | undefined"
|
|
8248
|
-
},
|
|
8249
|
-
"description": "The prefix text that is displayed before the input field. It has a max length of 10 characters.\nWhen the prefix text is set, make sure to set the 'data-aria-label'\nattribute with the appropriate value for accessibility.",
|
|
8250
|
-
"attribute": "prefix-text"
|
|
8251
|
-
},
|
|
8252
|
-
{
|
|
8253
|
-
"kind": "field",
|
|
8254
|
-
"name": "leadingIcon",
|
|
8255
|
-
"type": {
|
|
8256
|
-
"text": "IconNames | undefined"
|
|
8257
|
-
},
|
|
8258
|
-
"description": "The leading icon that is displayed before the input field.",
|
|
8259
|
-
"attribute": "leading-icon"
|
|
8260
|
-
},
|
|
8261
|
-
{
|
|
8262
|
-
"kind": "field",
|
|
8263
|
-
"name": "trailingButton",
|
|
8264
|
-
"type": {
|
|
8265
|
-
"text": "boolean"
|
|
8266
|
-
},
|
|
8267
|
-
"default": "false",
|
|
8268
|
-
"description": "The trailing button when set to true, shows a clear button that clears the input field.",
|
|
8269
|
-
"attribute": "trailing-button"
|
|
8270
|
-
},
|
|
8271
|
-
{
|
|
8272
|
-
"kind": "field",
|
|
8273
|
-
"name": "maxlength",
|
|
8274
|
-
"type": {
|
|
8275
|
-
"text": "number | undefined"
|
|
8276
|
-
},
|
|
8277
|
-
"description": "The maximum number of characters that the input field can accept.",
|
|
8278
|
-
"attribute": "maxlength"
|
|
8279
|
-
},
|
|
8280
|
-
{
|
|
8281
|
-
"kind": "field",
|
|
8282
|
-
"name": "minlength",
|
|
8283
|
-
"type": {
|
|
8284
|
-
"text": "number | undefined"
|
|
8088
|
+
"text": "number | undefined"
|
|
8285
8089
|
},
|
|
8286
8090
|
"description": "The minimum number of characters that the input field can accept.",
|
|
8287
8091
|
"attribute": "minlength"
|
|
@@ -9094,6 +8898,202 @@
|
|
|
9094
8898
|
}
|
|
9095
8899
|
]
|
|
9096
8900
|
},
|
|
8901
|
+
{
|
|
8902
|
+
"kind": "javascript-module",
|
|
8903
|
+
"path": "components/iconprovider/iconprovider.component.js",
|
|
8904
|
+
"declarations": [
|
|
8905
|
+
{
|
|
8906
|
+
"kind": "class",
|
|
8907
|
+
"description": "IconProvider component, which allows to be consumed from sub components\n(see `providerUtils.consume` for how to consume)\n\nAttribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.\n\nIf `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\nIconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\nto avoid fetching the same icon multiple times over the network.\nThis is useful when the same icon is used multiple times in the application.\nTo consider:\n- The `in-memory-cache` is not persisted and will be lost when the\nIconProvider is removed from the DOM.\n- The `web-api-cache` is persisted, but only works in https environments\n(https://developer.mozilla.org/en-US/docs/Web/API/Cache).",
|
|
8908
|
+
"name": "IconProvider",
|
|
8909
|
+
"slots": [
|
|
8910
|
+
{
|
|
8911
|
+
"description": "children",
|
|
8912
|
+
"name": ""
|
|
8913
|
+
}
|
|
8914
|
+
],
|
|
8915
|
+
"members": [
|
|
8916
|
+
{
|
|
8917
|
+
"kind": "field",
|
|
8918
|
+
"name": "Context",
|
|
8919
|
+
"privacy": "public",
|
|
8920
|
+
"static": true,
|
|
8921
|
+
"description": "Context object of the IconProvider, to be consumed by child components",
|
|
8922
|
+
"readonly": true
|
|
8923
|
+
},
|
|
8924
|
+
{
|
|
8925
|
+
"kind": "field",
|
|
8926
|
+
"name": "iconSet",
|
|
8927
|
+
"type": {
|
|
8928
|
+
"text": "IconSet | undefined"
|
|
8929
|
+
},
|
|
8930
|
+
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
8931
|
+
"default": "momentum-icons",
|
|
8932
|
+
"attribute": "icon-set",
|
|
8933
|
+
"reflects": true
|
|
8934
|
+
},
|
|
8935
|
+
{
|
|
8936
|
+
"kind": "field",
|
|
8937
|
+
"name": "url",
|
|
8938
|
+
"type": {
|
|
8939
|
+
"text": "string | undefined"
|
|
8940
|
+
},
|
|
8941
|
+
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
8942
|
+
"attribute": "url"
|
|
8943
|
+
},
|
|
8944
|
+
{
|
|
8945
|
+
"kind": "field",
|
|
8946
|
+
"name": "fileExtension",
|
|
8947
|
+
"type": {
|
|
8948
|
+
"text": "string | undefined"
|
|
8949
|
+
},
|
|
8950
|
+
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
8951
|
+
"default": "svg",
|
|
8952
|
+
"attribute": "file-extension",
|
|
8953
|
+
"reflects": true
|
|
8954
|
+
},
|
|
8955
|
+
{
|
|
8956
|
+
"kind": "field",
|
|
8957
|
+
"name": "lengthUnit",
|
|
8958
|
+
"type": {
|
|
8959
|
+
"text": "string"
|
|
8960
|
+
},
|
|
8961
|
+
"description": "Length unit used for sizing of icons",
|
|
8962
|
+
"default": "em",
|
|
8963
|
+
"attribute": "length-unit",
|
|
8964
|
+
"reflects": true
|
|
8965
|
+
},
|
|
8966
|
+
{
|
|
8967
|
+
"kind": "field",
|
|
8968
|
+
"name": "size",
|
|
8969
|
+
"type": {
|
|
8970
|
+
"text": "number | undefined"
|
|
8971
|
+
},
|
|
8972
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
8973
|
+
"default": "1",
|
|
8974
|
+
"attribute": "size",
|
|
8975
|
+
"reflects": true
|
|
8976
|
+
},
|
|
8977
|
+
{
|
|
8978
|
+
"kind": "field",
|
|
8979
|
+
"name": "cacheStrategy",
|
|
8980
|
+
"type": {
|
|
8981
|
+
"text": "CacheStrategy | undefined"
|
|
8982
|
+
},
|
|
8983
|
+
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
8984
|
+
"default": "undefined",
|
|
8985
|
+
"attribute": "cache-strategy"
|
|
8986
|
+
},
|
|
8987
|
+
{
|
|
8988
|
+
"kind": "field",
|
|
8989
|
+
"name": "cacheName",
|
|
8990
|
+
"type": {
|
|
8991
|
+
"text": "string | undefined"
|
|
8992
|
+
},
|
|
8993
|
+
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
8994
|
+
"default": "undefined",
|
|
8995
|
+
"attribute": "cache-name"
|
|
8996
|
+
},
|
|
8997
|
+
{
|
|
8998
|
+
"kind": "method",
|
|
8999
|
+
"name": "updateValuesInContext",
|
|
9000
|
+
"privacy": "private"
|
|
9001
|
+
},
|
|
9002
|
+
{
|
|
9003
|
+
"kind": "method",
|
|
9004
|
+
"name": "updateContext",
|
|
9005
|
+
"privacy": "protected",
|
|
9006
|
+
"return": {
|
|
9007
|
+
"type": {
|
|
9008
|
+
"text": "void"
|
|
9009
|
+
}
|
|
9010
|
+
}
|
|
9011
|
+
}
|
|
9012
|
+
],
|
|
9013
|
+
"attributes": [
|
|
9014
|
+
{
|
|
9015
|
+
"name": "icon-set",
|
|
9016
|
+
"type": {
|
|
9017
|
+
"text": "IconSet | undefined"
|
|
9018
|
+
},
|
|
9019
|
+
"description": "Icon set to be used\n\nIf `momentum-icons` is selected, the icons will be fetched from the\nMomentum Design System icon set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-designs` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-icons` is selected, the icons will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the icons will be fetched and\nthe consumer needs to make sure to bundle the icons in the application.",
|
|
9020
|
+
"default": "momentum-icons",
|
|
9021
|
+
"fieldName": "iconSet"
|
|
9022
|
+
},
|
|
9023
|
+
{
|
|
9024
|
+
"name": "url",
|
|
9025
|
+
"type": {
|
|
9026
|
+
"text": "string | undefined"
|
|
9027
|
+
},
|
|
9028
|
+
"description": "Url of where icons will be fetched from\n(if Icon set is `custom-icons`, this will be the base url)",
|
|
9029
|
+
"fieldName": "url"
|
|
9030
|
+
},
|
|
9031
|
+
{
|
|
9032
|
+
"name": "file-extension",
|
|
9033
|
+
"type": {
|
|
9034
|
+
"text": "string | undefined"
|
|
9035
|
+
},
|
|
9036
|
+
"description": "File extension of icons\n(if Icon set is `custom-icons`, this will be the file extension for icons)",
|
|
9037
|
+
"default": "svg",
|
|
9038
|
+
"fieldName": "fileExtension"
|
|
9039
|
+
},
|
|
9040
|
+
{
|
|
9041
|
+
"name": "length-unit",
|
|
9042
|
+
"type": {
|
|
9043
|
+
"text": "string"
|
|
9044
|
+
},
|
|
9045
|
+
"description": "Length unit used for sizing of icons",
|
|
9046
|
+
"default": "em",
|
|
9047
|
+
"fieldName": "lengthUnit"
|
|
9048
|
+
},
|
|
9049
|
+
{
|
|
9050
|
+
"name": "size",
|
|
9051
|
+
"type": {
|
|
9052
|
+
"text": "number | undefined"
|
|
9053
|
+
},
|
|
9054
|
+
"description": "The default size of the icon.\nIf not set, it falls back to the size defined by the length unit.",
|
|
9055
|
+
"default": "1",
|
|
9056
|
+
"fieldName": "size"
|
|
9057
|
+
},
|
|
9058
|
+
{
|
|
9059
|
+
"name": "cache-strategy",
|
|
9060
|
+
"type": {
|
|
9061
|
+
"text": "CacheStrategy | undefined"
|
|
9062
|
+
},
|
|
9063
|
+
"description": "Icons Cache Strategy to use\n\n**Can only be used if Icon set is `custom-icons`**\n\nChoose `in-memory-cache` to cache icons in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache icons using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the icons will not be cached.",
|
|
9064
|
+
"default": "undefined",
|
|
9065
|
+
"fieldName": "cacheStrategy"
|
|
9066
|
+
},
|
|
9067
|
+
{
|
|
9068
|
+
"name": "cache-name",
|
|
9069
|
+
"type": {
|
|
9070
|
+
"text": "string | undefined"
|
|
9071
|
+
},
|
|
9072
|
+
"description": "Icons Cache Name to use (cache strategy must be provided)\n\nIf provided, Icons inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the icons will not be cached.",
|
|
9073
|
+
"default": "undefined",
|
|
9074
|
+
"fieldName": "cacheName"
|
|
9075
|
+
}
|
|
9076
|
+
],
|
|
9077
|
+
"superclass": {
|
|
9078
|
+
"name": "Provider",
|
|
9079
|
+
"module": "/src/models"
|
|
9080
|
+
},
|
|
9081
|
+
"tagName": "mdc-iconprovider",
|
|
9082
|
+
"jsDoc": "/**\n * IconProvider component, which allows to be consumed from sub components\n * (see `providerUtils.consume` for how to consume)\n *\n * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.\n * If `momentum-icons` is selected, the icons will be fetched from the\n * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).\n * This requires the consumer to have the `@momentum-designs` package installed and the\n * build tooling needs to support dynamic imports.\n *\n * If `custom-icons` is selected, the icons will be fetched from the provided URL.\n * This requires the consumer to provide a URL from which the icons will be fetched and\n * the consumer needs to make sure to bundle the icons in the application.\n *\n * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the\n * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),\n * to avoid fetching the same icon multiple times over the network.\n * This is useful when the same icon is used multiple times in the application.\n * To consider:\n * - The `in-memory-cache` is not persisted and will be lost when the\n * IconProvider is removed from the DOM.\n * - The `web-api-cache` is persisted, but only works in https environments\n * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).\n *\n * @tagname mdc-iconprovider\n *\n * @slot - children\n */",
|
|
9083
|
+
"customElement": true
|
|
9084
|
+
}
|
|
9085
|
+
],
|
|
9086
|
+
"exports": [
|
|
9087
|
+
{
|
|
9088
|
+
"kind": "js",
|
|
9089
|
+
"name": "default",
|
|
9090
|
+
"declaration": {
|
|
9091
|
+
"name": "IconProvider",
|
|
9092
|
+
"module": "components/iconprovider/iconprovider.component.js"
|
|
9093
|
+
}
|
|
9094
|
+
}
|
|
9095
|
+
]
|
|
9096
|
+
},
|
|
9097
9097
|
{
|
|
9098
9098
|
"kind": "javascript-module",
|
|
9099
9099
|
"path": "components/inputchip/inputchip.component.js",
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as Appheader } from './appheader';
|
|
2
1
|
export { default as AlertChip } from './alertchip';
|
|
3
2
|
export { default as Avatar } from './avatar';
|
|
3
|
+
export { default as Appheader } from './appheader';
|
|
4
4
|
export { default as AvatarButton } from './avatarbutton';
|
|
5
5
|
export { default as Badge } from './badge';
|
|
6
6
|
export { default as Brandvisual } from './brandvisual';
|
|
@@ -16,8 +16,8 @@ export { default as FilterChip } from './filterchip';
|
|
|
16
16
|
export { default as FormfieldGroup } from './formfieldgroup';
|
|
17
17
|
export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
18
18
|
export { default as Icon } from './icon';
|
|
19
|
-
export { default as IconProvider } from './iconprovider';
|
|
20
19
|
export { default as Input } from './input';
|
|
20
|
+
export { default as IconProvider } from './iconprovider';
|
|
21
21
|
export { default as InputChip } from './inputchip';
|
|
22
22
|
export { default as Link } from './link';
|
|
23
23
|
export { default as Linksimple } from './linksimple';
|
package/dist/react/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export { default as Appheader } from './appheader';
|
|
2
1
|
export { default as AlertChip } from './alertchip';
|
|
3
2
|
export { default as Avatar } from './avatar';
|
|
3
|
+
export { default as Appheader } from './appheader';
|
|
4
4
|
export { default as AvatarButton } from './avatarbutton';
|
|
5
5
|
export { default as Badge } from './badge';
|
|
6
6
|
export { default as Brandvisual } from './brandvisual';
|
|
@@ -16,8 +16,8 @@ export { default as FilterChip } from './filterchip';
|
|
|
16
16
|
export { default as FormfieldGroup } from './formfieldgroup';
|
|
17
17
|
export { default as FormfieldWrapper } from './formfieldwrapper';
|
|
18
18
|
export { default as Icon } from './icon';
|
|
19
|
-
export { default as IconProvider } from './iconprovider';
|
|
20
19
|
export { default as Input } from './input';
|
|
20
|
+
export { default as IconProvider } from './iconprovider';
|
|
21
21
|
export { default as InputChip } from './inputchip';
|
|
22
22
|
export { default as Link } from './link';
|
|
23
23
|
export { default as Linksimple } from './linksimple';
|
package/package.json
CHANGED