@acorex/components 20.8.23 → 20.8.25
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.
|
@@ -36,6 +36,7 @@ class AXImageEditorService {
|
|
|
36
36
|
this.undoPressed = signal(false, ...(ngDevMode ? [{ debugName: "undoPressed" }] : []));
|
|
37
37
|
this.redoPressed = signal(false, ...(ngDevMode ? [{ debugName: "redoPressed" }] : []));
|
|
38
38
|
this.cropperRatio = signal(null, ...(ngDevMode ? [{ debugName: "cropperRatio" }] : []));
|
|
39
|
+
this.cropperSize = signal(150, ...(ngDevMode ? [{ debugName: "cropperSize" }] : []));
|
|
39
40
|
}
|
|
40
41
|
toggleTool(tool) {
|
|
41
42
|
if (this.activeToolState() === tool) {
|
|
@@ -64,6 +65,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
64
65
|
class AXImageEditorCropperWindowComponent {
|
|
65
66
|
constructor() {
|
|
66
67
|
this.showGrid = input(true, ...(ngDevMode ? [{ debugName: "showGrid" }] : []));
|
|
68
|
+
/** Base size in pixels used to calculate the initial cropper window dimensions. */
|
|
69
|
+
this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
67
70
|
this.service = inject(AXImageEditorService);
|
|
68
71
|
this.ngZone = inject(NgZone);
|
|
69
72
|
this.selectedHandle = signal(null, ...(ngDevMode ? [{ debugName: "selectedHandle" }] : []));
|
|
@@ -83,7 +86,7 @@ class AXImageEditorCropperWindowComponent {
|
|
|
83
86
|
const host = this.elementRef.nativeElement;
|
|
84
87
|
let width;
|
|
85
88
|
let height;
|
|
86
|
-
const scale =
|
|
89
|
+
const scale = this.size() ?? this.service.cropperSize();
|
|
87
90
|
switch (this.service.cropperRatio()) {
|
|
88
91
|
case '1:1':
|
|
89
92
|
width = 1;
|
|
@@ -323,7 +326,7 @@ class AXImageEditorCropperWindowComponent {
|
|
|
323
326
|
this.selectedHandle.set(null);
|
|
324
327
|
}
|
|
325
328
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
326
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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 }); }
|
|
329
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", 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 }); }
|
|
327
330
|
}
|
|
328
331
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
|
|
329
332
|
type: Component,
|
|
@@ -377,6 +380,10 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
377
380
|
* its change grid display state.
|
|
378
381
|
*/
|
|
379
382
|
this.showGrid = input(true, ...(ngDevMode ? [{ debugName: "showGrid" }] : []));
|
|
383
|
+
/**
|
|
384
|
+
* Base size in pixels for the initial cropper window dimensions.
|
|
385
|
+
*/
|
|
386
|
+
this.cropperSize = input(...(ngDevMode ? [undefined, { debugName: "cropperSize" }] : []));
|
|
380
387
|
/**
|
|
381
388
|
* its change grid display state.
|
|
382
389
|
*/
|
|
@@ -433,6 +440,12 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
433
440
|
return;
|
|
434
441
|
this.rotateImage();
|
|
435
442
|
});
|
|
443
|
+
effect(() => {
|
|
444
|
+
const size = this.cropperSize();
|
|
445
|
+
if (size != null) {
|
|
446
|
+
this.service.cropperSize.set(size);
|
|
447
|
+
}
|
|
448
|
+
});
|
|
436
449
|
}
|
|
437
450
|
/** @ignore */
|
|
438
451
|
ngOnDestroy() {
|
|
@@ -516,8 +529,12 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
516
529
|
this.saveImageChange();
|
|
517
530
|
}
|
|
518
531
|
/** @ignore */
|
|
519
|
-
|
|
520
|
-
const
|
|
532
|
+
async crop() {
|
|
533
|
+
const cropper = this.cropperWindow();
|
|
534
|
+
if (this.service.activeToolState() !== 'crop' || !cropper) {
|
|
535
|
+
return;
|
|
536
|
+
}
|
|
537
|
+
const cropRect = cropper.getCropperArea();
|
|
521
538
|
const canvasRect = this.canvasElem().nativeElement.getClientRects()[0];
|
|
522
539
|
const dx = cropRect.x - canvasRect.x;
|
|
523
540
|
const dy = cropRect.y - canvasRect.y;
|
|
@@ -526,9 +543,9 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
526
543
|
this.canvasElem().nativeElement.height = cropRect.height;
|
|
527
544
|
this.ctx().putImageData(imageData, 0, 0);
|
|
528
545
|
const cropImage = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
|
|
546
|
+
await this.saveImageChange();
|
|
529
547
|
this.setInitialImage(cropImage, false);
|
|
530
548
|
this.service.activeToolState.set(null);
|
|
531
|
-
this.saveImageChange();
|
|
532
549
|
}
|
|
533
550
|
/** @ignore */
|
|
534
551
|
rotateImage() {
|
|
@@ -582,7 +599,7 @@ class AXImageEditorViewComponent extends MXBaseComponent {
|
|
|
582
599
|
this.service.imageBlob.set(blobs);
|
|
583
600
|
}
|
|
584
601
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
585
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
602
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n tabindex=\"1\"\n (pointerdown)=\"mouseDownHandler($event)\"\n (pointerup)=\"mouseUpHandler()\"\n (pointermove)=\"mouseMoveHandler($event)\"\n class=\"ax-canvas-element\"\n #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%;touch-action:none;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:#000}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
586
603
|
}
|
|
587
604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
|
|
588
605
|
type: Component,
|
|
@@ -611,6 +628,15 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
|
|
|
611
628
|
}, ...(ngDevMode ? [{ debugName: "#eff" }] : []));
|
|
612
629
|
}
|
|
613
630
|
#eff;
|
|
631
|
+
/** Applies the current cropper selection. */
|
|
632
|
+
async crop() {
|
|
633
|
+
const oldValue = this.value;
|
|
634
|
+
await this.view()?.crop();
|
|
635
|
+
const blobs = this.service.imageBlob();
|
|
636
|
+
if (blobs.length && this.value === oldValue) {
|
|
637
|
+
this.emitOnValueChangedEvent(oldValue, blobs);
|
|
638
|
+
}
|
|
639
|
+
}
|
|
614
640
|
get __hostClass() {
|
|
615
641
|
if (this.disabled)
|
|
616
642
|
return 'ax-state-disabled';
|
|
@@ -653,6 +679,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
653
679
|
args: ['attr.name']
|
|
654
680
|
}] } });
|
|
655
681
|
|
|
682
|
+
const IMAGE_EDITOR_ASPECT_RATIO_ACTIVE_SUFFIX = ':active';
|
|
683
|
+
function parseAspectRatioItem(item) {
|
|
684
|
+
if (item.endsWith(IMAGE_EDITOR_ASPECT_RATIO_ACTIVE_SUFFIX)) {
|
|
685
|
+
return {
|
|
686
|
+
ratio: item.slice(0, -IMAGE_EDITOR_ASPECT_RATIO_ACTIVE_SUFFIX.length),
|
|
687
|
+
active: true,
|
|
688
|
+
};
|
|
689
|
+
}
|
|
690
|
+
return { ratio: item, active: false };
|
|
691
|
+
}
|
|
692
|
+
function parseAspectRatios(items) {
|
|
693
|
+
const ratios = [];
|
|
694
|
+
let activeRatio = null;
|
|
695
|
+
for (const item of items) {
|
|
696
|
+
const { ratio, active } = parseAspectRatioItem(item);
|
|
697
|
+
ratios.push(ratio);
|
|
698
|
+
if (active && activeRatio === null) {
|
|
699
|
+
activeRatio = ratio;
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
return { ratios, activeRatio };
|
|
703
|
+
}
|
|
704
|
+
|
|
656
705
|
/**
|
|
657
706
|
* Base class for image editor tool trigger components.
|
|
658
707
|
* @category Components
|
|
@@ -674,10 +723,32 @@ class AXImageEditorCropComponent extends AXImageEditorToolComponent {
|
|
|
674
723
|
constructor() {
|
|
675
724
|
super(...arguments);
|
|
676
725
|
this.tool = 'crop';
|
|
726
|
+
this.container = inject(AXImageEditorContainerComponent);
|
|
727
|
+
/** Aspect ratio presets. Append `:active` to mark the default ratio, e.g. `'2:1:active'`. */
|
|
677
728
|
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
729
|
+
/** Base size in pixels for the initial cropper window dimensions. */
|
|
730
|
+
this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
731
|
+
this.#syncSize = effect(() => {
|
|
732
|
+
const size = this.size();
|
|
733
|
+
if (size != null) {
|
|
734
|
+
this.service.cropperSize.set(size);
|
|
735
|
+
}
|
|
736
|
+
}, ...(ngDevMode ? [{ debugName: "#syncSize" }] : []));
|
|
737
|
+
this.#syncAspectRatio = effect(() => {
|
|
738
|
+
const { activeRatio } = parseAspectRatios(this.aspectRatio());
|
|
739
|
+
if (activeRatio) {
|
|
740
|
+
this.service.cropperRatio.set(activeRatio);
|
|
741
|
+
}
|
|
742
|
+
}, ...(ngDevMode ? [{ debugName: "#syncAspectRatio" }] : []));
|
|
743
|
+
}
|
|
744
|
+
#syncSize;
|
|
745
|
+
#syncAspectRatio;
|
|
746
|
+
/** Applies the current cropper selection. */
|
|
747
|
+
crop() {
|
|
748
|
+
this.container.crop();
|
|
678
749
|
}
|
|
679
750
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
680
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n axTooltipPlacement=\"top\"\n (onClick)=\"service.toggleTool('crop')\"\n look=\"blank\"\n [selected]=\"service.activeToolState() === 'crop'\"\n [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n class=\"ax-xs\"\n>\n <ax-icon class=\"ax-icon ax-icon-crop\"></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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
751
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n axTooltipPlacement=\"top\"\n (onClick)=\"service.toggleTool('crop')\"\n look=\"blank\"\n [selected]=\"service.activeToolState() === 'crop'\"\n [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n class=\"ax-xs\"\n>\n <ax-icon class=\"ax-icon ax-icon-crop\"></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: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { 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" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
681
752
|
}
|
|
682
753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
|
|
683
754
|
type: Component,
|
|
@@ -764,10 +835,11 @@ class AXImageEditorCropOptionsComponent {
|
|
|
764
835
|
this.container = inject(AXImageEditorContainerComponent);
|
|
765
836
|
this.cropPressed = output();
|
|
766
837
|
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
838
|
+
this.aspectRatios = computed(() => parseAspectRatios(this.aspectRatio()).ratios, ...(ngDevMode ? [{ debugName: "aspectRatios" }] : []));
|
|
767
839
|
}
|
|
768
840
|
cropButtonHandler() {
|
|
769
841
|
this.cropPressed.emit();
|
|
770
|
-
this.container.
|
|
842
|
+
this.container.crop();
|
|
771
843
|
}
|
|
772
844
|
ratioHandler(r) {
|
|
773
845
|
if (this.service.cropperRatio() === r) {
|
|
@@ -778,11 +850,11 @@ class AXImageEditorCropOptionsComponent {
|
|
|
778
850
|
}
|
|
779
851
|
}
|
|
780
852
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
781
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n @for (item of
|
|
853
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n @for (item of aspectRatios(); track item) {\n <ax-button\n [selected]=\"service.cropperRatio() === item\"\n [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n (click)=\"ratioHandler(item)\"\n class=\"ax-crop-save ax-xs\"\n [text]=\"item\"\n ></ax-button>\n } @empty {\n <ax-button\n [selected]=\"service.cropperRatio() === '1:1'\"\n [color]=\"service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('1:1')\"\n class=\"ax-crop-save ax-xs\"\n text=\"1:1\"\n ></ax-button>\n <ax-button\n [selected]=\"service.cropperRatio() === '16:9'\"\n [color]=\"service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('16:9')\"\n class=\"ax-crop-save ax-xs\"\n text=\"16:9\"\n ></ax-button>\n }\n</div>\n\n<ax-button\n (click)=\"cropButtonHandler()\"\n class=\"ax-crop-save ax-xs\"\n [text]=\"'@acorex:image-editor.crop' | translate | async\"\n color=\"primary\"\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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
782
854
|
}
|
|
783
855
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorCropOptionsComponent, decorators: [{
|
|
784
856
|
type: Component,
|
|
785
|
-
args: [{ selector: 'ax-image-editor-crop-options', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], template: "<div class=\"ax-image-editor-crop-ratios\">\n @for (item of
|
|
857
|
+
args: [{ selector: 'ax-image-editor-crop-options', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], template: "<div class=\"ax-image-editor-crop-ratios\">\n @for (item of aspectRatios(); track item) {\n <ax-button\n [selected]=\"service.cropperRatio() === item\"\n [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n (click)=\"ratioHandler(item)\"\n class=\"ax-crop-save ax-xs\"\n [text]=\"item\"\n ></ax-button>\n } @empty {\n <ax-button\n [selected]=\"service.cropperRatio() === '1:1'\"\n [color]=\"service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('1:1')\"\n class=\"ax-crop-save ax-xs\"\n text=\"1:1\"\n ></ax-button>\n <ax-button\n [selected]=\"service.cropperRatio() === '16:9'\"\n [color]=\"service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n (click)=\"ratioHandler('16:9')\"\n class=\"ax-crop-save ax-xs\"\n text=\"16:9\"\n ></ax-button>\n }\n</div>\n\n<ax-button\n (click)=\"cropButtonHandler()\"\n class=\"ax-crop-save ax-xs\"\n [text]=\"'@acorex:image-editor.crop' | translate | async\"\n color=\"primary\"\n></ax-button>\n" }]
|
|
786
858
|
}] });
|
|
787
859
|
|
|
788
860
|
/** @ignore */
|
|
@@ -886,6 +958,8 @@ class AXImageEditorToolsBarComponent {
|
|
|
886
958
|
* Tool component reference to activate on load.
|
|
887
959
|
*/
|
|
888
960
|
this.active = input(...(ngDevMode ? [undefined, { debugName: "active" }] : []));
|
|
961
|
+
/** Hides the tools bar UI while keeping projected tools configurable. */
|
|
962
|
+
this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
|
|
889
963
|
this.penTool = contentChild(AXImageEditorPenComponent, ...(ngDevMode ? [{ debugName: "penTool" }] : []));
|
|
890
964
|
this.highlightTool = contentChild(AXImageEditorHighlightComponent, ...(ngDevMode ? [{ debugName: "highlightTool" }] : []));
|
|
891
965
|
this.cropTool = contentChild(AXImageEditorCropComponent, ...(ngDevMode ? [{ debugName: "cropTool" }] : []));
|
|
@@ -897,18 +971,20 @@ class AXImageEditorToolsBarComponent {
|
|
|
897
971
|
}
|
|
898
972
|
#activeEffect;
|
|
899
973
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolsBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
900
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorToolsBarComponent, isStandalone: true, selector: "ax-image-editor-tools-bar", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], queries: [{ propertyName: "penTool", first: true, predicate: AXImageEditorPenComponent, descendants: true, isSignal: true }, { propertyName: "highlightTool", first: true, predicate: AXImageEditorHighlightComponent, descendants: true, isSignal: true }, { propertyName: "cropTool", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }, { propertyName: "rotateTool", first: true, predicate: AXImageEditorRotateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorPenOptionsComponent, selector: "ax-image-editor-pen-options" }, { kind: "component", type: AXImageEditorHighlightOptionsComponent, selector: "ax-image-editor-highlight-options" }, { kind: "component", type: AXImageEditorCropOptionsComponent, selector: "ax-image-editor-crop-options", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "component", type: AXImageEditorRotateOptionsComponent, selector: "ax-image-editor-rotate-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
974
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXImageEditorToolsBarComponent, isStandalone: true, selector: "ax-image-editor-tools-bar", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ax-image-editor-tools-bar-hidden": "hidden()" } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], queries: [{ propertyName: "penTool", first: true, predicate: AXImageEditorPenComponent, descendants: true, isSignal: true }, { propertyName: "highlightTool", first: true, predicate: AXImageEditorHighlightComponent, descendants: true, isSignal: true }, { propertyName: "cropTool", first: true, predicate: AXImageEditorCropComponent, descendants: true, isSignal: true }, { propertyName: "rotateTool", first: true, predicate: AXImageEditorRotateComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.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: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorPenOptionsComponent, selector: "ax-image-editor-pen-options" }, { kind: "component", type: AXImageEditorHighlightOptionsComponent, selector: "ax-image-editor-highlight-options" }, { kind: "component", type: AXImageEditorCropOptionsComponent, selector: "ax-image-editor-crop-options", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "component", type: AXImageEditorRotateOptionsComponent, selector: "ax-image-editor-rotate-options" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
901
975
|
}
|
|
902
976
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolsBarComponent, decorators: [{
|
|
903
977
|
type: Component,
|
|
904
|
-
args: [{ selector: 'ax-image-editor-tools-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush,
|
|
978
|
+
args: [{ selector: 'ax-image-editor-tools-bar', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
979
|
+
'[class.ax-image-editor-tools-bar-hidden]': 'hidden()',
|
|
980
|
+
}, imports: [
|
|
905
981
|
AXDecoratorModule,
|
|
906
982
|
AXToolBarModule,
|
|
907
983
|
AXImageEditorPenOptionsComponent,
|
|
908
984
|
AXImageEditorHighlightOptionsComponent,
|
|
909
985
|
AXImageEditorCropOptionsComponent,
|
|
910
986
|
AXImageEditorRotateOptionsComponent,
|
|
911
|
-
], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"] }]
|
|
987
|
+
], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolsBarComponent }], template: "<ax-toolbar class=\"ax-main-toolbar\">\n <ax-prefix class=\"ax-image-editor-tool-triggers\">\n <ng-content\n select=\"ax-image-editor-pen, ax-image-editor-highlight, ax-image-editor-crop, ax-image-editor-rotate\"\n ></ng-content>\n </ax-prefix>\n\n @if (service.activeToolState()) {\n <ax-suffix class=\"ax-image-editor-tool-options\">\n @switch (service.activeToolState()) {\n @case ('pen') {\n @if (penTool()) {\n <ax-image-editor-pen-options></ax-image-editor-pen-options>\n }\n }\n @case ('highlight') {\n @if (highlightTool()) {\n <ax-image-editor-highlight-options></ax-image-editor-highlight-options>\n }\n }\n @case ('crop') {\n @if (cropTool()) {\n <ax-image-editor-crop-options [aspectRatio]=\"cropAspectRatio()\"></ax-image-editor-crop-options>\n }\n }\n @case ('rotate') {\n @if (rotateTool()) {\n <ax-image-editor-rotate-options></ax-image-editor-rotate-options>\n }\n }\n }\n </ax-suffix>\n }\n</ax-toolbar>\n", styles: ["ax-image-editor-tools-bar{display:block;width:100%}ax-image-editor-tools-bar.ax-image-editor-tools-bar-hidden{display:none}ax-image-editor-tools-bar .ax-main-toolbar{justify-content:space-between;padding:.5rem}ax-image-editor-tools-bar .ax-main-toolbar ax-divider{display:none}ax-image-editor-tools-bar .ax-main-toolbar>ax-suffix{flex:1;margin-left:auto}ax-image-editor-tools-bar .ax-image-editor-tool-triggers{display:flex;align-items:center;justify-content:flex-start;gap:.5rem}ax-image-editor-tools-bar .ax-image-editor-tool-options{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;flex:1;min-width:0}ax-image-editor-tools-bar .ax-image-editor-crop-ratios{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.25rem}ax-image-editor-tools-bar ax-image-editor-pen-options,ax-image-editor-tools-bar ax-image-editor-highlight-options{display:flex;align-items:center;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-color-box,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-color-box{flex:0 0 auto}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider{padding:.5rem .75rem;width:10rem}ax-image-editor-tools-bar ax-image-editor-pen-options ax-range-slider .ax-range-slider .ax-range-slider-handler,ax-image-editor-tools-bar ax-image-editor-highlight-options ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-tools-bar ax-image-editor-crop-options{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.5rem}ax-image-editor-tools-bar ax-image-editor-rotate-options{display:flex;align-items:center;gap:.25rem}\n"] }]
|
|
912
988
|
}] });
|
|
913
989
|
|
|
914
990
|
/**
|
|
@@ -920,7 +996,7 @@ class AXImageEditorToolSelectorComponent {
|
|
|
920
996
|
this.aspectRatio = input([], ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
921
997
|
}
|
|
922
998
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
923
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-image-editor-tools-bar>\n <ax-image-editor-pen></ax-image-editor-pen>\n <ax-image-editor-highlight></ax-image-editor-highlight>\n <ax-image-editor-crop [aspectRatio]=\"aspectRatio()\"></ax-image-editor-crop>\n <ax-image-editor-rotate></ax-image-editor-rotate>\n</ax-image-editor-tools-bar>\n", dependencies: [{ kind: "component", type: AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active"] }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"] }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
999
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: AXImageEditorToolSelectorComponent, isStandalone: true, selector: "ax-image-editor-tool-selector", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], ngImport: i0, template: "<ax-image-editor-tools-bar>\n <ax-image-editor-pen></ax-image-editor-pen>\n <ax-image-editor-highlight></ax-image-editor-highlight>\n <ax-image-editor-crop [aspectRatio]=\"aspectRatio()\"></ax-image-editor-crop>\n <ax-image-editor-rotate></ax-image-editor-rotate>\n</ax-image-editor-tools-bar>\n", dependencies: [{ kind: "component", type: AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
924
1000
|
}
|
|
925
1001
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXImageEditorToolSelectorComponent, decorators: [{
|
|
926
1002
|
type: Component,
|