@momentum-design/components 0.16.0 → 0.16.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/browser/index.js +6 -6
- package/dist/browser/index.js.map +3 -3
- package/dist/components/icon/icon.component.d.ts +18 -0
- package/dist/components/icon/icon.component.js +46 -7
- package/dist/custom-elements.json +552 -512
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/package.json +1 -1
@@ -61,6 +61,11 @@ declare class Icon extends Component {
|
|
61
61
|
private readonly iconProviderContext;
|
62
62
|
private abortController;
|
63
63
|
constructor();
|
64
|
+
/**
|
65
|
+
* Dispatches a 'load' event on the component once the icon has been successfully loaded.
|
66
|
+
* This event bubbles and is cancelable.
|
67
|
+
*/
|
68
|
+
private triggerIconLoaded;
|
64
69
|
/**
|
65
70
|
* Get Icon Data function which will fetch the icon (currently only svg)
|
66
71
|
* and sets state and attributes once fetched successfully
|
@@ -70,6 +75,19 @@ declare class Icon extends Component {
|
|
70
75
|
* then attempting to read the response body will reject with an AbortError exception.
|
71
76
|
*/
|
72
77
|
private getIconData;
|
78
|
+
/**
|
79
|
+
* Sets the iconData state to the fetched icon,
|
80
|
+
* and calls functions to set role, aria-label and aria-hidden attributes on the icon.
|
81
|
+
* Dispatches a 'load' event on the component once the icon has been successfully loaded.
|
82
|
+
* @param iconHtml - The icon html element which has been fetched from the icon provider.
|
83
|
+
*/
|
84
|
+
private handleIconLoadedSuccess;
|
85
|
+
/**
|
86
|
+
* Dispatches an 'error' event on the component when the icon fetching has failed.
|
87
|
+
* This event bubbles and is cancelable.
|
88
|
+
* The error detail is set to the error object.
|
89
|
+
*/
|
90
|
+
private handleIconLoadedFailure;
|
73
91
|
/**
|
74
92
|
* Updates the size by setting the width and height
|
75
93
|
*/
|
@@ -66,6 +66,17 @@ class Icon extends Component {
|
|
66
66
|
this.iconProviderContext = providerUtils.consume({ host: this, context: IconProvider.Context });
|
67
67
|
this.abortController = new AbortController(); // Initialize AbortController
|
68
68
|
}
|
69
|
+
/**
|
70
|
+
* Dispatches a 'load' event on the component once the icon has been successfully loaded.
|
71
|
+
* This event bubbles and is cancelable.
|
72
|
+
*/
|
73
|
+
triggerIconLoaded() {
|
74
|
+
const loadEvent = new Event('load', {
|
75
|
+
bubbles: true,
|
76
|
+
cancelable: true,
|
77
|
+
});
|
78
|
+
this.dispatchEvent(loadEvent);
|
79
|
+
}
|
69
80
|
/**
|
70
81
|
* Get Icon Data function which will fetch the icon (currently only svg)
|
71
82
|
* and sets state and attributes once fetched successfully
|
@@ -80,16 +91,44 @@ class Icon extends Component {
|
|
80
91
|
if (url && fileExtension && this.name) {
|
81
92
|
this.abortController.abort();
|
82
93
|
this.abortController = new AbortController();
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
94
|
+
try {
|
95
|
+
const iconHtml = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
|
96
|
+
this.handleIconLoadedSuccess(iconHtml);
|
97
|
+
}
|
98
|
+
catch (error) {
|
99
|
+
this.handleIconLoadedFailure(error);
|
100
|
+
}
|
90
101
|
}
|
91
102
|
}
|
92
103
|
}
|
104
|
+
/**
|
105
|
+
* Sets the iconData state to the fetched icon,
|
106
|
+
* and calls functions to set role, aria-label and aria-hidden attributes on the icon.
|
107
|
+
* Dispatches a 'load' event on the component once the icon has been successfully loaded.
|
108
|
+
* @param iconHtml - The icon html element which has been fetched from the icon provider.
|
109
|
+
*/
|
110
|
+
handleIconLoadedSuccess(iconHtml) {
|
111
|
+
// update iconData state once fetched:
|
112
|
+
this.iconData = iconHtml;
|
113
|
+
// when icon is fetched successfully, set the role, aria-label and invoke function to trigger icon load event.
|
114
|
+
this.setRoleOnIcon();
|
115
|
+
this.setAriaLabelOnIcon();
|
116
|
+
this.setAriaHiddenOnIcon();
|
117
|
+
this.triggerIconLoaded();
|
118
|
+
}
|
119
|
+
/**
|
120
|
+
* Dispatches an 'error' event on the component when the icon fetching has failed.
|
121
|
+
* This event bubbles and is cancelable.
|
122
|
+
* The error detail is set to the error object.
|
123
|
+
*/
|
124
|
+
handleIconLoadedFailure(error) {
|
125
|
+
const errorEvent = new CustomEvent('error', {
|
126
|
+
bubbles: true,
|
127
|
+
cancelable: true,
|
128
|
+
detail: { error },
|
129
|
+
});
|
130
|
+
this.dispatchEvent(errorEvent);
|
131
|
+
}
|
93
132
|
/**
|
94
133
|
* Updates the size by setting the width and height
|
95
134
|
*/
|