@momentum-design/components 0.0.1

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+const styles_1 = require("../../utils/styles");
+const styles = [
+    styles_1.hostFitContentStyles,
+    (0, lit_1.css) `
+    svg {
+      height: 100%;
+      width: 100%;
+      fill: currentColor;
+    }
+  `,
+];
+exports.default = styles;

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

@@ -0,0 +1,2 @@
+declare const dynamicSVGImport: (url: string, name: string, fileExtension: string) => Promise<Element>;
+export { dynamicSVGImport };

package/dist/components/icon/icon.utils.js

@@ -0,0 +1,13 @@
+"use strict";
+/* eslint-disable implicit-arrow-linebreak */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dynamicSVGImport = void 0;
+const dynamicSVGImport = async (url, name, fileExtension) => fetch(`${url}/${name}.${fileExtension}`)
+    .then((response) => {
+    if (!response.ok) {
+        throw new Error('There was a problem while fetching the icon!');
+    }
+    return response.text();
+})
+    .then((iconResponse) => new DOMParser().parseFromString(iconResponse, 'text/html').body.children[0]);
+exports.dynamicSVGImport = dynamicSVGImport;

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

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

package/dist/components/icon/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const icon_component_1 = tslib_1.__importDefault(require("./icon.component"));
+const icon_constants_1 = require("./icon.constants");
+icon_component_1.default.register(icon_constants_1.TAG_NAME);
+exports.default = icon_component_1.default;

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

@@ -0,0 +1,34 @@
+import { Provider } from '../../models';
+import IconProviderContext from './iconprovider.context';
+/**
+ * IconProvider component, which allows to be consumed from sub components
+ * (see `providerUtils.consume` for how to consume)
+ *
+ * Bundling icons will be up to the consumer of this component, such
+ * that only a url has to be passed in from which the icons will be
+ * fetched.
+ *
+ * @tag mdc-iconprovider
+ * @tagname mdc-iconprovider
+ */
+declare class IconProvider extends Provider<IconProviderContext> {
+    constructor();
+    static get Context(): {
+        __context__: IconProviderContext;
+    };
+    /**
+     * Url of where icons will be fetched from
+     */
+    url?: string;
+    /**
+     * File extension of icons, default: 'svg'
+     */
+    fileExtension?: string;
+    /**
+     * Length unit used for sizing of icons, default: 'em'
+     */
+    lengthUnit?: string;
+    private updateValuesInContext;
+    protected updateContext(): void;
+}
+export default IconProvider;

package/dist/components/iconprovider/iconprovider.component.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const decorators_js_1 = require("lit/decorators.js");
+const models_1 = require("../../models");
+const iconprovider_context_1 = tslib_1.__importDefault(require("./iconprovider.context"));
+const iconprovider_constants_1 = require("./iconprovider.constants");
+/**
+ * IconProvider component, which allows to be consumed from sub components
+ * (see `providerUtils.consume` for how to consume)
+ *
+ * Bundling icons will be up to the consumer of this component, such
+ * that only a url has to be passed in from which the icons will be
+ * fetched.
+ *
+ * @tag mdc-iconprovider
+ * @tagname mdc-iconprovider
+ */
+class IconProvider extends models_1.Provider {
+    constructor() {
+        // initialise the context by running the Provider constructor:
+        super({
+            context: iconprovider_context_1.default.context,
+            initialValue: new iconprovider_context_1.default(),
+        });
+        /**
+         * File extension of icons, default: 'svg'
+         */
+        this.fileExtension = iconprovider_constants_1.DEFAULTS.FILE_EXTENSION;
+        /**
+         * Length unit used for sizing of icons, default: 'em'
+         */
+        this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
+    }
+    static get Context() {
+        return iconprovider_context_1.default.context;
+    }
+    updateValuesInContext() {
+        // only update fileExtension on context if its an allowed fileExtension
+        if (this.fileExtension && iconprovider_constants_1.ALLOWED_FILE_EXTENSIONS.includes(this.fileExtension)) {
+            this.context.value.fileExtension = this.fileExtension;
+        }
+        this.context.value.url = this.url;
+        this.context.value.lengthUnit = this.lengthUnit;
+    }
+    updateContext() {
+        let shouldUpdateConsumers = false;
+        if (this.context.value.fileExtension !== this.fileExtension
+            || this.context.value.url !== this.url
+            || this.context.value.lengthUnit !== this.lengthUnit) {
+            this.updateValuesInContext();
+            shouldUpdateConsumers = true;
+        }
+        if (shouldUpdateConsumers) {
+            this.context.updateObservers();
+        }
+    }
+}
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String }),
+    tslib_1.__metadata("design:type", String)
+], IconProvider.prototype, "url", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'file-extension', reflect: true }),
+    tslib_1.__metadata("design:type", String)
+], IconProvider.prototype, "fileExtension", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'length-unit', reflect: true }),
+    tslib_1.__metadata("design:type", String)
+], IconProvider.prototype, "lengthUnit", void 0);
+exports.default = IconProvider;

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

