@gravionlabs/helix-core 22.1.2 → 22.1.3

package/fesm2022/gravionlabs-helix-core-image.mjs

@@ -1,22 +1,21 @@
-export * from '@gravionlabs/helix-core/types/image';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { Injectable, InjectionToken, inject, input, booleanAttribute, computed, output, viewChild, contentChild, signal, contentChildren, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { focus, appendChild } from '@gravionlabs/helix-core/uix/utils';
-import { HelixTemplate, SharedModule } from '@gravionlabs/helix-core/api';
-import { BaseComponent, PARENT_INSTANCE } from '@gravionlabs/helix-core/basecomponent';
-import * as i1 from '@gravionlabs/helix-core/bind';
-import { Bind, BindModule } from '@gravionlabs/helix-core/bind';
-import { blockBodyScroll, unblockBodyScroll } from '@gravionlabs/helix-core/dom';
-import { FocusTrap } from '@gravionlabs/helix-core/focustrap';
-import { RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon } from '@gravionlabs/helix-core/icons';
-import * as i3 from '@gravionlabs/helix-core/motion';
-import { MotionModule } from '@gravionlabs/helix-core/motion';
-import { ZIndexUtils } from '@gravionlabs/helix-core/utils';
-import { BaseStyle } from '@gravionlabs/helix-core/base';
-
-const style = /*css*/ `
+import * as i2 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, Injectable, InjectionToken, NgModule, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, inject, input, output, signal, viewChild } from "@angular/core";
+import { appendChild, focus } from "@gravionlabs/helix-core/uix/utils";
+import { HelixTemplate, SharedModule } from "@gravionlabs/helix-core/api";
+import { BaseComponent, PARENT_INSTANCE } from "@gravionlabs/helix-core/basecomponent";
+import * as i1 from "@gravionlabs/helix-core/bind";
+import { Bind, BindModule } from "@gravionlabs/helix-core/bind";
+import { blockBodyScroll, unblockBodyScroll } from "@gravionlabs/helix-core/dom";
+import { FocusTrap } from "@gravionlabs/helix-core/focustrap";
+import { EyeIcon, RefreshIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, UndoIcon } from "@gravionlabs/helix-core/icons";
+import * as i3 from "@gravionlabs/helix-core/motion";
+import { MotionModule } from "@gravionlabs/helix-core/motion";
+import { ZIndexUtils } from "@gravionlabs/helix-core/utils";
+import { BaseStyle } from "@gravionlabs/helix-core/base";
+export * from "@gravionlabs/helix-core/types/image";
+const style = `
     .h-image-mask {
         display: flex;
         align-items: center;
@@ -150,541 +149,1079 @@ const style = /*css*/ `
         }
     }
 `;
-
 const classes = {
-    root: ({ instance }) => [
-        'h-image h-component',
-        {
-            'h-image-preview': instance.preview()
-        }
-    ],
-    previewMask: 'h-image-preview-mask',
-    previewIcon: 'h-image-preview-icon',
-    mask: 'h-image-mask h-overlay-mask',
-    toolbar: 'h-image-toolbar',
-    rotateRightButton: 'h-image-action h-image-rotate-right-button',
-    rotateLeftButton: 'h-image-action h-image-rotate-left-button',
-    zoomOutButton: ({ instance }) => [
-        'h-image-action h-image-zoom-out-button',
-        {
-            'h-disabled': instance.isZoomOutDisabled
-        }
-    ],
-    zoomInButton: ({ instance }) => [
-        'h-image-action h-image-zoom-in-button',
-        {
-            'h-disabled': instance.isZoomInDisabled
-        }
-    ],
-    closeButton: 'h-image-action h-image-close-button',
-    original: 'h-image-original'
+	root: ({ instance }) => ["h-image h-component", { "h-image-preview": instance.preview() }],
+	previewMask: "h-image-preview-mask",
+	previewIcon: "h-image-preview-icon",
+	mask: "h-image-mask h-overlay-mask",
+	toolbar: "h-image-toolbar",
+	rotateRightButton: "h-image-action h-image-rotate-right-button",
+	rotateLeftButton: "h-image-action h-image-rotate-left-button",
+	zoomOutButton: ({ instance }) => ["h-image-action h-image-zoom-out-button", { "h-disabled": instance.isZoomOutDisabled }],
+	zoomInButton: ({ instance }) => ["h-image-action h-image-zoom-in-button", { "h-disabled": instance.isZoomInDisabled }],
+	closeButton: "h-image-action h-image-close-button",
+	original: "h-image-original"
+};
+var ImageStyle = class ImageStyle extends BaseStyle {
+	name = "image";
+	style = style;
+	classes = classes;
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ImageStyle,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ImageStyle
+	});
 };
-class ImageStyle extends BaseStyle {
-    name = 'image';
-    style = style;
-    classes = classes;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageStyle });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageStyle, decorators: [{
-            type: Injectable
-        }] });
-/**
- *
- * Displays an image with preview and tranformation options. For multiple image, see Galleria.
- *
- * [Live Demo](https://www.primeng.org/image/)
- *
- * @module imagestyle
- *
- */
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ImageStyle,
+	decorators: [{ type: Injectable }]
+});
 var ImageClasses;
