cmat 0.0.3 → 0.0.5

package/fesm2022/cmat-components-chip-input.mjs

@@ -0,0 +1,151 @@
+import * as i0 from '@angular/core';
+import { forwardRef, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Input } from '@angular/core';
+import * as i7 from '@angular/forms';
+import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { BehaviorSubject, Subject, startWith, takeUntil, debounceTime, map } from 'rxjs';
+import { ENTER, COMMA } from '@angular/cdk/keycodes';
+import * as i4 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { isNil, isArray, isEmpty } from 'lodash';
+import * as i1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i3 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i6 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { AsyncPipe } from '@angular/common';
+import * as i5 from '@angular/material/core';
+
+class CmatChipInputComponent {
+    constructor() {
+        this.hasAutocomplete = false;
+        this.outputIsString = false;
+        this.separatorKey = ',';
+        this.inputControl = new FormControl();
+        this.selectedOptions$ = new BehaviorSubject([]);
+        this.separatorKeysCodes = [ENTER, COMMA];
+        this._maxFilteredItems = 50;
+        this._unsubscribeAll = new Subject();
+        this._onModelChange = () => { };
+        this._onTouchedChange = () => { };
+        this.filteredOptions$ = this.inputControl.valueChanges.pipe(startWith(null), takeUntil(this._unsubscribeAll), debounceTime(100), map((value) => {
+            if (this.hasAutocomplete) {
+                const selectable = (value ? this._filter(value) : this.selectableOptions.slice());
+                const notSelected = !isNil(this.selectedOptions$.value) ? selectable.filter(option => !this.selectedOptions$.value.includes(option)) : selectable;
+                return notSelected.slice(0, this._maxFilteredItems);
+            }
+            return null;
+        }));
+    }
+    ngOnDestroy() {
+        this._unsubscribeAll.next(void 0);
+        this._unsubscribeAll.complete();
+    }
+    registerOnChange(fn) {
+        this._onModelChange = fn;
+    }
+    registerOnTouched(fn) {
+        this._onTouchedChange = fn;
+    }
+    writeValue(value) {
+        if (isArray(value) || isNil(value))
+            this.selectedOptions$.next(value);
+        else if (isEmpty(value)) {
+            this.selectedOptions$.next([]);
+        }
+        else {
+            this.selectedOptions$.next(value.split(this.separatorKey));
+        }
+        this.inputControl.setValue(null);
+    }
+    onAdd(event) {
+        const value = (event.value || '').trim();
+        if (value && (!this.hasAutocomplete || this.selectableOptions.includes(value))) {
+            const newValue = isNil(this.selectedOptions$.value) ? [value] : [...this.selectedOptions$.value, value];
+            this.selectedOptions$.next(newValue);
+            if (this.outputIsString) {
+                this._onModelChange(newValue.join(this.separatorKey));
+            }
+            else {
+                this._onModelChange(newValue);
+            }
+        }
+        event.chipInput.clear();
+        this.inputControl.setValue(null);
+    }
+    onRemove(option) {
+        const index = this.selectedOptions$.value.indexOf(option);
+        if (index >= 0) {
+            let newOptions = [...this.selectedOptions$.value];
+            newOptions.splice(index, 1);
+            newOptions = newOptions.length > 0 ? newOptions : [];
+            this.selectedOptions$.next(newOptions);
+            if (this.outputIsString && !isNil(newOptions)) {
+                this._onModelChange(newOptions.join(this.separatorKey));
+            }
+            else {
+                this._onModelChange(newOptions);
+            }
+            this.inputControl.setValue(null);
+        }
+    }
+    onSelected(event) {
+        const newValue = isNil(this.selectedOptions$.value) ? [event.option.viewValue] : [...this.selectedOptions$.value, event.option.viewValue];
+        this.selectedOptions$.next(newValue);
+        if (this.outputIsString) {
+            this._onModelChange(newValue.join(this.separatorKey));
+        }
+        else {
+            this._onModelChange(newValue);
+        }
+        this.inputElementRef.nativeElement.value = '';
+        this.inputControl.setValue(null);
+    }
+    trackByFn(index) {
+        return index;
+    }
+    _filter(value) {
+        const filterValue = value.toLowerCase();
+        return this.selectableOptions.filter(v => v.toLowerCase().includes(filterValue));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatChipInputComponent, isStandalone: true, selector: "cmat-chip-input", inputs: { label: "label", selectableOptions: "selectableOptions", hasAutocomplete: "hasAutocomplete", outputIsString: "outputIsString", separatorKey: "separatorKey" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => CmatChipInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "inputElementRef", first: true, predicate: ["input"], descendants: true }], exportAs: ["cmatChipInput"], ngImport: i0, template: "<mat-form-field subscriptSizing=\"dynamic\" class=\"w-full\">\n  <mat-label>{{label}}</mat-label>\n  <mat-chip-grid #chipList class=\"items-center\">\n    @for (option of selectedOptions$ | async; track trackByFn($index)) {\n      <mat-chip-row selectable (removed)=\"onRemove(option)\">\n        {{ option }}\n        <button matChipRemove>\n          <mat-icon class=\"icon-size-5\"  [svgIcon]=\"'mat_solid:cancel'\"></mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n\n    @if (hasAutocomplete) {\n      <input #input matInput [formControl]=\"inputControl\" [placeholder]=\"'\u5F00\u59CB\u9009\u62E9...'\"\n        [matAutocomplete]=\"autoComplete\" [matChipInputFor]=\"chipList\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"onAdd($event)\" />\n        <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\">\n          @for (option of filteredOptions$ | async; track trackByFn($index)) {\n            <mat-option [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      } @else {\n        <input #input [formControl]=\"inputControl\" [placeholder]=\"'\u5F00\u59CB\u586B\u5199...'\" [matChipInputFor]=\"chipList\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"onAdd($event)\" />\n        }\n      </mat-chip-grid>\n\n    </mat-form-field>\n\n", dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatChipInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cmat-chip-input', standalone: true, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => CmatChipInputComponent),
+                            multi: true
+                        }
+                    ], exportAs: 'cmatChipInput', imports: [MatFormFieldModule, MatChipsModule, AsyncPipe, MatInputModule, MatAutocompleteModule, MatIconModule, FormsModule, ReactiveFormsModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<mat-form-field subscriptSizing=\"dynamic\" class=\"w-full\">\n  <mat-label>{{label}}</mat-label>\n  <mat-chip-grid #chipList class=\"items-center\">\n    @for (option of selectedOptions$ | async; track trackByFn($index)) {\n      <mat-chip-row selectable (removed)=\"onRemove(option)\">\n        {{ option }}\n        <button matChipRemove>\n          <mat-icon class=\"icon-size-5\"  [svgIcon]=\"'mat_solid:cancel'\"></mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n\n    @if (hasAutocomplete) {\n      <input #input matInput [formControl]=\"inputControl\" [placeholder]=\"'\u5F00\u59CB\u9009\u62E9...'\"\n        [matAutocomplete]=\"autoComplete\" [matChipInputFor]=\"chipList\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"onAdd($event)\" />\n        <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\">\n          @for (option of filteredOptions$ | async; track trackByFn($index)) {\n            <mat-option [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      } @else {\n        <input #input [formControl]=\"inputControl\" [placeholder]=\"'\u5F00\u59CB\u586B\u5199...'\" [matChipInputFor]=\"chipList\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"onAdd($event)\" />\n        }\n      </mat-chip-grid>\n\n    </mat-form-field>\n\n" }]
+        }], ctorParameters: () => [], propDecorators: { inputElementRef: [{
+                type: ViewChild,
+                args: ['input']
+            }], label: [{
+                type: Input
+            }], selectableOptions: [{
+                type: Input
+            }], hasAutocomplete: [{
+                type: Input
+            }], outputIsString: [{
+                type: Input
+            }], separatorKey: [{
+                type: Input
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CmatChipInputComponent };
+//# sourceMappingURL=cmat-components-chip-input.mjs.map

package/fesm2022/cmat-components-chip-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cmat-components-chip-input.mjs","sources":["../../../projects/cmat/components/chip-input/chip-input.component.ts","../../../projects/cmat/components/chip-input/chip-input.component.html","../../../projects/cmat/components/chip-input/cmat-components-chip-input.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, ViewChild, ViewEncapsulation, forwardRef } from '@angular/core';\r\nimport { ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\r\nimport { BehaviorSubject, Observable, Subject, debounceTime, map, startWith, takeUntil } from 'rxjs';\r\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\r\nimport { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';\r\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\r\nimport { isArray, isEmpty, isNil } from 'lodash';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\n\r\nimport { MatInputModule } from '@angular/material/input';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { AsyncPipe } from '@angular/common';\r\n\r\n@Component({\r\n    selector: 'cmat-chip-input',\r\n    templateUrl: './chip-input.component.html',\r\n    standalone: true,\r\n    providers: [\r\n        {\r\n            provide: NG_VALUE_ACCESSOR,\r\n            useExisting: forwardRef(() => CmatChipInputComponent),\r\n            multi: true\r\n        }\r\n    ],\r\n    exportAs: 'cmatChipInput',\r\n    imports: [MatFormFieldModule, MatChipsModule,AsyncPipe, MatInputModule, MatAutocompleteModule, MatIconModule, FormsModule, ReactiveFormsModule],\r\n    encapsulation: ViewEncapsulation.None,\r\n    changeDetection: ChangeDetectionStrategy.OnPush\r\n})\r\nexport class CmatChipInputComponent implements ControlValueAccessor, OnDestroy {\r\n    @ViewChild('input') inputElementRef: ElementRef<HTMLInputElement>;\r\n    @Input() label: string;\r\n    @Input() selectableOptions: string[];\r\n    @Input() hasAutocomplete: boolean = false;\r\n    @Input() outputIsString: boolean = false;\r\n    @Input() separatorKey: string = ',';\r\n\r\n    inputControl: FormControl<string | null> = new FormControl();\r\n    filteredOptions$: Observable<string[] | null>;\r\n    selectedOptions$: BehaviorSubject<any> = new BehaviorSubject<any>([]);\r\n    separatorKeysCodes: number[] = [ENTER, COMMA];\r\n\r\n    private readonly _maxFilteredItems = 50;\r\n    private _unsubscribeAll: Subject<any> = new Subject<any>();\r\n\r\n    constructor() {\r\n        this.filteredOptions$ = this.inputControl.valueChanges.pipe(\r\n            startWith(null),\r\n            takeUntil(this._unsubscribeAll),\r\n            debounceTime(100),\r\n            map((value: string | null) => {\r\n                if (this.hasAutocomplete) {\r\n                    const selectable = (value ? this._filter(value) : this.selectableOptions.slice());\r\n                    const notSelected = !isNil(this.selectedOptions$.value) ? selectable.filter(option => !this.selectedOptions$.value.includes(option)) : selectable;\r\n\r\n                    return notSelected.slice(0, this._maxFilteredItems);\r\n                }\r\n\r\n                return null;\r\n            }),\r\n        );\r\n    }\r\n\r\n    ngOnDestroy(): void {\r\n        this._unsubscribeAll.next(void 0);\r\n        this._unsubscribeAll.complete();\r\n    }\r\n\r\n    registerOnChange(fn: any): void {\r\n        this._onModelChange = fn;\r\n    }\r\n\r\n    registerOnTouched(fn: any): void {\r\n        this._onTouchedChange = fn;\r\n    }\r\n\r\n    writeValue(value: any): void {\r\n        if (isArray(value) || isNil(value))\r\n            this.selectedOptions$.next(value);\r\n        else if (isEmpty(value)) {\r\n            this.selectedOptions$.next([]);\r\n        }\r\n        else {\r\n            this.selectedOptions$.next((value as string).split(this.separatorKey));\r\n        }\r\n\r\n        this.inputControl.setValue(null);\r\n    }\r\n\r\n    onAdd(event: MatChipInputEvent): void {\r\n        const value = (event.value || '').trim();\r\n\r\n        if (value && (!this.hasAutocomplete || this.selectableOptions.includes(value))) {\r\n            const newValue = isNil(this.selectedOptions$.value) ? [value] : [...this.selectedOptions$.value, value];\r\n            this.selectedOptions$.next(newValue);\r\n\r\n            if (this.outputIsString) {\r\n                this._onModelChange(newValue.join(this.separatorKey));\r\n            } else {\r\n                this._onModelChange(newValue);\r\n            }\r\n        }\r\n\r\n        event.chipInput!.clear();\r\n\r\n        this.inputControl.setValue(null);\r\n    }\r\n\r\n    onRemove(option: string): void {\r\n        const index: number = this.selectedOptions$.value.indexOf(option);\r\n        if (index >= 0) {\r\n            let newOptions = [...this.selectedOptions$.value];\r\n            newOptions.splice(index, 1);\r\n            newOptions = newOptions.length > 0 ? newOptions : [];\r\n\r\n            this.selectedOptions$.next(newOptions);\r\n\r\n            if (this.outputIsString && !isNil(newOptions)) {\r\n                this._onModelChange(newOptions.join(this.separatorKey));\r\n            } else {\r\n                this._onModelChange(newOptions);\r\n            }\r\n\r\n            this.inputControl.setValue(null);\r\n        }\r\n    }\r\n\r\n    onSelected(event: MatAutocompleteSelectedEvent): void {\r\n        const newValue = isNil(this.selectedOptions$.value) ? [event.option.viewValue] : [...this.selectedOptions$.value, event.option.viewValue];\r\n        this.selectedOptions$.next(newValue);\r\n\r\n        if (this.outputIsString) {\r\n            this._onModelChange(newValue.join(this.separatorKey));\r\n        } else {\r\n            this._onModelChange(newValue);\r\n        }\r\n\r\n        this.inputElementRef.nativeElement.value = '';\r\n        this.inputControl.setValue(null);\r\n    }\r\n\r\n    trackByFn(index: number): any {\r\n        return index;\r\n    }\r\n\r\n    private _onModelChange: (value: any) => void = () => { };\r\n    private _onTouchedChange: () => any = () => { };\r\n\r\n    private _filter(value: string): string[] {\r\n        const filterValue = value.toLowerCase();\r\n\r\n        return this.selectableOptions.filter(v => v.toLowerCase().includes(filterValue));\r\n    }\r\n}","<mat-form-field subscriptSizing=\"dynamic\" class=\"w-full\">\n  <mat-label>{{label}}</mat-label>\n  <mat-chip-grid #chipList class=\"items-center\">\n    @for (option of selectedOptions$ | async; track trackByFn($index)) {\n      <mat-chip-row selectable (removed)=\"onRemove(option)\">\n        {{ option }}\n        <button matChipRemove>\n          <mat-icon class=\"icon-size-5\"  [svgIcon]=\"'mat_solid:cancel'\"></mat-icon>\n        </button>\n      </mat-chip-row>\n    }\n\n    @if (hasAutocomplete) {\n      <input #input matInput [formControl]=\"inputControl\" [placeholder]=\"'开始选择...'\"\n        [matAutocomplete]=\"autoComplete\" [matChipInputFor]=\"chipList\"\n        [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"onAdd($event)\" />\n        <mat-autocomplete #autoComplete=\"matAutocomplete\" (optionSelected)=\"onSelected($event)\">\n          @for (option of filteredOptions$ | async; track trackByFn($index)) {\n            <mat-option [value]=\"option\">\n              {{ option }}\n            </mat-option>\n          }\n        </mat-autocomplete>\n      } @else {\n        <input #input [formControl]=\"inputControl\" [placeholder]=\"'开始填写...'\" [matChipInputFor]=\"chipList\"\n          [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\" (matChipInputTokenEnd)=\"onAdd($event)\" />\n        }\n      </mat-chip-grid>\n\n    </mat-form-field>\n\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cmat-components-date-range.mjs

@@ -16,13 +16,13 @@ import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import { NgIf } from '@angular/common';
 import * as i1 from '@angular/cdk/overlay';
 
 class CmatDateRangeComponent {
-    constructor(_overlay, _viewContainerRef) {
+    constructor(_overlay, _viewContainerRef, _changeDetectorRef) {
         this._overlay = _overlay;
         this._viewContainerRef = _viewContainerRef;
+        this._changeDetectorRef = _changeDetectorRef;
         this.rangeChanged = new EventEmitter();
         this.activeDates = {
             month1: null,
@@ -364,6 +364,7 @@ class CmatDateRangeComponent {
             this.setWhichDate = this.setWhichDate === 'start' ? 'end' : 'start';
             // Set the range
             this.range = newRange;
+            this._changeDetectorRef.markForCheck();
         }
     }
     /**
@@ -416,6 +417,7 @@ class CmatDateRangeComponent {
                 end: this._range.end.clone().toISOString(),
                 whichDate: 'start'
             };
+            this._changeDetectorRef.markForCheck();
         }
     }
     /**
@@ -454,6 +456,7 @@ class CmatDateRangeComponent {
                 end: endDate.toISOString(),
                 whichDate: 'end'
             };
+            this._changeDetectorRef.markForCheck();
         }
     }
     // -----------------------------------------------------------------------------------------------------
@@ -477,6 +480,7 @@ class CmatDateRangeComponent {
         // Set the default time range
         this._programmaticChange = true;
         this.timeRange = true;
+        this._changeDetectorRef.markForCheck();
     }
     /**
      * Parse the time from the inputs
@@ -497,16 +501,16 @@ class CmatDateRangeComponent {
         // If meridiem doesn't exist, create a moment using 24-hours format and return in
         return dayjs(value, 'HH:mm').second(0);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDateRangeComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.0", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDateRangeComponent, deps: [{ token: i1.Overlay }, { token: i0.ViewContainerRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CmatDateRangeComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "_matMonthView1", first: true, predicate: ["matMonthView1"], descendants: true }, { propertyName: "_matMonthView2", first: true, predicate: ["matMonthView2"], descendants: true }, { propertyName: "_pickerPanelOrigin", first: true, predicate: ["pickerPanelOrigin"], descendants: true, read: ElementRef }, { propertyName: "_pickerPanel", first: true, predicate: ["pickerPanel"], descendants: true }], exportAs: ["cmatDateRange"], ngImport: i0, template: "<div role=\"presentation\" class=\"range\" (click)=\"openPickerPanel()\" #pickerPanelOrigin>\r\n\r\n    <div class=\"start\">\r\n        <div class=\"date\">{{range.startDate}}</div>\r\n        <div class=\"time\" *ngIf=\"range.startTime\">{{range.startTime}}</div>\r\n    </div>\r\n\r\n    <div class=\"separator\">-</div>\r\n\r\n    <div class=\"end\">\r\n        <div class=\"date\">{{range.endDate}}</div>\r\n        <div class=\"time\" *ngIf=\"range.endTime\">{{range.endTime}}</div>\r\n    </div>\r\n\r\n</div>\r\n\r\n<ng-template #pickerPanel>\r\n\r\n    <!-- Start -->\r\n    <div class=\"start\">\r\n\r\n        <div class=\"month\">\r\n            <div class=\"month-header\">\r\n                <button type=\"button\" class=\"previous-button\" mat-icon-button (click)=\"prev()\" tabindex=\"1\">\r\n                    <mat-icon [svgIcon]=\"'heroicons_outline:chevron-left'\"></mat-icon>\r\n                </button>\r\n                <div class=\"month-label\">{{getMonthLabel(1)}}</div>\r\n            </div>\r\n            <mat-month-view [(activeDate)]=\"activeDates.month1\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n                (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\r\n                #matMonthView1>\r\n            </mat-month-view>\r\n        </div>\r\n\r\n        <mat-form-field class=\"time start-time\" *ngIf=\"timeRange\">\r\n            <input matInput [autocomplete]=\"'off'\" [formControl]=\"startTimeFormControl\" (blur)=\"updateStartTime($event)\"\r\n                tabindex=\"3\">\r\n            <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\r\n        </mat-form-field>\r\n\r\n    </div>\r\n\r\n    <!-- End -->\r\n    <div class=\"end\">\r\n\r\n        <div class=\"month\">\r\n            <div class=\"month-header\">\r\n                <div class=\"month-label\">{{getMonthLabel(2)}}</div>\r\n                <button type=\"button\" class=\"next-button\" mat-icon-button (click)=\"next()\" tabindex=\"2\">\r\n                    <mat-icon [svgIcon]=\"'heroicons_outline:chevron-right'\"></mat-icon>\r\n                </button>\r\n            </div>\r\n            <mat-month-view [(activeDate)]=\"activeDates.month2\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n                (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\r\n                #matMonthView2>\r\n            </mat-month-view>\r\n        </div>\r\n\r\n        <mat-form-field class=\"time end-time\" *ngIf=\"timeRange\">\r\n            <input matInput [formControl]=\"endTimeFormControl\" (blur)=\"updateEndTime($event)\" tabindex=\"4\">\r\n            <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\r\n        </mat-form-field>\r\n\r\n    </div>\r\n\r\n</ng-template>", styles: ["cmat-date-range{display:flex}cmat-date-range .range{display:flex;width:100%;align-items:center;height:48px;min-height:48px;max-height:48px;cursor:pointer}cmat-date-range .range .start,cmat-date-range .range .end{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;}@screen sm{cmat-date-range .range .start,cmat-date-range .range .end {max-width: calc((100% - 32px)/2) ; min-width: calc((100% - 32px)/2) ; width: calc((100% - 32px)/2) ;}}cmat-date-range .range .date{white-space:nowrap}cmat-date-range .range .date+.time{margin-left:8px}cmat-date-range .range .time{white-space:nowrap}cmat-date-range .separator{margin:0 8px}@screen sm{cmat-date-range .separator {margin: 0 12px;}}.cmat-date-range-panel{border-radius:4px;padding:24px;@apply shadow-2xl bg-card;}.cmat-date-range-panel .start,.cmat-date-range-panel .end{display:flex;flex-direction:column}.cmat-date-range-panel .start .month,.cmat-date-range-panel .end .month{max-width:196px;min-width:196px;width:196px}.cmat-date-range-panel .start .month .month-header,.cmat-date-range-panel .end .month .month-header{position:relative;display:flex;align-items:center;justify-content:center;height:32px;margin-bottom:16px}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .next-button{position:absolute;width:24px!important;height:24px!important;min-height:24px!important;max-height:24px!important;line-height:24px!important}.cmat-date-range-panel .start .month .month-header .previous-button .mat-icon,.cmat-date-range-panel .start .month .month-header .next-button .mat-icon,.cmat-date-range-panel .end .month .month-header .previous-button .mat-icon,.cmat-date-range-panel .end .month .month-header .next-button .mat-icon{@apply icon-size-5;}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .previous-button{left:0}.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .next-button{right:0}.cmat-date-range-panel .start .month .month-header .month-label,.cmat-date-range-panel .end .month .month-header .month-label{font-weight:500;@apply text-secondary;}.cmat-date-range-panel .start .month mat-month-view,.cmat-date-range-panel .end .month mat-month-view{display:flex;min-height:188px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table{width:100%;border-collapse:collapse}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true]{display:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true]{visibility:hidden;pointer-events:none;opacity:0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr td .cmat-date-range:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr td .cmat-date-range:before{@apply bg-primary-200 !important;}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content{background-color:transparent!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-start .mat-calendar-body-cell-content,.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-end .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-start .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-end .mat-calendar-body-cell-content{@apply bg-primary text-on-primary !important;}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today{border:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell{width:28px!important;height:28px!important;padding:2px!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before{content:\"\";position:absolute;inset:2px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before{border-radius:999px 0 0 999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before{right:2px;border-radius:999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before{border-radius:0 999px 999px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content{position:relative;top:0;left:0;width:24px;height:24px;font-size:12px}.cmat-date-range-panel .time{width:100%;max-width:196px}.cmat-date-range-panel .start{align-items:flex-start;margin-right:20px}.cmat-date-range-panel .start .month .month-label{margin-left:8px}.cmat-date-range-panel .end{align-items:flex-end;margin-left:20px}.cmat-date-range-panel .end .month .month-label{margin-right:8px}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatMonthView, selector: "mat-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName", "activeDrag"], outputs: ["selectedChange", "_userSelection", "dragStarted", "dragEnded", "activeDateChange"], exportAs: ["matMonthView"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "_matMonthView1", first: true, predicate: ["matMonthView1"], descendants: true }, { propertyName: "_matMonthView2", first: true, predicate: ["matMonthView2"], descendants: true }, { propertyName: "_pickerPanelOrigin", first: true, predicate: ["pickerPanelOrigin"], descendants: true, read: ElementRef }, { propertyName: "_pickerPanel", first: true, predicate: ["pickerPanel"], descendants: true }], exportAs: ["cmatDateRange"], ngImport: i0, template: "<div role=\"presentation\" class=\"range\" (click)=\"openPickerPanel()\" #pickerPanelOrigin>\n\n  <div class=\"start\">\n    <div class=\"date\">{{range.startDate}}</div>\n    @if (range.startTime) {\n      <div class=\"time\">{{range.startTime}}</div>\n    }\n  </div>\n\n  <div class=\"separator\">-</div>\n\n  <div class=\"end\">\n    <div class=\"date\">{{range.endDate}}</div>\n    @if (range.endTime) {\n      <div class=\"time\">{{range.endTime}}</div>\n    }\n  </div>\n\n</div>\n\n<ng-template #pickerPanel>\n\n  <!-- Start -->\n  <div class=\"start\">\n\n    <div class=\"month\">\n      <div class=\"month-header\">\n        <button type=\"button\" class=\"previous-button\" mat-icon-button (click)=\"prev()\" tabindex=\"1\">\n          <mat-icon [svgIcon]=\"'heroicons_outline:chevron-left'\"></mat-icon>\n        </button>\n        <div class=\"month-label\">{{getMonthLabel(1)}}</div>\n      </div>\n      <mat-month-view [(activeDate)]=\"activeDates.month1\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\n        (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\n        #matMonthView1>\n      </mat-month-view>\n    </div>\n\n    @if (timeRange) {\n      <mat-form-field class=\"time start-time\">\n        <input matInput [autocomplete]=\"'off'\" [formControl]=\"startTimeFormControl\" (blur)=\"updateStartTime($event)\"\n          tabindex=\"3\">\n          <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\n        </mat-form-field>\n      }\n\n    </div>\n\n    <!-- End -->\n    <div class=\"end\">\n\n      <div class=\"month\">\n        <div class=\"month-header\">\n          <div class=\"month-label\">{{getMonthLabel(2)}}</div>\n          <button type=\"button\" class=\"next-button\" mat-icon-button (click)=\"next()\" tabindex=\"2\">\n            <mat-icon [svgIcon]=\"'heroicons_outline:chevron-right'\"></mat-icon>\n          </button>\n        </div>\n        <mat-month-view [(activeDate)]=\"activeDates.month2\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\n          (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\n          #matMonthView2>\n        </mat-month-view>\n      </div>\n\n      @if (timeRange) {\n        <mat-form-field class=\"time end-time\">\n          <input matInput [formControl]=\"endTimeFormControl\" (blur)=\"updateEndTime($event)\" tabindex=\"4\">\n          <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\n        </mat-form-field>\n      }\n\n    </div>\n\n  </ng-template>", styles: ["cmat-date-range{display:flex}cmat-date-range .range{display:flex;width:100%;align-items:center;height:48px;min-height:48px;max-height:48px;cursor:pointer}cmat-date-range .range .start,cmat-date-range .range .end{display:flex;align-items:center;height:100%;padding:0 16px;border-radius:6px;border-width:1px;line-height:1}cmat-date-range .range .date{white-space:nowrap}cmat-date-range .range .date+.time{margin-left:8px}cmat-date-range .range .time{white-space:nowrap}cmat-date-range .separator{margin:0 8px}.cmat-date-range-panel{border-radius:4px;padding:24px}.cmat-date-range-panel .start,.cmat-date-range-panel .end{display:flex;flex-direction:column}.cmat-date-range-panel .start .month,.cmat-date-range-panel .end .month{max-width:196px;min-width:196px;width:196px}.cmat-date-range-panel .start .month .month-header,.cmat-date-range-panel .end .month .month-header{position:relative;display:flex;align-items:center;justify-content:center;height:32px;margin-bottom:16px}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .next-button{position:absolute;width:24px!important;height:24px!important;min-height:24px!important;max-height:24px!important;line-height:24px!important}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .previous-button{left:0}.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .next-button{right:0}.cmat-date-range-panel .start .month .month-header .month-label,.cmat-date-range-panel .end .month .month-header .month-label{font-weight:500}.cmat-date-range-panel .start .month mat-month-view,.cmat-date-range-panel .end .month mat-month-view{display:flex;min-height:188px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table{width:100%;border-collapse:collapse}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true]{display:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true]{visibility:hidden;pointer-events:none;opacity:0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content{background-color:transparent!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today{border:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell{width:28px!important;height:28px!important;padding:2px!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before{content:\"\";position:absolute;inset:2px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before{border-radius:999px 0 0 999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before{right:2px;border-radius:999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before{border-radius:0 999px 999px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content{position:relative;top:0;left:0;width:24px;height:24px;font-size:12px}.cmat-date-range-panel .time{width:100%;max-width:196px}.cmat-date-range-panel .start{align-items:flex-start;margin-right:20px}.cmat-date-range-panel .start .month .month-label{margin-left:8px}.cmat-date-range-panel .end{align-items:flex-end;margin-left:20px}.cmat-date-range-panel .end .month .month-label{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatMonthView, selector: "mat-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName", "activeDrag"], outputs: ["selectedChange", "_userSelection", "dragStarted", "dragEnded", "activeDateChange"], exportAs: ["matMonthView"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i7.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i7.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-date-range', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDateRange', providers: [
                         {
@@ -514,8 +518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.0", ngImpor
                             useExisting: forwardRef(() => CmatDateRangeComponent),
                             multi: true
                         }
-                    ], standalone: true, imports: [NgIf, MatButtonModule, MatIconModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule], template: "<div role=\"presentation\" class=\"range\" (click)=\"openPickerPanel()\" #pickerPanelOrigin>\r\n\r\n    <div class=\"start\">\r\n        <div class=\"date\">{{range.startDate}}</div>\r\n        <div class=\"time\" *ngIf=\"range.startTime\">{{range.startTime}}</div>\r\n    </div>\r\n\r\n    <div class=\"separator\">-</div>\r\n\r\n    <div class=\"end\">\r\n        <div class=\"date\">{{range.endDate}}</div>\r\n        <div class=\"time\" *ngIf=\"range.endTime\">{{range.endTime}}</div>\r\n    </div>\r\n\r\n</div>\r\n\r\n<ng-template #pickerPanel>\r\n\r\n    <!-- Start -->\r\n    <div class=\"start\">\r\n\r\n        <div class=\"month\">\r\n            <div class=\"month-header\">\r\n                <button type=\"button\" class=\"previous-button\" mat-icon-button (click)=\"prev()\" tabindex=\"1\">\r\n                    <mat-icon [svgIcon]=\"'heroicons_outline:chevron-left'\"></mat-icon>\r\n                </button>\r\n                <div class=\"month-label\">{{getMonthLabel(1)}}</div>\r\n            </div>\r\n            <mat-month-view [(activeDate)]=\"activeDates.month1\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n                (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\r\n                #matMonthView1>\r\n            </mat-month-view>\r\n        </div>\r\n\r\n        <mat-form-field class=\"time start-time\" *ngIf=\"timeRange\">\r\n            <input matInput [autocomplete]=\"'off'\" [formControl]=\"startTimeFormControl\" (blur)=\"updateStartTime($event)\"\r\n                tabindex=\"3\">\r\n            <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\r\n        </mat-form-field>\r\n\r\n    </div>\r\n\r\n    <!-- End -->\r\n    <div class=\"end\">\r\n\r\n        <div class=\"month\">\r\n            <div class=\"month-header\">\r\n                <div class=\"month-label\">{{getMonthLabel(2)}}</div>\r\n                <button type=\"button\" class=\"next-button\" mat-icon-button (click)=\"next()\" tabindex=\"2\">\r\n                    <mat-icon [svgIcon]=\"'heroicons_outline:chevron-right'\"></mat-icon>\r\n                </button>\r\n            </div>\r\n            <mat-month-view [(activeDate)]=\"activeDates.month2\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n                (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\r\n                #matMonthView2>\r\n            </mat-month-view>\r\n        </div>\r\n\r\n        <mat-form-field class=\"time end-time\" *ngIf=\"timeRange\">\r\n            <input matInput [formControl]=\"endTimeFormControl\" (blur)=\"updateEndTime($event)\" tabindex=\"4\">\r\n            <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\r\n        </mat-form-field>\r\n\r\n    </div>\r\n\r\n</ng-template>", styles: ["cmat-date-range{display:flex}cmat-date-range .range{display:flex;width:100%;align-items:center;height:48px;min-height:48px;max-height:48px;cursor:pointer}cmat-date-range .range .start,cmat-date-range .range .end{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;}@screen sm{cmat-date-range .range .start,cmat-date-range .range .end {max-width: calc((100% - 32px)/2) ; min-width: calc((100% - 32px)/2) ; width: calc((100% - 32px)/2) ;}}cmat-date-range .range .date{white-space:nowrap}cmat-date-range .range .date+.time{margin-left:8px}cmat-date-range .range .time{white-space:nowrap}cmat-date-range .separator{margin:0 8px}@screen sm{cmat-date-range .separator {margin: 0 12px;}}.cmat-date-range-panel{border-radius:4px;padding:24px;@apply shadow-2xl bg-card;}.cmat-date-range-panel .start,.cmat-date-range-panel .end{display:flex;flex-direction:column}.cmat-date-range-panel .start .month,.cmat-date-range-panel .end .month{max-width:196px;min-width:196px;width:196px}.cmat-date-range-panel .start .month .month-header,.cmat-date-range-panel .end .month .month-header{position:relative;display:flex;align-items:center;justify-content:center;height:32px;margin-bottom:16px}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .next-button{position:absolute;width:24px!important;height:24px!important;min-height:24px!important;max-height:24px!important;line-height:24px!important}.cmat-date-range-panel .start .month .month-header .previous-button .mat-icon,.cmat-date-range-panel .start .month .month-header .next-button .mat-icon,.cmat-date-range-panel .end .month .month-header .previous-button .mat-icon,.cmat-date-range-panel .end .month .month-header .next-button .mat-icon{@apply icon-size-5;}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .previous-button{left:0}.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .next-button{right:0}.cmat-date-range-panel .start .month .month-header .month-label,.cmat-date-range-panel .end .month .month-header .month-label{font-weight:500;@apply text-secondary;}.cmat-date-range-panel .start .month mat-month-view,.cmat-date-range-panel .end .month mat-month-view{display:flex;min-height:188px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table{width:100%;border-collapse:collapse}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true]{display:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true]{visibility:hidden;pointer-events:none;opacity:0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr td .cmat-date-range:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr td .cmat-date-range:before{@apply bg-primary-200 !important;}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content{background-color:transparent!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-start .mat-calendar-body-cell-content,.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-end .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-start .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr .cmat-date-range-end .mat-calendar-body-cell-content{@apply bg-primary text-on-primary !important;}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today{border:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell{width:28px!important;height:28px!important;padding:2px!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before{content:\"\";position:absolute;inset:2px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before{border-radius:999px 0 0 999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before{right:2px;border-radius:999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before{border-radius:0 999px 999px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content{position:relative;top:0;left:0;width:24px;height:24px;font-size:12px}.cmat-date-range-panel .time{width:100%;max-width:196px}.cmat-date-range-panel .start{align-items:flex-start;margin-right:20px}.cmat-date-range-panel .start .month .month-label{margin-left:8px}.cmat-date-range-panel .end{align-items:flex-end;margin-left:20px}.cmat-date-range-panel .end .month .month-label{margin-right:8px}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { rangeChanged: [{
+                    ], standalone: true, imports: [MatButtonModule, MatIconModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, FormsModule, ReactiveFormsModule], template: "<div role=\"presentation\" class=\"range\" (click)=\"openPickerPanel()\" #pickerPanelOrigin>\n\n  <div class=\"start\">\n    <div class=\"date\">{{range.startDate}}</div>\n    @if (range.startTime) {\n      <div class=\"time\">{{range.startTime}}</div>\n    }\n  </div>\n\n  <div class=\"separator\">-</div>\n\n  <div class=\"end\">\n    <div class=\"date\">{{range.endDate}}</div>\n    @if (range.endTime) {\n      <div class=\"time\">{{range.endTime}}</div>\n    }\n  </div>\n\n</div>\n\n<ng-template #pickerPanel>\n\n  <!-- Start -->\n  <div class=\"start\">\n\n    <div class=\"month\">\n      <div class=\"month-header\">\n        <button type=\"button\" class=\"previous-button\" mat-icon-button (click)=\"prev()\" tabindex=\"1\">\n          <mat-icon [svgIcon]=\"'heroicons_outline:chevron-left'\"></mat-icon>\n        </button>\n        <div class=\"month-label\">{{getMonthLabel(1)}}</div>\n      </div>\n      <mat-month-view [(activeDate)]=\"activeDates.month1\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\n        (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\n        #matMonthView1>\n      </mat-month-view>\n    </div>\n\n    @if (timeRange) {\n      <mat-form-field class=\"time start-time\">\n        <input matInput [autocomplete]=\"'off'\" [formControl]=\"startTimeFormControl\" (blur)=\"updateStartTime($event)\"\n          tabindex=\"3\">\n          <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\n        </mat-form-field>\n      }\n\n    </div>\n\n    <!-- End -->\n    <div class=\"end\">\n\n      <div class=\"month\">\n        <div class=\"month-header\">\n          <div class=\"month-label\">{{getMonthLabel(2)}}</div>\n          <button type=\"button\" class=\"next-button\" mat-icon-button (click)=\"next()\" tabindex=\"2\">\n            <mat-icon [svgIcon]=\"'heroicons_outline:chevron-right'\"></mat-icon>\n          </button>\n        </div>\n        <mat-month-view [(activeDate)]=\"activeDates.month2\" [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\n          (click)=\"$event.stopImmediatePropagation()\" (selectedChange)=\"onSelectedDateChange($event)\"\n          #matMonthView2>\n        </mat-month-view>\n      </div>\n\n      @if (timeRange) {\n        <mat-form-field class=\"time end-time\">\n          <input matInput [formControl]=\"endTimeFormControl\" (blur)=\"updateEndTime($event)\" tabindex=\"4\">\n          <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\n        </mat-form-field>\n      }\n\n    </div>\n\n  </ng-template>", styles: ["cmat-date-range{display:flex}cmat-date-range .range{display:flex;width:100%;align-items:center;height:48px;min-height:48px;max-height:48px;cursor:pointer}cmat-date-range .range .start,cmat-date-range .range .end{display:flex;align-items:center;height:100%;padding:0 16px;border-radius:6px;border-width:1px;line-height:1}cmat-date-range .range .date{white-space:nowrap}cmat-date-range .range .date+.time{margin-left:8px}cmat-date-range .range .time{white-space:nowrap}cmat-date-range .separator{margin:0 8px}.cmat-date-range-panel{border-radius:4px;padding:24px}.cmat-date-range-panel .start,.cmat-date-range-panel .end{display:flex;flex-direction:column}.cmat-date-range-panel .start .month,.cmat-date-range-panel .end .month{max-width:196px;min-width:196px;width:196px}.cmat-date-range-panel .start .month .month-header,.cmat-date-range-panel .end .month .month-header{position:relative;display:flex;align-items:center;justify-content:center;height:32px;margin-bottom:16px}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .next-button{position:absolute;width:24px!important;height:24px!important;min-height:24px!important;max-height:24px!important;line-height:24px!important}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .previous-button{left:0}.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .next-button{right:0}.cmat-date-range-panel .start .month .month-header .month-label,.cmat-date-range-panel .end .month .month-header .month-label{font-weight:500}.cmat-date-range-panel .start .month mat-month-view,.cmat-date-range-panel .end .month mat-month-view{display:flex;min-height:188px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table{width:100%;border-collapse:collapse}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true]{display:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true]{visibility:hidden;pointer-events:none;opacity:0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content{background-color:transparent!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today{border:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell{width:28px!important;height:28px!important;padding:2px!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before{content:\"\";position:absolute;inset:2px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before{border-radius:999px 0 0 999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before{right:2px;border-radius:999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before{border-radius:0 999px 999px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content{position:relative;top:0;left:0;width:24px;height:24px;font-size:12px}.cmat-date-range-panel .time{width:100%;max-width:196px}.cmat-date-range-panel .start{align-items:flex-start;margin-right:20px}.cmat-date-range-panel .start .month .month-label{margin-left:8px}.cmat-date-range-panel .end{align-items:flex-end;margin-left:20px}.cmat-date-range-panel .end .month .month-label{margin-right:8px}\n"] }]
+        }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ViewContainerRef }, { type: i0.ChangeDetectorRef }], propDecorators: { rangeChanged: [{
                 type: Output
             }], _matMonthView1: [{
                 type: ViewChild,