@momentum-design/components 0.130.8 → 0.131.0

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

@@ -0,0 +1,24 @@
+import type { IconNames } from '../icon/icon.types';
+declare const TAG_NAME: "mdc-timepicker";
+declare const ARROW_ICON: {
+    readonly ARROW_UP: Extract<IconNames, "arrow-up-bold">;
+    readonly ARROW_DOWN: Extract<IconNames, "arrow-down-bold">;
+};
+declare const TIME_FORMAT: {
+    readonly TWELVE_HOUR: "12h";
+    readonly TWENTY_FOUR_HOUR: "24h";
+};
+declare const TRIGGER_ID = "timepicker-triggerid";
+declare const LISTBOX_ID = "timepicker-listbox";
+declare const DEFAULTS: {
+    readonly TIME_FORMAT: "12h";
+    readonly INTERVAL: 30;
+    readonly MIN_HOUR_12: 1;
+    readonly MAX_HOUR_12: 12;
+    readonly MIN_HOUR_24: 0;
+    readonly MAX_HOUR_24: 23;
+    readonly MIN_MINUTE: 0;
+    readonly MAX_MINUTE: 59;
+    readonly DISABLE_FLIP: false;
+};
+export { ARROW_ICON, DEFAULTS, TAG_NAME, TIME_FORMAT, TRIGGER_ID, LISTBOX_ID };

package/dist/components/timepicker/timepicker.constants.js

@@ -0,0 +1,24 @@
+import utils from '../../utils/tag-name';
+const TAG_NAME = utils.constructTagName('timepicker');
+const ARROW_ICON = {
+    ARROW_UP: 'arrow-up-bold',
+    ARROW_DOWN: 'arrow-down-bold',
+};
+const TIME_FORMAT = {
+    TWELVE_HOUR: '12h',
+    TWENTY_FOUR_HOUR: '24h',
+};
+const TRIGGER_ID = 'timepicker-triggerid';
+const LISTBOX_ID = 'timepicker-listbox';
+const DEFAULTS = {
+    TIME_FORMAT: TIME_FORMAT.TWELVE_HOUR,
+    INTERVAL: 30,
+    MIN_HOUR_12: 1,
+    MAX_HOUR_12: 12,
+    MIN_HOUR_24: 0,
+    MAX_HOUR_24: 23,
+    MIN_MINUTE: 0,
+    MAX_MINUTE: 59,
+    DISABLE_FLIP: false,
+};
+export { ARROW_ICON, DEFAULTS, TAG_NAME, TIME_FORMAT, TRIGGER_ID, LISTBOX_ID };

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

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

package/dist/components/timepicker/timepicker.styles.js

