@ng-prism/core 22.1.0 → 22.1.2

package/dist/app/controls/json-control.component.d.ts

@@ -1,4 +1,6 @@
 import * as i0 from "@angular/core";
+export declare function highlightJson(json: unknown): string;
+export declare function stringifyForJsonControl(val: unknown): string;
 export declare class JsonControlComponent {
     readonly value: import("@angular/core").InputSignal<unknown>;
     readonly label: import("@angular/core").InputSignal<string>;
@@ -10,7 +12,6 @@ export declare class JsonControlComponent {
     private readonly preEl;
     readonly displayText: import("@angular/core").Signal<string>;
     readonly highlightedHtml: import("@angular/core").Signal<string>;
-    stringify(val: unknown): string;
     onInput(raw: string): void;
     syncScroll(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<JsonControlComponent, never>;

package/dist/app/controls/json-control.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAyBA,qBAuFa,oBAAoB;IAC/B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CACgC;IAC3D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,SAAS,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM;IAQ/B,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW1B,UAAU,IAAI,IAAI;yCAxCP,oBAAoB;2CAApB,oBAAoB;CAgDhC"}
+{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAWA,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,CAanD;AAED,wBAAgB,uBAAuB,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,CAU5D;AAED,qBAuFa,oBAAoB;IAC/B,QAAQ,CAAC,KAAK,+CAAwB;IACtC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;IAEzC,QAAQ,CAAC,UAAU,kDAAiB;IACpC,QAAQ,CAAC,SAAS,wDAA+B;IAEjD,OAAO,CAAC,QAAQ,CAAC,UAAU,CACgC;IAC3D,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAkD;IAExE,QAAQ,CAAC,WAAW,yCAIjB;IAEH,QAAQ,CAAC,eAAe,yCAAqD;IAE7E,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAW1B,UAAU,IAAI,IAAI;yCAhCP,oBAAoB;2CAApB,oBAAoB;CAwChC"}

package/dist/app/controls/json-control.component.js

@@ -7,7 +7,9 @@ function JsonControlComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(1, "Invalid JSON");
     i0.ɵɵdomElementEnd();
 } }
-function highlightJson(json) {
+export function highlightJson(json) {
+    if (typeof json !== 'string')
+        return '';
     return json.replace(/("(?:\\.|[^"\\])*")\s*(:)|("(?:\\.|[^"\\])*")|(true|false)|(null)|(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g, (match, key, colon, str, bool, nil, num) => {
         if (key && colon)
             return `<span class="jh-key">${key}</span>${colon}`;
@@ -22,6 +24,18 @@ function highlightJson(json) {
         return match;
     });
 }
+export function stringifyForJsonControl(val) {
+    try {
+        const serialized = JSON.stringify(val, null, 2);
+        // JSON.stringify returns `undefined` (the value, not a string) for
+        // `undefined`, functions, and symbols. Surface that as visible text so the
+        // textarea + highlighter never see a non-string.
+        return serialized ?? 'undefined';
+    }
+    catch {
+        return String(val);
+    }
+}
 export class JsonControlComponent {
     value = input(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
@@ -42,19 +56,11 @@ export class JsonControlComponent {
         const local = this.localText();
         if (local !== null)
             return local;
-        return this.stringify(this.value());
+        return stringifyForJsonControl(this.value());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
     highlightedHtml = computed(() => highlightJson(this.displayText()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "highlightedHtml" }] : /* istanbul ignore next */ []));
-    stringify(val) {
-        try {
-            return JSON.stringify(val, null, 2);
-        }
-        catch {
-            return String(val);
-        }
-    }
     onInput(raw) {
         this.localText.set(raw);
         try {
@@ -121,4 +127,4 @@ export class JsonControlComponent {
     </div>
   `, styles: ["\n    .json-editor { flex: 1; min-width: 0; }\n\n    .json-overlay {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      overflow: hidden;\n      transition: border-color var(--dur-fast);\n    }\n    .json-overlay:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }\n\n    .json-pre, .json-input {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--font-mono);\n      font-size: 12px;\n      line-height: 1.4;\n      white-space: pre-wrap;\n      word-wrap: break-word;\n      tab-size: 2;\n    }\n\n    .json-pre {\n      min-height: 56px;\n      pointer-events: none;\n    }\n    .json-pre code { font-family: inherit; }\n\n    :host ::ng-deep .jh-key { color: var(--prism-code-attr); }\n    :host ::ng-deep .jh-string { color: var(--prism-code-str); }\n    :host ::ng-deep .jh-number { color: var(--prism-warn); }\n    :host ::ng-deep .jh-bool { color: var(--prism-primary); }\n    :host ::ng-deep .jh-null { color: var(--prism-text-ghost); }\n\n    .json-input {\n      position: absolute;\n      inset: 0;\n      width: 100%;\n      height: 100%;\n      background: transparent;\n      color: transparent;\n      caret-color: var(--prism-text);\n      border: none;\n      resize: none;\n      overflow: auto;\n      box-sizing: border-box;\n    }\n    .json-input:focus { outline: none; }\n    .json-input::selection { background: rgba(99, 102, 241, 0.3); }\n\n    .json-error {\n      font-size: 11px;\n      color: var(--prism-danger);\n      display: block;\n      margin-top: 2px;\n    }\n  "] }]
     }], null, { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], typeName: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeName", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], textareaEl: [{ type: i0.ViewChild, args: ['textareaEl', { isSignal: true }] }], preEl: [{ type: i0.ViewChild, args: ['preEl', { isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsonControlComponent, { className: "JsonControlComponent", filePath: "app/controls/json-control.component.ts", lineNumber: 113 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(JsonControlComponent, { className: "JsonControlComponent", filePath: "app/controls/json-control.component.ts", lineNumber: 126 }); })();

package/dist/app/panels/controls/non-editable-input-types.d.ts

@@ -0,0 +1,3 @@
+import type { InputMeta } from '../../../plugin/plugin.types.js';
+export declare function isNonEditableInputType(input: InputMeta): boolean;
+//# sourceMappingURL=non-editable-input-types.d.ts.map

package/dist/app/panels/controls/non-editable-input-types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"non-editable-input-types.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/non-editable-input-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAoBjE,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO,CAIhE"}

package/dist/app/panels/controls/non-editable-input-types.js

@@ -0,0 +1,20 @@
+/**
+ * Angular framework reference types that aren't meaningfully editable via
+ * a JSON textarea (they wrap live framework objects, not data). When a
+ * showcased component declares an input of one of these types, the controls
+ * panel renders a "Not editable" placeholder instead of routing it through
+ * the JsonControl — which would otherwise crash on `undefined`/non-serializable
+ * defaults and presents a misleading editor to the developer anyway.
+ */
+const NON_EDITABLE_TYPE_NAMES = [
+    'TemplateRef',
+    'ElementRef',
+    'ViewContainerRef',
+];
+const NON_EDITABLE_TYPE_PATTERN = new RegExp(`\\b(?:${NON_EDITABLE_TYPE_NAMES.join('|')})\\b`);
+export function isNonEditableInputType(input) {
+    const raw = input.rawType;
+    if (!raw)
+        return false;
+    return NON_EDITABLE_TYPE_PATTERN.test(raw);
+}

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

@@ -8,6 +8,7 @@ export declare class PrismControlsPanelComponent {
     private readonly pluginService;
     readonly activeComponent: import("@angular/core").InputSignal<RuntimeComponent | null>;
     protected getCustomControl(input: InputMeta): ControlDefinition | null;
+    protected isNonEditable(input: InputMeta): boolean;
     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":"AAOA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAEhF,qBA+La,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAOtE,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;yCAtB7B,2BAA2B;2CAA3B,2BAA2B;CAyBvC"}
+{"version":3,"file":"prism-controls-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/app/panels/controls/prism-controls-panel.component.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACV,iBAAiB,EACjB,SAAS,EACT,gBAAgB,EACjB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,0CAA0C,CAAC;;AAGhF,qBA2Ma,2BAA2B;IACtC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAE5D,QAAQ,CAAC,eAAe,+DAAwC;IAEhE,SAAS,CAAC,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,iBAAiB,GAAG,IAAI;IAOtE,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,SAAS,GAAG,OAAO;IAIlD,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;yCA1B7B,2BAA2B;2CAA3B,2BAA2B;CA6BvC"}

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

@@ -1,5 +1,5 @@
 import { NgComponentOutlet } from '@angular/common';
-import { Component, inject, input, ChangeDetectionStrategy } from '@angular/core';
+import { Component, inject, input, ChangeDetectionStrategy, } from '@angular/core';
 import { BooleanControlComponent } from '../../controls/boolean-control.component.js';
 import { JsonControlComponent } from '../../controls/json-control.component.js';
 import { NumberControlComponent } from '../../controls/number-control.component.js';
@@ -8,6 +8,7 @@ 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 { isNonEditableInputType } from './non-editable-input-types.js';
 import * as i0 from "@angular/core";
 const _c0 = (a0, a1) => ({ inputMeta: a0, rendererService: a1 });
 const _c1 = () => [];
@@ -37,56 +38,68 @@ function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_1_Template(
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngComponentOutlet", ctx.component)("ngComponentOutletInputs", i0.ɵɵpureFunction2(2, _c0, input_r4, ctx_r1.rendererService));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_7_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
+    i0.ɵɵtext(1, "Not editable");
+    i0.ɵɵelementEnd();
+} }
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_0_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-boolean-control", 15);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_7_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-boolean-control", 16);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_0_Template_prism_boolean_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r4 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asBoolean(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_8_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_1_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-number-control", 15);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_8_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-number-control", 16);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_1_Template_prism_number_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r6); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r4 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asNumber(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_9_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-union-control", 16);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_9_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-union-control", 17);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_2_Template_prism_union_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r7); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r4 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asString(ctx_r1.rendererService.inputValues()[input_r4.name]))("options", input_r4.values ?? i0.ɵɵpureFunction0(2, _c1));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_10_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_3_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-string-control", 15);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_10_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const input_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-string-control", 16);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_3_Template_prism_string_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r4 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.asString(ctx_r1.rendererService.inputValues()[input_r4.name]));
 } }
-function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_11_Template(rf, ctx) { if (rf & 1) {
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_4_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "prism-json-control", 15);
-    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_11_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const input_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
+    i0.ɵɵelementStart(0, "prism-json-control", 16);
+    i0.ɵɵlistener("valueChange", function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_4_Template_prism_json_control_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const input_r4 = i0.ɵɵnextContext(3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.rendererService.updateInput(input_r4.name, $event)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const input_r4 = i0.ɵɵnextContext(2).$implicit;
+    const input_r4 = i0.ɵɵnextContext(3).$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("value", ctx_r1.rendererService.inputValues()[input_r4.name]);
 } }
+function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_0_Template, 1, 1, "prism-boolean-control", 14)(1, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_1_Template, 1, 1, "prism-number-control", 14)(2, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_2_Template, 1, 3, "prism-union-control", 15)(3, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_3_Template, 1, 1, "prism-string-control", 14)(4, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Case_4_Template, 1, 1, "prism-json-control", 14);
+} if (rf & 2) {
+    let tmp_14_0;
+    const input_r4 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵconditional((tmp_14_0 = input_r4.type) === "boolean" ? 0 : tmp_14_0 === "number" ? 1 : tmp_14_0 === "union" ? 2 : tmp_14_0 === "string" ? 3 : 4);
+} }
 function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 9)(1, "span", 10);
     i0.ɵɵtext(2);
@@ -95,21 +108,21 @@ function PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Template(
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(6, "div", 12);
-    i0.ɵɵconditionalCreate(7, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_7_Template, 1, 1, "prism-boolean-control", 13)(8, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_8_Template, 1, 1, "prism-number-control", 13)(9, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_9_Template, 1, 3, "prism-union-control", 14)(10, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_10_Template, 1, 1, "prism-string-control", 13)(11, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Case_11_Template, 1, 1, "prism-json-control", 13);
+    i0.ɵɵconditionalCreate(7, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_7_Template, 2, 0, "span", 13)(8, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Conditional_8_Template, 5, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    let tmp_15_0;
     const input_r4 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(input_r4.name);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(input_r4.rawType ?? input_r4.type);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_15_0 = input_r4.type) === "boolean" ? 7 : tmp_15_0 === "number" ? 8 : tmp_15_0 === "union" ? 9 : tmp_15_0 === "string" ? 10 : 11);
+    i0.ɵɵconditional(ctx_r1.isNonEditable(input_r4) ? 7 : 8);
 } }
 function PrismControlsPanelComponent_Conditional_0_For_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 2);
-    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_1_Template, 1, 5, "ng-container", 8)(2, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Template, 12, 3);
+    i0.ɵɵconditionalCreate(1, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_1_Template, 1, 5, "ng-container", 8)(2, PrismControlsPanelComponent_Conditional_0_For_3_Conditional_2_Template, 9, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     let tmp_12_0;
@@ -150,6 +163,9 @@ export class PrismControlsPanelComponent {
         return (this.pluginService.controls().find((ctrl) => ctrl.matchType(input)) ??
             null);
     }
+    isNonEditable(input) {
+        return isNonEditableInputType(input);
+    }
     asBoolean(val) {
         return Boolean(val);
     }
@@ -160,7 +176,7 @@ 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"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [[1, "ctl-panel"], [1, "ctl-toolbar"], [1, "ctl-row"], [1, "ctl-empty"], [1, "ctl-dirty-info"], ["aria-hidden", "true", 1, "ctl-dirty-dot"], ["type", "button", "title", "Reset all inputs to variant defaults", 1, "ctl-reset-btn", 3, "click"], ["aria-hidden", "true"], [3, "ngComponentOutlet", "ngComponentOutletInputs"], [1, "ctl-label"], [1, "ctl-name"], [1, "ctl-type"], [1, "ctl-input"], [3, "value"], [3, "value", "options"], [3, "valueChange", "value"], [3, "valueChange", "value", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismControlsPanelComponent, selectors: [["prism-controls-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 1, vars: 1, consts: [[1, "ctl-panel"], [1, "ctl-toolbar"], [1, "ctl-row"], [1, "ctl-empty"], [1, "ctl-dirty-info"], ["aria-hidden", "true", 1, "ctl-dirty-dot"], ["type", "button", "title", "Reset all inputs to variant defaults", 1, "ctl-reset-btn", 3, "click"], ["aria-hidden", "true"], [3, "ngComponentOutlet", "ngComponentOutletInputs"], [1, "ctl-label"], [1, "ctl-name"], [1, "ctl-type"], [1, "ctl-input"], ["title", "This input type can't be edited from the controls panel", 1, "ctl-not-editable"], [3, "value"], [3, "value", "options"], [3, "valueChange", "value"], [3, "valueChange", "value", "options"]], template: function PrismControlsPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PrismControlsPanelComponent_Conditional_0_Template, 5, 2, "div", 0);
         } if (rf & 2) {
             let tmp_0_0;
@@ -170,7 +186,7 @@ export class PrismControlsPanelComponent {
             StringControlComponent,
             NumberControlComponent,
             UnionControlComponent,
-            JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar[_ngcontent-%COMP%] {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--prism-bg-elevated);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-dirty-info[_ngcontent-%COMP%] {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-empty[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }"] });
+            JsonControlComponent], styles: [".ctl-panel[_ngcontent-%COMP%] {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar[_ngcontent-%COMP%] {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--prism-bg-elevated);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-dirty-info[_ngcontent-%COMP%] {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%] {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn[_ngcontent-%COMP%]:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row[_ngcontent-%COMP%] {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name[_ngcontent-%COMP%] {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type[_ngcontent-%COMP%]   b[_ngcontent-%COMP%] {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-not-editable[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-ghost);\n      font-style: italic;\n    }\n\n    .ctl-empty[_ngcontent-%COMP%] {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismControlsPanelComponent, [{
         type: Component,
@@ -199,8 +215,7 @@ export class PrismControlsPanelComponent {
           <span aria-hidden="true">&#x21BB;</span> Reset
         </button>
       </div>
-      }
-      @for (input of comp.meta.inputs; track input.name) {
+      } @for (input of comp.meta.inputs; track input.name) {
       <div class="ctl-row">
         @if (getCustomControl(input); as customCtrl) {
         <ng-container
@@ -218,7 +233,13 @@ export class PrismControlsPanelComponent {
           >
         </div>
         <div class="ctl-input">
-          @switch (input.type) { @case ('boolean') {
+          @if (isNonEditable(input)) {
+          <span
+            class="ctl-not-editable"
+            title="This input type can't be edited from the controls panel"
+            >Not editable</span
+          >
+          } @else { @switch (input.type) { @case ('boolean') {
           <prism-boolean-control
             [value]="asBoolean(rendererService.inputValues()[input.name])"
             (valueChange)="rendererService.updateInput(input.name, $event)"
@@ -244,7 +265,7 @@ export class PrismControlsPanelComponent {
             [value]="rendererService.inputValues()[input.name]"
             (valueChange)="rendererService.updateInput(input.name, $event)"
           />
-          } }
+          } } }
         </div>
         }
       </div>
@@ -253,6 +274,6 @@ export class PrismControlsPanelComponent {
       }
     </div>
     }
-  `, styles: ["\n    .ctl-panel {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--prism-bg-elevated);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-dirty-info {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type b {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }\n  "] }]
+  `, styles: ["\n    .ctl-panel {\n      overflow-y: auto;\n      height: 100%;\n    }\n\n    .ctl-toolbar {\n      position: sticky;\n      top: 0;\n      z-index: 2;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 20px;\n      background: var(--prism-bg-elevated);\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-dirty-info {\n      font-size: 11.5px;\n      font-family: var(--font-mono);\n      color: var(--prism-text-muted);\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n    }\n    .ctl-dirty-dot {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--prism-primary);\n      box-shadow: 0 0 6px color-mix(in srgb, var(--prism-primary) 60%, transparent);\n    }\n    .ctl-reset-btn {\n      height: 24px;\n      padding: 0 10px;\n      border-radius: 5px;\n      font-size: 11.5px;\n      font-weight: 500;\n      font-family: var(--font-sans);\n      color: var(--prism-text-muted);\n      background: transparent;\n      border: 1px solid var(--prism-border);\n      cursor: pointer;\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);\n    }\n    .ctl-reset-btn:hover {\n      color: var(--prism-text);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, var(--prism-border));\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n    }\n    .ctl-reset-btn:focus-visible {\n      outline: 2px solid var(--prism-primary);\n      outline-offset: 1px;\n    }\n\n    .ctl-row {\n      display: grid;\n      grid-template-columns: 180px 1fr;\n      align-items: center;\n      gap: 12px;\n      padding: 8px 20px;\n      min-height: 40px;\n      border-bottom: 1px solid var(--prism-border);\n    }\n    .ctl-row:hover {\n      background: color-mix(in srgb, var(--prism-primary) 3%, transparent);\n    }\n\n    .ctl-label {\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n    }\n    .ctl-name {\n      font-size: 13px;\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n    .ctl-type {\n      font-family: var(--font-mono);\n      font-size: 10.5px;\n      color: var(--prism-text-ghost);\n    }\n    .ctl-type b {\n      color: var(--prism-primary);\n      font-weight: 500;\n    }\n\n    .ctl-input {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      min-width: 0;\n    }\n\n    .ctl-not-editable {\n      font-family: var(--font-mono);\n      font-size: 11.5px;\n      color: var(--prism-text-ghost);\n      font-style: italic;\n    }\n\n    .ctl-empty {\n      color: var(--prism-text-ghost);\n      font-size: 13px;\n      margin: 0;\n      padding: 16px 20px;\n    }\n  "] }]
     }], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 208 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismControlsPanelComponent, { className: "PrismControlsPanelComponent", filePath: "app/panels/controls/prism-controls-panel.component.ts", lineNumber: 226 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "22.1.0",
+  "version": "22.1.2",
   "description": "ng-prism — the Angular-native Storybook alternative. Lightweight component showcase with @Showcase decorator, no story files needed.",
   "keywords": [
     "ng-prism",