@momentum-design/components 0.15.2 → 0.15.3

package/dist/components/buttonsimple/buttonsimple.component.js

@@ -0,0 +1,240 @@
+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 styles from './buttonsimple.styles';
+import { Component } from '../../models';
+import { BUTTON_TYPE, DEFAULTS } from './buttonsimple.constants';
+/**
+ * `mdc-buttonsimple` is a component that can be configured in various ways to suit different use cases.
+ * It is used as an internal component and is not intended to be used directly by consumers.
+ * Consumers should use the `mdc-button` component instead.
+ *
+ * @tagname mdc-buttonsimple
+ *
+ */
+class Buttonsimple extends Component {
+    /** @internal */
+    get form() {
+        return this.internals.form;
+    }
+    constructor() {
+        super();
+        /**
+         * The button's active state indicates whether it is currently toggled on (active) or off (inactive).
+         * When the active state is true, the button is considered to be in an active state, meaning it is toggled on.
+         * Conversely, when the active state is false, the button is in an inactive state, indicating it is toggled off.
+         * @default false
+         */
+        this.active = false;
+        /**
+         * Indicates whether the button is disabled.
+         * When the button is disabled for user interaction; it is not focusable or clickable.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Indicates whether the button is soft disabled.
+         * When set to `true`, the button appears visually disabled but still allows
+         * focus, click, and keyboard actions to be passed through.
+         *
+         * **Important:** When using soft disabled, consumers must ensure that
+         * the button behaves like a disabled button, allowing only focus and
+         * preventing any interactions (clicks or keyboard actions) from triggering unintended actions.
+         * @default false
+         */
+        this.softDisabled = false;
+        /**
+         * Button sizing is based on the button type.
+         * - **Pill button**: 40, 32, 28, 24.
+         * - **Icon button**: 64, 52, 40, 32, 28, 24.
+         * - Tertiary icon button cam also be 20.
+         * @default 32
+         */
+        this.size = DEFAULTS.SIZE;
+        /**
+         * The tabindex of the button.
+         * @default 0
+         */
+        this.tabIndex = 0;
+        /**
+         * This property defines the ARIA role for the element. By default, it is set to 'button'.
+         * Consumers should override this role when:
+         * - The element is being used in a context where a different role is more appropriate.
+         * - Custom behaviors are implemented that require a specific ARIA role for accessibility purposes.
+         * @default button
+         */
+        this.role = DEFAULTS.ROLE;
+        /**
+         * This property defines the type attribute for the button element.
+         * The type attribute specifies the behavior of the button when it is clicked.
+         * - **submit**: The button submits the form data to the server.
+         * - **reset**: The button resets the form data to its initial state.
+         * - **button**: The button does nothing when clicked.
+         * @default button
+         */
+        this.type = DEFAULTS.TYPE;
+        /**
+         * @internal
+         */
+        this.prevTabindex = 0;
+        this.addEventListener('click', this.executeAction.bind(this));
+        this.addEventListener('keydown', this.handleKeyDown.bind(this));
+        this.addEventListener('keyup', this.handleKeyUp.bind(this));
+        /** @internal */
+        this.internals = this.attachInternals();
+    }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.setDisabled(this, this.disabled);
+        }
+        if (changedProperties.has('softDisabled')) {
+            this.setSoftDisabled(this, this.softDisabled);
+        }
+        if (changedProperties.has('active')) {
+            this.setAriaPressed(this, this.active);
+        }
+    }
+    executeAction() {
+        if (this.type === BUTTON_TYPE.SUBMIT && this.internals.form) {
+            this.internals.form.requestSubmit();
+        }
+        if (this.type === BUTTON_TYPE.RESET && this.internals.form) {
+            this.internals.form.reset();
+        }
+    }
+    /**
+     * Sets the aria-pressed attribute based on the active state.
+     *
+     * @param element - The target element.
+     * @param active - The active state.
+     */
+    setAriaPressed(element, active) {
+        if (active) {
+            element.setAttribute('aria-pressed', 'true');
+        }
+        else {
+            element.setAttribute('aria-pressed', 'false');
+        }
+    }
+    /**
+     * Sets the soft-disabled attribute for the button.
+     * When soft-disabled, the button looks to be disabled but remains focusable and clickable.
+     * Also sets/removes aria-disabled attribute.
+     *
+     * @param element - The button element.
+     * @param softDisabled - The soft-disabled state.
+     */
+    setSoftDisabled(element, softDisabled) {
+        if (softDisabled) {
+            element.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            element.setAttribute('aria-disabled', 'false');
+        }
+    }
+    /**
+     * Sets the disabled attribute for the button.
+     * When disabled, the button is not focusable or clickable, and tabindex is set to -1.
+     * The previous tabindex is stored and restored when enabled.
+     * Also sets/removes aria-disabled attribute.
+     *
+     * @param element - The button element.
+     * @param disabled - The disabled state.
+     */
+    setDisabled(element, disabled) {
+        if (disabled) {
+            element.setAttribute('aria-disabled', 'true');
+            this.prevTabindex = this.tabIndex;
+            this.tabIndex = -1;
+        }
+        else {
+            this.tabIndex = this.prevTabindex;
+            element.removeAttribute('aria-disabled');
+        }
+    }
+    triggerClickEvent() {
+        const clickEvent = new MouseEvent('click', {
+            bubbles: true,
+            cancelable: true,
+            view: window,
+        });
+        this.dispatchEvent(clickEvent);
+        this.executeAction();
+    }
+    /**
+     * Handles the keydown event on the button.
+     * If the key is 'Enter' or 'Space', the button is pressed.
+     * If the key is 'Enter', the button is pressed. The native HTML button works in the same way.
+     *
+     * @param event - The keyboard event.
+     */
+    handleKeyDown(event) {
+        if (['Enter', ' '].includes(event.key)) {
+            this.classList.add('pressed');
+            if (event.key === 'Enter') {
+                this.triggerClickEvent();
+            }
+        }
+    }
+    /**
+     * Handles the keyup event on the button.
+     * If the key is 'Enter' or 'Space', the button is clicked.
+     * If the key is 'Space', the button is pressed. The native HTML button works in the same way.
+     *
+     * @param event - The keyboard event.
+     */
+    handleKeyUp(event) {
+        if (['Enter', ' '].includes(event.key)) {
+            this.classList.remove('pressed');
+            if (event.key === ' ') {
+                this.triggerClickEvent();
+            }
+        }
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+}
+/** @internal */
+Buttonsimple.formAssociated = true;
+Buttonsimple.styles = [...Component.styles, ...styles];
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Buttonsimple.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], Buttonsimple.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'soft-disabled' }),
+    __metadata("design:type", Object)
+], Buttonsimple.prototype, "softDisabled", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Number)
+], Buttonsimple.prototype, "size", void 0);
+__decorate([
+    property({ type: Number, reflect: true }),
+    __metadata("design:type", Object)
+], Buttonsimple.prototype, "tabIndex", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", Object)
+], Buttonsimple.prototype, "role", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", String)
+], Buttonsimple.prototype, "type", void 0);
+export default Buttonsimple;

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

