cmat 0.0.49 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/fesm2022/cmat-components-adapter.mjs +9 -9
  2. package/fesm2022/cmat-components-breadcrumb.mjs +9 -9
  3. package/fesm2022/cmat-components-card.mjs +3 -3
  4. package/fesm2022/cmat-components-carousel.mjs +12 -12
  5. package/fesm2022/cmat-components-cascade.mjs +9 -9
  6. package/fesm2022/cmat-components-chip-input.mjs +3 -3
  7. package/fesm2022/cmat-components-custom-formly.mjs +87 -87
  8. package/fesm2022/cmat-components-date-range.mjs +3 -3
  9. package/fesm2022/cmat-components-drawer.mjs +6 -6
  10. package/fesm2022/cmat-components-fullscreen.mjs +3 -3
  11. package/fesm2022/cmat-components-highlight.mjs +6 -6
  12. package/fesm2022/cmat-components-image-viewer.mjs +3 -3
  13. package/fesm2022/cmat-components-json-editor.mjs +3 -3
  14. package/fesm2022/cmat-components-knob-input.mjs +3 -3
  15. package/fesm2022/cmat-components-masonry.mjs +3 -3
  16. package/fesm2022/cmat-components-material-color-picker.mjs +3 -3
  17. package/fesm2022/cmat-components-material-datetimepicker.mjs +42 -42
  18. package/fesm2022/cmat-components-navigation.mjs +39 -39
  19. package/fesm2022/cmat-components-opt-input.mjs +3 -3
  20. package/fesm2022/cmat-components-org-chart.mjs +9 -9
  21. package/fesm2022/cmat-components-pagination.mjs +12 -12
  22. package/fesm2022/cmat-components-password-strength.mjs +9 -9
  23. package/fesm2022/cmat-components-popover.mjs +9 -9
  24. package/fesm2022/cmat-components-progress-bar.mjs +3 -3
  25. package/fesm2022/cmat-components-qrcode.mjs +3 -3
  26. package/fesm2022/cmat-components-rating.mjs +3 -3
  27. package/fesm2022/cmat-components-select-search.mjs +9 -9
  28. package/fesm2022/cmat-components-select-table.mjs +3 -3
  29. package/fesm2022/cmat-components-select-tree.mjs +3 -3
  30. package/fesm2022/cmat-components-speed-dial.mjs +9 -9
  31. package/fesm2022/cmat-components-timeline.mjs +12 -12
  32. package/fesm2022/cmat-components-toast.mjs +9 -9
  33. package/fesm2022/cmat-components-transfer-picker.mjs +18 -18
  34. package/fesm2022/cmat-components-treetable.mjs +6 -6
  35. package/fesm2022/cmat-components-upload.mjs +9 -9
  36. package/fesm2022/cmat-directives-animate-on-scroll.mjs +6 -6
  37. package/fesm2022/cmat-directives-arrow-cursor.mjs +3 -3
  38. package/fesm2022/cmat-directives-autofocus.mjs +3 -3
  39. package/fesm2022/cmat-directives-data-exporter.mjs +21 -21
  40. package/fesm2022/cmat-directives-debounce.mjs +9 -9
  41. package/fesm2022/cmat-directives-digit-only.mjs +6 -6
  42. package/fesm2022/cmat-directives-equal-validator.mjs +3 -3
  43. package/fesm2022/cmat-lib-mock-api.mjs +6 -6
  44. package/fesm2022/cmat-pipes-bytes.mjs +3 -3
  45. package/fesm2022/cmat-pipes-date-format.mjs +3 -3
  46. package/fesm2022/cmat-pipes-find-by-key.mjs +3 -3
  47. package/fesm2022/cmat-pipes-group-by.mjs +3 -3
  48. package/fesm2022/cmat-pipes-keys.mjs +3 -3
  49. package/fesm2022/cmat-pipes-secure.mjs +3 -3
  50. package/fesm2022/cmat-pipes-uppercase.mjs +3 -3
  51. package/fesm2022/cmat-services-alert.mjs +13 -5
  52. package/fesm2022/cmat-services-alert.mjs.map +1 -1
  53. package/fesm2022/cmat-services-config.mjs +6 -6
  54. package/fesm2022/cmat-services-confirmation.mjs +6 -6
  55. package/fesm2022/cmat-services-data.mjs +3 -3
  56. package/fesm2022/cmat-services-export-as.mjs +3 -3
  57. package/fesm2022/cmat-services-loading.mjs +6 -6
  58. package/fesm2022/cmat-services-local-storage.mjs +3 -3
  59. package/fesm2022/cmat-services-media-watcher.mjs +3 -3
  60. package/fesm2022/cmat-services-platform.mjs +3 -3
  61. package/fesm2022/cmat-services-splash-screen.mjs +3 -3
  62. package/fesm2022/cmat-services-title.mjs +3 -3
  63. package/fesm2022/cmat-services-translation.mjs +3 -3
  64. package/fesm2022/cmat-services-utils.mjs +3 -3
  65. package/package.json +71 -71
  66. package/services/alert/index.d.ts +8 -1
  67. package/styles/overrides/angular-material.scss +1 -0
