@ng-prism/core 21.4.3 → 21.4.5

package/README.md

@@ -57,7 +57,7 @@ export class ButtonComponent {
 ### 3. Run the schematic
 
 ```bash
-ng add ng-prism
+ng add @ng-prism/core
 ```
 
 This creates the prism app project, configures Angular builders, and generates `ng-prism.config.ts`.

package/dist/app/page-renderer/prism-page-renderer.component.d.ts

@@ -1,7 +1,9 @@
 import * as i0 from "@angular/core";
 export declare class PrismPageRendererComponent {
     private readonly nav;
+    private readonly host;
     protected readonly page: import("@angular/core").Signal<import("../../index.js").StyleguidePage | null>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismPageRendererComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismPageRendererComponent, "prism-page-renderer", never, {}, {}, never, never, true, never>;
 }

package/dist/app/page-renderer/prism-page-renderer.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,qBAiDa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,SAAS,CAAC,QAAQ,CAAC,IAAI,iFAAuB;yCAFnC,0BAA0B;2CAA1B,0BAA0B;CAGtC"}
+{"version":3,"file":"prism-page-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/page-renderer/prism-page-renderer.component.ts"],"names":[],"mappings":";AAIA,qBAiDa,0BAA0B;IACrC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAkC;IACtD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,SAAS,CAAC,QAAQ,CAAC,IAAI,iFAAuB;;yCAHnC,0BAA0B;2CAA1B,0BAA0B;CAWtC"}

package/dist/app/page-renderer/prism-page-renderer.component.js

@@ -1,4 +1,4 @@
-import { Component, inject } from '@angular/core';
+import { Component, effect, ElementRef, inject } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import * as i0 from "@angular/core";
@@ -40,7 +40,14 @@ function PrismPageRendererComponent_Conditional_0_Template(rf, ctx) { if (rf & 1
 } }
 export class PrismPageRendererComponent {
     nav = inject(PrismNavigationService);
+    host = inject((ElementRef));
     page = this.nav.activePage;
+    constructor() {
+        effect(() => {
+            this.page();
+            this.host.nativeElement.scrollTop = 0;
+        });
+    }
     static ɵfac = function PrismPageRendererComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPageRendererComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismPageRendererComponent, selectors: [["prism-page-renderer"]], decls: 1, vars: 1, consts: [[1, "prism-page-renderer"], [1, "prism-page-renderer__title"], [1, "prism-page-renderer__json"], [1, "prism-page-renderer__component"], [4, "ngComponentOutlet"]], template: function PrismPageRendererComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, PrismPageRendererComponent_Conditional_0_Template, 5, 2, "div", 0);
