@shival99/z-ui 2.0.18 → 2.0.19

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

@@ -130,15 +130,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 +386,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 +611,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()) {
@@ -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;
@@ -1109,7 +1120,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 +1142,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>
               }
@@ -1376,7 +1387,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 +1409,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>
               }
@@ -1528,6 +1539,7 @@ 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" }] : []));
@@ -1558,6 +1570,9 @@ class ZGalleryComponent {
         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 +1591,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-fit, minmax(${itemWidth}, 1fr))` : 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(() => {
@@ -1730,7 +1749,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 }, 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: `
     <div [class]="containerClasses()">
       @if (showHeader()) {
         <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
@@ -1820,7 +1839,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"
@@ -1990,7 +2009,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"
@@ -2058,7 +2077,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 }] }], 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"] }] } });
 
 class ZGalleryFileIconComponent {
     file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));