@momentum-design/components 0.0.28 → 0.0.29

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

@@ -15,7 +15,7 @@ declare class Avatar extends Component {
     /**
      * Scale of the avatar
      */
-    scale?: number;
+    size?: number;
     /**
      * Updates the size by setting the width and height
      */

package/dist/components/avatar/avatar.component.js

@@ -22,21 +22,21 @@ class Avatar extends models_1.Component {
         /**
          * Scale of the avatar
          */
-        this.scale = avatar_constants_1.DEFAULTS.SCALE;
+        this.size = avatar_constants_1.DEFAULTS.SIZE;
     }
     /**
      * Updates the size by setting the width and height
      */
     updateSize() {
-        if (this.scale) {
-            const value = `${this.scale}${avatar_constants_1.LENGTH_UNIT}`;
+        if (this.size) {
+            const value = `${this.size}${avatar_constants_1.LENGTH_UNIT}`;
             this.style.width = value;
             this.style.height = value;
         }
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('scale')) {
+        if (changedProperties.has('size')) {
             this.updateSize();
         }
     }
@@ -75,5 +75,5 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: Number }),
     tslib_1.__metadata("design:type", Number)
-], Avatar.prototype, "scale", void 0);
+], Avatar.prototype, "size", void 0);
 exports.default = Avatar;

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

@@ -2,6 +2,6 @@ declare const TAG_NAME: "mdc-avatar";
 declare const LENGTH_UNIT = "rem";
 declare const DEFAULTS: {
     TYPE: "photo";
-    SCALE: number;
+    SIZE: number;
 };
 export { TAG_NAME, DEFAULTS, LENGTH_UNIT };

package/dist/components/avatar/avatar.constants.js

@@ -9,6 +9,6 @@ const LENGTH_UNIT = 'rem';
 exports.LENGTH_UNIT = LENGTH_UNIT;
 const DEFAULTS = {
     TYPE: 'photo',
-    SCALE: 1.5,
+    SIZE: 1.5,
 };
 exports.DEFAULTS = DEFAULTS;

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

