@momentum-design/components 0.116.2 → 0.117.1

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

@@ -1,4 +1,4 @@
-import type { CacheStrategy } from '../../utils/icon-cache';
+import type { CacheStrategy } from '../../utils/assets-cache';
 interface Args {
     url: string;
     name: string;

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

@@ -1,4 +1,4 @@
-import { iconsCache } from '../../utils/icon-cache';
+import { assetsCache } from '../../utils/assets-cache';
 /**
  * Utility function for fetching the icon from the provided `request`.
  * It will throw an error if the response is not ok.
@@ -45,7 +45,7 @@ const svgFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, re
     if (!cacheName || !cacheStrategy || !['in-memory-cache', 'web-cache-api'].includes(cacheStrategy)) {
         return fetchIcon(request).then(response => response.text());
     }
-    return iconsCache(cacheName, cacheStrategy).then(iconsCache => iconsCache
+    return assetsCache(cacheName, cacheStrategy).then(iconsCache => iconsCache
         .get(request)
         .then(responseFromCache => {
         // **If entry in cache, return**

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

@@ -8,7 +8,7 @@ import type { CacheStrategy, IconSet } from './iconprovider.types';
  * 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
+ * This requires the consumer to have the `@momentum-design/icons` 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.
@@ -94,6 +94,8 @@ declare class IconProvider extends Provider<IconProviderContext> {
      * If provided, Icons inside the provider will be cached in the
      * cache (determined by `cache-strategy`) with the provided name.
      *
+     * Icons cache name must be unique, independent from other asset caches.
+     *
      * NOTE: `cache-name` requires `cache-strategy` to be set.
      *
      * If not provided, the icons will not be cached.

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

@@ -18,7 +18,7 @@ import { ALLOWED_FILE_EXTENSIONS, DEFAULTS, ALLOWED_LENGTH_UNITS } from './iconp
  * 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
+ * This requires the consumer to have the `@momentum-design/icons` 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.

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

@@ -6,7 +6,6 @@ declare const DEFAULTS: {
     readonly FILE_EXTENSION: "svg";
     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

@@ -12,7 +12,6 @@ const DEFAULTS = {
     FILE_EXTENSION: 'svg',
     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/illustration/illustration.component.d.ts

@@ -0,0 +1,91 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { IllustrationNames } from './illustration.types';
+/**
+ * Illustration component that dynamically displays SVG illustrations based on a valid name.
+ *
+ * This component must be mounted within an `IllustrationProvider` component.
+ *
+ * The `IllustrationProvider` defines the source URL from which illustrations are consumed.
+ * The `Illustration` component accepts a `name` attribute, which corresponds to
+ * the file name of the illustration to be loaded from the specified URL.
+ *
+ * Once fetched, the illustration will be rendered. If the fetching process is unsuccessful,
+ * no illustration will be displayed.
+ *
+ * Default sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.
+ * Coloring of the illustration is currently baked into the svg, meaning that the illustration name determines
+ * the coloring.
+ *
+ * Regarding accessibility, there are two types of illustrations: decorative and informative.
+ *
+ * ### Decorative Illustrations
+ * - Decorative illustrations do not convey any essential information to the content of a page.
+ * - They should be hidden from screen readers (SR) to prevent confusion for users.
+ * - For decorative illustrations, an `aria-label` is not required, and the `role` will be set to null.
+ *
+ * ### Informative Illustrations
+ * - Informative illustrations convey important information that is not adequately represented
+ *   by surrounding text or components.
+ * - They provide valuable context and must be announced by assistive technologies.
+ * - For informative illustrations, an `aria-label` is required, and the `role` will be set to "img" automatically.
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
+ *   the role will be unset.
+ *
+ * @tagname mdc-illustration
+ *
+ * @cssproperty --mdc-illustration-size - Allows customization of the illustration size.
+ *
+ * @csspart illustration - The svg inside the illustration element.
+ */
+declare class Illustration extends Component {
+    private illustrationData?;
+    /**
+     * Name of the illustration (= filename)
+     */
+    name?: IllustrationNames;
+    /**
+     * Aria-label attribute to be set for accessibility
+     */
+    ariaLabel: string | null;
+    /**
+     * Aria-labelledby attribute to be set for accessibility
+     */
+    ariaLabelledby: string | null;
+    private readonly illustrationProviderContext;
+    private abortController?;
+    constructor();
+    /**
+     * Parse the illustration string to an html element, set the attributes and
+     * return the illustration element
+     *
+     * @param illustrationData - The illustration string to be parsed
+     * @returns illustrationElement
+     */
+    private prepareIllustrationElement;
+    /**
+     * Fetches the illustration (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,
+     * then attempting to read the response body will reject with an AbortError exception.
+     */
+    private getIllustrationData;
+    /**
+     * Sets the illustrationData state to the fetched illustration.
+     * Dispatches a 'load' event on the component once the illustration has been successfully loaded.
+     * @param illustrationHtml - The illustration html element which has been fetched from the illustration provider.
+     */
+    private handleIllustrationLoadedSuccess;
+    /**
+     * Dispatches an 'error' event on the component when the illustration fetching has failed.
+     * This event bubbles and is cancelable.
+     * The error detail is set to the error object.
+     */
+    private handleIllustrationLoadedFailure;
+    updated(changedProperties: Map<string, any>): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Illustration;

package/dist/components/illustration/illustration.component.js

@@ -0,0 +1,220 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { Component } from '../../models';
+import providerUtils from '../../utils/provider';
+import IllustrationProvider from '../illustrationprovider/illustrationprovider.component';
+import styles from './illustration.styles';
+import { svgFetch } from './illustration.utils';
+import { DEFAULTS } from './illustration.constants';
+/**
+ * Illustration component that dynamically displays SVG illustrations based on a valid name.
+ *
+ * This component must be mounted within an `IllustrationProvider` component.
+ *
+ * The `IllustrationProvider` defines the source URL from which illustrations are consumed.
+ * The `Illustration` component accepts a `name` attribute, which corresponds to
+ * the file name of the illustration to be loaded from the specified URL.
+ *
+ * Once fetched, the illustration will be rendered. If the fetching process is unsuccessful,
+ * no illustration will be displayed.
+ *
+ * Default sizing of the illustration is controlled by choosing a different illustration name, can be overridden with the `--mdc-illustration-size` CSS property.
+ * Coloring of the illustration is currently baked into the svg, meaning that the illustration name determines
+ * the coloring.
+ *
+ * Regarding accessibility, there are two types of illustrations: decorative and informative.
+ *
+ * ### Decorative Illustrations
+ * - Decorative illustrations do not convey any essential information to the content of a page.
+ * - They should be hidden from screen readers (SR) to prevent confusion for users.
+ * - For decorative illustrations, an `aria-label` is not required, and the `role` will be set to null.
+ *
+ * ### Informative Illustrations
+ * - Informative illustrations convey important information that is not adequately represented
+ *   by surrounding text or components.
+ * - They provide valuable context and must be announced by assistive technologies.
+ * - For informative illustrations, an `aria-label` is required, and the `role` will be set to "img" automatically.
+ * - If an `aria-label` is provided, the role will be set to 'img'; if it is absent,
+ *   the role will be unset.
+ *
+ * @tagname mdc-illustration
+ *
+ * @cssproperty --mdc-illustration-size - Allows customization of the illustration size.
+ *
+ * @csspart illustration - The svg inside the illustration element.
+ */
+class Illustration extends Component {
+    constructor() {
+        super();
+        /**
+         * Name of the illustration (= filename)
+         */
+        this.name = DEFAULTS.NAME;
+        /**
+         * Aria-label attribute to be set for accessibility
+         */
+        this.ariaLabel = null;
+        /**
+         * Aria-labelledby attribute to be set for accessibility
+         */
+        this.ariaLabelledby = null;
+        this.illustrationProviderContext = providerUtils.consume({
+            host: this,
+            context: IllustrationProvider.Context,
+        });
+        this.abortController = new AbortController(); // Initialize AbortController
+    }
+    /**
+     * Parse the illustration string to an html element, set the attributes and
+     * return the illustration element
+     *
+     * @param illustrationData - The illustration string to be parsed
+     * @returns illustrationElement
+     */
+    prepareIllustrationElement(illustrationData) {
+        const illustrationElement = new DOMParser().parseFromString(illustrationData, 'text/html').body.children[0];
+        if (this.name) {
+            illustrationElement.setAttribute('data-name', this.name);
+        }
+        illustrationElement.setAttribute('part', 'illustration');
+        // set aria-hidden=true for SVG to avoid screen readers
+        illustrationElement.setAttribute('aria-hidden', 'true');
+        return illustrationElement;
+    }
+    /**
+     * Fetches the illustration (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,
+     * then attempting to read the response body will reject with an AbortError exception.
+     */
+    async getIllustrationData() {
+        if (this.illustrationProviderContext.value) {
+            const { fileExtension, url, cacheName, illustrationSet, cacheStrategy } = this.illustrationProviderContext.value;
+            if (illustrationSet === 'custom-illustrations' && 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)
+                const renewSignal = () => {
+                    var _a;
+                    (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+                    this.abortController = new AbortController();
+                    return this.abortController.signal;
+                };
+                // fetch illustration data (including caching logic)
+                return svgFetch({
+                    url,
+                    name: this.name,
+                    fileExtension,
+                    cacheName,
+                    cacheStrategy,
+                    renewSignal,
+                })
+                    .then(illustrationData => {
+                    // parse the fetched illustration string to an html element and set the attributes
+                    const illustrationElement = this.prepareIllustrationElement(illustrationData);
+                    this.handleIllustrationLoadedSuccess(illustrationElement);
+                })
+                    .catch(error => {
+                    this.handleIllustrationLoadedFailure(error);
+                });
+            }
+            if (illustrationSet === 'momentum-illustrations' && this.name) {
+                // dynamic import of the lit template from the momentum illustrations package
+                return import(`@momentum-design/illustrations/dist/ts/${this.name}.ts`)
+                    .then(module => {
+                    this.handleIllustrationLoadedSuccess(module.default());
+                })
+                    .catch(error => {
+                    this.handleIllustrationLoadedFailure(error);
+                });
+            }
+        }
+        const noIllustrationProviderError = new Error('IllustrationProvider not found or not properly set up.');
+        this.handleIllustrationLoadedFailure(noIllustrationProviderError);
+        return Promise.reject(noIllustrationProviderError);
+    }
+    /**
+     * Sets the illustrationData state to the fetched illustration.
+     * Dispatches a 'load' event on the component once the illustration has been successfully loaded.
+     * @param illustrationHtml - The illustration html element which has been fetched from the illustration provider.
+     */
+    handleIllustrationLoadedSuccess(illustrationHtml) {
+        // update illustrationData state once fetched:
+        this.illustrationData = illustrationHtml;
+        // when illustration is fetched successfully, trigger illustration load event.
+        const loadEvent = new Event('load', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(loadEvent);
+    }
+    /**
+     * Dispatches an 'error' event on the component when the illustration fetching has failed.
+     * This event bubbles and is cancelable.
+     * The error detail is set to the error object.
+     */
+    handleIllustrationLoadedFailure(error) {
+        const errorEvent = new CustomEvent('error', {
+            bubbles: true,
+            cancelable: true,
+            detail: { error },
+        });
+        this.dispatchEvent(errorEvent);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('name')) {
+            // fetch illustration data if name changes:
+            this.getIllustrationData().catch(err => {
+                if (err.name !== 'AbortError' && this.onerror) {
+                    this.onerror(err);
+                }
+            });
+        }
+        if (changedProperties.has('ariaLabel') || changedProperties.has('ariaLabelledBy')) {
+            this.role = this.ariaLabel || this.ariaLabelledby ? 'img' : null;
+        }
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        // abort the fetch request when the component is disconnected
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.abortController = undefined; // reset the abort controller
+    }
+    render() {
+        return html ` ${this.illustrationData} `;
+    }
+}
+Illustration.styles = [...Component.styles, ...styles];
+__decorate([
+    state(),
+    __metadata("design:type", HTMLElement)
+], Illustration.prototype, "illustrationData", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Illustration.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-label' }),
+    __metadata("design:type", Object)
+], Illustration.prototype, "ariaLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-labelledby' }),
+    __metadata("design:type", Object)
+], Illustration.prototype, "ariaLabelledby", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", AbortController)
+], Illustration.prototype, "abortController", void 0);
+export default Illustration;

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

