@shival99/z-ui 2.3.11 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/fesm2022/shival99-z-ui-components-z-drawer.mjs +7 -2
  2. package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +1 -1
  3. package/fesm2022/shival99-z-ui-components-z-gallery.mjs +4 -369
  4. package/fesm2022/shival99-z-ui-components-z-gallery.mjs.map +1 -1
  5. package/fesm2022/shival99-z-ui-components-z-icon.mjs +20 -11
  6. package/fesm2022/shival99-z-ui-components-z-icon.mjs.map +1 -1
  7. package/fesm2022/shival99-z-ui-components-z-media-player.mjs +54 -45
  8. package/fesm2022/shival99-z-ui-components-z-media-player.mjs.map +1 -1
  9. package/fesm2022/shival99-z-ui-components-z-modal.mjs +12 -2
  10. package/fesm2022/shival99-z-ui-components-z-modal.mjs.map +1 -1
  11. package/fesm2022/shival99-z-ui-components-z-popover.mjs +75 -43
  12. package/fesm2022/shival99-z-ui-components-z-popover.mjs.map +1 -1
  13. package/fesm2022/shival99-z-ui-components-z-tabs.mjs +17 -11
  14. package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +1 -1
  15. package/package.json +1 -1
  16. package/types/shival99-z-ui-components-z-autocomplete.d.ts +1 -1
  17. package/types/shival99-z-ui-components-z-calendar.d.ts +4 -4
  18. package/types/shival99-z-ui-components-z-editor.d.ts +1 -1
  19. package/types/shival99-z-ui-components-z-media-player.d.ts +1 -1
  20. package/types/shival99-z-ui-components-z-modal.d.ts +1 -1
  21. package/types/shival99-z-ui-components-z-popover.d.ts +1 -0
  22. package/types/shival99-z-ui-components-z-select.d.ts +1 -1
  23. package/types/shival99-z-ui-components-z-table.d.ts +1 -1
  24. package/types/shival99-z-ui-components-z-tabs.d.ts +6 -2
  25. package/types/shival99-z-ui-components-z-toast.d.ts +2 -2
  26. package/types/shival99-z-ui-components-z-upload.d.ts +3 -3
package/fesm2022/shival99-z-ui-components-z-gallery.mjs CHANGED
@@ -2048,191 +2048,11 @@ class ZGalleryComponent {
2048
2048
  selectedFiles.forEach(file => this.onDownload(file));
2049
2049
  }
