@momentum-design/components 0.30.1 → 0.31.1

package/dist/components/modalcontainer/index.js

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

@@ -1,50 +0,0 @@
-import { CSSResult } from 'lit';
-import { Component } from '../../models';
-import type { ModalContainerColor, ModalContainerElevation } from './modalcontainer.types';
-declare const Modalcontainer_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelledbyMixin").DataAriaLabelledbyMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaDescribedbyMixin").DataAriaDescribedbyMixinInterface> & typeof Component;
-/**
- * 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 Modalcontainer_base {
-    /**
-     * 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
-     */
-    dataRole: HTMLElement['role'];
-    /**
-     * Aria modal of the modalcontainer
-     * @default false
-     */
-    dataAriaModal: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: Array<CSSResult>;
-}
-export default Modalcontainer;

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

@@ -1,96 +0,0 @@
-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';
-import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
-import { DataAriaDescribedbyMixin } from '../../utils/mixins/DataAriaDescribedbyMixin';
-import { DataAriaLabelledbyMixin } from '../../utils/mixins/DataAriaLabelledbyMixin';
-/**
- * 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 DataAriaLabelMixin(DataAriaLabelledbyMixin(DataAriaDescribedbyMixin(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.dataRole = DEFAULTS.ROLE;
-        /**
-         * Aria modal of the modalcontainer
-         * @default false
-         */
-        this.dataAriaModal = DEFAULTS.ARIA_MODAL;
-    }
-    render() {
-        return html `
-      <div
-        role="${ifDefined(this.dataRole)}"
-        aria-modal=${ifDefined(this.dataAriaModal === true ? 'true' : undefined)}
-        aria-label="${ifDefined(this.dataAriaLabel)}"
-        aria-labelledby="${ifDefined(this.dataAriaLabelledby)}"
-        aria-describedby="${ifDefined(this.dataAriaDescribedby)}"
-        part="container"
-      >
-        <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, reflect: true, attribute: 'data-role' }),
-    __metadata("design:type", Object)
-], Modalcontainer.prototype, "dataRole", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'data-aria-modal' }),
-    __metadata("design:type", Boolean)
-], Modalcontainer.prototype, "dataAriaModal", void 0);
-export default Modalcontainer;

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

@@ -1,20 +0,0 @@
-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 DEFAULTS: {
-    readonly COLOR: "tonal";
-    readonly ELEVATION: 0;
-    readonly ROLE: "dialog";
-    readonly ARIA_MODAL: false;
-    readonly CHILDREN: "Lorem ipsum dolor sit amet";
-};
-export { TAG_NAME, COLOR, DEFAULTS, ELEVATION };

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

@@ -1,21 +0,0 @@
-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 DEFAULTS = {
-    COLOR: COLOR.TONAL,
-    ELEVATION: ELEVATION[0],
-    ROLE: 'dialog',
-    ARIA_MODAL: false,
-    CHILDREN: 'Lorem ipsum dolor sit amet',
-};
-export { TAG_NAME, COLOR, DEFAULTS, ELEVATION };

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

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

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

@@ -1,45 +0,0 @@
-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);
-    }
-
-    :host::part(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);
-    }
-
-    :host([color='contrast'])::part(container) {
-      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);
-    }
-
-    :host([elevation='1'])::part(container) {
-      filter: var(--mdc-modalcontainer-elevation-1);
-    }
-    :host([elevation='2'])::part(container) {
-      filter: var(--mdc-modalcontainer-elevation-2);
-    }
-    :host([elevation='3'])::part(container) {
-      filter: var(--mdc-modalcontainer-elevation-3);
-    }
-    :host([elevation='4'])::part(container) {
-      filter: var(--mdc-modalcontainer-elevation-4);
-    }
-  `,
-];
-export default styles;

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-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/dist/utils/mixins/DataAriaDescribedbyMixin.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface DataAriaDescribedbyMixinInterface {
-    dataAriaDescribedby: string | null;
-}
-export declare const DataAriaDescribedbyMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DataAriaDescribedbyMixinInterface> & T;

package/dist/utils/mixins/DataAriaDescribedbyMixin.js

@@ -1,30 +0,0 @@
-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 { property } from 'lit/decorators.js';
-export const DataAriaDescribedbyMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Defines an ID reference to one or more elements that provide additional
-             * descriptive information for the current element.
-             * The `aria-describedby` attribute to be set for accessibility.
-             * @default null
-             */
-            this.dataAriaDescribedby = null;
-        }
-    }
-    __decorate([
-        property({ type: String, reflect: true, attribute: 'data-aria-describedby' }),
-        __metadata("design:type", Object)
-    ], InnerMixinClass.prototype, "dataAriaDescribedby", void 0);
-    // Cast return type to your mixin's interface intersected with the superClass type
-    return InnerMixinClass;
-};

package/dist/utils/mixins/DataAriaLabelledbyMixin.d.ts

@@ -1,6 +0,0 @@
-import { LitElement } from 'lit';
-import type { Constructor } from './index.types';
-export interface DataAriaLabelledbyMixinInterface {
-    dataAriaLabelledby: string | null;
-}
-export declare const DataAriaLabelledbyMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<DataAriaLabelledbyMixinInterface> & T;

package/dist/utils/mixins/DataAriaLabelledbyMixin.js

@@ -1,29 +0,0 @@
-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 { property } from 'lit/decorators.js';
-export const DataAriaLabelledbyMixin = (superClass) => {
-    class InnerMixinClass extends superClass {
-        constructor() {
-            super(...arguments);
-            /**
-             * Defines an ID reference to one or more elements that label the current element.
-             * The `aria-labelledby` attribute to be set for accessibility.
-             * @default null
-             */
-            this.dataAriaLabelledby = null;
-        }
-    }
-    __decorate([
-        property({ type: String, reflect: true, attribute: 'data-aria-labelledby' }),
-        __metadata("design:type", Object)
-    ], InnerMixinClass.prototype, "dataAriaLabelledby", void 0);
-    // Cast return type to your mixin's interface intersected with the superClass type
-    return InnerMixinClass;
-};