@momentum-design/components 0.16.14 → 0.16.15

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

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

package/dist/components/modalcontainer/index.js

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

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

@@ -0,0 +1,44 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+import type { ModalContainerColor, ModalContainerElevation, ModalContainerRole } from './modalcontainer.types';
+/**
+ * The `mdc-modalcontainer` component is an element used to
+ * display a modal container that can further be used in popover.
+ *
+ * @tagname mdc-modalcontainer
+ *
+ * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer
+ *
+ * @slot - Default slot for modal container
+ */
+declare class Modalcontainer extends Component {
+    /**
+     * Color of the modalcontainer
+     * - **tonal**
+     * - **contrast**
+     * @default tonal
+     */
+    color: ModalContainerColor;
+    /**
+     * Elevation of the modalcontainer where each value corresponds to a different drop shadow.
+     * - **0**
+     * - **1**
+     * - **2**
+     * - **3**
+     * - **4**
+     * @default 0
+     */
+    elevation: ModalContainerElevation;
+    /**
+     * Role of the modalcontainer
+     * @default dialog
+     */
+    role: ModalContainerRole;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Modalcontainer;

package/dist/components/modalcontainer/modalcontainer.component.js

@@ -0,0 +1,85 @@
+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 { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import styles from './modalcontainer.styles';
+import { Component } from '../../models';
+import { DEFAULTS } from './modalcontainer.constants';
+/**
+ * The `mdc-modalcontainer` component is an element used to
+ * display a modal container that can further be used in popover.
+ *
+ * @tagname mdc-modalcontainer
+ *
+ * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer
+ *
+ * @slot - Default slot for modal container
+ */
+class Modalcontainer extends Component {
+    constructor() {
+        super(...arguments);
+        /**
+         * Color of the modalcontainer
+         * - **tonal**
+         * - **contrast**
+         * @default tonal
+         */
+        this.color = DEFAULTS.COLOR;
+        /**
+         * Elevation of the modalcontainer where each value corresponds to a different drop shadow.
+         * - **0**
+         * - **1**
+         * - **2**
+         * - **3**
+         * - **4**
+         * @default 0
+         */
+        this.elevation = DEFAULTS.ELEVATION;
+        /**
+         * Role of the modalcontainer
+         * @default dialog
+         */
+        this.role = DEFAULTS.ROLE;
+    }
+    render() {
+        return html `
+      <div 
+        id='mdc-modal-container' 
+        class='mdc-modal-container'  
+        ?contrast="${this.color === 'contrast'}"
+        role="${this.role}"
+        aria-modal='true'
+        aria-label=${ifDefined(this.ariaLabel)}
+        data-elevation="${this.elevation}"
+        >
+        <slot></slot>
+      </div>
+      `;
+    }
+}
+Modalcontainer.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], Modalcontainer.prototype, "color", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], Modalcontainer.prototype, "elevation", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], Modalcontainer.prototype, "role", void 0);
+export default Modalcontainer;

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

@@ -0,0 +1,23 @@
+declare const TAG_NAME: "mdc-modalcontainer";
+declare const COLOR: {
+    readonly TONAL: "tonal";
+    readonly CONTRAST: "contrast";
+};
+declare const ELEVATION: {
+    readonly 0: 0;
+    readonly 1: 1;
+    readonly 2: 2;
+    readonly 3: 3;
+    readonly 4: 4;
+};
+declare const ROLE: {
+    readonly DIALOG: "dialog";
+    readonly ALERT_DIALOG: "alertdialog";
+};
+declare const DEFAULTS: {
+    readonly COLOR: "tonal";
+    readonly ELEVATION: 0;
+    readonly ROLE: "dialog";
+    readonly CHILDREN: "Lorem ipsum dolor sit amet";
+};
+export { TAG_NAME, COLOR, DEFAULTS, ELEVATION, ROLE };

package/dist/components/modalcontainer/modalcontainer.constants.js

