@momentum-design/components 0.27.2 → 0.27.3

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

@@ -13,7 +13,7 @@ import styles from './icon.styles';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
 import IconProvider from '../iconprovider/iconprovider.component';
-import { dynamicSVGImport } from './icon.utils';
+import { svgFetch } from './icon.utils';
 import { DEFAULTS } from './icon.constants';
 /**
  * Icon component that dynamically displays SVG icons based on a valid name.
@@ -101,8 +101,8 @@ class Icon extends Component {
      */
     async getIconData() {
         if (this.iconProviderContext.value) {
-            const { fileExtension, url, cacheName, cacheStrategy } = this.iconProviderContext.value;
-            if (url && fileExtension && this.name) {
+            const { fileExtension, url, cacheName, iconSet, cacheStrategy } = this.iconProviderContext.value;
+            if (iconSet === 'custom-icons' && url && fileExtension && this.name) {
                 // function to abort the fetch request and create a new signal
                 // (directly passing the abortcontroller to the fetch request per reference
                 // will not work due to JS call-by-sharing behavior)
@@ -111,25 +111,38 @@ class Icon extends Component {
                     this.abortController = new AbortController();
                     return this.abortController.signal;
                 };
-                try {
-                    // fetch icon data (including caching logic)
-                    const iconData = await dynamicSVGImport({
-                        url,
-                        name: this.name,
-                        fileExtension,
-                        cacheName,
-                        cacheStrategy,
-                        renewSignal,
-                    });
+                // fetch icon data (including caching logic)
+                return svgFetch({
+                    url,
+                    name: this.name,
+                    fileExtension,
+                    cacheName,
+                    cacheStrategy,
+                    renewSignal,
+                })
+                    .then((iconData) => {
                     // parse the fetched icon string to an html element and set the attributes
                     const iconElement = this.prepareIconElement(iconData);
                     this.handleIconLoadedSuccess(iconElement);
-                }
-                catch (error) {
+                })
+                    .catch((error) => {
                     this.handleIconLoadedFailure(error);
-                }
+                });
+            }
+            if (iconSet === 'momentum-icons' && this.name) {
+                // dynamic import of the lit template from the momentum icons package
+                return import(`@momentum-design/icons/dist/ts/${this.name}.ts`)
+                    .then((module) => {
+                    this.handleIconLoadedSuccess(module.default());
+                })
+                    .catch((error) => {
+                    this.handleIconLoadedFailure(error);
+                });
             }
         }
+        const noIconProviderError = new Error('IconProvider not found or not properly set up.');
+        this.handleIconLoadedFailure(noIconProviderError);
+        return Promise.reject(noIconProviderError);
     }
     /**
      * Sets the iconData state to the fetched icon.

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

@@ -28,5 +28,5 @@ interface Args {
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-declare const dynamicSVGImport: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }: Args) => Promise<string>;
-export { dynamicSVGImport };
+declare const svgFetch: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }: Args) => Promise<string>;
+export { svgFetch };

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

@@ -33,7 +33,7 @@ const fetchIcon = async (request) => fetch(request).then((response) => {
  * @returns Response string from the fetch
  * @throws Error if the response is not ok
  */
-const dynamicSVGImport = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }) => {
+const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, }) => {
     // abort the previous fetch request if it is still pending
     // and create a new signal
     const signal = renewSignal();
@@ -76,4 +76,4 @@ const dynamicSVGImport = async ({ url, name, fileExtension, cacheStrategy, cache
         throw new Error(`Error in caching the Icon ${name}, ${error}`);
     }));
 };
-export { dynamicSVGImport };
+export { svgFetch };

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

@@ -1,15 +1,22 @@
 import { Provider } from '../../models';
 import IconProviderContext from './iconprovider.context';
+import type { CacheStrategy, IconSet } from './iconprovider.types';
 /**
  * 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.
+ * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
+ * If `momentum-icons` is selected, the icons will be fetched from the
+ * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-designs` package installed and the
+ * build tooling needs to support dynamic imports.
  *
- * If `cacheStrategy` is provided, the IconProvider will cache the icons
- * in the selected cache (either web-api-cache or in-memory-cache),
+ * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the icons will be fetched and
+ * the consumer needs to make sure to bundle the icons in the application.
+ *
+ * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the
+ * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),
  * 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.
  * To consider:
@@ -28,36 +35,31 @@ 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 `cacheStrategy` is provided, the IconProvider will cache the icons
-         * in the selected cache (either web-api-cache or in-memory-cache),
-         * 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.
-         * To consider:
-         * - The `in-memory-cache` is not persisted and will be lost when the
-         * IconProvider is removed from the DOM.
-         * - The `web-api-cache` is persisted, but only works in https environments
-         * (https://developer.mozilla.org/en-US/docs/Web/API/Cache).
-         *
-         * @tagname mdc-iconprovider
-         *
-         * @slot - children
-         */
         __context__: IconProviderContext;
     };
+    /**
+     * Icon set to be used
+     *
+     * If `momentum-icons` is selected, the icons will be fetched from the
+     * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+     * This requires the consumer to have the `@momentum-designs` package installed and the
+     * build tooling needs to support dynamic imports.
+     *
+     * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+     * This requires the consumer to provide a URL from which the icons will be fetched and
+     * the consumer needs to make sure to bundle the icons in the application.
+     *
+     * @default momentum-icons
+     */
+    iconSet?: IconSet;
     /**
      * Url of where icons will be fetched from
+     * (if Icon set is `custom-icons`, this will be the base url)
      */
     url?: string;
     /**
      * File extension of icons
+     * (if Icon set is `custom-icons`, this will be the file extension for icons)
      * @default svg
      */
     fileExtension?: string;
