c3-components 0.11.9 → 0.12.1

package/lib/c3-dropdown/components/c3-dropdown.component.d.ts

@@ -1,7 +1,7 @@
 import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class C3DropdownComponent {
-    readonly panelClass: import("@angular/core").InputSignal<string | Set<string> | string[] | {
+    readonly panelClass: import("@angular/core").InputSignal<string | string[] | Set<string> | {
         [key: string]: any;
     } | undefined>;
     readonly isOpen: import("@angular/core").WritableSignal<boolean>;

package/lib/c3-dropdown/directives/c3-dropdown.trigger.d.ts

@@ -25,7 +25,7 @@ export declare class C3DropdownTrigger implements OnDestroy {
     /** Whether the dropdown is disabled. */
     readonly dropdownDisabled: import("@angular/core").InputSignal<boolean>;
     /** Classes to be passed to the dropdown menu. Supports the same syntax as `ngClass`. */
-    readonly dropdownClass: import("@angular/core").InputSignal<string | Set<string> | string[] | {
+    readonly dropdownClass: import("@angular/core").InputSignal<string | string[] | Set<string> | {
         [key: string]: any;
     }>;
     constructor(_element: ElementRef<HTMLElement>, _overlay: Overlay, _viewContainerRef: ViewContainerRef);

package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list-column-def.directive.d.ts

@@ -0,0 +1,21 @@
+import { TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class C3FileDisplayListColumnDefDirective {
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly classList: import("@angular/core").InputSignal<string[]>;
+    private readonly _table;
+    readonly headerCellDef: import("@angular/core").Signal<C3FileDisplayListHeaderCellDefDirective | undefined>;
+    readonly cellDef: import("@angular/core").Signal<C3FileDisplayListCellDefDirective | undefined>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListColumnDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C3FileDisplayListColumnDefDirective, "[c3FileDisplayListColumnDef]", never, { "title": { "alias": "c3FileDisplayListColumnDef"; "required": true; "isSignal": true; }; "classList": { "alias": "classList"; "required": false; "isSignal": true; }; }, {}, ["headerCellDef", "cellDef"], never, true, never>;
+}
+export declare class C3FileDisplayListHeaderCellDefDirective {
+    template: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListHeaderCellDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C3FileDisplayListHeaderCellDefDirective, "[c3FileDisplayListHeaderCellDef]", never, {}, {}, never, never, true, never>;
+}
+export declare class C3FileDisplayListCellDefDirective {
+    template: TemplateRef<any>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListCellDefDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<C3FileDisplayListCellDefDirective, "[c3FileDisplayListCellDef]", never, {}, {}, never, never, true, never>;
+}

package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list.component.d.ts

@@ -2,6 +2,7 @@ import { C3FileViewerDialogComponent } from '../../c3-file-viewer/components/pub
 import { FileMetadata } from '../../c3-file-viewer/models/file-metadata';
 import { C3FileViewer } from '../../c3-file-viewer/models/file-viewer';
 import { C3FileViewerConfig } from '../../c3-file-viewer/models/file-viewer-config.model';
+import { C3FileDisplayListColumnDefDirective } from './c3-file-display-list-column-def.directive';
 import * as i0 from "@angular/core";
 export declare class C3FileDisplayListComponent {
     readonly files: import("@angular/core").InputSignal<(FileMetadata & {
@@ -11,12 +12,16 @@ export declare class C3FileDisplayListComponent {
     readonly displayFn: import("@angular/core").InputSignal<(file: FileMetadata & {
         location: string;
     }) => string>;
+    readonly columns: import("@angular/core").InputSignal<string[]>;
     readonly deletable: import("@angular/core").InputSignal<boolean>;
     readonly onDelete: import("@angular/core").OutputEmitterRef<FileMetadata>;
     readonly dialog: import("@angular/core").Signal<C3FileViewerDialogComponent | undefined>;
+    private readonly _columnDefs;
+    private readonly _viewContainer;
     fileViewer: C3FileViewer;
     constructor();
     openDialog($event: MouseEvent, index: number): void;
+    getColumnDef(columnName: string): C3FileDisplayListColumnDefDirective | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<C3FileDisplayListComponent, "c3-file-display-list", never, { "files": { "alias": "files"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "displayFn": { "alias": "displayFn"; "required": false; "isSignal": true; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3FileDisplayListComponent, "c3-file-display-list", never, { "files": { "alias": "files"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "displayFn": { "alias": "displayFn"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, ["_columnDefs"], ["*"], true, never>;
 }

package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list.component.scss

@@ -3,62 +3,43 @@
   flex-direction: column;
   margin: 0.5rem;
 
-  .header {
-    display: flex;
-    align-items: center;
-    padding: 0 0.5rem;
-    border-bottom: 1px solid var(--mat-divider-color);
+  .file-table {
+    width: 100%;
+    border-collapse: collapse;
+
+    th,
+    td {
+      padding: 0.5rem;
+      text-align: left;
+      border-bottom: 1px solid var(--mat-divider-color);
+    }
 
-    .title {
-      flex-basis: 304px;
-      width: 304px;
+    th {
       font-size: 1.5rem;
       font-weight: bold;
-
-      &.full {
-        flex: auto;
-      }
+      background-color: var(--mat-table-header-container-background-color);
     }
 
-    .icon {
-      flex-basis: 40px;
-      width: 40px;
-    }
-  }
-
-  .file-display-list {
-    display: flex;
-    flex-direction: column;
-
-    > button {
-      display: flex;
-      flex-direction: row;
-      height: 3rem;
-      align-items: center;
-      border-bottom: 1px solid var(--mat-divider-color);
-      background-color: var(--mdc-protected-button-container-color);
-      text-align: start;
-      padding: 0 0.5rem;
-
+    tr {
       &:hover {
         background-color: var(--background-hover);
       }
+    }
 
-      .icon {
-        flex-basis: 56px;
-        width: 56px;
-      }
+    .icon {
+      width: 56px;
+      min-width: 56px;
+      text-align: center;
+    }
 
-      .name {
-        flex: auto;
-        flex-basis: 304px;
-        width: 304px;
-      }
+    :where(th, td):not(.full) {
+      width: 0;
+      white-space: nowrap;
+    }
 
-      .date-label {
-        flex-basis: 304px;
-        width: 304px;
-      }
+    .actions {
+      width: 48px;
+      text-align: center;
     }
   }
 }

package/lib/c3-file-displayer/c3-file-display-list/tokens.d.ts

@@ -0,0 +1,2 @@
+import { InjectionToken } from '@angular/core';
+export declare const C3_FILE_DISPLAY_LIST: InjectionToken<any>;

package/lib/c3-file-displayer/c3-file-displayer.module.d.ts

@@ -4,8 +4,9 @@ import * as i2 from "./c3-file-display-grid/c3-file-display-grid.component";
 import * as i3 from "./c3-file-display-list/c3-file-display-list.component";
 import * as i4 from "./c3-file-display-card/c3-file-display-card.component";
 import * as i5 from "./c3-file-display-icon/c3-file-display-icon.component";
+import * as i6 from "./c3-file-display-list/c3-file-display-list-column-def.directive";
 export declare class C3FileDisplayerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<C3FileDisplayerModule, never, [typeof i1.CommonModule, typeof i2.C3FileDisplayGridComponent, typeof i3.C3FileDisplayListComponent, typeof i4.C3FileDisplayCardComponent, typeof i5.C3FileDisplayIconComponent], [typeof i2.C3FileDisplayGridComponent, typeof i3.C3FileDisplayListComponent, typeof i4.C3FileDisplayCardComponent, typeof i5.C3FileDisplayIconComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<C3FileDisplayerModule, never, [typeof i1.CommonModule, typeof i2.C3FileDisplayGridComponent, typeof i3.C3FileDisplayListComponent, typeof i4.C3FileDisplayCardComponent, typeof i5.C3FileDisplayIconComponent, typeof i6.C3FileDisplayListColumnDefDirective, typeof i6.C3FileDisplayListHeaderCellDefDirective, typeof i6.C3FileDisplayListCellDefDirective], [typeof i2.C3FileDisplayGridComponent, typeof i3.C3FileDisplayListComponent, typeof i4.C3FileDisplayCardComponent, typeof i5.C3FileDisplayIconComponent, typeof i6.C3FileDisplayListColumnDefDirective, typeof i6.C3FileDisplayListHeaderCellDefDirective, typeof i6.C3FileDisplayListCellDefDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<C3FileDisplayerModule>;
 }

package/lib/c3-pdf-viewer/pdf-viewer-container/pdf-viewer-container.component.scss

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+  background-color: #a0a0a0;
+  position: relative;
+  pdf-viewer-header {
+    width: 100%;
+    background-color: #f0f0f0;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+    z-index: 100;
+  }
+
+  pdf-viewer-footer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+}

package/lib/c3-pdf-viewer/pdf-viewer-content/pdf-viewer-content.component.scss

@@ -0,0 +1,18 @@
+@use "pdfjs-dist/web/pdf_viewer.css";
+
+pdf-viewer-content {
+  position: relative;
+  display: block;
+  height: 100%;
+  width: 100%;
+  min-height: 500px;
+  min-width: 500px;
+  overflow: auto;
+  #viewerContainer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+}

package/lib/c3-pdf-viewer/pdf-viewer-header/pdf-viewer-header.component.scss

@@ -0,0 +1,6 @@
+:host {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem;
+}

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "c3-components",
-  "version": "0.11.9",
+  "version": "0.12.1",
   "description": "C3 Components Library",
   "author": "c3ulnta0rk",
   "license": "MIT",
   "homepage": "https://github.com/c3ulnta0rk/c3-components",
   "peerDependencies": {
-    "@angular/common": ">=16.0.0",
-    "@angular/core": ">=16.0.0",
-    "@angular/cdk": ">=16.0.0",
-    "@angular/material": ">=16.0.0",
+    "@angular/common": ">=19.1.0",
+    "@angular/core": ">=19.1.0",
+    "@angular/cdk": ">=19.1.0",
+    "@angular/material": ">=19.1.0",
     "autoprefixer": "^10.4.16",
-    "@formkit/auto-animate": "^0.8.2"
+    "@formkit/auto-animate": "^0.8.2",
+    "pdfjs-dist": "^5.1.2"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -36,6 +36,8 @@ export * from './lib/c3-file-displayer/c3-file-display-list/c3-file-display-list
 export * from './lib/c3-file-displayer/c3-file-display-icon/c3-file-display-icon.component';
 export * from './lib/c3-file-displayer/c3-file-display-grid/c3-file-display-grid.component';
 export * from './lib/c3-file-displayer/c3-file-display-card/c3-file-display-card.component';
+export * from './lib/c3-file-displayer/c3-file-display-list/c3-file-display-list-column-def.directive';
+export * from './lib/c3-file-displayer/c3-file-display-list/tokens';
 /**
  * Safe Url
  */
@@ -88,3 +90,6 @@ export * from './lib/c3-prevent-event/index';
 export * from './lib/c3-menu/c3-menu.module';
 export * from './lib/c3-menu/components/c3-menu/c3-menu.component';
 export * from './lib/c3-menu/components/c3-nav-item/c3-nav-item.component';
+/**
+ * C3 PDF Viewer
+ */