c3-components 0.1.1 → 0.2.0

package/fesm2022/c3-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, HostBinding, model } from '@angular/core';
+import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, signal, ViewContainerRef, inject, Injector, effect, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, input, output, viewChild, computed, HostBinding, model } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2$1 from '@angular/forms';
@@ -24,8 +24,11 @@ import * as i5$1 from '@angular/material/toolbar';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import 'reflect-metadata';
 import * as i1$4 from '@angular/common/http';
-import { HttpClient, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
 import * as i1$3 from '@angular/platform-browser';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i5$2 from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import autoAnimate from '@formkit/auto-animate';
@@ -900,16 +903,17 @@ class C3FileViewer {
         this.currentIndex = 0;
         this.index$.next(this.currentIndex);
         this.filesObjectUrl = value.map((file) => {
+            const objectUrl = file.objectUrl || this.createObjectURL(file);
             return {
                 ...file,
-                objectUrl: file.objectUrl || this.createObjectURL(file),
+                objectUrl,
             };
         });
     }
     get files() {
         return this._files;
     }
-    constructor({ config, files, }) {
+    constructor({ config, files, client, }) {
         this._config = DEFAULT_CONFIG;
         this.config$ = new BehaviorSubject(DEFAULT_CONFIG);
         this.fullscreen$ = new BehaviorSubject(false);
@@ -943,6 +947,8 @@ class C3FileViewer {
             this.config = config;
         if (files)
             this.files = files;
+        if (client)
+            this.client = client.get.bind(client);
         this.config$.subscribe((config) => {
             const { minHeight, maxHeight, minWidth, maxWidth, height, width } = config;
             this.style.minHeight = this.valueToCss(minHeight);
@@ -960,8 +966,7 @@ class C3FileViewer {
         return this.getFile(file.location).pipe(map((response) => URL.createObjectURL(response)), tap(() => this.onLoad(file)));
     }
     getFile(location) {
-        const client = this.config.customClient ||
-            inject(HttpClient).get.bind(inject(HttpClient));
+        const client = this.config.customClient || this.client;
         if (!client) {
             throw new Error('No http client provided. Please provide a custom client or import HttpClientModule');
         }
@@ -1179,6 +1184,188 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
                 }]
         }] });
 
+class C3FileDisplayCardComponent {
+    constructor() {
+        this.fileObjectUrl = input.required();
+        this.deletable = input(false);
+        this.size = input('32');
+        this.onDelete = output();
+        effect(() => {
+            console.log('fileObjectUrl', this.fileObjectUrl());
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<button\n  class=\"file-card border\"\n  [class.size-16]=\"size() === '16'\"\n  [class.size-32]=\"size() === '32'\"\n  [class.size-64]=\"size() === '64'\"\n  [class.size-128]=\"size() === '128'\"\n  [class.size-256]=\"size() === '256'\"\n>\n  @if(deletable()) {\n  <div class=\"actions\">\n    <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n  } @if(fileObjectUrl()) { @if(fileObjectUrl()!.type.startsWith('image')) {\n  <img\n    class=\"h-full w-full object-cover\"\n    [src]=\"(fileObjectUrl()!.objectUrl | async) || '/default-image.svg'\"\n    [alt]=\"fileObjectUrl()!.name\"\n  />\n  } @else if (fileObjectUrl()!.type.startsWith('application')) {\n  <mat-icon> file-pdf-box </mat-icon>\n  } @else if (fileObjectUrl()!.type.startsWith('video')) {\n  <mat-icon> video </mat-icon>\n  }\n\n  <div class=\"informations flex justify-between items-center\">\n    <span class=\"text-xs text-white\">\n      {{ fileObjectUrl()!.name }}\n    </span>\n  </div>\n  }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-display-card', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n  class=\"file-card border\"\n  [class.size-16]=\"size() === '16'\"\n  [class.size-32]=\"size() === '32'\"\n  [class.size-64]=\"size() === '64'\"\n  [class.size-128]=\"size() === '128'\"\n  [class.size-256]=\"size() === '256'\"\n>\n  @if(deletable()) {\n  <div class=\"actions\">\n    <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n      <mat-icon>delete</mat-icon>\n    </button>\n  </div>\n  } @if(fileObjectUrl()) { @if(fileObjectUrl()!.type.startsWith('image')) {\n  <img\n    class=\"h-full w-full object-cover\"\n    [src]=\"(fileObjectUrl()!.objectUrl | async) || '/default-image.svg'\"\n    [alt]=\"fileObjectUrl()!.name\"\n  />\n  } @else if (fileObjectUrl()!.type.startsWith('application')) {\n  <mat-icon> file-pdf-box </mat-icon>\n  } @else if (fileObjectUrl()!.type.startsWith('video')) {\n  <mat-icon> video </mat-icon>\n  }\n\n  <div class=\"informations flex justify-between items-center\">\n    <span class=\"text-xs text-white\">\n      {{ fileObjectUrl()!.name }}\n    </span>\n  </div>\n  }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class C3FileDisplayGridComponent {
+    constructor() {
+        this.files = input.required();
+        this.config = input();
+        this.deletable = input(false);
+        this.onDelete = output();
+        this.dialog = viewChild(C3FileViewerDialogComponent);
+        this.fileViewer = new C3FileViewer({
+            client: inject(HttpClient),
+        });
+        effect(() => {
+            this.fileViewer.files = this.files();
+        }, {
+            allowSignalWrites: true,
+        });
+        effect(() => {
+            if (this.config())
+                this.fileViewer.config = this.config();
+        }, {
+            allowSignalWrites: true,
+        });
+    }
+    openDialog($event, index) {
+        $event.stopPropagation();
+        this.fileViewer.currentIndex = index;
+        this.dialog()?.openDialog();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: C3FileDisplayGridComponent, isStandalone: true, selector: "c3-file-display-grid", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"c3-file-display-grid\">\n    @for (file of files(); track $index) {\n    <c3-file-display-card\n      [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n      (click)=\"openDialog($event, $index)\"\n      (onDelete)=\"onDelete.emit(file)\"\n    />\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: C3FileDisplayCardComponent, selector: "c3-file-display-card", inputs: ["fileObjectUrl", "deletable", "size"], outputs: ["onDelete"] }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-display-grid', standalone: true, imports: [CommonModule, C3FileDisplayCardComponent, C3FileViewerModule], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"c3-file-display-grid\">\n    @for (file of files(); track $index) {\n    <c3-file-display-card\n      [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n      (click)=\"openDialog($event, $index)\"\n      (onDelete)=\"onDelete.emit(file)\"\n    />\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class C3FileDisplayIconComponent {
+    constructor() {
+        this.fileType = input.required();
+        this.displayedIcon = computed(() => {
+            switch (this.fileType()) {
+                case 'image/webp':
+                case 'image/png':
+                case 'image/jpeg':
+                case 'image/jpg':
+                    return 'image';
+                case 'video/mp4':
+                case 'video/webm':
+                    return 'play_circle';
+                case 'application/pdf':
+                    return 'picture_as_pdf';
+                case 'application/msword':
+                case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+                    return 'description';
+                default:
+                    return 'content_copy';
+            }
+        });
+        this.color = computed(() => {
+            switch (this.fileType()) {
+                case 'image/webp':
+                case 'image/png':
+                case 'image/jpeg':
+                case 'image/jpg':
+                    return 'text-primary';
+                case 'video/mp4':
+                case 'video/webm':
+                    return 'text-secondary';
+                case 'application/pdf':
+                    return 'text-error';
+                case 'application/msword':
+                case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
+                    return 'text-success';
+                default:
+                    return 'text-gray';
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.0.1", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-display-icon', standalone: true, imports: [CommonModule, MatIconModule], template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"] }]
+        }] });
+
+class C3FileDisplayListComponent {
+    constructor() {
+        this.files = input.required();
+        this.config = input();
+        this.deletable = input(false);
+        this.onDelete = output();
+        this.dialog = viewChild(C3FileViewerDialogComponent);
+        this.fileViewer = new C3FileViewer({
+            client: inject(HttpClient),
+        });
+        effect(() => {
+            this.fileViewer.files = this.files();
+        }, {
+            allowSignalWrites: true,
+        });
+        effect(() => {
+            if (this.config())
+                this.fileViewer.config = this.config();
+        }, {
+            allowSignalWrites: true,
+        });
+    }
+    openDialog($event, index) {
+        $event.stopPropagation();
+        this.fileViewer.currentIndex = index;
+        this.dialog()?.openDialog();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<div class=\"header border-b dark:border-gray-500\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"icon\">\n    <mat-icon>more_vert</mat-icon>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button\n      class=\"flex w-full h-12 items-center border-b dark:border-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 text-start px-2\"\n    >\n      <div class=\"basis-[56px] w-[56px]\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"flex-auto basis-[304px] w-[304px]\">\n        <span>{{ file.name }}</span>\n      </div>\n      <div class=\"basis-[304px] w-[304px]\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\n      <div class=\"basis-[48px] w-[48px]\">\n        <button mat-icon-button>\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #menu=\"matMenu\">\n          <button mat-menu-item (click)=\"openDialog($event, $index)\">\n            Ouvrir\n          </button>\n          @if (deletable()) {\n          <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n          }\n        </mat-menu>\n      </div>\n    </button>\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}\n"], dependencies: [{ kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-display-list', standalone: true, imports: [
+                        C3FileViewerModule,
+                        C3FileDisplayIconComponent,
+                        CommonModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatNativeDateModule,
+                        MatMenuModule,
+                    ], template: "<!-- header -->\n<div class=\"header border-b dark:border-gray-500\">\n  <div class=\"title full\">\n    <span>Nom</span>\n  </div>\n  <div class=\"title\">\n    <span>Date d'ajout</span>\n  </div>\n  <div class=\"icon\">\n    <mat-icon>more_vert</mat-icon>\n  </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n  <div class=\"file-display-list\">\n    @for (file of files(); track $index) {\n    <button\n      class=\"flex w-full h-12 items-center border-b dark:border-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 text-start px-2\"\n    >\n      <div class=\"basis-[56px] w-[56px]\">\n        <c3-file-display-icon [fileType]=\"file.type\" />\n      </div>\n      <div class=\"flex-auto basis-[304px] w-[304px]\">\n        <span>{{ file.name }}</span>\n      </div>\n      <div class=\"basis-[304px] w-[304px]\">\n        <span>{{\n          file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n        }}</span>\n      </div>\n      <div class=\"basis-[48px] w-[48px]\">\n        <button mat-icon-button>\n          <mat-icon>more_vert</mat-icon>\n        </button>\n        <mat-menu #menu=\"matMenu\">\n          <button mat-menu-item (click)=\"openDialog($event, $index)\">\n            Ouvrir\n          </button>\n          @if (deletable()) {\n          <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n          }\n        </mat-menu>\n      </div>\n    </button>\n    }\n  </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}\n"] }]
+        }], ctorParameters: () => [] });
+
+class C3FileDisplayerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
+            C3FileDisplayGridComponent,
+            C3FileDisplayListComponent,
+            C3FileDisplayCardComponent,
+            C3FileDisplayIconComponent], exports: [C3FileDisplayGridComponent,
+            C3FileDisplayListComponent,
+            C3FileDisplayCardComponent,
+            C3FileDisplayIconComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
+            C3FileDisplayGridComponent,
+            C3FileDisplayListComponent,
+            C3FileDisplayCardComponent,
+            C3FileDisplayIconComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImport: i0, type: C3FileDisplayerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [
+                        CommonModule,
+                        C3FileDisplayGridComponent,
+                        C3FileDisplayListComponent,
+                        C3FileDisplayCardComponent,
+                        C3FileDisplayIconComponent,
+                    ],
+                    exports: [
+                        C3FileDisplayGridComponent,
+                        C3FileDisplayListComponent,
+                        C3FileDisplayCardComponent,
+                        C3FileDisplayIconComponent,
+                    ],
+                }]
+        }] });
+
 class C3ExpansionHeaderComponent {
     constructor() {
         this.title = input();
@@ -1324,28 +1511,6 @@ function booleanSignal(value) {
     return new BooleanSignal(value);
 }
 
-class C3Signal {
-    constructor(initialValue) {
-        this.value$ = new Subject();
-        this._signal = signal(initialValue);
-        effect(() => {
-            this.value$.next(this._signal());
-        });
-    }
-    get value() {
-        return this._signal();
-    }
-    set value(newValue) {
-        this._signal.set(newValue);
-    }
-    update(updateFn) {
-        this._signal.update(updateFn);
-    }
-}
-function c3Signal(initialValue) {
-    return new C3Signal(initialValue);
-}
-
 /*
  * Public API Surface of c3-components
  */
@@ -1354,5 +1519,5 @@ function c3Signal(initialValue) {
  * Generated bundle index. Do not edit.
  */
 
-export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal, c3Signal };
+export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
 //# sourceMappingURL=c3-components.mjs.map