@momentum-design/components 0.139.8 → 0.140.0

package/dist/components/numberinput/numberinput.component.js

@@ -0,0 +1,330 @@
+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 Input from '../input/input.component';
+import { INPUT_MODE, INPUT_TYPE } from '../input/input.constants';
+import { clamp } from '../../utils/number';
+import { KEYS } from '../../utils/keys';
+import { CLAMP, DEFAULTS } from './numberinput.constants';
+import styles from './numberinput.styles';
+/**
+ * @tagname mdc-numberinput
+ *
+ * @event input - (React: onInput) This event is dispatched when the value of the number field changes (every press).
+ * @event change - (React: onChange) This event is dispatched when the value of the number field changes (on blur).
+ * @event focus - (React: onFocus) This event is dispatched when the number field receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the number field loses focus.
+ * @event clear - (React: onClear) This event is dispatched when the number field is cleared.
+ *
+ * @dependency mdc-icon
+ * @dependency mdc-text
+ * @dependency mdc-button
+ * @dependency mdc-toggletip
+ *
+ * @slot label - Slot for the label element. If not provided, the `label` property will be used to render the label.
+ * @slot toggletip - Slot for the toggletip info icon button. If not provided, the `toggletip-text` property will be used to render the info icon button and toggletip.
+ * @slot help-icon - Slot for the helper/validation icon. If not provided, the icon will be rendered based on the `helpTextType` property.
+ * @slot help-text - Slot for the helper/validation text. If not provided, the `helpText` property will be used to render the helper/validation text.
+ * @slot input-leading-icon - Slot for the leading icon before the input field. If not provided, the `leadingIcon` property will be used to render the leading icon.
+ * @slot input-prefix-text - Slot for the prefix text before the input field. If not provided, the `prefixText` property will be used to render the prefix text.
+ * @slot trailing-button - Slot for the trailing content. If not provided, the increment/decrement spinner buttons are rendered by default; set `hideSpinnerButtons` to true to render the clear button instead (when `trailingButton` is set to true).
+ *
+ * @csspart input-container - The container that wraps the input field, leading icon, prefix text, and trailing content.
+ * @csspart input-section - The container that wraps the input field and prefix text.
+ * @csspart input-text - The input field element.
+ * @csspart spinner-buttons - The container that wraps the increment and decrement spinner buttons.
+ * @csspart spinner-button - Each of the increment/decrement spinner button elements.
+ * @csspart label - The label element.
+ * @csspart helper-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element.
+ *
+ * @cssproperty --mdc-label-font-size - Font size for the label text.
+ * @cssproperty --mdc-label-font-weight - Font weight for the label text.
+ * @cssproperty --mdc-label-line-height - Line height for the label text.
+ * @cssproperty --mdc-label-color - Color for the label text.
+ * @cssproperty --mdc-help-text-font-size - Font size for the help text.
+ * @cssproperty --mdc-help-text-font-weight - Font weight for the help text.
+ * @cssproperty --mdc-help-text-line-height - Line height for the help text.
+ * @cssproperty --mdc-help-text-color - Color for the help text.
+ * @cssproperty --mdc-required-indicator-color - Color for the required indicator text.
+ * @cssproperty --mdc-input-text-color - Text color for the input field
+ * @cssproperty --mdc-input-border-color - Border color for the input container
+ * @cssproperty --mdc-input-background-color - Background color for the input field
+ * @cssproperty --mdc-input-selection-text-color - Text color for the selected text
+ * @cssproperty --mdc-input-selection-background-color - Background color for the selected text
+ */
+class NumberInput extends Input {
+    constructor() {
+        super(...arguments);
+        /**
+         * Hints that a numeric virtual keyboard should be displayed.
+         * @default 'numeric'
+         */
+        this.inputmode = INPUT_MODE.NUMERIC;
+        /**
+         * The amount that the value changes for each increment/decrement, whether from the
+         * spinner buttons or the up/down arrow keys. Set to `'any'` to allow any decimal value with no
+         * step-mismatch validation.
+         * @default 1
+         */
+        this.step = DEFAULTS.STEP;
+        /**
+         * Increment and decrement spinner buttons are shown alongside the input field by default.
+         * Set this to true to hide them.
+         * @default false
+         */
+        this.hideSpinnerButtons = false;
+        /**
+         * Aria label for the increment spinner button.
+         * @default ''
+         */
+        this.incrementAriaLabel = '';
+        /**
+         * Aria label for the decrement spinner button.
+         * @default ''
+         */
+        this.decrementAriaLabel = '';
+        /**
+         * Controls whether a value typed into the field is clamped to the min/max range. The spinner
+         * buttons and arrow keys always clamp; this only affects manual keyboard entry.
+         * - `none`: a typed value is left as entered and reported through range validity.
+         * - `auto`: a typed value is clamped to the min/max range when the field is committed (on change).
+         * @default 'none'
+         */
+        this.clamp = DEFAULTS.CLAMP;
+        /**
+         * Blocks insertion of non-numeric characters, including the `e`/`E`/`+` that native
+         * `type="number"` still accepts (and the arbitrary letters Firefox allows). Typed text arrives
+         * in `data`; pasted/dropped text arrives in `dataTransfer`. Deletions, caret navigation and IME
+         * composition carry neither, so they pass through. The sign (`-`) and decimal point (`.`) are
+         * numeric structural characters, so they are allowed and left to native range/step validation.
+         */
+        this.handleBeforeInput = (event) => {
+            var _a, _b, _c;
+            const inserted = (_c = (_a = event.data) !== null && _a !== void 0 ? _a : (_b = event.dataTransfer) === null || _b === void 0 ? void 0 : _b.getData('text')) !== null && _c !== void 0 ? _c : '';
+            if (inserted === '') {
+                return;
+            }
+            if (!/^[\d.-]*$/.test(inserted)) {
+                event.preventDefault();
+            }
+        };
+        this.handleIncrement = () => this.stepBy('increment');
+        this.handleDecrement = () => this.stepBy('decrement');
+    }
+    firstUpdated(changedProperties) {
+        var _a;
+        super.firstUpdated(changedProperties);
+        this.syncNumberConstraints();
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('beforeinput', this.handleBeforeInput);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('min') || changedProperties.has('max') || changedProperties.has('step')) {
+            this.syncNumberConstraints();
+        }
+    }
+    /**
+     * Applies the min/max/step constraints to the native input element.
+     * These are not part of the Input template, so they are synced imperatively.
+     */
+    syncNumberConstraints() {
+        if (!this.inputElement) {
+            return;
+        }
+        const inputElement = this.inputElement;
+        if (this.min === undefined) {
+            inputElement.removeAttribute('min');
+        }
+        else {
+            inputElement.min = String(this.min);
+        }
+        if (this.max === undefined) {
+            inputElement.removeAttribute('max');
+        }
+        else {
+            inputElement.max = String(this.max);
+        }
+        inputElement.step = this.step === DEFAULTS.STEP_ANY ? DEFAULTS.STEP_ANY : String(this.step);
+        this.setInputValidity();
+    }
+    /**
+     * Native arrow-key stepping with step="any" is browser-inconsistent: Firefox rounds to a whole
+     * number (dropping the decimal part) while Chrome/Safari add or subtract 1. Route the arrow keys
+     * through the same stepBy() path as the spinner buttons so the decimal part is preserved in every
+     * browser. Numeric steps keep native handling, which is already consistent across browsers.
+     */
+    handleKeyDown(event) {
+        const isStepKey = event.key === KEYS.ARROW_UP || event.key === KEYS.ARROW_DOWN;
+        if (this.step === DEFAULTS.STEP_ANY && isStepKey && !this.disabled && !this.readonly) {
+            event.preventDefault();
+            this.stepBy(event.key === KEYS.ARROW_UP ? 'increment' : 'decrement');
+            return;
+        }
+        super.handleKeyDown(event);
+    }
+    /**
+     * With clamp="auto", a committed value typed outside the range is pulled back in before the base
+     * change handler syncs and re-dispatches it, so consumers and validity observe the clamped value.
+     * When the value is actually clamped an input event is emitted first, mirroring the native
+     * input-before-change order, so consumers that collect the value on input see the corrected value.
+     * Stepping already clamps, so this only covers manual keyboard entry.
+     */
+    onChange(event) {
+        if (this.clamp === CLAMP.AUTO && this.clampInputToRange()) {
+            this.inputElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        }
+        super.onChange(event);
+    }
+    /**
+     * Clamps the native input's committed value into the min/max range in place, returning whether the
+     * value changed. An empty or non-numeric field is left untouched so a cleared input is not forced
+     * to min/max.
+     */
+    clampInputToRange() {
+        const inputElement = this.inputElement;
+        const { valueAsNumber } = inputElement;
+        if (inputElement.value === '' || Number.isNaN(valueAsNumber)) {
+            return false;
+        }
+        const clamped = clamp(valueAsNumber, this.min, this.max);
+        if (clamped !== valueAsNumber) {
+            inputElement.valueAsNumber = clamped;
+            return true;
+        }
+        return false;
+    }
+    /**
+     * stepUp()/stepDown() throw for step="any", so in that case the spinner buttons add/subtract 1 and
+     * clamp (matching native spin buttons); any value is already step-valid, so no alignment is
+     * needed. Otherwise the native step algorithm handles stepping and step-base alignment.
+     */
+    stepBy(direction) {
+        var _a;
+        const inputElement = this.inputElement;
+        const previousValue = inputElement.value;
+        if (this.step === DEFAULTS.STEP_ANY) {
+            const delta = direction === 'increment' ? 1 : -1;
+            const current = Number.isNaN(inputElement.valueAsNumber) ? 0 : inputElement.valueAsNumber;
+            // delta is an integer, so the result keeps current's decimal precision; round back to it to
+            // strip IEEE-754 error (e.g. 1.1 - 1 = 0.10000000000000009).
+            const decimals = ((_a = String(current).split('.')[1]) !== null && _a !== void 0 ? _a : '').length;
+            const stepped = Number((current + delta).toFixed(decimals));
+            inputElement.valueAsNumber = clamp(stepped, this.min, this.max);
+        }
+        else if (direction === 'increment') {
+            inputElement.stepUp();
+        }
+        else {
+            inputElement.stepDown();
+        }
+        // Spinner buttons that clamp at min/max leave the value unchanged; matching native spin buttons,
+        // no input/change events are emitted in that case.
+        if (inputElement.value !== previousValue) {
+            this.syncValueFromInputElement();
+        }
+    }
+    /**
+     * stepUp()/stepDown() and valueAsNumber update the input element's value without dispatching
+     * input/change events. Replaying them on the input replays the native flow so the base Input
+     * handlers sync the value, form value and validity, then re-dispatch to consumers.
+     */
+    syncValueFromInputElement() {
+        this.inputElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
+        this.inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+    /**
+     * Renders a single increment or decrement spinner button.
+     *
+     * The buttons are given `tabindex="-1"` so they are not in the tab order, matching native
+     * spin buttons: they are redundant pointer affordances for the `ArrowUp`/`ArrowDown` stepping
+     * already available from the focused input, so keyboard users reach the same behaviour without
+     * two extra tab stops per field.
+     */
+    renderSpinnerButton(direction) {
+        const isIncrement = direction === 'increment';
+        return html `
+      <mdc-button
+        part="spinner-button"
+        class="own-focus-ring"
+        variant=${DEFAULTS.SPINNER_BUTTON_VARIANT}
+        size="${DEFAULTS.SPINNER_BUTTON_SIZE}"
+        prefix-icon="${isIncrement ? DEFAULTS.INCREMENT_ICON : DEFAULTS.DECREMENT_ICON}"
+        aria-label="${isIncrement ? this.incrementAriaLabel : this.decrementAriaLabel}"
+        ?disabled=${this.disabled || this.readonly}
+        @click=${isIncrement ? this.handleIncrement : this.handleDecrement}
+        tabindex="-1"
+      ></mdc-button>
+    `;
+    }
+    /**
+     * Renders the decrement/increment spinner buttons in place of the default trailing (clear) button
+     */
+    renderTrailingButton(show = false) {
+        if (this.hideSpinnerButtons) {
+            return super.renderTrailingButton(show);
+        }
+        return html `
+      <div part="spinner-buttons">
+        ${this.renderSpinnerButton('decrement')} ${this.renderSpinnerButton('increment')}
+      </div>
+    `;
+    }
+    renderInputElement(_, hidePlaceholder) {
+        return super.renderInputElement(INPUT_TYPE.NUMBER, hidePlaceholder);
+    }
+}
+NumberInput.styles = [...Input.styles, ...styles];
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], NumberInput.prototype, "inputmode", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min' }),
+    __metadata("design:type", Number)
+], NumberInput.prototype, "min", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max' }),
+    __metadata("design:type", Number)
+], NumberInput.prototype, "max", void 0);
+__decorate([
+    property({
+        attribute: 'step',
+        converter: {
+            fromAttribute: (value) => {
+                if (value === DEFAULTS.STEP_ANY) {
+                    return DEFAULTS.STEP_ANY;
+                }
+                const parsed = value === null ? NaN : parseFloat(value);
+                return Number.isNaN(parsed) ? DEFAULTS.STEP : parsed;
+            },
+            toAttribute: (value) => String(value),
+        },
+    }),
+    __metadata("design:type", Object)
+], NumberInput.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-spinner-buttons' }),
+    __metadata("design:type", Object)
+], NumberInput.prototype, "hideSpinnerButtons", void 0);
+__decorate([
+    property({ type: String, attribute: 'increment-aria-label' }),
+    __metadata("design:type", Object)
+], NumberInput.prototype, "incrementAriaLabel", void 0);
+__decorate([
+    property({ type: String, attribute: 'decrement-aria-label' }),
+    __metadata("design:type", Object)
+], NumberInput.prototype, "decrementAriaLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true }),
+    __metadata("design:type", String)
+], NumberInput.prototype, "clamp", void 0);
+export default NumberInput;

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

