@ng-prism/plugin-jsdoc 22.2.1 → 22.4.0

package/README.md

@@ -2,7 +2,7 @@
 
 API documentation plugin for [@ng-prism/core](https://github.com/dyingangel666/ng-prism). Extracts JSDoc comments from component source code at build time and renders an interactive API panel.
 
-> **Full documentation:** [ng-prism Docs — JSDoc Plugin](https://dyingangel666.github.io/ng-prism/#/plugins/jsdoc)
+> **Full documentation:** [ng-prism Docs: JSDoc Plugin](https://dyingangel666.github.io/ng-prism/#/plugins/jsdoc)
 
 ## Installation
 
@@ -28,7 +28,7 @@ import { defineConfig } from '@ng-prism/core/config';
 import { jsDocPlugin } from '@ng-prism/plugin-jsdoc';
 
 export default defineConfig({
-  plugins: [jsDocPlugin()],
+    plugins: [jsDocPlugin()]
 });
 ```
 
@@ -37,10 +37,10 @@ export default defineConfig({
 - Extracts class-level JSDoc description
 - Extracts per-input and per-output JSDoc comments
 - Renders an **API** panel with:
-  - Component description
-  - Inputs table (name, type, default, description)
-  - Outputs table (name, description)
-  - Supported tags: `@deprecated`, `@since`, `@see`, `@example`
+    - Component description
+    - Inputs table (name, type, default, description)
+    - Outputs table (name, description)
+    - Supported tags: `@deprecated`, `@since`, `@see`, `@example`
 
 ## Markdown Support
 
@@ -49,11 +49,11 @@ JSDoc descriptions are rendered as Markdown:
 - Headings (`#`, `##`, `###`)
 - Lists (ordered/unordered) and inline code (`` `code` ``)
 - Bold (`**text**`), italic (`*text*`), and links (`[text](url)`)
-- Fenced code blocks with a language hint (` ```html `, ` ```scss ` …)
+- Fenced code blocks with a language hint (` ```html `, ` ```scss `, ...)
 
 Class descriptions are rendered as block Markdown; input/output/method descriptions are
 rendered inline (no wrapping `<p>`). Existing plain-text descriptions keep working
-unchanged — plain text is valid Markdown.
+unchanged, since plain text is valid Markdown.
 
 ````typescript
 /**
@@ -61,8 +61,8 @@ unchanged — plain text is valid Markdown.
  *
  * ## Size
  *
- * - `small` (4px) — inline indicators
- * - `large` (9px, default) — section-level loading
+ * - `small` (4px): inline indicators
+ * - `large` (9px, default): section-level loading
  *
  * @example
  * ```html
@@ -72,9 +72,9 @@ unchanged — plain text is valid Markdown.
 ````
 
 `@example` blocks accept a fenced code block with a language hint. The language is
-passed through to `ngx-highlightjs` (`html`, `scss`, `typescript`, …). Examples without
+passed through to `ngx-highlightjs` (`html`, `scss`, `typescript`, ...). Examples without
 fences fall back to `typescript` for backwards compatibility. Make sure the languages
-you reference are registered with `highlight.js` in your app — `highlight.js`'s core
+you reference are registered with `highlight.js` in your app. `highlight.js`'s core
 language set is loaded by default, but additional languages must be registered
 explicitly by the consumer.
 

package/dist/jsdoc-extractor.d.ts

@@ -1,3 +1,11 @@
 import type { JsDocData } from './jsdoc.types.js';
-export declare function extractJsDocData(filePath: string, className: string): JsDocData | null;
+/**
+ * `baseClasses` come from the scanner, nearest first. Members are read from
+ * the class and then from each of them; the first class that declares a
+ * member decides its tags, as a redeclaration replaces the inherited one.
+ */
+export declare function extractJsDocData(filePath: string, className: string, baseClasses?: {
+    className: string;
+    filePath: string;
+}[]): JsDocData | null;
 //# sourceMappingURL=jsdoc-extractor.d.ts.map

package/dist/jsdoc-extractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsdoc-extractor.d.ts","sourceRoot":"","sources":["../src/jsdoc-extractor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAkC,MAAM,kBAAkB,CAAC;AAElF,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAatF"}
+{"version":3,"file":"jsdoc-extractor.d.ts","sourceRoot":"","sources":["../src/jsdoc-extractor.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAkC,MAAM,kBAAkB,CAAC;AAElF;;;;GAIG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,GAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,EAAO,GAAG,SAAS,GAAG,IAAI,CAyBnJ"}

package/dist/jsdoc-extractor.js

@@ -1,16 +1,29 @@
 import { readFileSync } from 'node:fs';
 import ts from 'typescript';
-export function extractJsDocData(filePath, className) {
-    const sourceText = readFileSync(filePath, 'utf-8');
-    const sourceFile = ts.createSourceFile(filePath, sourceText, ts.ScriptTarget.ES2022, true);
-    const classDecl = findClassByName(sourceFile, className);
+/**
+ * `baseClasses` come from the scanner, nearest first. Members are read from
+ * the class and then from each of them; the first class that declares a
+ * member decides its tags, as a redeclaration replaces the inherited one.
+ */
+export function extractJsDocData(filePath, className, baseClasses = []) {
+    const sourceFiles = new Map();
+    const findClass = (path, name) => {
+        let sourceFile = sourceFiles.get(path);
+        if (!sourceFile) {
+            sourceFile = ts.createSourceFile(path, readFileSync(path, 'utf-8'), ts.ScriptTarget.ES2022, true);
+            sourceFiles.set(path, sourceFile);
+        }
+        return findClassByName(sourceFile, name);
+    };
+    const classDecl = findClass(filePath, className);
     if (!classDecl)
         return null;
+    const hierarchy = [classDecl, ...baseClasses.flatMap((base) => findClass(base.filePath, base.className) ?? [])];
     return {
         classDescription: extractDescription(classDecl),
         classTags: extractTags(classDecl),
-        memberTags: extractAllMemberTags(classDecl),
-        methods: extractPublicMethods(classDecl),
+        memberTags: extractAllMemberTags(hierarchy),
+        methods: extractPublicMethods(hierarchy)
     };
 }
 function findClassByName(sourceFile, className) {
@@ -37,10 +50,10 @@ function extractDescription(node) {
         return undefined;
     if (typeof comment === 'string')
         return comment.trim() || undefined;
-    return comment
+    return (comment
         .map((c) => (typeof c === 'string' ? c : c.text))
         .join('')
-        .trim() || undefined;
+        .trim() || undefined);
 }
 function extractTags(node) {
     const tags = ts.getJSDocTags(node);
@@ -85,23 +98,42 @@ function tagCommentToString(comment) {
         return undefined;
     if (typeof comment === 'string')
         return comment.trim() || undefined;
-    return comment
+    return (comment
         .map((c) => (typeof c === 'string' ? c : c.text))
         .join('')
-        .trim() || undefined;
+        .trim() || undefined);
 }
-function extractAllMemberTags(classDecl) {
+function extractAllMemberTags(hierarchy) {
     const result = {};
+    const shadowed = new Set();
+    for (const classDecl of hierarchy) {
+        for (const member of classDecl.members) {
+            const name = getMemberName(member);
+            if (!name || shadowed.has(name))
+                continue;
+            const tags = ts.getJSDocTags(member);
+            if (tags.length === 0)
+                continue;
+            result[name] = buildTagsFromList(tags);
+        }
+        addMemberNames(classDecl, shadowed);
+    }
+    return result;
+}
+/**
+ * A member with JSDoc of its own hides the same name further up, as it does
+ * for TypeScript and for the description the scanner reads; one without
+ * keeps the documentation it inherits. Applied after the whole class, so the
+ * getter, setter or overloads next to a member are read too. A static member
+ * hides nothing, since inputs, outputs and methods are instance members.
+ */
+function addMemberNames(classDecl, names) {
     for (const member of classDecl.members) {
         const name = getMemberName(member);
-        if (!name)
-            continue;
-        const tags = ts.getJSDocTags(member);
-        if (tags.length === 0)
-            continue;
-        result[name] = buildTagsFromList(tags);
+        const isStatic = ts.canHaveModifiers(member) && ts.getModifiers(member)?.some((m) => m.kind === ts.SyntaxKind.StaticKeyword);
+        if (name && !isStatic && ts.getJSDocCommentsAndTags(member).length > 0)
+            names.add(name);
     }
-    return result;
 }
 function getMemberName(member) {
     if (!member.name)
@@ -113,33 +145,44 @@ function getMemberName(member) {
     return undefined;
 }
 const LIFECYCLE_HOOKS = new Set([
-    'ngOnInit', 'ngOnDestroy', 'ngOnChanges', 'ngDoCheck',
-    'ngAfterContentInit', 'ngAfterContentChecked',
-    'ngAfterViewInit', 'ngAfterViewChecked',
+    'ngOnInit',
+    'ngOnDestroy',
+    'ngOnChanges',
+    'ngDoCheck',
+    'ngAfterContentInit',
+    'ngAfterContentChecked',
+    'ngAfterViewInit',
+    'ngAfterViewChecked'
 ]);
-function extractPublicMethods(classDecl) {
+function extractPublicMethods(hierarchy) {
     const result = [];
-    const sourceFile = classDecl.getSourceFile();
-    for (const member of classDecl.members) {
-        if (!ts.isMethodDeclaration(member))
-            continue;
-        const name = getMemberName(member);
-        if (!name || name.startsWith('_'))
-            continue;
-        if (LIFECYCLE_HOOKS.has(name))
-            continue;
-        const isPrivate = member.modifiers?.some((m) => m.kind === ts.SyntaxKind.PrivateKeyword || m.kind === ts.SyntaxKind.ProtectedKeyword);
-        if (isPrivate)
-            continue;
-        if (!hasDirectJsDoc(member, sourceFile))
-            continue;
-        const description = extractDescription(member);
-        const tags = extractTags(member);
-        const params = extractParamDocs(member);
-        const returnType = member.type ? member.type.getText() : undefined;
-        if (!description && Object.keys(tags).length === 0)
-            continue;
-        result.push({ name, description, tags, params, returnType });
+    const shadowed = new Set();
+    for (const classDecl of hierarchy) {
+        const sourceFile = classDecl.getSourceFile();
+        for (const member of classDecl.members) {
+            if (!ts.isMethodDeclaration(member))
+                continue;
+            const name = getMemberName(member);
+            if (!name || shadowed.has(name))
+                continue;
+            if (name.startsWith('_'))
+                continue;
+            if (LIFECYCLE_HOOKS.has(name))
+                continue;
+            const isPrivate = member.modifiers?.some((m) => m.kind === ts.SyntaxKind.PrivateKeyword || m.kind === ts.SyntaxKind.ProtectedKeyword);
+            if (isPrivate)
+                continue;
+            if (!hasDirectJsDoc(member, sourceFile))
+                continue;
+            const description = extractDescription(member);
+            const tags = extractTags(member);
+            const params = extractParamDocs(member);
+            const returnType = member.type ? member.type.getText() : undefined;
+            if (!description && Object.keys(tags).length === 0)
+                continue;
+            result.push({ name, description, tags, params, returnType });
+        }
+        addMemberNames(classDecl, shadowed);
     }
     return result;
 }

package/dist/jsdoc-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsdoc-panel.component.d.ts","sourceRoot":"","sources":["../src/jsdoc-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,EAAgB,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAIL,KAAK,aAAa,EACnB,MAAM,eAAe,CAAC;;AAEvB,qBAuYa,mBAAmB;IAC9B,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwB;IAElD,SAAS,CAAC,QAAQ,CAAC,SAAS,mDAGzB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8CAGtB;IAEH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAGvB;IAEH,SAAS,CAAC,QAAQ,CAAC,gBAAgB,qDAEjC;IAIF,SAAS,CAAC,QAAQ,CAAC,wBAAwB,kDAKzC;IAEF,SAAS,CAAC,QAAQ,CAAC,SAAS,uEAE1B;IAEF,SAAS,CAAC,QAAQ,CAAC,YAAY,0CAE7B;IAEF,SAAS,CAAC,QAAQ,CAAC,iBAAiB,qDAGjC;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,qDAA0C;IAElE,SAAS,CAAC,QAAQ,CAAC,OAAO,qDAA4C;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,2CAA8C;IAExE,SAAS,CAAC,QAAQ,CAAC,QAAQ,2CAAkD;IAE7E,SAAS,CAAC,QAAQ,CAAC,OAAO,8CAExB;IAEF,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAMxB;IAEF,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAInD,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI1D,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ;IAI1D,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa;IAIlD,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM;yCAlFpC,mBAAmB;2CAAnB,mBAAmB;CAsF/B"}
+{"version":3,"file":"jsdoc-panel.component.d.ts","sourceRoot":"","sources":["../src/jsdoc-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnE,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,KAAK,aAAa,EAA2D,MAAM,eAAe,CAAC;;AAE5G,qBAQa,mBAAmB;IAC5B,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAwB;IAElD,SAAS,CAAC,QAAQ,CAAC,SAAS,mDAIzB;IAEH,SAAS,CAAC,QAAQ,CAAC,MAAM,8CAItB;IAEH,SAAS,CAAC,QAAQ,CAAC,OAAO,+CAIvB;IAEH,SAAS,CAAC,QAAQ,CAAC,gBAAgB,qDAAsD;IAIzF,SAAS,CAAC,QAAQ,CAAC,wBAAwB,kDAIxC;IAEH,SAAS,CAAC,QAAQ,CAAC,SAAS,uEAAqD;IAEjF,SAAS,CAAC,QAAQ,CAAC,YAAY,0CAAiD;IAEhF,SAAS,CAAC,QAAQ,CAAC,iBAAiB,qDAIjC;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,qDAA0C;IAElE,SAAS,CAAC,QAAQ,CAAC,OAAO,qDAA4C;IAEtE,SAAS,CAAC,QAAQ,CAAC,OAAO,2CAA8C;IAExE,SAAS,CAAC,QAAQ,CAAC,QAAQ,2CAAkD;IAE7E,SAAS,CAAC,QAAQ,CAAC,OAAO,8CAAgE;IAE1F,SAAS,CAAC,QAAQ,CAAC,OAAO,0CAA0G;IAEpI,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAInD,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS;IAI1D,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ;IAI1D,SAAS,CAAC,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa;IAIlD,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM;yCAvEtC,mBAAmB;2CAAnB,mBAAmB;CA2E/B"}

package/dist/jsdoc-panel.component.js

@@ -1,7 +1,7 @@
-import { ChangeDetectionStrategy, Component, computed, inject, input, } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, inject, input } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Highlight } from 'ngx-highlightjs';
-import { parseExample, renderBlockMarkdown, renderInlineMarkdown, } from './markdown.js';
+import { parseExample, renderBlockMarkdown, renderInlineMarkdown } from './markdown.js';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.name;
 function JsDocPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -427,7 +427,7 @@ export class JsDocPanelComponent {
     classDescription = computed(() => this.jsdocData()?.classDescription, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classDescription" }] : /* istanbul ignore next */ []));
     // Source is component-author JSDoc compiled into the manifest at build time,
-    // not user input — bypassing sanitization is safe here.
+    // not user input, so bypassing sanitization is safe here.
     renderedClassDescription = computed(() => {
         const html = renderBlockMarkdown(this.classDescription());
         return html ? this.sanitizer.bypassSecurityTrustHtml(html) : null;
@@ -452,10 +452,7 @@ export class JsDocPanelComponent {
     ...(ngDevMode ? [{ debugName: "examples" }] : /* istanbul ignore next */ []));
     methods = computed(() => this.jsdocData()?.methods ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "methods" }] : /* istanbul ignore next */ []));
-    hasTags = computed(() => this.isDeprecated() ||
-        !!this.since() ||
-        !!this.version() ||
-        this.seeRefs().length > 0, /* @ts-ignore */
+    hasTags = computed(() => this.isDeprecated() || !!this.since() || !!this.version() || this.seeRefs().length > 0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasTags" }] : /* istanbul ignore next */ []));
     isMemberDeprecated(name) {
         return !!this.jsdocData()?.memberTags[name]?.deprecated;
@@ -482,212 +479,10 @@ export class JsDocPanelComponent {
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.activeComponent() ? 1 : 2);
-        } }, dependencies: [Highlight], styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n    .prism-jsdoc-panel[_ngcontent-%COMP%] {\n      padding: 20px 24px;\n      max-width: 880px;\n      font-family: var(--%NS%font-sans);\n      font-size: var(--%NS%fs-md);\n      color: var(--%NS%prism-text);\n    }\n    .prism-jsdoc-panel__empty[_ngcontent-%COMP%] {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 120px; color: var(--%NS%prism-text-muted);\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%] {\n      margin: 0 0 18px;\n      font-size: 14px;\n      line-height: 1.7;\n      color: var(--%NS%prism-text-2);\n    }\n    .prism-jsdoc-panel__meta[_ngcontent-%COMP%] {\n      display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;\n    }\n    .prism-jsdoc-panel__meta-item[_ngcontent-%COMP%] {\n      display: flex; align-items: center; gap: 6px;\n      padding: 3px 9px; border-radius: 4px;\n      background: var(--%NS%prism-input-bg);\n      border: 1px solid var(--%NS%prism-border);\n      font-size: var(--%NS%fs-sm); color: var(--%NS%prism-text-2);\n    }\n    .prism-jsdoc-panel__meta-label[_ngcontent-%COMP%] {\n      font-weight: 500; color: var(--%NS%prism-primary);\n      font-family: var(--%NS%font-mono);\n    }\n    .prism-jsdoc-panel__badge[_ngcontent-%COMP%] {\n      display: inline-flex; align-items: center;\n      padding: 2px 8px; border-radius: 10px;\n      font-size: 12px; font-weight: 600;\n    }\n    .prism-jsdoc-panel__badge--deprecated[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--%NS%prism-warn) 15%, transparent);\n      color: var(--%NS%prism-warn);\n    }\n    .prism-jsdoc-panel__badge--required[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-accent); font-weight: 700; margin-left: 4px;\n    }\n    .prism-jsdoc-panel__badge--small[_ngcontent-%COMP%] { padding: 1px 5px; font-size: 10px; margin-left: 4px; }\n    .prism-jsdoc-panel__section[_ngcontent-%COMP%] { margin-bottom: 20px; }\n    .prism-jsdoc-panel__heading[_ngcontent-%COMP%] {\n      font-size: 11px; font-weight: 700; text-transform: uppercase;\n      letter-spacing: 0.08em; margin: 22px 0 10px;\n      color: var(--%NS%prism-text-ghost);\n    }\n    .prism-jsdoc-panel__code[_ngcontent-%COMP%] {\n      margin: 0 0 8px; padding: 0;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px; overflow: auto;\n    }\n    .prism-jsdoc-panel__code[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-sm); line-height: 1.5;\n      padding: 8px 12px; display: block;\n      background: transparent !important;\n      color: var(--%NS%prism-text-2);\n    }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs { background: transparent; color: var(--%NS%prism-text-2); }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-tag, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-name, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-selector-tag, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-keyword, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-title, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-title.function_, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-built_in, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-type { color: var(--%NS%prism-code-tag); }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-attr, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-attribute, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-property, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-variable, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-template-variable, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-params { color: var(--%NS%prism-code-attr); }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-string, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-doctag, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-regexp, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-symbol, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-number, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-literal { color: var(--%NS%prism-code-str); }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-comment, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-quote, \n   [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-meta { color: var(--%NS%prism-code-com); font-style: italic; }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-deletion { color: var(--%NS%prism-danger); }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-addition { color: var(--%NS%prism-success); }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-emphasis { font-style: italic; }\n    [_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-strong { font-weight: 700; }\n    .prism-jsdoc-panel__table[_ngcontent-%COMP%] {\n      width: 100%; border-collapse: collapse;\n      font-size: var(--%NS%fs-md);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px; overflow: hidden;\n    }\n    .prism-jsdoc-panel__table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n      text-align: left; padding: 8px 12px;\n      background: var(--%NS%prism-bg-surface);\n      font-size: 10.5px; text-transform: uppercase;\n      letter-spacing: 0.06em; font-weight: 700;\n      color: var(--%NS%prism-text-ghost);\n      border-bottom: 1px solid var(--%NS%prism-border);\n    }\n    .prism-jsdoc-panel__table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n      padding: 10px 12px;\n      border-bottom: 1px solid var(--%NS%prism-border);\n      vertical-align: top;\n    }\n    .prism-jsdoc-panel__table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] { border-bottom: 0; }\n    .prism-jsdoc-panel__row--deprecated[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] { opacity: 0.6; }\n    .prism-jsdoc-panel__cell--name[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], \n   .prism-jsdoc-panel__cell--type[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], \n   .prism-jsdoc-panel__cell--default[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-sm); color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n      padding: 1px 5px; border-radius: var(--%NS%radius-xs);\n    }\n    .prism-jsdoc-panel__muted[_ngcontent-%COMP%] { color: var(--%NS%prism-text-muted); }\n    .prism-jsdoc-panel__cell--doc[_ngcontent-%COMP%] { color: var(--%NS%prism-text); line-height: 1.4; }\n    .prism-jsdoc-panel__since-sep[_ngcontent-%COMP%] { color: var(--%NS%prism-text-muted); }\n    .prism-jsdoc-panel__since[_ngcontent-%COMP%] { color: var(--%NS%prism-text-muted); font-size: var(--%NS%fs-sm); }\n\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:first-child { margin-top: 0; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:last-child { margin-bottom: 0; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] { margin: 0 0 8px; line-height: 1.7; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], \n   .prism-jsdoc-panel__description[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], \n   .prism-jsdoc-panel__description[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-text);\n      font-weight: 600;\n      line-height: 1.3;\n      margin: 18px 0 8px;\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] { font-size: 18px; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] { font-size: 15px; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n      font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: 0.08em;\n      color: var(--%NS%prism-text-ghost);\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], \n   .prism-jsdoc-panel__description[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n      margin: 0 0 8px; padding-left: 20px;\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] { margin: 2px 0; line-height: 1.6; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n      color: var(--%NS%prism-primary);\n      text-decoration: none;\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover { text-decoration: underline; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] { color: var(--%NS%prism-text); font-weight: 600; }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], \n   .prism-jsdoc-panel__cell--doc[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-sm); color: var(--%NS%prism-primary);\n      background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n      padding: 1px 5px; border-radius: var(--%NS%radius-xs);\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n      margin: 0 0 8px; padding: 0;\n      background: var(--%NS%prism-bg-surface);\n      border: 1px solid var(--%NS%prism-border);\n      border-radius: 8px; overflow: auto;\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: var(--%NS%font-mono);\n      font-size: var(--%NS%fs-sm); line-height: 1.5;\n      padding: 8px 12px; display: block;\n      background: none; color: var(--%NS%prism-text);\n    }\n    .prism-jsdoc-panel__description[_ngcontent-%COMP%]   blockquote[_ngcontent-%COMP%] {\n      margin: 0 0 8px;\n      padding: 4px 12px;\n      border-left: 3px solid var(--%NS%prism-border);\n      color: var(--%NS%prism-text-2);\n    }"] });
+        } }, dependencies: [Highlight], styles: ["[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.prism-jsdoc-panel[_ngcontent-%COMP%] {\n    max-width: 880px;\n    padding: 20px 24px;\n    font-family: var(--%NS%font-sans);\n    font-size: var(--%NS%fs-md);\n    color: var(--%NS%prism-text);\n}\n\n.prism-jsdoc-panel__empty[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%] {\n    margin: 0 0 18px;\n    font-size: 14px;\n    line-height: 1.7;\n    color: var(--%NS%prism-text-2);\n}\n\n.prism-jsdoc-panel__meta[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 18px;\n}\n\n.prism-jsdoc-panel__meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 3px 9px;\n    font-size: var(--%NS%fs-sm);\n    color: var(--%NS%prism-text-2);\n    background: var(--%NS%prism-input-bg);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 4px;\n}\n\n.prism-jsdoc-panel__meta-label[_ngcontent-%COMP%] {\n    font-family: var(--%NS%font-mono);\n    font-weight: 500;\n    color: var(--%NS%prism-primary);\n}\n\n.prism-jsdoc-panel__badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    font-size: 12px;\n    font-weight: 600;\n    border-radius: 10px;\n}\n\n.prism-jsdoc-panel__badge--deprecated[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-warn);\n    background: color-mix(in srgb, var(--%NS%prism-warn) 15%, transparent);\n}\n\n.prism-jsdoc-panel__badge--required[_ngcontent-%COMP%] {\n    margin-left: 4px;\n    font-weight: 700;\n    color: var(--%NS%prism-accent);\n}\n\n.prism-jsdoc-panel__badge--small[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    margin-left: 4px;\n    font-size: 10px;\n}\n\n.prism-jsdoc-panel__section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.prism-jsdoc-panel__heading[_ngcontent-%COMP%] {\n    margin: 22px 0 10px;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-jsdoc-panel__code[_ngcontent-%COMP%] {\n    padding: 0;\n    margin: 0 0 8px;\n    overflow: auto;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 8px;\n}\n\n.prism-jsdoc-panel__code[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    display: block;\n    padding: 8px 12px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-sm);\n    line-height: 1.5;\n    color: var(--%NS%prism-text-2);\n    background: transparent !important;\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs {\n    color: var(--%NS%prism-text-2);\n    background: transparent;\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-tag, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-name, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-selector-tag, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-keyword, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-title, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-title.function_, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-built_in, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-type {\n    color: var(--%NS%prism-code-tag);\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-attr, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-attribute, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-property, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-variable, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-template-variable, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-params {\n    color: var(--%NS%prism-code-attr);\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-string, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-doctag, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-regexp, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-symbol, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-number, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-literal {\n    color: var(--%NS%prism-code-str);\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-comment, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-quote, \n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-meta {\n    font-style: italic;\n    color: var(--%NS%prism-code-com);\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-deletion {\n    color: var(--%NS%prism-danger);\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-addition {\n    color: var(--%NS%prism-success);\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-emphasis {\n    font-style: italic;\n}\n\n[_nghost-%COMP%]     .prism-jsdoc-panel__code .hljs-strong {\n    font-weight: 700;\n}\n\n.prism-jsdoc-panel__table[_ngcontent-%COMP%] {\n    width: 100%;\n    overflow: hidden;\n    font-size: var(--%NS%fs-md);\n    border-collapse: collapse;\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 8px;\n}\n\n.prism-jsdoc-panel__table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--%NS%prism-text-ghost);\n    text-align: left;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    background: var(--%NS%prism-bg-surface);\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.prism-jsdoc-panel__table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 10px 12px;\n    vertical-align: top;\n    border-bottom: 1px solid var(--%NS%prism-border);\n}\n\n.prism-jsdoc-panel__table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: 0;\n}\n\n.prism-jsdoc-panel__row--deprecated[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n.prism-jsdoc-panel__cell--name[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], \n.prism-jsdoc-panel__cell--type[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], \n.prism-jsdoc-panel__cell--default[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-sm);\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-jsdoc-panel__muted[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-jsdoc-panel__cell--doc[_ngcontent-%COMP%] {\n    line-height: 1.4;\n    color: var(--%NS%prism-text);\n}\n\n.prism-jsdoc-panel__since-sep[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-jsdoc-panel__since[_ngcontent-%COMP%] {\n    font-size: var(--%NS%fs-sm);\n    color: var(--%NS%prism-text-muted);\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:first-child {\n    margin-top: 0;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   [_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0 0 8px;\n    line-height: 1.7;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%], \n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%], \n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 18px 0 8px;\n    font-weight: 600;\n    line-height: 1.3;\n    color: var(--%NS%prism-text);\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 15px;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--%NS%prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   ul[_ngcontent-%COMP%], \n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   ol[_ngcontent-%COMP%] {\n    padding-left: 20px;\n    margin: 0 0 8px;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    margin: 2px 0;\n    line-height: 1.6;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   a[_ngcontent-%COMP%] {\n    color: var(--%NS%prism-primary);\n    text-decoration: none;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   a[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--%NS%prism-text);\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   code[_ngcontent-%COMP%], \n.prism-jsdoc-panel__cell--doc[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    padding: 1px 5px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-sm);\n    color: var(--%NS%prism-primary);\n    background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n    border-radius: var(--%NS%radius-xs);\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%] {\n    padding: 0;\n    margin: 0 0 8px;\n    overflow: auto;\n    background: var(--%NS%prism-bg-surface);\n    border: 1px solid var(--%NS%prism-border);\n    border-radius: 8px;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    display: block;\n    padding: 8px 12px;\n    font-family: var(--%NS%font-mono);\n    font-size: var(--%NS%fs-sm);\n    line-height: 1.5;\n    color: var(--%NS%prism-text);\n    background: none;\n}\n\n.prism-jsdoc-panel__description[_ngcontent-%COMP%]   blockquote[_ngcontent-%COMP%] {\n    padding: 4px 12px;\n    margin: 0 0 8px;\n    color: var(--%NS%prism-text-2);\n    border-left: 3px solid var(--%NS%prism-border);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsDocPanelComponent, [{
         type: Component,
-        args: [{ selector: 'prism-jsdoc-panel', standalone: true, imports: [Highlight], changeDetection: ChangeDetectionStrategy.OnPush, template: `
-    <div class="prism-jsdoc-panel">
-      @if (!activeComponent()) {
-      <div class="prism-jsdoc-panel__empty">
-        Select a component to view API documentation.
-      </div>
-      } @else { @if (renderedClassDescription(); as descHtml) {
-      <div class="prism-jsdoc-panel__description" [innerHTML]="descHtml"></div>
-      } @if (hasTags()) {
-      <div class="prism-jsdoc-panel__meta">
-        @if (isDeprecated()) {
-        <span
-          class="prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated"
-        >
-          Deprecated{{ deprecatedMessage() ? ': ' + deprecatedMessage() : '' }}
-        </span>
-        } @if (version()) {
-        <span class="prism-jsdoc-panel__meta-item">
-          <span class="prism-jsdoc-panel__meta-label">Version:</span>
-          {{ version() }}
-        </span>
-        } @if (since()) {
-        <span class="prism-jsdoc-panel__meta-item">
-          <span class="prism-jsdoc-panel__meta-label">Since:</span>
-          {{ since() }}
-        </span>
-        } @for (ref of seeRefs(); track $index) {
-        <span class="prism-jsdoc-panel__meta-item">
-          <span class="prism-jsdoc-panel__meta-label">See:</span> {{ ref }}
-        </span>
-        }
-      </div>
-      } @if (examples().length) {
-      <div class="prism-jsdoc-panel__section">
-        <h3 class="prism-jsdoc-panel__heading">Examples</h3>
-        @for (example of examples(); track $index) { @let parsed =
-        parseExample(example);
-        <pre
-          class="prism-jsdoc-panel__code"
-        ><code [highlight]="parsed.code" [language]="parsed.lang"></code></pre>
-        }
-      </div>
-      } @if (inputs().length) {
-      <div class="prism-jsdoc-panel__section">
-        <h3 class="prism-jsdoc-panel__heading">Inputs</h3>
-        <table class="prism-jsdoc-panel__table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Type</th>
-              <th>Default</th>
-              <th>Required</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (inp of inputs(); track inp.name) {
-            <tr
-              [class.prism-jsdoc-panel__row--deprecated]="
-                isMemberDeprecated(inp.name)
-              "
-            >
-              <td class="prism-jsdoc-panel__cell--name">
-                <code>{{ inp.name }}</code>
-                @if (isMemberDeprecated(inp.name)) {
-                <span
-                  class="prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated prism-jsdoc-panel__badge--small"
-                  >deprecated</span
-                >
-                }
-              </td>
-              <td class="prism-jsdoc-panel__cell--type">
-                <code>{{ inp.rawType ?? inp.type }}</code>
-              </td>
-              <td class="prism-jsdoc-panel__cell--default">
-                @if (inp.defaultValue !== undefined) {
-                <code>{{ formatDefault(inp.defaultValue) }}</code>
-                } @else {
-                <span class="prism-jsdoc-panel__muted">—</span>
-                }
-              </td>
-              <td class="prism-jsdoc-panel__cell--required">
-                @if (inp.required) {
-                <span
-                  class="prism-jsdoc-panel__badge prism-jsdoc-panel__badge--required"
-                  >required</span
-                >
-                } @else {
-                <span class="prism-jsdoc-panel__muted">—</span>
-                }
-              </td>
-              <td class="prism-jsdoc-panel__cell--doc">
-                @if (inp.doc) {
-                <span [innerHTML]="renderInline(inp.doc)"></span>
-                } @if (getMemberSince(inp.name); as since) { @if (inp.doc) {
-                <span class="prism-jsdoc-panel__since-sep"> · </span>
-                }
-                <span class="prism-jsdoc-panel__since">Since {{ since }}</span>
-                }
-              </td>
-            </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-      } @if (outputs().length) {
-      <div class="prism-jsdoc-panel__section">
-        <h3 class="prism-jsdoc-panel__heading">Outputs</h3>
-        <table class="prism-jsdoc-panel__table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (out of outputs(); track out.name) {
-            <tr
-              [class.prism-jsdoc-panel__row--deprecated]="
-                isMemberDeprecated(out.name)
-              "
-            >
-              <td class="prism-jsdoc-panel__cell--name">
-                <code>{{ out.name }}</code>
-                @if (isMemberDeprecated(out.name)) {
-                <span
-                  class="prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated prism-jsdoc-panel__badge--small"
-                  >deprecated</span
-                >
-                }
-              </td>
-              <td class="prism-jsdoc-panel__cell--doc">
-                @if (out.doc) {
-                <span [innerHTML]="renderInline(out.doc)"></span>
-                } @if (getMemberSince(out.name); as since) { @if (out.doc) {
-                <span class="prism-jsdoc-panel__since-sep"> · </span>
-                }
-                <span class="prism-jsdoc-panel__since">Since {{ since }}</span>
-                }
-              </td>
-            </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-      } @if (methods().length) {
-      <div class="prism-jsdoc-panel__section">
-        <h3 class="prism-jsdoc-panel__heading">Methods</h3>
-        <table class="prism-jsdoc-panel__table">
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Parameters</th>
-              <th>Returns</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            @for (method of methods(); track method.name) {
-            <tr
-              [class.prism-jsdoc-panel__row--deprecated]="
-                !!method.tags.deprecated
-              "
-            >
-              <td class="prism-jsdoc-panel__cell--name">
-                <code>{{ method.name }}()</code>
-                @if (method.tags.deprecated) {
-                <span
-                  class="prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated prism-jsdoc-panel__badge--small"
-                  >deprecated</span
-                >
-                }
-              </td>
-              <td class="prism-jsdoc-panel__cell--type">
-                @if (method.params.length) { @for (p of method.params; track
-                p.name) {
-                <div>
-                  <code>{{ p.name }}{{ p.type ? ': ' + p.type : '' }}</code>
-                </div>
-                } } @else {
-                <span class="prism-jsdoc-panel__muted">—</span>
-                }
-              </td>
-              <td class="prism-jsdoc-panel__cell--type">
-                @if (method.returnType) {
-                <code>{{ method.returnType }}</code>
-                } @else {
-                <span class="prism-jsdoc-panel__muted">void</span>
-                }
-              </td>
-              <td class="prism-jsdoc-panel__cell--doc">
-                @if (method.description) {
-                <span [innerHTML]="renderInline(method.description)"></span>
-                }
-              </td>
-            </tr>
-            }
-          </tbody>
-        </table>
-      </div>
-      } }
-    </div>
-  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n    .prism-jsdoc-panel {\n      padding: 20px 24px;\n      max-width: 880px;\n      font-family: var(--font-sans);\n      font-size: var(--fs-md);\n      color: var(--prism-text);\n    }\n    .prism-jsdoc-panel__empty {\n      display: flex; align-items: center; justify-content: center;\n      min-height: 120px; color: var(--prism-text-muted);\n    }\n    .prism-jsdoc-panel__description {\n      margin: 0 0 18px;\n      font-size: 14px;\n      line-height: 1.7;\n      color: var(--prism-text-2);\n    }\n    .prism-jsdoc-panel__meta {\n      display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px;\n    }\n    .prism-jsdoc-panel__meta-item {\n      display: flex; align-items: center; gap: 6px;\n      padding: 3px 9px; border-radius: 4px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      font-size: var(--fs-sm); color: var(--prism-text-2);\n    }\n    .prism-jsdoc-panel__meta-label {\n      font-weight: 500; color: var(--prism-primary);\n      font-family: var(--font-mono);\n    }\n    .prism-jsdoc-panel__badge {\n      display: inline-flex; align-items: center;\n      padding: 2px 8px; border-radius: 10px;\n      font-size: 12px; font-weight: 600;\n    }\n    .prism-jsdoc-panel__badge--deprecated {\n      background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n      color: var(--prism-warn);\n    }\n    .prism-jsdoc-panel__badge--required {\n      color: var(--prism-accent); font-weight: 700; margin-left: 4px;\n    }\n    .prism-jsdoc-panel__badge--small { padding: 1px 5px; font-size: 10px; margin-left: 4px; }\n    .prism-jsdoc-panel__section { margin-bottom: 20px; }\n    .prism-jsdoc-panel__heading {\n      font-size: 11px; font-weight: 700; text-transform: uppercase;\n      letter-spacing: 0.08em; margin: 22px 0 10px;\n      color: var(--prism-text-ghost);\n    }\n    .prism-jsdoc-panel__code {\n      margin: 0 0 8px; padding: 0;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px; overflow: auto;\n    }\n    .prism-jsdoc-panel__code code {\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm); line-height: 1.5;\n      padding: 8px 12px; display: block;\n      background: transparent !important;\n      color: var(--prism-text-2);\n    }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs { background: transparent; color: var(--prism-text-2); }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-tag,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-name,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-selector-tag,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-keyword,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-title,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-title.function_,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-built_in,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-type { color: var(--prism-code-tag); }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-attr,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-attribute,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-property,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-variable,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-template-variable,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-params { color: var(--prism-code-attr); }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-string,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-doctag,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-regexp,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-symbol,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-number,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-literal { color: var(--prism-code-str); }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-comment,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-quote,\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-meta { color: var(--prism-code-com); font-style: italic; }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-deletion { color: var(--prism-danger); }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-addition { color: var(--prism-success); }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-emphasis { font-style: italic; }\n    :host ::ng-deep .prism-jsdoc-panel__code .hljs-strong { font-weight: 700; }\n    .prism-jsdoc-panel__table {\n      width: 100%; border-collapse: collapse;\n      font-size: var(--fs-md);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px; overflow: hidden;\n    }\n    .prism-jsdoc-panel__table th {\n      text-align: left; padding: 8px 12px;\n      background: var(--prism-bg-surface);\n      font-size: 10.5px; text-transform: uppercase;\n      letter-spacing: 0.06em; font-weight: 700;\n      color: var(--prism-text-ghost);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .prism-jsdoc-panel__table td {\n      padding: 10px 12px;\n      border-bottom: 1px solid var(--prism-border);\n      vertical-align: top;\n    }\n    .prism-jsdoc-panel__table tr:last-child td { border-bottom: 0; }\n    .prism-jsdoc-panel__row--deprecated td { opacity: 0.6; }\n    .prism-jsdoc-panel__cell--name code,\n    .prism-jsdoc-panel__cell--type code,\n    .prism-jsdoc-panel__cell--default code {\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm); color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      padding: 1px 5px; border-radius: var(--radius-xs);\n    }\n    .prism-jsdoc-panel__muted { color: var(--prism-text-muted); }\n    .prism-jsdoc-panel__cell--doc { color: var(--prism-text); line-height: 1.4; }\n    .prism-jsdoc-panel__since-sep { color: var(--prism-text-muted); }\n    .prism-jsdoc-panel__since { color: var(--prism-text-muted); font-size: var(--fs-sm); }\n\n    .prism-jsdoc-panel__description :first-child { margin-top: 0; }\n    .prism-jsdoc-panel__description :last-child { margin-bottom: 0; }\n    .prism-jsdoc-panel__description p { margin: 0 0 8px; line-height: 1.7; }\n    .prism-jsdoc-panel__description h1,\n    .prism-jsdoc-panel__description h2,\n    .prism-jsdoc-panel__description h3 {\n      color: var(--prism-text);\n      font-weight: 600;\n      line-height: 1.3;\n      margin: 18px 0 8px;\n    }\n    .prism-jsdoc-panel__description h1 { font-size: 18px; }\n    .prism-jsdoc-panel__description h2 { font-size: 15px; }\n    .prism-jsdoc-panel__description h3 {\n      font-size: 11px; font-weight: 700;\n      text-transform: uppercase; letter-spacing: 0.08em;\n      color: var(--prism-text-ghost);\n    }\n    .prism-jsdoc-panel__description ul,\n    .prism-jsdoc-panel__description ol {\n      margin: 0 0 8px; padding-left: 20px;\n    }\n    .prism-jsdoc-panel__description li { margin: 2px 0; line-height: 1.6; }\n    .prism-jsdoc-panel__description a {\n      color: var(--prism-primary);\n      text-decoration: none;\n    }\n    .prism-jsdoc-panel__description a:hover { text-decoration: underline; }\n    .prism-jsdoc-panel__description strong { color: var(--prism-text); font-weight: 600; }\n    .prism-jsdoc-panel__description code,\n    .prism-jsdoc-panel__cell--doc code {\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm); color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      padding: 1px 5px; border-radius: var(--radius-xs);\n    }\n    .prism-jsdoc-panel__description pre {\n      margin: 0 0 8px; padding: 0;\n      background: var(--prism-bg-surface);\n      border: 1px solid var(--prism-border);\n      border-radius: 8px; overflow: auto;\n    }\n    .prism-jsdoc-panel__description pre code {\n      font-family: var(--font-mono);\n      font-size: var(--fs-sm); line-height: 1.5;\n      padding: 8px 12px; display: block;\n      background: none; color: var(--prism-text);\n    }\n    .prism-jsdoc-panel__description blockquote {\n      margin: 0 0 8px;\n      padding: 4px 12px;\n      border-left: 3px solid var(--prism-border);\n      color: var(--prism-text-2);\n    }\n  "] }]
+        args: [{ selector: 'prism-jsdoc-panel', standalone: true, imports: [Highlight], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"prism-jsdoc-panel\">\n    @if (!activeComponent()) {\n        <div class=\"prism-jsdoc-panel__empty\"> Select a component to view API documentation. </div>\n    } @else {\n        @if (renderedClassDescription(); as descHtml) {\n            <div\n                class=\"prism-jsdoc-panel__description\"\n                [innerHTML]=\"descHtml\"></div>\n        }\n        @if (hasTags()) {\n            <div class=\"prism-jsdoc-panel__meta\">\n                @if (isDeprecated()) {\n                    <span class=\"prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated\">\n                        Deprecated{{ deprecatedMessage() ? ': ' + deprecatedMessage() : '' }}\n                    </span>\n                }\n                @if (version()) {\n                    <span class=\"prism-jsdoc-panel__meta-item\">\n                        <span class=\"prism-jsdoc-panel__meta-label\">Version:</span>\n                        {{ version() }}\n                    </span>\n                }\n                @if (since()) {\n                    <span class=\"prism-jsdoc-panel__meta-item\">\n                        <span class=\"prism-jsdoc-panel__meta-label\">Since:</span>\n                        {{ since() }}\n                    </span>\n                }\n                @for (ref of seeRefs(); track $index) {\n                    <span class=\"prism-jsdoc-panel__meta-item\"> <span class=\"prism-jsdoc-panel__meta-label\">See:</span> {{ ref }} </span>\n                }\n            </div>\n        }\n        @if (examples().length) {\n            <div class=\"prism-jsdoc-panel__section\">\n                <h3 class=\"prism-jsdoc-panel__heading\">Examples</h3>\n                @for (example of examples(); track $index) {\n                    @let parsed = parseExample(example);\n                    <pre class=\"prism-jsdoc-panel__code\"><code [highlight]=\"parsed.code\" [language]=\"parsed.lang\"></code></pre>\n                }\n            </div>\n        }\n        @if (inputs().length) {\n            <div class=\"prism-jsdoc-panel__section\">\n                <h3 class=\"prism-jsdoc-panel__heading\">Inputs</h3>\n                <table class=\"prism-jsdoc-panel__table\">\n                    <thead>\n                        <tr>\n                            <th>Name</th>\n                            <th>Type</th>\n                            <th>Default</th>\n                            <th>Required</th>\n                            <th>Description</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        @for (inp of inputs(); track inp.name) {\n                            <tr [class.prism-jsdoc-panel__row--deprecated]=\"isMemberDeprecated(inp.name)\">\n                                <td class=\"prism-jsdoc-panel__cell--name\">\n                                    <code>{{ inp.name }}</code>\n                                    @if (isMemberDeprecated(inp.name)) {\n                                        <span class=\"prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated prism-jsdoc-panel__badge--small\">deprecated</span>\n                                    }\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--type\">\n                                    <code>{{ inp.rawType ?? inp.type }}</code>\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--default\">\n                                    @if (inp.defaultValue !== undefined) {\n                                        <code>{{ formatDefault(inp.defaultValue) }}</code>\n                                    } @else {\n                                        <span class=\"prism-jsdoc-panel__muted\">\u2014</span>\n                                    }\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--required\">\n                                    @if (inp.required) {\n                                        <span class=\"prism-jsdoc-panel__badge prism-jsdoc-panel__badge--required\">required</span>\n                                    } @else {\n                                        <span class=\"prism-jsdoc-panel__muted\">\u2014</span>\n                                    }\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--doc\">\n                                    @if (inp.doc) {\n                                        <span [innerHTML]=\"renderInline(inp.doc)\"></span>\n                                    }\n                                    @if (getMemberSince(inp.name); as since) {\n                                        @if (inp.doc) {\n                                            <span class=\"prism-jsdoc-panel__since-sep\"> \u00B7 </span>\n                                        }\n                                        <span class=\"prism-jsdoc-panel__since\">Since {{ since }}</span>\n                                    }\n                                </td>\n                            </tr>\n                        }\n                    </tbody>\n                </table>\n            </div>\n        }\n        @if (outputs().length) {\n            <div class=\"prism-jsdoc-panel__section\">\n                <h3 class=\"prism-jsdoc-panel__heading\">Outputs</h3>\n                <table class=\"prism-jsdoc-panel__table\">\n                    <thead>\n                        <tr>\n                            <th>Name</th>\n                            <th>Description</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        @for (out of outputs(); track out.name) {\n                            <tr [class.prism-jsdoc-panel__row--deprecated]=\"isMemberDeprecated(out.name)\">\n                                <td class=\"prism-jsdoc-panel__cell--name\">\n                                    <code>{{ out.name }}</code>\n                                    @if (isMemberDeprecated(out.name)) {\n                                        <span class=\"prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated prism-jsdoc-panel__badge--small\">deprecated</span>\n                                    }\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--doc\">\n                                    @if (out.doc) {\n                                        <span [innerHTML]=\"renderInline(out.doc)\"></span>\n                                    }\n                                    @if (getMemberSince(out.name); as since) {\n                                        @if (out.doc) {\n                                            <span class=\"prism-jsdoc-panel__since-sep\"> \u00B7 </span>\n                                        }\n                                        <span class=\"prism-jsdoc-panel__since\">Since {{ since }}</span>\n                                    }\n                                </td>\n                            </tr>\n                        }\n                    </tbody>\n                </table>\n            </div>\n        }\n        @if (methods().length) {\n            <div class=\"prism-jsdoc-panel__section\">\n                <h3 class=\"prism-jsdoc-panel__heading\">Methods</h3>\n                <table class=\"prism-jsdoc-panel__table\">\n                    <thead>\n                        <tr>\n                            <th>Name</th>\n                            <th>Parameters</th>\n                            <th>Returns</th>\n                            <th>Description</th>\n                        </tr>\n                    </thead>\n                    <tbody>\n                        @for (method of methods(); track method.name) {\n                            <tr [class.prism-jsdoc-panel__row--deprecated]=\"!!method.tags.deprecated\">\n                                <td class=\"prism-jsdoc-panel__cell--name\">\n                                    <code>{{ method.name }}()</code>\n                                    @if (method.tags.deprecated) {\n                                        <span class=\"prism-jsdoc-panel__badge prism-jsdoc-panel__badge--deprecated prism-jsdoc-panel__badge--small\">deprecated</span>\n                                    }\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--type\">\n                                    @if (method.params.length) {\n                                        @for (p of method.params; track p.name) {\n                                            <div>\n                                                <code>{{ p.name }}{{ p.type ? ': ' + p.type : '' }}</code>\n                                            </div>\n                                        }\n                                    } @else {\n                                        <span class=\"prism-jsdoc-panel__muted\">\u2014</span>\n                                    }\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--type\">\n                                    @if (method.returnType) {\n                                        <code>{{ method.returnType }}</code>\n                                    } @else {\n                                        <span class=\"prism-jsdoc-panel__muted\">void</span>\n                                    }\n                                </td>\n                                <td class=\"prism-jsdoc-panel__cell--doc\">\n                                    @if (method.description) {\n                                        <span [innerHTML]=\"renderInline(method.description)\"></span>\n                                    }\n                                </td>\n                            </tr>\n                        }\n                    </tbody>\n                </table>\n            </div>\n        }\n    }\n</div>\n", styles: [":host {\n    display: block;\n    height: 100%;\n    overflow: auto;\n}\n\n.prism-jsdoc-panel {\n    max-width: 880px;\n    padding: 20px 24px;\n    font-family: var(--font-sans);\n    font-size: var(--fs-md);\n    color: var(--prism-text);\n}\n\n.prism-jsdoc-panel__empty {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    min-height: 120px;\n    color: var(--prism-text-muted);\n}\n\n.prism-jsdoc-panel__description {\n    margin: 0 0 18px;\n    font-size: 14px;\n    line-height: 1.7;\n    color: var(--prism-text-2);\n}\n\n.prism-jsdoc-panel__meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 18px;\n}\n\n.prism-jsdoc-panel__meta-item {\n    display: flex;\n    gap: 6px;\n    align-items: center;\n    padding: 3px 9px;\n    font-size: var(--fs-sm);\n    color: var(--prism-text-2);\n    background: var(--prism-input-bg);\n    border: 1px solid var(--prism-border);\n    border-radius: 4px;\n}\n\n.prism-jsdoc-panel__meta-label {\n    font-family: var(--font-mono);\n    font-weight: 500;\n    color: var(--prism-primary);\n}\n\n.prism-jsdoc-panel__badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    font-size: 12px;\n    font-weight: 600;\n    border-radius: 10px;\n}\n\n.prism-jsdoc-panel__badge--deprecated {\n    color: var(--prism-warn);\n    background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n}\n\n.prism-jsdoc-panel__badge--required {\n    margin-left: 4px;\n    font-weight: 700;\n    color: var(--prism-accent);\n}\n\n.prism-jsdoc-panel__badge--small {\n    padding: 1px 5px;\n    margin-left: 4px;\n    font-size: 10px;\n}\n\n.prism-jsdoc-panel__section {\n    margin-bottom: 20px;\n}\n\n.prism-jsdoc-panel__heading {\n    margin: 22px 0 10px;\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-jsdoc-panel__code {\n    padding: 0;\n    margin: 0 0 8px;\n    overflow: auto;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 8px;\n}\n\n.prism-jsdoc-panel__code code {\n    display: block;\n    padding: 8px 12px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-sm);\n    line-height: 1.5;\n    color: var(--prism-text-2);\n    background: transparent !important;\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs {\n    color: var(--prism-text-2);\n    background: transparent;\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-tag,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-name,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-selector-tag,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-keyword,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-title,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-title.function_,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-built_in,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-type {\n    color: var(--prism-code-tag);\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-attr,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-attribute,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-property,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-variable,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-template-variable,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-params {\n    color: var(--prism-code-attr);\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-string,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-doctag,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-regexp,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-symbol,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-number,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-literal {\n    color: var(--prism-code-str);\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-comment,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-quote,\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-meta {\n    font-style: italic;\n    color: var(--prism-code-com);\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-deletion {\n    color: var(--prism-danger);\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-addition {\n    color: var(--prism-success);\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-emphasis {\n    font-style: italic;\n}\n\n:host ::ng-deep .prism-jsdoc-panel__code .hljs-strong {\n    font-weight: 700;\n}\n\n.prism-jsdoc-panel__table {\n    width: 100%;\n    overflow: hidden;\n    font-size: var(--fs-md);\n    border-collapse: collapse;\n    border: 1px solid var(--prism-border);\n    border-radius: 8px;\n}\n\n.prism-jsdoc-panel__table th {\n    padding: 8px 12px;\n    font-size: 10.5px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-align: left;\n    text-transform: uppercase;\n    letter-spacing: 0.06em;\n    background: var(--prism-bg-surface);\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.prism-jsdoc-panel__table td {\n    padding: 10px 12px;\n    vertical-align: top;\n    border-bottom: 1px solid var(--prism-border);\n}\n\n.prism-jsdoc-panel__table tr:last-child td {\n    border-bottom: 0;\n}\n\n.prism-jsdoc-panel__row--deprecated td {\n    opacity: 0.6;\n}\n\n.prism-jsdoc-panel__cell--name code,\n.prism-jsdoc-panel__cell--type code,\n.prism-jsdoc-panel__cell--default code {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-sm);\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    border-radius: var(--radius-xs);\n}\n\n.prism-jsdoc-panel__muted {\n    color: var(--prism-text-muted);\n}\n\n.prism-jsdoc-panel__cell--doc {\n    line-height: 1.4;\n    color: var(--prism-text);\n}\n\n.prism-jsdoc-panel__since-sep {\n    color: var(--prism-text-muted);\n}\n\n.prism-jsdoc-panel__since {\n    font-size: var(--fs-sm);\n    color: var(--prism-text-muted);\n}\n\n.prism-jsdoc-panel__description :first-child {\n    margin-top: 0;\n}\n\n.prism-jsdoc-panel__description :last-child {\n    margin-bottom: 0;\n}\n\n.prism-jsdoc-panel__description p {\n    margin: 0 0 8px;\n    line-height: 1.7;\n}\n\n.prism-jsdoc-panel__description h1,\n.prism-jsdoc-panel__description h2,\n.prism-jsdoc-panel__description h3 {\n    margin: 18px 0 8px;\n    font-weight: 600;\n    line-height: 1.3;\n    color: var(--prism-text);\n}\n\n.prism-jsdoc-panel__description h1 {\n    font-size: 18px;\n}\n\n.prism-jsdoc-panel__description h2 {\n    font-size: 15px;\n}\n\n.prism-jsdoc-panel__description h3 {\n    font-size: 11px;\n    font-weight: 700;\n    color: var(--prism-text-ghost);\n    text-transform: uppercase;\n    letter-spacing: 0.08em;\n}\n\n.prism-jsdoc-panel__description ul,\n.prism-jsdoc-panel__description ol {\n    padding-left: 20px;\n    margin: 0 0 8px;\n}\n\n.prism-jsdoc-panel__description li {\n    margin: 2px 0;\n    line-height: 1.6;\n}\n\n.prism-jsdoc-panel__description a {\n    color: var(--prism-primary);\n    text-decoration: none;\n}\n\n.prism-jsdoc-panel__description a:hover {\n    text-decoration: underline;\n}\n\n.prism-jsdoc-panel__description strong {\n    font-weight: 600;\n    color: var(--prism-text);\n}\n\n.prism-jsdoc-panel__description code,\n.prism-jsdoc-panel__cell--doc code {\n    padding: 1px 5px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-sm);\n    color: var(--prism-primary);\n    background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    border-radius: var(--radius-xs);\n}\n\n.prism-jsdoc-panel__description pre {\n    padding: 0;\n    margin: 0 0 8px;\n    overflow: auto;\n    background: var(--prism-bg-surface);\n    border: 1px solid var(--prism-border);\n    border-radius: 8px;\n}\n\n.prism-jsdoc-panel__description pre code {\n    display: block;\n    padding: 8px 12px;\n    font-family: var(--font-mono);\n    font-size: var(--fs-sm);\n    line-height: 1.5;\n    color: var(--prism-text);\n    background: none;\n}\n\n.prism-jsdoc-panel__description blockquote {\n    padding: 4px 12px;\n    margin: 0 0 8px;\n    color: var(--prism-text-2);\n    border-left: 3px solid var(--prism-border);\n}\n"] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsDocPanelComponent, { className: "JsDocPanelComponent", filePath: "jsdoc-panel.component.ts", lineNumber: 410 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsDocPanelComponent, { className: "JsDocPanelComponent", filePath: "jsdoc-panel.component.ts", lineNumber: 16 }); })();

package/dist/jsdoc-plugin.browser.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsdoc-plugin.browser.d.ts","sourceRoot":"","sources":["../src/jsdoc-plugin.browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,wBAAgB,WAAW,IAAI,aAAa,CAiB3C"}
+{"version":3,"file":"jsdoc-plugin.browser.d.ts","sourceRoot":"","sources":["../src/jsdoc-plugin.browser.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,wBAAgB,WAAW,IAAI,aAAa,CAc3C"}

package/dist/jsdoc-plugin.browser.js

@@ -8,8 +8,8 @@ export function jsDocPlugin() {
                 icon: 'file-text',
                 loadComponent: () => import('./jsdoc-panel.component.js').then((m) => m.JsDocPanelComponent),
                 position: 'bottom',
-                placement: 'view',
-            },
-        ],
+                placement: 'view'
+            }
+        ]
     };
 }

package/dist/jsdoc-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsdoc-plugin.d.ts","sourceRoot":"","sources":["../src/jsdoc-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,wBAAgB,WAAW,IAAI,aAAa,CA2B3C"}
+{"version":3,"file":"jsdoc-plugin.d.ts","sourceRoot":"","sources":["../src/jsdoc-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,wBAAgB,WAAW,IAAI,aAAa,CAyB3C"}

package/dist/jsdoc-plugin.js

@@ -3,15 +3,15 @@ export function jsDocPlugin() {
     return {
         name: '@ng-prism/plugin-jsdoc',
         async onComponentScanned(component) {
-            const jsdoc = extractJsDocData(component.filePath, component.className);
+            const jsdoc = extractJsDocData(component.filePath, component.className, component.baseClasses);
             if (!jsdoc)
                 return;
             return {
                 ...component,
                 showcaseConfig: {
                     ...component.showcaseConfig,
-                    meta: { ...component.showcaseConfig.meta, jsdoc },
-                },
+                    meta: { ...component.showcaseConfig.meta, jsdoc }
+                }
             };
         },
         panels: [
@@ -20,8 +20,8 @@ export function jsDocPlugin() {
                 label: 'API',
                 icon: 'file-text',
                 loadComponent: () => import('./jsdoc-panel.component.js').then((m) => m.JsDocPanelComponent),
-                position: 'bottom',
-            },
-        ],
+                position: 'bottom'
+            }
+        ]
     };
 }

package/dist/jsdoc.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"jsdoc.types.d.ts","sourceRoot":"","sources":["../src/jsdoc.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACpB;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;CACvB"}
+{"version":3,"file":"jsdoc.types.d.ts","sourceRoot":"","sources":["../src/jsdoc.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,SAAS;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,SAAS;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,SAAS;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,SAAS,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACtC,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;CACzB"}

package/dist/markdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../src/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAQvD;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAG3E;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAGrE"}
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../src/markdown.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,aAAa,CAUvD;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,IAAI,CAG3E;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAGrE"}

package/dist/schematics/ng-add/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAGV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAyBtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAEvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,IAAI,EAAoC,MAAM,4BAA4B,CAAC;AAEhG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAwBtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAEvD"}

package/dist/schematics/ng-add/index.js

@@ -1,4 +1,4 @@
-import { chain, } from '@angular-devkit/schematics';
+import { chain } from '@angular-devkit/schematics';
 import { addPluginToConfig } from '@ng-prism/core/schematics/utils';
 const PLUGIN_IMPORT_NAME = 'jsDocPlugin';
 const PLUGIN_IMPORT_FROM = '@ng-prism/plugin-jsdoc';
@@ -9,13 +9,13 @@ function injectPlugin(options) {
         const changed = addPluginToConfig(tree, configPath, {
             importName: PLUGIN_IMPORT_NAME,
             importFrom: PLUGIN_IMPORT_FROM,
-            call: PLUGIN_CALL,
+            call: PLUGIN_CALL
         });
         if (changed) {
-            context.logger.info(`  ${PLUGIN_IMPORT_FROM} → added to ${configPath}`);
+            context.logger.info(`  ${PLUGIN_IMPORT_FROM} added to ${configPath}`);
         }
         else {
-            context.logger.info(`  ${PLUGIN_IMPORT_FROM} already configured — skipped`);
+            context.logger.info(`  ${PLUGIN_IMPORT_FROM} already configured, skipped`);
         }
         return tree;
     };

package/dist/schematics/ng-add/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/plugin-jsdoc",
-  "version": "22.2.1",
+  "version": "22.4.0",
   "description": "JSDoc API documentation panel for ng-prism.",
   "ng-add": {
     "save": "devDependencies"
@@ -36,10 +36,12 @@
   ],
   "peerDependencies": {
     "@angular/core": ">=20.0.0",
-    "@ng-prism/core": "^22.2.1-0",
+    "@ng-prism/core": "^22.4.0-0",
     "highlight.js": ">=11.0.0",
     "ngx-highlightjs": ">=14.0.0",
-    "typescript": ">=5.5.0"
+    "typescript": ">=5.5.0",
+    "@angular-devkit/schematics": ">=20.0.0",
+    "@angular/platform-browser": ">=20.0.0"
   },
   "devDependencies": {
     "@ng-prism/core": "*"

package/schematics/collection.json

@@ -1,10 +1,10 @@
 {
-  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
-  "schematics": {
-    "ng-add": {
-      "description": "Adds @ng-prism/plugin-jsdoc to the ng-prism config",
-      "factory": "../dist/schematics/ng-add/index#ngAdd",
-      "schema": "./ng-add/schema.json"
+    "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+    "schematics": {
+        "ng-add": {
+            "description": "Adds @ng-prism/plugin-jsdoc to the ng-prism config",
+            "factory": "../dist/schematics/ng-add/index#ngAdd",
+            "schema": "./ng-add/schema.json"
+        }
     }
-  }
 }

package/schematics/ng-add/schema.json

@@ -1,16 +1,16 @@
 {
-  "$schema": "http://json-schema.org/draft-07/schema#",
-  "$id": "NgPrismPluginJsDocNgAdd",
-  "title": "Add @ng-prism/plugin-jsdoc",
-  "description": "Registers @ng-prism/plugin-jsdoc in ng-prism.config.ts",
-  "type": "object",
-  "properties": {
-    "configPath": {
-      "type": "string",
-      "description": "Path to ng-prism.config.ts",
-      "default": "ng-prism.config.ts"
-    }
-  },
-  "required": [],
-  "additionalProperties": false
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "$id": "NgPrismPluginJsDocNgAdd",
+    "title": "Add @ng-prism/plugin-jsdoc",
+    "description": "Registers @ng-prism/plugin-jsdoc in ng-prism.config.ts",
+    "type": "object",
+    "properties": {
+        "configPath": {
+            "type": "string",
+            "description": "Path to ng-prism.config.ts",
+            "default": "ng-prism.config.ts"
+        }
+    },
+    "required": [],
+    "additionalProperties": false
 }