@ng-prism/core 22.6.0 → 22.7.0-beta.0

package/dist/app/services/prism-layout.service.js

@@ -1,6 +1,11 @@
 import { Injectable, signal } from '@angular/core';
 import * as i0 from "@angular/core";
 const STORAGE_KEY = 'ng-prism-layout';
+/** Bounds and default of the sidebar width, shared by the service, the resizer and the shell's CSS fallback. */
+export const SIDEBAR_WIDTH = { min: 200, max: 360, default: 280 };
+/** Bounds and default of the addon panel height. */
+export const PANEL_HEIGHT = { min: 200, max: 560, default: 300 };
+const clamp = (bounds, px) => Math.max(bounds.min, Math.min(bounds.max, px));
 export class PrismLayoutService {
     sidebarVisible = signal(true, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebarVisible" }] : /* istanbul ignore next */ []));
@@ -10,9 +15,9 @@ export class PrismLayoutService {
     ...(ngDevMode ? [{ debugName: "toolbarVisible" }] : /* istanbul ignore next */ []));
     addonsOrientation = signal('bottom', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "addonsOrientation" }] : /* istanbul ignore next */ []));
-    sidebarWidth = signal(280, /* @ts-ignore */
+    sidebarWidth = signal(SIDEBAR_WIDTH.default, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "sidebarWidth" }] : /* istanbul ignore next */ []));
-    panelHeight = signal(300, /* @ts-ignore */
+    panelHeight = signal(PANEL_HEIGHT.default, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelHeight" }] : /* istanbul ignore next */ []));
     panelWidth = signal(320, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
@@ -36,11 +41,11 @@ export class PrismLayoutService {
         this.saveToStorage();
     }
     setSidebarWidth(px) {
-        this.sidebarWidth.set(Math.max(160, Math.min(600, px)));
+        this.sidebarWidth.set(clamp(SIDEBAR_WIDTH, px));
         this.saveToStorage();
     }
     setPanelHeight(px) {
-        this.panelHeight.set(Math.max(100, Math.min(600, px)));
+        this.panelHeight.set(clamp(PANEL_HEIGHT, px));
         this.saveToStorage();
     }
     setPanelWidth(px) {
@@ -63,9 +68,9 @@ export class PrismLayoutService {
                 this.addonsOrientation.set(d['addonsOrientation']);
             }
             if (typeof d['sidebarWidth'] === 'number')
-                this.sidebarWidth.set(Math.max(160, Math.min(600, d['sidebarWidth'])));
+                this.sidebarWidth.set(clamp(SIDEBAR_WIDTH, d['sidebarWidth']));
             if (typeof d['panelHeight'] === 'number')
-                this.panelHeight.set(Math.max(100, Math.min(600, d['panelHeight'])));
+                this.panelHeight.set(clamp(PANEL_HEIGHT, d['panelHeight']));
             if (typeof d['panelWidth'] === 'number')
                 this.panelWidth.set(Math.max(200, Math.min(600, d['panelWidth'])));
         }
@@ -83,7 +88,12 @@ export class PrismLayoutService {
             panelHeight: this.panelHeight(),
             panelWidth: this.panelWidth()
         };
-        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+        try {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+        }
+        catch {
+            // Storage full or blocked: the layout still applies for this session.
+        }
     }
     static ɵfac = function PrismLayoutService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismLayoutService)(); };
     static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismLayoutService, factory: PrismLayoutService.ɵfac, providedIn: 'root' });

package/dist/app/services/prism-manifest.service.d.ts

@@ -1,10 +1,14 @@
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
 import type { RuntimeComponent, RuntimeManifest } from '../../plugin/plugin.types.js';
