@underlayerdev/ui 0.20.0 → 0.21.1

package/fesm2022/underlayerdev-ui.mjs

@@ -10,7 +10,6 @@ import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from "@angular/cdk/menu";
 import { CdkTrapFocus } from "@angular/cdk/a11y";
 import { fromEvent, map } from "rxjs";
 import { debounceTime } from "rxjs/operators";
-import { ImageCropperComponent as ImageCropperComponent$1 } from "ngx-image-cropper";
 import { DomSanitizer } from "@angular/platform-browser";
 import { BreakpointObserver } from "@angular/cdk/layout";
 var AccordionItemComponent = class AccordionItemComponent {
@@ -7741,7 +7740,7 @@ var ImageCropperComponent = class ImageCropperComponent {
 	cropped = output();
 	cancelled = output();
 	loadFailed = output();
-	cropperRef = viewChild(ImageCropperComponent$1, ...ngDevMode ? [{ debugName: "cropperRef" }] : /* istanbul ignore next */ []);
+	cropperRef = viewChild("cropper", ...ngDevMode ? [{ debugName: "cropperRef" }] : /* istanbul ignore next */ []);
 	cropperImageFile = computed(() => this.imageFile() ?? void 0, ...ngDevMode ? [{ debugName: "cropperImageFile" }] : /* istanbul ignore next */ []);
 	isRound = computed(() => this.shape() === "round", ...ngDevMode ? [{ debugName: "isRound" }] : /* istanbul ignore next */ []);
 	isLocked = computed(() => this.aspectRatio() != null, ...ngDevMode ? [{ debugName: "isLocked" }] : /* istanbul ignore next */ []);
@@ -7924,218 +7923,167 @@ var ImageCropperComponent = class ImageCropperComponent {
 		viewQueries: [{
 			propertyName: "cropperRef",
 			first: true,
-			predicate: ImageCropperComponent$1,
+			predicate: ["cropper"],
 			descendants: true,
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n  @if (imageFile()) {\n    <div class=\"ul-image-cropper\">\n      <image-cropper\n        class=\"ul-image-cropper__frame\"\n        [imageFile]=\"cropperImageFile()\"\n        [maintainAspectRatio]=\"isLocked()\"\n        [aspectRatio]=\"effectiveAspectRatio()\"\n        [roundCropper]=\"isRound()\"\n        [cropperStaticWidth]=\"frameWidth()\"\n        [cropperStaticHeight]=\"frameHeight()\"\n        [allowMoveImage]=\"isLocked()\"\n        [transform]=\"transform()\"\n        [resizeToWidth]=\"maxOutputSize()\"\n        [resizeToHeight]=\"maxOutputSize()\"\n        [onlyScaleDown]=\"true\"\n        [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n        format=\"jpeg\"\n        output=\"blob\"\n        (cropperReady)=\"onCropperReady($event)\"\n        (transformChange)=\"onTransformChange($event)\"\n        (loadImageFailed)=\"loadFailed.emit()\"\n      />\n\n      @if (isLocked()) {\n        <label class=\"ul-image-cropper__zoom\">\n          <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n          <input\n            type=\"range\"\n            class=\"ul-image-cropper__zoom-input\"\n            [min]=\"minZoom\"\n            [max]=\"maxZoom\"\n            [step]=\"zoomStep\"\n            [value]=\"zoom()\"\n            (input)=\"onZoomInput($event)\"\n          />\n        </label>\n      }\n    </div>\n  }\n\n  <div class=\"ul-modal__foter-content\" ul-modal-footer>\n    <ul-button\n      theme=\"fill-purple\"\n      size=\"md\"\n      [disabled]=\"!cropperReady()\"\n      (buttonClick)=\"onConfirm()\"\n    >\n      {{ confirmLabel() }}\n    </ul-button>\n  </div>\n</ul-modal>\n",
+		template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n  @if (imageFile()) {\n    <div class=\"ul-image-cropper\">\n      <!-- Loaded when a photo is picked, not with the app: see the import in image-cropper.ts.\n           Until it is in, the frame's box holds the space it will take. -->\n      @defer (on immediate) {\n        <image-cropper\n          #cropper\n          class=\"ul-image-cropper__frame\"\n          [imageFile]=\"cropperImageFile()\"\n          [maintainAspectRatio]=\"isLocked()\"\n          [aspectRatio]=\"effectiveAspectRatio()\"\n          [roundCropper]=\"isRound()\"\n          [cropperStaticWidth]=\"frameWidth()\"\n          [cropperStaticHeight]=\"frameHeight()\"\n          [allowMoveImage]=\"isLocked()\"\n          [transform]=\"transform()\"\n          [resizeToWidth]=\"maxOutputSize()\"\n          [resizeToHeight]=\"maxOutputSize()\"\n          [onlyScaleDown]=\"true\"\n          [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n          format=\"jpeg\"\n          output=\"blob\"\n          (cropperReady)=\"onCropperReady($event)\"\n          (transformChange)=\"onTransformChange($event)\"\n          (loadImageFailed)=\"loadFailed.emit()\"\n        />\n      } @placeholder {\n        <div class=\"ul-image-cropper__frame\"></div>\n      }\n\n      @if (isLocked()) {\n        <label class=\"ul-image-cropper__zoom\">\n          <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n          <input\n            type=\"range\"\n            class=\"ul-image-cropper__zoom-input\"\n            [min]=\"minZoom\"\n            [max]=\"maxZoom\"\n            [step]=\"zoomStep\"\n            [value]=\"zoom()\"\n            (input)=\"onZoomInput($event)\"\n          />\n        </label>\n      }\n    </div>\n  }\n\n  <div class=\"ul-modal__foter-content\" ul-modal-footer>\n    <ul-button\n      theme=\"fill-purple\"\n      size=\"md\"\n      [disabled]=\"!cropperReady()\"\n      (buttonClick)=\"onConfirm()\"\n    >\n      {{ confirmLabel() }}\n    </ul-button>\n  </div>\n</ul-modal>\n",
 		styles: [".ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}.ul-modal__foter-content{width:100%;margin-top:32px}\n"],
-		dependencies: [
-			{
-				kind: "component",
-				type: ImageCropperComponent$1,
-				selector: "image-cropper",
-				inputs: [
-					"imageChangedEvent",
-					"imageURL",
-					"imageBase64",
-					"imageFile",
-					"imageAltText",
-					"options",
-					"cropperFrameAriaLabel",
-					"output",
-					"format",
-					"autoCrop",
-					"cropper",
-					"transform",
-					"maintainAspectRatio",
-					"aspectRatio",
-					"resetCropOnAspectRatioChange",
-					"resizeToWidth",
-					"resizeToHeight",
-					"cropperMinWidth",
-					"cropperMinHeight",
-					"cropperMaxHeight",
-					"cropperMaxWidth",
-					"cropperStaticWidth",
-					"cropperStaticHeight",
-					"canvasRotation",
-					"initialStepSize",
-					"roundCropper",
-					"onlyScaleDown",
-					"imageQuality",
-					"backgroundColor",
-					"containWithinAspectRatio",
-					"hideResizeSquares",
-					"allowMoveImage",
-					"checkImageType",
-					"alignImage",
-					"disabled",
-					"hidden"
-				],
-				outputs: [
-					"imageCropped",
-					"startCropImage",
-					"imageLoaded",
-					"cropperReady",
-					"loadImageFailed",
-					"transformChange",
-					"cropperChange"
-				]
-			},
-			{
-				kind: "component",
-				type: ModalComponent,
-				selector: "ul-modal",
-				inputs: [
-					"open",
-					"variant",
-					"title",
-					"closeOnBackdropClick",
-					"showCloseButton",
-					"confirmLabel",
-					"cancelLabel",
-					"customClass",
-					"fullScreenInMobile"
-				],
-				outputs: [
-					"openChange",
-					"closed",
-					"confirmed",
-					"cancelled"
-				]
-			},
-			{
-				kind: "component",
-				type: ButtonComponent,
-				selector: "ul-button",
-				inputs: [
-					"size",
-					"theme",
-					"iconOnly",
-					"vertical",
-					"disabled",
-					"type",
-					"ariaLabel"
-				],
-				outputs: ["buttonClick"]
-			}
-		]
+		dependencies: [{
+			kind: "component",
+			type: ModalComponent,
+			selector: "ul-modal",
+			inputs: [
+				"open",
+				"variant",
+				"title",
+				"closeOnBackdropClick",
+				"showCloseButton",
+				"confirmLabel",
+				"cancelLabel",
+				"customClass",
+				"fullScreenInMobile"
+			],
+			outputs: [
+				"openChange",
+				"closed",
+				"confirmed",
+				"cancelled"
+			]
+		}, {
+			kind: "component",
+			type: ButtonComponent,
+			selector: "ul-button",
+			inputs: [
+				"size",
+				"theme",
+				"iconOnly",
+				"vertical",
+				"disabled",
+				"type",
+				"ariaLabel"
+			],
+			outputs: ["buttonClick"]
+		}],
+		deferBlockDependencies: [() => [import("ngx-image-cropper").then((m) => m.ImageCropperComponent)]]
 	});
 };
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
+i0.ɵɵngDeclareClassMetadataAsync({
+	minVersion: "18.0.0",
 	version: "22.2.2",
 	ngImport: i0,
 	type: ImageCropperComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ul-image-cropper",
-			imports: [
-				ImageCropperComponent$1,
-				ModalComponent,
-				ButtonComponent
-			],
-			template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n  @if (imageFile()) {\n    <div class=\"ul-image-cropper\">\n      <image-cropper\n        class=\"ul-image-cropper__frame\"\n        [imageFile]=\"cropperImageFile()\"\n        [maintainAspectRatio]=\"isLocked()\"\n        [aspectRatio]=\"effectiveAspectRatio()\"\n        [roundCropper]=\"isRound()\"\n        [cropperStaticWidth]=\"frameWidth()\"\n        [cropperStaticHeight]=\"frameHeight()\"\n        [allowMoveImage]=\"isLocked()\"\n        [transform]=\"transform()\"\n        [resizeToWidth]=\"maxOutputSize()\"\n        [resizeToHeight]=\"maxOutputSize()\"\n        [onlyScaleDown]=\"true\"\n        [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n        format=\"jpeg\"\n        output=\"blob\"\n        (cropperReady)=\"onCropperReady($event)\"\n        (transformChange)=\"onTransformChange($event)\"\n        (loadImageFailed)=\"loadFailed.emit()\"\n      />\n\n      @if (isLocked()) {\n        <label class=\"ul-image-cropper__zoom\">\n          <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n          <input\n            type=\"range\"\n            class=\"ul-image-cropper__zoom-input\"\n            [min]=\"minZoom\"\n            [max]=\"maxZoom\"\n            [step]=\"zoomStep\"\n            [value]=\"zoom()\"\n            (input)=\"onZoomInput($event)\"\n          />\n        </label>\n      }\n    </div>\n  }\n\n  <div class=\"ul-modal__foter-content\" ul-modal-footer>\n    <ul-button\n      theme=\"fill-purple\"\n      size=\"md\"\n      [disabled]=\"!cropperReady()\"\n      (buttonClick)=\"onConfirm()\"\n    >\n      {{ confirmLabel() }}\n    </ul-button>\n  </div>\n</ul-modal>\n",
-			styles: [".ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}.ul-modal__foter-content{width:100%;margin-top:32px}\n"]
-		}]
-	}],
-	ctorParameters: () => [],
-	propDecorators: {
-		open: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "open",
-				required: false
-			}]
-		}, {
-			type: i0.Output,
-			args: ["openChange"]
-		}],
-		imageFile: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "imageFile",
-				required: false
-			}]
-		}],
-		shape: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "shape",
-				required: false
-			}]
-		}],
-		aspectRatio: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "aspectRatio",
-				required: false
-			}]
-		}],
-		maxOutputSize: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "maxOutputSize",
-				required: false
-			}]
-		}],
-		title: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "title",
-				required: false
-			}]
-		}],
-		confirmLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "confirmLabel",
-				required: false
-			}]
-		}],
-		zoomLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "zoomLabel",
-				required: false
-			}]
-		}],
-		frameAriaLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "frameAriaLabel",
-				required: false
+	resolveDeferredDeps: () => [import("ngx-image-cropper").then((m) => m.ImageCropperComponent)],
+	resolveMetadata: (ImageCropperComponent) => ({
+		decorators: [{
+			type: Component,
+			args: [{
+				selector: "ul-image-cropper",
+				imports: [
+					NgxImageCropperComponent,
+					ModalComponent,
+					ButtonComponent
+				],
+				template: "<ul-modal [(open)]=\"open\" variant=\"custom\" [title]=\"title()\" (closed)=\"onClosed()\">\n  @if (imageFile()) {\n    <div class=\"ul-image-cropper\">\n      <!-- Loaded when a photo is picked, not with the app: see the import in image-cropper.ts.\n           Until it is in, the frame's box holds the space it will take. -->\n      @defer (on immediate) {\n        <image-cropper\n          #cropper\n          class=\"ul-image-cropper__frame\"\n          [imageFile]=\"cropperImageFile()\"\n          [maintainAspectRatio]=\"isLocked()\"\n          [aspectRatio]=\"effectiveAspectRatio()\"\n          [roundCropper]=\"isRound()\"\n          [cropperStaticWidth]=\"frameWidth()\"\n          [cropperStaticHeight]=\"frameHeight()\"\n          [allowMoveImage]=\"isLocked()\"\n          [transform]=\"transform()\"\n          [resizeToWidth]=\"maxOutputSize()\"\n          [resizeToHeight]=\"maxOutputSize()\"\n          [onlyScaleDown]=\"true\"\n          [cropperFrameAriaLabel]=\"frameAriaLabel()\"\n          format=\"jpeg\"\n          output=\"blob\"\n          (cropperReady)=\"onCropperReady($event)\"\n          (transformChange)=\"onTransformChange($event)\"\n          (loadImageFailed)=\"loadFailed.emit()\"\n        />\n      } @placeholder {\n        <div class=\"ul-image-cropper__frame\"></div>\n      }\n\n      @if (isLocked()) {\n        <label class=\"ul-image-cropper__zoom\">\n          <span class=\"ul-image-cropper__zoom-label\">{{ zoomLabel() }}</span>\n          <input\n            type=\"range\"\n            class=\"ul-image-cropper__zoom-input\"\n            [min]=\"minZoom\"\n            [max]=\"maxZoom\"\n            [step]=\"zoomStep\"\n            [value]=\"zoom()\"\n            (input)=\"onZoomInput($event)\"\n          />\n        </label>\n      }\n    </div>\n  }\n\n  <div class=\"ul-modal__foter-content\" ul-modal-footer>\n    <ul-button\n      theme=\"fill-purple\"\n      size=\"md\"\n      [disabled]=\"!cropperReady()\"\n      (buttonClick)=\"onConfirm()\"\n    >\n      {{ confirmLabel() }}\n    </ul-button>\n  </div>\n</ul-modal>\n",
+				styles: [".ul-image-cropper{display:flex;flex-direction:column;align-items:center;gap:16px}.ul-image-cropper__frame{display:block;width:100%;height:320px;--cropper-overlay-color: rgba(10, 10, 10, .85);--cropper-outline-color: rgba(10, 10, 10, .85);--cropper-color: #6f3de0;--cropper-border: 2px solid #6f3de0;--cropper-hover-border: 2px solid #6f3de0;--cropper-focus-border: 2px solid #6f3de0;--cropper-resize-square-bg: #6f3de0;--cropper-resize-square-border: 1px solid #0a0a0a}.ul-image-cropper__zoom{display:flex;align-items:center;gap:12px;width:100%}.ul-image-cropper__zoom-label{font-family:Underlayer Nunito Sans;line-height:20px;font-size:14px;letter-spacing:.14px;font-weight:400;color:#ffffffb3;flex-shrink:0}.ul-image-cropper__zoom-input{flex:1;accent-color:#6f3de0}.ul-modal__foter-content{width:100%;margin-top:32px}\n"]
+			}]
+		}],
+		ctorParameters: () => [],
+		propDecorators: {
+			open: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "open",
+					required: false
+				}]
+			}, {
+				type: i0.Output,
+				args: ["openChange"]
+			}],
+			imageFile: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "imageFile",
+					required: false
+				}]
+			}],
+			shape: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "shape",
+					required: false
+				}]
+			}],
+			aspectRatio: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "aspectRatio",
+					required: false
+				}]
+			}],
+			maxOutputSize: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "maxOutputSize",
+					required: false
+				}]
+			}],
+			title: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "title",
+					required: false
+				}]
+			}],
+			confirmLabel: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "confirmLabel",
+					required: false
+				}]
+			}],
+			zoomLabel: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "zoomLabel",
+					required: false
+				}]
+			}],
+			frameAriaLabel: [{
+				type: i0.Input,
+				args: [{
+					isSignal: true,
+					alias: "frameAriaLabel",
+					required: false
+				}]
+			}],
+			cropped: [{
+				type: i0.Output,
+				args: ["cropped"]
+			}],
+			cancelled: [{
+				type: i0.Output,
+				args: ["cancelled"]
+			}],
+			loadFailed: [{
+				type: i0.Output,
+				args: ["loadFailed"]
+			}],
+			cropperRef: [{
+				type: i0.ViewChild,
+				args: ["cropper", { isSignal: true }]
 			}]
-		}],
-		cropped: [{
-			type: i0.Output,
-			args: ["cropped"]
-		}],
-		cancelled: [{
-			type: i0.Output,
-			args: ["cancelled"]
-		}],
-		loadFailed: [{
-			type: i0.Output,
-			args: ["loadFailed"]
-		}],
-		cropperRef: [{
-			type: i0.ViewChild,
-			args: [i0.forwardRef(() => ImageCropperComponent$1), { isSignal: true }]
-		}]
-	}
+		}
+	})
 });
 const DEFAULT_DURATION_MS = 500;
 const MOVE_CANCEL_THRESHOLD_PX = 10;