@momentum-ui/web-components 2.16.1 → 2.16.3

package/src/components/timepicker/TimePicker.stories.ts

@@ -0,0 +1,39 @@
+import { TIME_UNIT } from "@/constants";
+import { Args, Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit-html";
+import { timeSpecificity } from "./TimePicker"; // Keep type import as a relative path
+
+const render = (args: Args) => html`
+  <md-timepicker
+    ?two-digit-auto-tab=${args.twoDigitAutoTab}
+    ?twenty-four-hour-format=${args.twentyFourHourFormat}
+    timeSpecificity=${args.theTimeSpecificity}
+    locale=${args.locale}
+    value=${args.value}
+  >
+  </md-timepicker>
+`;
+
+export const TimePicker: StoryObj = {
+  args: {
+    theTimeSpecificity: TIME_UNIT.SECOND,
+    locale: "en-US",
+    value: "00:00:00-08:00"
+  },
+  render: render
+};
+
+const meta: Meta = {
+  title: "Components/Time Picker",
+  component: "md-timepicker",
+  argTypes: {
+    theTimeSpecificity: { control: { type: "select" }, options: timeSpecificity }
+  },
+  parameters: {
+    a11y: {
+      element: "md-timepicker"
+    }
+  }
+};
+
+export default meta;

package/src/components/timepicker/TimePicker.test.ts

@@ -0,0 +1,145 @@
+import { fixture, fixtureCleanup, html, elementUpdated } from "@open-wc/testing-helpers";
+import "./TimePicker";
+import { Key } from "@/constants";
+import { TimePicker } from "@/components/timepicker/TimePicker";
+import { Input } from "@/components/input/Input";
+
+describe("TimePicker Component", () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+  test("should render", async () => {
+    const el: TimePicker.ELEMENT = await fixture(html` <md-timepicker></md-timepicker> `);
+    expect(el).not.toBeNull();
+  });
+
+  test("should render 24 hour", async () => {
+    const element: TimePicker.ELEMENT = await fixture<TimePicker.ELEMENT>(html`
+      <md-timepicker twenty-four-hour-format></md-timepicker>
+    `);
+
+    const hourInput = element.shadowRoot?.querySelector(".time-input-box.hour") as Input.ELEMENT;
+    const input = hourInput?.shadowRoot?.querySelector("input") as HTMLInputElement;
+    expect(input?.type).toEqual("number");
+    expect(input?.min).toEqual("0");
+    expect(input?.max).toEqual("23");
+
+    const text = "12";
+    hourInput.dispatchEvent(new CustomEvent("input-change", { detail: { value: text } }));
+    await elementUpdated(element);
+
+    const val = hourInput?.value;
+    expect(val).toEqual(text);
+
+    expect(element).not.toBeNull();
+  });
+
+  test("should render time specificity: hour", async () => {
+    const element: TimePicker.ELEMENT = await fixture<TimePicker.ELEMENT>(html`
+      <md-timepicker timeSpecificity="hour"></md-timepicker>
+    `);
+
+    const hourInput = element.shadowRoot?.querySelector(".time-input-box.hour") as Input.ELEMENT;
+    const minuteInput = element.shadowRoot?.querySelector(".time-input-box.minute") as Input.ELEMENT;
+    const secondInput = element.shadowRoot?.querySelector(".time-input-box.second") as Input.ELEMENT;
+
+    expect(hourInput).toBeDefined();
+    expect(minuteInput).toBeNull();
+    expect(secondInput).toBeNull();
+  });
+
+  test("should render time specificity: minute", async () => {
+    const element: TimePicker.ELEMENT = await fixture<TimePicker.ELEMENT>(html`
+      <md-timepicker timeSpecificity="minute"></md-timepicker>
+    `);
+
+    const hourInput = element.shadowRoot?.querySelector(".time-input-box.hour") as Input.ELEMENT;
+    const minuteInput = element.shadowRoot?.querySelector(".time-input-box.minute") as Input.ELEMENT;
+    const secondInput = element.shadowRoot?.querySelector(".time-input-box.second") as Input.ELEMENT;
+
+    expect(hourInput).toBeDefined();
+    expect(minuteInput).toBeDefined();
+    expect(secondInput).toBeNull();
+  });
+
+  test("should render time specificity: second", async () => {
+    const element: TimePicker.ELEMENT = await fixture<TimePicker.ELEMENT>(html`
+      <md-timepicker timeSpecificity="second"></md-timepicker>
+    `);
+
+    const hourInput = element.shadowRoot?.querySelector(".time-input-box.hour") as Input.ELEMENT;
+    const minuteInput = element.shadowRoot?.querySelector(".time-input-box.minute") as Input.ELEMENT;
+    const secondInput = element.shadowRoot?.querySelector(".time-input-box.second") as Input.ELEMENT;
+
+    expect(hourInput).toBeDefined();
+    expect(minuteInput).toBeDefined();
+    expect(secondInput).toBeDefined();
+  });
+
+  test("should focus on next input after two digits are entered when twoDigitAutoTab is true", async () => {
+    const element = await fixture<TimePicker.ELEMENT>(html`
+      <md-timepicker twenty-four-hour-format two-digit-auto-tab></md-timepicker>
+    `);
+
+    const timeChangeSpy = jest.spyOn(element, "handleTimeChange");
+    const hourInput = element.shadowRoot?.querySelector(".time-input-box.hour") as Input.ELEMENT;
+    const minuteInput = element.shadowRoot?.querySelector(".time-input-box.minute") as Input.ELEMENT;
+
+    expect(minuteInput.hasAttribute("focus-visible")).toBeFalsy();
+
+    const keyDownEvent: CustomEvent = new CustomEvent("input-keydown", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        srcEvent: {
+          key: Key.Digit1
+        }
+      }
+    });
+    hourInput?.dispatchEvent(keyDownEvent);
+    await elementUpdated(element);
+
+    const event: CustomEvent = new CustomEvent("input-change", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        value: "12"
+      }
+    });
+    hourInput?.dispatchEvent(event);
+    await elementUpdated(element);
+
+    expect(timeChangeSpy).toHaveBeenCalled();
+    expect(hourInput.value).toEqual("12");
+    expect(minuteInput.hasAttribute("focus-visible")).toBeTruthy();
+  });
+
+  test("should render invalid input with aria-invalid onBlur when time value is invalid", async () => {
+    const element = await fixture<TimePicker.ELEMENT>(html` <md-timepicker></md-timepicker> `);
+
+    const minuteInput = element.shadowRoot?.querySelector(".time-input-box.minute") as Input.ELEMENT;
+    const input = minuteInput?.shadowRoot?.querySelector("input") as HTMLInputElement;
+    expect(input?.type).toEqual("number");
+    expect(input?.min).toEqual("0");
+    expect(input?.max).toEqual("59");
+
+    const invalidMinuteText = "70";
+    minuteInput.dispatchEvent(new CustomEvent("input-change", { detail: { value: invalidMinuteText } }));
+    await elementUpdated(element);
+
+    const blurEvent: CustomEvent = new CustomEvent("input-blur", {
+      bubbles: true,
+      composed: true,
+      detail: {
+        srcEvent: "genericEvent"
+      }
+    });
+    minuteInput?.dispatchEvent(blurEvent);
+    await elementUpdated(element);
+
+    expect(minuteInput?.value).toEqual(invalidMinuteText);
+    expect(minuteInput.ariaInvalid).toBeTruthy();
+    expect(minuteInput.value).toEqual(invalidMinuteText);
+    expect(minuteInput.messageArr).toEqual([{ message: "", type: "error" }]);
+  });
+});