@@ -0,0 +1,7 @@
+declare const TAG_NAME: "mdc-iconprovider";
+declare const ALLOWED_FILE_EXTENSIONS: string[];
+declare const DEFAULTS: {
+    FILE_EXTENSION: string;
+    LENGTH_UNIT: string;
+};
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };

package/dist/components/iconprovider/iconprovider.constants.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
+const tslib_1 = require("tslib");
+const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
+const TAG_NAME = tag_name_1.default.constructTagName('iconprovider');
+exports.TAG_NAME = TAG_NAME;
+const ALLOWED_FILE_EXTENSIONS = ['svg'];
+exports.ALLOWED_FILE_EXTENSIONS = ALLOWED_FILE_EXTENSIONS;
+const DEFAULTS = {
+    FILE_EXTENSION: 'svg',
+    LENGTH_UNIT: 'em',
+};
+exports.DEFAULTS = DEFAULTS;

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

@@ -0,0 +1,9 @@
+declare class IconProviderContext {
+    fileExtension?: string;
+    url?: string;
+    lengthUnit?: string;
+    static context: {
+        __context__: IconProviderContext;
+    };
+}
+export default IconProviderContext;

package/dist/components/iconprovider/iconprovider.context.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const context_1 = require("@lit-labs/context");
+const iconprovider_constants_1 = require("./iconprovider.constants");
+class IconProviderContext {
+}
+// create typed lit context as part of the IconProviderContext
+IconProviderContext.context = (0, context_1.createContext)(iconprovider_constants_1.TAG_NAME);
+exports.default = IconProviderContext;

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

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

package/dist/components/iconprovider/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const iconprovider_component_1 = tslib_1.__importDefault(require("./iconprovider.component"));
+const iconprovider_constants_1 = require("./iconprovider.constants");
+iconprovider_component_1.default.register(iconprovider_constants_1.TAG_NAME);
+exports.default = iconprovider_component_1.default;

package/dist/components/text/fonts.styles.d.ts

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

package/dist/components/text/fonts.styles.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fontsStyles = void 0;
+const lit_1 = require("lit");
+// todo: change definition to tokens once available
+exports.fontsStyles = (0, lit_1.css) `
+  :host([type="heading-1"]) {
+    font-size: 7.5rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 9.375rem */
+    text-transform: capitalize;
+  }
+
+  :host([type="heading-2"]) {
+    font-size: 6rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 7.5rem */
+    text-transform: capitalize;
+  }
+
+  :host([type="heading-3"]) {
+    font-size: 3rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 3.75rem */
+  }
+
+  :host([type="heading-4"]) {
+    font-size: 2.5rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 3.125rem */
+  }
+
+  :host([type="heading-5"]) {
+    font-size: 2rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 125%; /* 2.5rem */
+    letter-spacing: 0.5rem;
+    text-transform: uppercase;
+  }
+
+  :host([type="heading-6"]) {
+    font-size: 1.75rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 3rem; /* 171.429% */
+  }
+
+  :host([type="heading-7"]) {
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 140%; /* 2.1rem */
+  }
+
+  :host([type="body-large"]) {
+    font-size: 2rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 3rem */
+    margin-block-end: 1.875em; /* paragraph spacing, 30px */
+  }
+
+  :host([type="body-regular"]) {
+    font-size: 1.5rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 2.25rem */
+    margin-block-end: 1.5em; /* paragraph spacing, 24px */
+  }
+
+  :host([type="body-small"]) {
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%; /* 1.875rem */
+    margin-block-end: 0.125rem; /* paragraph spacing, 2px */
+  }
+
+  :host([type="image-title"]) {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 150%; /* 1.5rem */
+    letter-spacing: 0.04rem;
+    text-transform: uppercase;
+  }
+
+  :host([type="label"]) {
+    font-size: 1rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 150%; /* 1.5rem */
+    letter-spacing: 0.02rem;
+  }
+`;

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

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

