@ng-prism/plugin-box-model 22.2.1 → 22.3.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/README.md +8 -8
- package/dist/box-model-overlay.component.d.ts.map +1 -1
- package/dist/box-model-overlay.component.js +10 -29
- package/dist/box-model-panel.component.d.ts.map +1 -1
- package/dist/box-model-panel.component.js +5 -68
- package/dist/box-model-plugin.d.ts.map +1 -1
- package/dist/box-model-plugin.js +3 -3
- package/dist/box-model-state.service.d.ts.map +1 -1
- package/dist/box-model-utils.d.ts.map +1 -1
- package/dist/box-model-utils.js +2 -2
- package/dist/box-model.types.d.ts.map +1 -1
- package/dist/schematics/ng-add/index.d.ts.map +1 -1
- package/dist/schematics/ng-add/index.js +2 -2
- package/dist/schematics/ng-add/schema.d.ts.map +1 -1
- package/package.json +3 -2
- package/schematics/collection.json +7 -7
- package/schematics/ng-add/schema.json +14 -14
package/README.md
CHANGED
|
@@ -12,10 +12,10 @@ npm install @ng-prism/plugin-box-model
|
|
|
12
12
|
|
|
13
13
|
### Peer Dependencies
|
|
14
14
|
|
|
15
|
-
| Package
|
|
16
|
-
|
|
15
|
+
| Package | Version |
|
|
16
|
+
| ---------------- | ---------- |
|
|
17
17
|
| `@ng-prism/core` | `>=21.0.0` |
|
|
18
|
-
| `@angular/core`
|
|
18
|
+
| `@angular/core` | `>=20.0.0` |
|
|
19
19
|
|
|
20
20
|
## Setup
|
|
21
21
|
|
|
@@ -25,7 +25,7 @@ import { defineConfig } from '@ng-prism/core/config';
|
|
|
25
25
|
import { boxModelPlugin } from '@ng-prism/plugin-box-model';
|
|
26
26
|
|
|
27
27
|
export default defineConfig({
|
|
28
|
-
|
|
28
|
+
plugins: [boxModelPlugin()]
|
|
29
29
|
});
|
|
30
30
|
```
|
|
31
31
|
|
|
@@ -33,10 +33,10 @@ export default defineConfig({
|
|
|
33
33
|
|
|
34
34
|
- Adds a **Box Model** panel to the styleguide
|
|
35
35
|
- Shows an interactive overlay on the rendered component displaying:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
- Content dimensions (width x height)
|
|
37
|
+
- Padding values (top, right, bottom, left)
|
|
38
|
+
- Border widths
|
|
39
|
+
- Margin values
|
|
40
40
|
- Updates live when inputs change via the Controls panel
|
|
41
41
|
- Color-coded layers (content, padding, border, margin)
|
|
42
42
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box-model-overlay.component.d.ts","sourceRoot":"","sources":["../src/box-model-overlay.component.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"box-model-overlay.component.d.ts","sourceRoot":"","sources":["../src/box-model-overlay.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;;AAK3D,UAAU,QAAQ;IACd,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,SAAS;IACf,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,OAAO,EAAE,QAAQ,CAAC;CACrB;AAED,qBAOa,wBAAwB;IACjC,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,mDA0Cf;IAEH,QAAQ,CAAC,WAAW,yCASjB;IAEH,WAAW,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;IAS9D,YAAY,CAAC,IAAI,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM;;IA6B/D,OAAO,CAAC,eAAe;yCAnGd,wBAAwB;2CAAxB,wBAAwB;CAoHpC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { afterNextRender, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, input
|
|
1
|
+
import { afterNextRender, ChangeDetectionStrategy, Component, computed, DestroyRef, ElementRef, inject, input } from '@angular/core';
|
|
2
2
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
3
3
|
import { fromEvent } from 'rxjs';
|
|
4
|
-
import { getBoxModel } from './box-model-utils.js';
|
|
5
4
|
import { BoxModelStateService } from './box-model-state.service.js';
|
|
5
|
+
import { getBoxModel } from './box-model-utils.js';
|
|
6
6
|
import * as i0 from "@angular/core";
|
|
7
7
|
function BoxModelOverlayComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
|
|
8
8
|
i0.ɵɵdomElementStart(0, "span", 1);
|
|
@@ -146,26 +146,26 @@ export class BoxModelOverlayComponent {
|
|
|
146
146
|
left: `${bLeft - margin.left}px`,
|
|
147
147
|
top: `${bTop - margin.top}px`,
|
|
148
148
|
width: `${bW + margin.left + margin.right}px`,
|
|
149
|
-
height: `${bH + margin.top + margin.bottom}px
|
|
149
|
+
height: `${bH + margin.top + margin.bottom}px`
|
|
150
150
|
},
|
|
151
151
|
border: {
|
|
152
152
|
left: `${bLeft}px`,
|
|
153
153
|
top: `${bTop}px`,
|
|
154
154
|
width: `${bW}px`,
|
|
155
|
-
height: `${bH}px
|
|
155
|
+
height: `${bH}px`
|
|
156
156
|
},
|
|
157
157
|
padding: {
|
|
158
158
|
left: `${bLeft + border.left}px`,
|
|
159
159
|
top: `${bTop + border.top}px`,
|
|
160
160
|
width: `${bW - border.left - border.right}px`,
|
|
161
|
-
height: `${bH - border.top - border.bottom}px
|
|
161
|
+
height: `${bH - border.top - border.bottom}px`
|
|
162
162
|
},
|
|
163
163
|
content: {
|
|
164
164
|
left: `${bLeft + border.left + padding.left}px`,
|
|
165
165
|
top: `${bTop + border.top + padding.top}px`,
|
|
166
166
|
width: `${bW - border.left - border.right - padding.left - padding.right}px`,
|
|
167
|
-
height: `${bH - border.top - border.bottom - padding.top - padding.bottom}px
|
|
168
|
-
}
|
|
167
|
+
height: `${bH - border.top - border.bottom - padding.top - padding.bottom}px`
|
|
168
|
+
}
|
|
169
169
|
};
|
|
170
170
|
}, /* @ts-ignore */
|
|
171
171
|
...(ngDevMode ? [{ debugName: "boxStyles" }] : /* istanbul ignore next */ []));
|
|
@@ -228,29 +228,10 @@ export class BoxModelOverlayComponent {
|
|
|
228
228
|
} if (rf & 2) {
|
|
229
229
|
let tmp_0_0;
|
|
230
230
|
i0.ɵɵconditional((tmp_0_0 = ctx.boxStyles()) ? 0 : -1, tmp_0_0);
|
|
231
|
-
} }, styles: ["[_nghost-%COMP%] {\n
|
|
231
|
+
} }, styles: ["[_nghost-%COMP%] {\n position: absolute;\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.prism-bm__box[_ngcontent-%COMP%] {\n position: absolute;\n box-sizing: border-box;\n}\n\n.prism-bm__box--margin[_ngcontent-%COMP%] {\n outline: 1px solid rgb(245 158 11 / 50%);\n background: rgb(245 158 11 / 20%);\n}\n\n.prism-bm__box--border[_ngcontent-%COMP%] {\n background: rgb(234 179 8 / 30%);\n}\n\n.prism-bm__box--padding[_ngcontent-%COMP%] {\n outline: 1px solid rgb(16 185 129 / 40%);\n background: rgb(16 185 129 / 20%);\n}\n\n.prism-bm__box--content[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(59 130 246 / 25%);\n}\n\n.prism-bm__label[_ngcontent-%COMP%] {\n position: absolute;\n padding: 0 3px;\n font-family: monospace;\n font-size: 10px;\n line-height: 1.4;\n color: #1f2937;\n white-space: nowrap;\n background: rgb(255 255 255 / 80%);\n border-radius: 2px;\n}\n\n.prism-bm__label--top[_ngcontent-%COMP%] {\n top: 2px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.prism-bm__label--bottom[_ngcontent-%COMP%] {\n bottom: 2px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.prism-bm__label--left[_ngcontent-%COMP%] {\n top: 50%;\n left: 2px;\n transform: translateY(-50%);\n}\n\n.prism-bm__label--right[_ngcontent-%COMP%] {\n top: 50%;\n right: 2px;\n transform: translateY(-50%);\n}\n\n.prism-bm__size[_ngcontent-%COMP%] {\n padding: 1px 5px;\n font-family: monospace;\n font-size: 11px;\n color: #1e3a5f;\n white-space: nowrap;\n background: rgb(255 255 255 / 85%);\n border-radius: 3px;\n}"] });
|
|
232
232
|
}
|
|
233
233
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelOverlayComponent, [{
|
|
234
234
|
type: Component,
|
|
235
|
-
args: [{ selector: 'prism-box-model-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
236
|
-
@if (boxStyles(); as styles) {
|
|
237
|
-
<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">
|
|
238
|
-
@if (labelMargin('top')) { <span class="prism-bm__label prism-bm__label--top">{{ labelMargin('top') }}</span> }
|
|
239
|
-
@if (labelMargin('right')) { <span class="prism-bm__label prism-bm__label--right">{{ labelMargin('right') }}</span> }
|
|
240
|
-
@if (labelMargin('bottom')) { <span class="prism-bm__label prism-bm__label--bottom">{{ labelMargin('bottom') }}</span> }
|
|
241
|
-
@if (labelMargin('left')) { <span class="prism-bm__label prism-bm__label--left">{{ labelMargin('left') }}</span> }
|
|
242
|
-
</div>
|
|
243
|
-
<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>
|
|
244
|
-
<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">
|
|
245
|
-
@if (labelPadding('top')) { <span class="prism-bm__label prism-bm__label--top">{{ labelPadding('top') }}</span> }
|
|
246
|
-
@if (labelPadding('right')) { <span class="prism-bm__label prism-bm__label--right">{{ labelPadding('right') }}</span> }
|
|
247
|
-
@if (labelPadding('bottom')) { <span class="prism-bm__label prism-bm__label--bottom">{{ labelPadding('bottom') }}</span> }
|
|
248
|
-
@if (labelPadding('left')) { <span class="prism-bm__label prism-bm__label--left">{{ labelPadding('left') }}</span> }
|
|
249
|
-
</div>
|
|
250
|
-
<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">
|
|
251
|
-
<span class="prism-bm__size">{{ contentSize() }}</span>
|
|
252
|
-
</div>
|
|
253
|
-
}
|
|
254
|
-
`, 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 "] }]
|
|
235
|
+
args: [{ selector: 'prism-box-model-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (boxStyles(); as styles) {\n <div\n class=\"prism-bm__box prism-bm__box--margin\"\n [style.left]=\"styles.margin.left\"\n [style.top]=\"styles.margin.top\"\n [style.width]=\"styles.margin.width\"\n [style.height]=\"styles.margin.height\">\n @if (labelMargin('top')) {\n <span class=\"prism-bm__label prism-bm__label--top\">{{ labelMargin('top') }}</span>\n }\n @if (labelMargin('right')) {\n <span class=\"prism-bm__label prism-bm__label--right\">{{ labelMargin('right') }}</span>\n }\n @if (labelMargin('bottom')) {\n <span class=\"prism-bm__label prism-bm__label--bottom\">{{ labelMargin('bottom') }}</span>\n }\n @if (labelMargin('left')) {\n <span class=\"prism-bm__label prism-bm__label--left\">{{ labelMargin('left') }}</span>\n }\n </div>\n <div\n class=\"prism-bm__box prism-bm__box--border\"\n [style.left]=\"styles.border.left\"\n [style.top]=\"styles.border.top\"\n [style.width]=\"styles.border.width\"\n [style.height]=\"styles.border.height\"></div>\n <div\n class=\"prism-bm__box prism-bm__box--padding\"\n [style.left]=\"styles.padding.left\"\n [style.top]=\"styles.padding.top\"\n [style.width]=\"styles.padding.width\"\n [style.height]=\"styles.padding.height\">\n @if (labelPadding('top')) {\n <span class=\"prism-bm__label prism-bm__label--top\">{{ labelPadding('top') }}</span>\n }\n @if (labelPadding('right')) {\n <span class=\"prism-bm__label prism-bm__label--right\">{{ labelPadding('right') }}</span>\n }\n @if (labelPadding('bottom')) {\n <span class=\"prism-bm__label prism-bm__label--bottom\">{{ labelPadding('bottom') }}</span>\n }\n @if (labelPadding('left')) {\n <span class=\"prism-bm__label prism-bm__label--left\">{{ labelPadding('left') }}</span>\n }\n </div>\n <div\n class=\"prism-bm__box prism-bm__box--content\"\n [style.left]=\"styles.content.left\"\n [style.top]=\"styles.content.top\"\n [style.width]=\"styles.content.width\"\n [style.height]=\"styles.content.height\">\n <span class=\"prism-bm__size\">{{ contentSize() }}</span>\n </div>\n}\n", styles: [":host {\n position: absolute;\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n}\n\n.prism-bm__box {\n position: absolute;\n box-sizing: border-box;\n}\n\n.prism-bm__box--margin {\n outline: 1px solid rgb(245 158 11 / 50%);\n background: rgb(245 158 11 / 20%);\n}\n\n.prism-bm__box--border {\n background: rgb(234 179 8 / 30%);\n}\n\n.prism-bm__box--padding {\n outline: 1px solid rgb(16 185 129 / 40%);\n background: rgb(16 185 129 / 20%);\n}\n\n.prism-bm__box--content {\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgb(59 130 246 / 25%);\n}\n\n.prism-bm__label {\n position: absolute;\n padding: 0 3px;\n font-family: monospace;\n font-size: 10px;\n line-height: 1.4;\n color: #1f2937;\n white-space: nowrap;\n background: rgb(255 255 255 / 80%);\n border-radius: 2px;\n}\n\n.prism-bm__label--top {\n top: 2px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.prism-bm__label--bottom {\n bottom: 2px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.prism-bm__label--left {\n top: 50%;\n left: 2px;\n transform: translateY(-50%);\n}\n\n.prism-bm__label--right {\n top: 50%;\n right: 2px;\n transform: translateY(-50%);\n}\n\n.prism-bm__size {\n padding: 1px 5px;\n font-family: monospace;\n font-size: 11px;\n color: #1e3a5f;\n white-space: nowrap;\n background: rgb(255 255 255 / 85%);\n border-radius: 3px;\n}\n"] }]
|
|
255
236
|
}], () => [], { rendererService: [{ type: i0.Input, args: [{ isSignal: true, alias: "rendererService", required: true }] }] }); })();
|
|
256
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelOverlayComponent, { className: "BoxModelOverlayComponent", filePath: "box-model-overlay.component.ts", lineNumber:
|
|
237
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelOverlayComponent, { className: "BoxModelOverlayComponent", filePath: "box-model-overlay.component.ts", lineNumber: 29 }); })();
|
|
@@ -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,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,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;IAIlC,QAAQ,CAAC,EAAE,EAAE,YAAY,GAAG,MAAM;yCAbzB,sBAAsB;2CAAtB,sBAAsB;CAgBlC"}
|
|
@@ -83,18 +83,10 @@ export class BoxModelPanelComponent {
|
|
|
83
83
|
return value === 0 ? '-' : `${value}`;
|
|
84
84
|
}
|
|
85
85
|
contentW(bm) {
|
|
86
|
-
return String(Math.round(bm.content.width -
|
|
87
|
-
bm.border.left -
|
|
88
|
-
bm.border.right -
|
|
89
|
-
bm.padding.left -
|
|
90
|
-
bm.padding.right));
|
|
86
|
+
return String(Math.round(bm.content.width - bm.border.left - bm.border.right - bm.padding.left - bm.padding.right));
|
|
91
87
|
}
|
|
92
88
|
contentH(bm) {
|
|
93
|
-
return String(Math.round(bm.content.height -
|
|
94
|
-
bm.border.top -
|
|
95
|
-
bm.border.bottom -
|
|
96
|
-
bm.padding.top -
|
|
97
|
-
bm.padding.bottom));
|
|
89
|
+
return String(Math.round(bm.content.height - bm.border.top - bm.border.bottom - bm.padding.top - bm.padding.bottom));
|
|
98
90
|
}
|
|
99
91
|
static ɵfac = function BoxModelPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BoxModelPanelComponent)(); };
|
|
100
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) {
|
|
@@ -105,65 +97,10 @@ export class BoxModelPanelComponent {
|
|
|
105
97
|
let tmp_0_0;
|
|
106
98
|
i0.ɵɵadvance();
|
|
107
99
|
i0.ɵɵconditional((tmp_0_0 = ctx.stateService.hoveredBoxModel()) ? 1 : 2, tmp_0_0);
|
|
108
|
-
} }, styles: ["[_nghost-%COMP%] {
|
|
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: 24px;\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 text-transform: uppercase;\n letter-spacing: 0.08em;\n border: 1px dashed;\n}\n\n.prism-bmp__region--margin[_ngcontent-%COMP%] {\n padding: 32px;\n color: #fbbf24;\n background: color-mix(in srgb, #fbbf24 8%, transparent);\n border-color: color-mix(in srgb, #fbbf24 70%, transparent);\n}\n\n.prism-bmp__region--border[_ngcontent-%COMP%] {\n flex: 1;\n padding: 14px;\n color: #f472b6;\n background: color-mix(in srgb, #f472b6 8%, transparent);\n border-color: color-mix(in srgb, #f472b6 70%, transparent);\n}\n\n.prism-bmp__region--padding[_ngcontent-%COMP%] {\n flex: 1;\n padding: 20px;\n color: #34d399;\n background: color-mix(in srgb, #34d399 10%, transparent);\n border-color: color-mix(in srgb, #34d399 70%, transparent);\n}\n\n.prism-bmp__region-label[_ngcontent-%COMP%] {\n position: absolute;\n top: 6px;\n left: 50%;\n font-size: 10px;\n font-weight: 600;\n color: inherit;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n opacity: 0.8;\n transform: translateX(-50%);\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-ghost);\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-primary);\n text-align: center;\n text-transform: none;\n letter-spacing: 0;\n background: color-mix(in srgb, var(--%NS%prism-primary) 15%, transparent);\n border: 1px solid var(--%NS%prism-primary);\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}"] });
|
|
109
101
|
}
|
|
110
102
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BoxModelPanelComponent, [{
|
|
111
103
|
type: Component,
|
|
112
|
-
args: [{ selector: 'prism-box-model-panel', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template:
|
|
113
|
-
<div class="prism-bmp">
|
|
114
|
-
@if (stateService.hoveredBoxModel(); as bm) {
|
|
115
|
-
<div class="prism-bmp__diagram">
|
|
116
|
-
<div class="prism-bmp__region prism-bmp__region--margin">
|
|
117
|
-
<span class="prism-bmp__region-label">margin</span>
|
|
118
|
-
<div class="prism-bmp__sides">
|
|
119
|
-
<span class="prism-bmp__side">{{ fmt(bm.margin.top) }}</span>
|
|
120
|
-
<div class="prism-bmp__inner-row">
|
|
121
|
-
<span class="prism-bmp__side">{{ fmt(bm.margin.left) }}</span>
|
|
122
|
-
<div class="prism-bmp__region prism-bmp__region--border">
|
|
123
|
-
<span class="prism-bmp__region-label">border</span>
|
|
124
|
-
<div class="prism-bmp__inner-row">
|
|
125
|
-
<span class="prism-bmp__side prism-bmp__side--dim">{{
|
|
126
|
-
fmt(bm.border.left)
|
|
127
|
-
}}</span>
|
|
128
|
-
<div class="prism-bmp__region prism-bmp__region--padding">
|
|
129
|
-
<span class="prism-bmp__region-label">padding</span>
|
|
130
|
-
<div class="prism-bmp__sides">
|
|
131
|
-
<span class="prism-bmp__side">{{
|
|
132
|
-
fmt(bm.padding.top)
|
|
133
|
-
}}</span>
|
|
134
|
-
<div class="prism-bmp__inner-row">
|
|
135
|
-
<span class="prism-bmp__side">{{
|
|
136
|
-
fmt(bm.padding.left)
|
|
137
|
-
}}</span>
|
|
138
|
-
<div class="prism-bmp__content-box">
|
|
139
|
-
{{ contentW(bm) }} × {{ contentH(bm) }}
|
|
140
|
-
</div>
|
|
141
|
-
<span class="prism-bmp__side">{{
|
|
142
|
-
fmt(bm.padding.right)
|
|
143
|
-
}}</span>
|
|
144
|
-
</div>
|
|
145
|
-
<span class="prism-bmp__side">{{
|
|
146
|
-
fmt(bm.padding.bottom)
|
|
147
|
-
}}</span>
|
|
148
|
-
</div>
|
|
149
|
-
</div>
|
|
150
|
-
<span class="prism-bmp__side prism-bmp__side--dim">{{
|
|
151
|
-
fmt(bm.border.right)
|
|
152
|
-
}}</span>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
<span class="prism-bmp__side">{{ fmt(bm.margin.right) }}</span>
|
|
156
|
-
</div>
|
|
157
|
-
<span class="prism-bmp__side">{{ fmt(bm.margin.bottom) }}</span>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
</div>
|
|
161
|
-
} @else {
|
|
162
|
-
<div class="prism-bmp__empty">
|
|
163
|
-
Hover over an element to inspect its box model.
|
|
164
|
-
</div>
|
|
165
|
-
}
|
|
166
|
-
</div>
|
|
167
|
-
`, 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 "] }]
|
|
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 class=\"prism-bmp__diagram\">\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 display: block;\n height: 100%;\n overflow: auto;\n}\n\n.prism-bmp {\n display: flex;\n align-items: center;\n justify-content: center;\n min-height: 100%;\n padding: 24px;\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 text-transform: uppercase;\n letter-spacing: 0.08em;\n border: 1px dashed;\n}\n\n.prism-bmp__region--margin {\n padding: 32px;\n color: #fbbf24;\n background: color-mix(in srgb, #fbbf24 8%, transparent);\n border-color: color-mix(in srgb, #fbbf24 70%, transparent);\n}\n\n.prism-bmp__region--border {\n flex: 1;\n padding: 14px;\n color: #f472b6;\n background: color-mix(in srgb, #f472b6 8%, transparent);\n border-color: color-mix(in srgb, #f472b6 70%, transparent);\n}\n\n.prism-bmp__region--padding {\n flex: 1;\n padding: 20px;\n color: #34d399;\n background: color-mix(in srgb, #34d399 10%, transparent);\n border-color: color-mix(in srgb, #34d399 70%, transparent);\n}\n\n.prism-bmp__region-label {\n position: absolute;\n top: 6px;\n left: 50%;\n font-size: 10px;\n font-weight: 600;\n color: inherit;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n opacity: 0.8;\n transform: translateX(-50%);\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-ghost);\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-primary);\n text-align: center;\n text-transform: none;\n letter-spacing: 0;\n background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n border: 1px solid var(--prism-primary);\n border-radius: var(--radius-xs);\n}\n\n.prism-bmp__empty {\n font-size: 13px;\n color: var(--prism-text-muted);\n}\n"] }]
|
|
168
105
|
}], null, { activeComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeComponent", required: false }] }] }); })();
|
|
169
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelPanelComponent, { className: "BoxModelPanelComponent", filePath: "box-model-panel.component.ts", lineNumber:
|
|
106
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BoxModelPanelComponent, { className: "BoxModelPanelComponent", filePath: "box-model-panel.component.ts", lineNumber: 12 }); })();
|
|
@@ -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,CAe9C"}
|
package/dist/box-model-plugin.js
CHANGED
|
@@ -10,8 +10,8 @@ export function boxModelPlugin() {
|
|
|
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
12
|
position: 'bottom',
|
|
13
|
-
providers: [BoxModelStateService]
|
|
14
|
-
}
|
|
15
|
-
]
|
|
13
|
+
providers: [BoxModelStateService]
|
|
14
|
+
}
|
|
15
|
+
]
|
|
16
16
|
};
|
|
17
17
|
}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;IAC7B,QAAQ,CAAC,eAAe,8DAAqC;yCADpD,oBAAoB;;CAEhC"}
|
|
@@ -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;
|
|
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"}
|
package/dist/box-model-utils.js
CHANGED
|
@@ -3,7 +3,7 @@ function parseSides(style, props) {
|
|
|
3
3
|
top: parseFloat(style.getPropertyValue(props[0])) || 0,
|
|
4
4
|
right: parseFloat(style.getPropertyValue(props[1])) || 0,
|
|
5
5
|
bottom: parseFloat(style.getPropertyValue(props[2])) || 0,
|
|
6
|
-
left: parseFloat(style.getPropertyValue(props[3])) || 0
|
|
6
|
+
left: parseFloat(style.getPropertyValue(props[3])) || 0
|
|
7
7
|
};
|
|
8
8
|
}
|
|
9
9
|
export function getBoxModel(element) {
|
|
@@ -13,6 +13,6 @@ export function getBoxModel(element) {
|
|
|
13
13
|
content: element.getBoundingClientRect(),
|
|
14
14
|
padding: parseSides(style, ['padding-top', 'padding-right', 'padding-bottom', 'padding-left']),
|
|
15
15
|
border: parseSides(style, ['border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width']),
|
|
16
|
-
margin: parseSides(style, ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'])
|
|
16
|
+
margin: parseSides(style, ['margin-top', 'margin-right', 'margin-bottom', 'margin-left'])
|
|
17
17
|
};
|
|
18
18
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"box-model.types.d.ts","sourceRoot":"","sources":["../src/box-model.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;
|
|
1
|
+
{"version":3,"file":"box-model.types.d.ts","sourceRoot":"","sources":["../src/box-model.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IACzB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,QAAQ,CAAC;IAClB,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE,QAAQ,CAAC;CACpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,IAAI,EAAoC,MAAM,4BAA4B,CAAC;AAEhG,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAwBtD,wBAAgB,KAAK,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAEvD"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { chain
|
|
1
|
+
import { chain } from '@angular-devkit/schematics';
|
|
2
2
|
import { addPluginToConfig } from '@ng-prism/core/schematics/utils';
|
|
3
3
|
const PLUGIN_IMPORT_NAME = 'boxModelPlugin';
|
|
4
4
|
const PLUGIN_IMPORT_FROM = '@ng-prism/plugin-box-model';
|
|
@@ -9,7 +9,7 @@ function injectPlugin(options) {
|
|
|
9
9
|
const changed = addPluginToConfig(tree, configPath, {
|
|
10
10
|
importName: PLUGIN_IMPORT_NAME,
|
|
11
11
|
importFrom: PLUGIN_IMPORT_FROM,
|
|
12
|
-
call: PLUGIN_CALL
|
|
12
|
+
call: PLUGIN_CALL
|
|
13
13
|
});
|
|
14
14
|
if (changed) {
|
|
15
15
|
context.logger.info(` ${PLUGIN_IMPORT_FROM} → added to ${configPath}`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;
|
|
1
|
+
{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/schematics/ng-add/schema.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ng-prism/plugin-box-model",
|
|
3
|
-
"version": "22.
|
|
3
|
+
"version": "22.3.0",
|
|
4
4
|
"description": "CSS box model inspector for ng-prism.",
|
|
5
5
|
"ng-add": {
|
|
6
6
|
"save": "devDependencies"
|
|
@@ -35,7 +35,8 @@
|
|
|
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.3.0-0",
|
|
39
|
+
"@angular-devkit/schematics": ">=20.0.0"
|
|
39
40
|
},
|
|
40
41
|
"devDependencies": {
|
|
41
42
|
"@ng-prism/core": "*"
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
"$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
|
|
3
|
+
"schematics": {
|
|
4
|
+
"ng-add": {
|
|
5
|
+
"description": "Adds @ng-prism/plugin-box-model to the ng-prism config",
|
|
6
|
+
"factory": "../dist/schematics/ng-add/index#ngAdd",
|
|
7
|
+
"schema": "./ng-add/schema.json"
|
|
8
|
+
}
|
|
8
9
|
}
|
|
9
|
-
}
|
|
10
10
|
}
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
2
|
+
"$schema": "http://json-schema.org/draft-07/schema#",
|
|
3
|
+
"$id": "NgPrismPluginBoxModelNgAdd",
|
|
4
|
+
"title": "Add @ng-prism/plugin-box-model",
|
|
5
|
+
"description": "Registers @ng-prism/plugin-box-model in ng-prism.config.ts",
|
|
6
|
+
"type": "object",
|
|
7
|
+
"properties": {
|
|
8
|
+
"configPath": {
|
|
9
|
+
"type": "string",
|
|
10
|
+
"description": "Path to ng-prism.config.ts",
|
|
11
|
+
"default": "ng-prism.config.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"required": [],
|
|
15
|
+
"additionalProperties": false
|
|
16
16
|
}
|