@@ -0,0 +1,25 @@
+declare const TAG_NAME: "mdc-buttonsimple";
+declare const BUTTON_SIZES: {
+    readonly 20: 20;
+    readonly 24: 24;
+    readonly 28: 28;
+    readonly 32: 32;
+    readonly 40: 40;
+    readonly 48: 48;
+    readonly 52: 52;
+    readonly 64: 64;
+    readonly 72: 72;
+    readonly 88: 88;
+    readonly 124: 124;
+};
+declare const BUTTON_TYPE: {
+    readonly BUTTON: "button";
+    readonly SUBMIT: "submit";
+    readonly RESET: "reset";
+};
+declare const DEFAULTS: {
+    SIZE: 32;
+    TYPE: "button";
+    ROLE: string;
+};
+export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };

package/dist/components/buttonsimple/buttonsimple.constants.js

@@ -0,0 +1,26 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('buttonsimple');
+const BUTTON_SIZES = {
+    20: 20,
+    24: 24,
+    28: 28,
+    32: 32,
+    40: 40,
+    48: 48,
+    52: 52,
+    64: 64,
+    72: 72,
+    88: 88,
+    124: 124,
+};
+const BUTTON_TYPE = {
+    BUTTON: 'button',
+    SUBMIT: 'submit',
+    RESET: 'reset',
+};
+const DEFAULTS = {
+    SIZE: BUTTON_SIZES[32],
+    TYPE: BUTTON_TYPE.BUTTON,
+    ROLE: 'button',
+};
+export { TAG_NAME, DEFAULTS, BUTTON_TYPE, BUTTON_SIZES, };

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

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

