@momentum-design/components 0.16.13 → 0.16.15

package/dist/components/{labelandhelper/labelandhelper.component.d.ts → formfieldwrapper/formfieldwrapper.component.d.ts}

@@ -1,15 +1,15 @@
 import { CSSResult, nothing } from 'lit';
 import { Component } from '../../models';
-import type { ValidationType } from './labelandhelper.types';
+import type { ValidationType } from './formfieldwrapper.types';
 /**
- * labelandhelper is a component that contains the label and helper/validation text
+ * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
  * It is used as an internal component and is not intended to be used directly by consumers.
  *
- * @tagname mdc-labelandhelper
+ * @tagname mdc-formfieldwrapper
  *
  */
-declare class LabelAndHelper extends Component {
+declare class FormfieldWrapper extends Component {
     /**
      * The label of the input field. It is linked to the input field using the `for` attribute.
      */
@@ -69,4 +69,4 @@ declare class LabelAndHelper extends Component {
     render(): import("lit-html").TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
-export default LabelAndHelper;
+export default FormfieldWrapper;

package/dist/components/{labelandhelper/labelandhelper.component.js → formfieldwrapper/formfieldwrapper.component.js}

@@ -10,19 +10,19 @@ var __metadata = (this && this.__metadata) || function (k, v) {
 import { html, nothing } from 'lit';
 import { v4 as uuidv4 } from 'uuid';
 import { property } from 'lit/decorators.js';
-import styles from './labelandhelper.styles';
+import styles from './formfieldwrapper.styles';
 import { Component } from '../../models';
-import { DEFAULTS, MDC_TEXT_OPTIONS } from './labelandhelper.constants';
-import { getHelperIcon } from './labelandhelper.utils';
+import { DEFAULTS, MDC_TEXT_OPTIONS } from './formfieldwrapper.constants';
+import { getHelperIcon } from './formfieldwrapper.utils';
 /**
- * labelandhelper is a component that contains the label and helper/validation text
+ * formfieldwrapper is a component that contains the label and helper/validation text
  *  that can be configured in various ways to suit different use cases (most of the input related components).
  * It is used as an internal component and is not intended to be used directly by consumers.
  *
- * @tagname mdc-labelandhelper
+ * @tagname mdc-formfieldwrapper
  *
  */
-class LabelAndHelper extends Component {
+class FormfieldWrapper extends Component {
     constructor() {
         super(...arguments);
         /**
@@ -113,25 +113,25 @@ class LabelAndHelper extends Component {
     `;
     }
 }
-LabelAndHelper.styles = [...Component.styles, ...styles];
+FormfieldWrapper.styles = [...Component.styles, ...styles];
 __decorate([
     property({ reflect: true, type: String }),
     __metadata("design:type", String)
-], LabelAndHelper.prototype, "label", void 0);
+], FormfieldWrapper.prototype, "label", void 0);
 __decorate([
     property({ type: String }),
     __metadata("design:type", Object)
-], LabelAndHelper.prototype, "id", void 0);
+], FormfieldWrapper.prototype, "id", void 0);
 __decorate([
     property({ reflect: true, attribute: 'help-text-type' }),
     __metadata("design:type", String)
-], LabelAndHelper.prototype, "helpTextType", void 0);
+], FormfieldWrapper.prototype, "helpTextType", void 0);
 __decorate([
     property({ type: String, reflect: true, attribute: 'help-text' }),
     __metadata("design:type", String)
-], LabelAndHelper.prototype, "helpText", void 0);
+], FormfieldWrapper.prototype, "helpText", void 0);
 __decorate([
     property({ type: String, attribute: 'label-info-text' }),
     __metadata("design:type", String)
-], LabelAndHelper.prototype, "labelInfoText", void 0);
-export default LabelAndHelper;
+], FormfieldWrapper.prototype, "labelInfoText", void 0);
+export default FormfieldWrapper;

package/dist/components/{labelandhelper/labelandhelper.constants.d.ts → formfieldwrapper/formfieldwrapper.constants.d.ts}

@@ -1,4 +1,4 @@
-declare const TAG_NAME: "mdc-labelandhelper";
+declare const TAG_NAME: "mdc-formfieldwrapper";
 declare const VALIDATION: {
     readonly ERROR: "error";
     readonly WARNING: "warning";

package/dist/components/{labelandhelper/labelandhelper.constants.js → formfieldwrapper/formfieldwrapper.constants.js}

@@ -1,6 +1,6 @@
 import utils from '../../utils/tag-name';
 import { TYPE, VALID_TEXT_TAGS } from '../text/text.constants';
-const TAG_NAME = utils.constructTagName('labelandhelper');
+const TAG_NAME = utils.constructTagName('formfieldwrapper');
 const VALIDATION = {
     ERROR: 'error',
     WARNING: 'warning',

package/dist/components/{labelandhelper/labelandhelper.types.d.ts → formfieldwrapper/formfieldwrapper.types.d.ts}

@@ -1,4 +1,4 @@
 import type { ValueOf } from '../../utils/types';
-import { VALIDATION } from './labelandhelper.constants';
+import { VALIDATION } from './formfieldwrapper.constants';
 type ValidationType = ValueOf<typeof VALIDATION>;
 export { ValidationType };

package/dist/components/{labelandhelper/labelandhelper.utils.d.ts → formfieldwrapper/formfieldwrapper.utils.d.ts}

@@ -1,4 +1,4 @@
 import type { IconNames } from '../icon/icon.types';
-import type { ValidationType } from './labelandhelper.types';
+import type { ValidationType } from './formfieldwrapper.types';
 declare const getHelperIcon: (type: ValidationType) => IconNames | '';
 export { getHelperIcon };

package/dist/components/{labelandhelper/labelandhelper.utils.js → formfieldwrapper/formfieldwrapper.utils.js}

@@ -1,4 +1,4 @@
-import { VALIDATION } from './labelandhelper.constants';
+import { VALIDATION } from './formfieldwrapper.constants';
 const getHelperIcon = (type) => {
     const helperIconSizeMap = {
         [VALIDATION.ERROR]: 'error-legacy-filled',

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

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

package/dist/components/formfieldwrapper/index.js

@@ -0,0 +1,6 @@
+import FormfieldWrapper from './formfieldwrapper.component';
+import { TAG_NAME } from './formfieldwrapper.constants';
+import '../icon';
+import '../text';
+FormfieldWrapper.register(TAG_NAME);
+export default FormfieldWrapper;

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 {};