@ng-prism/plugin-box-model 21.0.0

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

@@ -0,0 +1,29 @@
+import * as i0 from "@angular/core";
+interface BoxStyle {
+    left: string;
+    top: string;
+    width: string;
+    height: string;
+}
+interface BoxStyles {
+    margin: BoxStyle;
+    border: BoxStyle;
+    padding: BoxStyle;
+    content: BoxStyle;
+}
+export declare class BoxModelOverlayComponent {
+    private readonly el;
+    private readonly destroyRef;
+    private readonly rendererService;
+    private readonly stateService;
+    readonly boxStyles: import("@angular/core").Signal<BoxStyles | null>;
+    readonly contentSize: import("@angular/core").Signal<string>;
+    labelMargin(side: 'top' | 'right' | 'bottom' | 'left'): string;
+    labelPadding(side: 'top' | 'right' | 'bottom' | 'left'): string;
+    constructor();
+    private handleMouseMove;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BoxModelOverlayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BoxModelOverlayComponent, "prism-box-model-overlay", never, {}, {}, never, never, true, never>;
+}
+export {};
+//# sourceMappingURL=box-model-overlay.component.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,254 @@
+import { afterNextRender, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, } 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";
+function BoxModelOverlayComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 1);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelMargin("top"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelMargin("right"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelMargin("bottom"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelMargin("left"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 1);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelPadding("top"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 2);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelPadding("right"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 3);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelPadding("bottom"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "span", 4);
+    i0.ɵɵtext(1);
+    i0.ɵɵdomElementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r0.labelPadding("left"));
+} }
+function BoxModelOverlayComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 0);
+    i0.ɵɵconditionalCreate(1, BoxModelOverlayComponent_Conditional_0_Conditional_1_Template, 2, 1, "span", 1);
+    i0.ɵɵconditionalCreate(2, BoxModelOverlayComponent_Conditional_0_Conditional_2_Template, 2, 1, "span", 2);
+    i0.ɵɵconditionalCreate(3, BoxModelOverlayComponent_Conditional_0_Conditional_3_Template, 2, 1, "span", 3);
+    i0.ɵɵconditionalCreate(4, BoxModelOverlayComponent_Conditional_0_Conditional_4_Template, 2, 1, "span", 4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElement(5, "div", 5);
+    i0.ɵɵdomElementStart(6, "div", 6);
+    i0.ɵɵconditionalCreate(7, BoxModelOverlayComponent_Conditional_0_Conditional_7_Template, 2, 1, "span", 1);
+    i0.ɵɵconditionalCreate(8, BoxModelOverlayComponent_Conditional_0_Conditional_8_Template, 2, 1, "span", 2);
+    i0.ɵɵconditionalCreate(9, BoxModelOverlayComponent_Conditional_0_Conditional_9_Template, 2, 1, "span", 3);
+    i0.ɵɵconditionalCreate(10, BoxModelOverlayComponent_Conditional_0_Conditional_10_Template, 2, 1, "span", 4);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(11, "div", 7)(12, "span", 8);
+    i0.ɵɵtext(13);
+    i0.ɵɵdomElementEnd()();
+} if (rf & 2) {
+    const styles_r2 = ctx;
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("left", styles_r2.margin.left)("top", styles_r2.margin.top)("width", styles_r2.margin.width)("height", styles_r2.margin.height);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelMargin("top") ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelMargin("right") ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelMargin("bottom") ? 3 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelMargin("left") ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("left", styles_r2.border.left)("top", styles_r2.border.top)("width", styles_r2.border.width)("height", styles_r2.border.height);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("left", styles_r2.padding.left)("top", styles_r2.padding.top)("width", styles_r2.padding.width)("height", styles_r2.padding.height);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelPadding("top") ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelPadding("right") ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelPadding("bottom") ? 9 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r0.labelPadding("left") ? 10 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("left", styles_r2.content.left)("top", styles_r2.content.top)("width", styles_r2.content.width)("height", styles_r2.content.height);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r0.contentSize());
+} }
+export class BoxModelOverlayComponent {
+    el = inject((ElementRef));
+    destroyRef = inject(DestroyRef);
+    rendererService = inject(PrismRendererService);
+    stateService = inject(BoxModelStateService);
+    boxStyles = computed(() => {
+        const bm = this.stateService.hoveredBoxModel();
+        const canvas = this.el.nativeElement.parentElement;
+        if (!bm || !canvas)
+            return null;
+        const canvasRect = canvas.getBoundingClientRect();
+        const sl = canvas.scrollLeft;
+        const st = canvas.scrollTop;
+        const { content, padding, border, margin } = bm;
+        const bLeft = content.left - canvasRect.left + sl;
+        const bTop = content.top - canvasRect.top + st;
+        const bW = content.width;
+        const bH = content.height;
+        return {
+            margin: {
+                left: `${bLeft - margin.left}px`,
+                top: `${bTop - margin.top}px`,
+                width: `${bW + margin.left + margin.right}px`,
+                height: `${bH + margin.top + margin.bottom}px`,
+            },
+            border: {
+                left: `${bLeft}px`,
+                top: `${bTop}px`,
+                width: `${bW}px`,
+                height: `${bH}px`,
+            },
+            padding: {
+                left: `${bLeft + border.left}px`,
+                top: `${bTop + border.top}px`,
+                width: `${bW - border.left - border.right}px`,
+                height: `${bH - border.top - border.bottom}px`,
+            },
+            content: {
+                left: `${bLeft + border.left + padding.left}px`,
+                top: `${bTop + border.top + padding.top}px`,
+                width: `${bW - border.left - border.right - padding.left - padding.right}px`,
+                height: `${bH - border.top - border.bottom - padding.top - padding.bottom}px`,
+            },
+        };
+    }, ...(ngDevMode ? [{ debugName: "boxStyles" }] : []));
+    contentSize = computed(() => {
+        const bm = this.stateService.hoveredBoxModel();
+        if (!bm)
+            return '';
+        const { content, border, padding } = bm;
+        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" }] : []));
+    labelMargin(side) {
+        const bm = this.stateService.hoveredBoxModel();
+        if (!bm)
+            return '';
+        const v = bm.margin[side];
+        return v === 0 ? '' : `${v}px`;
+    }
+    labelPadding(side) {
+        const bm = this.stateService.hoveredBoxModel();
+        if (!bm)
+            return '';
+        const v = bm.padding[side];
+        return v === 0 ? '' : `${v}px`;
+    }
+    constructor() {
+        this.destroyRef.onDestroy(() => {
+            this.stateService.hoveredBoxModel.set(null);
+        });
+        afterNextRender(() => {
+            const canvas = this.el.nativeElement.parentElement;
+            if (!canvas)
+                return;
+            fromEvent(canvas, 'mousemove')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe((event) => this.handleMouseMove(event));
+            fromEvent(canvas, 'mouseleave')
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.stateService.hoveredBoxModel.set(null));
+        });
+    }
+    handleMouseMove(event) {
+        const renderedEl = this.rendererService.renderedElement();
+        if (!renderedEl) {
+            this.stateService.hoveredBoxModel.set(null);
+            return;
+        }
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        if (!element || !renderedEl.contains(element)) {
+            this.stateService.hoveredBoxModel.set(null);
+            return;
+        }
+        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) {
+            i0.ɵɵconditionalCreate(0, BoxModelOverlayComponent_Conditional_0_Template, 14, 41);
+        } 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 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelOverlayComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-box-model-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    @if (boxStyles(); as styles) {
+      <div class="prism-bm__box prism-bm__box--margin" [style.left]="styles.margin.left" [style.top]="styles.margin.top" [style.width]="styles.margin.width" [style.height]="styles.margin.height">
+        @if (labelMargin('top')) { <span class="prism-bm__label prism-bm__label--top">{{ labelMargin('top') }}</span> }
+        @if (labelMargin('right')) { <span class="prism-bm__label prism-bm__label--right">{{ labelMargin('right') }}</span> }
+        @if (labelMargin('bottom')) { <span class="prism-bm__label prism-bm__label--bottom">{{ labelMargin('bottom') }}</span> }
+        @if (labelMargin('left')) { <span class="prism-bm__label prism-bm__label--left">{{ labelMargin('left') }}</span> }
+      </div>
+      <div class="prism-bm__box prism-bm__box--border" [style.left]="styles.border.left" [style.top]="styles.border.top" [style.width]="styles.border.width" [style.height]="styles.border.height"></div>
+      <div class="prism-bm__box prism-bm__box--padding" [style.left]="styles.padding.left" [style.top]="styles.padding.top" [style.width]="styles.padding.width" [style.height]="styles.padding.height">
+        @if (labelPadding('top')) { <span class="prism-bm__label prism-bm__label--top">{{ labelPadding('top') }}</span> }
+        @if (labelPadding('right')) { <span class="prism-bm__label prism-bm__label--right">{{ labelPadding('right') }}</span> }
+        @if (labelPadding('bottom')) { <span class="prism-bm__label prism-bm__label--bottom">{{ labelPadding('bottom') }}</span> }
+        @if (labelPadding('left')) { <span class="prism-bm__label prism-bm__label--left">{{ labelPadding('left') }}</span> }
+      </div>
+      <div class="prism-bm__box prism-bm__box--content" [style.left]="styles.content.left" [style.top]="styles.content.top" [style.width]="styles.content.width" [style.height]="styles.content.height">
+        <span class="prism-bm__size">{{ contentSize() }}</span>
+      </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 }); })();

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

