@shival99/z-ui 2.0.18 → 2.0.20

package/fesm2022/shival99-z-ui-components-z-gallery.mjs

@@ -13,7 +13,6 @@ import { zMergeClasses } from '@shival99/z-ui/utils';
 import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
 import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
 import { DomSanitizer } from '@angular/platform-browser';
-import { ZSafeResourceUrlPipe } from '@shival99/z-ui/pipes';
 import { cva } from 'class-variance-authority';
 import { Overlay, OverlayConfig } from '@angular/cdk/overlay';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -130,15 +129,15 @@ const getFileCategory = (file) => {
     if (type === 'application/pdf' || ext === 'pdf') {
         return 'pdf';
     }
-    if (type.includes('word') || type.includes('document') || WORD_EXTENSIONS.includes(ext)) {
-        return 'word';
-    }
     if (type.includes('excel') || type.includes('spreadsheet') || EXCEL_EXTENSIONS.includes(ext)) {
         return 'excel';
     }
     if (type.includes('powerpoint') || type.includes('presentation') || POWERPOINT_EXTENSIONS.includes(ext)) {
         return 'powerpoint';
     }
+    if (type.includes('word') || type.includes('wordprocessingml') || WORD_EXTENSIONS.includes(ext)) {
+        return 'word';
+    }
     if (type.startsWith('video/') || VIDEO_EXTENSIONS.includes(ext)) {
         return 'video';
     }
@@ -386,7 +385,7 @@ class ZGalleryItemComponent {
         </div>
 
         <div class="p-3">
-          <p class="text-foreground truncate text-sm leading-none font-semibold" z-tooltip [zContent]="file().name">
+          <p class="text-foreground truncate text-sm leading-normal font-semibold" z-tooltip [zContent]="file().name">
             {{ file().name }}
           </p>
           @if (formattedDate()) {
@@ -611,7 +610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
         </div>
 
         <div class="p-3">
-          <p class="text-foreground truncate text-sm leading-none font-semibold" z-tooltip [zContent]="file().name">
+          <p class="text-foreground truncate text-sm leading-normal font-semibold" z-tooltip [zContent]="file().name">
             {{ file().name }}
           </p>
           @if (formattedDate()) {
@@ -727,6 +726,7 @@ class ZGalleryPreviewComponent {
     file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
     files = input([], ...(ngDevMode ? [{ debugName: "files" }] : []));
     zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    zTrustedResourceOrigins = input([], ...(ngDevMode ? [{ debugName: "zTrustedResourceOrigins" }] : []));
     zOnClose = output();
     zOnDownload = output();
     zOnNavigate = output();
@@ -781,8 +781,9 @@ class ZGalleryPreviewComponent {
                 await this._loadText(url);
             }
         }
-        catch {
-            this.conversionError.set('Failed to load file content');
+        catch (error) {
+            const message = error instanceof Error ? error.message : 'Failed to load file content';
+            this.conversionError.set(message);
         }
         finally {
             this.isConverting.set(false);
@@ -791,15 +792,19 @@ class ZGalleryPreviewComponent {
     }
     async _loadDocx(url) {
         const response = await fetch(url);
+        this._assertSuccessfulResponse(response);
         const arrayBuffer = await response.arrayBuffer();
-        const mammoth = await import('mammoth');
+        const mammothModule = await import('mammoth');
+        const mammoth = mammothModule.default ?? mammothModule;
         const result = await mammoth.convertToHtml({ arrayBuffer });
         this.docHtmlContent.set(this._sanitizer.bypassSecurityTrustHtml(result.value));
     }
     async _loadExcel(url) {
         const response = await fetch(url);
+        this._assertSuccessfulResponse(response);
         const arrayBuffer = await response.arrayBuffer();
-        const XLSX = await import('xlsx');
+        const xlsxModule = await import('xlsx');
+        const XLSX = xlsxModule.default ?? xlsxModule;
         const workbook = XLSX.read(arrayBuffer);
         const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
         const html = XLSX.utils.sheet_to_html(firstSheet);
@@ -807,9 +812,15 @@ class ZGalleryPreviewComponent {
     }
     async _loadText(url) {
         const response = await fetch(url);
+        this._assertSuccessfulResponse(response);
         const text = await response.text();
         this.textContent.set(text);
     }
+    _assertSuccessfulResponse(response) {
+        if (!response.ok) {
+            throw new Error(`Failed to fetch file: ${response.status}`);
+        }
+    }
     _completeLoading() {
         const elapsed = Date.now() - this._loadingStartTime;
         const remaining = this._minLoadingTime - elapsed;
@@ -828,6 +839,16 @@ class ZGalleryPreviewComponent {
     hasNext = computed(() => this.currentIndex() < this.files().length - 1, ...(ngDevMode ? [{ debugName: "hasNext" }] : []));
     isImageFile = computed(() => isImage(this.file()), ...(ngDevMode ? [{ debugName: "isImageFile" }] : []));
     isPdf = computed(() => getFileCategory(this.file()) === 'pdf', ...(ngDevMode ? [{ debugName: "isPdf" }] : []));
+    safePdfUrl = computed(() => {
+        const { url } = this.file();
+        if (!url) {
+            return null;
+        }
+        if (!this._isAllowedResourceUrl(url)) {
+            return null;
+        }
+        return this._sanitizer.bypassSecurityTrustResourceUrl(url);
+    }, ...(ngDevMode ? [{ debugName: "safePdfUrl" }] : []));
     isVideo = computed(() => getFileCategory(this.file()) === 'video', ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
     isWordFile = computed(() => getFileCategory(this.file()) === 'word', ...(ngDevMode ? [{ debugName: "isWordFile" }] : []));
     isExcelFile = computed(() => getFileCategory(this.file()) === 'excel', ...(ngDevMode ? [{ debugName: "isExcelFile" }] : []));
@@ -842,6 +863,31 @@ class ZGalleryPreviewComponent {
         const zoom = this.zoomed() ? 'scale(1.5)' : 'scale(1)';
         return `rotate(${rot}deg) ${zoom}`;
     }, ...(ngDevMode ? [{ debugName: "imageTransform" }] : []));
+    _isAllowedResourceUrl(url) {
+        const currentOrigin = globalThis.location?.origin;
+        const baseUrl = currentOrigin ?? 'http://localhost';
+        try {
+            const parsedUrl = new URL(url, baseUrl);
+            if (parsedUrl.protocol === 'blob:') {
+                return parsedUrl.origin === baseUrl;
+            }
+            return parsedUrl.origin === baseUrl || this._trustedOrigins().has(parsedUrl.origin);
+        }
+        catch {
+            return false;
+        }
+    }
+    _trustedOrigins = computed(() => new Set(this.zTrustedResourceOrigins()
+        .map(origin => this._normalizeOrigin(origin))
+        .filter((origin) => Boolean(origin))), ...(ngDevMode ? [{ debugName: "_trustedOrigins" }] : []));
+    _normalizeOrigin(origin) {
+        try {
+            return new URL(origin).origin;
+        }
+        catch {
+            return null;
+        }
+    }
     fileIcon = computed(() => {
         const category = getFileCategory(this.file());
         const iconMap = {
@@ -930,7 +976,7 @@ class ZGalleryPreviewComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryPreviewComponent, isStandalone: true, selector: "z-gallery-preview", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnClose: "zOnClose", zOnDownload: "zOnDownload", zOnNavigate: "zOnNavigate", zOnRemove: "zOnRemove" }, host: { listeners: { "document:keydown": "onKeyDown($event)" }, classAttribute: "z-gallery-preview z-[9999]" }, ngImport: i0, template: `
     <div
       class="animate-in fade-in fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm duration-200"
       (click)="onBackdropClick($event)"
@@ -1060,17 +1106,19 @@ class ZGalleryPreviewComponent {
                 (click)="toggleZoom()"
               />
             </div>
-          } @else if (isPdf()) {
+          } @else if (isPdf() && safePdfUrl()) {
             <div class="relative h-[75vh] w-[85vw]">
               @if (isLoading()) {
                 <z-skeleton class="absolute inset-0 rounded-lg" />
               }
               <iframe
-                [src]="file().url | zSafeResourceUrl"
+                [src]="safePdfUrl()"
                 class="absolute inset-0 size-full rounded-lg bg-white shadow-2xl transition-opacity duration-300"
                 [class.opacity-0]="isLoading()"
                 [class.opacity-100]="!isLoading()"
                 frameborder="0"
+                sandbox
+                referrerpolicy="no-referrer"
                 (load)="onPdfLoad()"
               ></iframe>
             </div>
@@ -1109,7 +1157,7 @@ class ZGalleryPreviewComponent {
                 </div>
               } @else if (docHtmlContent()) {
                 <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-8 shadow-2xl"
+                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl"
                   [innerHTML]="docHtmlContent()"
                 ></div>
               }
@@ -1131,7 +1179,7 @@ class ZGalleryPreviewComponent {
                 </div>
               } @else if (docHtmlContent()) {
                 <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-4 shadow-2xl"
+                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl"
                   [innerHTML]="docHtmlContent()"
                 ></div>
               }
@@ -1182,20 +1230,13 @@ class ZGalleryPreviewComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: ZSafeResourceUrlPipe, name: "zSafeResourceUrl" }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryPreviewComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'z-gallery-preview',
-                    imports: [
-                        ZButtonComponent,
-                        ZIconComponent,
-                        ZSkeletonComponent,
-                        ZTooltipDirective,
-                        ZSafeResourceUrlPipe,
-                        TranslatePipe,
-                    ],
+                    imports: [ZButtonComponent, ZIconComponent, ZSkeletonComponent, ZTooltipDirective, TranslatePipe],
                     standalone: true,
                     template: `
     <div
@@ -1327,17 +1368,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 (click)="toggleZoom()"
               />
             </div>
-          } @else if (isPdf()) {
+          } @else if (isPdf() && safePdfUrl()) {
             <div class="relative h-[75vh] w-[85vw]">
               @if (isLoading()) {
                 <z-skeleton class="absolute inset-0 rounded-lg" />
               }
               <iframe
-                [src]="file().url | zSafeResourceUrl"
+                [src]="safePdfUrl()"
                 class="absolute inset-0 size-full rounded-lg bg-white shadow-2xl transition-opacity duration-300"
                 [class.opacity-0]="isLoading()"
                 [class.opacity-100]="!isLoading()"
                 frameborder="0"
+                sandbox
+                referrerpolicy="no-referrer"
                 (load)="onPdfLoad()"
               ></iframe>
             </div>
@@ -1376,7 +1419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 </div>
               } @else if (docHtmlContent()) {
                 <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-8 shadow-2xl"
+                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-8 text-gray-950 shadow-2xl"
                   [innerHTML]="docHtmlContent()"
                 ></div>
               }
@@ -1398,7 +1441,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 </div>
               } @else if (docHtmlContent()) {
                 <div
-                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-4 shadow-2xl"
+                  class="absolute inset-0 overflow-auto rounded-lg bg-white p-4 text-gray-950 shadow-2xl"
                   [innerHTML]="docHtmlContent()"
                 ></div>
               }
@@ -1457,7 +1500,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         '(document:keydown)': 'onKeyDown($event)',
                     },
                 }]
-        }], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zOnClose: [{ type: i0.Output, args: ["zOnClose"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnNavigate: [{ type: i0.Output, args: ["zOnNavigate"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }] } });
+        }], ctorParameters: () => [], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zTrustedResourceOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrustedResourceOrigins", required: false }] }], zOnClose: [{ type: i0.Output, args: ["zOnClose"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnNavigate: [{ type: i0.Output, args: ["zOnNavigate"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }] } });
 
 const zGalleryVariants = cva('z-gallery', {
     variants: {
@@ -1528,12 +1571,15 @@ class ZGalleryComponent {
     zMode = model('grid', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
     zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
     zColumns = input(4, ...(ngDevMode ? [{ debugName: "zColumns" }] : []));
+    zItemWidth = input(null, ...(ngDevMode ? [{ debugName: "zItemWidth" }] : []));
     zShowDownload = input(true, ...(ngDevMode ? [{ debugName: "zShowDownload" }] : []));
     zShowPreview = input(true, ...(ngDevMode ? [{ debugName: "zShowPreview" }] : []));
     zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    zTrustedResourceOrigins = input([], ...(ngDevMode ? [{ debugName: "zTrustedResourceOrigins" }] : []));
     zShowModeToggle = input(true, ...(ngDevMode ? [{ debugName: "zShowModeToggle" }] : []));
     zShowSearch = input(false, ...(ngDevMode ? [{ debugName: "zShowSearch" }] : []));
     zServerSearch = input(false, ...(ngDevMode ? [{ debugName: "zServerSearch" }] : []));
+    zSearchDebounce = input(300, ...(ngDevMode ? [{ debugName: "zSearchDebounce" }] : []));
     zSearchPlaceholder = input('Search files...', ...(ngDevMode ? [{ debugName: "zSearchPlaceholder" }] : []));
     zToggleSize = input('default', ...(ngDevMode ? [{ debugName: "zToggleSize" }] : []));
     zTitle = input('', ...(ngDevMode ? [{ debugName: "zTitle" }] : []));
@@ -1552,12 +1598,16 @@ class ZGalleryComponent {
     zOnAction = output();
     modeIndex = signal(0, ...(ngDevMode ? [{ debugName: "modeIndex" }] : []));
     previewFile = signal(null, ...(ngDevMode ? [{ debugName: "previewFile" }] : []));
+    searchInputQuery = signal('', ...(ngDevMode ? [{ debugName: "searchInputQuery" }] : []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
     currentMode = computed(() => {
         const index = this.modeIndex();
         return index === 1 ? 'list' : 'grid';
     }, ...(ngDevMode ? [{ debugName: "currentMode" }] : []));
     gridColumnsClass = computed(() => {
+        if (this.zItemWidth()) {
+            return 'justify-start';
+        }
         const cols = this.zColumns();
         switch (cols) {
             case 1:
@@ -1576,6 +1626,10 @@ class ZGalleryComponent {
                 return `grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-${cols}`;
         }
     }, ...(ngDevMode ? [{ debugName: "gridColumnsClass" }] : []));
+    gridTemplateColumns = computed(() => {
+        const itemWidth = this.zItemWidth();
+        return itemWidth ? `repeat(auto-fill, minmax(${itemWidth}, ${itemWidth}))` : null;
+    }, ...(ngDevMode ? [{ debugName: "gridTemplateColumns" }] : []));
     containerClasses = computed(() => zMergeClasses(zGalleryVariants({ zSize: this.zSize() }), this.zClass()), ...(ngDevMode ? [{ debugName: "containerClasses" }] : []));
     showHeader = computed(() => this.zTitle() || this.zShowSearch() || (this.zShowModeToggle() && this.zFiles().length > 0), ...(ngDevMode ? [{ debugName: "showHeader" }] : []));
     toggleIconSize = computed(() => {
@@ -1638,8 +1692,9 @@ class ZGalleryComponent {
         });
     }
     onSearchChange(query) {
-        this.searchQuery.set(query);
-        this.zSearchChange.emit(query);
+        const normalizedQuery = String(query ?? '');
+        this.searchQuery.set(normalizedQuery);
+        this.zSearchChange.emit(normalizedQuery);
     }
     onDownload(file) {
         this.zOnDownload.emit(file);
@@ -1730,7 +1785,7 @@ class ZGalleryComponent {
         selectedFiles.forEach(file => this.onDownload(file));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryComponent, isStandalone: true, selector: "z-gallery", inputs: { zFiles: { classPropertyName: "zFiles", publicName: "zFiles", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zShowModeToggle: { classPropertyName: "zShowModeToggle", publicName: "zShowModeToggle", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zServerSearch: { classPropertyName: "zServerSearch", publicName: "zServerSearch", isSignal: true, isRequired: false, transformFunction: null }, zSearchPlaceholder: { classPropertyName: "zSearchPlaceholder", publicName: "zSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zToggleSize: { classPropertyName: "zToggleSize", publicName: "zToggleSize", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelectedFiles: { classPropertyName: "zSelectedFiles", publicName: "zSelectedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zMode: "zModeChange", zSelectedFiles: "zSelectedFilesChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zModeChange: "zModeChange", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZGalleryComponent, isStandalone: true, selector: "z-gallery", inputs: { zFiles: { classPropertyName: "zFiles", publicName: "zFiles", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zColumns: { classPropertyName: "zColumns", publicName: "zColumns", isSignal: true, isRequired: false, transformFunction: null }, zItemWidth: { classPropertyName: "zItemWidth", publicName: "zItemWidth", isSignal: true, isRequired: false, transformFunction: null }, zShowDownload: { classPropertyName: "zShowDownload", publicName: "zShowDownload", isSignal: true, isRequired: false, transformFunction: null }, zShowPreview: { classPropertyName: "zShowPreview", publicName: "zShowPreview", isSignal: true, isRequired: false, transformFunction: null }, zShowRemove: { classPropertyName: "zShowRemove", publicName: "zShowRemove", isSignal: true, isRequired: false, transformFunction: null }, zTrustedResourceOrigins: { classPropertyName: "zTrustedResourceOrigins", publicName: "zTrustedResourceOrigins", isSignal: true, isRequired: false, transformFunction: null }, zShowModeToggle: { classPropertyName: "zShowModeToggle", publicName: "zShowModeToggle", isSignal: true, isRequired: false, transformFunction: null }, zShowSearch: { classPropertyName: "zShowSearch", publicName: "zShowSearch", isSignal: true, isRequired: false, transformFunction: null }, zServerSearch: { classPropertyName: "zServerSearch", publicName: "zServerSearch", isSignal: true, isRequired: false, transformFunction: null }, zSearchDebounce: { classPropertyName: "zSearchDebounce", publicName: "zSearchDebounce", isSignal: true, isRequired: false, transformFunction: null }, zSearchPlaceholder: { classPropertyName: "zSearchPlaceholder", publicName: "zSearchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, zToggleSize: { classPropertyName: "zToggleSize", publicName: "zToggleSize", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zEmptyText: { classPropertyName: "zEmptyText", publicName: "zEmptyText", isSignal: true, isRequired: false, transformFunction: null }, zEmptyIcon: { classPropertyName: "zEmptyIcon", publicName: "zEmptyIcon", isSignal: true, isRequired: false, transformFunction: null }, zClass: { classPropertyName: "zClass", publicName: "zClass", isSignal: true, isRequired: false, transformFunction: null }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelectedFiles: { classPropertyName: "zSelectedFiles", publicName: "zSelectedFiles", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zMode: "zModeChange", zSelectedFiles: "zSelectedFilesChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zModeChange: "zModeChange", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: `
     <div [class]="containerClasses()">
       @if (showHeader()) {
         <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
@@ -1744,8 +1799,10 @@ class ZGalleryComponent {
                 zSearch
                 [zSize]="searchInputSize()"
                 [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
-                [ngModel]="searchQuery()"
-                (ngModelChange)="onSearchChange($event)"
+                [zDebounce]="zSearchDebounce()"
+                [ngModel]="searchInputQuery()"
+                (ngModelChange)="searchInputQuery.set($event)"
+                (zOnSearch)="onSearchChange($event)"
                 class="w-64"
               />
             }
@@ -1820,7 +1877,7 @@ class ZGalleryComponent {
 
       @if (filteredFiles().length > 0) {
         @if (currentMode() === 'grid') {
-          <div class="grid gap-4" [class]="gridColumnsClass()">
+          <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
             @for (file of filteredFiles(); track file.id) {
               <z-gallery-item
                 [file]="file"
@@ -1873,6 +1930,7 @@ class ZGalleryComponent {
           [file]="previewFile()!"
           [files]="filteredFiles()"
           [zShowRemove]="zShowRemove()"
+          [zTrustedResourceOrigins]="zTrustedResourceOrigins()"
           (zOnClose)="closePreview()"
           (zOnDownload)="onDownload($event)"
           (zOnNavigate)="onNavigatePreview($event)"
@@ -1880,7 +1938,7 @@ class ZGalleryComponent {
         />
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZGalleryPreviewComponent, selector: "z-gallery-preview", inputs: ["file", "files", "zShowRemove"], outputs: ["zOnClose", "zOnDownload", "zOnNavigate", "zOnRemove"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ZGalleryItemComponent, selector: "z-gallery-item", inputs: ["file", "zMode", "zSize", "zShowDownload", "zShowPreview", "zShowRemove", "zSelectable", "zSelected"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove", "zOnSelect"] }, { kind: "component", type: ZGalleryPreviewComponent, selector: "z-gallery-preview", inputs: ["file", "files", "zShowRemove", "zTrustedResourceOrigins"], outputs: ["zOnClose", "zOnDownload", "zOnNavigate", "zOnRemove"] }, { kind: "component", type: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", exportAs: ["zButtonGroupItem"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZCheckboxComponent, selector: "z-checkbox", inputs: ["class", "zType", "zSize", "zLabel", "zText", "zDisabled", "zIndeterminate", "zValue", "zOptions", "zOrientation", "zCheckAll", "zCheckAllText", "zChecked", "zGroupValue"], outputs: ["zChange", "zGroupChange", "zOnBlur", "zOnFocus", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "component", type: ZEmptyComponent, selector: "z-empty", inputs: ["class", "zType", "zIcon", "zIconSize", "zSize", "zMessage", "zDescription"] }, { kind: "component", type: ZInputComponent, selector: "z-input", inputs: ["class", "zType", "zSize", "zAlign", "zLabel", "zLabelClass", "zPlaceholder", "zRequired", "zDisabled", "zReadonly", "zPrefix", "zSuffix", "zMin", "zMax", "zStep", "zShowArrows", "zMask", "zDecimalPlaces", "zAllowNegative", "zThousandSeparator", "zDecimalMarker", "zValidators", "zAsyncValidators", "zAsyncDebounce", "zAsyncValidateOn", "zShowPasswordToggle", "zSearch", "zDebounce", "zAutofocus", "zAutoComplete", "zAllowClear", "zAutoSizeContent", "zRows", "zResize", "zMaxLength", "zAutoSuggest", "zColorConfig"], outputs: ["zOnSearch", "zOnChange", "zOnBlur", "zOnFocus", "zOnKeydown", "zOnEnter", "zOnColorCollapse", "zControl", "zEvent"], exportAs: ["zInput"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZGalleryComponent, decorators: [{
             type: Component,
@@ -1914,8 +1972,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                 zSearch
                 [zSize]="searchInputSize()"
                 [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
-                [ngModel]="searchQuery()"
-                (ngModelChange)="onSearchChange($event)"
+                [zDebounce]="zSearchDebounce()"
+                [ngModel]="searchInputQuery()"
+                (ngModelChange)="searchInputQuery.set($event)"
+                (zOnSearch)="onSearchChange($event)"
                 class="w-64"
               />
             }
@@ -1990,7 +2050,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
       @if (filteredFiles().length > 0) {
         @if (currentMode() === 'grid') {
-          <div class="grid gap-4" [class]="gridColumnsClass()">
+          <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
             @for (file of filteredFiles(); track file.id) {
               <z-gallery-item
                 [file]="file"
@@ -2043,6 +2103,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
           [file]="previewFile()!"
           [files]="filteredFiles()"
           [zShowRemove]="zShowRemove()"
+          [zTrustedResourceOrigins]="zTrustedResourceOrigins()"
           (zOnClose)="closePreview()"
           (zOnDownload)="onDownload($event)"
           (zOnNavigate)="onNavigatePreview($event)"
@@ -2058,7 +2119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     },
                     exportAs: 'zGallery',
                 }]
-        }], propDecorators: { zFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFiles", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }, { type: i0.Output, args: ["zModeChange"] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumns", required: false }] }], zShowDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDownload", required: false }] }], zShowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPreview", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zShowModeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowModeToggle", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zServerSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zServerSearch", required: false }] }], zSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchPlaceholder", required: false }] }], zToggleSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToggleSize", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectable", required: false }] }], zSelectedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedFiles", required: false }] }, { type: i0.Output, args: ["zSelectedFilesChange"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], zModeChange: [{ type: i0.Output, args: ["zModeChange"] }], zSearchChange: [{ type: i0.Output, args: ["zSearchChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zSelectionChange: [{ type: i0.Output, args: ["zSelectionChange"] }], zOnAction: [{ type: i0.Output, args: ["zOnAction"] }] } });
+        }], propDecorators: { zFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFiles", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }, { type: i0.Output, args: ["zModeChange"] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColumns", required: false }] }], zItemWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItemWidth", required: false }] }], zShowDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowDownload", required: false }] }], zShowPreview: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowPreview", required: false }] }], zShowRemove: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowRemove", required: false }] }], zTrustedResourceOrigins: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTrustedResourceOrigins", required: false }] }], zShowModeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowModeToggle", required: false }] }], zShowSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowSearch", required: false }] }], zServerSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "zServerSearch", required: false }] }], zSearchDebounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchDebounce", required: false }] }], zSearchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSearchPlaceholder", required: false }] }], zToggleSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zToggleSize", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zEmptyText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyText", required: false }] }], zEmptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmptyIcon", required: false }] }], zClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClass", required: false }] }], zSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectable", required: false }] }], zSelectedFiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectedFiles", required: false }] }, { type: i0.Output, args: ["zSelectedFilesChange"] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], zModeChange: [{ type: i0.Output, args: ["zModeChange"] }], zSearchChange: [{ type: i0.Output, args: ["zSearchChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zSelectionChange: [{ type: i0.Output, args: ["zSelectionChange"] }], zOnAction: [{ type: i0.Output, args: ["zOnAction"] }] } });
 
 class ZGalleryFileIconComponent {
     file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
@@ -2189,6 +2250,7 @@ class ZGalleryPreviewService {
         componentRef.setInput('file', previewOptions.file);
         componentRef.setInput('files', previewOptions.files);
         componentRef.setInput('zShowRemove', previewOptions.zShowRemove ?? false);
+        componentRef.setInput('zTrustedResourceOrigins', previewOptions.zTrustedResourceOrigins ?? []);
         componentRef.instance.zOnClose.subscribe(() => {
             previewOptions.zOnClose?.();
             previewRef.close();