-(function (ImageClasses) {
-    /**
-     * Class name of the root element
-     */
-    ImageClasses["root"] = "h-image";
-    /**
-     * Class name of the preview mask element
-     */
-    ImageClasses["previewMask"] = "h-image-preview-mask";
-    /**
-     * Class name of the preview icon element
-     */
-    ImageClasses["previewIcon"] = "h-image-preview-icon";
-    /**
-     * Class name of the mask element
-     */
-    ImageClasses["mask"] = "h-image-mask";
-    /**
-     * Class name of the toolbar element
-     */
-    ImageClasses["toolbar"] = "h-image-toolbar";
-    /**
-     * Class name of the rotate right button element
-     */
-    ImageClasses["rotateRightButton"] = "h-image-rotate-right-button";
-    /**
-     * Class name of the rotate left button element
-     */
-    ImageClasses["rotateLeftButton"] = "h-image-rotate-left-button";
-    /**
-     * Class name of the zoom out button element
-     */
-    ImageClasses["zoomOutButton"] = "h-image-zoom-out-button";
-    /**
-     * Class name of the zoom in button element
-     */
-    ImageClasses["zoomInButton"] = "h-image-zoom-in-button";
-    /**
-     * Class name of the close button element
-     */
-    ImageClasses["closeButton"] = "h-image-close-button";
-    /**
-     * Class name of the original element
-     */
-    ImageClasses["original"] = "h-image-original";
+(function(ImageClasses) {
+	ImageClasses["root"] = "h-image";
+	ImageClasses["previewMask"] = "h-image-preview-mask";
+	ImageClasses["previewIcon"] = "h-image-preview-icon";
+	ImageClasses["mask"] = "h-image-mask";
+	ImageClasses["toolbar"] = "h-image-toolbar";
+	ImageClasses["rotateRightButton"] = "h-image-rotate-right-button";
+	ImageClasses["rotateLeftButton"] = "h-image-rotate-left-button";
+	ImageClasses["zoomOutButton"] = "h-image-zoom-out-button";
+	ImageClasses["zoomInButton"] = "h-image-zoom-in-button";
+	ImageClasses["closeButton"] = "h-image-close-button";
+	ImageClasses["original"] = "h-image-original";
 })(ImageClasses || (ImageClasses = {}));
-
-const IMAGE_INSTANCE = new InjectionToken('IMAGE_INSTANCE');
-/**
- * Displays an image with preview and tranformation options. For multiple image, see Galleria.
- * @group Components
- */
-class Image extends BaseComponent {
-    componentName = 'Image';
-    $pcImage = inject(IMAGE_INSTANCE, { optional: true, skipSelf: true }) ?? undefined;
-    bindDirectiveInstance = inject(Bind, { self: true });
-    /**
-     * Style class of the image element.
-     * @group Props
-     */
-    imageClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "imageClass" }] : /* istanbul ignore next */ []));
-    /**
-     * Inline style of the image element.
-     * @group Props
-     */
-    imageStyle = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "imageStyle" }] : /* istanbul ignore next */ []));
-    /**
-     * Class of the element.
-     * @deprecated since v20.0.0, use `class` instead.
-     * @group Props
-     */
-    styleClass = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "styleClass" }] : /* istanbul ignore next */ []));
-    /**
-     * The source path for the main image.
-     * @group Props
-     */
-    src = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "src" }] : /* istanbul ignore next */ []));
-    /**
-     * The srcset definition for the main image.
-     * @group Props
-     */
-    srcSet = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "srcSet" }] : /* istanbul ignore next */ []));
-    /**
-     * The sizes definition for the main image.
-     * @group Props
-     */
-    sizes = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "sizes" }] : /* istanbul ignore next */ []));
-    /**
-     * The source path for the preview image.
-     * @group Props
-     */
-    previewImageSrc = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "previewImageSrc" }] : /* istanbul ignore next */ []));
-    /**
-     * The srcset definition for the preview image.
-     * @group Props
-     */
-    previewImageSrcSet = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "previewImageSrcSet" }] : /* istanbul ignore next */ []));
-    /**
-     * The sizes definition for the preview image.
-     * @group Props
-     */
-    previewImageSizes = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "previewImageSizes" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the preview image element.
-     * @group Props
-     */
-    alt = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "alt" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the image element.
-     * @group Props
-     */
-    width = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the image element.
-     * @group Props
-     */
-    height = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "height" }] : /* istanbul ignore next */ []));
-    /**
-     * Attribute of the image element.
-     * @group Props
-     */
-    loading = input(/* @ts-ignore */
-    ...(ngDevMode ? [undefined, { debugName: "loading" }] : /* istanbul ignore next */ []));
-    /**
-     * Controls the preview functionality.
-     * @group Props
-     */
-    preview = input(false, { ...(ngDevMode ? { debugName: "preview" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-    /**
-     * Transition options of the show animation
-     * @group Props
-     * @deprecated since v21.0.0. Use `motionOptions` instead.
-     */
-    showTransitionOptions = input('150ms cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Transition options of the hide animation
-     * @group Props
-     * @deprecated since v21.0.0. Use `motionOptions` instead.
-     */
-    hideTransitionOptions = input('150ms cubic-bezier(0, 0, 0.2, 1)', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "hideTransitionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Enter animation class name of modal.
-     * @defaultValue 'h-modal-enter'
-     * @group Props
-     */
-    modalEnterAnimation = input('h-modal-enter', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modalEnterAnimation" }] : /* istanbul ignore next */ []));
-    /**
-     * Leave animation class name of modal.
-     * @defaultValue 'h-modal-leave'
-     * @group Props
-     */
-    modalLeaveAnimation = input('h-modal-leave', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "modalLeaveAnimation" }] : /* istanbul ignore next */ []));
-    /**
-     * Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
-     * @defaultValue 'self'
-     * @group Props
-     */
-    appendTo = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "appendTo" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options for the mask.
-     * @group Props
-     */
-    maskMotionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maskMotionOptions" }] : /* istanbul ignore next */ []));
-    computedMaskMotionOptions = computed(() => {
-        return {
-            ...this.ptm('maskMotion'),
-            ...this.maskMotionOptions()
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * The motion options.
-     * @group Props
-     */
-    motionOptions = input(undefined, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "motionOptions" }] : /* istanbul ignore next */ []));
-    computedMotionOptions = computed(() => {
-        return {
-            ...this.ptm('motion'),
-            ...this.motionOptions()
-        };
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedMotionOptions" }] : /* istanbul ignore next */ []));
-    /**
-     * Triggered when the preview overlay is shown.
-     * @group Emits
-     */
-    onShow = output();
-    /**
-     * Triggered when the preview overlay is hidden.
-     * @group Emits
-     */
-    onHide = output();
-    /**
-     * This event is triggered if an error occurs while loading an image file.
-     * @param {Event} event - Browser event.
-     * @group Emits
-     */
-    onImageError = output();
-    mask = viewChild('mask', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "mask" }] : /* istanbul ignore next */ []));
-    previewButton = viewChild('previewButton', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "previewButton" }] : /* istanbul ignore next */ []));
-    closeButton = viewChild('closeButton', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "closeButton" }] : /* istanbul ignore next */ []));
-    /**
-     * Custom indicator template.
-     * @group Templates
-     */
-    indicatorTemplate = contentChild('indicator', { ...(ngDevMode ? { debugName: "indicatorTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom rotate right icon template.
-     * @group Templates
-     */
-    rotateRightIconTemplate = contentChild('rotaterighticon', { ...(ngDevMode ? { debugName: "rotateRightIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom rotate left icon template.
-     * @group Templates
-     */
-    rotateLeftIconTemplate = contentChild('rotatelefticon', { ...(ngDevMode ? { debugName: "rotateLeftIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom zoom out icon template.
-     * @group Templates
-     */
-    zoomOutIconTemplate = contentChild('zoomouticon', { ...(ngDevMode ? { debugName: "zoomOutIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom zoom in icon template.
-     * @group Templates
-     */
-    zoomInIconTemplate = contentChild('zoominicon', { ...(ngDevMode ? { debugName: "zoomInIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom close icon template.
-     * @group Templates
-     */
-    closeIconTemplate = contentChild('closeicon', { ...(ngDevMode ? { debugName: "closeIconTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom preview template.
-     * @group Templates
-     */
-    previewTemplate = contentChild('preview', { ...(ngDevMode ? { debugName: "previewTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    /**
-     * Custom image template.
-     * @group Templates
-     */
-    imageTemplate = contentChild('image', { ...(ngDevMode ? { debugName: "imageTemplate" } : /* istanbul ignore next */ {}), descendants: false });
-    renderMask = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "renderMask" }] : /* istanbul ignore next */ []));
-    renderPreview = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "renderPreview" }] : /* istanbul ignore next */ []));
-    maskVisible = false;
-    previewVisible = false;
-    rotate = 0;
-    scale = 1;
-    previewClick = false;
-    container;
-    wrapper;
-    _componentStyle = inject(ImageStyle);
-    $appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "$appendTo" }] : /* istanbul ignore next */ []));
-    get isZoomOutDisabled() {
-        return this.scale - this.zoomSettings.step <= this.zoomSettings.min;
-    }
-    get isZoomInDisabled() {
-        return this.scale + this.zoomSettings.step >= this.zoomSettings.max;
-    }
-    zoomSettings = {
-        default: 1,
-        step: 0.1,
-        max: 1.5,
-        min: 0.5
-    };
-    templates = contentChildren(HelixTemplate, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
-    _indicatorTemplate;
-    _rotateRightIconTemplate;
-    _rotateLeftIconTemplate;
-    _zoomOutIconTemplate;
-    _zoomInIconTemplate;
-    _closeIconTemplate;
-    _imageTemplate;
-    _previewTemplate;
-    onAfterViewChecked() {
-        this.bindDirectiveInstance.setAttrs(this.ptms(['host', 'root']));
-    }
-    onAfterContentInit() {
-        this.templates().forEach((item) => {
-            switch (item.getType()) {
-                case 'indicator':
-                    this._indicatorTemplate = item.template;
-                    break;
-                case 'rotaterighticon':
-                    this._rotateRightIconTemplate = item.template;
-                    break;
-                case 'rotatelefticon':
-                    this._rotateLeftIconTemplate = item.template;
-                    break;
-                case 'zoomouticon':
-                    this._zoomOutIconTemplate = item.template;
-                    break;
-                case 'zoominicon':
-                    this._zoomInIconTemplate = item.template;
-                    break;
-                case 'closeicon':
-                    this._closeIconTemplate = item.template;
-                    break;
-                case 'image':
-                    this._imageTemplate = item.template;
-                    break;
-                case 'preview':
-                    this._previewTemplate = item.template;
-                    break;
-                default:
-                    this._indicatorTemplate = item.template;
-                    break;
-            }
-        });
-    }
-    onImageClick() {
-        if (this.preview()) {
-            this.maskVisible = true;
-            this.previewVisible = true;
-            this.renderMask.set(true);
-            this.renderPreview.set(true);
-            blockBodyScroll();
-        }
-    }
-    onMaskClick() {
-        if (!this.previewClick) {
-            this.closePreview();
-        }
-        this.previewClick = false;
-    }
-    onMaskKeydown(event) {
-        switch (event.code) {
-            case 'Escape':
-                this.onMaskClick();
-                setTimeout(() => {
-                    focus(this.previewButton()?.nativeElement);
-                }, 25);
-                event.preventDefault();
-                break;
-            default:
-                break;
-        }
-    }
-    onPreviewImageClick() {
-        this.previewClick = true;
-    }
-    rotateRight() {
-        this.rotate += 90;
-        this.previewClick = true;
-    }
-    rotateLeft() {
-        this.rotate -= 90;
-        this.previewClick = true;
-    }
-    zoomIn() {
-        this.scale = this.scale + this.zoomSettings.step;
-        this.previewClick = true;
-    }
-    zoomOut() {
-        this.scale = this.scale - this.zoomSettings.step;
-        this.previewClick = true;
-    }
-    onAnimationStart(event) {
-        this.container = event.element;
-        this.wrapper = this.container?.parentElement;
-        this.$attrSelector && this.wrapper?.setAttribute(this.$attrSelector, '');
-        this.appendContainer();
-        this.moveOnTop();
-        this.onShow.emit({});
-        setTimeout(() => {
-            focus(this.closeButton()?.nativeElement);
-        }, 25);
-    }
-    onBeforeLeave() {
-        this.maskVisible = false;
-    }
-    onAnimationEnd() {
-        this.renderPreview.set(false);
-    }
-    onMaskAfterLeave() {
-        if (!this.renderPreview()) {
-            this.renderMask.set(false);
-        }
-        ZIndexUtils.clear(this.wrapper);
-        this.container = null;
-        this.wrapper = null;
-        this.rotate = 0;
-        this.scale = this.zoomSettings.default;
-        unblockBodyScroll();
-        this.onHide.emit({});
-        this.cd.markForCheck();
-    }
-    moveOnTop() {
-        ZIndexUtils.set('modal', this.wrapper, this.config.zIndex.modal);
-    }
-    appendContainer() {
-        if (this.$appendTo() && this.$appendTo() !== 'self') {
-            if (this.$appendTo() === 'body' && this.wrapper) {
-                this.document.body.appendChild(this.wrapper);
-            }
-            else if (this.wrapper) {
-                appendChild(this.$appendTo(), this.wrapper);
-            }
-        }
-    }
-    imagePreviewStyle() {
-        return { transform: 'rotate(' + this.rotate + 'deg) scale(' + this.scale + ')' };
-    }
-    get zoomImageAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.zoomImage : undefined;
-    }
-    handleToolbarClick(event) {
-        event.stopPropagation();
-    }
-    closePreview() {
-        this.previewVisible = false;
-    }
-    imageError(event) {
-        this.onImageError.emit(event);
-    }
-    rightAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.rotateRight : undefined;
-    }
-    leftAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.rotateLeft : undefined;
-    }
-    zoomInAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.zoomIn : undefined;
-    }
-    zoomOutAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.zoomOut : undefined;
-    }
-    closeAriaLabel() {
-        return this.config.translation.aria ? this.config.translation.aria.close : undefined;
-    }
-    onKeydownHandler() {
-        if (this.previewVisible) {
-            this.closePreview();
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Image, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: Image, isStandalone: true, selector: "h-image", inputs: { imageClass: { classPropertyName: "imageClass", publicName: "imageClass", isSignal: true, isRequired: false, transformFunction: null }, imageStyle: { classPropertyName: "imageStyle", publicName: "imageStyle", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, srcSet: { classPropertyName: "srcSet", publicName: "srcSet", isSignal: true, isRequired: false, transformFunction: null }, sizes: { classPropertyName: "sizes", publicName: "sizes", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrc: { classPropertyName: "previewImageSrc", publicName: "previewImageSrc", isSignal: true, isRequired: false, transformFunction: null }, previewImageSrcSet: { classPropertyName: "previewImageSrcSet", publicName: "previewImageSrcSet", isSignal: true, isRequired: false, transformFunction: null }, previewImageSizes: { classPropertyName: "previewImageSizes", publicName: "previewImageSizes", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, preview: { classPropertyName: "preview", publicName: "preview", isSignal: true, isRequired: false, transformFunction: null }, showTransitionOptions: { classPropertyName: "showTransitionOptions", publicName: "showTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, hideTransitionOptions: { classPropertyName: "hideTransitionOptions", publicName: "hideTransitionOptions", isSignal: true, isRequired: false, transformFunction: null }, modalEnterAnimation: { classPropertyName: "modalEnterAnimation", publicName: "modalEnterAnimation", isSignal: true, isRequired: false, transformFunction: null }, modalLeaveAnimation: { classPropertyName: "modalLeaveAnimation", publicName: "modalLeaveAnimation", isSignal: true, isRequired: false, transformFunction: null }, appendTo: { classPropertyName: "appendTo", publicName: "appendTo", isSignal: true, isRequired: false, transformFunction: null }, maskMotionOptions: { classPropertyName: "maskMotionOptions", publicName: "maskMotionOptions", isSignal: true, isRequired: false, transformFunction: null }, motionOptions: { classPropertyName: "motionOptions", publicName: "motionOptions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onShow: "onShow", onHide: "onHide", onImageError: "onImageError" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler()" }, properties: { "class": "cn(cx('root'),styleClass())" } }, providers: [ImageStyle, { provide: IMAGE_INSTANCE, useExisting: Image }, { provide: PARENT_INSTANCE, useExisting: Image }], queries: [{ propertyName: "indicatorTemplate", first: true, predicate: ["indicator"], isSignal: true }, { propertyName: "rotateRightIconTemplate", first: true, predicate: ["rotaterighticon"], isSignal: true }, { propertyName: "rotateLeftIconTemplate", first: true, predicate: ["rotatelefticon"], isSignal: true }, { propertyName: "zoomOutIconTemplate", first: true, predicate: ["zoomouticon"], isSignal: true }, { propertyName: "zoomInIconTemplate", first: true, predicate: ["zoominicon"], isSignal: true }, { propertyName: "closeIconTemplate", first: true, predicate: ["closeicon"], isSignal: true }, { propertyName: "previewTemplate", first: true, predicate: ["preview"], isSignal: true }, { propertyName: "imageTemplate", first: true, predicate: ["image"], isSignal: true }, { propertyName: "templates", predicate: HelixTemplate, isSignal: true }], viewQueries: [{ propertyName: "mask", first: true, predicate: ["mask"], descendants: true, isSignal: true }, { propertyName: "previewButton", first: true, predicate: ["previewButton"], descendants: true, isSignal: true }, { propertyName: "closeButton", first: true, predicate: ["closeButton"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1.Bind }], ngImport: i0, template: "@if (!imageTemplate() && !_imageTemplate) {\n  <img\n    [attr.src]=\"src()\"\n    [attr.srcset]=\"srcSet()\"\n    [attr.sizes]=\"sizes()\"\n    [attr.alt]=\"alt()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    [attr.loading]=\"loading()\"\n    [ngStyle]=\"imageStyle()\"\n    [class]=\"imageClass()\"\n    (error)=\"imageError($event)\"\n    [hBind]=\"ptm('image')\"\n    />\n}\n\n<ng-container *ngTemplateOutlet=\"imageTemplate() || _imageTemplate; context: { errorCallback: imageError.bind(this) }\"></ng-container>\n\n@if (preview()) {\n  <button [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" [class]=\"cx('previewMask')\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height() + 'px', width: width() + 'px' }\" [hBind]=\"ptm('previewMask')\">\n    @if (indicatorTemplate() || _indicatorTemplate) {\n      <ng-container *ngTemplateOutlet=\"indicatorTemplate() || _indicatorTemplate\"></ng-container>\n    } @else {\n      <svg data-h-icon=\"eye\" [class]=\"cx('previewIcon')\" [hBind]=\"ptm('previewIcon')\" />\n    }\n  </button>\n}\n@if (renderMask()) {\n  <div\n    #mask\n    [class]=\"cx('mask')\"\n    [attr.aria-modal]=\"maskVisible\"\n    role=\"dialog\"\n    (click)=\"onMaskClick()\"\n    (keydown)=\"onMaskKeydown($event)\"\n    hFocusTrap\n    [hBind]=\"ptm('mask')\"\n    [hMotion]=\"maskVisible\"\n    [pMotionAppear]=\"true\"\n    [pMotionEnterActiveClass]=\"'h-overlay-mask-enter-active'\"\n    [pMotionLeaveActiveClass]=\"'h-overlay-mask-leave-active'\"\n    [pMotionOptions]=\"computedMaskMotionOptions()\"\n    (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n    >\n    <div [class]=\"cx('toolbar')\" (click)=\"handleToolbarClick($event)\" [hBind]=\"ptm('toolbar')\">\n      <button [class]=\"cx('rotateRightButton')\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\" [hBind]=\"ptm('rotateRightButton')\">\n        @if (!rotateRightIconTemplate() && !_rotateRightIconTemplate) {\n          <svg data-h-icon=\"refresh\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate() || _rotateRightIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('rotateLeftButton')\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\" [hBind]=\"ptm('rotateLeftButton')\">\n        @if (!rotateLeftIconTemplate() && !_rotateLeftIconTemplate) {\n          <svg data-h-icon=\"undo\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate() || _rotateLeftIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomOutButton')\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\" [hBind]=\"ptm('zoomOutButton')\">\n        @if (!zoomOutIconTemplate() && !_zoomOutIconTemplate) {\n          <svg data-h-icon=\"search-minus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate() || _zoomOutIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomInButton')\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\" [hBind]=\"ptm('zoomInButton')\">\n        @if (!zoomInIconTemplate() && !_zoomInIconTemplate) {\n          <svg data-h-icon=\"search-plus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomInIconTemplate() || _zoomInIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('closeButton')\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton [hBind]=\"ptm('closeButton')\">\n        @if (!closeIconTemplate() && !_closeIconTemplate) {\n          <svg data-h-icon=\"times\" />\n        }\n        <ng-template *ngTemplateOutlet=\"closeIconTemplate() || _closeIconTemplate\"></ng-template>\n      </button>\n    </div>\n    @if (renderPreview()) {\n      <h-motion [visible]=\"previewVisible\" name=\"h-image-original\" [appear]=\"true\" [options]=\"computedMotionOptions()\" (onBeforeEnter)=\"onAnimationStart($event)\" (onBeforeLeave)=\"onBeforeLeave()\" (onAfterLeave)=\"onAnimationEnd($event)\">\n        @if (!previewTemplate() && !_previewTemplate) {\n          <img\n            [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\n            [attr.srcset]=\"previewImageSrcSet()\"\n            [attr.sizes]=\"previewImageSizes()\"\n            [class]=\"cx('original')\"\n            [ngStyle]=\"imagePreviewStyle()\"\n            (click)=\"onPreviewImageClick()\"\n            [hBind]=\"ptm('original')\"\n            />\n        }\n        <ng-container\n                    *ngTemplateOutlet=\"\n                        previewTemplate() || _previewTemplate;\n                        context: {\n                            class: cx('original'),\n                            style: imagePreviewStyle(),\n                            previewCallback: onPreviewImageClick.bind(this)\n                        }\n                    \"\n        >\n      </ng-container>\n    </h-motion>\n  }\n</div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: RefreshIcon, selector: "[data-h-icon=\"refresh\"]" }, { kind: "component", type: EyeIcon, selector: "[data-h-icon=\"eye\"]" }, { kind: "component", type: UndoIcon, selector: "[data-h-icon=\"undo\"]" }, { kind: "component", type: SearchMinusIcon, selector: "[data-h-icon=\"search-minus\"]" }, { kind: "component", type: SearchPlusIcon, selector: "[data-h-icon=\"search-plus\"]" }, { kind: "component", type: TimesIcon, selector: "[data-h-icon=\"times\"]" }, { kind: "directive", type: FocusTrap, selector: "[hFocusTrap]", inputs: ["pFocusTrapDisabled"] }, { kind: "ngmodule", type: SharedModule }, { kind: "ngmodule", type: BindModule }, { kind: "directive", type: i1.Bind, selector: "[hBind]", inputs: ["hBind"] }, { kind: "ngmodule", type: MotionModule }, { kind: "component", type: i3.Motion, selector: "h-motion", inputs: ["visible", "mountOnEnter", "unmountOnLeave", "name", "type", "safe", "disabled", "appear", "enter", "leave", "duration", "hideStrategy", "enterFromClass", "enterToClass", "enterActiveClass", "leaveFromClass", "leaveToClass", "leaveActiveClass", "options"], outputs: ["onBeforeEnter", "onEnter", "onAfterEnter", "onEnterCancelled", "onBeforeLeave", "onLeave", "onAfterLeave", "onLeaveCancelled"] }, { kind: "directive", type: i3.MotionDirective, selector: "[hMotion]", inputs: ["hMotion", "pMotionName", "pMotionType", "pMotionSafe", "pMotionDisabled", "pMotionAppear", "pMotionEnter", "pMotionLeave", "pMotionDuration", "pMotionHideStrategy", "pMotionEnterFromClass", "pMotionEnterToClass", "pMotionEnterActiveClass", "pMotionLeaveFromClass", "pMotionLeaveToClass", "pMotionLeaveActiveClass", "pMotionOptions"], outputs: ["pMotionOnBeforeEnter", "pMotionOnEnter", "pMotionOnAfterEnter", "pMotionOnEnterCancelled", "pMotionOnBeforeLeave", "pMotionOnLeave", "pMotionOnAfterLeave", "pMotionOnLeaveCancelled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: Image, decorators: [{
-            type: Component,
-            args: [{ selector: 'h-image', standalone: true, imports: [CommonModule, RefreshIcon, EyeIcon, UndoIcon, SearchMinusIcon, SearchPlusIcon, TimesIcon, FocusTrap, SharedModule, BindModule, MotionModule], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [ImageStyle, { provide: IMAGE_INSTANCE, useExisting: Image }, { provide: PARENT_INSTANCE, useExisting: Image }], host: {
-                        '[class]': "cn(cx('root'),styleClass())",
-                        '(document:keydown.escape)': 'onKeydownHandler()'
-                    }, hostDirectives: [Bind], template: "@if (!imageTemplate() && !_imageTemplate) {\n  <img\n    [attr.src]=\"src()\"\n    [attr.srcset]=\"srcSet()\"\n    [attr.sizes]=\"sizes()\"\n    [attr.alt]=\"alt()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    [attr.loading]=\"loading()\"\n    [ngStyle]=\"imageStyle()\"\n    [class]=\"imageClass()\"\n    (error)=\"imageError($event)\"\n    [hBind]=\"ptm('image')\"\n    />\n}\n\n<ng-container *ngTemplateOutlet=\"imageTemplate() || _imageTemplate; context: { errorCallback: imageError.bind(this) }\"></ng-container>\n\n@if (preview()) {\n  <button [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" [class]=\"cx('previewMask')\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height() + 'px', width: width() + 'px' }\" [hBind]=\"ptm('previewMask')\">\n    @if (indicatorTemplate() || _indicatorTemplate) {\n      <ng-container *ngTemplateOutlet=\"indicatorTemplate() || _indicatorTemplate\"></ng-container>\n    } @else {\n      <svg data-h-icon=\"eye\" [class]=\"cx('previewIcon')\" [hBind]=\"ptm('previewIcon')\" />\n    }\n  </button>\n}\n@if (renderMask()) {\n  <div\n    #mask\n    [class]=\"cx('mask')\"\n    [attr.aria-modal]=\"maskVisible\"\n    role=\"dialog\"\n    (click)=\"onMaskClick()\"\n    (keydown)=\"onMaskKeydown($event)\"\n    hFocusTrap\n    [hBind]=\"ptm('mask')\"\n    [hMotion]=\"maskVisible\"\n    [pMotionAppear]=\"true\"\n    [pMotionEnterActiveClass]=\"'h-overlay-mask-enter-active'\"\n    [pMotionLeaveActiveClass]=\"'h-overlay-mask-leave-active'\"\n    [pMotionOptions]=\"computedMaskMotionOptions()\"\n    (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n    >\n    <div [class]=\"cx('toolbar')\" (click)=\"handleToolbarClick($event)\" [hBind]=\"ptm('toolbar')\">\n      <button [class]=\"cx('rotateRightButton')\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\" [hBind]=\"ptm('rotateRightButton')\">\n        @if (!rotateRightIconTemplate() && !_rotateRightIconTemplate) {\n          <svg data-h-icon=\"refresh\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate() || _rotateRightIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('rotateLeftButton')\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\" [hBind]=\"ptm('rotateLeftButton')\">\n        @if (!rotateLeftIconTemplate() && !_rotateLeftIconTemplate) {\n          <svg data-h-icon=\"undo\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate() || _rotateLeftIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomOutButton')\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\" [hBind]=\"ptm('zoomOutButton')\">\n        @if (!zoomOutIconTemplate() && !_zoomOutIconTemplate) {\n          <svg data-h-icon=\"search-minus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate() || _zoomOutIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomInButton')\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\" [hBind]=\"ptm('zoomInButton')\">\n        @if (!zoomInIconTemplate() && !_zoomInIconTemplate) {\n          <svg data-h-icon=\"search-plus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomInIconTemplate() || _zoomInIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('closeButton')\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton [hBind]=\"ptm('closeButton')\">\n        @if (!closeIconTemplate() && !_closeIconTemplate) {\n          <svg data-h-icon=\"times\" />\n        }\n        <ng-template *ngTemplateOutlet=\"closeIconTemplate() || _closeIconTemplate\"></ng-template>\n      </button>\n    </div>\n    @if (renderPreview()) {\n      <h-motion [visible]=\"previewVisible\" name=\"h-image-original\" [appear]=\"true\" [options]=\"computedMotionOptions()\" (onBeforeEnter)=\"onAnimationStart($event)\" (onBeforeLeave)=\"onBeforeLeave()\" (onAfterLeave)=\"onAnimationEnd($event)\">\n        @if (!previewTemplate() && !_previewTemplate) {\n          <img\n            [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\n            [attr.srcset]=\"previewImageSrcSet()\"\n            [attr.sizes]=\"previewImageSizes()\"\n            [class]=\"cx('original')\"\n            [ngStyle]=\"imagePreviewStyle()\"\n            (click)=\"onPreviewImageClick()\"\n            [hBind]=\"ptm('original')\"\n            />\n        }\n        <ng-container\n                    *ngTemplateOutlet=\"\n                        previewTemplate() || _previewTemplate;\n                        context: {\n                            class: cx('original'),\n                            style: imagePreviewStyle(),\n                            previewCallback: onPreviewImageClick.bind(this)\n                        }\n                    \"\n        >\n      </ng-container>\n    </h-motion>\n  }\n</div>\n}\n" }]
-        }], propDecorators: { imageClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageClass", required: false }] }], imageStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageStyle", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], srcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "srcSet", required: false }] }], sizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "sizes", required: false }] }], previewImageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrc", required: false }] }], previewImageSrcSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSrcSet", required: false }] }], previewImageSizes: [{ type: i0.Input, args: [{ isSignal: true, alias: "previewImageSizes", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], preview: [{ type: i0.Input, args: [{ isSignal: true, alias: "preview", required: false }] }], showTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTransitionOptions", required: false }] }], hideTransitionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideTransitionOptions", required: false }] }], modalEnterAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalEnterAnimation", required: false }] }], modalLeaveAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalLeaveAnimation", required: false }] }], appendTo: [{ type: i0.Input, args: [{ isSignal: true, alias: "appendTo", required: false }] }], maskMotionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maskMotionOptions", required: false }] }], motionOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "motionOptions", required: false }] }], onShow: [{ type: i0.Output, args: ["onShow"] }], onHide: [{ type: i0.Output, args: ["onHide"] }], onImageError: [{ type: i0.Output, args: ["onImageError"] }], mask: [{ type: i0.ViewChild, args: ['mask', { isSignal: true }] }], previewButton: [{ type: i0.ViewChild, args: ['previewButton', { isSignal: true }] }], closeButton: [{ type: i0.ViewChild, args: ['closeButton', { isSignal: true }] }], indicatorTemplate: [{ type: i0.ContentChild, args: ['indicator', { ...{ descendants: false }, isSignal: true }] }], rotateRightIconTemplate: [{ type: i0.ContentChild, args: ['rotaterighticon', { ...{ descendants: false }, isSignal: true }] }], rotateLeftIconTemplate: [{ type: i0.ContentChild, args: ['rotatelefticon', { ...{ descendants: false }, isSignal: true }] }], zoomOutIconTemplate: [{ type: i0.ContentChild, args: ['zoomouticon', { ...{ descendants: false }, isSignal: true }] }], zoomInIconTemplate: [{ type: i0.ContentChild, args: ['zoominicon', { ...{ descendants: false }, isSignal: true }] }], closeIconTemplate: [{ type: i0.ContentChild, args: ['closeicon', { ...{ descendants: false }, isSignal: true }] }], previewTemplate: [{ type: i0.ContentChild, args: ['preview', { ...{ descendants: false }, isSignal: true }] }], imageTemplate: [{ type: i0.ContentChild, args: ['image', { ...{ descendants: false }, isSignal: true }] }], templates: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }] }] } });
-class ImageModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: ImageModule, imports: [Image, SharedModule], exports: [Image, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageModule, imports: [Image, SharedModule, SharedModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ImageModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [Image, SharedModule],
-                    exports: [Image, SharedModule]
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+const IMAGE_INSTANCE = new InjectionToken("IMAGE_INSTANCE");
+var Image = class Image extends BaseComponent {
+	componentName = "Image";
+	$pcImage = inject(IMAGE_INSTANCE, {
+		optional: true,
+		skipSelf: true
+	}) ?? void 0;
+	bindDirectiveInstance = inject(Bind, { self: true });
+	imageClass = input(...ngDevMode ? [void 0, { debugName: "imageClass" }] : 	/* istanbul ignore next */ []);
+	imageStyle = input(...ngDevMode ? [void 0, { debugName: "imageStyle" }] : 	/* istanbul ignore next */ []);
+	styleClass = input(...ngDevMode ? [void 0, { debugName: "styleClass" }] : 	/* istanbul ignore next */ []);
+	src = input(...ngDevMode ? [void 0, { debugName: "src" }] : 	/* istanbul ignore next */ []);
+	srcSet = input(...ngDevMode ? [void 0, { debugName: "srcSet" }] : 	/* istanbul ignore next */ []);
+	sizes = input(...ngDevMode ? [void 0, { debugName: "sizes" }] : 	/* istanbul ignore next */ []);
+	previewImageSrc = input(...ngDevMode ? [void 0, { debugName: "previewImageSrc" }] : 	/* istanbul ignore next */ []);
+	previewImageSrcSet = input(...ngDevMode ? [void 0, { debugName: "previewImageSrcSet" }] : 	/* istanbul ignore next */ []);
+	previewImageSizes = input(...ngDevMode ? [void 0, { debugName: "previewImageSizes" }] : 	/* istanbul ignore next */ []);
+	alt = input(...ngDevMode ? [void 0, { debugName: "alt" }] : 	/* istanbul ignore next */ []);
+	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : 	/* istanbul ignore next */ []);
+	height = input(...ngDevMode ? [void 0, { debugName: "height" }] : 	/* istanbul ignore next */ []);
+	loading = input(...ngDevMode ? [void 0, { debugName: "loading" }] : 	/* istanbul ignore next */ []);
+	preview = input(false, {
+		...ngDevMode ? { debugName: "preview" } : 		/* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	showTransitionOptions = input("150ms cubic-bezier(0, 0, 0.2, 1)", ...ngDevMode ? [{ debugName: "showTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	hideTransitionOptions = input("150ms cubic-bezier(0, 0, 0.2, 1)", ...ngDevMode ? [{ debugName: "hideTransitionOptions" }] : 	/* istanbul ignore next */ []);
+	modalEnterAnimation = input("h-modal-enter", ...ngDevMode ? [{ debugName: "modalEnterAnimation" }] : 	/* istanbul ignore next */ []);
+	modalLeaveAnimation = input("h-modal-leave", ...ngDevMode ? [{ debugName: "modalLeaveAnimation" }] : 	/* istanbul ignore next */ []);
+	appendTo = input(void 0, ...ngDevMode ? [{ debugName: "appendTo" }] : 	/* istanbul ignore next */ []);
+	maskMotionOptions = input(void 0, ...ngDevMode ? [{ debugName: "maskMotionOptions" }] : 	/* istanbul ignore next */ []);
+	computedMaskMotionOptions = computed(() => {
+		return {
+			...this.ptm("maskMotion"),
+			...this.maskMotionOptions()
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMaskMotionOptions" }] : 	/* istanbul ignore next */ []);
+	motionOptions = input(void 0, ...ngDevMode ? [{ debugName: "motionOptions" }] : 	/* istanbul ignore next */ []);
+	computedMotionOptions = computed(() => {
+		return {
+			...this.ptm("motion"),
+			...this.motionOptions()
+		};
+	}, ...ngDevMode ? [{ debugName: "computedMotionOptions" }] : 	/* istanbul ignore next */ []);
+	onShow = output();
+	onHide = output();
+	onImageError = output();
+	mask = viewChild("mask", ...ngDevMode ? [{ debugName: "mask" }] : 	/* istanbul ignore next */ []);
+	previewButton = viewChild("previewButton", ...ngDevMode ? [{ debugName: "previewButton" }] : 	/* istanbul ignore next */ []);
+	closeButton = viewChild("closeButton", ...ngDevMode ? [{ debugName: "closeButton" }] : 	/* istanbul ignore next */ []);
+	indicatorTemplate = contentChild("indicator", {
+		...ngDevMode ? { debugName: "indicatorTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	rotateRightIconTemplate = contentChild("rotaterighticon", {
+		...ngDevMode ? { debugName: "rotateRightIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	rotateLeftIconTemplate = contentChild("rotatelefticon", {
+		...ngDevMode ? { debugName: "rotateLeftIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	zoomOutIconTemplate = contentChild("zoomouticon", {
+		...ngDevMode ? { debugName: "zoomOutIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	zoomInIconTemplate = contentChild("zoominicon", {
+		...ngDevMode ? { debugName: "zoomInIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	closeIconTemplate = contentChild("closeicon", {
+		...ngDevMode ? { debugName: "closeIconTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	previewTemplate = contentChild("preview", {
+		...ngDevMode ? { debugName: "previewTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	imageTemplate = contentChild("image", {
+		...ngDevMode ? { debugName: "imageTemplate" } : 		/* istanbul ignore next */ {},
+		descendants: false
+	});
+	renderMask = signal(false, ...ngDevMode ? [{ debugName: "renderMask" }] : 	/* istanbul ignore next */ []);
+	renderPreview = signal(false, ...ngDevMode ? [{ debugName: "renderPreview" }] : 	/* istanbul ignore next */ []);
+	maskVisible = false;
+	previewVisible = false;
+	rotate = 0;
+	scale = 1;
+	previewClick = false;
+	container;
+	wrapper;
+	_componentStyle = inject(ImageStyle);
+	$appendTo = computed(() => this.appendTo() || this.config.overlayAppendTo(), ...ngDevMode ? [{ debugName: "$appendTo" }] : 	/* istanbul ignore next */ []);
+	get isZoomOutDisabled() {
+		return this.scale - this.zoomSettings.step <= this.zoomSettings.min;
+	}
+	get isZoomInDisabled() {
+		return this.scale + this.zoomSettings.step >= this.zoomSettings.max;
+	}
+	zoomSettings = {
+		default: 1,
+		step: .1,
+		max: 1.5,
+		min: .5
+	};
+	templates = contentChildren(HelixTemplate, ...ngDevMode ? [{ debugName: "templates" }] : 	/* istanbul ignore next */ []);
+	_indicatorTemplate;
+	_rotateRightIconTemplate;
+	_rotateLeftIconTemplate;
+	_zoomOutIconTemplate;
+	_zoomInIconTemplate;
+	_closeIconTemplate;
+	_imageTemplate;
+	_previewTemplate;
+	onAfterViewChecked() {
+		this.bindDirectiveInstance.setAttrs(this.ptms(["host", "root"]));
+	}
+	onAfterContentInit() {
+		this.templates().forEach((item) => {
+			switch (item.getType()) {
+				case "indicator":
+					this._indicatorTemplate = item.template;
+					break;
+				case "rotaterighticon":
+					this._rotateRightIconTemplate = item.template;
+					break;
+				case "rotatelefticon":
+					this._rotateLeftIconTemplate = item.template;
+					break;
+				case "zoomouticon":
+					this._zoomOutIconTemplate = item.template;
+					break;
+				case "zoominicon":
+					this._zoomInIconTemplate = item.template;
+					break;
+				case "closeicon":
+					this._closeIconTemplate = item.template;
+					break;
+				case "image":
+					this._imageTemplate = item.template;
+					break;
+				case "preview":
+					this._previewTemplate = item.template;
+					break;
+				default:
+					this._indicatorTemplate = item.template;
+					break;
+			}
+		});
+	}
+	onImageClick() {
+		if (this.preview()) {
+			this.maskVisible = true;
+			this.previewVisible = true;
+			this.renderMask.set(true);
+			this.renderPreview.set(true);
+			blockBodyScroll();
+		}
+	}
+	onMaskClick() {
+		if (!this.previewClick) this.closePreview();
+		this.previewClick = false;
+	}
+	onMaskKeydown(event) {
+		switch (event.code) {
+			case "Escape":
+				this.onMaskClick();
+				setTimeout(() => {
+					focus(this.previewButton()?.nativeElement);
+				}, 25);
+				event.preventDefault();
+				break;
+			default: break;
+		}
+	}
+	onPreviewImageClick() {
+		this.previewClick = true;
+	}
+	rotateRight() {
+		this.rotate += 90;
+		this.previewClick = true;
+	}
+	rotateLeft() {
+		this.rotate -= 90;
+		this.previewClick = true;
+	}
+	zoomIn() {
+		this.scale = this.scale + this.zoomSettings.step;
+		this.previewClick = true;
+	}
+	zoomOut() {
+		this.scale = this.scale - this.zoomSettings.step;
+		this.previewClick = true;
+	}
+	onAnimationStart(event) {
+		this.container = event.element;
+		this.wrapper = this.container?.parentElement;
+		this.$attrSelector && this.wrapper?.setAttribute(this.$attrSelector, "");
+		this.appendContainer();
+		this.moveOnTop();
+		this.onShow.emit({});
+		setTimeout(() => {
+			focus(this.closeButton()?.nativeElement);
+		}, 25);
+	}
+	onBeforeLeave() {
+		this.maskVisible = false;
+	}
+	onAnimationEnd() {
+		this.renderPreview.set(false);
+	}
+	onMaskAfterLeave() {
+		if (!this.renderPreview()) this.renderMask.set(false);
+		ZIndexUtils.clear(this.wrapper);
+		this.container = null;
+		this.wrapper = null;
+		this.rotate = 0;
+		this.scale = this.zoomSettings.default;
+		unblockBodyScroll();
+		this.onHide.emit({});
+		this.cd.markForCheck();
+	}
+	moveOnTop() {
+		ZIndexUtils.set("modal", this.wrapper, this.config.zIndex.modal);
+	}
+	appendContainer() {
+		if (this.$appendTo() && this.$appendTo() !== "self") {
+			if (this.$appendTo() === "body" && this.wrapper) this.document.body.appendChild(this.wrapper);
+			else if (this.wrapper) appendChild(this.$appendTo(), this.wrapper);
+		}
+	}
+	imagePreviewStyle() {
+		return { transform: "rotate(" + this.rotate + "deg) scale(" + this.scale + ")" };
+	}
+	get zoomImageAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.zoomImage : void 0;
+	}
+	handleToolbarClick(event) {
+		event.stopPropagation();
+	}
+	closePreview() {
+		this.previewVisible = false;
+	}
+	imageError(event) {
+		this.onImageError.emit(event);
+	}
+	rightAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.rotateRight : void 0;
+	}
+	leftAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.rotateLeft : void 0;
+	}
+	zoomInAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.zoomIn : void 0;
+	}
+	zoomOutAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.zoomOut : void 0;
+	}
+	closeAriaLabel() {
+		return this.config.translation.aria ? this.config.translation.aria.close : void 0;
+	}
+	onKeydownHandler() {
+		if (this.previewVisible) this.closePreview();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: Image,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: Image,
+		isStandalone: true,
+		selector: "h-image",
+		inputs: {
+			imageClass: {
+				classPropertyName: "imageClass",
+				publicName: "imageClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			imageStyle: {
+				classPropertyName: "imageStyle",
+				publicName: "imageStyle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			styleClass: {
+				classPropertyName: "styleClass",
+				publicName: "styleClass",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			src: {
+				classPropertyName: "src",
+				publicName: "src",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			srcSet: {
+				classPropertyName: "srcSet",
+				publicName: "srcSet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sizes: {
+				classPropertyName: "sizes",
+				publicName: "sizes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewImageSrc: {
+				classPropertyName: "previewImageSrc",
+				publicName: "previewImageSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewImageSrcSet: {
+				classPropertyName: "previewImageSrcSet",
+				publicName: "previewImageSrcSet",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			previewImageSizes: {
+				classPropertyName: "previewImageSizes",
+				publicName: "previewImageSizes",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			alt: {
+				classPropertyName: "alt",
+				publicName: "alt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			preview: {
+				classPropertyName: "preview",
+				publicName: "preview",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showTransitionOptions: {
+				classPropertyName: "showTransitionOptions",
+				publicName: "showTransitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hideTransitionOptions: {
+				classPropertyName: "hideTransitionOptions",
+				publicName: "hideTransitionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			modalEnterAnimation: {
+				classPropertyName: "modalEnterAnimation",
+				publicName: "modalEnterAnimation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			modalLeaveAnimation: {
+				classPropertyName: "modalLeaveAnimation",
+				publicName: "modalLeaveAnimation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			appendTo: {
+				classPropertyName: "appendTo",
+				publicName: "appendTo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maskMotionOptions: {
+				classPropertyName: "maskMotionOptions",
+				publicName: "maskMotionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			motionOptions: {
+				classPropertyName: "motionOptions",
+				publicName: "motionOptions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			onShow: "onShow",
+			onHide: "onHide",
+			onImageError: "onImageError"
+		},
+		host: {
+			listeners: { "document:keydown.escape": "onKeydownHandler()" },
+			properties: { "class": "cn(cx('root'),styleClass())" }
+		},
+		providers: [
+			ImageStyle,
+			{
+				provide: IMAGE_INSTANCE,
+				useExisting: Image
+			},
+			{
+				provide: PARENT_INSTANCE,
+				useExisting: Image
+			}
+		],
+		queries: [
+			{
+				propertyName: "indicatorTemplate",
+				first: true,
+				predicate: ["indicator"],
+				isSignal: true
+			},
+			{
+				propertyName: "rotateRightIconTemplate",
+				first: true,
+				predicate: ["rotaterighticon"],
+				isSignal: true
+			},
+			{
+				propertyName: "rotateLeftIconTemplate",
+				first: true,
+				predicate: ["rotatelefticon"],
+				isSignal: true
+			},
+			{
+				propertyName: "zoomOutIconTemplate",
+				first: true,
+				predicate: ["zoomouticon"],
+				isSignal: true
+			},
+			{
+				propertyName: "zoomInIconTemplate",
+				first: true,
+				predicate: ["zoominicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "closeIconTemplate",
+				first: true,
+				predicate: ["closeicon"],
+				isSignal: true
+			},
+			{
+				propertyName: "previewTemplate",
+				first: true,
+				predicate: ["preview"],
+				isSignal: true
+			},
+			{
+				propertyName: "imageTemplate",
+				first: true,
+				predicate: ["image"],
+				isSignal: true
+			},
+			{
+				propertyName: "templates",
+				predicate: HelixTemplate,
+				isSignal: true
+			}
+		],
+		viewQueries: [
+			{
+				propertyName: "mask",
+				first: true,
+				predicate: ["mask"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "previewButton",
+				first: true,
+				predicate: ["previewButton"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "closeButton",
+				first: true,
+				predicate: ["closeButton"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		hostDirectives: [{ directive: i1.Bind }],
+		ngImport: i0,
+		template: "@if (!imageTemplate() && !_imageTemplate) {\n  <img\n    [attr.src]=\"src()\"\n    [attr.srcset]=\"srcSet()\"\n    [attr.sizes]=\"sizes()\"\n    [attr.alt]=\"alt()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    [attr.loading]=\"loading()\"\n    [ngStyle]=\"imageStyle()\"\n    [class]=\"imageClass()\"\n    (error)=\"imageError($event)\"\n    [hBind]=\"ptm('image')\"\n    />\n}\n\n<ng-container *ngTemplateOutlet=\"imageTemplate() || _imageTemplate; context: { errorCallback: imageError.bind(this) }\"></ng-container>\n\n@if (preview()) {\n  <button [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" [class]=\"cx('previewMask')\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height() + 'px', width: width() + 'px' }\" [hBind]=\"ptm('previewMask')\">\n    @if (indicatorTemplate() || _indicatorTemplate) {\n      <ng-container *ngTemplateOutlet=\"indicatorTemplate() || _indicatorTemplate\"></ng-container>\n    } @else {\n      <svg data-h-icon=\"eye\" [class]=\"cx('previewIcon')\" [hBind]=\"ptm('previewIcon')\" />\n    }\n  </button>\n}\n@if (renderMask()) {\n  <div\n    #mask\n    [class]=\"cx('mask')\"\n    [attr.aria-modal]=\"maskVisible\"\n    role=\"dialog\"\n    (click)=\"onMaskClick()\"\n    (keydown)=\"onMaskKeydown($event)\"\n    hFocusTrap\n    [hBind]=\"ptm('mask')\"\n    [hMotion]=\"maskVisible\"\n    [pMotionAppear]=\"true\"\n    [pMotionEnterActiveClass]=\"'h-overlay-mask-enter-active'\"\n    [pMotionLeaveActiveClass]=\"'h-overlay-mask-leave-active'\"\n    [pMotionOptions]=\"computedMaskMotionOptions()\"\n    (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n    >\n    <div [class]=\"cx('toolbar')\" (click)=\"handleToolbarClick($event)\" [hBind]=\"ptm('toolbar')\">\n      <button [class]=\"cx('rotateRightButton')\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\" [hBind]=\"ptm('rotateRightButton')\">\n        @if (!rotateRightIconTemplate() && !_rotateRightIconTemplate) {\n          <svg data-h-icon=\"refresh\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate() || _rotateRightIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('rotateLeftButton')\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\" [hBind]=\"ptm('rotateLeftButton')\">\n        @if (!rotateLeftIconTemplate() && !_rotateLeftIconTemplate) {\n          <svg data-h-icon=\"undo\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate() || _rotateLeftIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomOutButton')\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\" [hBind]=\"ptm('zoomOutButton')\">\n        @if (!zoomOutIconTemplate() && !_zoomOutIconTemplate) {\n          <svg data-h-icon=\"search-minus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate() || _zoomOutIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomInButton')\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\" [hBind]=\"ptm('zoomInButton')\">\n        @if (!zoomInIconTemplate() && !_zoomInIconTemplate) {\n          <svg data-h-icon=\"search-plus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomInIconTemplate() || _zoomInIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('closeButton')\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton [hBind]=\"ptm('closeButton')\">\n        @if (!closeIconTemplate() && !_closeIconTemplate) {\n          <svg data-h-icon=\"times\" />\n        }\n        <ng-template *ngTemplateOutlet=\"closeIconTemplate() || _closeIconTemplate\"></ng-template>\n      </button>\n    </div>\n    @if (renderPreview()) {\n      <h-motion [visible]=\"previewVisible\" name=\"h-image-original\" [appear]=\"true\" [options]=\"computedMotionOptions()\" (onBeforeEnter)=\"onAnimationStart($event)\" (onBeforeLeave)=\"onBeforeLeave()\" (onAfterLeave)=\"onAnimationEnd($event)\">\n        @if (!previewTemplate() && !_previewTemplate) {\n          <img\n            [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\n            [attr.srcset]=\"previewImageSrcSet()\"\n            [attr.sizes]=\"previewImageSizes()\"\n            [class]=\"cx('original')\"\n            [ngStyle]=\"imagePreviewStyle()\"\n            (click)=\"onPreviewImageClick()\"\n            [hBind]=\"ptm('original')\"\n            />\n        }\n        <ng-container\n                    *ngTemplateOutlet=\"\n                        previewTemplate() || _previewTemplate;\n                        context: {\n                            class: cx('original'),\n                            style: imagePreviewStyle(),\n                            previewCallback: onPreviewImageClick.bind(this)\n                        }\n                    \"\n        >\n      </ng-container>\n    </h-motion>\n  }\n</div>\n}\n",
+		dependencies: [
+			{
+				kind: "ngmodule",
+				type: CommonModule
+			},
+			{
+				kind: "directive",
+				type: i2.NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "directive",
+				type: i2.NgStyle,
+				selector: "[ngStyle]",
+				inputs: ["ngStyle"]
+			},
+			{
+				kind: "component",
+				type: RefreshIcon,
+				selector: "[data-h-icon=\"refresh\"]"
+			},
+			{
+				kind: "component",
+				type: EyeIcon,
+				selector: "[data-h-icon=\"eye\"]"
+			},
+			{
+				kind: "component",
+				type: UndoIcon,
+				selector: "[data-h-icon=\"undo\"]"
+			},
+			{
+				kind: "component",
+				type: SearchMinusIcon,
+				selector: "[data-h-icon=\"search-minus\"]"
+			},
+			{
+				kind: "component",
+				type: SearchPlusIcon,
+				selector: "[data-h-icon=\"search-plus\"]"
+			},
+			{
+				kind: "component",
+				type: TimesIcon,
+				selector: "[data-h-icon=\"times\"]"
+			},
+			{
+				kind: "directive",
+				type: FocusTrap,
+				selector: "[hFocusTrap]",
+				inputs: ["pFocusTrapDisabled"]
+			},
+			{
+				kind: "ngmodule",
+				type: SharedModule
+			},
+			{
+				kind: "ngmodule",
+				type: BindModule
+			},
+			{
+				kind: "directive",
+				type: i1.Bind,
+				selector: "[hBind]",
+				inputs: ["hBind"]
+			},
+			{
+				kind: "ngmodule",
+				type: MotionModule
+			},
+			{
+				kind: "component",
+				type: i3.Motion,
+				selector: "h-motion",
+				inputs: [
+					"visible",
+					"mountOnEnter",
+					"unmountOnLeave",
+					"name",
+					"type",
+					"safe",
+					"disabled",
+					"appear",
+					"enter",
+					"leave",
+					"duration",
+					"hideStrategy",
+					"enterFromClass",
+					"enterToClass",
+					"enterActiveClass",
+					"leaveFromClass",
+					"leaveToClass",
+					"leaveActiveClass",
+					"options"
+				],
+				outputs: [
+					"onBeforeEnter",
+					"onEnter",
+					"onAfterEnter",
+					"onEnterCancelled",
+					"onBeforeLeave",
+					"onLeave",
+					"onAfterLeave",
+					"onLeaveCancelled"
+				]
+			},
+			{
+				kind: "directive",
+				type: i3.MotionDirective,
+				selector: "[hMotion]",
+				inputs: [
+					"hMotion",
+					"pMotionName",
+					"pMotionType",
+					"pMotionSafe",
+					"pMotionDisabled",
+					"pMotionAppear",
+					"pMotionEnter",
+					"pMotionLeave",
+					"pMotionDuration",
+					"pMotionHideStrategy",
+					"pMotionEnterFromClass",
+					"pMotionEnterToClass",
+					"pMotionEnterActiveClass",
+					"pMotionLeaveFromClass",
+					"pMotionLeaveToClass",
+					"pMotionLeaveActiveClass",
+					"pMotionOptions"
+				],
+				outputs: [
+					"pMotionOnBeforeEnter",
+					"pMotionOnEnter",
+					"pMotionOnAfterEnter",
+					"pMotionOnEnterCancelled",
+					"pMotionOnBeforeLeave",
+					"pMotionOnLeave",
+					"pMotionOnAfterLeave",
+					"pMotionOnLeaveCancelled"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: Image,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "h-image",
+			standalone: true,
+			imports: [
+				CommonModule,
+				RefreshIcon,
+				EyeIcon,
+				UndoIcon,
+				SearchMinusIcon,
+				SearchPlusIcon,
+				TimesIcon,
+				FocusTrap,
+				SharedModule,
+				BindModule,
+				MotionModule
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			providers: [
+				ImageStyle,
+				{
+					provide: IMAGE_INSTANCE,
+					useExisting: Image
+				},
+				{
+					provide: PARENT_INSTANCE,
+					useExisting: Image
+				}
+			],
+			host: {
+				"[class]": "cn(cx('root'),styleClass())",
+				"(document:keydown.escape)": "onKeydownHandler()"
+			},
+			hostDirectives: [Bind],
+			template: "@if (!imageTemplate() && !_imageTemplate) {\n  <img\n    [attr.src]=\"src()\"\n    [attr.srcset]=\"srcSet()\"\n    [attr.sizes]=\"sizes()\"\n    [attr.alt]=\"alt()\"\n    [attr.width]=\"width()\"\n    [attr.height]=\"height()\"\n    [attr.loading]=\"loading()\"\n    [ngStyle]=\"imageStyle()\"\n    [class]=\"imageClass()\"\n    (error)=\"imageError($event)\"\n    [hBind]=\"ptm('image')\"\n    />\n}\n\n<ng-container *ngTemplateOutlet=\"imageTemplate() || _imageTemplate; context: { errorCallback: imageError.bind(this) }\"></ng-container>\n\n@if (preview()) {\n  <button [attr.aria-label]=\"zoomImageAriaLabel\" type=\"button\" [class]=\"cx('previewMask')\" (click)=\"onImageClick()\" #previewButton [ngStyle]=\"{ height: height() + 'px', width: width() + 'px' }\" [hBind]=\"ptm('previewMask')\">\n    @if (indicatorTemplate() || _indicatorTemplate) {\n      <ng-container *ngTemplateOutlet=\"indicatorTemplate() || _indicatorTemplate\"></ng-container>\n    } @else {\n      <svg data-h-icon=\"eye\" [class]=\"cx('previewIcon')\" [hBind]=\"ptm('previewIcon')\" />\n    }\n  </button>\n}\n@if (renderMask()) {\n  <div\n    #mask\n    [class]=\"cx('mask')\"\n    [attr.aria-modal]=\"maskVisible\"\n    role=\"dialog\"\n    (click)=\"onMaskClick()\"\n    (keydown)=\"onMaskKeydown($event)\"\n    hFocusTrap\n    [hBind]=\"ptm('mask')\"\n    [hMotion]=\"maskVisible\"\n    [pMotionAppear]=\"true\"\n    [pMotionEnterActiveClass]=\"'h-overlay-mask-enter-active'\"\n    [pMotionLeaveActiveClass]=\"'h-overlay-mask-leave-active'\"\n    [pMotionOptions]=\"computedMaskMotionOptions()\"\n    (pMotionOnAfterLeave)=\"onMaskAfterLeave()\"\n    >\n    <div [class]=\"cx('toolbar')\" (click)=\"handleToolbarClick($event)\" [hBind]=\"ptm('toolbar')\">\n      <button [class]=\"cx('rotateRightButton')\" (click)=\"rotateRight()\" type=\"button\" [attr.aria-label]=\"rightAriaLabel()\" [hBind]=\"ptm('rotateRightButton')\">\n        @if (!rotateRightIconTemplate() && !_rotateRightIconTemplate) {\n          <svg data-h-icon=\"refresh\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateRightIconTemplate() || _rotateRightIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('rotateLeftButton')\" (click)=\"rotateLeft()\" type=\"button\" [attr.aria-label]=\"leftAriaLabel()\" [hBind]=\"ptm('rotateLeftButton')\">\n        @if (!rotateLeftIconTemplate() && !_rotateLeftIconTemplate) {\n          <svg data-h-icon=\"undo\" />\n        }\n        <ng-template *ngTemplateOutlet=\"rotateLeftIconTemplate() || _rotateLeftIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomOutButton')\" (click)=\"zoomOut()\" type=\"button\" [disabled]=\"isZoomOutDisabled\" [attr.aria-label]=\"zoomOutAriaLabel()\" [hBind]=\"ptm('zoomOutButton')\">\n        @if (!zoomOutIconTemplate() && !_zoomOutIconTemplate) {\n          <svg data-h-icon=\"search-minus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomOutIconTemplate() || _zoomOutIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('zoomInButton')\" (click)=\"zoomIn()\" type=\"button\" [disabled]=\"isZoomInDisabled\" [attr.aria-label]=\"zoomInAriaLabel()\" [hBind]=\"ptm('zoomInButton')\">\n        @if (!zoomInIconTemplate() && !_zoomInIconTemplate) {\n          <svg data-h-icon=\"search-plus\" />\n        }\n        <ng-template *ngTemplateOutlet=\"zoomInIconTemplate() || _zoomInIconTemplate\"></ng-template>\n      </button>\n      <button [class]=\"cx('closeButton')\" type=\"button\" (click)=\"closePreview()\" [attr.aria-label]=\"closeAriaLabel()\" #closeButton [hBind]=\"ptm('closeButton')\">\n        @if (!closeIconTemplate() && !_closeIconTemplate) {\n          <svg data-h-icon=\"times\" />\n        }\n        <ng-template *ngTemplateOutlet=\"closeIconTemplate() || _closeIconTemplate\"></ng-template>\n      </button>\n    </div>\n    @if (renderPreview()) {\n      <h-motion [visible]=\"previewVisible\" name=\"h-image-original\" [appear]=\"true\" [options]=\"computedMotionOptions()\" (onBeforeEnter)=\"onAnimationStart($event)\" (onBeforeLeave)=\"onBeforeLeave()\" (onAfterLeave)=\"onAnimationEnd($event)\">\n        @if (!previewTemplate() && !_previewTemplate) {\n          <img\n            [attr.src]=\"previewImageSrc() ? previewImageSrc() : src()\"\n            [attr.srcset]=\"previewImageSrcSet()\"\n            [attr.sizes]=\"previewImageSizes()\"\n            [class]=\"cx('original')\"\n            [ngStyle]=\"imagePreviewStyle()\"\n            (click)=\"onPreviewImageClick()\"\n            [hBind]=\"ptm('original')\"\n            />\n        }\n        <ng-container\n                    *ngTemplateOutlet=\"\n                        previewTemplate() || _previewTemplate;\n                        context: {\n                            class: cx('original'),\n                            style: imagePreviewStyle(),\n                            previewCallback: onPreviewImageClick.bind(this)\n                        }\n                    \"\n        >\n      </ng-container>\n    </h-motion>\n  }\n</div>\n}\n"
+		}]
+	}],
+	propDecorators: {
+		imageClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageClass",
+				required: false
+			}]
+		}],
+		imageStyle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageStyle",
+				required: false
+			}]
+		}],
+		styleClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "styleClass",
+				required: false
+			}]
+		}],
+		src: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "src",
+				required: false
+			}]
+		}],
+		srcSet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "srcSet",
+				required: false
+			}]
+		}],
+		sizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sizes",
+				required: false
+			}]
+		}],
+		previewImageSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewImageSrc",
+				required: false
+			}]
+		}],
+		previewImageSrcSet: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewImageSrcSet",
+				required: false
+			}]
+		}],
+		previewImageSizes: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "previewImageSizes",
+				required: false
+			}]
+		}],
+		alt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "alt",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		preview: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "preview",
+				required: false
+			}]
+		}],
+		showTransitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showTransitionOptions",
+				required: false
+			}]
+		}],
+		hideTransitionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideTransitionOptions",
+				required: false
+			}]
+		}],
+		modalEnterAnimation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "modalEnterAnimation",
+				required: false
+			}]
+		}],
+		modalLeaveAnimation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "modalLeaveAnimation",
+				required: false
+			}]
+		}],
+		appendTo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "appendTo",
+				required: false
+			}]
+		}],
+		maskMotionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maskMotionOptions",
+				required: false
+			}]
+		}],
+		motionOptions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "motionOptions",
+				required: false
+			}]
+		}],
+		onShow: [{
+			type: i0.Output,
+			args: ["onShow"]
+		}],
+		onHide: [{
+			type: i0.Output,
+			args: ["onHide"]
+		}],
+		onImageError: [{
+			type: i0.Output,
+			args: ["onImageError"]
+		}],
+		mask: [{
+			type: i0.ViewChild,
+			args: ["mask", { isSignal: true }]
+		}],
+		previewButton: [{
+			type: i0.ViewChild,
+			args: ["previewButton", { isSignal: true }]
+		}],
+		closeButton: [{
+			type: i0.ViewChild,
+			args: ["closeButton", { isSignal: true }]
+		}],
+		indicatorTemplate: [{
+			type: i0.ContentChild,
+			args: ["indicator", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		rotateRightIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["rotaterighticon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		rotateLeftIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["rotatelefticon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		zoomOutIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["zoomouticon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		zoomInIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["zoominicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		closeIconTemplate: [{
+			type: i0.ContentChild,
+			args: ["closeicon", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		previewTemplate: [{
+			type: i0.ContentChild,
+			args: ["preview", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		imageTemplate: [{
+			type: i0.ContentChild,
+			args: ["image", {
+				descendants: false,
+				isSignal: true
+			}]
+		}],
+		templates: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HelixTemplate), { isSignal: true }]
+		}]
+	}
+});
+var ImageModule = class ImageModule {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ImageModule,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.NgModule
+	});
+	static ɵmod = i0.ɵɵngDeclareNgModule({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ImageModule,
+		imports: [Image, SharedModule],
+		exports: [Image, SharedModule]
+	});
+	static ɵinj = i0.ɵɵngDeclareInjector({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ImageModule,
+		imports: [
+			Image,
+			SharedModule,
+			SharedModule
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ImageModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [Image, SharedModule],
+			exports: [Image, SharedModule]
+		}]
+	}]
+});
 export { Image, ImageClasses, ImageModule, ImageStyle };
-//# sourceMappingURL=gravionlabs-helix-core-image.mjs.map
+
+//# sourceMappingURL=gravionlabs-helix-core-image.mjs.map