cmat 0.0.86 → 0.0.87
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.
- package/fesm2022/cmat-components-adapter.mjs +9 -9
- package/fesm2022/cmat-components-breadcrumb.mjs +9 -9
- package/fesm2022/cmat-components-card.mjs +3 -3
- package/fesm2022/cmat-components-carousel.mjs +12 -12
- package/fesm2022/cmat-components-cascade.mjs +9 -9
- package/fesm2022/cmat-components-chip-input.mjs +3 -3
- package/fesm2022/cmat-components-code-editor.mjs +3 -3
- package/fesm2022/cmat-components-custom-formly.mjs +90 -90
- package/fesm2022/cmat-components-custom-formly.mjs.map +1 -1
- package/fesm2022/cmat-components-date-range.mjs +3 -3
- package/fesm2022/cmat-components-date-time-display.mjs +3 -3
- package/fesm2022/cmat-components-drawer.mjs +6 -6
- package/fesm2022/cmat-components-empty-state.mjs +3 -3
- package/fesm2022/cmat-components-file-preview.mjs +3 -3
- package/fesm2022/cmat-components-filter-toolbar.mjs +3 -3
- package/fesm2022/cmat-components-form-actions.mjs +3 -3
- package/fesm2022/cmat-components-fullscreen.mjs +3 -3
- package/fesm2022/cmat-components-highlight.mjs +6 -6
- package/fesm2022/cmat-components-image-viewer.mjs +3 -3
- package/fesm2022/cmat-components-inline-loading.mjs +3 -3
- package/fesm2022/cmat-components-json-editor.mjs +3 -3
- package/fesm2022/cmat-components-knob-input.mjs +3 -3
- package/fesm2022/cmat-components-masonry.mjs +3 -3
- package/fesm2022/cmat-components-material-color-picker.mjs +3 -3
- package/fesm2022/cmat-components-material-datetimepicker.mjs +42 -42
- package/fesm2022/cmat-components-navigation.mjs +39 -39
- package/fesm2022/cmat-components-opt-input.mjs +3 -3
- package/fesm2022/cmat-components-org-chart.mjs +9 -9
- package/fesm2022/cmat-components-page-header.mjs +3 -3
- package/fesm2022/cmat-components-pagination.mjs +12 -12
- package/fesm2022/cmat-components-password-strength.mjs +9 -9
- package/fesm2022/cmat-components-popover.mjs +9 -9
- package/fesm2022/cmat-components-progress-bar.mjs +3 -3
- package/fesm2022/cmat-components-qrcode.mjs +3 -3
- package/fesm2022/cmat-components-rating.mjs +3 -3
- package/fesm2022/cmat-components-rich-text-editor.mjs +3 -3
- package/fesm2022/cmat-components-select-search.mjs +9 -9
- package/fesm2022/cmat-components-select-table.mjs +3 -3
- package/fesm2022/cmat-components-select-tree.mjs +3 -3
- package/fesm2022/cmat-components-skeleton.mjs +3 -3
- package/fesm2022/cmat-components-speed-dial.mjs +9 -9
- package/fesm2022/cmat-components-status-tag.mjs +3 -3
- package/fesm2022/cmat-components-table-toolbar.mjs +3 -3
- package/fesm2022/cmat-components-timeline.mjs +12 -12
- package/fesm2022/cmat-components-toast.mjs +9 -9
- package/fesm2022/cmat-components-transfer-picker.mjs +18 -18
- package/fesm2022/cmat-components-treetable.mjs +6 -6
- package/fesm2022/cmat-components-upload.mjs +9 -9
- package/fesm2022/cmat-directives-animate-on-scroll.mjs +6 -6
- package/fesm2022/cmat-directives-arrow-cursor.mjs +3 -3
- package/fesm2022/cmat-directives-autofocus.mjs +3 -3
- package/fesm2022/cmat-directives-data-exporter.mjs +21 -21
- package/fesm2022/cmat-directives-debounce.mjs +9 -9
- package/fesm2022/cmat-directives-digit-only.mjs +6 -6
- package/fesm2022/cmat-directives-equal-validator.mjs +3 -3
- package/fesm2022/cmat-directives-seamless-auto-scroll.mjs +3 -3
- package/fesm2022/cmat-lib-mock-api.mjs +6 -6
- package/fesm2022/cmat-pipes-bytes.mjs +3 -3
- package/fesm2022/cmat-pipes-date-format.mjs +3 -3
- package/fesm2022/cmat-pipes-find-by-key.mjs +3 -3
- package/fesm2022/cmat-pipes-group-by.mjs +3 -3
- package/fesm2022/cmat-pipes-keys.mjs +3 -3
- package/fesm2022/cmat-pipes-secure.mjs +3 -3
- package/fesm2022/cmat-pipes-uppercase.mjs +3 -3
- package/fesm2022/cmat-services-alert.mjs +3 -3
- package/fesm2022/cmat-services-config.mjs +6 -6
- package/fesm2022/cmat-services-confirmation.mjs +6 -6
- package/fesm2022/cmat-services-data.mjs +3 -3
- package/fesm2022/cmat-services-export-as.mjs +3 -3
- package/fesm2022/cmat-services-loading.mjs +6 -6
- package/fesm2022/cmat-services-local-storage.mjs +3 -3
- package/fesm2022/cmat-services-media-watcher.mjs +3 -3
- package/fesm2022/cmat-services-platform.mjs +3 -3
- package/fesm2022/cmat-services-splash-screen.mjs +3 -3
- package/fesm2022/cmat-services-title.mjs +3 -3
- package/fesm2022/cmat-services-translation.mjs +3 -3
- package/fesm2022/cmat-services-utils.mjs +4 -4
- package/fesm2022/cmat-services-utils.mjs.map +1 -1
- package/fesm2022/cmat.mjs +535 -535
- package/fesm2022/cmat.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -353,8 +353,8 @@ class CmatDateRangeComponent {
|
|
|
353
353
|
}
|
|
354
354
|
return dayjs(value, 'HH:mm').second(0);
|
|
355
355
|
}
|
|
356
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
357
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
356
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
357
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { controlClass: "controlClass", initData: "initData", readonly: "readonly", dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
|
|
358
358
|
{
|
|
359
359
|
provide: NG_VALUE_ACCESSOR,
|
|
360
360
|
useExisting: forwardRef(() => CmatDateRangeComponent),
|
|
@@ -362,7 +362,7 @@ class CmatDateRangeComponent {
|
|
|
362
362
|
}
|
|
363
363
|
], 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\" [attr.data-refresh]=\"refreshVersion()\" (click)=\"openPickerPanel()\">\r\n\r\n <div class=\"start\" [ngClass]=\"controlClass\">\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\" [ngClass]=\"controlClass\">\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 \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 \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>\r\n", 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;width:6px}.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: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "component", type: 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: MatInputModule }, { kind: "directive", type: i5.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"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
364
364
|
}
|
|
365
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
365
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
|
|
366
366
|
type: Component,
|
|
367
367
|
args: [{ selector: 'cmat-date-range', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDateRange', providers: [
|
|
368
368
|
{
|
|
@@ -9,10 +9,10 @@ class CmatDateTimeDisplayComponent {
|
|
|
9
9
|
this.prefix = '';
|
|
10
10
|
this.emptyText = '-';
|
|
11
11
|
}
|
|
12
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDateTimeDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatDateTimeDisplayComponent, isStandalone: true, selector: "cmat-date-time-display", inputs: { value: "value", format: "format", timezone: "timezone", prefix: "prefix", emptyText: "emptyText" }, ngImport: i0, template: "<span class=\"inline-flex items-center gap-1 text-sm text-slate-600 dark:text-slate-50\">\r\n @if (prefix) {\r\n <span class=\"text-slate-400 dark:text-slate-300 \">{{ prefix }}</span>\r\n }\r\n\r\n @if (value) {\r\n <span>{{ value | date: format: timezone }}</span>\r\n } @else {\r\n <span>{{ emptyText }}</span>\r\n }\r\n</span>\r\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "pipe", type: DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14
14
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDateTimeDisplayComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{ selector: 'cmat-date-time-display', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DatePipe], template: "<span class=\"inline-flex items-center gap-1 text-sm text-slate-600 dark:text-slate-50\">\r\n @if (prefix) {\r\n <span class=\"text-slate-400 dark:text-slate-300 \">{{ prefix }}</span>\r\n }\r\n\r\n @if (value) {\r\n <span>{{ value | date: format: timezone }}</span>\r\n } @else {\r\n <span>{{ emptyText }}</span>\r\n }\r\n</span>\r\n", styles: [":host{display:inline-flex}\n"] }]
|
|
18
18
|
}], propDecorators: { value: [{
|
|
@@ -16,10 +16,10 @@ class CmatDrawerService {
|
|
|
16
16
|
getComponent(name) {
|
|
17
17
|
return this._componentRegistry.get(name);
|
|
18
18
|
}
|
|
19
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
20
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
20
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDrawerService, providedIn: 'root' }); }
|
|
21
21
|
}
|
|
22
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDrawerService, decorators: [{
|
|
23
23
|
type: Injectable,
|
|
24
24
|
args: [{
|
|
25
25
|
providedIn: 'root'
|
|
@@ -228,10 +228,10 @@ class CmatDrawerComponent {
|
|
|
228
228
|
this.refreshVersion.update(value => value + 1);
|
|
229
229
|
this.openedChanged.emit(open);
|
|
230
230
|
}
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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>\r\n<div class=\"cmat-drawer-wrapper\" [attr.data-refresh]=\"refreshVersion()\" [class.cmat-drawer-opened]=\"opened\">\r\n</div>\r\n", 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 }); }
|
|
233
233
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatDrawerComponent, decorators: [{
|
|
235
235
|
type: Component,
|
|
236
236
|
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>\r\n<div class=\"cmat-drawer-wrapper\" [attr.data-refresh]=\"refreshVersion()\" [class.cmat-drawer-opened]=\"opened\">\r\n</div>\r\n", 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"] }]
|
|
237
237
|
}], propDecorators: { fixed: [{
|
|
@@ -17,10 +17,10 @@ class CmatEmptyStateComponent {
|
|
|
17
17
|
emitAction() {
|
|
18
18
|
this.ctaClick.emit();
|
|
19
19
|
}
|
|
20
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
21
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
20
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
21
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatEmptyStateComponent, isStandalone: true, selector: "cmat-empty-state", inputs: { icon: "icon", title: "title", description: "description", ctaLabel: "ctaLabel", ctaDisabled: "ctaDisabled" }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: "<div class=\"flex flex-col items-center justify-center rounded-2xl bg-card px-6 py-10 text-center shadow-sm\">\r\n @if (icon) {\r\n <div class=\"flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-600 text-slate-500 dark:text-slate-300\">\r\n <mat-icon [svgIcon]=\"icon\"></mat-icon>\r\n </div>\r\n }\r\n\r\n <h3 class=\"mt-4 text-lg font-semibold\">{{ title }}</h3>\r\n\r\n @if (description) {\r\n <p class=\"mt-2 max-w-xl text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description }}</p>\r\n }\r\n\r\n @if (ctaLabel) {\r\n <div class=\"mt-4\">\r\n <button matButton=\"outlined\" type=\"button\" [disabled]=\"ctaDisabled\" (click)=\"emitAction()\">{{ ctaLabel }}</button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22
22
|
}
|
|
23
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
23
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatEmptyStateComponent, decorators: [{
|
|
24
24
|
type: Component,
|
|
25
25
|
args: [{ selector: 'cmat-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule], template: "<div class=\"flex flex-col items-center justify-center rounded-2xl bg-card px-6 py-10 text-center shadow-sm\">\r\n @if (icon) {\r\n <div class=\"flex h-16 w-16 items-center justify-center rounded-full bg-slate-100 dark:bg-slate-600 text-slate-500 dark:text-slate-300\">\r\n <mat-icon [svgIcon]=\"icon\"></mat-icon>\r\n </div>\r\n }\r\n\r\n <h3 class=\"mt-4 text-lg font-semibold\">{{ title }}</h3>\r\n\r\n @if (description) {\r\n <p class=\"mt-2 max-w-xl text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description }}</p>\r\n }\r\n\r\n @if (ctaLabel) {\r\n <div class=\"mt-4\">\r\n <button matButton=\"outlined\" type=\"button\" [disabled]=\"ctaDisabled\" (click)=\"emitAction()\">{{ ctaLabel }}</button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
26
26
|
}], propDecorators: { icon: [{
|
|
@@ -14,10 +14,10 @@ class CmatFilePreviewComponent {
|
|
|
14
14
|
this.src = '';
|
|
15
15
|
this.previewImage = true;
|
|
16
16
|
}
|
|
17
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatFilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatFilePreviewComponent, isStandalone: true, selector: "cmat-file-preview", inputs: { name: "name", description: "description", fileType: "fileType", size: "size", src: "src", previewImage: "previewImage" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n <div\r\n class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n @if (previewImage && src) {\r\n <cmat-image class=\"h-full w-full object-cover\" [src]=\"src\" [alt]=\"name\" [preview]=\"true\"></cmat-image>\r\n } @else {\r\n <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n }\r\n </div>\r\n\r\n <div class=\"min-w-0 flex-1\">\r\n <div class=\"flex flex-col gap-1\">\r\n <div class=\"truncate text-base font-semibold\">{{ name }}</div>\r\n @if (description) {\r\n <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n @if (fileType) {\r\n <span class=\"rounded-full bg-slate-100 dark:bg-slate-600 px-2 py-0.5\">{{ fileType }}</span>\r\n }\r\n @if (size) {\r\n <span class=\" text-slate-500 dark:text-slate-300\">{{ size }}</span>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CmatImageComponent, selector: "cmat-image", inputs: ["imageClass", "imageStyle", "src", "srcSet", "previewImageSrc", "previewImageSrcSet", "alt", "width", "height", "loading", "appendTo", "preview"], outputs: ["previewShowChange", "imageErrorEvent"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
19
|
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatFilePreviewComponent, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'cmat-file-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, CmatImageComponent, MatIconModule], template: "<div class=\"flex flex-col gap-4 rounded-2xl bg-card p-4 shadow-sm md:flex-row md:items-start\">\r\n <div\r\n class=\"flex h-24 w-24 flex-none items-center justify-center overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-600 text-slate-300 dark:text-slate-500\">\r\n @if (previewImage && src) {\r\n <cmat-image class=\"h-full w-full object-cover\" [src]=\"src\" [alt]=\"name\" [preview]=\"true\"></cmat-image>\r\n } @else {\r\n <mat-icon [svgIcon]=\"'mat_outline:description'\"></mat-icon>\r\n }\r\n </div>\r\n\r\n <div class=\"min-w-0 flex-1\">\r\n <div class=\"flex flex-col gap-1\">\r\n <div class=\"truncate text-base font-semibold\">{{ name }}</div>\r\n @if (description) {\r\n <div class=\"text-sm leading-6 text-slate-500 dark:text-slate-300\">{{ description }}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"mt-3 flex flex-wrap items-center gap-3 text-sm \">\r\n @if (fileType) {\r\n <span class=\"rounded-full bg-slate-100 dark:bg-slate-600 px-2 py-0.5\">{{ fileType }}</span>\r\n }\r\n @if (size) {\r\n <span class=\" text-slate-500 dark:text-slate-300\">{{ size }}</span>\r\n }\r\n </div>\r\n </div>\r\n</div>", styles: [":host{display:block}\n"] }]
|
|
23
23
|
}], propDecorators: { name: [{
|
|
@@ -45,10 +45,10 @@ class CmatFilterToolbarComponent {
|
|
|
45
45
|
this.searchControl.setValue('', { emitEvent: true });
|
|
46
46
|
this.clear.emit();
|
|
47
47
|
}
|
|
48
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
49
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
48
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatFilterToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatFilterToolbarComponent, isStandalone: true, selector: "cmat-filter-toolbar", inputs: { title: "title", description: "description", searchPlaceholder: "searchPlaceholder", showSearch: "showSearch", searchText: "searchText", clearable: "clearable" }, outputs: { searchTextChange: "searchTextChange", clear: "clear", searchSubmit: "searchSubmit" }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n <div class=\"flex flex-col gap-1\">\r\n @if (title) {\r\n <h3 class=\"text-lg font-semibold text-default\">{{ title }}</h3>\r\n }\r\n\r\n @if (description) {\r\n <p class=\"text-sm leading-6 text-secondary\">{{ description }}</p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n <div class=\"flex-1\">\r\n @if (showSearch) {\r\n <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n <input matInput [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n @if (clearable && searchControl.value) {\r\n <button mat-icon-button matSuffix type=\"button\" aria-label=\"\u6E05\u7A7A\u641C\u7D22\" (click)=\"clearSearch()\">\r\n <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
50
50
|
}
|
|
51
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
51
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatFilterToolbarComponent, decorators: [{
|
|
52
52
|
type: Component,
|
|
53
53
|
args: [{ selector: 'cmat-filter-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-4 rounded-2xl border border-default bg-card p-4 shadow-sm\">\r\n <div class=\"flex flex-col gap-1\">\r\n @if (title) {\r\n <h3 class=\"text-lg font-semibold text-default\">{{ title }}</h3>\r\n }\r\n\r\n @if (description) {\r\n <p class=\"text-sm leading-6 text-secondary\">{{ description }}</p>\r\n }\r\n </div>\r\n\r\n <div class=\"flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between\">\r\n <div class=\"flex-1\">\r\n @if (showSearch) {\r\n <mat-form-field class=\"w-full max-w-xl\" subscriptSizing=\"dynamic\">\r\n <mat-icon matPrefix class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:magnifying-glass'\"></mat-icon>\r\n <input matInput [placeholder]=\"searchPlaceholder\" [formControl]=\"searchControl\" (keyup.enter)=\"submitSearch()\" />\r\n @if (clearable && searchControl.value) {\r\n <button mat-icon-button matSuffix type=\"button\" aria-label=\"\u6E05\u7A7A\u641C\u7D22\" (click)=\"clearSearch()\">\r\n <mat-icon class=\"text-secondary\" [svgIcon]=\"'heroicons_outline:x-mark'\"></mat-icon>\r\n </button>\r\n }\r\n </mat-form-field>\r\n }\r\n </div>\r\n\r\n <div class=\"flex items-center gap-2\">\r\n <ng-content select=\"[cmatFilterToolbarActions]\"></ng-content>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
54
54
|
}], propDecorators: { title: [{
|
|
@@ -7,10 +7,10 @@ class CmatFormActionsComponent {
|
|
|
7
7
|
this.align = 'end';
|
|
8
8
|
this.divider = true;
|
|
9
9
|
}
|
|
10
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
11
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
10
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatFormActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatFormActionsComponent, isStandalone: true, selector: "cmat-form-actions", inputs: { align: "align", divider: "divider" }, ngImport: i0, template: "<div class=\"flex flex-col gap-3 border-default pt-4\" [class.border-t]=\"divider\" [class.items-start]=\"align === 'start'\" [class.items-center]=\"align === 'center'\" [class.items-end]=\"align === 'end'\">\r\n <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
12
12
|
}
|
|
13
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
13
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatFormActionsComponent, decorators: [{
|
|
14
14
|
type: Component,
|
|
15
15
|
args: [{ selector: 'cmat-form-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"flex flex-col gap-3 border-default pt-4\" [class.border-t]=\"divider\" [class.items-start]=\"align === 'start'\" [class.items-center]=\"align === 'center'\" [class.items-end]=\"align === 'end'\">\r\n <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n <ng-content select=\"[cmatFormActionsLeft]\"></ng-content>\r\n </div>\r\n\r\n <div class=\"flex flex-wrap gap-2\" [class.justify-start]=\"align === 'start'\" [class.justify-center]=\"align === 'center'\" [class.justify-end]=\"align === 'end'\">\r\n <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n </div>\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
16
16
|
}], propDecorators: { align: [{
|
|
@@ -28,10 +28,10 @@ class CmatFullscreenComponent {
|
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
31
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "\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\r\n<ng-template #defaultIconTpl>\r\n <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n", 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: "21.2.
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", 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: "\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\r\n<ng-template #defaultIconTpl>\r\n <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>\r\n" }]
|
|
37
37
|
}], propDecorators: { iconTpl: [{
|
|
@@ -28,10 +28,10 @@ class CmatHighlightService {
|
|
|
28
28
|
});
|
|
29
29
|
return lines.map(line => line.substring(indentation)).join('\n');
|
|
30
30
|
}
|
|
31
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
32
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.
|
|
31
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
32
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
|
|
33
33
|
}
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatHighlightService, decorators: [{
|
|
35
35
|
type: Injectable,
|
|
36
36
|
args: [{
|
|
37
37
|
providedIn: 'root'
|
|
@@ -82,10 +82,10 @@ class CmatHighlightComponent {
|
|
|
82
82
|
lang: this.lang
|
|
83
83
|
});
|
|
84
84
|
}
|
|
85
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
86
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
85
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
86
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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 }); }
|
|
87
87
|
}
|
|
88
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
88
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatHighlightComponent, decorators: [{
|
|
89
89
|
type: Component,
|
|
90
90
|
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"] }]
|
|
91
91
|
}], propDecorators: { code: [{
|
|
@@ -162,10 +162,10 @@ class CmatImageComponent {
|
|
|
162
162
|
const body = this._document.body;
|
|
163
163
|
body.style.overflow = this._originalOverflow ?? '';
|
|
164
164
|
}
|
|
165
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
166
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
166
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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>\r\n", 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;will-change:opacity,background-color;pointer-events:none;transition:opacity .3s ease}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080;pointer-events:auto}.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 .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);max-width:100vw;max-height:100vh;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden;transform:translateZ(0)}.cmat-image-preview-enter{animation:preview-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-preview-leave{animation:preview-leave-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay{background-color:#0006;transition:background-color .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);will-change:background-color,opacity;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .18s cubic-bezier(.2,0,0,1)}@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 }); }
|
|
167
167
|
}
|
|
168
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
168
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatImageComponent, decorators: [{
|
|
169
169
|
type: Component,
|
|
170
170
|
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>\r\n", 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;will-change:opacity,background-color;pointer-events:none;transition:opacity .3s ease}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080;pointer-events:auto}.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 .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);max-width:100vw;max-height:100vh;will-change:transform,opacity;transform-origin:center center;backface-visibility:hidden;transform:translateZ(0)}.cmat-image-preview-enter{animation:preview-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-preview-leave{animation:preview-leave-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay{background-color:#0006;transition:background-color .18s cubic-bezier(.2,0,0,1),opacity .18s cubic-bezier(.2,0,0,1);will-change:background-color,opacity;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .18s cubic-bezier(.2,0,0,1)}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .18s cubic-bezier(.2,0,0,1)}@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"] }]
|
|
171
171
|
}], propDecorators: { imageClass: [{
|
|
@@ -9,10 +9,10 @@ class CmatInlineLoadingComponent {
|
|
|
9
9
|
this.diameter = 20;
|
|
10
10
|
this.showText = true;
|
|
11
11
|
}
|
|
12
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
12
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatInlineLoadingComponent, isStandalone: true, selector: "cmat-inline-loading", inputs: { message: "message", diameter: "diameter", showText: "showText" }, ngImport: i0, template: "<div class=\"inline-flex items-center gap-2 rounded-full bg-hover px-3 py-1 text-sm text-secondary\">\r\n <mat-progress-spinner mode=\"indeterminate\" color=\"primary\" [diameter]=\"diameter\" [strokeWidth]=\"2\"></mat-progress-spinner>\r\n @if (showText) {\r\n <span>{{ message }}</span>\r\n }\r\n</div>\r\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14
14
|
}
|
|
15
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
15
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatInlineLoadingComponent, decorators: [{
|
|
16
16
|
type: Component,
|
|
17
17
|
args: [{ selector: 'cmat-inline-loading', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressSpinnerModule], template: "<div class=\"inline-flex items-center gap-2 rounded-full bg-hover px-3 py-1 text-sm text-secondary\">\r\n <mat-progress-spinner mode=\"indeterminate\" color=\"primary\" [diameter]=\"diameter\" [strokeWidth]=\"2\"></mat-progress-spinner>\r\n @if (showText) {\r\n <span>{{ message }}</span>\r\n }\r\n</div>\r\n", styles: [":host{display:inline-flex}\n"] }]
|
|
18
18
|
}], propDecorators: { message: [{
|
|
@@ -161,10 +161,10 @@ class CmatJsonEditorComponent {
|
|
|
161
161
|
},
|
|
162
162
|
});
|
|
163
163
|
}
|
|
164
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
165
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
165
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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 }], usesOnChanges: true, ngImport: i0, template: "@defer (on viewport) {\r\n <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n </div>\r\n}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}.cmat-jsoneditor{--jse-background-color: rgba(var(--cmat-bg-card-rgb), 1);--jse-text-color: var(--cmat-text-default);--jse-key-color: var(--cmat-text-default);--jse-delimiter-color: var(--cmat-text-hint);--jse-hover-background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
166
166
|
}
|
|
167
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
167
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
|
|
168
168
|
type: Component,
|
|
169
169
|
args: [{ selector: 'cmat-json-editor', preserveWhitespaces: false, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [], template: "@defer (on viewport) {\r\n <div #jsonEditorContainer class=\"cmat-jsoneditor\" [id]=\"id\"></div>\r\n} @placeholder {\r\n <div class=\"flex min-h-64 items-center justify-center rounded-2xl border border-dashed border-default bg-card px-4 py-6 text-sm text-secondary shadow-sm\">\r\n JSON \u7F16\u8F91\u5668\u52A0\u8F7D\u4E2D...\r\n </div>\r\n}\r\n", styles: [".cmat-jsoneditor .jse-main.svelte-sxaskb{min-height:24rem}.cmat-jsoneditor{--jse-background-color: rgba(var(--cmat-bg-card-rgb), 1);--jse-text-color: var(--cmat-text-default);--jse-key-color: var(--cmat-text-default);--jse-delimiter-color: var(--cmat-text-hint);--jse-hover-background-color:var(--mat-option-hover-state-layer-color, color-mix(in srgb, var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%), transparent))}\n"] }]
|
|
170
170
|
}], propDecorators: { options: [{
|
|
@@ -329,12 +329,12 @@ class CmatKnobInputComponent {
|
|
|
329
329
|
valueToDisplay() {
|
|
330
330
|
return this.valueTemplate.replace('{value}', this.value.toString());
|
|
331
331
|
}
|
|
332
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
333
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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: [
|
|
334
334
|
{ provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
|
|
335
335
|
], viewQueries: [{ propertyName: "_knobElementRef", first: true, predicate: ["knob"], descendants: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div #knob [attr.data-refresh]=\"refreshVersion()\" [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)\" (keydown.enter)=\"onKeyDown($event)\" (keydown.space)=\"onKeyDown($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>\r\n\r\n", 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 }); }
|
|
336
336
|
}
|
|
337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
|
|
338
338
|
type: Component,
|
|
339
339
|
args: [{ selector: 'cmat-knob-input', providers: [
|
|
340
340
|
{ provide: MatFormFieldControl, useExisting: CmatKnobInputComponent }
|
|
@@ -32,10 +32,10 @@ class CmatMasonryComponent {
|
|
|
32
32
|
}
|
|
33
33
|
this.distributedColumns.set(newDistributedColumns);
|
|
34
34
|
}
|
|
35
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", 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>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatMasonryComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
40
|
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>\r\n" }]
|
|
41
41
|
}], propDecorators: { columnsTemplate: [{
|
|
@@ -132,10 +132,10 @@ class CmatMaterialColorPickerComponent {
|
|
|
132
132
|
this.view = 'hues';
|
|
133
133
|
}
|
|
134
134
|
}
|
|
135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.
|
|
136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.
|
|
135
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
136
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", 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>\r\n", 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 }); }
|
|
137
137
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.
|
|
138
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
|
|
139
139
|
type: Component,
|
|
140
140
|
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>\r\n", styles: ["cmat-material-color-picker .mat-mdc-select-arrow-wrapper{display:none!important}\n"] }]
|
|
141
141
|
}], ctorParameters: () => [], propDecorators: { colorChanged: [{
|