@momentum-design/components 0.0.1

package/dist/components/themeprovider/themeprovider.component.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const decorators_js_1 = require("lit/decorators.js");
+const themeprovider_constants_1 = require("./themeprovider.constants");
+const models_1 = require("../../models");
+const themeprovider_context_1 = tslib_1.__importDefault(require("./themeprovider.context"));
+const themeprovider_styles_1 = tslib_1.__importDefault(require("./themeprovider.styles"));
+/**
+ * ThemeProvider component, which sets the theme css variables
+ * for the child dom nodes and allows to be consumed from sub components
+ * (see providerUtils.consume for how to consume)
+ *
+ * ThemeProvider also includes the different font faces available
+ * for Text components.
+ *
+ * @tag mdc-themeprovider
+ * @tagname mdc-themeprovider
+ */
+class ThemeProvider extends models_1.Provider {
+    constructor() {
+        // initialise the context by running the Provider constructor:
+        super({
+            context: themeprovider_context_1.default.context,
+            initialValue: new themeprovider_context_1.default(themeprovider_constants_1.DEFAULTS.THEME),
+        });
+        /**
+         * Available themes to switch to
+         *
+         * Has to be a space separated string, like className
+         * e.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`
+         */
+        this.themes = themeprovider_constants_1.THEMES.join(' ');
+        /**
+         * Current theme attribute
+         *
+         * Has to be fully qualified, such that
+         * the theme name matches the className of the respective
+         * theme stylesheet
+         */
+        this.theme = themeprovider_constants_1.DEFAULTS.THEME;
+    }
+    static get Context() {
+        return themeprovider_context_1.default.context;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('theme')) {
+            this.updateActiveThemeClass();
+        }
+    }
+    /**
+     * Update all observing components of this
+     * provider to update the theme
+     */
+    updateContext() {
+        let shouldUpdateConsumers = false;
+        if (this.context.value.theme !== this.theme) {
+            this.context.value.theme = this.theme;
+            shouldUpdateConsumers = true;
+        }
+        if (shouldUpdateConsumers) {
+            this.context.updateObservers();
+        }
+    }
+    /**
+     * Function to update the active theme classname to update the theme tokens
+     * as CSS variables on the web component.
+     */
+    updateActiveThemeClass() {
+        // remove all existing theme classes from the classList:
+        this.classList.remove(...this.themes.split(' '));
+        // add current theme class to classList:
+        this.classList.add(this.theme);
+    }
+}
+ThemeProvider.styles = themeprovider_styles_1.default;
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String }),
+    tslib_1.__metadata("design:type", String)
+], ThemeProvider.prototype, "themes", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String }),
+    tslib_1.__metadata("design:type", String)
+], ThemeProvider.prototype, "theme", void 0);
+exports.default = ThemeProvider;

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

@@ -0,0 +1,10 @@
+declare const TAG_NAME: "mdc-themeprovider";
+declare const THEME_NAMES: {
+    DARK_WEBEX: "darkWebex";
+    LIGHT_WEBEX: "lightWebex";
+};
+declare const THEMES: ("mds-theme-stable-darkWebex" | "mds-theme-stable-lightWebex")[];
+declare const DEFAULTS: {
+    THEME: "mds-theme-stable-darkWebex";
+};
+export { DEFAULTS, THEME_NAMES, THEMES, TAG_NAME };