@@ -0,0 +1,179 @@
+import { css } from 'lit';
+import { hostFocusRingStyles } from '../../utils/styles';
+const styles = css `
+  :host {
+    --mdc-timepicker-background-color: var(--mds-color-theme-background-primary-ghost);
+    --mdc-timepicker-text-color: var(--mds-color-theme-text-primary-normal);
+    --mdc-timepicker-border-color: var(--mds-color-theme-outline-input-normal);
+    --mdc-timepicker-width: fit-content;
+    --mdc-timepicker-listbox-width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    row-gap: 0.5rem;
+    align-items: unset;
+    width: var(--mdc-timepicker-width);
+  }
+
+  :host::part(native-input) {
+    margin: 0;
+    opacity: 0.1%;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  :host::part(container) {
+    height: 2rem;
+    width: 100%;
+    position: relative;
+    display: flex;
+  }
+
+  :host::part(base-container) {
+    border-radius: 0.5rem;
+    padding: 0.34375rem 0.375rem 0.34375rem 0.75rem;
+    border: 1px solid var(--mdc-timepicker-border-color);
+    background: var(--mdc-timepicker-background-color);
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+    user-select: none;
+    width: 100%;
+    cursor: default;
+  }
+
+  :host::part(base-container):hover {
+    --mdc-timepicker-background-color: var(--mds-color-theme-background-primary-hover);
+  }
+
+  :host::part(base-container):active {
+    --mdc-timepicker-background-color: var(--mds-color-theme-background-primary-active);
+  }
+
+  :host::part(spinbutton-group) {
+    display: flex;
+    align-items: center;
+    gap: 0;
+    flex: 1;
+    min-width: 0;
+  }
+
+  :host::part(spinbutton) {
+    background: transparent;
+    border: none;
+    color: var(--mdc-timepicker-text-color);
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: center;
+    outline: none;
+    padding: 0;
+    margin: 0;
+    min-width: 1.25rem;
+    width: 1.25rem;
+    cursor: text;
+    -moz-appearance: textfield;
+  }
+
+  :host::part(spinbutton)::-webkit-inner-spin-button,
+  :host::part(spinbutton)::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  :host::part(spinbutton):focus {
+    background: var(--mds-color-theme-background-accent-normal);
+    color: var(--mds-color-theme-common-text-primary-normal);
+    border-radius: 0.125rem;
+  }
+
+  :host::part(separator) {
+    color: var(--mdc-timepicker-text-color);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    user-select: none;
+    pointer-events: none;
+    padding: 0 0.0625rem;
+  }
+
+  :host::part(period) {
+    background: transparent;
+    border: none;
+    color: var(--mdc-timepicker-text-color);
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    text-align: center;
+    outline: none;
+    padding: 0;
+    margin: 0 0 0 0.25rem;
+    min-width: 1.5rem;
+    width: 1.5rem;
+    cursor: text;
+  }
+
+  :host::part(period):focus {
+    background: var(--mds-color-theme-background-accent-normal);
+    color: var(--mds-color-theme-common-text-primary-normal);
+    border-radius: 0.125rem;
+  }
+
+  :host::part(icon-container) {
+    flex-shrink: 0;
+    border-radius: 100px;
+  }
+
+  /* Popover height, width & padding overrides */
+  :host mdc-popover::part(popover-content) {
+    max-height: var(--mdc-popover-max-height);
+    min-width: var(--mdc-timepicker-listbox-width);
+    padding: 0.75rem 0.5rem;
+  }
+
+  /* Listbox container */
+  :host::part(listbox) {
+    display: flex;
+    flex-direction: column;
+    max-height: var(--mdc-popover-internal-available-height);
+  }
+
+  /* Help text border colors */
+  :host([help-text-type='success'])::part(base-container),
+  :host([help-text-type='warning'])::part(base-container),
+  :host([help-text-type='error'])::part(base-container) {
+    --mdc-timepicker-border-color: var(--mdc-help-text-color);
+  }
+
+  :host([readonly])::part(help-text-container) {
+    --mdc-help-text-color: var(--mds-color-theme-text-secondary-normal);
+  }
+
+  /* Disabled, soft-disabled, readonly */
+  :host([disabled])::part(base-container),
+  :host([soft-disabled])::part(base-container),
+  :host([readonly])::part(base-container) {
+    --mdc-timepicker-border-color: var(--mds-color-theme-outline-primary-disabled);
+    --mdc-timepicker-background-color: var(--mds-color-theme-background-input-disabled);
+  }
+  :host([disabled])::part(base-container):hover,
+  :host([soft-disabled])::part(base-container):hover,
+  :host([readonly])::part(base-container):hover {
+    --mdc-timepicker-background-color: var(--mds-color-theme-background-input-disabled);
+  }
+  :host([disabled])::part(spinbutton),
+  :host([soft-disabled])::part(spinbutton),
+  :host([disabled])::part(period),
+  :host([soft-disabled])::part(period),
+  :host([disabled])::part(separator),
+  :host([soft-disabled])::part(separator) {
+    --mdc-timepicker-text-color: var(--mds-color-theme-text-primary-disabled);
+    color: var(--mds-color-theme-text-primary-disabled);
+  }
+`;
+export default [styles, ...hostFocusRingStyles(true)];

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

@@ -0,0 +1,21 @@
+import type { ValueOf, TypedCustomEvent } from '../../utils/types';
+import type { PopoverPlacement, PopoverShownEvent, PopoverHiddenEvent } from '../popover/popover.types';
+import type TimePicker from './timepicker.component';
+import { TIME_FORMAT } from './timepicker.constants';
+type TimeFormat = ValueOf<typeof TIME_FORMAT>;
+type TimePickerChangeEvent = TypedCustomEvent<TimePicker, {
+    value: string;
+}>;
+type TimePickerInputEvent = TypedCustomEvent<TimePicker, {
+    value: string;
+}>;
+interface Events {
+    onChangeEvent: TimePickerChangeEvent;
+    onInputEvent: TimePickerInputEvent;
+    onFocusEvent: FocusEvent;
+    onBlurEvent: FocusEvent;
+    onShownEvent: PopoverShownEvent;
+    onHiddenEvent: PopoverHiddenEvent;
+}
+type Placement = Extract<PopoverPlacement, 'bottom-start' | 'top-start'>;
+export type { Events, Placement, TimeFormat, TimePickerChangeEvent, TimePickerInputEvent };

package/dist/components/timepicker/timepicker.types.js

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