@libs-ui/components-gallery 0.2.35 → 0.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/esm2022/viewer/viewer.component.mjs +3 -3
  2. package/fesm2022/libs-ui-components-gallery-viewer.component-CCmyqYU8.mjs +313 -0
  3. package/fesm2022/libs-ui-components-gallery-viewer.component-CCmyqYU8.mjs.map +1 -0
  4. package/fesm2022/libs-ui-components-gallery.mjs +1 -1
  5. package/package.json +1 -1
  6. package/fesm2022/libs-ui-components-gallery-viewer.component-Dpt0hJu8.mjs +0 -313
  7. package/fesm2022/libs-ui-components-gallery-viewer.component-Dpt0hJu8.mjs.map +0 -1
package/fesm2022/libs-ui-components-gallery-viewer.component-Dpt0hJu8.mjs DELETED
@@ -1,313 +0,0 @@
1
- import * as i0 from '@angular/core';
2
- import { signal, input, model, output, viewChild, viewChildren, effect, Component, ChangeDetectionStrategy } from '@angular/core';
3
- import { Subject, fromEvent, takeUntil } from 'rxjs';
4
- import { viewDataNumberByLanguage } from '@libs-ui/utils';
5
- import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
6
- import * as i1 from '@ngx-translate/core';
7
- import { TranslateModule } from '@ngx-translate/core';
8
-
9
- /* eslint-disable @typescript-eslint/no-explicit-any */
10
- class LibsUiComponentsGalleryViewerComponent {
11
- /* PROPERTY */
12
- indexSelected = signal(0);
13
- scaleValue = signal(1);
14
- ratio = signal('100%');
15
- fullScreen = signal(false);
16
- isShowButton = signal(false);
17
- disable = signal(true);
18
- hoverContentViewImage = signal(false);
19
- // private imagesElementRef = signal<Array<ElementRef>>([]);
20
- step = signal(0.1);
21
- draggableEl = signal(null);
22
- widthDefault = signal(0);
23
- heightDefault = signal(0);
24
- viewPort = signal(undefined);
25
- canDrag = signal(false);
26
- widthImage = signal(0);
27
- isFirstRender = signal(false);
28
- timeouts = signal([]);
29
- onDestroy = new Subject();
30
- /* INPUT */
31
- images = input.required();
32
- fieldDisplaySrcImage = input.required();
33
- imageSelected = model();
34
- removeBackdrop = input();
35
- zIndex = input(1200);
36
- singleImage = input(false);
37
- /* OUTPUT */
38
- outClose = output();
39
- /* VIEW CHILD */
40
- containerRef = viewChild('containerRef');
41
- singleImageRef = viewChild('singleImageRef');
42
- elementRatioRef = viewChild('elementRatioRef');
43
- fullContainerRef = viewChild('fullContainerRef');
44
- imagesRef = viewChildren('imagesRef');
45
- constructor() {
46
- effect(() => {
47
- if (this.singleImage()) {
48
- return;
49
- }
50
- const indexSelected = this.images().findIndex(item => item[this.fieldDisplaySrcImage()] === this.imageSelected()?.[this.fieldDisplaySrcImage()]);
51
- this.indexSelected.set(indexSelected);
52
- this.createTimeout((id) => {
53
- clearTimeout(id);
54
- this.imagesRef()[this.indexSelected()].nativeElement.scrollIntoView();
55
- }, 100);
56
- }, { allowSignalWrites: true });
57
- }
58
- ngAfterViewInit() {
59
- fromEvent(document, 'keyup').pipe(takeUntil(this.onDestroy)).subscribe((event) => {
60
- event.stopPropagation();
61
- if (event.key === 'ArrowLeft') {
62
- this.handlerPreviousImage(event);
63
- return;
64
- }
65
- if (event.key === 'ArrowRight') {
66
- this.handlerNextImage(event);
67
- return;
68
- }
69
- });
70
- this.isFirstRender.set(true);
71
- fromEvent(window, 'resize').pipe(takeUntil(this.onDestroy)).subscribe(this.setWidthImages.bind(this));
72
- this.createTimeout((id) => {
73
- clearTimeout(id);
74
- this.setWidthImages();
75
- }, 300);
76
- }
77
- /* FUNCTIONS */
78
- setWidthImages() {
79
- if (!this.fullScreen()) {
80
- this.imagesRef().forEach(image => {
81
- image.nativeElement.style.width = image.nativeElement.getBoundingClientRect().height + 'px';
82
- });
83
- }
84
- const singleImageRef = this.singleImageRef();
85
- if (singleImageRef) {
86
- singleImageRef.nativeElement.style.width = '';
87
- singleImageRef.nativeElement.style.height = '';
88
- }
89
- this.viewPort.set(this.containerRef()?.nativeElement.getBoundingClientRect());
90
- const img = new Image();
91
- img.src = this.imageSelected()?.[this.fieldDisplaySrcImage()];
92
- img.onload = () => {
93
- this.widthDefault.set(img.naturalWidth);
94
- this.heightDefault.set(img.naturalHeight);
95
- this.widthImage.set(this.singleImageRef()?.nativeElement.width);
96
- this.setStyleSelectImage();
97
- };
98
- }
99
- handlerImageError(e, image) {
100
- const event = e;
101
- event.stopPropagation();
102
- image['isError'] = true;
103
- }
104
- handlerShowButton(isShow) {
105
- this.isShowButton.set(isShow);
106
- }
107
- handlerMouseEvent(event, status) {
108
- event.stopPropagation();
109
- this.hoverContentViewImage.set(status);
110
- }
111
- handlerClosePopup(e) {
112
- e.stopPropagation();
113
- this.outClose.emit();
114
- }
115
- handlerZoom(event, type) {
116
- event.stopPropagation();
117
- this.isFirstRender.set(false);
118
- this.disable.set(false);
119
- const element = this.singleImageRef()?.nativeElement;
120
- if (!element) {
121
- return;
122
- }
123
- const draggableEl = this.makeElementDraggable({
124
- element: element,
125
- isOverflowHiddenDesired: true,
126
- });
127
- this.draggableEl.set(draggableEl);
128
- if (this.scaleValue() * this.widthDefault() / this.widthImage() * 100 < 1) {
129
- this.scaleValue.set(1 / 100 * this.widthImage() / this.widthDefault());
130
- }
131
- if (this.scaleValue() * this.widthDefault() / this.widthImage() * 100 > 5000 * 0.9) {
132
- this.scaleValue.set(5000 * 0.9 / 100 * this.widthImage() / this.widthDefault());
133
- }
134
- if (type === 'in') {
135
- const scaleValue = this.scaleValue() * (1 + this.step());
136
- this.scaleValue.set(scaleValue);
137
- }
138
- if (type === 'out') {
139
- const scaleValue = this.scaleValue() / (1 + this.step());
140
- this.scaleValue.set(scaleValue);
141
- }
142
- this.setWidthHeight(element);
143
- element.style.position = `absolute`;
144
- if (!this.canDrag && this.draggableEl() && this.draggableEl()?.stopDraggableBehavior) {
145
- this.draggableEl()?.stopDraggableBehavior?.();
146
- }
147
- }
148
- handlerNextImage(e) {
149
- const indexSelected = this.indexSelected() + 1;
150
- this.handlerSelectImage(e, this.images()[indexSelected], indexSelected);
151
- }
152
- handlerPreviousImage(e) {
153
- const indexSelected = this.indexSelected() - 1;
154
- this.handlerSelectImage(e, this.images()[indexSelected], indexSelected);
155
- }
156
- handlerSelectImage(e, imageSelected, indexSelected) {
157
- e.stopPropagation();
158
- if (!imageSelected) {
159
- return;
160
- }
161
- this.isFirstRender.set(true);
162
- const elementRatio = this.elementRatioRef()?.nativeElement;
163
- if (elementRatio) {
164
- elementRatio.style.display = 'none';
165
- }
166
- this.imageSelected.set(imageSelected);
167
- this.indexSelected.set(indexSelected);
168
- this.scaleValue.set(1);
169
- this.imagesRef()[indexSelected].nativeElement.scrollIntoView();
170
- this.setWidthImages();
171
- }
172
- handlerFullScreen() {
173
- this.createTimeout((id) => {
174
- clearTimeout(id);
175
- this.disable.set(true);
176
- const element = this.singleImageRef()?.nativeElement;
177
- const fullElement = this.fullContainerRef()?.nativeElement;
178
- this.fullScreen.set(!this.fullScreen());
179
- if (!fullElement) {
180
- return;
181
- }
182
- if (this.fullScreen()) {
183
- fullElement.style.width = '95%';
184
- fullElement.style.height = '95%';
185
- }
186
- if (!this.fullScreen()) {
187
- fullElement.style.width = '80%';
188
- fullElement.style.height = '90%';
189
- }
190
- this.viewPort.set(this.containerRef()?.nativeElement.getBoundingClientRect());
191
- if (!element) {
192
- return;
193
- }
194
- this.setStyleSelectImage(true);
195
- element.style.left = `unset`;
196
- element.style.top = `unset`;
197
- }, 0);
198
- }
199
- handlerReset() {
200
- this.disable.set(true);
201
- this.setStyleSelectImage(true);
202
- }
203
- makeElementDraggable = ({ element, DRAGGABLE_CSS_CLASS = 'draggable-element', }) => {
204
- if (!element) {
205
- return null;
206
- }
207
- const isTheRequiredCSSAlreadyInPlace = !!Array.from(element.ownerDocument.getElementsByTagName('style')).filter((styleEl) => styleEl?.textContent?.includes(`.${DRAGGABLE_CSS_CLASS}`))?.[0];
208
- if (!isTheRequiredCSSAlreadyInPlace) {
209
- element.ownerDocument.body.appendChild(Object.assign(element.ownerDocument.createElement('style'), {
210
- textContent: `
211
- .${DRAGGABLE_CSS_CLASS} {
212
- position: absolute;
213
- cursor: grabbing !important;
214
- }
215
- `,
216
- }));
217
- }
218
- if (!element.classList.contains(DRAGGABLE_CSS_CLASS)) {
219
- element.classList.add(DRAGGABLE_CSS_CLASS);
220
- }
221
- element.onmousedown = (mouseDownEvent) => {
222
- mouseDownEvent.preventDefault();
223
- element.onmousemove = (mouseMoveEvent) => {
224
- mouseMoveEvent.preventDefault();
225
- const rectElement = element.getBoundingClientRect();
226
- if (rectElement.left + rectElement.width + mouseMoveEvent.movementX > (this.viewPort()?.width || 0) + (this.viewPort()?.left || 0) && rectElement.left + mouseMoveEvent.movementX < (this.viewPort()?.left || 0)) {
227
- element.style.left = `${element.offsetLeft + mouseMoveEvent.movementX}px`;
228
- }
229
- if (rectElement.top + rectElement.height + mouseMoveEvent.movementY > (this.viewPort()?.height || 0) + (this.viewPort()?.top || 0) && rectElement.top + mouseMoveEvent.movementY < (this.viewPort()?.top || 0)) {
230
- element.style.top = `${element.offsetTop + mouseMoveEvent.movementY}px`;
231
- }
232
- };
233
- };
234
- element.ownerDocument.onmouseup = (mouseUpEvent) => {
235
- mouseUpEvent.preventDefault();
236
- element.onmousemove = null;
237
- };
238
- return Object.assign(element, {
239
- stopDraggableBehavior() {
240
- element.classList.remove(DRAGGABLE_CSS_CLASS);
241
- element.onmousedown = null;
242
- element.onmousemove = null;
243
- element.onmouseup = null;
244
- element.style.left = 'unset';
245
- element.style.top = 'unset';
246
- return element;
247
- },
248
- });
249
- };
250
- setStyleSelectImage(reset) {
251
- const element = this.singleImageRef()?.nativeElement;
252
- if (!element) {
253
- return;
254
- }
255
- 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();
256
- this.scaleValue.set(scaleValue);
257
- if (this.scaleValue() > 1 && (reset || this.isFirstRender()) && !this.fullScreen()) {
258
- this.scaleValue.set(1);
259
- }
260
- this.setWidthHeight(element);
261
- if (this.fullScreen()) {
262
- element.style.position = `unset`;
263
- return;
264
- }
265
- }
266
- setWidthHeight(element) {
267
- element.style.width = `${this.scaleValue() * this.widthDefault()}px`;
268
- element.style.height = `${this.scaleValue() * this.heightDefault()}px`;
269
- this.canDrag.set(false);
270
- const rectElement = element.getBoundingClientRect();
271
- if ((rectElement.width > (this.viewPort()?.width || 0)) || (rectElement.height > (this.viewPort()?.height || 0))) {
272
- this.canDrag.set(true);
273
- }
274
- if (rectElement.left + rectElement.width < (this.viewPort()?.width || 0) + (this.viewPort()?.left || 0) || rectElement.left > (this.viewPort()?.left || 0)) {
275
- element.style.left = `unset`;
276
- }
277
- if (rectElement.top + rectElement.height < (this.viewPort()?.top || 0) + (this.viewPort()?.height || 0) || rectElement.top > (this.viewPort()?.top || 0)) {
278
- element.style.top = `unset`;
279
- }
280
- this.setDisplayRatio();
281
- }
282
- setDisplayRatio() {
283
- const element = this.singleImageRef()?.nativeElement;
284
- this.ratio.set(`${viewDataNumberByLanguage(element.width / this.widthDefault() * 100, false, 0)}%`);
285
- const elementRatio = this.elementRatioRef()?.nativeElement;
286
- elementRatio.style.display = 'flex';
287
- this.createTimeout((id) => {
288
- clearTimeout(id);
289
- elementRatio.style.display = 'none';
290
- }, 1000);
291
- }
292
- createTimeout(callback, delay) {
293
- const timeoutId = setTimeout(() => callback(timeoutId), delay);
294
- this.timeouts.update(ids => [...ids, timeoutId]);
295
- }
296
- ngOnDestroy() {
297
- this.timeouts().forEach(item => clearTimeout(item));
298
- this.onDestroy.next();
299
- this.onDestroy.complete();
300
- }
301
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsGalleryViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
302
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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 } }, 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 class=\"libs-ui-gallery-img-popup\"\n [class.bg-[transparent]]=\"removeBackdrop()\"\n [style.zIndex]=\"zIndex()\">\n <div #fullContainerRef\n class=\"libs-ui-gallery-img-popup-container\">\n <div class=\"flex justify-end mb-[16px] z-10\">\n <i class=\"libs-ui-icon-close text-[24px] text-[#ffffff] cursor-pointer\"\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 class=\"flex flex-col w-full h-full relative\"\n (mouseenter)=\"handlerShowButton(true)\"\n (mouseleave)=\"handlerShowButton(false)\">\n <div #containerRef\n class=\"flex w-full h-full relative\">\n <div 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 #singleImageRef\n [src]=\"imageSelected[fieldDisplaySrcImage()]\"\n class=\"flex m-[auto]\"\n (error)=\"handlerImageError($event, imageSelected)\" />\n }\n <div #elementRatioRef\n class=\"libs-ui-gallery-img-popup-container-preview-ratio items-center justify-center libs-ui-font-h5m text-[#e6e7ea] w-[80px] h-[34px] rounded-[4px] absolute top-[50%] left-[50%]\">\n {{ratio()}}</div>\n </div>\n </div>\n @if(!imageSelected()?.['error']) {\n <div class=\"relative w-full\"\n (mouseenter)=\"handlerMouseEvent($event, true)\"\n [class.hidden]=\"!hoverContentViewImage()\">\n <div class=\"flex w-full justify-center libs-ui-font-h5 absolute z-10 top-[-44px]\">\n <libs_ui-components-popover [config]=\"{content: 'i18n_zoom_out', direction: 'top', zIndex:1300}\">\n <div class=\"libs-ui-gallery-img-popup-container-preview-button rounded-l-[8px]\"\n (click)=\"handlerZoom($event,'out')\">\n <div class=\"w-[16px] h-[16px] p-[1px] \">\n <div class=\"border-[#ffffff] border-[1px] rounded-[50%] text-[#ffffff] flex items-center justify-center text-[14px] w-full h-full\">-</div>\n </div>\n </div>\n </libs_ui-components-popover>\n <libs_ui-components-popover [config]=\"{content: 'i18n_zoom_in', direction: 'top', zIndex:1300}\">\n <div class=\"libs-ui-gallery-img-popup-container-preview-button\"\n (click)=\"handlerZoom($event,'in')\">\n <div class=\"w-[16px] h-[16px] p-[1px] \">\n <div class=\"border-[#ffffff] border-[1px] rounded-[50%] text-[#ffffff] flex items-center justify-center text-[12px] w-full h-full\">+</div>\n </div>\n </div>\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:1300}\">\n <div 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 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 class=\"libs-ui-icon-refresh text-16px mr-[8px]\"\n [class.text-[#ffffff]]=\"!disable()\"\n [class.text-[#6a7383]]=\"disable()\"></i>\n <div class=\"libs-ui-font-h5\"\n [class.text-[#ffffff]]=\"!disable()\"\n [class.text-[#6a7383]]=\"disable()\">{{'i18n_restore' | translate}}</div>\n </div>\n </div>\n </div>\n }\n @if(!singleImage()) {\n <div class=\"flex justify-center libs-ui-font-h5 text-[#ffffff] mt-[12px]\">\n @if(fullScreen()) {\n <div class=\"mr-[16px] flex items-center\">\n <div class=\"rotate-180\"\n [class.cursor-pointer]=\"indexSelected() !== 0\"\n [class.pointer-events-none]=\"indexSelected() === 0\"\n (click)=\"handlerPreviousImage($event)\">\n <i 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 aitems-center\">\n {{indexSelected()+1}}/{{images().length}}\n </div>\n\n @if(fullScreen()) {\n <div class=\"ml-[16px] flex items-center\">\n <div [class.cursor-pointer]=\"indexSelected() !== images().length - 1\"\n [class.pointer-events-none]=\"indexSelected() === images().length - 1\"\n (click)=\"handlerNextImage($event)\">\n <i 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 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 class=\"rotate-180\"\n [class.cursor-pointer]=\"indexSelected() !== 0\"\n [class.pointer-events-none]=\"indexSelected() === 0\"\n (click)=\"handlerPreviousImage($event)\">\n <i 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\">\n <div class=\"flex h-full overflow-[hidden]\">\n @for ( image of images(); track index; let index = $index; let last = $last) {\n <div #imagesRef\n class=\"libs-ui-gallery-img-popup-container-list-item\"\n [class.mr-[12px]]=\"!last\"\n [attr.active]=\"image[fieldDisplaySrcImage()] === imageSelected()?.[fieldDisplaySrcImage()]\">\n <div 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 [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 [class.cursor-pointer]=\"indexSelected() !==images().length - 1\"\n [class.pointer-events-none]=\"indexSelected() ===images().length - 1\"\n (click)=\"handlerNextImage($event)\">\n <i 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}", styles: [".libs-ui-gallery-img-popup{display:flex;width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000000b3;z-index:1000;justify-content:center}.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-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: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
303
- }
304
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsGalleryViewerComponent, decorators: [{
305
- type: Component,
306
- args: [{ selector: 'libs_ui-components-gallery-viewer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
307
- TranslateModule,
308
- LibsUiComponentsPopoverComponent,
309
- ], template: "@if(images() || singleImage()) {\n<div class=\"libs-ui-gallery-img-popup\"\n [class.bg-[transparent]]=\"removeBackdrop()\"\n [style.zIndex]=\"zIndex()\">\n <div #fullContainerRef\n class=\"libs-ui-gallery-img-popup-container\">\n <div class=\"flex justify-end mb-[16px] z-10\">\n <i class=\"libs-ui-icon-close text-[24px] text-[#ffffff] cursor-pointer\"\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 class=\"flex flex-col w-full h-full relative\"\n (mouseenter)=\"handlerShowButton(true)\"\n (mouseleave)=\"handlerShowButton(false)\">\n <div #containerRef\n class=\"flex w-full h-full relative\">\n <div 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 #singleImageRef\n [src]=\"imageSelected[fieldDisplaySrcImage()]\"\n class=\"flex m-[auto]\"\n (error)=\"handlerImageError($event, imageSelected)\" />\n }\n <div #elementRatioRef\n class=\"libs-ui-gallery-img-popup-container-preview-ratio items-center justify-center libs-ui-font-h5m text-[#e6e7ea] w-[80px] h-[34px] rounded-[4px] absolute top-[50%] left-[50%]\">\n {{ratio()}}</div>\n </div>\n </div>\n @if(!imageSelected()?.['error']) {\n <div class=\"relative w-full\"\n (mouseenter)=\"handlerMouseEvent($event, true)\"\n [class.hidden]=\"!hoverContentViewImage()\">\n <div class=\"flex w-full justify-center libs-ui-font-h5 absolute z-10 top-[-44px]\">\n <libs_ui-components-popover [config]=\"{content: 'i18n_zoom_out', direction: 'top', zIndex:1300}\">\n <div class=\"libs-ui-gallery-img-popup-container-preview-button rounded-l-[8px]\"\n (click)=\"handlerZoom($event,'out')\">\n <div class=\"w-[16px] h-[16px] p-[1px] \">\n <div class=\"border-[#ffffff] border-[1px] rounded-[50%] text-[#ffffff] flex items-center justify-center text-[14px] w-full h-full\">-</div>\n </div>\n </div>\n </libs_ui-components-popover>\n <libs_ui-components-popover [config]=\"{content: 'i18n_zoom_in', direction: 'top', zIndex:1300}\">\n <div class=\"libs-ui-gallery-img-popup-container-preview-button\"\n (click)=\"handlerZoom($event,'in')\">\n <div class=\"w-[16px] h-[16px] p-[1px] \">\n <div class=\"border-[#ffffff] border-[1px] rounded-[50%] text-[#ffffff] flex items-center justify-center text-[12px] w-full h-full\">+</div>\n </div>\n </div>\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:1300}\">\n <div 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 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 class=\"libs-ui-icon-refresh text-16px mr-[8px]\"\n [class.text-[#ffffff]]=\"!disable()\"\n [class.text-[#6a7383]]=\"disable()\"></i>\n <div class=\"libs-ui-font-h5\"\n [class.text-[#ffffff]]=\"!disable()\"\n [class.text-[#6a7383]]=\"disable()\">{{'i18n_restore' | translate}}</div>\n </div>\n </div>\n </div>\n }\n @if(!singleImage()) {\n <div class=\"flex justify-center libs-ui-font-h5 text-[#ffffff] mt-[12px]\">\n @if(fullScreen()) {\n <div class=\"mr-[16px] flex items-center\">\n <div class=\"rotate-180\"\n [class.cursor-pointer]=\"indexSelected() !== 0\"\n [class.pointer-events-none]=\"indexSelected() === 0\"\n (click)=\"handlerPreviousImage($event)\">\n <i 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 aitems-center\">\n {{indexSelected()+1}}/{{images().length}}\n </div>\n\n @if(fullScreen()) {\n <div class=\"ml-[16px] flex items-center\">\n <div [class.cursor-pointer]=\"indexSelected() !== images().length - 1\"\n [class.pointer-events-none]=\"indexSelected() === images().length - 1\"\n (click)=\"handlerNextImage($event)\">\n <i 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 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 class=\"rotate-180\"\n [class.cursor-pointer]=\"indexSelected() !== 0\"\n [class.pointer-events-none]=\"indexSelected() === 0\"\n (click)=\"handlerPreviousImage($event)\">\n <i 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\">\n <div class=\"flex h-full overflow-[hidden]\">\n @for ( image of images(); track index; let index = $index; let last = $last) {\n <div #imagesRef\n class=\"libs-ui-gallery-img-popup-container-list-item\"\n [class.mr-[12px]]=\"!last\"\n [attr.active]=\"image[fieldDisplaySrcImage()] === imageSelected()?.[fieldDisplaySrcImage()]\">\n <div 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 [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 [class.cursor-pointer]=\"indexSelected() !==images().length - 1\"\n [class.pointer-events-none]=\"indexSelected() ===images().length - 1\"\n (click)=\"handlerNextImage($event)\">\n <i 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}", styles: [".libs-ui-gallery-img-popup{display:flex;width:100%;height:100%;position:absolute;top:0;left:0;background-color:#000000b3;z-index:1000;justify-content:center}.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-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"] }]
310
- }], ctorParameters: () => [] });
311
-
312
- export { LibsUiComponentsGalleryViewerComponent };
313
- //# sourceMappingURL=libs-ui-components-gallery-viewer.component-Dpt0hJu8.mjs.map
package/fesm2022/libs-ui-components-gallery-viewer.component-Dpt0hJu8.mjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"libs-ui-components-gallery-viewer.component-Dpt0hJu8.mjs","sources":["../../../../../libs-ui/components/gallery/src/viewer/viewer.component.ts","../../../../../libs-ui/components/gallery/src/viewer/viewer.component.html"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { AfterViewInit, ChangeDetectionStrategy, Component, effect, ElementRef, input, model, OnDestroy, output, signal, viewChild, viewChildren } from \"@angular/core\";\nimport { IBoundingClientRect, IEvent } from \"@libs-ui/interfaces-types\";\nimport { IZoomDragHTMLElement } from \"../interfaces/zoom.interface\";\nimport { fromEvent, Subject, takeUntil } from \"rxjs\";\nimport { viewDataNumberByLanguage } from \"@libs-ui/utils\";\nimport { LibsUiComponentsPopoverComponent } from \"@libs-ui/components-popover\";\nimport { TranslateModule } from \"@ngx-translate/core\";\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-gallery-viewer',\n templateUrl: './viewer.component.html',\n styleUrls: ['./viewer.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n TranslateModule,\n LibsUiComponentsPopoverComponent,\n ]\n})\nexport class LibsUiComponentsGalleryViewerComponent implements AfterViewInit, OnDestroy {\n /* PROPERTY */\n protected indexSelected = signal<number>(0);\n protected scaleValue = signal<number>(1);\n protected ratio = signal<string>('100%');\n protected fullScreen = signal<boolean>(false);\n protected isShowButton = signal<boolean>(false);\n protected disable = signal<boolean>(true);\n protected hoverContentViewImage = signal<boolean>(false);\n\n // private imagesElementRef = signal<Array<ElementRef>>([]);\n private step = signal<number>(0.1);\n private draggableEl = signal<IZoomDragHTMLElement | null>(null);\n private widthDefault = signal<number>(0);\n private heightDefault = signal<number>(0);\n private viewPort = signal<IBoundingClientRect | undefined>(undefined);\n private canDrag = signal<boolean>(false);\n private widthImage = signal<number>(0);\n private isFirstRender = signal<boolean>(false);\n private timeouts = signal<Array<number>>([]);\n\n private onDestroy = new Subject<void>();\n\n /* INPUT */\n readonly images = input.required<Array<Record<string, any>>>();\n readonly fieldDisplaySrcImage = input.required<string>();\n readonly imageSelected = model<Record<string, any>>();\n readonly removeBackdrop = input<boolean>();\n readonly zIndex = input<number>(1200);\n readonly singleImage = input<boolean>(false);\n\n /* OUTPUT */\n readonly outClose = output<void>();\n\n /* VIEW CHILD */\n protected containerRef = viewChild<ElementRef>('containerRef');\n protected singleImageRef = viewChild<ElementRef>('singleImageRef');\n protected elementRatioRef = viewChild<ElementRef>('elementRatioRef');\n protected fullContainerRef = viewChild<ElementRef>('fullContainerRef');\n protected imagesRef = viewChildren<ElementRef>('imagesRef');\n\n constructor() {\n effect(() => {\n if (this.singleImage()) {\n return;\n }\n const indexSelected = this.images().findIndex(item => item[this.fieldDisplaySrcImage()] === this.imageSelected()?.[this.fieldDisplaySrcImage()]);\n\n this.indexSelected.set(indexSelected);\n\n this.createTimeout((id) => {\n clearTimeout(id);\n this.imagesRef()[this.indexSelected()].nativeElement.scrollIntoView();\n }, 100);\n }, { allowSignalWrites: true });\n }\n\n ngAfterViewInit() {\n fromEvent<KeyboardEvent>(document, 'keyup').pipe(takeUntil(this.onDestroy)).subscribe((event) => {\n event.stopPropagation();\n if (event.key === 'ArrowLeft') {\n this.handlerPreviousImage(event);\n\n return;\n }\n if (event.key === 'ArrowRight') {\n this.handlerNextImage(event);\n\n return;\n }\n });\n this.isFirstRender.set(true);\n fromEvent(window, 'resize').pipe(takeUntil(this.onDestroy)).subscribe(this.setWidthImages.bind(this));\n\n this.createTimeout((id) => {\n clearTimeout(id);\n this.setWidthImages();\n }, 300);\n }\n\n /* FUNCTIONS */\n private setWidthImages() {\n if (!this.fullScreen()) {\n this.imagesRef().forEach(image => {\n image.nativeElement.style.width = image.nativeElement.getBoundingClientRect().height + 'px';\n });\n }\n const singleImageRef = this.singleImageRef();\n if (singleImageRef) {\n singleImageRef.nativeElement.style.width = '';\n singleImageRef.nativeElement.style.height = '';\n }\n this.viewPort.set(this.containerRef()?.nativeElement.getBoundingClientRect());\n const img = new Image();\n\n img.src = this.imageSelected()?.[this.fieldDisplaySrcImage()] as string;\n img.onload = () => {\n this.widthDefault.set(img.naturalWidth);\n this.heightDefault.set(img.naturalHeight);\n this.widthImage.set(this.singleImageRef()?.nativeElement.width);\n\n this.setStyleSelectImage();\n };\n }\n\n protected handlerImageError(e: ErrorEvent, image: Record<string, any>) {\n const event = e as IEvent;\n\n event.stopPropagation();\n\n image['isError'] = true;\n }\n\n protected handlerShowButton(isShow: boolean) {\n this.isShowButton.set(isShow);\n }\n\n protected handlerMouseEvent(event: Event, status: boolean) {\n event.stopPropagation();\n this.hoverContentViewImage.set(status);\n }\n\n protected handlerClosePopup(e: Event) {\n e.stopPropagation();\n this.outClose.emit();\n }\n\n protected handlerZoom(event: MouseEvent, type: 'in' | 'out') {\n event.stopPropagation();\n this.isFirstRender.set(false);\n this.disable.set(false);\n const element = this.singleImageRef()?.nativeElement;\n\n if (!element) {\n return;\n }\n const draggableEl = this.makeElementDraggable({\n element: element,\n isOverflowHiddenDesired: true,\n });\n\n this.draggableEl.set(draggableEl);\n\n if (this.scaleValue() * this.widthDefault() / this.widthImage() * 100 < 1) {\n this.scaleValue.set(1 / 100 * this.widthImage() / this.widthDefault());\n }\n if (this.scaleValue() * this.widthDefault() / this.widthImage() * 100 > 5000 * 0.9) {\n this.scaleValue.set(5000 * 0.9 / 100 * this.widthImage() / this.widthDefault());\n }\n if (type === 'in') {\n const scaleValue = this.scaleValue() * (1 + this.step());\n this.scaleValue.set(scaleValue);\n }\n if (type === 'out') {\n const scaleValue = this.scaleValue() / (1 + this.step());\n this.scaleValue.set(scaleValue);\n }\n this.setWidthHeight(element);\n element.style.position = `absolute`;\n if (!this.canDrag && this.draggableEl() && this.draggableEl()?.stopDraggableBehavior) {\n\n this.draggableEl()?.stopDraggableBehavior?.();\n }\n }\n\n protected handlerNextImage(e: Event) {\n const indexSelected = this.indexSelected() + 1;\n\n this.handlerSelectImage(e, this.images()[indexSelected], indexSelected);\n }\n\n protected handlerPreviousImage(e: Event) {\n const indexSelected = this.indexSelected() - 1;\n\n this.handlerSelectImage(e, this.images()[indexSelected], indexSelected);\n }\n\n protected handlerSelectImage(e: Event, imageSelected: Record<string, any>, indexSelected: number) {\n e.stopPropagation();\n if (!imageSelected) {\n return;\n }\n this.isFirstRender.set(true);\n const elementRatio = this.elementRatioRef()?.nativeElement;\n\n if (elementRatio) {\n elementRatio.style.display = 'none';\n }\n this.imageSelected.set(imageSelected);\n this.indexSelected.set(indexSelected);\n this.scaleValue.set(1);\n this.imagesRef()[indexSelected].nativeElement.scrollIntoView();\n this.setWidthImages();\n }\n\n protected handlerFullScreen() {\n this.createTimeout((id) => {\n clearTimeout(id);\n this.disable.set(true);\n const element = this.singleImageRef()?.nativeElement;\n const fullElement = this.fullContainerRef()?.nativeElement;\n\n this.fullScreen.set(!this.fullScreen());\n\n if (!fullElement) {\n return;\n }\n if (this.fullScreen()) {\n fullElement.style.width = '95%';\n fullElement.style.height = '95%';\n }\n if (!this.fullScreen()) {\n fullElement.style.width = '80%';\n fullElement.style.height = '90%';\n }\n this.viewPort.set(this.containerRef()?.nativeElement.getBoundingClientRect());\n if (!element) {\n return;\n }\n this.setStyleSelectImage(true);\n element.style.left = `unset`;\n element.style.top = `unset`;\n }, 0);\n }\n\n protected handlerReset() {\n this.disable.set(true);\n this.setStyleSelectImage(true);\n }\n\n private makeElementDraggable = ({\n element,\n DRAGGABLE_CSS_CLASS = 'draggable-element',\n }: {\n element: HTMLElement | null;\n isOverflowHiddenDesired?: boolean;\n DRAGGABLE_CSS_CLASS?: string;\n }): IZoomDragHTMLElement | null => {\n if (!element) {\n return null;\n }\n const isTheRequiredCSSAlreadyInPlace = !!Array.from(\n element.ownerDocument.getElementsByTagName('style')\n ).filter((styleEl) =>\n styleEl?.textContent?.includes(`.${DRAGGABLE_CSS_CLASS}`)\n )?.[0];\n\n if (!isTheRequiredCSSAlreadyInPlace) {\n element.ownerDocument.body.appendChild(\n Object.assign(element.ownerDocument.createElement('style'), {\n textContent: `\n .${DRAGGABLE_CSS_CLASS} {\n position: absolute;\n cursor: grabbing !important;\n }\n `,\n })\n );\n }\n\n if (!element.classList.contains(DRAGGABLE_CSS_CLASS)) {\n element.classList.add(DRAGGABLE_CSS_CLASS);\n }\n element.onmousedown = (mouseDownEvent) => {\n mouseDownEvent.preventDefault();\n element.onmousemove = (mouseMoveEvent) => {\n mouseMoveEvent.preventDefault();\n const rectElement = element.getBoundingClientRect();\n\n if (rectElement.left + rectElement.width + mouseMoveEvent.movementX > (this.viewPort()?.width || 0) + (this.viewPort()?.left || 0) && rectElement.left + mouseMoveEvent.movementX < (this.viewPort()?.left || 0)) {\n element.style.left = `${element.offsetLeft + mouseMoveEvent.movementX}px`;\n }\n if (rectElement.top + rectElement.height + mouseMoveEvent.movementY > (this.viewPort()?.height || 0) + (this.viewPort()?.top || 0) && rectElement.top + mouseMoveEvent.movementY < (this.viewPort()?.top || 0)) {\n element.style.top = `${element.offsetTop + mouseMoveEvent.movementY}px`;\n }\n };\n };\n element.ownerDocument.onmouseup = (mouseUpEvent) => {\n mouseUpEvent.preventDefault();\n element.onmousemove = null;\n };\n\n return Object.assign(element, {\n stopDraggableBehavior() {\n element.classList.remove(DRAGGABLE_CSS_CLASS);\n element.onmousedown = null;\n element.onmousemove = null;\n element.onmouseup = null;\n element.style.left = 'unset';\n element.style.top = 'unset';\n\n return element;\n },\n });\n };\n\n private setStyleSelectImage(reset?: boolean) {\n const element = this.singleImageRef()?.nativeElement;\n\n if (!element) {\n return;\n }\n 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();\n\n this.scaleValue.set(scaleValue);\n\n if (this.scaleValue() > 1 && (reset || this.isFirstRender()) && !this.fullScreen()) {\n this.scaleValue.set(1);\n }\n this.setWidthHeight(element);\n if (this.fullScreen()) {\n element.style.position = `unset`;\n\n return;\n }\n }\n\n private setWidthHeight(element: HTMLElement) {\n element.style.width = `${this.scaleValue() * this.widthDefault()}px`;\n element.style.height = `${this.scaleValue() * this.heightDefault()}px`;\n this.canDrag.set(false);\n const rectElement = element.getBoundingClientRect();\n\n if ((rectElement.width > (this.viewPort()?.width || 0)) || (rectElement.height > (this.viewPort()?.height || 0))) {\n this.canDrag.set(true);\n }\n if (rectElement.left + rectElement.width < (this.viewPort()?.width || 0) + (this.viewPort()?.left || 0) || rectElement.left > (this.viewPort()?.left || 0)) {\n element.style.left = `unset`;\n }\n if (rectElement.top + rectElement.height < (this.viewPort()?.top || 0) + (this.viewPort()?.height || 0) || rectElement.top > (this.viewPort()?.top || 0)) {\n element.style.top = `unset`;\n }\n\n this.setDisplayRatio();\n }\n\n private setDisplayRatio() {\n const element = this.singleImageRef()?.nativeElement;\n\n this.ratio.set(`${viewDataNumberByLanguage(element.width / this.widthDefault() * 100, false, 0)}%`);\n const elementRatio = this.elementRatioRef()?.nativeElement;\n\n elementRatio.style.display = 'flex';\n this.createTimeout((id) => {\n clearTimeout(id);\n elementRatio.style.display = 'none';\n }, 1000);\n }\n\n private createTimeout(callback: (id: number) => void, delay: number) {\n const timeoutId = setTimeout(() => callback(timeoutId), delay) as unknown as number;\n this.timeouts.update(ids => [...ids, timeoutId]);\n }\n\n ngOnDestroy() {\n this.timeouts().forEach(item => clearTimeout(item));\n this.onDestroy.next();\n this.onDestroy.complete();\n }\n}","@if(images() || singleImage()) {\n<div class=\"libs-ui-gallery-img-popup\"\n [class.bg-[transparent]]=\"removeBackdrop()\"\n [style.zIndex]=\"zIndex()\">\n <div #fullContainerRef\n class=\"libs-ui-gallery-img-popup-container\">\n <div class=\"flex justify-end mb-[16px] z-10\">\n <i class=\"libs-ui-icon-close text-[24px] text-[#ffffff] cursor-pointer\"\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 class=\"flex flex-col w-full h-full relative\"\n (mouseenter)=\"handlerShowButton(true)\"\n (mouseleave)=\"handlerShowButton(false)\">\n <div #containerRef\n class=\"flex w-full h-full relative\">\n <div 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 #singleImageRef\n [src]=\"imageSelected[fieldDisplaySrcImage()]\"\n class=\"flex m-[auto]\"\n (error)=\"handlerImageError($event, imageSelected)\" />\n }\n <div #elementRatioRef\n class=\"libs-ui-gallery-img-popup-container-preview-ratio items-center justify-center libs-ui-font-h5m text-[#e6e7ea] w-[80px] h-[34px] rounded-[4px] absolute top-[50%] left-[50%]\">\n {{ratio()}}</div>\n </div>\n </div>\n @if(!imageSelected()?.['error']) {\n <div class=\"relative w-full\"\n (mouseenter)=\"handlerMouseEvent($event, true)\"\n [class.hidden]=\"!hoverContentViewImage()\">\n <div class=\"flex w-full justify-center libs-ui-font-h5 absolute z-10 top-[-44px]\">\n <libs_ui-components-popover [config]=\"{content: 'i18n_zoom_out', direction: 'top', zIndex:1300}\">\n <div class=\"libs-ui-gallery-img-popup-container-preview-button rounded-l-[8px]\"\n (click)=\"handlerZoom($event,'out')\">\n <div class=\"w-[16px] h-[16px] p-[1px] \">\n <div class=\"border-[#ffffff] border-[1px] rounded-[50%] text-[#ffffff] flex items-center justify-center text-[14px] w-full h-full\">-</div>\n </div>\n </div>\n </libs_ui-components-popover>\n <libs_ui-components-popover [config]=\"{content: 'i18n_zoom_in', direction: 'top', zIndex:1300}\">\n <div class=\"libs-ui-gallery-img-popup-container-preview-button\"\n (click)=\"handlerZoom($event,'in')\">\n <div class=\"w-[16px] h-[16px] p-[1px] \">\n <div class=\"border-[#ffffff] border-[1px] rounded-[50%] text-[#ffffff] flex items-center justify-center text-[12px] w-full h-full\">+</div>\n </div>\n </div>\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:1300}\">\n <div 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 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 class=\"libs-ui-icon-refresh text-16px mr-[8px]\"\n [class.text-[#ffffff]]=\"!disable()\"\n [class.text-[#6a7383]]=\"disable()\"></i>\n <div class=\"libs-ui-font-h5\"\n [class.text-[#ffffff]]=\"!disable()\"\n [class.text-[#6a7383]]=\"disable()\">{{'i18n_restore' | translate}}</div>\n </div>\n </div>\n </div>\n }\n @if(!singleImage()) {\n <div class=\"flex justify-center libs-ui-font-h5 text-[#ffffff] mt-[12px]\">\n @if(fullScreen()) {\n <div class=\"mr-[16px] flex items-center\">\n <div class=\"rotate-180\"\n [class.cursor-pointer]=\"indexSelected() !== 0\"\n [class.pointer-events-none]=\"indexSelected() === 0\"\n (click)=\"handlerPreviousImage($event)\">\n <i 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 aitems-center\">\n {{indexSelected()+1}}/{{images().length}}\n </div>\n\n @if(fullScreen()) {\n <div class=\"ml-[16px] flex items-center\">\n <div [class.cursor-pointer]=\"indexSelected() !== images().length - 1\"\n [class.pointer-events-none]=\"indexSelected() === images().length - 1\"\n (click)=\"handlerNextImage($event)\">\n <i 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 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 class=\"rotate-180\"\n [class.cursor-pointer]=\"indexSelected() !== 0\"\n [class.pointer-events-none]=\"indexSelected() === 0\"\n (click)=\"handlerPreviousImage($event)\">\n <i 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\">\n <div class=\"flex h-full overflow-[hidden]\">\n @for ( image of images(); track index; let index = $index; let last = $last) {\n <div #imagesRef\n class=\"libs-ui-gallery-img-popup-container-list-item\"\n [class.mr-[12px]]=\"!last\"\n [attr.active]=\"image[fieldDisplaySrcImage()] === imageSelected()?.[fieldDisplaySrcImage()]\">\n <div 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 [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 [class.cursor-pointer]=\"indexSelected() !==images().length - 1\"\n [class.pointer-events-none]=\"indexSelected() ===images().length - 1\"\n (click)=\"handlerNextImage($event)\">\n <i 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}"],"names":[],"mappings":"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"}