@@ -68,5 +75,5 @@ export class PrismPageRendererComponent {
       </div>
     }
   `, styles: ["\n    :host { display: block; flex: 1; overflow-y: auto; }\n    .prism-page-renderer__title {\n      margin: 0;\n      padding: 16px 20px;\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      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    .prism-page-renderer__component {\n      padding: 16px 20px;\n    }\n    .prism-page-renderer__json {\n      margin: 0;\n      padding: 24px;\n      font-size: 12px;\n      font-family: monospace;\n      color: var(--prism-text-muted);\n      white-space: pre-wrap;\n    }\n  "] }]
-    }], null, null); })();
+    }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismPageRendererComponent, { className: "PrismPageRendererComponent", filePath: "app/page-renderer/prism-page-renderer.component.ts", lineNumber: 54 }); })();

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

@@ -11,6 +11,7 @@ export declare class PrismRendererComponent {
     private readonly manifestService;
     private readonly injector;
     private readonly destroyRef;
+    private readonly host;
     private readonly rendererHooks;
     private readonly outlet;
     private componentRef;

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

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAOL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAOvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAIpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;;AAG7E,qBA4Ka,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,kBAAkB,yBAAkC;IACvE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoD;IAElF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA4D;IACnF,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAA0D;IACtF,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAE7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;IAEH,QAAQ,CAAC,WAAW,kDAAiB;IAErC,QAAQ,CAAC,OAAO,yCAgBb;;IAiFH,OAAO,CAAC,eAAe;IAiEvB,OAAO,CAAC,OAAO;yCA9LJ,sBAAsB;2CAAtB,sBAAsB;CA4MlC"}
+{"version":3,"file":"prism-renderer.component.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/prism-renderer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAQL,QAAQ,EAER,KAAK,IAAI,EAIV,MAAM,eAAe,CAAC;AAOvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AAIpF,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;AAGjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;;AAG7E,qBA4Ka,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IACtE,SAAS,CAAC,QAAQ,CAAC,eAAe,uBAAgC;IAClE,SAAS,CAAC,QAAQ,CAAC,kBAAkB,yBAAkC;IACvE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAC7C,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAmC;IACxD,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAoD;IAElF,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA4D;IACnF,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,mBAAmB,CAAsC;IACjE,OAAO,CAAC,oBAAoB,CAA0D;IACtF,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoC;IACjE,QAAQ,CAAC,aAAa,+DAAsC;IAC5D,SAAS,CAAC,QAAQ,CAAC,aAAa;;MAA6C;IAE7E,SAAS,CAAC,QAAQ,CAAC,eAAe,yFAG/B;IAEH,QAAQ,CAAC,WAAW,kDAAiB;IAErC,QAAQ,CAAC,OAAO,yCAgBb;;IAkFH,OAAO,CAAC,eAAe;IAiEvB,OAAO,CAAC,OAAO;yCAhMJ,sBAAsB;2CAAtB,sBAAsB;CA8MlC"}

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

@@ -1,4 +1,4 @@
-import { Component, computed, DestroyRef, effect, inject, Injector, signal, untracked, viewChild, ViewContainerRef, } from '@angular/core';
+import { Component, computed, DestroyRef, effect, ElementRef, inject, Injector, signal, untracked, viewChild, ViewContainerRef, } from '@angular/core';
 import { NgComponentOutlet } from '@angular/common';
 import { Highlight } from 'ngx-highlightjs';
 import { PrismManifestService } from '../services/prism-manifest.service.js';
@@ -80,6 +80,7 @@ export class PrismRendererComponent {
     manifestService = inject(PrismManifestService);
     injector = inject(Injector);
     destroyRef = inject(DestroyRef);
+    host = inject((ElementRef));
     rendererHooks = inject(PRISM_RENDERER_HOOKS, { optional: true });
     outlet = viewChild.required('outlet', { read: ViewContainerRef });
     componentRef = null;
@@ -113,6 +114,7 @@ export class PrismRendererComponent {
             if (!comp)
                 return;
             untracked(() => {
+                this.host.nativeElement.scrollTop = 0;
                 this.codeVisible.set(false);
                 this.rendererService.reconcileForComponent(comp);
                 this.createComponent(comp);
@@ -320,7 +322,7 @@ export class PrismRendererComponent {
     </div>
   `, styles: ["\n    .prism-renderer {\n      display: flex;\n      flex-direction: column;\n      flex: 1;\n      min-height: 0;\n    }\n\n    .prism-renderer__toolbar {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      border-bottom: 1px solid var(--prism-border);\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n    .prism-renderer__variant {\n      padding: 8px 14px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      margin-bottom: -1px;\n      transition: color 0.12s;\n    }\n    .prism-renderer__variant::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 0; right: 0;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n    .prism-renderer__variant:hover { color: var(--prism-text); }\n    .prism-renderer__variant--active { color: var(--prism-primary); }\n    .prism-renderer__variant--active::after { opacity: 1; }\n\n    .prism-renderer__canvas {\n      position: relative;\n      flex: 1;\n      padding: 48px 40px;\n      overflow: auto;\n      background-color: var(--prism-bg-surface);\n      background-image: radial-gradient(\n        circle,\n        color-mix(in srgb, var(--prism-primary) 15%, transparent) 1px,\n        transparent 1px\n      );\n      background-size: 20px 20px;\n      display: flex;\n      align-items: flex-start;\n      justify-content: center;\n      transition: filter 0.2s;\n    }\n    .prism-renderer__canvas--sr {\n      filter: brightness(0.82) saturate(0.7);\n    }\n\n    .prism-renderer__code-bar {\n      display: flex;\n      align-items: center;\n      padding: 0 12px;\n      border-top: 1px solid var(--prism-border);\n      flex-shrink: 0;\n      background: var(--prism-bg-elevated);\n    }\n    .prism-renderer__code-button {\n      display: flex;\n      align-items: center;\n      gap: 5px;\n      padding: 6px 8px;\n      font-size: 11.5px;\n      font-family: var(--prism-font-mono, monospace);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      position: relative;\n      transition: color 0.12s;\n      margin-bottom: -1px;\n    }\n    .prism-renderer__code-button::after {\n      content: '';\n      position: absolute;\n      bottom: 0; left: 4px; right: 4px;\n      height: 2px;\n      background: linear-gradient(90deg, var(--prism-primary-from), var(--prism-primary-to));\n      opacity: 0;\n      transition: opacity 0.12s;\n    }\n    .prism-renderer__code-button:hover { color: var(--prism-text-2); }\n    .prism-renderer__code-button--active { color: var(--prism-primary); }\n    .prism-renderer__code-button--active::after { opacity: 1; }\n\n    .prism-renderer__code {\n      border-top: 1px solid var(--prism-border);\n      overflow: auto;\n      flex-shrink: 0;\n      max-height: 240px;\n      background: var(--prism-void);\n    }\n    .prism-renderer__code pre {\n      margin: 0;\n      padding: 20px 24px;\n      font-size: 12.5px;\n      line-height: 1.65;\n      font-family: var(--prism-font-mono);\n    }\n    .prism-renderer__code code { font-family: inherit; }\n    :host ::ng-deep .prism-renderer__code .hljs {\n      background: transparent;\n      color: var(--prism-text-2);\n    }\n    :host ::ng-deep .prism-renderer__code .hljs-tag { color: var(--prism-text-muted); }\n    :host ::ng-deep .prism-renderer__code .hljs-name { color: var(--prism-primary); }\n    :host ::ng-deep .prism-renderer__code .hljs-attr { color: #93c5fd; }\n    :host ::ng-deep .prism-renderer__code .hljs-string { color: #7dd3fc; }\n  "] }]
     }], () => [], { outlet: [{ type: i0.ViewChild, args: ['outlet', { ...{ read: ViewContainerRef }, isSignal: true }] }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 203 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismRendererComponent, { className: "PrismRendererComponent", filePath: "app/renderer/prism-renderer.component.ts", lineNumber: 204 }); })();
 function parseContentToNodes(content) {
     if (typeof content === 'string') {
         return [htmlToNodes(content)];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,4BAA4B,CAAC;AACpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAqOtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAOvD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,IAAI,EAIV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAqOtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAOvD"}

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

@@ -1,4 +1,5 @@
 import { chain, SchematicsException, } from '@angular-devkit/schematics';
+import { parse as parseJsonc } from 'jsonc-parser';
 function readWorkspace(tree) {
     const buffer = tree.read('angular.json');
     if (!buffer) {
@@ -140,7 +141,7 @@ function addTsConfigPaths(options) {
         if (!buffer) {
             return tree;
         }
-        const tsConfig = JSON.parse(buffer.toString('utf-8'));
+        const tsConfig = parseJsonc(buffer.toString('utf-8'));
         if (!tsConfig.compilerOptions) {
             tsConfig.compilerOptions = {};
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "21.4.3",
+  "version": "21.4.5",
   "description": "Lightweight Angular-native component showcase — no story files needed.",
   "keywords": [
     "angular",
@@ -43,11 +43,11 @@
     "!**/*.tsbuildinfo"
   ],
   "peerDependencies": {
-    "@angular/core": ">=19.0.0",
-    "@angular/common": ">=19.0.0",
-    "@angular-devkit/architect": ">=0.1900.0",
-    "@angular-devkit/core": ">=19.0.0",
-    "@angular-devkit/schematics": ">=19.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/common": ">=21.0.0",
+    "@angular-devkit/architect": ">=0.2100.0",
+    "@angular-devkit/core": ">=21.0.0",
+    "@angular-devkit/schematics": ">=21.0.0",
     "typescript": ">=5.5.0",
     "highlight.js": ">=11.0.0",
     "ngx-highlightjs": ">=14.0.0"