package/dist/components/themeprovider/themeprovider.constants.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TAG_NAME = exports.THEMES = exports.THEME_NAMES = exports.DEFAULTS = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable implicit-arrow-linebreak */
+const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
+const themeprovider_utils_1 = tslib_1.__importDefault(require("./themeprovider.utils"));
+const TAG_NAME = tag_name_1.default.constructTagName('themeprovider');
+exports.TAG_NAME = TAG_NAME;
+// Some themes are disabled until tokens are available for those themes
+const THEME_NAMES = {
+    // DARK_BRONZE: 'darkBronze' as const,
+    // DARK_INDIGO: 'darkIndigo' as const,
+    // DARK_JADE: 'darkJade' as const,
+    // DARK_LAVENDER: 'darkLavender' as const,
+    // DARK_ROSE: 'darkRose' as const,
+    DARK_WEBEX: 'darkWebex',
+    // LIGHT_BRONZE: 'lightBronze' as const,
+    // LIGHT_INDIGO: 'lightIndigo' as const,
+    // LIGHT_JADE: 'lightJade' as const,
+    // LIGHT_LAVENDER: 'lightLavender' as const,
+    // LIGHT_ROSE: 'lightRose' as const,
+    LIGHT_WEBEX: 'lightWebex',
+};
+exports.THEME_NAMES = THEME_NAMES;
+const THEMES = Object.values(THEME_NAMES).map((themeName) => themeprovider_utils_1.default.getFullQualifiedTheme(themeName));
+exports.THEMES = THEMES;
+const DEFAULTS = {
+    THEME: themeprovider_utils_1.default.getFullQualifiedTheme(THEME_NAMES.DARK_WEBEX),
+};
+exports.DEFAULTS = DEFAULTS;

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

@@ -0,0 +1,9 @@
+import type { Theme } from './themeprovider.types';
+declare class ThemeProviderContext {
+    theme?: Theme;
+    static context: {
+        __context__: ThemeProviderContext;
+    };
+    constructor(defaultTheme?: Theme);
+}
+export default ThemeProviderContext;

package/dist/components/themeprovider/themeprovider.context.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const context_1 = require("@lit-labs/context");
+const themeprovider_constants_1 = require("./themeprovider.constants");
+class ThemeProviderContext {
+    // constructor to allow setting the defaultTheme
+    constructor(defaultTheme) {
+        this.theme = defaultTheme;
+    }
+}
+// create typed lit context as part of the ThemeProviderContext
+ThemeProviderContext.context = (0, context_1.createContext)(themeprovider_constants_1.TAG_NAME);
+exports.default = ThemeProviderContext;

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

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

package/dist/components/themeprovider/themeprovider.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+const styles = (0, lit_1.css) `
+  :host {
+    --mdc-themeprovider-font-family: "Momentum";
+    --mdc-themeprovider-color-default: var(--mds-color-theme-text-primary-normal);
+
+    font-family: var(--mdc-themeprovider-font-family);
+    color: var(--mdc-themeprovider-color-default);
+  }
+`;
+exports.default = styles;

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

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { THEME_NAMES } from './themeprovider.constants';
+import type { ThemeClassPrefix, ThemeClassSeparator } from './themeprovider.utils';
+export type ThemeName = ValueOf<typeof THEME_NAMES>;
+export type Theme<T extends ThemeName = ThemeName> = `${ThemeClassPrefix}${ThemeClassSeparator}${T}`;

package/dist/components/themeprovider/themeprovider.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,9 @@
+import type { Theme, ThemeName } from './themeprovider.types';
+declare const THEME_CLASS_PREFIX: "mds-theme-stable";
+export declare const THEME_CLASS_SEPARATOR: "-";
+declare const utils: {
+    getFullQualifiedTheme: <T extends ThemeName>(themeName: T) => Theme;
+};
+export default utils;
+export type ThemeClassPrefix = typeof THEME_CLASS_PREFIX;
+export type ThemeClassSeparator = typeof THEME_CLASS_SEPARATOR;

package/dist/components/themeprovider/themeprovider.utils.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THEME_CLASS_SEPARATOR = void 0;
+const THEME_CLASS_PREFIX = 'mds-theme-stable';
+exports.THEME_CLASS_SEPARATOR = '-';
+const getFullQualifiedTheme = (themeName) => [THEME_CLASS_PREFIX, themeName].join(exports.THEME_CLASS_SEPARATOR);
+const utils = {
+    getFullQualifiedTheme,
+};
+exports.default = utils;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { Component, Provider } from './models';
+import ThemeProvider from './components/themeprovider';
+import Icon from './components/icon';
+import IconProvider from './components/iconprovider';
+import Avatar from './components/avatar';
+import Badge from './components/badge';
+import Text from './components/text';
+export { Component, Provider, ThemeProvider, Icon, IconProvider, Avatar, Badge, Text, };

