@ng-prism/core 21.3.0 → 21.4.0

package/README.md

@@ -11,7 +11,7 @@ Lightweight, Angular-native component showcase tool. Annotate components with `@
 - **Zero-config discovery** — TypeScript Compiler API scans your library at build time
 - **Signal-native** — works with `input()` / `output()` signals
 - **Directive support** — showcase directives with configurable host elements
-- **Plugin architecture** — JSDoc, A11y, Figma, Performance, Box Model plugins
+- **Plugin architecture** — JSDoc, A11y, Figma, Performance, Box Model, Coverage plugins
 - **Live Controls** — auto-generated input controls with type-aware editors
 - **Code Snippets** — live-updating Angular template snippets per variant
 - **Component Pages** — free-form demo pages for complex components
@@ -150,6 +150,7 @@ export class TableComponent { ... }
 | Figma | `@ng-prism/plugin-figma` | Figma design embed + visual diff |
 | Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector |
 | Perf | `@ng-prism/plugin-perf` | Render performance profiling |
+| Coverage | `@ng-prism/plugin-coverage` | Per-component test coverage from Istanbul/v8 |
 
 > **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.
 

package/dist/app/panels/controls/prism-controls-panel.component.d.ts

@@ -1,9 +1,12 @@
+import type { ControlDefinition, InputMeta } from '../../../plugin/plugin.types.js';
 import { PrismNavigationService } from '../../services/prism-navigation.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
 export declare class PrismControlsPanelComponent {
     protected readonly navigationService: PrismNavigationService;
     protected readonly rendererService: PrismRendererService;
+    private readonly pluginService;
+    protected getCustomControl(input: InputMeta): ControlDefinition | null;
     protected asBoolean(val: unknown): boolean;
     protected asNumber(val: unknown): number;
     protected asString(val: unknown): string;

package/dist/app/panels/controls/prism-controls-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAyFa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAElE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAZ7B,2BAA2B;2CAA3B,2BAA2B;CAevC"}
+{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AACpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBAiGa,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAItE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,OAAO;IAI1C,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAIxC,SAAS,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;yCAjB7B,2BAA2B;2CAA3B,2BAA2B;CAoBvC"}

package/dist/app/panels/controls/prism-controls-panel.component.js

@@ -1,3 +1,4 @@
+import { NgComponentOutlet } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { BooleanControlComponent } from '../../controls/boolean-control.component.js';
 import { JsonControlComponent } from '../../controls/json-control.component.js';
@@ -5,69 +6,85 @@ import { NumberControlComponent } from '../../controls/number-control.component.
 import { StringControlComponent } from '../../controls/string-control.component.js';
 import { UnionControlComponent } from '../../controls/union-control.component.js';
 import { PrismNavigationService } from '../../services/prism-navigation.service.js';
+import { PrismPluginService } from '../../services/prism-plugin.service.js';
 import { PrismRendererService } from '../../services/prism-renderer.service.js';
 import * as i0 from "@angular/core";
-const _c0 = () => [];
+const _c0 = a0 => ({ inputMeta: a0 });
+const _c1 = () => [];
 const _forTrack0 = ($index, $item) => $item.name;
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_1_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-boolean-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_1_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r1); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0, 3);
+} if (rf & 2) {
+    const input_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngComponentOutlet", ctx.component)("ngComponentOutletInputs", i0.ɵɵpureFunction1(2, _c0, input_r1));
+} }
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_0_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "prism-boolean-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_0_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asBoolean(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.asBoolean(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "");
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_2_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_1_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-number-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_2_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-number-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_1_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asNumber(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.asNumber(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "");
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_3_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_2_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-union-control", 6);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_3_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-union-control", 7);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_2_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "")("options", input_r2.values ?? i0.ɵɵpureFunction0(4, _c0));
+    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "")("options", input_r1.values ?? i0.ɵɵpureFunction0(4, _c1));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_4_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_3_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-string-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_4_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-string-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_3_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r2.name]))("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.asString(ctx_r2.rendererService.inputValues()[input_r1.name]))("label", input_r1.name)("typeName", input_r1.rawType ?? "");
 } }
-function PrismControlsPanelComponent_Conditional_0_For_2_Case_5_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_4_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-json-control", 5);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Case_5_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r2 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r2.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-json-control", 6);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_4_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r1 = i0.ɵɵnextContext(2).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.rendererService.updateInput(input_r1.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r2 = i0.ɵɵnextContext().$implicit;
+    const input_r1 = i0.ɵɵnextContext(2).$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("value", ctx_r2.rendererService.inputValues()[input_r2.name])("label", input_r2.name)("typeName", input_r2.rawType ?? "");
+    i0.ɵɵproperty("value", ctx_r2.rendererService.inputValues()[input_r1.name])("label", input_r1.name)("typeName", input_r1.rawType ?? "");
+} }
+function PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_0_Template, 1, 3, "prism-boolean-control", 4)(1, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_1_Template, 1, 3, "prism-number-control", 4)(2, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_2_Template, 1, 5, "prism-union-control", 5)(3, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_3_Template, 1, 3, "prism-string-control", 4)(4, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Case_4_Template, 1, 3, "prism-json-control", 4);
+} if (rf & 2) {
+    let tmp_13_0;
+    const input_r1 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵconditional((tmp_13_0 = input_r1.type) === "boolean" ? 0 : tmp_13_0 === "number" ? 1 : tmp_13_0 === "union" ? 2 : tmp_13_0 === "string" ? 3 : 4);
 } }
 function PrismControlsPanelComponent_Conditional_0_For_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
-    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Case_1_Template, 1, 3, "prism-boolean-control", 3)(2, PrismControlsPanelComponent_Conditional_0_For_2_Case_2_Template, 1, 3, "prism-number-control", 3)(3, PrismControlsPanelComponent_Conditional_0_For_2_Case_3_Template, 1, 5, "prism-union-control", 4)(4, PrismControlsPanelComponent_Conditional_0_For_2_Case_4_Template, 1, 3, "prism-string-control", 3)(5, PrismControlsPanelComponent_Conditional_0_For_2_Case_5_Template, 1, 3, "prism-json-control", 3);
+    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_1_Template, 1, 4, "ng-container", 3)(2, PrismControlsPanelComponent_Conditional_0_For_2_Conditional_2_Template, 5, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
-    const input_r2 = ctx.$implicit;
+    const input_r1 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵconditional((tmp_12_0 = input_r2.type) === "boolean" ? 1 : tmp_12_0 === "number" ? 2 : tmp_12_0 === "union" ? 3 : tmp_12_0 === "string" ? 4 : 5);
+    i0.ɵɵconditional((tmp_12_0 = ctx_r2.getCustomControl(input_r1)) ? 1 : 2, tmp_12_0);
 } }
 function PrismControlsPanelComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 2);
@@ -76,7 +93,7 @@ function PrismControlsPanelComponent_Conditional_0_Conditional_3_Template(rf, ct
 } }
 function PrismControlsPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 0);
-    i0.ɵɵrepeaterCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Template, 6, 1, "div", 1, _forTrack0);
+    i0.ɵɵrepeaterCreate(1, PrismControlsPanelComponent_Conditional_0_For_2_Template, 3, 1, "div", 1, _forTrack0);
     i0.ɵɵconditionalCreate(3, PrismControlsPanelComponent_Conditional_0_Conditional_3_Template, 2, 0, "p", 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -89,6 +106,10 @@ function PrismControlsPanelComponent_Conditional_0_Template(rf, ctx) { if (rf &
 export class PrismControlsPanelComponent {
     navigationService = inject(PrismNavigationService);
     rendererService = inject(PrismRendererService);
+    pluginService = inject(PrismPluginService);
+    getCustomControl(input) {
+        return this.pluginService.controls().find((ctrl) => ctrl.matchType(input)) ?? null;
+    }
     asBoolean(val) {
         return Boolean(val);
     }
@@ -99,12 +120,13 @@ export class PrismControlsPanelComponent {
         return String(val ?? '');
     }
     static ɵfac = function PrismControlsPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismControlsPanelComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismControlsPanelComponent, selectors: [["prism-controls-panel"]], decls: 1, vars: 1, consts: [[1, "prism-controls-panel"], [1, "prism-controls-panel__row"], [1, "prism-controls-panel__empty"], [3, "value", "label", "typeName"], [3, "value", "label", "typeName", "options"], [3, "valueChange", "value", "label", "typeName"], [3, "valueChange", "value", "label", "typeName", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismControlsPanelComponent, selectors: [["prism-controls-panel"]], decls: 1, vars: 1, consts: [[1, "prism-controls-panel"], [1, "prism-controls-panel__row"], [1, "prism-controls-panel__empty"], [3, "ngComponentOutlet", "ngComponentOutletInputs"], [3, "value", "label", "typeName"], [3, "value", "label", "typeName", "options"], [3, "valueChange", "value", "label", "typeName"], [3, "valueChange", "value", "label", "typeName", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_Template, 4, 1, "div", 0);
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.navigationService.activeComponent()) ? 0 : -1, tmp_0_0);
-        } }, dependencies: [BooleanControlComponent,
+        } }, dependencies: [NgComponentOutlet,
+            BooleanControlComponent,
             StringControlComponent,
             NumberControlComponent,
             UnionControlComponent,
@@ -113,6 +135,7 @@ export class PrismControlsPanelComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismControlsPanelComponent, [{
         type: Component,
         args: [{ selector: 'prism-controls-panel', standalone: true, imports: [
+                    NgComponentOutlet,
                     BooleanControlComponent,
                     StringControlComponent,
                     NumberControlComponent,
@@ -123,47 +146,54 @@ export class PrismControlsPanelComponent {
       <div class="prism-controls-panel">
         @for (input of comp.meta.inputs; track input.name) {
           <div class="prism-controls-panel__row">
-            @switch (input.type) {
-              @case ('boolean') {
-                <prism-boolean-control
-                  [value]="asBoolean(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @case ('number') {
-                <prism-number-control
-                  [value]="asNumber(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @case ('union') {
-                <prism-union-control
-                  [value]="asString(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  [options]="input.values ?? []"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @case ('string') {
-                <prism-string-control
-                  [value]="asString(rendererService.inputValues()[input.name])"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
-              }
-              @default {
-                <prism-json-control
-                  [value]="rendererService.inputValues()[input.name]"
-                  [label]="input.name"
-                  [typeName]="input.rawType ?? ''"
-                  (valueChange)="rendererService.updateInput(input.name, $event)"
-                />
+            @if (getCustomControl(input); as customCtrl) {
+              <ng-container
+                [ngComponentOutlet]="customCtrl.component"
+                [ngComponentOutletInputs]="{ inputMeta: input }"
+              />
+            } @else {
+              @switch (input.type) {
+                @case ('boolean') {
+                  <prism-boolean-control
+                    [value]="asBoolean(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @case ('number') {
+                  <prism-number-control
+                    [value]="asNumber(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @case ('union') {
+                  <prism-union-control
+                    [value]="asString(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    [options]="input.values ?? []"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @case ('string') {
+                  <prism-string-control
+                    [value]="asString(rendererService.inputValues()[input.name])"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
+                @default {
+                  <prism-json-control
+                    [value]="rendererService.inputValues()[input.name]"
+                    [label]="input.name"
+                    [typeName]="input.rawType ?? ''"
+                    (valueChange)="rendererService.updateInput(input.name, $event)"
+                  />
+                }
               }
             }
           </div>
@@ -175,4 +205,4 @@ export class PrismControlsPanelComponent {
     }
   `, styles: ["\n    .prism-controls-panel {\n      display: flex;\n      flex-direction: column;\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .prism-controls-panel__row {\n      border-bottom: 1px solid var(--prism-border);\n    }\n\n    .prism-controls-panel__row:last-child { border-bottom: none; }\n\n    .prism-controls-panel__empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      margin: 0;\n      padding: 16px;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 99 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 110 }); })();

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts

@@ -9,6 +9,7 @@ export declare class PrismPanelHostComponent implements OnDestroy {
     private readonly auditService;
     private readonly rendererService;
     protected readonly a11yScore: import("@angular/core").Signal<number | null>;
+    protected readonly coverageScore: import("@angular/core").Signal<number | null>;
     private readonly builtInPanels;
     protected readonly allPanels: import("@angular/core").Signal<import("../../../index.js").PanelDefinition[]>;
     protected readonly resolvedComponent: import("@angular/core").WritableSignal<Type<unknown> | null>;

package/dist/app/panels/panel-host/prism-panel-host.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA0D,mBAAmB,EAAU,SAAS,EAAU,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AAKlJ,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAK1E,qBAkFa,uBAAwB,YAAW,SAAS;IACvD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAAkE;IAE9F,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,gFAGzB;IACH,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAY9B;;IAmDH,WAAW,IAAI,IAAI;yCAvFR,uBAAuB;2CAAvB,uBAAuB;CA0FnC"}
+{"version":3,"file":"prism-panel-host.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/panel-host/prism-panel-host.component.ts"],"names":[],"mappings":"AACA,OAAO,EAA0D,mBAAmB,EAAU,SAAS,EAAU,KAAK,IAAI,EAAE,MAAM,eAAe,CAAC;AAKlJ,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;;AAK1E,qBAqFa,uBAAwB,YAAW,SAAS;IACvD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAC5D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA4B;IACzD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,SAAS,CAAC,QAAQ,CAAC,SAAS,gDAAkE;IAE9F,SAAS,CAAC,QAAQ,CAAC,aAAa,gDAK7B;IAEH,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAkB;IAEhD,SAAS,CAAC,QAAQ,CAAC,SAAS,gFAGzB;IACH,SAAS,CAAC,QAAQ,CAAC,iBAAiB,+DAAsC;IAC1E,SAAS,CAAC,QAAQ,CAAC,WAAW;;OAE1B;IAEJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,SAAS,CAAC,QAAQ,CAAC,cAAc,sDAY9B;;IAmDH,WAAW,IAAI,IAAI;yCA9FR,uBAAuB;2CAAvB,uBAAuB;CAiGnC"}

package/dist/app/panels/panel-host/prism-panel-host.component.js

@@ -15,12 +15,19 @@ function PrismPanelHostComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("score", ctx_r2.a11yScore())("compact", true);
 } }
