@libs-ui/components-gallery 0.1.1-1

package/fesm2022/libs-ui-components-gallery.mjs

@@ -0,0 +1,460 @@
+import { NgComponentOutlet, AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { computed, signal, model, input, output, inject, effect, untracked, ChangeDetectionStrategy, Component, viewChild, viewChildren, DestroyRef } from '@angular/core';
+import { LibsUiIconsGetIconComponentPipe } from '@libs-ui/icons';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
+import { uuid, isEmbedFrame, getDayjs, UtilsCommunicateMicroKeyGlobal, UtilsCommunicateMicro, viewDataNumberByLanguage } from '@libs-ui/utils';
+import { fromEvent } from 'rxjs';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsGalleryComponent {
+    // #region PROPERTY
+    imagesDisplay = computed(() => {
+        return this.images().slice(this.start(), this.end());
+    });
+    idOverlay = signal(uuid());
+    idInterval = signal(undefined);
+    viewerRef;
+    // #region INPUT
+    images = model.required();
+    start = input(0);
+    end = input(3);
+    zIndex = input(1200);
+    fieldDisplaySrcImage = input('url');
+    ignoreOverlayCountImage = input();
+    imageArrayStringConvert = input(); // sử dụng trong 1 số trường hợp images là Array<string>
+    // #region OUTPUT
+    outFunctionsControl = output();
+    outViewerEvent = output();
+    // #region INJECT
+    dynamicComponent = inject(LibsUiDynamicComponentService);
+    constructor() {
+        effect(() => {
+            const imgConvert = this.imageArrayStringConvert();
+            const fieldGetSrc = this.fieldDisplaySrcImage();
+            if (!imgConvert?.length || !fieldGetSrc) {
+                return;
+            }
+            untracked(() => {
+                const convertedImages = imgConvert?.map((item) => {
+                    return {
+                        [fieldGetSrc]: item,
+                    };
+                }) || [];
+                this.images.set(convertedImages);
+            });
+        });
+    }
+    ngOnInit() {
+        this.outFunctionsControl.emit(this.FunctionsControl);
+    }
+    /* FUNCTIONS */
+    get FunctionsControl() {
+        return {
+            open: (imageSelected) => this.handlerSelectImage(undefined, imageSelected),
+            viewerRef: this.ViewerRef,
+        };
+    }
+    async handlerSelectImage(event, imageSelected) {
+        event?.stopPropagation();
+        if (this.viewerRef) {
+            return;
+        }
+        const viewerComponent = await Promise.resolve().then(function () { return viewer_component; }).then((c) => c.LibsUiComponentsGalleryViewerComponent);
+        this.viewerRef = this.dynamicComponent.resolveComponentFactory(viewerComponent);
+        this.outFunctionsControl.emit({ viewerRef: this.ViewerRef, open: (imageSelected) => this.handlerSelectImage(undefined, imageSelected) });
+        this.viewerRef.setInput('fieldDisplaySrcImage', this.fieldDisplaySrcImage());
+        this.viewerRef.setInput('images', this.images());
+        this.viewerRef.setInput('imageSelected', imageSelected);
+        this.viewerRef.setInput('zIndex', this.zIndex());
+        this.viewerRef.setInput('singleImage', this.images().length <= 1);
+        const sub = this.viewerRef.instance.outClose.subscribe(() => {
+            sub.unsubscribe();
+            this.closePopup();
+        });
+        this.dynamicComponent.addToBody(this.viewerRef);
+        this.outViewerEvent.emit('show');
+        if (isEmbedFrame()) {
+            const data = {
+                type: UtilsCommunicateMicroKeyGlobal.KEY_MESSAGE_MODAL,
+                response: {
+                    message: 'open',
+                    state: true,
+                    idOverlay: this.idOverlay,
+                    timeLiveUpdate: getDayjs().unix(),
+                },
+            };
+            UtilsCommunicateMicro.PostMessageToParent(data);
+            this.idInterval.set(setInterval(() => {
+                data.response.timeLiveUpdate = getDayjs().unix();
+                UtilsCommunicateMicro.PostMessageToParent(data);
+            }, 2000));
+        }
+    }
+    handlerImageError(e, image) {
+        const event = e;
+        event.stopPropagation();
+        image['isError'] = true;
+    }
+    closePopup() {
+        clearInterval(this.idInterval());
+        if (this.viewerRef) {
+            this.outViewerEvent.emit('remove');
+            if (isEmbedFrame()) {
+                const data = {
+                    type: UtilsCommunicateMicroKeyGlobal.KEY_MESSAGE_MODAL,
+                    response: {
+                        message: 'close',
+                        state: false,
+                        idOverlay: this.idOverlay,
+                    },
+                };
+                UtilsCommunicateMicro.PostMessageToParent(data);
+            }
+        }
+        this.dynamicComponent.remove(this.viewerRef);
+        this.viewerRef = undefined;
+        this.outFunctionsControl.emit({ viewerRef: this.ViewerRef, open: (imageSelected) => this.handlerSelectImage(undefined, imageSelected) });
+    }
+    get ViewerRef() {
+        return this.viewerRef;
+    }
+    ngOnDestroy() {
+        this.viewerRef?.destroy();
+        this.closePopup();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsGalleryComponent, isStandalone: true, selector: "libs_ui-components-gallery", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, start: { classPropertyName: "start", publicName: "start", isSignal: true, isRequired: false, transformFunction: null }, end: { classPropertyName: "end", publicName: "end", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, fieldDisplaySrcImage: { classPropertyName: "fieldDisplaySrcImage", publicName: "fieldDisplaySrcImage", isSignal: true, isRequired: false, transformFunction: null }, ignoreOverlayCountImage: { classPropertyName: "ignoreOverlayCountImage", publicName: "ignoreOverlayCountImage", isSignal: true, isRequired: false, transformFunction: null }, imageArrayStringConvert: { classPropertyName: "imageArrayStringConvert", publicName: "imageArrayStringConvert", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { images: "imagesChange", outFunctionsControl: "outFunctionsControl", outViewerEvent: "outViewerEvent" }, ngImport: i0, template: "@if (images()) {\n  <div class=\"flex w-full h-full\">\n    @for (image of imagesDisplay(); track $index) {\n      <div\n        #itemRef\n        class=\"w-full h-full rounded-[4px] overflow-hidden relative cursor-pointer\"\n        [class.mr-[8px]]=\"!$last\"\n        (click)=\"handlerSelectImage($event, image)\">\n        <div class=\"flex items-center justify-center w-full h-full\">\n          @if (!image['isError']) {\n            <img\n              [src]=\"image[fieldDisplaySrcImage()]\"\n              class=\"flex max-w-full max-h-full m-auto\"\n              (error)=\"handlerImageError($event, image)\" />\n          }\n          @if (image['isError']) {\n            <div *ngComponentOutlet=\"'image-default' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: itemRef.clientWidth }\"></div>\n          }\n        </div>\n        @if ($last && images().length > end() && !ignoreOverlayCountImage()) {\n          <div class=\"flex w-full h-full absolute top-0 left-0 items-center justify-center bg-black/15\">\n            <span class=\"libs-ui-font-h5m text-white\">+{{ images().length - end() }}</span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LibsUiIconsGetIconComponentPipe, name: "LibsUiIconsGetIconComponentPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsGalleryComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-gallery', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgComponentOutlet, AsyncPipe, LibsUiIconsGetIconComponentPipe], template: "@if (images()) {\n  <div class=\"flex w-full h-full\">\n    @for (image of imagesDisplay(); track $index) {\n      <div\n        #itemRef\n        class=\"w-full h-full rounded-[4px] overflow-hidden relative cursor-pointer\"\n        [class.mr-[8px]]=\"!$last\"\n        (click)=\"handlerSelectImage($event, image)\">\n        <div class=\"flex items-center justify-center w-full h-full\">\n          @if (!image['isError']) {\n            <img\n              [src]=\"image[fieldDisplaySrcImage()]\"\n              class=\"flex max-w-full max-h-full m-auto\"\n              (error)=\"handlerImageError($event, image)\" />\n          }\n          @if (image['isError']) {\n            <div *ngComponentOutlet=\"'image-default' | LibsUiIconsGetIconComponentPipe | async; inputs: { size: itemRef.clientWidth }\"></div>\n          }\n        </div>\n        @if ($last && images().length > end() && !ignoreOverlayCountImage()) {\n          <div class=\"flex w-full h-full absolute top-0 left-0 items-center justify-center bg-black/15\">\n            <span class=\"libs-ui-font-h5m text-white\">+{{ images().length - end() }}</span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsGalleryViewerComponent {
+    // #region PROPERTY
+    indexSelected = signal(0);
+    scaleValue = signal(1);
+    ratio = signal('100%');
+    fullScreen = signal(false);
+    isShowButton = signal(false);
+    disable = signal(true);
+    hoverContentViewImage = signal(false);
+    step = signal(0.1);
+    draggableEl = signal(null);
+    widthDefault = signal(0);
+    heightDefault = signal(0);
+    viewPort = signal(undefined);
+    canDrag = signal(false);
+    widthImage = signal(0);
+    isFirstRender = signal(false);
+    timeouts = signal([]);
+    // #region INPUT
+    images = input.required();
+    fieldDisplaySrcImage = input.required();
+    imageSelected = model();
+    removeBackdrop = input();
+    zIndex = input(1200, { transform: (val) => val ?? 1200 });
+    singleImage = input(false);
+    classContainerInclude = input();
+    // #region OUTPUT
+    outClose = output();
+    // #region VIEW CHILD
+    containerRef = viewChild('containerRef');
+    singleImageRef = viewChild('singleImageRef');
+    elementRatioRef = viewChild('elementRatioRef');
+    fullContainerRef = viewChild('fullContainerRef');
+    imagesRef = viewChildren('imagesRef');
+    destroyRef = inject(DestroyRef);
+    constructor() {
+        effect(() => {
+            if (this.singleImage()) {
+                if (this.images().length) {
+                    untracked(() => {
+                        this.imageSelected.set(this.images()[0]);
+                    });
+                }
+                return;
+            }
+            untracked(() => {
+                const indexSelected = this.images().findIndex((item) => item[this.fieldDisplaySrcImage()] === this.imageSelected()?.[this.fieldDisplaySrcImage()]);
+                this.indexSelected.set(indexSelected);
+                this.createTimeout((id) => {
+                    this.clearTimeout(id);
+                    this.imagesRef()[this.indexSelected()].nativeElement.scrollIntoView();
+                }, 100);
+            });
+        });
+    }
+    ngAfterViewInit() {
+        fromEvent(document, 'keyup')
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((event) => {
+            event.stopPropagation();
+            if (event.key === 'Escape') {
+                this.handlerClosePopup(event);
+                return;
+            }
+            if (event.key === 'ArrowLeft') {
+                this.handlerPreviousImage(event);
+                return;
+            }
+            if (event.key === 'ArrowRight') {
+                this.handlerNextImage(event);
+                return;
+            }
+        });
+        this.isFirstRender.set(true);
+        fromEvent(window, 'resize').pipe(takeUntilDestroyed(this.destroyRef)).subscribe(this.setWidthImages.bind(this));
+        this.createTimeout((id) => {
+            this.clearTimeout(id);
+            this.setWidthImages();
+        }, 300);
+    }
+    /* FUNCTIONS */
+    setWidthImages() {
+        const singleImageRef = this.singleImageRef();
+        if (singleImageRef) {
+            singleImageRef.nativeElement.style.width = '';
+            singleImageRef.nativeElement.style.height = '';
+        }
+        this.viewPort.set(this.containerRef()?.nativeElement.getBoundingClientRect());
+        const img = new Image();
+        img.src = this.imageSelected()?.[this.fieldDisplaySrcImage()];
+        img.onload = () => {
+            this.widthDefault.set(img.naturalWidth);
+            this.heightDefault.set(img.naturalHeight);
+            this.widthImage.set(this.singleImageRef()?.nativeElement.width);
+            this.setStyleSelectImage();
+        };
+    }
+    handlerImageError(e, image) {
+        const event = e;
+        event.stopPropagation();
+        image['isError'] = true;
+    }
+    handlerShowButton(isShow) {
+        this.isShowButton.set(isShow);
+    }
+    handlerMouseEvent(event, status) {
+        event.stopPropagation();
+        this.hoverContentViewImage.set(status);
+    }
+    handlerClosePopup(e) {
+        e.stopPropagation();
+        this.outClose.emit();
+    }
+    handlerZoom(event, type) {
+        event.stopPropagation();
+        this.isFirstRender.set(false);
+        this.disable.set(false);
+        const element = this.singleImageRef()?.nativeElement;
+        if (!element) {
+            return;
+        }
+        const draggableEl = this.makeElementDraggable({
+            element: element,
+            isOverflowHiddenDesired: true,
+        });
+        this.draggableEl.set(draggableEl);
+        if (((this.scaleValue() * this.widthDefault()) / this.widthImage()) * 100 < 1) {
+            this.scaleValue.set(((1 / 100) * this.widthImage()) / this.widthDefault());
+        }
+        if (((this.scaleValue() * this.widthDefault()) / this.widthImage()) * 100 > 5000 * 0.9) {
+            this.scaleValue.set((((5000 * 0.9) / 100) * this.widthImage()) / this.widthDefault());
+        }
+        if (type === 'in') {
+            const scaleValue = this.scaleValue() * (1 + this.step());
+            this.scaleValue.set(scaleValue);
+        }
+        if (type === 'out') {
+            const scaleValue = this.scaleValue() / (1 + this.step());
+            this.scaleValue.set(scaleValue);
+        }
+        this.setWidthHeight(element);
+        element.style.position = `absolute`;
+        if (!this.canDrag() && this.draggableEl() && this.draggableEl()?.stopDraggableBehavior) {
+            this.draggableEl()?.stopDraggableBehavior?.();
+        }
+    }
+    handlerNextImage(e) {
+        const indexSelected = this.indexSelected() + 1;
+        this.handlerSelectImage(e, this.images()[indexSelected], indexSelected);
+    }
+    handlerPreviousImage(e) {
+        const indexSelected = this.indexSelected() - 1;
+        this.handlerSelectImage(e, this.images()[indexSelected], indexSelected);
+    }
+    handlerSelectImage(e, imageSelected, indexSelected) {
+        e.stopPropagation();
+        if (!imageSelected) {
+            return;
+        }
+        this.isFirstRender.set(true);
+        const elementRatio = this.elementRatioRef()?.nativeElement;
+        if (elementRatio) {
+            elementRatio.style.display = 'none';
+        }
+        this.imageSelected.set(imageSelected);
+        this.indexSelected.set(indexSelected);
+        this.scaleValue.set(1);
+        this.imagesRef()[indexSelected].nativeElement.scrollIntoView();
+        this.setWidthImages();
+    }
+    handlerFullScreen() {
+        this.createTimeout((id) => {
+            this.clearTimeout(id);
+            this.disable.set(true);
+            const element = this.singleImageRef()?.nativeElement;
+            const fullElement = this.fullContainerRef()?.nativeElement;
+            this.fullScreen.set(!this.fullScreen());
+            if (!fullElement) {
+                return;
+            }
+            if (this.fullScreen()) {
+                fullElement.style.width = '95%';
+                fullElement.style.height = '95%';
+            }
+            if (!this.fullScreen()) {
+                fullElement.style.width = '80%';
+                fullElement.style.height = '90%';
+            }
+            this.viewPort.set(this.containerRef()?.nativeElement.getBoundingClientRect());
+            if (!element) {
+                return;
+            }
+            this.setStyleSelectImage(true);
+            element.style.left = `unset`;
+            element.style.top = `unset`;
+        }, 0);
+    }
+    handlerReset() {
+        this.disable.set(true);
+        this.setStyleSelectImage(true);
+    }
+    makeElementDraggable = ({ element, DRAGGABLE_CSS_CLASS = 'draggable-element' }) => {
+        if (!element) {
+            return null;
+        }
+        const isTheRequiredCSSAlreadyInPlace = !!Array.from(element.ownerDocument.getElementsByTagName('style')).filter((styleEl) => styleEl?.textContent?.includes(`.${DRAGGABLE_CSS_CLASS}`))?.[0];
+        if (!isTheRequiredCSSAlreadyInPlace) {
+            element.ownerDocument.body.appendChild(Object.assign(element.ownerDocument.createElement('style'), {
+                textContent: `
+          .${DRAGGABLE_CSS_CLASS} {
+            position: absolute;
+            cursor: grabbing !important;
+          }
+          `,
+            }));
+        }
+        if (!element.classList.contains(DRAGGABLE_CSS_CLASS)) {
+            element.classList.add(DRAGGABLE_CSS_CLASS);
+        }
+        element.onmousedown = (mouseDownEvent) => {
+            mouseDownEvent.preventDefault();
+            element.onmousemove = (mouseMoveEvent) => {
+                mouseMoveEvent.preventDefault();
+                const rectElement = element.getBoundingClientRect();
+                if (rectElement.left + rectElement.width + mouseMoveEvent.movementX > (this.viewPort()?.width || 0) + (this.viewPort()?.left || 0) && rectElement.left + mouseMoveEvent.movementX < (this.viewPort()?.left || 0)) {
+                    element.style.left = `${element.offsetLeft + mouseMoveEvent.movementX}px`;
+                }
+                if (rectElement.top + rectElement.height + mouseMoveEvent.movementY > (this.viewPort()?.height || 0) + (this.viewPort()?.top || 0) && rectElement.top + mouseMoveEvent.movementY < (this.viewPort()?.top || 0)) {
+                    element.style.top = `${element.offsetTop + mouseMoveEvent.movementY}px`;
+                }
+            };
+        };
+        element.ownerDocument.onmouseup = (mouseUpEvent) => {
+            mouseUpEvent.preventDefault();
+            element.onmousemove = null;
+        };
+        return Object.assign(element, {
+            stopDraggableBehavior() {
+                element.classList.remove(DRAGGABLE_CSS_CLASS);
+                element.onmousedown = null;
+                element.onmousemove = null;
+                element.onmouseup = null;
+                element.style.left = 'unset';
+                element.style.top = 'unset';
+                return element;
+            },
+        });
+    };
+    setStyleSelectImage(reset) {
+        const element = this.singleImageRef()?.nativeElement;
+        if (!element) {
+            return;
+        }
+        const scaleValue = (this.viewPort()?.width || 0) / this.widthDefault() < ((this.viewPort()?.height || 0) - (this.singleImage() ? 0 : 40)) / this.heightDefault()
+            ? (this.viewPort()?.width || 0) / this.widthDefault()
+            : ((this.viewPort()?.height || 0) - (this.singleImage() ? 0 : 40)) / this.heightDefault();
+        this.scaleValue.set(scaleValue);
+        if (this.scaleValue() > 1 && (reset || this.isFirstRender()) && !this.fullScreen()) {
+            this.scaleValue.set(1);
+        }
+        this.setWidthHeight(element);
+        if (this.fullScreen()) {
+            element.style.position = `unset`;
+            return;
+        }
+    }
+    setWidthHeight(element) {
+        element.style.width = `${this.scaleValue() * this.widthDefault()}px`;
+        element.style.height = `${this.scaleValue() * this.heightDefault()}px`;
+        this.canDrag.set(false);
+        const rectElement = element.getBoundingClientRect();
+        if (rectElement.width > (this.viewPort()?.width || 0) || rectElement.height > (this.viewPort()?.height || 0)) {
+            this.canDrag.set(true);
+        }
+        if (rectElement.left + rectElement.width < (this.viewPort()?.width || 0) + (this.viewPort()?.left || 0) || rectElement.left > (this.viewPort()?.left || 0)) {
+            element.style.left = `unset`;
+        }
+        if (rectElement.top + rectElement.height < (this.viewPort()?.top || 0) + (this.viewPort()?.height || 0) || rectElement.top > (this.viewPort()?.top || 0)) {
+            element.style.top = `unset`;
+        }
+        this.setDisplayRatio();
+    }
+    setDisplayRatio() {
+        const element = this.singleImageRef()?.nativeElement;
+        this.ratio.set(`${viewDataNumberByLanguage((element.width / this.widthDefault()) * 100, false, 0)}%`);
+        const elementRatio = this.elementRatioRef()?.nativeElement;
+        elementRatio.style.display = 'flex';
+        this.createTimeout((id) => {
+            this.clearTimeout(id);
+            elementRatio.style.display = 'none';
+        }, 1000);
+    }
+    createTimeout(callback, delay) {
+        const timeoutId = setTimeout(() => callback(timeoutId), delay);
+        this.timeouts.update((ids) => [...ids, timeoutId]);
+    }
+    clearTimeout(id) {
+        clearTimeout(id);
+        this.timeouts.update((ids) => ids.filter((idStore) => idStore !== id));
+    }
+    ngOnDestroy() {
+        this.timeouts().forEach((item) => clearTimeout(item));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsGalleryViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsGalleryViewerComponent, isStandalone: true, selector: "libs_ui-components-gallery-viewer", inputs: { images: { classPropertyName: "images", publicName: "images", isSignal: true, isRequired: true, transformFunction: null }, fieldDisplaySrcImage: { classPropertyName: "fieldDisplaySrcImage", publicName: "fieldDisplaySrcImage", isSignal: true, isRequired: true, transformFunction: null }, imageSelected: { classPropertyName: "imageSelected", publicName: "imageSelected", isSignal: true, isRequired: false, transformFunction: null }, removeBackdrop: { classPropertyName: "removeBackdrop", publicName: "removeBackdrop", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, singleImage: { classPropertyName: "singleImage", publicName: "singleImage", isSignal: true, isRequired: false, transformFunction: null }, classContainerInclude: { classPropertyName: "classContainerInclude", publicName: "classContainerInclude", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imageSelected: "imageSelectedChange", outClose: "outClose" }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true, isSignal: true }, { propertyName: "singleImageRef", first: true, predicate: ["singleImageRef"], descendants: true, isSignal: true }, { propertyName: "elementRatioRef", first: true, predicate: ["elementRatioRef"], descendants: true, isSignal: true }, { propertyName: "fullContainerRef", first: true, predicate: ["fullContainerRef"], descendants: true, isSignal: true }, { propertyName: "imagesRef", predicate: ["imagesRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (images() || singleImage()) {\n  <div\n    class=\"libs-ui-gallery-img-popup libs-ui-gallery-img-popup-backdrop\"\n    [class.!bg-[transparent]]=\"removeBackdrop()\"\n    [style.zIndex]=\"zIndex()\">\n    <div\n      #fullContainerRef\n      class=\"libs-ui-gallery-img-popup-container {{ classContainerInclude() || '' }}\">\n      <div class=\"flex w-full justify-end mb-[16px] z-10\">\n        <i\n          class=\"libs-ui-icon-close text-[24px] p-[4px] rounded-[4px] text-[#ffffff] cursor-pointer bg-[#030B184D] hover:bg-[#030B1826]\"\n          (click)=\"handlerClosePopup($event)\"></i>\n      </div>\n      <div class=\"relative w-full h-full\">\n        <div class=\"flex flex-col w-full h-full justify-between\">\n          <div class=\"libs-ui-gallery-img-popup-container-preview w-full h-full\">\n            <div\n              class=\"flex flex-col w-full h-full relative\"\n              (mouseenter)=\"handlerShowButton(true)\"\n              (mouseleave)=\"handlerShowButton(false)\">\n              <div\n                #containerRef\n                class=\"flex w-full h-full relative\">\n                <div\n                  class=\"absolute flex items-center justify-center w-full h-full overflow-hidden\"\n                  (mouseenter)=\"handlerMouseEvent($event, true)\"\n                  (mouseleave)=\"handlerMouseEvent($event, false)\">\n                  @if (fieldDisplaySrcImage() && imageSelected(); as imageSelected) {\n                    <img\n                      #singleImageRef\n                      [src]=\"imageSelected[fieldDisplaySrcImage()]\"\n                      class=\"flex m-[auto]\"\n                      (error)=\"handlerImageError($event, imageSelected)\" />\n                  }\n                  <div\n                    #elementRatioRef\n                    class=\"libs-ui-gallery-img-popup-container-preview-ratio flex items-center justify-center libs-ui-font-h5m text-[#e6e7ea] w-[80px] h-[34px] rounded-[4px] absolute top-[50%] left-[50%]\">\n                    {{ ratio() }}\n                  </div>\n                </div>\n              </div>\n              @if (!imageSelected()?.['error']) {\n                <div\n                  class=\"relative w-full\"\n                  (mouseenter)=\"handlerMouseEvent($event, true)\"\n                  [class.hidden]=\"!hoverContentViewImage()\">\n                  <div class=\"flex w-full justify-center libs-ui-font-h5r absolute z-10 top-[-44px]\">\n                    <libs_ui-components-popover [config]=\"{ content: 'i18n_zoom_out', direction: 'top', zIndex: zIndex() + 100 }\">\n                      <i\n                        class=\"libs-ui-gallery-img-popup-container-preview-button rounded-l-[8px] libs-ui-icon-zoom-out before:text-[16px]\"\n                        (click)=\"handlerZoom($event, 'out')\"></i>\n                    </libs_ui-components-popover>\n                    <libs_ui-components-popover [config]=\"{ content: 'i18n_zoom_in', direction: 'top', zIndex: zIndex() + 100 }\">\n                      <i\n                        class=\"libs-ui-gallery-img-popup-container-preview-button libs-ui-icon-zoom-in before:text-[16px]\"\n                        (click)=\"handlerZoom($event, 'in')\"></i>\n                    </libs_ui-components-popover>\n                    <libs_ui-components-popover [config]=\"{ content: fullScreen() ? 'i18n_action_exit_full_screen' : 'i18n_action_view_full_screen', direction: 'top', zIndex: zIndex() + 100 }\">\n                      <div\n                        class=\"libs-ui-gallery-img-popup-container-preview-button\"\n                        (click)=\"handlerFullScreen()\">\n                        <i class=\"{{ fullScreen() ? 'libs-ui-icon-fullscreen-exit' : 'libs-ui-icon-fullscreen-open' }} text-[#ffffff] text-[16px]\"></i>\n                      </div>\n                    </libs_ui-components-popover>\n                    <div\n                      class=\"libs-ui-gallery-img-popup-container-preview-button rounded-r-[8px] border-l border-l-1 border-[#5d636b] flex items-center\"\n                      (click)=\"handlerReset()\">\n                      <i\n                        class=\"libs-ui-icon-refresh text-16px mr-[8px]\"\n                        [class.text-[#ffffff]]=\"!disable()\"\n                        [class.text-[#6a7383]]=\"disable()\"></i>\n                      <div\n                        class=\"libs-ui-font-h5r libs-ui-gallery-text-restore\"\n                        [class.text-[#ffffff]]=\"!disable()\"\n                        [class.text-[#6a7383]]=\"disable()\">\n                        {{ 'i18n_restore' | translate }}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (!singleImage()) {\n                <div class=\"flex justify-center libs-ui-font-h5r text-[#ffffff] mt-[12px]\">\n                  @if (fullScreen()) {\n                    <div class=\"mr-[16px] flex items-center\">\n                      <div\n                        class=\"rotate-180\"\n                        [class.cursor-pointer]=\"indexSelected() !== 0\"\n                        [class.pointer-events-none]=\"indexSelected() === 0\"\n                        (click)=\"handlerPreviousImage($event)\">\n                        <i\n                          class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                          [class.libs-ui-disable]=\"indexSelected() === 0\"></i>\n                      </div>\n                    </div>\n                  }\n                  <div class=\"flex items-center\">{{ indexSelected() + 1 }}/{{ images().length }}</div>\n\n                  @if (fullScreen()) {\n                    <div class=\"ml-[16px] flex items-center\">\n                      <div\n                        [class.cursor-pointer]=\"indexSelected() !== images().length - 1\"\n                        [class.pointer-events-none]=\"indexSelected() === images().length - 1\"\n                        (click)=\"handlerNextImage($event)\">\n                        <i\n                          class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                          [class.libs-ui-disable]=\"indexSelected() === images().length - 1\"></i>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (!singleImage()) {\n            <div\n              class=\"libs-ui-gallery-img-popup-container-list px-[32px] mt-[24px] flex\"\n              [class.!hidden]=\"fullScreen()\">\n              <div class=\"mr-[24px] flex items-center\">\n                <div\n                  class=\"rotate-180\"\n                  [class.cursor-pointer]=\"indexSelected() !== 0\"\n                  [class.pointer-events-none]=\"indexSelected() === 0\"\n                  (click)=\"handlerPreviousImage($event)\">\n                  <i\n                    class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                    [class.libs-ui-disable]=\"indexSelected() === 0\"></i>\n                </div>\n              </div>\n\n              <div class=\"flex max-w-[80%] relative overflow-hidden\">\n                <div class=\"flex h-full overflow-hidden\">\n                  @for (image of images(); track index; let index = $index; let last = $last) {\n                    <div\n                      #imagesRef\n                      class=\"libs-ui-gallery-img-popup-container-list-item\"\n                      [class.mr-[12px]]=\"!last\"\n                      [style.width.px]=\"imagesRef.offsetHeight\"\n                      [attr.active]=\"image[fieldDisplaySrcImage()] === imageSelected()?.[fieldDisplaySrcImage()]\">\n                      <div\n                        class=\"flex w-full h-full justify-center items-center\"\n                        (click)=\"handlerSelectImage($event, image, index)\">\n                        <div class=\"flex items-center justify-center w-full h-full\">\n                          <img\n                            [src]=\"image[fieldDisplaySrcImage()]\"\n                            class=\"flex max-h-full max-w-full m-[auto]\"\n                            (error)=\"handlerImageError($event, image)\" />\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n              <div class=\"ml-[24px] flex items-center\">\n                <div\n                  [class.cursor-pointer]=\"indexSelected() !== images().length - 1\"\n                  [class.pointer-events-none]=\"indexSelected() === images().length - 1\"\n                  (click)=\"handlerNextImage($event)\">\n                  <i\n                    class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                    [class.libs-ui-disable]=\"indexSelected() === images().length - 1\"></i>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".libs-ui-gallery-img-popup{display:flex;width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;justify-content:center}.libs-ui-gallery-img-popup-backdrop{background-color:#030b1850;backdrop-filter:blur(3px)}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container{position:relative;width:80%;height:90%;display:flex;flex-direction:column;margin:auto}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview{display:flex;position:relative}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-ratio{background:#071631;opacity:.65}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-button{height:32px;background:#071631;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;color:#fff}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-button:hover{background:#5d636b}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-button:hover .libs-ui-gallery-text-restore{color:#fff}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-list{display:flex;flex-shrink:0;justify-content:center;height:15%}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-list .libs-ui-gallery-img-popup-container-list-item{cursor:pointer;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #e6e7ea;border-radius:8px;padding:2px;max-width:118px!important;max-height:118px!important}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-list .libs-ui-gallery-img-popup-container-list-item[active=true]{border:1px solid var(--libs-ui-color-default, #226ff5)}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsGalleryViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-gallery-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LibsUiComponentsPopoverComponent], template: "@if (images() || singleImage()) {\n  <div\n    class=\"libs-ui-gallery-img-popup libs-ui-gallery-img-popup-backdrop\"\n    [class.!bg-[transparent]]=\"removeBackdrop()\"\n    [style.zIndex]=\"zIndex()\">\n    <div\n      #fullContainerRef\n      class=\"libs-ui-gallery-img-popup-container {{ classContainerInclude() || '' }}\">\n      <div class=\"flex w-full justify-end mb-[16px] z-10\">\n        <i\n          class=\"libs-ui-icon-close text-[24px] p-[4px] rounded-[4px] text-[#ffffff] cursor-pointer bg-[#030B184D] hover:bg-[#030B1826]\"\n          (click)=\"handlerClosePopup($event)\"></i>\n      </div>\n      <div class=\"relative w-full h-full\">\n        <div class=\"flex flex-col w-full h-full justify-between\">\n          <div class=\"libs-ui-gallery-img-popup-container-preview w-full h-full\">\n            <div\n              class=\"flex flex-col w-full h-full relative\"\n              (mouseenter)=\"handlerShowButton(true)\"\n              (mouseleave)=\"handlerShowButton(false)\">\n              <div\n                #containerRef\n                class=\"flex w-full h-full relative\">\n                <div\n                  class=\"absolute flex items-center justify-center w-full h-full overflow-hidden\"\n                  (mouseenter)=\"handlerMouseEvent($event, true)\"\n                  (mouseleave)=\"handlerMouseEvent($event, false)\">\n                  @if (fieldDisplaySrcImage() && imageSelected(); as imageSelected) {\n                    <img\n                      #singleImageRef\n                      [src]=\"imageSelected[fieldDisplaySrcImage()]\"\n                      class=\"flex m-[auto]\"\n                      (error)=\"handlerImageError($event, imageSelected)\" />\n                  }\n                  <div\n                    #elementRatioRef\n                    class=\"libs-ui-gallery-img-popup-container-preview-ratio flex items-center justify-center libs-ui-font-h5m text-[#e6e7ea] w-[80px] h-[34px] rounded-[4px] absolute top-[50%] left-[50%]\">\n                    {{ ratio() }}\n                  </div>\n                </div>\n              </div>\n              @if (!imageSelected()?.['error']) {\n                <div\n                  class=\"relative w-full\"\n                  (mouseenter)=\"handlerMouseEvent($event, true)\"\n                  [class.hidden]=\"!hoverContentViewImage()\">\n                  <div class=\"flex w-full justify-center libs-ui-font-h5r absolute z-10 top-[-44px]\">\n                    <libs_ui-components-popover [config]=\"{ content: 'i18n_zoom_out', direction: 'top', zIndex: zIndex() + 100 }\">\n                      <i\n                        class=\"libs-ui-gallery-img-popup-container-preview-button rounded-l-[8px] libs-ui-icon-zoom-out before:text-[16px]\"\n                        (click)=\"handlerZoom($event, 'out')\"></i>\n                    </libs_ui-components-popover>\n                    <libs_ui-components-popover [config]=\"{ content: 'i18n_zoom_in', direction: 'top', zIndex: zIndex() + 100 }\">\n                      <i\n                        class=\"libs-ui-gallery-img-popup-container-preview-button libs-ui-icon-zoom-in before:text-[16px]\"\n                        (click)=\"handlerZoom($event, 'in')\"></i>\n                    </libs_ui-components-popover>\n                    <libs_ui-components-popover [config]=\"{ content: fullScreen() ? 'i18n_action_exit_full_screen' : 'i18n_action_view_full_screen', direction: 'top', zIndex: zIndex() + 100 }\">\n                      <div\n                        class=\"libs-ui-gallery-img-popup-container-preview-button\"\n                        (click)=\"handlerFullScreen()\">\n                        <i class=\"{{ fullScreen() ? 'libs-ui-icon-fullscreen-exit' : 'libs-ui-icon-fullscreen-open' }} text-[#ffffff] text-[16px]\"></i>\n                      </div>\n                    </libs_ui-components-popover>\n                    <div\n                      class=\"libs-ui-gallery-img-popup-container-preview-button rounded-r-[8px] border-l border-l-1 border-[#5d636b] flex items-center\"\n                      (click)=\"handlerReset()\">\n                      <i\n                        class=\"libs-ui-icon-refresh text-16px mr-[8px]\"\n                        [class.text-[#ffffff]]=\"!disable()\"\n                        [class.text-[#6a7383]]=\"disable()\"></i>\n                      <div\n                        class=\"libs-ui-font-h5r libs-ui-gallery-text-restore\"\n                        [class.text-[#ffffff]]=\"!disable()\"\n                        [class.text-[#6a7383]]=\"disable()\">\n                        {{ 'i18n_restore' | translate }}\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              }\n              @if (!singleImage()) {\n                <div class=\"flex justify-center libs-ui-font-h5r text-[#ffffff] mt-[12px]\">\n                  @if (fullScreen()) {\n                    <div class=\"mr-[16px] flex items-center\">\n                      <div\n                        class=\"rotate-180\"\n                        [class.cursor-pointer]=\"indexSelected() !== 0\"\n                        [class.pointer-events-none]=\"indexSelected() === 0\"\n                        (click)=\"handlerPreviousImage($event)\">\n                        <i\n                          class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                          [class.libs-ui-disable]=\"indexSelected() === 0\"></i>\n                      </div>\n                    </div>\n                  }\n                  <div class=\"flex items-center\">{{ indexSelected() + 1 }}/{{ images().length }}</div>\n\n                  @if (fullScreen()) {\n                    <div class=\"ml-[16px] flex items-center\">\n                      <div\n                        [class.cursor-pointer]=\"indexSelected() !== images().length - 1\"\n                        [class.pointer-events-none]=\"indexSelected() === images().length - 1\"\n                        (click)=\"handlerNextImage($event)\">\n                        <i\n                          class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                          [class.libs-ui-disable]=\"indexSelected() === images().length - 1\"></i>\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n\n          @if (!singleImage()) {\n            <div\n              class=\"libs-ui-gallery-img-popup-container-list px-[32px] mt-[24px] flex\"\n              [class.!hidden]=\"fullScreen()\">\n              <div class=\"mr-[24px] flex items-center\">\n                <div\n                  class=\"rotate-180\"\n                  [class.cursor-pointer]=\"indexSelected() !== 0\"\n                  [class.pointer-events-none]=\"indexSelected() === 0\"\n                  (click)=\"handlerPreviousImage($event)\">\n                  <i\n                    class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                    [class.libs-ui-disable]=\"indexSelected() === 0\"></i>\n                </div>\n              </div>\n\n              <div class=\"flex max-w-[80%] relative overflow-hidden\">\n                <div class=\"flex h-full overflow-hidden\">\n                  @for (image of images(); track index; let index = $index; let last = $last) {\n                    <div\n                      #imagesRef\n                      class=\"libs-ui-gallery-img-popup-container-list-item\"\n                      [class.mr-[12px]]=\"!last\"\n                      [style.width.px]=\"imagesRef.offsetHeight\"\n                      [attr.active]=\"image[fieldDisplaySrcImage()] === imageSelected()?.[fieldDisplaySrcImage()]\">\n                      <div\n                        class=\"flex w-full h-full justify-center items-center\"\n                        (click)=\"handlerSelectImage($event, image, index)\">\n                        <div class=\"flex items-center justify-center w-full h-full\">\n                          <img\n                            [src]=\"image[fieldDisplaySrcImage()]\"\n                            class=\"flex max-h-full max-w-full m-[auto]\"\n                            (error)=\"handlerImageError($event, image)\" />\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n              <div class=\"ml-[24px] flex items-center\">\n                <div\n                  [class.cursor-pointer]=\"indexSelected() !== images().length - 1\"\n                  [class.pointer-events-none]=\"indexSelected() === images().length - 1\"\n                  (click)=\"handlerNextImage($event)\">\n                  <i\n                    class=\"text-[24px] cursor-pointer text-[#ffffff] libs-ui-icon-chevron-right\"\n                    [class.libs-ui-disable]=\"indexSelected() === images().length - 1\"></i>\n                </div>\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".libs-ui-gallery-img-popup{display:flex;width:100%;height:100%;position:fixed;top:0;left:0;z-index:1000;justify-content:center}.libs-ui-gallery-img-popup-backdrop{background-color:#030b1850;backdrop-filter:blur(3px)}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container{position:relative;width:80%;height:90%;display:flex;flex-direction:column;margin:auto}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview{display:flex;position:relative}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-ratio{background:#071631;opacity:.65}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-button{height:32px;background:#071631;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;color:#fff}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-button:hover{background:#5d636b}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-preview .libs-ui-gallery-img-popup-container-preview-button:hover .libs-ui-gallery-text-restore{color:#fff}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-list{display:flex;flex-shrink:0;justify-content:center;height:15%}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-list .libs-ui-gallery-img-popup-container-list-item{cursor:pointer;height:100%;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #e6e7ea;border-radius:8px;padding:2px;max-width:118px!important;max-height:118px!important}.libs-ui-gallery-img-popup .libs-ui-gallery-img-popup-container .libs-ui-gallery-img-popup-container-list .libs-ui-gallery-img-popup-container-list-item[active=true]{border:1px solid var(--libs-ui-color-default, #226ff5)}\n"] }]
+        }], ctorParameters: () => [] });
+
+var viewer_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    LibsUiComponentsGalleryViewerComponent: LibsUiComponentsGalleryViewerComponent
+});
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsGalleryComponent, LibsUiComponentsGalleryViewerComponent };
+//# sourceMappingURL=libs-ui-components-gallery.mjs.map