package/dist/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Text = exports.Badge = exports.Avatar = exports.IconProvider = exports.Icon = exports.ThemeProvider = exports.Provider = exports.Component = void 0;
+const tslib_1 = require("tslib");
+const models_1 = require("./models");
+Object.defineProperty(exports, "Component", { enumerable: true, get: function () { return models_1.Component; } });
+Object.defineProperty(exports, "Provider", { enumerable: true, get: function () { return models_1.Provider; } });
+const themeprovider_1 = tslib_1.__importDefault(require("./components/themeprovider"));
+exports.ThemeProvider = themeprovider_1.default;
+const icon_1 = tslib_1.__importDefault(require("./components/icon"));
+exports.Icon = icon_1.default;
+const iconprovider_1 = tslib_1.__importDefault(require("./components/iconprovider"));
+exports.IconProvider = iconprovider_1.default;
+const avatar_1 = tslib_1.__importDefault(require("./components/avatar"));
+exports.Avatar = avatar_1.default;
+const badge_1 = tslib_1.__importDefault(require("./components/badge"));
+exports.Badge = badge_1.default;
+const text_1 = tslib_1.__importDefault(require("./components/text"));
+exports.Text = text_1.default;

package/dist/models/component/component.component.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+/**
+ * Core Component class to ultimately be inherited by all Web Components within
+ * this package.
+ *
+ * @public
+ */
+declare class Component extends LitElement {
+    /**
+     * Register `this` extended `Component` Class as a custom element within the
+     * DOM's custom elements registry.
+     *
+     * @remarks
+     * This method must be called in order for this component to be consumable
+     * within the DOM.
+     *
+     * @example
+     * ```ts
+     * import CustomComponent from './custom-component';
+     *
+     * // Standard registration.
+     * CustomComponent.register();
+     *
+     * // Custom registration.
+     * CustomComponent.register({
+     *   name: 'custom-component',
+     *   prefix: 'prefix',
+     * });
+     *
+     * export default CustomComponent;
+     * ```
+     *
+     *
+     * @returns - Void.
+     */
+    static register(namespace: string): void;
+}
+export default Component;

package/dist/models/component/component.component.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+/**
+ * Core Component class to ultimately be inherited by all Web Components within
+ * this package.
+ *
+ * @public
+ */
+class Component extends lit_1.LitElement {
+    /**
+     * Register `this` extended `Component` Class as a custom element within the
+     * DOM's custom elements registry.
+     *
+     * @remarks
+     * This method must be called in order for this component to be consumable
+     * within the DOM.
+     *
+     * @example
+     * ```ts
+     * import CustomComponent from './custom-component';
+     *
+     * // Standard registration.
+     * CustomComponent.register();
+     *
+     * // Custom registration.
+     * CustomComponent.register({
+     *   name: 'custom-component',
+     *   prefix: 'prefix',
+     * });
+     *
+     * export default CustomComponent;
+     * ```
+     *
+     *
+     * @returns - Void.
+     */
+    static register(namespace) {
+        if (customElements.get(namespace)) {
+            return;
+        }
+        customElements.define(namespace, this);
+    }
+}
+exports.default = Component;

package/dist/models/component/component.types.d.ts

@@ -0,0 +1,15 @@
+/**
+ * `Component` Class' static `registration()` method options.
+ *
+ * @public
+ */
+export interface RegisterOptions {
+    /**
+     * Name to use when registering this `Component` Class' to within DOM.
+     */
+    name: string;
+    /**
+     * Name to use when registering this `Component` Class' to within DOM.
+     */
+    prefix?: string;
+}

