@momentum-design/components 0.53.9 → 0.54.1

package/dist/components/staticcheckbox/staticcheckbox.component.js

@@ -0,0 +1,76 @@
+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, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Component } from '../../models';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+import styles from './staticcheckbox.styles';
+import { ICON_NAME } from './staticcheckbox.constants';
+/**
+ * This is a decorative component that is styled to look as a checkbox.
+ *
+ * It has 3 properties - checked, indeterminate and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-checkbox` component.
+ *
+ * @tagname mdc-staticcheckbox
+ *
+ * @dependency mdc-icon
+ *
+ * @cssproperty --mdc-staticcheckbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-staticcheckbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-background-color - Background color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-border-color - Border color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-disabled-checked-icon-color - Background color for a disabled, selected checkbox.
+ * @cssproperty --mdc-staticcheckbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-staticcheckbox-icon-color - Icon color for an unselected checkbox.
+ *
+ */
+class StaticCheckbox extends DisabledMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines whether the checkbox is selected or unselected.
+         *
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * Determines whether the checkbox is in an indeterminate state.
+         *
+         * @default false
+         */
+        this.indeterminate = false;
+    }
+    render() {
+        const checkboxIconContent = (this.checked || this.indeterminate) ? html `
+      <mdc-icon
+        class="icon"
+        name="${this.indeterminate ? ICON_NAME.INDETERMINATE : ICON_NAME.CHECKED}"
+        size="1"
+        length-unit="rem"
+      ></mdc-icon>
+    ` : nothing;
+        return html `<slot></slot>
+      <div part="icon-container">${checkboxIconContent}</div>`;
+    }
+}
+StaticCheckbox.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticCheckbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticCheckbox.prototype, "indeterminate", void 0);
+export default StaticCheckbox;

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

@@ -0,0 +1,3 @@
+import { ICON_NAME } from '../checkbox/checkbox.constants';
+declare const TAG_NAME: "mdc-staticcheckbox";
+export { TAG_NAME, ICON_NAME };

package/dist/components/staticcheckbox/staticcheckbox.constants.js

@@ -0,0 +1,4 @@
+import utils from '../../utils/tag-name';
+import { ICON_NAME } from '../checkbox/checkbox.constants';
+const TAG_NAME = utils.constructTagName('staticcheckbox');
+export { TAG_NAME, ICON_NAME };

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

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

package/dist/components/staticcheckbox/staticcheckbox.styles.js

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+const styles = [css `
+  :host{
+    margin: 0.125rem 0;
+    border-radius: 0.125rem;
+    --mdc-staticcheckbox-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-staticcheckbox-checked-background-color: var(--mds-color-theme-control-active-normal);
+    --mdc-staticcheckbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-staticcheckbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-staticcheckbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-staticcheckbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-staticcheckbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-staticcheckbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-staticcheckbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
+  }
+
+  :host([checked])::part(icon-container),
+  :host([indeterminate])::part(icon-container) {
+    background: var(--mdc-staticcheckbox-checked-background-color);
+    border-color: transparent;
+  }
+
+  :host([disabled])::part(icon-container) {
+    border-color: var(--mdc-staticcheckbox-disabled-border-color);
+    background: var(--mdc-staticcheckbox-disabled-background-color);
+  }
+
+  :host([disabled][checked])::part(icon-container),
+  :host([disabled][indeterminate])::part(icon-container) {
+    background: var(--mdc-staticcheckbox-disabled-checked-icon-color);
+    border: 0.0625rem solid var(--mdc-staticcheckbox-disabled-border-color);
+  }
+  
+  :host::part(icon-container) {
+    display: flex;
+    align-items: center;
+    border: 0.0625rem solid var(--mdc-staticcheckbox-icon-border-color);
+    background: var(--mdc-staticcheckbox-icon-background-color);
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.125rem;
+  }
+
+  .icon {
+    --mdc-icon-fill-color: var(--mdc-staticcheckbox-icon-color);
+  }
+
+  :host([disabled]) .icon {
+    --mdc-icon-fill-color: var(--mdc-staticcheckbox-disabled-icon-color);
+  }
+
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host([checked])::part(icon-container)
+    :host([indeterminate])::part(icon-container) {
+      border: 0.0625rem solid var(--mdc-staticcheckbox-border-color);
+    }
+  }
+`];
+export default styles;

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

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

package/dist/components/staticradio/index.js

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

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

