@momentum-design/components 0.0.29 → 0.0.30

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

@@ -1,48 +1,60 @@
 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
+ * ThemeProvider component, which sets the passed in themeclass as class.
+ * If the themeclass switches, the existing themeclass will be removed as a class
+ * and the new themeclass will be added.
+ *
+ * CSS variables defined in the themeclass will be used for the styling of child dom nodes.
+ *
+ * Themeclass context can be be consumed from Lit child components
  * (see providerUtils.consume for how to consume)
  *
- * ThemeProvider also includes the different font faces available
- * for Text components.
+ * ThemeProvider also includes basic font defaults for text.
  *
- * @tag mdc-themeprovider
  * @tagname mdc-themeprovider
+ *
+ * @slot default - children
+ *
+ * @cssproperty --mdc-themeprovider-font-family - Option to override the font family
+ * @cssproperty --mdc-themeprovider-color-default - Option to override the default color
  */
 declare class ThemeProvider extends Provider<ThemeProviderContext> {
     constructor();
+    /**
+     * Context object of the ThemeProvider, to be consumed by child components
+     */
     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`
+     * To keep track of the current theme class
+     * @internal
      */
-    themes: string;
+    private currentThemeClass?;
     /**
-     * Current theme attribute
+     * Current theme class
      *
      * Has to be fully qualified, such that
-     * the theme name matches the className of the respective
+     * the theme class matches the class of the respective
      * theme stylesheet
+     *
+     * Default: 'mds-theme-stable-darkWebex'
      */
-    theme: Theme;
+    themeclass: string;
     protected updated(changedProperties: Map<string, any>): void;
     /**
      * Update all observing components of this
-     * provider to update the theme
+     * provider to update the themeclass
+     *
+     * Is called on every re-render, see Provider class
      */
     protected updateContext(): void;
     /**
-     * Function to update the active theme classname to update the theme tokens
+     * Function to update the active theme classnames to update the theme tokens
      * as CSS variables on the web component.
      */
-    private updateActiveThemeClass;
+    private setThemeInClassList;
     static styles: import("lit").CSSResult;
 }
 export default ThemeProvider;

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

@@ -7,80 +7,88 @@ 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
+ * ThemeProvider component, which sets the passed in themeclass as class.
+ * If the themeclass switches, the existing themeclass will be removed as a class
+ * and the new themeclass will be added.
+ *
+ * CSS variables defined in the themeclass will be used for the styling of child dom nodes.
+ *
+ * Themeclass context can be be consumed from Lit child components
  * (see providerUtils.consume for how to consume)
  *
- * ThemeProvider also includes the different font faces available
- * for Text components.
+ * ThemeProvider also includes basic font defaults for text.
  *
- * @tag mdc-themeprovider
  * @tagname mdc-themeprovider
+ *
+ * @slot default - children
+ *
+ * @cssproperty --mdc-themeprovider-font-family - Option to override the font family
+ * @cssproperty --mdc-themeprovider-color-default - Option to override the default color
  */
 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),
+            initialValue: new themeprovider_context_1.default(themeprovider_constants_1.DEFAULTS.THEMECLASS),
         });
         /**
-         * 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
+         * Current theme class
          *
          * Has to be fully qualified, such that
-         * the theme name matches the className of the respective
+         * the theme class matches the class of the respective
          * theme stylesheet
+         *
+         * Default: 'mds-theme-stable-darkWebex'
          */
-        this.theme = themeprovider_constants_1.DEFAULTS.THEME;
+        this.themeclass = themeprovider_constants_1.DEFAULTS.THEMECLASS;
     }
+    /**
+     * Context object of the ThemeProvider, to be consumed by child components
+     */
     static get Context() {
         return themeprovider_context_1.default.context;
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('theme')) {
-            this.updateActiveThemeClass();
+        if (changedProperties.has('themeclass')) {
+            this.setThemeInClassList();
+            this.currentThemeClass = this.themeclass;
         }
     }
     /**
      * Update all observing components of this
-     * provider to update the theme
+     * provider to update the themeclass
+     *
+     * Is called on every re-render, see Provider class
      */
     updateContext() {
-        let shouldUpdateConsumers = false;
-        if (this.context.value.theme !== this.theme) {
-            this.context.value.theme = this.theme;
-            shouldUpdateConsumers = true;
-        }
-        if (shouldUpdateConsumers) {
+        if (this.context.value.themeclass !== this.themeclass) {
+            this.context.value.themeclass = this.themeclass;
             this.context.updateObservers();
         }
     }
     /**
-     * Function to update the active theme classname to update the theme tokens
+     * Function to update the active theme classnames to update the theme tokens
      * as CSS variables on the web component.
      */
-    updateActiveThemeClass() {
+    setThemeInClassList() {
         // remove all existing theme classes from the classList:
-        this.classList.remove(...this.themes.split(' '));
+        if (this.currentThemeClass) {
+            this.classList.remove(...this.currentThemeClass.split(' '));
+        }
         // add current theme class to classList:
-        this.classList.add(this.theme);
+        if (this.themeclass) {
+            this.classList.add(...this.themeclass.split(' '));
+        }
     }
 }
 ThemeProvider.styles = themeprovider_styles_1.default;
 tslib_1.__decorate([
-    (0, decorators_js_1.property)({ type: String }),
+    (0, decorators_js_1.state)(),
     tslib_1.__metadata("design:type", String)
-], ThemeProvider.prototype, "themes", void 0);
+], ThemeProvider.prototype, "currentThemeClass", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String }),
     tslib_1.__metadata("design:type", String)
-], ThemeProvider.prototype, "theme", void 0);
+], ThemeProvider.prototype, "themeclass", void 0);
 exports.default = ThemeProvider;

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

@@ -1,10 +1,5 @@
 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";
+    THEMECLASS: "mds-theme-stable-darkWebex";
 };
-export { DEFAULTS, THEME_NAMES, THEMES, TAG_NAME };
+export { DEFAULTS, TAG_NAME };

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

@@ -1,31 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TAG_NAME = exports.THEMES = exports.THEME_NAMES = exports.DEFAULTS = void 0;
+exports.TAG_NAME = 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),
+    THEMECLASS: 'mds-theme-stable-darkWebex',
 };
 exports.DEFAULTS = DEFAULTS;

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

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

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

@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const context_1 = require("@lit/context");
 const themeprovider_constants_1 = require("./themeprovider.constants");
 class ThemeProviderContext {
-    // constructor to allow setting the defaultTheme
-    constructor(defaultTheme) {
-        this.theme = defaultTheme;
+    // constructor to allow setting the defaultThemeClass
+    constructor(defaultThemeClass) {
+        this.themeclass = defaultThemeClass;
     }
 }
 // create typed lit context as part of the ThemeProviderContext

package/dist/custom-elements.json

@@ -630,33 +630,41 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "ThemeProvider component, which sets the theme css variables\nfor the child dom nodes and allows to be consumed from sub components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes the different font faces available\nfor Text components.",
+          "description": "ThemeProvider component, which sets the passed in themeclass as class.\nIf the themeclass switches, the existing themeclass will be removed as a class\nand the new themeclass will be added.\n\nCSS variables defined in the themeclass will be used for the styling of child dom nodes.\n\nThemeclass context can be be consumed from Lit child components\n(see providerUtils.consume for how to consume)\n\nThemeProvider also includes basic font defaults for text.",
           "name": "ThemeProvider",
+          "cssProperties": [
+            {
+              "description": "Option to override the font family",
+              "name": "--mdc-themeprovider-font-family"
+            },
+            {
+              "description": "Option to override the default color",
+              "name": "--mdc-themeprovider-color-default"
+            }
+          ],
+          "slots": [
+            {
+              "description": "children",
+              "name": "default"
+            }
+          ],
           "members": [
             {
               "kind": "field",
               "name": "Context",
               "privacy": "public",
               "static": true,
+              "description": "Context object of the ThemeProvider, to be consumed by child components",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "themes",
+              "name": "themeclass",
               "type": {
                 "text": "string"
               },
-              "description": "Available themes to switch to\n\nHas to be a space separated string, like className\ne.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`",
-              "attribute": "themes"
-            },
-            {
-              "kind": "field",
-              "name": "theme",
-              "type": {
-                "text": "Theme"
-              },
-              "description": "Current theme attribute\n\nHas to be fully qualified, such that\nthe theme name matches the className of the respective\ntheme stylesheet",
-              "attribute": "theme"
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "attribute": "themeclass"
             },
             {
               "kind": "method",
@@ -667,31 +675,23 @@
                   "text": "void"
                 }
               },
