@momentum-design/components 0.18.4 → 0.18.5

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

@@ -0,0 +1,71 @@
+import { CSSResult, PropertyValues } from 'lit';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+declare const Checkbox_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/NameMixin").NameMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/ValueMixin").ValueMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
+ * These are often used in forms, settings, and selections in lists.
+ *
+ * A checkbox component contains an optional label and an optional helper text.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-checkbox
+ *
+ * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
+ * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-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-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ */
+declare class Checkbox extends Checkbox_base {
+    /**
+     * Determines whether the checkbox is selected or unselected.
+     *
+     * @default false
+     */
+    checked: boolean;
+    /**
+     * This property is used to determine the parent checkbox in a nested checkbox group.
+     * If any one of the children is unselected, then the parent checkbox will be indeterminate.
+     * If all children are either selected or unselected, then the parent checkbox will not be indeterminate.
+     *
+     * @default false
+     */
+    indeterminate: boolean;
+    /** @internal */
+    private internals;
+    /** @internal */
+    static formAssociated: boolean;
+    /** @internal */
+    get form(): HTMLFormElement | null;
+    constructor();
+    /**
+     * Updates the form value to reflect the current state of the checkbox.
+     * If checked, the value is set to either the user-provided value or 'on' if no value is provided.
+     * If unchecked, the value is set to null.
+     */
+    private setFormValue;
+    /**
+     * Toggles the state of the checkbox element.
+     * If the element is not disabled, then
+     * the checked property is toggled and the indeterminate property is set to false.
+     */
+    private toggleState;
+    /**
+     * Toggles the state of the checkbox element.
+     * and dispatch the new event.
+     */
+    handleChange(event: Event): void;
+    update(changedProperties: PropertyValues): void;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default Checkbox;

package/dist/components/checkbox/checkbox.component.js

@@ -0,0 +1,150 @@
+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 { ifDefined } from 'lit/directives/if-defined.js';
+import { DataAriaLabelMixin } from '../../utils/mixins/DataAriaLabelMixin';
+import { NameMixin } from '../../utils/mixins/NameMixin';
+import { ValueMixin } from '../../utils/mixins/ValueMixin';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import { ICON_NAME } from './checkbox.constants';
+import styles from './checkbox.styles';
+/**
+ * Checkboxes allow users to select multiple options from a list or turn an item/feature on or off.
+ * These are often used in forms, settings, and selections in lists.
+ *
+ * A checkbox component contains an optional label and an optional helper text.
+ *
+ * @dependency mdc-icon
+ *
+ * @tagname mdc-checkbox
+ *
+ * @cssproperty --mdc-checkbox-background-color-hover - Allows customization of the background color on hover.
+ * @cssproperty --mdc-checkbox-border-color - Border color in high contrast.
+ * @cssproperty --mdc-checkbox-checked-background-color - Background color for a selected checkbox.
+ * @cssproperty --mdc-checkbox-checked-background-color-hover - Background color for a selected checkbox when hovered.
+ * @cssproperty --mdc-checkbox-checked-pressed-icon-color - Background color for a selected checkbox when pressed.
+ * @cssproperty --mdc-checkbox-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-checkbox-disabled-icon-color - Icon color for a disabled checkbox.
+ * @cssproperty --mdc-checkbox-icon-background-color - Background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-border-color - Default background color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-icon-color - Icon color for an unselected checkbox.
+ * @cssproperty --mdc-checkbox-pressed-icon-color - Background color for a selected checkbox when pressed.
+ */
+class Checkbox extends NameMixin(ValueMixin(DataAriaLabelMixin(FormfieldWrapper))) {
+    /** @internal */
+    get form() {
+        return this.internals.form;
+    }
+    constructor() {
+        super();
+        /**
+         * Determines whether the checkbox is selected or unselected.
+         *
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * This property is used to determine the parent checkbox in a nested checkbox group.
+         * If any one of the children is unselected, then the parent checkbox will be indeterminate.
+         * If all children are either selected or unselected, then the parent checkbox will not be indeterminate.
+         *
+         * @default false
+         */
+        this.indeterminate = false;
+        this.internals = this.attachInternals();
+        // Checkbox does not contain helpTextType property.
+        this.helpTextType = undefined;
+    }
+    /**
+     * Updates the form value to reflect the current state of the checkbox.
+     * If checked, the value is set to either the user-provided value or 'on' if no value is provided.
+     * If unchecked, the value is set to null.
+     */
+    setFormValue() {
+        let actualValue = null;
+        if (this.checked) {
+            actualValue = !this.value ? 'on' : this.value;
+        }
+        this.internals.setFormValue(actualValue);
+    }
+    /**
+     * Toggles the state of the checkbox element.
+     * If the element is not disabled, then
+     * the checked property is toggled and the indeterminate property is set to false.
+     */
+    toggleState() {
+        if (!this.disabled) {
+            this.checked = !this.checked;
+            this.indeterminate = false;
+        }
+    }
+    /**
+     * Toggles the state of the checkbox element.
+     * and dispatch the new event.
+     */
+    handleChange(event) {
+        this.toggleState();
+        this.dispatchEvent(new Event(event.type, event));
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('checked')) {
+            this.setFormValue();
+        }
+    }
+    render() {
+        var _a;
+        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;
+        const helpTextContent = this.helpText ? this.renderHelperText() : nothing;
+        return html `
+      <div class="container mdc-focus-ring">
+        <input
+          id="${this.id}"
+          type="checkbox"
+          class="input"
+          name="${ifDefined(this.name)}"
+          value="${ifDefined(this.value)}"
+          .checked="${this.checked}"
+          .indeterminate="${this.indeterminate}"
+          .disabled="${this.disabled}"
+          aria-label="${(_a = this.dataAriaLabel) !== null && _a !== void 0 ? _a : ''}"
+          @change=${this.handleChange}
+        />
+        <div class="icon-container">${checkboxIconContent}</div>
+      </div>
+      <div class="text-container">
+        ${this.renderLabel()}
+        ${helpTextContent}
+      </div>
+    `;
+    }
+}
+/** @internal */
+Checkbox.formAssociated = true;
+Checkbox.styles = [...FormfieldWrapper.styles, ...styles];
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "checked", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], Checkbox.prototype, "indeterminate", void 0);
+export default Checkbox;

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

