@radix-ng/primitives 0.42.0 → 0.44.0

package/fesm2022/radix-ng-primitives-cropper.mjs

@@ -11,10 +11,10 @@ class RdxCropperCropAreaDirective {
     constructor() {
         this.rootContext = injectCropperRootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperCropAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCropperCropAreaDirective, isStandalone: true, selector: "[rdxCropperCropArea]", host: { properties: { "style": "rootContext.getCropAreaStyle()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperCropAreaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxCropperCropAreaDirective, isStandalone: true, selector: "[rdxCropperCropArea]", host: { properties: { "style": "rootContext.getCropAreaStyle()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperCropAreaDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperCropAreaDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxCropperCropArea]',
@@ -28,10 +28,10 @@ class RdxCropperDescriptionDirective {
     constructor() {
         this.rootContext = injectCropperRootContext();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.4", type: RdxCropperDescriptionDirective, isStandalone: true, selector: "[rdxCropperDescription]", host: { properties: { "attr.id": "rootContext.descriptionId()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperDescriptionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.3", type: RdxCropperDescriptionDirective, isStandalone: true, selector: "[rdxCropperDescription]", host: { properties: { "attr.id": "rootContext.descriptionId()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperDescriptionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperDescriptionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxCropperDescription]',
@@ -44,13 +44,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImpor
 class RdxCropperImageComponent {
     constructor() {
         this.rootContext = injectCropperRootContext();
-        this.imgClass = input();
-        this.imgStyles = input();
-        this.imgClasses = computed(() => this.imgClass());
-        this.imgStyless = computed(() => this.imgStyles());
+        this.imgClass = input(...(ngDevMode ? [undefined, { debugName: "imgClass" }] : []));
+        this.imgStyles = input(...(ngDevMode ? [undefined, { debugName: "imgStyles" }] : []));
+        this.imgClasses = computed(() => this.imgClass(), ...(ngDevMode ? [{ debugName: "imgClasses" }] : []));
+        this.imgStyless = computed(() => this.imgStyles(), ...(ngDevMode ? [{ debugName: "imgStyless" }] : []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.4", type: RdxCropperImageComponent, isStandalone: true, selector: "[rdxCropperImage]", inputs: { imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, imgStyles: { classPropertyName: "imgStyles", publicName: "imgStyles", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "rootContext.getImageWrapperStyle()" } }, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.3", type: RdxCropperImageComponent, isStandalone: true, selector: "[rdxCropperImage]", inputs: { imgClass: { classPropertyName: "imgClass", publicName: "imgClass", isSignal: true, isRequired: false, transformFunction: null }, imgStyles: { classPropertyName: "imgStyles", publicName: "imgStyles", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "rootContext.getImageWrapperStyle()" } }, ngImport: i0, template: `
         <img
             [class]="imgClasses()"
             [src]="rootContext.getImageProps()['src']"
@@ -61,7 +61,7 @@ class RdxCropperImageComponent {
         />
     `, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperImageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: '[rdxCropperImage]',
@@ -85,44 +85,44 @@ class RdxCropperRootDirective {
     constructor() {
         this.elementRef = inject((ElementRef));
         this.CROPPER_DESC_WARN_MESSAGE = `Warning: \`Cropper\` requires a description element for accessibility.`;
-        this.image = input.required();
-        this.cropPadding = input(25, { transform: numberAttribute });
-        this.aspectRatio = input(1, { transform: numberAttribute });
-        this.minZoom = input(1, { transform: numberAttribute });
-        this.maxZoom = input(3, { transform: numberAttribute });
-        this.zoomSensitivity = input(0.005, { transform: numberAttribute });
-        this.keyboardStep = input(10, { transform: numberAttribute });
-        this.zoom = input(undefined, { transform: numberAttribute });
+        this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : []));
+        this.cropPadding = input(25, ...(ngDevMode ? [{ debugName: "cropPadding", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.aspectRatio = input(1, ...(ngDevMode ? [{ debugName: "aspectRatio", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.minZoom = input(1, ...(ngDevMode ? [{ debugName: "minZoom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.maxZoom = input(3, ...(ngDevMode ? [{ debugName: "maxZoom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.zoomSensitivity = input(0.005, ...(ngDevMode ? [{ debugName: "zoomSensitivity", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.keyboardStep = input(10, ...(ngDevMode ? [{ debugName: "keyboardStep", transform: numberAttribute }] : [{ transform: numberAttribute }]));
+        this.zoom = input(undefined, ...(ngDevMode ? [{ debugName: "zoom", transform: numberAttribute }] : [{ transform: numberAttribute }]));
         this.onCropChange = output();
         this.onZoomChange = output();
         // State signals
-        this.imgWidth = signal(null);
-        this.imgHeight = signal(null);
-        this.cropAreaWidth = signal(0);
-        this.cropAreaHeight = signal(0);
-        this.imageWrapperWidth = signal(0);
-        this.imageWrapperHeight = signal(0);
-        this.offsetX = signal(0);
-        this.offsetY = signal(0);
-        this.internalZoom = signal(this.minZoom());
-        this.isDragging = signal(false);
-        this.descriptionId = signal(`cropper-${Math.random().toString(36).substring(2, 9)}`);
-        this.isZoomControlled = computed(() => this.zoom() !== undefined);
-        this.effectiveZoom = computed(() => (this.isZoomControlled() ? this.zoom() : this.internalZoom()));
+        this.imgWidth = signal(null, ...(ngDevMode ? [{ debugName: "imgWidth" }] : []));
+        this.imgHeight = signal(null, ...(ngDevMode ? [{ debugName: "imgHeight" }] : []));
+        this.cropAreaWidth = signal(0, ...(ngDevMode ? [{ debugName: "cropAreaWidth" }] : []));
+        this.cropAreaHeight = signal(0, ...(ngDevMode ? [{ debugName: "cropAreaHeight" }] : []));
+        this.imageWrapperWidth = signal(0, ...(ngDevMode ? [{ debugName: "imageWrapperWidth" }] : []));
+        this.imageWrapperHeight = signal(0, ...(ngDevMode ? [{ debugName: "imageWrapperHeight" }] : []));
+        this.offsetX = signal(0, ...(ngDevMode ? [{ debugName: "offsetX" }] : []));
+        this.offsetY = signal(0, ...(ngDevMode ? [{ debugName: "offsetY" }] : []));
+        this.internalZoom = signal(this.minZoom(), ...(ngDevMode ? [{ debugName: "internalZoom" }] : []));
+        this.isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
+        this.descriptionId = signal(`cropper-${Math.random().toString(36).substring(2, 9)}`, ...(ngDevMode ? [{ debugName: "descriptionId" }] : []));
+        this.isZoomControlled = computed(() => this.zoom() !== undefined, ...(ngDevMode ? [{ debugName: "isZoomControlled" }] : []));
+        this.effectiveZoom = computed(() => (this.isZoomControlled() ? this.zoom() : this.internalZoom()), ...(ngDevMode ? [{ debugName: "effectiveZoom" }] : []));
         this.zoomValueText = computed(() => {
             const zoomPercent = this.effectiveZoom() * 100;
             return `Zoom: ${zoomPercent.toFixed(0)}%`;
-        });
+        }, ...(ngDevMode ? [{ debugName: "zoomValueText" }] : []));
         // Refs
-        this.dragStartPoint = signal({ x: 0, y: 0 });
-        this.dragStartOffset = signal({ x: 0, y: 0 });
-        this.latestRestrictedOffset = signal({ x: 0, y: 0 });
-        this.latestZoom = signal(this.minZoom());
-        this.isInitialSetupDone = signal(false);
-        this.initialPinchDistance = signal(0);
-        this.initialPinchZoom = signal(1);
-        this.isPinching = signal(false);
-        this.hasWarned = signal(false);
+        this.dragStartPoint = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragStartPoint" }] : []));
+        this.dragStartOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "dragStartOffset" }] : []));
+        this.latestRestrictedOffset = signal({ x: 0, y: 0 }, ...(ngDevMode ? [{ debugName: "latestRestrictedOffset" }] : []));
+        this.latestZoom = signal(this.minZoom(), ...(ngDevMode ? [{ debugName: "latestZoom" }] : []));
+        this.isInitialSetupDone = signal(false, ...(ngDevMode ? [{ debugName: "isInitialSetupDone" }] : []));
+        this.initialPinchDistance = signal(0, ...(ngDevMode ? [{ debugName: "initialPinchDistance" }] : []));
+        this.initialPinchZoom = signal(1, ...(ngDevMode ? [{ debugName: "initialPinchZoom" }] : []));
+        this.isPinching = signal(false, ...(ngDevMode ? [{ debugName: "isPinching" }] : []));
+        this.hasWarned = signal(false, ...(ngDevMode ? [{ debugName: "hasWarned" }] : []));
         afterNextRender(() => {
             this.initializeContainerDimensions();
         });
@@ -623,10 +623,10 @@ class RdxCropperRootDirective {
             height: `${this.cropAreaHeight()}px`
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.4", type: RdxCropperRootDirective, isStandalone: true, selector: "[rdxCropperRoot]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, cropPadding: { classPropertyName: "cropPadding", publicName: "cropPadding", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomSensitivity: { classPropertyName: "zoomSensitivity", publicName: "zoomSensitivity", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCropChange: "onCropChange", onZoomChange: "onZoomChange" }, host: { attributes: { "tabindex": "0", "role": "application" }, listeners: { "mousedown": "onMouseDown($event)", "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)" }, properties: { "attr.aria-label": "\"Interactive image cropper\"", "attr.aria-describedby": "descriptionId()", "attr.aria-valuemin": "minZoom()", "attr.aria-valuemax": "maxZoom()", "attr.aria-valuenow": "effectiveZoom()", "attr.aria-valuetext": "zoomValueText()" } }, providers: [provideToken(CROPPER_ROOT_CONTEXT, RdxCropperRootDirective)], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperRootDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.3", type: RdxCropperRootDirective, isStandalone: true, selector: "[rdxCropperRoot]", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, cropPadding: { classPropertyName: "cropPadding", publicName: "cropPadding", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minZoom: { classPropertyName: "minZoom", publicName: "minZoom", isSignal: true, isRequired: false, transformFunction: null }, maxZoom: { classPropertyName: "maxZoom", publicName: "maxZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomSensitivity: { classPropertyName: "zoomSensitivity", publicName: "zoomSensitivity", isSignal: true, isRequired: false, transformFunction: null }, keyboardStep: { classPropertyName: "keyboardStep", publicName: "keyboardStep", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onCropChange: "onCropChange", onZoomChange: "onZoomChange" }, host: { attributes: { "tabindex": "0", "role": "application" }, listeners: { "mousedown": "onMouseDown($event)", "keydown": "onKeyDown($event)", "keyup": "onKeyUp($event)" }, properties: { "attr.aria-label": "\"Interactive image cropper\"", "attr.aria-describedby": "descriptionId()", "attr.aria-valuemin": "minZoom()", "attr.aria-valuemax": "maxZoom()", "attr.aria-valuenow": "effectiveZoom()", "attr.aria-valuetext": "zoomValueText()" } }, providers: [provideToken(CROPPER_ROOT_CONTEXT, RdxCropperRootDirective)], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperRootDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperRootDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxCropperRoot]',
@@ -654,17 +654,17 @@ const _imports = [
     RdxCropperDescriptionDirective
 ];
 class RdxCropperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperModule, imports: [RdxCropperRootDirective,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperModule, imports: [RdxCropperRootDirective,
             RdxCropperImageComponent,
             RdxCropperCropAreaDirective,
             RdxCropperDescriptionDirective], exports: [RdxCropperRootDirective,
             RdxCropperImageComponent,
             RdxCropperCropAreaDirective,
             RdxCropperDescriptionDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperModule }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.4", ngImport: i0, type: RdxCropperModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: RdxCropperModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [..._imports],