cmat 0.0.3

package/components/card/card.component.scss

@@ -0,0 +1,63 @@
+cmat-card {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    @apply rounded-2xl shadow bg-card;
+
+    /* Flippable */
+    &.cmat-card-flippable {
+        border-radius: 0;
+        overflow: visible;
+        transform-style: preserve-3d;
+        transition: transform 1s;
+        perspective: 600px;
+        background: transparent;
+        @apply shadow-none;
+
+        &.cmat-card-face-back {
+            .cmat-card-front {
+                visibility: hidden;
+                opacity: 0;
+                transform: rotateY(180deg);
+            }
+
+            .cmat-card-back {
+                visibility: visible;
+                opacity: 1;
+                transform: rotateY(360deg);
+            }
+        }
+
+        .cmat-card-front,
+        .cmat-card-back {
+            display: flex;
+            flex-direction: column;
+            flex: 1 1 auto;
+            z-index: 10;
+            transition: transform 0.5s ease-out 0s, visibility 0s ease-in 0.2s,
+                opacity 0s ease-in 0.2s;
+            backface-visibility: hidden;
+            @apply rounded-2xl shadow bg-card;
+        }
+
+        .cmat-card-front {
+            position: relative;
+            opacity: 1;
+            visibility: visible;
+            transform: rotateY(0deg);
+            overflow: hidden;
+        }
+
+        .cmat-card-back {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            opacity: 0;
+            visibility: hidden;
+            transform: rotateY(180deg);
+            overflow: hidden auto;
+        }
+    }
+}

package/components/card/card.types.d.ts

@@ -0,0 +1 @@
+export type CmatCardFace = 'front' | 'back';

package/components/card/index.d.ts

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

package/components/card/public-api.d.ts

@@ -0,0 +1 @@
+export * from './card.component';

package/components/cascade/cascade-bottom-sheet/cascade-bottom-sheet.component.d.ts

@@ -0,0 +1,14 @@
+import { FormControl } from '@angular/forms';
+import { CmatCascadeListComponent } from '../cascade-list/cascade-list.component';
+import * as i0 from "@angular/core";
+export declare class CmatCascadeBottomSheetComponent {
+    root: CmatCascadeListComponent;
+    selected: FormControl<number | null>;
+    labels: string[];
+    constructor(root: CmatCascadeListComponent);
+    clickHandle(event: Event): void;
+    select(disabled: boolean, label: string): void;
+    trackByFn(index: number, item: any): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatCascadeBottomSheetComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatCascadeBottomSheetComponent, "cmat-cascade-bottom-sheet", ["cmatCascadeBottomSheet"], {}, {}, never, never, true, never>;
+}

package/components/cascade/cascade-bottom-sheet/cascade-bottom-sheet.component.scss

@@ -0,0 +1,43 @@
+.cmat-cascade-bottom-sheet {
+    @apply p-0;
+    margin: -8px -16px;
+
+    .sheet-header {
+        @apply flex flex-1 items-center text-lg border-b;
+        padding: 12px 16px;
+
+        .sheet-title {
+            @apply text-secondary m-0 p-0 tracking-wider text-center flex-grow;
+        }
+    }
+
+    .menu-list {
+       vertical-align: top;
+        @apply box-border m-0 p-0 w-full overflow-hidden relative;
+
+        height: 204px;
+    }
+
+    .menu-item {
+        @apply leading-loose p-0 text-ellipsis box-border cursor-pointer outline-none;
+
+        font-size: 14px;
+        line-height: 3em;
+        height: 3em;
+
+        &.disabled {
+            @apply text-disabled;
+            pointer-events: none;
+        }
+
+        &.active {
+            @apply text-primary bg-hover;
+        }
+
+        &:focus:not(:active),
+        &:hover,
+        &.active:hover {
+            @apply bg-hover;
+        }
+    }
+}

package/components/cascade/cascade-list/cascade-list.component.d.ts