@@ -0,0 +1,12 @@
+import { BoxModelStateService } from './box-model-state.service.js';
+import type { BoxModelData } from './box-model.types.js';
+import * as i0 from "@angular/core";
+export declare class BoxModelPanelComponent {
+    protected readonly stateService: BoxModelStateService;
+    fmt(value: number): string;
+    contentW(bm: BoxModelData): string;
+    contentH(bm: BoxModelData): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BoxModelPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BoxModelPanelComponent, "prism-box-model-panel", never, {}, {}, never, never, true, never>;
+}
+//# sourceMappingURL=box-model-panel.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-model-panel.component.d.ts","sourceRoot":"","sources":["../src/box-model-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAEzD,qBAiGa,sBAAsB;IACjC,SAAS,CAAC,QAAQ,CAAC,YAAY,uBAAgC;IAE/D,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI1B,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;IAIlC,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;yCAXvB,sBAAsB;2CAAtB,sBAAsB;CAclC"}

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

@@ -0,0 +1,143 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { BoxModelStateService } from './box-model-state.service.js';
+import * as i0 from "@angular/core";
+function BoxModelPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 3)(2, "span", 4);
+    i0.ɵɵtext(3, "margin");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(4, "div", 5)(5, "span", 6);
+    i0.ɵɵtext(6);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(7, "div", 7)(8, "span", 6);
+    i0.ɵɵtext(9);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(10, "div", 8)(11, "span", 4);
+    i0.ɵɵtext(12, "border");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(13, "div", 7)(14, "span", 9);
+    i0.ɵɵtext(15);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(16, "div", 10)(17, "span", 4);
+    i0.ɵɵtext(18, "padding");
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(19, "div", 5)(20, "span", 6);
+    i0.ɵɵtext(21);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(22, "div", 7)(23, "span", 6);
+    i0.ɵɵtext(24);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(25, "div", 11);
+    i0.ɵɵtext(26);
+    i0.ɵɵdomElementEnd();
+    i0.ɵɵdomElementStart(27, "span", 6);
+    i0.ɵɵtext(28);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(29, "span", 6);
+    i0.ɵɵtext(30);
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(31, "span", 9);
+    i0.ɵɵtext(32);
+    i0.ɵɵdomElementEnd()()();
+    i0.ɵɵdomElementStart(33, "span", 6);
+    i0.ɵɵtext(34);
+    i0.ɵɵdomElementEnd()();
+    i0.ɵɵdomElementStart(35, "span", 6);
+    i0.ɵɵtext(36);
+    i0.ɵɵdomElementEnd()()()();
+} if (rf & 2) {
+    const bm_r1 = ctx;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.margin.top));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.margin.left));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.border.left));
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.padding.top));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.padding.left));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", ctx_r1.contentW(bm_r1), " \u00D7 ", ctx_r1.contentH(bm_r1));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.padding.right));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.padding.bottom));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.border.right));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.margin.right));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.margin.bottom));
+} }
+function BoxModelPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵdomElementStart(0, "div", 2);
+    i0.ɵɵtext(1, "Hover over an element to inspect its box model.");
+    i0.ɵɵdomElementEnd();
+} }
+export class BoxModelPanelComponent {
+    stateService = inject(BoxModelStateService);
+    fmt(value) {
+        return value === 0 ? '-' : `${value}`;
+    }
+    contentW(bm) {
+        return String(Math.round(bm.content.width - bm.border.left - bm.border.right - bm.padding.left - bm.padding.right));
+    }
+    contentH(bm) {
+        return String(Math.round(bm.content.height - bm.border.top - bm.border.bottom - bm.padding.top - bm.padding.bottom));
+    }
+    static ɵfac = function BoxModelPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BoxModelPanelComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BoxModelPanelComponent, selectors: [["prism-box-model-panel"]], decls: 3, vars: 1, consts: [[1, "prism-bmp"], [1, "prism-bmp__diagram"], [1, "prism-bmp__empty"], [1, "prism-bmp__region", "prism-bmp__region--margin"], [1, "prism-bmp__region-label"], [1, "prism-bmp__sides"], [1, "prism-bmp__side"], [1, "prism-bmp__inner-row"], [1, "prism-bmp__region", "prism-bmp__region--border"], [1, "prism-bmp__side", "prism-bmp__side--dim"], [1, "prism-bmp__region", "prism-bmp__region--padding"], [1, "prism-bmp__content-box"]], template: function BoxModelPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵdomElementStart(0, "div", 0);
+            i0.ɵɵconditionalCreate(1, BoxModelPanelComponent_Conditional_1_Template, 37, 12, "div", 1)(2, BoxModelPanelComponent_Conditional_2_Template, 2, 0, "div", 2);
+            i0.ɵɵdomElementEnd();
+        } if (rf & 2) {
+            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: 16px;\n      font-family: var(--prism-font-sans, system-ui);\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%] { padding: 6px; border-radius: 4px; position: relative; }\n    .prism-bmp__region--margin[_ngcontent-%COMP%]  { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4); }\n    .prism-bmp__region--border[_ngcontent-%COMP%]  { background: rgba(234, 179, 8, 0.2);   border: 1px solid rgba(234, 179, 8, 0.5); flex: 1; }\n    .prism-bmp__region--padding[_ngcontent-%COMP%] { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); flex: 1; }\n    .prism-bmp__region-label[_ngcontent-%COMP%] {\n      position: absolute;\n      top: 3px;\n      left: 6px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: var(--prism-text-muted, #6b7280);\n      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: monospace;\n      font-size: 11px;\n      color: var(--prism-text, #1f2937);\n      min-width: 28px;\n      text-align: center;\n      padding: 1px 4px;\n    }\n    .prism-bmp__side--dim[_ngcontent-%COMP%] { color: var(--prism-text-muted, #6b7280); }\n    .prism-bmp__content-box[_ngcontent-%COMP%] {\n      flex: 1;\n      text-align: center;\n      font-family: monospace;\n      font-size: 11px;\n      color: var(--prism-text, #1f2937);\n      background: rgba(59, 130, 246, 0.2);\n      border: 1px solid rgba(59, 130, 246, 0.4);\n      border-radius: 3px;\n      padding: 6px 4px;\n    }\n    .prism-bmp__empty[_ngcontent-%COMP%] { color: var(--prism-text-muted, #6b7280); font-size: 13px; }"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'prism-box-model-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div class="prism-bmp">
+      @if (stateService.hoveredBoxModel(); as bm) {
+        <div class="prism-bmp__diagram">
+          <div class="prism-bmp__region prism-bmp__region--margin">
+            <span class="prism-bmp__region-label">margin</span>
+            <div class="prism-bmp__sides">
+              <span class="prism-bmp__side">{{ fmt(bm.margin.top) }}</span>
+              <div class="prism-bmp__inner-row">
+                <span class="prism-bmp__side">{{ fmt(bm.margin.left) }}</span>
+                <div class="prism-bmp__region prism-bmp__region--border">
+                  <span class="prism-bmp__region-label">border</span>
+                  <div class="prism-bmp__inner-row">
+                    <span class="prism-bmp__side prism-bmp__side--dim">{{ fmt(bm.border.left) }}</span>
+                    <div class="prism-bmp__region prism-bmp__region--padding">
+                      <span class="prism-bmp__region-label">padding</span>
+                      <div class="prism-bmp__sides">
+                        <span class="prism-bmp__side">{{ fmt(bm.padding.top) }}</span>
+                        <div class="prism-bmp__inner-row">
+                          <span class="prism-bmp__side">{{ fmt(bm.padding.left) }}</span>
+                          <div class="prism-bmp__content-box">{{ contentW(bm) }} × {{ contentH(bm) }}</div>
+                          <span class="prism-bmp__side">{{ fmt(bm.padding.right) }}</span>
+                        </div>
+                        <span class="prism-bmp__side">{{ fmt(bm.padding.bottom) }}</span>
+                      </div>
+                    </div>
+                    <span class="prism-bmp__side prism-bmp__side--dim">{{ fmt(bm.border.right) }}</span>
+                  </div>
+                </div>
+                <span class="prism-bmp__side">{{ fmt(bm.margin.right) }}</span>
+              </div>
+              <span class="prism-bmp__side">{{ fmt(bm.margin.bottom) }}</span>
+            </div>
+          </div>
+        </div>
+      } @else {
+        <div class="prism-bmp__empty">Hover over an element to inspect its box model.</div>
+      }
+    </div>
+  `, styles: ["\n    :host { display: block; height: 100%; overflow: auto; }\n    .prism-bmp {\n      padding: 16px;\n      font-family: var(--prism-font-sans, system-ui);\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 100%;\n    }\n    .prism-bmp__diagram { width: 100%; max-width: 340px; }\n    .prism-bmp__region { padding: 6px; border-radius: 4px; position: relative; }\n    .prism-bmp__region--margin  { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.4); }\n    .prism-bmp__region--border  { background: rgba(234, 179, 8, 0.2);   border: 1px solid rgba(234, 179, 8, 0.5); flex: 1; }\n    .prism-bmp__region--padding { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.4); flex: 1; }\n    .prism-bmp__region-label {\n      position: absolute;\n      top: 3px;\n      left: 6px;\n      font-size: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      color: var(--prism-text-muted, #6b7280);\n      opacity: 0.8;\n    }\n    .prism-bmp__sides { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 14px; }\n    .prism-bmp__inner-row { display: flex; align-items: center; gap: 2px; width: 100%; }\n    .prism-bmp__inner-row > .prism-bmp__region { flex: 1; }\n    .prism-bmp__side {\n      font-family: monospace;\n      font-size: 11px;\n      color: var(--prism-text, #1f2937);\n      min-width: 28px;\n      text-align: center;\n      padding: 1px 4px;\n    }\n    .prism-bmp__side--dim { color: var(--prism-text-muted, #6b7280); }\n    .prism-bmp__content-box {\n      flex: 1;\n      text-align: center;\n      font-family: monospace;\n      font-size: 11px;\n      color: var(--prism-text, #1f2937);\n      background: rgba(59, 130, 246, 0.2);\n      border: 1px solid rgba(59, 130, 246, 0.4);\n      border-radius: 3px;\n      padding: 6px 4px;\n    }\n    .prism-bmp__empty { color: var(--prism-text-muted, #6b7280); font-size: 13px; }\n  "] }]
+    }], null, null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelPanelComponent, { className: "BoxModelPanelComponent", filePath: "box-model-panel.component.ts", lineNumber: 102 }); })();

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

@@ -0,0 +1,3 @@
+import type { NgPrismPlugin } from '@ng-prism/core/plugin';
+export declare function boxModelPlugin(): NgPrismPlugin;
+//# sourceMappingURL=box-model-plugin.d.ts.map

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

@@ -0,0 +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"}

package/dist/box-model-plugin.js

@@ -0,0 +1,14 @@
+export function boxModelPlugin() {
+    return {
+        name: 'box-model',
+        panels: [
+            {
+                id: 'box-model',
+                label: 'Box Model',
+                loadComponent: () => import('./box-model-panel.component.js').then((m) => m.BoxModelPanelComponent),
+                loadOverlayComponent: () => import('./box-model-overlay.component.js').then((m) => m.BoxModelOverlayComponent),
+                position: 'bottom',
+            },
+        ],
+    };
+}

package/dist/box-model-state.service.d.ts

@@ -0,0 +1,8 @@
+import type { BoxModelData } from './box-model.types.js';
+import * as i0 from "@angular/core";
+export declare class BoxModelStateService {
+    readonly hoveredBoxModel: import("@angular/core").WritableSignal<BoxModelData | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BoxModelStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<BoxModelStateService>;
+}
+//# sourceMappingURL=box-model-state.service.d.ts.map

package/dist/box-model-state.service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-model-state.service.d.ts","sourceRoot":"","sources":["../src/box-model-state.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAEzD,qBACa,oBAAoB;IAC/B,QAAQ,CAAC,eAAe,8DAAqC;yCADlD,oBAAoB;6CAApB,oBAAoB;CAEhC"}

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

@@ -0,0 +1,11 @@
+import { Injectable, signal } from '@angular/core';
+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' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelStateService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], null, null); })();

package/dist/box-model-utils.d.ts

@@ -0,0 +1,3 @@
+import type { BoxModelData } from './box-model.types.js';
+export declare function getBoxModel(element: Element): BoxModelData;
+//# sourceMappingURL=box-model-utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-model-utils.d.ts","sourceRoot":"","sources":["../src/box-model-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAY,MAAM,sBAAsB,CAAC;AAcnE,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,YAAY,CAS1D"}

package/dist/box-model-utils.js

@@ -0,0 +1,18 @@
+function parseSides(style, props) {
+    return {
+        top: parseFloat(style.getPropertyValue(props[0])) || 0,
+        right: parseFloat(style.getPropertyValue(props[1])) || 0,
+        bottom: parseFloat(style.getPropertyValue(props[2])) || 0,
+        left: parseFloat(style.getPropertyValue(props[3])) || 0,
+    };
+}
+export function getBoxModel(element) {
+    const style = window.getComputedStyle(element);
+    return {
+        element,
+        content: element.getBoundingClientRect(),
+        padding: parseSides(style, ['padding-top', 'padding-right', 'padding-bottom', 'padding-left']),
+        border: parseSides(style, ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width']),
+        margin: parseSides(style, ['margin-top', 'margin-right', 'margin-bottom', 'margin-left']),
+    };
+}

package/dist/box-model.types.d.ts

@@ -0,0 +1,14 @@
+export interface BoxSides {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface BoxModelData {
+    element: Element;
+    content: DOMRect;
+    padding: BoxSides;
+    border: BoxSides;
+    margin: BoxSides;
+}
+//# sourceMappingURL=box-model.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box-model.types.d.ts","sourceRoot":"","sources":["../src/box-model.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CAClB"}

package/dist/box-model.types.js

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

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { boxModelPlugin } from './box-model-plugin.js';
+export type { BoxModelData, BoxSides } from './box-model.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { boxModelPlugin } from './box-model-plugin.js';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@ng-prism/plugin-box-model",
+  "version": "21.0.0",
+  "description": "CSS box model inspector for ng-prism.",
+  "keywords": [
+    "@ng-prism/core",
+    "box-model",
+    "inspector",
+    "plugin",
+    "angular",
+    "styleguide"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!**/*.tsbuildinfo"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=20.0.0",
+    "rxjs": ">=7.0.0",
+    "@ng-prism/core": ">=21.0.0"
+  },
+  "devDependencies": {
+    "@ng-prism/core": "*"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dyingangel666/ng-prism.git",
+    "directory": "packages/plugin-box-model"
+  },
+  "homepage": "https://dyingangel666.github.io/ng-prism/",
+  "bugs": "https://github.com/dyingangel666/ng-prism/issues"
+}