@@ -75,6 +77,8 @@ declare class IconProvider extends Provider<IconProviderContext> {
     /**
      * Icons Cache Strategy to use
      *
+     * **Can only be used if Icon set is `custom-icons`**
+     *
      * Choose `in-memory-cache` to cache icons in a JS cache (in-memory cache).
      * Choose `web-cache-api` to cache icons using the Web Cache API.
      *
@@ -83,9 +87,9 @@ declare class IconProvider extends Provider<IconProviderContext> {
      * If not provided or invalid value provided, the icons will not be cached.
      * @default undefined
      */
-    cacheStrategy?: 'in-memory-cache' | 'web-cache-api';
+    cacheStrategy?: CacheStrategy;
     /**
-     * Icons Cache Name to use
+     * Icons Cache Name to use (cache strategy must be provided)
      *
      * If provided, Icons inside the provider will be cached in the
      * cache (determined by `cache-strategy`) with the provided name.

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

@@ -15,12 +15,18 @@ import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconp
  * 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.
+ * Attribute `iconSet` can be set to either `momentum-icons` or `custom-icons`.
+ * If `momentum-icons` is selected, the icons will be fetched from the
+ * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-designs` package installed and the
+ * build tooling needs to support dynamic imports.
  *
- * If `cacheStrategy` is provided, the IconProvider will cache the icons
- * in the selected cache (either web-api-cache or in-memory-cache),
+ * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the icons will be fetched and
+ * the consumer needs to make sure to bundle the icons in the application.
+ *
+ * If `cacheStrategy` is provided (only works with iconSet = `custom-icons`), the
+ * IconProvider will cache the icons in the selected cache (either web-api-cache or in-memory-cache),
  * 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.
  * To consider:
@@ -40,8 +46,24 @@ class IconProvider extends Provider {
             context: IconProviderContext.context,
             initialValue: new IconProviderContext(),
         });
+        /**
+         * Icon set to be used
+         *
+         * If `momentum-icons` is selected, the icons will be fetched from the
+         * Momentum Design System icon set per a dynamic JS Import (no need to provide a URL).
+         * This requires the consumer to have the `@momentum-designs` package installed and the
+         * build tooling needs to support dynamic imports.
+         *
+         * If `custom-icons` is selected, the icons will be fetched from the provided URL.
+         * This requires the consumer to provide a URL from which the icons will be fetched and
+         * the consumer needs to make sure to bundle the icons in the application.
+         *
+         * @default momentum-icons
+         */
+        this.iconSet = DEFAULTS.ICON_SET;
         /**
          * File extension of icons
+         * (if Icon set is `custom-icons`, this will be the file extension for icons)
          * @default svg
          */
         this.fileExtension = DEFAULTS.FILE_EXTENSION;
@@ -73,6 +95,7 @@ class IconProvider extends Provider {
             this.fileExtension = DEFAULTS.FILE_EXTENSION;
             this.context.value.fileExtension = DEFAULTS.FILE_EXTENSION;
         }
+        this.context.value.iconSet = this.iconSet;
         this.context.value.url = this.url;
         this.context.value.size = this.size;
         this.context.value.cacheName = this.cacheName;
@@ -88,6 +111,7 @@ class IconProvider extends Provider {
     }
     updateContext() {
         if (this.context.value.fileExtension !== this.fileExtension
+            || this.context.value.iconSet !== this.iconSet
             || this.context.value.url !== this.url
             || this.context.value.lengthUnit !== this.lengthUnit
             || this.context.value.size !== this.size
@@ -98,6 +122,10 @@ class IconProvider extends Provider {
         }
     }
 }
+__decorate([
+    property({ type: String, attribute: 'icon-set', reflect: true }),
+    __metadata("design:type", String)
+], IconProvider.prototype, "iconSet", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

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

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

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

@@ -13,5 +13,6 @@ const DEFAULTS = {
     LENGTH_UNIT: 'em',
     SIZE: LENGTH_UNIT_SIZE.em,
     SHOULD_CACHE: false,
+    ICON_SET: 'momentum-icons',
 };
 export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS, LENGTH_UNIT_SIZE };

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

@@ -1,10 +1,12 @@
+import type { IconSet, CacheStrategy } from './iconprovider.types';
 declare class IconProviderContext {
+    iconSet?: IconSet;
     fileExtension?: string;
     url?: string;
     lengthUnit?: string;
     size?: number;
     cacheName?: string;
-    cacheStrategy?: 'in-memory-cache' | 'web-cache-api';
+    cacheStrategy?: CacheStrategy;
     static readonly context: {
         __context__: IconProviderContext;
     };

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

@@ -0,0 +1,3 @@
+type IconSet = 'momentum-icons' | 'custom-icons';
+type CacheStrategy = 'in-memory-cache' | 'web-cache-api';
+export type { IconSet, CacheStrategy };

package/dist/components/iconprovider/iconprovider.types.js

@@ -0,0 +1 @@
+export {};