@momentum-design/components 0.116.2 → 0.117.1

package/dist/components/illustrationprovider/illustrationprovider.component.js

@@ -0,0 +1,123 @@
+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 IllustrationProviderContext from './illustrationprovider.context';
+import { ALLOWED_FILE_EXTENSIONS, DEFAULTS } from './illustrationprovider.constants';
+/**
+ * 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
+ */
+class IllustrationProvider extends Provider {
+    constructor() {
+        // initialise the context by running the Provider constructor:
+        super({
+            context: IllustrationProviderContext.context,
+            initialValue: new 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
+         */
+        this.illustrationSet = DEFAULTS.ILLUSTRATION_SET;
+        /**
+         * File extension of illustrations
+         * (if Illustration set is `custom-illustrations`, this will be the file extension for illustrations)
+         * @default svg
+         */
+        this.fileExtension = DEFAULTS.FILE_EXTENSION;
+    }
+    /**
+     * Context object of the IllustrationProviderContext, to be consumed by child components
+     */
+    static get Context() {
+        return IllustrationProviderContext.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.illustrationSet = this.illustrationSet;
+        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.illustrationSet !== this.illustrationSet ||
+            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: 'illustration-set', reflect: true }),
+    __metadata("design:type", String)
+], IllustrationProvider.prototype, "illustrationSet", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], IllustrationProvider.prototype, "url", void 0);
+__decorate([
+    property({ type: String, attribute: 'file-extension', reflect: true }),
+    __metadata("design:type", String)
+], IllustrationProvider.prototype, "fileExtension", void 0);
+__decorate([
+    property({ type: String, attribute: 'cache-strategy' }),
+    __metadata("design:type", String)
+], IllustrationProvider.prototype, "cacheStrategy", void 0);
+__decorate([
+    property({ type: String, attribute: 'cache-name' }),
+    __metadata("design:type", String)
+], IllustrationProvider.prototype, "cacheName", void 0);
+export default IllustrationProvider;

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

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-illustrationprovider";
+declare const ALLOWED_FILE_EXTENSIONS: string[];
+declare const DEFAULTS: {
+    readonly FILE_EXTENSION: "svg";
+    readonly ILLUSTRATION_SET: "momentum-illustrations";
+};
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };

package/dist/components/illustrationprovider/illustrationprovider.constants.js

@@ -0,0 +1,8 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('illustrationprovider');
+const ALLOWED_FILE_EXTENSIONS = ['svg'];
+const DEFAULTS = {
+    FILE_EXTENSION: 'svg',
+    ILLUSTRATION_SET: 'momentum-illustrations',
+};
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };

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

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

package/dist/components/illustrationprovider/illustrationprovider.context.js

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

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

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

package/dist/components/illustrationprovider/illustrationprovider.types.js

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

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

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

package/dist/components/illustrationprovider/index.js

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

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

@@ -2,7 +2,6 @@ import Toast from './toast.component';
 import '../icon';
 import '../text';
 import '../button';
-import '../linkbutton';
 declare global {
     interface HTMLElementTagNameMap {
         ['mdc-toast']: Toast;

package/dist/components/toast/index.js

@@ -3,6 +3,5 @@ import { TAG_NAME } from './toast.constants';
 import '../icon';
 import '../text';
 import '../button';
-import '../linkbutton';
 Toast.register(TAG_NAME);
 export default Toast;

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

@@ -14,7 +14,6 @@ declare const Toast_base: import("../../utils/mixins/index.types").Constructor<i
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button
- * @dependency mdc-linkbutton
  *
  * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
  * @slot toast-body-normal - Slot for the main body content of the toast.
@@ -47,6 +46,8 @@ declare class Toast extends Toast_base {
     /**
      * Type of toast
      * - Can be `custom`, `success`, `warning` or `error`.
+     *
+     * Note: When using the `custom` variant, provide your own icon via the `content-prefix` slot; otherwise, no icon will be shown.
      * @default 'custom'
      */
     variant: ToastVariant;

package/dist/components/toast/toast.component.js

@@ -26,7 +26,6 @@ import styles from './toast.styles';
  * @dependency mdc-icon
  * @dependency mdc-text
  * @dependency mdc-button
- * @dependency mdc-linkbutton
  *
  * @slot content-prefix - Slot for custom content before the icon (only for custom variant).
  * @slot toast-body-normal - Slot for the main body content of the toast.
@@ -61,6 +60,8 @@ class Toast extends FooterMixin(Component) {
         /**
          * Type of toast
          * - Can be `custom`, `success`, `warning` or `error`.
+         *
+         * Note: When using the `custom` variant, provide your own icon via the `content-prefix` slot; otherwise, no icon will be shown.
          * @default 'custom'
          */
         this.variant = DEFAULTS.VARIANT;
@@ -125,13 +126,14 @@ class Toast extends FooterMixin(Component) {
         if (!this.shouldRenderToggleButton())
             return nothing;
         return html `
-      <mdc-linkbutton
+      <mdc-button
+        variant="tertiary"
         part="footer-button-toggle"
         @click="${this.toggleDetailVisibility}"
-        icon-name="${this.isDetailVisible ? DEFAULTS.ARROW_UP_BOLD : DEFAULTS.ARROW_DOWN_BOLD}"
+        postfix-icon="${this.isDetailVisible ? DEFAULTS.ARROW_UP_BOLD : DEFAULTS.ARROW_DOWN_BOLD}"
       >
         ${this.isDetailVisible ? this.showLessText : this.showMoreText}
-      </mdc-linkbutton>
+      </mdc-button>
     `;
     }
     renderHeader() {