@momentum-design/components 0.134.5 → 0.134.7

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

@@ -3,7 +3,8 @@ 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';
+import type { IconNames } from '../icon/icon.types';
+import type { OptionLabelFormatter, 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
@@ -61,6 +62,7 @@ declare const TimePicker_base: import("../../utils/mixins/index.types").Construc
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */
@@ -152,6 +154,16 @@ declare class TimePicker extends TimePicker_base implements AssociatedFormContro
      * Consumers must provide a translated string.
      */
     localePmLabel: string;
+    /**
+     * The icon name to display as a prefix icon in the timepicker input.
+     */
+    prefixIcon?: IconNames;
+    /**
+     * A callback function to format the label of each dropdown option.
+     * Receives the default label string and the 24h value string, and should return a formatted label.
+     * When not set, the default time formatting is used.
+     */
+    optionLabelFormatter?: OptionLabelFormatter;
     /**
      * Accessible label for the dropdown toggle button.
      * Consumers must provide a translated string.

package/dist/components/timepicker/timepicker.component.js

@@ -73,6 +73,7 @@ import styles from './timepicker.styles';
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */
@@ -770,7 +771,7 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
         const currentValue = this.internalToValue();
         return options.map(option => html `
         <mdc-option
-          label="${option.label}"
+          label="${this.optionLabelFormatter ? this.optionLabelFormatter(option.label, option.value) : option.label}"
           ?selected="${option.value === currentValue}"
           aria-selected="${option.value === currentValue ? 'true' : 'false'}"
           @click="${() => this.handleOptionClick(option.value)}"
@@ -791,6 +792,9 @@ class TimePicker extends FormInternalsMixin(DataAriaLabelMixin(FormfieldWrapper)
           @click="${this.handleBaseContainerClick}"
           @keydown="${this.handleBaseKeydown}"
         >
+          ${this.prefixIcon
+            ? html `<mdc-icon part="leading-icon" name="${this.prefixIcon}" size="1"></mdc-icon>`
+            : nothing}
           <div part="spinbutton-group">
             <input
               id="hours-spinbutton"
@@ -984,6 +988,14 @@ __decorate([
     property({ type: String, attribute: 'locale-pm-label' }),
     __metadata("design:type", Object)
 ], TimePicker.prototype, "localePmLabel", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: 'prefix-icon' }),
+    __metadata("design:type", String)
+], TimePicker.prototype, "prefixIcon", void 0);
+__decorate([
+    property({ attribute: false }),
+    __metadata("design:type", Function)
+], TimePicker.prototype, "optionLabelFormatter", void 0);
 __decorate([
     property({ type: String, attribute: 'locale-show-time-picker-label' }),
     __metadata("design:type", Object)

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

@@ -18,4 +18,11 @@ interface Events {
     onHiddenEvent: PopoverHiddenEvent;
 }
 type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
-export type { Events, Placement, TimeFormat, TimePickerChangeEvent, TimePickerInputEvent };
+/**
+ * A callback function to format the label of each dropdown option.
+ * @param label - The default formatted label string (e.g., "1:30 PM" or "13:30").
+ * @param value - The 24-hour time value string (e.g., "13:30").
+ * @returns The formatted label string to display.
+ */
+type OptionLabelFormatter = (label: string, value: string) => string;
+export type { Events, OptionLabelFormatter, Placement, TimeFormat, TimePickerChangeEvent, TimePickerInputEvent };

package/dist/custom-elements.json

@@ -49111,6 +49111,10 @@
               "description": "The dropdown arrow button container.",
               "name": "icon-container"
             },
+            {
+              "description": "The prefix icon element displayed before spinbuttons.",
+              "name": "leading-icon"
+            },
             {
               "description": "The hidden native input for form participation.",
               "name": "native-input"
@@ -49442,6 +49446,14 @@
                 "module": "utils/mixins/FormInternalsMixin.js"
               }
             },
+            {
+              "kind": "field",
+              "name": "optionLabelFormatter",
+              "type": {
+                "text": "OptionLabelFormatter | undefined"
+              },
+              "description": "A callback function to format the label of each dropdown option.\nReceives the default label string and the 24h value string, and should return a formatted label.\nWhen not set, the default time formatting is used."
+            },
             {
               "kind": "field",
               "name": "placement",
@@ -49453,6 +49465,16 @@
               "attribute": "placement",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "prefixIcon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The icon name to display as a prefix icon in the timepicker input.",
+              "attribute": "prefix-icon",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "readonly",
@@ -49890,6 +49912,14 @@
               "description": "Label for the PM period.\nConsumers must provide a translated string.",
               "fieldName": "localePmLabel"
             },
+            {
+              "name": "prefix-icon",
+              "type": {
+                "text": "IconNames | undefined"
+              },
+              "description": "The icon name to display as a prefix icon in the timepicker input.",
+              "fieldName": "prefixIcon"
+            },
             {
               "name": "locale-show-time-picker-label",
               "type": {
@@ -50123,7 +50153,7 @@
             "module": "/src/components/formfieldwrapper/formfieldwrapper.component"
           },
           "tagName": "mdc-timepicker",
-          "jsDoc": "/**\n * mdc-timepicker is a component that allows users to select a specific time\n * or enter a time manually. It supports both 12-hour and 24-hour formats.\n *\n * The component consists of:\n * - label - describes the time picker field\n * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)\n * - dropdown arrow button - opens a flyout menu with predefined time intervals\n * - helper text - displayed below the input field\n *\n * Users can input values by:\n * - Manually entering numbers/characters in spinbuttons\n * - Navigating using arrow keys to increment/decrement values\n * - Selecting a predefined time from the dropdown menu\n *\n * @tagname mdc-timepicker\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-option\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the time value changes.\n * @event change - (React: onChange) This event is dispatched when the time value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.\n * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.\n * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.\n * @cssproperty --mdc-timepicker-height - The height of the timepicker trigger control.\n * @cssproperty --mdc-timepicker-width - Width of the timepicker component.\n * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The colon separator between spinbuttons.\n * @csspart period - The AM/PM period spinbutton.\n * @csspart icon-container - The dropdown arrow button container.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart listbox - The dropdown list container.\n */",
+          "jsDoc": "/**\n * mdc-timepicker is a component that allows users to select a specific time\n * or enter a time manually. It supports both 12-hour and 24-hour formats.\n *\n * The component consists of:\n * - label - describes the time picker field\n * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)\n * - dropdown arrow button - opens a flyout menu with predefined time intervals\n * - helper text - displayed below the input field\n *\n * Users can input values by:\n * - Manually entering numbers/characters in spinbuttons\n * - Navigating using arrow keys to increment/decrement values\n * - Selecting a predefined time from the dropdown menu\n *\n * @tagname mdc-timepicker\n *\n * @dependency mdc-button\n * @dependency mdc-icon\n * @dependency mdc-option\n * @dependency mdc-popover\n * @dependency mdc-text\n * @dependency mdc-toggletip\n *\n * @event input - (React: onInput) This event is dispatched when the time value changes.\n * @event change - (React: onChange) This event is dispatched when the time value is committed.\n * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.\n * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.\n *\n * @slot label - Slot for the label element.\n * @slot toggletip - Slot for the toggletip info icon button.\n * @slot help-icon - Slot for the helper/validation icon.\n * @slot help-text - Slot for the helper/validation text.\n *\n * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.\n * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.\n * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.\n * @cssproperty --mdc-timepicker-height - The height of the timepicker trigger control.\n * @cssproperty --mdc-timepicker-width - Width of the timepicker component.\n * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.\n *\n * @csspart label - The label element.\n * @csspart label-text - The container for the label and required indicator elements.\n * @csspart required-indicator - The required indicator element.\n * @csspart info-icon-btn - The info icon button element.\n * @csspart label-toggletip - The toggletip element.\n * @csspart help-text - The helper/validation text element.\n * @csspart helper-icon - The helper/validation icon element.\n * @csspart help-text-container - The container for helper/validation elements.\n * @csspart container - The outer container for the input and popover.\n * @csspart base-container - The input container with border and background.\n * @csspart spinbutton-group - The container for spinbutton elements.\n * @csspart spinbutton - A spinbutton input element.\n * @csspart separator - The colon separator between spinbuttons.\n * @csspart period - The AM/PM period spinbutton.\n * @csspart icon-container - The dropdown arrow button container.\n * @csspart leading-icon - The prefix icon element displayed before spinbuttons.\n * @csspart native-input - The hidden native input for form participation.\n * @csspart listbox - The dropdown list container.\n */",
           "customElement": true
         }
       ],

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

@@ -57,6 +57,7 @@ import type { Events } from '../../components/timepicker/timepicker.types';
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */

package/dist/react/timepicker/index.js

@@ -58,6 +58,7 @@ import { TAG_NAME } from '../../components/timepicker/timepicker.constants';
  * @csspart separator - The colon separator between spinbuttons.
  * @csspart period - The AM/PM period spinbutton.
  * @csspart icon-container - The dropdown arrow button container.
+ * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
  * @csspart native-input - The hidden native input for form participation.
  * @csspart listbox - The dropdown list container.
  */

package/dist/utils/mixins/OverflowMixin.js

@@ -18,8 +18,7 @@ export const OverflowMixin = (superClass) => {
             return el.scrollWidth > el.clientWidth;
         }
         isHeightOverflowing() {
-            const el = this.overflowElement;
-            return el.scrollHeight > el.clientHeight;
+            return this.scrollHeight > this.clientHeight;
         }
     }
     // Cast return type to your mixin's interface intersected with the superClass type

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.134.5",
+  "version": "0.134.7",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"