@momentum-design/components 0.22.3 → 0.22.5

package/dist/components/icon/icon.component.d.ts

@@ -71,8 +71,15 @@ declare class Icon extends Component {
     private abortController;
     constructor();
     /**
-     * Get Icon Data function which will fetch the icon (currently only svg)
-     * and sets state and attributes once fetched successfully
+     * Parse the icon string to an html element, set the attributes and
+     * return the icon element
+     *
+     * @param iconData - The icon string to be parsed
+     * @returns iconElement
+     */
+    private prepareIconElement;
+    /**
+     * Fetches the icon (currently only svg) and sets state and attributes once fetched successfully
      *
      * This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
      * If the request is aborted after the fetch() call has been fulfilled but before the response body has been read,

package/dist/components/icon/icon.component.js

@@ -76,8 +76,24 @@ class Icon extends Component {
         this.abortController = new AbortController(); // Initialize AbortController
     }
     /**
-     * Get Icon Data function which will fetch the icon (currently only svg)
-     * and sets state and attributes once fetched successfully
+     * Parse the icon string to an html element, set the attributes and
+     * return the icon element
+     *
+     * @param iconData - The icon string to be parsed
+     * @returns iconElement
+     */
+    prepareIconElement(iconData) {
+        const iconElement = new DOMParser().parseFromString(iconData, 'text/html').body.children[0];
+        if (this.name) {
+            iconElement.setAttribute('data-name', this.name);
+        }
+        iconElement.setAttribute('part', 'icon');
+        // set aria-hidden=true for SVG to avoid screen readers
+        iconElement.setAttribute('aria-hidden', 'true');
+        return iconElement;
+    }
+    /**
+     * Fetches the icon (currently only svg) and sets state and attributes once fetched successfully
      *
      * This method uses abortController.signal to cancel the fetch request when the component is disconnected or updated.
      * 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 {
      */
     async getIconData() {
         if (this.iconProviderContext.value) {
-            const { fileExtension, url } = this.iconProviderContext.value;
+            const { fileExtension, url, iconsCache, shouldCache } = this.iconProviderContext.value;
             if (url && fileExtension && this.name) {
+                // abort the previous fetch request if it is still pending
+                // before retreiving from cache
                 this.abortController.abort();
+                // check if icon is already fetched and stored in the iconsCache map
+                if (iconsCache.has(this.name)) {
+                    const iconElement = this.prepareIconElement(iconsCache.get(this.name));
+                    this.handleIconLoadedSuccess(iconElement);
+                    return;
+                }
                 this.abortController = new AbortController();
                 try {
-                    const iconHtml = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
-                    this.handleIconLoadedSuccess(iconHtml);
+                    // fetch icon from backend
+                    const iconData = await dynamicSVGImport(url, this.name, fileExtension, this.abortController.signal);
+                    // parse the fetched icon string to an html element and set the attributes
+                    const iconElement = this.prepareIconElement(iconData);
+                    this.handleIconLoadedSuccess(iconElement);
+                    if (shouldCache) {
+                        // store the fetched icon string in the iconsCache map
+                        iconsCache.set(this.name, iconData);
+                    }
                 }
                 catch (error) {
                     this.handleIconLoadedFailure(error);

package/dist/components/icon/icon.utils.d.ts

@@ -7,8 +7,8 @@
  * @param fileExtension - The file extension of the icon
  * @param signal - The signal to abort the fetch.
  * It is used to cancel the fetch when the component is disconnected or updated.
- * @returns The valid icon element
+ * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-declare const dynamicSVGImport: (url: string, name: string, fileExtension: string, signal: AbortSignal) => Promise<Element>;
+declare const dynamicSVGImport: (url: string, name: string, fileExtension: string, signal: AbortSignal) => Promise<string>;
 export { dynamicSVGImport };

package/dist/components/icon/icon.utils.js

@@ -8,7 +8,7 @@
  * @param fileExtension - The file extension of the icon
  * @param signal - The signal to abort the fetch.
  * It is used to cancel the fetch when the component is disconnected or updated.
- * @returns The valid icon element
+ * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
 const dynamicSVGImport = async (url, name, fileExtension, signal) => {
@@ -16,12 +16,6 @@ const dynamicSVGImport = async (url, name, fileExtension, signal) => {
     if (!response.ok) {
         throw new Error('There was a problem while fetching the icon!');
     }
-    const iconResponse = await response.text();
-    const returnValue = new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0];
-    returnValue.setAttribute('data-name', name);
-    returnValue.setAttribute('part', 'icon');
-    // set aria-hidden=true for SVG to avoid screen readers
-    returnValue.setAttribute('aria-hidden', 'true');
-    return returnValue;
+    return response.text();
 };
 export { dynamicSVGImport };

package/dist/components/iconprovider/iconprovider.component.d.ts

@@ -8,6 +8,12 @@ import IconProviderContext from './iconprovider.context';
  * that only a url has to be passed in from which the icons will be
  * fetched.
  *
+ * If `shouldCache` is set to true, the IconProvider will cache the icons
+ * in a Map to avoid fetching the same icon multiple times over the network.
+ * This is useful when the same icon is used multiple times in the application.
+ * Keep in mind that this cache is not persisted and will be lost when the
+ * IconProvider is removed from the DOM.
+ *
  * @tagname mdc-iconprovider
  *
  * @slot - children
@@ -18,6 +24,24 @@ declare class IconProvider extends Provider<IconProviderContext> {
      * Context object of the IconProvider, to be consumed by child components
      */
     static get Context(): {
+        /**
+         * IconProvider component, which allows to be consumed from sub components
+         * (see `providerUtils.consume` for how to consume)
+         *
+         * Bundling icons will be up to the consumer of this component, such
+         * that only a url has to be passed in from which the icons will be
+         * fetched.
+         *
+         * If `shouldCache` is set to true, the IconProvider will cache the icons
+         * in a Map to avoid fetching the same icon multiple times over the network.
+         * This is useful when the same icon is used multiple times in the application.
+         * Keep in mind that this cache is not persisted and will be lost when the
+         * IconProvider is removed from the DOM.
+         *
+         * @tagname mdc-iconprovider
+         *
+         * @slot - children
+         */
         __context__: IconProviderContext;
     };
     /**
@@ -40,6 +64,13 @@ declare class IconProvider extends Provider<IconProviderContext> {
      * @default 1
      */
     size?: number;
+    /**
+     * If the IconProvider should cache the icons
+     * in a Map to avoid fetching the same icon multiple times
+     *
+     * @default false
+     */
+    shouldCache?: boolean;
     private updateValuesInContext;
     protected updateContext(): void;
 }

package/dist/components/iconprovider/iconprovider.component.js

@@ -19,6 +19,12 @@ import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconp
  * that only a url has to be passed in from which the icons will be
  * fetched.
  *
+ * If `shouldCache` is set to true, the IconProvider will cache the icons
+ * in a Map to avoid fetching the same icon multiple times over the network.
+ * This is useful when the same icon is used multiple times in the application.
+ * Keep in mind that this cache is not persisted and will be lost when the
+ * IconProvider is removed from the DOM.
+ *
  * @tagname mdc-iconprovider
  *
  * @slot - children
@@ -46,6 +52,13 @@ class IconProvider extends Provider {
          * @default 1
          */
         this.size = DEFAULTS.SIZE;
+        /**
+         * If the IconProvider should cache the icons
+         * in a Map to avoid fetching the same icon multiple times
+         *
+         * @default false
+         */
+        this.shouldCache = DEFAULTS.SHOULD_CACHE;
     }
     /**
      * Context object of the IconProvider, to be consumed by child components
@@ -65,6 +78,7 @@ class IconProvider extends Provider {
         }
         this.context.value.url = this.url;
         this.context.value.size = this.size;
+        this.context.value.shouldCache = this.shouldCache;
         if (this.lengthUnit && ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
             this.context.value.lengthUnit = this.lengthUnit;
         }
@@ -78,7 +92,8 @@ class IconProvider extends Provider {
         if (this.context.value.fileExtension !== this.fileExtension
             || this.context.value.url !== this.url
             || this.context.value.lengthUnit !== this.lengthUnit
-            || this.context.value.size !== this.size) {
+            || this.context.value.size !== this.size
+            || this.context.value.shouldCache !== this.shouldCache) {
             this.updateValuesInContext();
             this.context.updateObservers();
         }
@@ -100,4 +115,8 @@ __decorate([
     property({ type: Number, reflect: true }),
     __metadata("design:type", Number)
 ], IconProvider.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'should-cache', reflect: true }),
+    __metadata("design:type", Boolean)
+], IconProvider.prototype, "shouldCache", void 0);
 export default IconProvider;

package/dist/components/iconprovider/iconprovider.constants.d.ts

@@ -6,5 +6,6 @@ declare const DEFAULTS: {
     readonly FILE_EXTENSION: "svg";
     readonly LENGTH_UNIT: "em";
     readonly SIZE: number;
+    readonly SHOULD_CACHE: false;
 };
 export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

package/dist/components/iconprovider/iconprovider.constants.js

@@ -12,5 +12,6 @@ const DEFAULTS = {
     FILE_EXTENSION: 'svg',
     LENGTH_UNIT: 'em',
     SIZE: LENGTH_UNIT_SIZE.em,
+    SHOULD_CACHE: false,
 };
 export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

package/dist/components/iconprovider/iconprovider.context.d.ts

@@ -3,6 +3,8 @@ declare class IconProviderContext {
     url?: string;
     lengthUnit?: string;
     size?: number;
+    iconsCache: Map<string, string>;
+    shouldCache?: boolean;
     static readonly context: {
         __context__: IconProviderContext;
     };

package/dist/components/iconprovider/iconprovider.context.js

@@ -1,6 +1,9 @@
 import { createContext } from '@lit/context';
 import { TAG_NAME } from './iconprovider.constants';
 class IconProviderContext {
+    constructor() {
+        this.iconsCache = new Map();
+    }
 }
 // create typed lit context as part of the IconProviderContext
 IconProviderContext.context = createContext(TAG_NAME);