c3-components 0.15.1 → 0.15.2

package/fesm2022/c3-components.mjs

@@ -999,10 +999,15 @@ class C3FileViewerComponent {
     constructor(moduleConfig, _http) {
         this.moduleConfig = moduleConfig;
         this._http = _http;
+        /** Height in pixels occupied by other elements (e.g. header), used to calculate viewer height. Defaults to 0. */
         this.screenHeightOccupied = input(0, ...(ngDevMode ? [{ debugName: "screenHeightOccupied" }] : [])); // In Px
+        /** The C3FileViewer instance to control the viewer. */
         this.fileViewer = input.required(...(ngDevMode ? [{ debugName: "fileViewer" }] : []));
+        /** Emits when the current file index changes. */
         this.indexChange = output();
+        /** Emits configuration changes. */
         this.configChange = output();
+        /** Emits custom events from the file viewer. */
         this.customFileEvent = output();
         // Setup subscriptions in constructor using effect
         effect(() => {
@@ -1576,11 +1581,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 class C3FileDisplayCardComponent {
     constructor() {
+        /**
+         * The file object/metadata to display. Can include an observable for the object URL.
+         */
         this.fileObjectUrl = input.required(...(ngDevMode ? [{ debugName: "fileObjectUrl" }] : []));
+        /**
+         * Function to extract the display name from the file metadata.
+         * Defaults to returning `file.name`.
+         */
         this.displayFn = input((file) => file.name, ...(ngDevMode ? [{ debugName: "displayFn" }] : []));
+        /** Whether the file can be deleted. Defaults to false. */
         this.deletable = input(false, ...(ngDevMode ? [{ debugName: "deletable" }] : []));
+        /** Size of the card. Options: '16', '32', '64', '128', '256'. Defaults to '32'. */
         this.size = input('32', ...(ngDevMode ? [{ debugName: "size" }] : []));
+        /** Emits when the delete button is clicked. */
         this.onDelete = output();
+        /** Emits when the download button/action is triggered. */
         this.onDownload = output();
         this.getFileType = computed(() => {
             const file = this.fileObjectUrl();
@@ -1695,7 +1711,7 @@ class C3FileDisplayIconComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-display-icon', 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"] }]
+            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"] }]
         }], propDecorators: { fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: true }] }] } });
 
 /**
@@ -1788,8 +1804,11 @@ class C3FileDisplayListColumnDefDirective {
             }]));
         this.classList = input([], ...(ngDevMode ? [{ debugName: "classList" }] : []));
         this._table = inject(C3_FILE_DISPLAY_LIST, { optional: true });
-        this.headerCellDef = contentChild(C3FileDisplayListHeaderCellDefDirective, ...(ngDevMode ? [{ debugName: "headerCellDef" }] : []));
-        this.cellDef = contentChild(C3FileDisplayListCellDefDirective, ...(ngDevMode ? [{ debugName: "cellDef" }] : []));
+        // contentChild searches in projected content (via ng-content)
+        // Note: contentChild may not find directives on ng-template in tests, but works in real usage
+        // when directives are projected via ng-content in the parent component
+        this.headerCellDef = contentChild(C3FileDisplayListHeaderCellDefDirective, ...(ngDevMode ? [{ debugName: "headerCellDef", descendants: true }] : [{ descendants: true }]));
+        this.cellDef = contentChild(C3FileDisplayListCellDefDirective, ...(ngDevMode ? [{ debugName: "cellDef", descendants: true }] : [{ descendants: true }]));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListColumnDefDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.14", 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 }); }
@@ -1798,8 +1817,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListColumnDef]',
+                    standalone: true,
                 }]
-        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3FileDisplayListColumnDef", required: true }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], headerCellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => C3FileDisplayListHeaderCellDefDirective), { isSignal: true }] }], cellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => C3FileDisplayListCellDefDirective), { isSignal: true }] }] } });
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "c3FileDisplayListColumnDef", required: true }] }], classList: [{ type: i0.Input, args: [{ isSignal: true, alias: "classList", required: false }] }], headerCellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => C3FileDisplayListHeaderCellDefDirective), { ...{ descendants: true }, isSignal: true }] }], cellDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => C3FileDisplayListCellDefDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 class C3FileDisplayListHeaderCellDefDirective {
     constructor() {
         this.template = inject(TemplateRef);
@@ -1811,6 +1831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListHeaderCellDef]',
+                    standalone: true,
                 }]
         }] });
 class C3FileDisplayListCellDefDirective {
@@ -1824,6 +1845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListCellDef]',
+                    standalone: true,
                 }]
         }] });
 
@@ -1867,7 +1889,7 @@ class C3FileDisplayListComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-file-display-list', imports: [
+            args: [{ selector: 'c3-file-display-list', standalone: true, imports: [
                         C3StopPropagationDirective,
                         C3FileViewerModule,
                         C3FileDisplayIconComponent,
@@ -1971,12 +1993,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }] } });
 
+/**
+ * C3ExpansionComponent
+ * A style-agnostic expansion panel. Provides the expansion logic and animation
+ * (via c3-auto-animate) but leaves styling to the consumer.
+ */
 class C3ExpansionComponent {
     get hostClass() {
         return 'c3-expansion';
     }
     constructor() {
+        /** Class to apply to the header element. Defaults to 'c3-expansion-header'. */
         this.headerClass = input('c3-expansion-header', ...(ngDevMode ? [{ debugName: "headerClass" }] : []));
+        /** Whether the panel is expanded. Two-way binding supported. */
         this.isExpanded = model(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : []));
         this._elementRef = inject(ElementRef);
         this.header = contentChild(C3ExpansionHeaderComponent, ...(ngDevMode ? [{ debugName: "header" }] : []));
@@ -2216,20 +2245,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 class C3TraceCardTitleComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: C3TraceCardTitleComponent, isStandalone: false, selector: "c3-trace-card-title", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: C3TraceCardTitleComponent, isStandalone: false, selector: "c3-trace-card-title", host: { classAttribute: "c3-trace-card-title" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardTitleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-trace-card-title', standalone: false, template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'c3-trace-card-title', standalone: false, host: {
+                        class: 'c3-trace-card-title',
+                    }, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class C3TraceCardContentComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: C3TraceCardContentComponent, isStandalone: false, selector: "c3-trace-card-content", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: C3TraceCardContentComponent, isStandalone: false, selector: "c3-trace-card-content", host: { classAttribute: "c3-trace-card-content" }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3TraceCardContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c3-trace-card-content', standalone: false, template: "<ng-content></ng-content>\n" }]
+            args: [{ selector: 'c3-trace-card-content', host: {
+                        class: 'c3-trace-card-content',
+                    }, standalone: false, template: "<ng-content></ng-content>\n" }]
         }] });
 
 class C3TraceCardAlignLeftDirective {
@@ -2334,6 +2367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * C3MenuComponent
+ * Wrapper for the side menu. It projects `c3-nav-item` components.
+ * Automatically handles `headless` mode via query params (managed by C3MenuService).
+ */
 class C3MenuComponent {
     constructor() {
         this._c3Menu = inject(C3MenuService);
@@ -2348,9 +2386,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 
 class C3NavItemComponent {
     constructor() {
+        /** The router link path for this navigation item. */
         this.route = input.required(...(ngDevMode ? [{ debugName: "route" }] : []));
+        /** The title/label of the navigation item. */
         this.itemTitle = input.required(...(ngDevMode ? [{ debugName: "itemTitle" }] : []));
+        /** Optional regex string to check if the item is active based on URL. If null, defaults to `route`. */
         this.check = input(null, ...(ngDevMode ? [{ debugName: "check" }] : []));
+        /** Whether the link is external (opens in new tab/window). Defaults to false. */
         this.isExternal = input(false, ...(ngDevMode ? [{ debugName: "isExternal" }] : []));
         this.element = viewChild('button', ...(ngDevMode ? [{ debugName: "element", read: (ElementRef) }] : [{
                 read: (ElementRef),