-              "description": "Update all observing components of this\nprovider to update the theme"
+              "description": "Update all observing components of this\nprovider to update the themeclass\n\nIs called on every re-render, see Provider class"
             },
             {
               "kind": "method",
-              "name": "updateActiveThemeClass",
+              "name": "setThemeInClassList",
               "privacy": "private",
-              "description": "Function to update the active theme classname to update the theme tokens\nas CSS variables on the web component."
+              "description": "Function to update the active theme classnames to update the theme tokens\nas CSS variables on the web component."
             }
           ],
           "attributes": [
             {
-              "name": "themes",
+              "name": "themeclass",
               "type": {
                 "text": "string"
               },
-              "description": "Available themes to switch to\n\nHas to be a space separated string, like className\ne.g.: `mds-theme-stable-darkWebex mds-theme-stable-lightWebex`",
-              "fieldName": "themes"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "Theme"
-              },
-              "description": "Current theme attribute\n\nHas to be fully qualified, such that\nthe theme name matches the className of the respective\ntheme stylesheet",
-              "fieldName": "theme"
+              "description": "Current theme class\n\nHas to be fully qualified, such that\nthe theme class matches the class of the respective\ntheme stylesheet\n\nDefault: 'mds-theme-stable-darkWebex'",
+              "fieldName": "themeclass"
             }
           ],
           "superclass": {
@@ -699,7 +699,7 @@
             "module": "/src/models"
           },
           "tagName": "mdc-themeprovider",