@@ -0,0 +1,41 @@
+import { CSSResult } from 'lit';
+import { Component } from '../../models';
+declare const StaticRadio_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DisabledMixin").DisabledMixinInterface> & typeof Component;
+/**
+ * This is a decorative component that is styled to look as a radio.
+ * It has 2 properties - checked and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-radio` component.
+ *
+ * @tagname mdc-staticradio
+ *
+ * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ */
+declare class StaticRadio extends StaticRadio_base {
+    /**
+    * Determines whether the radio is selected or unselected.
+    *
+    * @default false
+    */
+    checked: boolean;
+    /**
+    * Determines whether the radio is read-only.
+    *
+    * @default false
+    */
+    readonly: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default StaticRadio;

package/dist/components/staticradio/staticradio.component.js

@@ -0,0 +1,67 @@
+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 { Component } from '../../models';
+import styles from './staticradio.styles';
+import { DisabledMixin } from '../../utils/mixins/DisabledMixin';
+/**
+ * This is a decorative component that is styled to look as a radio.
+ * It has 2 properties - checked and disabled.
+ *
+ * We are using the same styling that has been created for the `mdc-radio` component.
+ *
+ * @tagname mdc-staticradio
+ *
+ * @cssproperty --mdc-staticradio-inner-circle-size - size of the inner circle
+ * @cssproperty --mdc-staticradio-text-disabled-color - color of the label when disabled
+ * @cssproperty --mdc-staticradio-normal-border-color - color of the radio button border when normal
+ * @cssproperty --mdc-staticradio-disabled-border-color - color of the radio button border when disabled
+ * @cssproperty --mdc-staticradio-inner-circle-normal-background - background color of the inner circle when normal
+ * @cssproperty --mdc-staticradio-inner-circle-disabled-background - background color of the inner circle when disabled
+ * @cssproperty --mdc-staticradio-control-inactive-color - color of the radio button when inactive
+ * @cssproperty --mdc-staticradio-control-inactive-disabled-background - background color of the radio button when
+ *  inactive and disabled
+ * @cssproperty --mdc-staticradio-control-active-color - color of the radio button when active
+ * @cssproperty --mdc-staticradio-control-active-disabled-background - background color of the radio button
+ *  when active and disabled
+ */
+class StaticRadio extends DisabledMixin(Component) {
+    constructor() {
+        super(...arguments);
+        /**
+        * Determines whether the radio is selected or unselected.
+        *
+        * @default false
+        */
+        this.checked = false;
+        /**
+        * Determines whether the radio is read-only.
+        *
+        * @default false
+        */
+        this.readonly = false;
+    }
+    render() {
+        return html `
+      <slot></slot>
+      <span part="radio-icon" class="icon"></span>`;
+    }
+}
+StaticRadio.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticRadio.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], StaticRadio.prototype, "readonly", void 0);
+export default StaticRadio;

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

@@ -0,0 +1,2 @@
+declare const TAG_NAME: "mdc-staticradio";
+export { TAG_NAME };

package/dist/components/staticradio/staticradio.constants.js

@@ -0,0 +1,3 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('staticradio');
+export { TAG_NAME };

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

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

package/dist/components/staticradio/staticradio.styles.js

@@ -0,0 +1,86 @@
+import { css } from 'lit';
+const styles = [css `
+:host{
+    display: block;
+    position: relative;
+    width: 1rem;
+    height: 1rem;
+    margin: 0.125rem 0;
+    border-radius: 50%;
+
+    --mdc-staticradio-inner-circle-size: 0.375rem;
+    --mdc-staticradio-text-disabled-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-staticradio-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-staticradio-normal-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-staticradio-inner-circle-normal-background: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-staticradio-inner-circle-disabled-background: var(--mds-color-theme-inverted-text-primary-disabled);
+    --mdc-staticradio-control-inactive-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-staticradio-control-inactive-disabled-background: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-staticradio-control-active-color: var(--mds-color-theme-control-active-normal);
+    --mdc-staticradio-control-active-disabled-background: var(--mds-color-theme-control-active-disabled);
+  }
+  
+  .icon:after {
+    content: "";
+    position: absolute;
+    display: none;
+  }
+
+  :host([disabled]) .icon,
+  :host([disabled][readonly]) .icon {
+    border-color: var(--mdc-staticradio-disabled-border-color);
+    background: var(--mdc-staticradio-control-inactive-disabled-background);
+  }
+
+  :host([disabled][checked]) .icon,
+  :host([disabled][readonly][checked]) .icon {
+    border: var(--mdc-staticradio-control-active-disabled-background);
+    background: var(--mdc-staticradio-control-active-disabled-background);
+  }
+
+  :host([disabled][checked]) .icon:after,
+  :host([disabled][readonly][checked]) .icon:after {
+    background: var(--mdc-staticradio-inner-circle-disabled-background);
+  }
+
+  .icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1rem;
+    height: 1rem;
+    border: 0.0625rem solid var(--mdc-staticradio-normal-border-color);
+    background-color: var(--mdc-staticradio-control-inactive-color);
+    border-radius: 50%;
+  }
+
+  :host([checked]) .icon {
+    border-color: var(--mdc-staticradio-control-active-color);
+    background-color: var(--mdc-staticradio-control-active-color);
+  }
+
+  :host([checked]) .icon:after {
+    display: block;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: var(--mdc-staticradio-inner-circle-size);
+    height: var(--mdc-staticradio-inner-circle-size);
+    border-radius: 50%;
+    background: var(--mdc-staticradio-inner-circle-normal-background);
+  }
+
+  :host([readonly]) .icon{
+    border-color: var(--mdc-staticradio-normal-border-color);
+    background-color: var(--mdc-staticradio-control-inactive-color);
+  }
+
+  :host([readonly][checked]) .icon {
+    border-color: var(--mdc-staticradio-normal-border-color);
+  }
+  
+  :host([readonly][checked]) .icon:after{
+    background-color: var(--mdc-staticradio-text-disabled-color);
+  }
+`];
+export default styles;