@ng-prism/core 21.0.0

package/README.md

@@ -0,0 +1,170 @@
+# ng-prism
+
+Lightweight, Angular-native component showcase tool. Annotate components with `@Showcase` — no separate story files needed.
+
+[![Angular](https://img.shields.io/badge/Angular-21+-dd0031)](https://angular.dev)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.9-3178c6)](https://www.typescriptlang.org)
+[![License](https://img.shields.io/badge/license-MIT-green)](./LICENSE)
+
+## Features
+
+- **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
+- **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
+- **Deep-linking** — URL state sync for sharing specific component/variant/view
+- **Themeable** — full CSS custom property system, replaceable UI sections
+
+## Quick Start
+
+### 1. Install
+
+```bash
+npm install ng-prism
+```
+
+### 2. Add `@Showcase` to a component
+
+```typescript
+import { Component, input, output } from '@angular/core';
+import { Showcase } from 'ng-prism';
+
+@Showcase({
+  title: 'Button',
+  category: 'Atoms',
+  description: 'Primary action button',
+  variants: [
+    { name: 'Primary', inputs: { variant: 'primary', label: 'Click me' } },
+    { name: 'Danger', inputs: { variant: 'danger', disabled: true } },
+  ],
+})
+@Component({
+  selector: 'my-button',
+  standalone: true,
+  template: `<button [class]="variant()">{{ label() }}</button>`,
+})
+export class ButtonComponent {
+  variant = input<'primary' | 'secondary' | 'danger'>('primary');
+  label = input('Button');
+  disabled = input(false);
+  clicked = output<void>();
+}
+```
+
+### 3. Run the schematic
+
+```bash
+ng add ng-prism
+```
+
+This creates the prism app project, configures Angular builders, and generates `ng-prism.config.ts`.
+
+### 4. Start the dev server
+
+```bash
+ng run my-lib:prism
+```
+
+Open `http://localhost:4400` — your component appears in the sidebar with live controls, code snippets, and variant tabs.
+
+## Configuration
+
+```typescript
+// ng-prism.config.ts
+import { defineConfig } from 'ng-prism/config';
+import { jsDocPlugin } from '@ng-prism/plugin-jsdoc';
+
+export default defineConfig({
+  plugins: [jsDocPlugin()],
+
+  theme: {
+    '--prism-primary': '#00a67e',
+    '--prism-bg': '#ffffff',
+    '--prism-font-sans': "'Inter', sans-serif",
+  },
+
+  ui: {
+    header: MyCustomHeaderComponent,
+  },
+
+  appProviders: [
+    provideAnimationsAsync(),
+    provideHttpClient(),
+  ],
+});
+```
+
+## Directives
+
+Directives need a host element. Use `host` to wrap them:
+
+```typescript
+@Showcase({
+  title: 'Tooltip',
+  host: {
+    selector: 'my-button',
+    import: { name: 'ButtonComponent', from: 'my-lib' },
+    inputs: { label: 'Hover me' },
+  },
+  variants: [
+    { name: 'Top', inputs: { position: 'top', text: 'Tooltip!' } },
+  ],
+})
+@Directive({ selector: '[myTooltip]' })
+export class TooltipDirective { ... }
+```
+
+## Component Pages
+
+For complex components that need template projections or mock data:
+
+```typescript
+// Register in main.ts
+providePrism(PRISM_RUNTIME_MANIFEST, config, {
+  componentPages: [
+    { title: 'Table Demo', category: 'Data', component: TableDemoPage },
+  ],
+});
+```
+
+Link to a `@Showcase`-decorated component for combined API docs + custom rendering:
+
+```typescript
+@Showcase({
+  title: 'Table',
+  renderPage: 'Table Demo',  // delegates rendering to the page
+  variants: [{ name: 'Default', inputs: { height: '400px' } }],
+})
+@Component({ selector: 'my-table' })
+export class TableComponent { ... }
+```
+
+## Official Plugins
+
+| Plugin | Package | Description |
+|---|---|---|
+| JSDoc | `@ng-prism/plugin-jsdoc` | API documentation from JSDoc comments |
+| 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 |
+
+> **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.
+
+## Documentation
+
+Full documentation with API reference, plugin guide, and advanced configuration:
+
+**[ng-prism Documentation](https://your-org.github.io/ng-prism/)**
+
+## Requirements
+
+- Angular >= 21
+- TypeScript >= 5.9
+- Components must use `input()` / `output()` signals (not `@Input()` / `@Output()` decorators)
+
+## License
+
+MIT

package/builders.json

@@ -0,0 +1,14 @@
+{
+  "builders": {
+    "serve": {
+      "implementation": "./dist/builder/serve/index.js",
+      "schema": "./src/builder/serve/schema.json",
+      "description": "Start the ng-prism development server"
+    },
+    "build": {
+      "implementation": "./dist/builder/build/index.js",
+      "schema": "./src/builder/build/schema.json",
+      "description": "Build the ng-prism styleguide for production"
+    }
+  }
+}

package/dist/app/component-header/prism-component-header.component.d.ts

@@ -0,0 +1,8 @@
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import * as i0 from "@angular/core";
+export declare class PrismComponentHeaderComponent {
+    protected readonly navigationService: PrismNavigationService;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismComponentHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PrismComponentHeaderComponent, "prism-component-header", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=prism-component-header.component.d.ts.map

package/dist/app/component-header/prism-component-header.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-component-header.component.d.ts","sourceRoot":"","sources":["../../../src/app/component-header/prism-component-header.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;AAEjF,qBAkEa,6BAA6B;IACxC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;yCAD3D,6BAA6B;2CAA7B,6BAA6B;CAEzC"}

package/dist/app/component-header/prism-component-header.component.js

@@ -0,0 +1,77 @@
+import { Component, inject } from '@angular/core';
+import { PrismNavigationService } from '../services/prism-navigation.service.js';
+import * as i0 from "@angular/core";
+function PrismComponentHeaderComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "p", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const comp_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(comp_r1.meta.showcaseConfig.description);
+} }
+function PrismComponentHeaderComponent_Conditional_0_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const tag_r2 = ctx.$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(tag_r2);
+} }
+function PrismComponentHeaderComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 3);
+    i0.ɵɵrepeaterCreate(1, PrismComponentHeaderComponent_Conditional_0_Conditional_4_For_2_Template, 2, 1, "span", 4, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const comp_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(comp_r1.meta.showcaseConfig.tags);
+} }
+function PrismComponentHeaderComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0)(1, "h2", 1);
+    i0.ɵɵtext(2);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵconditionalCreate(3, PrismComponentHeaderComponent_Conditional_0_Conditional_3_Template, 2, 1, "p", 2);
+    i0.ɵɵconditionalCreate(4, PrismComponentHeaderComponent_Conditional_0_Conditional_4_Template, 3, 0, "div", 3);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const comp_r1 = ctx;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(comp_r1.meta.showcaseConfig.title);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(comp_r1.meta.showcaseConfig.description ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((comp_r1.meta.showcaseConfig.tags == null ? null : comp_r1.meta.showcaseConfig.tags.length) ? 4 : -1);
+} }
+export class PrismComponentHeaderComponent {
+    navigationService = inject(PrismNavigationService);
+    static ɵfac = function PrismComponentHeaderComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeaderComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeaderComponent, selectors: [["prism-component-header"]], decls: 1, vars: 1, consts: [[1, "prism-component-header"], [1, "prism-component-header__title"], [1, "prism-component-header__description"], [1, "prism-component-header__tags"], [1, "prism-component-header__tag"]], template: function PrismComponentHeaderComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, PrismComponentHeaderComponent_Conditional_0_Template, 5, 3, "div", 0);
+        } if (rf & 2) {
+            let tmp_0_0;
+            i0.ɵɵconditional((tmp_0_0 = ctx.navigationService.activeComponent()) ? 0 : -1, tmp_0_0);
+        } }, styles: [".prism-component-header[_ngcontent-%COMP%] {\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n      background: var(--prism-bg-surface);\n    }\n\n    .prism-component-header__title[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n    }\n\n    .prism-component-header__description[_ngcontent-%COMP%] {\n      margin: 4px 0 0;\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n    }\n\n    .prism-component-header__tags[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n      margin-top: 10px;\n      flex-wrap: wrap;\n    }\n\n    .prism-component-header__tag[_ngcontent-%COMP%] {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--prism-radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      letter-spacing: 0.02em;\n      font-family: var(--prism-font-sans);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeaderComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-component-header', standalone: true, template: `
+    @if (navigationService.activeComponent(); as comp) {
+      <div class="prism-component-header">
+        <h2 class="prism-component-header__title">{{ comp.meta.showcaseConfig.title }}</h2>
+        @if (comp.meta.showcaseConfig.description) {
+          <p class="prism-component-header__description">{{ comp.meta.showcaseConfig.description }}</p>
+        }
+        @if (comp.meta.showcaseConfig.tags?.length) {
+          <div class="prism-component-header__tags">
+            @for (tag of comp.meta.showcaseConfig.tags; track tag) {
+              <span class="prism-component-header__tag">{{ tag }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+  `, styles: ["\n    .prism-component-header {\n      padding: 16px 20px;\n      border-bottom: 1px solid var(--prism-border);\n      border-left: 3px solid;\n      border-image: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to)) 1;\n      background: var(--prism-bg-surface);\n    }\n\n    .prism-component-header__title {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      letter-spacing: -0.01em;\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n    }\n\n    .prism-component-header__description {\n      margin: 4px 0 0;\n      font-size: 13px;\n      line-height: 1.6;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n    }\n\n    .prism-component-header__tags {\n      display: flex;\n      gap: 6px;\n      margin-top: 10px;\n      flex-wrap: wrap;\n    }\n\n    .prism-component-header__tag {\n      padding: 2px 8px;\n      font-size: 11px;\n      font-weight: 500;\n      border-radius: var(--prism-radius-xs);\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n      color: var(--prism-primary);\n      border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n      letter-spacing: 0.02em;\n      font-family: var(--prism-font-sans);\n    }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismComponentHeaderComponent, { className: "PrismComponentHeaderComponent", filePath: "app/component-header/prism-component-header.component.ts", lineNumber: 70 }); })();

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class BooleanControlComponent {
+    readonly value: import("@angular/core").InputSignal<boolean>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly typeName: import("@angular/core").InputSignal<string>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BooleanControlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BooleanControlComponent, "prism-boolean-control", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "typeName": { "alias": "typeName"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=boolean-control.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"boolean-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/boolean-control.component.ts"],"names":[],"mappings":";AAEA,qBAiFa,uBAAuB;IAClC,QAAQ,CAAC,KAAK,+CAAgB;IAC9B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,oDAAqB;yCAJ9B,uBAAuB;2CAAvB,uBAAuB;CAKnC"}

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

@@ -0,0 +1,58 @@
+import { Component, input, output } from '@angular/core';
+import * as i0 from "@angular/core";
+function BooleanControlComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "code", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.typeName());
+} }
+export class BooleanControlComponent {
+    value = input(false, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    typeName = input('', ...(ngDevMode ? [{ debugName: "typeName" }] : []));
+    valueChange = output();
+    static ɵfac = function BooleanControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BooleanControlComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BooleanControlComponent, selectors: [["prism-boolean-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 7, vars: 5, consts: [[1, "prism-boolean-control"], [1, "prism-boolean-control__label"], [1, "prism-boolean-control__label-text"], [1, "prism-boolean-control__type"], ["role", "switch", 1, "prism-boolean-control__toggle", 3, "click"], [1, "prism-boolean-control__thumb"]], template: function BooleanControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(4, BooleanControlComponent_Conditional_4_Template, 2, 1, "code", 3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(5, "button", 4);
+            i0.ɵɵdomListener("click", function BooleanControlComponent_Template_button_click_5_listener() { return ctx.valueChange.emit(!ctx.value()); });
+            i0.ɵɵdomElement(6, "span", 5);
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.label());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.typeName() ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("prism-boolean-control__toggle--on", ctx.value());
+            i0.ɵɵattribute("aria-checked", ctx.value());
+        } }, styles: [".prism-boolean-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 16px;\n      min-height: 36px;\n    }\n\n    .prism-boolean-control__label[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-boolean-control__label-text[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n    .prism-boolean-control__type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n    }\n\n    .prism-boolean-control__toggle[_ngcontent-%COMP%] {\n      position: relative;\n      width: 36px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid var(--prism-border-strong);\n      background: var(--prism-bg-surface);\n      cursor: pointer;\n      transition: background 0.2s, border-color 0.2s;\n      padding: 0;\n      flex-shrink: 0;\n    }\n\n    .prism-boolean-control__toggle--on[_ngcontent-%COMP%] {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n\n    .prism-boolean-control__thumb[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 2px;\n      left: 2px;\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      background: var(--prism-text-ghost);\n      transition: transform 0.2s, background 0.2s;\n    }\n\n    .prism-boolean-control__toggle--on[_ngcontent-%COMP%]   .prism-boolean-control__thumb[_ngcontent-%COMP%] {\n      transform: translateX(16px);\n      background: var(--prism-bg-elevated);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-boolean-control', standalone: true, template: `
+    <div class="prism-boolean-control">
+      <div class="prism-boolean-control__label">
+        <span class="prism-boolean-control__label-text">{{ label() }}</span>
+        @if (typeName()) { <code class="prism-boolean-control__type">{{ typeName() }}</code> }
+      </div>
+      <button
+        class="prism-boolean-control__toggle"
+        [class.prism-boolean-control__toggle--on]="value()"
+        (click)="valueChange.emit(!value())"
+        role="switch"
+        [attr.aria-checked]="value()"
+      >
+        <span class="prism-boolean-control__thumb"></span>
+      </button>
+    </div>
+  `, styles: ["\n    .prism-boolean-control {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: 8px 16px;\n      min-height: 36px;\n    }\n\n    .prism-boolean-control__label {\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-boolean-control__label-text {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n    }\n    .prism-boolean-control__type {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n    }\n\n    .prism-boolean-control__toggle {\n      position: relative;\n      width: 36px;\n      height: 20px;\n      border-radius: 10px;\n      border: 1px solid var(--prism-border-strong);\n      background: var(--prism-bg-surface);\n      cursor: pointer;\n      transition: background 0.2s, border-color 0.2s;\n      padding: 0;\n      flex-shrink: 0;\n    }\n\n    .prism-boolean-control__toggle--on {\n      background: var(--prism-primary);\n      border-color: var(--prism-primary);\n    }\n\n    .prism-boolean-control__thumb {\n      position: absolute;\n      top: 2px;\n      left: 2px;\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      background: var(--prism-text-ghost);\n      transition: transform 0.2s, background 0.2s;\n    }\n\n    .prism-boolean-control__toggle--on .prism-boolean-control__thumb {\n      transform: translateX(16px);\n      background: var(--prism-bg-elevated);\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"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BooleanControlComponent, { className: "BooleanControlComponent", filePath: "app/controls/boolean-control.component.ts", lineNumber: 84 }); })();

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

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+export declare class JsonControlComponent {
+    readonly value: import("@angular/core").InputSignal<unknown>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly typeName: import("@angular/core").InputSignal<string>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<unknown>;
+    readonly parseError: import("@angular/core").WritableSignal<boolean>;
+    readonly localText: import("@angular/core").WritableSignal<string | null>;
+    private readonly textareaEl;
+    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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<JsonControlComponent, "prism-json-control", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "typeName": { "alias": "typeName"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=json-control.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"json-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/json-control.component.ts"],"names":[],"mappings":";AAgBA,qBAyIa,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,CAA4D;IACvF,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;yCAvCP,oBAAoB;2CAApB,oBAAoB;CA+ChC"}

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

@@ -0,0 +1,136 @@
+import { Component, computed, input, output, signal, viewChild } from '@angular/core';
+import * as i0 from "@angular/core";
+const _c0 = ["textareaEl"];
+const _c1 = ["preEl"];
+function JsonControlComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "code", 5);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.typeName());
+} }
+function JsonControlComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 11);
+    i0.ɵɵtext(1, "Invalid JSON");
+    i0.ɵɵdomElementEnd();
+} }
+function highlightJson(json) {
+    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}`;
+        if (str)
+            return `<span class="jh-string">${str}</span>`;
+        if (bool)
+            return `<span class="jh-bool">${bool}</span>`;
+        if (nil)
+            return `<span class="jh-null">${nil}</span>`;
+        if (num)
+            return `<span class="jh-number">${num}</span>`;
+        return match;
+    });
+}
+export class JsonControlComponent {
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    typeName = input('', ...(ngDevMode ? [{ debugName: "typeName" }] : []));
+    valueChange = output();
+    parseError = signal(false, ...(ngDevMode ? [{ debugName: "parseError" }] : []));
+    localText = signal(null, ...(ngDevMode ? [{ debugName: "localText" }] : []));
+    textareaEl = viewChild('textareaEl', ...(ngDevMode ? [{ debugName: "textareaEl" }] : []));
+    preEl = viewChild('preEl', ...(ngDevMode ? [{ debugName: "preEl" }] : []));
+    displayText = computed(() => {
+        const local = this.localText();
+        if (local !== null)
+            return local;
+        return this.stringify(this.value());
+    }, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
+    highlightedHtml = computed(() => highlightJson(this.displayText()), ...(ngDevMode ? [{ debugName: "highlightedHtml" }] : []));
+    stringify(val) {
+        try {
+            return JSON.stringify(val, null, 2);
+        }
+        catch {
+            return String(val);
+        }
+    }
+    onInput(raw) {
+        this.localText.set(raw);
+        try {
+            const parsed = JSON.parse(raw);
+            this.parseError.set(false);
+            this.valueChange.emit(parsed);
+        }
+        catch {
+            this.parseError.set(true);
+        }
+    }
+    syncScroll() {
+        const textarea = this.textareaEl()?.nativeElement;
+        const pre = this.preEl()?.nativeElement;
+        if (textarea && pre) {
+            pre.scrollTop = textarea.scrollTop;
+            pre.scrollLeft = textarea.scrollLeft;
+        }
+    }
+    static ɵfac = function JsonControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || JsonControlComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: JsonControlComponent, selectors: [["prism-json-control"]], viewQuery: function JsonControlComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuerySignal(ctx.textareaEl, _c0, 5)(ctx.preEl, _c1, 5);
+        } if (rf & 2) {
+            i0.ɵɵqueryAdvance(2);
+        } }, inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 13, vars: 5, consts: [["preEl", ""], ["textareaEl", ""], [1, "prism-json-control"], [1, "prism-json-control__label"], [1, "prism-json-control__label-text"], [1, "prism-json-control__type"], [1, "prism-json-control__editor"], [1, "prism-json-control__overlay"], [1, "prism-json-control__pre"], [3, "innerHTML"], ["spellcheck", "false", 1, "prism-json-control__input", 3, "input", "scroll", "value"], [1, "prism-json-control__error"]], template: function JsonControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 2)(1, "div", 3)(2, "span", 4);
+            i0.ɵɵtext(3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(4, JsonControlComponent_Conditional_4_Template, 2, 1, "code", 5);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(5, "div", 6)(6, "div", 7)(7, "pre", 8, 0);
+            i0.ɵɵdomElement(9, "code", 9);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(10, "textarea", 10, 1);
+            i0.ɵɵdomListener("input", function JsonControlComponent_Template_textarea_input_10_listener($event) { return ctx.onInput($event.target.value); })("scroll", function JsonControlComponent_Template_textarea_scroll_10_listener() { return ctx.syncScroll(); });
+            i0.ɵɵdomElementEnd()();
+            i0.ɵɵconditionalCreate(12, JsonControlComponent_Conditional_12_Template, 2, 0, "span", 11);
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.label());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.typeName() ? 4 : -1);
+            i0.ɵɵadvance(5);
+            i0.ɵɵdomProperty("innerHTML", ctx.highlightedHtml(), i0.ɵɵsanitizeHtml);
+            i0.ɵɵadvance();
+            i0.ɵɵdomProperty("value", ctx.displayText());
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.parseError() ? 12 : -1);
+        } }, styles: [".prism-json-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-json-control__label[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 140px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n      padding-top: 4px;\n    }\n    .prism-json-control__label-text[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .prism-json-control__type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .prism-json-control__editor[_ngcontent-%COMP%] {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .prism-json-control__overlay[_ngcontent-%COMP%] {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      overflow: hidden;\n      transition: border-color 0.15s;\n    }\n    .prism-json-control__overlay[_ngcontent-%COMP%]:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px var(--prism-glow);\n    }\n\n    .prism-json-control__pre[_ngcontent-%COMP%], \n   .prism-json-control__input[_ngcontent-%COMP%] {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--prism-font-mono, monospace);\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    .prism-json-control__pre[_ngcontent-%COMP%] {\n      min-height: 56px;\n      pointer-events: none;\n    }\n\n    .prism-json-control__pre[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    [_nghost-%COMP%]     .jh-key { color: #93c5fd; }\n    [_nghost-%COMP%]     .jh-string { color: #7dd3fc; }\n    [_nghost-%COMP%]     .jh-number { color: #fbbf24; }\n    [_nghost-%COMP%]     .jh-bool { color: #a78bfa; }\n    [_nghost-%COMP%]     .jh-null { color: var(--prism-text-ghost); }\n\n    .prism-json-control__input[_ngcontent-%COMP%] {\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    .prism-json-control__input[_ngcontent-%COMP%]:focus {\n      outline: none;\n    }\n    .prism-json-control__input[_ngcontent-%COMP%]::selection {\n      background: rgba(99, 102, 241, 0.3);\n    }\n\n    .prism-json-control__error[_ngcontent-%COMP%] {\n      font-size: 11px;\n      color: #ef4444;\n      display: block;\n      margin-top: 2px;\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonControlComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-json-control', standalone: true, template: `
+    <div class="prism-json-control">
+      <div class="prism-json-control__label">
+        <span class="prism-json-control__label-text">{{ label() }}</span>
+        @if (typeName()) { <code class="prism-json-control__type">{{ typeName() }}</code> }
+      </div>
+      <div class="prism-json-control__editor">
+        <div class="prism-json-control__overlay">
+          <pre class="prism-json-control__pre" #preEl><code [innerHTML]="highlightedHtml()"></code></pre>
+          <textarea
+            #textareaEl
+            class="prism-json-control__input"
+            [value]="displayText()"
+            (input)="onInput($any($event.target).value)"
+            (scroll)="syncScroll()"
+            spellcheck="false"
+          ></textarea>
+        </div>
+        @if (parseError()) {
+          <span class="prism-json-control__error">Invalid JSON</span>
+        }
+      </div>
+    </div>
+  `, styles: ["\n    .prism-json-control {\n      display: flex;\n      align-items: flex-start;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-json-control__label {\n      flex-shrink: 0;\n      width: 140px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n      padding-top: 4px;\n    }\n    .prism-json-control__label-text {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .prism-json-control__type {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .prism-json-control__editor {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .prism-json-control__overlay {\n      position: relative;\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      overflow: hidden;\n      transition: border-color 0.15s;\n    }\n    .prism-json-control__overlay:focus-within {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px var(--prism-glow);\n    }\n\n    .prism-json-control__pre,\n    .prism-json-control__input {\n      margin: 0;\n      padding: 4px 8px;\n      font-family: var(--prism-font-mono, monospace);\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    .prism-json-control__pre {\n      min-height: 56px;\n      pointer-events: none;\n    }\n\n    .prism-json-control__pre code {\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n    }\n\n    :host ::ng-deep .jh-key { color: #93c5fd; }\n    :host ::ng-deep .jh-string { color: #7dd3fc; }\n    :host ::ng-deep .jh-number { color: #fbbf24; }\n    :host ::ng-deep .jh-bool { color: #a78bfa; }\n    :host ::ng-deep .jh-null { color: var(--prism-text-ghost); }\n\n    .prism-json-control__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    .prism-json-control__input:focus {\n      outline: none;\n    }\n    .prism-json-control__input::selection {\n      background: rgba(99, 102, 241, 0.3);\n    }\n\n    .prism-json-control__error {\n      font-size: 11px;\n      color: #ef4444;\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: 154 }); })();

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class NumberControlComponent {
+    readonly value: import("@angular/core").InputSignal<number>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly typeName: import("@angular/core").InputSignal<string>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NumberControlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NumberControlComponent, "prism-number-control", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "typeName": { "alias": "typeName"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=number-control.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/number-control.component.ts"],"names":[],"mappings":";AAEA,qBA0Ea,sBAAsB;IACjC,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ7B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}

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

@@ -0,0 +1,55 @@
+import { Component, input, output } from '@angular/core';
+import * as i0 from "@angular/core";
+function NumberControlComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "code", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.typeName());
+} }
+export class NumberControlComponent {
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    typeName = input('', ...(ngDevMode ? [{ debugName: "typeName" }] : []));
+    valueChange = output();
+    static ɵfac = function NumberControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NumberControlComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NumberControlComponent, selectors: [["prism-number-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 6, vars: 4, consts: [[1, "prism-number-control"], [1, "prism-number-control__label"], [1, "prism-number-control__label-text"], [1, "prism-number-control__type"], ["type", "number", 1, "prism-number-control__input", 3, "input", "value"]], template: function NumberControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
+            i0.ɵɵtext(3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵconditionalCreate(4, NumberControlComponent_Conditional_4_Template, 2, 1, "code", 3);
+            i0.ɵɵdomElementEnd();
+            i0.ɵɵdomElementStart(5, "input", 4);
+            i0.ɵɵdomListener("input", function NumberControlComponent_Template_input_input_5_listener($event) { return ctx.valueChange.emit($event.target.valueAsNumber || 0); });
+            i0.ɵɵdomElementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵtextInterpolate(ctx.label());
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.typeName() ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵdomProperty("value", ctx.value());
+            i0.ɵɵattribute("aria-label", ctx.label());
+        } }, styles: [".prism-number-control[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-number-control__label[_ngcontent-%COMP%] {\n      flex-shrink: 0;\n      width: 140px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-number-control__label-text[_ngcontent-%COMP%] {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .prism-number-control__type[_ngcontent-%COMP%] {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .prism-number-control__input[_ngcontent-%COMP%] {\n      flex: 1;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      padding: 4px 8px;\n      font-size: 13px;\n      min-width: 0;\n      box-sizing: border-box;\n      transition: border-color 0.15s;\n    }\n\n    .prism-number-control__input[_ngcontent-%COMP%]:focus {\n      outline: none;\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px var(--prism-glow);\n    }"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberControlComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-number-control', standalone: true, template: `
+    <div class="prism-number-control">
+      <div class="prism-number-control__label">
+        <span class="prism-number-control__label-text">{{ label() }}</span>
+        @if (typeName()) { <code class="prism-number-control__type">{{ typeName() }}</code> }
+      </div>
+      <input
+        type="number"
+        class="prism-number-control__input"
+        [attr.aria-label]="label()"
+        [value]="value()"
+        (input)="valueChange.emit($any($event.target).valueAsNumber || 0)"
+      />
+    </div>
+  `, styles: ["\n    .prism-number-control {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-number-control__label {\n      flex-shrink: 0;\n      width: 140px;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      gap: 1px;\n    }\n    .prism-number-control__label-text {\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      color: var(--prism-text-muted);\n      font-weight: 500;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .prism-number-control__type {\n      font-size: 10px;\n      font-family: var(--prism-font-mono, monospace);\n      color: var(--prism-text-ghost);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .prism-number-control__input {\n      flex: 1;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-sm);\n      color: var(--prism-text);\n      font-family: var(--prism-font-sans);\n      padding: 4px 8px;\n      font-size: 13px;\n      min-width: 0;\n      box-sizing: border-box;\n      transition: border-color 0.15s;\n    }\n\n    .prism-number-control__input:focus {\n      outline: none;\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px var(--prism-glow);\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"] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NumberControlComponent, { className: "NumberControlComponent", filePath: "app/controls/number-control.component.ts", lineNumber: 77 }); })();

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

@@ -0,0 +1,10 @@
+import * as i0 from "@angular/core";
+export declare class StringControlComponent {
+    readonly value: import("@angular/core").InputSignal<string>;
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly typeName: import("@angular/core").InputSignal<string>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<StringControlComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<StringControlComponent, "prism-string-control", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "typeName": { "alias": "typeName"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=string-control.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"string-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/string-control.component.ts"],"names":[],"mappings":";AAEA,qBA0Ea,sBAAsB;IACjC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,WAAW,mDAAoB;yCAJ7B,sBAAsB;2CAAtB,sBAAsB;CAKlC"}