@@ -0,0 +1,15 @@
+declare const TAG_NAME: "mdc-numberinput";
+declare const CLAMP: {
+    readonly NONE: "none";
+    readonly AUTO: "auto";
+};
+declare const DEFAULTS: {
+    readonly STEP: 1;
+    readonly STEP_ANY: "any";
+    readonly CLAMP: "none";
+    readonly INCREMENT_ICON: "plus-bold";
+    readonly DECREMENT_ICON: "minus-bold";
+    readonly SPINNER_BUTTON_VARIANT: "tertiary";
+    readonly SPINNER_BUTTON_SIZE: 20;
+};
+export { TAG_NAME, DEFAULTS, CLAMP };

package/dist/components/numberinput/numberinput.constants.js

@@ -0,0 +1,17 @@
+import utils from '../../utils/tag-name';
+import { BUTTON_VARIANTS, ICON_BUTTON_SIZES } from '../button/button.constants';
+const TAG_NAME = utils.constructTagName('numberinput');
+const CLAMP = {
+    NONE: 'none',
+    AUTO: 'auto',
+};
+const DEFAULTS = {
+    STEP: 1,
+    STEP_ANY: 'any',
+    CLAMP: CLAMP.NONE,
+    INCREMENT_ICON: 'plus-bold',
+    DECREMENT_ICON: 'minus-bold',
+    SPINNER_BUTTON_VARIANT: BUTTON_VARIANTS.TERTIARY,
+    SPINNER_BUTTON_SIZE: ICON_BUTTON_SIZES[20],
+};
+export { TAG_NAME, DEFAULTS, CLAMP };

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

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

