@ng-prism/plugin-box-model 21.12.0-beta.2 → 22.0.0-beta.0

package/dist/box-model-overlay.component.js

@@ -126,7 +126,8 @@ export class BoxModelOverlayComponent {
     el = inject((ElementRef));
     destroyRef = inject(DestroyRef);
     stateService = inject(BoxModelStateService);
-    rendererService = input.required(...(ngDevMode ? [{ debugName: "rendererService" }] : []));
+    rendererService = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "rendererService" }] : /* istanbul ignore next */ []));
     boxStyles = computed(() => {
         const bm = this.stateService.hoveredBoxModel();
         const canvas = this.el.nativeElement.parentElement;
@@ -166,7 +167,8 @@ export class BoxModelOverlayComponent {
                 height: `${bH - border.top - border.bottom - padding.top - padding.bottom}px`,
             },
         };
-    }, ...(ngDevMode ? [{ debugName: "boxStyles" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "boxStyles" }] : /* istanbul ignore next */ []));
     contentSize = computed(() => {
         const bm = this.stateService.hoveredBoxModel();
         if (!bm)
@@ -175,7 +177,8 @@ export class BoxModelOverlayComponent {
         const w = Math.round(content.width - border.left - border.right - padding.left - padding.right);
         const h = Math.round(content.height - border.top - border.bottom - padding.top - padding.bottom);
         return `${w} × ${h}`;
-    }, ...(ngDevMode ? [{ debugName: "contentSize" }] : []));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentSize" }] : /* istanbul ignore next */ []));
     labelMargin(side) {
         const bm = this.stateService.hoveredBoxModel();
         if (!bm)
@@ -225,7 +228,7 @@ export class BoxModelOverlayComponent {
         } if (rf & 2) {
             let tmp_0_0;
             i0.ɵɵconditional((tmp_0_0 = ctx.boxStyles()) ? 0 : -1, tmp_0_0);
-        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n    .prism-bm__box[_ngcontent-%COMP%] {\n      position: absolute;\n      box-sizing: border-box;\n    }\n    .prism-bm__box--margin[_ngcontent-%COMP%]  { background: rgba(245, 158, 11, 0.2); outline: 1px solid rgba(245, 158, 11, 0.5); }\n    .prism-bm__box--border[_ngcontent-%COMP%]  { background: rgba(234, 179, 8, 0.3); }\n    .prism-bm__box--padding[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.2); outline: 1px solid rgba(16, 185, 129, 0.4); }\n    .prism-bm__box--content[_ngcontent-%COMP%] { background: rgba(59, 130, 246, 0.25); display: flex; align-items: center; justify-content: center; }\n    .prism-bm__label[_ngcontent-%COMP%] {\n      position: absolute;\n      font-size: 10px;\n      font-family: monospace;\n      color: #1f2937;\n      background: rgba(255,255,255,0.8);\n      padding: 0 3px;\n      border-radius: 2px;\n      white-space: nowrap;\n      line-height: 1.4;\n    }\n    .prism-bm__label--top[_ngcontent-%COMP%]    { top: 2px; left: 50%; transform: translateX(-50%); }\n    .prism-bm__label--bottom[_ngcontent-%COMP%] { bottom: 2px; left: 50%; transform: translateX(-50%); }\n    .prism-bm__label--left[_ngcontent-%COMP%]   { left: 2px; top: 50%; transform: translateY(-50%); }\n    .prism-bm__label--right[_ngcontent-%COMP%]  { right: 2px; top: 50%; transform: translateY(-50%); }\n    .prism-bm__size[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-family: monospace;\n      color: #1e3a5f;\n      background: rgba(255,255,255,0.85);\n      padding: 1px 5px;\n      border-radius: 3px;\n      white-space: nowrap;\n    }"], changeDetection: 0 });
+        } }, styles: ["[_nghost-%COMP%] {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n    .prism-bm__box[_ngcontent-%COMP%] {\n      position: absolute;\n      box-sizing: border-box;\n    }\n    .prism-bm__box--margin[_ngcontent-%COMP%]  { background: rgba(245, 158, 11, 0.2); outline: 1px solid rgba(245, 158, 11, 0.5); }\n    .prism-bm__box--border[_ngcontent-%COMP%]  { background: rgba(234, 179, 8, 0.3); }\n    .prism-bm__box--padding[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.2); outline: 1px solid rgba(16, 185, 129, 0.4); }\n    .prism-bm__box--content[_ngcontent-%COMP%] { background: rgba(59, 130, 246, 0.25); display: flex; align-items: center; justify-content: center; }\n    .prism-bm__label[_ngcontent-%COMP%] {\n      position: absolute;\n      font-size: 10px;\n      font-family: monospace;\n      color: #1f2937;\n      background: rgba(255,255,255,0.8);\n      padding: 0 3px;\n      border-radius: 2px;\n      white-space: nowrap;\n      line-height: 1.4;\n    }\n    .prism-bm__label--top[_ngcontent-%COMP%]    { top: 2px; left: 50%; transform: translateX(-50%); }\n    .prism-bm__label--bottom[_ngcontent-%COMP%] { bottom: 2px; left: 50%; transform: translateX(-50%); }\n    .prism-bm__label--left[_ngcontent-%COMP%]   { left: 2px; top: 50%; transform: translateY(-50%); }\n    .prism-bm__label--right[_ngcontent-%COMP%]  { right: 2px; top: 50%; transform: translateY(-50%); }\n    .prism-bm__size[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-family: monospace;\n      color: #1e3a5f;\n      background: rgba(255,255,255,0.85);\n      padding: 1px 5px;\n      border-radius: 3px;\n      white-space: nowrap;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelOverlayComponent, [{
         type: Component,

package/dist/box-model-panel.component.js

@@ -77,7 +77,8 @@ function BoxModelPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 } }
 export class BoxModelPanelComponent {
     stateService = inject(BoxModelStateService);
-    activeComponent = input(null, ...(ngDevMode ? [{ debugName: "activeComponent" }] : []));
+    activeComponent = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
     fmt(value) {
         return value === 0 ? '-' : `${value}`;
     }
@@ -104,7 +105,7 @@ export class BoxModelPanelComponent {
             let tmp_0_0;
             i0.ɵɵadvance();
             i0.ɵɵconditional((tmp_0_0 = ctx.stateService.hoveredBoxModel()) ? 1 : 2, tmp_0_0);
-        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n    .prism-bmp[_ngcontent-%COMP%] {\n      padding: 24px;\n      font-family: var(--font-sans);\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100%;\n    }\n    .prism-bmp__diagram[_ngcontent-%COMP%] { width: 100%; max-width: 340px; }\n    .prism-bmp__region[_ngcontent-%COMP%] {\n      border: 1px dashed; position: relative;\n      display: flex; align-items: center; justify-content: center;\n      font-family: var(--font-mono); font-size: 10px;\n      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;\n    }\n    .prism-bmp__region--margin[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, #fbbf24 70%, transparent);\n      background: color-mix(in srgb, #fbbf24 8%, transparent);\n      padding: 32px; color: #fbbf24;\n    }\n    .prism-bmp__region--border[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, #f472b6 70%, transparent);\n      background: color-mix(in srgb, #f472b6 8%, transparent);\n      padding: 14px; color: #f472b6; flex: 1;\n    }\n    .prism-bmp__region--padding[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, #34d399 70%, transparent);\n      background: color-mix(in srgb, #34d399 10%, transparent);\n      padding: 20px; color: #34d399; flex: 1;\n    }\n    .prism-bmp__region-label[_ngcontent-%COMP%] {\n      position: absolute; top: 6px; left: 50%; transform: translateX(-50%);\n      font-size: 10px; font-weight: 600; text-transform: uppercase;\n      letter-spacing: 0.08em; color: inherit; opacity: 0.8;\n    }\n    .prism-bmp__sides[_ngcontent-%COMP%] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 14px; }\n    .prism-bmp__inner-row[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 2px; width: 100%; }\n    .prism-bmp__inner-row[_ngcontent-%COMP%]    > .prism-bmp__region[_ngcontent-%COMP%] { flex: 1; }\n    .prism-bmp__side[_ngcontent-%COMP%] {\n      font-family: var(--font-mono); font-size: 10px;\n      color: var(--prism-text-muted);\n      min-width: 28px; text-align: center; padding: 1px 4px;\n    }\n    .prism-bmp__side--dim[_ngcontent-%COMP%] { color: var(--prism-text-ghost); }\n    .prism-bmp__content-box[_ngcontent-%COMP%] {\n      flex: 1; text-align: center;\n      font-family: var(--font-mono); font-size: 12px;\n      color: var(--prism-primary);\n      border: 1px solid var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      border-radius: var(--radius-xs); padding: 22px 36px;\n      text-transform: none; letter-spacing: 0; font-weight: 500;\n    }\n    .prism-bmp__empty[_ngcontent-%COMP%] { color: var(--prism-text-muted); font-size: 13px; }"], changeDetection: 0 });
+        } }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n    .prism-bmp[_ngcontent-%COMP%] {\n      padding: 24px;\n      font-family: var(--font-sans);\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100%;\n    }\n    .prism-bmp__diagram[_ngcontent-%COMP%] { width: 100%; max-width: 340px; }\n    .prism-bmp__region[_ngcontent-%COMP%] {\n      border: 1px dashed; position: relative;\n      display: flex; align-items: center; justify-content: center;\n      font-family: var(--font-mono); font-size: 10px;\n      text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;\n    }\n    .prism-bmp__region--margin[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, #fbbf24 70%, transparent);\n      background: color-mix(in srgb, #fbbf24 8%, transparent);\n      padding: 32px; color: #fbbf24;\n    }\n    .prism-bmp__region--border[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, #f472b6 70%, transparent);\n      background: color-mix(in srgb, #f472b6 8%, transparent);\n      padding: 14px; color: #f472b6; flex: 1;\n    }\n    .prism-bmp__region--padding[_ngcontent-%COMP%] {\n      border-color: color-mix(in srgb, #34d399 70%, transparent);\n      background: color-mix(in srgb, #34d399 10%, transparent);\n      padding: 20px; color: #34d399; flex: 1;\n    }\n    .prism-bmp__region-label[_ngcontent-%COMP%] {\n      position: absolute; top: 6px; left: 50%; transform: translateX(-50%);\n      font-size: 10px; font-weight: 600; text-transform: uppercase;\n      letter-spacing: 0.08em; color: inherit; opacity: 0.8;\n    }\n    .prism-bmp__sides[_ngcontent-%COMP%] { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 14px; }\n    .prism-bmp__inner-row[_ngcontent-%COMP%] { display: flex; align-items: center; gap: 2px; width: 100%; }\n    .prism-bmp__inner-row[_ngcontent-%COMP%]    > .prism-bmp__region[_ngcontent-%COMP%] { flex: 1; }\n    .prism-bmp__side[_ngcontent-%COMP%] {\n      font-family: var(--font-mono); font-size: 10px;\n      color: var(--prism-text-muted);\n      min-width: 28px; text-align: center; padding: 1px 4px;\n    }\n    .prism-bmp__side--dim[_ngcontent-%COMP%] { color: var(--prism-text-ghost); }\n    .prism-bmp__content-box[_ngcontent-%COMP%] {\n      flex: 1; text-align: center;\n      font-family: var(--font-mono); font-size: 12px;\n      color: var(--prism-primary);\n      border: 1px solid var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n      border-radius: var(--radius-xs); padding: 22px 36px;\n      text-transform: none; letter-spacing: 0; font-weight: 500;\n    }\n    .prism-bmp__empty[_ngcontent-%COMP%] { color: var(--prism-text-muted); font-size: 13px; }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelPanelComponent, [{
         type: Component,

package/dist/box-model-state.service.js

@@ -1,7 +1,8 @@
 import { Injectable, signal } from '@angular/core';
 import * as i0 from "@angular/core";
 export class BoxModelStateService {
-    hoveredBoxModel = signal(null, ...(ngDevMode ? [{ debugName: "hoveredBoxModel" }] : []));
+    hoveredBoxModel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredBoxModel" }] : /* istanbul ignore next */ []));
     static ɵfac = function BoxModelStateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BoxModelStateService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BoxModelStateService, factory: BoxModelStateService.ɵfac });
 }

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