package/dist/components/text/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const text_component_1 = tslib_1.__importDefault(require("./text.component"));
+const text_constants_1 = require("./text.constants");
+text_component_1.default.register(text_constants_1.TAG_NAME);
+exports.default = text_component_1.default;

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

@@ -0,0 +1,29 @@
+import { Component } from '../../models';
+import type { FontType } from './text.types';
+/**
+ * Text component, which helps creating a text element aligning with
+ * styling.
+ *
+ * The `type` attribute allows changing the type of text, like `heading-1`, etc.
+ *
+ * For accessibility the `role` and `aria-level` on the component are going to be set
+ * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
+ *
+ * @tag mdc-text
+ * @tagname mdc-text
+ */
+declare class Text extends Component {
+    /**
+     * Text Type - defines how the text should be rendered
+     *
+     * Possible values: `heading-1` | `heading-2` | `heading-3` | `heading-4`
+    | `heading-5` | `heading-6` | `heading-7` | `body-large` | `body-regular`
+    | `body-small` | `image-title` | `label`;
+     */
+    type?: FontType;
+    protected handleTypeChanged(): void;
+    protected updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export default Text;

package/dist/components/text/text.component.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const text_styles_1 = tslib_1.__importDefault(require("./text.styles"));
+const models_1 = require("../../models");
+const text_utils_1 = require("./text.utils");
+/**
+ * Text component, which helps creating a text element aligning with
+ * styling.
+ *
+ * The `type` attribute allows changing the type of text, like `heading-1`, etc.
+ *
+ * For accessibility the `role` and `aria-level` on the component are going to be set
+ * automatically based on the type e.g. heading-1 will lead to `role="heading"` and `aria-level=1`.
+ *
+ * @tag mdc-text
+ * @tagname mdc-text
+ */
+class Text extends models_1.Component {
+    handleTypeChanged() {
+        this.role = (0, text_utils_1.getRole)(this.type);
+        this.ariaLevel = (0, text_utils_1.getAriaLevel)(this.type);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('type')) {
+            this.handleTypeChanged();
+        }
+    }
+    render() {
+        return (0, lit_1.html) `<slot></slot>`;
+    }
+}
+Text.styles = text_styles_1.default;
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ attribute: 'type', reflect: true, type: String }),
+    tslib_1.__metadata("design:type", String)
+], Text.prototype, "type", void 0);
+exports.default = Text;

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

@@ -0,0 +1,9 @@
+import type { FontType } from './text.types';
+declare const TAG_NAME: "mdc-text";
+declare const DEFAULTS: {
+    TYPE: "body-regular";
+};
+declare const VALUES: {
+    TYPE: Array<FontType>;
+};
+export { TAG_NAME, DEFAULTS, VALUES };

package/dist/components/text/text.constants.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VALUES = exports.DEFAULTS = exports.TAG_NAME = void 0;
+const tslib_1 = require("tslib");
+const tag_name_1 = tslib_1.__importDefault(require("../../utils/tag-name"));
+const TAG_NAME = tag_name_1.default.constructTagName('text');
+exports.TAG_NAME = TAG_NAME;
+const DEFAULTS = {
+    TYPE: 'body-regular',
+};
+exports.DEFAULTS = DEFAULTS;
+const VALUES = {
+    TYPE: [
+        'heading-1',
+        'heading-2',
+        'heading-3',
+        'heading-4',
+        'heading-5',
+        'heading-6',
+        'heading-7',
+        'body-large',
+        'body-regular',
+        'body-small',
+        'image-title',
+        'label',
+    ],
+};
+exports.VALUES = VALUES;

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

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