-          "jsDoc": "/**\n * ThemeProvider component, which sets the theme css variables\n * for the child dom nodes and allows to be consumed from sub components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes the different font faces available\n * for Text components.\n *\n * @tag mdc-themeprovider\n * @tagname mdc-themeprovider\n */",
+          "jsDoc": "/**\n * ThemeProvider component, which sets the passed in themeclass as class.\n * If the themeclass switches, the existing themeclass will be removed as a class\n * and the new themeclass will be added.\n *\n * CSS variables defined in the themeclass will be used for the styling of child dom nodes.\n *\n * Themeclass context can be be consumed from Lit child components\n * (see providerUtils.consume for how to consume)\n *\n * ThemeProvider also includes basic font defaults for text.\n *\n * @tagname mdc-themeprovider\n *\n * @slot default - children\n *\n * @cssproperty --mdc-themeprovider-font-family - Option to override the font family\n * @cssproperty --mdc-themeprovider-color-default - Option to override the default color\n */",
           "customElement": true
         }
       ],

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

@@ -1,14 +1,22 @@
 import Component from '../../components/themeprovider';
 /**
- * ThemeProvider component, which sets the theme css variables
- * for the child dom nodes and allows to be consumed from sub components
+ * ThemeProvider component, which sets the passed in themeclass as class.
+ * If the themeclass switches, the existing themeclass will be removed as a class
+ * and the new themeclass will be added.
+ *
+ * CSS variables defined in the themeclass will be used for the styling of child dom nodes.
+ *
+ * Themeclass context can be be consumed from Lit child components
  * (see providerUtils.consume for how to consume)
  *
- * ThemeProvider also includes the different font faces available
- * for Text components.
+ * ThemeProvider also includes basic font defaults for text.
  *
- * @tag mdc-themeprovider
  * @tagname mdc-themeprovider
+ *
+ * @slot default - children
+ *
+ * @cssproperty --mdc-themeprovider-font-family - Option to override the font family
+ * @cssproperty --mdc-themeprovider-color-default - Option to override the default color
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
 export default reactWrapper;

package/dist/react/themeprovider/index.js

@@ -6,15 +6,23 @@ const react_1 = require("@lit/react");
 const themeprovider_1 = tslib_1.__importDefault(require("../../components/themeprovider"));
 const themeprovider_constants_1 = require("../../components/themeprovider/themeprovider.constants");
 /**
- * ThemeProvider component, which sets the theme css variables
- * for the child dom nodes and allows to be consumed from sub components
+ * ThemeProvider component, which sets the passed in themeclass as class.
+ * If the themeclass switches, the existing themeclass will be removed as a class
+ * and the new themeclass will be added.
+ *
+ * CSS variables defined in the themeclass will be used for the styling of child dom nodes.
+ *
+ * Themeclass context can be be consumed from Lit child components
  * (see providerUtils.consume for how to consume)
  *
- * ThemeProvider also includes the different font faces available
- * for Text components.
+ * ThemeProvider also includes basic font defaults for text.
  *
- * @tag mdc-themeprovider
  * @tagname mdc-themeprovider
+ *
+ * @slot default - children
+ *
+ * @cssproperty --mdc-themeprovider-font-family - Option to override the font family
+ * @cssproperty --mdc-themeprovider-color-default - Option to override the default color
  */
 const reactWrapper = (0, react_1.createComponent)({
     tagName: themeprovider_constants_1.TAG_NAME,

package/package.json

@@ -14,8 +14,14 @@
       "require": "./dist/index.js"
     },
     "./browser": "./dist/browser/index.js",
-    "./module": "./dist/components",
-    "./react": "./dist/react"
+    "./react": "./dist/react/index.js",
+    "./react/*": "./dist/react/*",
+    "./dist/react": "./dist/react/index.js",
+    "./dist/react/*": "./dist/react/*",
+    "./components": "./dist/components/index.js",
+    "./components/*": "./dist/components/*",
+    "./dist/components": "./dist/components/index.js",
+    "./dist/components/*": "./dist/components/*"
   },
   "files": [
     "./dist/",
@@ -31,5 +37,5 @@
     "@momentum-design/icons": "*",
     "@momentum-design/tokens": "*"
   },
