@momentum-design/components 0.130.8 → 0.131.0

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

@@ -0,0 +1,13 @@
+import '../button';
+import '../icon';
+import '../option';
+import '../popover';
+import '../text';
+import '../toggletip';
+import TimePicker from './timepicker.component';
+declare global {
+    interface HTMLElementTagNameMap {
+        ['mdc-timepicker']: TimePicker;
+    }
+}
+export default TimePicker;

package/dist/components/timepicker/index.js

@@ -0,0 +1,10 @@
+import '../button';
+import '../icon';
+import '../option';
+import '../popover';
+import '../text';
+import '../toggletip';
+import TimePicker from './timepicker.component';
+import { TAG_NAME } from './timepicker.constants';
+TimePicker.register(TAG_NAME);
+export default TimePicker;

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

@@ -0,0 +1,328 @@
+import type { PropertyValueMap } from 'lit';
+import { CSSResult } from 'lit';
+import { AssociatedFormControl } from '../../utils/mixins/FormInternalsMixin';
+import FormfieldWrapper from '../formfieldwrapper/formfieldwrapper.component';
+import type { PopoverStrategy } from '../popover/popover.types';
+import type { Placement, TimeFormat } from './timepicker.types';
+declare const TimePicker_base: import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/FormInternalsMixin").FormInternalsMixinInterface> & import("../../utils/mixins/index.types").Constructor<import("../../utils/mixins/DataAriaLabelMixin").DataAriaLabelMixinInterface> & typeof FormfieldWrapper;
+/**
+ * mdc-timepicker is a component that allows users to select a specific time
+ * or enter a time manually. It supports both 12-hour and 24-hour formats.
+ *
+ * The component consists of:
+ * - label - describes the time picker field
+ * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)
+ * - dropdown arrow button - opens a flyout menu with predefined time intervals
+ * - helper text - displayed below the input field
+ *
+ * Users can input values by:
+ * - Manually entering numbers/characters in spinbuttons
+ * - Navigating using arrow keys to increment/decrement values
+ * - Selecting a predefined time from the dropdown menu
+ *
+ * @tagname mdc-timepicker
+ *
+ * @dependency mdc-button
+ * @dependency mdc-icon
+ * @dependency mdc-option
+ * @dependency mdc-popover
+ * @dependency mdc-text
+ * @dependency mdc-toggletip
+ *
+ * @event input - (React: onInput) This event is dispatched when the time value changes.
+ * @event change - (React: onChange) This event is dispatched when the time value is committed.
+ * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.
+ * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.
+ *
+ * @slot label - Slot for the label element.
+ * @slot toggletip - Slot for the toggletip info icon button.
+ * @slot help-icon - Slot for the helper/validation icon.
+ * @slot help-text - Slot for the helper/validation text.
+ *
+ * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.
+ * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.
+ * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.
+ * @cssproperty --mdc-timepicker-width - Width of the timepicker component.
+ *
+ * @csspart label - The label element.
+ * @csspart label-text - The container for the label and required indicator elements.
+ * @csspart required-indicator - The required indicator element.
+ * @csspart info-icon-btn - The info icon button element.
+ * @csspart label-toggletip - The toggletip element.
+ * @csspart help-text - The helper/validation text element.
+ * @csspart helper-icon - The helper/validation icon element.
+ * @csspart help-text-container - The container for helper/validation elements.
+ * @csspart container - The outer container for the input and popover.
+ * @csspart base-container - The input container with border and background.
+ * @csspart spinbutton-group - The container for spinbutton elements.
+ * @csspart spinbutton - A spinbutton input element.
+ * @csspart separator - The colon separator between spinbuttons.
+ * @csspart period - The AM/PM period spinbutton.
+ * @csspart icon-container - The dropdown arrow button container.
+ * @csspart native-input - The hidden native input for form participation.
+ * @csspart listbox - The dropdown list container.
+ */
+declare class TimePicker extends TimePicker_base implements AssociatedFormControl {
+    /**
+     * The time format to use for display.
+     * - `'12h'`: 12-hour format with AM/PM period
+     * - `'24h'`: 24-hour format without period
+     * @default '12h'
+     */
+    timeFormat: TimeFormat;
+    /**
+     * The interval in minutes between time options in the dropdown menu.
+     * @default 30
+     */
+    interval: number;
+    /**
+     * The placement of the popover dropdown.
+     * @default 'bottom-start'
+     */
+    placement: Placement;
+    /**
+     * The strategy for positioning the popover.
+     * @default 'absolute'
+     */
+    strategy: PopoverStrategy;
+    /**
+     * Determines whether the dropdown should flip its position when it hits the boundary.
+     * @default false
+     */
+    disableFlip: boolean;
+    /**
+     * Element ID that the popover will be appended to.
+     * This is useful when the timepicker is inside a scrollable container
+     * and the popover needs to be portalled to avoid clipping.
+     */
+    appendTo?: string;
+    /**
+     * Element ID the backdrop will be appended to (if backdrop is enabled).
+     * This is useful to ensure that the backdrop is appended to the correct element in the DOM.
+     * If not set, the backdrop will be appended to the parent element of the timepicker.
+     */
+    backdropAppendTo?: string;
+    /**
+     * The minimum allowed time value in 24-hour format (HH:MM).
+     */
+    min?: string;
+    /**
+     * The maximum allowed time value in 24-hour format (HH:MM).
+     */
+    max?: string;
+    /**
+     * Accessible label for the hours spinbutton.
+     * Consumers must provide a translated string.
+     */
+    localeHoursLabel: string;
+    /**
+     * Accessible label for the minutes spinbutton.
+     * Consumers must provide a translated string.
+     */
+    localeMinutesLabel: string;
+    /**
+     * Accessible label for the period (AM/PM) spinbutton.
+     * Consumers must provide a translated string.
+     */
+    localePeriodLabel: string;
+    /**
+     * Placeholder text for the hours spinbutton.
+     * Consumers must provide a translated string.
+     */
+    localeHoursPlaceholder: string;
+    /**
+     * Placeholder text for the minutes spinbutton.
+     * Consumers must provide a translated string.
+     */
+    localeMinutesPlaceholder: string;
+    /**
+     * Placeholder text for the period spinbutton.
+     * Consumers must provide a translated string.
+     */
+    localePeriodPlaceholder: string;
+    /**
+     * Label for the AM period.
+     * Consumers must provide a translated string.
+     */
+    localeAmLabel: string;
+    /**
+     * Label for the PM period.
+     * Consumers must provide a translated string.
+     */
+    localePmLabel: string;
+    /**
+     * Accessible label for the dropdown toggle button.
+     * Consumers must provide a translated string.
+     */
+    localeShowTimePickerLabel: string;
+    /**
+     * Accessible label for the time options listbox.
+     * Consumers must provide a translated string.
+     */
+    localeTimeOptionsLabel: string;
+    /**
+     * Accessible description for spinbutton inputs (instruction text).
+     * Consumers must provide a translated string.
+     */
+    localeSpinbuttonDescription: string;
+    /** @internal */
+    private dropdownButton;
+    /** @internal */
+    private hoursInput;
+    /** @internal */
+    private minutesInput;
+    /** @internal */
+    private periodInput;
+    /** @internal */
+    private displayPopover;
+    /** @internal */
+    private internalHours;
+    /** @internal */
+    private internalMinutes;
+    /** @internal */
+    private internalPeriod;
+    /** @internal */
+    private focusedOptionIndex;
+    /** @internal */
+    private pendingDigits;
+    /** @internal */
+    private pendingDigitTimeout?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+    /**
+     * When the menu opens, focus the selected item or the first item.
+     * @internal
+     */
+    private focusMenuItemOnOpen;
+    /**
+     * Focuses the menu item at the current focusedOptionIndex.
+     * @internal
+     */
+    private focusCurrentMenuItem;
+    /** @internal */
+    formResetCallback(): void;
+    /** @internal */
+    formStateRestoreCallback(state: string): void;
+    /**
+     * Parses the value (24h HH:MM) into internal hours, minutes, and period.
+     * @internal
+     */
+    private parseValueToInternal;
+    /**
+     * Converts internal hours, minutes, and period to 24h HH:MM value.
+     * @internal
+     */
+    private internalToValue;
+    /**
+     * Syncs the form value with the current internal state.
+     * @internal
+     */
+    private syncFormValue;
+    /**
+     * Updates the value from internal state and fires events.
+     * @internal
+     */
+    private commitValue;
+    /**
+     * Generates time interval options for the dropdown.
+     * @internal
+     */
+    private getTimeOptions;
+    /**
+     * Handles clicking on a time option in the dropdown.
+     * @internal
+     */
+    private handleOptionClick;
+    /**
+     * Handles clicking the dropdown arrow button.
+     * @internal
+     */
+    private handleDropdownClick;
+    /**
+     * Handles clicking on the spinbutton area (not the dropdown button).
+     * Focuses the nearest spinbutton.
+     * @internal
+     */
+    private handleSpinbuttonAreaClick;
+    /**
+     * Handles keydown on the base container (when popover is closed).
+     * @internal
+     */
+    private handleBaseKeydown;
+    /**
+     * Handles keydown on the popover/listbox (when open).
+     * Supports ArrowDown/ArrowUp to navigate, Enter to select, Escape to close.
+     * @internal
+     */
+    private handleListboxKeydown;
+    /**
+     * Handles keydown on the hours spinbutton.
+     * @internal
+     */
+    private handleHoursKeydown;
+    /**
+     * Handles keydown on the minutes spinbutton.
+     * @internal
+     */
+    private handleMinutesKeydown;
+    /**
+     * Handles keydown on the period spinbutton.
+     * @internal
+     */
+    private handlePeriodKeydown;
+    /**
+     * Generic spinbutton keydown handler for hours and minutes.
+     * @internal
+     */
+    private handleSpinbuttonKeydown;
+    /**
+     * Handles digit input for spinbuttons with auto-advance logic.
+     * @internal
+     */
+    private handleDigitInput;
+    /**
+     * Sets the value of a spinbutton field.
+     * @internal
+     */
+    private setSpinbuttonValue;
+    /**
+     * Advances focus to the next spinbutton field.
+     * @internal
+     */
+    private advanceToNextField;
+    /**
+     * Handles focus on a spinbutton - selects all text.
+     * @internal
+     */
+    private handleSpinbuttonFocus;
+    /**
+     * Gets the display text for the current period using locale labels.
+     * @internal
+     */
+    private get displayPeriod();
+    /**
+     * Gets the placeholder text for the hours spinbutton.
+     * @internal
+     */
+    private get hoursPlaceholder();
+    /**
+     * Gets the placeholder text for the minutes spinbutton.
+     * @internal
+     */
+    private get minutesPlaceholder();
+    /**
+     * Gets the placeholder text for the period spinbutton.
+     * @internal
+     */
+    private get periodPlaceholder();
+    /**
+     * Renders the dropdown time options list using mdc-option components.
+     * @internal
+     */
+    private renderTimeOptions;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: Array<CSSResult>;
+}
+export default TimePicker;