@@ -0,0 +1,24 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('modalcontainer');
+const COLOR = {
+    TONAL: 'tonal',
+    CONTRAST: 'contrast',
+};
+const ELEVATION = {
+    0: 0,
+    1: 1,
+    2: 2,
+    3: 3,
+    4: 4,
+};
+const ROLE = {
+    DIALOG: 'dialog',
+    ALERT_DIALOG: 'alertdialog',
+};
+const DEFAULTS = {
+    COLOR: COLOR.TONAL,
+    ELEVATION: ELEVATION[0],
+    ROLE: ROLE.DIALOG,
+    CHILDREN: 'Lorem ipsum dolor sit amet',
+};
+export { TAG_NAME, COLOR, DEFAULTS, ELEVATION, ROLE };

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

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

package/dist/components/modalcontainer/modalcontainer.styles.js

@@ -0,0 +1,45 @@
+import { css } from 'lit';
+import { hostFitContentStyles } from '../../utils/styles';
+const styles = [
+    hostFitContentStyles,
+    css `
+    :host {
+      --mdc-modalcontainer-primary-background-color: var(--mds-color-theme-background-solid-primary-normal);
+      --mdc-modalcontainer-border-color: var(--mds-color-theme-outline-secondary-normal);
+      --mdc-modalcontainer-inverted-background-color: var(--mds-color-theme-inverted-background-normal);
+      --mdc-modalcontainer-inverted-border-color: var(--mds-color-theme-inverted-outline-primary-normal);
+      --mdc-modalcontainer-inverted-text-color: var(--mds-color-theme-inverted-text-primary-normal);
+      --mdc-modalcontainer-elevation-1: var(--mds-elevation-1);
+      --mdc-modalcontainer-elevation-2: var(--mds-elevation-2);
+      --mdc-modalcontainer-elevation-3: var(--mds-elevation-3);
+      --mdc-modalcontainer-elevation-4: var(--mds-elevation-4);
+    }
+
+    .mdc-modal-container {
+      padding: 0.75rem;
+      background-color: var(--mdc-modalcontainer-primary-background-color);
+      border-radius: 0.5rem;
+      border: 0.0625rem solid var(--mdc-modalcontainer-border-color);
+    }
+
+    .mdc-modal-container[contrast] {
+      background-color: var(--mdc-modalcontainer-inverted-background-color);
+      border: 0.0625rem solid var(--mdc-modalcontainer-inverted-border-color);
+      color: var(--mdc-modalcontainer-inverted-text-color);
+    }
+
+    .mdc-modal-container[data-elevation='1'] {
+      filter: var(--mdc-modalcontainer-elevation-1);
+    }
+    .mdc-modal-container[data-elevation='2'] {
+      filter: var(--mdc-modalcontainer-elevation-2);
+    }
+    .mdc-modal-container[data-elevation='3'] {
+      filter: var(--mdc-modalcontainer-elevation-3);
+    }
+    .mdc-modal-container[data-elevation='4'] {
+      filter: var(--mdc-modalcontainer-elevation-4);
+    }
+  `,
+];
+export default styles;

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

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { COLOR, ELEVATION, ROLE } from './modalcontainer.constants';
+export type ModalContainerColor = ValueOf<typeof COLOR>;
+export type ModalContainerElevation = ValueOf<typeof ELEVATION>;
+export type ModalContainerRole = ValueOf<typeof ROLE>;

package/dist/components/modalcontainer/modalcontainer.types.js

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

package/dist/custom-elements.json

