@momentum-design/components 0.22.4 → 0.22.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/browser/index.js +88 -75
- package/dist/browser/index.js.map +4 -4
- package/dist/components/checkbox/checkbox.component.d.ts +9 -1
- package/dist/components/checkbox/checkbox.component.js +21 -3
- package/dist/components/checkboxgroup/checkboxgroup.component.d.ts +43 -0
- package/dist/components/checkboxgroup/checkboxgroup.component.js +94 -0
- package/dist/components/checkboxgroup/checkboxgroup.constants.d.ts +2 -0
- package/dist/components/checkboxgroup/checkboxgroup.constants.js +3 -0
- package/dist/components/checkboxgroup/checkboxgroup.styles.d.ts +2 -0
- package/dist/components/checkboxgroup/checkboxgroup.styles.js +9 -0
- package/dist/components/checkboxgroup/index.d.ts +8 -0
- package/dist/components/checkboxgroup/index.js +5 -0
- package/dist/components/icon/icon.component.d.ts +9 -2
- package/dist/components/icon/icon.component.js +36 -5
- package/dist/components/icon/icon.utils.d.ts +2 -2
- package/dist/components/icon/icon.utils.js +2 -8
- package/dist/components/iconprovider/iconprovider.component.d.ts +31 -0
- package/dist/components/iconprovider/iconprovider.component.js +20 -1
- package/dist/components/iconprovider/iconprovider.constants.d.ts +1 -0
- package/dist/components/iconprovider/iconprovider.constants.js +1 -0
- package/dist/components/iconprovider/iconprovider.context.d.ts +2 -0
- package/dist/components/iconprovider/iconprovider.context.js +3 -0
- package/dist/custom-elements.json +1012 -846
- package/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/react/checkboxgroup/index.d.ts +17 -0
- package/dist/react/checkboxgroup/index.js +26 -0
- package/dist/react/iconprovider/index.d.ts +6 -0
- package/dist/react/iconprovider/index.js +6 -0
- package/dist/react/index.d.ts +4 -3
- package/dist/react/index.js +4 -3
- package/package.json +1 -1
@@ -45,6 +45,8 @@ declare class Checkbox extends Checkbox_base {
|
|
45
45
|
/** @internal */
|
46
46
|
static formAssociated: boolean;
|
47
47
|
/** @internal */
|
48
|
+
static shadowRootOptions: ShadowRootInit;
|
49
|
+
/** @internal */
|
48
50
|
get form(): HTMLFormElement | null;
|
49
51
|
constructor();
|
50
52
|
/**
|
@@ -61,9 +63,15 @@ declare class Checkbox extends Checkbox_base {
|
|
61
63
|
private toggleState;
|
62
64
|
/**
|
63
65
|
* Toggles the state of the checkbox element.
|
64
|
-
* and dispatch the new event.
|
66
|
+
* and dispatch the new change event.
|
65
67
|
*/
|
66
68
|
handleChange(event: Event): void;
|
69
|
+
/**
|
70
|
+
* Handles the keydown event on the checkbox.
|
71
|
+
* When the user presses Enter, the form is submitted.
|
72
|
+
* @param event - The keyboard event.
|
73
|
+
*/
|
74
|
+
private handleKeyDown;
|
67
75
|
update(changedProperties: PropertyValues): void;
|
68
76
|
render(): import("lit-html").TemplateResult<1>;
|
69
77
|
static styles: Array<CSSResult>;
|
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
7
7
|
var __metadata = (this && this.__metadata) || function (k, v) {
|
8
8
|
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9
9
|
};
|
10
|
-
import { html, nothing } from 'lit';
|
10
|
+
import { html, LitElement, nothing } from 'lit';
|
11
11
|
import { property } from 'lit/decorators.js';
|
12
12
|
import { ifDefined } from 'lit/directives/if-defined.js';
|
13
13
|
import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
|
@@ -90,11 +90,23 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
|
|
90
90
|
}
|
91
91
|
/**
|
92
92
|
* Toggles the state of the checkbox element.
|
93
|
-
* and dispatch the new event.
|
93
|
+
* and dispatch the new change event.
|
94
94
|
*/
|
95
95
|
handleChange(event) {
|
96
96
|
this.toggleState();
|
97
|
-
|
97
|
+
const EventConstructor = event.constructor;
|
98
|
+
this.dispatchEvent(new EventConstructor(event.type, event));
|
99
|
+
}
|
100
|
+
/**
|
101
|
+
* Handles the keydown event on the checkbox.
|
102
|
+
* When the user presses Enter, the form is submitted.
|
103
|
+
* @param event - The keyboard event.
|
104
|
+
*/
|
105
|
+
handleKeyDown(event) {
|
106
|
+
var _a;
|
107
|
+
if (event.key === 'Enter') {
|
108
|
+
(_a = this.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
|
109
|
+
}
|
98
110
|
}
|
99
111
|
update(changedProperties) {
|
100
112
|
super.update(changedProperties);
|
@@ -126,6 +138,7 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
|
|
126
138
|
.disabled="${this.disabled}"
|
127
139
|
aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
|
128
140
|
@change=${this.handleChange}
|
141
|
+
@keydown=${this.handleKeyDown}
|
129
142
|
/>
|
130
143
|
<div class="icon-container">${checkboxIconContent}</div>
|
131
144
|
</div>
|
@@ -138,6 +151,11 @@ class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper)
|
|
138
151
|
}
|
139
152
|
/** @internal */
|
140
153
|
Checkbox.formAssociated = true;
|
154
|
+
/** @internal */
|
155
|
+
Checkbox.shadowRootOptions = {
|
156
|
+
...LitElement.shadowRootOptions,
|
157
|
+
delegatesFocus: true,
|
158
|
+
};
|
141
159
|
Checkbox.styles = [...FormfieldWrapper.styles, ...styles];
|
142
160
|
__decorate([
|
143
161
|
property({ type: Boolean, reflect: true }),
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import { CSSResult } from 'lit';
|
2
|
+
import { Component } from '../../models';
|
3
|
+
/**
|
4
|
+
* `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.
|
5
|
+
* It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.
|
6
|
+
*
|
7
|
+
* A checkbox group typically consists of multiple checkboxes grouped together,
|
8
|
+
* each representing a selectable option. You can check or uncheck options based on their preferences.
|
9
|
+
*
|
10
|
+
* @dependency mdc-text
|
11
|
+
*
|
12
|
+
* @tagname mdc-checkboxgroup
|
13
|
+
*
|
14
|
+
* @slot help-text - This is a help text slot.
|
15
|
+
* @slot default - This is a default slot for children.
|
16
|
+
*/
|
17
|
+
declare class Checkboxgroup extends Component {
|
18
|
+
/**
|
19
|
+
* The header text of the checkboxgroup.
|
20
|
+
*/
|
21
|
+
headerText?: string;
|
22
|
+
/** @internal */
|
23
|
+
role: string;
|
24
|
+
/** @internal */
|
25
|
+
private get checkboxList();
|
26
|
+
constructor();
|
27
|
+
/**
|
28
|
+
* Handles the keydown event on the parent checkbox in the checkboxgroup.
|
29
|
+
* When the user presses the down arrow key, the focus is moved to the next checkbox in the checkboxgroup.
|
30
|
+
* When the user presses the up arrow key, the focus is moved to the previous checkbox in the checkboxgroup.
|
31
|
+
* @param event - The KeyboardEvent
|
32
|
+
*/
|
33
|
+
private handleKeyDown;
|
34
|
+
/**
|
35
|
+
* Navigate to the next or previous checkbox in the checkboxgroup based on the given origin and direction.
|
36
|
+
* @param origin - The element that triggered the event.
|
37
|
+
* @param direction - The direction of navigation, either -1 or 1.
|
38
|
+
*/
|
39
|
+
private navigate;
|
40
|
+
render(): import("lit-html").TemplateResult<1>;
|
41
|
+
static styles: Array<CSSResult>;
|
42
|
+
}
|
43
|
+
export default Checkboxgroup;
|
@@ -0,0 +1,94 @@
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6
|
+
};
|
7
|
+
var __metadata = (this && this.__metadata) || function (k, v) {
|
8
|
+
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
|
9
|
+
};
|
10
|
+
import { html, nothing } from 'lit';
|
11
|
+
import { property } from 'lit/decorators.js';
|
12
|
+
import { Component } from '../../models';
|
13
|
+
import { TAG_NAME as CHECKBOX_TAGNAME } from '../checkbox/checkbox.constants';
|
14
|
+
import { TYPE as TEXT_TYPE, VALID_TEXT_TAGS as TEXT_TAGS } from '../text/text.constants';
|
15
|
+
import styles from './checkboxgroup.styles';
|
16
|
+
/**
|
17
|
+
* `mdc-checkboxgroup` component allows you to select multiple options from a predefined list.
|
18
|
+
* It is commonly used in forms where multiple selections are required, such as preferences, filters, or categories.
|
19
|
+
*
|
20
|
+
* A checkbox group typically consists of multiple checkboxes grouped together,
|
21
|
+
* each representing a selectable option. You can check or uncheck options based on their preferences.
|
22
|
+
*
|
23
|
+
* @dependency mdc-text
|
24
|
+
*
|
25
|
+
* @tagname mdc-checkboxgroup
|
26
|
+
*
|
27
|
+
* @slot help-text - This is a help text slot.
|
28
|
+
* @slot default - This is a default slot for children.
|
29
|
+
*/
|
30
|
+
class Checkboxgroup extends Component {
|
31
|
+
/** @internal */
|
32
|
+
get checkboxList() {
|
33
|
+
var _a, _b, _c;
|
34
|
+
const allSlots = Array.from((_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('slot')) !== null && _b !== void 0 ? _b : []);
|
35
|
+
const assignedElements = ((_c = allSlots === null || allSlots === void 0 ? void 0 : allSlots.filter((eachSlot) => eachSlot.name !== 'help-text')[0]) === null || _c === void 0 ? void 0 : _c.assignedElements()) || [];
|
36
|
+
return assignedElements.filter((element) => element.tagName.toLowerCase() === CHECKBOX_TAGNAME);
|
37
|
+
}
|
38
|
+
constructor() {
|
39
|
+
super();
|
40
|
+
/** @internal */
|
41
|
+
this.role = 'group';
|
42
|
+
this.addEventListener('keydown', this.handleKeyDown);
|
43
|
+
}
|
44
|
+
/**
|
45
|
+
* Handles the keydown event on the parent checkbox in the checkboxgroup.
|
46
|
+
* When the user presses the down arrow key, the focus is moved to the next checkbox in the checkboxgroup.
|
47
|
+
* When the user presses the up arrow key, the focus is moved to the previous checkbox in the checkboxgroup.
|
48
|
+
* @param event - The KeyboardEvent
|
49
|
+
*/
|
50
|
+
handleKeyDown(event) {
|
51
|
+
if (event.key === 'ArrowDown') {
|
52
|
+
this.navigate(event.target, 1);
|
53
|
+
}
|
54
|
+
if (event.key === 'ArrowUp') {
|
55
|
+
this.navigate(event.target, -1);
|
56
|
+
}
|
57
|
+
}
|
58
|
+
/**
|
59
|
+
* Navigate to the next or previous checkbox in the checkboxgroup based on the given origin and direction.
|
60
|
+
* @param origin - The element that triggered the event.
|
61
|
+
* @param direction - The direction of navigation, either -1 or 1.
|
62
|
+
*/
|
63
|
+
navigate(origin, direction) {
|
64
|
+
const getAllCheckboxIds = this.checkboxList.map((checkbox) => checkbox.id);
|
65
|
+
const currentIdIndex = getAllCheckboxIds.indexOf(origin.id);
|
66
|
+
// Negative modulo doesn't work directly with JS.
|
67
|
+
// https://stackoverflow.com/a/71167019/4745480
|
68
|
+
const futureIndex = (((currentIdIndex + direction) % getAllCheckboxIds.length)
|
69
|
+
+ getAllCheckboxIds.length) % getAllCheckboxIds.length;
|
70
|
+
this.children[futureIndex].focus();
|
71
|
+
}
|
72
|
+
render() {
|
73
|
+
const header = this.headerText
|
74
|
+
? html `<mdc-text class="header-text" tagname="${TEXT_TAGS.SPAN}" type="${TEXT_TYPE.BODY_LARGE_BOLD}">
|
75
|
+
${this.headerText}
|
76
|
+
</mdc-text>`
|
77
|
+
: nothing;
|
78
|
+
return html `
|
79
|
+
${header}
|
80
|
+
<slot name="help-text"></slot>
|
81
|
+
<slot></slot>
|
82
|
+
`;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
Checkboxgroup.styles = [...Component.styles, ...styles];
|
86
|
+
__decorate([
|
87
|
+
property({ type: String, attribute: 'header-text' }),
|
88
|
+
__metadata("design:type", String)
|
89
|
+
], Checkboxgroup.prototype, "headerText", void 0);
|
90
|
+
__decorate([
|
91
|
+
property({ type: String, reflect: true }),
|
92
|
+
__metadata("design:type", Object)
|
93
|
+
], Checkboxgroup.prototype, "role", void 0);
|
94
|
+
export default Checkboxgroup;
|
@@ -71,8 +71,15 @@ declare class Icon extends Component {
|
|
71
71
|
private abortController;
|
72
72
|
constructor();
|
73
73
|
/**
|
74
|
-
*
|
75
|
-
*
|
74
|
+
* Parse the icon string to an html element, set the attributes and
|
75
|
+
* return the icon element
|
76
|
+
*
|
77
|
+
* @param iconData - The icon string to be parsed
|
78
|
+
* @returns iconElement
|
79
|
+
*/
|
80
|
+
private prepareIconElement;
|
81
|
+
/**
|
82
|
+
* Fetches the icon (currently only svg) and sets state and attributes once fetched successfully
|
76
83
|
*
|
77
84
|
* This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
|
78
85
|
* If the request is aborted after the fetch() call has been fulfilled but before the response body has been read,
|
@@ -76,8 +76,24 @@ class Icon extends Component {
|
|
76
76
|
this.abortController = new AbortController(); // Initialize AbortController
|
77
77
|
}
|
78
78
|
/**
|
79
|
-
*
|
80
|
-
*
|
79
|
+
* Parse the icon string to an html element, set the attributes and
|
80
|
+
* return the icon element
|
81
|
+
*
|
82
|
+
* @param iconData - The icon string to be parsed
|
83
|
+
* @returns iconElement
|
84
|
+
*/
|
85
|
+
prepareIconElement(iconData) {
|
86
|
+
const iconElement = new DOMParser().parseFromString(iconData, 'text/html').body.children[0];
|
87
|
+
if (this.name) {
|
88
|
+
iconElement.setAttribute('data-name', this.name);
|
89
|
+
}
|
90
|
+
iconElement.setAttribute('part', 'icon');
|
91
|
+
// set aria-hidden=true for SVG to avoid screen readers
|
92
|
+
iconElement.setAttribute('aria-hidden', 'true');
|
93
|
+
return iconElement;
|
94
|
+
}
|
95
|
+
/**
|
96
|
+
* Fetches the icon (currently only svg) and sets state and attributes once fetched successfully
|
81
97
|
*
|
82
98
|
* This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
|
83
99
|
* If the request is aborted after the fetch() call has been fulfilled but before the response body has been read,
|
@@ -85,13 +101,28 @@ class Icon extends Component {
|
|
85
101
|
*/
|
86
102
|
async getIconData() {
|
87
103
|
if (this.iconProviderContext.value) {
|
88
|
-
const { fileExtension, url } = this.iconProviderContext.value;
|
104
|
+
const { fileExtension, url, iconsCache, shouldCache } = this.iconProviderContext.value;
|
89
105
|
if (url && fileExtension && this.name) {
|
106
|
+
// abort the previous fetch request if it is still pending
|
107
|
+
// before retreiving from cache
|
90
108
|
this.abortController.abort();
|
109
|
+
// check if icon is already fetched and stored in the iconsCache map
|
110
|
+
if (iconsCache.has(this.name)) {
|
111
|
+
const iconElement = this.prepareIconElement(iconsCache.get(this.name));
|
112
|
+
this.handleIconLoadedSuccess(iconElement);
|
113
|
+
return;
|
114
|
+
}
|
91
115
|
this.abortController = new AbortController();
|
92
116
|
try {
|
93
|
-
|
94
|
-
this.
|
117
|
+
// fetch icon from backend
|
118
|
+
const iconData = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
|
119
|
+
// parse the fetched icon string to an html element and set the attributes
|
120
|
+
const iconElement = this.prepareIconElement(iconData);
|
121
|
+
this.handleIconLoadedSuccess(iconElement);
|
122
|
+
if (shouldCache) {
|
123
|
+
// store the fetched icon string in the iconsCache map
|
124
|
+
iconsCache.set(this.name, iconData);
|
125
|
+
}
|
95
126
|
}
|
96
127
|
catch (error) {
|
97
128
|
this.handleIconLoadedFailure(error);
|
@@ -7,8 +7,8 @@
|
|
7
7
|
* @param fileExtension - The file extension of the icon
|
8
8
|
* @param signal - The signal to abort the fetch.
|
9
9
|
* It is used to cancel the fetch when the component is disconnected or updated.
|
10
|
-
* @returns
|
10
|
+
* @returns Response string from the fetch
|
11
11
|
* @throws Error if the response is not ok
|
12
12
|
*/
|
13
|
-
declare const dynamicSVGImport: (url: string, name: string, fileExtension: string, signal: AbortSignal) => Promise<
|
13
|
+
declare const dynamicSVGImport: (url: string, name: string, fileExtension: string, signal: AbortSignal) => Promise<string>;
|
14
14
|
export { dynamicSVGImport };
|
@@ -8,7 +8,7 @@
|
|
8
8
|
* @param fileExtension - The file extension of the icon
|
9
9
|
* @param signal - The signal to abort the fetch.
|
10
10
|
* It is used to cancel the fetch when the component is disconnected or updated.
|
11
|
-
* @returns
|
11
|
+
* @returns Response string from the fetch
|
12
12
|
* @throws Error if the response is not ok
|
13
13
|
*/
|
14
14
|
const dynamicSVGImport = async (url, name, fileExtension, signal) => {
|
@@ -16,12 +16,6 @@ const dynamicSVGImport = async (url, name, fileExtension, signal) => {
|
|
16
16
|
if (!response.ok) {
|
17
17
|
throw new Error('There was a problem while fetching the icon!');
|
18
18
|
}
|
19
|
-
|
20
|
-
const returnValue = new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
|
21
|
-
returnValue.setAttribute('data-name', name);
|
22
|
-
returnValue.setAttribute('part', 'icon');
|
23
|
-
// set aria-hidden=true for SVG to avoid screen readers
|
24
|
-
returnValue.setAttribute('aria-hidden', 'true');
|
25
|
-
return returnValue;
|
19
|
+
return response.text();
|
26
20
|
};
|
27
21
|
export { dynamicSVGImport };
|
@@ -8,6 +8,12 @@ import IconProviderContext from './iconprovider.context';
|
|
8
8
|
* that only a url has to be passed in from which the icons will be
|
9
9
|
* fetched.
|
10
10
|
*
|
11
|
+
* If `shouldCache` is set to true, the IconProvider will cache the icons
|
12
|
+
* in a Map to avoid fetching the same icon multiple times over the network.
|
13
|
+
* This is useful when the same icon is used multiple times in the application.
|
14
|
+
* Keep in mind that this cache is not persisted and will be lost when the
|
15
|
+
* IconProvider is removed from the DOM.
|
16
|
+
*
|
11
17
|
* @tagname mdc-iconprovider
|
12
18
|
*
|
13
19
|
* @slot - children
|
@@ -18,6 +24,24 @@ declare class IconProvider extends Provider<IconProviderContext> {
|
|
18
24
|
* Context object of the IconProvider, to be consumed by child components
|
19
25
|
*/
|
20
26
|
static get Context(): {
|
27
|
+
/**
|
28
|
+
* IconProvider component, which allows to be consumed from sub components
|
29
|
+
* (see `providerUtils.consume` for how to consume)
|
30
|
+
*
|
31
|
+
* Bundling icons will be up to the consumer of this component, such
|
32
|
+
* that only a url has to be passed in from which the icons will be
|
33
|
+
* fetched.
|
34
|
+
*
|
35
|
+
* If `shouldCache` is set to true, the IconProvider will cache the icons
|
36
|
+
* in a Map to avoid fetching the same icon multiple times over the network.
|
37
|
+
* This is useful when the same icon is used multiple times in the application.
|
38
|
+
* Keep in mind that this cache is not persisted and will be lost when the
|
39
|
+
* IconProvider is removed from the DOM.
|
40
|
+
*
|
41
|
+
* @tagname mdc-iconprovider
|
42
|
+
*
|
43
|
+
* @slot - children
|
44
|
+
*/
|
21
45
|
__context__: IconProviderContext;
|
22
46
|
};
|
23
47
|
/**
|
@@ -40,6 +64,13 @@ declare class IconProvider extends Provider<IconProviderContext> {
|
|
40
64
|
* @default 1
|
41
65
|
*/
|
42
66
|
size?: number;
|
67
|
+
/**
|
68
|
+
* If the IconProvider should cache the icons
|
69
|
+
* in a Map to avoid fetching the same icon multiple times
|
70
|
+
*
|
71
|
+
* @default false
|
72
|
+
*/
|
73
|
+
shouldCache?: boolean;
|
43
74
|
private updateValuesInContext;
|
44
75
|
protected updateContext(): void;
|
45
76
|
}
|
@@ -19,6 +19,12 @@ import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconp
|
|
19
19
|
* that only a url has to be passed in from which the icons will be
|
20
20
|
* fetched.
|
21
21
|
*
|
22
|
+
* If `shouldCache` is set to true, the IconProvider will cache the icons
|
23
|
+
* in a Map to avoid fetching the same icon multiple times over the network.
|
24
|
+
* This is useful when the same icon is used multiple times in the application.
|
25
|
+
* Keep in mind that this cache is not persisted and will be lost when the
|
26
|
+
* IconProvider is removed from the DOM.
|
27
|
+
*
|
22
28
|
* @tagname mdc-iconprovider
|
23
29
|
*
|
24
30
|
* @slot - children
|
@@ -46,6 +52,13 @@ class IconProvider extends Provider {
|
|
46
52
|
* @default 1
|
47
53
|
*/
|
48
54
|
this.size = DEFAULTS.SIZE;
|
55
|
+
/**
|
56
|
+
* If the IconProvider should cache the icons
|
57
|
+
* in a Map to avoid fetching the same icon multiple times
|
58
|
+
*
|
59
|
+
* @default false
|
60
|
+
*/
|
61
|
+
this.shouldCache = DEFAULTS.SHOULD_CACHE;
|
49
62
|
}
|
50
63
|
/**
|
51
64
|
* Context object of the IconProvider, to be consumed by child components
|
@@ -65,6 +78,7 @@ class IconProvider extends Provider {
|
|
65
78
|
}
|
66
79
|
this.context.value.url = this.url;
|
67
80
|
this.context.value.size = this.size;
|
81
|
+
this.context.value.shouldCache = this.shouldCache;
|
68
82
|
if (this.lengthUnit && ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
|
69
83
|
this.context.value.lengthUnit = this.lengthUnit;
|
70
84
|
}
|
@@ -78,7 +92,8 @@ class IconProvider extends Provider {
|
|
78
92
|
if (this.context.value.fileExtension !== this.fileExtension
|
79
93
|
|| this.context.value.url !== this.url
|
80
94
|
|| this.context.value.lengthUnit !== this.lengthUnit
|
81
|
-
|| this.context.value.size !== this.size
|
95
|
+
|| this.context.value.size !== this.size
|
96
|
+
|| this.context.value.shouldCache !== this.shouldCache) {
|
82
97
|
this.updateValuesInContext();
|
83
98
|
this.context.updateObservers();
|
84
99
|
}
|
@@ -100,4 +115,8 @@ __decorate([
|
|
100
115
|
property({ type: Number, reflect: true }),
|
101
116
|
__metadata("design:type", Number)
|
102
117
|
], IconProvider.prototype, "size", void 0);
|
118
|
+
__decorate([
|
119
|
+
property({ type: Boolean, attribute: 'should-cache', reflect: true }),
|
120
|
+
__metadata("design:type", Boolean)
|
121
|
+
], IconProvider.prototype, "shouldCache", void 0);
|
103
122
|
export default IconProvider;
|
@@ -1,6 +1,9 @@
|
|
1
1
|
import { createContext } from '@lit/context';
|
2
2
|
import { TAG_NAME } from './iconprovider.constants';
|
3
3
|
class IconProviderContext {
|
4
|
+
constructor() {
|
5
|
+
this.iconsCache = new Map();
|
6
|
+
}
|
4
7
|
}
|
5
8
|
// create typed lit context as part of the IconProviderContext
|
6
9
|
IconProviderContext.context = createContext(TAG_NAME);
|