c3-components 0.2.1 → 0.2.3

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

@@ -5,10 +5,14 @@ export declare class C3FileDisplayCardComponent {
     readonly fileObjectUrl: import("@angular/core").InputSignal<(FileMetadata & {
         objectUrl?: Observable<string> | undefined;
     }) | null>;
+    readonly displayFn: import("@angular/core").InputSignal<(file: FileMetadata) => string>;
     readonly deletable: import("@angular/core").InputSignal<boolean>;
     readonly size: import("@angular/core").InputSignal<"16" | "32" | "64" | "128" | "256">;
     readonly onDelete: import("@angular/core").OutputEmitterRef<void>;
-    constructor();
+    getFileType(): string;
+    getFileObjectUrl(): Observable<string> | null;
+    getFileName(): string;
+    getDisplayName(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayCardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<C3FileDisplayCardComponent, "c3-file-display-card", never, { "fileObjectUrl": { "alias": "fileObjectUrl"; "required": true; "isSignal": true; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3FileDisplayCardComponent, "c3-file-display-card", never, { "fileObjectUrl": { "alias": "fileObjectUrl"; "required": true; "isSignal": true; }; "displayFn": { "alias": "displayFn"; "required": false; "isSignal": true; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, never, never, true, never>;
 }

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

@@ -8,6 +8,9 @@ export declare class C3FileDisplayGridComponent {
         location: string;
     })[]>;
     readonly config: import("@angular/core").InputSignal<C3FileViewerConfig | undefined>;
+    readonly displayFn: import("@angular/core").InputSignal<(file: FileMetadata & {
+        location: string;
+    }) => string>;
     readonly deletable: import("@angular/core").InputSignal<boolean>;
     readonly onDelete: import("@angular/core").OutputEmitterRef<FileMetadata>;
     readonly dialog: import("@angular/core").Signal<C3FileViewerDialogComponent | undefined>;
@@ -15,5 +18,5 @@ export declare class C3FileDisplayGridComponent {
     constructor();
     openDialog($event: MouseEvent, index: number): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<C3FileDisplayGridComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<C3FileDisplayGridComponent, "c3-file-display-grid", never, { "files": { "alias": "files"; "required": true; "isSignal": true; }; "config": { "alias": "config"; "required": false; "isSignal": true; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3FileDisplayGridComponent, "c3-file-display-grid", 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, never, true, never>;
 }

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

@@ -8,6 +8,9 @@ export declare class C3FileDisplayListComponent {
         location: string;
     })[]>;
     readonly config: import("@angular/core").InputSignal<C3FileViewerConfig | undefined>;
+    readonly displayFn: import("@angular/core").InputSignal<(file: FileMetadata & {
+        location: string;
+    }) => string>;
     readonly deletable: import("@angular/core").InputSignal<boolean>;
     readonly onDelete: import("@angular/core").OutputEmitterRef<FileMetadata>;
     readonly dialog: import("@angular/core").Signal<C3FileViewerDialogComponent | undefined>;
@@ -15,5 +18,5 @@ export declare class C3FileDisplayListComponent {
     constructor();
     openDialog($event: MouseEvent, index: number): void;
     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; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, never, 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; }; "deletable": { "alias": "deletable"; "required": false; "isSignal": true; }; }, { "onDelete": "onDelete"; }, never, never, true, never>;
 }

package/lib/c3-signals/c3-boolean-signal.d.ts

@@ -1,8 +1,8 @@
 declare class BooleanSignal {
     private _signal;
-    constructor(initialValue: Boolean);
-    get value(): Boolean;
-    set value(newValue: Boolean);
+    constructor(initialValue: boolean);
+    get value(): boolean;
+    set value(newValue: boolean);
     toggle(): void;
     reset(): void;
     setToTrue(): void;

package/lib/c3-tree/c3-tree.component.d.ts

@@ -0,0 +1,28 @@
+import { FlatTreeControl } from '@angular/cdk/tree';
+import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
+import * as i0 from "@angular/core";
+export interface TreeType<T> {
+    id: number;
+    level: number;
+    name: string;
+    ancestorId?: number;
+    ancestor?: TreeType<T>;
+    children: TreeType<T>[];
+    rawData: T;
+}
+export interface FileNode<RawData> extends TreeType<RawData> {
+    expandable: boolean;
+}
+export declare class C3TreeComponent<RawData, T extends TreeType<RawData> = TreeType<RawData>> {
+    readonly treeData: import("@angular/core").ModelSignal<T[]>;
+    readonly isLoading: import("@angular/core").ModelSignal<boolean>;
+    readonly treeDataSelected: import("@angular/core").OutputEmitterRef<T>;
+    private _transformer;
+    constructor();
+    hasChild: (_: number, node: T) => boolean;
+    treeControl: FlatTreeControl<FileNode<RawData>, FileNode<RawData>>;
+    treeFlattener: MatTreeFlattener<TreeType<RawData>, FileNode<RawData>, FileNode<RawData>>;
+    dataSource: MatTreeFlatDataSource<TreeType<RawData>, FileNode<RawData>, FileNode<RawData>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3TreeComponent<any, any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<C3TreeComponent<any, any>, "c3-tree", never, { "treeData": { "alias": "treeData"; "required": true; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; }, { "treeData": "treeDataChange"; "isLoading": "isLoadingChange"; "treeDataSelected": "treeDataSelected"; }, never, ["*"], true, never>;
+}

package/lib/c3-tree/c3-tree.component.scss

@@ -0,0 +1,74 @@
+:host {
+  display: block;
+  width: 100%;
+  position: relative;
+  min-height: 100%;
+  padding: 4px 0;
+}
+
+.c3-tree-loader {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+mat-tree {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border: 1px solid var(--mat-divider-color);
+  border-radius: 4px;
+  overflow: auto;
+
+  mat-tree-node {
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    gap: 1rem;
+
+    &.has-children {
+      > button {
+        height: 32px;
+        width: 32px;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 1px solid transparent;
+        margin: 0.5rem;
+
+        &:hover {
+          border-color: var(--mat-divider-color);
+        }
+      }
+
+      &:hover {
+        background-color: var(--background-hover);
+      }
+
+      .mat-tree-node-content {
+        padding-right: 0.25rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+      }
+    }
+
+    &.children button {
+      width: 100%;
+      border-radius: 0.25rem;
+      padding: 0 1rem;
+      height: 2rem;
+      text-align: left;
+      &:hover {
+        background-color: var(--background-hover);
+      }
+    }
+
+    &:hover {
+      background-color: var(--background-hover);
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3-components",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "C3 Components Library",
   "author": "c3ulnta0rk",
   "license": "MIT",

package/public-api.d.ts

@@ -55,3 +55,7 @@ export * from './lib/c3-select-on-focus/c3-select-on-focus.directive';
  * Toggle Signal
  */
 export * from './lib/c3-signals/c3-boolean-signal';
+/**
+ * C3 Tree
+ */
+export * from './lib/c3-tree/c3-tree.component';