+import type { RuntimeService } from '../../plugin/service.types.js';
 import * as i0 from "@angular/core";
 export declare class PrismManifestService {
     private readonly _manifest;
     readonly manifest: import("@angular/core").Signal<RuntimeManifest>;
     readonly components: import("@angular/core").Signal<RuntimeComponent[]>;
+    readonly services: import("@angular/core").Signal<RuntimeService[]>;
+    readonly pipes: import("@angular/core").Signal<RuntimePipe[]>;
     readonly pages: import("@angular/core").Signal<StyleguidePage[]>;
     readonly categories: import("@angular/core").Signal<string[]>;
     readonly groupedByCategory: import("@angular/core").Signal<Map<string, RuntimeComponent[]>>;

package/dist/app/services/prism-manifest.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-manifest.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-manifest.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAGtF,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmD;IAE7E,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,UAAU,qDAAmE;IAEtF,QAAQ,CAAC,KAAK,mDAAkE;IAEhF,QAAQ,CAAC,UAAU,2CA0BhB;IAEH,QAAQ,CAAC,iBAAiB,kEAYvB;IAEH,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;yCAnDtC,oBAAoB;;CAsDhC"}
+{"version":3,"file":"prism-manifest.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-manifest.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AACtF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;;AAGpE,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmD;IAE7E,QAAQ,CAAC,QAAQ,kDAA+B;IAEhD,QAAQ,CAAC,UAAU,qDAAmE;IAEtF,QAAQ,CAAC,QAAQ,mDAAqE;IAEtF,QAAQ,CAAC,KAAK,gDAA+D;IAE7E,QAAQ,CAAC,KAAK,mDAAkE;IAEhF,QAAQ,CAAC,UAAU,2CA0BhB;IAEH,QAAQ,CAAC,iBAAiB,kEAYvB;IAEH,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI;yCAvDtC,oBAAoB;;CA0DhC"}

package/dist/app/services/prism-manifest.service.js

@@ -7,6 +7,10 @@ export class PrismManifestService {
     manifest = this._manifest.asReadonly();
     components = computed(() => this._manifest().components, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "components" }] : /* istanbul ignore next */ []));