@@ -0,0 +1,4 @@
+import { type Rule } from '@angular-devkit/schematics';
+import type { NgAddSchemaOptions } from './schema.js';
+export declare function ngAdd(options: NgAddSchemaOptions): Rule;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,25 @@
+import { chain, } from '@angular-devkit/schematics';
+import { addPluginToConfig } from '@ng-prism/core/schematics/utils';
+const PLUGIN_IMPORT_NAME = 'boxModelPlugin';
+const PLUGIN_IMPORT_FROM = '@ng-prism/plugin-box-model';
+const PLUGIN_CALL = 'boxModelPlugin()';
+function injectPlugin(options) {
+    return (tree, context) => {
+        const configPath = options.configPath ?? 'ng-prism.config.ts';
+        const changed = addPluginToConfig(tree, configPath, {
+            importName: PLUGIN_IMPORT_NAME,
+            importFrom: PLUGIN_IMPORT_FROM,
+            call: PLUGIN_CALL,
+        });
+        if (changed) {
+            context.logger.info(`  ${PLUGIN_IMPORT_FROM} → added to ${configPath}`);
+        }
+        else {
+            context.logger.info(`  ${PLUGIN_IMPORT_FROM} already configured — skipped`);
+        }
+        return tree;
+    };
+}
+export function ngAdd(options) {
+    return chain([injectPlugin(options)]);
+}

