@ng-prism/plugin-box-model 21.4.0 → 21.4.2

package/dist/box-model-overlay.component.d.ts

@@ -1,3 +1,4 @@
+import type { PrismRendererService } from '@ng-prism/core';
 import * as i0 from "@angular/core";
 interface BoxStyle {
     left: string;
@@ -14,8 +15,8 @@ interface BoxStyles {
 export declare class BoxModelOverlayComponent {
     private readonly el;
     private readonly destroyRef;
-    private readonly rendererService;
     private readonly stateService;
+    readonly rendererService: import("@angular/core").InputSignal<PrismRendererService>;
     readonly boxStyles: import("@angular/core").Signal<BoxStyles | null>;
     readonly contentSize: import("@angular/core").Signal<string>;
     labelMargin(side: 'top' | 'right' | 'bottom' | 'left'): string;
@@ -23,7 +24,7 @@ export declare class BoxModelOverlayComponent {
     constructor();
     private handleMouseMove;
     static ɵfac: i0.ɵɵFactoryDeclaration<BoxModelOverlayComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BoxModelOverlayComponent, "prism-box-model-overlay", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BoxModelOverlayComponent, "prism-box-model-overlay", never, { "rendererService": { "alias": "rendererService"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 export {};
 //# sourceMappingURL=box-model-overlay.component.d.ts.map

package/dist/box-model-overlay.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box-model-overlay.component.d.ts","sourceRoot":"","sources":["../src/box-model-overlay.component.ts"],"names":[],"mappings":";AAeA,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,SAAS;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,EAAE,QAAQ,CAAC;CACnB;AAED,qBAiEa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgC;IAE7D,QAAQ,CAAC,SAAS,mDAyCf;IAEH,QAAQ,CAAC,WAAW,yCAOjB;IAEH,WAAW,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;IAO9D,YAAY,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;;IA0B/D,OAAO,CAAC,eAAe;yCA3FZ,wBAAwB;2CAAxB,wBAAwB;CA0GpC"}
+{"version":3,"file":"box-model-overlay.component.d.ts","sourceRoot":"","sources":["../src/box-model-overlay.component.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;;AAI3D,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,SAAS;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,EAAE,QAAQ,CAAC;CACnB;AAED,qBAiEa,wBAAwB;IACnC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAmC;IACtD,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAsB;IACjD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAgC;IAC7D,QAAQ,CAAC,eAAe,4DAA0C;IAElE,QAAQ,CAAC,SAAS,mDAyCf;IAEH,QAAQ,CAAC,WAAW,yCAOjB;IAEH,WAAW,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;IAO9D,YAAY,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;;IA0B/D,OAAO,CAAC,eAAe;yCA3FZ,wBAAwB;2CAAxB,wBAAwB;CA0GpC"}

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

@@ -1,7 +1,6 @@
-import { afterNextRender, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, } from '@angular/core';
+import { afterNextRender, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, input, } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent } from 'rxjs';
-import { PrismRendererService } from '@ng-prism/core';
 import { getBoxModel } from './box-model-utils.js';
 import { BoxModelStateService } from './box-model-state.service.js';
 import * as i0 from "@angular/core";
@@ -126,8 +125,8 @@ function BoxModelOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
 export class BoxModelOverlayComponent {
     el = inject((ElementRef));
     destroyRef = inject(DestroyRef);
-    rendererService = inject(PrismRendererService);
     stateService = inject(BoxModelStateService);
+    rendererService = input.required(...(ngDevMode ? [{ debugName: "rendererService" }] : []));
     boxStyles = computed(() => {
         const bm = this.stateService.hoveredBoxModel();
         const canvas = this.el.nativeElement.parentElement;
@@ -208,7 +207,7 @@ export class BoxModelOverlayComponent {
         });
     }
     handleMouseMove(event) {
-        const renderedEl = this.rendererService.renderedElement();
+        const renderedEl = this.rendererService()?.renderedElement();
         if (!renderedEl) {
             this.stateService.hoveredBoxModel.set(null);
             return;
@@ -221,7 +220,7 @@ export class BoxModelOverlayComponent {
         this.stateService.hoveredBoxModel.set(getBoxModel(element));
     }
     static ɵfac = function BoxModelOverlayComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BoxModelOverlayComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BoxModelOverlayComponent, selectors: [["prism-box-model-overlay"]], decls: 1, vars: 1, consts: [[1, "prism-bm__box", "prism-bm__box--margin"], [1, "prism-bm__label", "prism-bm__label--top"], [1, "prism-bm__label", "prism-bm__label--right"], [1, "prism-bm__label", "prism-bm__label--bottom"], [1, "prism-bm__label", "prism-bm__label--left"], [1, "prism-bm__box", "prism-bm__box--border"], [1, "prism-bm__box", "prism-bm__box--padding"], [1, "prism-bm__box", "prism-bm__box--content"], [1, "prism-bm__size"]], template: function BoxModelOverlayComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BoxModelOverlayComponent, selectors: [["prism-box-model-overlay"]], inputs: { rendererService: [1, "rendererService"] }, decls: 1, vars: 1, consts: [[1, "prism-bm__box", "prism-bm__box--margin"], [1, "prism-bm__label", "prism-bm__label--top"], [1, "prism-bm__label", "prism-bm__label--right"], [1, "prism-bm__label", "prism-bm__label--bottom"], [1, "prism-bm__label", "prism-bm__label--left"], [1, "prism-bm__box", "prism-bm__box--border"], [1, "prism-bm__box", "prism-bm__box--padding"], [1, "prism-bm__box", "prism-bm__box--content"], [1, "prism-bm__size"]], template: function BoxModelOverlayComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, BoxModelOverlayComponent_Conditional_0_Template, 14, 41);
         } if (rf & 2) {
             let tmp_0_0;
@@ -250,5 +249,5 @@ export class BoxModelOverlayComponent {
       </div>
     }
   `, styles: ["\n    :host {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      overflow: hidden;\n    }\n    .prism-bm__box {\n      position: absolute;\n      box-sizing: border-box;\n    }\n    .prism-bm__box--margin  { background: rgba(245, 158, 11, 0.2); outline: 1px solid rgba(245, 158, 11, 0.5); }\n    .prism-bm__box--border  { background: rgba(234, 179, 8, 0.3); }\n    .prism-bm__box--padding { background: rgba(16, 185, 129, 0.2); outline: 1px solid rgba(16, 185, 129, 0.4); }\n    .prism-bm__box--content { background: rgba(59, 130, 246, 0.25); display: flex; align-items: center; justify-content: center; }\n    .prism-bm__label {\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    { top: 2px; left: 50%; transform: translateX(-50%); }\n    .prism-bm__label--bottom { bottom: 2px; left: 50%; transform: translateX(-50%); }\n    .prism-bm__label--left   { left: 2px; top: 50%; transform: translateY(-50%); }\n    .prism-bm__label--right  { right: 2px; top: 50%; transform: translateY(-50%); }\n    .prism-bm__size {\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    }\n  "] }]
-    }], () => [], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelOverlayComponent, { className: "BoxModelOverlayComponent", filePath: "box-model-overlay.component.ts", lineNumber: 95 }); })();
+    }], () => [], { rendererService: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererService", required: true }] }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelOverlayComponent, { className: "BoxModelOverlayComponent", filePath: "box-model-overlay.component.ts", lineNumber: 96 }); })();

package/dist/box-model-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"box-model-plugin.d.ts","sourceRoot":"","sources":["../src/box-model-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,wBAAgB,cAAc,IAAI,aAAa,CAe9C"}
+{"version":3,"file":"box-model-plugin.d.ts","sourceRoot":"","sources":["../src/box-model-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG3D,wBAAgB,cAAc,IAAI,aAAa,CAgB9C"}

package/dist/box-model-plugin.js

@@ -1,3 +1,4 @@
+import { BoxModelStateService } from './box-model-state.service.js';
 export function boxModelPlugin() {
     return {
         name: 'box-model',
@@ -8,6 +9,7 @@ export function boxModelPlugin() {
                 loadComponent: () => import('./box-model-panel.component.js').then((m) => m.BoxModelPanelComponent),
                 loadOverlayComponent: () => import('./box-model-overlay.component.js').then((m) => m.BoxModelOverlayComponent),
                 position: 'bottom',
+                providers: [BoxModelStateService],
             },
         ],
     };

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

@@ -3,9 +3,8 @@ import * as i0 from "@angular/core";
 export class BoxModelStateService {
     hoveredBoxModel = signal(null, ...(ngDevMode ? [{ debugName: "hoveredBoxModel" }] : []));
     static ɵfac = function BoxModelStateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BoxModelStateService)(); };
-    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BoxModelStateService, factory: BoxModelStateService.ɵfac, providedIn: 'root' });
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: BoxModelStateService, factory: BoxModelStateService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelStateService, [{
-        type: Injectable,
-        args: [{ providedIn: 'root' }]
+        type: Injectable
     }], null, null); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/plugin-box-model",
-  "version": "21.4.0",
+  "version": "21.4.2",
   "description": "CSS box model inspector for ng-prism.",
   "keywords": [
     "@ng-prism/core",