Type improvements

package.json

@@ -19,7 +19,8 @@
         "serve:ssr": "node dist/primeng/server/main.js",
         "build:ssr": "ng build --configuration=production && ng run primeng:server",
         "prerender": "ng run primeng:prerender",
-        "vercel-build": "npm run build:ssr"
+        "vercel-build": "npm run build:ssr",
+        "apidoc": "node ./api-generator/build-apidoc.ts"
     },
     "repository": {
         "type": "git",
@@ -85,6 +86,7 @@
         "rxjs": "~7.8.1",
         "ts-node": "~8.3.0",
         "tslib": "^2.5.0",
+        "typedoc": "0.24.7",
         "typescript": "5.0.4",
         "xlsx": "^0.18.5",
         "zone.js": "~0.13.0"

src/app/components/accordion/accordion.interface.ts

@@ -0,0 +1,47 @@
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Custom tab open event.
+ * @see {@link Accordion.onOpen}
+ */
+export interface AccordionTabOpenEvent {
+    /**
+     * Browser event.
+     */
+    originalEvent: Event;
+    /**
+     * Opened tab index.
+     */
+    index: number;
+}
+
+/**
+ * Custom tab close event.
+ * @see {@link Accordion.onClose}
+ * @extends {AccordionTabOpenEvent}
+ */
+export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
+
+/**
+ * Defines valid templates in Accordion.
+ * @group Templates
+ */
+export interface AccordionTemplates {
+    /**
+     * Custom template of content.
+     */
+    content: TemplateRef<any> | null;
+    /**
+     * Custom template of header.
+     */
+    header: TemplateRef<any> | null;
+    /**
+     * Custom template of icon.
+     */
+    icon(context: {
+        /**
+         * Data of the selected.
+         */
+        $implicit: any;
+    }): TemplateRef<{ $implicit: any }>;
+}

src/app/components/accordion/accordion.ts

@@ -1,10 +1,11 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
-import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Inject, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';
+import { AfterContentInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Inject, Input, NgModule, OnDestroy, Output, QueryList, TemplateRef, ViewEncapsulation, forwardRef } from '@angular/core';
 import { BlockableUI, Header, PrimeTemplate, SharedModule } from 'primeng/api';
-import { Subscription } from 'rxjs';
-import { ChevronRightIcon } from 'primeng/icons/chevronright';
 import { ChevronDownIcon } from 'primeng/icons/chevrondown';
+import { ChevronRightIcon } from 'primeng/icons/chevronright';
+import { Subscription } from 'rxjs';
+import { AccordionTabCloseEvent, AccordionTabOpenEvent } from './accordion.interface';
 
 let idx: number = 0;
 
@@ -86,41 +87,82 @@ let idx: number = 0;
     }
 })
 export class AccordionTab implements AfterContentInit, OnDestroy {
-    @Input() header: string;
-
-    @Input() headerStyle: any;
-
-    @Input() tabStyle: any;
-
-    @Input() contentStyle: any;
-
-    @Input() tabStyleClass: string;
-
-    @Input() headerStyleClass: string;
-
-    @Input() contentStyleClass: string;
-
-    @Input() disabled: boolean;
-
+    /**
+     * Used to define the header of the tab.
+     * @group Props
+     */
+    @Input() header: string | undefined;
+    /**
+     * Inline style of the tab header.
+     * @group Props
+     */
+    @Input() headerStyle: { [klass: string]: any } | null | undefined;
+    /**
+     * Inline style of the tab.
+     * @group Props
+     */
+    @Input() tabStyle: { [klass: string]: any } | null | undefined;
+    /**
+     * Inline style of the tab content.
+     * @group Props
+     */
+    @Input() contentStyle: { [klass: string]: any } | null | undefined;
+    /**
+     * Style class of the tab.
+     * @group Props
+     */
+    @Input() tabStyleClass: string | undefined;
+    /**
+     * Style class of the tab header.
+     * @group Props
+     */
+    @Input() headerStyleClass: string | undefined;
+    /**
+     * Style class of the tab content.
+     * @group Props
+     */
+    @Input() contentStyleClass: string | undefined;
+    /**
+     * Whether the tab is disabled.
+     * @group Props
+     */
+    @Input() disabled: boolean | undefined;
+    /**
+     * Whether a lazy loaded panel should avoid getting loaded again on reselection.
+     * @group Props
+     */
     @Input() cache: boolean = true;
-
-    @Output() selectedChange: EventEmitter<any> = new EventEmitter();
-
+    /**
+     * Transition options of the animation.
+     * @group Props
+     */
     @Input() transitionOptions: string = '400ms cubic-bezier(0.86, 0, 0.07, 1)';
-
+    /**
+     * Position of the icon, valid values are "end", "start".
+     * @group Props
+     */
     @Input() iconPos: string = 'start';
+    /**
+     * Event triggered by changing the choice
+     * @group Emits
+     */
+    @Output() selectedChange: EventEmitter<boolean> = new EventEmitter();
 
-    @ContentChildren(Header) headerFacet: QueryList<Header>;
+    @ContentChildren(Header) headerFacet!: QueryList<Header>;
 
-    @ContentChildren(PrimeTemplate) templates: QueryList<any>;
+    @ContentChildren(PrimeTemplate) templates!: QueryList<PrimeTemplate>;
 
-    private _selected: boolean;
+    private _selected: boolean = false;
 
-    @Input() get selected(): any {
+    /**
+     * The value that returns the selection.
+     * @group Props
+     */
+    @Input() get selected(): boolean {
         return this._selected;
     }
 
-    set selected(val: any) {
+    set selected(val: boolean) {
         this._selected = val;
 
         if (!this.loaded) {
@@ -140,19 +182,19 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
         }
     }
 
-    contentTemplate: TemplateRef<any>;
+    contentTemplate: TemplateRef<any> | undefined;
 
-    headerTemplate: TemplateRef<any>;
+    headerTemplate: TemplateRef<any> | undefined;
 
-    id: string = `p-accordiontab-${idx++}`;
+    iconTemplate: TemplateRef<any> | undefined;
 
-    loaded: boolean;
+    id: string = `p-accordiontab-${idx++}`;
 
-    iconTemplate: TemplateRef<any>;
+    loaded: boolean = false;
 
     accordion: Accordion;
 
-    constructor(@Inject(forwardRef(() => Accordion)) accordion, public changeDetector: ChangeDetectorRef) {
+    constructor(@Inject(forwardRef(() => Accordion)) accordion: Accordion, public changeDetector: ChangeDetectorRef) {
         this.accordion = accordion as Accordion;
     }
 
@@ -178,7 +220,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
         });
     }
 
-    toggle(event) {
+    toggle(event: MouseEvent | KeyboardEvent) {
         if (this.disabled) {
             return false;
         }
@@ -223,7 +265,7 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
     }
 
     get hasHeaderFacet(): boolean {
-        return this.headerFacet && this.headerFacet.length > 0;
+        return (this.headerFacet as QueryList<Header>) && (this.headerFacet as QueryList<Header>).length > 0;
     }
 
     onKeydown(event: KeyboardEvent) {
@@ -251,29 +293,71 @@ export class AccordionTab implements AfterContentInit, OnDestroy {
     }
 })
 export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
-    @Input() multiple: boolean;
-
-    @Output() onClose: EventEmitter<any> = new EventEmitter();
-
-    @Output() onOpen: EventEmitter<any> = new EventEmitter();
-
-    @Input() style: any;
-
-    @Input() styleClass: string;
-
-    @Input() expandIcon: string;
-
-    @Input() collapseIcon: string;
-
-    @Output() activeIndexChange: EventEmitter<any> = new EventEmitter();
-
-    @ContentChildren(AccordionTab) tabList: QueryList<AccordionTab>;
-
-    tabListSubscription: Subscription;
+    /**
+     * When enabled, multiple tabs can be activated at the same time.
+     * @group Props
+     */
+    @Input() multiple: boolean = false;
+    /**
+     * Inline style of the tab header and content.
+     * @group Props
+     */
+    @Input() style: { [klass: string]: any } | null | undefined;
+    /**
+     * Class of the element.
+     * @group Props
+     */
+    @Input() styleClass: string | undefined;
+    /**
+     * Icon of a collapsed tab.
+     * @group Props
+     */
+    @Input() expandIcon: string | undefined;
+    /**
+     * Icon of an expanded tab.
+     * @group Props
+     */
+    @Input() collapseIcon: string | undefined;
+    /**
+     * Index of the active tab or an array of indexes in multiple mode.
+     * @group Props
+     */
+    @Input() get activeIndex(): number | number[] | null | undefined {
+        return this._activeIndex;
+    }
 
-    private _activeIndex: any;
+    set activeIndex(val: number | number[] | null | undefined) {
+        this._activeIndex = val;
+        if (this.preventActiveIndexPropagation) {
+            this.preventActiveIndexPropagation = false;
+            return;
+        }
 
-    preventActiveIndexPropagation: boolean;
+        this.updateSelectionState();
+    }
+    /**
+     * Callback to invoke when an active tab is collapsed by clicking on the header.
+     * @group Emits
+     */
+    @Output() onClose: EventEmitter<AccordionTabCloseEvent> = new EventEmitter();
+    /**
+     * Callback to invoke when a tab gets expanded.
+     * @group Emits
+     */
+    @Output() onOpen: EventEmitter<AccordionTabOpenEvent> = new EventEmitter();
+    /**
+     * Returns the active index.
+     * @group Emits
+     */
+    @Output() activeIndexChange: EventEmitter<number | number[] | null> = new EventEmitter();
+
+    @ContentChildren(AccordionTab) tabList: QueryList<AccordionTab> | undefined;
+
+    tabListSubscription: Subscription | null = null;
+
+    private _activeIndex: number | number[] | null | undefined;
+
+    preventActiveIndexPropagation: boolean = false;
 
     public tabs: AccordionTab[] = [];
 
@@ -282,13 +366,13 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     ngAfterContentInit() {
         this.initTabs();
 
-        this.tabListSubscription = this.tabList.changes.subscribe((_) => {
+        this.tabListSubscription = (this.tabList as QueryList<AccordionTab>).changes.subscribe((_) => {
             this.initTabs();
         });
     }
 
-    initTabs(): any {
-        this.tabs = this.tabList.toArray();
+    initTabs() {
+        this.tabs = (this.tabList as QueryList<AccordionTab>).toArray();
         this.updateSelectionState();
         this.changeDetector.markForCheck();
     }
@@ -297,24 +381,10 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
         return this.el.nativeElement.children[0];
     }
 
-    @Input() get activeIndex(): any {
-        return this._activeIndex;
-    }
-
-    set activeIndex(val: any) {
-        this._activeIndex = val;
-        if (this.preventActiveIndexPropagation) {
-            this.preventActiveIndexPropagation = false;
-            return;
-        }
-
-        this.updateSelectionState();
-    }
-
     updateSelectionState() {
         if (this.tabs && this.tabs.length && this._activeIndex != null) {
             for (let i = 0; i < this.tabs.length; i++) {
-                let selected = this.multiple ? this._activeIndex.includes(i) : i === this._activeIndex;
+                let selected = this.multiple ? (this._activeIndex as number[]).includes(i) : i === this._activeIndex;
                 let changed = selected !== this.tabs[i].selected;
 
                 if (changed) {
@@ -327,11 +397,11 @@ export class Accordion implements BlockableUI, AfterContentInit, OnDestroy {
     }
 
     updateActiveIndex() {
-        let index: any = this.multiple ? [] : null;
+        let index: number | number[] | null = this.multiple ? [] : null;
         this.tabs.forEach((tab, i) => {
             if (tab.selected) {
                 if (this.multiple) {
-                    index.push(i);
+                    (index as number[]).push(i);
                 } else {
                     index = i;
                     return;

src/app/components/accordion/public_api.ts

@@ -1 +1,2 @@
 export * from './accordion';
+export * from './accordion.interface';