+function PrismPanelHostComponent_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "prism-a11y-score", 5);
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("score", ctx_r2.coverageScore())("compact", true);
+} }
 function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 4);
     i0.ɵɵlistener("click", function PrismPanelHostComponent_For_3_Template_button_click_0_listener() { const panel_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.panelService.activePanelId.set(panel_r2.id)); });
     i0.ɵɵconditionalCreate(1, PrismPanelHostComponent_For_3_Conditional_1_Template, 1, 2, "prism-a11y-score", 5);
-    i0.ɵɵtext(2);
+    i0.ɵɵconditionalCreate(2, PrismPanelHostComponent_For_3_Conditional_2_Template, 1, 2, "prism-a11y-score", 5);
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const panel_r2 = ctx.$implicit;
@@ -29,6 +36,8 @@ function PrismPanelHostComponent_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(panel_r2.id === "a11y" && ctx_r2.a11yScore() !== null ? 1 : -1);
     i0.ɵɵadvance();
+    i0.ɵɵconditional(panel_r2.id === "coverage" && ctx_r2.coverageScore() !== null ? 2 : -1);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", panel_r2.label, " ");
 } }
 function PrismPanelHostComponent_Conditional_5_ng_container_0_Template(rf, ctx) { if (rf & 1) {
@@ -48,6 +57,13 @@ export class PrismPanelHostComponent {
     auditService = inject(A11yAuditService);
     rendererService = inject(PrismRendererService);
     a11yScore = computed(() => this.auditService.scoreResult()?.score ?? null, ...(ngDevMode ? [{ debugName: "a11yScore" }] : []));
+    coverageScore = computed(() => {
+        const comp = this.nav.activeComponent();
+        const coverage = comp?.meta?.showcaseConfig?.meta?.['coverage'];
+        if (!coverage?.found)
+            return null;
+        return coverage.score;
+    }, ...(ngDevMode ? [{ debugName: "coverageScore" }] : []));
     builtInPanels = BUILTIN_PANELS;
     allPanels = computed(() => [
         ...this.builtInPanels.filter((p) => p.placement !== 'view'),
@@ -116,7 +132,7 @@ export class PrismPanelHostComponent {
     static ɵfac = function PrismPanelHostComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPanelHostComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPanelHostComponent, selectors: [["prism-panel-host"]], decls: 6, vars: 1, consts: [[1, "prism-panel-host"], [1, "prism-panel-host__tabs"], [1, "prism-panel-host__tab", 3, "prism-panel-host__tab--active"], [1, "prism-panel-host__content"], [1, "prism-panel-host__tab", 3, "click"], [2, "width", "18px", "height", "18px", 3, "score", "compact"], [4, "ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector"]], template: function PrismPanelHostComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
-            i0.ɵɵrepeaterCreate(2, PrismPanelHostComponent_For_3_Template, 3, 4, "button", 2, _forTrack0);
+            i0.ɵɵrepeaterCreate(2, PrismPanelHostComponent_For_3_Template, 4, 5, "button", 2, _forTrack0);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(4, "div", 3);
             i0.ɵɵconditionalCreate(5, PrismPanelHostComponent_Conditional_5_Template, 1, 3, "ng-container");
@@ -142,6 +158,9 @@ export class PrismPanelHostComponent {
             @if (panel.id === 'a11y' && a11yScore() !== null) {
               <prism-a11y-score [score]="a11yScore()!" [compact]="true" style="width:18px;height:18px;" />
             }
+            @if (panel.id === 'coverage' && coverageScore() !== null) {
+              <prism-a11y-score [score]="coverageScore()!" [compact]="true" style="width:18px;height:18px;" />
+            }
             {{ panel.label }}
           </button>
         }
@@ -154,4 +173,4 @@ export class PrismPanelHostComponent {
     </div>
   `, styles: ["\n    .prism-panel-host {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: var(--prism-bg-elevated);\n    }\n\n    .prism-panel-host__tabs {\n      display: flex;\n      border-bottom: 1px solid var(--prism-border);\n      padding: 0 8px;\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n\n    .prism-panel-host__tab {\n      padding: 9px 14px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      margin-bottom: -1px;\n      transition: color 0.12s;\n    }\n\n    .prism-panel-host__tab::after {\n      content: '';\n      position: absolute;\n      bottom: 0;\n      left: 8px;\n      right: 8px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n\n    .prism-panel-host__tab:hover { color: var(--prism-text-2); }\n\n    .prism-panel-host__tab--active { color: var(--prism-primary); font-weight: 500; }\n\n    .prism-panel-host__tab--active::after { opacity: 1; }\n\n    .prism-panel-host__tab { display: flex; align-items: center; gap: 6px; }\n\n    .prism-panel-host__content {\n      flex: 1;\n      overflow: auto;\n    }\n  "] }]
     }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 94 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPanelHostComponent, { className: "PrismPanelHostComponent", filePath: "app/panels/panel-host/prism-panel-host.component.ts", lineNumber: 97 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "21.3.0",
+  "version": "21.4.0",
   "description": "Lightweight Angular-native component showcase — no story files needed.",
   "keywords": [
     "angular",