cmat 0.0.10 → 0.0.12

package/esm2022/components/date-range/date-range.component.mjs

@@ -507,8 +507,8 @@ export 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.3.7", 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.3.7", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { readonly: "readonly", dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", 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.3.9", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { readonly: "readonly", dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => CmatDateRangeComponent),
@@ -516,7 +516,7 @@ export class CmatDateRangeComponent {
             }
         ], 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.3.7", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-date-range', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDateRange', providers: [
                         {

package/esm2022/components/drawer/drawer.component.mjs

@@ -259,10 +259,10 @@ export class CmatDrawerComponent {
         // Execute the observable
         this.openedChanged.next(open);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDrawerComponent, deps: [{ token: i1.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.CmatDrawerService }, { token: i3.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatDrawerComponent, isStandalone: true, selector: "cmat-drawer", inputs: { fixed: "fixed", mode: "mode", name: "name", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { fixedChanged: "fixedChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, exportAs: ["cmatDrawer"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-drawer-content\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["cmat-drawer{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:320px;min-width:320px;max-width:320px;z-index:300;box-shadow:0 2px 8px #00000059}cmat-drawer.cmat-drawer-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-drawer.cmat-drawer-animations-enabled .cmat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-drawer.cmat-drawer-mode-over{position:absolute;top:0;bottom:0}cmat-drawer.cmat-drawer-mode-over.cmat-drawer-fixed{position:fixed}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side{margin-left:-320px}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side.cmat-drawer-opened{margin-left:0}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-left .cmat-drawer-content{left:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side{margin-right:-320px}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side.cmat-drawer-opened{margin-right:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-right .cmat-drawer-content{right:0}cmat-drawer .cmat-drawer-content{position:absolute;display:flex;flex:1 1 auto;top:0;bottom:0;width:100%;height:100%;overflow:hidden}.cmat-drawer-overlay{position:absolute;inset:0;z-index:299;opacity:1;background-color:#0009}.cmat-drawer-overlay.cmat-drawer-overlay-fixed{position:fixed}.cmat-drawer-overlay.cmat-drawer-overlay-transparent{background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDrawerComponent, deps: [{ token: i1.AnimationBuilder }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.CmatDrawerService }, { token: i3.CmatUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatDrawerComponent, isStandalone: true, selector: "cmat-drawer", inputs: { fixed: "fixed", mode: "mode", name: "name", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { fixedChanged: "fixedChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, exportAs: ["cmatDrawer"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-drawer-content\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["cmat-drawer{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:320px;min-width:320px;max-width:320px;z-index:300;box-shadow:0 2px 8px #00000059}cmat-drawer.cmat-drawer-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-drawer.cmat-drawer-animations-enabled .cmat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-drawer.cmat-drawer-mode-over{position:absolute;top:0;bottom:0}cmat-drawer.cmat-drawer-mode-over.cmat-drawer-fixed{position:fixed}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side{margin-left:-320px}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side.cmat-drawer-opened{margin-left:0}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-left .cmat-drawer-content{left:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side{margin-right:-320px}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side.cmat-drawer-opened{margin-right:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-right .cmat-drawer-content{right:0}cmat-drawer .cmat-drawer-content{position:absolute;display:flex;flex:1 1 auto;top:0;bottom:0;width:100%;height:100%;overflow:hidden}.cmat-drawer-overlay{position:absolute;inset:0;z-index:299;opacity:1;background-color:#0009}.cmat-drawer-overlay.cmat-drawer-overlay-fixed{position:fixed}.cmat-drawer-overlay.cmat-drawer-overlay-transparent{background-color:transparent}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDrawerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDrawerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-drawer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDrawer', standalone: true, template: "<div class=\"cmat-drawer-content\">\r\n    <ng-content></ng-content>\r\n</div>", styles: ["cmat-drawer{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:320px;min-width:320px;max-width:320px;z-index:300;box-shadow:0 2px 8px #00000059}cmat-drawer.cmat-drawer-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-drawer.cmat-drawer-animations-enabled .cmat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-drawer.cmat-drawer-mode-over{position:absolute;top:0;bottom:0}cmat-drawer.cmat-drawer-mode-over.cmat-drawer-fixed{position:fixed}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side{margin-left:-320px}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side.cmat-drawer-opened{margin-left:0}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-left .cmat-drawer-content{left:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side{margin-right:-320px}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side.cmat-drawer-opened{margin-right:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-right .cmat-drawer-content{right:0}cmat-drawer .cmat-drawer-content{position:absolute;display:flex;flex:1 1 auto;top:0;bottom:0;width:100%;height:100%;overflow:hidden}.cmat-drawer-overlay{position:absolute;inset:0;z-index:299;opacity:1;background-color:#0009}.cmat-drawer-overlay.cmat-drawer-overlay-fixed{position:fixed}.cmat-drawer-overlay.cmat-drawer-overlay-transparent{background-color:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i1.AnimationBuilder }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i2.CmatDrawerService }, { type: i3.CmatUtilsService }], propDecorators: { fixed: [{

package/esm2022/components/drawer/drawer.service.mjs

@@ -29,10 +29,10 @@ export class CmatDrawerService {
     getComponent(name) {
         return this._componentRegistry.get(name);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDrawerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDrawerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/components/fullscreen/fullscreen.component.mjs

@@ -27,10 +27,10 @@ export class CmatFullscreenComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatFullscreenComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatFullscreenComponent, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-fullscreen', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatFullscreen', standalone: true, imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Button -->\r\n<button type=\"button\" mat-icon-button [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n    <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n    <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>" }]
         }], ctorParameters: () => [{ type: Document, decorators: [{

package/esm2022/components/highlight/highlight.component.mjs

@@ -63,10 +63,10 @@ export class CmatHighlightComponent {
         // Detect the changes
         this._viewRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatHighlightComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i2.CmatHighlightService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: "code", lang: "lang" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatHighlight"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatHighlightComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i2.CmatHighlightService }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: "code", lang: "lang" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatHighlight"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatHighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatHighlightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', standalone: true, imports: [NgClass], template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n    <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n        <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n        </pre>\r\n    </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: i2.CmatHighlightService }, { type: i0.ViewContainerRef }], propDecorators: { code: [{

package/esm2022/components/highlight/highlight.service.mjs

@@ -35,10 +35,10 @@ export class CmatHighlightService {
         // indentation, join them together and return it
         return lines.map(line => line.substring(indentation)).join('\n');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatHighlightService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatHighlightService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'

package/esm2022/components/json-editor/json-editor.component.mjs

@@ -155,10 +155,10 @@ export class CmatJsonEditorComponent {
             this.pathChanged.emit(st);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatJsonEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div class="cmat-jsoneditor" [id]="id" #jsonEditorContainer></div>', isInline: true, styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatJsonEditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: "options", data: "data" }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: '<div class="cmat-jsoneditor" [id]="id" #jsonEditorContainer></div>', isInline: true, styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-json-editor', template: '<div class="cmat-jsoneditor" [id]="id" #jsonEditorContainer></div>', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [], styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { jsonEditorContainer: [{

package/esm2022/components/masonry/masonry.component.mjs

@@ -36,10 +36,10 @@ export class CmatMasonryComponent {
             this.distributedColumns[i % this.columns].items.push(this.items[i]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.7", type: CmatMasonryComponent, isStandalone: true, selector: "cmat-masonry", inputs: { columnsTemplate: "columnsTemplate", columns: "columns", items: "items" }, exportAs: ["cmatMasonry"], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.9", type: CmatMasonryComponent, isStandalone: true, selector: "cmat-masonry", inputs: { columnsTemplate: "columnsTemplate", columns: "columns", items: "items" }, exportAs: ["cmatMasonry"], usesOnChanges: true, ngImport: i0, template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatMasonryComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatMasonryComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-masonry', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, animations: cmatAnimations, exportAs: 'cmatMasonry', standalone: true, imports: [NgTemplateOutlet], template: "<div class=\"flex p-2\">\r\n    <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>" }]
         }], propDecorators: { columnsTemplate: [{

package/esm2022/components/material-color-picker/material-color-picker.component.mjs

@@ -130,10 +130,10 @@ export class CmatMaterialColorPickerComponent {
     trackByFn(index, item) {
         return index || item;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatMaterialColorPickerComponent, isStandalone: true, selector: "cmat-material-color-picker", inputs: { color: "color", title: "title", readonly: "readonly" }, outputs: { colorChanged: "colorChanged" }, providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], exportAs: ["cmatMaterialColorPicker"], ngImport: i0, template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\n  <mat-select value=\"init\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\" [disabled]=\"readonly\"\n    (openedChange)=\"onMenuOpen($event)\" panelClass=\"min-w-64\">\n    <mat-select-trigger class=\"flex p-1\">\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\n    </mat-select-trigger>\n\n    <header [ngClass]=\"'accent'\" class=\"shadow flex flex-row content-between justify-between p-2\">\n      <button type=\"button\" mat-icon-button class=\"secondary-text\" [class.invisible]=\"view === 'palettes'\"\n        (click)=\"goToPalettesView()\" aria-label=\"\u8C03\u8272\u677F\">\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\n      </button>\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\n      <button type=\"button\" mat-icon-button class=\"remove-color-button secondary-text\" (click)=\"removeColor()\"\n        aria-label=\"\u79FB\u9664\u989C\u8272\" matTooltip=\"\u79FB\u9664\u989C\u8272\">\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\n      </button>\n    </header>\n\n    <div class=\"flex flex-wrap w-60 m-2\">\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\n      <div>\n        @switch (view) {\n          @case ('palettes') {\n            <div>\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\n                @for (palette of palettes; track trackByFn($index, palette)) {\n                  <div role=\"presentation\"\n                    class=\"cursor-pointer\" (click)=\"selectPalette(palette)\">\n                    <mat-option\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\n                      [value]=\"selectedPalette\">\n                      @if (selectedColor.color===palette + '-' + selectedHue) {\n                        <mat-icon class=\"absolute m-3 text-white\"\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\n                      }\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\n                      [ngClass]=\"palette + '-' + selectedHue\"></span>\n                    </mat-option>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @case ('hues') {\n            <div>\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\n                @for (hue of hues; track trackByFn($index, hue)) {\n                  <div role=\"presentation\" class=\"cursor-pointer\"\n                    (click)=\"selectHue(hue)\">\n                    <mat-option\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\n                      [value]=\"selectedHue\">\n                      @if (selectedColor.color===selectedPalette + '-' + hue) {\n                        <mat-icon class=\"absolute m-3 text-white\"\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\n                      }\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\n                      [ngClass]=\"selectedPalette + '-' + hue\"></span>\n                    </mat-option>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </mat-select>\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatMaterialColorPickerComponent, isStandalone: true, selector: "cmat-material-color-picker", inputs: { color: "color", title: "title", readonly: "readonly" }, outputs: { colorChanged: "colorChanged" }, providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], exportAs: ["cmatMaterialColorPicker"], ngImport: i0, template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\n  <mat-select value=\"init\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\" [disabled]=\"readonly\"\n    (openedChange)=\"onMenuOpen($event)\" panelClass=\"min-w-64\">\n    <mat-select-trigger class=\"flex p-1\">\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\n    </mat-select-trigger>\n\n    <header [ngClass]=\"'accent'\" class=\"shadow flex flex-row content-between justify-between p-2\">\n      <button type=\"button\" mat-icon-button class=\"secondary-text\" [class.invisible]=\"view === 'palettes'\"\n        (click)=\"goToPalettesView()\" aria-label=\"\u8C03\u8272\u677F\">\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\n      </button>\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\n      <button type=\"button\" mat-icon-button class=\"remove-color-button secondary-text\" (click)=\"removeColor()\"\n        aria-label=\"\u79FB\u9664\u989C\u8272\" matTooltip=\"\u79FB\u9664\u989C\u8272\">\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\n      </button>\n    </header>\n\n    <div class=\"flex flex-wrap w-60 m-2\">\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\n      <div>\n        @switch (view) {\n          @case ('palettes') {\n            <div>\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\n                @for (palette of palettes; track trackByFn($index, palette)) {\n                  <div role=\"presentation\"\n                    class=\"cursor-pointer\" (click)=\"selectPalette(palette)\">\n                    <mat-option\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\n                      [value]=\"selectedPalette\">\n                      @if (selectedColor.color===palette + '-' + selectedHue) {\n                        <mat-icon class=\"absolute m-3 text-white\"\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\n                      }\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\n                      [ngClass]=\"palette + '-' + selectedHue\"></span>\n                    </mat-option>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @case ('hues') {\n            <div>\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\n                @for (hue of hues; track trackByFn($index, hue)) {\n                  <div role=\"presentation\" class=\"cursor-pointer\"\n                    (click)=\"selectHue(hue)\">\n                    <mat-option\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\n                      [value]=\"selectedHue\">\n                      @if (selectedColor.color===selectedPalette + '-' + hue) {\n                        <mat-icon class=\"absolute m-3 text-white\"\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\n                      }\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\n                      [ngClass]=\"selectedPalette + '-' + hue\"></span>\n                    </mat-option>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </mat-select>\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], animations: cmatAnimations, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-material-color-picker', animations: cmatAnimations, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatMaterialColorPicker', providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], standalone: true, imports: [NgClass, MatSelectModule, MatIconModule, MatButtonModule, MatTooltipModule], template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\n  <mat-select value=\"init\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\" [disabled]=\"readonly\"\n    (openedChange)=\"onMenuOpen($event)\" panelClass=\"min-w-64\">\n    <mat-select-trigger class=\"flex p-1\">\n      <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\n    </mat-select-trigger>\n\n    <header [ngClass]=\"'accent'\" class=\"shadow flex flex-row content-between justify-between p-2\">\n      <button type=\"button\" mat-icon-button class=\"secondary-text\" [class.invisible]=\"view === 'palettes'\"\n        (click)=\"goToPalettesView()\" aria-label=\"\u8C03\u8272\u677F\">\n        <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\n      </button>\n      <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\n      <button type=\"button\" mat-icon-button class=\"remove-color-button secondary-text\" (click)=\"removeColor()\"\n        aria-label=\"\u79FB\u9664\u989C\u8272\" matTooltip=\"\u79FB\u9664\u989C\u8272\">\n        <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\n      </button>\n    </header>\n\n    <div class=\"flex flex-wrap w-60 m-2\">\n      <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\n      <div>\n        @switch (view) {\n          @case ('palettes') {\n            <div>\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\n                @for (palette of palettes; track trackByFn($index, palette)) {\n                  <div role=\"presentation\"\n                    class=\"cursor-pointer\" (click)=\"selectPalette(palette)\">\n                    <mat-option\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\n                      [value]=\"selectedPalette\">\n                      @if (selectedColor.color===palette + '-' + selectedHue) {\n                        <mat-icon class=\"absolute m-3 text-white\"\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\n                      }\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\n                      [ngClass]=\"palette + '-' + selectedHue\"></span>\n                    </mat-option>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n          @case ('hues') {\n            <div>\n              <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\n                @for (hue of hues; track trackByFn($index, hue)) {\n                  <div role=\"presentation\" class=\"cursor-pointer\"\n                    (click)=\"selectHue(hue)\">\n                    <mat-option\n                      class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent hover:opacity-50\"\n                      [value]=\"selectedHue\">\n                      @if (selectedColor.color===selectedPalette + '-' + hue) {\n                        <mat-icon class=\"absolute m-3 text-white\"\n                        [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\n                      }\n                      <span class=\"flex w-10 h-10 m-1 rounded-full\"\n                      [ngClass]=\"selectedPalette + '-' + hue\"></span>\n                    </mat-option>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        }\n      </div>\n    </div>\n  </mat-select>\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { colorChanged: [{

package/esm2022/components/material-datetimepicker/calendar-body.mjs

@@ -48,10 +48,10 @@ export class CmatDatetimepickerCalendarBodyComponent {
     trackByFn(index, item) {
         return item.value || index;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatDatetimepickerCalendarBodyComponent, isStandalone: true, selector: "[cmat-datetimepicker-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { properties: { "class": "this.class" } }, exportAs: ["cmatDatetimepickerCalendarBody"], ngImport: i0, template: "<!--\nIf there's not enough space in the first row, create a separate label row. We mark this row as\naria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td [attr.colspan]=\"numCols\" class=\"cmat-datetimepicker-calendar-body-label\">{{ label }}</td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track row; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\"\n        class=\"cmat-datetimepicker-calendar-body-label\">\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    @for (item of row; track trackByFn(colIndex, item); let colIndex = $index) {\n      <td role=\"presentation\" (click)=\"cellClicked(item)\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\"\n        class=\"cmat-datetimepicker-calendar-body-cell\" role=\"button\">\n        <div [attr.aria-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\"\n          class=\"cmat-datetimepicker-calendar-body-cell-content\">\n          {{ item.displayValue }}\n        </div>\n      </td>\n    }\n  </tr>\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatDatetimepickerCalendarBodyComponent, isStandalone: true, selector: "[cmat-datetimepicker-calendar-body]", inputs: { label: "label", rows: "rows", todayValue: "todayValue", selectedValue: "selectedValue", labelMinRequiredCells: "labelMinRequiredCells", numCols: "numCols", allowDisabledSelection: "allowDisabledSelection", activeCell: "activeCell" }, outputs: { selectedValueChange: "selectedValueChange" }, host: { properties: { "class": "this.class" } }, exportAs: ["cmatDatetimepickerCalendarBody"], ngImport: i0, template: "<!--\nIf there's not enough space in the first row, create a separate label row. We mark this row as\naria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td [attr.colspan]=\"numCols\" class=\"cmat-datetimepicker-calendar-body-label\">{{ label }}</td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track row; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\"\n        class=\"cmat-datetimepicker-calendar-body-label\">\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    @for (item of row; track trackByFn(colIndex, item); let colIndex = $index) {\n      <td role=\"presentation\" (click)=\"cellClicked(item)\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\"\n        class=\"cmat-datetimepicker-calendar-body-cell\" role=\"button\">\n        <div [attr.aria-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\"\n          class=\"cmat-datetimepicker-calendar-body-cell-content\">\n          {{ item.displayValue }}\n        </div>\n      </td>\n    }\n  </tr>\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerCalendarBodyComponent, decorators: [{
             type: Component,
             args: [{ selector: '[cmat-datetimepicker-calendar-body]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerCalendarBody', standalone: true, imports: [], template: "<!--\nIf there's not enough space in the first row, create a separate label row. We mark this row as\naria-hidden because we don't want it to be read out as one of the weeks in the month.\n-->\n@if (_firstRowOffset < labelMinRequiredCells) {\n  <tr aria-hidden=\"true\">\n    <td [attr.colspan]=\"numCols\" class=\"cmat-datetimepicker-calendar-body-label\">{{ label }}</td>\n  </tr>\n}\n\n<!-- Create the first row separately so we can include a special spacer cell. -->\n@for (row of rows; track row; let rowIndex = $index) {\n  <tr role=\"row\">\n    <!--\n    We mark this cell as aria-hidden so it doesn't get read out as one of the days in the week.\n    -->\n    @if (rowIndex === 0 && _firstRowOffset) {\n      <td [attr.colspan]=\"_firstRowOffset\" aria-hidden=\"true\"\n        class=\"cmat-datetimepicker-calendar-body-label\">\n        {{ _firstRowOffset >= labelMinRequiredCells ? label : '' }}\n      </td>\n    }\n    @for (item of row; track trackByFn(colIndex, item); let colIndex = $index) {\n      <td role=\"presentation\" (click)=\"cellClicked(item)\"\n        [attr.aria-disabled]=\"!item.enabled || null\"\n        [attr.aria-label]=\"item.ariaLabel\"\n        [class.cmat-datetimepicker-calendar-body-active]=\"isActiveCell(rowIndex, colIndex)\"\n        [class.cmat-datetimepicker-calendar-body-disabled]=\"!item.enabled\"\n        class=\"cmat-datetimepicker-calendar-body-cell\" role=\"button\">\n        <div [attr.aria-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-selected]=\"selectedValue === item.value\"\n          [class.cmat-datetimepicker-calendar-body-today]=\"todayValue === item.value\"\n          class=\"cmat-datetimepicker-calendar-body-cell-content\">\n          {{ item.displayValue }}\n        </div>\n      </td>\n    }\n  </tr>\n}", styles: [".cmat-datetimepicker-calendar-body{min-width:224px}.cmat-datetimepicker-calendar-body-label{height:0;line-height:0;text-align:left;padding:7.1428571429% 4.7142857143%}[dir=rtl] .cmat-datetimepicker-calendar-body-label{text-align:right}.cmat-datetimepicker-calendar-body-cell{position:relative;width:14.2857142857%;height:0;line-height:0;padding:7.1428571429% 0;text-align:center;outline:none;cursor:pointer}.cmat-datetimepicker-calendar-body-disabled{cursor:default;pointer-events:none}.cmat-datetimepicker-calendar-body-cell-content{position:absolute;top:5%;left:5%;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:90%;height:90%;border:1px solid transparent;border-radius:999px}\n"] }]
         }], propDecorators: { label: [{

package/esm2022/components/material-datetimepicker/calendar.mjs

@@ -610,10 +610,10 @@ export class CmatDatetimepickerCalendarComponent {
     _2digit(n) {
         return ('00' + n).slice(-2);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i1.CmatDatetimepickerIntl }, { token: i0.NgZone }, { token: i2.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatDatetimepickerCalendarComponent, isStandalone: true, selector: "cmat-datetimepicker-calendar", inputs: { multiYearSelector: "multiYearSelector", startView: "startView", twelvehour: "twelvehour", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", timeInput: "timeInput", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", viewChanged: "viewChanged" }, host: { listeners: { "keydown": "handleCalendarBodyKeydown($event)" }, properties: { "class.cmat-datetimepicker-calendar-with-time-input": "timeInput", "class": "this.class", "attr.aria-label": "this.label", "role": "this.role", "tabindex": "this.tabindex" } }, exportAs: ["cmatDatetimepickerCalendar"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-calendar-header\">\n  @if (type !== 'time') {\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\n    (click)=\"yearClicked()\">\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\n    @if (multiYearSelector || type === 'year') {\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n      fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n    }\n  </div>\n  }\n  @if (type !== 'year') {\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\n    @if (type !== 'time') {\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\n    }\n    @if (type.endsWith('time')) {\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\n          {{ hoursButtonText }}</div>\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\n          minutesButtonText }}</div>\n      </span>\n      @if (twelvehour) {\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'AM'\" aria-label=\"AM\" (click)=\"ampmClicked('AM')\">AM</div>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'PM'\" aria-label=\"PM\" (click)=\"ampmClicked('PM')\">PM</div>\n      </span>\n      }\n    </span>\n    }\n  </div>\n  }\n</div>\n\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n  <div class=\"cmat-datetimepickermonth-content\">\n    <div class=\"cmat-datetimepicker-calendar-controls\">\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium\" [@slideCalendar]=\"calendarState\"\n        (@slideCalendar.done)=\"calendarStateDone()\">\n        <strong>{{ yearPeriodText }}</strong>\n      </div>\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-next-button\"\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  }\n\n  @switch (currentView) {\n  @case ('month') {\n  <cmat-datetimepicker-month-view (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-month-view>\n  }\n  @case ('year') {\n  <cmat-datetimepicker-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-year-view>\n  }\n  @case ('multi-year') {\n  <cmat-datetimepicker-multi-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"yearSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\n    [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-multi-year-view>\n  }\n  @default {\n  @if (timeInput) {\n  <cmat-datetimepicker-time (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"timeSelected($event)\" [AMPM]=\"AMPM\" (ampmChange)=\"ampmClicked($event)\" [clockView]=\"clockView\"\n    (clockViewChange)=\"clockView = $event\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\"\n    [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\">\n  </cmat-datetimepicker-time>\n  } @else {\n  <cmat-datetimepicker-clock (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"dialTimeSelected($event)\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\" [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\n  </cmat-datetimepicker-clock>\n  }\n  }\n  }\n</div>", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!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;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .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}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.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.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{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:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: CmatDatetimepickerMonthViewComponent, selector: "cmat-datetimepicker-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMonthView"] }, { kind: "component", type: CmatDatetimepickerYearViewComponent, selector: "cmat-datetimepicker-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerYearView"] }, { kind: "component", type: CmatDatetimepickerMultiYearViewComponent, selector: "cmat-datetimepicker-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMultiYearView"] }, { kind: "component", type: CmatDatetimepickerTimeComponent, selector: "cmat-datetimepicker-time", inputs: ["dateFilter", "interval", "AMPM", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "userSelection", "ampmChange", "clockViewChange"], exportAs: ["cmatDatetimepickerTime"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerCalendarComponent, deps: [{ token: i0.ElementRef }, { token: i1.CmatDatetimepickerIntl }, { token: i0.NgZone }, { token: i2.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatDatetimepickerCalendarComponent, isStandalone: true, selector: "cmat-datetimepicker-calendar", inputs: { multiYearSelector: "multiYearSelector", startView: "startView", twelvehour: "twelvehour", timeInterval: "timeInterval", dateFilter: "dateFilter", preventSameDateTimeSelection: "preventSameDateTimeSelection", type: "type", startAt: "startAt", timeInput: "timeInput", selected: "selected", minDate: "minDate", maxDate: "maxDate" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", viewChanged: "viewChanged" }, host: { listeners: { "keydown": "handleCalendarBodyKeydown($event)" }, properties: { "class.cmat-datetimepicker-calendar-with-time-input": "timeInput", "class": "this.class", "attr.aria-label": "this.label", "role": "this.role", "tabindex": "this.tabindex" } }, exportAs: ["cmatDatetimepickerCalendar"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-calendar-header\">\n  @if (type !== 'time') {\n  <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-year header-button\"\n    [class.active]=\"currentView === 'year' || currentView === 'multi-year'\" [attr.aria-label]=\"yearButtonLabel\"\n    (click)=\"yearClicked()\">\n    <span class=\"font-medium\">{{ yearButtonText }}</span>\n    @if (multiYearSelector || type === 'year') {\n    <svg class=\"cmat-datetimepicker-calendar-header-year-dropdown\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\n      fill=\"currentColor\">\n      <path d=\"M7,10L12,15L17,10H7Z\"></path>\n    </svg>\n    }\n  </div>\n  }\n  @if (type !== 'year') {\n  <div class=\"cmat-datetimepicker-calendar-header-date-time\">\n    @if (type !== 'time') {\n    <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-date header-button\"\n      [class.active]=\"currentView === 'month'\" [class.not-clickable]=\"type === 'month'\"\n      [attr.aria-label]=\"dateButtonLabel\" (click)=\"dateClicked()\">{{ dateButtonText }}</div>\n    }\n    @if (type.endsWith('time')) {\n    <span class=\"cmat-datetimepicker-calendar-header-time\" [class.active]=\"currentView === 'clock'\">\n      <span class=\"cmat-datetimepicker-calendar-header-hour-minute-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-hours header-button\"\n          [class.active]=\"clockView === 'hour'\" [attr.aria-label]=\"hourButtonLabel\" (click)=\"hoursClicked()\">\n          {{ hoursButtonText }}</div>\n        <span class=\"cmat-datetimepicker-calendar-header-hour-minute-separator\">&#58;</span>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-minutes header-button\"\n          [class.active]=\"clockView === 'minute'\" [attr.aria-label]=\"minuteButtonLabel\" (click)=\"minutesClicked()\">{{\n          minutesButtonText }}</div>\n      </span>\n      @if (twelvehour) {\n      <span class=\"cmat-datetimepicker-calendar-header-ampm-container flex place-items-center\">\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'AM'\" aria-label=\"AM\" (click)=\"ampmClicked('AM')\">AM</div>\n        <div role=\"presentation\" class=\"cmat-datetimepicker-calendar-header-ampm header-button\"\n          [class.active]=\"AMPM === 'PM'\" aria-label=\"PM\" (click)=\"ampmClicked('PM')\">PM</div>\n      </span>\n      }\n    </span>\n    }\n  </div>\n  }\n</div>\n\n<div class=\"cmat-datetimepicker-calendar-content\" [ngClass]=\"{'flex flex-col justify-center': currentView==='clock'}\">\n  @if (currentView === 'month' || currentView === 'year' || currentView === 'multi-year') {\n  <div class=\"cmat-datetimepickermonth-content\">\n    <div class=\"cmat-datetimepicker-calendar-controls\">\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-previous-button\"\n        [class.disabled]=\"!previousEnabled()\" [attr.aria-disabled]=\"!previousEnabled()\"\n        [attr.aria-label]=\"prevButtonLabel\" (click)=\"previousClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z\"></path>\n        </svg>\n      </button>\n      <div class=\"cmat-datetimepicker-calendar-period-button text-default font-medium\" [@slideCalendar]=\"calendarState\"\n        (@slideCalendar.done)=\"calendarStateDone()\">\n        <strong>{{ yearPeriodText }}</strong>\n      </div>\n      <button type=\"button\" mat-icon-button type=\"button\" class=\"cmat-datetimepicker-calendar-next-button\"\n        [class.disabled]=\"!nextEnabled()\" [attr.aria-disabled]=\"!nextEnabled()\" [attr.aria-label]=\"nextButtonLabel\"\n        (click)=\"nextClicked()\">\n        <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n          <path d=\"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z\"></path>\n        </svg>\n      </button>\n    </div>\n  </div>\n  }\n\n  @switch (currentView) {\n  @case ('month') {\n  <cmat-datetimepicker-month-view (userSelection)=\"userSelected()\" (selectedChange)=\"dateSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-month-view>\n  }\n  @case ('year') {\n  <cmat-datetimepicker-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"monthSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-year-view>\n  }\n  @case ('multi-year') {\n  <cmat-datetimepicker-multi-year-view (userSelection)=\"userSelected()\" (selectedChange)=\"yearSelected($event)\"\n    [activeDate]=\"activeDate\" [dateFilter]=\"dateFilterForViews\" [maxDate]=\"maxDate\" [minDate]=\"minDate\"\n    [selected]=\"selected!\" [type]=\"type\">\n  </cmat-datetimepicker-multi-year-view>\n  }\n  @default {\n  @if (timeInput) {\n  <cmat-datetimepicker-time (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"timeSelected($event)\" [AMPM]=\"AMPM\" (ampmChange)=\"ampmClicked($event)\" [clockView]=\"clockView\"\n    (clockViewChange)=\"clockView = $event\" [twelvehour]=\"twelvehour\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\"\n    [maxDate]=\"maxDate\" [minDate]=\"minDate\" [selected]=\"activeDate\">\n  </cmat-datetimepicker-time>\n  } @else {\n  <cmat-datetimepicker-clock (userSelection)=\"userSelected()\" (activeDateChange)=\"onActiveDateChange($event)\"\n    (selectedChange)=\"dialTimeSelected($event)\" [dateFilter]=\"dateFilter\" [interval]=\"timeInterval\" [maxDate]=\"maxDate\"\n    [minDate]=\"minDate\" [selected]=\"activeDate\" [startView]=\"clockView\" [twelvehour]=\"twelvehour\">\n  </cmat-datetimepicker-clock>\n  }\n  }\n  }\n</div>", styles: [".cmat-datetimepicker-calendar{display:block;outline:none}.cmat-datetimepicker-calendar-header{box-sizing:border-box;padding:8px;border-radius:4px 4px 0 0;min-width:264px}.cmat-datetimepicker-calendar-header .header-button{color:#fff!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;display:flex}.cmat-datetimepicker-calendar-header-date-time{font-size:24px;line-height:36px;display:flex;flex-direction:row}.cmat-datetimepicker-calendar-header-year:not(.active),.cmat-datetimepicker-calendar-header-date:not(.active),.cmat-datetimepicker-calendar-header-hours:not(.active),.cmat-datetimepicker-calendar-header-minutes:not(.active),.cmat-datetimepicker-calendar-header-ampm:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-year.not-clickable,.cmat-datetimepicker-calendar-header-date.not-clickable,.cmat-datetimepicker-calendar-header-hours.not-clickable,.cmat-datetimepicker-calendar-header-minutes.not-clickable,.cmat-datetimepicker-calendar-header-ampm.not-clickable{cursor:initial}.cmat-datetimepicker-calendar-header-time{display:inline-flex}.cmat-datetimepicker-calendar-header-time:not(.active){opacity:.6}.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-hours,.cmat-datetimepicker-calendar-header-time:not(.active) .cmat-datetimepicker-calendar-header-minutes,.cmat-datetimepicker-calendar-header-time:not(.active) .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}.cmat-datetimepicker-calendar-content{width:100%;padding:8px;outline:none;box-sizing:border-box;overflow:hidden}.cmat-datetimepicker-calendar-controls{display:flex;justify-content:space-between;margin:0 calc(4.7142857143% - 16px)}.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.disabled,.cmat-datetimepicker-calendar-next-button.disabled{pointer-events:none}.cmat-datetimepicker-calendar-previous-button svg,.cmat-datetimepicker-calendar-next-button svg{fill:currentColor;vertical-align:top}[dir=rtl] .cmat-datetimepicker-calendar-previous-button svg,[dir=rtl] .cmat-datetimepicker-calendar-next-button svg{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:8px 0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: CmatDatetimepickerMonthViewComponent, selector: "cmat-datetimepicker-month-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMonthView"] }, { kind: "component", type: CmatDatetimepickerYearViewComponent, selector: "cmat-datetimepicker-year-view", inputs: ["type", "dateFilter", "activeDate", "selected"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerYearView"] }, { kind: "component", type: CmatDatetimepickerMultiYearViewComponent, selector: "cmat-datetimepicker-multi-year-view", inputs: ["type", "dateFilter", "activeDate", "selected", "minDate", "maxDate"], outputs: ["userSelection", "selectedChange"], exportAs: ["cmatDatetimepickerMultiYearView"] }, { kind: "component", type: CmatDatetimepickerTimeComponent, selector: "cmat-datetimepicker-time", inputs: ["dateFilter", "interval", "AMPM", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "clockView"], outputs: ["selectedChange", "activeDateChange", "userSelection", "ampmChange", "clockViewChange"], exportAs: ["cmatDatetimepickerTime"] }, { kind: "component", type: CmatDatetimepickerClockComponent, selector: "cmat-datetimepicker-clock", inputs: ["dateFilter", "interval", "twelvehour", "activeDate", "selected", "minDate", "maxDate", "startView"], outputs: ["userSelection", "selectedChange", "activeDateChange"], exportAs: ["cmatDatetimepickerClock"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [slideCalendar], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerCalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-calendar', animations: [slideCalendar], host: {
                         // eslint-disable-next-line @typescript-eslint/naming-convention

package/esm2022/components/material-datetimepicker/clock.mjs

@@ -250,10 +250,10 @@ export class CmatDatetimepickerClockComponent {
         this.activeDate = date;
         this.activeDateChange.emit(this.activeDate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatDatetimepickerClockComponent, isStandalone: true, selector: "cmat-datetimepicker-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "role": "this.role", "class": "this.class" } }, exportAs: ["cmatDatetimepickerClock"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\n  <div [ngStyle]=\"hand\" class=\"cmat-datetimepicker-clock-hand\"></div>\n  <div [class.active]=\"hourView\" class=\"cmat-datetimepicker-clock-hours\">\n    @for (item of hours; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\"\n        class=\"cmat-datetimepicker-clock-cell\">\n      {{ item.displayValue }}</div>\n    }\n  </div>\n  <div [class.active]=\"!hourView\" class=\"cmat-datetimepicker-clock-minutes\">\n    @for (item of minutes; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\"\n        [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\" class=\"cmat-datetimepicker-clock-cell\">{{ item.displayValue\n      }}</div>\n    }\n  </div>\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;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;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand: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:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerClockComponent, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatDatetimepickerClockComponent, isStandalone: true, selector: "cmat-datetimepicker-clock", inputs: { dateFilter: "dateFilter", interval: "interval", twelvehour: "twelvehour", activeDate: "activeDate", selected: "selected", minDate: "minDate", maxDate: "maxDate", startView: "startView" }, outputs: { userSelection: "userSelection", selectedChange: "selectedChange", activeDateChange: "activeDateChange" }, host: { listeners: { "mousedown": "handleMousedown($event)" }, properties: { "role": "this.role", "class": "this.class" } }, exportAs: ["cmatDatetimepickerClock"], ngImport: i0, template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\n  <div [ngStyle]=\"hand\" class=\"cmat-datetimepicker-clock-hand\"></div>\n  <div [class.active]=\"hourView\" class=\"cmat-datetimepicker-clock-hours\">\n    @for (item of hours; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\"\n        class=\"cmat-datetimepicker-clock-cell\">\n      {{ item.displayValue }}</div>\n    }\n  </div>\n  <div [class.active]=\"!hourView\" class=\"cmat-datetimepicker-clock-minutes\">\n    @for (item of minutes; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\"\n        [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\" class=\"cmat-datetimepicker-clock-cell\">{{ item.displayValue\n      }}</div>\n    }\n  </div>\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;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;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand: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:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerClockComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-clock', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDatetimepickerClock', standalone: true, imports: [NgStyle], template: "<div class=\"cmat-datetimepicker-clock-wrapper\">\n  <div class=\"cmat-datetimepicker-clock-center\"></div>\n  <div [ngStyle]=\"hand\" class=\"cmat-datetimepicker-clock-hand\"></div>\n  <div [class.active]=\"hourView\" class=\"cmat-datetimepicker-clock-hours\">\n    @for (item of hours; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedHour === item.value\"\n        [ngStyle]=\"{'fontSize':item.fontSize,'left':item.left+'%',top:item.top+'%'}\"\n        class=\"cmat-datetimepicker-clock-cell\">\n      {{ item.displayValue }}</div>\n    }\n  </div>\n  <div [class.active]=\"!hourView\" class=\"cmat-datetimepicker-clock-minutes\">\n    @for (item of minutes; track trackByFn($index, item)) {\n      <div [class.cmat-datetimepicker-clock-cell-disabled]=\"!item.enabled\"\n        [class.cmat-datetimepicker-clock-cell-selected]=\"selectedMinute === item.value\"\n        [ngStyle]=\"{'left':item.left+'%','top':item.top+'%'}\" class=\"cmat-datetimepicker-clock-cell\">{{ item.displayValue\n      }}</div>\n    }\n  </div>\n</div>", styles: [".cmat-datetimepicker-clock{position:relative;display:block;min-width:224px;margin:12px;box-sizing:border-box;-webkit-user-select:none;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;inset:0;width:1px;margin:0 auto;transform-origin:bottom}.cmat-datetimepicker-clock-hand: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:.35s;transform:scale(1.2)}.cmat-datetimepicker-clock-hours.active,.cmat-datetimepicker-clock-minutes.active{opacity:1;visibility:visible;transform:scale(1)}.cmat-datetimepicker-clock-minutes{transform:scale(.8)}.cmat-datetimepicker-clock-cell{position:absolute;display:flex;width:14.1666%;height:14.1666%;justify-content:center;box-sizing:border-box;border-radius:50%;align-items:center;cursor:pointer}.cmat-datetimepicker-clock-cell.cmat-datetimepicker-clock-cell-disabled{pointer-events:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.DatetimeAdapter }], propDecorators: { userSelection: [{

package/esm2022/components/material-datetimepicker/datetimepicker-input.mjs

@@ -279,14 +279,14 @@ export class CmatDatetimepickerInputDirective {
         this._elementRef.nativeElement.value =
             value ? this._dateAdapter.format(value, this._getDisplayFormat()) : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i2.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: CmatDatetimepickerInputDirective, isStandalone: true, selector: "input[cmatDatetimepicker]", inputs: { cmatDatetimepicker: "cmatDatetimepicker", cmatDatepickerFilter: "cmatDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "onInput($event.target.value)", "change": "onChange()", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(datetimepicker?.opened && datetimepicker.id) || null", "attr.min": "min ? datetimepicker.toIso8601(min) : null", "attr.max": "max ? datetimepicker.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerInputDirective, deps: [{ token: i0.ElementRef }, { token: i1.DatetimeAdapter, optional: true }, { token: CMAT_DATETIME_FORMATS, optional: true }, { token: i2.MatFormField, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: CmatDatetimepickerInputDirective, isStandalone: true, selector: "input[cmatDatetimepicker]", inputs: { cmatDatetimepicker: "cmatDatetimepicker", cmatDatepickerFilter: "cmatDatepickerFilter", value: "value", min: "min", max: "max", disabled: "disabled" }, outputs: { dateChange: "dateChange", dateInput: "dateInput" }, host: { listeners: { "input": "onInput($event.target.value)", "change": "onChange()", "blur": "onBlur()", "keydown": "onKeydown($event)" }, properties: { "attr.aria-haspopup": "true", "attr.aria-owns": "(datetimepicker?.opened && datetimepicker.id) || null", "attr.min": "min ? datetimepicker.toIso8601(min) : null", "attr.max": "max ? datetimepicker.toIso8601(max) : null", "disabled": "disabled" } }, providers: [
             CMAT_DATETIMEPICKER_VALUE_ACCESSOR,
             CMAT_DATETIMEPICKER_VALIDATORS,
             { provide: MAT_INPUT_VALUE_ACCESSOR, useExisting: CmatDatetimepickerInputDirective },
         ], exportAs: ["cmatDatepickerInput"], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerInputDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'input[cmatDatetimepicker]',

package/esm2022/components/material-datetimepicker/datetimepicker-intl.mjs

@@ -53,10 +53,10 @@ export class CmatDatetimepickerIntl {
     formatYearRangeLabel(start, end) {
         return `${start} to ${end}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerIntl, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerIntl, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerIntl, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });

package/esm2022/components/material-datetimepicker/datetimepicker-toggle.mjs

@@ -7,10 +7,10 @@ import * as i1 from "./datetimepicker-intl";
 import * as i2 from "@angular/material/button";
 /** Can be used to override the icon of a `cmatDatetimepickerToggle`. */
 export class CmatDatetimepickerToggleIconDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.7", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.9", type: CmatDatetimepickerToggleIconDirective, isStandalone: true, selector: "[cmatDatetimepickerToggleIcon]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerToggleIconDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cmatDatetimepickerToggleIcon]',
@@ -56,10 +56,10 @@ export class CmatDatetimepickerToggleComponent {
         this._stateChanges = merge([this.intl.changes, datepickerDisabled, inputDisabled])
             .subscribe(() => this._changeDetectorRef.markForCheck());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [{ token: i1.CmatDatetimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.7", type: CmatDatetimepickerToggleComponent, isStandalone: true, selector: "cmat-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disableRipple: "disableRipple", disabled: "disabled" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "customIcon", first: true, predicate: CmatDatetimepickerToggleIconDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["cmatDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button type=\"button\" (click)=\"open($event)\" [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" [disabled]=\"disabled\" mat-icon-button type=\"button\">\n  @if (!customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n          </path>\n        </svg>\n      }\n      @case ('datetime') {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n          </path>\n        </svg>\n      }\n      @default {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n          </svg>\n        }\n      }\n    }\n\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\n  </button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerToggleComponent, deps: [{ token: i1.CmatDatetimepickerIntl }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.9", type: CmatDatetimepickerToggleComponent, isStandalone: true, selector: "cmat-datetimepicker-toggle", inputs: { datetimepicker: ["for", "datetimepicker"], tabIndex: "tabIndex", ariaLabel: ["aria-label", "ariaLabel"], disableRipple: "disableRipple", disabled: "disabled" }, host: { properties: { "class": "this.class" } }, queries: [{ propertyName: "customIcon", first: true, predicate: CmatDatetimepickerToggleIconDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }], exportAs: ["cmatDatetimepickerToggle"], usesOnChanges: true, ngImport: i0, template: "<button type=\"button\" (click)=\"open($event)\" [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" [disabled]=\"disabled\" mat-icon-button type=\"button\">\n  @if (!customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n          </path>\n        </svg>\n      }\n      @case ('datetime') {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n          </path>\n        </svg>\n      }\n      @default {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n          </svg>\n        }\n      }\n    }\n\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\n  </button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.7", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.9", ngImport: i0, type: CmatDatetimepickerToggleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cmat-datetimepicker-toggle', exportAs: 'cmatDatetimepickerToggle', encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule], template: "<button type=\"button\" (click)=\"open($event)\" [attr.aria-haspopup]=\"datetimepicker ? 'dialog' : null\"\n  [attr.aria-label]=\"ariaLabel || intl.openCalendarLabel\" [attr.tabindex]=\"disabled ? -1 : tabIndex\"\n  [disabled]=\"disabled\" [disableRipple]=\"disableRipple\" [disabled]=\"disabled\" mat-icon-button type=\"button\">\n  @if (!customIcon) {\n    @switch (datetimepicker.type) {\n      @case ('time') {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\n            d=\"M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z\">\n          </path>\n        </svg>\n      }\n      @case ('datetime') {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path\n            d=\"M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z\">\n          </path>\n        </svg>\n      }\n      @default {\n        <svg class=\"mat-icon cmat-datetimepicker-toggle-default-icon\" viewBox=\"0 0 24 24\" width=\"24px\"\n          height=\"24px\" fill=\"currentColor\" focusable=\"false\">\n          <path d=\"M0 0h24v24H0z\" fill=\"none\" />\n          <path\n            d=\"M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z\" />\n          </svg>\n        }\n      }\n    }\n\n    <ng-content select=\"[cmatDatetimepickerToggleIcon]\"></ng-content>\n  </button>" }]
         }], ctorParameters: () => [{ type: i1.CmatDatetimepickerIntl }, { type: i0.ChangeDetectorRef }], propDecorators: { datetimepicker: [{