@momentum-design/components 0.107.1 → 0.108.1

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

@@ -1,4 +1,4 @@
-import { CSSResult } from 'lit';
+import { CSSResult, TemplateResult } from 'lit';
 import { Component } from '../../models';
 import type { BrandVisualNames } from './brandvisual.types';
 /**
@@ -24,8 +24,15 @@ declare class Brandvisual extends Component {
      * Name of the brandVisual (= filename)
      */
     name?: BrandVisualNames;
+    /**
+     * Alt text for the brandvisual image for accessibility.
+     * This will only be set if the brandvisual is an image (png).
+     */
+    altText?: string;
     private getBrandVisualData;
     updated(changedProperties: Map<string, any>): void;
+    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.
@@ -38,7 +45,7 @@ declare class Brandvisual extends Component {
      * The error detail is set to the error object.
      */
     private handleBrandVisualLoadedFailure;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default Brandvisual;

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

@@ -11,7 +11,6 @@ import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { Component } from '../../models';
 import styles from './brandvisual.styles';
-import { DEFAULTS } from './brandvisual.constants';
 /**
  * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are
  * displayed correctly within applications.
@@ -30,17 +29,10 @@ import { DEFAULTS } from './brandvisual.constants';
  *
  */
 class Brandvisual extends Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Name of the brandVisual (= filename)
-         */
-        this.name = DEFAULTS.NAME;
-    }
     async getBrandVisualData() {
         if (this.name) {
             // dynamic import of the lit template from the momentum brand-visuals package
-            return import(`@momentum-design/brand-visuals/dist/logos/ts/${this.name}.ts`)
+            return import(`@momentum-design/brand-visuals/dist/ts/${this.name}.ts`)
                 .then(module => {
                 this.handleBrandVisualLoadedSuccess(module.default());
             })
@@ -48,8 +40,9 @@ class Brandvisual extends Component {
                 this.handleBrandVisualLoadedFailure(error);
             });
         }
-        this.handleBrandVisualLoadedFailure(new Error('No brandvisual name provided.'));
-        return Promise.reject(new Error('No brandvisual name provided.'));
+        const nameError = new Error('No brandvisual name provided.');
+        this.handleBrandVisualLoadedFailure(nameError);
+        return Promise.reject(nameError);
     }
     updated(changedProperties) {
         super.updated(changedProperties);
@@ -61,6 +54,28 @@ class Brandvisual extends Component {
                 }
             });
         }
+        if (changedProperties.has('altText')) {
+            if (this.brandVisualData) {
+                this.brandVisualData = this.injectHtmlAttributes(this.brandVisualData, { 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);
+            });
+        }
+        return element || litTemplate;
+    }
+    injectHtmlAttributes(html, props) {
+        Object.entries(props).forEach(([key, value]) => {
+            html.setAttribute(key, value);
+        });
+        return html;
     }
     /**
      * Sets the brandVisualData state to the fetched brandvisual.
@@ -68,8 +83,7 @@ class Brandvisual extends Component {
      * @param brandVisualHtml - The brandvisual html element which has been fetched from the brandvisual provider.
      */
     handleBrandVisualLoadedSuccess(brandVisualHtml) {
-        // update brandVisualData state once fetched:
-        this.brandVisualData = brandVisualHtml;
+        this.brandVisualData = this.injectTemplateAttributes(brandVisualHtml, 'img', { alt: this.altText });
         // when brandvisual is imported successfully, trigger brandvisual load event.
         const loadEvent = new Event('load', {
             bubbles: true,
@@ -97,10 +111,14 @@ class Brandvisual extends Component {
 Brandvisual.styles = [...Component.styles, ...styles];
 __decorate([
     state(),
-    __metadata("design:type", HTMLElement)
+    __metadata("design:type", Object)
 ], Brandvisual.prototype, "brandVisualData", void 0);
 __decorate([
     property({ type: String, reflect: true }),
     __metadata("design:type", String)
 ], Brandvisual.prototype, "name", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Brandvisual.prototype, "altText", void 0);
 export default Brandvisual;

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

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

package/dist/components/brandvisual/brandvisual.constants.js

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

package/dist/components/brandvisual/brandvisual.styles.js

@@ -8,5 +8,10 @@ const styles = css `
     height: 100%;
     width: 100%;
   }
+  :host::part(brandvisualImage) {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
 `;
 export default [styles];

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

@@ -9,4 +9,7 @@ interface Events {
         error: Error;
     }>;
 }
-export type { BrandVisualNames, Events };
+interface imageProps {
+    alt?: string;
+}
+export type { BrandVisualNames, imageProps, Events };