@ng-prism/core 21.12.0 → 22.0.0-beta.1
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 +10 -13
- package/dist/app/canvas/prism-canvas-bg-pill.component.js +1 -1
- package/dist/app/canvas/prism-canvas-rulers.component.js +5 -3
- package/dist/app/canvas/prism-canvas-toolbar.component.js +1 -1
- package/dist/app/canvas/prism-template-popover.component.js +7 -4
- package/dist/app/component-head/prism-component-head.component.js +20 -11
- package/dist/app/component-head/prism-stat.component.js +9 -5
- package/dist/app/component-header/prism-component-header.component.js +1 -1
- package/dist/app/controls/boolean-control.component.js +7 -4
- package/dist/app/controls/json-control.component.js +19 -10
- package/dist/app/controls/number-control.component.js +7 -4
- package/dist/app/controls/string-control.component.js +7 -4
- package/dist/app/controls/union-control.component.js +9 -5
- package/dist/app/directives/prism-resizer.directive.js +8 -4
- package/dist/app/header/prism-header-widget-host.component.js +5 -3
- package/dist/app/header/prism-header.component.js +13 -7
- package/dist/app/icons/prism-icon.component.js +5 -3
- package/dist/app/layout-menu/prism-layout-menu.component.js +2 -1
- package/dist/app/page-renderer/prism-page-renderer.component.d.ts.map +1 -1
- package/dist/app/page-renderer/prism-page-renderer.component.js +13 -16
- package/dist/app/panels/a11y/a11y-audit.service.js +8 -4
- package/dist/app/panels/a11y/a11y-header-badge.component.js +3 -2
- package/dist/app/panels/a11y/a11y-keyboard-overlay.component.js +3 -2
- package/dist/app/panels/a11y/a11y-keyboard.component.js +3 -2
- package/dist/app/panels/a11y/a11y-overlay-host.component.js +11 -6
- package/dist/app/panels/a11y/a11y-panel-state.service.js +2 -1
- package/dist/app/panels/a11y/a11y-panel.component.js +7 -4
- package/dist/app/panels/a11y/a11y-perspective.service.js +2 -1
- package/dist/app/panels/a11y/a11y-score.component.js +7 -4
- package/dist/app/panels/a11y/a11y-sr-overlay.component.js +5 -3
- package/dist/app/panels/a11y/a11y-sr.component.js +3 -2
- package/dist/app/panels/a11y/a11y-tree.component.js +14 -8
- package/dist/app/panels/a11y/a11y-violations.component.d.ts +1 -1
- package/dist/app/panels/a11y/a11y-violations.component.d.ts.map +1 -1
- package/dist/app/panels/a11y/a11y-violations.component.js +9 -11
- package/dist/app/panels/controls/prism-controls-panel.component.js +3 -2
- package/dist/app/panels/events/prism-events-panel.component.js +3 -2
- package/dist/app/panels/events/prism-json-node.component.js +14 -7
- package/dist/app/panels/panel-host/prism-panel-host.component.js +15 -8
- package/dist/app/renderer/prism-renderer.component.d.ts.map +1 -1
- package/dist/app/renderer/prism-renderer.component.js +9 -6
- package/dist/app/services/prism-canvas.service.js +8 -4
- package/dist/app/services/prism-event-log.service.js +2 -1
- package/dist/app/services/prism-layout.service.js +16 -8
- package/dist/app/services/prism-manifest.service.js +10 -5
- package/dist/app/services/prism-navigation.service.js +8 -4
- package/dist/app/services/prism-panel.service.js +6 -3
- package/dist/app/services/prism-plugin.service.js +14 -7
- package/dist/app/services/prism-renderer.service.js +10 -5
- package/dist/app/services/prism-search.service.js +6 -3
- package/dist/app/services/prism-theme.service.js +4 -2
- package/dist/app/services/prism-variant-bg.service.js +8 -4
- package/dist/app/shell/prism-shell.component.js +7 -4
- package/dist/app/sidebar/prism-sidebar.component.js +15 -8
- package/dist/app/variant-ribbon/prism-variant-ribbon.component.js +7 -4
- package/dist/app/view-tab-bar/prism-view-panel-host.component.js +8 -4
- package/dist/app/view-tab-bar/prism-view-tab-bar.component.js +2 -1
- package/dist/builder/build/index.d.ts.map +1 -1
- package/dist/builder/build/index.js +11 -4
- package/dist/builder/build/schema.d.ts +1 -0
- package/dist/builder/build/schema.d.ts.map +1 -1
- package/dist/builder/serve/index.d.ts.map +1 -1
- package/dist/builder/serve/index.js +21 -6
- package/dist/builder/serve/schema.d.ts +1 -0
- package/dist/builder/serve/schema.d.ts.map +1 -1
- package/dist/builder/shared/prism-pipeline.d.ts +2 -0
- package/dist/builder/shared/prism-pipeline.d.ts.map +1 -1
- package/dist/builder/shared/prism-pipeline.js +3 -5
- package/dist/builder/shared/resolve-cache-dir.d.ts +8 -0
- package/dist/builder/shared/resolve-cache-dir.d.ts.map +1 -0
- package/dist/builder/shared/resolve-cache-dir.js +12 -0
- package/dist/schematics/migrations/v21-13-manifest-cache/index.d.ts +3 -0
- package/dist/schematics/migrations/v21-13-manifest-cache/index.d.ts.map +1 -0
- package/dist/schematics/migrations/v21-13-manifest-cache/index.js +136 -0
- package/dist/schematics/ng-add/index.d.ts.map +1 -1
- package/dist/schematics/ng-add/index.js +36 -45
- package/dist/schematics/utils/index.d.ts +1 -0
- package/dist/schematics/utils/index.d.ts.map +1 -1
- package/dist/schematics/utils/index.js +1 -0
- package/dist/schematics/utils/tsconfig-paths.d.ts +8 -0
- package/dist/schematics/utils/tsconfig-paths.d.ts.map +1 -0
- package/dist/schematics/utils/tsconfig-paths.js +20 -0
- package/package.json +9 -6
- package/schematics/migrations.json +10 -0
- package/src/builder/build/schema.json +4 -0
- package/src/builder/serve/schema.json +4 -0
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
**ng-prism** is the Angular-native Storybook alternative. A lightweight component showcase tool that scans your library at build time and renders interactive demos — annotate components with `@Showcase`, no separate story files needed.
|
|
4
4
|
|
|
5
|
-
[](https://angular.dev)
|
|
6
6
|
[](https://www.typescriptlang.org)
|
|
7
7
|
[](./LICENSE)
|
|
8
8
|
|
|
@@ -87,10 +87,7 @@ export default defineConfig({
|
|
|
87
87
|
'--prism-font-sans': "'Inter', sans-serif",
|
|
88
88
|
},
|
|
89
89
|
|
|
90
|
-
appProviders: [
|
|
91
|
-
provideAnimationsAsync(),
|
|
92
|
-
provideHttpClient(),
|
|
93
|
-
],
|
|
90
|
+
appProviders: [provideAnimationsAsync(), provideHttpClient()],
|
|
94
91
|
});
|
|
95
92
|
```
|
|
96
93
|
|
|
@@ -138,19 +135,19 @@ Link to a `@Showcase`-decorated component for combined API docs + custom renderi
|
|
|
138
135
|
|
|
139
136
|
## Official Plugins
|
|
140
137
|
|
|
141
|
-
| Plugin
|
|
142
|
-
|
|
143
|
-
| JSDoc
|
|
144
|
-
| Figma
|
|
145
|
-
| Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector
|
|
146
|
-
| Perf
|
|
147
|
-
| Coverage
|
|
138
|
+
| Plugin | Package | Description |
|
|
139
|
+
| --------- | ---------------------------- | -------------------------------------------- |
|
|
140
|
+
| JSDoc | `@ng-prism/plugin-jsdoc` | API documentation from JSDoc comments |
|
|
141
|
+
| Figma | `@ng-prism/plugin-figma` | Figma design embed + visual diff |
|
|
142
|
+
| Box Model | `@ng-prism/plugin-box-model` | CSS box model inspector |
|
|
143
|
+
| Perf | `@ng-prism/plugin-perf` | Render performance profiling |
|
|
144
|
+
| Coverage | `@ng-prism/plugin-coverage` | Per-component test coverage from Istanbul/v8 |
|
|
148
145
|
|
|
149
146
|
> **Note:** Accessibility auditing (axe-core) is built into ng-prism core — no plugin needed.
|
|
150
147
|
|
|
151
148
|
## Requirements
|
|
152
149
|
|
|
153
|
-
- Angular >= 21
|
|
150
|
+
- Angular >= 20 (Angular 20, 21, and 22 are supported)
|
|
154
151
|
- TypeScript >= 5.5
|
|
155
152
|
- Components must use `input()` / `output()` signals
|
|
156
153
|
|
|
@@ -27,7 +27,7 @@ export class PrismCanvasBgPillComponent {
|
|
|
27
27
|
i0.ɵɵconditionalCreate(0, PrismCanvasBgPillComponent_Conditional_0_Template, 5, 1, "div", 0);
|
|
28
28
|
} if (rf & 2) {
|
|
29
29
|
i0.ɵɵconditional(ctx.visible() ? 0 : -1);
|
|
30
|
-
} }, styles: ["[_nghost-%COMP%] {\n position: absolute;\n top: var(--prism-canvas-overlay-top, 12px);\n right: var(--prism-canvas-overlay-inline, 20px);\n pointer-events: none;\n z-index: 2;\n transition: top var(--dur-base), right var(--dur-base);\n }\n .prism-bg-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 4px 4px 4px 10px;\n border-radius: 999px;\n font-size: var(--fs-xs);\n font-family: var(--font-sans);\n background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n backdrop-filter: blur(8px);\n pointer-events: auto;\n animation: _ngcontent-%COMP%_fadeIn var(--dur-base) ease-out;\n }\n .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n .reset[_ngcontent-%COMP%] {\n height: 22px;\n padding: 0 10px;\n border-radius: 999px;\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-text);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n font-family: inherit;\n font-size: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: background var(--dur-fast);\n }\n .reset[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n @keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n }"]
|
|
30
|
+
} }, styles: ["[_nghost-%COMP%] {\n position: absolute;\n top: var(--prism-canvas-overlay-top, 12px);\n right: var(--prism-canvas-overlay-inline, 20px);\n pointer-events: none;\n z-index: 2;\n transition: top var(--dur-base), right var(--dur-base);\n }\n .prism-bg-pill[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 4px 4px 4px 10px;\n border-radius: 999px;\n font-size: var(--fs-xs);\n font-family: var(--font-sans);\n background: color-mix(in srgb, var(--prism-bg-elevated) 90%, transparent);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n backdrop-filter: blur(8px);\n pointer-events: auto;\n animation: _ngcontent-%COMP%_fadeIn var(--dur-base) ease-out;\n }\n .label[_ngcontent-%COMP%] { letter-spacing: 0.02em; }\n .reset[_ngcontent-%COMP%] {\n height: 22px;\n padding: 0 10px;\n border-radius: 999px;\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-text);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n font-family: inherit;\n font-size: inherit;\n font-weight: 500;\n cursor: pointer;\n transition: background var(--dur-fast);\n }\n .reset[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n @keyframes _ngcontent-%COMP%_fadeIn {\n from { opacity: 0; transform: translateY(-4px); }\n to { opacity: 1; transform: translateY(0); }\n }"] });
|
|
31
31
|
}
|
|
32
32
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasBgPillComponent, [{
|
|
33
33
|
type: Component,
|
|
@@ -13,8 +13,10 @@ const R = 20;
|
|
|
13
13
|
export class PrismCanvasRulersComponent {
|
|
14
14
|
canvas = inject(PrismCanvasService);
|
|
15
15
|
themeService = inject(PrismThemeService);
|
|
16
|
-
rulerTop = viewChild('rulerTop',
|
|
17
|
-
|
|
16
|
+
rulerTop = viewChild('rulerTop', /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "rulerTop" }] : /* istanbul ignore next */ []));
|
|
18
|
+
rulerLeft = viewChild('rulerLeft', /* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [{ debugName: "rulerLeft" }] : /* istanbul ignore next */ []));
|
|
18
20
|
ro = null;
|
|
19
21
|
constructor() {
|
|
20
22
|
effect(() => {
|
|
@@ -156,7 +158,7 @@ export class PrismCanvasRulersComponent {
|
|
|
156
158
|
i0.ɵɵconditionalCreate(0, PrismCanvasRulersComponent_Conditional_0_Template, 6, 0, "div", 2);
|
|
157
159
|
} if (rf & 2) {
|
|
158
160
|
i0.ɵɵconditional(ctx.canvas.rulers() ? 0 : -1);
|
|
159
|
-
} }, styles: ["[_nghost-%COMP%] { display: contents; }\n\n .ruler-wrap[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 4;\n overflow: hidden;\n }\n\n .ruler[_ngcontent-%COMP%] { position: absolute; }\n .ruler--top[_ngcontent-%COMP%] {\n top: 0;\n left: 20px;\n right: 0;\n height: 20px;\n }\n .ruler--left[_ngcontent-%COMP%] {\n top: 20px;\n left: 0;\n bottom: 0;\n width: 20px;\n }\n .ruler-corner[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n background: var(--prism-bg);\n border-right: 1px solid var(--prism-border);\n border-bottom: 1px solid var(--prism-border);\n z-index: 1;\n }"]
|
|
161
|
+
} }, styles: ["[_nghost-%COMP%] { display: contents; }\n\n .ruler-wrap[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n pointer-events: none;\n z-index: 4;\n overflow: hidden;\n }\n\n .ruler[_ngcontent-%COMP%] { position: absolute; }\n .ruler--top[_ngcontent-%COMP%] {\n top: 0;\n left: 20px;\n right: 0;\n height: 20px;\n }\n .ruler--left[_ngcontent-%COMP%] {\n top: 20px;\n left: 0;\n bottom: 0;\n width: 20px;\n }\n .ruler-corner[_ngcontent-%COMP%] {\n position: absolute;\n top: 0;\n left: 0;\n width: 20px;\n height: 20px;\n background: var(--prism-bg);\n border-right: 1px solid var(--prism-border);\n border-bottom: 1px solid var(--prism-border);\n z-index: 1;\n }"] });
|
|
160
162
|
}
|
|
161
163
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasRulersComponent, [{
|
|
162
164
|
type: Component,
|
|
@@ -118,7 +118,7 @@ export class PrismCanvasToolbarComponent {
|
|
|
118
118
|
i0.ɵɵclassProp("tool-btn--tpl-active", ctx.layout.templatePopoverVisible());
|
|
119
119
|
i0.ɵɵadvance();
|
|
120
120
|
i0.ɵɵproperty("size", 13);
|
|
121
|
-
} }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 20px;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg);\n min-height: 44px;\n }\n\n .tool-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1px;\n padding: 2px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-md);\n }\n\n .tool-btn[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 9px;\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: var(--fs-sm);\n color: var(--prism-text-muted);\n transition: all var(--dur-fast);\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n }\n .tool-btn[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n }\n .tool-btn--active[_ngcontent-%COMP%] {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }\n .bg-star[_ngcontent-%COMP%] {\n flex-shrink: 0;\n filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n }\n\n .tool-sep[_ngcontent-%COMP%] {\n width: 1px;\n height: 18px;\n background: var(--prism-border);\n margin: 0 4px;\n }\n\n .tool-label[_ngcontent-%COMP%] {\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 600;\n margin-right: 2px;\n }\n\n .tool-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n .tool-btn--tpl[_ngcontent-%COMP%] {\n color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid\n color-mix(in srgb, var(--prism-primary) 25%, transparent);\n font-family: var(--font-mono);\n }\n .tool-btn--tpl[_ngcontent-%COMP%]:hover {\n color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n }\n .tool-btn--tpl.tool-btn--tpl-active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 22%, transparent);\n box-shadow: inset 0 0 0 1px\n color-mix(in srgb, var(--prism-primary) 35%, transparent);\n }"]
|
|
121
|
+
} }, dependencies: [PrismIconComponent], styles: [".canvas-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 8px 20px;\n border-bottom: 1px solid var(--prism-border);\n background: var(--prism-bg);\n min-height: 44px;\n }\n\n .tool-group[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1px;\n padding: 2px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-md);\n }\n\n .tool-btn[_ngcontent-%COMP%] {\n height: 24px;\n padding: 0 9px;\n border-radius: var(--radius-sm);\n display: flex;\n align-items: center;\n gap: 5px;\n font-size: var(--fs-sm);\n color: var(--prism-text-muted);\n transition: all var(--dur-fast);\n font-weight: 500;\n background: none;\n border: none;\n cursor: pointer;\n font-family: var(--font-sans);\n }\n .tool-btn[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n }\n .tool-btn--active[_ngcontent-%COMP%] {\n color: var(--prism-text);\n background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }\n .bg-star[_ngcontent-%COMP%] {\n flex-shrink: 0;\n filter: drop-shadow(0 0 2px rgba(250, 204, 21, 0.4));\n }\n\n .tool-sep[_ngcontent-%COMP%] {\n width: 1px;\n height: 18px;\n background: var(--prism-border);\n margin: 0 4px;\n }\n\n .tool-label[_ngcontent-%COMP%] {\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 600;\n margin-right: 2px;\n }\n\n .tool-spacer[_ngcontent-%COMP%] { flex: 1; }\n\n .tool-btn--tpl[_ngcontent-%COMP%] {\n color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid\n color-mix(in srgb, var(--prism-primary) 25%, transparent);\n font-family: var(--font-mono);\n }\n .tool-btn--tpl[_ngcontent-%COMP%]:hover {\n color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 18%, transparent);\n }\n .tool-btn--tpl.tool-btn--tpl-active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 22%, transparent);\n box-shadow: inset 0 0 0 1px\n color-mix(in srgb, var(--prism-primary) 35%, transparent);\n }"] });
|
|
122
122
|
}
|
|
123
123
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismCanvasToolbarComponent, [{
|
|
124
124
|
type: Component,
|
|
@@ -76,7 +76,8 @@ export class PrismTemplatePopoverComponent {
|
|
|
76
76
|
navigationService = inject(PrismNavigationService);
|
|
77
77
|
rendererService = inject(PrismRendererService);
|
|
78
78
|
layoutService = inject(PrismLayoutService);
|
|
79
|
-
copied = signal(false,
|
|
79
|
+
copied = signal(false, /* @ts-ignore */
|
|
80
|
+
...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
|
|
80
81
|
copiedResetTimer = null;
|
|
81
82
|
snippet = computed(() => {
|
|
82
83
|
const comp = this.navigationService.activeComponent();
|
|
@@ -90,13 +91,15 @@ export class PrismTemplatePopoverComponent {
|
|
|
90
91
|
? { host: comp.meta.showcaseConfig.host }
|
|
91
92
|
: undefined;
|
|
92
93
|
return generateSnippet(comp.meta.componentMeta.selector, comp.meta.inputs, this.rendererService.inputValues(), explicitKeys, this.rendererService.activeContent(), directiveOptions);
|
|
93
|
-
},
|
|
94
|
+
}, /* @ts-ignore */
|
|
95
|
+
...(ngDevMode ? [{ debugName: "snippet" }] : /* istanbul ignore next */ []));
|
|
94
96
|
highlighted = computed(() => {
|
|
95
97
|
const code = this.snippet();
|
|
96
98
|
if (!code)
|
|
97
99
|
return '';
|
|
98
100
|
return tokenizeXml(code);
|
|
99
|
-
},
|
|
101
|
+
}, /* @ts-ignore */
|
|
102
|
+
...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
|
|
100
103
|
copy() {
|
|
101
104
|
const code = this.snippet();
|
|
102
105
|
if (!code)
|
|
@@ -119,7 +122,7 @@ export class PrismTemplatePopoverComponent {
|
|
|
119
122
|
i0.ɵɵconditionalCreate(0, PrismTemplatePopoverComponent_Conditional_0_Template, 11, 7, "div", 0);
|
|
120
123
|
} if (rf & 2) {
|
|
121
124
|
i0.ɵɵconditional(ctx.layoutService.templatePopoverVisible() ? 0 : -1);
|
|
122
|
-
} }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n .tpl-popover[_ngcontent-%COMP%] {\n position: absolute;\n right: 20px;\n top: 8px;\n width: 520px;\n max-width: calc(100% - 40px);\n max-height: min(420px, calc(100% - 16px));\n background: var(--prism-bg-elevated);\n border: 1px solid var(--prism-border-strong);\n border-radius: var(--radius-lg, 10px);\n box-shadow:\n 0 20px 60px rgba(0, 0, 0, 0.45),\n 0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n display: flex;\n flex-direction: column;\n z-index: 30;\n overflow: hidden;\n animation: _ngcontent-%COMP%_tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n }\n\n @keyframes _ngcontent-%COMP%_tpl-fade-in {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .tpl-popover-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 12px 0 16px;\n height: 40px;\n border-bottom: 1px solid var(--prism-border);\n background: linear-gradient(\n 180deg,\n var(--prism-bg-surface),\n var(--prism-bg-elevated)\n );\n flex-shrink: 0;\n }\n .tpl-popover-head[_ngcontent-%COMP%] > prism-icon[_ngcontent-%COMP%] {\n color: var(--prism-text-muted);\n }\n .tpl-popover-head[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] {\n flex: 1;\n font-size: var(--fs-xs);\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--prism-text-2);\n }\n\n .tpl-popover-copy[_ngcontent-%COMP%] {\n height: 26px;\n padding: 0 10px;\n font-size: var(--fs-sm);\n font-family: var(--font-sans);\n font-weight: 500;\n color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n border-radius: var(--radius-sm, 5px);\n display: flex;\n align-items: center;\n gap: 5px;\n cursor: pointer;\n transition: background var(--dur-fast);\n }\n .tpl-popover-copy[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .tpl-popover-close[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n display: grid;\n place-items: center;\n border-radius: var(--radius-sm, 5px);\n color: var(--prism-text-muted);\n background: transparent;\n border: 0;\n cursor: pointer;\n transition: background var(--dur-fast), color var(--dur-fast);\n }\n .tpl-popover-close[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n background: var(--prism-input-bg);\n }\n\n .tpl-popover-body[_ngcontent-%COMP%] {\n margin: 0;\n padding: 14px 18px;\n font-family: var(--font-mono);\n font-size: var(--fs-md);\n line-height: 1.7;\n color: var(--prism-text-2);\n overflow: auto;\n background: var(--prism-bg);\n flex: 1;\n min-height: 0;\n white-space: pre;\n }\n .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--prism-border-strong);\n border-radius: 3px;\n }\n\n [_nghost-%COMP%] .tok-tag { color: var(--prism-code-tag); }\n [_nghost-%COMP%] .tok-attr { color: var(--prism-code-attr); }\n [_nghost-%COMP%] .tok-str { color: var(--prism-code-str); }\n [_nghost-%COMP%] .tok-com { color: var(--prism-code-com); font-style: italic; }"]
|
|
125
|
+
} }, dependencies: [PrismIconComponent], styles: ["[_nghost-%COMP%] { display: contents; }\n\n .tpl-popover[_ngcontent-%COMP%] {\n position: absolute;\n right: 20px;\n top: 8px;\n width: 520px;\n max-width: calc(100% - 40px);\n max-height: min(420px, calc(100% - 16px));\n background: var(--prism-bg-elevated);\n border: 1px solid var(--prism-border-strong);\n border-radius: var(--radius-lg, 10px);\n box-shadow:\n 0 20px 60px rgba(0, 0, 0, 0.45),\n 0 0 0 1px color-mix(in srgb, var(--prism-primary) 10%, transparent);\n display: flex;\n flex-direction: column;\n z-index: 30;\n overflow: hidden;\n animation: _ngcontent-%COMP%_tpl-fade-in var(--dur-fast, 0.15s) var(--ease-default, ease-out);\n }\n\n @keyframes _ngcontent-%COMP%_tpl-fade-in {\n from {\n opacity: 0;\n transform: translateY(-8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .tpl-popover-head[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 0 12px 0 16px;\n height: 40px;\n border-bottom: 1px solid var(--prism-border);\n background: linear-gradient(\n 180deg,\n var(--prism-bg-surface),\n var(--prism-bg-elevated)\n );\n flex-shrink: 0;\n }\n .tpl-popover-head[_ngcontent-%COMP%] > prism-icon[_ngcontent-%COMP%] {\n color: var(--prism-text-muted);\n }\n .tpl-popover-head[_ngcontent-%COMP%] > span[_ngcontent-%COMP%] {\n flex: 1;\n font-size: var(--fs-xs);\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--prism-text-2);\n }\n\n .tpl-popover-copy[_ngcontent-%COMP%] {\n height: 26px;\n padding: 0 10px;\n font-size: var(--fs-sm);\n font-family: var(--font-sans);\n font-weight: 500;\n color: var(--prism-primary);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 25%, transparent);\n border-radius: var(--radius-sm, 5px);\n display: flex;\n align-items: center;\n gap: 5px;\n cursor: pointer;\n transition: background var(--dur-fast);\n }\n .tpl-popover-copy[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .tpl-popover-close[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n display: grid;\n place-items: center;\n border-radius: var(--radius-sm, 5px);\n color: var(--prism-text-muted);\n background: transparent;\n border: 0;\n cursor: pointer;\n transition: background var(--dur-fast), color var(--dur-fast);\n }\n .tpl-popover-close[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n background: var(--prism-input-bg);\n }\n\n .tpl-popover-body[_ngcontent-%COMP%] {\n margin: 0;\n padding: 14px 18px;\n font-family: var(--font-mono);\n font-size: var(--fs-md);\n line-height: 1.7;\n color: var(--prism-text-2);\n overflow: auto;\n background: var(--prism-bg);\n flex: 1;\n min-height: 0;\n white-space: pre;\n }\n .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .tpl-popover-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n background: var(--prism-border-strong);\n border-radius: 3px;\n }\n\n [_nghost-%COMP%] .tok-tag { color: var(--prism-code-tag); }\n [_nghost-%COMP%] .tok-attr { color: var(--prism-code-attr); }\n [_nghost-%COMP%] .tok-str { color: var(--prism-code-str); }\n [_nghost-%COMP%] .tok-com { color: var(--prism-code-com); font-style: italic; }"] });
|
|
123
126
|
}
|
|
124
127
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismTemplatePopoverComponent, [{
|
|
125
128
|
type: Component,
|
|
@@ -125,7 +125,7 @@ function PrismComponentHeadComponent_Conditional_0_Template(rf, ctx) { if (rf &
|
|
|
125
125
|
i0.ɵɵadvance();
|
|
126
126
|
i0.ɵɵconditional(c_r3.meta.showcaseConfig.description ? 14 : -1);
|
|
127
127
|
i0.ɵɵadvance();
|
|
128
|
-
i0.ɵɵconditional(
|
|
128
|
+
i0.ɵɵconditional(c_r3.meta.showcaseConfig.tags?.length ? 15 : -1);
|
|
129
129
|
i0.ɵɵadvance(2);
|
|
130
130
|
i0.ɵɵconditional(ctx_r1.variantCount() > 0 ? 17 : -1);
|
|
131
131
|
i0.ɵɵadvance();
|
|
@@ -156,27 +156,33 @@ const STATUS_BADGES = {
|
|
|
156
156
|
export class PrismComponentHeadComponent {
|
|
157
157
|
navigationService = inject(PrismNavigationService);
|
|
158
158
|
auditService = inject(A11yAuditService);
|
|
159
|
-
comp = computed(() => this.navigationService.activeComponent(),
|
|
159
|
+
comp = computed(() => this.navigationService.activeComponent(), /* @ts-ignore */
|
|
160
|
+
...(ngDevMode ? [{ debugName: "comp" }] : /* istanbul ignore next */ []));
|
|
160
161
|
category = computed(() => {
|
|
161
162
|
const c = this.comp();
|
|
162
163
|
return c?.meta.showcaseConfig.category ?? 'Uncategorized';
|
|
163
|
-
},
|
|
164
|
+
}, /* @ts-ignore */
|
|
165
|
+
...(ngDevMode ? [{ debugName: "category" }] : /* istanbul ignore next */ []));
|
|
164
166
|
variantCount = computed(() => {
|
|
165
167
|
const c = this.comp();
|
|
166
168
|
return c?.meta.showcaseConfig.variants?.length ?? 0;
|
|
167
|
-
},
|
|
168
|
-
|
|
169
|
+
}, /* @ts-ignore */
|
|
170
|
+
...(ngDevMode ? [{ debugName: "variantCount" }] : /* istanbul ignore next */ []));
|
|
171
|
+
status = computed(() => this.comp()?.meta.showcaseConfig.status, /* @ts-ignore */
|
|
172
|
+
...(ngDevMode ? [{ debugName: "status" }] : /* istanbul ignore next */ []));
|
|
169
173
|
statusBadge = computed(() => {
|
|
170
174
|
const s = this.status();
|
|
171
175
|
return s ? STATUS_BADGES[s] : null;
|
|
172
|
-
},
|
|
176
|
+
}, /* @ts-ignore */
|
|
177
|
+
...(ngDevMode ? [{ debugName: "statusBadge" }] : /* istanbul ignore next */ []));
|
|
173
178
|
coveragePercent = computed(() => {
|
|
174
179
|
const meta = this.componentMeta();
|
|
175
180
|
const coverage = meta?.['coverage'];
|
|
176
181
|
if (coverage?.['found'] && typeof coverage['score'] === 'number')
|
|
177
182
|
return coverage['score'];
|
|
178
183
|
return null;
|
|
179
|
-
},
|
|
184
|
+
}, /* @ts-ignore */
|
|
185
|
+
...(ngDevMode ? [{ debugName: "coveragePercent" }] : /* istanbul ignore next */ []));
|
|
180
186
|
bundleSize = computed(() => {
|
|
181
187
|
const meta = this.componentMeta();
|
|
182
188
|
const perf = meta?.['perf'];
|
|
@@ -186,24 +192,27 @@ export class PrismComponentHeadComponent {
|
|
|
186
192
|
if (bundle && typeof bundle['sizeKb'] === 'number')
|
|
187
193
|
return bundle['sizeKb'] + ' kb';
|
|
188
194
|
return null;
|
|
189
|
-
},
|
|
195
|
+
}, /* @ts-ignore */
|
|
196
|
+
...(ngDevMode ? [{ debugName: "bundleSize" }] : /* istanbul ignore next */ []));
|
|
190
197
|
a11yScore = computed(() => {
|
|
191
198
|
return this.auditService.scoreResult()?.score ?? null;
|
|
192
|
-
},
|
|
199
|
+
}, /* @ts-ignore */
|
|
200
|
+
...(ngDevMode ? [{ debugName: "a11yScore" }] : /* istanbul ignore next */ []));
|
|
193
201
|
componentMeta = computed(() => {
|
|
194
202
|
const c = this.comp();
|
|
195
203
|
const meta = c?.meta.showcaseConfig.meta;
|
|
196
204
|
return meta && typeof meta === 'object'
|
|
197
205
|
? meta
|
|
198
206
|
: null;
|
|
199
|
-
},
|
|
207
|
+
}, /* @ts-ignore */
|
|
208
|
+
...(ngDevMode ? [{ debugName: "componentMeta" }] : /* istanbul ignore next */ []));
|
|
200
209
|
static ɵfac = function PrismComponentHeadComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismComponentHeadComponent)(); };
|
|
201
210
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismComponentHeadComponent, selectors: [["prism-component-head"]], decls: 1, vars: 1, consts: [[1, "comp-head"], [1, "comp-head-top"], [1, "comp-crumb"], ["name", "chevron-right", 3, "size"], [1, "comp-title"], [1, "comp-selector"], [3, "class"], [1, "comp-desc"], [1, "comp-tags"], [1, "comp-head-stats"], ["label", "Variants", 3, "value"], ["label", "Coverage", 3, "value", "pill", "pillVariant"], ["label", "Bundle", 3, "value"], ["label", "Score", "pill", "A11y", 3, "value", "pillVariant"], ["name", "check", 3, "size"], ["aria-hidden", "true", 1, "comp-status-ring"], ["aria-hidden", "true", 1, "comp-status-dot"], [1, "comp-status-label"], [1, "comp-tag"]], template: function PrismComponentHeadComponent_Template(rf, ctx) { if (rf & 1) {
|
|
202
211
|
i0.ɵɵconditionalCreate(0, PrismComponentHeadComponent_Conditional_0_Template, 21, 12, "section", 0);
|
|
203
212
|
} if (rf & 2) {
|
|
204
213
|
let tmp_0_0;
|
|
205
214
|
i0.ɵɵconditional((tmp_0_0 = ctx.comp()) ? 0 : -1, tmp_0_0);
|
|
206
|
-
} }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n .comp-head[_ngcontent-%COMP%] {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n .comp-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 24px;\n padding: 0 10px 0 8px;\n border-radius: 5px;\n font-size: 11.5px;\n font-weight: 600;\n letter-spacing: 0.02em;\n border: 1px solid;\n background: transparent;\n }\n .comp-status-label[_ngcontent-%COMP%] { line-height: 1; }\n .comp-status-dot[_ngcontent-%COMP%] {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: currentColor;\n }\n .comp-status-ring[_ngcontent-%COMP%] {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n border: 1.5px solid currentColor;\n background: transparent;\n box-sizing: border-box;\n }\n .comp-status[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { display: inline-flex; }\n\n .comp-status--stable[_ngcontent-%COMP%] {\n color: var(--prism-success);\n background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n }\n .comp-status--beta[_ngcontent-%COMP%] {\n color: #60a5fa;\n background: color-mix(in srgb, #60a5fa 10%, transparent);\n border-color: color-mix(in srgb, #60a5fa 35%, transparent);\n }\n .comp-status--wip[_ngcontent-%COMP%] {\n color: var(--prism-warn);\n background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n }\n .comp-status--deprecated[_ngcontent-%COMP%] {\n color: var(--prism-text-muted);\n background: var(--prism-input-bg);\n border-color: var(--prism-border-strong);\n }\n\n .comp-desc[_ngcontent-%COMP%] {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags[_ngcontent-%COMP%] {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag[_ngcontent-%COMP%] {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }"]
|
|
215
|
+
} }, dependencies: [PrismIconComponent, PrismStatComponent], styles: ["[_nghost-%COMP%] { display: block; flex-shrink: 0; }\n\n .comp-head[_ngcontent-%COMP%] {\n padding: 12px 28px;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n position: relative;\n }\n .comp-head[_ngcontent-%COMP%]::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 6px;\n background: linear-gradient(180deg, var(--prism-primary-from) 0%, var(--prism-accent) 50%, var(--prism-primary-to) 100%);\n }\n\n .comp-head-top[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n }\n\n .comp-crumb[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: var(--fs-sm);\n color: var(--prism-text-ghost);\n margin-bottom: 6px;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n .comp-crumb[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { opacity: 0.6; }\n\n .comp-title[_ngcontent-%COMP%] {\n margin: 0;\n font-size: var(--fs-2xl);\n font-weight: 700;\n letter-spacing: -0.02em;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 10px;\n }\n\n .comp-selector[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--prism-primary);\n padding: 3px 8px;\n border-radius: var(--radius-sm);\n background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n font-weight: 500;\n }\n\n .comp-status[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n height: 24px;\n padding: 0 10px 0 8px;\n border-radius: 5px;\n font-size: 11.5px;\n font-weight: 600;\n letter-spacing: 0.02em;\n border: 1px solid;\n background: transparent;\n }\n .comp-status-label[_ngcontent-%COMP%] { line-height: 1; }\n .comp-status-dot[_ngcontent-%COMP%] {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: currentColor;\n }\n .comp-status-ring[_ngcontent-%COMP%] {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n border: 1.5px solid currentColor;\n background: transparent;\n box-sizing: border-box;\n }\n .comp-status[_ngcontent-%COMP%] prism-icon[_ngcontent-%COMP%] { display: inline-flex; }\n\n .comp-status--stable[_ngcontent-%COMP%] {\n color: var(--prism-success);\n background: color-mix(in srgb, var(--prism-success) 10%, transparent);\n border-color: color-mix(in srgb, var(--prism-success) 35%, transparent);\n }\n .comp-status--beta[_ngcontent-%COMP%] {\n color: #60a5fa;\n background: color-mix(in srgb, #60a5fa 10%, transparent);\n border-color: color-mix(in srgb, #60a5fa 35%, transparent);\n }\n .comp-status--wip[_ngcontent-%COMP%] {\n color: var(--prism-warn);\n background: color-mix(in srgb, var(--prism-warn) 10%, transparent);\n border-color: color-mix(in srgb, var(--prism-warn) 35%, transparent);\n }\n .comp-status--deprecated[_ngcontent-%COMP%] {\n color: var(--prism-text-muted);\n background: var(--prism-input-bg);\n border-color: var(--prism-border-strong);\n }\n\n .comp-desc[_ngcontent-%COMP%] {\n margin: 6px 0 0;\n font-size: var(--fs-lg);\n color: var(--prism-text-2);\n max-width: 72ch;\n line-height: 1.55;\n }\n\n .comp-tags[_ngcontent-%COMP%] {\n margin-top: 10px;\n display: flex;\n gap: 6px;\n flex-wrap: wrap;\n }\n .comp-tag[_ngcontent-%COMP%] {\n padding: 2px 8px;\n font-size: 11px;\n font-weight: 500;\n border-radius: var(--radius-xs);\n background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n color: var(--prism-primary);\n border: 1px solid color-mix(in srgb, var(--prism-primary) 20%, transparent);\n }\n\n .comp-head-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 18px;\n flex-shrink: 0;\n }"] });
|
|
207
216
|
}
|
|
208
217
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismComponentHeadComponent, [{
|
|
209
218
|
type: Component,
|
|
@@ -11,10 +11,14 @@ function PrismStatComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
|
|
|
11
11
|
i0.ɵɵtextInterpolate(ctx_r0.pill());
|
|
12
12
|
} }
|
|
13
13
|
export class PrismStatComponent {
|
|
14
|
-
value = input.required(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
value = input.required(/* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
16
|
+
label = input.required(/* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
18
|
+
pill = input(/* @ts-ignore */
|
|
19
|
+
...(ngDevMode ? [undefined, { debugName: "pill" }] : /* istanbul ignore next */ []));
|
|
20
|
+
pillVariant = input('ok', /* @ts-ignore */
|
|
21
|
+
...(ngDevMode ? [{ debugName: "pillVariant" }] : /* istanbul ignore next */ []));
|
|
18
22
|
static ɵfac = function PrismStatComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismStatComponent)(); };
|
|
19
23
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismStatComponent, selectors: [["prism-stat"]], inputs: { value: [1, "value"], label: [1, "label"], pill: [1, "pill"], pillVariant: [1, "pillVariant"] }, decls: 6, vars: 3, consts: [[1, "stat"], [1, "stat-val"], [1, "pill", 3, "warn"], [1, "stat-lbl"], [1, "pill"]], template: function PrismStatComponent_Template(rf, ctx) { if (rf & 1) {
|
|
20
24
|
i0.ɵɵdomElementStart(0, "div", 0)(1, "div", 1);
|
|
@@ -31,7 +35,7 @@ export class PrismStatComponent {
|
|
|
31
35
|
i0.ɵɵconditional(ctx.pill() ? 3 : -1);
|
|
32
36
|
i0.ɵɵadvance(2);
|
|
33
37
|
i0.ɵɵtextInterpolate(ctx.label());
|
|
34
|
-
} }, styles: [".stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 2px;\n min-width: 64px;\n }\n .stat-val[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xl);\n font-weight: 600;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .pill[_ngcontent-%COMP%] {\n padding: 0 5px;\n font-size: 9.5px;\n border-radius: 3px;\n background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n color: var(--prism-success);\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .pill.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .stat-lbl[_ngcontent-%COMP%] {\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 600;\n }"]
|
|
38
|
+
} }, styles: [".stat[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n gap: 2px;\n min-width: 64px;\n }\n .stat-val[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xl);\n font-weight: 600;\n color: var(--prism-text);\n display: flex;\n align-items: center;\n gap: 5px;\n }\n .pill[_ngcontent-%COMP%] {\n padding: 0 5px;\n font-size: 9.5px;\n border-radius: 3px;\n background: color-mix(in srgb, var(--prism-success) 15%, transparent);\n color: var(--prism-success);\n font-weight: 700;\n letter-spacing: 0.04em;\n }\n .pill.warn[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-warn) 15%, transparent);\n color: var(--prism-warn);\n }\n .stat-lbl[_ngcontent-%COMP%] {\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 600;\n }"] });
|
|
35
39
|
}
|
|
36
40
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismStatComponent, [{
|
|
37
41
|
type: Component,
|
|
@@ -42,7 +42,7 @@ function PrismComponentHeaderComponent_Conditional_0_Template(rf, ctx) { if (rf
|
|
|
42
42
|
i0.ɵɵadvance();
|
|
43
43
|
i0.ɵɵconditional(comp_r1.meta.showcaseConfig.description ? 3 : -1);
|
|
44
44
|
i0.ɵɵadvance();
|
|
45
|
-
i0.ɵɵconditional(
|
|
45
|
+
i0.ɵɵconditional(comp_r1.meta.showcaseConfig.tags?.length ? 4 : -1);
|
|
46
46
|
} }
|
|
47
47
|
export class PrismComponentHeaderComponent {
|
|
48
48
|
navigationService = inject(PrismNavigationService);
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class BooleanControlComponent {
|
|
4
|
-
value = input(false,
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
value = input(false, /* @ts-ignore */
|
|
5
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6
|
+
label = input('', /* @ts-ignore */
|
|
7
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8
|
+
typeName = input('', /* @ts-ignore */
|
|
9
|
+
...(ngDevMode ? [{ debugName: "typeName" }] : /* istanbul ignore next */ []));
|
|
7
10
|
valueChange = output();
|
|
8
11
|
static ɵfac = function BooleanControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BooleanControlComponent)(); };
|
|
9
12
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: BooleanControlComponent, selectors: [["prism-boolean-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 1, vars: 3, consts: [["role", "switch", 1, "ctl-toggle", 3, "click"]], template: function BooleanControlComponent_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -13,7 +16,7 @@ export class BooleanControlComponent {
|
|
|
13
16
|
} if (rf & 2) {
|
|
14
17
|
i0.ɵɵclassProp("on", ctx.value());
|
|
15
18
|
i0.ɵɵattribute("aria-checked", ctx.value());
|
|
16
|
-
} }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n position: relative;\n width: 34px;\n height: 18px;\n border-radius: 9px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n transition: all var(--dur-fast);\n cursor: pointer;\n flex-shrink: 0;\n padding: 0;\n }\n .ctl-toggle[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--prism-text-muted);\n transition: transform var(--dur-fast), background var(--dur-fast);\n }\n .ctl-toggle.on[_ngcontent-%COMP%] {\n background: var(--prism-primary);\n border-color: var(--prism-primary);\n }\n .ctl-toggle.on[_ngcontent-%COMP%]::after {\n transform: translateX(16px);\n background: white;\n }"]
|
|
19
|
+
} }, styles: [".ctl-toggle[_ngcontent-%COMP%] {\n position: relative;\n width: 34px;\n height: 18px;\n border-radius: 9px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n transition: all var(--dur-fast);\n cursor: pointer;\n flex-shrink: 0;\n padding: 0;\n }\n .ctl-toggle[_ngcontent-%COMP%]::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--prism-text-muted);\n transition: transform var(--dur-fast), background var(--dur-fast);\n }\n .ctl-toggle.on[_ngcontent-%COMP%] {\n background: var(--prism-primary);\n border-color: var(--prism-primary);\n }\n .ctl-toggle.on[_ngcontent-%COMP%]::after {\n transform: translateX(16px);\n background: white;\n }"] });
|
|
17
20
|
}
|
|
18
21
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BooleanControlComponent, [{
|
|
19
22
|
type: Component,
|
|
@@ -23,21 +23,30 @@ function highlightJson(json) {
|
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
25
|
export class JsonControlComponent {
|
|
26
|
-
value = input(null,
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
value = input(null, /* @ts-ignore */
|
|
27
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
28
|
+
label = input('', /* @ts-ignore */
|
|
29
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
30
|
+
typeName = input('', /* @ts-ignore */
|
|
31
|
+
...(ngDevMode ? [{ debugName: "typeName" }] : /* istanbul ignore next */ []));
|
|
29
32
|
valueChange = output();
|
|
30
|
-
parseError = signal(false,
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
33
|
+
parseError = signal(false, /* @ts-ignore */
|
|
34
|
+
...(ngDevMode ? [{ debugName: "parseError" }] : /* istanbul ignore next */ []));
|
|
35
|
+
localText = signal(null, /* @ts-ignore */
|
|
36
|
+
...(ngDevMode ? [{ debugName: "localText" }] : /* istanbul ignore next */ []));
|
|
37
|
+
textareaEl = viewChild('textareaEl', /* @ts-ignore */
|
|
38
|
+
...(ngDevMode ? [{ debugName: "textareaEl" }] : /* istanbul ignore next */ []));
|
|
39
|
+
preEl = viewChild('preEl', /* @ts-ignore */
|
|
40
|
+
...(ngDevMode ? [{ debugName: "preEl" }] : /* istanbul ignore next */ []));
|
|
34
41
|
displayText = computed(() => {
|
|
35
42
|
const local = this.localText();
|
|
36
43
|
if (local !== null)
|
|
37
44
|
return local;
|
|
38
45
|
return this.stringify(this.value());
|
|
39
|
-
},
|
|
40
|
-
|
|
46
|
+
}, /* @ts-ignore */
|
|
47
|
+
...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
48
|
+
highlightedHtml = computed(() => highlightJson(this.displayText()), /* @ts-ignore */
|
|
49
|
+
...(ngDevMode ? [{ debugName: "highlightedHtml" }] : /* istanbul ignore next */ []));
|
|
41
50
|
stringify(val) {
|
|
42
51
|
try {
|
|
43
52
|
return JSON.stringify(val, null, 2);
|
|
@@ -86,7 +95,7 @@ export class JsonControlComponent {
|
|
|
86
95
|
i0.ɵɵdomProperty("value", ctx.displayText());
|
|
87
96
|
i0.ɵɵadvance(2);
|
|
88
97
|
i0.ɵɵconditional(ctx.parseError() ? 7 : -1);
|
|
89
|
-
} }, styles: [".json-editor[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n .json-overlay[_ngcontent-%COMP%] {\n position: relative;\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-sm);\n overflow: hidden;\n transition: border-color var(--dur-fast);\n }\n .json-overlay[_ngcontent-%COMP%]:focus-within {\n border-color: var(--prism-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }\n\n .json-pre[_ngcontent-%COMP%], .json-input[_ngcontent-%COMP%] {\n margin: 0;\n padding: 4px 8px;\n font-family: var(--font-mono);\n font-size: 12px;\n line-height: 1.4;\n white-space: pre-wrap;\n word-wrap: break-word;\n tab-size: 2;\n }\n\n .json-pre[_ngcontent-%COMP%] {\n min-height: 56px;\n pointer-events: none;\n }\n .json-pre[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { font-family: inherit; }\n\n [_nghost-%COMP%] .jh-key { color: var(--prism-code-attr); }\n [_nghost-%COMP%] .jh-string { color: var(--prism-code-str); }\n [_nghost-%COMP%] .jh-number { color: var(--prism-warn); }\n [_nghost-%COMP%] .jh-bool { color: var(--prism-primary); }\n [_nghost-%COMP%] .jh-null { color: var(--prism-text-ghost); }\n\n .json-input[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n color: transparent;\n caret-color: var(--prism-text);\n border: none;\n resize: none;\n overflow: auto;\n box-sizing: border-box;\n }\n .json-input[_ngcontent-%COMP%]:focus { outline: none; }\n .json-input[_ngcontent-%COMP%]::selection { background: rgba(99, 102, 241, 0.3); }\n\n .json-error[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-danger);\n display: block;\n margin-top: 2px;\n }"]
|
|
98
|
+
} }, styles: [".json-editor[_ngcontent-%COMP%] { flex: 1; min-width: 0; }\n\n .json-overlay[_ngcontent-%COMP%] {\n position: relative;\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-sm);\n overflow: hidden;\n transition: border-color var(--dur-fast);\n }\n .json-overlay[_ngcontent-%COMP%]:focus-within {\n border-color: var(--prism-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }\n\n .json-pre[_ngcontent-%COMP%], .json-input[_ngcontent-%COMP%] {\n margin: 0;\n padding: 4px 8px;\n font-family: var(--font-mono);\n font-size: 12px;\n line-height: 1.4;\n white-space: pre-wrap;\n word-wrap: break-word;\n tab-size: 2;\n }\n\n .json-pre[_ngcontent-%COMP%] {\n min-height: 56px;\n pointer-events: none;\n }\n .json-pre[_ngcontent-%COMP%] code[_ngcontent-%COMP%] { font-family: inherit; }\n\n [_nghost-%COMP%] .jh-key { color: var(--prism-code-attr); }\n [_nghost-%COMP%] .jh-string { color: var(--prism-code-str); }\n [_nghost-%COMP%] .jh-number { color: var(--prism-warn); }\n [_nghost-%COMP%] .jh-bool { color: var(--prism-primary); }\n [_nghost-%COMP%] .jh-null { color: var(--prism-text-ghost); }\n\n .json-input[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n color: transparent;\n caret-color: var(--prism-text);\n border: none;\n resize: none;\n overflow: auto;\n box-sizing: border-box;\n }\n .json-input[_ngcontent-%COMP%]:focus { outline: none; }\n .json-input[_ngcontent-%COMP%]::selection { background: rgba(99, 102, 241, 0.3); }\n\n .json-error[_ngcontent-%COMP%] {\n font-size: 11px;\n color: var(--prism-danger);\n display: block;\n margin-top: 2px;\n }"] });
|
|
90
99
|
}
|
|
91
100
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(JsonControlComponent, [{
|
|
92
101
|
type: Component,
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class NumberControlComponent {
|
|
4
|
-
value = input(0,
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
value = input(0, /* @ts-ignore */
|
|
5
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6
|
+
label = input('', /* @ts-ignore */
|
|
7
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8
|
+
typeName = input('', /* @ts-ignore */
|
|
9
|
+
...(ngDevMode ? [{ debugName: "typeName" }] : /* istanbul ignore next */ []));
|
|
7
10
|
valueChange = output();
|
|
8
11
|
static ɵfac = function NumberControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NumberControlComponent)(); };
|
|
9
12
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: NumberControlComponent, selectors: [["prism-number-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 1, vars: 1, consts: [["type", "number", 1, "ctl-number", 3, "input", "value"]], template: function NumberControlComponent_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -12,7 +15,7 @@ export class NumberControlComponent {
|
|
|
12
15
|
i0.ɵɵdomElementEnd();
|
|
13
16
|
} if (rf & 2) {
|
|
14
17
|
i0.ɵɵdomProperty("value", ctx.value());
|
|
15
|
-
} }, styles: [".ctl-number[_ngcontent-%COMP%] {\n height: 30px;\n padding: 0 10px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-sm);\n color: var(--prism-text);\n font-size: 13px;\n font-family: var(--font-sans);\n flex: 1;\n min-width: 0;\n outline: none;\n transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n }\n .ctl-number[_ngcontent-%COMP%]:focus {\n border-color: var(--prism-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }"]
|
|
18
|
+
} }, styles: [".ctl-number[_ngcontent-%COMP%] {\n height: 30px;\n padding: 0 10px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-sm);\n color: var(--prism-text);\n font-size: 13px;\n font-family: var(--font-sans);\n flex: 1;\n min-width: 0;\n outline: none;\n transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n }\n .ctl-number[_ngcontent-%COMP%]:focus {\n border-color: var(--prism-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }"] });
|
|
16
19
|
}
|
|
17
20
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NumberControlComponent, [{
|
|
18
21
|
type: Component,
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { Component, ChangeDetectionStrategy, input, output, } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class StringControlComponent {
|
|
4
|
-
value = input('',
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
value = input('', /* @ts-ignore */
|
|
5
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
6
|
+
label = input('', /* @ts-ignore */
|
|
7
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8
|
+
typeName = input('', /* @ts-ignore */
|
|
9
|
+
...(ngDevMode ? [{ debugName: "typeName" }] : /* istanbul ignore next */ []));
|
|
7
10
|
valueChange = output();
|
|
8
11
|
static ɵfac = function StringControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || StringControlComponent)(); };
|
|
9
12
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: StringControlComponent, selectors: [["prism-string-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"] }, outputs: { valueChange: "valueChange" }, decls: 1, vars: 1, consts: [["type", "text", 1, "ctl-text", 3, "input", "value"]], template: function StringControlComponent_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -12,7 +15,7 @@ export class StringControlComponent {
|
|
|
12
15
|
i0.ɵɵdomElementEnd();
|
|
13
16
|
} if (rf & 2) {
|
|
14
17
|
i0.ɵɵdomProperty("value", ctx.value());
|
|
15
|
-
} }, styles: [".ctl-text[_ngcontent-%COMP%] {\n height: 30px;\n padding: 0 10px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-sm);\n color: var(--prism-text);\n font-size: 13px;\n font-family: var(--font-sans);\n flex: 1;\n min-width: 0;\n outline: none;\n transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n }\n .ctl-text[_ngcontent-%COMP%]:focus {\n border-color: var(--prism-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }"]
|
|
18
|
+
} }, styles: [".ctl-text[_ngcontent-%COMP%] {\n height: 30px;\n padding: 0 10px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: var(--radius-sm);\n color: var(--prism-text);\n font-size: 13px;\n font-family: var(--font-sans);\n flex: 1;\n min-width: 0;\n outline: none;\n transition: border-color var(--dur-fast), box-shadow var(--dur-fast);\n }\n .ctl-text[_ngcontent-%COMP%]:focus {\n border-color: var(--prism-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--prism-primary) 30%, transparent);\n }"] });
|
|
16
19
|
}
|
|
17
20
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(StringControlComponent, [{
|
|
18
21
|
type: Component,
|
|
@@ -14,10 +14,14 @@ function UnionControlComponent_For_2_Template(rf, ctx) { if (rf & 1) {
|
|
|
14
14
|
i0.ɵɵtextInterpolate1(" ", option_r2, " ");
|
|
15
15
|
} }
|
|
16
16
|
export class UnionControlComponent {
|
|
17
|
-
value = input('',
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
value = input('', /* @ts-ignore */
|
|
18
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
19
|
+
label = input('', /* @ts-ignore */
|
|
20
|
+
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
21
|
+
typeName = input('', /* @ts-ignore */
|
|
22
|
+
...(ngDevMode ? [{ debugName: "typeName" }] : /* istanbul ignore next */ []));
|
|
23
|
+
options = input([], /* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
21
25
|
valueChange = output();
|
|
22
26
|
static ɵfac = function UnionControlComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || UnionControlComponent)(); };
|
|
23
27
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: UnionControlComponent, selectors: [["prism-union-control"]], inputs: { value: [1, "value"], label: [1, "label"], typeName: [1, "typeName"], options: [1, "options"] }, outputs: { valueChange: "valueChange" }, decls: 3, vars: 0, consts: [["role", "group", 1, "ctl-pills"], [1, "ctl-pill", 3, "ctl-pill--active"], [1, "ctl-pill", 3, "click"]], template: function UnionControlComponent_Template(rf, ctx) { if (rf & 1) {
|
|
@@ -27,7 +31,7 @@ export class UnionControlComponent {
|
|
|
27
31
|
} if (rf & 2) {
|
|
28
32
|
i0.ɵɵadvance();
|
|
29
33
|
i0.ɵɵrepeater(ctx.options());
|
|
30
|
-
} }, styles: [".ctl-pills[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n flex-wrap: wrap;\n }\n .ctl-pill[_ngcontent-%COMP%] {\n height: 26px;\n padding: 0 10px;\n font-size: var(--fs-sm);\n font-weight: 500;\n border: 1px solid var(--prism-border);\n border-radius: 4px;\n color: var(--prism-text-muted);\n background: transparent;\n cursor: pointer;\n transition: all var(--dur-fast);\n font-family: var(--font-sans);\n }\n .ctl-pill[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n border-color: var(--prism-border-strong);\n }\n .ctl-pill--active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n color: var(--prism-primary);\n border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n font-weight: 600;\n }"]
|
|
34
|
+
} }, styles: [".ctl-pills[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n flex-wrap: wrap;\n }\n .ctl-pill[_ngcontent-%COMP%] {\n height: 26px;\n padding: 0 10px;\n font-size: var(--fs-sm);\n font-weight: 500;\n border: 1px solid var(--prism-border);\n border-radius: 4px;\n color: var(--prism-text-muted);\n background: transparent;\n cursor: pointer;\n transition: all var(--dur-fast);\n font-family: var(--font-sans);\n }\n .ctl-pill[_ngcontent-%COMP%]:hover {\n color: var(--prism-text);\n border-color: var(--prism-border-strong);\n }\n .ctl-pill--active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--prism-primary) 15%, transparent);\n color: var(--prism-primary);\n border-color: color-mix(in srgb, var(--prism-primary) 40%, transparent);\n font-weight: 600;\n }"] });
|
|
31
35
|
}
|
|
32
36
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UnionControlComponent, [{
|
|
33
37
|
type: Component,
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { Directive, ElementRef, inject, input, output } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
export class PrismResizerDirective {
|
|
4
|
-
axis = input.required(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
axis = input.required(/* @ts-ignore */
|
|
5
|
+
...(ngDevMode ? [{ debugName: "axis" }] : /* istanbul ignore next */ []));
|
|
6
|
+
min = input(200, /* @ts-ignore */
|
|
7
|
+
...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
|
|
8
|
+
max = input(600, /* @ts-ignore */
|
|
9
|
+
...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
|
|
10
|
+
value = input(0, /* @ts-ignore */
|
|
11
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
8
12
|
valueChange = output();
|
|
9
13
|
el = inject((ElementRef));
|
|
10
14
|
onMouseDown(e) {
|
|
@@ -11,8 +11,10 @@ function PrismHeaderWidgetHostComponent_Conditional_0_Template(rf, ctx) { if (rf
|
|
|
11
11
|
} }
|
|
12
12
|
const lazyCache = new Map();
|
|
13
13
|
export class PrismHeaderWidgetHostComponent {
|
|
14
|
-
widget = input.required(
|
|
15
|
-
|
|
14
|
+
widget = input.required(/* @ts-ignore */
|
|
15
|
+
...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
|
|
16
|
+
resolved = signal(null, /* @ts-ignore */
|
|
17
|
+
...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
|
|
16
18
|
constructor() {
|
|
17
19
|
effect(() => {
|
|
18
20
|
const w = this.widget();
|
|
@@ -44,7 +46,7 @@ export class PrismHeaderWidgetHostComponent {
|
|
|
44
46
|
} if (rf & 2) {
|
|
45
47
|
let tmp_0_0;
|
|
46
48
|
i0.ɵɵconditional((tmp_0_0 = ctx.resolved()) ? 0 : -1, tmp_0_0);
|
|
47
|
-
} }, dependencies: [NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: contents; }"]
|
|
49
|
+
} }, dependencies: [NgComponentOutlet], styles: ["[_nghost-%COMP%] { display: contents; }"] });
|
|
48
50
|
}
|
|
49
51
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeaderWidgetHostComponent, [{
|
|
50
52
|
type: Component,
|
|
@@ -77,20 +77,25 @@ export class PrismHeaderComponent {
|
|
|
77
77
|
widgetsStart = computed(() => [
|
|
78
78
|
...BUILTIN_HEADER_WIDGETS.filter((w) => w.placement === 'start'),
|
|
79
79
|
...this.pluginService.headerWidgetsStart(),
|
|
80
|
-
].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
|
|
80
|
+
].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), /* @ts-ignore */
|
|
81
|
+
...(ngDevMode ? [{ debugName: "widgetsStart" }] : /* istanbul ignore next */ []));
|
|
81
82
|
widgetsEnd = computed(() => [
|
|
82
83
|
...BUILTIN_HEADER_WIDGETS.filter((w) => (w.placement ?? 'end') === 'end'),
|
|
83
84
|
...this.pluginService.headerWidgetsEnd(),
|
|
84
|
-
].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)),
|
|
85
|
+
].sort((a, b) => (a.order ?? 0) - (b.order ?? 0)), /* @ts-ignore */
|
|
86
|
+
...(ngDevMode ? [{ debugName: "widgetsEnd" }] : /* istanbul ignore next */ []));
|
|
85
87
|
logoUrl = computed(() => {
|
|
86
88
|
const logo = this.config.logo;
|
|
87
89
|
if (!logo)
|
|
88
90
|
return null;
|
|
89
91
|
const isDark = this.themeService.isDark();
|
|
90
92
|
return (isDark ? logo.dark ?? logo.light : logo.light ?? logo.dark) ?? null;
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
}, /* @ts-ignore */
|
|
94
|
+
...(ngDevMode ? [{ debugName: "logoUrl" }] : /* istanbul ignore next */ []));
|
|
95
|
+
title = computed(() => this.config.title ?? 'ng-prism', /* @ts-ignore */
|
|
96
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
97
|
+
subtitle = computed(() => this.config.subtitle ?? null, /* @ts-ignore */
|
|
98
|
+
...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
94
99
|
buildInfoLabel = computed(() => {
|
|
95
100
|
const info = this.config.buildInfo;
|
|
96
101
|
if (!info)
|
|
@@ -101,7 +106,8 @@ export class PrismHeaderComponent {
|
|
|
101
106
|
if (info.gitHash)
|
|
102
107
|
parts.push(info.gitHash.slice(0, 7));
|
|
103
108
|
return parts.length ? parts.join(' · ') : null;
|
|
104
|
-
},
|
|
109
|
+
}, /* @ts-ignore */
|
|
110
|
+
...(ngDevMode ? [{ debugName: "buildInfoLabel" }] : /* istanbul ignore next */ []));
|
|
105
111
|
onGlobalKey(e) {
|
|
106
112
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
107
113
|
e.preventDefault();
|
|
@@ -152,7 +158,7 @@ export class PrismHeaderComponent {
|
|
|
152
158
|
i0.ɵɵconditional(ctx.themeService.isDark() ? 14 : 15);
|
|
153
159
|
} }, dependencies: [PrismIconComponent,
|
|
154
160
|
PrismLayoutMenuComponent,
|
|
155
|
-
PrismHeaderWidgetHostComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n height: 52px;\n display: grid;\n grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n white-space: nowrap;\n }\n\n .prism-header__logo-default[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { width: 30px; }\n\n .prism-header__logo-img[_ngcontent-%COMP%] {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar[_ngcontent-%COMP%] {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text[_ngcontent-%COMP%] {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__build-pill[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 9999px;\n padding: 2px 10px;\n white-space: nowrap;\n line-height: 1.4;\n }\n\n .prism-header__actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__widgets[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n .prism-header__widgets--start[_ngcontent-%COMP%] {\n padding-left: 4px;\n justify-content: flex-start;\n }\n\n .prism-header__icon-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n [_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }"]
|
|
161
|
+
PrismHeaderWidgetHostComponent], styles: [".prism-header[_ngcontent-%COMP%] {\n height: 52px;\n display: grid;\n grid-template-columns: minmax(min-content, var(--sw, 264px)) 1fr auto;\n align-items: center;\n padding: 0 14px 0 0;\n background: var(--prism-bg);\n border-bottom: 1px solid var(--prism-border);\n }\n\n .prism-header__brand[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 0 16px;\n cursor: pointer;\n white-space: nowrap;\n }\n\n .prism-header__logo-default[_ngcontent-%COMP%] {\n width: 26px;\n height: 26px;\n flex: 0 0 26px;\n color: var(--prism-primary);\n filter: drop-shadow(0 0 8px var(--prism-glow-strong));\n }\n .prism-header__logo-default[_ngcontent-%COMP%] img[_ngcontent-%COMP%] { width: 30px; }\n\n .prism-header__logo-img[_ngcontent-%COMP%] {\n height: 26px;\n width: auto;\n object-fit: contain;\n }\n\n .prism-header__brand-text[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n line-height: 1.1;\n }\n\n .prism-header__brand-name[_ngcontent-%COMP%] {\n font-weight: 700;\n font-size: var(--fs-xl);\n letter-spacing: -0.01em;\n background: linear-gradient(90deg, var(--prism-primary), var(--prism-accent) 60%, var(--prism-primary-to));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n }\n\n .prism-header__brand-sub[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n }\n\n .prism-header__cmdbar[_ngcontent-%COMP%] {\n max-width: 540px;\n width: 100%;\n justify-self: center;\n display: flex;\n align-items: center;\n gap: 10px;\n height: 32px;\n padding: 0 12px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 8px;\n color: var(--prism-text-muted);\n font-size: var(--fs-lg);\n cursor: pointer;\n transition: border-color var(--dur-fast), background var(--dur-fast);\n }\n .prism-header__cmdbar[_ngcontent-%COMP%]:hover {\n border-color: var(--prism-border-strong);\n color: var(--prism-text-2);\n }\n\n .prism-header__cmdbar-text[_ngcontent-%COMP%] {\n flex: 1;\n text-align: left;\n }\n\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] {\n display: flex;\n gap: 3px;\n }\n .prism-header__cmdbar-shortcut[_ngcontent-%COMP%] kbd[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: 10.5px;\n padding: 1px 5px;\n border-radius: 4px;\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n color: var(--prism-text-muted);\n }\n\n .prism-header__build-pill[_ngcontent-%COMP%] {\n font-family: var(--font-mono);\n font-size: var(--fs-xs);\n color: var(--prism-text-ghost);\n background: var(--prism-input-bg);\n border: 1px solid var(--prism-border);\n border-radius: 9999px;\n padding: 2px 10px;\n white-space: nowrap;\n line-height: 1.4;\n }\n\n .prism-header__actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 6px;\n }\n\n .prism-header__widgets[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n .prism-header__widgets--start[_ngcontent-%COMP%] {\n padding-left: 4px;\n justify-content: flex-start;\n }\n\n .prism-header__icon-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: grid;\n place-items: center;\n border-radius: 8px;\n color: var(--prism-text-muted);\n background: none;\n border: none;\n cursor: pointer;\n position: relative;\n transition: all var(--dur-fast);\n }\n .prism-header__icon-btn[_ngcontent-%COMP%]:hover {\n background: var(--prism-input-bg);\n color: var(--prism-text);\n }\n\n [_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--prism-primary);\n outline-offset: 2px;\n }"] });
|
|
156
162
|
}
|
|
157
163
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismHeaderComponent, [{
|
|
158
164
|
type: Component,
|