cmat 0.0.43 → 0.0.44
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/animations/dropdown.css +16 -0
- package/animations/expand-collapse.css +27 -0
- package/animations/fade.css +105 -0
- package/animations/shake.css +9 -0
- package/animations/slide.css +71 -0
- package/animations/zoom.css +21 -0
- package/components/drawer/index.d.ts +2 -2
- package/components/image-viewer/index.d.ts +9 -17
- package/components/material-datetimepicker/index.d.ts +19 -13
- package/components/navigation/index.d.ts +0 -2
- package/components/password-strength/index.d.ts +7 -2
- package/components/popover/index.d.ts +0 -1
- package/fesm2022/cmat-components-adapter.mjs +9 -9
- package/fesm2022/cmat-components-breadcrumb.mjs +9 -9
- package/fesm2022/cmat-components-card.mjs +4 -5
- package/fesm2022/cmat-components-card.mjs.map +1 -1
- package/fesm2022/cmat-components-carousel.mjs +12 -12
- package/fesm2022/cmat-components-cascade.mjs +10 -11
- package/fesm2022/cmat-components-cascade.mjs.map +1 -1
- package/fesm2022/cmat-components-chip-input.mjs +3 -3
- package/fesm2022/cmat-components-custom-formly.mjs +88 -88
- package/fesm2022/cmat-components-custom-formly.mjs.map +1 -1
- package/fesm2022/cmat-components-date-range.mjs +3 -3
- package/fesm2022/cmat-components-drawer.mjs +28 -39
- package/fesm2022/cmat-components-drawer.mjs.map +1 -1
- package/fesm2022/cmat-components-fullscreen.mjs +3 -3
- package/fesm2022/cmat-components-highlight.mjs +6 -6
- package/fesm2022/cmat-components-image-viewer.mjs +49 -73
- package/fesm2022/cmat-components-image-viewer.mjs.map +1 -1
- package/fesm2022/cmat-components-json-editor.mjs +3 -3
- package/fesm2022/cmat-components-knob-input.mjs +3 -3
- package/fesm2022/cmat-components-masonry.mjs +4 -5
- package/fesm2022/cmat-components-masonry.mjs.map +1 -1
- package/fesm2022/cmat-components-material-color-picker.mjs +4 -5
- package/fesm2022/cmat-components-material-color-picker.mjs.map +1 -1
- package/fesm2022/cmat-components-material-datetimepicker.mjs +130 -111
- package/fesm2022/cmat-components-material-datetimepicker.mjs.map +1 -1
- package/fesm2022/cmat-components-navigation.mjs +75 -100
- package/fesm2022/cmat-components-navigation.mjs.map +1 -1
- package/fesm2022/cmat-components-opt-input.mjs +3 -3
- package/fesm2022/cmat-components-org-chart.mjs +9 -9
- package/fesm2022/cmat-components-pagination.mjs +12 -12
- package/fesm2022/cmat-components-password-strength.mjs +69 -163
- package/fesm2022/cmat-components-password-strength.mjs.map +1 -1
- package/fesm2022/cmat-components-popover.mjs +11 -11
- package/fesm2022/cmat-components-popover.mjs.map +1 -1
- package/fesm2022/cmat-components-progress-bar.mjs +3 -3
- package/fesm2022/cmat-components-qrcode.mjs +3 -3
- package/fesm2022/cmat-components-rating.mjs +3 -3
- package/fesm2022/cmat-components-select-search.mjs +9 -9
- package/fesm2022/cmat-components-select-table.mjs +3 -3
- package/fesm2022/cmat-components-select-tree.mjs +3 -3
- package/fesm2022/cmat-components-speed-dial.mjs +9 -9
- package/fesm2022/cmat-components-timeline.mjs +12 -12
- package/fesm2022/cmat-components-toast.mjs +9 -9
- package/fesm2022/cmat-components-transfer-picker.mjs +18 -18
- package/fesm2022/cmat-components-treetable.mjs +6 -6
- package/fesm2022/cmat-components-upload.mjs +9 -9
- package/fesm2022/cmat-directives-animate-on-scroll.mjs +6 -6
- package/fesm2022/cmat-directives-arrow-cursor.mjs +3 -3
- package/fesm2022/cmat-directives-autofocus.mjs +3 -3
- package/fesm2022/cmat-directives-data-exporter.mjs +21 -21
- package/fesm2022/cmat-directives-debounce.mjs +9 -9
- package/fesm2022/cmat-directives-digit-only.mjs +6 -6
- package/fesm2022/cmat-directives-equal-validator.mjs +3 -3
- package/fesm2022/cmat-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/package.json +54 -59
- package/styles/overrides/angular-material.scss +2 -2
- package/animations/index.d.ts +0 -5
- package/fesm2022/cmat-animations.mjs +0 -466
- package/fesm2022/cmat-animations.mjs.map +0 -1
|
@@ -511,8 +511,8 @@ class CmatDateRangeComponent {
|
|
|
511
511
|
// If meridiem doesn't exist, create a moment using 24-hours format and return in
|
|
512
512
|
return dayjs(value, 'HH:mm').second(0);
|
|
513
513
|
}
|
|
514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
515
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatDateRangeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
515
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatDateRangeComponent, isStandalone: true, selector: "cmat-date-range", inputs: { readonly: "readonly", dateFormat: "dateFormat", timeFormat: "timeFormat", timeRange: "timeRange", range: "range" }, outputs: { rangeChanged: "rangeChanged" }, providers: [
|
|
516
516
|
{
|
|
517
517
|
provide: NG_VALUE_ACCESSOR,
|
|
518
518
|
useExisting: forwardRef(() => CmatDateRangeComponent),
|
|
@@ -520,7 +520,7 @@ class CmatDateRangeComponent {
|
|
|
520
520
|
}
|
|
521
521
|
], viewQueries: [{ propertyName: "_matMonthView1", first: true, predicate: ["matMonthView1"], descendants: true }, { propertyName: "_matMonthView2", first: true, predicate: ["matMonthView2"], descendants: true }, { propertyName: "_pickerPanelOrigin", first: true, predicate: ["pickerPanelOrigin"], descendants: true, read: ElementRef }, { propertyName: "_pickerPanel", first: true, predicate: ["pickerPanel"], descendants: true }], exportAs: ["cmatDateRange"], ngImport: i0, template: "<div #pickerPanelOrigin role=\"presentation\" class=\"range\" (click)=\"openPickerPanel()\">\r\n\r\n <div class=\"start\">\r\n <div class=\"date\">{{range.startDate}}</div>\r\n @if (range.startTime) {\r\n <div class=\"time\">{{range.startTime}}</div>\r\n }\r\n </div>\r\n\r\n <div class=\"separator\">-</div>\r\n\r\n <div class=\"end\">\r\n <div class=\"date\">{{range.endDate}}</div>\r\n @if (range.endTime) {\r\n <div class=\"time\">{{range.endTime}}</div>\r\n }\r\n </div>\r\n\r\n</div>\r\n\r\n<ng-template #pickerPanel>\r\n\r\n <!-- Start -->\r\n <div class=\"start\">\r\n\r\n <div class=\"month\">\r\n <div class=\"month-header\">\r\n <button type=\"button\" class=\"previous-button\" matIconButton tabindex=\"1\" (click)=\"prev()\">\r\n <mat-icon [svgIcon]=\"'heroicons_outline:chevron-left'\"></mat-icon>\r\n </button>\r\n <div class=\"month-label\">{{getMonthLabel(1)}}</div>\r\n </div>\r\n <mat-month-view #matMonthView1 [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n [(activeDate)]=\"activeDates.month1\" (click)=\"$event.stopImmediatePropagation()\"\r\n (selectedChange)=\"onSelectedDateChange($event)\">\r\n </mat-month-view>\r\n </div>\r\n\r\n @if (timeRange) {\r\n <mat-form-field class=\"time start-time\">\r\n <input matInput tabindex=\"3\" [autocomplete]=\"'off'\" [formControl]=\"startTimeFormControl\"\r\n (blur)=\"updateStartTime($event)\">\r\n <mat-label>\u5F00\u59CB\u65F6\u95F4</mat-label>\r\n </mat-form-field>\r\n }\r\n\r\n </div>\r\n\r\n <!-- End -->\r\n <div class=\"end\">\r\n\r\n <div class=\"month\">\r\n <div class=\"month-header\">\r\n <div class=\"month-label\">{{getMonthLabel(2)}}</div>\r\n <button type=\"button\" class=\"next-button\" matIconButton tabindex=\"2\" (click)=\"next()\">\r\n <mat-icon [svgIcon]=\"'heroicons_outline:chevron-right'\"></mat-icon>\r\n </button>\r\n </div>\r\n <mat-month-view #matMonthView2 [dateFilter]=\"dateFilter()\" [dateClass]=\"dateClass()\"\r\n [(activeDate)]=\"activeDates.month2\" (click)=\"$event.stopImmediatePropagation()\"\r\n (selectedChange)=\"onSelectedDateChange($event)\">\r\n </mat-month-view>\r\n </div>\r\n\r\n @if (timeRange) {\r\n <mat-form-field class=\"time end-time\">\r\n <input matInput tabindex=\"4\" [formControl]=\"endTimeFormControl\" (blur)=\"updateEndTime($event)\">\r\n <mat-label>\u7ED3\u675F\u65F6\u95F4</mat-label>\r\n </mat-form-field>\r\n }\r\n\r\n </div>\r\n\r\n </ng-template>", styles: ["cmat-date-range{display:flex}cmat-date-range .range{display:flex;width:100%;align-items:center;height:48px;min-height:48px;max-height:48px;cursor:pointer}cmat-date-range .range .start,cmat-date-range .range .end{display:flex;align-items:center;height:100%;padding:0 16px;border-radius:6px;border-width:1px;line-height:1}cmat-date-range .range .date{white-space:nowrap}cmat-date-range .range .date+.time{margin-left:8px}cmat-date-range .range .time{white-space:nowrap}cmat-date-range .separator{margin:0 8px}.cmat-date-range-panel{border-radius:4px;padding:24px}.cmat-date-range-panel .start,.cmat-date-range-panel .end{display:flex;flex-direction:column}.cmat-date-range-panel .start .month,.cmat-date-range-panel .end .month{max-width:196px;min-width:196px;width:196px}.cmat-date-range-panel .start .month .month-header,.cmat-date-range-panel .end .month .month-header{position:relative;display:flex;align-items:center;justify-content:center;height:32px;margin-bottom:16px}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .next-button{position:absolute;width:24px!important;height:24px!important;min-height:24px!important;max-height:24px!important;line-height:24px!important}.cmat-date-range-panel .start .month .month-header .previous-button,.cmat-date-range-panel .end .month .month-header .previous-button{left:0}.cmat-date-range-panel .start .month .month-header .next-button,.cmat-date-range-panel .end .month .month-header .next-button{right:0}.cmat-date-range-panel .start .month .month-header .month-label,.cmat-date-range-panel .end .month .month-header .month-label{font-weight:500}.cmat-date-range-panel .start .month mat-month-view,.cmat-date-range-panel .end .month mat-month-view{display:flex;min-height:188px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table{width:100%;border-collapse:collapse}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr[aria-hidden=true]{display:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true],.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr:first-child td:first-child[aria-hidden=true]{visibility:hidden;pointer-events:none;opacity:0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody tr td .mat-calendar-body-cell-content{background-color:transparent!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-today{border:none!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell{width:28px!important;height:28px!important;padding:2px!important}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range:before{content:\"\";position:absolute;inset:2px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start:before{border-radius:999px 0 0 999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-start.cmat-date-range-end:before{right:2px;border-radius:999px}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell.cmat-date-range.cmat-date-range-end:before{border-radius:0 999px 999px 0}.cmat-date-range-panel .start .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content,.cmat-date-range-panel .end .month mat-month-view .mat-calendar-table tbody .mat-calendar-body-cell .mat-calendar-body-cell-content{position:relative;top:0;left:0;width:24px;height:24px;font-size:12px}.cmat-date-range-panel .time{width:100%;max-width:196px}.cmat-date-range-panel .start{align-items:flex-start;margin-right:20px}.cmat-date-range-panel .start .month .month-label{margin-left:8px}.cmat-date-range-panel .end{align-items:flex-end;margin-left:20px}.cmat-date-range-panel .end .month .month-label{margin-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatMonthView, selector: "mat-month-view", inputs: ["activeDate", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName", "activeDrag"], outputs: ["selectedChange", "_userSelection", "dragStarted", "dragEnded", "activeDateChange"], exportAs: ["matMonthView"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
522
522
|
}
|
|
523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
523
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatDateRangeComponent, decorators: [{
|
|
524
524
|
type: Component,
|
|
525
525
|
args: [{ selector: 'cmat-date-range', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDateRange', providers: [
|
|
526
526
|
{
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import { AnimationBuilder, animate, style } from '@angular/animations';
|
|
2
1
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
3
2
|
import * as i0 from '@angular/core';
|
|
4
|
-
import { Injectable, inject, EventEmitter, ElementRef, Renderer2, HostListener, HostBinding, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
3
|
+
import { Injectable, inject, EventEmitter, ElementRef, Renderer2, ChangeDetectorRef, HostListener, HostBinding, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
|
|
5
4
|
import { CmatUtilsService } from 'cmat/services/utils';
|
|
6
5
|
|
|
7
6
|
class CmatDrawerService {
|
|
@@ -33,10 +32,10 @@ class CmatDrawerService {
|
|
|
33
32
|
getComponent(name) {
|
|
34
33
|
return this._componentRegistry.get(name);
|
|
35
34
|
}
|
|
36
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
37
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
35
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatDrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
36
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatDrawerService, providedIn: 'root' }); }
|
|
38
37
|
}
|
|
39
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
38
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatDrawerService, decorators: [{
|
|
40
39
|
type: Injectable,
|
|
41
40
|
args: [{
|
|
42
41
|
providedIn: 'root'
|
|
@@ -56,12 +55,13 @@ class CmatDrawerComponent {
|
|
|
56
55
|
this.modeChanged = new EventEmitter();
|
|
57
56
|
this.openedChanged = new EventEmitter();
|
|
58
57
|
this.positionChanged = new EventEmitter();
|
|
59
|
-
this._animationBuilder = inject(AnimationBuilder);
|
|
60
58
|
this._elementRef = inject(ElementRef);
|
|
61
59
|
this._renderer2 = inject(Renderer2);
|
|
62
60
|
this._cmatDrawerService = inject(CmatDrawerService);
|
|
63
61
|
this._animationsEnabled = false;
|
|
64
62
|
this._hovered = false;
|
|
63
|
+
this._overlayClickDestroyFn = null;
|
|
64
|
+
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
65
65
|
}
|
|
66
66
|
get classList() {
|
|
67
67
|
/* eslint-disable @typescript-eslint/naming-convention */
|
|
@@ -228,19 +228,8 @@ class CmatDrawerComponent {
|
|
|
228
228
|
}
|
|
229
229
|
// Append the backdrop to the parent of the drawer
|
|
230
230
|
this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);
|
|
231
|
-
|
|
232
|
-
this.
|
|
233
|
-
animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1 }))
|
|
234
|
-
]).create(this._overlay);
|
|
235
|
-
// Once the animation is done...
|
|
236
|
-
this._player.onDone(() => {
|
|
237
|
-
// Destroy the player
|
|
238
|
-
this._player.destroy();
|
|
239
|
-
});
|
|
240
|
-
// Play the animation
|
|
241
|
-
this._player.play();
|
|
242
|
-
// Add an event listener to the overlay
|
|
243
|
-
this._overlay.addEventListener('click', () => {
|
|
231
|
+
this._overlay?.classList.add('cmat-drawer-overlay-enter');
|
|
232
|
+
this._overlayClickDestroyFn = this._renderer2.listen(this._overlay, 'click', () => {
|
|
244
233
|
this.close();
|
|
245
234
|
});
|
|
246
235
|
}
|
|
@@ -253,23 +242,22 @@ class CmatDrawerComponent {
|
|
|
253
242
|
if (!this._overlay) {
|
|
254
243
|
return;
|
|
255
244
|
}
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
// Remove the backdrop
|
|
269
|
-
this._overlay.parentNode?.removeChild(this._overlay);
|
|
270
|
-
this._overlay = null;
|
|
245
|
+
this._overlay.classList.remove('cmat-drawer-overlay-enter');
|
|
246
|
+
const handleAnimationEnd = (event) => {
|
|
247
|
+
if (event.animationName === 'drawer-overlay-leave') {
|
|
248
|
+
this._overlay?.removeEventListener('animationend', handleAnimationEnd);
|
|
249
|
+
if (this._overlayClickDestroyFn) {
|
|
250
|
+
this._overlayClickDestroyFn();
|
|
251
|
+
this._overlayClickDestroyFn = null;
|
|
252
|
+
}
|
|
253
|
+
if (this._overlay) {
|
|
254
|
+
this._overlay.parentNode?.removeChild(this._overlay);
|
|
255
|
+
this._overlay = null;
|
|
256
|
+
}
|
|
271
257
|
}
|
|
272
|
-
}
|
|
258
|
+
};
|
|
259
|
+
this._overlay.addEventListener('animationend', handleAnimationEnd);
|
|
260
|
+
this._overlay.classList.add('cmat-drawer-overlay-leave');
|
|
273
261
|
}
|
|
274
262
|
/**
|
|
275
263
|
* Open/close the drawer
|
|
@@ -293,15 +281,16 @@ class CmatDrawerComponent {
|
|
|
293
281
|
this._hideOverlay();
|
|
294
282
|
}
|
|
295
283
|
}
|
|
284
|
+
this._changeDetectorRef.markForCheck();
|
|
296
285
|
// Execute the observable
|
|
297
286
|
this.openedChanged.emit(open);
|
|
298
287
|
}
|
|
299
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
300
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
288
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
289
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CmatDrawerComponent, isStandalone: true, selector: "cmat-drawer", inputs: { fixed: "fixed", mode: "mode", name: "name", opened: "opened", position: "position", transparentOverlay: "transparentOverlay" }, outputs: { fixedChanged: "fixedChanged", modeChanged: "modeChanged", openedChanged: "openedChanged", positionChanged: "positionChanged" }, host: { listeners: { "mouseenter": "onMouseenter()", "mouseleave": "onMouseleave()" }, properties: { "class": "this.classList", "style": "this.styleList" } }, exportAs: ["cmatDrawer"], usesOnChanges: true, ngImport: i0, template: "<div class=\"cmat-drawer-content\">\r\n <ng-content></ng-content>\r\n</div>", styles: ["cmat-drawer{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:320px;min-width:320px;max-width:320px;z-index:300;box-shadow:0 2px 8px #00000059}cmat-drawer.cmat-drawer-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-drawer.cmat-drawer-animations-enabled .cmat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-drawer.cmat-drawer-mode-over{position:absolute;top:0;bottom:0}cmat-drawer.cmat-drawer-mode-over.cmat-drawer-fixed{position:fixed}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side{margin-left:-320px}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side.cmat-drawer-opened{margin-left:0}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-left .cmat-drawer-content{left:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side{margin-right:-320px}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side.cmat-drawer-opened{margin-right:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-right .cmat-drawer-content{right:0}cmat-drawer .cmat-drawer-content{position:absolute;display:flex;flex:1 1 auto;top:0;bottom:0;width:100%;height:100%;overflow:hidden}.cmat-drawer-overlay{position:absolute;inset:0;z-index:299;opacity:1;background-color:#0009}.cmat-drawer-overlay.cmat-drawer-overlay-fixed{position:fixed}.cmat-drawer-overlay.cmat-drawer-overlay-transparent{background-color:transparent}.cmat-drawer-overlay.cmat-drawer-overlay-enter{animation:drawer-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-drawer-overlay.cmat-drawer-overlay-leave{animation:drawer-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes drawer-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes drawer-overlay-leave{0%{opacity:1}to{opacity:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
301
290
|
}
|
|
302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
291
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatDrawerComponent, decorators: [{
|
|
303
292
|
type: Component,
|
|
304
|
-
args: [{ selector: 'cmat-drawer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDrawer', template: "<div class=\"cmat-drawer-content\">\r\n <ng-content></ng-content>\r\n</div>", styles: ["cmat-drawer{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:320px;min-width:320px;max-width:320px;z-index:300;box-shadow:0 2px 8px #00000059}cmat-drawer.cmat-drawer-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-drawer.cmat-drawer-animations-enabled .cmat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-drawer.cmat-drawer-mode-over{position:absolute;top:0;bottom:0}cmat-drawer.cmat-drawer-mode-over.cmat-drawer-fixed{position:fixed}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side{margin-left:-320px}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side.cmat-drawer-opened{margin-left:0}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-left .cmat-drawer-content{left:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side{margin-right:-320px}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side.cmat-drawer-opened{margin-right:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-right .cmat-drawer-content{right:0}cmat-drawer .cmat-drawer-content{position:absolute;display:flex;flex:1 1 auto;top:0;bottom:0;width:100%;height:100%;overflow:hidden}.cmat-drawer-overlay{position:absolute;inset:0;z-index:299;opacity:1;background-color:#0009}.cmat-drawer-overlay.cmat-drawer-overlay-fixed{position:fixed}.cmat-drawer-overlay.cmat-drawer-overlay-transparent{background-color:transparent}\n"] }]
|
|
293
|
+
args: [{ selector: 'cmat-drawer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatDrawer', template: "<div class=\"cmat-drawer-content\">\r\n <ng-content></ng-content>\r\n</div>", styles: ["cmat-drawer{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:320px;min-width:320px;max-width:320px;z-index:300;box-shadow:0 2px 8px #00000059}cmat-drawer.cmat-drawer-animations-enabled{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:visibility,margin-left,margin-right,transform,width,max-width,min-width}cmat-drawer.cmat-drawer-animations-enabled .cmat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:width,max-width,min-width}cmat-drawer.cmat-drawer-mode-over{position:absolute;top:0;bottom:0}cmat-drawer.cmat-drawer-mode-over.cmat-drawer-fixed{position:fixed}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side{margin-left:-320px}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-side.cmat-drawer-opened{margin-left:0}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over{left:0;transform:translate3d(-100%,0,0)}cmat-drawer.cmat-drawer-position-left.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-left .cmat-drawer-content{left:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side{margin-right:-320px}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-side.cmat-drawer-opened{margin-right:0}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over{right:0;transform:translate3d(100%,0,0)}cmat-drawer.cmat-drawer-position-right.cmat-drawer-mode-over.cmat-drawer-opened{transform:translateZ(0)}cmat-drawer.cmat-drawer-position-right .cmat-drawer-content{right:0}cmat-drawer .cmat-drawer-content{position:absolute;display:flex;flex:1 1 auto;top:0;bottom:0;width:100%;height:100%;overflow:hidden}.cmat-drawer-overlay{position:absolute;inset:0;z-index:299;opacity:1;background-color:#0009}.cmat-drawer-overlay.cmat-drawer-overlay-fixed{position:fixed}.cmat-drawer-overlay.cmat-drawer-overlay-transparent{background-color:transparent}.cmat-drawer-overlay.cmat-drawer-overlay-enter{animation:drawer-overlay-enter .3s cubic-bezier(.25,.8,.25,1)}.cmat-drawer-overlay.cmat-drawer-overlay-leave{animation:drawer-overlay-leave .3s cubic-bezier(.25,.8,.25,1)}@keyframes drawer-overlay-enter{0%{opacity:0}to{opacity:1}}@keyframes drawer-overlay-leave{0%{opacity:1}to{opacity:0}}\n"] }]
|
|
305
294
|
}], propDecorators: { fixed: [{
|
|
306
295
|
type: Input
|
|
307
296
|
}], mode: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"cmat-components-drawer.mjs","sources":["../../../projects/cmat/components/drawer/drawer.service.ts","../../../projects/cmat/components/drawer/drawer.component.ts","../../../projects/cmat/components/drawer/drawer.component.html","../../../projects/cmat/components/drawer/cmat-components-drawer.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { CmatDrawerComponent } from './drawer.component';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class CmatDrawerService {\r\n private _componentRegistry: Map<string, CmatDrawerComponent> = new Map<string, CmatDrawerComponent>();\r\n /**\r\n * Register drawer component\r\n *\r\n * @param name\r\n * @param component\r\n */\r\n registerComponent(name: string, component: CmatDrawerComponent): void {\r\n this._componentRegistry.set(name, component);\r\n }\r\n\r\n /**\r\n * Deregister drawer component\r\n *\r\n * @param name\r\n */\r\n deregisterComponent(name: string): void {\r\n this._componentRegistry.delete(name);\r\n }\r\n\r\n /**\r\n * Get drawer component from the registry\r\n *\r\n * @param name\r\n */\r\n getComponent(name: string): CmatDrawerComponent | void {\r\n return this._componentRegistry.get(name);\r\n }\r\n}\r\n","import { animate, AnimationBuilder, AnimationPlayer, style } from '@angular/animations';\r\nimport { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation, inject } from '@angular/core';\r\nimport { CmatUtilsService } from 'cmat/services/utils';\r\nimport { CmatDrawerService } from './drawer.service';\r\nimport { CmatDrawerMode, CmatDrawerPosition } from './drawer.types';\r\n\r\n@Component({\r\n selector: 'cmat-drawer',\r\n templateUrl: './drawer.component.html',\r\n styleUrls: ['./drawer.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatDrawer'\r\n})\r\nexport class CmatDrawerComponent implements OnChanges, OnInit, OnDestroy {\r\n /* eslint-disable @typescript-eslint/naming-convention */\r\n static ngAcceptInputType_fixed: BooleanInput;\r\n static ngAcceptInputType_opened: BooleanInput;\r\n static ngAcceptInputType_transparentOverlay: BooleanInput;\r\n /* eslint-enable @typescript-eslint/naming-convention */\r\n\r\n @Input() fixed: boolean = false;\r\n @Input() mode: CmatDrawerMode = 'side';\r\n @Input() name: string = inject(CmatUtilsService).randomId();\r\n @Input() opened: boolean = false;\r\n @Input() position: CmatDrawerPosition = 'left';\r\n @Input() transparentOverlay: boolean = false;\r\n @Output() readonly fixedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n @Output() readonly modeChanged: EventEmitter<CmatDrawerMode> = new EventEmitter<CmatDrawerMode>();\r\n @Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n @Output() readonly positionChanged: EventEmitter<CmatDrawerPosition> = new EventEmitter<CmatDrawerPosition>();\r\n\r\n private _animationBuilder = inject(AnimationBuilder);\r\n private _elementRef = inject(ElementRef);\r\n private _renderer2 = inject(Renderer2);\r\n private _cmatDrawerService = inject(CmatDrawerService); \r\n\r\n private _animationsEnabled: boolean = false;\r\n private _hovered: boolean = false;\r\n private _overlay: HTMLElement | null;\r\n private _player: AnimationPlayer;\r\n\r\n @HostBinding('class') get classList(): any {\r\n /* eslint-disable @typescript-eslint/naming-convention */\r\n return {\r\n 'cmat-drawer-animations-enabled': this._animationsEnabled,\r\n 'cmat-drawer-fixed': this.fixed,\r\n 'cmat-drawer-hover': this._hovered,\r\n [`cmat-drawer-mode-${this.mode}`]: true,\r\n 'cmat-drawer-opened': this.opened,\r\n [`cmat-drawer-position-${this.position}`]: true\r\n };\r\n }\r\n\r\n @HostBinding('style') get styleList(): any {\r\n return {\r\n 'visibility': this.opened ? 'visible' : 'hidden'\r\n };\r\n }\r\n\r\n @HostListener('mouseenter')\r\n onMouseenter(): void {\r\n // Enable the animations\r\n this._enableAnimations();\r\n\r\n // Set the hovered\r\n this._hovered = true;\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseleave(): void {\r\n // Enable the animations\r\n this._enableAnimations();\r\n\r\n // Set the hovered\r\n this._hovered = false;\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n // Fixed\r\n if ('fixed' in changes) {\r\n // Coerce the value to a boolean\r\n this.fixed = coerceBooleanProperty(changes['fixed'].currentValue);\r\n\r\n // Execute the observable\r\n this.fixedChanged.emit(this.fixed);\r\n }\r\n\r\n // Mode\r\n if ('mode' in changes) {\r\n // Get the previous and current values\r\n const previousMode = changes['mode'].previousValue;\r\n const currentMode = changes['mode'].currentValue;\r\n\r\n // Disable the animations\r\n this._disableAnimations();\r\n\r\n // If the mode changes: 'over -> side'\r\n if (previousMode === 'over' && currentMode === 'side') {\r\n // Hide the overlay\r\n this._hideOverlay();\r\n }\r\n\r\n // If the mode changes: 'side -> over'\r\n if (previousMode === 'side' && currentMode === 'over') {\r\n // If the drawer is opened\r\n if (this.opened) {\r\n // Show the overlay\r\n this._showOverlay();\r\n }\r\n }\r\n\r\n // Execute the observable\r\n this.modeChanged.emit(currentMode);\r\n\r\n // Enable the animations after a delay\r\n // The delay must be bigger than the current transition-duration\r\n // to make sure nothing will be animated while the mode is changing\r\n setTimeout(() => {\r\n this._enableAnimations();\r\n }, 500);\r\n }\r\n\r\n // Opened\r\n if ('opened' in changes) {\r\n // Coerce the value to a boolean\r\n const open = coerceBooleanProperty(changes['opened'].currentValue);\r\n\r\n // Open/close the drawer\r\n this._toggleOpened(open);\r\n }\r\n\r\n // Position\r\n if ('position' in changes) {\r\n // Execute the observable\r\n this.positionChanged.emit(this.position);\r\n }\r\n\r\n // Transparent overlay\r\n if ('transparentOverlay' in changes) {\r\n // Coerce the value to a boolean\r\n this.transparentOverlay = coerceBooleanProperty(changes['transparentOverlay'].currentValue);\r\n }\r\n }\r\n\r\n ngOnInit(): void {\r\n // Register the drawer\r\n this._cmatDrawerService.registerComponent(this.name, this);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n // Deregister the drawer from the registry\r\n this._cmatDrawerService.deregisterComponent(this.name);\r\n }\r\n\r\n open(): void {\r\n // Return if the drawer has already opened\r\n if (this.opened) {\r\n return;\r\n }\r\n\r\n // Open the drawer\r\n this._toggleOpened(true);\r\n }\r\n\r\n close(): void {\r\n // Return if the drawer has already closed\r\n if (!this.opened) {\r\n return;\r\n }\r\n\r\n // Close the drawer\r\n this._toggleOpened(false);\r\n }\r\n\r\n toggle(): void {\r\n if (this.opened) {\r\n this.close();\r\n }\r\n else {\r\n this.open();\r\n }\r\n }\r\n\r\n /**\r\n * Enable the animations\r\n *\r\n * @private\r\n */\r\n private _enableAnimations(): void {\r\n // Return if the animations are already enabled\r\n if (this._animationsEnabled) {\r\n return;\r\n }\r\n\r\n // Enable the animations\r\n this._animationsEnabled = true;\r\n }\r\n\r\n /**\r\n * Disable the animations\r\n *\r\n * @private\r\n */\r\n private _disableAnimations(): void {\r\n // Return if the animations are already disabled\r\n if (!this._animationsEnabled) {\r\n return;\r\n }\r\n\r\n // Disable the animations\r\n this._animationsEnabled = false;\r\n }\r\n\r\n /**\r\n * Show the backdrop\r\n *\r\n * @private\r\n */\r\n private _showOverlay(): void {\r\n // Create the backdrop element\r\n this._overlay = this._renderer2.createElement('div');\r\n\r\n // Return if overlay couldn't be create for some reason\r\n if (!this._overlay) {\r\n return;\r\n }\r\n\r\n // Add a class to the backdrop element\r\n this._overlay.classList.add('cmat-drawer-overlay');\r\n\r\n // Add a class depending on the fixed option\r\n if (this.fixed) {\r\n this._overlay.classList.add('cmat-drawer-overlay-fixed');\r\n }\r\n\r\n // Add a class depending on the transparentOverlay option\r\n if (this.transparentOverlay) {\r\n this._overlay.classList.add('cmat-drawer-overlay-transparent');\r\n }\r\n\r\n // Append the backdrop to the parent of the drawer\r\n this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);\r\n\r\n // Create the enter animation and attach it to the player\r\n this._player = this._animationBuilder.build([\r\n animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 1 }))\r\n ]).create(this._overlay);\r\n\r\n // Once the animation is done...\r\n this._player.onDone(() => {\r\n\r\n // Destroy the player\r\n this._player.destroy();\r\n });\r\n\r\n // Play the animation\r\n this._player.play();\r\n\r\n // Add an event listener to the overlay\r\n this._overlay.addEventListener('click', () => {\r\n this.close();\r\n });\r\n }\r\n\r\n /**\r\n * Hide the backdrop\r\n *\r\n * @private\r\n */\r\n private _hideOverlay(): void {\r\n if (!this._overlay) {\r\n return;\r\n }\r\n\r\n // Create the leave animation and attach it to the player\r\n this._player = this._animationBuilder.build([\r\n animate('300ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({ opacity: 0 }))\r\n ]).create(this._overlay);\r\n\r\n // Play the animation\r\n this._player.play();\r\n\r\n // Once the animation is done...\r\n this._player.onDone(() => {\r\n\r\n // Destroy the player\r\n this._player.destroy();\r\n\r\n // If the backdrop still exists...\r\n if (this._overlay) {\r\n // Remove the backdrop\r\n this._overlay.parentNode?.removeChild(this._overlay);\r\n this._overlay = null;\r\n }\r\n });\r\n }\r\n\r\n /**\r\n * Open/close the drawer\r\n *\r\n * @param open\r\n * @private\r\n */\r\n private _toggleOpened(open: boolean): void {\r\n // Set the opened\r\n this.opened = open;\r\n\r\n // Enable the animations\r\n this._enableAnimations();\r\n\r\n // If the mode is 'over'\r\n if (this.mode === 'over') {\r\n // If the drawer opens, show the overlay\r\n if (open) {\r\n this._showOverlay();\r\n }\r\n // Otherwise, close the overlay\r\n else {\r\n this._hideOverlay();\r\n }\r\n }\r\n\r\n // Execute the observable\r\n this.openedChanged.emit(open);\r\n }\r\n}\r\n","<div class=\"cmat-drawer-content\">\r\n <ng-content></ng-content>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"cmat-components-drawer.mjs","sources":["../../../projects/cmat/components/drawer/drawer.service.ts","../../../projects/cmat/components/drawer/drawer.component.ts","../../../projects/cmat/components/drawer/drawer.component.html","../../../projects/cmat/components/drawer/cmat-components-drawer.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\r\nimport { CmatDrawerComponent } from './drawer.component';\r\n\r\n@Injectable({\r\n providedIn: 'root'\r\n})\r\nexport class CmatDrawerService {\r\n private _componentRegistry: Map<string, CmatDrawerComponent> = new Map<string, CmatDrawerComponent>();\r\n /**\r\n * Register drawer component\r\n *\r\n * @param name\r\n * @param component\r\n */\r\n registerComponent(name: string, component: CmatDrawerComponent): void {\r\n this._componentRegistry.set(name, component);\r\n }\r\n\r\n /**\r\n * Deregister drawer component\r\n *\r\n * @param name\r\n */\r\n deregisterComponent(name: string): void {\r\n this._componentRegistry.delete(name);\r\n }\r\n\r\n /**\r\n * Get drawer component from the registry\r\n *\r\n * @param name\r\n */\r\n getComponent(name: string): CmatDrawerComponent | void {\r\n return this._componentRegistry.get(name);\r\n }\r\n}\r\n","import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';\r\nimport { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, HostBinding, HostListener, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewEncapsulation, inject } from '@angular/core';\r\nimport { CmatUtilsService } from 'cmat/services/utils';\r\nimport { CmatDrawerService } from './drawer.service';\r\nimport { CmatDrawerMode, CmatDrawerPosition } from './drawer.types';\r\n\r\n@Component({\r\n selector: 'cmat-drawer',\r\n templateUrl: './drawer.component.html',\r\n styleUrls: ['./drawer.component.scss'],\r\n encapsulation: ViewEncapsulation.None,\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n exportAs: 'cmatDrawer'\r\n})\r\nexport class CmatDrawerComponent implements OnChanges, OnInit, OnDestroy {\r\n /* eslint-disable @typescript-eslint/naming-convention */\r\n static ngAcceptInputType_fixed: BooleanInput;\r\n static ngAcceptInputType_opened: BooleanInput;\r\n static ngAcceptInputType_transparentOverlay: BooleanInput;\r\n /* eslint-enable @typescript-eslint/naming-convention */\r\n\r\n @Input() fixed: boolean = false;\r\n @Input() mode: CmatDrawerMode = 'side';\r\n @Input() name: string = inject(CmatUtilsService).randomId();\r\n @Input() opened: boolean = false;\r\n @Input() position: CmatDrawerPosition = 'left';\r\n @Input() transparentOverlay: boolean = false;\r\n @Output() readonly fixedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n @Output() readonly modeChanged: EventEmitter<CmatDrawerMode> = new EventEmitter<CmatDrawerMode>();\r\n @Output() readonly openedChanged: EventEmitter<boolean> = new EventEmitter<boolean>();\r\n @Output() readonly positionChanged: EventEmitter<CmatDrawerPosition> = new EventEmitter<CmatDrawerPosition>();\r\n\r\n private _elementRef = inject(ElementRef);\r\n private _renderer2 = inject(Renderer2);\r\n private _cmatDrawerService = inject(CmatDrawerService);\r\n\r\n private _animationsEnabled: boolean = false;\r\n private _hovered: boolean = false;\r\n private _overlay: HTMLElement | null;\r\n private _overlayClickDestroyFn: (() => void) | null = null;\r\n private _changeDetectorRef = inject(ChangeDetectorRef);\r\n\r\n @HostBinding('class') get classList(): any {\r\n /* eslint-disable @typescript-eslint/naming-convention */\r\n return {\r\n 'cmat-drawer-animations-enabled': this._animationsEnabled,\r\n 'cmat-drawer-fixed': this.fixed,\r\n 'cmat-drawer-hover': this._hovered,\r\n [`cmat-drawer-mode-${this.mode}`]: true,\r\n 'cmat-drawer-opened': this.opened,\r\n [`cmat-drawer-position-${this.position}`]: true\r\n };\r\n }\r\n\r\n @HostBinding('style') get styleList(): any {\r\n return {\r\n 'visibility': this.opened ? 'visible' : 'hidden'\r\n };\r\n }\r\n\r\n @HostListener('mouseenter')\r\n onMouseenter(): void {\r\n // Enable the animations\r\n this._enableAnimations();\r\n\r\n // Set the hovered\r\n this._hovered = true;\r\n }\r\n\r\n @HostListener('mouseleave')\r\n onMouseleave(): void {\r\n // Enable the animations\r\n this._enableAnimations();\r\n\r\n // Set the hovered\r\n this._hovered = false;\r\n }\r\n\r\n ngOnChanges(changes: SimpleChanges): void {\r\n // Fixed\r\n if ('fixed' in changes) {\r\n // Coerce the value to a boolean\r\n this.fixed = coerceBooleanProperty(changes['fixed'].currentValue);\r\n\r\n // Execute the observable\r\n this.fixedChanged.emit(this.fixed);\r\n }\r\n\r\n // Mode\r\n if ('mode' in changes) {\r\n // Get the previous and current values\r\n const previousMode = changes['mode'].previousValue;\r\n const currentMode = changes['mode'].currentValue;\r\n\r\n // Disable the animations\r\n this._disableAnimations();\r\n\r\n // If the mode changes: 'over -> side'\r\n if (previousMode === 'over' && currentMode === 'side') {\r\n // Hide the overlay\r\n this._hideOverlay();\r\n }\r\n\r\n // If the mode changes: 'side -> over'\r\n if (previousMode === 'side' && currentMode === 'over') {\r\n // If the drawer is opened\r\n if (this.opened) {\r\n // Show the overlay\r\n this._showOverlay();\r\n }\r\n }\r\n\r\n // Execute the observable\r\n this.modeChanged.emit(currentMode);\r\n\r\n // Enable the animations after a delay\r\n // The delay must be bigger than the current transition-duration\r\n // to make sure nothing will be animated while the mode is changing\r\n setTimeout(() => {\r\n this._enableAnimations();\r\n }, 500);\r\n }\r\n\r\n // Opened\r\n if ('opened' in changes) {\r\n // Coerce the value to a boolean\r\n const open = coerceBooleanProperty(changes['opened'].currentValue);\r\n\r\n // Open/close the drawer\r\n this._toggleOpened(open);\r\n }\r\n\r\n // Position\r\n if ('position' in changes) {\r\n // Execute the observable\r\n this.positionChanged.emit(this.position);\r\n }\r\n\r\n // Transparent overlay\r\n if ('transparentOverlay' in changes) {\r\n // Coerce the value to a boolean\r\n this.transparentOverlay = coerceBooleanProperty(changes['transparentOverlay'].currentValue);\r\n }\r\n }\r\n\r\n ngOnInit(): void {\r\n // Register the drawer\r\n this._cmatDrawerService.registerComponent(this.name, this);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n // Deregister the drawer from the registry\r\n this._cmatDrawerService.deregisterComponent(this.name);\r\n }\r\n\r\n open(): void {\r\n // Return if the drawer has already opened\r\n if (this.opened) {\r\n return;\r\n }\r\n\r\n // Open the drawer\r\n this._toggleOpened(true);\r\n }\r\n\r\n close(): void {\r\n // Return if the drawer has already closed\r\n if (!this.opened) {\r\n return;\r\n }\r\n\r\n // Close the drawer\r\n this._toggleOpened(false);\r\n }\r\n\r\n toggle(): void {\r\n if (this.opened) {\r\n this.close();\r\n }\r\n else {\r\n this.open();\r\n }\r\n }\r\n\r\n /**\r\n * Enable the animations\r\n *\r\n * @private\r\n */\r\n private _enableAnimations(): void {\r\n // Return if the animations are already enabled\r\n if (this._animationsEnabled) {\r\n return;\r\n }\r\n\r\n // Enable the animations\r\n this._animationsEnabled = true;\r\n }\r\n\r\n /**\r\n * Disable the animations\r\n *\r\n * @private\r\n */\r\n private _disableAnimations(): void {\r\n // Return if the animations are already disabled\r\n if (!this._animationsEnabled) {\r\n return;\r\n }\r\n\r\n // Disable the animations\r\n this._animationsEnabled = false;\r\n }\r\n\r\n /**\r\n * Show the backdrop\r\n *\r\n * @private\r\n */\r\n private _showOverlay(): void {\r\n // Create the backdrop element\r\n this._overlay = this._renderer2.createElement('div');\r\n\r\n // Return if overlay couldn't be create for some reason\r\n if (!this._overlay) {\r\n return;\r\n }\r\n\r\n // Add a class to the backdrop element\r\n this._overlay.classList.add('cmat-drawer-overlay');\r\n\r\n // Add a class depending on the fixed option\r\n if (this.fixed) {\r\n this._overlay.classList.add('cmat-drawer-overlay-fixed');\r\n }\r\n\r\n // Add a class depending on the transparentOverlay option\r\n if (this.transparentOverlay) {\r\n this._overlay.classList.add('cmat-drawer-overlay-transparent');\r\n }\r\n\r\n // Append the backdrop to the parent of the drawer\r\n this._renderer2.appendChild(this._elementRef.nativeElement.parentElement, this._overlay);\r\n\r\n this._overlay?.classList.add('cmat-drawer-overlay-enter');\r\n\r\n this._overlayClickDestroyFn = this._renderer2.listen(this._overlay, 'click', () => {\r\n this.close();\r\n });\r\n }\r\n\r\n /**\r\n * Hide the backdrop\r\n *\r\n * @private\r\n */\r\n private _hideOverlay(): void {\r\n if (!this._overlay) {\r\n return;\r\n }\r\n\r\n this._overlay.classList.remove('cmat-drawer-overlay-enter');\r\n\r\n const handleAnimationEnd = (event: AnimationEvent): void => {\r\n if (event.animationName === 'drawer-overlay-leave') {\r\n this._overlay?.removeEventListener('animationend', handleAnimationEnd);\r\n\r\n if (this._overlayClickDestroyFn) {\r\n this._overlayClickDestroyFn();\r\n this._overlayClickDestroyFn = null;\r\n }\r\n\r\n if (this._overlay) {\r\n this._overlay.parentNode?.removeChild(this._overlay);\r\n this._overlay = null;\r\n }\r\n }\r\n };\r\n\r\n this._overlay.addEventListener('animationend', handleAnimationEnd);\r\n\r\n this._overlay.classList.add('cmat-drawer-overlay-leave');\r\n }\r\n\r\n /**\r\n * Open/close the drawer\r\n *\r\n * @param open\r\n * @private\r\n */\r\n private _toggleOpened(open: boolean): void {\r\n // Set the opened\r\n this.opened = open;\r\n\r\n // Enable the animations\r\n this._enableAnimations();\r\n\r\n // If the mode is 'over'\r\n if (this.mode === 'over') {\r\n // If the drawer opens, show the overlay\r\n if (open) {\r\n this._showOverlay();\r\n }\r\n // Otherwise, close the overlay\r\n else {\r\n this._hideOverlay();\r\n }\r\n }\r\n\r\n this._changeDetectorRef.markForCheck();\r\n\r\n // Execute the observable\r\n this.openedChanged.emit(open);\r\n }\r\n}\r\n","<div class=\"cmat-drawer-content\">\r\n <ng-content></ng-content>\r\n</div>","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -28,10 +28,10 @@ class CmatFullscreenComponent {
|
|
|
28
28
|
});
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
31
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatFullscreenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CmatFullscreenComponent, isStandalone: true, selector: "cmat-fullscreen", inputs: { iconTpl: "iconTpl", tooltip: "tooltip" }, exportAs: ["cmatFullscreen"], ngImport: i0, template: "<!-- Button -->\r\n<button type=\"button\" matIconButton [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
33
33
|
}
|
|
34
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
34
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatFullscreenComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
36
|
args: [{ selector: 'cmat-fullscreen', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatFullscreen', imports: [MatButtonModule, MatTooltipModule, NgTemplateOutlet, MatIconModule], template: "<!-- Button -->\r\n<button type=\"button\" matIconButton [matTooltip]=\"tooltip || '\u5207\u6362\u5168\u5C4F'\" (click)=\"toggleFullscreen()\">\r\n <ng-container [ngTemplateOutlet]=\"iconTpl || defaultIconTpl\"></ng-container>\r\n</button>\r\n\r\n<!-- Default icon -->\r\n<ng-template #defaultIconTpl>\r\n <mat-icon [svgIcon]=\"'heroicons_outline:arrows-pointing-out'\"></mat-icon>\r\n</ng-template>" }]
|
|
37
37
|
}], propDecorators: { iconTpl: [{
|
|
@@ -38,10 +38,10 @@ class CmatHighlightService {
|
|
|
38
38
|
// indentation, join them together and return it
|
|
39
39
|
return lines.map(line => line.substring(indentation)).join('\n');
|
|
40
40
|
}
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
42
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
41
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHighlightService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
42
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHighlightService, providedIn: 'root' }); }
|
|
43
43
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
44
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHighlightService, decorators: [{
|
|
45
45
|
type: Injectable,
|
|
46
46
|
args: [{
|
|
47
47
|
providedIn: 'root'
|
|
@@ -108,10 +108,10 @@ class CmatHighlightComponent {
|
|
|
108
108
|
// Detect the changes
|
|
109
109
|
this._viewRef.detectChanges();
|
|
110
110
|
}
|
|
111
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
112
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.4", type: CmatHighlightComponent, isStandalone: true, selector: "textarea[cmat-highlight]", inputs: { code: "code", lang: "lang" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: TemplateRef, descendants: true }], exportAs: ["cmatHighlight"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n </pre>\r\n </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
113
113
|
}
|
|
114
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
114
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatHighlightComponent, decorators: [{
|
|
115
115
|
type: Component,
|
|
116
116
|
args: [{ selector: 'textarea[cmat-highlight]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatHighlight', imports: [NgClass], template: "<ng-content></ng-content>\r\n\r\n<ng-template let-highlightedCode=\"highlightedCode\" let-lang=\"lang\">\r\n <div class=\"cmat-highlight cmat-highlight-code-container\">\r\n <pre [ngClass]=\"'language-' + lang\"><code [ngClass]=\"'language-' + lang\" [innerHTML]=\"highlightedCode\"></code>\r\n </pre>\r\n </div>\r\n</ng-template>", styles: ["textarea[cmat-highlight]{display:none}\n"] }]
|
|
117
117
|
}], propDecorators: { code: [{
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { trigger, transition, style, animate } from '@angular/animations';
|
|
2
1
|
import * as i1 from '@angular/common';
|
|
3
2
|
import { CommonModule } from '@angular/common';
|
|
4
3
|
import * as i0 from '@angular/core';
|
|
@@ -14,14 +13,6 @@ class CmatImageComponent {
|
|
|
14
13
|
* 启动预览功能。
|
|
15
14
|
*/
|
|
16
15
|
this.preview = false;
|
|
17
|
-
/**
|
|
18
|
-
* 切换时显示动画
|
|
19
|
-
*/
|
|
20
|
-
this.showTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
|
|
21
|
-
/**
|
|
22
|
-
* 切换时隐藏动画
|
|
23
|
-
*/
|
|
24
|
-
this.hideTransitionOptions = '150ms cubic-bezier(0, 0, 0.2, 1)';
|
|
25
16
|
/**
|
|
26
17
|
* 监听预览显示/隐藏.
|
|
27
18
|
*/
|
|
@@ -35,6 +26,8 @@ class CmatImageComponent {
|
|
|
35
26
|
this.previewVisible = false;
|
|
36
27
|
this.rotate = 0;
|
|
37
28
|
this.scale = 1;
|
|
29
|
+
this._loadingPreview = false;
|
|
30
|
+
this._closePreviewByEscape = false;
|
|
38
31
|
this._document = inject(DOCUMENT);
|
|
39
32
|
this._changeDetectorRef = inject(ChangeDetectorRef);
|
|
40
33
|
this._zoomSettings = {
|
|
@@ -50,6 +43,35 @@ class CmatImageComponent {
|
|
|
50
43
|
get isZoomInDisabled() {
|
|
51
44
|
return this.scale + this._zoomSettings.step >= this._zoomSettings.max;
|
|
52
45
|
}
|
|
46
|
+
set mask(value) {
|
|
47
|
+
if (value) {
|
|
48
|
+
this._mask = value.nativeElement;
|
|
49
|
+
if (this._mask && this._loadingPreview) {
|
|
50
|
+
this.appendContainer();
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
;
|
|
55
|
+
set previewButton(value) {
|
|
56
|
+
if (value) {
|
|
57
|
+
this._previewButton = value.nativeElement;
|
|
58
|
+
if (this._previewButton && this._closePreviewByEscape) {
|
|
59
|
+
this._previewButton.focus();
|
|
60
|
+
this._closePreviewByEscape = false;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
;
|
|
65
|
+
set closeButton(value) {
|
|
66
|
+
if (value) {
|
|
67
|
+
this._closeButton = value.nativeElement;
|
|
68
|
+
if (this._closeButton && this._loadingPreview) {
|
|
69
|
+
this._closeButton.focus();
|
|
70
|
+
this._loadingPreview = false;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
;
|
|
53
75
|
onKeydownHandler() {
|
|
54
76
|
if (this.previewVisible) {
|
|
55
77
|
this.closePreview();
|
|
@@ -59,16 +81,16 @@ class CmatImageComponent {
|
|
|
59
81
|
if (this.preview) {
|
|
60
82
|
this.maskVisible = true;
|
|
61
83
|
this.previewVisible = true;
|
|
84
|
+
this._loadingPreview = true;
|
|
62
85
|
this._changeDetectorRef.markForCheck();
|
|
86
|
+
this.previewShowChange.emit(true);
|
|
63
87
|
}
|
|
64
88
|
}
|
|
65
89
|
onMaskKeydown(event) {
|
|
66
90
|
switch (event.code) {
|
|
67
91
|
case 'Escape':
|
|
68
92
|
this.closePreview();
|
|
69
|
-
|
|
70
|
-
this.previewButton?.nativeElement && document.activeElement !== this.previewButton?.nativeElement && this.previewButton?.nativeElement.focus();
|
|
71
|
-
}, 25);
|
|
93
|
+
this._closePreviewByEscape = true;
|
|
72
94
|
event.preventDefault();
|
|
73
95
|
break;
|
|
74
96
|
default:
|
|
@@ -90,55 +112,18 @@ class CmatImageComponent {
|
|
|
90
112
|
zoomOut() {
|
|
91
113
|
this.scale = this.scale - this._zoomSettings.step;
|
|
92
114
|
}
|
|
93
|
-
onAnimationStart(event) {
|
|
94
|
-
switch (event.toState) {
|
|
95
|
-
case 'visible':
|
|
96
|
-
this.container = event.element;
|
|
97
|
-
this.wrapper = this.container?.parentElement;
|
|
98
|
-
this.appendContainer();
|
|
99
|
-
setTimeout(() => {
|
|
100
|
-
this.closeButton?.nativeElement && document.activeElement !== this.closeButton?.nativeElement && this.closeButton?.nativeElement.focus();
|
|
101
|
-
}, 25);
|
|
102
|
-
break;
|
|
103
|
-
case 'void':
|
|
104
|
-
if (this.wrapper) {
|
|
105
|
-
if (this.wrapper.classList)
|
|
106
|
-
this.wrapper.classList.add('image-overlay-leave');
|
|
107
|
-
else
|
|
108
|
-
this.wrapper.className += ' image-overlay-leave ';
|
|
109
|
-
}
|
|
110
|
-
break;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
onAnimationEnd(event) {
|
|
114
|
-
switch (event.toState) {
|
|
115
|
-
case 'void':
|
|
116
|
-
if (this.wrapper) {
|
|
117
|
-
this.wrapper.style.zIndex = '';
|
|
118
|
-
}
|
|
119
|
-
this.maskVisible = false;
|
|
120
|
-
this.container = null;
|
|
121
|
-
this.wrapper = null;
|
|
122
|
-
this._changeDetectorRef.markForCheck();
|
|
123
|
-
this.previewShowChange.emit(false);
|
|
124
|
-
break;
|
|
125
|
-
case 'visible':
|
|
126
|
-
this.previewShowChange.emit(true);
|
|
127
|
-
break;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
115
|
handleToolbarClick(event) {
|
|
131
116
|
event.stopPropagation();
|
|
132
117
|
}
|
|
133
118
|
appendContainer() {
|
|
134
119
|
if (this.appendTo) {
|
|
135
120
|
if (this.appendTo === 'body')
|
|
136
|
-
this._document.body.appendChild(this.
|
|
121
|
+
this._document.body.appendChild(this._mask);
|
|
137
122
|
else {
|
|
138
123
|
if (typeof HTMLElement === 'object' ? this.appendTo instanceof HTMLElement : this.appendTo && typeof this.appendTo === 'object' && this.appendTo !== null)
|
|
139
|
-
this.appendTo.appendChild(this.
|
|
124
|
+
this.appendTo.appendChild(this._mask);
|
|
140
125
|
else if (this.appendTo?.el?.nativeElement)
|
|
141
|
-
this.appendTo.el.nativeElement.appendChild(this.
|
|
126
|
+
this.appendTo.el.nativeElement.appendChild(this.mask?.nativeElement);
|
|
142
127
|
}
|
|
143
128
|
}
|
|
144
129
|
}
|
|
@@ -149,26 +134,21 @@ class CmatImageComponent {
|
|
|
149
134
|
this.previewVisible = false;
|
|
150
135
|
this.rotate = 0;
|
|
151
136
|
this.scale = this._zoomSettings.default;
|
|
137
|
+
setTimeout(() => {
|
|
138
|
+
this.maskVisible = false;
|
|
139
|
+
this._changeDetectorRef.markForCheck();
|
|
140
|
+
this.previewShowChange.emit(false);
|
|
141
|
+
}, 25);
|
|
152
142
|
}
|
|
153
143
|
imageError(event) {
|
|
154
144
|
this.imageErrorEvent.emit(event);
|
|
155
145
|
}
|
|
156
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
157
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
158
|
-
trigger('animation', [
|
|
159
|
-
transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
|
|
160
|
-
transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
|
|
161
|
-
])
|
|
162
|
-
], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
146
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
147
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: CmatImageComponent, isStandalone: true, selector: "cmat-image", inputs: { imageClass: "imageClass", imageStyle: "imageStyle", src: "src", srcSet: "srcSet", previewImageSrc: "previewImageSrc", previewImageSrcSet: "previewImageSrcSet", alt: "alt", width: "width", height: "height", loading: "loading", appendTo: "appendTo", preview: ["preview", "preview", booleanAttribute] }, outputs: { previewShowChange: "previewShowChange", imageErrorEvent: "imageErrorEvent" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true }], ngImport: i0, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n @if(preview){\r\n <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n <button #previewButton matIconButton>\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(maskVisible){\r\n <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n role=\"dialog\" [attr.aria-modal]=\"maskVisible\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n <button matIconButton (click)=\"rotateRight()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n </button>\r\n <button matIconButton (click)=\"rotateLeft()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n </button>\r\n <button #closeButton matIconButton (click)=\"closePreview()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n </button>\r\n </div>\r\n @if(previewVisible){\r\n <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n (click)=\"onPreviewImageClick($event)\">\r\n <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
163
148
|
}
|
|
164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
149
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: CmatImageComponent, decorators: [{
|
|
165
150
|
type: Component,
|
|
166
|
-
args: [{ selector: 'cmat-image',
|
|
167
|
-
trigger('animation', [
|
|
168
|
-
transition('void => visible', [style({ transform: 'scale(0.7)', opacity: 0 }), animate('{{showTransitionParams}}')]),
|
|
169
|
-
transition('visible => void', [animate('{{hideTransitionParams}}', style({ transform: 'scale(0.7)', opacity: 0 }))])
|
|
170
|
-
])
|
|
171
|
-
], imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n @if(preview){\r\n <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n <button #previewButton matIconButton >\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(maskVisible){\r\n <div #mask class=\"cmat-image-mask image-overlay image-overlay-enter\" role=\"dialog\" [attr.aria-modal]=\"maskVisible\"\r\n (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n <button matIconButton (click)=\"rotateRight()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n </button>\r\n <button matIconButton (click)=\"rotateLeft()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n </button>\r\n <button #closeButton matIconButton (click)=\"closePreview()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n </button>\r\n </div>\r\n @if(previewVisible){\r\n <div role=\"presentation\"\r\n [@animation]=\"{ value: 'visible', params: { showTransitionParams: showTransitionOptions, hideTransitionParams: hideTransitionOptions } }\"\r\n (@animation.start)=\"onAnimationStart($event)\" (@animation.done)=\"onAnimationEnd($event)\"\r\n (click)=\"onPreviewImageClick($event)\">\r\n <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n</span>", styles: ["cmat-image .cmat-image-mask{display:flex;align-items:center;justify-content:center}cmat-image .cmat-image-preview-container{position:relative;display:inline-block;line-height:0}cmat-image .cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}cmat-image .cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}cmat-image .cmat-image-preview-container>img{cursor:pointer}cmat-image .cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}cmat-image .cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}cmat-image .image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}cmat-image .image-overlay-enter{animation:image-overlay-enter-animation .15s forwards}cmat-image .image-overlay-leave{animation:image-overlay-leave-animation .15s forwards}@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"] }]
|
|
151
|
+
args: [{ selector: 'cmat-image', imports: [CommonModule, MatButtonModule, MatIconModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<span [ngClass]=\"{ 'cmat-image-preview-container ': preview }\">\r\n <img [attr.src]=\"src\" [attr.srcset]=\"srcSet\" [attr.alt]=\"alt\" [attr.width]=\"width\" [attr.height]=\"height\"\r\n [attr.loading]=\"loading\" [ngStyle]=\"imageStyle\" [class]=\"imageClass\" (error)=\"imageError($event)\" />\r\n @if(preview){\r\n <div class=\"cmat-image-preview-indicator\" role=\"presentation\" (click)=\"onImageClick()\">\r\n <button #previewButton matIconButton>\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'heroicons_solid:eye'\"></mat-icon>\r\n </button>\r\n </div>\r\n }\r\n\r\n @if(maskVisible){\r\n <div #mask class=\"cmat-image-mask cmat-image-overlay cmat-image-overlay-enter\" animate.leave=\"cmat-image-overlay-leave\"\r\n role=\"dialog\" [attr.aria-modal]=\"maskVisible\" (click)=\"closePreview()\" (keydown)=\"onMaskKeydown($event)\">\r\n <div class=\"cmat-image-toolbar\" role=\"presentation\" (click)=\"handleToolbarClick($event)\">\r\n <button matIconButton (click)=\"rotateRight()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_right'\"></mat-icon>\r\n </button>\r\n <button matIconButton (click)=\"rotateLeft()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:rotate_left'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomOutDisabled\" (click)=\"zoomOut()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_out'\"></mat-icon>\r\n </button>\r\n <button matIconButton [disabled]=\"isZoomInDisabled\" (click)=\"zoomIn()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:zoom_in'\"></mat-icon>\r\n </button>\r\n <button #closeButton matIconButton (click)=\"closePreview()\">\r\n <mat-icon class=\"text-white\" [svgIcon]=\"'mat_solid:close'\"></mat-icon>\r\n </button>\r\n </div>\r\n @if(previewVisible){\r\n <div role=\"presentation\" class=\"cmat-image-preview-enter\" animate.leave=\"cmat-image-preview-leave\"\r\n (click)=\"onPreviewImageClick($event)\">\r\n <img class=\"cmat-image-preview\" alt=\"image\" [attr.src]=\"previewImageSrc ? previewImageSrc : src\"\r\n [attr.srcset]=\"previewImageSrcSet\" [ngStyle]=\"imagePreviewStyle()\" />\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n</span>", styles: [".cmat-image-mask{display:flex;align-items:center;justify-content:center}.cmat-image-preview-container{position:relative;display:inline-block;line-height:0}.cmat-image-preview-indicator{position:absolute;left:0;top:0;width:100%;height:100%;outline:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}.cmat-image-preview-container:hover>.cmat-image-preview-indicator{opacity:1;cursor:pointer;background-color:#00000080}.cmat-image-preview-container>img{cursor:pointer}.cmat-image-toolbar{position:absolute;top:0;right:0;display:flex;z-index:1;padding:.5rem}.cmat-image-preview{transition:transform .15s;max-width:100vw;max-height:100vh}.cmat-image-preview-enter{animation:preview-enter-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-preview-leave{animation:preview-leave-animation .15s cubic-bezier(0,0,.2,1)}.cmat-image-overlay{background-color:#0006;transition-duration:.2s;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99}.cmat-image-overlay-enter{animation:image-overlay-enter-animation .15s}.cmat-image-overlay-leave{z-index:0;animation:image-overlay-leave-animation .15s}@keyframes preview-enter-animation{0%{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}@keyframes preview-leave-animation{0%{transform:scale(1);opacity:1}to{transform:scale(.7);opacity:0}}@keyframes image-overlay-enter-animation{0%{background-color:transparent}to{background-color:#000000e6}}@keyframes image-overlay-leave-animation{0%{background-color:#000000e6}to{background-color:transparent}}\n"] }]
|
|
172
152
|
}], propDecorators: { imageClass: [{
|
|
173
153
|
type: Input
|
|
174
154
|
}], imageStyle: [{
|
|
@@ -194,23 +174,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
194
174
|
}], preview: [{
|
|
195
175
|
type: Input,
|
|
196
176
|
args: [{ transform: booleanAttribute }]
|
|
197
|
-
}], showTransitionOptions: [{
|
|
198
|
-
type: Input
|
|
199
|
-
}], hideTransitionOptions: [{
|
|
200
|
-
type: Input
|
|
201
177
|
}], previewShowChange: [{
|
|
202
178
|
type: Output
|
|
203
179
|
}], imageErrorEvent: [{
|
|
204
180
|
type: Output
|
|
205
181
|
}], mask: [{
|
|
206
182
|
type: ViewChild,
|
|
207
|
-
args: ['mask']
|
|
183
|
+
args: ['mask', { static: false }]
|
|
208
184
|
}], previewButton: [{
|
|
209
185
|
type: ViewChild,
|
|
210
|
-
args: ['previewButton']
|
|
186
|
+
args: ['previewButton', { static: false }]
|
|
211
187
|
}], closeButton: [{
|
|
212
188
|
type: ViewChild,
|
|
213
|
-
args: ['closeButton']
|
|
189
|
+
args: ['closeButton', { static: false }]
|
|
214
190
|
}], onKeydownHandler: [{
|
|
215
191
|
type: HostListener,
|
|
216
192
|
args: ['document:keydown.escape', ['$event']]
|