package/dist/components/text/text.styles.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+const fonts_styles_1 = require("./fonts.styles");
+const styles = [
+    (0, lit_1.css) `
+    :host {
+      --mdc-text-font-family: var(--mdc-themeprovider-font-family);
+
+      display: block;
+      font-family: var(--mdc-text-font-family);
+    }
+  `,
+    // type specific font styles:
+    fonts_styles_1.fontsStyles,
+];
+exports.default = styles;

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

@@ -0,0 +1 @@
+export type FontType = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6' | 'heading-7' | 'body-large' | 'body-regular' | 'body-small' | 'image-title' | 'label';

package/dist/components/text/text.types.js

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

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

@@ -0,0 +1,20 @@
+import { FontType } from './text.types';
+/**
+ * Check if passed in type is a heading
+ * @param type - type to check
+ * @returns boolean, true if it is a heading
+ */
+declare const isHeading: (type: FontType) => boolean;
+/**
+ * Get corresponding aria-role to type
+ * @param type - type to find corresponding role for
+ * @returns role
+ */
+declare const getRole: (type?: FontType) => "heading" | "paragraph" | null;
+/**
+ * Get corresponding aria-level to type
+ * @param type type to find corresponding level for
+ * @returns aria-level (has to be a number)
+ */
+declare const getAriaLevel: (type?: FontType) => string | null;
+export { isHeading, getAriaLevel, getRole };

package/dist/components/text/text.utils.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRole = exports.getAriaLevel = exports.isHeading = void 0;
+/**
+ * Split the passed in type and return the parts
+ */
+const getTypeParts = (type) => {
+    const parts = type.split('-');
+    return { firstPart: parts[0], secondPart: parts[1] };
+};
+/**
+ * Check if passed in type is a heading
+ * @param type - type to check
+ * @returns boolean, true if it is a heading
+ */
+const isHeading = (type) => {
+    const { firstPart, secondPart } = getTypeParts(type);
+    return firstPart === 'heading' && +secondPart > 0 && +secondPart < 7;
+};
+exports.isHeading = isHeading;
+/**
+ * Get corresponding aria-role to type
+ * @param type - type to find corresponding role for
+ * @returns role
+ */
+const getRole = (type) => {
+    if (type) {
+        if (isHeading(type)) {
+            return 'heading';
+        }
+        return 'paragraph';
+    }
+    return null;
+};
+exports.getRole = getRole;
+/**
+ * Get corresponding aria-level to type
+ * @param type type to find corresponding level for
+ * @returns aria-level (has to be a number)
+ */
+const getAriaLevel = (type) => {
+    if (type) {
+        if (isHeading(type)) {
+            const { secondPart } = getTypeParts(type);
+            return secondPart;
+        }
+    }
+    return null;
+};
+exports.getAriaLevel = getAriaLevel;

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

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

package/dist/components/themeprovider/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const themeprovider_component_1 = tslib_1.__importDefault(require("./themeprovider.component"));
+const themeprovider_constants_1 = require("./themeprovider.constants");
+themeprovider_component_1.default.register(themeprovider_constants_1.TAG_NAME);
+exports.default = themeprovider_component_1.default;

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

@@ -0,0 +1,48 @@
+import { Provider } from '../../models';
+import ThemeProviderContext from './themeprovider.context';
+import type { Theme } from './themeprovider.types';
+/**
+ * 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
+ */
+declare class ThemeProvider extends Provider<ThemeProviderContext> {
+    constructor();
+    static get Context(): {
+        __context__: ThemeProviderContext;
+    };
+    /**
+     * Available themes to switch to
+     *
+     * Has to be a space separated string, like className
+     * e.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`
+     */
+    themes: string;
+    /**
+     * Current theme attribute
+     *
+     * Has to be fully qualified, such that
+     * the theme name matches the className of the respective
+     * theme stylesheet
+     */
+    theme: Theme;
+    protected updated(changedProperties: Map<string, any>): void;
+    /**
+     * Update all observing components of this
+     * provider to update the theme
+     */
+    protected updateContext(): void;
+    /**
+     * Function to update the active theme classname to update the theme tokens
+     * as CSS variables on the web component.
+     */
+    private updateActiveThemeClass;
+    static styles: import("lit").CSSResult;
+}
+export default ThemeProvider;