@@ -0,0 +1,52 @@
+import { EventEmitter, OnChanges, OnDestroy, Renderer2, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { BreakpointObserver } from '@angular/cdk/layout';
+import { MatBottomSheet, MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { CmatCascadeOptionsInterface } from '../options.interface';
+import * as i0 from "@angular/core";
+export declare class CmatCascadeListComponent implements OnDestroy, OnChanges, ControlValueAccessor {
+    private _renderer;
+    private _breakpointObserver;
+    private _bottomSheet;
+    id: string;
+    disabled: boolean;
+    placeholder: string;
+    appearance: 'fill' | 'outline';
+    options: Array<CmatCascadeOptionsInterface>;
+    clearable: boolean;
+    fullLevels: boolean;
+    changeOnSelect: boolean;
+    model: Array<string>;
+    modelChange: EventEmitter<any>;
+    bottomSheetRef: MatBottomSheetRef;
+    steps: Array<any>;
+    menuVisible: boolean;
+    inputHover: boolean;
+    currentLabels: Array<CmatCascadeOptionsInterface>;
+    inputValue?: string;
+    private _touchUi;
+    private _unsubscribeAll;
+    constructor(_renderer: Renderer2, _breakpointObserver: BreakpointObserver, _bottomSheet: MatBottomSheet);
+    get touchUi(): boolean;
+    set touchUi(value: boolean);
+    onTouched: () => any;
+    controlChange: () => any;
+    globalListenFunc: () => any;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    writeValue(value: any): void;
+    registerOnChange(fn: any): void;
+    registerOnTouched(fn: any): void;
+    close(): void;
+    clickHandle(event: MouseEvent): void;
+    changeLabels(): void;
+    clearValue(isFirst: boolean, event?: Event): void;
+    initSteps(index: number, options: CmatCascadeOptionsInterface[]): void;
+    selectHandle(event: Event, step: number, index: number): any;
+    showClearIcon(): boolean;
+    openBottomSheet(): void;
+    private _init;
+    private _setInputValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatCascadeListComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatCascadeListComponent, "cmat-cascade-list", ["cmatCascadeList"], { "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "options": { "alias": "options"; "required": true; }; "clearable": { "alias": "clearable"; "required": false; }; "fullLevels": { "alias": "fullLevels"; "required": false; }; "changeOnSelect": { "alias": "changeOnSelect"; "required": false; }; "model": { "alias": "model"; "required": true; }; "touchUi": { "alias": "touchUi"; "required": false; }; }, { "modelChange": "modelChange"; }, never, never, true, never>;
+}

package/components/cascade/cascade-list/cascade-list.component.scss

@@ -0,0 +1,22 @@
+.cmat-cascade-list {
+    @apply inline-block relative w-full leading-loose;
+
+    mat-form-field {
+        @apply w-full;
+    }
+
+    input {
+        @apply cursor-pointer;
+    }
+
+    &.disabled .cascade-label {
+        z-index: 2;
+        @apply text-disabled;
+    }
+
+    .cascade-label {
+        span {
+            @apply text-secondary;
+        }
+    }
+}

package/components/cascade/cascade-menu/cascade-menu.component.d.ts

@@ -0,0 +1,10 @@
+import { CmatCascadeListComponent } from '../cascade-list/cascade-list.component';
+import * as i0 from "@angular/core";
+export declare class CmatCascadeMenuComponent {
+    root: CmatCascadeListComponent;
+    constructor(root: CmatCascadeListComponent);
+    clickHandle(event: Event): void;
+    trackByFn(index: number, item: any): any;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatCascadeMenuComponent, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatCascadeMenuComponent, "cmat-cascade-menu", ["cmatCascadeMenu"], {}, {}, never, never, true, never>;
+}

package/components/cascade/cascade-menu/cascade-menu.component.scss

@@ -0,0 +1,48 @@
+.cmat-cascade-menu {
+    z-index: 2007;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
+    @apply absolute left-0 whitespace-nowrap bg-dialog;
+
+    .menu-list {
+        @apply inline-block border-r box-border m-0 p-2 overflow-hidden relative;
+        height: 204px;
+        min-width: 160px;
+        vertical-align: top;
+    }
+
+    .menu-list:last-child {
+        @apply border-r-0;
+    }
+
+    .menu-item {
+        @apply leading-loose h-12 p-0 relative whitespace-nowrap overflow-hidden text-ellipsis bg-dialog box-border cursor-pointer
+        outline-none;
+
+        &.disabled {
+            @apply text-disabled cursor-not-allowed;
+        }
+
+        &.active {
+            @apply text-primary bg-hover;
+        }
+
+        &:focus:not(:active),
+        &:hover {
+            @apply bg-hover;
+        }
+
+        &.active:hover {
+            @apply bg-hover;
+        }
+
+        &.selected {
+            @apply text-secondary bg-default;
+        }
+
+        & .item-icon {
+            @apply absolute justify-items-center inset-y-2/4 right-0;
+
+            transform: translateY(-50%);
+        }
+    }
+}

package/components/cascade/index.d.ts

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

package/components/cascade/options.interface.d.ts

@@ -0,0 +1,8 @@
+export interface CmatCascadeOptionsInterface {
+    [propName: string]: any;
+    label?: string;
+    value: string;
+    children?: Array<CmatCascadeOptionsInterface>;
+    disabled?: boolean;
+    active?: boolean;
+}

package/components/cascade/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './cascade-bottom-sheet/cascade-bottom-sheet.component';
+export * from './cascade-list/cascade-list.component';

package/components/date-range/date-range.component.d.ts

@@ -0,0 +1,134 @@
+import { EventEmitter, OnDestroy, ViewContainerRef } from '@angular/core';
+import { ControlValueAccessor, FormControl } from '@angular/forms';
+import { Overlay } from '@angular/cdk/overlay';
+import { Dayjs } from 'dayjs';
+import * as i0 from "@angular/core";
+export declare class CmatDateRangeComponent implements ControlValueAccessor, OnDestroy {
+    private _overlay;
+    private _viewContainerRef;
+    readonly rangeChanged: EventEmitter<{
+        start: string;
+        end: string;
+    }>;
+    private _matMonthView1;
+    private _matMonthView2;
+    private _pickerPanelOrigin;
+    private _pickerPanel;
+    activeDates: {
+        month1: Dayjs | null;
+        month2: Dayjs | null;
+    };
+    setWhichDate: 'start' | 'end';
+    startTimeFormControl: FormControl;
+    endTimeFormControl: FormControl;
+    private _dateFormat;
+    private _onChange;
+    private _onTouched;
+    private _programmaticChange;
+    private _range;
+    private _timeFormat;
+    private _timeRange;
+    private readonly _timeRegExp;
+    private _unsubscribeAll;
+    constructor(_overlay: Overlay, _viewContainerRef: ViewContainerRef);
+    /**
+     * Setter & getter for dateFormat input */
+    get dateFormat(): string;
+    set dateFormat(value: string);
+    /**
+     * Setter & getter for timeFormat input */
+    get timeFormat(): string;
+    set timeFormat(value: string);
+    /**
+     * Setter & getter for timeRange input */
+    get timeRange(): boolean;
+    set timeRange(value: boolean);
+    /**
+     * Setter & getter for range input */
+    get range(): any;
+    set range(value: any);
+    /**
+     * Update the form model on change
+     *
+     * @param fn
+     */
+    registerOnChange(fn: any): void;
+    /**
+     * Update the form model on blur
+     *
+     * @param fn
+     */
+    registerOnTouched(fn: any): void;
+    /**
+     * Write to view from model when the form model changes programmatically
+     *
+     * @param range
+     */
+    writeValue(range: {
+        start: string;
+        end: string;
+    }): void;
+    /**
+     * On destroy
+     */
+    ngOnDestroy(): void;
+    /**
+     * Open the picker panel
+     */
+    openPickerPanel(): void;
+    /**
+     * Get month label
+     *
+     * @param month
+     */
+    getMonthLabel(month: number): string | void;
+    /**
+     * Date class function to add/remove class names to calendar days
+     */
+    dateClass(): any;
+    /**
+     * Date filter to enable/disable calendar days
+     */
+    dateFilter(): any;
+    /**
+     * On selected date change
+     *
+     * @param date
+     */
+    onSelectedDateChange(date: Dayjs): void;
+    /**
+     * Go to previous month on both views
+     */
+    prev(): void;
+    /**
+     * Go to next month on both views
+     */
+    next(): void;
+    /**
+     * Update the start time
+     *
+     * @param event
+     */
+    updateStartTime(event: any): void;
+    /**
+     * Update the end time
+     *
+     * @param event
+     */
+    updateEndTime(event: any): void;
+    /**
+     * Initialize
+     *
+     * @private
+     */
+    private _init;
+    /**
+     * Parse the time from the inputs
+     *
+     * @param value
+     * @private
+     */
+    private _parseTime;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CmatDateRangeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CmatDateRangeComponent, "cmat-date-range", ["cmatDateRange"], { "dateFormat": { "alias": "dateFormat"; "required": false; }; "timeFormat": { "alias": "timeFormat"; "required": false; }; "timeRange": { "alias": "timeRange"; "required": false; }; "range": { "alias": "range"; "required": false; }; }, { "rangeChanged": "rangeChanged"; }, never, never, true, never>;
+}

package/components/date-range/date-range.component.scss

@@ -0,0 +1,232 @@
+/* Variables */
+$body-cell-padding: 2px;
+$control-width: calc((100% - 32px) / 2);
+
+cmat-date-range {
+    display: flex;
+
+    .range {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        height: 48px;
+        min-height: 48px;
+        max-height: 48px;
+        cursor: pointer;
+
+        .start,
+        .end {
+            @screen sm {
+                max-width: $control-width;
+                min-width: $control-width;
+                width: $control-width;
+            }
+
+            display: flex;
+            align-items: center;
+            height: 100%;
+            padding: 0 16px;
+            border-radius: 6px;
+            border-width: 1px;
+            line-height: 1;
+            @apply shadow-sm bg-white border-slate-300 dark:bg-black dark:bg-opacity-5 dark:border-slate-500 #{!important};
+        }
+
+        .date {
+            white-space: nowrap;
+
+            + .time {
+                margin-left: 8px;
+            }
+        }
+
+        .time {
+            white-space: nowrap;
+        }
+    }
+
+    .separator {
+        margin: 0 8px;
+
+        @screen sm {
+            margin: 0 12px;
+        }
+    }       
+}
+
+.cmat-date-range-panel {
+    border-radius: 4px;
+    padding: 24px;
+    @apply shadow-2xl bg-card;
+
+    .start,
+    .end {
+        display: flex;
+        flex-direction: column;
+
+        .month {
+            max-width: 196px;
+            min-width: 196px;
+            width: 196px;
+
+            .month-header {
+                position: relative;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 32px;
+                margin-bottom: 16px;
+
+                .previous-button,
+                .next-button {
+                    position: absolute;
+                    width: 24px !important;
+                    height: 24px !important;
+                    min-height: 24px !important;
+                    max-height: 24px !important;
+                    line-height: 24px !important;
+
+                    .mat-icon {
+                        @apply icon-size-5;
+                    }
+                }
+
+                .previous-button {
+                    left: 0;
+                }
+
+                .next-button {
+                    right: 0;
+                }
+
+                .month-label {
+                    font-weight: 500;
+                    @apply text-secondary;
+                }
+            }
+
+            mat-month-view {
+                display: flex;
+                min-height: 188px;
+
+                .mat-calendar-table {
+                    width: 100%;
+                    border-collapse: collapse;
+
+                    tbody {
+                        tr {
+                            &[aria-hidden="true"] {
+                                display: none !important;
+                            }
+
+                            &:first-child {
+                                td:first-child {
+                                    &[aria-hidden="true"] {
+                                        visibility: hidden;
+                                        pointer-events: none;
+                                        opacity: 0;
+                                    }
+                                }
+                            }
+
+                            td {
+                                .cmat-date-range {
+                                    &:before {
+                                        @apply bg-primary-200 #{!important};
+                                    }
+                                }
+
+                                .mat-calendar-body-cell-content {
+                                    background-color: transparent !important;
+                                }
+                            }
+
+                            .cmat-date-range-start,
+                            .cmat-date-range-end {
+                                .mat-calendar-body-cell-content {
+                                    @apply bg-primary text-on-primary #{!important};
+                                }
+                            }
+                        }
+
+                        .mat-calendar-body-today {
+                            border: none !important;
+                        }
+
+                        .mat-calendar-body-cell {
+                            width: 28px !important;
+                            height: 28px !important;
+                            padding: $body-cell-padding !important;
+
+                            &.cmat-date-range {
+                                &:before {
+                                    content: "";
+                                    position: absolute;
+                                    top: $body-cell-padding;
+                                    right: 0;
+                                    bottom: $body-cell-padding;
+                                    left: 0;
+                                }
+
+                                &.cmat-date-range-start {
+                                    &:before {
+                                        border-radius: 999px 0 0 999px;
+                                    }
+
+                                    &.cmat-date-range-end {
+                                        &:before {
+                                            right: $body-cell-padding;
+                                            border-radius: 999px;
+                                        }
+                                    }
+                                }
+
+                                &.cmat-date-range-end {
+                                    &:before {
+                                        border-radius: 0 999px 999px 0;
+                                    }
+                                }
+                            }
+
+                            .mat-calendar-body-cell-content {
+                                position: relative;
+                                top: 0;
+                                left: 0;
+                                width: 24px;
+                                height: 24px;
+                                font-size: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .time {
+        width: 100%;
+        max-width: 196px;
+    }
+
+    .start {
+        align-items: flex-start;
+        margin-right: 20px;
+
+        .month {
+            .month-label {
+                margin-left: 8px;
+            }
+        }
+    }
+
+    .end {
+        align-items: flex-end;
+        margin-left: 20px;
+
+        .month {
+            .month-label {
+                margin-right: 8px;
+            }
+        }
+    }
+}

package/components/date-range/index.d.ts

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

package/components/date-range/public-api.d.ts

@@ -0,0 +1 @@
+export * from './date-range.component';