cmat 0.0.88 → 0.0.89
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 +13 -11
- package/fesm2022/cmat-components-cascade.mjs.map +1 -1
- package/fesm2022/cmat-components-chip-input.mjs +3 -3
- package/fesm2022/cmat-components-code-editor.mjs +3 -3
- package/fesm2022/cmat-components-code-editor.mjs.map +1 -1
- package/fesm2022/cmat-components-color-picker.mjs +27 -27
- package/fesm2022/cmat-components-custom-formly.mjs +99 -98
- package/fesm2022/cmat-components-custom-formly.mjs.map +1 -1
- package/fesm2022/cmat-components-data-picker.mjs +21 -18
- package/fesm2022/cmat-components-data-picker.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 +4 -4
- package/fesm2022/cmat-components-filter-toolbar.mjs.map +1 -1
- package/fesm2022/cmat-components-form-actions.mjs +3 -3
- package/fesm2022/cmat-components-fullscreen.mjs +3 -3
- package/fesm2022/cmat-components-highlight.mjs +8 -7
- package/fesm2022/cmat-components-highlight.mjs.map +1 -1
- 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 +44 -43
- package/fesm2022/cmat-components-material-datetimepicker.mjs.map +1 -1
- 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 +5 -4
- package/fesm2022/cmat-components-qrcode.mjs.map +1 -1
- 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 +15 -14
- package/fesm2022/cmat-components-select-search.mjs.map +1 -1
- package/fesm2022/cmat-components-select-table.mjs +5 -5
- package/fesm2022/cmat-components-select-table.mjs.map +1 -1
- package/fesm2022/cmat-components-select-tree.mjs +3 -3
- package/fesm2022/cmat-components-skeleton.mjs +3 -3
- package/fesm2022/cmat-components-speed-dial.mjs +11 -10
- package/fesm2022/cmat-components-speed-dial.mjs.map +1 -1
- 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 +20 -19
- package/fesm2022/cmat-components-transfer-picker.mjs.map +1 -1
- 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 +5 -4
- package/fesm2022/cmat-directives-seamless-auto-scroll.mjs.map +1 -1
- 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 +3 -3
- package/fesm2022/cmat.mjs +588 -575
- package/fesm2022/cmat.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/overrides/angular-material.scss +10 -9
- package/types/cmat-components-code-editor.d.ts +1 -1
- package/types/cmat.d.ts +5 -5
|
@@ -22,10 +22,10 @@ class CmatEmptyStateComponent {
|
|
|
22
22
|
emitAction() {
|
|
23
23
|
this.ctaClick.emit();
|
|
24
24
|
}
|
|
25
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
25
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatEmptyStateComponent, isStandalone: true, selector: "cmat-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, ctaLabel: { classPropertyName: "ctaLabel", publicName: "ctaLabel", isSignal: true, isRequired: false, transformFunction: null }, ctaDisabled: { classPropertyName: "ctaDisabled", publicName: "ctaDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { ctaClick: "ctaClick" }, ngImport: i0, template: "<div\r\n class=\"flex flex-col items-center justify-center rounded-2xl bg-card px-6 py-10 text-center shadow-sm\"\r\n>\r\n @if (icon()) {\r\n <div\r\n 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 >\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\r\n class=\"mt-2 max-w-xl text-sm leading-6 text-slate-500 dark:text-slate-300\"\r\n >\r\n {{ description() }}\r\n </p>\r\n }\r\n\r\n @if (ctaLabel()) {\r\n <div class=\"mt-4\">\r\n <button\r\n matButton=\"outlined\"\r\n type=\"button\"\r\n [disabled]=\"ctaDisabled()\"\r\n (click)=\"emitAction()\"\r\n >\r\n {{ ctaLabel() }}\r\n </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 }); }
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatEmptyStateComponent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ selector: 'cmat-empty-state', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule], template: "<div\r\n class=\"flex flex-col items-center justify-center rounded-2xl bg-card px-6 py-10 text-center shadow-sm\"\r\n>\r\n @if (icon()) {\r\n <div\r\n 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 >\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\r\n class=\"mt-2 max-w-xl text-sm leading-6 text-slate-500 dark:text-slate-300\"\r\n >\r\n {{ description() }}\r\n </p>\r\n }\r\n\r\n @if (ctaLabel()) {\r\n <div class=\"mt-4\">\r\n <button\r\n matButton=\"outlined\"\r\n type=\"button\"\r\n [disabled]=\"ctaDisabled()\"\r\n (click)=\"emitAction()\"\r\n >\r\n {{ ctaLabel() }}\r\n </button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [":host{display:block}\n"] }]
|
|
31
31
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], ctaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaLabel", required: false }] }], ctaDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "ctaDisabled", required: false }] }], ctaClick: [{ type: i0.Output, args: ["ctaClick"] }] } });
|
|
@@ -20,10 +20,10 @@ class CmatFilePreviewComponent {
|
|
|
20
20
|
this.previewImage = input(true, /* @ts-ignore */
|
|
21
21
|
...(ngDevMode ? [{ debugName: "previewImage" }] : /* istanbul ignore next */ []));
|
|
22
22
|
}
|
|
23
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
23
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatFilePreviewComponent, isStandalone: true, selector: "cmat-file-preview", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, previewImage: { classPropertyName: "previewImage", publicName: "previewImage", isSignal: true, isRequired: false, transformFunction: null } }, 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\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 }); }
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFilePreviewComponent, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
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\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"] }]
|
|
29
29
|
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], previewImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImage", required: false }] }] } });
|
|
@@ -55,14 +55,14 @@ class CmatFilterToolbarComponent {
|
|
|
55
55
|
this.searchControl.setValue('', { emitEvent: true });
|
|
56
56
|
this.clear.emit();
|
|
57
57
|
}
|
|
58
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
59
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
58
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFilterToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
59
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatFilterToolbarComponent, isStandalone: true, selector: "cmat-filter-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchText: { classPropertyName: "searchText", publicName: "searchText", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTextChange: "searchTextChange", clear: "clear", searchSubmit: "searchSubmit" }, host: { classAttribute: "block" }, 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 matIconButton matSuffix type=\"button\" class=\"mx-2\" 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>", 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[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 }); }
|
|
60
60
|
}
|
|
61
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
61
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFilterToolbarComponent, decorators: [{
|
|
62
62
|
type: Component,
|
|
63
63
|
args: [{ selector: 'cmat-filter-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule], host: {
|
|
64
64
|
'class': 'block'
|
|
65
|
-
}, 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
|
|
65
|
+
}, 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 matIconButton matSuffix type=\"button\" class=\"mx-2\" 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>", styles: [":host{display:block}\n"] }]
|
|
66
66
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchText: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchText", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], searchTextChange: [{ type: i0.Output, args: ["searchTextChange"] }], clear: [{ type: i0.Output, args: ["clear"] }], searchSubmit: [{ type: i0.Output, args: ["searchSubmit"] }] } });
|
|
67
67
|
|
|
68
68
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cmat-components-filter-toolbar.mjs","sources":["../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.ts","../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.html","../../../projects/cmat/components/filter-toolbar/cmat-components-filter-toolbar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n DestroyRef,\r\n effect,\r\n inject,\r\n input,\r\n output,\r\n OnInit,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\n\r\n@Component({\r\n selector: 'cmat-filter-toolbar',\r\n templateUrl: './filter-toolbar.component.html',\r\n styleUrls: ['./filter-toolbar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule],\r\n host: {\r\n 'class': 'block'\r\n }\r\n})\r\nexport class CmatFilterToolbarComponent implements OnInit {\r\n readonly title = input<string>('');\r\n readonly description = input<string>('');\r\n readonly searchPlaceholder = input<string>('搜索');\r\n readonly showSearch = input<boolean>(true);\r\n readonly searchText = input<string>('');\r\n readonly clearable = input<boolean>(true);\r\n\r\n\r\n readonly searchTextChange = output<string>();\r\n readonly clear = output<void>();\r\n readonly searchSubmit = output<string>();\r\n\r\n\r\n readonly searchControl = new FormControl<string>('');\r\n private readonly _destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n effect(() => {\r\n const externalText = this.searchText();\r\n const currentControlValue = this.searchControl.value;\r\n \r\n if (externalText !== currentControlValue) {\r\n this.searchControl.setValue(externalText, { emitEvent: false });\r\n }\r\n });\r\n }\r\n\r\n ngOnInit(): void {\r\n this.searchControl.valueChanges\r\n .pipe(takeUntilDestroyed(this._destroyRef))\r\n .subscribe((value) => {\r\n const text = value ?? '';\r\n this.searchTextChange.emit(text);\r\n });\r\n }\r\n\r\n\r\n submitSearch(): void {\r\n this.searchSubmit.emit(this.searchControl.value ?? '');\r\n }\r\n\r\n clearSearch(): void {\r\n this.searchControl.setValue('', { emitEvent: true });\r\n this.clear.emit();\r\n }\r\n}","<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
|
|
1
|
+
{"version":3,"file":"cmat-components-filter-toolbar.mjs","sources":["../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.ts","../../../projects/cmat/components/filter-toolbar/filter-toolbar.component.html","../../../projects/cmat/components/filter-toolbar/cmat-components-filter-toolbar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n DestroyRef,\r\n effect,\r\n inject,\r\n input,\r\n output,\r\n OnInit,\r\n} from '@angular/core';\r\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\r\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatButtonModule } from '@angular/material/button';\r\nimport { MatFormFieldModule } from '@angular/material/form-field';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { MatInputModule } from '@angular/material/input';\r\n\r\n@Component({\r\n selector: 'cmat-filter-toolbar',\r\n templateUrl: './filter-toolbar.component.html',\r\n styleUrls: ['./filter-toolbar.component.scss'],\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n imports: [CommonModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, ReactiveFormsModule],\r\n host: {\r\n 'class': 'block'\r\n }\r\n})\r\nexport class CmatFilterToolbarComponent implements OnInit {\r\n readonly title = input<string>('');\r\n readonly description = input<string>('');\r\n readonly searchPlaceholder = input<string>('搜索');\r\n readonly showSearch = input<boolean>(true);\r\n readonly searchText = input<string>('');\r\n readonly clearable = input<boolean>(true);\r\n\r\n\r\n readonly searchTextChange = output<string>();\r\n readonly clear = output<void>();\r\n readonly searchSubmit = output<string>();\r\n\r\n\r\n readonly searchControl = new FormControl<string>('');\r\n private readonly _destroyRef = inject(DestroyRef);\r\n\r\n constructor() {\r\n effect(() => {\r\n const externalText = this.searchText();\r\n const currentControlValue = this.searchControl.value;\r\n \r\n if (externalText !== currentControlValue) {\r\n this.searchControl.setValue(externalText, { emitEvent: false });\r\n }\r\n });\r\n }\r\n\r\n ngOnInit(): void {\r\n this.searchControl.valueChanges\r\n .pipe(takeUntilDestroyed(this._destroyRef))\r\n .subscribe((value) => {\r\n const text = value ?? '';\r\n this.searchTextChange.emit(text);\r\n });\r\n }\r\n\r\n\r\n submitSearch(): void {\r\n this.searchSubmit.emit(this.searchControl.value ?? '');\r\n }\r\n\r\n clearSearch(): void {\r\n this.searchControl.setValue('', { emitEvent: true });\r\n this.clear.emit();\r\n }\r\n}","<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 matIconButton matSuffix type=\"button\" class=\"mx-2\" aria-label=\"清空搜索\" (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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -11,10 +11,10 @@ class CmatFormActionsComponent {
|
|
|
11
11
|
this.divider = input(true, /* @ts-ignore */
|
|
12
12
|
...(ngDevMode ? [{ debugName: "divider" }] : /* istanbul ignore next */ []));
|
|
13
13
|
}
|
|
14
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
15
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
14
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFormActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatFormActionsComponent, isStandalone: true, selector: "cmat-form-actions", inputs: { align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"flex flex-col gap-3 border-default pt-4\"\r\n [ngClass]=\"{'border-t':divider(),'items-start':align() === 'start','items-center':align() === 'center','items-end':align() === 'end'}\">\r\n <div class=\"flex flex-wrap gap-2\"\r\n [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','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\"\r\n [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n </div>\r\n</div>", styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: A11yModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16
16
|
}
|
|
17
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
17
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFormActionsComponent, decorators: [{
|
|
18
18
|
type: Component,
|
|
19
19
|
args: [{ selector: 'cmat-form-actions', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, A11yModule], template: "<div class=\"flex flex-col gap-3 border-default pt-4\"\r\n [ngClass]=\"{'border-t':divider(),'items-start':align() === 'start','items-center':align() === 'center','items-end':align() === 'end'}\">\r\n <div class=\"flex flex-wrap gap-2\"\r\n [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','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\"\r\n [ngClass]=\"{'justify-start':align() === 'start','justify-center':align() === 'center','justify-end':align() === 'end'}\">\r\n <ng-content select=\"[cmatFormActions]\"></ng-content>\r\n </div>\r\n</div>", styles: [":host{display:block}\n"] }]
|
|
20
20
|
}], propDecorators: { align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }] } });
|
|
@@ -32,10 +32,10 @@ class CmatFullscreenComponent {
|
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: { classPropertyName: "iconTpl", publicName: "iconTpl", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
|
|
37
37
|
}
|
|
38
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
40
40
|
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" }]
|
|
41
41
|
}], propDecorators: { iconTpl: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTpl", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
|
|
@@ -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: "22.0.
|
|
32
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.
|
|
31
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
32
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
|
|
33
33
|
}
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatHighlightService, decorators: [{
|
|
35
35
|
type: Injectable,
|
|
36
36
|
args: [{
|
|
37
37
|
providedIn: 'root'
|
|
@@ -44,7 +44,8 @@ class CmatHighlightComponent {
|
|
|
44
44
|
...(ngDevMode ? [undefined, { debugName: "code" }] : /* istanbul ignore next */ []));
|
|
45
45
|
this.lang = input(/* @ts-ignore */
|
|
46
46
|
...(ngDevMode ? [undefined, { debugName: "lang" }] : /* istanbul ignore next */ []));
|
|
47
|
-
this.templateRef = viewChild.required(TemplateRef
|
|
47
|
+
this.templateRef = viewChild.required(TemplateRef, /* @ts-ignore */
|
|
48
|
+
...(ngDevMode ? [{ debugName: "templateRef" }] : /* istanbul ignore next */ []));
|
|
48
49
|
this._highlightedCode = signal(null, /* @ts-ignore */
|
|
49
50
|
...(ngDevMode ? [{ debugName: "_highlightedCode" }] : /* istanbul ignore next */ []));
|
|
50
51
|
this._viewRef = null;
|
|
@@ -96,10 +97,10 @@ class CmatHighlightComponent {
|
|
|
96
97
|
}
|
|
97
98
|
this._highlightedCode.set(null);
|
|
98
99
|
}
|
|
99
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
100
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.
|
|
100
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
101
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.6", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, lang: { classPropertyName: "lang", publicName: "lang", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true, isSignal: true }], exportAs: ["cmatHighlight"], ngImport: i0, template: "<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 }); }
|
|
101
102
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatHighlightComponent, decorators: [{
|
|
103
104
|
type: Component,
|
|
104
105
|
args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', imports: [NgClass], template: "<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"] }]
|
|
105
106
|
}], ctorParameters: () => [], propDecorators: { code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], lang: [{ type: i0.Input, args: [{ isSignal: true, alias: "lang", required: false }] }], templateRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cmat-components-highlight.mjs","sources":["../../../projects/cmat/components/highlight/highlight.service.ts","../../../projects/cmat/components/highlight/highlight.component.ts","../../../projects/cmat/components/highlight/highlight.component.html","../../../projects/cmat/components/highlight/cmat-components-highlight.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport hljs from 'highlight.js';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class CmatHighlightService {\r\n highlight(code: string, language: string): string {\r\n code = this._format(code);\r\n return hljs.highlight(code, { language }).value;\r\n }\r\n\r\n private _format(code: string): string {\r\n let indentation = 0;\r\n const lines = code.split('\\n');\r\n while (lines.length && lines[0].trim() === '') {\r\n lines.shift();\r\n }\r\n\r\n while (lines.length && lines[lines.length - 1].trim() === '') {\r\n lines.pop();\r\n }\r\n lines.filter(line => line.length)\r\n .forEach((line, index) => {\r\n if (index === 0) {\r\n indentation = line.search(/\\S|$/);\r\n return;\r\n }\r\n indentation = Math.min(line.search(/\\S|$/), indentation);\r\n });\r\n return lines.map(line => line.substring(indentation)).join('\\n');\r\n }\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n EmbeddedViewRef,\r\n TemplateRef,\r\n ViewContainerRef,\r\n ViewEncapsulation,\r\n effect,\r\n inject,\r\n input,\r\n signal,\r\n SecurityContext,\r\n viewChild,\r\n untracked,\r\n} from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { CmatHighlightService } from './highlight.service';\r\n\r\n@Component({\r\n selector: 'textarea[cmat-highlight]',\r\n templateUrl: './highlight.component.html',\r\n styleUrls: ['./highlight.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatHighlight',\r\n imports: [NgClass],\r\n})\r\nexport class CmatHighlightComponent {\r\n readonly code = input<string>();\r\n readonly lang = input<string>();\r\n\r\n private readonly templateRef = viewChild.required(TemplateRef);\r\n\r\n private readonly _highlightedCode = signal<string | null>(null);\r\n\r\n private _viewRef: EmbeddedViewRef<any> | null = null;\r\n\r\n private readonly _domSanitizer = inject(DomSanitizer);\r\n private readonly _elementRef = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\r\n private readonly _cmatHighlightService = inject(CmatHighlightService);\r\n private readonly _viewContainerRef = inject(ViewContainerRef);\r\n\r\n constructor() {\r\n effect(() => {\r\n const codeInput = this.code();\r\n const lang = this.lang();\r\n\r\n if (!lang) {\r\n return;\r\n }\r\n\r\n untracked(() => {\r\n let codeToHighlight = codeInput;\r\n codeToHighlight ??= this._elementRef.nativeElement.value ?? '';\r\n\r\n if (!codeToHighlight) {\r\n this._clearView();\r\n return;\r\n }\r\n\r\n this._processHighlight(codeToHighlight, lang);\r\n });\r\n });\r\n }\r\n\r\n private _processHighlight(code: string, lang: string): void {\r\n if (!this.templateRef()) {\r\n return;\r\n }\r\n\r\n const highlighted = this._cmatHighlightService.highlight(code, lang);\r\n const sanitizedCode = this._domSanitizer.sanitize(SecurityContext.HTML, highlighted);\r\n\r\n if (sanitizedCode === null) {\r\n this._clearView();\r\n return;\r\n }\r\n\r\n this._highlightedCode.set(sanitizedCode);\r\n\r\n if (this._viewRef) {\r\n this._viewRef.destroy();\r\n this._viewRef = null;\r\n }\r\n\r\n this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef(), {\r\n highlightedCode: sanitizedCode,\r\n lang: lang,\r\n });\r\n }\r\n\r\n private _clearView(): void {\r\n if (this._viewRef) {\r\n this._viewRef.destroy();\r\n this._viewRef = null;\r\n }\r\n this._highlightedCode.set(null);\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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAMa,oBAAoB,CAAA;IAC7B,SAAS,CAAC,IAAY,EAAE,QAAgB,EAAA;AACpC,QAAA,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AACzB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK;IACnD;AAEQ,IAAA,OAAO,CAAC,IAAY,EAAA;QACxB,IAAI,WAAW,GAAG,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;AAC9B,QAAA,OAAO,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC3C,KAAK,CAAC,KAAK,EAAE;QACjB;AAEA,QAAA,OAAO,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC1D,KAAK,CAAC,GAAG,EAAE;QACf;QACA,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM;AAC3B,aAAA,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACrB,YAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACb,gBAAA,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;gBACjC;YACJ;AACA,YAAA,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;AAC5D,QAAA,CAAC,CAAC;QACN,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpE;8GAzBS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cAFjB,MAAM,EAAA,CAAA,CAAA;;2FAET,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAHhC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE;AACf,iBAAA;;;MCwBY,sBAAsB,CAAA;AAejC,IAAA,WAAA,GAAA;AAdS,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;4FAAU;AACtB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;4FAAU;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,WAAW
|
|
1
|
+
{"version":3,"file":"cmat-components-highlight.mjs","sources":["../../../projects/cmat/components/highlight/highlight.service.ts","../../../projects/cmat/components/highlight/highlight.component.ts","../../../projects/cmat/components/highlight/highlight.component.html","../../../projects/cmat/components/highlight/cmat-components-highlight.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport hljs from 'highlight.js';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class CmatHighlightService {\r\n highlight(code: string, language: string): string {\r\n code = this._format(code);\r\n return hljs.highlight(code, { language }).value;\r\n }\r\n\r\n private _format(code: string): string {\r\n let indentation = 0;\r\n const lines = code.split('\\n');\r\n while (lines.length && lines[0].trim() === '') {\r\n lines.shift();\r\n }\r\n\r\n while (lines.length && lines[lines.length - 1].trim() === '') {\r\n lines.pop();\r\n }\r\n lines.filter(line => line.length)\r\n .forEach((line, index) => {\r\n if (index === 0) {\r\n indentation = line.search(/\\S|$/);\r\n return;\r\n }\r\n indentation = Math.min(line.search(/\\S|$/), indentation);\r\n });\r\n return lines.map(line => line.substring(indentation)).join('\\n');\r\n }\r\n}\r\n","import { NgClass } from '@angular/common';\r\nimport {\r\n ChangeDetectionStrategy,\r\n Component,\r\n ElementRef,\r\n EmbeddedViewRef,\r\n TemplateRef,\r\n ViewContainerRef,\r\n ViewEncapsulation,\r\n effect,\r\n inject,\r\n input,\r\n signal,\r\n SecurityContext,\r\n viewChild,\r\n untracked,\r\n} from '@angular/core';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\nimport { CmatHighlightService } from './highlight.service';\r\n\r\n@Component({\r\n selector: 'textarea[cmat-highlight]',\r\n templateUrl: './highlight.component.html',\r\n styleUrls: ['./highlight.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatHighlight',\r\n imports: [NgClass],\r\n})\r\nexport class CmatHighlightComponent {\r\n readonly code = input<string>();\r\n readonly lang = input<string>();\r\n\r\n private readonly templateRef = viewChild.required(TemplateRef);\r\n\r\n private readonly _highlightedCode = signal<string | null>(null);\r\n\r\n private _viewRef: EmbeddedViewRef<any> | null = null;\r\n\r\n private readonly _domSanitizer = inject(DomSanitizer);\r\n private readonly _elementRef = inject<ElementRef<HTMLTextAreaElement>>(ElementRef);\r\n private readonly _cmatHighlightService = inject(CmatHighlightService);\r\n private readonly _viewContainerRef = inject(ViewContainerRef);\r\n\r\n constructor() {\r\n effect(() => {\r\n const codeInput = this.code();\r\n const lang = this.lang();\r\n\r\n if (!lang) {\r\n return;\r\n }\r\n\r\n untracked(() => {\r\n let codeToHighlight = codeInput;\r\n codeToHighlight ??= this._elementRef.nativeElement.value ?? '';\r\n\r\n if (!codeToHighlight) {\r\n this._clearView();\r\n return;\r\n }\r\n\r\n this._processHighlight(codeToHighlight, lang);\r\n });\r\n });\r\n }\r\n\r\n private _processHighlight(code: string, lang: string): void {\r\n if (!this.templateRef()) {\r\n return;\r\n }\r\n\r\n const highlighted = this._cmatHighlightService.highlight(code, lang);\r\n const sanitizedCode = this._domSanitizer.sanitize(SecurityContext.HTML, highlighted);\r\n\r\n if (sanitizedCode === null) {\r\n this._clearView();\r\n return;\r\n }\r\n\r\n this._highlightedCode.set(sanitizedCode);\r\n\r\n if (this._viewRef) {\r\n this._viewRef.destroy();\r\n this._viewRef = null;\r\n }\r\n\r\n this._viewRef = this._viewContainerRef.createEmbeddedView(this.templateRef(), {\r\n highlightedCode: sanitizedCode,\r\n lang: lang,\r\n });\r\n }\r\n\r\n private _clearView(): void {\r\n if (this._viewRef) {\r\n this._viewRef.destroy();\r\n this._viewRef = null;\r\n }\r\n this._highlightedCode.set(null);\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>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;MAMa,oBAAoB,CAAA;IAC7B,SAAS,CAAC,IAAY,EAAE,QAAgB,EAAA;AACpC,QAAA,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;AACzB,QAAA,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK;IACnD;AAEQ,IAAA,OAAO,CAAC,IAAY,EAAA;QACxB,IAAI,WAAW,GAAG,CAAC;QACnB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC;AAC9B,QAAA,OAAO,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC3C,KAAK,CAAC,KAAK,EAAE;QACjB;AAEA,QAAA,OAAO,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC1D,KAAK,CAAC,GAAG,EAAE;QACf;QACA,KAAK,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM;AAC3B,aAAA,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,KAAI;AACrB,YAAA,IAAI,KAAK,KAAK,CAAC,EAAE;AACb,gBAAA,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;gBACjC;YACJ;AACA,YAAA,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,WAAW,CAAC;AAC5D,QAAA,CAAC,CAAC;QACN,OAAO,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;IACpE;8GAzBS,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cAFjB,MAAM,EAAA,CAAA,CAAA;;2FAET,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAHhC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,UAAU,EAAE;AACf,iBAAA;;;MCwBY,sBAAsB,CAAA;AAejC,IAAA,WAAA,GAAA;AAdS,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;4FAAU;AACtB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK;4FAAU;AAEd,QAAA,IAAA,CAAA,WAAW,GAAG,SAAS,CAAC,QAAQ,CAAC,WAAW;wFAAC;QAE7C,IAAA,CAAA,gBAAgB,GAAG,MAAM,CAAgB,IAAI;6FAAC;QAEvD,IAAA,CAAA,QAAQ,GAAgC,IAAI;AAEnC,QAAA,IAAA,CAAA,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC;AACpC,QAAA,IAAA,CAAA,WAAW,GAAG,MAAM,CAAkC,UAAU,CAAC;AACjE,QAAA,IAAA,CAAA,qBAAqB,GAAG,MAAM,CAAC,oBAAoB,CAAC;AACpD,QAAA,IAAA,CAAA,iBAAiB,GAAG,MAAM,CAAC,gBAAgB,CAAC;QAG3D,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE;AAC7B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE;YAExB,IAAI,CAAC,IAAI,EAAE;gBACT;YACF;YAEA,SAAS,CAAC,MAAK;gBACb,IAAI,eAAe,GAAG,SAAS;gBAC/B,eAAe,KAAK,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,IAAI,EAAE;gBAE9D,IAAI,CAAC,eAAe,EAAE;oBACpB,IAAI,CAAC,UAAU,EAAE;oBACjB;gBACF;AAEA,gBAAA,IAAI,CAAC,iBAAiB,CAAC,eAAe,EAAE,IAAI,CAAC;AAC/C,YAAA,CAAC,CAAC;AACJ,QAAA,CAAC,CAAC;IACJ;IAEQ,iBAAiB,CAAC,IAAY,EAAE,IAAY,EAAA;AAClD,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;YACvB;QACF;AAEA,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC;AACpE,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,EAAE,WAAW,CAAC;AAEpF,QAAA,IAAI,aAAa,KAAK,IAAI,EAAE;YAC1B,IAAI,CAAC,UAAU,EAAE;YACjB;QACF;AAEA,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,aAAa,CAAC;AAExC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACtB;AAEA,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC,kBAAkB,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE;AAC5E,YAAA,eAAe,EAAE,aAAa;AAC9B,YAAA,IAAI,EAAE,IAAI;AACX,SAAA,CAAC;IACJ;IAEQ,UAAU,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE;AACvB,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;QACtB;AACA,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC;IACjC;8GAtEW,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAtB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAIiB,WAAW,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECjC/D,uTAKc,kGDsBF,OAAO,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAEN,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBATlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,0BAA0B,EAAA,aAAA,EAGrB,iBAAiB,CAAC,IAAI,EAAA,eAAA,EACpB,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,eAAe,EAAA,OAAA,EAChB,CAAC,OAAO,CAAC,EAAA,QAAA,EAAA,uTAAA,EAAA,MAAA,EAAA,CAAA,0CAAA,CAAA,EAAA;uSAMgC,WAAW,CAAA,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;AEjC/D;;AAEG;;;;"}
|
|
@@ -197,10 +197,10 @@ class CmatImageComponent {
|
|
|
197
197
|
const body = this._document.body;
|
|
198
198
|
body.style.overflow = this._originalOverflow ?? '';
|
|
199
199
|
}
|
|
200
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
201
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
200
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
201
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: { classPropertyName: "imageClass", publicName: "imageClass", isSignal: true, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrc: { classPropertyName: "previewImageSrc", publicName: "previewImageSrc", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrcSet: { classPropertyName: "previewImageSrcSet", publicName: "previewImageSrcSet", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "maskRef", first: true, predicate: ["mask"], descendants: true, isSignal: true }, { propertyName: "previewButtonRef", first: true, predicate: ["previewButton"], descendants: true, isSignal: true }, { propertyName: "closeButtonRef", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview() }\">\r\n <img \r\n [attr.src]=\"src()\" \r\n [attr.srcset]=\"srcSet()\" \r\n [attr.alt]=\"alt()\" \r\n [attr.width]=\"width()\" \r\n [attr.height]=\"height()\"\r\n [attr.loading]=\"loading()\" \r\n [ngStyle]=\"imageStyle()\" \r\n [class]=\"imageClass()\" \r\n (error)=\"imageError($event)\" />\r\n \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 <!-- \u7ED1\u5B9A computed signals -->\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\" \r\n [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\r\n [attr.srcset]=\"previewImageSrcSet()\" \r\n [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;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 }); }
|
|
202
202
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
203
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatImageComponent, decorators: [{
|
|
204
204
|
type: Component,
|
|
205
205
|
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 \r\n [attr.src]=\"src()\" \r\n [attr.srcset]=\"srcSet()\" \r\n [attr.alt]=\"alt()\" \r\n [attr.width]=\"width()\" \r\n [attr.height]=\"height()\"\r\n [attr.loading]=\"loading()\" \r\n [ngStyle]=\"imageStyle()\" \r\n [class]=\"imageClass()\" \r\n (error)=\"imageError($event)\" />\r\n \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 <!-- \u7ED1\u5B9A computed signals -->\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\" \r\n [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\r\n [attr.srcset]=\"previewImageSrcSet()\" \r\n [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;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"] }]
|
|
206
206
|
}], ctorParameters: () => [], propDecorators: { maskRef: [{ type: i0.ViewChild, args: ['mask', { isSignal: true }] }], previewButtonRef: [{ type: i0.ViewChild, args: ['previewButton', { isSignal: true }] }], closeButtonRef: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }], imageClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageClass", required: false }] }], imageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageStyle", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], srcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcSet", required: false }] }], previewImageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrc", required: false }] }], previewImageSrcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrcSet", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], previewShowChange: [{ type: i0.Output, args: ["previewShowChange"] }], imageErrorEvent: [{ type: i0.Output, args: ["imageErrorEvent"] }], onKeydownHandler: [{
|
|
@@ -12,10 +12,10 @@ class CmatInlineLoadingComponent {
|
|
|
12
12
|
this.showText = input(true, /* @ts-ignore */
|
|
13
13
|
...(ngDevMode ? [{ debugName: "showText" }] : /* istanbul ignore next */ []));
|
|
14
14
|
}
|
|
15
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
16
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
15
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatInlineLoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatInlineLoadingComponent, isStandalone: true, selector: "cmat-inline-loading", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null } }, 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 }); }
|
|
17
17
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatInlineLoadingComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
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"] }]
|
|
21
21
|
}], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }] } });
|
|
@@ -215,10 +215,10 @@ class CmatJsonEditorComponent {
|
|
|
215
215
|
});
|
|
216
216
|
this._editorSignal.set(editor);
|
|
217
217
|
}
|
|
218
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
219
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
218
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatJsonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
219
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatJsonEditorComponent, isStandalone: true, selector: "cmat-json-editor", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contentChanged: "contentChanged", pathChanged: "pathChanged" }, viewQueries: [{ propertyName: "jsonEditorContainer", first: true, predicate: ["jsonEditorContainer"], descendants: true, isSignal: 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}", 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 }); }
|
|
220
220
|
}
|
|
221
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
221
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatJsonEditorComponent, decorators: [{
|
|
222
222
|
type: Component,
|
|
223
223
|
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}", 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"] }]
|
|
224
224
|
}], ctorParameters: () => [], propDecorators: { jsonEditorContainer: [{ type: i0.ViewChild, args: ['jsonEditorContainer', { isSignal: true }] }], contentChanged: [{ type: i0.Output, args: ["contentChanged"] }], pathChanged: [{ type: i0.Output, args: ["pathChanged"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }] } });
|
|
@@ -376,12 +376,12 @@ class CmatKnobInputComponent {
|
|
|
376
376
|
valueToDisplay() {
|
|
377
377
|
return this.valueTemplate().replace('{value}', this.value.toString());
|
|
378
378
|
}
|
|
379
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
380
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
379
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatKnobInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
380
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatKnobInputComponent, isStandalone: true, selector: "cmat-knob-input", inputs: { valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, rangeColor: { classPropertyName: "rangeColor", publicName: "rangeColor", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, valueTemplate: { classPropertyName: "valueTemplate", publicName: "valueTemplate", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { listeners: { "keydown": "onKeyDown($event)", "mousedown": "onMouseDown($event)", "mouseup": "onMouseUp($event)", "touchstart": "onTouchStart($event)", "touchend": "onTouchEnd($event)" }, properties: { "attr.id": "id" } }, providers: [
|
|
381
381
|
{ provide: MatFormFieldControl, useExisting: CmatKnobInputComponent },
|
|
382
382
|
], viewQueries: [{ propertyName: "knobElementRef", first: true, predicate: ["knob"], descendants: true, isSignal: true }], exportAs: ["cmatKnobInput"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<div\r\n #knob\r\n tabindex=\"-1\"\r\n [attr.data-refresh]=\"refreshVersion()\"\r\n [class.cmat-knob-disabled]=\"disabled\"\r\n (focusin)=\"onFocusIn()\"\r\n (focusout)=\"onFocusOut($event)\"\r\n>\r\n <svg\r\n viewBox=\"0 0 100 100\"\r\n role=\"slider\"\r\n [style.width]=\"size() + 'px'\"\r\n [style.height]=\"size() + 'px'\"\r\n [attr.aria-valuemin]=\"min()\"\r\n [attr.aria-valuemax]=\"max()\"\r\n [attr.aria-valuenow]=\"value\"\r\n [attr.tabindex]=\"disabled ? -1 : 0\"\r\n (click)=\"onClick($event)\"\r\n (keydown.enter)=\"onKeyDown($event)\"\r\n (keydown.space)=\"onKeyDown($event)\"\r\n >\r\n <path\r\n class=\"knob-range\"\r\n [attr.d]=\"rangePath()\"\r\n [attr.stroke-width]=\"strokeWidth()\"\r\n [attr.stroke]=\"rangeColor()\"\r\n ></path>\r\n <path\r\n class=\"knob-value\"\r\n [attr.d]=\"valuePath()\"\r\n [attr.stroke-width]=\"strokeWidth()\"\r\n [attr.stroke]=\"valueColor()\"\r\n ></path>\r\n @if (showValue()) {\r\n <text\r\n text-anchor=\"middle\"\r\n class=\"knob-text\"\r\n [attr.x]=\"50\"\r\n [attr.y]=\"57\"\r\n [attr.fill]=\"textColor()\"\r\n [attr.name]=\"name()\"\r\n >\r\n {{ valueToDisplay() }}\r\n </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 }); }
|
|
383
383
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatKnobInputComponent, decorators: [{
|
|
385
385
|
type: Component,
|
|
386
386
|
args: [{ selector: 'cmat-knob-input', providers: [
|
|
387
387
|
{ provide: MatFormFieldControl, useExisting: CmatKnobInputComponent },
|
|
@@ -25,10 +25,10 @@ class CmatMasonryComponent {
|
|
|
25
25
|
}, /* @ts-ignore */
|
|
26
26
|
...(ngDevMode ? [{ debugName: "distributedColumns" }] : /* istanbul ignore next */ []));
|
|
27
27
|
}
|
|
28
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
29
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
28
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMasonryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.6", type: CmatMasonryComponent, isStandalone: true, selector: "cmat-masonry", inputs: { columnsTemplate: { classPropertyName: "columnsTemplate", publicName: "columnsTemplate", isSignal: true, isRequired: true, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cmatMasonry"], 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 }); }
|
|
30
30
|
}
|
|
31
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
31
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMasonryComponent, decorators: [{
|
|
32
32
|
type: Component,
|
|
33
33
|
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>" }]
|
|
34
34
|
}], propDecorators: { columnsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnsTemplate", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
|
|
@@ -141,10 +141,10 @@ class CmatMaterialColorPickerComponent {
|
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
144
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMaterialColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
145
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.6", type: CmatMaterialColorPickerComponent, isStandalone: true, selector: "cmat-material-color-picker", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, 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 \r\n value=\"init\" \r\n panelClass=\"min-w-64 overflow-hidden!\" \r\n [disableOptionCentering]=\"true\" \r\n [hideSingleSelectionIndicator]=\"true\"\r\n [disabled]=\"readonly()\" \r\n (openedChange)=\"onMenuOpen($event)\">\r\n \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 }); }
|
|
146
146
|
}
|
|
147
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
147
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: CmatMaterialColorPickerComponent, decorators: [{
|
|
148
148
|
type: Component,
|
|
149
149
|
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 \r\n value=\"init\" \r\n panelClass=\"min-w-64 overflow-hidden!\" \r\n [disableOptionCentering]=\"true\" \r\n [hideSingleSelectionIndicator]=\"true\"\r\n [disabled]=\"readonly()\" \r\n (openedChange)=\"onMenuOpen($event)\">\r\n \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"] }]
|
|
150
150
|
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], colorChanged: [{ type: i0.Output, args: ["colorChanged"] }] } });
|