@@ -2769,6 +2769,125 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/modalcontainer/modalcontainer.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `mdc-modalcontainer` component is an element used to\ndisplay a modal container that can further be used in popover.",
+          "name": "Modalcontainer",
+          "cssProperties": [
+            {
+              "description": "primary background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-primary-background-color"
+            },
+            {
+              "description": "border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-border-color"
+            },
+            {
+              "description": "inverted background color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-background-color"
+            },
+            {
+              "description": "inverted border color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-border-color"
+            },
+            {
+              "description": "inverted text color of the modalcontainer",
+              "name": "--mdc-modalcontainer-inverted-text-color"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for modal container",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ModalContainerColor"
+              },
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "elevation",
+              "type": {
+                "text": "ModalContainerElevation"
+              },
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "attribute": "elevation",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "ModalContainerRole"
+              },
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "attribute": "role"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "color",
+              "type": {
+                "text": "ModalContainerColor"
+              },
+              "description": "Color of the modalcontainer\n- **tonal**\n- **contrast**",
+              "default": "tonal",
+              "fieldName": "color"
+            },
+            {
+              "name": "elevation",
+              "type": {
+                "text": "ModalContainerElevation"
+              },
+              "description": "Elevation of the modalcontainer where each value corresponds to a different drop shadow.\n- **0**\n- **1**\n- **2**\n- **3**\n- **4**",
+              "default": "0",
+              "fieldName": "elevation"
+            },
+            {
+              "name": "role",
+              "type": {
+                "text": "ModalContainerRole"
+              },
+              "description": "Role of the modalcontainer",
+              "default": "dialog",
+              "fieldName": "role"
+            }
+          ],
+          "superclass": {
+            "name": "Component",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-modalcontainer",
+          "jsDoc": "/**\n * The `mdc-modalcontainer` component is an element used to\n * display a modal container that can further be used in popover.\n *\n * @tagname mdc-modalcontainer\n *\n * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer\n * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer\n *\n * @slot - Default slot for modal container\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Modalcontainer",
+            "module": "components/modalcontainer/modalcontainer.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/presence/presence.component.js",

package/dist/index.d.ts

@@ -9,8 +9,9 @@ import Button from './components/button';
 import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
+import Modalcontainer from './components/modalcontainer';
 import Buttonsimple from './components/buttonsimple';
 import Avatarbutton from './components/avatarbutton';
 import type { TextType } from './components/text/text.types';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, };
 export type { TextType, };

package/dist/index.js

@@ -9,6 +9,7 @@ import Button from './components/button';
 import Bullet from './components/bullet';
 import Marker from './components/marker';
 import Divider from './components/divider';
+import Modalcontainer from './components/modalcontainer';
 import Buttonsimple from './components/buttonsimple';
 import Avatarbutton from './components/avatarbutton';
-export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Buttonsimple, Avatarbutton, };
+export { ThemeProvider, Icon, IconProvider, Avatar, Badge, Presence, Text, Button, Bullet, Marker, Divider, Modalcontainer, Buttonsimple, Avatarbutton, };

package/dist/react/index.d.ts

@@ -9,6 +9,7 @@ export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Marker } from './marker';
+export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

package/dist/react/index.js

@@ -9,6 +9,7 @@ export { default as FormfieldWrapper } from './formfieldwrapper';
 export { default as Icon } from './icon';
 export { default as IconProvider } from './iconprovider';
 export { default as Marker } from './marker';
+export { default as Modalcontainer } from './modalcontainer';
 export { default as Presence } from './presence';
 export { default as Text } from './text';
 export { default as ThemeProvider } from './themeprovider';

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

@@ -0,0 +1,17 @@
+import Component from '../../components/modalcontainer';
+/**
+ * The `mdc-modalcontainer` component is an element used to
+ * display a modal container that can further be used in popover.
+ *
+ * @tagname mdc-modalcontainer
+ *
+ * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer
+ *
+ * @slot - Default slot for modal container
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/modalcontainer/index.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/modalcontainer';
+import { TAG_NAME } from '../../components/modalcontainer/modalcontainer.constants';
+/**
+ * The `mdc-modalcontainer` component is an element used to
+ * display a modal container that can further be used in popover.
+ *
+ * @tagname mdc-modalcontainer
+ *
+ * @cssproperty --mdc-modalcontainer-primary-background-color - primary background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-border-color - border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-background-color - inverted background color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-border-color - inverted border color of the modalcontainer
+ * @cssproperty --mdc-modalcontainer-inverted-text-color - inverted text color of the modalcontainer
+ *
+ * @slot - Default slot for modal container
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'Modalcontainer',
+});
+export default reactWrapper;

package/package.json

@@ -36,5 +36,5 @@
     "lit": "^3.2.0",
     "uuid": "^11.0.5"
   },
-  "version": "0.16.14"
+  "version": "0.16.15"
 }