@shival99/z-ui 1.7.2 → 1.7.3

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

@@ -5,6 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
 import { ZButtonGroupComponent, ZButtonGroupItemDirective } from '@shival99/z-ui/components/z-button-group';
+import { ZCheckboxComponent } from '@shival99/z-ui/components/z-checkbox';
 import { ZEmptyComponent } from '@shival99/z-ui/components/z-empty';
 import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { ZInputComponent } from '@shival99/z-ui/components/z-input';
@@ -175,9 +176,12 @@ class ZGalleryItemComponent {
     zShowDownload = input(true, ...(ngDevMode ? [{ debugName: "zShowDownload" }] : []));
     zShowPreview = input(true, ...(ngDevMode ? [{ debugName: "zShowPreview" }] : []));
     zShowRemove = input(false, ...(ngDevMode ? [{ debugName: "zShowRemove" }] : []));
+    zSelectable = input(false, ...(ngDevMode ? [{ debugName: "zSelectable" }] : []));
+    zSelected = input(false, ...(ngDevMode ? [{ debugName: "zSelected" }] : []));
     zOnDownload = output();
     zOnPreview = output();
     zOnRemove = output();
+    zOnSelect = output();
     isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
     formattedSize = computed(() => formatFileSize(this.file().size), ...(ngDevMode ? [{ debugName: "formattedSize" }] : []));
     category = computed(() => getFileCategory(this.file()), ...(ngDevMode ? [{ debugName: "category" }] : []));
@@ -209,18 +213,49 @@ class ZGalleryItemComponent {
             this.zOnPreview.emit(this.file());
         }
     }
+    onItemClick() {
+        if (this.zSelectable()) {
+            this.zOnSelect.emit(this.file());
+            return;
+        }
+        this.onPreview();
+    }
     onRemove(event) {
         event.stopPropagation();
         this.zOnRemove.emit(this.file());
     }