2050
2050
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2051
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonItems: { classPropertyName: "zSkeletonItems", publicName: "zSkeletonItems", 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 }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", 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", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: `
2052
- <div [class]="containerClasses()">
2053
- @if (showHeader()) {
2054
- <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
2055
- <div class="flex items-center gap-3">
2056
- @if (zTitle()) {
2057
- @if (zLoading()) {
2058
- <z-skeleton zWidth="7rem" zHeight="1.25rem" />
2059
- } @else {
2060
- <h3 class="text-sm font-medium">{{ zTitle() }}</h3>
2061
- }
2062
- }
2063
-
2064
- @if (zShowSearch()) {
2065
- @if (zLoading()) {
2066
- <z-skeleton zWidth="16rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
2067
- } @else {
2068
- <z-input
2069
- zSearch
2070
- [zSize]="searchInputSize()"
2071
- [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
2072
- [zDebounce]="zSearchDebounce()"
2073
- [ngModel]="searchInputQuery()"
2074
- (ngModelChange)="searchInputQuery.set($event)"
2075
- (zOnSearch)="onSearchChange($event)"
2076
- class="w-64"
2077
- />
2078
- }
2079
- }
2080
- </div>
2081
-
2082
- @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {
2083
- @if (zLoading()) {
2084
- <z-skeleton zWidth="5rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
2085
- } @else {
2086
- <z-button-group [(zActive)]="modeIndex">
2087
- <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
2088
- <i z-icon zType="lucideLayoutGrid" [zSize]="toggleIconSize()"></i>
2089
- </button>
2090
- <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
2091
- <i z-icon zType="lucideList" [zSize]="toggleIconSize()"></i>
2092
- </button>
2093
- </z-button-group>
2094
- }
2095
- }
2096
- </div>
2097
- }
2098
-
2099
- @if (zLoading()) {
2100
- @if (currentMode() === 'grid') {
2101
- <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
2102
- @for (item of skeletonItems(); track item) {
2103
- <div class="border-border bg-card overflow-hidden rounded-md border shadow-sm">
2104
- <z-skeleton [zHeight]="skeletonMediaHeight()" zRadius="0" />
2105
- <div class="p-3">
2106
- <z-skeleton zWidth="75%" zHeight="1.25rem" />
2107
- </div>
2108
- </div>
2109
- }
2110
- </div>
2111
- } @else {
2112
- <div class="flex flex-col gap-2">
2113
- @for (item of skeletonItems(); track item) {
2114
- <div class="border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm">
2115
- <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.125rem" />
2116
- <div class="min-w-0 flex-1 space-y-2">
2117
- <z-skeleton zWidth="40%" zHeight="0.875rem" />
2118
- <z-skeleton zWidth="25%" zHeight="0.75rem" />
2119
- </div>
2120
- <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="0.125rem" />
2121
- </div>
2122
- }
2123
- </div>
2124
- }
2125
- } @else if (zSelectable() && filteredFiles().length > 0) {
2126
- <div
2127
- class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3"
2128
- >
2129
- <div class="flex items-center gap-3">
2130
- <z-checkbox
2131
- [zChecked]="isAllSelected()"
2132
- [zIndeterminate]="isIndeterminate()"
2133
- (zChange)="toggleSelectAll()"
2134
- zSize="sm"
2135
- />
2136
- <span class="text-muted-foreground text-sm">
2137
- @if (selectedCount() > 0) {
2138
- {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}
2139
- } @else {
2140
- {{ 'i18n_z_ui_gallery_select_all' | translate }}
2141
- }
2142
- </span>
2143
- </div>
2144
-
2145
- @if (selectedCount() > 0) {
2146
- <div class="flex items-center gap-1">
2147
- @if (zShowDownload()) {
2148
- <button
2149
- z-button
2150
- zType="ghost"
2151
- zSize="xs"
2152
- (click)="onBulkDownload()"
2153
- class="text-muted-foreground hover:text-foreground"
2154
- >
2155
- <i z-icon zType="lucideDownload" zSize="14"></i>
2156
- <span class="ml-1">{{ 'i18n_z_ui_gallery_download' | translate }}</span>
2157
- </button>
2158
- }
2159
- @if (zShowRemove()) {
2160
- <button
2161
- z-button
2162
- zType="ghost"
2163
- zSize="xs"
2164
- (click)="onBulkDelete()"
2165
- class="text-destructive hover:text-destructive"
2166
- >
2167
- <i z-icon zType="lucideTrash2" zSize="14"></i>
2168
- <span class="ml-1">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>
2169
- </button>
2170
- }
2171
- <button z-button zType="ghost" zSize="xs" (click)="deselectAll()">
2172
- <i z-icon zType="lucideX" zSize="14"></i>
2173
- </button>
2174
- </div>
2175
- }
2176
- </div>
2177
- }
2178
-
2179
- @if (!zLoading() && filteredFiles().length > 0) {
2180
- @if (currentMode() === 'grid') {
2181
- <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
2182
- @for (file of filteredFiles(); track file.id) {
2183
- <z-gallery-item
2184
- [file]="file"
2185
- zMode="grid"
2186
- [zSize]="zSize()"
2187
- [zShowDownload]="zShowDownload()"
2188
- [zShowPreview]="zShowPreview()"
2189
- [zShowRemove]="zShowRemove()"
2190
- [zSelectable]="zSelectable()"
2191
- [zSelected]="isFileSelected(file)"
2192
- (zOnDownload)="onDownload($event)"
2193
- (zOnPreview)="onPreview($event)"
2194
- (zOnRemove)="onRemove($event)"
2195
- (zOnSelect)="toggleSelection($event)"
2196
- />
2197
- }
2198
- </div>
2199
- } @else {
2200
- <div class="flex flex-col gap-2">
2201
- @for (file of filteredFiles(); track file.id) {
2202
- <z-gallery-item
2203
- [file]="file"
2204
- zMode="list"
2205
- [zSize]="zSize()"
2206
- [zShowDownload]="zShowDownload()"
2207
- [zShowPreview]="zShowPreview()"
2208
- [zShowRemove]="zShowRemove()"
2209
- [zSelectable]="zSelectable()"
2210
- [zSelected]="isFileSelected(file)"
2211
- (zOnDownload)="onDownload($event)"
2212
- (zOnPreview)="onPreview($event)"
2213
- (zOnRemove)="onRemove($event)"
2214
- (zOnSelect)="toggleSelection($event)"
2215
- />
2216
- }
2217
- </div>
2218
- }
2219
- } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {
2220
- <z-empty zIcon="lucideSearchX" [zMessage]="'i18n_z_ui_gallery_no_search_results' | translate" zSize="sm" />
2221
- } @else if (!zLoading()) {
2222
- <z-empty
2223
- [zIcon]="zEmptyIcon()"
2224
- [zMessage]="zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)"
2225
- zSize="sm"
2226
- />
2227
- }
2228
- </div>
2229
- `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange", "zActiveIndexChange", "zActiveValueChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", inputs: ["zValue"], 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", "zLoading", "zLoadingOutline", "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: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2051
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonRows: { classPropertyName: "zSkeletonRows", publicName: "zSkeletonRows", isSignal: true, isRequired: false, transformFunction: null }, zSkeletonItems: { classPropertyName: "zSkeletonItems", publicName: "zSkeletonItems", 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 }, zPdfViewerConfig: { classPropertyName: "zPdfViewerConfig", publicName: "zPdfViewerConfig", 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", zSearchChange: "zSearchChange", zControl: "zControl", zSelectionChange: "zSelectionChange", zOnAction: "zOnAction" }, host: { classAttribute: "z-gallery block" }, exportAs: ["zGallery"], ngImport: i0, template: "<div [class]=\"containerClasses()\">\n @if (showHeader()) {\n <div class=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3\">\n @if (zTitle()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"7rem\" zHeight=\"1.25rem\" />\n } @else {\n <h3 class=\"text-sm font-medium\">{{ zTitle() }}</h3>\n }\n }\n\n @if (zShowSearch()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"16rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"0.375rem\" />\n } @else {\n <z-input\n zSearch\n [zSize]=\"searchInputSize()\"\n [zPlaceholder]=\"zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)\"\n [zDebounce]=\"zSearchDebounce()\"\n [ngModel]=\"searchInputQuery()\"\n (ngModelChange)=\"searchInputQuery.set($event)\"\n (zOnSearch)=\"onSearchChange($event)\"\n class=\"w-64\" />\n }\n }\n </div>\n\n @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"5rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"0.375rem\" />\n } @else {\n <z-button-group [(zActive)]=\"modeIndex\">\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideLayoutGrid\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideList\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n </z-button-group>\n }\n }\n </div>\n }\n\n @if (zLoading()) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card overflow-hidden rounded-md border shadow-sm\">\n <z-skeleton [zHeight]=\"skeletonMediaHeight()\" zRadius=\"0\" />\n <div class=\"p-3\">\n <z-skeleton zWidth=\"75%\" zHeight=\"1.25rem\" />\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm\">\n <z-skeleton class=\"shrink-0\" zWidth=\"2.75rem\" zHeight=\"2.75rem\" zRadius=\"0.125rem\" />\n <div class=\"min-w-0 flex-1 space-y-2\">\n <z-skeleton zWidth=\"40%\" zHeight=\"0.875rem\" />\n <z-skeleton zWidth=\"25%\" zHeight=\"0.75rem\" />\n </div>\n <z-skeleton class=\"shrink-0\" zWidth=\"3.5rem\" zHeight=\"1.5rem\" zRadius=\"0.125rem\" />\n </div>\n }\n </div>\n }\n } @else if (zSelectable() && filteredFiles().length > 0) {\n <div\n class=\"bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3\">\n <div class=\"flex items-center gap-3\">\n <z-checkbox\n [zChecked]=\"isAllSelected()\"\n [zIndeterminate]=\"isIndeterminate()\"\n (zChange)=\"toggleSelectAll()\"\n zSize=\"sm\" />\n <span class=\"text-muted-foreground text-sm\">\n @if (selectedCount() > 0) {\n {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}\n } @else {\n {{ 'i18n_z_ui_gallery_select_all' | translate }}\n }\n </span>\n </div>\n\n @if (selectedCount() > 0) {\n <div class=\"flex items-center gap-1\">\n @if (zShowDownload()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDownload()\"\n class=\"text-muted-foreground hover:text-foreground\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_download' | translate }}</span>\n </button>\n }\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDelete()\"\n class=\"text-destructive hover:text-destructive\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>\n </button>\n }\n <button z-button zType=\"ghost\" zSize=\"xs\" (click)=\"deselectAll()\">\n <i z-icon zType=\"lucideX\" zSize=\"14\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n @if (!zLoading() && filteredFiles().length > 0) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"grid\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"list\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n }\n } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {\n <z-empty zIcon=\"lucideSearchX\" [zMessage]=\"'i18n_z_ui_gallery_no_search_results' | translate\" zSize=\"sm\" />\n } @else if (!zLoading()) {\n <z-empty\n [zIcon]=\"zEmptyIcon()\"\n [zMessage]=\"zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)\"\n zSize=\"sm\" />\n }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.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: ZButtonGroupComponent, selector: "z-button-group", inputs: ["zClass", "zOrientation", "zActive"], outputs: ["zActiveChange", "zActiveIndexChange", "zActiveValueChange"], exportAs: ["zButtonGroup"] }, { kind: "directive", type: ZButtonGroupItemDirective, selector: "[z-button-group-item]", inputs: ["zValue"], 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", "zLoading", "zLoadingOutline", "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: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
2230
2052
  }
