@momentum-design/components 0.41.6 → 0.42.0

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

@@ -0,0 +1,44 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { BrandVisualNames } from './brandvisual.types';
+/**
+ * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are
+ * displayed correctly within applications.
+ *
+ * Features:
+ * - Dynamically loads brandvisuals based on the `name` attribute.
+ * - Emits a `load` event when the brandvisual is successfully fetched.
+ * - Emits an `error` event when the brandvisual import fails.
+ * - Supports accessibility best practices.
+ * - Used for brand representation within the design system.
+ *
+ * @tagname mdc-brandvisual
+ *
+ * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.
+ * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.
+ *
+ */
+declare class Brandvisual extends Component {
+    private brandVisualData?;
+    /**
+     * Name of the brandVisual (= filename)
+     */
+    name?: BrandVisualNames;
+    private getBrandVisualData;
+    updated(changedProperties: Map<string, any>): void;
+    /**
+     * 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.
+     */
+    private handleBrandVisualLoadedSuccess;
+    /**
+     * Dispatches an 'error' event on the component when the brandvisual import has failed.
+     * This event bubbles and is cancelable.
+     * The error detail is set to the error object.
+     */
+    private handleBrandVisualLoadedFailure;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Brandvisual;

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

@@ -0,0 +1,106 @@
+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 styles from './brandvisual.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './brandvisual.constants';
+/**
+ * The `mdc-brandvisual` component is responsible for rendering logos dynamically & ensures they are
+ * displayed correctly within applications.
+ *
+ * Features:
+ * - Dynamically loads brandvisuals based on the `name` attribute.
+ * - Emits a `load` event when the brandvisual is successfully fetched.
+ * - Emits an `error` event when the brandvisual import fails.
+ * - Supports accessibility best practices.
+ * - Used for brand representation within the design system.
+ *
+ * @tagname mdc-brandvisual
+ *
+ * @event load - (React: onLoad) This event is dispatched when the brandvisual has been successfully loaded.
+ * @event error - (React: onError) This event is dispatched when the brandvisual fetching has failed.
+ *
+ */
+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`)
+                .then((module) => {
+                this.handleBrandVisualLoadedSuccess(module.default());
+            })
+                .catch((error) => {
+                this.handleBrandVisualLoadedFailure(error);
+            });
+        }
+        this.handleBrandVisualLoadedFailure(new Error('No brandvisual name provided.'));
+        return Promise.reject(new Error('No brandvisual name provided.'));
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('name')) {
+            // import brandVisual data if name changes:
+            this.getBrandVisualData().catch((err) => {
+                if (this.onerror) {
+                    this.onerror(err);
+                }
+            });
+        }
+    }
+    /**
+     * 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.
+     */
+    handleBrandVisualLoadedSuccess(brandVisualHtml) {
+        // update brandVisualData state once fetched:
+        this.brandVisualData = brandVisualHtml;
+        // when brandvisual is imported successfully, trigger brandvisual load event.
+        const loadEvent = new Event('load', {
+            bubbles: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(loadEvent);
+    }
+    /**
+     * Dispatches an 'error' event on the component when the brandvisual import has failed.
+     * This event bubbles and is cancelable.
+     * The error detail is set to the error object.
+     */
+    handleBrandVisualLoadedFailure(error) {
+        const errorEvent = new CustomEvent('error', {
+            bubbles: true,
+            cancelable: true,
+            detail: { error },
+        });
+        this.dispatchEvent(errorEvent);
+    }
+    render() {
+        return html ` ${this.brandVisualData} `;
+    }
+}
+Brandvisual.styles = [...Component.styles, ...styles];
+__decorate([
+    state(),
+    __metadata("design:type", HTMLElement)
+], Brandvisual.prototype, "brandVisualData", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Brandvisual.prototype, "name", void 0);
+export default Brandvisual;

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { css } from 'lit';
+const styles = css `
+  :host {
+    display: block;
+  }
+  :host::part(brandvisual) {
+    height: 100%;
+    width: 100%;
+  }
+`;
+export default [styles];

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

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

package/dist/components/brandvisual/brandvisual.types.js

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

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

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

package/dist/components/brandvisual/index.js

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