@@ -0,0 +1,5 @@
+declare const TAG_NAME: "mdc-illustration";
+declare const DEFAULTS: {
+    readonly NAME: undefined;
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/illustration/illustration.constants.js

@@ -0,0 +1,6 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('illustration');
+const DEFAULTS = {
+    NAME: undefined,
+};
+export { TAG_NAME, DEFAULTS };

package/dist/components/illustration/illustration.styles.d.ts

@@ -0,0 +1,2 @@
+declare const styles: import("lit").CSSResult[];
+export default styles;

package/dist/components/illustration/illustration.styles.js

@@ -0,0 +1,15 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-illustration-size: auto;
+    }
+    :host::part(illustration) {
+      height: var(--mdc-illustration-size);
+      width: var(--mdc-illustration-size);
+    }
+  `,
+];
+export default styles;

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

@@ -0,0 +1,2 @@
+import type IllustrationNames from '@momentum-design/illustrations/dist/types/types';
+export type { IllustrationNames };

package/dist/components/illustration/illustration.types.js

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

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

@@ -0,0 +1,32 @@
+import type { CacheStrategy } from '../../utils/assets-cache';
+interface Args {
+    url: string;
+    name: string;
+    fileExtension: string;
+    cacheStrategy?: CacheStrategy;
+    cacheName?: string;
+    renewSignal: () => AbortSignal;
+}
+/**
+ * Fetches a dynamic SVG illustration based on the provided `url`, `name` and `fileExtension`.
+ * The fetch is aborted if the signal is aborted.
+ *
+ * This function also includes the logic to cache the fetched illustration using the In Memory Cache or Web Cache API.
+ * If the `cacheStrategy` is set to `web-cache-api` or `in-memory-cache` and `cacheName` is provided,
+ * the fetched illustration will be cached using the respective cache.
+ *
+ * It will throw an error if the response is not ok.
+ *
+ * @param url - The base url of the illustration
+ * @param name - The name of the illustration
+ * @param fileExtension - The file extension of the illustration
+ * @param signal - The signal to abort the fetch.
+ * It is used to cancel the fetch when the component is disconnected or updated.
+ * @param cacheStrategy - The cache strategy to use.
+ * @param cacheName - The cache name to use.
+ *
+ * @returns Response string from the fetch
+ * @throws Error if the response is not ok
+ */
+declare const svgFetch: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal }: Args) => Promise<string>;
+export { svgFetch };

package/dist/components/illustration/illustration.utils.js

@@ -0,0 +1,79 @@
+import { assetsCache } from '../../utils/assets-cache';
+/**
+ * Utility function for fetching the illustration from the provided `request`.
+ * It will throw an error if the response is not ok.
+ * @param request - The request object to fetch the illustration
+ * @returns Promise<Response> - The response from the fetch
+ * @throws Error if the response is not ok
+ */
+const fetchIllustration = async (request) => fetch(request).then(response => {
+    if (!response.ok) {
+        throw new Error('There was a problem while fetching the illustration!');
+    }
+    return response;
+});
+/**
+ * Fetches a dynamic SVG illustration based on the provided `url`, `name` and `fileExtension`.
+ * The fetch is aborted if the signal is aborted.
+ *
+ * This function also includes the logic to cache the fetched illustration using the In Memory Cache or Web Cache API.
+ * If the `cacheStrategy` is set to `web-cache-api` or `in-memory-cache` and `cacheName` is provided,
+ * the fetched illustration will be cached using the respective cache.
+ *
+ * It will throw an error if the response is not ok.
+ *
+ * @param url - The base url of the illustration
+ * @param name - The name of the illustration
+ * @param fileExtension - The file extension of the illustration
+ * @param signal - The signal to abort the fetch.
+ * It is used to cancel the fetch when the component is disconnected or updated.
+ * @param cacheStrategy - The cache strategy to use.
+ * @param cacheName - The cache name to use.
+ *
+ * @returns Response string from the fetch
+ * @throws Error if the response is not ok
+ */
+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();
+    const request = new Request(`${url}/${name}.${fileExtension}`, {
+        signal,
+    });
+    // if there is no cache defined (cacheName and cacheStrategy properly set),
+    // fetch the illustration and return the response
+    if (!cacheName || !cacheStrategy || !['in-memory-cache', 'web-cache-api'].includes(cacheStrategy)) {
+        return fetchIllustration(request).then(response => response.text());
+    }
+    return assetsCache(cacheName, cacheStrategy).then(illustrationsCache => illustrationsCache
+        .get(request)
+        .then(responseFromCache => {
+        // **If entry in cache, return**
+        if (responseFromCache) {
+            return responseFromCache;
+        }
+        // **Otherwise, fetch and cache if successful**
+        // Both fetchIllustration() and illustrationsCache.set() "consume" the request,
+        // so we need to make a copy.
+        // (see https://developer.mozilla.org/en-US/docs/Web/API/Request/clone)
+        return fetchIllustration(request.clone()).then(response => {
+            var _a;
+            // This avoids caching responses that we know are errors
+            // (i.e. HTTP status code of 4xx or 5xx).
+            if (response.status < 400 && response.headers.has('content-type')) {
+                // Call .clone() on the response to save copy to cache.
+                // https://developer.mozilla.org/en-US/docs/Web/API/Request/clone
+                return (_a = illustrationsCache.set) === null || _a === void 0 ? void 0 : _a.call(illustrationsCache, request, response.clone()).then(() => response.text());
+            }
+            return response.text();
+        });
+    })
+        .catch(error => {
+        // Note that a HTTP error response (e.g. 404) will NOT trigger
+        // an exception.
+        // It will return a normal response object that has the appropriate
+        // error code set.
+        throw new Error(`Error in caching the Illustration ${name}, ${error}`);
+    }));
+};
+export { svgFetch };

package/dist/components/illustration/index.d.ts

@@ -0,0 +1,7 @@
+import Illustration from './illustration.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-illustration']: Illustration;
+    }
+}
+export default Illustration;

package/dist/components/illustration/index.js

@@ -0,0 +1,4 @@
+import Illustration from './illustration.component';
+import { TAG_NAME } from './illustration.constants';
+Illustration.register(TAG_NAME);
+export default Illustration;

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

@@ -0,0 +1,97 @@
+import { Provider } from '../../models';
+import IllustrationProviderContext from './illustrationprovider.context';
+import type { CacheStrategy, IllustrationSet } from './illustrationprovider.types';
+/**
+ * IllustrationProvider component, which allows to be consumed from sub components
+ * (see `providerUtils.consume` for how to consume)
+ *
+ * Attribute `illustrationSet` can be set to either `momentum-illustrations` or `custom-illustrations`.
+ * If `momentum-illustrations` is selected, the illustrations will be fetched from the
+ * Momentum Design System illustration set per a dynamic JS Import (no need to provide a URL).
+ * This requires the consumer to have the `@momentum-design/illustrations` package installed and the
+ * build tooling needs to support dynamic imports.
+ *
+ * If `custom-illustrations` is selected, the illustrations will be fetched from the provided URL.
+ * This requires the consumer to provide a URL from which the illustrations will be fetched and
+ * the consumer needs to make sure to bundle the illustrations in the application.
+ *
+ * If `cacheStrategy` is provided (only works with illustrationSet = `custom-illustrations`), the
+ * IllustrationProvider will cache the illustrations in the selected cache (either web-api-cache or in-memory-cache),
+ * to avoid fetching the same illustration multiple times over the network.
+ * This is useful when the same illustration is used multiple times in the application.
+ * To consider:
+ * - The `in-memory-cache` is not persisted and will be lost when the
+ * IllustrationProvider 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-illustrationprovider
+ *
+ * @slot - children
+ */
+declare class IllustrationProvider extends Provider<IllustrationProviderContext> {
+    constructor();
+    /**
+     * Context object of the IllustrationProviderContext, to be consumed by child components
+     */
+    static get Context(): {
+        __context__: IllustrationProviderContext;
+    };
+    /**
+     * Illustration set to be used
+     *
+     * If `momentum-illustrations` is selected, the illustrations will be fetched from the
+     * Momentum Design System illustration 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-illustrations` is selected, the illustrations will be fetched from the provided URL.
+     * This requires the consumer to provide a URL from which the illustrations will be fetched and
+     * the consumer needs to make sure to bundle the illustrations in the application.
+     *
+     * @default momentum-illustrations
+     */
+    illustrationSet?: IllustrationSet;
+    /**
+     * Url of where illustrations will be fetched from
+     * (if Illustration set is `custom-illustrations`, this will be the base url)
+     */
+    url?: string;
+    /**
+     * File extension of illustrations
+     * (if Illustration set is `custom-illustrations`, this will be the file extension for illustrations)
+     * @default svg
+     */
+    fileExtension?: string;
+    /**
+     * Illustrations Cache Strategy to use
+     *
+     * **Can only be used if Illustration set is `custom-illustrations`**
+     *
+     * Choose `in-memory-cache` to cache illustrations in a JS cache (in-memory cache).
+     * Choose `web-cache-api` to cache illustrations using the Web Cache API.
+     *
+     * NOTE: `cache-name` must be provided if `cache-strategy` is provided.
+     *
+     * If not provided or invalid value provided, the illustrations will not be cached.
+     * @default undefined
+     */
+    cacheStrategy?: CacheStrategy;
+    /**
+     * Illustrations Cache Name to use (cache strategy must be provided)
+     *
+     * If provided, Illustrations inside the provider will be cached in the
+     * cache (determined by `cache-strategy`) with the provided name.
+     *
+     * Illustrations cache name must be unique, independent from other asset caches.
+     *
+     * NOTE: `cache-name` requires `cache-strategy` to be set.
+     *
+     * If not provided, the illustrations will not be cached.
+     * @default undefined
+     */
+    cacheName?: string;
+    private updateValuesInContext;
+    protected updateContext(): void;
+}
+export default IllustrationProvider;