package/dist/components/numberinput/numberinput.styles.js

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+const styles = [
+    css `
+    /* Hide native number spin buttons; the custom spinner buttons replace them. The input is
+       fallback content inside this shadow root, so it is targeted directly rather than
+       via ::part()/::slotted(), which only cross a shadow boundary from the outside. */
+    input[part='input-text']::-webkit-outer-spin-button,
+    input[part='input-text']::-webkit-inner-spin-button {
+      appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Firefox hides the spinners via textfield appearance. */
+    input[part='input-text'] {
+      appearance: textfield;
+      -moz-appearance: textfield;
+    }
+
+    :host::part(spinner-buttons) {
+      display: flex;
+      align-items: center;
+      gap: 0.375rem;
+    }
+  `,
+];
+export default styles;

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

@@ -0,0 +1,17 @@
+import type { OverrideEventTarget, TypedCustomEvent } from '../../utils/types';
+import type { CLAMP } from './numberinput.constants';
+import type NumberInput from './numberinput.component';
+type ClampType = (typeof CLAMP)[keyof typeof CLAMP];
+type NumberInputInputEvent = OverrideEventTarget<InputEvent, NumberInput>;
+type NumberInputChangeEvent = TypedCustomEvent<NumberInput>;
+type NumberInputFocusEvent = OverrideEventTarget<FocusEvent, NumberInput>;
+type NumberInputBlurEvent = OverrideEventTarget<FocusEvent, NumberInput>;
+type NumberInputClearEvent = TypedCustomEvent<NumberInput>;
+interface Events {
+    onInputEvent: NumberInputInputEvent;
+    onChangeEvent: NumberInputChangeEvent;
+    onFocusEvent: NumberInputFocusEvent;
+    onBlurEvent: NumberInputBlurEvent;
+    onClearEvent: NumberInputClearEvent;
+}
+export type { NumberInputInputEvent, NumberInputChangeEvent, NumberInputFocusEvent, NumberInputBlurEvent, NumberInputClearEvent, ClampType, Events, };

