@acorex/components 21.0.0-next.20 → 21.0.0-next.22
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/conversation2/README.md +421 -0
- package/conversation2/index.d.ts +5602 -0
- package/editor/index.d.ts +5 -6
- package/fesm2022/acorex-components-conversation2.mjs +16789 -0
- package/fesm2022/acorex-components-conversation2.mjs.map +1 -0
- package/fesm2022/acorex-components-editor.mjs +13 -9
- package/fesm2022/acorex-components-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-image-editor.mjs +134 -94
- package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
- package/fesm2022/acorex-components-tabs.mjs +6 -2
- package/fesm2022/acorex-components-tabs.mjs.map +1 -1
- package/image-editor/index.d.ts +8 -5
- package/package.json +7 -3
|
@@ -6,13 +6,12 @@ import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/l
|
|
|
6
6
|
import * as i2$1 from '@acorex/components/toolbar';
|
|
7
7
|
import { AXToolBarModule } from '@acorex/components/toolbar';
|
|
8
8
|
import * as i0 from '@angular/core';
|
|
9
|
-
import { signal, Injectable, inject, output, ViewEncapsulation, Component, ChangeDetectionStrategy,
|
|
9
|
+
import { signal, Injectable, inject, output, input, ViewEncapsulation, Component, ChangeDetectionStrategy, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, linkedSignal, contentChild, forwardRef, HostBinding, NgModule } from '@angular/core';
|
|
10
10
|
import * as i1 from '@angular/forms';
|
|
11
11
|
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
12
12
|
import { classes } from 'polytype';
|
|
13
13
|
import { AXTranslatorPipe } from '@acorex/core/translation';
|
|
14
|
-
import
|
|
15
|
-
import { AsyncPipe, isPlatformBrowser, CommonModule } from '@angular/common';
|
|
14
|
+
import { AsyncPipe, isPlatformBrowser } from '@angular/common';
|
|
16
15
|
import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
|
|
17
16
|
import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
|
|
18
17
|
import * as i2 from '@acorex/components/tooltip';
|
|
@@ -53,12 +52,13 @@ class AXImageEditorCropComponent {
|
|
|
53
52
|
constructor() {
|
|
54
53
|
this.service = inject(AXImageEditorService);
|
|
55
54
|
this.cropPressed = output();
|
|
55
|
+
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
56
56
|
}
|
|
57
57
|
cropButtonHandler() {
|
|
58
58
|
this.cropPressed.emit();
|
|
59
59
|
}
|
|
60
60
|
ratioHandler(r) {
|
|
61
|
-
if (this.service.cropperRatio()) {
|
|
61
|
+
if (this.service.cropperRatio() === r) {
|
|
62
62
|
this.service.cropperRatio.set(null);
|
|
63
63
|
}
|
|
64
64
|
else {
|
|
@@ -66,12 +66,12 @@ class AXImageEditorCropComponent {
|
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
69
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
69
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button\n (click)=\"cropButtonHandler()\"\n class=\"ax-crop-save ax-sm\"\n [text]=\"'@acorex:image-editor.crop' | translate | async\"\n color=\"primary\"\n></ax-button>\n\n<div>\n <ax-button\n [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('1:1')\"\n class=\"ax-crop-save ax-sm\"\n text=\"1:1\"\n ></ax-button>\n <ax-button\n [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('16:9')\"\n class=\"ax-crop-save ax-sm\"\n text=\"16:9\"\n ></ax-button>\n\n @if (aspectRatio().length) {\n @for (item of aspectRatio(); track $index) {\n <ax-button\n [selected]=\"this.service.cropperRatio() === item ? true : false\"\n [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n (click)=\"ratioHandler(item)\"\n class=\"ax-crop-save ax-sm\"\n [text]=\"item\"\n ></ax-button>\n }\n }\n</div>\n", styles: ["ax-image-editor-crop{display:flex;justify-content:space-around;width:100%;padding:.5rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
70
70
|
}
|
|
71
71
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
|
|
72
72
|
type: Component,
|
|
73
|
-
args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n (click)=\"cropButtonHandler()\"\n class=\"ax-crop-save ax-sm\"\n [text]=\"'@acorex:image-editor.crop' | translate | async\"\n></ax-button>\n\n<ax-button\n
|
|
74
|
-
}], propDecorators: { cropPressed: [{ type: i0.Output, args: ["cropPressed"] }] } });
|
|
73
|
+
args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n (click)=\"cropButtonHandler()\"\n class=\"ax-crop-save ax-sm\"\n [text]=\"'@acorex:image-editor.crop' | translate | async\"\n color=\"primary\"\n></ax-button>\n\n<div>\n <ax-button\n [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('1:1')\"\n class=\"ax-crop-save ax-sm\"\n text=\"1:1\"\n ></ax-button>\n <ax-button\n [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('16:9')\"\n class=\"ax-crop-save ax-sm\"\n text=\"16:9\"\n ></ax-button>\n\n @if (aspectRatio().length) {\n @for (item of aspectRatio(); track $index) {\n <ax-button\n [selected]=\"this.service.cropperRatio() === item ? true : false\"\n [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n (click)=\"ratioHandler(item)\"\n class=\"ax-crop-save ax-sm\"\n [text]=\"item\"\n ></ax-button>\n }\n }\n</div>\n", styles: ["ax-image-editor-crop{display:flex;justify-content:space-around;width:100%;padding:.5rem;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\n"] }]
|
|
74
|
+
}], propDecorators: { cropPressed: [{ type: i0.Output, args: ["cropPressed"] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
|
|
75
75
|
|
|
76
76
|
/**
|
|
77
77
|
* paint mode.
|
|
@@ -94,11 +94,11 @@ class AXImageEditorHighlightComponent {
|
|
|
94
94
|
this.service.highlightWidth.set(e);
|
|
95
95
|
}
|
|
96
96
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
97
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
97
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-highlight ax-color-box{flex:0 0 0}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
98
98
|
}
|
|
99
99
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
|
-
args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
|
|
101
|
+
args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-highlight{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-highlight ax-color-box{flex:0 0 0}ax-image-editor-highlight ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
|
|
102
102
|
}] });
|
|
103
103
|
|
|
104
104
|
/**
|
|
@@ -122,11 +122,11 @@ class AXImageEditorPenComponent {
|
|
|
122
122
|
this.service.penWidth.set(e);
|
|
123
123
|
}
|
|
124
124
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
125
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-pen ax-color-box{flex:0 0 0}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
126
126
|
}
|
|
127
127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
|
|
128
128
|
type: Component,
|
|
129
|
-
args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
|
|
129
|
+
args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n [showValue]=\"false\"\n [showIcon]=\"false\"\n [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n axTooltipPlacement=\"top\"\n look=\"none\"\n [ngModel]=\"selectedColor()\"\n (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["ax-image-editor-pen{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}ax-image-editor-pen ax-color-box{flex:0 0 0}ax-image-editor-pen ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}\n"] }]
|
|
130
130
|
}] });
|
|
131
131
|
|
|
132
132
|
/**
|
|
@@ -147,7 +147,7 @@ class AXImageEditorRotateComponent {
|
|
|
147
147
|
this.service.rotate.set({ state: -90, userInteract: true });
|
|
148
148
|
}
|
|
149
149
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorRotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
150
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateLeftHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateRightHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
150
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateLeftHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateRightHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["ax-image-editor-rotate{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
151
151
|
}
|
|
152
152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
|
|
153
153
|
type: Component,
|
|
@@ -158,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
158
158
|
AsyncPipe,
|
|
159
159
|
AXTranslatorPipe,
|
|
160
160
|
AXTooltipModule,
|
|
161
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateLeftHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateRightHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n" }]
|
|
161
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateLeftHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n axTooltipPlacement=\"top\"\n (click)=\"rotateRightHandler()\"\n look=\"blank\"\n>\n <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["ax-image-editor-rotate{display:flex;justify-content:center;border-bottom:1px solid rgba(var(--ax-sys-color-border-surface))}\n"] }]
|
|
162
162
|
}] });
|
|
163
163
|
|
|
164
164
|
/**
|
|
@@ -204,22 +204,47 @@ class AXImageEditorCropperWindowComponent {
|
|
|
204
204
|
this.currentY = signal(-45, ...(ngDevMode ? [{ debugName: "currentY" }] : []));
|
|
205
205
|
this.prevX = signal(0, ...(ngDevMode ? [{ debugName: "prevX" }] : []));
|
|
206
206
|
this.prevY = signal(0, ...(ngDevMode ? [{ debugName: "prevY" }] : []));
|
|
207
|
+
this.aspectWidth = signal(0, ...(ngDevMode ? [{ debugName: "aspectWidth" }] : []));
|
|
208
|
+
this.aspectHeight = signal(0, ...(ngDevMode ? [{ debugName: "aspectHeight" }] : []));
|
|
207
209
|
this.renderer = inject(Renderer2);
|
|
208
210
|
this.platformID = inject(PLATFORM_ID);
|
|
209
211
|
this.#eff = effect(() => {
|
|
210
212
|
const host = this.elementRef.nativeElement;
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
213
|
+
let width;
|
|
214
|
+
let height;
|
|
215
|
+
const scale = 150;
|
|
216
|
+
switch (this.service.cropperRatio()) {
|
|
217
|
+
case '1:1':
|
|
218
|
+
width = 1;
|
|
219
|
+
height = 1;
|
|
220
|
+
break;
|
|
221
|
+
case '16:9':
|
|
222
|
+
width = 1.777777777777778;
|
|
223
|
+
height = 1;
|
|
224
|
+
break;
|
|
225
|
+
case null:
|
|
226
|
+
width = 1;
|
|
227
|
+
height = 1;
|
|
228
|
+
break;
|
|
229
|
+
default:
|
|
230
|
+
[width, height] = this.service.cropperRatio().split(':').map(Number);
|
|
214
231
|
}
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
232
|
+
if (width >= height) {
|
|
233
|
+
const aspect = width / height;
|
|
234
|
+
width = aspect;
|
|
235
|
+
height = 1;
|
|
236
|
+
this.aspectWidth.set(aspect);
|
|
237
|
+
this.aspectHeight.set(1);
|
|
218
238
|
}
|
|
219
239
|
else {
|
|
220
|
-
|
|
221
|
-
|
|
240
|
+
const aspect = height / width;
|
|
241
|
+
width = 1;
|
|
242
|
+
height = aspect;
|
|
243
|
+
this.aspectWidth.set(1);
|
|
244
|
+
this.aspectHeight.set(aspect);
|
|
222
245
|
}
|
|
246
|
+
host.style.width = `${width * scale}px`;
|
|
247
|
+
host.style.height = `${height * scale}px`;
|
|
223
248
|
}, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
|
|
224
249
|
this.#init = afterNextRender(() => {
|
|
225
250
|
const host = this.elementRef.nativeElement;
|
|
@@ -235,7 +260,6 @@ class AXImageEditorCropperWindowComponent {
|
|
|
235
260
|
this.#positionChange = effect(() => {
|
|
236
261
|
this.setPosition(this.currentX(), this.currentY());
|
|
237
262
|
}, ...(ngDevMode ? [{ debugName: "#positionChange" }] : []));
|
|
238
|
-
this.edgeCase = false;
|
|
239
263
|
}
|
|
240
264
|
#eff;
|
|
241
265
|
#init;
|
|
@@ -311,114 +335,123 @@ class AXImageEditorCropperWindowComponent {
|
|
|
311
335
|
if (!this.selectedHandle())
|
|
312
336
|
return;
|
|
313
337
|
const host = this.elementRef.nativeElement;
|
|
314
|
-
const rect = host.getBoundingClientRect();
|
|
315
338
|
const dy = e.clientY - this.startY;
|
|
316
339
|
const dx = e.clientX - this.startX;
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
}
|
|
340
|
+
let newWidth;
|
|
341
|
+
let newHeight;
|
|
342
|
+
const minSize = 20;
|
|
321
343
|
switch (this.selectedHandle()) {
|
|
322
344
|
case 'right':
|
|
323
|
-
|
|
345
|
+
newWidth = Math.max(minSize, this.startWidth + dx);
|
|
346
|
+
host.style.width = `${newWidth}px`;
|
|
324
347
|
break;
|
|
325
348
|
case 'top':
|
|
326
|
-
|
|
327
|
-
host.style.
|
|
349
|
+
newHeight = Math.max(minSize, this.startHeight - dy);
|
|
350
|
+
host.style.height = `${newHeight}px`;
|
|
351
|
+
host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
|
|
328
352
|
break;
|
|
329
353
|
case 'left':
|
|
330
|
-
|
|
331
|
-
host.style.
|
|
354
|
+
newWidth = Math.max(minSize, this.startWidth - dx);
|
|
355
|
+
host.style.width = `${newWidth}px`;
|
|
356
|
+
host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
|
|
332
357
|
break;
|
|
333
358
|
case 'bottom':
|
|
334
|
-
|
|
359
|
+
newHeight = Math.max(minSize, this.startHeight + dy);
|
|
360
|
+
host.style.height = `${newHeight}px`;
|
|
335
361
|
break;
|
|
336
362
|
case 'right-top':
|
|
337
|
-
if (this.service.cropperRatio()
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
host.style.
|
|
345
|
-
host.style.
|
|
363
|
+
if (this.service.cropperRatio()) {
|
|
364
|
+
newWidth = Math.max(minSize, this.startWidth + dx);
|
|
365
|
+
newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
|
|
366
|
+
if (newHeight < minSize) {
|
|
367
|
+
newHeight = minSize;
|
|
368
|
+
newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
|
|
369
|
+
}
|
|
370
|
+
host.style.width = `${newWidth}px`;
|
|
371
|
+
host.style.height = `${newHeight}px`;
|
|
372
|
+
host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
|
|
346
373
|
}
|
|
347
374
|
else {
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
host.style.width = `${
|
|
375
|
+
newWidth = Math.max(minSize, this.startWidth + dx);
|
|
376
|
+
newHeight = Math.max(minSize, this.startHeight - dy);
|
|
377
|
+
host.style.width = `${newWidth}px`;
|
|
378
|
+
host.style.height = `${newHeight}px`;
|
|
379
|
+
host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
|
|
351
380
|
}
|
|
352
381
|
break;
|
|
353
382
|
case 'bottom-right':
|
|
354
|
-
if (this.service.cropperRatio()
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
383
|
+
if (this.service.cropperRatio()) {
|
|
384
|
+
newWidth = Math.max(minSize, this.startWidth + dx);
|
|
385
|
+
newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
|
|
386
|
+
if (newHeight < minSize) {
|
|
387
|
+
newHeight = minSize;
|
|
388
|
+
newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
|
|
389
|
+
}
|
|
390
|
+
host.style.width = `${newWidth}px`;
|
|
391
|
+
host.style.height = `${newHeight}px`;
|
|
361
392
|
}
|
|
362
393
|
else {
|
|
363
|
-
|
|
364
|
-
|
|
394
|
+
newWidth = Math.max(minSize, this.startWidth + dx);
|
|
395
|
+
newHeight = Math.max(minSize, this.startHeight + dy);
|
|
396
|
+
host.style.width = `${newWidth}px`;
|
|
397
|
+
host.style.height = `${newHeight}px`;
|
|
365
398
|
}
|
|
366
399
|
break;
|
|
367
400
|
case 'bottom-left':
|
|
368
|
-
if (this.service.cropperRatio()
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
host.style.width = `${
|
|
376
|
-
host.style.
|
|
401
|
+
if (this.service.cropperRatio()) {
|
|
402
|
+
newWidth = Math.max(minSize, this.startWidth - dx);
|
|
403
|
+
newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
|
|
404
|
+
if (newHeight < minSize) {
|
|
405
|
+
newHeight = minSize;
|
|
406
|
+
newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
|
|
407
|
+
}
|
|
408
|
+
host.style.width = `${newWidth}px`;
|
|
409
|
+
host.style.height = `${newHeight}px`;
|
|
410
|
+
host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
|
|
377
411
|
}
|
|
378
412
|
else {
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
host.style.
|
|
413
|
+
newWidth = Math.max(minSize, this.startWidth - dx);
|
|
414
|
+
newHeight = Math.max(minSize, this.startHeight + dy);
|
|
415
|
+
host.style.width = `${newWidth}px`;
|
|
416
|
+
host.style.height = `${newHeight}px`;
|
|
417
|
+
host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
|
|
382
418
|
}
|
|
383
419
|
break;
|
|
384
420
|
case 'left-top':
|
|
385
|
-
if (this.service.cropperRatio()
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
host.style.width = `${
|
|
393
|
-
host.style.
|
|
394
|
-
host.style.
|
|
395
|
-
host.style.top = `${this.
|
|
421
|
+
if (this.service.cropperRatio()) {
|
|
422
|
+
newWidth = Math.max(minSize, this.startWidth - dx);
|
|
423
|
+
newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
|
|
424
|
+
if (newHeight < minSize) {
|
|
425
|
+
newHeight = minSize;
|
|
426
|
+
newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
|
|
427
|
+
}
|
|
428
|
+
host.style.width = `${newWidth}px`;
|
|
429
|
+
host.style.height = `${newHeight}px`;
|
|
430
|
+
host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
|
|
431
|
+
host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
|
|
396
432
|
}
|
|
397
433
|
else {
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
host.style.
|
|
401
|
-
host.style.
|
|
434
|
+
newWidth = Math.max(minSize, this.startWidth - dx);
|
|
435
|
+
newHeight = Math.max(minSize, this.startHeight - dy);
|
|
436
|
+
host.style.width = `${newWidth}px`;
|
|
437
|
+
host.style.height = `${newHeight}px`;
|
|
438
|
+
host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
|
|
439
|
+
host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
|
|
402
440
|
}
|
|
441
|
+
break;
|
|
403
442
|
}
|
|
404
443
|
}
|
|
405
444
|
clearSelector() {
|
|
406
445
|
if (this.panState())
|
|
407
446
|
return;
|
|
408
|
-
const host = this.elementRef.nativeElement;
|
|
409
|
-
if (this.edgeCase) {
|
|
410
|
-
host.style.height = `20px`;
|
|
411
|
-
host.style.width = `20px`;
|
|
412
|
-
this.edgeCase = false;
|
|
413
|
-
}
|
|
414
447
|
this.selectedHandle.set(null);
|
|
415
448
|
}
|
|
416
449
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [
|
|
450
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n @if (!service.cropperRatio()) {\n <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n }\n\n <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n <div\n (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n class=\"ax-image-bottom-right-handle ax-handle-shape\"\n ></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n @if (showGrid()) {\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none;touch-action:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
418
451
|
}
|
|
419
452
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
|
|
420
453
|
type: Component,
|
|
421
|
-
args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
454
|
+
args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n @if (!service.cropperRatio()) {\n <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n }\n\n <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n <div\n (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n class=\"ax-image-bottom-right-handle ax-handle-shape\"\n ></div>\n <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n @if (showGrid()) {\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n <div class=\"ax-grid-item\"></div>\n }\n</div>\n", styles: ["ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;-webkit-user-select:none;user-select:none;touch-action:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;height:100%;cursor:move;outline:rgba(0,0,0,.7) solid 100vmax;display:grid;grid-template-columns:repeat(3,1fr)}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border:1px dashed rgba(255,255,255,.5)}ax-image-editor-cropper-window .ax-handle-shape{width:1rem;height:1rem;border:1px dashed white;background-color:gray;position:absolute;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:-.5rem;right:-.5rem;cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{bottom:-.5rem;right:-.5rem;cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{right:-.5rem;top:calc(50% - .5rem);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:-.5rem;left:-.5rem;cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:-.5rem;left:-.5rem;cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{bottom:-.5rem;right:calc(50% - .5rem);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{left:-.5rem;top:calc(50% - .5rem);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:-.5rem;right:calc(50% - .5rem);cursor:n-resize}\n"] }]
|
|
422
455
|
}], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], cropperWindow: [{ type: i0.ViewChild, args: ['r', { isSignal: true }] }] } });
|
|
423
456
|
|
|
424
457
|
class AXImageEditorViewComponent extends MXBaseComponent {
|
|
@@ -683,6 +716,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
683
716
|
this.service = inject(AXImageEditorService);
|
|
684
717
|
this.imageEditorContainer = viewChild('f', ...(ngDevMode ? [{ debugName: "imageEditorContainer" }] : []));
|
|
685
718
|
this.view = contentChild(AXImageEditorViewComponent, ...(ngDevMode ? [{ debugName: "view" }] : []));
|
|
719
|
+
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
686
720
|
}
|
|
687
721
|
/**
|
|
688
722
|
* Saves the current edited image and commits the value to the component.
|
|
@@ -710,7 +744,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
710
744
|
return this.name;
|
|
711
745
|
}
|
|
712
746
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
713
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look", disabled: "disabled" }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
|
|
747
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class": "this.__hostClass", "attr.name": "this.__hostName" } }, providers: [
|
|
714
748
|
AXImageEditorService,
|
|
715
749
|
{ provide: AXComponent, useExisting: AXImageEditorContainerComponent },
|
|
716
750
|
{ provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
|
|
@@ -720,7 +754,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
720
754
|
useExisting: forwardRef(() => AXImageEditorContainerComponent),
|
|
721
755
|
multi: true,
|
|
722
756
|
},
|
|
723
|
-
], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n <div #f class=\"ax-editor-container ax-{{ look }}\">\n <ng-content select=\"ax-header\"></ng-content>\n\n <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n @if (service.activeToolState()) {\n
|
|
757
|
+
], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n <div #f class=\"ax-editor-container ax-{{ look }}\">\n <ng-content select=\"ax-header\"></ng-content>\n\n <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n @if (service.activeToolState()) {\n @switch (service.activeToolState()) {\n @case ('pen') {\n <ax-image-editor-pen></ax-image-editor-pen>\n }\n @case ('crop') {\n <ax-image-editor-crop\n [aspectRatio]=\"aspectRatio()\"\n (cropPressed)=\"cropButtonHandler()\"\n ></ax-image-editor-crop>\n }\n @case ('highlight') {\n <ax-image-editor-highlight></ax-image-editor-highlight>\n }\n @case ('rotate') {\n <ax-image-editor-rotate></ax-image-editor-rotate>\n }\n }\n }\n\n <ax-toolbar class=\"ax-main-toolbar\">\n <ax-content>\n <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n </ax-content>\n </ax-toolbar>\n </div>\n <div class=\"ax-error-container\"></div>\n} @else {\n <div class=\"ax-loading-spinner-container\">\n <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
724
758
|
}
|
|
725
759
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
|
|
726
760
|
type: Component,
|
|
@@ -744,8 +778,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
|
|
|
744
778
|
AXImageEditorPenComponent,
|
|
745
779
|
AXImageEditorHighlightComponent,
|
|
746
780
|
AXImageEditorRotateComponent,
|
|
747
|
-
], template: "@if (service.isImageLoad()) {\n <div #f class=\"ax-editor-container ax-{{ look }}\">\n <ng-content select=\"ax-header\"></ng-content>\n\n <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n @if (service.activeToolState()) {\n
|
|
748
|
-
}], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }], __hostClass: [{
|
|
781
|
+
], template: "@if (service.isImageLoad()) {\n <div #f class=\"ax-editor-container ax-{{ look }}\">\n <ng-content select=\"ax-header\"></ng-content>\n\n <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n @if (service.activeToolState()) {\n @switch (service.activeToolState()) {\n @case ('pen') {\n <ax-image-editor-pen></ax-image-editor-pen>\n }\n @case ('crop') {\n <ax-image-editor-crop\n [aspectRatio]=\"aspectRatio()\"\n (cropPressed)=\"cropButtonHandler()\"\n ></ax-image-editor-crop>\n }\n @case ('highlight') {\n <ax-image-editor-highlight></ax-image-editor-highlight>\n }\n @case ('rotate') {\n <ax-image-editor-rotate></ax-image-editor-rotate>\n }\n }\n }\n\n <ax-toolbar class=\"ax-main-toolbar\">\n <ax-content>\n <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n </ax-content>\n </ax-toolbar>\n </div>\n <div class=\"ax-error-container\"></div>\n} @else {\n <div class=\"ax-loading-spinner-container\">\n <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{position:absolute;top:0;left:0;width:100%;height:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}ax-image-editor-container .ax-main-toolbar{justify-content:center;padding:.2rem}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}\n"] }]
|
|
782
|
+
}], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], __hostClass: [{
|
|
749
783
|
type: HostBinding,
|
|
750
784
|
args: ['class']
|
|
751
785
|
}], __hostName: [{
|
|
@@ -824,7 +858,13 @@ class AXImageEditorModule {
|
|
|
824
858
|
AXImageEditorHighlightComponent,
|
|
825
859
|
AXImageEditorRotateComponent,
|
|
826
860
|
AXImageEditorCropperWindowComponent] }); }
|
|
827
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorModule, imports: [MODULES,
|
|
861
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, AXImageEditorContainerComponent,
|
|
862
|
+
AXImageEditorCropComponent,
|
|
863
|
+
AXImageEditorHistoryComponent,
|
|
864
|
+
AXImageEditorToolSelectorComponent,
|
|
865
|
+
AXImageEditorPenComponent,
|
|
866
|
+
AXImageEditorHighlightComponent,
|
|
867
|
+
AXImageEditorRotateComponent] }); }
|
|
828
868
|
}
|
|
829
869
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AXImageEditorModule, decorators: [{
|
|
830
870
|
type: NgModule,
|