package/src/components/timepicker/TimePicker.ts

@@ -0,0 +1,425 @@
+import "@/components/combobox/ComboBox";
+import "@/components/input/Input";
+import { Input } from "@/components/input/Input";
+import { Key } from "@/constants";
+import { customElementWithCheck } from "@/mixins/CustomElementCheck";
+import { now } from "@/utils/dateUtils";
+import { ValidationRegex } from "@/utils/validations";
+import reset from "@/wc_scss/reset.scss";
+import { LitElement, PropertyValues, html, internalProperty, property } from "lit-element";
+import { nothing } from "lit-html";
+import { classMap } from "lit-html/directives/class-map";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { DateTime } from "luxon";
+import { TIME_UNIT } from "../../constants";
+import styles from "./scss/module.scss";
+
+export const timeUnits = [TIME_UNIT.HOUR, TIME_UNIT.MINUTE, TIME_UNIT.SECOND, TIME_UNIT.AM_PM] as const;
+
+export const timeSpecificity = [TIME_UNIT.HOUR, TIME_UNIT.MINUTE, TIME_UNIT.SECOND];
+
+const timePlaceholders = {
+  [TIME_UNIT.HOUR]: "HH",
+  [TIME_UNIT.MINUTE]: "MM",
+  [TIME_UNIT.SECOND]: "SS",
+  [TIME_UNIT.AM_PM]: "AM"
+};
+
+const timeUnitProps = (isTwentyFourHour: boolean) => {
+  return {
+    [TIME_UNIT.HOUR]: {
+      type: "number" as Input.Type,
+      min: isTwentyFourHour ? 0 : 1,
+      max: isTwentyFourHour ? 23 : 12
+    },
+    [TIME_UNIT.MINUTE]: {
+      type: "number" as Input.Type,
+      min: 0,
+      max: 59
+    },
+    [TIME_UNIT.SECOND]: {
+      type: "number" as Input.Type,
+      min: 0,
+      max: 59
+    },
+    [TIME_UNIT.AM_PM]: {
+      type: "text" as Input.Type,
+      min: undefined,
+      max: undefined
+    }
+  };
+};
+
+export namespace TimePicker {
+  export type TimeUnit = (typeof timeUnits)[number];
+  export type TimeSpecificity = (typeof timeSpecificity)[number];
+
+  @customElementWithCheck("md-timepicker")
+  export class ELEMENT extends LitElement {
+    @property({ type: Boolean, attribute: "two-digit-auto-tab" }) twoDigitAutoTab = false;
+    @property({ type: Boolean, attribute: "twenty-four-hour-format", reflect: true }) twentyFourHourFormat = false;
+    @property({ type: String }) timeSpecificity: TimePicker.TimeSpecificity = TIME_UNIT.SECOND;
+    @property({ type: String }) locale = "en-US";
+    @property({ type: String, reflect: true }) value = "00:00:00-08:00"; // ISO FORMAT
+
+    @internalProperty() private localeTwentyFourFormat = false;
+    @internalProperty() private finalTwentyFourFormat = false;
+    @internalProperty() private timeObject: DateTime = now();
+    @internalProperty() private tabNext = false;
+    @internalProperty() private timeValue = {
+      [TIME_UNIT.HOUR]: "12",
+      [TIME_UNIT.MINUTE]: "00",
+      [TIME_UNIT.SECOND]: "00",
+      [TIME_UNIT.AM_PM]: "AM"
+    };
+
+    @internalProperty() private timeValidity = {
+      [TIME_UNIT.HOUR]: true,
+      [TIME_UNIT.MINUTE]: true,
+      [TIME_UNIT.SECOND]: true,
+      [TIME_UNIT.AM_PM]: true
+    };
+
+    get timePickerClassMap() {
+      return {
+        "twenty-four-hour-format": this.finalTwentyFourFormat
+      };
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+
+      if (
+        this.value &&
+        (changedProperties.has("value") ||
+          changedProperties.has("locale") ||
+          changedProperties.has("twentyFourHourFormat"))
+      ) {
+        this.timeObject = DateTime.fromISO(this.value, { locale: this.locale });
+        const localeTimeFormat = this.getLocaleTimeFormat(this.timeObject);
+        this.finalTwentyFourFormat = this.twentyFourHourFormat || localeTimeFormat;
+        this.value = this.timeObject.toISOTime({ suppressMilliseconds: true });
+        this.updateTimeValues();
+      }
+    }
+
+    addLeadingZeros = (value: string | undefined) => {
+      if (value) {
+        if (value.length === 0) {
+          return "00";
+        } else if (value.length === 1) {
+          return `0${value}`;
+        }
+      }
+      return value;
+    };
+
+    formatAndValidate = (timeUnitString: string | undefined, unit: TIME_UNIT) => {
+      if (timeUnitString) {
+        this.updateValidity(timeUnitString, unit);
+        if (this.timeValidity[unit]) {
+          return this.addLeadingZeros(timeUnitString);
+        }
+      }
+      return undefined;
+    };
+
+    getLocaleTimeFormat = (aTimeObject: DateTime) => {
+      const stringDate = aTimeObject.toFormat("tt");
+      const [, amPmValue] = stringDate.split(" ");
+
+      const localeTwentyFourFormat = !amPmValue;
+      return localeTwentyFourFormat;
+    };
+
+    updateTimeValues = () => {
+      let stringDate;
+      if (this.finalTwentyFourFormat) {
+        stringDate = this.timeObject.toFormat("HH:mm:ss");
+      } else {
+        stringDate = this.timeObject.toFormat("tt");
+      }
+
+      const [times, amPmValue] = stringDate.split(" ");
+      const splitTimes = times.split(":");
+
+      timeSpecificity.forEach((unit: TIME_UNIT) => {
+        const formattedValue = this.formatAndValidate(splitTimes.shift(), unit);
+        if (formattedValue) {
+          if (unit === TIME_UNIT.HOUR && amPmValue) {
+            this.timeValue[TIME_UNIT.AM_PM] = amPmValue;
+          }
+          this.timeValue[unit] = formattedValue;
+        }
+      });
+    };
+
+    updateValidity = (input: string, unit: TimePicker.TimeUnit) => {
+      let result = true;
+      const regexTester = (regex: RegExp): void => {
+        if (input.match(regex) === null) {
+          result = false;
+        }
+      };
+
+      switch (unit) {
+        case TIME_UNIT.HOUR:
+          if (this.finalTwentyFourFormat) {
+            regexTester(new RegExp(ValidationRegex.twentyFourHourString));
+          } else {
+            regexTester(new RegExp(ValidationRegex.hourString));
+          }
+          break;
+        case TIME_UNIT.MINUTE:
+          regexTester(new RegExp(ValidationRegex.minuteSecondString));
+          break;
+        case TIME_UNIT.SECOND:
+          regexTester(new RegExp(ValidationRegex.minuteSecondString));
+          break;
+        case TIME_UNIT.AM_PM:
+          regexTester(new RegExp(ValidationRegex.amPmString));
+          break;
+        default:
+          break;
+      }
+
+      this.timeValidity[unit] = result;
+    };
+
+    to12HourFormat = (amPm: string, hour: string) => {
+      if (!this.finalTwentyFourFormat && this.timeValidity[TIME_UNIT.HOUR] && this.timeValidity[TIME_UNIT.AM_PM]) {
+        let hourValue = Number(hour);
+        if (amPm === "PM") {
+          hourValue = 12 + (hourValue % 12);
+        } else {
+          hourValue = hourValue % 12;
+        }
+        return hourValue;
+      }
+    };
+
+    isEntireTimeValid = () => {
+      return Object.values(this.timeValidity).every((timeUnitValidity) => timeUnitValidity);
+    };
+
+    updateTimeUnit = (unit: TIME_UNIT) => {
+      this.updateValidity(this.timeValue[unit], unit);
+
+      if (this.timeObject && this.timeValidity[unit]) {
+        if (unit !== TIME_UNIT.AM_PM) {
+          this.timeObject = this.timeObject?.set({ [unit]: this.timeValue[unit] });
+        } else {
+          this.timeObject = this.timeObject?.set({
+            hour: this.to12HourFormat(this.timeValue[TIME_UNIT.AM_PM], this.timeValue[TIME_UNIT.HOUR])
+          });
+        }
+
+        if (this.isEntireTimeValid()) {
+          this.timeObject = this.timeObject?.set({
+            hour: this.to12HourFormat(this.timeValue[TIME_UNIT.AM_PM], this.timeValue[TIME_UNIT.HOUR])
+          });
+
+          this.value = this.timeObject.toISOTime({ suppressMilliseconds: true }) || this.value;
+
+          this.dispatchEvent(
+            new CustomEvent(`time-selection-change`, {
+              bubbles: true,
+              composed: true,
+              detail: {
+                time: this.value,
+                data: this.timeObject
+              }
+            })
+          );
+        }
+      }
+    };
+
+    handleTimeChange(event: CustomEvent, unit: TimePicker.TimeUnit) {
+      this.timeValue[unit] = event?.detail?.value;
+      this.requestUpdate();
+      this.formatTimeUnit(unit);
+
+      const unitValue = this.timeValue[unit];
+      if (
+        this.twoDigitAutoTab &&
+        this.tabNext &&
+        ((unit !== TIME_UNIT.AM_PM && unitValue.length === 2 && unitValue[0] !== "0") || unitValue === "00")
+      ) {
+        event.preventDefault();
+        const currentNode = event?.target as Node;
+        const allInputs = this.shadowRoot?.querySelectorAll("md-input, md-combobox");
+
+        if (allInputs) {
+          const currentIndex = Array.prototype.findIndex.call(allInputs, (el) => currentNode?.isEqualNode(el));
+          const targetIndex = (currentIndex + 1) % allInputs.length;
+
+          if (currentIndex < allInputs.length - 1) {
+            const targetInput = allInputs[targetIndex].shadowRoot?.querySelector("input") as HTMLInputElement;
+            targetInput?.focus();
+          }
+        }
+      } else if (unit === TIME_UNIT.AM_PM) {
+        this.updateTimeUnit(unit);
+      }
+
+      event.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent(`${unit}-change`, {
+          bubbles: true,
+          composed: true,
+          detail: {
+            srcEvent: event,
+            value: `${this.timeValue[unit]}`,
+            isValid: this.timeValidity[unit]
+          }
+        })
+      );
+    }
+
+    handleTimeKeyDown(event: CustomEvent, unit: TimePicker.TimeUnit) {
+      const srcEvent = event?.detail?.srcEvent;
+
+      if (!srcEvent) {
+        console.warn("srcEvent is undefined");
+        return;
+      }
+
+      const { key } = srcEvent;
+
+      if (key === Key.ArrowDown || key === Key.ArrowUp) {
+        this.tabNext = false;
+      } else {
+        this.tabNext = true;
+      }
+
+      this.timeValidity[unit] = true;
+      this.requestUpdate();
+
+      event.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent(`${unit}-keydown`, {
+          bubbles: true,
+          composed: true,
+          detail: {
+            srcEvent: event,
+            value: `${this.timeValue[unit]}`
+          }
+        })
+      );
+    }
+
+    handleTimeBlur(event: CustomEvent, unit: TimePicker.TimeUnit) {
+      if (this.timeValue[unit] === "0") {
+        this.timeValue[unit] = "00";
+      }
+
+      this.updateTimeUnit(unit);
+      this.requestUpdate();
+
+      event.stopPropagation();
+      this.dispatchEvent(
+        new CustomEvent(`${unit}-blur`, {
+          bubbles: true,
+          composed: true,
+          detail: {
+            srcEvent: event,
+            time: this.value,
+            isValid: this.timeValidity[unit]
+          }
+        })
+      );
+    }
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    formatTimeUnit = (unit: TimePicker.TimeUnit) => {
+      if (this.timeValue[unit].length === 1) {
+        if (this.timeValue[unit] !== "0") {
+          this.timeValue[unit] = "0" + this.timeValue[unit];
+        }
+      } else if (this.timeValue[unit].length > 2 && this.timeValue[unit][0] === "0") {
+        const newValue = this.timeValue[unit].substring(1);
+        const regexNoPreZeros = RegExp(ValidationRegex.noPrecedingZerosString);
+        const noPrecedingZeros = regexNoPreZeros.test(newValue);
+        if (noPrecedingZeros) {
+          this.timeValue[unit] = newValue;
+        }
+      }
+      this.requestUpdate();
+    };
+
+    messageType = (isValid: boolean) => {
+      return isValid ? "" : "error";
+    };
+
+    generateTimeBox = (unit: TimePicker.TimeUnit) => {
+      const unitProperties = timeUnitProps(this.finalTwentyFourFormat)[unit];
+
+      return html`
+        ${unit === TIME_UNIT.MINUTE || unit === TIME_UNIT.SECOND
+          ? html` <span class="colon-separator">:</span> `
+          : nothing}
+        <md-input
+          compact
+          select-when-in-focus
+          class="${`time-input-box ${unit}`}"
+          id="time-${timeUnits.findIndex((aUnit) => aUnit === unit) + 1}"
+          value="${this.timeValue[unit]}"
+          type="${unitProperties.type}"
+          min=${ifDefined(unitProperties.min)}
+          max=${ifDefined(unitProperties.max)}
+          maxLength=${2}
+          placeholder="${timePlaceholders[unit]}"
+          @input-change="${(e: CustomEvent) => this.handleTimeChange(e, unit)}"
+          @input-keydown="${(e: CustomEvent) => this.handleTimeKeyDown(e, unit)}"
+          @input-blur="${(e: CustomEvent) => this.handleTimeBlur(e, unit)}"
+          .messageArr=${[{ message: "", type: this.messageType(this.timeValidity[unit]) } as Input.Message]}
+          .ariaLabel="${unit}-input"
+          ariaInvalid="${!this.timeValidity[unit]}"
+        ></md-input>
+      `;
+    };
+
+    generateAmPmComboBox = () => {
+      const options = ["AM", "PM"];
+      return html`
+        <md-combobox
+          compact
+          select-when-in-focus
+          class="amPm-combo-box"
+          .options=${options}
+          .value=${[options[0]]}
+          .preventFilter=${true}
+          .inputValue=${this.timeValue[TIME_UNIT.AM_PM]}
+          .ariaLabel=${this.timeValue[TIME_UNIT.AM_PM]}
+          @change-selected="${(e: CustomEvent) => this.handleTimeChange(e, TIME_UNIT.AM_PM)}"
+        >
+        </md-combobox>
+      `;
+    };
+
+    render() {
+      return html`
+        <div class="md-timepicker ${classMap(this.timePickerClassMap)}">
+          <div class="time-inputs-wrapper">
+            ${this.generateTimeBox(TIME_UNIT.HOUR)}
+            ${this.timeSpecificity === TIME_UNIT.HOUR ? nothing : this.generateTimeBox(TIME_UNIT.MINUTE)}
+            ${this.timeSpecificity === TIME_UNIT.MINUTE || this.timeSpecificity === TIME_UNIT.HOUR
+              ? nothing
+              : this.generateTimeBox(TIME_UNIT.SECOND)}
+            ${this.finalTwentyFourFormat ? nothing : this.generateAmPmComboBox()}
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-timepicker": TimePicker.ELEMENT;
+  }
+}

package/src/components/timepicker/scss/module.scss

@@ -0,0 +1,9 @@
+@import "@/wc_scss/tools/functions/core";
+@import "@/wc_scss/tools/mixins/core";
+
+@import "@/wc_scss/settings/rem";
+@import "@/wc_scss/colors/settings";
+@import "@/wc_scss/settings/core";
+
+@import "./settings";
+@import "./timepicker";

package/src/components/timepicker/scss/settings.scss

@@ -0,0 +1,8 @@
+$time-box-width: rem-calc(40);
+$time-box-height: rem-calc(32);
+$timepicker-right-padding: rem-calc(0);
+$am-pm-combobox-width: rem-calc(42);
+$am-pm-combobox-left-margin: rem-calc(8);
+$am-pm-combobox-dropdown-max-height: rem-calc(90);
+$colon-side-margin: rem-calc(4);
+$colon-separator-font-size: rem-calc(20);

package/src/components/timepicker/scss/timepicker.scss

@@ -0,0 +1,71 @@
+.md-timepicker {
+  padding-right: $timepicker-right-padding;
+  width: fit-content;
+
+  &.twenty-four-hour-format {
+    padding-right: 0;
+  }
+
+  .time-input-box {
+    display: inline-block;
+    height: $time-box-height;
+    width: $time-box-width;
+  }
+
+  .amPm-combo-box {
+    display: inline-block;
+    height: $time-box-height;
+    margin-left: $am-pm-combobox-left-margin;
+    width: $time-box-width;
+    position: relative;
+  }
+
+  .amPm-combo-box::part(group) {
+    padding: 0;
+  }
+
+  .amPm-combo-box::part(multiwrap-input) {
+    text-align: center;
+    text-transform: uppercase;
+    width: 100%;
+  }
+
+  .amPm-combo-box::part(label) {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+
+  .amPm-combo-box::part(select-label) {
+    margin-right: 0;
+  }
+
+  .amPm-combo-box::part(combobox-option) {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .amPm-combo-box::part(combobox-options) {
+    max-height: $am-pm-combobox-dropdown-max-height;
+    width: $am-pm-combobox-width;
+    padding: 0;
+    position: absolute;
+    overflow: visible;
+  }
+
+  md-input::part(input) {
+    padding: 0;
+    text-align: center;
+  }
+
+  md-input::part(message) {
+    display: none;
+  }
+
+  .colon-separator {
+    color: var(--md-secondary-text-color, $md-gray-70);
+    font-size: $colon-separator-font-size;
+    line-height: 125%;
+    margin: 0 $colon-side-margin;
+  }
+}