+    services = computed(() => this._manifest().services ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "services" }] : /* istanbul ignore next */ []));
+    pipes = computed(() => this._manifest().pipes ?? [], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "pipes" }] : /* istanbul ignore next */ []));
     pages = computed(() => this._manifest().pages ?? [], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
     categories = computed(() => {

package/dist/app/services/prism-navigation.service.d.ts

@@ -1,5 +1,7 @@
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
 import type { RuntimeComponent, ScannedComponent } from '../../plugin/plugin.types.js';
+import type { PanelTarget, RuntimeService } from '../../plugin/service.types.js';
 import type { NavigationItem } from './navigation-item.types.js';
 import * as i0 from "@angular/core";
 export interface CategoryNode {
@@ -18,9 +20,19 @@ export declare class PrismNavigationService {
     private readonly manifestService;
     readonly activeItem: import("@angular/core").WritableSignal<NavigationItem | null>;
     readonly activeComponent: import("@angular/core").Signal<RuntimeComponent | null>;
+    readonly activeService: import("@angular/core").Signal<RuntimeService | null>;
+    readonly activePipe: import("@angular/core").Signal<RuntimePipe | null>;
+    /**
+     * What the active item is, for the panels that apply to one kind only.
+     * Built from the re-linked signals, so an item the manifest no longer has
+     * (and a page, which no panel targets) reports `null`.
+     */
+    readonly activeTarget: import("@angular/core").Signal<PanelTarget | null>;
     readonly activePage: import("@angular/core").Signal<StyleguidePage | null>;
     readonly sectionTree: import("@angular/core").Signal<SectionNode[]>;
     select(comp: RuntimeComponent): void;
+    selectService(service: RuntimeService): void;
+    selectPipe(pipe: RuntimePipe): void;
     selectPage(page: StyleguidePage): void;
     selectFirst(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismNavigationService, never>;

package/dist/app/services/prism-navigation.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-navigation.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-navigation.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACvF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAWjE,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,YAAY,EAAE,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAG1D;AAgBD,qBACa,sBAAsB;IAC/B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,QAAQ,CAAC,UAAU,gEAAuC;IAE1D,QAAQ,CAAC,eAAe,0DAQrB;IAEH,QAAQ,CAAC,UAAU,wDAQhB;IAEH,QAAQ,CAAC,WAAW,gDAiEjB;IAEH,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAIpC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAItC,WAAW,IAAI,IAAI;yCArGV,sBAAsB;;CAoHlC"}
+{"version":3,"file":"prism-navigation.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-navigation.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACvF,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAEjF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAajE,MAAM,WAAW,YAAY;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,WAAW;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,YAAY,EAAE,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAG1D;AA+BD,qBACa,sBAAsB;IAC/B,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,QAAQ,CAAC,UAAU,gEAAuC;IAE1D,QAAQ,CAAC,eAAe,0DAQrB;IAEH,QAAQ,CAAC,aAAa,wDAOnB;IAEH,QAAQ,CAAC,UAAU,qDAOhB;IAEH;;;;OAIG;IACH,QAAQ,CAAC,YAAY,qDAKlB;IAEH,QAAQ,CAAC,UAAU,wDAQhB;IAEH,QAAQ,CAAC,WAAW,gDAsEjB;IAEH,MAAM,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAIpC,aAAa,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAI5C,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI;IAInC,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAItC,WAAW,IAAI,IAAI;yCAhJV,sBAAsB;;CA2KlC"}

package/dist/app/services/prism-navigation.service.js

@@ -1,17 +1,31 @@
 import { computed, inject, Injectable, signal } from '@angular/core';
+import { itemShowcaseConfig } from './navigation-item.js';
 import { PrismManifestService } from './prism-manifest.service.js';
 import { PrismSearchService } from './prism-search.service.js';
 import * as i0 from "@angular/core";
 const DEFAULT_SECTION_ORDER = {
     Components: 0,
-    Directives: 10
+    Directives: 10,
+    Services: 20,
+    Pipes: 30
 };
-const SECTION_TIEBREAK = ['Components', 'Directives'];
+const SECTION_TIEBREAK = ['Components', 'Directives', 'Services', 'Pipes'];
 export function resolveSection(c) {
     if (c.showcaseConfig.section)
         return c.showcaseConfig.section;
     return c.componentMeta.isDirective ? 'Directives' : 'Components';
 }
+/** The section an item lists under: its own `section`, else the default for what it is. */
+function resolveItemSection(item) {
+    switch (item.kind) {
+        case 'component':
+            return resolveSection(item.data.meta);
+        case 'service':
+            return item.data.meta.showcaseConfig.section ?? 'Services';
+        case 'pipe':
+            return item.data.meta.showcaseConfig.section ?? 'Pipes';
+    }
+}
 function defaultSectionOrder(name) {
     return DEFAULT_SECTION_ORDER[name] ?? 100;
 }
@@ -40,6 +54,37 @@ export class PrismNavigationService {
         return relinked ?? null;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeComponent" }] : /* istanbul ignore next */ []));
+    activeService = computed(() => {
+        const item = this.activeItem();
+        if (item?.kind !== 'service')
+            return null;
+        const relinked = this.manifestService.services().find((s) => s.meta.className === item.data.meta.className);
+        return relinked ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeService" }] : /* istanbul ignore next */ []));
+    activePipe = computed(() => {
+        const item = this.activeItem();
+        if (item?.kind !== 'pipe')
+            return null;
+        const relinked = this.manifestService.pipes().find((p) => p.meta.className === item.data.meta.className);
+        return relinked ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activePipe" }] : /* istanbul ignore next */ []));
+    /**
+     * What the active item is, for the panels that apply to one kind only.
+     * Built from the re-linked signals, so an item the manifest no longer has
+     * (and a page, which no panel targets) reports `null`.
+     */
+    activeTarget = computed(() => {
+        if (this.activeComponent())
+            return 'component';
+        if (this.activeService())
+            return 'service';
+        if (this.activePipe())
+            return 'pipe';
+        return null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTarget" }] : /* istanbul ignore next */ []));
     activePage = computed(() => {
         const item = this.activeItem();
         if (item?.kind !== 'page')
@@ -50,18 +95,23 @@ export class PrismNavigationService {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activePage" }] : /* istanbul ignore next */ []));
     sectionTree = computed(() => {
-        const comps = this.searchService.filteredComponents();
+        const items = [
+            ...this.searchService.filteredComponents().map((data) => ({ kind: 'component', data })),
+            ...this.searchService.filteredServices().map((data) => ({ kind: 'service', data })),
+            ...this.searchService.filteredPipes().map((data) => ({ kind: 'pipe', data }))
+        ];
         const sections = new Map();
         const sectionOrders = new Map();
-        for (const comp of comps) {
-            const section = resolveSection(comp.meta);
-            const category = comp.meta.showcaseConfig.category ?? 'Uncategorized';
+        for (const item of items) {
+            const config = item.data.meta.showcaseConfig;
+            const section = resolveItemSection(item);
+            const category = config.category ?? 'Uncategorized';
             const catMap = sections.get(section) ?? new Map();
-            const items = catMap.get(category) ?? [];
-            items.push({ kind: 'component', data: comp });
-            catMap.set(category, items);
+            const list = catMap.get(category) ?? [];
+            list.push(item);
+            catMap.set(category, list);
             sections.set(section, catMap);
-            const explicit = comp.meta.showcaseConfig.sectionOrder;
+            const explicit = config.sectionOrder;
             const current = sectionOrders.get(section);
             if (explicit !== undefined) {
                 sectionOrders.set(section, current === undefined ? explicit : Math.min(current, explicit));
@@ -71,21 +121,21 @@ export class PrismNavigationService {
         for (const [name, catMap] of sections.entries()) {
             const order = sectionOrders.get(name) ?? defaultSectionOrder(name);
             const categories = [];
-            for (const [catName, items] of catMap.entries()) {
-                items.sort((a, b) => {
-                    const oa = a.kind === 'component' ? (a.data.meta.showcaseConfig.componentOrder ?? Infinity) : Infinity;
-                    const ob = b.kind === 'component' ? (b.data.meta.showcaseConfig.componentOrder ?? Infinity) : Infinity;
+            for (const [catName, catItems] of catMap.entries()) {
+                catItems.sort((a, b) => {
+                    const oa = itemShowcaseConfig(a)?.componentOrder ?? Infinity;
+                    const ob = itemShowcaseConfig(b)?.componentOrder ?? Infinity;
                     if (oa !== ob)
                         return oa - ob;
-                    const la = a.kind === 'component' ? a.data.meta.showcaseConfig.title : '';
-                    const lb = b.kind === 'component' ? b.data.meta.showcaseConfig.title : '';
+                    const la = itemShowcaseConfig(a)?.title ?? '';
+                    const lb = itemShowcaseConfig(b)?.title ?? '';
                     return la.localeCompare(lb);
                 });
-                categories.push({ name: catName, items });
+                categories.push({ name: catName, items: catItems });
             }
             categories.sort((a, b) => {
-                const oa = Math.min(...a.items.map((i) => (i.kind === 'component' ? (i.data.meta.showcaseConfig.categoryOrder ?? Infinity) : Infinity)));
-                const ob = Math.min(...b.items.map((i) => (i.kind === 'component' ? (i.data.meta.showcaseConfig.categoryOrder ?? Infinity) : Infinity)));
+                const oa = Math.min(...a.items.map((i) => itemShowcaseConfig(i)?.categoryOrder ?? Infinity));
+                const ob = Math.min(...b.items.map((i) => itemShowcaseConfig(i)?.categoryOrder ?? Infinity));
                 if (oa !== ob)
                     return oa - ob;
                 return a.name.localeCompare(b.name);
@@ -104,6 +154,12 @@ export class PrismNavigationService {
     select(comp) {
         this.activeItem.set({ kind: 'component', data: comp });
     }
+    selectService(service) {
+        this.activeItem.set({ kind: 'service', data: service });
+    }
+    selectPipe(pipe) {
+        this.activeItem.set({ kind: 'pipe', data: pipe });
+    }
     selectPage(page) {
         this.activeItem.set({ kind: 'page', data: page });
     }
@@ -118,6 +174,16 @@ export class PrismNavigationService {
             this.activeItem.set({ kind: 'component', data: comps[0] });
             return;
         }
+        const services = this.searchService.filteredServices();
+        if (services.length > 0) {
+            this.activeItem.set({ kind: 'service', data: services[0] });
+            return;
+        }
+        const pipes = this.searchService.filteredPipes();
+        if (pipes.length > 0) {
+            this.activeItem.set({ kind: 'pipe', data: pipes[0] });
+            return;
+        }
         this.activeItem.set(null);
     }
     static ɵfac = function PrismNavigationService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismNavigationService)(); };

package/dist/app/services/prism-panel.service.d.ts

@@ -20,10 +20,14 @@ export declare class PrismPanelService {
      */
     readonly viewPanels: import("@angular/core").Signal<PanelDefinition[]>;
     /**
-     * The view panels the active component actually offers.
+     * The view panels the active page actually offers.
      *
-     * Empty when no component is active, which is how pages end up without view
-     * tabs: it falls out of the data instead of needing a case of its own.
+     * A service or a pipe gets the panels that apply to its kind, all of them:
+     * `isVisible` takes a component, so it has nothing to say about either. A
+     * component gets the panels that apply to components and pass their
+     * `isVisible`. Empty when none of the three is active, which is how pages end
+     * up without view tabs: it falls out of the data instead of needing a case of
+     * its own.
      */
     readonly visibleViewPanels: import("@angular/core").Signal<PanelDefinition[]>;
     /**

package/dist/app/services/prism-panel.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,mBAAmB,EAA8B,MAAM,eAAe,CAAC;AACrH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAKpE,qBACa,iBAAiB;IAC1B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAAsF;IAElH;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,oDAAwI;IAE3J;;;;;OAKG;IACH,QAAQ,CAAC,iBAAiB,oDAKvB;IAEH;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI;yCAvC/C,iBAAiB;;CAqD7B"}
+{"version":3,"file":"prism-panel.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-panel.service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuC,mBAAmB,EAA8B,MAAM,eAAe,CAAC;AACrH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;;AAMpE,qBACa,iBAAiB;IAC1B,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA+B;IAC3D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA8B;IAC5D,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgC;IAC9D,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA0C;IAExE,QAAQ,CAAC,aAAa,iDAA8B;IACpD,QAAQ,CAAC,YAAY,iDAA8B;IAEnD,QAAQ,CAAC,mBAAmB,6DAAsF;IAElH;;;;;;;OAOG;IACH,QAAQ,CAAC,UAAU,oDAAwI;IAE3J;;;;;;;;;OASG;IACH,QAAQ,CAAC,iBAAiB,oDAUvB;IAEH;;;OAGG;IACH,WAAW,CAAC,OAAO,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI;yCAhD/C,iBAAiB;;CA8D7B"}

package/dist/app/services/prism-panel.service.js

@@ -1,5 +1,6 @@
 import { computed, createEnvironmentInjector, EnvironmentInjector, inject, Injectable, signal } from '@angular/core';
 import { PRISM_BUILTIN_PANELS } from '../tokens/prism-tokens.js';
+import { panelTargets } from '../view-tab-bar/panel-inputs.js';
 import { PrismNavigationService } from './prism-navigation.service.js';
 import { PrismPluginService } from './prism-plugin.service.js';
 import * as i0 from "@angular/core";
@@ -26,16 +27,24 @@ export class PrismPanelService {
     viewPanels = computed(() => [...this.builtinPanels.filter((p) => p.placement === 'view'), ...this.pluginService.viewPanels()], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "viewPanels" }] : /* istanbul ignore next */ []));
     /**
-     * The view panels the active component actually offers.
+     * The view panels the active page actually offers.
      *
-     * Empty when no component is active, which is how pages end up without view
-     * tabs: it falls out of the data instead of needing a case of its own.
+     * A service or a pipe gets the panels that apply to its kind, all of them:
+     * `isVisible` takes a component, so it has nothing to say about either. A
+     * component gets the panels that apply to components and pass their
+     * `isVisible`. Empty when none of the three is active, which is how pages end
+     * up without view tabs: it falls out of the data instead of needing a case of
+     * its own.
      */
     visibleViewPanels = computed(() => {
+        const target = this.navigationService.activeTarget();
+        if (target === 'service' || target === 'pipe') {
+            return this.viewPanels().filter((p) => panelTargets(p).includes(target));
+        }
         const component = this.navigationService.activeComponent();
         if (!component)
             return [];
-        return this.viewPanels().filter((p) => !p.isVisible || p.isVisible(component));
+        return this.viewPanels().filter((p) => panelTargets(p).includes('component') && (!p.isVisible || p.isVisible(component)));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "visibleViewPanels" }] : /* istanbul ignore next */ []));
     /**

package/dist/app/services/prism-renderer.service.d.ts

@@ -19,6 +19,12 @@ export declare class PrismRendererService {
     readonly inputValues: import("@angular/core").WritableSignal<Record<string, unknown>>;
     readonly activeContent: import("@angular/core").WritableSignal<string | Record<string, string> | undefined>;
     readonly renderedElement: import("@angular/core").WritableSignal<Element | null>;
+    /**
+     * The element of the showcased component or directive in what the canvas
+     * renders: in a composition the one the wrapper marks, else the rendered
+     * element itself. `null` while nothing is rendered. Since 22.7.0.
+     */
+    readonly subjectElement: import("@angular/core").Signal<Element | null>;
     readonly dirtyInputCount: import("@angular/core").Signal<number>;
     /** The component the variant, the state and the inputs belong to, `null` before the first. */
     private _lastClassName;

package/dist/app/services/prism-renderer.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-renderer.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-renderer.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAGrE,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;CAC9D;AAED,wBAAgB,mBAAmB,CAC/B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAO,GAC9E,oBAAoB,CA6CtB;AAaD,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IAEpE,QAAQ,CAAC,kBAAkB,iDAAa;IACxC;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,wDAA+B;IACxD,QAAQ,CAAC,WAAW,kEAAuC;IAC3D,QAAQ,CAAC,aAAa,sFAAkE;IACxF,QAAQ,CAAC,eAAe,yDAAgC;IAExD,QAAQ,CAAC,eAAe,yCAarB;IAEH,8FAA8F;IAC9F,OAAO,CAAC,cAAc,CAAuB;;IAc7C,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAO/C;;;;;;;OAOG;IACH,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAoDnD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOlC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIvC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/C,4BAA4B,IAAI,IAAI;IAOpC,OAAO,CAAC,YAAY;yCArIX,oBAAoB;;CA8IhC"}
+{"version":3,"file":"prism-renderer.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-renderer.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;;AAKrE,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,aAAa,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,CAAC;CAC9D;AAED,wBAAgB,mBAAmB,CAC/B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,MAAM,EACb,OAAO,GAAE;IAAE,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAAO,GAC9E,oBAAoB,CA+CtB;AA+BD,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IAEpE,QAAQ,CAAC,kBAAkB,iDAAa;IACxC;;;;OAIG;IACH,QAAQ,CAAC,gBAAgB,wDAA+B;IACxD,QAAQ,CAAC,WAAW,kEAAuC;IAC3D,QAAQ,CAAC,aAAa,sFAAkE;IACxF,QAAQ,CAAC,eAAe,yDAAgC;IACxD;;;;OAIG;IACH,QAAQ,CAAC,cAAc,iDAOpB;IAEH,QAAQ,CAAC,eAAe,yCAarB;IAEH,8FAA8F;IAC9F,OAAO,CAAC,cAAc,CAAuB;;IAc7C,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAO/C;;;;;;;OAOG;IACH,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAqDnD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOlC,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIvC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/C,4BAA4B,IAAI,IAAI;IAOpC,OAAO,CAAC,YAAY;yCAnJX,oBAAoB;;CA4JhC"}

package/dist/app/services/prism-renderer.service.js

@@ -1,4 +1,6 @@
 import { computed, effect, inject, Injectable, signal, untracked } from '@angular/core';
+import { COMPOSITION_SUBJECT_ATTR } from '../../shared/composition.js';
+import { activeCase } from '../renderer/composition.js';
 import { PrismNavigationService } from './prism-navigation.service.js';
 import * as i0 from "@angular/core";
 export function computeVariantState(comp, index, options = {}) {
@@ -31,14 +33,32 @@ export function computeVariantState(comp, index, options = {}) {
         ...defaults,
         ...filteredVariantInputs
     };
-    if (comp.meta.componentMeta.isDirective && variant?.content) {
-        values['__prismContent__'] = typeof variant.content === 'string' ? variant.content : '';
+    const hostContent = directiveHostContent(comp, index);
+    if (hostContent !== undefined) {
+        values['__prismContent__'] = hostContent;
     }
     return {
         values,
-        activeContent: comp.meta.componentMeta.isDirective ? undefined : variant?.content
+        activeContent: projectedContent(comp, index)
     };
 }
+/**
+ * The text `content` the `__PrismHost` of a directive renders through `__prismContent__`, `undefined` for a variant
+ * without content, a component, or a composed variant, whose template holds the content and whose wrapper does not
+ * declare `__prismContent__`.
+ */
+function directiveHostContent(comp, index) {
+    const content = comp.meta.showcaseConfig.variants?.[index]?.content;
+    if (!comp.meta.componentMeta.isDirective || !content || activeCase(comp, index))
+        return undefined;
+    return typeof content === 'string' ? content : '';
+}
+/** The `content` the renderer projects into a component, `undefined` for a directive and for a composed variant. */
+function projectedContent(comp, index) {
+    if (comp.meta.componentMeta.isDirective || activeCase(comp, index))
+        return undefined;
+    return comp.meta.showcaseConfig.variants?.[index]?.content;
+}
 function valuesEqual(a, b) {
     if (a === b)
         return true;
@@ -70,6 +90,19 @@ export class PrismRendererService {
     ...(ngDevMode ? [{ debugName: "activeContent" }] : /* istanbul ignore next */ []));
     renderedElement = signal(null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "renderedElement" }] : /* istanbul ignore next */ []));
+    /**
+     * The element of the showcased component or directive in what the canvas
+     * renders: in a composition the one the wrapper marks, else the rendered
+     * element itself. `null` while nothing is rendered. Since 22.7.0.
+     */
+    subjectElement = computed(() => {
+        const root = this.renderedElement();
+        if (!root)
+            return null;
+        const selector = `[${COMPOSITION_SUBJECT_ATTR}]`;
+        return root.matches(selector) ? root : (root.querySelector(selector) ?? root);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "subjectElement" }] : /* istanbul ignore next */ []));
     dirtyInputCount = computed(() => {
         const comp = this.navigationService.activeComponent();
         if (!comp)
@@ -145,11 +178,12 @@ export class PrismRendererService {
         const variant = variants[preservedIndex];
         const variantInputs = variant?.inputs ?? {};
         const merged = { ...defaults, ...variantInputs, ...preserved };
-        if (comp.meta.componentMeta.isDirective && variant?.content && preserved['__prismContent__'] === undefined) {
-            merged['__prismContent__'] = typeof variant.content === 'string' ? variant.content : '';
+        const hostContent = directiveHostContent(comp, preservedIndex);
+        if (hostContent !== undefined && preserved['__prismContent__'] === undefined) {
+            merged['__prismContent__'] = hostContent;
         }
         this.inputValues.set(merged);
-        this.activeContent.set(comp.meta.componentMeta.isDirective ? undefined : variant?.content);
+        this.activeContent.set(projectedContent(comp, preservedIndex));
     }
     selectVariant(index) {
         this.activeVariantIndex.set(index);

package/dist/app/services/prism-search.service.d.ts

@@ -1,9 +1,13 @@
 import type { StyleguidePage } from '../../plugin/page.types.js';
+import type { RuntimePipe } from '../../plugin/pipe.types.js';
+import type { RuntimeService } from '../../plugin/service.types.js';
 import * as i0 from "@angular/core";
 export declare class PrismSearchService {
     private readonly manifestService;
     readonly query: import("@angular/core").WritableSignal<string>;
     readonly filteredComponents: import("@angular/core").Signal<import("../../index.js").RuntimeComponent[]>;
+    readonly filteredServices: import("@angular/core").Signal<RuntimeService[]>;
+    readonly filteredPipes: import("@angular/core").Signal<RuntimePipe[]>;
     readonly filteredPages: import("@angular/core").Signal<StyleguidePage[]>;
     search(q: string): void;
     clear(): void;

package/dist/app/services/prism-search.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-search.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-search.service.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;;AAGjE,qBACa,kBAAkB;IAC3B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,QAAQ,CAAC,KAAK,iDAAc;IAE5B,QAAQ,CAAC,kBAAkB,8EAcxB;IAEH,QAAQ,CAAC,aAAa,mDAMnB;IAEH,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAIvB,KAAK,IAAI,IAAI;yCAjCJ,kBAAkB;;CAoC9B"}
+{"version":3,"file":"prism-search.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-search.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;;AAkBpE,qBACa,kBAAkB;IAC3B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAEhE,QAAQ,CAAC,KAAK,iDAAc;IAE5B,QAAQ,CAAC,kBAAkB,8EAMxB;IAEH,QAAQ,CAAC,gBAAgB,mDAMtB;IAEH,QAAQ,CAAC,aAAa,gDAMnB;IAEH,QAAQ,CAAC,aAAa,mDAMnB;IAEH,MAAM,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI;IAIvB,KAAK,IAAI,IAAI;yCAzCJ,kBAAkB;;CA4C9B"}

package/dist/app/services/prism-search.service.js

@@ -1,6 +1,18 @@
 import { computed, inject, Injectable, signal } from '@angular/core';
 import { PrismManifestService } from './prism-manifest.service.js';
 import * as i0 from "@angular/core";
+/**
+ * Whether a showcased item matches a query that is already lowercased and
+ * trimmed: its title, category or tags, or one of `names`, the identifiers
+ * that only some kinds have (a service's class name, a pipe's class name and
+ * template name).
+ */
+function matchesQuery(q, config, names = []) {
+    return (config.title.toLowerCase().includes(q) ||
+        names.some((name) => name.toLowerCase().includes(q)) ||
+        (config.category?.toLowerCase().includes(q) ?? false) ||
+        (config.tags?.some((t) => t.toLowerCase().includes(q)) ?? false));
+}
 export class PrismSearchService {
     manifestService = inject(PrismManifestService);
     query = signal('', /* @ts-ignore */
@@ -10,14 +22,25 @@ export class PrismSearchService {
         const all = this.manifestService.components();
         if (!q)
             return all;
-        return all.filter((comp) => {
-            const config = comp.meta.showcaseConfig;
-            return (config.title.toLowerCase().includes(q) ||
-                (config.category?.toLowerCase().includes(q) ?? false) ||
-                (config.tags?.some((t) => t.toLowerCase().includes(q)) ?? false));
-        });
+        return all.filter((comp) => matchesQuery(q, comp.meta.showcaseConfig));
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filteredComponents" }] : /* istanbul ignore next */ []));
+    filteredServices = computed(() => {
+        const q = this.query().toLowerCase().trim();
+        const all = this.manifestService.services();
+        if (!q)
+            return all;
+        return all.filter((service) => matchesQuery(q, service.meta.showcaseConfig, [service.meta.className]));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredServices" }] : /* istanbul ignore next */ []));
+    filteredPipes = computed(() => {
+        const q = this.query().toLowerCase().trim();
+        const all = this.manifestService.pipes();
+        if (!q)
+            return all;
+        return all.filter((pipe) => matchesQuery(q, pipe.meta.showcaseConfig, [pipe.meta.className, pipe.meta.pipeName]));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "filteredPipes" }] : /* istanbul ignore next */ []));
     filteredPages = computed(() => {
         const q = this.query().toLowerCase().trim();
         const all = this.manifestService.pages();

package/dist/app/services/prism-theme.service.d.ts

@@ -2,9 +2,17 @@ import * as i0 from "@angular/core";
 export declare class PrismThemeService {
     readonly theme: import("@angular/core").WritableSignal<"light" | "dark">;
     readonly isDark: import("@angular/core").Signal<boolean>;
-    private configOverrides;
-    private darkOverrides;
-    private lightOverrides;
+    private readonly overrides;
+    /** Every token of the active mode, including the user's overrides. */
+    readonly appTokens: import("@angular/core").Signal<Record<string, string>>;
+    /**
+     * The dark set, for the header: since 22.7 it is a navy brand band in both
+     * themes. Bound as an inline style on the header host, so tokens composed
+     * from others (tints, status surfaces) are evaluated there again rather than
+     * inherited already resolved against the light theme.
+     */
+    readonly headerTokens: import("@angular/core").Signal<Record<string, string>>;
+    private readonly warnedDeprecations;
     constructor();
     toggle(): void;
     applyConfigOverrides(config: {

package/dist/app/services/prism-theme.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-theme.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-theme.service.ts"],"names":[],"mappings":";AAMA,qBACa,iBAAiB;IAC1B,QAAQ,CAAC,KAAK,2DAAoD;IAClE,QAAQ,CAAC,MAAM,0CAA2C;IAE1D,OAAO,CAAC,eAAe,CAA8B;IACrD,OAAO,CAAC,aAAa,CAA8B;IACnD,OAAO,CAAC,cAAc,CAA8B;;IAapD,MAAM,IAAI,IAAI;IAId,oBAAoB,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI;IAO/I,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,eAAe;yCA5Dd,iBAAiB;;CAsE7B"}
+{"version":3,"file":"prism-theme.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-theme.service.ts"],"names":[],"mappings":";AAOA,qBACa,iBAAiB;IAC1B,QAAQ,CAAC,KAAK,2DAAoD;IAClE,QAAQ,CAAC,MAAM,0CAA2C;IAE1D,OAAO,CAAC,QAAQ,CAAC,SAAS,CAA8B;IAExD,sEAAsE;IACtE,QAAQ,CAAC,SAAS,yDAA6E;IAE/F;;;;;OAKG;IACH,QAAQ,CAAC,YAAY,yDAAuE;IAE5F,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAqB;;IAaxD,MAAM,IAAI,IAAI;IAId,oBAAoB,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,GAAG,IAAI;IAK/I,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,eAAe;yCAjEd,iBAAiB;;CA2E7B"}