@@ -21,7 +21,7 @@ declare class Badge extends Component {
      *
      * Default: `1`
      */
-    scale?: number;
+    size?: number;
     /**
      * Length unit attribute for scale
      *

package/dist/components/badge/badge.component.js

@@ -3,6 +3,7 @@ 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 if_defined_js_1 = require("lit/directives/if-defined.js");
 const style_map_js_1 = require("lit/directives/style-map.js");
 const models_1 = require("../../models");
 const badge_constants_1 = require("./badge.constants");
@@ -30,7 +31,7 @@ class Badge extends models_1.Component {
          *
          * Default: `1`
          */
-        this.scale = badge_constants_1.DEFAULTS.SCALE;
+        this.size = badge_constants_1.DEFAULTS.SIZE;
         /**
          * Length unit attribute for scale
          *
@@ -49,13 +50,13 @@ class Badge extends models_1.Component {
     }
     updated(changedProperties) {
         super.updated(changedProperties);
-        if (changedProperties.has('scale') || changedProperties.has('lengthUnit')) {
+        if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();
         }
     }
     iconTemplate() {
         return (0, lit_1.html) `<div class="mdc-badge-icon-container">
-      <mdc-icon name="${this.iconName}" scale="100" length-unit="%"></mdc-icon>
+      <mdc-icon name=${(0, if_defined_js_1.ifDefined)(this.iconName)} size="100" length-unit="%"></mdc-icon>
     </div>`;
     }
     textTemplate() {
@@ -66,7 +67,7 @@ class Badge extends models_1.Component {
     }
     render() {
         let content;
-        const size = `${this.scale}${this.lengthUnit}`;
+        const size = `${this.size}${this.lengthUnit}`;
         let sizeStyles = { width: size, height: size };
         switch (this.type) {
             case 'regular':
@@ -98,7 +99,7 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: Number }),
     tslib_1.__metadata("design:type", Number)
-], Badge.prototype, "scale", void 0);
+], Badge.prototype, "size", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
     tslib_1.__metadata("design:type", String)

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

@@ -2,7 +2,7 @@ declare const TAG_NAME: "mdc-badge";
 declare const WARNING_ICON_NAME = "warning-badge-filled";
 declare const DEFAULTS: {
     TYPE: "regular";
-    SCALE: number;
+    SIZE: number;
     LENGTH_UNIT: string;
 };
-export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME };
+export { TAG_NAME, DEFAULTS, WARNING_ICON_NAME, };

package/dist/components/badge/badge.constants.js

@@ -9,7 +9,7 @@ const WARNING_ICON_NAME = 'warning-badge-filled';
 exports.WARNING_ICON_NAME = WARNING_ICON_NAME;
 const DEFAULTS = {
     TYPE: 'regular',
-    SCALE: 1,
+    SIZE: 1,
     LENGTH_UNIT: 'rem',
 };
 exports.DEFAULTS = DEFAULTS;

package/dist/components/badge/badge.styles.js

@@ -7,6 +7,7 @@ const styles = [
     (0, lit_1.css) `
     :host {
       --mdc-badge-icon-background-color: var(--mds-color-theme-background-accent-normal);
+      --mdc-badge-icon-color: var(--mds-color-theme-common-text-primary-normal);
     }
 
     .mdc-badge-container {
@@ -15,6 +16,7 @@ const styles = [
       align-items: center;
       border-radius: 9999px;
       background-color: var(--mdc-badge-icon-background-color);
+      color: var(--mdc-badge-icon-color);
     }
 
     .mdc-badge-icon-container {

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

@@ -10,10 +10,10 @@ import { Component } from '../../models';
  * Once fetched, the icon will be mounted. If fetching wasn't successful,
  * nothing will be shown.
  *
- * The `scale` attribute allows scaling the icon based on the provided
+ * The `size` attribute allows sizing the icon based on the provided
  * `length-unit` attribute (which will either come from the IconProvider or
  * could be overridden per icon). For example:
- * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
  * `width: 1em; height: 1em`.
  *
  * For accessibility the `role` and `aria-label` of the icon can be set.
@@ -24,16 +24,17 @@ import { Component } from '../../models';
 declare class Icon extends Component {
     private iconData?;
     private lengthUnitFromContext?;
+    private sizeFromContext?;
     /**
      * Name of the icon (= filename)
      */
     name?: string;
     /**
-     * Scale of the icon (works in combination with length unit)
+     * Size of the icon (works in combination with length unit)
      */
-    scale?: number;
+    size?: number;
     /**
-     * Length unit attribute for overridding length-unit from `IconProvider`
+     * Length unit attribute for overriding length-unit from `IconProvider`
      */
     lengthUnit?: string;
     /**
@@ -44,7 +45,7 @@ declare class Icon extends Component {
      * Aria-label attribute to be set for accessibility
      */
     ariaLabel: string | null;
-    private iconProviderContext;
+    private readonly iconProviderContext;
     /**
      * Get Icon Data function which will fetch the icon (currently only svg)
      * and sets state and attributes once fetched successfully
@@ -56,6 +57,7 @@ declare class Icon extends Component {
     private updateSize;
     private setRoleOnIcon;
     private setAriaLabelOnIcon;
+    private get computedIconSize();
     updated(changedProperties: Map<string, any>): void;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

package/dist/components/icon/icon.component.js

@@ -20,10 +20,10 @@ const icon_constants_1 = require("./icon.constants");
  * Once fetched, the icon will be mounted. If fetching wasn't successful,
  * nothing will be shown.
  *
- * The `scale` attribute allows scaling the icon based on the provided
+ * The `size` attribute allows sizing the icon based on the provided
  * `length-unit` attribute (which will either come from the IconProvider or
  * could be overridden per icon). For example:
- * if `scale = 1` and `length-unit = 'em'`, the size of the icon will be
+ * if `size = 1` and `length-unit = 'em'`, the size of the icon will be
  * `width: 1em; height: 1em`.
  *
  * For accessibility the `role` and `aria-label` of the icon can be set.
@@ -38,10 +38,6 @@ class Icon extends models_1.Component {
          * Name of the icon (= filename)
          */
         this.name = icon_constants_1.DEFAULTS.NAME;
-        /**
-         * Scale of the icon (works in combination with length unit)
-         */
-        this.scale = icon_constants_1.DEFAULTS.SCALE;
         /**
          * Role attribute to be set for accessibility
          */
@@ -73,8 +69,9 @@ class Icon extends models_1.Component {
      * Updates the size by setting the width and height
      */
     updateSize() {
-        if (this.scale && (this.lengthUnit || this.lengthUnitFromContext)) {
-            const value = `${this.scale}${this.lengthUnit || this.lengthUnitFromContext}`;
+        var _a;
+        if (this.computedIconSize && (this.lengthUnit || this.lengthUnitFromContext)) {
+            const value = `${this.computedIconSize}${(_a = this.lengthUnit) !== null && _a !== void 0 ? _a : this.lengthUnitFromContext}`;
             this.style.width = value;
             this.style.height = value;
         }
@@ -99,8 +96,12 @@ class Icon extends models_1.Component {
             (_b = this.iconData) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-label');
         }
     }
-    updated(changedProperties) {
+    get computedIconSize() {
         var _a, _b;
+        return (_b = (_a = this.size) !== null && _a !== void 0 ? _a : this.sizeFromContext) !== null && _b !== void 0 ? _b : icon_constants_1.DEFAULTS.SIZE;
+    }
+    updated(changedProperties) {
+        var _a, _b, _c, _d;
         super.updated(changedProperties);
         if (changedProperties.has('name')) {
             // fetch icon data if name changes:
@@ -114,13 +115,17 @@ class Icon extends models_1.Component {
         if (changedProperties.has('ariaLabel')) {
             this.setAriaLabelOnIcon();
         }
-        if (changedProperties.has('scale') || changedProperties.has('lengthUnit')) {
+        if (changedProperties.has('size') || changedProperties.has('lengthUnit')) {
             this.updateSize();
         }
         if (this.lengthUnitFromContext !== ((_a = this.iconProviderContext.value) === null || _a === void 0 ? void 0 : _a.lengthUnit)) {
             this.lengthUnitFromContext = (_b = this.iconProviderContext.value) === null || _b === void 0 ? void 0 : _b.lengthUnit;
             this.updateSize();
         }
+        if (this.sizeFromContext !== ((_c = this.iconProviderContext.value) === null || _c === void 0 ? void 0 : _c.size)) {
+            this.sizeFromContext = (_d = this.iconProviderContext.value) === null || _d === void 0 ? void 0 : _d.size;
+            this.updateSize();
+        }
     }
     render() {
         return (0, lit_1.html) ` ${this.iconData} `;
@@ -135,6 +140,10 @@ tslib_1.__decorate([
     (0, decorators_js_1.state)(),
     tslib_1.__metadata("design:type", String)
 ], Icon.prototype, "lengthUnitFromContext", void 0);
+tslib_1.__decorate([
+    (0, decorators_js_1.state)(),
+    tslib_1.__metadata("design:type", Number)
+], Icon.prototype, "sizeFromContext", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, reflect: true }),
     tslib_1.__metadata("design:type", String)
@@ -142,7 +151,7 @@ tslib_1.__decorate([
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: Number }),
     tslib_1.__metadata("design:type", Number)
-], Icon.prototype, "scale", void 0);
+], Icon.prototype, "size", void 0);
 tslib_1.__decorate([
     (0, decorators_js_1.property)({ type: String, attribute: 'length-unit' }),
     tslib_1.__metadata("design:type", String)

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

@@ -1,6 +1,6 @@
 declare const TAG_NAME: "mdc-icon";
 declare const DEFAULTS: {
     NAME: undefined;
-    SCALE: number;
+    SIZE: number;
 };
 export { TAG_NAME, DEFAULTS };

package/dist/components/icon/icon.constants.js

@@ -7,6 +7,6 @@ const TAG_NAME = tag_name_1.default.constructTagName('icon');
 exports.TAG_NAME = TAG_NAME;
 const DEFAULTS = {
     NAME: undefined,
-    SCALE: 1,
+    SIZE: 1,
 };
 exports.DEFAULTS = DEFAULTS;

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

@@ -27,7 +27,12 @@ declare class IconProvider extends Provider<IconProviderContext> {
     /**
      * Length unit used for sizing of icons, default: 'em'
      */
-    lengthUnit?: string;
+    lengthUnit: string;
+    /**
+     * The default size of the icon.
+     * If not set, it falls back to the size defined by the length unit.
+     */
+    size?: number;
     private updateValuesInContext;
     protected updateContext(): void;
 }

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

@@ -31,6 +31,11 @@ class IconProvider extends models_1.Provider {
          * Length unit used for sizing of icons, default: 'em'
          */
         this.lengthUnit = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT;
+        /**
+         * The default size of the icon.
+         * If not set, it falls back to the size defined by the length unit.
+         */
+        this.size = iconprovider_constants_1.DEFAULTS.LENGTH_UNIT_SIZE[iconprovider_constants_1.DEFAULTS.LENGTH_UNIT];
     }
     static get Context() {
         return iconprovider_context_1.default.context;
@@ -41,13 +46,17 @@ class IconProvider extends models_1.Provider {
             this.context.value.fileExtension = this.fileExtension;
         }
         this.context.value.url = this.url;
-        this.context.value.lengthUnit = this.lengthUnit;
+        if (this.lengthUnit && iconprovider_constants_1.ALLOWED_LENGTH_UNITS.includes(this.lengthUnit)) {
+            this.context.value.lengthUnit = this.lengthUnit;
+        }
+        this.context.value.size = this.size;
     }
     updateContext() {
         let shouldUpdateConsumers = false;
         if (this.context.value.fileExtension !== this.fileExtension
             || this.context.value.url !== this.url
-            || this.context.value.lengthUnit !== this.lengthUnit) {
+            || this.context.value.lengthUnit !== this.lengthUnit
+            || this.context.value.size !== this.size) {
             this.updateValuesInContext();
             shouldUpdateConsumers = true;
         }
@@ -68,4 +77,8 @@ 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);
+tslib_1.__decorate([
+    (0, decorators_js_1.property)({ type: Number, reflect: true }),
+    tslib_1.__metadata("design:type", Number)
+], IconProvider.prototype, "size", void 0);
 exports.default = IconProvider;

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

@@ -1,7 +1,9 @@
 declare const TAG_NAME: "mdc-iconprovider";
 declare const ALLOWED_FILE_EXTENSIONS: string[];
+declare const ALLOWED_LENGTH_UNITS: string[];
 declare const DEFAULTS: {
     FILE_EXTENSION: string;
     LENGTH_UNIT: string;
+    LENGTH_UNIT_SIZE: Record<string, number>;
 };
-export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS };
+export { TAG_NAME, DEFAULTS, ALLOWED_FILE_EXTENSIONS, ALLOWED_LENGTH_UNITS };

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

@@ -1,14 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALLOWED_FILE_EXTENSIONS = exports.DEFAULTS = exports.TAG_NAME = void 0;
+exports.ALLOWED_LENGTH_UNITS = 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 ALLOWED_LENGTH_UNITS = ['em', 'rem', 'px'];
+exports.ALLOWED_LENGTH_UNITS = ALLOWED_LENGTH_UNITS;
 const DEFAULTS = {
     FILE_EXTENSION: 'svg',
     LENGTH_UNIT: 'em',
+    LENGTH_UNIT_SIZE: {
+        px: 16,
+        em: 1,
+        rem: 1,
+    },
 };
 exports.DEFAULTS = DEFAULTS;

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

@@ -2,7 +2,8 @@ declare class IconProviderContext {
     fileExtension?: string;
     url?: string;
     lengthUnit?: string;
-    static context: {
+    size?: number;
+    static readonly context: {
         __context__: IconProviderContext;
     };
 }

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

@@ -1,7 +1,6 @@
 import { Component } from '../../models';
 declare class SubComponentIconProvider extends Component {
-    currentTheme?: string;
-    private iconProviderContext;
+    private readonly iconProviderContext;
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

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

@@ -5,19 +5,20 @@ 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
-// theme can be consumed as a subcomponent
+// 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;
+        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>
     `;
     }
 }

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

@@ -13,7 +13,7 @@ declare const isHeading: (type: FontType) => boolean;
 declare const getRole: (type?: FontType) => "heading" | "paragraph" | null;
 /**
  * Get corresponding aria-level to type
- * @param type type to find corresponding level for
+ * @param type - type to find corresponding level for
  * @returns aria-level (has to be a number)
  */
 declare const getAriaLevel: (type?: FontType) => string | null;

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

@@ -35,7 +35,7 @@ const getRole = (type) => {
 exports.getRole = getRole;
 /**
  * Get corresponding aria-level to type
- * @param type type to find corresponding level for
+ * @param type - type to find corresponding level for
  * @returns aria-level (has to be a number)
  */
 const getAriaLevel = (type) => {