cmat 0.0.3

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

@@ -0,0 +1,146 @@
+import { AfterContentInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
+import { CmatDatetimepickerFilterType } from './datetimepicker-filtertype';
+import { CmatDatetimeFormats, DatetimeAdapter } from 'cmat/components/adapter';
+import { CmatAMPM, CmatCalendarView, CmatClockView, CmatDatetimepickerType } from './datetimepicker-types';
+import { CmatDatetimepickerIntl } from './datetimepicker-intl';
+import * as i0 from "@angular/core";
+/**
+ * A calendar that is used as part of the datepicker.
+ */
+export declare class CmatDatetimepickerCalendarComponent<D> implements AfterContentInit, OnDestroy {
+    private _elementRef;
+    private _intl;
+    private _ngZone;
+    private _adapter;
+    private _dateFormats;
+    userSelection: EventEmitter<void>;
+    /** Active multi year view when click on year. */
+    multiYearSelector: boolean;
+    /** Whether the calendar should be started in month or year view. */
+    startView: CmatCalendarView;
+    twelvehour: boolean;
+    timeInterval: number;
+    /** A function used to filter which dates are selectable. */
+    dateFilter: (date: D, type: CmatDatetimepickerFilterType) => boolean;
+    /** Prevent user to select same date time */
+    preventSameDateTimeSelection: boolean;
+    /** Emits when the currently selected date changes. */
+    selectedChange: EventEmitter<D>;
+    /** Emits when the view has been changed. **/
+    viewChanged: EventEmitter<CmatCalendarView>;
+    class: string;
+    label: string;
+    role: string;
+    tabindex: number;
+    AMPM: CmatAMPM;
+    clockView: CmatClockView;
+    calendarState: string;
+    /** Whether the calendar is in month view. */
+    private _currentView;
+    private _intlChanges;
+    private _clampedActiveDate;
+    private _type;
+    private _startAt;
+    private _selected;
+    private _minDate;
+    private _maxDate;
+    private _timeInput;
+    constructor(_elementRef: ElementRef, _intl: CmatDatetimepickerIntl, _ngZone: NgZone, _adapter: DatetimeAdapter<D>, _dateFormats: CmatDatetimeFormats, changeDetectorRef: ChangeDetectorRef);
+    get type(): CmatDatetimepickerType;
+    set type(value: CmatDatetimepickerType);
+    /** A date representing the period (month or year) to start the calendar in. */
+    get startAt(): D | null;
+    set startAt(value: D | null);
+    /**
+     * 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);
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    /** The minimum selectable date. */
+    get minDate(): D | null;
+    set minDate(value: D | null);
+    /** The maximum selectable date. */
+    get maxDate(): D | null;
+    set maxDate(value: D | null);
+    /**
+     * The current active date. This determines which time period is shown and which date is
+     * highlighted when using keyboard navigation.
+     */
+    get activeDate(): D;
+    set activeDate(value: D);
+    get currentView(): CmatCalendarView;
+    set currentView(view: CmatCalendarView);
+    /** The label for the current calendar view. */
+    get yearButtonText(): string;
+    get yearPeriodText(): string;
+    get yearButtonLabel(): string;
+    get dateButtonText(): string;
+    get dateButtonLabel(): string;
+    get hoursButtonText(): string;
+    get hourButtonLabel(): string;
+    get minutesButtonText(): string;
+    get minuteButtonLabel(): string;
+    get prevButtonLabel(): string;
+    get nextButtonLabel(): string;
+    handleCalendarBodyKeydown(event: KeyboardEvent): void;
+    /** Date filter for the month and year views. */
+    dateFilterForViews: (date: D) => boolean;
+    userSelected(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    /** Handles date selection in the month view. */
+    dateSelected(date: D): void;
+    /** Handles month selection in the year view. */
+    monthSelected(month: D): void;
+    /** Handles year selection in the multi year view. */
+    yearSelected(year: D): void;
+    timeSelected(date: D): void;
+    dialTimeSelected(date: D): void;
+    onActiveDateChange(date: D): void;
+    updateDate(date: D): D;
+    selectAMPM(date: D): void;
+    ampmClicked(source: CmatAMPM): void;
+    yearClicked(): void;
+    dateClicked(): void;
+    hoursClicked(): void;
+    minutesClicked(): void;
+    /** Handles user clicks on the previous button. */
+    previousClicked(): void;
+    /** Handles user clicks on the next button. */
+    nextClicked(): void;
+    /** Whether the previous period button is enabled. */
+    previousEnabled(): boolean;
+    /** Whether the next period button is enabled. */
+    nextEnabled(): boolean;
+    focusActiveCell(): void;
+    calendarStateDone(): void;
+    /** Whether the two dates represent the same view in the current view mode (month or year). */
+    private _isSameView;
+    /** Handles keydown events on the calendar body when calendar is in month view. */
+    private _handleCalendarBodyKeydownInMonthView;
+    /** Handles keydown events on the calendar body when calendar is in year view. */
+    private _handleCalendarBodyKeydownInYearView;
+    /** Handles keydown events on the calendar body when calendar is in multi-year view. */
+    private _handleCalendarBodyKeydownInMultiYearView;
+    /** Handles keydown events on the calendar body when calendar is in month view. */
+    private _handleCalendarBodyKeydownInClockView;
+    /**
+     * Determine the date for the month that comes before the given month in the same column in the
+     * calendar table.
+     */
+    private _prevMonthInSameCol;
+    /**
+     * Determine the date for the month that comes after the given month in the same column in the
+     * calendar table.
+     */
+    private _nextMonthInSameCol;
+    private _changeCalendarState;
+    private _2digit;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerCalendarComponent<any>, [null, null, null, { optional: true; }, { optional: true; }, null]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatDatetimepickerCalendarComponent<any>, "cmat-datetimepicker-calendar", ["cmatDatetimepickerCalendar"], { "multiYearSelector": { "alias": "multiYearSelector"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "timeInterval": { "alias": "timeInterval"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "preventSameDateTimeSelection": { "alias": "preventSameDateTimeSelection"; "required": false; }; "type": { "alias": "type"; "required": false; }; "startAt": { "alias": "startAt"; "required": false; }; "timeInput": { "alias": "timeInput"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; }, { "userSelection": "userSelection"; "selectedChange": "selectedChange"; "viewChanged": "viewChanged"; }, never, never, true, never>;
+}

package/components/material-datetimepicker/calendar.scss

@@ -0,0 +1,194 @@
+$calendar-padding: 8px !default;
+
+// We use the same padding as the month / year label, but subtract 16px since there is padding
+// between the edge of the button and the text. This ensures that the button text lines up with
+// the month / year label text.
+$calendar-controls-side-margin: calc(33% / 7 - 16px);
+
+// Values chosen to approximate https://material.io/icons/#ic_navigate_before and
+// https://material.io/icons/#ic_navigate_next as closely as possible.
+$calendar-prev-next-icon-border-width: 2px;
+$calendar-prev-next-icon-margin: 15.5px;
+$calendar-prev-icon-transform: translateX(2px) rotate(-45deg);
+$calendar-next-icon-transform: translateX(-2px) rotate(45deg);
+
+@mixin landscape-calendar-header {
+    .cmat-datetimepicker-calendar {
+        display: flex;
+
+        .cmat-datetimepicker-calendar-header {
+            width: 150px;
+            min-width: 150px;
+            padding: 16px 8px;
+            border-radius: 4px 0 0 4px;
+
+            [dir='rtl'] & {
+                border-radius: 0 4px 4px 0;
+            }
+        }
+
+        .cmat-datetimepicker-calendar-header-year+.cmat-datetimepicker-calendar-header-date-time,
+        .cmat-datetimepicker-calendar-header-date+.cmat-datetimepicker-calendar-header-time {
+            margin-top: 12px;
+        }
+
+        .cmat-datetimepicker-calendar-header-date-time {
+            font-size: 28px;
+            flex-direction: column;
+        }
+
+        .cmat-datetimepicker-calendar-header-time {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .cmat-datetimepicker-calendar-header-ampm-container {
+            flex-direction: row;
+            font-size: 24px;
+        }
+
+        .cmat-datetimepicker-calendar-header-ampm {
+            padding: 4px;
+
+            +.cmat-datetimepicker-calendar-header-ampm {
+                margin: 0 8px;
+            }
+        }
+    }
+}
+
+.cmat-datetimepicker-calendar {
+    display: block;
+    outline: none;
+}
+
+.cmat-datetimepicker-calendar-header {
+    box-sizing: border-box;
+    padding: 8px;
+    border-radius: 4px 4px 0 0;
+
+    .header-button {
+        color: white !important;
+        padding: 0 4px;
+        font-size: inherit;
+        white-space: normal;
+        word-break: break-word;
+        font-weight: 500;
+        cursor: pointer;
+    }
+}
+
+.cmat-datetimepicker-calendar-header-year.header-button {
+    font-size: 26px;
+    line-height: 24px;
+}
+
+.cmat-datetimepicker-calendar-header-date-time {
+    font-size: 24px;
+    line-height: 36px;
+    display: flex;
+    flex-direction: row;
+}
+
+.cmat-datetimepicker-calendar-header-year,
+.cmat-datetimepicker-calendar-header-date,
+.cmat-datetimepicker-calendar-header-hours,
+.cmat-datetimepicker-calendar-header-minutes,
+.cmat-datetimepicker-calendar-header-ampm {
+    &:not(.active) {
+        opacity: .6;
+    }
+
+    &.not-clickable {
+        cursor: initial;
+    }
+}
+
+.cmat-datetimepicker-calendar-header-time {
+    display: inline-flex;
+
+    &:not(.active) {
+        opacity: .6;
+
+        .cmat-datetimepicker-calendar-header-hours,
+        .cmat-datetimepicker-calendar-header-minutes,
+        .cmat-datetimepicker-calendar-header-ampm {
+            opacity: 1;
+        }
+    }
+}
+
+.cmat-datetimepicker-calendar-header-hour-minute-separator {
+    display: inline-block;
+    width: 8px;
+    text-align: center;
+}
+
+.cmat-datetimepicker-calendar-header-ampm-container {
+    display: inline-flex;
+    flex-direction: column;
+    line-height: 18px;
+    font-size: 12px;
+}
+
+[mode='landscape'] {
+    @include landscape-calendar-header;
+}
+
+@media all and (orientation: landscape) {
+    [mode='auto'] {
+        @include landscape-calendar-header;
+    }
+}
+
+.cmat-datetimepicker-calendar-content {
+    width: 100%;
+    padding: $calendar-padding;
+    outline: none;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.cmat-datetimepicker-calendar-controls {
+    display: flex;
+    justify-content: space-between;
+    margin: 0 $calendar-controls-side-margin;
+}
+
+.cmat-datetimepicker-calendar-period-button {
+    display: inline-block;
+    height: 40px;
+    line-height: 40px;
+    outline: none;
+    border: 0;
+    background: transparent;
+    box-sizing: border-box;
+}
+
+.cmat-datetimepicker-calendar-previous-button,
+.cmat-datetimepicker-calendar-next-button {
+    &.disabled {
+        pointer-events: none;
+    }
+
+    svg {
+        fill: currentColor;
+        vertical-align: top;
+
+        [dir='rtl'] & {
+            transform: rotate(180deg);
+        }
+    }
+}
+
+.cmat-datetimepicker-calendar-table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.cmat-datetimepicker-calendar-table-header th {
+    text-align: center;
+    padding: $calendar-padding 0;
+}
+

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

@@ -0,0 +1,74 @@
+import { AfterContentInit, ElementRef, EventEmitter } from '@angular/core';
+import { CmatDatetimepickerFilterType } from './datetimepicker-filtertype';
+import { DatetimeAdapter } from 'cmat/components/adapter';
+import { CmatClockView } from './datetimepicker-types';
+import * as i0 from "@angular/core";
+export declare const CLOCK_RADIUS = 50;
+export declare const CLOCK_INNER_RADIUS = 27.5;
+export declare const CLOCK_OUTER_RADIUS = 41.25;
+export declare const CLOCK_TICK_RADIUS = 7.0833;
+/**
+ * A clock that is used as part of the datepicker.
+ */
+export declare class CmatDatetimepickerClockComponent<D> implements AfterContentInit {
+    private _element;
+    private _adapter;
+    userSelection: EventEmitter<void>;
+    /** A function used to filter which dates are selectable. */
+    dateFilter: (date: D, type: CmatDatetimepickerFilterType) => boolean;
+    interval: number;
+    twelvehour: boolean;
+    /** Emits when the currently selected date changes. */
+    selectedChange: EventEmitter<D>;
+    activeDateChange: EventEmitter<D>;
+    role: string;
+    class: string;
+    /** Hours and Minutes representing the clock view. */
+    hours: Array<any>;
+    minutes: Array<any>;
+    /** Whether the clock is in hour view. */
+    hourView: boolean;
+    selectedHour: number;
+    selectedMinute: number;
+    private _timeChanged;
+    private _mouseMoveListener;
+    private _mouseUpListener;
+    private _activeDate;
+    private _selected;
+    private _minDate;
+    private _maxDate;
+    constructor(_element: ElementRef, _adapter: DatetimeAdapter<D>);
+    /**
+     * The date to display in this clock view.
+     */
+    get activeDate(): D;
+    set activeDate(value: D);
+    /** The currently selected date. */
+    get selected(): D | null;
+    set selected(value: D | null);
+    /** The minimum selectable date. */
+    get minDate(): D | null;
+    set minDate(value: D | null);
+    /** The maximum selectable date. */
+    get maxDate(): D | null;
+    set maxDate(value: D | null);
+    /** Whether the clock should be started in hour or minute view. */
+    set startView(value: CmatClockView);
+    get hand(): any;
+    /** Handles mousedown events on the clock body. */
+    handleMousedown(event: MouseEvent): void;
+    ngAfterContentInit(): void;
+    handleMousemove(event: any): void;
+    handleMouseup(): void;
+    trackByFn(index: number, item: any): any;
+    /** Initializes this clock view. */
+    private _init;
+    /**
+     * Set Time
+     *
+     * @param event
+     */
+    private _setTime;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDatetimepickerClockComponent<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatDatetimepickerClockComponent<any>, "cmat-datetimepicker-clock", ["cmatDatetimepickerClock"], { "dateFilter": { "alias": "dateFilter"; "required": false; }; "interval": { "alias": "interval"; "required": false; }; "twelvehour": { "alias": "twelvehour"; "required": false; }; "activeDate": { "alias": "activeDate"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "startView": { "alias": "startView"; "required": false; }; }, { "userSelection": "userSelection"; "selectedChange": "selectedChange"; "activeDateChange": "activeDateChange"; }, never, never, true, never>;
+}

package/components/material-datetimepicker/clock.scss

@@ -0,0 +1,90 @@
+$clock-min-size: 224px !default;
+$clock-margin: 12px !default;
+$clock-cell-size: 14.1666% !default;
+
+.cmat-datetimepicker-clock {
+    position: relative;
+    display: block;
+    min-width: $clock-min-size;
+    margin: $clock-margin;
+    box-sizing: border-box;
+    user-select: none;
+}
+
+.cmat-datetimepicker-clock-wrapper {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: 100%;
+    border-radius: 50%;
+}
+
+.cmat-datetimepicker-clock-center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 2%;
+    height: 2%;
+    margin: -1%;
+    border-radius: 50%;
+}
+
+.cmat-datetimepicker-clock-hand {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 1px;
+    margin: 0 auto;
+    transform-origin: bottom;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+    }
+}
+
+.cmat-datetimepicker-clock-hours,
+.cmat-datetimepicker-clock-minutes {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    visibility: hidden;
+    transition: 350ms;
+    transform: scale(1.2);
+
+    &.active {
+        opacity: 1;
+        visibility: visible;
+        transform: scale(1);
+    }
+}
+
+.cmat-datetimepicker-clock-minutes {
+    transform: scale(.8);
+}
+
+.cmat-datetimepicker-clock-cell {
+    position: absolute;
+    display: flex;
+    width: $clock-cell-size;
+    height: $clock-cell-size;
+    justify-content: center;
+    box-sizing: border-box;
+    border-radius: 50%;
+    align-items: center;
+    cursor: pointer;
+
+    &.cmat-datetimepicker-clock-cell-disabled {
+        pointer-events: none;
+    }
+}

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

@@ -0,0 +1,4 @@
+import { AnimationTriggerMetadata } from '@angular/animations';
+export declare const transformPanel: AnimationTriggerMetadata;
+export declare const fadeInCalendar: AnimationTriggerMetadata;
+export declare const slideCalendar: AnimationTriggerMetadata;

package/components/material-datetimepicker/datetimepicker-content.scss

@@ -0,0 +1,151 @@
+$calendar-padding: 8px;
+$non-touch-calendar-cell-size: 40px;
+$non-touch-calendar-portrait-width: $non-touch-calendar-cell-size * 7 + $calendar-padding * 2;
+$non-touch-calendar-portrait-height: 424px;
+$non-touch-calendar-landscape-width: 446px;
+$non-touch-calendar-landscape-height: 328px;
+$non-touch-calendar-with-time-input-portrait-height: 490px;
+$non-touch-calendar-with-time-input-landscape-height: 412px;
+
+// Ideally the calendar would have a constant aspect ratio, no matter its size, and we would base
+// these measurements off the aspect ratio. Unfortunately, the aspect ratio does change a little as
+// the calendar grows, since some of the elements have pixel-based sizes. These numbers have been
+// chosen to minimize extra whitespace at larger sizes, while still ensuring we won't need
+// scrollbars at smaller sizes.
+$touch-landscape-mode-landscape-width: 120vh;
+$touch-landscape-mode-landscape-height: 80vh;
+$touch-landscape-mode-portrait-width: 90vw;
+$touch-landscape-mode-portrait-height: 64vw;
+$touch-portrait-mode-landscape-width: 64vh;
+$touch-portrait-mode-landscape-height: 90vh;
+$touch-portrait-mode-portrait-width: 80vw;
+$touch-portrait-mode-portrait-height: 120vw;
+$touch-portrait-mode-portrait-height-with-actions: 135vw;
+$touch-min-width: 250px;
+$touch-min-height: 300px;
+$touch-max-width: 750px;
+$touch-max-height: 850px;
+
+@mixin landscape-calendar-size {
+  .cmat-datetimepicker-calendar {
+    width: $non-touch-calendar-landscape-width;
+    height: $non-touch-calendar-landscape-height;
+
+    &.cmat-datetimepicker-calendar-with-time-input {
+      height: $non-touch-calendar-with-time-input-landscape-height;
+    }
+  }
+}
+
+.cmat-datetimepicker-content {
+  @apply shadow border-slate-300 bg-card dark:bg-black dark:bg-opacity-5 dark:border-slate-500;
+  display: block;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.cmat-datetimepicker-content-container {
+  display: flex;
+  flex-direction: column;
+
+  // TODO: Ensures that `cmat-datetimepicker-actions` is pushed to the bottom of the popup.
+  justify-content: space-between;
+}
+
+.cmat-datetimepicker-content .cmat-calendar {
+  width: $non-touch-calendar-portrait-width;
+  height: $non-touch-calendar-portrait-height;
+
+  &.cmat-datetimepicker-calendar-with-time-input {
+    height: $non-touch-calendar-with-time-input-portrait-height;
+  }
+}
+
+.cmat-datetimepicker-content[mode='landscape'] {
+  @include landscape-calendar-size;
+}
+
+@media all and (orientation: landscape) {
+  .cmat-datetimepicker-content[mode='auto'] {
+    @include landscape-calendar-size;
+  }
+}
+
+.cmat-datetimepicker-content-touch {
+  display: block;
+  max-height: 80vh;
+
+  // Allows for the screen reader close button to be seen in touch UI mode.
+  position: relative;
+
+  // Prevents the content from jumping around on Windows while the animation is running.
+  overflow: visible;
+
+  .cmat-datetimepicker-content-container {
+    min-height: $touch-min-height;
+    max-height: $touch-max-height;
+    min-width: $touch-min-width;
+    max-width: $touch-max-width;
+  }
+
+  .cmat-datetimepicker-calendar {
+    width: 100%;
+    height: auto;
+  }
+}
+
+@media all and (orientation: landscape) {
+  .cmat-datetimepicker-content-touch {
+    .cmat-datetimepicker-content-container[mode='auto'],
+    .cmat-datetimepicker-content-container[mode='landscape'] {
+      width: $touch-landscape-mode-landscape-width;
+      height: $touch-landscape-mode-landscape-height;
+
+      .cmat-datetimepicker-calendar {
+        width: auto;
+        height: 100%;
+      }
+    }
+
+    .cmat-datetimepicker-content-container[mode='portrait'] {
+      width: $touch-portrait-mode-landscape-width;
+      height: $touch-portrait-mode-landscape-height;
+
+      .cmat-datetimepicker-calendar {
+        width: 100%;
+        height: auto;
+      }
+    }
+  }
+}
+
+@media all and (orientation: portrait) {
+  .cmat-datetimepicker-content-touch {
+    .cmat-datetimepicker-content-container[mode='auto'],
+    .cmat-datetimepicker-content-container[mode='portrait'] {
+      width: $touch-portrait-mode-portrait-width;
+      height: $touch-portrait-mode-portrait-height;
+
+      .cmat-datetimepicker-calendar {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    .cmat-datetimepicker-content-container[mode='landscape'] {
+      width: $touch-landscape-mode-portrait-width;
+      height: $touch-landscape-mode-portrait-height;
+
+      .cmat-datetimepicker-calendar {
+        width: auto;
+        height: 100%;
+      }
+    }
+
+    // The content needs to be a bit taller when actions have
+    // been projected so that it doesn't have to scroll.
+    .cmat-datetimepicker-content-container-with-actions {
+      height: $touch-portrait-mode-portrait-height-with-actions;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export declare function createMissingDateImplError(provider: string): Error;

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

@@ -0,0 +1,5 @@
+export declare enum CmatDatetimepickerFilterType {
+    DATE = 0,
+    HOUR = 1,
+    MINUTE = 2
+}