package/dist/components/numberinput/numberinput.types.js

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

package/dist/components/popover/popover.component.js

@@ -667,10 +667,19 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
                 ? 'clippingAncestors'
                 : Array.from(document.querySelectorAll(this.boundary));
             const rootBoundary = this.boundaryRoot;
+            let arrowOffset = 0;
+            if (this.showArrow) {
+                this.arrowElement = this.renderRoot.querySelector('div[part="popover-arrow"]');
+                if (this.arrowElement) {
+                    const arrowLen = this.arrowElement.offsetHeight;
+                    arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
+                }
+            }
             const middleware = [];
             if (this.inline) {
                 middleware.push(inlineMiddleware());
             }
+            middleware.push(offset(typeof this.offset === 'number' ? this.offset + arrowOffset : this.offset));
             middleware.push(shift({
                 boundary,
                 rootBoundary,
@@ -704,16 +713,9 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
                     padding: 50,
                 }));
             }
-            let arrowOffset = 0;
-            if (this.showArrow) {
-                this.arrowElement = this.renderRoot.querySelector('div[part="popover-arrow"]');
-                if (this.arrowElement) {
-                    const arrowLen = this.arrowElement.offsetHeight;
-                    arrowOffset = Math.sqrt(2 * arrowLen ** 2) / 2;
-                    middleware.push(arrow({ element: this.arrowElement, padding: 12 }));
-                }
+            if (this.showArrow && this.arrowElement) {
+                middleware.push(arrow({ element: this.arrowElement, padding: 12 }));
             }
-            middleware.push(offset(typeof this.offset === 'number' ? this.offset + arrowOffset : this.offset));
             this.floatingUICleanupFunction = autoUpdate(triggerElement, this, async () => {
                 const { triggerElement } = this;
                 if (!triggerElement)