@ng-prism/core 21.4.5 → 21.5.0

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

@@ -1,55 +1,38 @@
-import { Component, input, output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, 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);
+    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: 4, vars: 4, consts: [[1, "ctl-slider"], ["type", "range", 3, "input", "min", "max", "value"], [1, "ctl-slider-val"]], template: function NumberControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0)(1, "input", 1);
+            i0.ɵɵdomListener("input", function NumberControlComponent_Template_input_input_1_listener($event) { return ctx.valueChange.emit($event.target.valueAsNumber || 0); });
             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.ɵɵdomElementStart(2, "span", 2);
+            i0.ɵɵtext(3);
             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    }"] });
+            i0.ɵɵdomProperty("min", 0)("max", 100)("value", ctx.value());
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.value());
+        } }, styles: [".ctl-slider[_ngcontent-%COMP%] {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .ctl-slider[_ngcontent-%COMP%]   input[type=range][_ngcontent-%COMP%] {\n      flex: 1;\n      -webkit-appearance: none;\n      height: 4px;\n      background: var(--prism-input-bg);\n      border-radius: 2px;\n      outline: none;\n    }\n    .ctl-slider[_ngcontent-%COMP%]   input[type=range][_ngcontent-%COMP%]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n      cursor: pointer;\n      border: 2px solid var(--prism-bg-elevated);\n    }\n    .ctl-slider-val[_ngcontent-%COMP%] {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-text);\n      min-width: 44px;\n      text-align: right;\n    }"], changeDetection: 0 });
 }
 (() => { (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>
+        args: [{ selector: 'prism-number-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ctl-slider">
       <input
-        type="number"
-        class="prism-number-control__input"
-        [attr.aria-label]="label()"
+        type="range"
+        [min]="0"
+        [max]="100"
         [value]="value()"
         (input)="valueChange.emit($any($event.target).valueAsNumber || 0)"
       />
+      <span class="ctl-slider-val">{{ value() }}</span>
     </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  "] }]
+  `, styles: ["\n    .ctl-slider {\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: 10px;\n    }\n    .ctl-slider input[type=range] {\n      flex: 1;\n      -webkit-appearance: none;\n      height: 4px;\n      background: var(--prism-input-bg);\n      border-radius: 2px;\n      outline: none;\n    }\n    .ctl-slider input[type=range]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: 14px;\n      height: 14px;\n      border-radius: 50%;\n      background: linear-gradient(180deg, var(--prism-primary-from), var(--prism-primary-to));\n      cursor: pointer;\n      border: 2px solid var(--prism-bg-elevated);\n    }\n    .ctl-slider-val {\n      font-family: var(--font-mono);\n      font-size: 12px;\n      color: var(--prism-text);\n      min-width: 44px;\n      text-align: right;\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 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(NumberControlComponent, { className: "NumberControlComponent", filePath: "app/controls/number-control.component.ts", lineNumber: 57 }); })();

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

@@ -1 +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"}
+{"version":3,"file":"string-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/string-control.component.ts"],"names":[],"mappings":";AAOA,qBAiCa,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"}

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

@@ -1,55 +1,28 @@
-import { Component, input, output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
 import * as i0 from "@angular/core";
-function StringControlComponent_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 StringControlComponent {
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
     label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
     typeName = input('', ...(ngDevMode ? [{ debugName: "typeName" }] : []));
     valueChange = output();
     static ɵfac = function StringControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StringControlComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StringControlComponent, selectors: [["prism-string-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 6, vars: 4, consts: [[1, "prism-string-control"], [1, "prism-string-control__label"], [1, "prism-string-control__label-text"], [1, "prism-string-control__type"], ["type", "text", 1, "prism-string-control__input", 3, "input", "value"]], template: function StringControlComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
-            i0.ɵɵtext(3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StringControlComponent, selectors: [["prism-string-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 1, vars: 1, consts: [["type", "text", 1, "ctl-text", 3, "input", "value"]], template: function StringControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "input", 0);
+            i0.ɵɵdomListener("input", function StringControlComponent_Template_input_input_0_listener($event) { return ctx.valueChange.emit($event.target.value); });
             i0.ɵɵdomElementEnd();
-            i0.ɵɵconditionalCreate(4, StringControlComponent_Conditional_4_Template, 2, 1, "code", 3);
-            i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(5, "input", 4);
-            i0.ɵɵdomListener("input", function StringControlComponent_Template_input_input_5_listener($event) { return ctx.valueChange.emit($event.target.value); });
-            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-string-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-string-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-string-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-string-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-string-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-string-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    }"] });
+        } }, styles: [".ctl-text[_ngcontent-%COMP%] {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      color: var(--prism-text);\n      font-size: 13px;\n      font-family: var(--font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n    }\n    .ctl-text[_ngcontent-%COMP%]:focus {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StringControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-string-control', standalone: true, template: `
-    <div class="prism-string-control">
-      <div class="prism-string-control__label">
-        <span class="prism-string-control__label-text">{{ label() }}</span>
-        @if (typeName()) { <code class="prism-string-control__type">{{ typeName() }}</code> }
-      </div>
-      <input
-        type="text"
-        class="prism-string-control__input"
-        [attr.aria-label]="label()"
-        [value]="value()"
-        (input)="valueChange.emit($any($event.target).value)"
-      />
-    </div>
-  `, styles: ["\n    .prism-string-control {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-string-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-string-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-string-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-string-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-string-control__input:focus {\n      outline: none;\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px var(--prism-glow);\n    }\n  "] }]
+        args: [{ selector: 'prism-string-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <input
+      type="text"
+      class="ctl-text"
+      [value]="value()"
+      (input)="valueChange.emit($any($event.target).value)"
+    />
+  `, styles: ["\n    .ctl-text {\n      height: 30px;\n      padding: 0 10px;\n      background: var(--prism-input-bg);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--radius-sm);\n      color: var(--prism-text);\n      font-size: 13px;\n      font-family: var(--font-sans);\n      flex: 1;\n      min-width: 0;\n      outline: none;\n      transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n    }\n    .ctl-text:focus {\n      border-color: var(--prism-primary);\n      box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\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(StringControlComponent, { className: "StringControlComponent", filePath: "app/controls/string-control.component.ts", lineNumber: 77 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(StringControlComponent, { className: "StringControlComponent", filePath: "app/controls/string-control.component.ts", lineNumber: 41 }); })();

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

@@ -1 +1 @@
-{"version":3,"file":"union-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/union-control.component.ts"],"names":[],"mappings":";AAEA,qBA4Fa,qBAAqB;IAChC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,OAAO,gDAAuB;IACvC,QAAQ,CAAC,WAAW,mDAAoB;yCAL7B,qBAAqB;2CAArB,qBAAqB;CAMjC"}
+{"version":3,"file":"union-control.component.d.ts","sourceRoot":"","sources":["../../../src/app/controls/union-control.component.ts"],"names":[],"mappings":";AAOA,qBAgDa,qBAAqB;IAChC,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,KAAK,8CAAa;IAC3B,QAAQ,CAAC,QAAQ,8CAAa;IAC9B,QAAQ,CAAC,OAAO,gDAAuB;IACvC,QAAQ,CAAC,WAAW,mDAAoB;yCAL7B,qBAAqB;2CAArB,qBAAqB;CAMjC"}

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

@@ -1,26 +1,17 @@
-import { Component, input, output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
 import * as i0 from "@angular/core";
-function UnionControlComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "code", 3);
+function UnionControlComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵdomElementStart(0, "button", 2);
+    i0.ɵɵdomListener("click", function UnionControlComponent_For_2_Template_button_click_0_listener() { const option_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.valueChange.emit(option_r2)); });
     i0.ɵɵtext(1);
     i0.ɵɵdomElementEnd();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const option_r2 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("ctl-pill--active", option_r2 === ctx_r2.value());
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r0.typeName());
-} }
-function UnionControlComponent_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "button", 6);
-    i0.ɵɵdomListener("click", function UnionControlComponent_For_7_Template_button_click_0_listener() { const option_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.valueChange.emit(option_r3)); });
-    i0.ɵɵtext(1);
-    i0.ɵɵdomElementEnd();
-} if (rf & 2) {
-    const option_r3 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("prism-union-control__option--active", option_r3 === ctx_r0.value());
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(option_r3);
+    i0.ɵɵtextInterpolate1(" ", option_r2, " ");
 } }
 export class UnionControlComponent {
     value = input('', ...(ngDevMode ? [{ debugName: "value" }] : []));
@@ -29,44 +20,29 @@ export class UnionControlComponent {
     options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
     valueChange = output();
     static ɵfac = function UnionControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnionControlComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnionControlComponent, selectors: [["prism-union-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"], options: [1, "options"] }, outputs: { valueChange: "valueChange" }, decls: 8, vars: 3, consts: [[1, "prism-union-control"], [1, "prism-union-control__label"], [1, "prism-union-control__label-text"], [1, "prism-union-control__type"], ["role", "group", 1, "prism-union-control__options"], [1, "prism-union-control__option", 3, "prism-union-control__option--active"], [1, "prism-union-control__option", 3, "click"]], template: function UnionControlComponent_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, UnionControlComponent_Conditional_4_Template, 2, 1, "code", 3);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnionControlComponent, selectors: [["prism-union-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"], options: [1, "options"] }, outputs: { valueChange: "valueChange" }, decls: 3, vars: 0, consts: [["role", "group", 1, "ctl-pills"], [1, "ctl-pill", 3, "ctl-pill--active"], [1, "ctl-pill", 3, "click"]], template: function UnionControlComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵrepeaterCreate(1, UnionControlComponent_For_2_Template, 2, 3, "button", 1, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵdomElementEnd();
-            i0.ɵɵdomElementStart(5, "div", 4);
-            i0.ɵɵrepeaterCreate(6, UnionControlComponent_For_7_Template, 2, 3, "button", 5, i0.ɵɵrepeaterTrackByIdentity);
-            i0.ɵɵdomElementEnd()();
         } if (rf & 2) {
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(ctx.label());
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.typeName() ? 4 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵattribute("aria-label", ctx.label());
             i0.ɵɵadvance();
             i0.ɵɵrepeater(ctx.options());
-        } }, styles: [".prism-union-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-union-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-union-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-union-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-union-control__options[_ngcontent-%COMP%] {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      flex: 1;\n    }\n\n    .prism-union-control__option[_ngcontent-%COMP%] {\n      padding: 3px 10px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-xs);\n      background: var(--prism-input-bg);\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-union-control__option[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text-2);\n      border-color: var(--prism-border-strong);\n    }\n\n    .prism-union-control__option--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      color: var(--prism-primary);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      font-weight: 500;\n    }\n\n    .prism-union-control__option--active[_ngcontent-%COMP%]:hover {\n      color: var(--prism-primary);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n    }"] });
+        } }, styles: [".ctl-pills[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 4px;\n      flex-wrap: wrap;\n    }\n    .ctl-pill[_ngcontent-%COMP%] {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--fs-sm);\n      font-weight: 500;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n      color: var(--prism-text-muted);\n      background: transparent;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n      font-family: var(--font-sans);\n    }\n    .ctl-pill[_ngcontent-%COMP%]:hover {\n      color: var(--prism-text);\n      border-color: var(--prism-border-strong);\n    }\n    .ctl-pill--active[_ngcontent-%COMP%] {\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      color: var(--prism-primary);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      font-weight: 600;\n    }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnionControlComponent, [{
         type: Component,
-        args: [{ selector: 'prism-union-control', standalone: true, template: `
-    <div class="prism-union-control">
-      <div class="prism-union-control__label">
-        <span class="prism-union-control__label-text">{{ label() }}</span>
-        @if (typeName()) { <code class="prism-union-control__type">{{ typeName() }}</code> }
-      </div>
-      <div class="prism-union-control__options" role="group" [attr.aria-label]="label()">
-        @for (option of options(); track option) {
-          <button
-            class="prism-union-control__option"
-            [class.prism-union-control__option--active]="option === value()"
-            (click)="valueChange.emit(option)"
-          >{{ option }}</button>
-        }
-      </div>
+        args: [{ selector: 'prism-union-control', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="ctl-pills" role="group">
+      @for (option of options(); track option) {
+      <button
+        class="ctl-pill"
+        [class.ctl-pill--active]="option === value()"
+        (click)="valueChange.emit(option)"
+      >
+        {{ option }}
+      </button>
+      }
     </div>
-  `, styles: ["\n    .prism-union-control {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 6px 16px;\n      min-height: 36px;\n    }\n\n    .prism-union-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-union-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-union-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-union-control__options {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 4px;\n      flex: 1;\n    }\n\n    .prism-union-control__option {\n      padding: 3px 10px;\n      font-size: 12px;\n      font-family: var(--prism-font-sans);\n      border: 1px solid var(--prism-border);\n      border-radius: var(--prism-radius-xs);\n      background: var(--prism-input-bg);\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-union-control__option:hover {\n      color: var(--prism-text-2);\n      border-color: var(--prism-border-strong);\n    }\n\n    .prism-union-control__option--active {\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      color: var(--prism-primary);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      font-weight: 500;\n    }\n\n    .prism-union-control__option--active:hover {\n      color: var(--prism-primary);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n    }\n  "] }]
+  `, styles: ["\n    .ctl-pills {\n      display: flex;\n      gap: 4px;\n      flex-wrap: wrap;\n    }\n    .ctl-pill {\n      height: 26px;\n      padding: 0 10px;\n      font-size: var(--fs-sm);\n      font-weight: 500;\n      border: 1px solid var(--prism-border);\n      border-radius: 4px;\n      color: var(--prism-text-muted);\n      background: transparent;\n      cursor: pointer;\n      transition: all var(--dur-fast);\n      font-family: var(--font-sans);\n    }\n    .ctl-pill:hover {\n      color: var(--prism-text);\n      border-color: var(--prism-border-strong);\n    }\n    .ctl-pill--active {\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      color: var(--prism-primary);\n      border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      font-weight: 600;\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 }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnionControlComponent, { className: "UnionControlComponent", filePath: "app/controls/union-control.component.ts", lineNumber: 95 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(UnionControlComponent, { className: "UnionControlComponent", filePath: "app/controls/union-control.component.ts", lineNumber: 56 }); })();

package/dist/app/directives/prism-resizer.directive.d.ts

@@ -0,0 +1,14 @@
+import * as i0 from "@angular/core";
+export declare class PrismResizerDirective {
+    readonly axis: import("@angular/core").InputSignal<"x" | "y">;
+    readonly min: import("@angular/core").InputSignal<number>;
+    readonly max: import("@angular/core").InputSignal<number>;
+    readonly value: import("@angular/core").InputSignal<number>;
+    readonly valueChange: import("@angular/core").OutputEmitterRef<number>;
+    private readonly el;
+    protected onMouseDown(e: MouseEvent): void;
+    protected onKeyDown(e: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismResizerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PrismResizerDirective, "[prismResizer]", never, { "axis": { "alias": "axis"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+//# sourceMappingURL=prism-resizer.directive.d.ts.map

package/dist/app/directives/prism-resizer.directive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prism-resizer.directive.d.ts","sourceRoot":"","sources":["../../../src/app/directives/prism-resizer.directive.ts"],"names":[],"mappings":";AAEA,qBAYa,qBAAqB;IAChC,QAAQ,CAAC,IAAI,iDAA+B;IAC5C,QAAQ,CAAC,GAAG,8CAAc;IAC1B,QAAQ,CAAC,GAAG,8CAAc;IAC1B,QAAQ,CAAC,KAAK,8CAAY;IAC1B,QAAQ,CAAC,WAAW,mDAAoB;IAExC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;IAEtD,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAwB1C,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;yCAjChC,qBAAqB;2CAArB,qBAAqB;CAmDjC"}

package/dist/app/directives/prism-resizer.directive.js

@@ -0,0 +1,71 @@
+import { Directive, ElementRef, inject, input, output } from '@angular/core';
+import * as i0 from "@angular/core";
+export class PrismResizerDirective {
+    axis = input.required(...(ngDevMode ? [{ debugName: "axis" }] : []));
+    min = input(200, ...(ngDevMode ? [{ debugName: "min" }] : []));
+    max = input(600, ...(ngDevMode ? [{ debugName: "max" }] : []));
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
+    valueChange = output();
+    el = inject((ElementRef));
+    onMouseDown(e) {
+        e.preventDefault();
+        const startPos = this.axis() === 'x' ? e.clientX : e.clientY;
+        const startVal = this.value();
+        this.el.nativeElement.classList.add('active');
+        const onMove = (ev) => {
+            const delta = this.axis() === 'x' ? ev.clientX - startPos : startPos - ev.clientY;
+            const next = Math.max(this.min(), Math.min(this.max(), startVal + delta));
+            this.valueChange.emit(next);
+        };
+        const onUp = () => {
+            this.el.nativeElement.classList.remove('active');
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }
+    onKeyDown(e) {
+        const step = 10;
+        const current = this.value();
+        let next = null;
+        if (this.axis() === 'x') {
+            if (e.key === 'ArrowRight')
+                next = current + step;
+            if (e.key === 'ArrowLeft')
+                next = current - step;
+        }
+        else {
+            if (e.key === 'ArrowUp')
+                next = current + step;
+            if (e.key === 'ArrowDown')
+                next = current - step;
+        }
+        if (next !== null) {
+            e.preventDefault();
+            this.valueChange.emit(Math.max(this.min(), Math.min(this.max(), next)));
+        }
+    }
+    static ɵfac = function PrismResizerDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismResizerDirective)(); };
+    static ɵdir = /*@__PURE__*/ i0.ɵɵdefineDirective({ type: PrismResizerDirective, selectors: [["", "prismResizer", ""]], hostVars: 5, hostBindings: function PrismResizerDirective_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("mousedown", function PrismResizerDirective_mousedown_HostBindingHandler($event) { return ctx.onMouseDown($event); })("keydown", function PrismResizerDirective_keydown_HostBindingHandler($event) { return ctx.onKeyDown($event); });
+        } if (rf & 2) {
+            i0.ɵɵattribute("role", "separator")("aria-orientation", ctx.axis() === "x" ? "vertical" : "horizontal")("tabindex", "0");
+            i0.ɵɵstyleProp("cursor", ctx.axis() === "x" ? "col-resize" : "row-resize");
+        } }, inputs: { axis: [1, "axis"], min: [1, "min"], max: [1, "max"], value: [1, "value"] }, outputs: { valueChange: "valueChange" } });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismResizerDirective, [{
+        type: Directive,
+        args: [{
+                selector: '[prismResizer]',
+                standalone: true,
+                host: {
+                    '[style.cursor]': 'axis() === "x" ? "col-resize" : "row-resize"',
+                    '[attr.role]': '"separator"',
+                    '[attr.aria-orientation]': 'axis() === "x" ? "vertical" : "horizontal"',
+                    '(mousedown)': 'onMouseDown($event)',
+                    '(keydown)': 'onKeyDown($event)',
+                    '[attr.tabindex]': '"0"',
+                },
+            }]
+    }], null, { axis: [{ type: i0.Input, args: [{ isSignal: true, alias: "axis", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] }); })();

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

@@ -7,6 +7,9 @@ export declare class PrismHeaderComponent {
     protected readonly themeService: PrismThemeService;
     protected readonly logoUrl: import("@angular/core").Signal<string | null>;
     protected readonly title: import("@angular/core").Signal<string>;
+    protected readonly subtitle: import("@angular/core").Signal<string | null>;
+    protected onGlobalKey(e: KeyboardEvent): void;
+    protected onSearchFocus(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismHeaderComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismHeaderComponent, "prism-header", never, {}, {}, never, never, true, never>;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"prism-header.component.d.ts","sourceRoot":"","sources":["../../../src/app/header/prism-header.component.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAGvE,qBAgSa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,gDAKvB;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAAmD;yCAZhE,oBAAoB;2CAApB,oBAAoB;CAahC"}
+{"version":3,"file":"prism-header.component.d.ts","sourceRoot":"","sources":["../../../src/app/header/prism-header.component.ts"],"names":[],"mappings":"AAWA,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AACzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;;AAEvE,qBAmLa,oBAAoB;IAC/B,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAuC;IAC9D,SAAS,CAAC,QAAQ,CAAC,aAAa,qBAA8B;IAC9D,SAAS,CAAC,QAAQ,CAAC,YAAY,oBAA6B;IAE5D,SAAS,CAAC,QAAQ,CAAC,OAAO,gDAKvB;IAEH,SAAS,CAAC,QAAQ,CAAC,KAAK,yCAAmD;IAC3E,SAAS,CAAC,QAAQ,CAAC,QAAQ,gDAAgD;IAG3E,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAO7C,SAAS,CAAC,aAAa,IAAI,IAAI;yCAvBpB,oBAAoB;2CAApB,oBAAoB;CA0BhC"}