c3-components 0.12.0 → 0.12.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.
- package/fesm2022/c3-components.mjs +4 -3
- package/fesm2022/c3-components.mjs.map +1 -1
- package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list-column-def.directive.d.ts +2 -1
- package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list.component.scss +26 -67
- package/package.json +1 -1
|
@@ -1688,12 +1688,13 @@ class C3FileDisplayListColumnDefDirective {
|
|
|
1688
1688
|
this.title = input.required({
|
|
1689
1689
|
alias: 'c3FileDisplayListColumnDef',
|
|
1690
1690
|
});
|
|
1691
|
+
this.classList = input([]);
|
|
1691
1692
|
this._table = inject(C3_FILE_DISPLAY_LIST, { optional: true });
|
|
1692
1693
|
this.headerCellDef = contentChild(C3FileDisplayListHeaderCellDefDirective);
|
|
1693
1694
|
this.cellDef = contentChild(C3FileDisplayListCellDefDirective);
|
|
1694
1695
|
}
|
|
1695
1696
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1696
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: C3FileDisplayListColumnDefDirective, isStandalone: true, selector: "[c3FileDisplayListColumnDef]", inputs: { title: { classPropertyName: "title", publicName: "c3FileDisplayListColumnDef", isSignal: true, isRequired: true, transformFunction: null } }, queries: [{ propertyName: "headerCellDef", first: true, predicate: C3FileDisplayListHeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: C3FileDisplayListCellDefDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
1697
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.7", type: C3FileDisplayListColumnDefDirective, isStandalone: true, selector: "[c3FileDisplayListColumnDef]", inputs: { title: { classPropertyName: "title", publicName: "c3FileDisplayListColumnDef", isSignal: true, isRequired: true, transformFunction: null }, classList: { classPropertyName: "classList", publicName: "classList", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "headerCellDef", first: true, predicate: C3FileDisplayListHeaderCellDefDirective, descendants: true, isSignal: true }, { propertyName: "cellDef", first: true, predicate: C3FileDisplayListCellDefDirective, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
1697
1698
|
}
|
|
1698
1699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListColumnDefDirective, decorators: [{
|
|
1699
1700
|
type: Directive,
|
|
@@ -1764,7 +1765,7 @@ class C3FileDisplayListComponent {
|
|
|
1764
1765
|
provide: C3_FILE_DISPLAY_LIST,
|
|
1765
1766
|
useExisting: C3FileDisplayListComponent,
|
|
1766
1767
|
},
|
|
1767
|
-
], queries: [{ propertyName: "_columnDefs", predicate: C3FileDisplayListColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<
|
|
1768
|
+
], queries: [{ propertyName: "_columnDefs", predicate: C3FileDisplayListColumnDefDirective, isSignal: true }], viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n<!-- header -->\n <table class=\"file-table\">\n <thead>\n <tr>\n @for (columnName of columns(); track columnName) {\n <th [class.full]=\"columnName === 'name'\" [class.icon]=\"columnName === 'icon'\">\n @if (getColumnDef(columnName)?.headerCellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.headerCellDef()!.template\"></ng-container>\n } @else {\n @if (columnName === 'icon') {\n <span></span>\n } @else if (columnName === 'name') {\n <span>Nom</span>\n } @else if (columnName === 'date') {\n <span>Date d'ajout</span>\n }\n }\n </th>\n }\n <th class=\"actions\">\n <ng-content></ng-content>\n </th>\n </tr>\n </thead>\n <tbody>\n @for (file of files(); track $index) {\n <tr (click)=\"openDialog($event, $index)\">\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <td class=\"name full\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </td>\n } @else if (columnName === 'icon') {\n <td class=\"icon\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <c3-file-display-icon [fileType]=\"file.type\" />\n }\n </td>\n } @else {\n <td [classList]=\"getColumnDef(columnName)?.classList()\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n }\n }\n </td>\n }\n }\n <td class=\"actions\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\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 </td>\n </tr>\n }\n </tbody>\n </table>\n</c3-file-viewer-dialog>\n\n<!-- <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <div class=\"name\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </div>\n } @else if (columnName === 'icon') {\n <div class=\"icon-cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <div class=\"date-label\">\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n </div>\n }\n }\n </div>\n }\n }\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\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 </button>\n }\n</div> -->\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .file-table{width:100%;border-collapse:collapse}:host .file-table th,:host .file-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--mat-divider-color)}:host .file-table th{font-size:1.5rem;font-weight:700;background-color:var(--mat-table-header-container-background-color)}:host .file-table tr:hover{background-color:var(--background-hover)}:host .file-table .icon{width:56px;min-width:56px;text-align:center}:host .file-table :where(th,td):not(.full){width:0;white-space:nowrap}:host .file-table .actions{width:48px;text-align:center}\n"], dependencies: [{ kind: "directive", type: C3StopPropagationDirective, selector: "[c3-stop-click-propagation]" }, { 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: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: i2$2.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"] }, { kind: "directive", type: i5$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }] }); }
|
|
1768
1769
|
}
|
|
1769
1770
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
|
|
1770
1771
|
type: Component,
|
|
@@ -1782,7 +1783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1782
1783
|
provide: C3_FILE_DISPLAY_LIST,
|
|
1783
1784
|
useExisting: C3FileDisplayListComponent,
|
|
1784
1785
|
},
|
|
1785
|
-
], template: "<!-- header -->\n<
|
|
1786
|
+
], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n<!-- header -->\n <table class=\"file-table\">\n <thead>\n <tr>\n @for (columnName of columns(); track columnName) {\n <th [class.full]=\"columnName === 'name'\" [class.icon]=\"columnName === 'icon'\">\n @if (getColumnDef(columnName)?.headerCellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.headerCellDef()!.template\"></ng-container>\n } @else {\n @if (columnName === 'icon') {\n <span></span>\n } @else if (columnName === 'name') {\n <span>Nom</span>\n } @else if (columnName === 'date') {\n <span>Date d'ajout</span>\n }\n }\n </th>\n }\n <th class=\"actions\">\n <ng-content></ng-content>\n </th>\n </tr>\n </thead>\n <tbody>\n @for (file of files(); track $index) {\n <tr (click)=\"openDialog($event, $index)\">\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <td class=\"name full\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </td>\n } @else if (columnName === 'icon') {\n <td class=\"icon\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <c3-file-display-icon [fileType]=\"file.type\" />\n }\n </td>\n } @else {\n <td [classList]=\"getColumnDef(columnName)?.classList()\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n }\n }\n </td>\n }\n }\n <td class=\"actions\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\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 </td>\n </tr>\n }\n </tbody>\n </table>\n</c3-file-viewer-dialog>\n\n<!-- <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n @for (columnName of columns(); track columnName) {\n @if (columnName === 'name') {\n <div class=\"name\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <span>{{ displayFn()(file) }}</span>\n }\n </div>\n } @else if (columnName === 'icon') {\n <div class=\"icon-cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n }\n </div>\n } @else {\n <div class=\"cell\">\n @if (getColumnDef(columnName)?.cellDef()) {\n <ng-container *ngTemplateOutlet=\"getColumnDef(columnName)!.cellDef()!.template; context: { $implicit: file }\"></ng-container>\n } @else {\n @if (columnName === 'date') {\n <div class=\"date-label\">\n <span>{{ file.lastModified ? (file.lastModified | date:'medium') : '-' }}</span>\n </div>\n }\n }\n </div>\n }\n }\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" c3-stop-click-propagation>\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 </button>\n }\n</div> -->\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .file-table{width:100%;border-collapse:collapse}:host .file-table th,:host .file-table td{padding:.5rem;text-align:left;border-bottom:1px solid var(--mat-divider-color)}:host .file-table th{font-size:1.5rem;font-weight:700;background-color:var(--mat-table-header-container-background-color)}:host .file-table tr:hover{background-color:var(--background-hover)}:host .file-table .icon{width:56px;min-width:56px;text-align:center}:host .file-table :where(th,td):not(.full){width:0;white-space:nowrap}:host .file-table .actions{width:48px;text-align:center}\n"] }]
|
|
1786
1787
|
}], ctorParameters: () => [] });
|
|
1787
1788
|
|
|
1788
1789
|
class C3FileDisplayerModule {
|