cmat 0.0.3

package/components/material-datetimepicker/datetimepicker-input.d.ts

@@ -0,0 +1,106 @@
+import { AfterContentInit, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
+import { MatFormField } from '@angular/material/form-field';
+import { DatetimeAdapter, CmatDatetimeFormats } from 'cmat/components/adapter';
+import { CmatDatetimepickerComponent } from './datetimepicker';
+import { CmatDatetimepickerFilterType } from './datetimepicker-filtertype';
+import { ThemePalette } from '@angular/material/core';
+import * as i0 from "@angular/core";
+export declare const CMAT_DATETIMEPICKER_VALUE_ACCESSOR: any;
+export declare const CMAT_DATETIMEPICKER_VALIDATORS: any;
+/**
+ * An event used for datepicker input and change events. We don't always have access to a native
+ * input or change event because the event may have been triggered by the user clicking on the
+ * calendar popup. For consistency, we always use MatDatepickerInputEvent instead.
+ */
+export declare class CmatDatetimepickerInputEvent<D> {
+    target: CmatDatetimepickerInputDirective<D>;
+    targetElement: HTMLElement;
+    /** The new value for the target datepicker input. */
+    value: D | null;
+    constructor(target: CmatDatetimepickerInputDirective<D>, targetElement: HTMLElement);
+}
+/** Directive used to connect an input to a MatDatepicker. */
+export declare class CmatDatetimepickerInputDirective<D> implements AfterContentInit, ControlValueAccessor, OnDestroy, Validator {
+    private _elementRef;
+    _dateAdapter: DatetimeAdapter<D>;
+    private _dateFormats;
+    private _formField;
+    /** Emits when a `change` event is fired on this `<input>`. */
+    dateChange: EventEmitter<CmatDatetimepickerInputEvent<D>>;
+    /** Emits when an `input` event is fired on this `<input>`. */
+    dateInput: EventEmitter<CmatDatetimepickerInputEvent<D>>;
+    datetimepicker: CmatDatetimepickerComponent<D>;
+    dateFilter: (date: D | null, type: CmatDatetimepickerFilterType) => boolean;
+    /** Emits when the value changes (either due to user input or programmatic change). */
+    valueChange: EventEmitter<D | null>;
+    /** Emits when the disabled state has changed */
+    disabledChange: EventEmitter<boolean>;
+    private _datepickerSubscription;
+    private _localeSubscription;
+    /** Whether the last value set on the input was valid. */
+    private _lastValueValid;
+    private _value;
+    private _min;
+    private _max;
+    private _disabled;
+    constructor(_elementRef: ElementRef, _dateAdapter: DatetimeAdapter<D>, _dateFormats: CmatDatetimeFormats, _formField: MatFormField);
+    /** The datepicker that this input is associated with. */
+    set cmatDatetimepicker(value: CmatDatetimepickerComponent<D>);
+    set cmatDatepickerFilter(filter: (date: D | null, type: CmatDatetimepickerFilterType) => boolean);
+    /** The value of the input. */
+    get value(): D | null;
+    set value(value: D | null);
+    /** The minimum valid date. */
+    get min(): D | null;
+    set min(value: D | null);
+    /** The maximum valid date. */
+    get max(): D | null;
+    set max(value: D | null);
+    /** Whether the datepicker-input is disabled. */
+    get disabled(): boolean;
+    set disabled(value: any);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    registerOnValidatorChange(fn: () => void): void;
+    validate(c: AbstractControl): ValidationErrors | null;
+    /**
+     * Gets the element that the datepicker popup should be connected to.
+     *
+     * @return The element to connect the popup to.
+     */
+    getConnectedOverlayOrigin(): ElementRef;
+    /** Gets the ID of an element that should be used a description for the calendar overlay. */
+    getOverlayLabelId(): string | null;
+    writeValue(value: D): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    onKeydown(event: KeyboardEvent): void;
+    onInput(value: string): void;
+    onChange(): void;
+    /** Handles blur events on the input. */
+    onBlur(): void;
+    /** Returns the palette used by the input's form field, if any. */
+    getThemePalette(): ThemePalette;
+    private _registerDatetimepicker;
+    private _getDisplayFormat;
+    private _getParseFormat;
+    private _onTouched;
+    private _cvaOnChange;
+    private _validatorOnChange;
+    /** The form control validator for whether the input parses. */
+    private _parseValidator;
+    /** The form control validator for the min date. */
+    private _minValidator;
+    /** The form control validator for the max date. */
+    private _maxValidator;
+    /** The form control validator for the date filter. */
+    private _filterValidator;
+    /** The combined form control validator for this input. */
+    private _validator;
+    /** Formats a value and sets it on the input element. */
+    private _formatValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerInputDirective<any>, [null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CmatDatetimepickerInputDirective<any>, "input[cmatDatetimepicker]", ["cmatDatepickerInput"], { "cmatDatetimepicker": { "alias": "cmatDatetimepicker"; "required": false; }; "cmatDatepickerFilter": { "alias": "cmatDatepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, true, never>;
+}

package/components/material-datetimepicker/datetimepicker-intl.d.ts

@@ -0,0 +1,51 @@
+import { Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class CmatDatetimepickerIntl {
+    /**
+     * Stream to emit from when labels are changed. Use this to notify components when the labels have
+     * changed after initialization.
+     */
+    readonly changes: Subject<void>;
+    /** A label for the calendar popup (used by screen readers). */
+    calendarLabel: string;
+    /** A label for the button used to open the calendar popup (used by screen readers). */
+    openCalendarLabel: string;
+    /** Label for the button used to close the calendar popup. */
+    closeCalendarLabel: string;
+    /** A label for the previous month button (used by screen readers). */
+    prevMonthLabel: string;
+    /** A label for the next month button (used by screen readers). */
+    nextMonthLabel: string;
+    /** A label for the previous year button (used by screen readers). */
+    prevYearLabel: string;
+    /** A label for the next year button (used by screen readers). */
+    nextYearLabel: string;
+    /** A label for the previous multi-year button (used by screen readers). */
+    prevMultiYearLabel: string;
+    /** A label for the next multi-year button (used by screen readers). */
+    nextMultiYearLabel: string;
+    /** A label for the 'switch to month view' button (used by screen readers). */
+    switchToMonthViewLabel: string;
+    /** A label for the 'switch to year view' button (used by screen readers). */
+    switchToYearViewLabel: string;
+    /** A label for the 'switch to multi-year view' button (used by screen readers). */
+    switchToMultiYearViewLabel: string;
+    /** A label for the first date of a range of dates (used by screen readers). */
+    startDateLabel: string;
+    /** A label for the last date of a range of dates (used by screen readers). */
+    endDateLabel: string;
+    /** A label for the 'switch to clock hour view' button (used by screen readers). */
+    switchToClockHourViewLabel: string;
+    /** A label for the 'switch to clock minute view' button (used by screen readers). */
+    switchToClockMinuteViewLabel: string;
+    /** Label used for ok button within the manual time input. */
+    okLabel: string;
+    /** Label used for cancel button within the manual time input. */
+    cancelLabel: string;
+    /** Formats a range of years (used for visuals). */
+    formatYearRange(start: string, end: string): string;
+    /** Formats a label for a range of years (used by screen readers). */
+    formatYearRangeLabel(start: string, end: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerIntl, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<CmatDatetimepickerIntl>;
+}

package/components/material-datetimepicker/datetimepicker-toggle.d.ts

@@ -0,0 +1,40 @@
+import { AfterContentInit, ChangeDetectorRef, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { CmatDatetimepickerComponent } from './datetimepicker';
+import { CmatDatetimepickerIntl } from './datetimepicker-intl';
+import { MatButton } from '@angular/material/button';
+import * as i0 from "@angular/core";
+/** Can be used to override the icon of a `cmatDatetimepickerToggle`. */
+export declare class CmatDatetimepickerToggleIconDirective {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerToggleIconDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CmatDatetimepickerToggleIconDirective, "[cmatDatetimepickerToggleIcon]", never, {}, {}, never, never, true, never>;
+}
+export declare class CmatDatetimepickerToggleComponent<D> implements AfterContentInit, OnChanges, OnDestroy {
+    protected intl: CmatDatetimepickerIntl;
+    private _changeDetectorRef;
+    /** Datepicker instance that the button will toggle. */
+    datetimepicker: CmatDatetimepickerComponent<D>;
+    /** Tabindex for the toggle. */
+    tabIndex: number;
+    /** Screen-reader label for the button. */
+    ariaLabel?: string;
+    /** Whether ripples on the toggle should be disabled. */
+    disableRipple: boolean;
+    /** Custom icon set by the consumer. */
+    customIcon: CmatDatetimepickerToggleIconDirective;
+    /** Underlying button element. */
+    button: MatButton;
+    class: string;
+    private _stateChanges;
+    private _disabled;
+    constructor(intl: CmatDatetimepickerIntl, _changeDetectorRef: ChangeDetectorRef);
+    /** Whether the toggle button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    ngAfterContentInit(): void;
+    open(event: Event): void;
+    private _watchStateChanges;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerToggleComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatDatetimepickerToggleComponent<any>, "cmat-datetimepicker-toggle", ["cmatDatetimepickerToggle"], { "datetimepicker": { "alias": "for"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customIcon"], ["[cmatDatetimepickerToggleIcon]"], true, never>;
+}

package/components/material-datetimepicker/datetimepicker-types.d.ts

@@ -0,0 +1,13 @@
+/** Possible types for datetimepicker. */
+export type CmatDatetimepickerType = 'date' | 'time' | 'month' | 'year' | 'datetime';
+/** Possible views for datetimepicker calendar. */
+export type CmatCalendarView = 'clock' | 'month' | 'year' | 'multi-year';
+/** Possible types for AM / PM */
+export type CmatAMPM = 'AM' | 'PM';
+/** Possible modes for datetimepicker dropdown display. */
+export type CmatDatetimepickerMode = 'auto' | 'portrait' | 'landscape';
+/** Possible positions for the datetimepicker dropdown along the X axis. */
+export type DatetimepickerDropdownPositionX = 'start' | 'end';
+/** Possible positions for the datetimepicker dropdown along the Y axis. */
+export type DatetimepickerDropdownPositionY = 'above' | 'below';
+export type CmatClockView = 'hour' | 'minute';

package/components/material-datetimepicker/datetimepicker.d.ts

@@ -0,0 +1,195 @@
+import { Directionality } from '@angular/cdk/bidi';
+import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, InjectionToken, NgZone, OnDestroy, OnInit, ViewContainerRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { DatetimeAdapter } from 'cmat/components/adapter';
+import { CmatDatetimepickerFilterType } from './datetimepicker-filtertype';
+import { CmatDatetimepickerInputDirective } from './datetimepicker-input';
+import { CmatCalendarView, CmatDatetimepickerMode, CmatDatetimepickerType, DatetimepickerDropdownPositionX, DatetimepickerDropdownPositionY } from './datetimepicker-types';
+import { CanColor, ThemePalette } from '@angular/material/core';
+import { CmatDatetimepickerCalendarComponent } from './calendar';
+import * as i0 from "@angular/core";
+/** Injection token that determines the scroll handling while the calendar is open. */
+export declare const CMAT_DATETIMEPICKER_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+export declare function CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY(overlay: Overlay): () => ScrollStrategy;
+export declare const CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof Overlay)[];
+    useFactory: typeof CMAT_DATETIMEPICKER_SCROLL_STRATEGY_FACTORY;
+};
+declare const cmatDatetimepickerContentBase: import("@angular/material/core")._Constructor<CanColor> & import("@angular/material/core")._AbstractConstructor<CanColor> & {
+    new (_elementRef: ElementRef): {
+        _elementRef: ElementRef;
+    };
+};
+/**
+ * Component used as the content for the datepicker dialog and popup. We use this instead of using
+ * MatCalendar directly as the content so we can control the initial focus. This also gives us a
+ * place to put additional features of the popup that are not part of the calendar itself in the
+ * future. (e.g. confirmation buttons).
+ */
+export declare class CmatDatetimepickerContentComponent<D> extends cmatDatetimepickerContentBase implements OnInit, AfterContentInit, OnDestroy, CanColor {
+    private _changeDetectorRef;
+    _calendar: CmatDatetimepickerCalendarComponent<D>;
+    color: ThemePalette;
+    datetimepicker: CmatDatetimepickerComponent<D>;
+    /** Whether the datetimepicker is above or below the input. */
+    isAbove: boolean;
+    /** Current state of the animation. */
+    animationState: 'enter-dropdown' | 'enter-dialog' | 'void';
+    /** Emits when an animation has finished. */
+    readonly animationDone: Subject<void>;
+    /** Id of the label for the `role="dialog"` element. */
+    dialogLabelId: string | null;
+    constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    startExitAnimation(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerContentComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatDatetimepickerContentComponent<any>, "cmat-datetimepicker-content", ["cmatDatetimepickerContent"], { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+}
+export declare class CmatDatetimepickerComponent<D> implements OnDestroy {
+    private _overlay;
+    private _ngZone;
+    private _viewContainerRef;
+    private _scrollStrategy;
+    private _dateAdapter;
+    private _dir;
+    private _document;
+    /** The view that the calendar should start in. */
+    startView: CmatCalendarView;
+    mode: CmatDatetimepickerMode;
+    timeInterval: number;
+    /** Prevent user to select same date time */
+    preventSameDateTimeSelection: boolean;
+    /** Preferred position of the datetimepicker in the X axis. */
+    xPosition: DatetimepickerDropdownPositionX;
+    /** Preferred position of the datetimepicker in the Y axis. */
+    yPosition: DatetimepickerDropdownPositionY;
+    selectedChanged: EventEmitter<D>;
+    /** Emits when the datepicker has been opened. */
+    openedStream: EventEmitter<void>;
+    /** Emits when the datepicker has been closed. */
+    closedStream: EventEmitter<void>;
+    /** Emits when the view has been changed. **/
+    viewChanged: EventEmitter<CmatCalendarView>;
+    /** Whether the calendar is open. */
+    /** The id for the datepicker calendar. */
+    id: string;
+    /** The input element this datepicker is associated with. */
+    datetimepickerInput: CmatDatetimepickerInputDirective<D>;
+    /** Emits when the datepicker is disabled. */
+    disabledChange: Subject<boolean>;
+    private _validSelected;
+    /** A reference to the overlay into which we've rendered the calendar. */
+    private _overlayRef;
+    /** Reference to the component instance rendered in the overlay. */
+    private _componentRef;
+    /** The element that was focused before the datetimepicker was opened. */
+    private _focusedElementBeforeOpen;
+    /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
+    private _backdropHarnessClass;
+    private _inputStateChanges;
+    private _multiYearSelector;
+    private _twelvehour;
+    private _panelClass;
+    private _opened;
+    private _color;
+    private _startAt;
+    private _type;
+    private _touchUi;
+    private _disabled;
+    private _timeInput;
+    private _restoreFocus;
+    constructor(_overlay: Overlay, _ngZone: NgZone, _viewContainerRef: ViewContainerRef, _scrollStrategy: any, _dateAdapter: DatetimeAdapter<D>, _dir: Directionality, _document: any);
+    /** Whether to show multi-year view. */
+    get multiYearSelector(): boolean;
+    set multiYearSelector(value: boolean);
+    /** Whether the clock uses 12 hour format. */
+    get twelvehour(): boolean;
+    set twelvehour(value: boolean);
+    /**
+     * Classes to be passed to the date picker panel.
+     * Supports string and string array values, similar to `ngClass`.
+     */
+    get panelClass(): string | string[];
+    set panelClass(value: string | string[]);
+    /** Whether the calendar is open. */
+    get opened(): boolean;
+    set opened(value: boolean);
+    /** Color palette to use on the datetimepicker's calendar. */
+    get color(): ThemePalette;
+    set color(value: ThemePalette);
+    /** The date to open the calendar to initially. */
+    get startAt(): D | null;
+    set startAt(date: D | null);
+    get type(): CmatDatetimepickerType;
+    set type(value: CmatDatetimepickerType);
+    /**
+     * Whether the calendar is in time mode. In time mode the calendar clock gets time input
+     * elements rather then just clock. When `touchUi` is enabled this will be disabled.
+     */
+    get timeInput(): boolean;
+    set timeInput(value: boolean);
+    /**
+     * Whether the calendar UI is in touch mode. In touch mode the calendar opens in a dialog rather
+     * than a popup and elements have more padding to allow for bigger touch targets.
+     */
+    get touchUi(): boolean;
+    set touchUi(value: boolean);
+    /** Whether the datepicker pop-up should be disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Whether to restore focus to the previously-focused element when the panel is closed.
+     * Note that automatic focus restoration is an accessibility feature and it is recommended that
+     * you provide your own equivalent, if you decide to turn it off.
+     */
+    get restoreFocus(): boolean;
+    set restoreFocus(value: boolean);
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    /** The minimum selectable date. */
+    get minDate(): D | null;
+    /** The maximum selectable date. */
+    get maxDate(): D | null;
+    get dateFilter(): (date: D | null, type: CmatDatetimepickerFilterType) => boolean;
+    ngOnDestroy(): void;
+    /**
+     * Register an input with this datepicker.
+     *
+     * @param input The datepicker input to register with this datepicker.
+     */
+    registerInput(input: CmatDatetimepickerInputDirective<D>): void;
+    /** Open the calendar. */
+    open(): void;
+    /** Close the calendar. */
+    close(): void;
+    /** Selects the given date */
+    select(date: D): void;
+    viewChange(type: CmatCalendarView): void;
+    /**
+     * Forwards relevant values from the datetimepicker to the
+     * datetimepicker content inside the overlay.
+     */
+    private _forwardContentValues;
+    /** Opens the overlay with the calendar. */
+    private _openOverlay;
+    /** Destroys the current overlay. */
+    private _destroyOverlay;
+    /** Gets a position strategy that will open the calendar as a dropdown. */
+    private _getDialogStrategy;
+    /** Gets a position strategy that will open the calendar as a dropdown. */
+    private _getDropdownStrategy;
+    /**
+     * Sets the positions of the datetimepicker in dropdown mode based on the current configuration.
+     */
+    private _setConnectedPositions;
+    /** Gets an observable that will emit when the overlay is supposed to be closed. */
+    private _getCloseStream;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerComponent<any>, [null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatDatetimepickerComponent<any>, "cmat-datetimepicker", ["cmatDatetimepicker"], { "startView": { "alias": "startView"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "xPosition": { "alias": "xPosition"; "required": false; }; "yPosition": { "alias": "yPosition"; "required": false; }; "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "panelClass": { "alias": "panelClass"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "color": { "alias": "color"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "type": { "alias": "type"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "touchUi": { "alias": "touchUi"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "restoreFocus": { "alias": "restoreFocus"; "required": false; }; }, { "selectedChanged": "selectedChanged"; "openedStream": "openedStream"; "closedStream": "closedStream"; "viewChanged": "viewChanged"; }, never, never, true, never>;
+}
+export {};

package/components/material-datetimepicker/datetimepicker.scss

@@ -0,0 +1,145 @@
+@use "datetimepicker-content";
+
+$cmat-datetimepicker-selected-today-box-shadow-width: 1px;
+
+.cmat-datetimepicker-content {
+    @apply bg-card text-hint #{'!important'};
+}
+
+.cmat-datetimepicker-calendar-header {
+    @apply bg-primary;
+    color: white !important;
+}
+
+.cmat-datetimepicker-body-label {
+    @apply text-secondary;
+}
+
+.cmat-datetimepicker-calendar-table-header {
+    @apply text-hint;
+}
+
+.cmat-datetimepicker-calendar-body-cell-content {
+    @apply text-default;
+
+    &.cmat-datetimepicker-calendar-body-selected {
+        @apply bg-primary;
+        color: white !important;
+
+        &.cmat-datetimepicker-calendar-body-today {
+            @apply shadow;
+        }
+    }
+
+    &:not(.cmat-datetimepicker-calendar-body-selected) {
+        &.cmat-datetimepicker-calendar-body-today {
+            border-color: var(--cmat-text-hint);
+        }
+    }
+}
+
+.cmat-datetimepicker-calendar-body-cell:not(.cmat-datetimepicker-calendar-body-disabled):hover,
+.cmat-datetimepicker-calendar-body-active {
+    &>.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected) {
+        background-color: rgba(var(--cmat-primary-rgb), 0.3);
+    }
+}
+
+.cmat-datetimepicker-calendar-body-disabled {
+    >.cmat-datetimepicker-calendar-body-cell-content:not(.cmat-datetimepicker-calendar-body-selected) {
+        color: var(--cmat-text-disabled);
+    }
+
+    >.cmat-datetimepicker-calendar-body-today:not(.cmat-datetimepicker-calendar-body-selected) {
+        border-color: rgba(var(--cmat-text-disabled), 0.8);
+    }
+
+    >.cmat-datetimepicker-calendar-body-selected {
+        background-color: rgba(var(--cmat-primary-rgb), 0.4);
+    }
+}
+
+.cmat-datetimepicker-calendar-previous-button,
+.cmat-datetimepicker-calendar-next-button {
+    &.disabled {
+        color: var(--cmat-text-disabled);
+    }
+}
+
+.cmat-datetimepicker-clock-wrapper {
+    background-color: var(--cmat-divider);
+}
+
+.cmat-datetimepicker-clock-center {
+    @apply bg-primary;
+}
+
+.cmat-datetimepicker-clock-hand {
+    @apply bg-primary;
+
+    &::before {
+        @apply bg-primary;
+    }
+}
+
+.cmat-datetimepicker-clock-cell {
+    @apply text-default;
+
+    &.cmat-datetimepicker-clock-cell-selected {
+        @apply bg-primary;
+        color: white !important;
+    }
+
+    &:not(.cmat-datetimepicker-clock-cell-selected, .cmat-datetimepicker-clock-cell-disabled):hover {
+        @apply bg-hover;
+    }
+
+    &.cmat-datetimepicker-clock-cell-disabled {
+        color: var(--cmat-text-disabled);
+    }
+}
+
+.cmat-datetimepicker-datetimepicker-toggle-active {
+    @apply text-primary;
+
+    &.mat-accent {
+        @apply text-accent;
+    }
+
+    &.mat-warn {
+        @apply text-warn;
+    }
+}
+
+.cmat-datetimepicker-time-input {
+    @apply text-primary;
+    background-color: var(--cmat-text-disabled);
+
+    &.cmat-datetimepicker-time-input-active {
+        @apply text-primary;
+        background-color: rgba(var(--cmat-primary-rgb), 0.2);
+
+        &:focus {
+            border-color: var(--cmat-primary);
+            background-color: var(--cmat-divider);
+
+            &::placeholder {
+                color: rgba(var(--cmat-primary-rgb), 0.6);
+            }
+        }
+    }
+
+    &.cmat-datetimepicker-time-input-warning {
+        border-color: var(--cmat-warn);
+    }
+}
+
+.cmat-datetimepicker-time-am.mat-mdc-button,
+.cmat-datetimepicker-time-pm.mat-mdc-button {
+    color: var(--cmat-text-hint);
+    border-color: var(--cmat-text-hint);
+
+    &.cmat-datetimepicker-time-ampm-active {
+        background-color: rgba(var(--cmat-accent-rgb), 0.2);
+    }
+}

package/components/material-datetimepicker/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="cmat/components/material-datetimepicker" />
+export * from './public-api';

package/components/material-datetimepicker/month-view.d.ts

@@ -0,0 +1,64 @@
+import { AfterContentInit, EventEmitter } from '@angular/core';
+import { CmatDatetimeFormats } from 'cmat/components/adapter';
+import { DatetimeAdapter } from 'cmat/components/adapter';
+import { CmatDatetimepickerCalendarCellComponent } from './calendar-body';
+import { CmatDatetimepickerType } from './datetimepicker-types';
+import * as i0 from "@angular/core";
+/**
+ * An internal component used to display a single month in the datepicker.
+ */
+export declare class CmatDatetimepickerMonthViewComponent<D> implements AfterContentInit {
+    adapter: DatetimeAdapter<D>;
+    private _dateFormats;
+    type: CmatDatetimepickerType;
+    userSelection: EventEmitter<void>;
+    /** A function used to filter which dates are selectable. */
+    dateFilter: (date: D) => boolean;
+    /** Emits when a new date is selected. */
+    selectedChange: EventEmitter<D>;
+    /** Grid of calendar cells representing the dates of the month. */
+    weeks: CmatDatetimepickerCalendarCellComponent[][];
+    /** The number of blank cells in the first row before the 1st of the month. */
+    firstWeekOffset: number;
+    /**
+     * The date of the month that the currently selected Date falls on.
+     * Null if the currently selected Date is in another month.
+     */
+    selectedDate: number | null;
+    /** The date of the month that today falls on. Null if today is in another month. */
+    todayDate: number | null;
+    /** The names of the weekdays. */
+    weekdays: {
+        long: string;
+        narrow: string;
+    }[];
+    calendarState: string;
+    private _activeDate;
+    private _selected;
+    constructor(adapter: DatetimeAdapter<D>, _dateFormats: CmatDatetimeFormats);
+    /**
+     * The date to display in this month view (everything other than the month and year is ignored).
+     */
+    get activeDate(): D;
+    set activeDate(value: D);
+    /** The currently selected date. */
+    get selected(): D;
+    set selected(value: D);
+    ngAfterContentInit(): void;
+    /** Handles when a new date is selected. */
+    dateSelected(date: number): void;
+    calendarStateDone(): void;
+    trackByFn(index: number, item: any): any;
+    /** Initializes this month view. */
+    private _init;
+    /** Creates MdCalendarCells for the dates in this month. */
+    private _createWeekCells;
+    /**
+     * Gets the date in this month that the given Date falls on.
+     * Returns null if the given Date is in another month.
+     */
+    private _getDateInCurrentMonth;
+    private _changeCalendarState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerMonthViewComponent<any>, [{ optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatDatetimepickerMonthViewComponent<any>, "cmat-datetimepicker-month-view", ["cmatDatetimepickerMonthView"], { "type": { "alias": "type"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "userSelection": "userSelection"; "selectedChange": "selectedChange"; }, never, never, true, never>;
+}