@ng-prism/plugin-box-model 22.5.0 → 22.7.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/box-model-panel.component.d.ts +2 -0
- package/dist/box-model-panel.component.d.ts.map +1 -1
- package/dist/box-model-panel.component.js +12 -6
- package/dist/box-model-plugin.d.ts.map +1 -1
- package/dist/box-model-plugin.js +0 -1
- package/dist/box-model-utils.d.ts +2 -0
- package/dist/box-model-utils.d.ts.map +1 -1
- package/dist/box-model-utils.js +4 -0
- package/package.json +2 -2
|
@@ -5,6 +5,8 @@ export declare class BoxModelPanelComponent {
|
|
|
5
5
|
protected readonly stateService: BoxModelStateService;
|
|
6
6
|
readonly activeComponent: import("@angular/core").InputSignal<unknown>;
|
|
7
7
|
fmt(value: number): string;
|
|
8
|
+
/** The outer size and the content size, for the diagram's tooltip. */
|
|
9
|
+
sizeTitle(bm: BoxModelData): string;
|
|
8
10
|
contentW(bm: BoxModelData): string;
|
|
9
11
|
contentH(bm: BoxModelData): string;
|
|
10
12
|
static ɵfac: i0.ɵɵFactoryDeclaration<BoxModelPanelComponent, never>;
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAEzD,qBAOa,sBAAsB;IAC/B,SAAS,CAAC,QAAQ,CAAC,YAAY,uBAAgC;IAE/D,QAAQ,CAAC,eAAe,+CAAwB;IAEhD,GAAG,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAI1B,sEAAsE;IACtE,SAAS,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;IAInC,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;IAIlC,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;yCAlBzB,sBAAsB;2CAAtB,sBAAsB;CAqBlC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ChangeDetectionStrategy, Component, inject, input } from '@angular/core';
|
|
2
2
|
import { BoxModelStateService } from './box-model-state.service.js';
|
|
3
|
+
import { formatSide } from './box-model-utils.js';
|
|
3
4
|
import * as i0 from "@angular/core";
|
|
4
5
|
function BoxModelPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
5
6
|
i0.ɵɵdomElementStart(0, "div", 1)(1, "div", 3)(2, "span", 4);
|
|
@@ -47,6 +48,7 @@ function BoxModelPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
47
48
|
} if (rf & 2) {
|
|
48
49
|
const bm_r1 = ctx;
|
|
49
50
|
const ctx_r1 = i0.ɵɵnextContext();
|
|
51
|
+
i0.ɵɵdomProperty("title", ctx_r1.sizeTitle(bm_r1));
|
|
50
52
|
i0.ɵɵadvance(6);
|
|
51
53
|
i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.margin.top));
|
|
52
54
|
i0.ɵɵadvance(3);
|
|
@@ -80,7 +82,11 @@ export class BoxModelPanelComponent {
|
|
|
80
82
|
activeComponent = input(null, /* @ts-ignore */
|
|
81
83
|
...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
|
|
82
84
|
fmt(value) {
|
|
83
|
-
return value
|
|
85
|
+
return formatSide(value);
|
|
86
|
+
}
|
|
87
|
+
/** The outer size and the content size, for the diagram's tooltip. */
|
|
88
|
+
sizeTitle(bm) {
|
|
89
|
+
return `Border box ${Math.round(bm.content.width)} × ${Math.round(bm.content.height)} · content ${this.contentW(bm)} × ${this.contentH(bm)}`;
|
|
84
90
|
}
|
|
85
91
|
contentW(bm) {
|
|
86
92
|
return String(Math.round(bm.content.width - bm.border.left - bm.border.right - bm.padding.left - bm.padding.right));
|
|
@@ -89,18 +95,18 @@ export class BoxModelPanelComponent {
|
|
|
89
95
|
return String(Math.round(bm.content.height - bm.border.top - bm.border.bottom - bm.padding.top - bm.padding.bottom));
|
|
90
96
|
}
|
|
91
97
|
static ɵfac = function BoxModelPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BoxModelPanelComponent)(); };
|
|
92
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BoxModelPanelComponent, selectors: [["prism-box-model-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, 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) {
|
|
98
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BoxModelPanelComponent, selectors: [["prism-box-model-panel"]], inputs: { activeComponent: [1, "activeComponent"] }, decls: 3, vars: 1, consts: [[1, "prism-bmp"], [1, "prism-bmp__diagram", 3, "title"], [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) {
|
|
93
99
|
i0.ɵɵdomElementStart(0, "div", 0);
|
|
94
|
-
i0.ɵɵconditionalCreate(1, BoxModelPanelComponent_Conditional_1_Template, 37,
|
|
100
|
+
i0.ɵɵconditionalCreate(1, BoxModelPanelComponent_Conditional_1_Template, 37, 13, "div", 1)(2, BoxModelPanelComponent_Conditional_2_Template, 2, 0, "div", 2);
|
|
95
101
|
i0.ɵɵdomElementEnd();
|
|
96
102
|
} if (rf & 2) {
|
|
97
103
|
let tmp_0_0;
|
|
98
104
|
i0.ɵɵadvance();
|
|
99
105
|
i0.ɵɵconditional((tmp_0_0 = ctx.stateService.hoveredBoxModel()) ? 1 : 2, tmp_0_0);
|
|
100
|
-
} }, styles: ["[_nghost-%COMP%] {\n display: block;\n height: 100%;\n overflow: auto;\n}\n\n.prism-bmp[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100%;\n padding:
|
|
106
|
+
} }, styles: ["[_nghost-%COMP%] {\n \n\n --%NS%prism-bm-margin: #fb923c;\n --%NS%prism-bm-border: #fde047;\n --%NS%prism-bm-padding: #4ade80;\n --%NS%prism-bm-content: #60a5fa;\n\n display: block;\n height: 100%;\n overflow: auto;\n}\n\nhtml[data-theme='light'][_nghost-%COMP%], html[data-theme='light'] [_nghost-%COMP%] {\n --%NS%prism-bm-margin: #9a5200;\n --%NS%prism-bm-border: #7a6300;\n --%NS%prism-bm-padding: #15803d;\n --%NS%prism-bm-content: #1d4ed8;\n}\n\n.prism-bmp[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100%;\n padding: 16px 18px;\n font-family: var(--%NS%font-sans);\n font-size: 12px;\n}\n\n.prism-bmp__diagram[_ngcontent-%COMP%] {\n width: 100%;\n max-width: 340px;\n}\n\n.prism-bmp__region[_ngcontent-%COMP%] {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--%NS%font-mono);\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.02em;\n border: 1px dashed;\n}\n\n.prism-bmp__region--margin[_ngcontent-%COMP%] {\n padding: 26px;\n color: var(--%NS%prism-bm-margin);\n background: color-mix(in srgb, var(--%NS%prism-bm-margin) 8%, transparent);\n border-color: color-mix(in srgb, var(--%NS%prism-bm-margin) 70%, transparent);\n}\n\n.prism-bmp__region--border[_ngcontent-%COMP%] {\n flex: 1;\n padding: 14px;\n color: var(--%NS%prism-bm-border);\n background: color-mix(in srgb, var(--%NS%prism-bm-border) 8%, transparent);\n border-color: color-mix(in srgb, var(--%NS%prism-bm-border) 70%, transparent);\n}\n\n.prism-bmp__region--padding[_ngcontent-%COMP%] {\n flex: 1;\n padding: 20px;\n color: var(--%NS%prism-bm-padding);\n background: color-mix(in srgb, var(--%NS%prism-bm-padding) 10%, transparent);\n border-color: color-mix(in srgb, var(--%NS%prism-bm-padding) 70%, transparent);\n}\n\n.prism-bmp__region-label[_ngcontent-%COMP%] {\n position: absolute;\n top: 4px;\n left: 6px;\n font-size: 10px;\n font-weight: 600;\n color: inherit;\n text-transform: none;\n letter-spacing: 0.02em;\n}\n\n.prism-bmp__sides[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n padding-top: 14px;\n}\n\n.prism-bmp__inner-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n align-items: center;\n width: 100%;\n}\n\n.prism-bmp__inner-row[_ngcontent-%COMP%] > .prism-bmp__region[_ngcontent-%COMP%] {\n flex: 1;\n}\n\n.prism-bmp__side[_ngcontent-%COMP%] {\n min-width: 28px;\n padding: 1px 4px;\n font-family: var(--%NS%font-mono);\n font-size: 10px;\n color: var(--%NS%prism-text-muted);\n text-align: center;\n}\n\n.prism-bmp__side--dim[_ngcontent-%COMP%] {\n color: var(--%NS%prism-text-muted);\n}\n\n.prism-bmp__content-box[_ngcontent-%COMP%] {\n flex: 1;\n padding: 22px 36px;\n font-family: var(--%NS%font-mono);\n font-size: 12px;\n font-weight: 500;\n color: var(--%NS%prism-bm-content);\n text-align: center;\n text-transform: none;\n letter-spacing: 0;\n background: color-mix(in srgb, var(--%NS%prism-bm-content) 12%, transparent);\n border: 1px solid var(--%NS%prism-bm-content);\n border-radius: var(--%NS%radius-xs);\n}\n\n.prism-bmp__empty[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--%NS%prism-text-muted);\n}"] });
|
|
101
107
|
}
|
|
102
108
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelPanelComponent, [{
|
|
103
109
|
type: Component,
|
|
104
|
-
args: [{ selector: 'prism-box-model-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"prism-bmp\">\n @if (stateService.hoveredBoxModel(); as bm) {\n <div
|
|
110
|
+
args: [{ selector: 'prism-box-model-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"prism-bmp\">\n @if (stateService.hoveredBoxModel(); as bm) {\n <div\n class=\"prism-bmp__diagram\"\n [title]=\"sizeTitle(bm)\">\n <div class=\"prism-bmp__region prism-bmp__region--margin\">\n <span class=\"prism-bmp__region-label\">margin</span>\n <div class=\"prism-bmp__sides\">\n <span class=\"prism-bmp__side\">{{ fmt(bm.margin.top) }}</span>\n <div class=\"prism-bmp__inner-row\">\n <span class=\"prism-bmp__side\">{{ fmt(bm.margin.left) }}</span>\n <div class=\"prism-bmp__region prism-bmp__region--border\">\n <span class=\"prism-bmp__region-label\">border</span>\n <div class=\"prism-bmp__inner-row\">\n <span class=\"prism-bmp__side prism-bmp__side--dim\">{{ fmt(bm.border.left) }}</span>\n <div class=\"prism-bmp__region prism-bmp__region--padding\">\n <span class=\"prism-bmp__region-label\">padding</span>\n <div class=\"prism-bmp__sides\">\n <span class=\"prism-bmp__side\">{{ fmt(bm.padding.top) }}</span>\n <div class=\"prism-bmp__inner-row\">\n <span class=\"prism-bmp__side\">{{ fmt(bm.padding.left) }}</span>\n <div class=\"prism-bmp__content-box\"> {{ contentW(bm) }} \u00D7 {{ contentH(bm) }} </div>\n <span class=\"prism-bmp__side\">{{ fmt(bm.padding.right) }}</span>\n </div>\n <span class=\"prism-bmp__side\">{{ fmt(bm.padding.bottom) }}</span>\n </div>\n </div>\n <span class=\"prism-bmp__side prism-bmp__side--dim\">{{ fmt(bm.border.right) }}</span>\n </div>\n </div>\n <span class=\"prism-bmp__side\">{{ fmt(bm.margin.right) }}</span>\n </div>\n <span class=\"prism-bmp__side\">{{ fmt(bm.margin.bottom) }}</span>\n </div>\n </div>\n </div>\n } @else {\n <div class=\"prism-bmp__empty\"> Hover over an element to inspect its box model. </div>\n }\n</div>\n", styles: [":host {\n /* The DevTools convention for the four layers, as plugin-local colours:\n each holds 4.5:1 for its labels on its own tint. */\n --prism-bm-margin: #fb923c;\n --prism-bm-border: #fde047;\n --prism-bm-padding: #4ade80;\n --prism-bm-content: #60a5fa;\n\n display: block;\n height: 100%;\n overflow: auto;\n}\n\n:host-context(html[data-theme='light']) {\n --prism-bm-margin: #9a5200;\n --prism-bm-border: #7a6300;\n --prism-bm-padding: #15803d;\n --prism-bm-content: #1d4ed8;\n}\n\n.prism-bmp {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100%;\n padding: 16px 18px;\n font-family: var(--font-sans);\n font-size: 12px;\n}\n\n.prism-bmp__diagram {\n width: 100%;\n max-width: 340px;\n}\n\n.prism-bmp__region {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-mono);\n font-size: 10px;\n font-weight: 600;\n letter-spacing: 0.02em;\n border: 1px dashed;\n}\n\n.prism-bmp__region--margin {\n padding: 26px;\n color: var(--prism-bm-margin);\n background: color-mix(in srgb, var(--prism-bm-margin) 8%, transparent);\n border-color: color-mix(in srgb, var(--prism-bm-margin) 70%, transparent);\n}\n\n.prism-bmp__region--border {\n flex: 1;\n padding: 14px;\n color: var(--prism-bm-border);\n background: color-mix(in srgb, var(--prism-bm-border) 8%, transparent);\n border-color: color-mix(in srgb, var(--prism-bm-border) 70%, transparent);\n}\n\n.prism-bmp__region--padding {\n flex: 1;\n padding: 20px;\n color: var(--prism-bm-padding);\n background: color-mix(in srgb, var(--prism-bm-padding) 10%, transparent);\n border-color: color-mix(in srgb, var(--prism-bm-padding) 70%, transparent);\n}\n\n.prism-bmp__region-label {\n position: absolute;\n top: 4px;\n left: 6px;\n font-size: 10px;\n font-weight: 600;\n color: inherit;\n text-transform: none;\n letter-spacing: 0.02em;\n}\n\n.prism-bmp__sides {\n display: flex;\n flex-direction: column;\n gap: 2px;\n align-items: center;\n padding-top: 14px;\n}\n\n.prism-bmp__inner-row {\n display: flex;\n gap: 2px;\n align-items: center;\n width: 100%;\n}\n\n.prism-bmp__inner-row > .prism-bmp__region {\n flex: 1;\n}\n\n.prism-bmp__side {\n min-width: 28px;\n padding: 1px 4px;\n font-family: var(--font-mono);\n font-size: 10px;\n color: var(--prism-text-muted);\n text-align: center;\n}\n\n.prism-bmp__side--dim {\n color: var(--prism-text-muted);\n}\n\n.prism-bmp__content-box {\n flex: 1;\n padding: 22px 36px;\n font-family: var(--font-mono);\n font-size: 12px;\n font-weight: 500;\n color: var(--prism-bm-content);\n text-align: center;\n text-transform: none;\n letter-spacing: 0;\n background: color-mix(in srgb, var(--prism-bm-content) 12%, transparent);\n border: 1px solid var(--prism-bm-content);\n border-radius: var(--radius-xs);\n}\n\n.prism-bmp__empty {\n font-size: 13px;\n color: var(--prism-text-muted);\n}\n"] }]
|
|
105
111
|
}], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
|
|
106
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelPanelComponent, { className: "BoxModelPanelComponent", filePath: "box-model-panel.component.ts", lineNumber:
|
|
112
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelPanelComponent, { className: "BoxModelPanelComponent", filePath: "box-model-panel.component.ts", lineNumber: 13 }); })();
|
|
@@ -1 +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;AAG3D,wBAAgB,cAAc,IAAI,aAAa,
|
|
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;AAG3D,wBAAgB,cAAc,IAAI,aAAa,CAc9C"}
|
package/dist/box-model-plugin.js
CHANGED
|
@@ -9,7 +9,6 @@ export function boxModelPlugin() {
|
|
|
9
9
|
icon: 'box',
|
|
10
10
|
loadComponent: () => import('./box-model-panel.component.js').then((m) => m.BoxModelPanelComponent),
|
|
11
11
|
loadOverlayComponent: () => import('./box-model-overlay.component.js').then((m) => m.BoxModelOverlayComponent),
|
|
12
|
-
position: 'bottom',
|
|
13
12
|
providers: [BoxModelStateService]
|
|
14
13
|
}
|
|
15
14
|
]
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
import type { BoxModelData } from './box-model.types.js';
|
|
2
2
|
export declare function getBoxModel(element: Element): BoxModelData;
|
|
3
|
+
/** One side of the box model as the panel prints it: the figure, "0" included, to two decimals at most. */
|
|
4
|
+
export declare function formatSide(value: number): string;
|
|
3
5
|
//# sourceMappingURL=box-model-utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
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;AAWnE,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,YAAY,CAU1D"}
|
|
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;AAWnE,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,YAAY,CAU1D;AAED,2GAA2G;AAC3G,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD"}
|
package/dist/box-model-utils.js
CHANGED
|
@@ -16,3 +16,7 @@ export function getBoxModel(element) {
|
|
|
16
16
|
margin: parseSides(style, ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'])
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
+
/** One side of the box model as the panel prints it: the figure, "0" included, to two decimals at most. */
|
|
20
|
+
export function formatSide(value) {
|
|
21
|
+
return String(Math.round(value * 100) / 100);
|
|
22
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-prism/plugin-box-model",
|
|
3
|
-
"version": "22.
|
|
3
|
+
"version": "22.7.0-beta.0",
|
|
4
4
|
"description": "CSS box model inspector for ng-prism.",
|
|
5
5
|
"ng-add": {
|
|
6
6
|
"save": "devDependencies"
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"peerDependencies": {
|
|
36
36
|
"@angular/core": ">=20.0.0",
|
|
37
37
|
"rxjs": ">=7.0.0",
|
|
38
|
-
"@ng-prism/core": "^22.
|
|
38
|
+
"@ng-prism/core": "^22.7.0-0",
|
|
39
39
|
"@angular-devkit/schematics": ">=20.0.0"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|