@ng-prism/plugin-perf 22.2.0-beta.4 → 22.2.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.
|
@@ -262,7 +262,7 @@ export class BundleSectionComponent {
|
|
|
262
262
|
} if (rf & 2) {
|
|
263
263
|
let tmp_0_0;
|
|
264
264
|
i0.ɵɵconditional((tmp_0_0 = ctx.metrics()) ? 0 : 1, tmp_0_0);
|
|
265
|
-
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n .perf-body--4col[_ngcontent-%COMP%] { grid-template-columns: repeat(4, 1fr); }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(
|
|
265
|
+
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n .perf-body--4col[_ngcontent-%COMP%] { grid-template-columns: repeat(4, 1fr); }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--%NS%prism-bg-surface);\n border: 1px solid var(--%NS%prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--%NS%prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.good[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-success) 15%, transparent);\n color: var(--%NS%prism-success);\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-warn) 15%, transparent);\n color: var(--%NS%prism-warn);\n }\n .perf-card-status.crit[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-danger) 15%, transparent);\n color: var(--%NS%prism-danger);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--%NS%prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--%NS%prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--%NS%prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 80px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--%NS%prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--%NS%prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); }\n\n .perf-thresholds[_ngcontent-%COMP%] {\n margin-top: 10px;\n font-size: 11px;\n color: var(--%NS%prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n .perf-thresholds--warn[_ngcontent-%COMP%] { color: var(--%NS%prism-warn); }\n .perf-thresholds--crit[_ngcontent-%COMP%] { color: var(--%NS%prism-danger); }\n\n .perf-chips[_ngcontent-%COMP%] {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n margin-top: 10px;\n }\n .perf-chip[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n padding: 4px 10px;\n background: var(--%NS%prism-input-bg);\n color: var(--%NS%prism-text-2);\n border: 1px solid var(--%NS%prism-border);\n border-radius: 5px;\n }\n .perf-chip.angular[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-primary) 10%, transparent);\n color: var(--%NS%prism-primary);\n border-color: color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--%NS%prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--%NS%prism-text-ghost); opacity: 0.6; }"] });
|
|
266
266
|
}
|
|
267
267
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BundleSectionComponent, [{
|
|
268
268
|
type: Component,
|
|
@@ -203,7 +203,7 @@ export class MemorySectionComponent {
|
|
|
203
203
|
} if (rf & 2) {
|
|
204
204
|
let tmp_0_0;
|
|
205
205
|
i0.ɵɵconditional((tmp_0_0 = ctx.memoryService()) ? 0 : -1, tmp_0_0);
|
|
206
|
-
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(
|
|
206
|
+
} }, styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--%NS%prism-bg-surface);\n border: 1px solid var(--%NS%prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--%NS%prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-status[_ngcontent-%COMP%] {\n font-size: 10px;\n padding: 2px 6px;\n border-radius: 3px;\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .perf-card-status.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-warn) 15%, transparent);\n color: var(--%NS%prism-warn);\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--%NS%prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--%NS%prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--%NS%prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 16px; }\n .perf-detail--last[_ngcontent-%COMP%] { padding-bottom: 20px; }\n\n .perf-bars[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: 100px 1fr auto;\n gap: 10px;\n align-items: center;\n font-family: 'JetBrains Mono', monospace;\n font-size: 12px;\n margin-top: 8px;\n }\n .perf-bar-label[_ngcontent-%COMP%] { color: var(--%NS%prism-text-muted); }\n .perf-bar-track[_ngcontent-%COMP%] {\n height: 8px;\n background: var(--%NS%prism-input-bg);\n border-radius: 4px;\n overflow: hidden;\n }\n .perf-bar-fill[_ngcontent-%COMP%] {\n height: 100%;\n background: linear-gradient(90deg, var(--%NS%prism-primary-from), var(--%NS%prism-primary-to));\n border-radius: 4px;\n }\n .perf-bar-fill--warn[_ngcontent-%COMP%] {\n background: linear-gradient(90deg, var(--%NS%prism-warn), var(--%NS%prism-warn));\n opacity: 0.8;\n }\n .perf-bar-val[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); }\n .perf-bar-val--warn[_ngcontent-%COMP%] { color: var(--%NS%prism-warn); }\n\n .perf-leak-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 8px 14px;\n border-radius: 5px;\n font-size: 12px;\n font-weight: 500;\n margin-top: 8px;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-success) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--%NS%prism-success) 25%, transparent);\n color: var(--%NS%prism-success);\n }\n .perf-leak-badge--warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--%NS%prism-warn) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--%NS%prism-warn) 25%, transparent);\n color: var(--%NS%prism-warn);\n }\n .perf-leak-dot[_ngcontent-%COMP%] {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n }\n .perf-leak-badge--ok[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] { background: var(--%NS%prism-success); }\n .perf-leak-badge--warn[_ngcontent-%COMP%] .perf-leak-dot[_ngcontent-%COMP%] {\n background: var(--%NS%prism-warn);\n box-shadow: 0 0 6px var(--%NS%prism-warn);\n }\n\n .perf-disclaimer[_ngcontent-%COMP%] {\n margin-top: 8px;\n font-size: 12px;\n color: var(--%NS%prism-text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--%NS%prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--%NS%prism-text-ghost); opacity: 0.6; }"] });
|
|
207
207
|
}
|
|
208
208
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MemorySectionComponent, [{
|
|
209
209
|
type: Component,
|
|
@@ -139,7 +139,7 @@ export class PerfPanelComponent {
|
|
|
139
139
|
i0.ɵɵconditional((tmp_6_0 = ctx.activeTab()) === "bundle" ? 13 : tmp_6_0 === "render" ? 14 : tmp_6_0 === "memory" ? 15 : -1);
|
|
140
140
|
} }, dependencies: [BundleSectionComponent,
|
|
141
141
|
RenderSectionComponent,
|
|
142
|
-
MemorySectionComponent], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-perf-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-subtabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(
|
|
142
|
+
MemorySectionComponent], styles: ["[_nghost-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-perf-panel[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .prism-subtabs[_ngcontent-%COMP%] {\n display: flex;\n gap: 2px;\n padding: 10px 20px 0;\n border-bottom: 1px solid var(--%NS%prism-border);\n background: var(--%NS%prism-bg-elevated);\n position: sticky;\n top: 0;\n z-index: 2;\n }\n\n .prism-st-tab[_ngcontent-%COMP%] {\n padding: 7px 12px;\n font-size: 12px;\n font-weight: 500;\n color: var(--%NS%prism-text-muted);\n border-radius: 6px 6px 0 0;\n position: relative;\n display: flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n background: transparent;\n border: none;\n font-family: var(--%NS%font-sans);\n transition: color var(--%NS%dur-fast);\n }\n .prism-st-tab[_ngcontent-%COMP%]:hover { color: var(--%NS%prism-text-2); }\n .prism-st-tab--active[_ngcontent-%COMP%] { color: var(--%NS%prism-text); }\n .prism-st-tab--%NS%active[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: 8px;\n right: 8px;\n bottom: -1px;\n height: 2px;\n background: var(--%NS%prism-primary);\n border-radius: 1px;\n }\n\n .prism-subtabs-actions[_ngcontent-%COMP%] {\n margin-left: auto;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n\n .prism-perf-cd-badge[_ngcontent-%COMP%] {\n font-family: var(--%NS%font-mono, 'JetBrains Mono', monospace);\n font-size: 11px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0 8px;\n height: 24px;\n background: color-mix(in srgb, var(--%NS%prism-primary) 12%, transparent);\n color: var(--%NS%prism-primary);\n border: 1px solid color-mix(in srgb, var(--%NS%prism-primary) 25%, transparent);\n border-radius: 5px;\n }\n .prism-tool-btn[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 9px;\n border-radius: 5px;\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: 11.5px;\n color: var(--%NS%prism-text-muted);\n transition: all 0.12s;\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--%NS%font-sans);\n }\n .prism-tool-btn[_ngcontent-%COMP%]:hover {\n color: var(--%NS%prism-text);\n background: color-mix(in srgb, var(--%NS%prism-primary) 8%, transparent);\n }\n\n .prism-perf-status[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--%NS%prism-text-muted);\n font-family: var(--%NS%font-mono);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .prism-perf-status-dot[_ngcontent-%COMP%] {\n display: inline-block;\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background: var(--%NS%prism-success);\n box-shadow: 0 0 6px var(--%NS%prism-success);\n animation: _ngcontent-%COMP%_prism-perf-pulse 2s ease-in-out infinite;\n }\n @keyframes _ngcontent-%COMP%_prism-perf-pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n\n .prism-perf-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n min-height: 0;\n }"] });
|
|
143
143
|
}
|
|
144
144
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PerfPanelComponent, [{
|
|
145
145
|
type: Component,
|
|
@@ -146,7 +146,7 @@ export class RenderSectionComponent {
|
|
|
146
146
|
} if (rf & 2) {
|
|
147
147
|
let tmp_0_0;
|
|
148
148
|
i0.ɵɵconditional((tmp_0_0 = ctx.renderService()) ? 0 : -1, tmp_0_0);
|
|
149
|
-
} }, dependencies: [SparklineComponent], styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(
|
|
149
|
+
} }, dependencies: [SparklineComponent], styles: [".perf-body[_ngcontent-%COMP%] {\n padding: 20px 24px;\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n align-content: start;\n }\n\n .perf-card[_ngcontent-%COMP%] {\n padding: 16px;\n background: var(--%NS%prism-bg-surface);\n border: 1px solid var(--%NS%prism-border);\n border-radius: 10px;\n }\n .perf-card--block[_ngcontent-%COMP%] { display: block; }\n .perf-card-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n }\n .perf-card-name[_ngcontent-%COMP%] {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--%NS%prism-text-ghost);\n font-weight: 700;\n }\n .perf-card-val[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 26px;\n font-weight: 700;\n color: var(--%NS%prism-text);\n letter-spacing: -0.02em;\n display: flex;\n align-items: baseline;\n gap: 4px;\n }\n .perf-card-val[_ngcontent-%COMP%] span[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--%NS%prism-text-muted);\n font-weight: 500;\n }\n .perf-card-sub[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--%NS%prism-text-muted);\n margin-top: 4px;\n font-family: 'JetBrains Mono', monospace;\n }\n\n .perf-detail[_ngcontent-%COMP%] { padding: 0 24px 20px; }\n\n .perf-sparkline-legend[_ngcontent-%COMP%] {\n font-family: 'JetBrains Mono', monospace;\n font-size: 11px;\n color: var(--%NS%prism-text-muted);\n }\n .perf-sparkline-hl[_ngcontent-%COMP%] { color: var(--%NS%prism-primary); }\n .perf-sparkline-wrap[_ngcontent-%COMP%] { margin-top: 10px; position: relative; }\n\n .perf-empty[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 8px;\n height: 100%;\n min-height: 180px;\n }\n .perf-empty-text[_ngcontent-%COMP%] { font-size: 12px; color: var(--%NS%prism-text-ghost); }\n .perf-empty-hint[_ngcontent-%COMP%] { font-size: 11px; color: var(--%NS%prism-text-ghost); opacity: 0.6; }"] });
|
|
150
150
|
}
|
|
151
151
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RenderSectionComponent, [{
|
|
152
152
|
type: Component,
|
|
@@ -128,7 +128,7 @@ export class SparklineComponent {
|
|
|
128
128
|
i0.ɵɵconditional((tmp_4_0 = ctx.peakPoint()) ? 14 : -1, tmp_4_0);
|
|
129
129
|
i0.ɵɵadvance();
|
|
130
130
|
i0.ɵɵconditional((tmp_5_0 = ctx.currentPoint()) ? 15 : -1, tmp_5_0);
|
|
131
|
-
} }, styles: [".prism-perf-sparkline-wrap[_ngcontent-%COMP%] { position: relative; }\n .prism-perf-sparkline-svg[_ngcontent-%COMP%] { width: 100%; height: 52px; }\n\n .sparkline-gradient-start[_ngcontent-%COMP%] { stop-color: var(
|
|
131
|
+
} }, styles: [".prism-perf-sparkline-wrap[_ngcontent-%COMP%] { position: relative; }\n .prism-perf-sparkline-svg[_ngcontent-%COMP%] { width: 100%; height: 52px; }\n\n .sparkline-gradient-start[_ngcontent-%COMP%] { stop-color: var(--%NS%prism-primary); stop-opacity: 0.35; }\n .sparkline-gradient-end[_ngcontent-%COMP%] { stop-color: var(--%NS%prism-primary); stop-opacity: 0; }\n\n .sparkline-warn-line[_ngcontent-%COMP%] {\n stroke: var(--%NS%prism-warn);\n stroke-width: 0.8;\n stroke-dasharray: 4 4;\n opacity: 0.4;\n }\n .sparkline-warn-text[_ngcontent-%COMP%] { fill: var(--%NS%prism-warn); opacity: 0.5; }\n\n .sparkline-line[_ngcontent-%COMP%] { stroke: var(--%NS%prism-primary); }\n .sparkline-peak[_ngcontent-%COMP%] { fill: var(--%NS%prism-warn); }\n .sparkline-current[_ngcontent-%COMP%] { fill: var(--%NS%prism-primary); }\n .sparkline-current-pulse[_ngcontent-%COMP%] { fill: none; stroke: var(--%NS%prism-primary); opacity: 0.4; }"] });
|
|
132
132
|
}
|
|
133
133
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SparklineComponent, [{
|
|
134
134
|
type: Component,
|