ngx-form-engine 0.0.1 → 0.1.0

package/README.md

@@ -1,16 +1,6 @@
 # NgxFormEngine
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.2.
-
-## Development server
-
-To start a local development server, run:
-
-```bash
-ng serve
-```
-
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 21.0.0.
 
 ## Code scaffolding
 
@@ -28,17 +18,32 @@ ng generate --help
 
 ## Building
 
-To build the project run:
+To build the library, run:
 
 ```bash
-ng build
+ng build ngx-form-engine
 ```
 
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ngx-form-engine
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
 
 ## Running unit tests
 
-To execute unit tests with the [Vitest](https://vitest.dev/) test runner, use the following command:
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
 ```bash
 ng test

package/fesm2022/ngx-form-engine-ds-mat-asset-grid.component-BwgOYuH_.mjs

@@ -0,0 +1,83 @@
+import { __decorate } from 'tslib';
+import * as i0 from '@angular/core';
+import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import { UntilDestroy } from '@ngneat/until-destroy';
+
+let DsMatAssetGridItemComponent = class DsMatAssetGridItemComponent {
+    item;
+    idx;
+    single;
+    htmlClass;
+    checked;
+    onChecked = new EventEmitter();
+    checkbox;
+    ngOnChanges(changes) {
+        if (changes['checked']?.currentValue == false) {
+            if (this.checkbox) {
+                this.checkbox.checked = false;
+            }
+        }
+    }
+    noConflictElements = ['input', 'a', 'button'];
+    toggleCheckbox(event, checkbox) {
+        if (this.noConflictElements.includes(event.target.tagName?.toLowerCase()) == false) {
+            checkbox.toggle();
+            this.onChecked.emit({ item: this.item, checked: checkbox.checked });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsMatAssetGridItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsMatAssetGridItemComponent, isStandalone: true, selector: "ds-mat-asset-grid-item", inputs: { item: "item", idx: "idx", single: "single", htmlClass: "htmlClass", checked: "checked" }, outputs: { onChecked: "onChecked" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: ["checkbox"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@defer {\n\t@if (item) {\n\t\t<div [attr.data-id]=\"item.id\" class=\"asset-grid-item\" [ngClass]=\"htmlClass\">\n\t\t\t<div class=\"asset-grid-item-image-container d-flex w-100\">\n\t\t\t\t<div class=\"asset-grid-item-image-overlay\" [id]=\"item.id\">\n\t\t\t\t\t<ds-mat-asset-render [item]=\"item\"></ds-mat-asset-render>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t[class.hide-until-loaded]=\"single\"\n\t\t\t\t\tclass=\"checkbox-overlay\"\n\t\t\t\t\t[class.loaded]=\"single ? checked : true\"\n\t\t\t\t\t(click)=\"toggleCheckbox($event, checkbox)\"\n\t\t\t\t>\n\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t[checked]=\"checked\"\n\t\t\t\t\t\tclass=\"grid-item-checkbox\"\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t#checkbox\n\t\t\t\t\t\t(change)=\"onChecked.emit({ item, checked: $event.checked })\"\n\t\t\t\t\t>\n\t\t\t\t\t</mat-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"grid-item-details d-flex flex-column gap-1\">\n\t\t\t\t<div class=\"item-property item-name mb-2\" [title]=\"item.originalFilename\">\n\t\t\t\t\t{{ item.originalFilename }}\n\t\t\t\t</div>\n\t\t\t\t<!-- <div class=\"item-property item-id\"><div>ID</div> <div>{{ item.id }}</div></div> -->\n\t\t\t\t<div class=\"item-property font-weight-bold\">\n\t\t\t\t\t<div>Size</div>\n\t\t\t\t\t<div>{{ item.size | bytes }}</div>\n\t\t\t\t</div>\n\n\t\t\t\t@if ((item.mimetype! | startsWith: 'image') && item.width && item.height) {\n\t\t\t\t\t<div class=\"item-property font-weight-bold\">\n\t\t\t\t\t\t<div>Dimensions</div>\n\t\t\t\t\t\t<div>{{ item.width }}x{{ item.height }}</div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<!-- <div class=\"item-property font-weight-bold\"><div>Type</div> <div>{{ item.mimetype }}</div></div> -->\n\t\t\t</div>\n\t\t</div>\n\t}\n}\n", styles: [".asset-grid-item{position:relative;display:flex;justify-content:flex-start;align-self:flex-start;overflow:hidden;cursor:pointer}@media(min-width:992px){.asset-grid-item{aspect-ratio:1}}@media(max-width:991px){.asset-grid-item{flex-direction:column;aspect-ratio:auto}}.asset-grid-item p:not(:last-child){margin-bottom:.2rem}.checkbox-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:10}.checkbox-overlay>.grid-item-checkbox{position:absolute;top:.5rem;left:.5rem;z-index:11}.grid-item-details{position:absolute;bottom:0;padding:1rem;width:100%;line-height:1.3;font-size:.75rem;background-color:#fff;opacity:0;pointer-events:none;transition:opacity .4s}.asset-grid-item:hover .grid-item-details,.asset-grid-item:focus-within .grid-item-details{opacity:1;pointer-events:auto}.action-buttons{display:flex;justify-content:space-between;align-items:center}.action-buttons button:hover,.action-buttons button:focus{text-decoration:underline}.item-property{display:flex;justify-content:space-between;align-items:center}.item-name{display:block;width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-grid-item-image-overlay{display:flex;justify-content:center;width:100%;height:100%}.asset-grid-item-image-container{position:relative}@media(max-width:991px){.asset-grid-item-image-container{aspect-ratio:1;overflow:hidden}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('@angular/common').then(m => m.NgClass), import('./ngx-form-engine-ngx-form-engine-DO3KUIIg.mjs').then(function (n) { return n.b6; }).then(m => m.DsMatAssetRenderComponent), import('@angular/material/checkbox').then(m => m.MatCheckbox), import('./ngx-form-engine-ngx-form-engine-DO3KUIIg.mjs').then(function (n) { return n.b5; }).then(m => m.FormatBytesPipe), import('./ngx-form-engine-ngx-form-engine-DO3KUIIg.mjs').then(function (n) { return n.b5; }).then(m => m.StartsWithPipe)]] });
+};
+DsMatAssetGridItemComponent = __decorate([
+    UntilDestroy()
+], DsMatAssetGridItemComponent);
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "21.0.6", ngImport: i0, type: DsMatAssetGridItemComponent, resolveDeferredDeps: () => [import('@angular/common').then(m => m.NgClass), import('./ngx-form-engine-ngx-form-engine-DO3KUIIg.mjs').then(function (n) { return n.b6; }).then(m => m.DsMatAssetRenderComponent), import('@angular/material/checkbox').then(m => m.MatCheckbox), import('./ngx-form-engine-ngx-form-engine-DO3KUIIg.mjs').then(function (n) { return n.b5; }).then(m => m.FormatBytesPipe), import('./ngx-form-engine-ngx-form-engine-DO3KUIIg.mjs').then(function (n) { return n.b5; }).then(m => m.StartsWithPipe)], resolveMetadata: (NgClass, DsMatAssetRenderComponent, MatCheckbox, FormatBytesPipe, StartsWithPipe) => ({ decorators: [{
+                type: Component,
+                args: [{ selector: 'ds-mat-asset-grid-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass, DsMatAssetRenderComponent, MatCheckbox, FormatBytesPipe, StartsWithPipe], template: "@defer {\n\t@if (item) {\n\t\t<div [attr.data-id]=\"item.id\" class=\"asset-grid-item\" [ngClass]=\"htmlClass\">\n\t\t\t<div class=\"asset-grid-item-image-container d-flex w-100\">\n\t\t\t\t<div class=\"asset-grid-item-image-overlay\" [id]=\"item.id\">\n\t\t\t\t\t<ds-mat-asset-render [item]=\"item\"></ds-mat-asset-render>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t[class.hide-until-loaded]=\"single\"\n\t\t\t\t\tclass=\"checkbox-overlay\"\n\t\t\t\t\t[class.loaded]=\"single ? checked : true\"\n\t\t\t\t\t(click)=\"toggleCheckbox($event, checkbox)\"\n\t\t\t\t>\n\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t[checked]=\"checked\"\n\t\t\t\t\t\tclass=\"grid-item-checkbox\"\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t#checkbox\n\t\t\t\t\t\t(change)=\"onChecked.emit({ item, checked: $event.checked })\"\n\t\t\t\t\t>\n\t\t\t\t\t</mat-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"grid-item-details d-flex flex-column gap-1\">\n\t\t\t\t<div class=\"item-property item-name mb-2\" [title]=\"item.originalFilename\">\n\t\t\t\t\t{{ item.originalFilename }}\n\t\t\t\t</div>\n\t\t\t\t<!-- <div class=\"item-property item-id\"><div>ID</div> <div>{{ item.id }}</div></div> -->\n\t\t\t\t<div class=\"item-property font-weight-bold\">\n\t\t\t\t\t<div>Size</div>\n\t\t\t\t\t<div>{{ item.size | bytes }}</div>\n\t\t\t\t</div>\n\n\t\t\t\t@if ((item.mimetype! | startsWith: 'image') && item.width && item.height) {\n\t\t\t\t\t<div class=\"item-property font-weight-bold\">\n\t\t\t\t\t\t<div>Dimensions</div>\n\t\t\t\t\t\t<div>{{ item.width }}x{{ item.height }}</div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<!-- <div class=\"item-property font-weight-bold\"><div>Type</div> <div>{{ item.mimetype }}</div></div> -->\n\t\t\t</div>\n\t\t</div>\n\t}\n}\n", styles: [".asset-grid-item{position:relative;display:flex;justify-content:flex-start;align-self:flex-start;overflow:hidden;cursor:pointer}@media(min-width:992px){.asset-grid-item{aspect-ratio:1}}@media(max-width:991px){.asset-grid-item{flex-direction:column;aspect-ratio:auto}}.asset-grid-item p:not(:last-child){margin-bottom:.2rem}.checkbox-overlay{position:absolute;inset:0;width:100%;height:100%;z-index:10}.checkbox-overlay>.grid-item-checkbox{position:absolute;top:.5rem;left:.5rem;z-index:11}.grid-item-details{position:absolute;bottom:0;padding:1rem;width:100%;line-height:1.3;font-size:.75rem;background-color:#fff;opacity:0;pointer-events:none;transition:opacity .4s}.asset-grid-item:hover .grid-item-details,.asset-grid-item:focus-within .grid-item-details{opacity:1;pointer-events:auto}.action-buttons{display:flex;justify-content:space-between;align-items:center}.action-buttons button:hover,.action-buttons button:focus{text-decoration:underline}.item-property{display:flex;justify-content:space-between;align-items:center}.item-name{display:block;width:90%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.asset-grid-item-image-overlay{display:flex;justify-content:center;width:100%;height:100%}.asset-grid-item-image-container{position:relative}@media(max-width:991px){.asset-grid-item-image-container{aspect-ratio:1;overflow:hidden}}\n"] }]
+            }], ctorParameters: null, propDecorators: { item: [{
+                    type: Input
+                }], idx: [{
+                    type: Input
+                }], single: [{
+                    type: Input
+                }], htmlClass: [{
+                    type: Input
+                }], checked: [{
+                    type: Input
+                }], onChecked: [{
+                    type: Output
+                }], checkbox: [{
+                    type: ViewChild,
+                    args: ['checkbox']
+                }] } }) });
+
+let DsMatAssetGridComponent = class DsMatAssetGridComponent {
+    items;
+    checkedIds;
+    single;
+    onItemChecked = new EventEmitter();
+    onArtefactClicked = new EventEmitter();
+    isAnimationFinished = false;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsMatAssetGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsMatAssetGridComponent, isStandalone: true, selector: "ds-mat-asset-grid", inputs: { items: "items", checkedIds: "checkedIds", single: "single" }, outputs: { onItemChecked: "onItemChecked", onArtefactClicked: "onArtefactClicked" }, ngImport: i0, template: "@if (items?.length) {\n\t<div class=\"grid asset-grid three-cols\">\n\t\t@for (item of items; track item.id) {\n\t\t\t<ds-mat-asset-grid-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\tclass=\"grid-item\"\n\t\t\t\t[idx]=\"$index\"\n\t\t\t\t[single]=\"single\"\n\t\t\t\t[tabIndex]=\"$index\"\n\t\t\t\t[checked]=\"checkedIds?.includes(item?.id!)\"\n\t\t\t\t(onChecked)=\"onItemChecked.emit($event)\"\n\t\t\t>\n\t\t\t</ds-mat-asset-grid-item>\n\t\t}\n\t</div>\n} @else {\n\t<div class=\"content-not-found d-flex justify-content-center align-items-center text-center\">\n\t\t<div class=\"py-4\">Files not found.</div>\n\t</div>\n}\n", styles: [".grid{display:grid;gap:0;flex:1;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;min-height:auto}@media screen and (min-width:1801px){.three-cols{grid-template-columns:repeat(6,minmax(0,1fr))}}@media screen and (max-width:1800px)and (min-width:1201px){.three-cols{grid-template-columns:repeat(5,minmax(0,1fr))}}@media screen and (max-width:1200px)and (min-width:992px){.three-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}@media screen and (max-width:991px){.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}.asset-grid{position:relative;min-height:2rem;z-index:1}.content-not-found{height:calc(100vh - var(--collection-header-height) - var(--header-top))}\n"], dependencies: [{ kind: "component", type: DsMatAssetGridItemComponent, selector: "ds-mat-asset-grid-item", inputs: ["item", "idx", "single", "htmlClass", "checked"], outputs: ["onChecked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+};
+DsMatAssetGridComponent = __decorate([
+    UntilDestroy()
+], DsMatAssetGridComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsMatAssetGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mat-asset-grid', changeDetection: ChangeDetectionStrategy.OnPush, imports: [DsMatAssetGridItemComponent], template: "@if (items?.length) {\n\t<div class=\"grid asset-grid three-cols\">\n\t\t@for (item of items; track item.id) {\n\t\t\t<ds-mat-asset-grid-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\tclass=\"grid-item\"\n\t\t\t\t[idx]=\"$index\"\n\t\t\t\t[single]=\"single\"\n\t\t\t\t[tabIndex]=\"$index\"\n\t\t\t\t[checked]=\"checkedIds?.includes(item?.id!)\"\n\t\t\t\t(onChecked)=\"onItemChecked.emit($event)\"\n\t\t\t>\n\t\t\t</ds-mat-asset-grid-item>\n\t\t}\n\t</div>\n} @else {\n\t<div class=\"content-not-found d-flex justify-content-center align-items-center text-center\">\n\t\t<div class=\"py-4\">Files not found.</div>\n\t</div>\n}\n", styles: [".grid{display:grid;gap:0;flex:1;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;min-height:auto}@media screen and (min-width:1801px){.three-cols{grid-template-columns:repeat(6,minmax(0,1fr))}}@media screen and (max-width:1800px)and (min-width:1201px){.three-cols{grid-template-columns:repeat(5,minmax(0,1fr))}}@media screen and (max-width:1200px)and (min-width:992px){.three-cols{grid-template-columns:repeat(4,minmax(0,1fr))}}@media screen and (max-width:991px){.three-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}.asset-grid{position:relative;min-height:2rem;z-index:1}.content-not-found{height:calc(100vh - var(--collection-header-height) - var(--header-top))}\n"] }]
+        }], propDecorators: { items: [{
+                type: Input
+            }], checkedIds: [{
+                type: Input
+            }], single: [{
+                type: Input
+            }], onItemChecked: [{
+                type: Output
+            }], onArtefactClicked: [{
+                type: Output
+            }] } });
+
+export { DsMatAssetGridComponent };
+//# sourceMappingURL=ngx-form-engine-ds-mat-asset-grid.component-BwgOYuH_.mjs.map

package/fesm2022/ngx-form-engine-ds-mat-asset-grid.component-BwgOYuH_.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngx-form-engine-ds-mat-asset-grid.component-BwgOYuH_.mjs","sources":["../../../projects/ngx-form-engine/src/lib/ds/providers/mat/ds-mat-asset-management/ds-mat-asset-browser/ds-mat-asset-grid-item/ds-mat-asset-grid-item.component.ts","../../../projects/ngx-form-engine/src/lib/ds/providers/mat/ds-mat-asset-management/ds-mat-asset-browser/ds-mat-asset-grid-item/ds-mat-asset-grid-item.component.html","../../../projects/ngx-form-engine/src/lib/ds/providers/mat/ds-mat-asset-management/ds-mat-asset-browser/ds-mat-asset-grid/ds-mat-asset-grid.component.ts","../../../projects/ngx-form-engine/src/lib/ds/providers/mat/ds-mat-asset-management/ds-mat-asset-browser/ds-mat-asset-grid/ds-mat-asset-grid.component.html"],"sourcesContent":["import {\n\tChangeDetectionStrategy,\n\tComponent,\n\tEventEmitter,\n\tInput,\n\tOnChanges,\n\tOutput,\n\tSimpleChanges,\n\tViewChild,\n} from '@angular/core';\nimport { UntilDestroy } from '@ngneat/until-destroy';\nimport { MatCheckbox } from '@angular/material/checkbox';\nimport { ProgressiveAsset } from '../../asset-upload.interface';\nimport { NgClass } from '@angular/common';\nimport { DsMatAssetRenderComponent } from '../../ds-mat-asset-render/ds-mat-asset-render.component';\nimport { FormatBytesPipe, StartsWithPipe } from '../../../../../pipes';\n\n@UntilDestroy()\n@Component({\n\tselector: 'ds-mat-asset-grid-item',\n\ttemplateUrl: './ds-mat-asset-grid-item.component.html',\n\tstyleUrl: './ds-mat-asset-grid-item.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [NgClass, DsMatAssetRenderComponent, MatCheckbox, FormatBytesPipe, StartsWithPipe],\n})\nexport class DsMatAssetGridItemComponent<T extends ProgressiveAsset> implements OnChanges {\n\t@Input() public item?: T;\n\t@Input() public idx?: number;\n\t@Input() public single?: boolean;\n\t@Input() public htmlClass?: string;\n\t@Input() public checked?: boolean;\n\n\t@Output() public onChecked: EventEmitter<{ item: any; checked: boolean }> = new EventEmitter();\n\t@ViewChild('checkbox') checkbox?: MatCheckbox;\n\n\tngOnChanges(changes: SimpleChanges): void {\n\t\tif (changes['checked']?.currentValue == false) {\n\t\t\tif (this.checkbox) {\n\t\t\t\tthis.checkbox.checked = false;\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate readonly noConflictElements = ['input', 'a', 'button'];\n\tpublic toggleCheckbox(event: any, checkbox: MatCheckbox) {\n\t\tif (this.noConflictElements.includes(event.target.tagName?.toLowerCase()) == false) {\n\t\t\tcheckbox.toggle();\n\t\t\tthis.onChecked.emit({ item: this.item, checked: checkbox.checked });\n\t\t}\n\t}\n}\n","@defer {\n\t@if (item) {\n\t\t<div [attr.data-id]=\"item.id\" class=\"asset-grid-item\" [ngClass]=\"htmlClass\">\n\t\t\t<div class=\"asset-grid-item-image-container d-flex w-100\">\n\t\t\t\t<div class=\"asset-grid-item-image-overlay\" [id]=\"item.id\">\n\t\t\t\t\t<ds-mat-asset-render [item]=\"item\"></ds-mat-asset-render>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t[class.hide-until-loaded]=\"single\"\n\t\t\t\t\tclass=\"checkbox-overlay\"\n\t\t\t\t\t[class.loaded]=\"single ? checked : true\"\n\t\t\t\t\t(click)=\"toggleCheckbox($event, checkbox)\"\n\t\t\t\t>\n\t\t\t\t\t<mat-checkbox\n\t\t\t\t\t\t[checked]=\"checked\"\n\t\t\t\t\t\tclass=\"grid-item-checkbox\"\n\t\t\t\t\t\tcolor=\"primary\"\n\t\t\t\t\t\t#checkbox\n\t\t\t\t\t\t(change)=\"onChecked.emit({ item, checked: $event.checked })\"\n\t\t\t\t\t>\n\t\t\t\t\t</mat-checkbox>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<div class=\"grid-item-details d-flex flex-column gap-1\">\n\t\t\t\t<div class=\"item-property item-name mb-2\" [title]=\"item.originalFilename\">\n\t\t\t\t\t{{ item.originalFilename }}\n\t\t\t\t</div>\n\t\t\t\t<!-- <div class=\"item-property item-id\"><div>ID</div> <div>{{ item.id }}</div></div> -->\n\t\t\t\t<div class=\"item-property font-weight-bold\">\n\t\t\t\t\t<div>Size</div>\n\t\t\t\t\t<div>{{ item.size | bytes }}</div>\n\t\t\t\t</div>\n\n\t\t\t\t@if ((item.mimetype! | startsWith: 'image') && item.width && item.height) {\n\t\t\t\t\t<div class=\"item-property font-weight-bold\">\n\t\t\t\t\t\t<div>Dimensions</div>\n\t\t\t\t\t\t<div>{{ item.width }}x{{ item.height }}</div>\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t\t<!-- <div class=\"item-property font-weight-bold\"><div>Type</div> <div>{{ item.mimetype }}</div></div> -->\n\t\t\t</div>\n\t\t</div>\n\t}\n}\n","import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';\nimport { UntilDestroy } from '@ngneat/until-destroy';\nimport { ProgressiveAsset } from '../../asset-upload.interface';\nimport { DsMatAssetGridItemComponent } from '../ds-mat-asset-grid-item/ds-mat-asset-grid-item.component';\n\n@UntilDestroy()\n@Component({\n\tselector: 'ds-mat-asset-grid',\n\ttemplateUrl: './ds-mat-asset-grid.component.html',\n\tstyleUrl: './ds-mat-asset-grid.component.scss',\n\tchangeDetection: ChangeDetectionStrategy.OnPush,\n\timports: [DsMatAssetGridItemComponent],\n})\nexport class DsMatAssetGridComponent<T extends ProgressiveAsset> {\n\t@Input() public items?: T[];\n\t@Input() public checkedIds?: number[];\n\t@Input() public single?: boolean;\n\n\t@Output() public onItemChecked: EventEmitter<{ item: any; checked: boolean }> =\n\t\tnew EventEmitter();\n\t@Output() public onArtefactClicked: EventEmitter<any> = new EventEmitter();\n\n\tpublic isAnimationFinished: boolean = false;\n}\n","@if (items?.length) {\n\t<div class=\"grid asset-grid three-cols\">\n\t\t@for (item of items; track item.id) {\n\t\t\t<ds-mat-asset-grid-item\n\t\t\t\t[item]=\"item\"\n\t\t\t\tclass=\"grid-item\"\n\t\t\t\t[idx]=\"$index\"\n\t\t\t\t[single]=\"single\"\n\t\t\t\t[tabIndex]=\"$index\"\n\t\t\t\t[checked]=\"checkedIds?.includes(item?.id!)\"\n\t\t\t\t(onChecked)=\"onItemChecked.emit($event)\"\n\t\t\t>\n\t\t\t</ds-mat-asset-grid-item>\n\t\t}\n\t</div>\n} @else {\n\t<div class=\"content-not-found d-flex justify-content-center align-items-center text-center\">\n\t\t<div class=\"py-4\">Files not found.</div>\n\t</div>\n}\n"],"names":[],"mappings":"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"}