+    onSelectClick(event) {
+        event.stopPropagation();
+        this.zOnSelect.emit(this.file());
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZGalleryItemComponent, isStandalone: true, selector: "z-gallery-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", 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 } }, outputs: { zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove" }, host: { classAttribute: "z-gallery-item block" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZGalleryItemComponent, isStandalone: true, selector: "z-gallery-item", inputs: { file: { classPropertyName: "file", publicName: "file", isSignal: true, isRequired: true, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", 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 }, zSelectable: { classPropertyName: "zSelectable", publicName: "zSelectable", isSignal: true, isRequired: false, transformFunction: null }, zSelected: { classPropertyName: "zSelected", publicName: "zSelected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zOnSelect: "zOnSelect" }, host: { classAttribute: "z-gallery-item block" }, ngImport: i0, template: `
     @if (zMode() === 'grid') {
       <div
-        class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-xl border shadow-sm transition-all duration-200 hover:shadow-md"
-        (click)="onPreview()"
+        class="group relative cursor-pointer rounded-xl border transition-all duration-200 hover:shadow-md"
+        [class.border-border]="!zSelected()"
+        [class.bg-card]="!zSelected()"
+        [class.shadow-sm]="!zSelected()"
+        [class.hover:border-primary/30]="!zSelected()"
+        [class.border-primary/40]="zSelected()"
+        [class.bg-primary/5]="zSelected()"
+        [class.shadow-primary/15]="zSelected()"
+        [class.shadow-md]="zSelected()"
+        (click)="onItemClick()"
       >
-        <div class="relative aspect-square overflow-hidden">
+        @if (zSelectable()) {
+          <div
+            class="bg-primary shadow-card absolute -top-2 -right-2 z-10 flex size-6 items-center justify-center rounded-full transition-all duration-150"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-0]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="14" class="text-primary-foreground"></i>
+          </div>
+        }
+
+        <div class="relative aspect-square overflow-hidden rounded-t-xl">
           @if (isImage()) {
             @if (isLoading()) {
               <z-skeleton class="absolute inset-0" />
@@ -304,9 +339,26 @@ class ZGalleryItemComponent {
       </div>
     } @else {
       <div
-        class="group border-border bg-card hover:border-primary/30 flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
-        (click)="onPreview()"
+        class="group flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
+        [class.border-border]="!zSelected()"
+        [class.bg-card]="!zSelected()"
+        [class.hover:border-primary/30]="!zSelected()"
+        [class.border-primary/40]="zSelected()"
+        [class.bg-primary/5]="zSelected()"
+        (click)="onItemClick()"
       >
+        @if (zSelectable()) {
+          <div
+            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-150"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-0]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="12" class="text-primary-foreground"></i>
+          </div>
+        }
+
         <div class="flex size-10 shrink-0 items-center justify-center rounded-lg" [class]="categoryStyle().bg">
           @if (isImage() && (file().thumbnailUrl || file().url)) {
             <img
@@ -381,10 +433,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                     template: `
     @if (zMode() === 'grid') {
       <div
-        class="group border-border bg-card hover:border-primary/30 relative cursor-pointer overflow-hidden rounded-xl border shadow-sm transition-all duration-200 hover:shadow-md"
-        (click)="onPreview()"
+        class="group relative cursor-pointer rounded-xl border transition-all duration-200 hover:shadow-md"
+        [class.border-border]="!zSelected()"
+        [class.bg-card]="!zSelected()"
+        [class.shadow-sm]="!zSelected()"
+        [class.hover:border-primary/30]="!zSelected()"
+        [class.border-primary/40]="zSelected()"
+        [class.bg-primary/5]="zSelected()"
+        [class.shadow-primary/15]="zSelected()"
+        [class.shadow-md]="zSelected()"
+        (click)="onItemClick()"
       >
-        <div class="relative aspect-square overflow-hidden">
+        @if (zSelectable()) {
+          <div
+            class="bg-primary shadow-card absolute -top-2 -right-2 z-10 flex size-6 items-center justify-center rounded-full transition-all duration-150"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-0]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="14" class="text-primary-foreground"></i>
+          </div>
+        }
+
+        <div class="relative aspect-square overflow-hidden rounded-t-xl">
           @if (isImage()) {
             @if (isLoading()) {
               <z-skeleton class="absolute inset-0" />
@@ -468,9 +540,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
       </div>
     } @else {
       <div
-        class="group border-border bg-card hover:border-primary/30 flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
-        (click)="onPreview()"
+        class="group flex cursor-pointer items-center gap-3 rounded-lg border px-3 py-2.5 shadow-sm transition-all duration-150 hover:shadow-md"
+        [class.border-border]="!zSelected()"
+        [class.bg-card]="!zSelected()"
+        [class.hover:border-primary/30]="!zSelected()"
+        [class.border-primary/40]="zSelected()"
+        [class.bg-primary/5]="zSelected()"
+        (click)="onItemClick()"
       >
+        @if (zSelectable()) {
+          <div
+            class="bg-primary -ml-1 flex size-5 shrink-0 items-center justify-center rounded-full transition-all duration-150"
+            [class.scale-100]="zSelected()"
+            [class.opacity-100]="zSelected()"
+            [class.scale-0]="!zSelected()"
+            [class.opacity-0]="!zSelected()"
+          >
+            <i z-icon zType="lucideCheck" zSize="12" class="text-primary-foreground"></i>
+          </div>
+        }
+
         <div class="flex size-10 shrink-0 items-center justify-center rounded-lg" [class]="categoryStyle().bg">
           @if (isImage() && (file().thumbnailUrl || file().url)) {
             <img
@@ -541,7 +630,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         class: 'z-gallery-item block',
                     },
                 }]
-        }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", 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 }] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }] } });
+        }], propDecorators: { file: [{ type: i0.Input, args: [{ isSignal: true, alias: "file", required: true }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", 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 }] }], zSelectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelectable", required: false }] }], zSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSelected", required: false }] }], zOnDownload: [{ type: i0.Output, args: ["zOnDownload"] }], zOnPreview: [{ type: i0.Output, args: ["zOnPreview"] }], zOnRemove: [{ type: i0.Output, args: ["zOnRemove"] }], zOnSelect: [{ type: i0.Output, args: ["zOnSelect"] }] } });
 
 class ZGalleryPreviewComponent {
     file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));
@@ -574,10 +663,9 @@ class ZGalleryPreviewComponent {
         const remaining = this._minLoadingTime - elapsed;
         if (remaining > 0) {
             setTimeout(() => this.isLoading.set(false), remaining);
+            return;
         }
-        else {
-            this.isLoading.set(false);
-        }
+        this.isLoading.set(false);
     }
     currentIndex = computed(() => {
         const allFiles = this.files();
@@ -725,7 +813,7 @@ class ZGalleryPreviewComponent {
 
       <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
         <div
-          class="dark:border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
+          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
         >
           <div>
             <span class="max-w-[200px] truncate font-medium">{{ file().name }}</span>
@@ -748,7 +836,7 @@ class ZGalleryPreviewComponent {
                 [zContent]="'i18n_z_ui_gallery_rotate_left' | translate"
                 (click)="rotateLeft()"
               >
-                <i z-icon zType="lucideRefreshCcw" zSize="14"></i>
+                <i z-icon zType="lucideUndo" zSize="14"></i>
               </button>
               <button
                 z-button
@@ -760,7 +848,7 @@ class ZGalleryPreviewComponent {
                 [zContent]="'i18n_z_ui_gallery_rotate_right' | translate"
                 (click)="rotateRight()"
               >
-                <i z-icon zType="lucideRefreshCw" zSize="14"></i>
+                <i z-icon zType="lucideRedo" zSize="14"></i>
               </button>
             }
 
@@ -925,7 +1013,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
 
       <div class="flex h-full w-full flex-col items-center" (click)="$event.stopPropagation()">
         <div
-          class="dark:border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
+          class="dark:!border-border absolute top-4 left-1/2 z-10 flex -translate-x-1/2 items-center gap-2 rounded-[6px] border !border-transparent bg-black/60 px-4 py-2 text-sm text-white backdrop-blur-sm dark:border"
         >
           <div>
             <span class="max-w-[200px] truncate font-medium">{{ file().name }}</span>
@@ -948,7 +1036,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 [zContent]="'i18n_z_ui_gallery_rotate_left' | translate"
                 (click)="rotateLeft()"
               >
-                <i z-icon zType="lucideRefreshCcw" zSize="14"></i>
+                <i z-icon zType="lucideUndo" zSize="14"></i>
               </button>
               <button
                 z-button
@@ -960,7 +1048,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 [zContent]="'i18n_z_ui_gallery_rotate_right' | translate"
                 (click)="rotateRight()"
               >
-                <i z-icon zType="lucideRefreshCw" zSize="14"></i>
+                <i z-icon zType="lucideRedo" zSize="14"></i>
               </button>
             }
 
@@ -1160,12 +1248,16 @@ class ZGalleryComponent {
     zEmptyText = input('No files', ...(ngDevMode ? [{ debugName: "zEmptyText" }] : []));
     zEmptyIcon = input('lucideImage', ...(ngDevMode ? [{ debugName: "zEmptyIcon" }] : []));
     zClass = input('', ...(ngDevMode ? [{ debugName: "zClass" }] : []));
+    zSelectable = input(false, ...(ngDevMode ? [{ debugName: "zSelectable" }] : []));
+    zSelectedFiles = model([], ...(ngDevMode ? [{ debugName: "zSelectedFiles" }] : []));
     zOnDownload = output();
     zOnPreview = output();
     zOnRemove = output();
     zModeChange = output();
     zSearchChange = output();
     zControl = output();
+    zSelectionChange = output();
+    zOnAction = output();
     modeIndex = signal(0, ...(ngDevMode ? [{ debugName: "modeIndex" }] : []));
     previewFile = signal(null, ...(ngDevMode ? [{ debugName: "previewFile" }] : []));
     searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
@@ -1207,6 +1299,19 @@ class ZGalleryComponent {
         }
         return files.filter(file => file.name.toLowerCase().includes(query));
     }, ...(ngDevMode ? [{ debugName: "filteredFiles" }] : []));
+    selectedIds = computed(() => new Set(this.zSelectedFiles().map(f => f.id)), ...(ngDevMode ? [{ debugName: "selectedIds" }] : []));
+    isAllSelected = computed(() => {
+        const files = this.filteredFiles();
+        const selectedIds = this.selectedIds();
+        return files.length > 0 && files.every(f => selectedIds.has(f.id));
+    }, ...(ngDevMode ? [{ debugName: "isAllSelected" }] : []));
+    isIndeterminate = computed(() => {
+        const files = this.filteredFiles();
+        const selectedIds = this.selectedIds();
+        const selectedCount = files.filter(f => selectedIds.has(f.id)).length;
+        return selectedCount > 0 && selectedCount < files.length;
+    }, ...(ngDevMode ? [{ debugName: "isIndeterminate" }] : []));
+    selectedCount = computed(() => this.zSelectedFiles().length, ...(ngDevMode ? [{ debugName: "selectedCount" }] : []));
     ngAfterViewInit() {
         this.zControl.emit({
             setMode: mode => {
@@ -1218,6 +1323,11 @@ class ZGalleryComponent {
             getFiles: () => this.zFiles(),
             openPreview: file => this.previewFile.set(file),
             closePreview: () => this.previewFile.set(null),
+            selectAll: () => this.selectAll(),
+            deselectAll: () => this.deselectAll(),
+            toggleSelection: file => this.toggleSelection(file),
+            getSelectedFiles: () => this.zSelectedFiles(),
+            isSelected: file => this.isFileSelected(file),
         });
     }
     onSearchChange(query) {
@@ -1263,8 +1373,57 @@ class ZGalleryComponent {
         }
         this.previewFile.set(allFiles[currentIndex - 1]);
     }
+    isFileSelected(file) {
+        return this.selectedIds().has(file.id);
+    }
+    toggleSelection(file) {
+        const currentSelected = this.zSelectedFiles();
+        const isSelected = this.isFileSelected(file);
+        const newSelected = isSelected ? currentSelected.filter(f => f.id !== file.id) : [...currentSelected, file];
+        this.zOnAction.emit({ type: isSelected ? 'deselect' : 'select', file });
+        this.zSelectedFiles.set(newSelected);
+        this.zSelectionChange.emit({
+            selectedFiles: newSelected,
+            addedFiles: isSelected ? undefined : [file],
+            removedFiles: isSelected ? [file] : undefined,
+        });
+    }
+    selectAll() {
+        const files = this.filteredFiles();
+        this.zSelectedFiles.set([...files]);
+        this.zOnAction.emit({ type: 'select-all', files });
+        this.zSelectionChange.emit({
+            selectedFiles: files,
+            addedFiles: files,
+        });
+    }
+    deselectAll() {
+        const previousSelected = this.zSelectedFiles();
+        this.zSelectedFiles.set([]);
+        this.zOnAction.emit({ type: 'deselect-all', files: previousSelected });
+        this.zSelectionChange.emit({
+            selectedFiles: [],
+            removedFiles: previousSelected,
+        });
+    }
+    toggleSelectAll() {
+        if (this.isAllSelected()) {
+            this.deselectAll();
+            return;
+        }
+        this.selectAll();
+    }
+    onBulkDelete() {
+        const selectedFiles = this.zSelectedFiles();
+        this.zOnAction.emit({ type: 'delete', files: selectedFiles });
+    }
+    onBulkDownload() {
+        const selectedFiles = this.zSelectedFiles();
+        this.zOnAction.emit({ type: 'download', files: selectedFiles });
+        selectedFiles.forEach(file => this.onDownload(file));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 } }, outputs: { zMode: "zModeChange", zOnDownload: "zOnDownload", zOnPreview: "zOnPreview", zOnRemove: "zOnRemove", zModeChange: "zModeChange", zSearchChange: "zSearchChange", zControl: "zControl" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: `
     <div [class]="containerClasses()">
       @if (showHeader()) {
         <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
@@ -1298,6 +1457,60 @@ class ZGalleryComponent {
         </div>
       }
 
+      @if (zSelectable() && filteredFiles().length > 0) {
+        <div
+          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[6px] border border-transparent px-3"
+        >
+          <div class="flex items-center gap-3">
+            <z-checkbox
+              [zChecked]="isAllSelected()"
+              [zIndeterminate]="isIndeterminate()"
+              (zChange)="toggleSelectAll()"
+              zSize="sm"
+            />
+            <span class="text-muted-foreground text-sm">
+              @if (selectedCount() > 0) {
+                {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}
+              } @else {
+                {{ 'i18n_z_ui_gallery_select_all' | translate }}
+              }
+            </span>
+          </div>
+
+          @if (selectedCount() > 0) {
+            <div class="flex items-center gap-1">
+              @if (zShowDownload()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDownload()"
+                  class="text-muted-foreground hover:text-foreground"
+                >
+                  <i z-icon zType="lucideDownload" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_download' | translate }}</span>
+                </button>
+              }
+              @if (zShowRemove()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDelete()"
+                  class="text-destructive hover:text-destructive"
+                >
+                  <i z-icon zType="lucideTrash2" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>
+                </button>
+              }
+              <button z-button zType="ghost" zSize="xs" (click)="deselectAll()">
+                <i z-icon zType="lucideX" zSize="14"></i>
+              </button>
+            </div>
+          }
+        </div>
+      }
+
       @if (filteredFiles().length > 0) {
         @if (currentMode() === 'grid') {
           <div class="grid gap-4" [style.grid-template-columns]="gridColumns()">
@@ -1309,9 +1522,12 @@ class ZGalleryComponent {
                 [zShowDownload]="zShowDownload()"
                 [zShowPreview]="zShowPreview()"
                 [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
                 (zOnDownload)="onDownload($event)"
                 (zOnPreview)="onPreview($event)"
                 (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
               />
             }
           </div>
@@ -1325,9 +1541,12 @@ class ZGalleryComponent {
                 [zShowDownload]="zShowDownload()"
                 [zShowPreview]="zShowPreview()"
                 [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
                 (zOnDownload)="onDownload($event)"
                 (zOnPreview)="onPreview($event)"
                 (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
               />
             }
           </div>
@@ -1354,7 +1573,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"], outputs: ["zOnDownload", "zOnPreview", "zOnRemove"] }, { 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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "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", "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"], outputs: ["zOnSearch", "zOnChange", "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"], 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", "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", "zControl", "zEvent", "zCheckedChange", "zGroupValueChange"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "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", "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"], outputs: ["zOnSearch", "zOnChange", "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.6", ngImport: i0, type: ZGalleryComponent, decorators: [{
             type: Component,
@@ -1368,6 +1587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         ZButtonGroupComponent,
                         ZButtonGroupItemDirective,
                         ZButtonComponent,
+                        ZCheckboxComponent,
                         ZIconComponent,
                         ZEmptyComponent,
                         ZInputComponent,
@@ -1407,6 +1627,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
         </div>
       }
 
+      @if (zSelectable() && filteredFiles().length > 0) {
+        <div
+          class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[6px] border border-transparent px-3"
+        >
+          <div class="flex items-center gap-3">
+            <z-checkbox
+              [zChecked]="isAllSelected()"
+              [zIndeterminate]="isIndeterminate()"
+              (zChange)="toggleSelectAll()"
+              zSize="sm"
+            />
+            <span class="text-muted-foreground text-sm">
+              @if (selectedCount() > 0) {
+                {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}
+              } @else {
+                {{ 'i18n_z_ui_gallery_select_all' | translate }}
+              }
+            </span>
+          </div>
+
+          @if (selectedCount() > 0) {
+            <div class="flex items-center gap-1">
+              @if (zShowDownload()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDownload()"
+                  class="text-muted-foreground hover:text-foreground"
+                >
+                  <i z-icon zType="lucideDownload" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_download' | translate }}</span>
+                </button>
+              }
+              @if (zShowRemove()) {
+                <button
+                  z-button
+                  zType="ghost"
+                  zSize="xs"
+                  (click)="onBulkDelete()"
+                  class="text-destructive hover:text-destructive"
+                >
+                  <i z-icon zType="lucideTrash2" zSize="14"></i>
+                  <span class="ml-1">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>
+                </button>
+              }
+              <button z-button zType="ghost" zSize="xs" (click)="deselectAll()">
+                <i z-icon zType="lucideX" zSize="14"></i>
+              </button>
+            </div>
+          }
+        </div>
+      }
+
       @if (filteredFiles().length > 0) {
         @if (currentMode() === 'grid') {
           <div class="grid gap-4" [style.grid-template-columns]="gridColumns()">
@@ -1418,9 +1692,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 [zShowDownload]="zShowDownload()"
                 [zShowPreview]="zShowPreview()"
                 [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
                 (zOnDownload)="onDownload($event)"
                 (zOnPreview)="onPreview($event)"
                 (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
               />
             }
           </div>
@@ -1434,9 +1711,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                 [zShowDownload]="zShowDownload()"
                 [zShowPreview]="zShowPreview()"
                 [zShowRemove]="zShowRemove()"
+                [zSelectable]="zSelectable()"
+                [zSelected]="isFileSelected(file)"
                 (zOnDownload)="onDownload($event)"
                 (zOnPreview)="onPreview($event)"
                 (zOnRemove)="onRemove($event)"
+                (zOnSelect)="toggleSelection($event)"
               />
             }
           </div>
@@ -1471,7 +1751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", 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 }] }], 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"] }] } });
+        }], 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"] }] } });
 
 class ZGalleryFileIconComponent {
     file = input.required(...(ngDevMode ? [{ debugName: "file" }] : []));