2231
2053
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: ZGalleryComponent, decorators: [{
2232
2054
  type: Component,
2233
- args: [{
2234
- selector: 'z-gallery',
2235
- imports: [
2055
+ args: [{ selector: 'z-gallery', imports: [
2236
2056
  FormsModule,
2237
2057
  TranslatePipe,
2238
2058
  ZGalleryItemComponent,
@@ -2244,194 +2064,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
2244
2064
  ZEmptyComponent,
2245
2065
  ZInputComponent,
2246
2066
  ZSkeletonComponent,
2247
- ],
2248
- standalone: true,
2249
- template: `
2250
- <div [class]="containerClasses()">
2251
- @if (showHeader()) {
2252
- <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
2253
- <div class="flex items-center gap-3">
2254
- @if (zTitle()) {
2255
- @if (zLoading()) {
2256
- <z-skeleton zWidth="7rem" zHeight="1.25rem" />
2257
- } @else {
2258
- <h3 class="text-sm font-medium">{{ zTitle() }}</h3>
2259
- }
2260
- }
2261
-
2262
- @if (zShowSearch()) {
2263
- @if (zLoading()) {
2264
- <z-skeleton zWidth="16rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
2265
- } @else {
2266
- <z-input
2267
- zSearch
2268
- [zSize]="searchInputSize()"
2269
- [zPlaceholder]="zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)"
2270
- [zDebounce]="zSearchDebounce()"
2271
- [ngModel]="searchInputQuery()"
2272
- (ngModelChange)="searchInputQuery.set($event)"
2273
- (zOnSearch)="onSearchChange($event)"
2274
- class="w-64"
2275
- />
2276
- }
2277
- }
2278
- </div>
2279
-
2280
- @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {
2281
- @if (zLoading()) {
2282
- <z-skeleton zWidth="5rem" [zHeight]="headerControlHeight()" zRadius="0.375rem" />
2283
- } @else {
2284
- <z-button-group [(zActive)]="modeIndex">
2285
- <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
2286
- <i z-icon zType="lucideLayoutGrid" [zSize]="toggleIconSize()"></i>
2287
- </button>
2288
- <button z-button zType="outline" [zSize]="zToggleSize()" z-button-group-item>
2289
- <i z-icon zType="lucideList" [zSize]="toggleIconSize()"></i>
2290
- </button>
2291
- </z-button-group>
2292
- }
2293
- }
2294
- </div>
2295
- }
2296
-
2297
- @if (zLoading()) {
2298
- @if (currentMode() === 'grid') {
2299
- <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
2300
- @for (item of skeletonItems(); track item) {
2301
- <div class="border-border bg-card overflow-hidden rounded-md border shadow-sm">
2302
- <z-skeleton [zHeight]="skeletonMediaHeight()" zRadius="0" />
2303
- <div class="p-3">
2304
- <z-skeleton zWidth="75%" zHeight="1.25rem" />
2305
- </div>
2306
- </div>
2307
- }
2308
- </div>
2309
- } @else {
2310
- <div class="flex flex-col gap-2">
2311
- @for (item of skeletonItems(); track item) {
2312
- <div class="border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm">
2313
- <z-skeleton class="shrink-0" zWidth="2.75rem" zHeight="2.75rem" zRadius="0.125rem" />
2314
- <div class="min-w-0 flex-1 space-y-2">
2315
- <z-skeleton zWidth="40%" zHeight="0.875rem" />
2316
- <z-skeleton zWidth="25%" zHeight="0.75rem" />
2317
- </div>
2318
- <z-skeleton class="shrink-0" zWidth="3.5rem" zHeight="1.5rem" zRadius="0.125rem" />
2319
- </div>
2320
- }
2321
- </div>
2322
- }
2323
- } @else if (zSelectable() && filteredFiles().length > 0) {
2324
- <div
2325
- class="bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3"
2326
- >
2327
- <div class="flex items-center gap-3">
2328
- <z-checkbox
2329
- [zChecked]="isAllSelected()"
2330
- [zIndeterminate]="isIndeterminate()"
2331
- (zChange)="toggleSelectAll()"
2332
- zSize="sm"
2333
- />
2334
- <span class="text-muted-foreground text-sm">
2335
- @if (selectedCount() > 0) {
2336
- {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}
2337
- } @else {
2338
- {{ 'i18n_z_ui_gallery_select_all' | translate }}
2339
- }
2340
- </span>
2341
- </div>
2342
-
2343
- @if (selectedCount() > 0) {
2344
- <div class="flex items-center gap-1">
2345
- @if (zShowDownload()) {
2346
- <button
2347
- z-button
2348
- zType="ghost"
2349
- zSize="xs"
2350
- (click)="onBulkDownload()"
2351
- class="text-muted-foreground hover:text-foreground"
2352
- >
2353
- <i z-icon zType="lucideDownload" zSize="14"></i>
2354
- <span class="ml-1">{{ 'i18n_z_ui_gallery_download' | translate }}</span>
2355
- </button>
2356
- }
2357
- @if (zShowRemove()) {
2358
- <button
2359
- z-button
2360
- zType="ghost"
2361
- zSize="xs"
2362
- (click)="onBulkDelete()"
2363
- class="text-destructive hover:text-destructive"
2364
- >
2365
- <i z-icon zType="lucideTrash2" zSize="14"></i>
2366
- <span class="ml-1">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>
2367
- </button>
2368
- }
2369
- <button z-button zType="ghost" zSize="xs" (click)="deselectAll()">
2370
- <i z-icon zType="lucideX" zSize="14"></i>
2371
- </button>
2372
- </div>
2373
- }
2374
- </div>
2375
- }
2376
-
2377
- @if (!zLoading() && filteredFiles().length > 0) {
2378
- @if (currentMode() === 'grid') {
2379
- <div class="grid gap-4" [class]="gridColumnsClass()" [style.gridTemplateColumns]="gridTemplateColumns()">
2380
- @for (file of filteredFiles(); track file.id) {
2381
- <z-gallery-item
2382
- [file]="file"
2383
- zMode="grid"
2384
- [zSize]="zSize()"
2385
- [zShowDownload]="zShowDownload()"
2386
- [zShowPreview]="zShowPreview()"
2387
- [zShowRemove]="zShowRemove()"
2388
- [zSelectable]="zSelectable()"
2389
- [zSelected]="isFileSelected(file)"
2390
- (zOnDownload)="onDownload($event)"
2391
- (zOnPreview)="onPreview($event)"
2392
- (zOnRemove)="onRemove($event)"
2393
- (zOnSelect)="toggleSelection($event)"
2394
- />
2395
- }
2396
- </div>
2397
- } @else {
2398
- <div class="flex flex-col gap-2">
2399
- @for (file of filteredFiles(); track file.id) {
2400
- <z-gallery-item
2401
- [file]="file"
2402
- zMode="list"
2403
- [zSize]="zSize()"
2404
- [zShowDownload]="zShowDownload()"
2405
- [zShowPreview]="zShowPreview()"
2406
- [zShowRemove]="zShowRemove()"
2407
- [zSelectable]="zSelectable()"
2408
- [zSelected]="isFileSelected(file)"
2409
- (zOnDownload)="onDownload($event)"
2410
- (zOnPreview)="onPreview($event)"
2411
- (zOnRemove)="onRemove($event)"
2412
- (zOnSelect)="toggleSelection($event)"
2413
- />
2414
- }
2415
- </div>
2416
- }
2417
- } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {
2418
- <z-empty zIcon="lucideSearchX" [zMessage]="'i18n_z_ui_gallery_no_search_results' | translate" zSize="sm" />
2419
- } @else if (!zLoading()) {
2420
- <z-empty
2421
- [zIcon]="zEmptyIcon()"
2422
- [zMessage]="zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)"
2423
- zSize="sm"
2424
- />
2425
- }
2426
- </div>
2427
- `,
2428
- changeDetection: ChangeDetectionStrategy.OnPush,
2429
- encapsulation: ViewEncapsulation.None,
2430
- host: {
2067
+ ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
2431
2068
  class: 'z-gallery block',
2432
- },
2433
- exportAs: 'zGallery',
2434
- }]
2069
+ }, exportAs: 'zGallery', template: "<div [class]=\"containerClasses()\">\n @if (showHeader()) {\n <div class=\"mb-4 flex flex-wrap items-center justify-between gap-3\">\n <div class=\"flex items-center gap-3\">\n @if (zTitle()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"7rem\" zHeight=\"1.25rem\" />\n } @else {\n <h3 class=\"text-sm font-medium\">{{ zTitle() }}</h3>\n }\n }\n\n @if (zShowSearch()) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"16rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"0.375rem\" />\n } @else {\n <z-input\n zSearch\n [zSize]=\"searchInputSize()\"\n [zPlaceholder]=\"zSearchPlaceholder() || ('i18n_z_ui_gallery_search_placeholder' | translate)\"\n [zDebounce]=\"zSearchDebounce()\"\n [ngModel]=\"searchInputQuery()\"\n (ngModelChange)=\"searchInputQuery.set($event)\"\n (zOnSearch)=\"onSearchChange($event)\"\n class=\"w-64\" />\n }\n }\n </div>\n\n @if (zShowModeToggle() && (zFiles().length > 0 || zLoading())) {\n @if (zLoading()) {\n <z-skeleton zWidth=\"5rem\" [zHeight]=\"headerControlHeight()\" zRadius=\"0.375rem\" />\n } @else {\n <z-button-group [(zActive)]=\"modeIndex\">\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideLayoutGrid\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n <button z-button zType=\"outline\" [zSize]=\"zToggleSize()\" z-button-group-item>\n <i z-icon zType=\"lucideList\" [zSize]=\"toggleIconSize()\"></i>\n </button>\n </z-button-group>\n }\n }\n </div>\n }\n\n @if (zLoading()) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card overflow-hidden rounded-md border shadow-sm\">\n <z-skeleton [zHeight]=\"skeletonMediaHeight()\" zRadius=\"0\" />\n <div class=\"p-3\">\n <z-skeleton zWidth=\"75%\" zHeight=\"1.25rem\" />\n </div>\n </div>\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (item of skeletonItems(); track item) {\n <div class=\"border-border bg-card flex items-center gap-3 rounded-sm border px-3 py-2.5 shadow-sm\">\n <z-skeleton class=\"shrink-0\" zWidth=\"2.75rem\" zHeight=\"2.75rem\" zRadius=\"0.125rem\" />\n <div class=\"min-w-0 flex-1 space-y-2\">\n <z-skeleton zWidth=\"40%\" zHeight=\"0.875rem\" />\n <z-skeleton zWidth=\"25%\" zHeight=\"0.75rem\" />\n </div>\n <z-skeleton class=\"shrink-0\" zWidth=\"3.5rem\" zHeight=\"1.5rem\" zRadius=\"0.125rem\" />\n </div>\n }\n </div>\n }\n } @else if (zSelectable() && filteredFiles().length > 0) {\n <div\n class=\"bg-muted/30 shadow-card dark:!border-border mb-4 flex h-11 items-center justify-between gap-3 rounded-[0.375rem] border border-transparent px-3\">\n <div class=\"flex items-center gap-3\">\n <z-checkbox\n [zChecked]=\"isAllSelected()\"\n [zIndeterminate]=\"isIndeterminate()\"\n (zChange)=\"toggleSelectAll()\"\n zSize=\"sm\" />\n <span class=\"text-muted-foreground text-sm\">\n @if (selectedCount() > 0) {\n {{ selectedCount() }} {{ 'i18n_z_ui_gallery_selected' | translate }}\n } @else {\n {{ 'i18n_z_ui_gallery_select_all' | translate }}\n }\n </span>\n </div>\n\n @if (selectedCount() > 0) {\n <div class=\"flex items-center gap-1\">\n @if (zShowDownload()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDownload()\"\n class=\"text-muted-foreground hover:text-foreground\">\n <i z-icon zType=\"lucideDownload\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_download' | translate }}</span>\n </button>\n }\n @if (zShowRemove()) {\n <button\n z-button\n zType=\"ghost\"\n zSize=\"xs\"\n (click)=\"onBulkDelete()\"\n class=\"text-destructive hover:text-destructive\">\n <i z-icon zType=\"lucideTrash2\" zSize=\"14\"></i>\n <span class=\"ml-1\">{{ 'i18n_z_ui_gallery_delete' | translate }}</span>\n </button>\n }\n <button z-button zType=\"ghost\" zSize=\"xs\" (click)=\"deselectAll()\">\n <i z-icon zType=\"lucideX\" zSize=\"14\"></i>\n </button>\n </div>\n }\n </div>\n }\n\n @if (!zLoading() && filteredFiles().length > 0) {\n @if (currentMode() === 'grid') {\n <div class=\"grid gap-4\" [class]=\"gridColumnsClass()\" [style.gridTemplateColumns]=\"gridTemplateColumns()\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"grid\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n } @else {\n <div class=\"flex flex-col gap-2\">\n @for (file of filteredFiles(); track file.id) {\n <z-gallery-item\n [file]=\"file\"\n zMode=\"list\"\n [zSize]=\"zSize()\"\n [zShowDownload]=\"zShowDownload()\"\n [zShowPreview]=\"zShowPreview()\"\n [zShowRemove]=\"zShowRemove()\"\n [zSelectable]=\"zSelectable()\"\n [zSelected]=\"isFileSelected(file)\"\n (zOnDownload)=\"onDownload($event)\"\n (zOnPreview)=\"onPreview($event)\"\n (zOnRemove)=\"onRemove($event)\"\n (zOnSelect)=\"toggleSelection($event)\" />\n }\n </div>\n }\n } @else if (!zLoading() && zFiles().length > 0 && searchQuery()) {\n <z-empty zIcon=\"lucideSearchX\" [zMessage]=\"'i18n_z_ui_gallery_no_search_results' | translate\" zSize=\"sm\" />\n } @else if (!zLoading()) {\n <z-empty\n [zIcon]=\"zEmptyIcon()\"\n [zMessage]=\"zEmptyText() || ('i18n_z_ui_gallery_no_files' | translate)\"\n zSize=\"sm\" />\n }\n</div>\n" }]
2435
2070
  }], 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 }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zSkeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonRows", required: false }] }], zSkeletonItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSkeletonItems", 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 }] }], zPdfViewerConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "zPdfViewerConfig", 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"] }], zSearchChange: [{ type: i0.Output, args: ["zSearchChange"] }], zControl: [{ type: i0.Output, args: ["zControl"] }], zSelectionChange: [{ type: i0.Output, args: ["zSelectionChange"] }], zOnAction: [{ type: i0.Output, args: ["zOnAction"] }] } });
2436
2071
 
2437
2072
  class ZGalleryFileIconComponent {