package/dist/models/component/component.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/models/component/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './component.component';
+export type { RegisterOptions as ComponentRegisterOptions, } from './component.types';
+export default Component;

package/dist/models/component/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const component_component_1 = tslib_1.__importDefault(require("./component.component"));
+exports.default = component_component_1.default;

package/dist/models/index.d.ts

@@ -0,0 +1,4 @@
+import Component from './component';
+import Provider from './provider';
+export type { ComponentRegisterOptions, } from './component';
+export { Component, Provider, };

package/dist/models/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Provider = exports.Component = void 0;
+const tslib_1 = require("tslib");
+const component_1 = tslib_1.__importDefault(require("./component"));
+exports.Component = component_1.default;
+const provider_1 = tslib_1.__importDefault(require("./provider"));
+exports.Provider = provider_1.default;

package/dist/models/provider/index.d.ts

@@ -0,0 +1,2 @@
+import Provider from './provider.component';
+export default Provider;

package/dist/models/provider/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const provider_component_1 = tslib_1.__importDefault(require("./provider.component"));
+exports.default = provider_component_1.default;

package/dist/models/provider/provider.component.d.ts

@@ -0,0 +1,70 @@
+import { ContextProvider } from '@lit-labs/context';
+import { CSSResult } from 'lit';
+import Component from '../component';
+type ConstructorOptions<C> = {
+    context: {
+        __context__: C;
+    };
+    initialValue?: C;
+};
+/**
+ * Provider Component class to ultimately be inherited by all Provider-type Web
+ * Components within this package.
+ *
+ * @public
+ */
+declare abstract class Provider<C> extends Component {
+    /**
+     * Constructor of the Provider.
+     *
+     * Execute in the constructor of the provider implementation,
+     * like so
+     *
+     * ```
+     * constructor() {
+     *   super(TAG_NAME, {initialValue: new ContextClass(defaultValues)});
+     * }
+     * ```
+     * @param host - host of where the context will be hooked onto, e.g. this
+     * @param context - context (returned by createContext)
+     * @param initialValue - initialValue of the ContextClass, like `new ContextClass(defaultValues)`
+     */
+    constructor({ context, initialValue }: ConstructorOptions<C>);
+    /**
+     * Context associated with this provider.
+     *
+     * @remarks
+     * Providing a Context type as a generic when creating extended Provider Class
+     * definitions will help enforce the property validation.
+     */
+    protected context: ContextProvider<{
+        __context__: C;
+    }>;
+    /**
+     * Styles associated with this Provider Component.
+     */
+    static styles: CSSResult | Array<CSSResult>;
+    /**
+     * Update the context of this Provider and trigger its consumers to update.
+     *
+     * @remarks
+     * This method is called every time this Provider is re-rendered and should
+     * be used to update the local Context based on any deltas between this
+     * Provider's attributes and this Provider's context that caused the
+     * re-render. If the `render()` method is overwritten, this call must be made
+     * manually.
+     */
+    protected abstract updateContext(): void;
+    /**
+     * Render this Provider.
+     *
+     * @remarks
+     * This method calls `updateContext()` then validates whether or not to
+     * update all consumers based on the results of the `shouldUpdateConsumers`
+     * getter.
+     *
+     * @returns - This Provider as an HTML Element.
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default Provider;

package/dist/models/provider/provider.component.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const context_1 = require("@lit-labs/context");
+const lit_1 = require("lit");
+const component_1 = tslib_1.__importDefault(require("../component"));
+const provider_styles_1 = tslib_1.__importDefault(require("./provider.styles"));
+/**
+ * Provider Component class to ultimately be inherited by all Provider-type Web
+ * Components within this package.
+ *
+ * @public
+ */
+class Provider extends component_1.default {
+    /**
+     * Constructor of the Provider.
+     *
+     * Execute in the constructor of the provider implementation,
+     * like so
+     *
+     * ```
+     * constructor() {
+     *   super(TAG_NAME, {initialValue: new ContextClass(defaultValues)});
+     * }
+     * ```
+     * @param host - host of where the context will be hooked onto, e.g. this
+     * @param context - context (returned by createContext)
+     * @param initialValue - initialValue of the ContextClass, like `new ContextClass(defaultValues)`
+     */
+    constructor({ context, initialValue }) {
+        super();
+        this.context = new context_1.ContextProvider(this, {
+            context,
+            initialValue,
+        });
+    }
+    /**
+     * Render this Provider.
+     *
+     * @remarks
+     * This method calls `updateContext()` then validates whether or not to
+     * update all consumers based on the results of the `shouldUpdateConsumers`
+     * getter.
+     *
+     * @returns - This Provider as an HTML Element.
+     */
+    render() {
+        this.updateContext();
+        return (0, lit_1.html) `<slot></slot>`;
+    }
+}
+/**
+ * Styles associated with this Provider Component.
+ */
+Provider.styles = provider_styles_1.default;
+exports.default = Provider;

package/dist/models/provider/provider.styles.d.ts

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

package/dist/models/provider/provider.styles.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+const styles = (0, lit_1.css) `
+  :host {
+    border: 0;
+    display: block;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+  }
+`;
+exports.default = styles;

package/dist/utils/provider/index.d.ts

@@ -0,0 +1,13 @@
+import { ContextConsumer } from '@lit-labs/context';
+import { ReactiveElement } from 'lit';
+type ConsumeOptions<C> = {
+    host: ReactiveElement;
+    context: C;
+    subscribe?: boolean;
+};
+declare const providerUtils: {
+    consume: <C extends {
+        __context__: unknown;
+    }>(options: ConsumeOptions<C>) => ContextConsumer<C, ReactiveElement>;
+};
+export default providerUtils;

package/dist/utils/provider/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const context_1 = require("@lit-labs/context");
+const consume = (options) => {
+    const { host, context, subscribe } = options;
+    return new context_1.ContextConsumer(host, {
+        context,
+        subscribe: subscribe !== null && subscribe !== void 0 ? subscribe : true,
+    });
+};
+const providerUtils = {
+    consume,
+};
+exports.default = providerUtils;

package/dist/utils/styles/index.d.ts

@@ -0,0 +1,2 @@
+declare const hostFitContentStyles: import("lit").CSSResult;
+export { hostFitContentStyles };

package/dist/utils/styles/index.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hostFitContentStyles = void 0;
+const lit_1 = require("lit");
+const hostFitContentStyles = (0, lit_1.css) `
+  :host {
+    align-items: center;
+    display: flex;
+    height: fit-content;
+    justify-content: center;
+    width: fit-content;
+  }
+`;
+exports.hostFitContentStyles = hostFitContentStyles;

package/dist/utils/tag-name/constants.d.ts

@@ -0,0 +1,7 @@
+declare const CONSTANTS: {
+    NAMESPACE: {
+        PREFIX: "mdc";
+        SEPARATOR: "-";
+    };
+};
+export default CONSTANTS;

package/dist/utils/tag-name/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const NAMESPACE = {
+    PREFIX: 'mdc',
+    SEPARATOR: '-',
+};
+const CONSTANTS = {
+    NAMESPACE,
+};
+exports.default = CONSTANTS;

package/dist/utils/tag-name/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    constructTagName: <ComponentName extends string>(componentName: ComponentName) => `mdc-${ComponentName}`;
+};
+export default _default;

package/dist/utils/tag-name/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/* eslint-disable implicit-arrow-linebreak */
+/* eslint-disable max-len */
+const constants_1 = tslib_1.__importDefault(require("./constants"));
+const constructTagName = (componentName) => [constants_1.default.NAMESPACE.PREFIX, componentName].join(constants_1.default.NAMESPACE.SEPARATOR);
+exports.default = {
+    constructTagName,
+};

package/dist/utils/types.d.ts

@@ -0,0 +1 @@
+export type ValueOf<T> = T[keyof T];

package/dist/utils/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: 'ts-jest',
+};