@momentum-design/components 0.140.0 → 0.141.0

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

@@ -34,14 +34,62 @@ declare class Brandvisual extends Component {
      * This will only be set if the brandvisual is an image (png).
      */
     altText?: string;
+    private readonly brandVisualProviderContext;
+    private abortController?;
+    constructor();
+    /**
+     * Resolves the brandvisual, either over HTTP through a `BrandVisualProvider` or through a
+     * dynamic import of the lit template shipped in the `@momentum-design/brand-visuals` package.
+     *
+     * The dynamic import is the fallback for every case that is not a fully configured custom set:
+     * no provider at all, the momentum set, or a custom set that is missing a url or file extension.
+     * Keeping it reachable without a provider is what makes this backwards compatible - a bare
+     * `<mdc-brandvisual name="…">` behaves exactly as it did before the provider existed.
+     */
     private getBrandVisualData;
+    /**
+     * Fetches a vector brandvisual over HTTP and inlines it.
+     *
+     * 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 fetchBrandVisual;
+    /**
+     * Points an `img` at the raster brandvisual and resolves once the browser has loaded it.
+     *
+     * There is nothing to fetch here - assigning `src` starts the load even while the element is
+     * detached - but we still wait for it so that `load` and `error` keep meaning the same thing
+     * they do on the other two branches.
+     */
+    private loadBrandVisualImage;
+    /**
+     * Parse the fetched brandvisual string to an html element and set the attributes the
+     * packaged lit templates would otherwise carry.
+     *
+     * @param brandVisualData - The brandvisual string to be parsed
+     * @returns brandVisualElement
+     */
+    private prepareBrandVisualElement;
     updated(changedProperties: Map<string, any>): void;
+    disconnectedCallback(): void;
+    /**
+     * Labels the brandvisual with the alt text, if it has anything to label.
+     *
+     * The dynamic import hands back a lit `TemplateResult`, whose markup has to be parsed before an
+     * `img` can be found in it, while both provider branches already produce an `Element` - so the
+     * two need different treatment. Only raster visuals have an `img` to label; vector ones are
+     * `aria-hidden` by design and are returned untouched.
+     */
+    private applyAltText;
     private injectTemplateAttributes;
     private injectHtmlAttributes;
     /**
      * Sets the brandVisualData state to the fetched brandvisual.
      * Dispatches a 'load' event on the component once the brandvisual has been successfully loaded.
-     * @param brandVisualHtml - The brandvisual html element which has been fetched from the brandvisual provider.
+     * @param brandVisualHtml - The brandvisual which has been resolved, either as the lit template
+     * from the dynamic import or as an element built from the provider url.
      */
     private handleBrandVisualLoadedSuccess;
     /**

package/dist/components/brandvisual/brandvisual.component.js

@@ -10,6 +10,9 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
+import providerUtils from '../../utils/provider';
+import { assetFetch } from '../../utils/asset-fetch';
+import BrandVisualProvider from '../brandvisualprovider/brandvisualprovider.component';
 import styles from './brandvisual.styles';
 /**
  * @tagname mdc-brandvisual
@@ -21,61 +24,189 @@ import styles from './brandvisual.styles';
  * @csspart brandvisualImage - Set styles for the brandvisual image container
  */
 class Brandvisual extends Component {
+    constructor() {
+        super();
+        this.brandVisualProviderContext = providerUtils.consume({
+            host: this,
+            context: BrandVisualProvider.Context,
+        });
+        this.abortController = new AbortController(); // Initialize AbortController
+    }
+    /**
+     * Resolves the brandvisual, either over HTTP through a `BrandVisualProvider` or through a
+     * dynamic import of the lit template shipped in the `@momentum-design/brand-visuals` package.
+     *
+     * The dynamic import is the fallback for every case that is not a fully configured custom set:
+     * no provider at all, the momentum set, or a custom set that is missing a url or file extension.
+     * Keeping it reachable without a provider is what makes this backwards compatible - a bare
+     * `<mdc-brandvisual name="…">` behaves exactly as it did before the provider existed.
+     */
     async getBrandVisualData() {
+        if (!this.name) {
+            const nameError = new Error('No brandvisual name provided.');
+            this.handleBrandVisualLoadedFailure(nameError);
+            return Promise.reject(nameError);
+        }
+        const providerContext = this.brandVisualProviderContext.value;
+        if ((providerContext === null || providerContext === void 0 ? void 0 : providerContext.brandVisualSet) === 'custom-brand-visuals') {
+            const { url, fileExtension, cacheName, cacheStrategy } = providerContext;
+            if (url && fileExtension) {
+                // raster visuals are handed to the browser as an <img src>, vector ones are fetched
+                // and inlined so they can be styled through ::part(brandvisual)
+                return fileExtension === 'png'
+                    ? this.loadBrandVisualImage(url, fileExtension)
+                    : this.fetchBrandVisual({ url, fileExtension, cacheName, cacheStrategy });
+            }
+        }
+        // dynamic import of the lit template from the momentum brand-visuals package
+        return import(`@momentum-design/brand-visuals/dist/ts/${this.name}.ts`)
+            .then(module => {
+            this.handleBrandVisualLoadedSuccess(module.default());
+        })
+            .catch(error => {
+            this.handleBrandVisualLoadedFailure(error);
+        });
+    }
+    /**
+     * Fetches a vector brandvisual over HTTP and inlines it.
+     *
+     * 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 fetchBrandVisual({ url, fileExtension, cacheName, cacheStrategy, }) {
+        // 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;
+        };
+        return assetFetch({
+            url,
+            name: this.name,
+            fileExtension,
+            cacheName,
+            cacheStrategy,
+            renewSignal,
+            assetType: 'brand visual',
+        })
+            .then(brandVisualData => {
+            this.handleBrandVisualLoadedSuccess(this.prepareBrandVisualElement(brandVisualData));
+        })
+            .catch(error => {
+            this.handleBrandVisualLoadedFailure(error);
+        });
+    }
+    /**
+     * Points an `img` at the raster brandvisual and resolves once the browser has loaded it.
+     *
+     * There is nothing to fetch here - assigning `src` starts the load even while the element is
+     * detached - but we still wait for it so that `load` and `error` keep meaning the same thing
+     * they do on the other two branches.
+     */
+    async loadBrandVisualImage(url, fileExtension) {
+        const image = document.createElement('img');
+        image.setAttribute('part', 'brandvisualImage');
+        image.setAttribute('data-name', this.name);
+        return new Promise(resolve => {
+            image.onload = () => {
+                this.handleBrandVisualLoadedSuccess(image);
+                resolve();
+            };
+            image.onerror = () => {
+                this.handleBrandVisualLoadedFailure(new Error('There was a problem while fetching the brand visual!'));
+                resolve();
+            };
+            image.src = `${url}/${this.name}.${fileExtension}`;
+        });
+    }
+    /**
+     * Parse the fetched brandvisual string to an html element and set the attributes the
+     * packaged lit templates would otherwise carry.
+     *
+     * @param brandVisualData - The brandvisual string to be parsed
+     * @returns brandVisualElement
+     */
+    prepareBrandVisualElement(brandVisualData) {
+        const brandVisualElement = new DOMParser().parseFromString(brandVisualData, 'text/html').body.children[0];
         if (this.name) {
-            // dynamic import of the lit template from the momentum brand-visuals package
-            return import(`@momentum-design/brand-visuals/dist/ts/${this.name}.ts`)
-                .then(module => {
-                this.handleBrandVisualLoadedSuccess(module.default());
-            })
-                .catch(error => {
-                this.handleBrandVisualLoadedFailure(error);
-            });
+            brandVisualElement.setAttribute('data-name', this.name);
         }
-        const nameError = new Error('No brandvisual name provided.');
-        this.handleBrandVisualLoadedFailure(nameError);
-        return Promise.reject(nameError);
+        brandVisualElement.setAttribute('part', 'brandvisual');
+        // set aria-hidden=true for SVG to avoid screen readers
+        brandVisualElement.setAttribute('aria-hidden', 'true');
+        return brandVisualElement;
     }
     updated(changedProperties) {
         super.updated(changedProperties);
         if (changedProperties.has('name')) {
             // import brandVisual data if name changes:
             this.getBrandVisualData().catch(err => {
-                if (this.onerror) {
+                if (err.name !== 'AbortError' && this.onerror) {
                     this.onerror(err);
                 }
             });
         }
         if (changedProperties.has('altText')) {
             if (this.brandVisualData) {
-                this.brandVisualData = this.injectHtmlAttributes(this.brandVisualData, { alt: this.altText });
+                this.brandVisualData = this.applyAltText(this.brandVisualData);
             }
         }
     }
+    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
+    }
+    /**
+     * Labels the brandvisual with the alt text, if it has anything to label.
+     *
+     * The dynamic import hands back a lit `TemplateResult`, whose markup has to be parsed before an
+     * `img` can be found in it, while both provider branches already produce an `Element` - so the
+     * two need different treatment. Only raster visuals have an `img` to label; vector ones are
+     * `aria-hidden` by design and are returned untouched.
+     */
+    applyAltText(brandVisual) {
+        if (brandVisual instanceof Element) {
+            return brandVisual.tagName === 'IMG' ? this.injectHtmlAttributes(brandVisual, { alt: this.altText }) : brandVisual;
+        }
+        return this.injectTemplateAttributes(brandVisual, 'img', { alt: this.altText });
+    }
     injectTemplateAttributes(litTemplate, tag, props) {
         const parser = new DOMParser();
         const doc = parser.parseFromString(litTemplate.strings[0], 'text/html');
         const element = doc.querySelector(tag);
         if (element) {
-            Object.entries(props).forEach(([key, value]) => {
-                element.setAttribute(key, value);
-            });
+            this.injectHtmlAttributes(element, props);
         }
         return element || litTemplate;
     }
     injectHtmlAttributes(html, props) {
         Object.entries(props).forEach(([key, value]) => {
-            html.setAttribute(key, value);
+            // an unset alt-text must not end up rendered as alt="undefined"
+            if (value === undefined) {
+                html.removeAttribute(key);
+            }
+            else {
+                html.setAttribute(key, value);
+            }
         });
         return html;
     }
     /**
      * Sets the brandVisualData state to the fetched brandvisual.
      * Dispatches a 'load' event on the component once the brandvisual has been successfully loaded.
-     * @param brandVisualHtml - The brandvisual html element which has been fetched from the brandvisual provider.
+     * @param brandVisualHtml - The brandvisual which has been resolved, either as the lit template
+     * from the dynamic import or as an element built from the provider url.
      */
     handleBrandVisualLoadedSuccess(brandVisualHtml) {
-        this.brandVisualData = this.injectTemplateAttributes(brandVisualHtml, 'img', { alt: this.altText });
+        this.brandVisualData = this.applyAltText(brandVisualHtml);
         // when brandvisual is imported successfully, trigger brandvisual load event.
         const loadEvent = new Event('load', {
             bubbles: true,
@@ -113,4 +244,8 @@ __decorate([
     property({ type: String, reflect: true, attribute: 'alt-text' }),
     __metadata("design:type", String)
 ], Brandvisual.prototype, "altText", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", AbortController)
+], Brandvisual.prototype, "abortController", void 0);
 export default Brandvisual;

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

@@ -0,0 +1,97 @@
+import { Provider } from '../../models';
+import BrandVisualProviderContext from './brandvisualprovider.context';
+import type { BrandVisualSet, CacheStrategy } from './brandvisualprovider.types';
+/**
+ * The brandvisualprovider is the context provider for `mdc-brandvisual`. It lets an application configure where brand visuals come from and how they are cached in one place, so every nested brand visual stays consistent without repeating that setup at each usage.
+ * 
+ * Without a provider, `mdc-brandvisual` resolves its asset through a dynamic import of the lit template shipped in `@momentum-design/brand-visuals`. That import is not statically analysable, so bundlers have to account for every asset in the package. Pointing the provider at a URL replaces that import with an HTTP fetch, which lets an application serve the brand visual set itself and keep it out of the bundle entirely.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-brandvisualprovider` to configure the brand visual source once for every nested `mdc-brandvisual` in a subtree.
+ * - Use `mdc-brandvisualprovider` with `brand-visual-set="custom-brand-visuals"` when brand visuals should be served over HTTP rather than bundled — for example in a host framework that cannot afford to bundle the full asset set.
+ * - Use `mdc-brandvisualprovider` when brand visuals should be cached across re-renders or navigations to avoid repeated network fetches.
+ * 
+ * **When not to use**
+ * 
+ * - Do not expect one provider to cover every brand visual when fetching over HTTP. The set is split across an `svg` and a `png` folder and a provider points at one of them, so a page using artwork from both needs one provider for each — see **Content guidance** below. Outside that case, prefer a single provider near the root and nest only when a subtree genuinely needs a different source.
+ * - Do not reach for `mdc-brandvisualprovider` to render a logo — it has no visible UI. Use `mdc-brandvisual` for the visual itself.
+ * - Do not add a provider purely to keep the existing behaviour. `mdc-brandvisual` works without one.
+ * 
+ * @tagname mdc-brandvisualprovider
+ * 
+ * @slot - children
+ */
+declare class BrandVisualProvider extends Provider<BrandVisualProviderContext> {
+    constructor();
+    /**
+     * Context object of the BrandVisualProviderContext, to be consumed by child components
+     */
+    static get Context(): {
+        __context__: BrandVisualProviderContext;
+    };
+    /**
+     * Brand visual set to be used
+     *
+     * If `momentum-brand-visuals` is selected, the brand visuals will be fetched from the
+     * Momentum Design System brand visual set per a dynamic JS Import (no need to provide a URL).
+     * This requires the consumer to have the `@momentum-design/brand-visuals` package installed and the
+     * build tooling needs to support dynamic imports.
+     *
+     * If `custom-brand-visuals` is selected, the brand visuals will be fetched from the provided URL.
+     * This requires the consumer to provide a URL from which the brand visuals will be fetched and
+     * the consumer needs to make sure to bundle the brand visuals in the application.
+     *
+     * @default momentum-brand-visuals
+     */
+    brandVisualSet?: BrandVisualSet;
+    /**
+     * Url of where brand visuals will be fetched from
+     * (if Brand visual set is `custom-brand-visuals`, this will be the base url)
+     */
+    url?: string;
+    /**
+     * File extension of brand visuals
+     * (if Brand visual set is `custom-brand-visuals`, this will be the file extension for brand visuals)
+     *
+     * `svg` visuals are fetched and inlined, `png` visuals are set as the `src` of an `img` element.
+     * Note that the two sets are not interchangeable: the device visuals only ship as `png`,
+     * every other visual only ships as `svg`.
+     *
+     * @default svg
+     */
+    fileExtension?: string;
+    /**
+     * Brand visuals Cache Strategy to use
+     *
+     * **Can only be used if Brand visual set is `custom-brand-visuals` and the file extension is `svg`**
+     * (`png` visuals are loaded by the browser through an `img` element and are subject to the
+     * regular HTTP cache instead).
+     *
+     * Choose `in-memory-cache` to cache brand visuals in a JS cache (in-memory cache).
+     * Choose `web-cache-api` to cache brand visuals using the Web Cache API.
+     *
+     * NOTE: `cache-name` must be provided if `cache-strategy` is provided.
+     *
+     * If not provided or invalid value provided, the brand visuals will not be cached.
+     * @default undefined
+     */
+    cacheStrategy?: CacheStrategy;
+    /**
+     * Brand visuals Cache Name to use (cache strategy must be provided)
+     *
+     * If provided, Brand visuals inside the provider will be cached in the
+     * cache (determined by `cache-strategy`) with the provided name.
+     *
+     * Brand visuals cache name must be unique, independent from other asset caches.
+     *
+     * NOTE: `cache-name` requires `cache-strategy` to be set.
+     *
+     * If not provided, the brand visuals will not be cached.
+     * @default undefined
+     */
+    cacheName?: string;
+    private updateValuesInContext;
+    protected updateContext(): void;
+}
+export default BrandVisualProvider;

package/dist/components/brandvisualprovider/brandvisualprovider.component.js

@@ -0,0 +1,105 @@
+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 { property } from 'lit/decorators.js';
+import { Provider } from '../../models';
+import BrandVisualProviderContext from './brandvisualprovider.context';
+import { ALLOWED_FILE_EXTENSIONS, DEFAULTS } from './brandvisualprovider.constants';
+/**
+ * @tagname mdc-brandvisualprovider
+ *
+ * @slot - children
+ */
+class BrandVisualProvider extends Provider {
+    constructor() {
+        // initialise the context by running the Provider constructor:
+        super({
+            context: BrandVisualProviderContext.context,
+            initialValue: new BrandVisualProviderContext(),
+        });
+        /**
+         * Brand visual set to be used
+         *
+         * If `momentum-brand-visuals` is selected, the brand visuals will be fetched from the
+         * Momentum Design System brand visual set per a dynamic JS Import (no need to provide a URL).
+         * This requires the consumer to have the `@momentum-design/brand-visuals` package installed and the
+         * build tooling needs to support dynamic imports.
+         *
+         * If `custom-brand-visuals` is selected, the brand visuals will be fetched from the provided URL.
+         * This requires the consumer to provide a URL from which the brand visuals will be fetched and
+         * the consumer needs to make sure to bundle the brand visuals in the application.
+         *
+         * @default momentum-brand-visuals
+         */
+        this.brandVisualSet = DEFAULTS.BRAND_VISUAL_SET;
+        /**
+         * File extension of brand visuals
+         * (if Brand visual set is `custom-brand-visuals`, this will be the file extension for brand visuals)
+         *
+         * `svg` visuals are fetched and inlined, `png` visuals are set as the `src` of an `img` element.
+         * Note that the two sets are not interchangeable: the device visuals only ship as `png`,
+         * every other visual only ships as `svg`.
+         *
+         * @default svg
+         */
+        this.fileExtension = DEFAULTS.FILE_EXTENSION;
+    }
+    /**
+     * Context object of the BrandVisualProviderContext, to be consumed by child components
+     */
+    static get Context() {
+        return BrandVisualProviderContext.context;
+    }
+    updateValuesInContext() {
+        // only update fileExtension on context if its an allowed fileExtension
+        if (this.fileExtension && ALLOWED_FILE_EXTENSIONS.includes(this.fileExtension)) {
+            this.context.value.fileExtension = this.fileExtension;
+        }
+        else {
+            // Ensure both fileExtension and context are updated to the default if its not an allowed fileExtension
+            this.fileExtension = DEFAULTS.FILE_EXTENSION;
+            this.context.value.fileExtension = DEFAULTS.FILE_EXTENSION;
+        }
+        this.context.value.brandVisualSet = this.brandVisualSet;
+        this.context.value.url = this.url;
+        this.context.value.cacheName = this.cacheName;
+        this.context.value.cacheStrategy = this.cacheStrategy;
+    }
+    updateContext() {
+        if (this.context.value.fileExtension !== this.fileExtension ||
+            this.context.value.brandVisualSet !== this.brandVisualSet ||
+            this.context.value.url !== this.url ||
+            this.context.value.cacheName !== this.cacheName ||
+            this.context.value.cacheStrategy !== this.cacheStrategy) {
+            this.updateValuesInContext();
+            this.context.updateObservers();
+        }
+    }
+}
+__decorate([
+    property({ type: String, attribute: 'brand-visual-set', reflect: true }),
+    __metadata("design:type", String)
+], BrandVisualProvider.prototype, "brandVisualSet", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], BrandVisualProvider.prototype, "url", void 0);
+__decorate([
+    property({ type: String, attribute: 'file-extension', reflect: true }),
+    __metadata("design:type", String)
+], BrandVisualProvider.prototype, "fileExtension", void 0);
+__decorate([
+    property({ type: String, attribute: 'cache-strategy' }),
+    __metadata("design:type", String)
+], BrandVisualProvider.prototype, "cacheStrategy", void 0);
+__decorate([
+    property({ type: String, attribute: 'cache-name' }),
+    __metadata("design:type", String)
+], BrandVisualProvider.prototype, "cacheName", void 0);
+export default BrandVisualProvider;

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

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-brandvisualprovider";
+declare const ALLOWED_FILE_EXTENSIONS: string[];
+declare const DEFAULTS: {
+    readonly FILE_EXTENSION: "svg";
+    readonly BRAND_VISUAL_SET: "momentum-brand-visuals";
+};
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };

package/dist/components/brandvisualprovider/brandvisualprovider.constants.js

@@ -0,0 +1,10 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('brandvisualprovider');
+// brand visuals ship as vectors (`dist/svg`) and, for the device photography,
+// as raster images (`dist/png`) — so both are valid custom set extensions.
+const ALLOWED_FILE_EXTENSIONS = ['svg', 'png'];
+const DEFAULTS = {
+    FILE_EXTENSION: 'svg',
+    BRAND_VISUAL_SET: 'momentum-brand-visuals',
+};
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };

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

@@ -0,0 +1,12 @@
+import type { BrandVisualSet, CacheStrategy } from './brandvisualprovider.types';
+declare class BrandVisualProviderContext {
+    brandVisualSet?: BrandVisualSet;
+    fileExtension?: string;
+    url?: string;
+    cacheName?: string;
+    cacheStrategy?: CacheStrategy;
+    static readonly context: {
+        __context__: BrandVisualProviderContext;
+    };
+}
+export default BrandVisualProviderContext;

package/dist/components/brandvisualprovider/brandvisualprovider.context.js

@@ -0,0 +1,7 @@
+import { createContext } from '@lit/context';
+import { TAG_NAME } from './brandvisualprovider.constants';
+class BrandVisualProviderContext {
+}
+// create typed lit context as part of the BrandVisualProviderContext
+BrandVisualProviderContext.context = createContext(TAG_NAME);
+export default BrandVisualProviderContext;

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

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

package/dist/components/brandvisualprovider/brandvisualprovider.types.js

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

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

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

package/dist/components/brandvisualprovider/index.js

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

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

@@ -11,9 +11,9 @@ import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
+import { assetFetch } from '../../utils/asset-fetch';
 import IconProvider from '../iconprovider/iconprovider.component';
 import styles from './icon.styles';
-import { svgFetch } from './icon.utils';
 import { DEFAULTS } from './icon.constants';
 /**
  * @tagname mdc-icon
@@ -80,13 +80,14 @@ class Icon extends Component {
                     return this.abortController.signal;
                 };
                 // fetch icon data (including caching logic)
-                return svgFetch({
+                return assetFetch({
                     url,
                     name: this.name,
                     fileExtension,
                     cacheName,
                     cacheStrategy,
                     renewSignal,
+                    assetType: 'icon',
                 })
                     .then(iconData => {
                     // parse the fetched icon string to an html element and set the attributes

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

@@ -11,10 +11,10 @@ import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
 import providerUtils from '../../utils/provider';
+import { assetFetch } from '../../utils/asset-fetch';
 import IllustrationProvider from '../illustrationprovider/illustrationprovider.component';
 import { ROLE } from '../../utils/roles';
 import styles from './illustration.styles';
-import { svgFetch } from './illustration.utils';
 import { DEFAULTS } from './illustration.constants';
 /**
  * @tagname mdc-illustration
@@ -82,13 +82,14 @@ class Illustration extends Component {
                     return this.abortController.signal;
                 };
                 // fetch illustration data (including caching logic)
-                return svgFetch({
+                return assetFetch({
                     url,
                     name: this.name,
                     fileExtension,
                     cacheName,
                     cacheStrategy,
                     renewSignal,
+                    assetType: 'illustration',
                 })
                     .then(illustrationData => {
                     // parse the fetched illustration string to an html element and set the attributes