@@ -511,8 +511,8 @@ class CmatDateRangeComponent {
511
511
  // If meridiem doesn't exist, create a moment using 24-hours format and return in
512
512
  return dayjs(value, 'HH:mm').second(0);
513
513
  }
514
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
515
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { readonly: "readonly", dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
514
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
515
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { readonly: "readonly", dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
516
516
  {
517
517
  provide: NG_VALUE_ACCESSOR,
518
518
  useExisting: forwardRef(() => CmatDateRangeComponent),
@@ -520,7 +520,7 @@ class CmatDateRangeComponent {
520
520
  }
521
521
  ], 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 #pickerPanelOrigin role=\"presentation\" class=\"range\" (click)=\"openPickerPanel()\">\r\n\r\n <div class=\"start\">\r\n <div class=\"date\">{{range.startDate}}</div>\r\n @if (range.startTime) {\r\n <div class=\"time\">{{range.startTime}}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"separator\">-</div>\r\n\r\n <div class=\"end\">\r\n <div class=\"date\">{{range.endDate}}</div>\r\n @if (range.endTime) {\r\n <div class=\"time\">{{range.endTime}}</div>\r\n }\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-template #pickerPanel>\r\n\r\n <!-- Start -->\r\n <div class=\"start\">\r\n\r\n <div class=\"month\">\r\n <div class=\"month-header\">\r\n <button type=\"button\" class=\"previous-button\" matIconButton tabindex=\"1\" (click)=\"prev()\">\r\n <mat-icon [svgIcon]=\"'heroicons_outline:chevron-left'\"></mat-icon>\r\n </button>\r\n <div class=\"month-label\">{{getMonthLabel(1)}}</div>\r\n </div>\r\n <mat-month-view #matMonthView1 [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n [(activeDate)]=\"activeDates.month1\" (click)=\"$event.stopImmediatePropagation()\"\r\n (selectedChange)=\"onSelectedDateChange($event)\">\r\n </mat-month-view>\r\n </div>\r\n\r\n @if (timeRange) {\r\n <mat-form-field class=\"time start-time\">\r\n <input matInput tabindex=\"3\" [autocomplete]=\"'off'\" [formControl]=\"startTimeFormControl\"\r\n (blur)=\"updateStartTime($event)\">\r\n <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\r\n </mat-form-field>\r\n }\r\n\r\n </div>\r\n\r\n <!-- End -->\r\n <div class=\"end\">\r\n\r\n <div class=\"month\">\r\n <div class=\"month-header\">\r\n <div class=\"month-label\">{{getMonthLabel(2)}}</div>\r\n <button type=\"button\" class=\"next-button\" matIconButton tabindex=\"2\" (click)=\"next()\">\r\n <mat-icon [svgIcon]=\"'heroicons_outline:chevron-right'\"></mat-icon>\r\n </button>\r\n </div>\r\n <mat-month-view #matMonthView2 [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n [(activeDate)]=\"activeDates.month2\" (click)=\"$event.stopImmediatePropagation()\"\r\n (selectedChange)=\"onSelectedDateChange($event)\">\r\n </mat-month-view>\r\n </div>\r\n\r\n @if (timeRange) {\r\n <mat-form-field class=\"time end-time\">\r\n <input matInput tabindex=\"4\" [formControl]=\"endTimeFormControl\" (blur)=\"updateEndTime($event)\">\r\n <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\r\n </mat-form-field>\r\n }\r\n\r\n </div>\r\n\r\n </ng-template>", styles: ["cmat-date-range{display:flex}cmat-date-range .range{display:flex;width:100%;align-items:center;height:48px;min-height:48px;max-height:48px;cursor:pointer}cmat-date-range .range .start,cmat-date-range .range .end{display:flex;align-items:center;height:100%;padding:0 16px;border-radius:6px;border-width:1px;line-height:1}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: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
522
522
  }
523
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
523
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
524
524
  type: Component,
525
525
  args: [{ selector: 'cmat-date-range', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDateRange', providers: [
526
526
  {
@@ -32,10 +32,10 @@ class CmatDrawerService {
32
32
  getComponent(name) {
33
33
  return this._componentRegistry.get(name);
34
34
  }
35
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
36
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatDrawerService, providedIn: 'root' }); }
35
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
36
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatDrawerService, providedIn: 'root' }); }
37
37
  }
