@ng-prism/plugin-box-model 21.4.4 → 21.5.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.
|
@@ -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;AACpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;;AAEzD,
|
|
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,qBAuHa,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;IAYlC,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;yCAnBvB,sBAAsB;2CAAtB,sBAAsB;CA8BlC"}
|
|
@@ -58,7 +58,7 @@ function BoxModelPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
58
58
|
i0.ɵɵadvance(3);
|
|
59
59
|
i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.padding.left));
|
|
60
60
|
i0.ɵɵadvance(2);
|
|
61
|
-
i0.ɵɵtextInterpolate2("", ctx_r1.contentW(bm_r1), " \u00D7 ", ctx_r1.contentH(bm_r1));
|
|
61
|
+
i0.ɵɵtextInterpolate2(" ", ctx_r1.contentW(bm_r1), " \u00D7 ", ctx_r1.contentH(bm_r1), " ");
|
|
62
62
|
i0.ɵɵadvance(2);
|
|
63
63
|
i0.ɵɵtextInterpolate(ctx_r1.fmt(bm_r1.padding.right));
|
|
64
64
|
i0.ɵɵadvance(2);
|
|
@@ -72,7 +72,7 @@ function BoxModelPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
|
72
72
|
} }
|
|
73
73
|
function BoxModelPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
|
|
74
74
|
i0.ɵɵdomElementStart(0, "div", 2);
|
|
75
|
-
i0.ɵɵtext(1, "Hover over an element to inspect its box model.");
|
|
75
|
+
i0.ɵɵtext(1, " Hover over an element to inspect its box model. ");
|
|
76
76
|
i0.ɵɵdomElementEnd();
|
|
77
77
|
} }
|
|
78
78
|
export class BoxModelPanelComponent {
|
|
@@ -81,10 +81,18 @@ export class BoxModelPanelComponent {
|
|
|
81
81
|
return value === 0 ? '-' : `${value}`;
|
|
82
82
|
}
|
|
83
83
|
contentW(bm) {
|
|
84
|
-
return String(Math.round(bm.content.width -
|
|
84
|
+
return String(Math.round(bm.content.width -
|
|
85
|
+
bm.border.left -
|
|
86
|
+
bm.border.right -
|
|
87
|
+
bm.padding.left -
|
|
88
|
+
bm.padding.right));
|
|
85
89
|
}
|
|
86
90
|
contentH(bm) {
|
|
87
|
-
return String(Math.round(bm.content.height -
|
|
91
|
+
return String(Math.round(bm.content.height -
|
|
92
|
+
bm.border.top -
|
|
93
|
+
bm.border.bottom -
|
|
94
|
+
bm.padding.top -
|
|
95
|
+
bm.padding.bottom));
|
|
88
96
|
}
|
|
89
97
|
static ɵfac = function BoxModelPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BoxModelPanelComponent)(); };
|
|
90
98
|
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) {
|
|
@@ -95,49 +103,65 @@ export class BoxModelPanelComponent {
|
|
|
95
103
|
let tmp_0_0;
|
|
96
104
|
i0.ɵɵadvance();
|
|
97
105
|
i0.ɵɵconditional((tmp_0_0 = ctx.stateService.hoveredBoxModel()) ? 1 : 2, tmp_0_0);
|
|
98
|
-
} }, styles: ["[_nghost-%COMP%] { display: block; height: 100%; overflow: auto; }\n .prism-bmp[_ngcontent-%COMP%] {\n padding:
|
|
106
|
+
} }, 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 });
|
|
99
107
|
}
|
|
100
108
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelPanelComponent, [{
|
|
101
109
|
type: Component,
|
|
102
110
|
args: [{ selector: 'prism-box-model-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
103
111
|
<div class="prism-bmp">
|
|
104
112
|
@if (stateService.hoveredBoxModel(); as bm) {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
113
|
+
<div class="prism-bmp__diagram">
|
|
114
|
+
<div class="prism-bmp__region prism-bmp__region--margin">
|
|
115
|
+
<span class="prism-bmp__region-label">margin</span>
|
|
116
|
+
<div class="prism-bmp__sides">
|
|
117
|
+
<span class="prism-bmp__side">{{ fmt(bm.margin.top) }}</span>
|
|
118
|
+
<div class="prism-bmp__inner-row">
|
|
119
|
+
<span class="prism-bmp__side">{{ fmt(bm.margin.left) }}</span>
|
|
120
|
+
<div class="prism-bmp__region prism-bmp__region--border">
|
|
121
|
+
<span class="prism-bmp__region-label">border</span>
|
|
122
|
+
<div class="prism-bmp__inner-row">
|
|
123
|
+
<span class="prism-bmp__side prism-bmp__side--dim">{{
|
|
124
|
+
fmt(bm.border.left)
|
|
125
|
+
}}</span>
|
|
126
|
+
<div class="prism-bmp__region prism-bmp__region--padding">
|
|
127
|
+
<span class="prism-bmp__region-label">padding</span>
|
|
128
|
+
<div class="prism-bmp__sides">
|
|
129
|
+
<span class="prism-bmp__side">{{
|
|
130
|
+
fmt(bm.padding.top)
|
|
131
|
+
}}</span>
|
|
132
|
+
<div class="prism-bmp__inner-row">
|
|
133
|
+
<span class="prism-bmp__side">{{
|
|
134
|
+
fmt(bm.padding.left)
|
|
135
|
+
}}</span>
|
|
136
|
+
<div class="prism-bmp__content-box">
|
|
137
|
+
{{ contentW(bm) }} × {{ contentH(bm) }}
|
|
124
138
|
</div>
|
|
125
|
-
<span class="prism-bmp__side">{{
|
|
139
|
+
<span class="prism-bmp__side">{{
|
|
140
|
+
fmt(bm.padding.right)
|
|
141
|
+
}}</span>
|
|
126
142
|
</div>
|
|
143
|
+
<span class="prism-bmp__side">{{
|
|
144
|
+
fmt(bm.padding.bottom)
|
|
145
|
+
}}</span>
|
|
127
146
|
</div>
|
|
128
|
-
<span class="prism-bmp__side prism-bmp__side--dim">{{ fmt(bm.border.right) }}</span>
|
|
129
147
|
</div>
|
|
148
|
+
<span class="prism-bmp__side prism-bmp__side--dim">{{
|
|
149
|
+
fmt(bm.border.right)
|
|
150
|
+
}}</span>
|
|
130
151
|
</div>
|
|
131
|
-
<span class="prism-bmp__side">{{ fmt(bm.margin.right) }}</span>
|
|
132
152
|
</div>
|
|
133
|
-
<span class="prism-bmp__side">{{ fmt(bm.margin.
|
|
153
|
+
<span class="prism-bmp__side">{{ fmt(bm.margin.right) }}</span>
|
|
134
154
|
</div>
|
|
155
|
+
<span class="prism-bmp__side">{{ fmt(bm.margin.bottom) }}</span>
|
|
135
156
|
</div>
|
|
136
157
|
</div>
|
|
158
|
+
</div>
|
|
137
159
|
} @else {
|
|
138
|
-
|
|
160
|
+
<div class="prism-bmp__empty">
|
|
161
|
+
Hover over an element to inspect its box model.
|
|
162
|
+
</div>
|
|
139
163
|
}
|
|
140
164
|
</div>
|
|
141
|
-
`, styles: ["\n :host { display: block; height: 100%; overflow: auto; }\n .prism-bmp {\n padding:
|
|
165
|
+
`, styles: ["\n :host { display: block; height: 100%; overflow: auto; }\n .prism-bmp {\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 { width: 100%; max-width: 340px; }\n .prism-bmp__region {\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 {\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 {\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 {\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 {\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 { 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: 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 { color: var(--prism-text-ghost); }\n .prism-bmp__content-box {\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 { color: var(--prism-text-muted); font-size: 13px; }\n "] }]
|
|
142
166
|
}], null, null); })();
|
|
143
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelPanelComponent, { className: "BoxModelPanelComponent", filePath: "box-model-panel.component.ts", lineNumber:
|
|
167
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelPanelComponent, { className: "BoxModelPanelComponent", filePath: "box-model-panel.component.ts", lineNumber: 124 }); })();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-prism/plugin-box-model",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.5.0",
|
|
4
4
|
"description": "CSS box model inspector for ng-prism.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"@ng-prism/core",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"!**/*.tsbuildinfo"
|
|
29
29
|
],
|
|
30
30
|
"peerDependencies": {
|
|
31
|
-
"@angular/core": ">=
|
|
31
|
+
"@angular/core": ">=21.0.0",
|
|
32
32
|
"rxjs": ">=7.0.0",
|
|
33
33
|
"@ng-prism/core": ">=21.0.0"
|
|
34
34
|
},
|