package/dist/schematics/ng-add/schema.d.ts

@@ -0,0 +1,4 @@
+export interface NgAddSchemaOptions {
+    configPath?: string;
+}
+//# sourceMappingURL=schema.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

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

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@ng-prism/plugin-box-model",
-  "version": "21.12.0-beta.2",
+  "version": "22.0.0-beta.0",
   "description": "CSS box model inspector for ng-prism.",
+  "ng-add": {
+    "save": "devDependencies"
+  },
+  "schematics": "./schematics/collection.json",
   "keywords": [
     "@ng-prism/core",
     "box-model",
@@ -25,12 +29,13 @@
   },
   "files": [
     "dist",
+    "schematics",
     "!**/*.tsbuildinfo"
   ],
   "peerDependencies": {
-    "@angular/core": ">=21.0.0",
+    "@angular/core": ">=20.0.0",
     "rxjs": ">=7.0.0",
-    "@ng-prism/core": "^21.12.0-0"
+    "@ng-prism/core": "^22.0.0-0"
   },
   "devDependencies": {
     "@ng-prism/core": "*"

package/schematics/collection.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
+  "schematics": {
+    "ng-add": {
+      "description": "Adds @ng-prism/plugin-box-model to the ng-prism config",
+      "factory": "../dist/schematics/ng-add/index#ngAdd",
+      "schema": "./ng-add/schema.json"
+    }
+  }
+}

package/schematics/ng-add/schema.json

@@ -0,0 +1,16 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "NgPrismPluginBoxModelNgAdd",
+  "title": "Add @ng-prism/plugin-box-model",
+  "description": "Registers @ng-prism/plugin-box-model in ng-prism.config.ts",
+  "type": "object",
+  "properties": {
+    "configPath": {
+      "type": "string",
+      "description": "Path to ng-prism.config.ts",
+      "default": "ng-prism.config.ts"
+    }
+  },
+  "required": [],
+  "additionalProperties": false
+}