38
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatDrawerService, decorators: [{
38
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatDrawerService, decorators: [{
39
39
  type: Injectable,
40
40
  args: [{
41
41
  providedIn: 'root'
@@ -285,10 +285,10 @@ class CmatDrawerComponent {
285
285
  // Execute the observable
286
286
  this.openedChanged.emit(open);
287
287
  }
288
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
289
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", 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}.cmat-drawer-overlay.cmat-drawer-overlay-enter{animation:drawer-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-drawer-overlay.cmat-drawer-overlay-leave{animation:drawer-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes drawer-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes drawer-overlay-leave{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
288
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
289
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", 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}.cmat-drawer-overlay.cmat-drawer-overlay-enter{animation:drawer-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-drawer-overlay.cmat-drawer-overlay-leave{animation:drawer-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes drawer-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes drawer-overlay-leave{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
290
290
  }
291
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatDrawerComponent, decorators: [{
291
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatDrawerComponent, decorators: [{
292
292
  type: Component,
293
293
  args: [{ selector: 'cmat-drawer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDrawer', 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}.cmat-drawer-overlay.cmat-drawer-overlay-enter{animation:drawer-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-drawer-overlay.cmat-drawer-overlay-leave{animation:drawer-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes drawer-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes drawer-overlay-leave{0%{opacity:1}to{opacity:0}}\n"] }]
294
294
  }], propDecorators: { fixed: [{
@@ -28,10 +28,10 @@ class CmatFullscreenComponent {
28
28
  });
29
29
  }
30
30
  }
31
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
32
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "<!-- Button -->\r\n<button type=\"button\" matIconButton [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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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 }); }
31
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
32
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "<!-- Button -->\r\n<button type=\"button\" matIconButton [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], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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 }); }
33
33
  }
34
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
34
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
35
35
  type: Component,
36
36
  args: [{ selector: 'cmat-fullscreen', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatFullscreen', imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Button -->\r\n<button type=\"button\" matIconButton [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>" }]
37
37
  }], propDecorators: { iconTpl: [{
@@ -38,10 +38,10 @@ class CmatHighlightService {
38
38
  // indentation, join them together and return it
39
39
  return lines.map(line => line.substring(indentation)).join('\n');
40
40
  }
41
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
42
- static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
41
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
42
+ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
43
43
  }
44
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatHighlightService, decorators: [{
44
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatHighlightService, decorators: [{
45
45
  type: Injectable,
46
46
  args: [{
47
47
  providedIn: 'root'
@@ -108,10 +108,10 @@ class CmatHighlightComponent {
108
108
  // Detect the changes
109
109
  this._viewRef.detectChanges();
110
110
  }
111
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
112
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", 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 }); }
111
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
112
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", 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 }); }
113
113
  }
114
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatHighlightComponent, decorators: [{
114
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatHighlightComponent, decorators: [{
115
115
  type: Component,
116
116
  args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', 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"] }]
117
117
  }], propDecorators: { code: [{
@@ -143,10 +143,10 @@ class CmatImageComponent {
143
143
  imageError(event) {
144
144
  this.imageErrorEvent.emit(event);
145
145
  }
146
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
147
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", src: "src", srcSet: "srcSet", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute] }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n @if(preview){\r\n <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n <button #previewButton matIconButton>\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(maskVisible){\r\n <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n role=\"dialog\" [attr.aria-modal]=\"maskVisible\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n <button matIconButton (click)=\"rotateRight()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n </button>\r\n <button matIconButton (click)=\"rotateLeft()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n </button>\r\n <button #closeButton matIconButton (click)=\"closePreview()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n </button>\r\n </div>\r\n @if(previewVisible){\r\n <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n (click)=\"onPreviewImageClick($event)\">\r\n <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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 }); }
146
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
147
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", src: "src", srcSet: "srcSet", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute] }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n @if(preview){\r\n <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n <button #previewButton matIconButton>\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(maskVisible){\r\n <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n role=\"dialog\" [attr.aria-modal]=\"maskVisible\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n <button matIconButton (click)=\"rotateRight()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n </button>\r\n <button matIconButton (click)=\"rotateLeft()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n </button>\r\n <button #closeButton matIconButton (click)=\"closePreview()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n </button>\r\n </div>\r\n @if(previewVisible){\r\n <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n (click)=\"onPreviewImageClick($event)\">\r\n <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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 }); }
148
148
  }
149
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatImageComponent, decorators: [{
149
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatImageComponent, decorators: [{
150
150
  type: Component,
151
151
  args: [{ selector: 'cmat-image', imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n @if(preview){\r\n <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n <button #previewButton matIconButton>\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(maskVisible){\r\n <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n role=\"dialog\" [attr.aria-modal]=\"maskVisible\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n <button matIconButton (click)=\"rotateRight()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n </button>\r\n <button matIconButton (click)=\"rotateLeft()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n </button>\r\n <button #closeButton matIconButton (click)=\"closePreview()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n </button>\r\n </div>\r\n @if(previewVisible){\r\n <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n (click)=\"onPreviewImageClick($event)\">\r\n <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"] }]
152
152
  }], propDecorators: { imageClass: [{
@@ -156,10 +156,10 @@ class CmatJsonEditorComponent {
156
156
  this.pathChanged.emit(st);
157
157
  }
158
158
  }
159
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
160
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", 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 }); }
159
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
160
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", 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 }); }
161
161
  }
162
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
162
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
163
163
  type: Component,
164
164
  args: [{ selector: 'cmat-json-editor', template: '<div class="cmat-jsoneditor" [id]="id" #jsonEditorContainer></div>', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}\n"] }]
165
165
  }], propDecorators: { jsonEditorContainer: [{
@@ -322,12 +322,12 @@ class CmatKnobInputComponent {
322
322
  valueToDisplay() {
323
323
  return this.valueTemplate.replace('{value}', this.value.toString());
324
324
  }
325
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
326
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { id: "id", valueColor: "valueColor", rangeColor: "rangeColor", textColor: "textColor", valueTemplate: "valueTemplate", name: "name", size: "size", step: "step", min: "min", max: "max", strokeWidth: "strokeWidth", showValue: "showValue", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "this.id" } }, providers: [
325
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
326
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { id: "id", valueColor: "valueColor", rangeColor: "rangeColor", textColor: "textColor", valueTemplate: "valueTemplate", name: "name", size: "size", step: "step", min: "min", max: "max", strokeWidth: "strokeWidth", showValue: "showValue", placeholder: "placeholder", value: "value", required: "required", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "this.id" } }, providers: [
327
327
  { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
328
328
  ], viewQueries: [{ propertyName: "_knobElementRef", first: true, predicate: ["knob"], descendants: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->\r\n<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [class.cmat-knob-disabled]=\"disabled\" (focusin)=\"onFocusIn()\" (focusout)=\"onFocusOut($event)\">\r\n <svg viewBox=\"0 0 100 100\" role=\"slider\" [style.width]=\"size + 'px'\" [style.height]=\"size + 'px'\"\r\n [attr.aria-valuemin]=\"min\" [attr.aria-valuemax]=\"max\" [attr.aria-valuenow]=\"value\"\r\n [attr.tabindex]=\"disabled ? -1 : 0\" (click)=\"onClick($event)\">\r\n <path class=\"knob-range\" [attr.d]=\"rangePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"rangeColor\">\r\n </path>\r\n <path class=\"knob-value\" [attr.d]=\"valuePath()\" [attr.stroke-width]=\"strokeWidth\" [attr.stroke]=\"valueColor\">\r\n </path>\r\n @if(showValue){\r\n <text text-anchor=\"middle\" class=\"knob-text\" [attr.x]=\"50\" [attr.y]=\"57\" [attr.fill]=\"textColor\"\r\n [attr.name]=\"name\">{{ valueToDisplay() }}</text>\r\n }\r\n </svg>\r\n</div>", styles: ["cmat-knob-input .knob-range{fill:none;transition:stroke .1s ease-in}cmat-knob-input .knob-value{animation-name:dash-frame;animation-fill-mode:forwards;fill:none}cmat-knob-input .knob-text{font-size:1.3rem;text-align:center}cmat-knob-input .cmat-knob-disabled{opacity:.6}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
329
329
  }
330
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
330
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
331
331
  type: Component,
332
332
  args: [{ selector: 'cmat-knob-input', providers: [
333
333
  { provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
@@ -39,10 +39,10 @@ class CmatMasonryComponent {
39
39
  }
40
40
  this._changeDetectorRef.markForCheck();
41
41
  }
42
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
43
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.5", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
42
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
43
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.6", 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
44
44
  }
45
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatMasonryComponent, decorators: [{
45
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatMasonryComponent, decorators: [{
46
46
  type: Component,
47
47
  args: [{ selector: 'cmat-masonry', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatMasonry', imports: [NgTemplateOutlet], template: "<div class=\"flex p-2\">\r\n <ng-container *ngTemplateOutlet=\"columnsTemplate; context: { $implicit: distributedColumns }\"></ng-container>\r\n</div>" }]
48
48
  }], propDecorators: { columnsTemplate: [{
@@ -153,10 +153,10 @@ class CmatMaterialColorPickerComponent {
153
153
  this.view = 'hues';
154
154
  }
155
155
  }
156
- static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
157
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.5", 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\">\r\n <mat-select value=\"init\" panelClass=\"min-w-64 overflow-hidden\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\"\r\n [disabled]=\"readonly\" (openedChange)=\"onMenuOpen($event)\">\r\n <mat-select-trigger class=\"flex p-1\">\r\n <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n </mat-select-trigger>\r\n\r\n <header class=\"border-b-2 flex flex-row content-between justify-between p-2\">\r\n <button type=\"button\" matIconButton class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n [class.invisible]=\"view === 'palettes'\" (click)=\"goToPalettesView()\">\r\n <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n </button>\r\n <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\r\n <button type=\"button\" matIconButton class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n </button>\r\n </header>\r\n\r\n <div class=\"flex flex-wrap w-60 m-2\">\r\n <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n <div>\r\n @switch (view) {\r\n @case ('palettes') {\r\n <div>\r\n <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n @for (palette of palettes; track $index) {\r\n <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectPalette(palette)\">\r\n <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n [value]=\"selectedPalette\">\r\n @if (selectedColor.color===palette + '-' + selectedHue) {\r\n <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n }\r\n <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"palette + '-' + selectedHue\"></span>\r\n </mat-option>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @case ('hues') {\r\n <div>\r\n <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n @for (hue of hues; track $index) {\r\n <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectHue(hue)\">\r\n <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n [value]=\"selectedHue\">\r\n @if (selectedColor.color===selectedPalette + '-' + hue) {\r\n <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n }\r\n <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"selectedPalette + '-' + hue\"></span>\r\n </mat-option>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </mat-select>\r\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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
156
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
157
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.6", 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\">\r\n <mat-select value=\"init\" panelClass=\"min-w-64 overflow-hidden\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\"\r\n [disabled]=\"readonly\" (openedChange)=\"onMenuOpen($event)\">\r\n <mat-select-trigger class=\"flex p-1\">\r\n <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n </mat-select-trigger>\r\n\r\n <header class=\"border-b-2 flex flex-row content-between justify-between p-2\">\r\n <button type=\"button\" matIconButton class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n [class.invisible]=\"view === 'palettes'\" (click)=\"goToPalettesView()\">\r\n <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n </button>\r\n <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\r\n <button type=\"button\" matIconButton class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n </button>\r\n </header>\r\n\r\n <div class=\"flex flex-wrap w-60 m-2\">\r\n <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n <div>\r\n @switch (view) {\r\n @case ('palettes') {\r\n <div>\r\n <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n @for (palette of palettes; track $index) {\r\n <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectPalette(palette)\">\r\n <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n [value]=\"selectedPalette\">\r\n @if (selectedColor.color===palette + '-' + selectedHue) {\r\n <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n }\r\n <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"palette + '-' + selectedHue\"></span>\r\n </mat-option>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @case ('hues') {\r\n <div>\r\n <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n @for (hue of hues; track $index) {\r\n <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectHue(hue)\">\r\n <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n [value]=\"selectedHue\">\r\n @if (selectedColor.color===selectedPalette + '-' + hue) {\r\n <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n }\r\n <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"selectedPalette + '-' + hue\"></span>\r\n </mat-option>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </mat-select>\r\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", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
158
158
  }
159
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.5", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
159
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.6", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
160
160
  type: Component,
161
161
  args: [{ selector: 'cmat-material-color-picker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatMaterialColorPicker', providers: [CMAT_MATERIAL_COLOR_PICKER_VALUE_ACCESSOR], imports: [NgClass, MatSelectModule, MatIconModule, MatButtonModule, MatTooltipModule], template: "<div class=\"rounded\" [ngClass]=\"selectedColor.color\">\r\n <mat-select value=\"init\" panelClass=\"min-w-64 overflow-hidden\" [disableOptionCentering]=\"true\" [hideSingleSelectionIndicator]=\"true\"\r\n [disabled]=\"readonly\" (openedChange)=\"onMenuOpen($event)\">\r\n <mat-select-trigger class=\"flex p-1\">\r\n <mat-icon [svgIcon]=\"'heroicons_outline:paint-brush'\"></mat-icon>\r\n </mat-select-trigger>\r\n\r\n <header class=\"border-b-2 flex flex-row content-between justify-between p-2\">\r\n <button type=\"button\" matIconButton class=\"secondary-text\" aria-label=\"\u8C03\u8272\u677F\"\r\n [class.invisible]=\"view === 'palettes'\" (click)=\"goToPalettesView()\">\r\n <mat-icon svgIcon=\"mat_outline:arrow_back\"></mat-icon>\r\n </button>\r\n <span class=\"align-middle leading-loose text-xl font-bold\">{{title}}</span>\r\n <button type=\"button\" matIconButton class=\"remove-color-button secondary-text\" aria-label=\"\u79FB\u9664\u989C\u8272\"\r\n matTooltip=\"\u79FB\u9664\u989C\u8272\" (click)=\"removeColor()\">\r\n <mat-icon color=\"warn\" [svgIcon]=\"'mat_outline:cleaning_services'\"></mat-icon>\r\n </button>\r\n </header>\r\n\r\n <div class=\"flex flex-wrap w-60 m-2\">\r\n <mat-option value=\"init\" class=\"hidden\">\u521D\u59CB\u5316</mat-option>\r\n <div>\r\n @switch (view) {\r\n @case ('palettes') {\r\n <div>\r\n <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n @for (palette of palettes; track $index) {\r\n <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectPalette(palette)\">\r\n <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n [value]=\"selectedPalette\">\r\n @if (selectedColor.color===palette + '-' + selectedHue) {\r\n <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n }\r\n <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"palette + '-' + selectedHue\"></span>\r\n </mat-option>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @case ('hues') {\r\n <div>\r\n <div class=\"flex flex-row flex-wrap justify-start content-start colors\">\r\n @for (hue of hues; track $index) {\r\n <div role=\"presentation\" class=\"cursor-pointer hover:opacity-50\" (click)=\"selectHue(hue)\">\r\n <mat-option class=\"relative flex w-12 h-12 p-0 pointer-events-none rounded-full bg-transparent \"\r\n [value]=\"selectedHue\">\r\n @if (selectedColor.color===selectedPalette + '-' + hue) {\r\n <mat-icon class=\"absolute m-3 text-white\" [svgIcon]=\"'heroicons_outline:check'\"></mat-icon>\r\n }\r\n <span class=\"flex w-10 h-10 m-1 rounded-full\" [ngClass]=\"selectedPalette + '-' + hue\"></span>\r\n </mat-option>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n </mat-select>\r\n</div>", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"] }]
162
162
  }], ctorParameters: () => [], propDecorators: { colorChanged: [{