-  "version": "0.0.29"
+  "version": "0.0.30"
 }

package/dist/components/iconprovider/iconprovider.stories.utils.d.ts

@@ -1,11 +0,0 @@
-import { Component } from '../../models';
-declare class SubComponentIconProvider extends Component {
-    private readonly iconProviderContext;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        ['mdc-subcomponent-icon']: SubComponentIconProvider;
-    }
-}
-export {};

package/dist/components/iconprovider/iconprovider.stories.utils.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const models_1 = require("../../models");
-const iconprovider_component_1 = tslib_1.__importDefault(require("./iconprovider.component"));
-const provider_1 = tslib_1.__importDefault(require("../../utils/provider"));
-// SubComponent to be rendered in storybook, to showcase that the
-// icon provider can be consumed as a sub component
-class SubComponentIconProvider extends models_1.Component {
-    constructor() {
-        super(...arguments);
-        this.iconProviderContext = provider_1.default.consume({ host: this, context: iconprovider_component_1.default.Context });
-    }
-    render() {
-        var _a, _b, _c, _d;
-        return (0, lit_1.html) `
-      <p>URL: ${(_a = this.iconProviderContext.value) === null || _a === void 0 ? void 0 : _a.url}</p>
-      <p>File Extension: ${(_b = this.iconProviderContext.value) === null || _b === void 0 ? void 0 : _b.fileExtension}</p>
-      <p>Length Unit: ${(_c = this.iconProviderContext.value) === null || _c === void 0 ? void 0 : _c.lengthUnit}</p>
-      <p>Default Size: ${(_d = this.iconProviderContext.value) === null || _d === void 0 ? void 0 : _d.size}</p>
-    `;
-    }
-}
-SubComponentIconProvider.register('mdc-subcomponent-icon');

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

@@ -1,12 +0,0 @@
-import { Component } from '../../models';
-declare class SubComponentThemeProvider extends Component {
-    currentTheme?: string;
-    private themeProviderContext;
-    render(): import("lit-html").TemplateResult<1>;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        ['mdc-subcomponent']: SubComponentThemeProvider;
-    }
-}
-export {};

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

@@ -1,20 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const lit_1 = require("lit");
-const models_1 = require("../../models");
-const themeprovider_component_1 = tslib_1.__importDefault(require("./themeprovider.component"));
-const provider_1 = tslib_1.__importDefault(require("../../utils/provider"));
-// Subcomponent to be rendered in storybook, to showcase that the
-// theme can be consumed as a subcomponent
-class SubComponentThemeProvider extends models_1.Component {
-    constructor() {
-        super(...arguments);
-        this.themeProviderContext = provider_1.default.consume({ host: this, context: themeprovider_component_1.default.Context });
-    }
-    render() {
-        var _a;
-        return (0, lit_1.html) ` <p>${(_a = this.themeProviderContext.value) === null || _a === void 0 ? void 0 : _a.theme}</p> `;
-    }
-}
-SubComponentThemeProvider.register('mdc-subcomponent');

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

@@ -1,5 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-"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;