package/dist/components/buttonsimple/buttonsimple.styles.js

@@ -0,0 +1,60 @@
+import { css } from 'lit';
+import { hostFitContentStyles, hostFocusRingStyles } from '../../utils/styles';
+const styles = [hostFitContentStyles, css `
+  :host {
+    border: 0.0625rem solid transparent;
+    cursor: pointer;
+    
+    background-color: var(--mds-color-theme-text-primary-normal); 
+    color: var(--mds-color-theme-inverted-text-secondary-normal);
+    font-size: var(--mds-font-apps-body-midsize-regular-font-size);
+    outline: none;
+
+    --mdc-button-height-size-124: 7.75rem;
+    --mdc-button-height-size-88: 5.5rem;
+    --mdc-button-height-size-72: 4.5rem;
+    --mdc-button-height-size-64: 4rem;
+    --mdc-button-height-size-52: 3.25rem;
+    --mdc-button-height-size-40: 2.5rem;
+    --mdc-button-height-size-32: 2rem;
+    --mdc-button-height-size-28: 1.75rem;
+    --mdc-button-height-size-24: 1.5rem;
+    --mdc-button-height-size-20: 1.25rem;
+  }
+  
+  :host([disabled]), :host([soft-disabled]){
+    background-color: var(--mds-color-theme-text-primary-disabled);
+  }
+  :host([size="124"]){
+    height: var(--mdc-button-height-size-124);
+  }
+  :host([size="88"]){
+    height: var(--mdc-button-height-size-88);
+  }
+  :host([size="72"]){
+    height: var(--mdc-button-height-size-72);
+  }
+  :host([size="64"]){
+    height: var(--mdc-button-height-size-64);
+  }
+  :host([size="52"]){
+    height: var(--mdc-button-height-size-52);
+  }
+  :host([size="40"]){
+    height: var(--mdc-button-height-size-40);
+  }
+  :host([size="32"]){
+    height: var(--mdc-button-height-size-32);
+  }
+  :host([size="28"]){
+    height: var(--mdc-button-height-size-28);
+    font-size: var(--mds-font-size-body-midsize);
+  }
+  :host([size="24"]){
+    height: var(--mdc-button-height-size-24);
+  }
+  :host([size="20"]){
+    height: var(--mdc-button-height-size-20);
+  }
+`, hostFocusRingStyles];
+export default styles;

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

@@ -0,0 +1,5 @@
+import type { ValueOf } from '../../utils/types';
+import { BUTTON_TYPE, BUTTON_SIZES } from './buttonsimple.constants';
+type ButtonSize = ValueOf<typeof BUTTON_SIZES>;
+type ButtonType = ValueOf<typeof BUTTON_TYPE>;
+export { ButtonSize, ButtonType, };

package/dist/components/buttonsimple/buttonsimple.types.js

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

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

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

package/dist/components/buttonsimple/index.js

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