@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.
Files changed (32) hide show
  1. package/dist/browser/index.js +88 -75
  2. package/dist/browser/index.js.map +4 -4
  3. package/dist/components/checkbox/checkbox.component.d.ts +9 -1
  4. package/dist/components/checkbox/checkbox.component.js +21 -3
  5. package/dist/components/checkboxgroup/checkboxgroup.component.d.ts +43 -0
  6. package/dist/components/checkboxgroup/checkboxgroup.component.js +94 -0
  7. package/dist/components/checkboxgroup/checkboxgroup.constants.d.ts +2 -0
  8. package/dist/components/checkboxgroup/checkboxgroup.constants.js +3 -0
  9. package/dist/components/checkboxgroup/checkboxgroup.styles.d.ts +2 -0
  10. package/dist/components/checkboxgroup/checkboxgroup.styles.js +9 -0
  11. package/dist/components/checkboxgroup/index.d.ts +8 -0
  12. package/dist/components/checkboxgroup/index.js +5 -0
  13. package/dist/components/icon/icon.component.d.ts +9 -2
  14. package/dist/components/icon/icon.component.js +36 -5
  15. package/dist/components/icon/icon.utils.d.ts +2 -2
  16. package/dist/components/icon/icon.utils.js +2 -8
  17. package/dist/components/iconprovider/iconprovider.component.d.ts +31 -0
  18. package/dist/components/iconprovider/iconprovider.component.js +20 -1
  19. package/dist/components/iconprovider/iconprovider.constants.d.ts +1 -0
  20. package/dist/components/iconprovider/iconprovider.constants.js +1 -0
  21. package/dist/components/iconprovider/iconprovider.context.d.ts +2 -0
  22. package/dist/components/iconprovider/iconprovider.context.js +3 -0
  23. package/dist/custom-elements.json +1012 -846
  24. package/dist/index.d.ts +2 -1
  25. package/dist/index.js +2 -1
  26. package/dist/react/checkboxgroup/index.d.ts +17 -0
  27. package/dist/react/checkboxgroup/index.js +26 -0
  28. package/dist/react/iconprovider/index.d.ts +6 -0
  29. package/dist/react/iconprovider/index.js +6 -0
  30. package/dist/react/index.d.ts +4 -3
  31. package/dist/react/index.js +4 -3
  32. 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
- this.dispatchEvent(new Event(event.type, event));
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;
@@ -0,0 +1,2 @@
1
+ declare const TAG_NAME: "mdc-checkboxgroup";
2
+ export { TAG_NAME };
@@ -0,0 +1,3 @@
1
+ import utils from '../../utils/tag-name';
2
+ const TAG_NAME = utils.constructTagName('checkboxgroup');
3
+ export { TAG_NAME };
@@ -0,0 +1,2 @@
1
+ declare const _default: import("lit").CSSResult[];
2
+ export default _default;
@@ -0,0 +1,9 @@
1
+ import { css } from 'lit';
2
+ const styles = css `
3
+ :host {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: 0.75rem;
7
+ }
8
+ `;
9
+ export default [styles];
@@ -0,0 +1,8 @@
1
+ import CheckboxGroup from './checkboxgroup.component';
2
+ import '../text';
3
+ declare global {
4
+ interface HTMLElementTagNameMap {
5
+ ['mdc-checkboxgroup']: CheckboxGroup;
6
+ }
7
+ }
8
+ export default CheckboxGroup;
@@ -0,0 +1,5 @@
1
+ import CheckboxGroup from './checkboxgroup.component';
2
+ import { TAG_NAME } from './checkboxgroup.constants';
3
+ import '../text';
4
+ CheckboxGroup.register(TAG_NAME);
5
+ export default CheckboxGroup;
@@ -71,8 +71,15 @@ declare class Icon extends Component {
71
71
  private abortController;
72
72
  constructor();
73
73
  /**
74
- * Get Icon Data function which will fetch the icon (currently only svg)
75
- * and sets state and attributes once fetched successfully
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
- * Get Icon Data function which will fetch the icon (currently only svg)
80
- * and sets state and attributes once fetched successfully
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
- const iconHtml = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
94
- this.handleIconLoadedSuccess(iconHtml);
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 The valid icon element
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<Element>;
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 The valid icon element
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
- const iconResponse = await response.text();
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;
@@ -6,5 +6,6 @@ declare const DEFAULTS: {
6
6
  readonly FILE_EXTENSION: "svg";
7
7
  readonly LENGTH_UNIT: "em";
8
8
  readonly SIZE: number;
9
+ readonly SHOULD_CACHE: false;
9
10
  };
10
11
  export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };
@@ -12,5 +12,6 @@ const DEFAULTS = {
12
12
  FILE_EXTENSION: 'svg',
13
13
  LENGTH_UNIT: 'em',
14
14
  SIZE: LENGTH_UNIT_SIZE.em,
15
+ SHOULD_CACHE: false,
15
16
  };
16
17
  export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };
@@ -3,6 +3,8 @@ declare class IconProviderContext {
3
3
  url?: string;
4
4
  lengthUnit?: string;
5
5
  size?: number;
6
+ iconsCache: Map<string, string>;
7
+ shouldCache?: boolean;
6
8
  static readonly context: {
7
9
  __context__: IconProviderContext;
8
10
  };
@@ -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);