c3-components 0.15.0 → 0.15.2

package/fesm2022/c3-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, signal, viewChild, TemplateRef, inject, ChangeDetectorRef, effect, Component, forwardRef, model, HostListener, Directive, NgModule, Inject, Injector, Injectable, Pipe, output, ViewEncapsulation, Optional, computed, InjectionToken, contentChild, contentChildren, ViewContainerRef, HostBinding, ElementRef, DestroyRef } from '@angular/core';
+import { input, signal, viewChild, TemplateRef, inject, ChangeDetectorRef, effect, Component, forwardRef, model, HostListener, Directive, NgModule, Inject, ViewContainerRef, Injector, Injectable, Pipe, output, ViewEncapsulation, Optional, computed, InjectionToken, contentChild, contentChildren, HostBinding, ElementRef, DestroyRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -380,14 +380,21 @@ class C3DialogEmbedChildComponent {
         this.dialogRef = dialogRef;
         this.data = data;
         this._cdr = _cdr;
-        this.target = viewChild.required('target');
+        this.target = viewChild('target', ...(ngDevMode ? [{ debugName: "target", read: ViewContainerRef }] : [{
+                read: ViewContainerRef,
+            }]));
         // On utilise un signal pour stocker la référence du composant créé
         this.createdComponent = signal(null, ...(ngDevMode ? [{ debugName: "createdComponent" }] : []));
     }
     ngAfterViewInit() {
         // Si on a un composant, on le crée dynamiquement
         if (this.data.component && !this.data.templateRef) {
-            const compRef = this.target().createComponent(this.data.component);
+            const targetRef = this.target();
+            if (!targetRef) {
+                console.error('ViewContainerRef not found');
+                return;
+            }
+            const compRef = targetRef.createComponent(this.data.component);
             this.createdComponent.set(compRef);
             // Injecter les inputs dans le composant
             if (this.data.inputs) {
@@ -432,7 +439,7 @@ class C3DialogEmbedChildComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogEmbedChildComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3DialogEmbedChildComponent, isStandalone: false, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: C3DialogEmbedChildComponent, isStandalone: false, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: `
     <div [class]="'dialog-content-container ' + (data.classContainer || '')">
       @if (data.toolbar) {
         <mat-toolbar [color]="data.toolbar.color || 'default'" class="py-1">
@@ -445,17 +452,17 @@ class C3DialogEmbedChildComponent {
           }
         </mat-toolbar>
       }
-    
+
       <div [class]="'dialog-content ' + (data.classContent || '')">
         <!-- Si templateRef est présent, on l'affiche directement,
         sinon on laisse la place au composant dynamique -->
         @if (data.templateRef) {
           <ng-container *ngTemplateOutlet="data.templateRef"></ng-container>
         } @else {
-          <ng-template #target></ng-template>
+          <ng-container #target></ng-container>
         }
       </div>
-    
+
       @if (data.actions && data.actions.length > 0) {
         <div [class]="'dialog-actions ' + (data.classActions || '')">
           @for (action of data.actions; track action.label) {
@@ -490,7 +497,7 @@ class C3DialogEmbedChildComponent {
         </div>
       }
     </div>
-    `, isInline: true, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
+  `, isInline: true, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "component", type: i2$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
             type: Component,
@@ -507,17 +514,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
           }
         </mat-toolbar>
       }
-    
+
       <div [class]="'dialog-content ' + (data.classContent || '')">
         <!-- Si templateRef est présent, on l'affiche directement,
         sinon on laisse la place au composant dynamique -->
         @if (data.templateRef) {
           <ng-container *ngTemplateOutlet="data.templateRef"></ng-container>
         } @else {
-          <ng-template #target></ng-template>
+          <ng-container #target></ng-container>
         }
       </div>
-    
+
       @if (data.actions && data.actions.length > 0) {
         <div [class]="'dialog-actions ' + (data.classActions || '')">
           @for (action of data.actions; track action.label) {
@@ -552,11 +559,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
         </div>
       }
     </div>
-    `, standalone: false, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
+  `, standalone: false, styles: [".dialog-content-container{display:flex;flex-direction:column;height:100%;padding:1rem;overflow:auto}.dialog-content-container .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}.dialog-content-container .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}.dialog-content-container .mat-toolbar span{color:inherit}.dialog-content-container .spacer{flex:1 1 auto;min-width:16px}.dialog-actions{display:flex;justify-content:flex-end;gap:.5rem}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]
-                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { target: [{ type: i0.ViewChild, args: ['target', { isSignal: true }] }] } });
+                }] }, { type: i0.ChangeDetectorRef }], propDecorators: { target: [{ type: i0.ViewChild, args: ['target', { ...{
+                            read: ViewContainerRef,
+                        }, isSignal: true }] }] } });
 
 class C3DialogTemplateComponent {
     constructor() {
@@ -990,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(() => {
@@ -1567,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();
@@ -1686,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 }] }] } });
 
 /**
@@ -1779,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 }); }
@@ -1789,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);
@@ -1802,6 +1831,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListHeaderCellDef]',
+                    standalone: true,
                 }]
         }] });
 class C3FileDisplayListCellDefDirective {
@@ -1815,6 +1845,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
             type: Directive,
             args: [{
                     selector: '[c3FileDisplayListCellDef]',
+                    standalone: true,
                 }]
         }] });
 
@@ -1858,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,
@@ -1962,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" }] : []));
@@ -2207,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 {
@@ -2325,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);
@@ -2339,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),