@@ -0,0 +1,6 @@
+declare const TAG_NAME: "mdc-checkbox";
+declare const ICON_NAME: {
+    readonly CHECKED: "check-bold";
+    readonly INDETERMINATE: "minus-bold";
+};
+export { TAG_NAME, ICON_NAME };

package/dist/components/checkbox/checkbox.constants.js

@@ -0,0 +1,7 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('checkbox');
+const ICON_NAME = {
+    CHECKED: 'check-bold',
+    INDETERMINATE: 'minus-bold',
+};
+export { TAG_NAME, ICON_NAME };

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

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

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,106 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = [css `
+  :host {
+    --mdc-checkbox-background-color-hover: var(--mds-color-theme-control-inactive-hover);
+    --mdc-checkbox-border-color: var(--mds-color-theme-outline-button-normal);
+    --mdc-checkbox-checked-background-color-hover: var(--mds-color-theme-control-active-hover);
+    --mdc-checkbox-checked-background-color: var(--mds-color-theme-control-active-normal);
+    --mdc-checkbox-checked-pressed-icon-color: var(--mds-color-theme-control-active-pressed);
+    --mdc-checkbox-disabled-background-color: var(--mds-color-theme-control-inactive-disabled);
+    --mdc-checkbox-disabled-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-checkbox-disabled-checked-icon-color: var(--mds-color-theme-control-active-disabled);
+    --mdc-checkbox-disabled-icon-color: var(--mds-color-theme-text-primary-disabled);
+    --mdc-checkbox-icon-background-color: var(--mds-color-theme-control-inactive-normal);
+    --mdc-checkbox-icon-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-checkbox-icon-color: var(--mds-color-theme-inverted-text-primary-normal);
+    --mdc-checkbox-pressed-icon-color: var(--mds-color-theme-control-inactive-pressed);
+
+    flex-direction: row;
+    align-items: flex-start;
+  }
+  .mdc-label, .input {
+    cursor: pointer;
+  }
+  :host([checked]) .icon-container,
+  :host([indeterminate]) .icon-container {
+    background: var(--mdc-checkbox-checked-background-color);
+    border: unset;
+  }
+  :host([checked]) .container:hover .icon-container,
+  :host([indeterminate]) .container:hover .icon-container {
+    background: var(--mdc-checkbox-checked-background-color-hover);
+  }
+  :host([checked]) .container:active .icon-container,
+  :host([indeterminate]) .container:active .icon-container {
+    background: var(--mdc-checkbox-checked-pressed-icon-color);
+  }
+  :host([disabled]) .mdc-label,
+  :host([disabled]) .input {
+    cursor: default;
+  }
+  :host([disabled]) .container:hover {
+    background: unset;
+  }
+  :host([disabled]) .icon-container {
+    border-color: var(--mdc-checkbox-disabled-border-color);
+    background: var(--mdc-checkbox-disabled-background-color);
+  }
+  :host([disabled]) .icon {
+    --mdc-icon-fill-color: var(--mdc-checkbox-disabled-icon-color);
+  }
+  :host([disabled][checked]) .icon-container,
+  :host([disabled][indeterminate]) .icon-container {
+    background: var(--mdc-checkbox-disabled-checked-icon-color);
+    border: 0.0625rem solid var(--mdc-checkbox-disabled-border-color);
+  }
+  .input {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    opacity: 0.1%;
+    overflow: visible;
+    z-index: 1;
+  }
+  .icon-container {
+    display: flex;
+    align-items: center;
+    border: 0.0625rem solid var(--mdc-checkbox-icon-border-color);
+    background: var(--mdc-checkbox-icon-background-color);
+  }
+  .container:hover {
+    background: var(--mdc-checkbox-background-color-hover);
+  }
+  .container:active {
+    background: var(--mdc-checkbox-pressed-icon-color);
+  }
+  .input, .icon-container {
+    width: 1rem;
+    height: 1rem;
+  }
+  .input,
+  .icon-container,
+  .container {
+    border-radius: 0.125rem;
+  }
+  .icon {
+    --mdc-icon-fill-color: var(--mdc-checkbox-icon-color);
+  }
+  .container {
+    margin: 0.125rem 0;
+  }
+  .text-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  
+  /* High Contrast Mode */
+  @media (forced-colors: active) {
+    :host([checked]) .icon-container,
+    :host([indeterminate]) .icon-container {
+      border: 0.0625rem solid var(--mdc-checkbox-border-color);
+    }
+  }
+`, ...hostFocusRingStyles(true)];
+export default styles;

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

@@ -0,0 +1,8 @@
+import Checkbox from './checkbox.component';
+import '../icon';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-checkbox']: Checkbox;
+    }
+}
+export default Checkbox;

package/dist/components/checkbox/index.js

@@ -0,0 +1,5 @@
+import Checkbox from './checkbox.component';
+import { TAG_NAME } from './checkbox.constants';
+import '../icon';
+Checkbox.register(TAG_NAME);
+export default Checkbox;