@ng-prism/core 22.5.0 → 22.6.0

package/dist/app/services/prism-pseudo-state.service.d.ts

@@ -1,24 +1,48 @@
+import type { ShowcaseState } from '../../decorator/showcase.types.js';
 import { type ForcedPseudoStates, type PseudoState } from '../../shared/pseudo-state.type.js';
 import { PseudoStateMarker } from '../pseudo/pseudo-state-marker.js';
+import type { StateFit } from '../pseudo/state-fit.js';
 import * as i0 from "@angular/core";
 /** Per state: forced on (`true`) or off (`false`) on top of what the variant declares. */
 export type PseudoStateOverride = Partial<Record<PseudoState, boolean>>;
+/** What the canvas forces, in the two layers the marker takes. */
+export interface PseudoLayers {
+    /** The variant's own states, with the user's toggles on top: forced as they are. */
+    base: ForcedPseudoStates | null;
+    /** The active state's pseudo: forced only where {@link PrismPseudoStateService.canvasFit} says it fits. `null` when no state applies, or the toggles switched off all of it. */
+    state: ForcedPseudoStates | null;
+}
 /**
- * `declared` with the user's toggles from the tools menu on top.
+ * The variant's and the active state's pseudo states with the user's toggles
+ * from the tools menu on top.
  *
- * Returns `declared` itself while nothing is toggled, so the renderer, which
- * waits for the exact states object it was given, is not sent a copy. A state
- * switched on from the menu applies to the whole component (`true`), the way a
- * pointer over it would. One the variant declares keeps its own target.
+ * Returns the two objects it was given while nothing is toggled, so the
+ * renderer, which waits for the exact objects it handed the marker, is not sent
+ * a copy. A state switched on from the menu applies to the whole component
+ * (`true`), the way a pointer over it would, and lands in `base`, which the fit
+ * rule does not touch. One the variant or the state declares keeps its own
+ * target in its own layer, except that a state which does not fit
+ * (`stateFits: false`) is not applied, so a class only it declares is forced on
+ * the whole component instead. The state layer itself is the same either way:
+ * the marker still gets it, to see when the state fits again. A state switched
+ * off leaves both layers. Once the
+ * toggles have switched off every class the active state declares, its layer is
+ * `null`: that is the user's doing, not a state that forces nothing. A state
+ * that declares nothing itself (a slot the scanner could not evaluate) stays an
+ * empty object, so the marker can report it.
  */
-export declare function withOverride(declared: ForcedPseudoStates | null, override: PseudoStateOverride): ForcedPseudoStates | null;
+export declare function splitLayers(variantPseudo: ForcedPseudoStates | null, statePseudo: ForcedPseudoStates | null, override: PseudoStateOverride, stateFits?: boolean): PseudoLayers;
 /**
- * The pseudo states the canvas forces on the active variant.
+ * The pseudo states the canvas forces on the active variant and the active
+ * component-level state.
  *
- * `declared` is `Variant.pseudo`. The tools menu can switch states on and off
- * on top of it; like the background override, that toggle is transient and
- * resets when the variant or the component changes. Capture mode ignores it:
- * it is session UI state and must not shape a baseline.
+ * `declared` is `Variant.pseudo`, `activeState` is the `ShowcaseState` picked
+ * in `PrismRendererService.activeStateIndex`. They are two layers
+ * ({@link PseudoLayers}) because only the state's is subject to the fit rule.
+ * The tools menu can switch single states on and off on top of both; like the
+ * background override, that toggle is transient and resets when the variant, the
+ * state or the component changes. Capture mode ignores it, but applies the
+ * state: session UI state must not shape a baseline, the addressed cell must.
  *
  * Also owns the document's {@link PseudoStyleSheets}, which every marker shares
  * so each stylesheet is rewritten once, whether the Playground canvas or an
@@ -29,15 +53,36 @@ export declare class PrismPseudoStateService {
     private readonly renderer;
     private readonly capture;
     private readonly stylesheets;
+    private readonly activeVariant;
     readonly declared: import("@angular/core").Signal<Partial<Record<PseudoState, import("../../shared/pseudo-state.type.js").PseudoTarget>> | null>;
+    /** The component-level state on the canvas, whether or not the active variant takes part in it. */
+    readonly activeState: import("@angular/core").Signal<ShowcaseState | null>;
+    /** `'states: false'` when the active variant opts out while a state is active, else `null`. */
+    readonly stateExclusion: import("@angular/core").Signal<string | null>;
+    /** What the active state forces: its pseudo, `null` when none is active or the variant opted out. */
+    private readonly statePseudo;
     private readonly _override;
     readonly override: import("@angular/core").Signal<Partial<Record<PseudoState, boolean>>>;
-    /** What the canvas forces: `declared`, with the user's toggles on top outside capture mode. */
-    readonly effective: import("@angular/core").Signal<Partial<Record<PseudoState, import("../../shared/pseudo-state.type.js").PseudoTarget>> | null>;
+    /**
+     * Whether the active state fits the rendered canvas. Written by the
+     * renderer from its marker, `null` while no state is applied.
+     */
+    readonly canvasFit: import("@angular/core").WritableSignal<StateFit | null>;
+    /** `canvasFit` before the first render counts as fitting; a computed so a changed reason alone does not rebuild `layers`. */
+    private readonly stateFits;
+    /** What the canvas forces: `declared` and the active state with the user's toggles on top, which capture mode leaves out. */
+    readonly layers: import("@angular/core").Signal<PseudoLayers>;
     constructor();
+    /** Whether `state` is forced on the canvas now: by the variant, or by the active state while it fits. */
     isForced(state: PseudoState): boolean;
+    /**
+     * Whether the active variant declares `state`, or the active state does
+     * while it fits. A state that does not fit is not applied, so what it
+     * declares is no longer a default the menu can switch off: switching it on
+     * forces it on the whole component.
+     */
     isDeclared(state: PseudoState): boolean;
-    /** Flips `state` against what is forced now. Flipping it back to what the variant declares drops the toggle. */
+    /** Flips `state` against what is forced now. Flipping it back to what the variant or state declares drops the toggle. */
     toggle(state: PseudoState): void;
     clearOverride(): void;
     /** A marker for one rendered component, sharing this app's rewritten stylesheets. */

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

@@ -1 +1 @@
-{"version":3,"file":"prism-pseudo-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-pseudo-state.service.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;;AAMrE,0FAA0F;AAC1F,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAExE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,kBAAkB,GAAG,IAAI,EAAE,QAAQ,EAAE,mBAAmB,GAAG,kBAAkB,GAAG,IAAI,CAY1H;AAED;;;;;;;;;;;GAWG;AACH,qBACa,uBAAuB;IAChC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IACvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2C;IAEvE,QAAQ,CAAC,QAAQ,gIAKd;IAEH,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmC;IAC7D,QAAQ,CAAC,QAAQ,wEAA+B;IAEhD,+FAA+F;IAC/F,QAAQ,CAAC,SAAS,gIAA0I;;IAU5J,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAIrC,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAIvC,gHAAgH;IAChH,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAYhC,aAAa,IAAI,IAAI;IAIrB,qFAAqF;IACrF,YAAY,IAAI,iBAAiB;yCArDxB,uBAAuB;;CAwDnC"}
+{"version":3,"file":"prism-pseudo-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-pseudo-state.service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAW,MAAM,mCAAmC,CAAC;AAChF,OAAO,EAAE,KAAK,kBAAkB,EAAiB,KAAK,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC7G,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAC;AAErE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;;AAKvD,0FAA0F;AAC1F,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;AAExE,kEAAkE;AAClE,MAAM,WAAW,YAAY;IACzB,oFAAoF;IACpF,IAAI,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAChC,gLAAgL;IAChL,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,WAAW,CACvB,aAAa,EAAE,kBAAkB,GAAG,IAAI,EACxC,WAAW,EAAE,kBAAkB,GAAG,IAAI,EACtC,QAAQ,EAAE,mBAAmB,EAC7B,SAAS,UAAO,GACjB,YAAY,CAqBd;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBACa,uBAAuB;IAChC,OAAO,CAAC,QAAQ,CAAC,UAAU,CAAkC;IAC7D,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAgC;IACzD,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA+B;IACvD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA2C;IAEvE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAI3B;IAEH,QAAQ,CAAC,QAAQ,gIAAmF;IAEpG,mGAAmG;IACnG,QAAQ,CAAC,WAAW,uDAKjB;IAEH,+FAA+F;IAC/F,QAAQ,CAAC,cAAc,gDAA0H;IAEjJ,qGAAqG;IACrG,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA6H;IAEzJ,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAmC;IAC7D,QAAQ,CAAC,QAAQ,wEAA+B;IAEhD;;;OAGG;IACH,QAAQ,CAAC,SAAS,0DAAiC;IAEnD,6HAA6H;IAC7H,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAoD;IAE9E,6HAA6H;IAC7H,QAAQ,CAAC,MAAM,+CAGZ;;IAWH,yGAAyG;IACzG,QAAQ,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAMrC;;;;;OAKG;IACH,UAAU,CAAC,KAAK,EAAE,WAAW,GAAG,OAAO;IAIvC,yHAAyH;IACzH,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI;IAYhC,aAAa,IAAI,IAAI;IAIrB,qFAAqF;IACrF,YAAY,IAAI,iBAAiB;yCA1FxB,uBAAuB;;CA6FnC"}

package/dist/app/services/prism-pseudo-state.service.js

@@ -8,32 +8,56 @@ import { PrismNavigationService } from './prism-navigation.service.js';
 import { PrismRendererService } from './prism-renderer.service.js';
 import * as i0 from "@angular/core";
 /**
- * `declared` with the user's toggles from the tools menu on top.
+ * The variant's and the active state's pseudo states with the user's toggles
+ * from the tools menu on top.
  *
- * Returns `declared` itself while nothing is toggled, so the renderer, which
- * waits for the exact states object it was given, is not sent a copy. A state
- * switched on from the menu applies to the whole component (`true`), the way a
- * pointer over it would. One the variant declares keeps its own target.
+ * Returns the two objects it was given while nothing is toggled, so the
+ * renderer, which waits for the exact objects it handed the marker, is not sent
+ * a copy. A state switched on from the menu applies to the whole component
+ * (`true`), the way a pointer over it would, and lands in `base`, which the fit
+ * rule does not touch. One the variant or the state declares keeps its own
+ * target in its own layer, except that a state which does not fit
+ * (`stateFits: false`) is not applied, so a class only it declares is forced on
+ * the whole component instead. The state layer itself is the same either way:
+ * the marker still gets it, to see when the state fits again. A state switched
+ * off leaves both layers. Once the
+ * toggles have switched off every class the active state declares, its layer is
+ * `null`: that is the user's doing, not a state that forces nothing. A state
+ * that declares nothing itself (a slot the scanner could not evaluate) stays an
+ * empty object, so the marker can report it.
  */
-export function withOverride(declared, override) {
+export function splitLayers(variantPseudo, statePseudo, override, stateFits = true) {
     if (Object.keys(override).length === 0)
-        return declared;
-    const states = {};
-    for (const state of PSEUDO_STATES) {
-        const forced = override[state];
-        const target = forced === undefined ? declared?.[state] : forced ? (declared?.[state] ?? true) : undefined;
-        if (target !== undefined)
-            states[state] = target;
+        return { base: variantPseudo, state: statePseudo };
+    const base = {};
+    const state = {};
+    for (const name of PSEUDO_STATES) {
+        const forced = override[name];
+        if (forced === false)
+            continue;
+        const fromVariant = variantPseudo?.[name];
+        const fromState = statePseudo?.[name];
+        if (fromVariant !== undefined)
+            base[name] = fromVariant;
+        if (fromState !== undefined)
+            state[name] = fromState;
+        if (forced && fromVariant === undefined && (fromState === undefined || !stateFits))
+            base[name] = true;
     }
-    return Object.keys(states).length > 0 ? states : null;
+    const switchedOff = Object.keys(state).length === 0 && Object.keys(statePseudo ?? {}).length > 0;
+    return { base: Object.keys(base).length > 0 ? base : null, state: statePseudo && !switchedOff ? state : null };
 }
 /**
- * The pseudo states the canvas forces on the active variant.
+ * The pseudo states the canvas forces on the active variant and the active
+ * component-level state.
  *
- * `declared` is `Variant.pseudo`. The tools menu can switch states on and off
- * on top of it; like the background override, that toggle is transient and
- * resets when the variant or the component changes. Capture mode ignores it:
- * it is session UI state and must not shape a baseline.
+ * `declared` is `Variant.pseudo`, `activeState` is the `ShowcaseState` picked
+ * in `PrismRendererService.activeStateIndex`. They are two layers
+ * ({@link PseudoLayers}) because only the state's is subject to the fit rule.
+ * The tools menu can switch single states on and off on top of both; like the
+ * background override, that toggle is transient and resets when the variant, the
+ * state or the component changes. Capture mode ignores it, but applies the
+ * state: session UI state must not shape a baseline, the addressed cell must.
  *
  * Also owns the document's {@link PseudoStyleSheets}, which every marker shares
  * so each stylesheet is rewritten once, whether the Playground canvas or an
@@ -44,33 +68,66 @@ export class PrismPseudoStateService {
     renderer = inject(PrismRendererService);
     capture = inject(PrismCaptureService);
     stylesheets = new PseudoStyleSheets(inject(DOCUMENT));
-    declared = computed(() => {
+    activeVariant = computed(() => {
         const comp = this.navigation.activeComponent();
-        if (!comp)
-            return null;
-        return comp.meta.showcaseConfig.variants?.[this.renderer.activeVariantIndex()]?.pseudo ?? null;
+        return comp?.meta.showcaseConfig.variants?.[this.renderer.activeVariantIndex()] ?? null;
     }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeVariant" }] : /* istanbul ignore next */ []));
+    declared = computed(() => this.activeVariant()?.pseudo ?? null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "declared" }] : /* istanbul ignore next */ []));
+    /** The component-level state on the canvas, whether or not the active variant takes part in it. */
+    activeState = computed(() => {
+        const index = this.renderer.activeStateIndex();
+        if (index === null)
+            return null;
+        return this.navigation.activeComponent()?.meta.showcaseConfig.states?.[index] ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeState" }] : /* istanbul ignore next */ []));
+    /** `'states: false'` when the active variant opts out while a state is active, else `null`. */
+    stateExclusion = computed(() => (this.activeState() && this.activeVariant()?.states === false ? 'states: false' : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateExclusion" }] : /* istanbul ignore next */ []));
+    /** What the active state forces: its pseudo, `null` when none is active or the variant opted out. */
+    statePseudo = computed(() => (this.stateExclusion() === null ? (this.activeState()?.pseudo ?? null) : null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "statePseudo" }] : /* istanbul ignore next */ []));
     _override = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "_override" }] : /* istanbul ignore next */ []));
     override = this._override.asReadonly();
-    /** What the canvas forces: `declared`, with the user's toggles on top outside capture mode. */
-    effective = computed(() => (this.capture.active() ? this.declared() : withOverride(this.declared(), this._override())), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "effective" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the active state fits the rendered canvas. Written by the
+     * renderer from its marker, `null` while no state is applied.
+     */
+    canvasFit = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canvasFit" }] : /* istanbul ignore next */ []));
+    /** `canvasFit` before the first render counts as fitting; a computed so a changed reason alone does not rebuild `layers`. */
+    stateFits = computed(() => this.canvasFit()?.fits !== false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stateFits" }] : /* istanbul ignore next */ []));
+    /** What the canvas forces: `declared` and the active state with the user's toggles on top, which capture mode leaves out. */
+    layers = computed(() => splitLayers(this.declared(), this.statePseudo(), this.capture.active() ? {} : this._override(), this.stateFits()), { ...(ngDevMode ? { debugName: "layers" } : /* istanbul ignore next */ {}), 
+        // A reset to `{}` writes a fresh override and would hand out a new wrapper around the same two objects, which re-applies the marker for nothing.
+        equal: (a, b) => a.base === b.base && a.state === b.state });
     constructor() {
         effect(() => {
             this.navigation.activeComponent();
             this.renderer.activeVariantIndex();
+            this.renderer.activeStateIndex();
             this._override.set({});
         });
     }
+    /** Whether `state` is forced on the canvas now: by the variant, or by the active state while it fits. */
     isForced(state) {
-        return this.effective()?.[state] !== undefined;
+        const { base, state: layer } = this.layers();
+        return base?.[state] !== undefined || (!!this.canvasFit()?.fits && layer?.[state] !== undefined);
     }
+    /**
+     * Whether the active variant declares `state`, or the active state does
+     * while it fits. A state that does not fit is not applied, so what it
+     * declares is no longer a default the menu can switch off: switching it on
+     * forces it on the whole component.
+     */
     isDeclared(state) {
-        return this.declared()?.[state] !== undefined;
+        return this.declared()?.[state] !== undefined || (this.stateFits() && this.statePseudo()?.[state] !== undefined);
     }
-    /** Flips `state` against what is forced now. Flipping it back to what the variant declares drops the toggle. */
+    /** Flips `state` against what is forced now. Flipping it back to what the variant or state declares drops the toggle. */
     toggle(state) {
         const forced = !this.isForced(state);
         this._override.update((override) => {

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

@@ -10,14 +10,31 @@ export declare function computeVariantState(comp: RuntimeComponent, index: numbe
 export declare class PrismRendererService {
     private readonly navigationService;
     readonly activeVariantIndex: import("@angular/core").WritableSignal<number>;
+    /**
+     * Position in `ShowcaseConfig.states` of the component-level state on the
+     * canvas, `null` for none. Part of the addressed cell next to the variant:
+     * it survives a variant change and goes with the component.
+     */
+    readonly activeStateIndex: import("@angular/core").WritableSignal<number | null>;
     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>;
     readonly dirtyInputCount: import("@angular/core").Signal<number>;
+    /** The component the variant, the state and the inputs belong to, `null` before the first. */
     private _lastClassName;
+    constructor();
     resetForComponent(comp: RuntimeComponent): void;
+    /**
+     * Brings the variant, the state and the inputs in line with `comp`: a full
+     * reset when it is another component than the last one, else the variant
+     * and the state clamped to what it still declares and the inputs kept.
+     * Runs on every navigation and again when the renderer mounts, which then
+     * finds the component current and keeps what an Overview cell or a restore
+     * selected.
+     */
     reconcileForComponent(comp: RuntimeComponent): void;
     selectVariant(index: number): void;
+    selectState(index: number | null): void;
     updateInput(name: string, value: unknown): void;
     resetInputsToVariantDefaults(): void;
     private applyVariant;

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,QAAQ,CAAC,WAAW,kEAAuC;IAC3D,QAAQ,CAAC,aAAa,sFAAkE;IACxF,QAAQ,CAAC,eAAe,yDAAgC;IAExD,QAAQ,CAAC,eAAe,yCAarB;IAEH,OAAO,CAAC,cAAc,CAAuB;IAE7C,iBAAiB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IAM/C,qBAAqB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI;IA+CnD,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAOlC,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI;IAI/C,4BAA4B,IAAI,IAAI;IAOpC,OAAO,CAAC,YAAY;yCAhGX,oBAAoB;;CAyGhC"}
+{"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"}

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

@@ -1,4 +1,4 @@
-import { computed, inject, Injectable, signal } from '@angular/core';
+import { computed, effect, inject, Injectable, signal, untracked } from '@angular/core';
 import { PrismNavigationService } from './prism-navigation.service.js';
 import * as i0 from "@angular/core";
 export function computeVariantState(comp, index, options = {}) {
@@ -57,6 +57,13 @@ export class PrismRendererService {
     navigationService = inject(PrismNavigationService);
     activeVariantIndex = signal(0, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "activeVariantIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Position in `ShowcaseConfig.states` of the component-level state on the
+     * canvas, `null` for none. Part of the addressed cell next to the variant:
+     * it survives a variant change and goes with the component.
+     */
+    activeStateIndex = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeStateIndex" }] : /* istanbul ignore next */ []));
     inputValues = signal({}, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inputValues" }] : /* istanbul ignore next */ []));
     activeContent = signal(undefined, /* @ts-ignore */
@@ -78,20 +85,45 @@ export class PrismRendererService {
         return count;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dirtyInputCount" }] : /* istanbul ignore next */ []));
+    /** The component the variant, the state and the inputs belong to, `null` before the first. */
     _lastClassName = null;
+    constructor() {
+        // The variant and the state go with the component in every view, so the reset on a switch follows
+        // navigation, not the renderer: the shell mounts `<prism-renderer>` in the Playground only, and the Overview
+        // keeps its view when the sidebar picks another component. A root effect, created before the URL service's,
+        // so it runs first in the same flush and the URL never sees the previous component's cell on the new one.
+        effect(() => {
+            const comp = this.navigationService.activeComponent();
+            if (comp)
+                untracked(() => this.reconcileForComponent(comp));
+        });
+    }
     resetForComponent(comp) {
         this._lastClassName = comp.meta.className;
         this.activeVariantIndex.set(0);
+        this.activeStateIndex.set(null);
         this.applyVariant(0, comp);
     }
+    /**
+     * Brings the variant, the state and the inputs in line with `comp`: a full
+     * reset when it is another component than the last one, else the variant
+     * and the state clamped to what it still declares and the inputs kept.
+     * Runs on every navigation and again when the renderer mounts, which then
+     * finds the component current and keeps what an Overview cell or a restore
+     * selected.
+     */
     reconcileForComponent(comp) {
         const prev = this._lastClassName;
         this._lastClassName = comp.meta.className;
         if (prev !== null && prev !== comp.meta.className) {
             this.activeVariantIndex.set(0);
+            this.activeStateIndex.set(null);
             this.applyVariant(0, comp);
             return;
         }
+        const stateIndex = this.activeStateIndex();
+        if (stateIndex !== null && stateIndex >= (comp.meta.showcaseConfig.states?.length ?? 0))
+            this.activeStateIndex.set(null);
         const variants = comp.meta.showcaseConfig.variants ?? [];
         const maxIndex = Math.max(0, variants.length - 1);
         const preservedIndex = Math.min(this.activeVariantIndex(), maxIndex);
@@ -125,6 +157,9 @@ export class PrismRendererService {
         if (comp)
             this.applyVariant(index, comp);
     }
+    selectState(index) {
+        this.activeStateIndex.set(index);
+    }
     updateInput(name, value) {
         this.inputValues.update((prev) => ({ ...prev, [name]: value }));
     }
@@ -147,4 +182,4 @@ export class PrismRendererService {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismRendererService, [{
         type: Injectable,
         args: [{ providedIn: 'root' }]
-    }], null, null); })();
+    }], () => [], null); })();

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

@@ -1 +1 @@
-{"version":3,"file":"prism-url-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-url-state.service.ts"],"names":[],"mappings":";AAgBA,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwB;IAC/C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAE7C,OAAO,CAAC,YAAY,CAAS;IAE7B,IAAI,IAAI,IAAI;IAqBZ,OAAO,CAAC,cAAc;IA2CtB,OAAO,CAAC,UAAU;yCA1ET,oBAAoB;;CA+GhC"}
+{"version":3,"file":"prism-url-state.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-url-state.service.ts"],"names":[],"mappings":";AAiCA,qBACa,oBAAoB;IAC7B,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAkC;IACpE,OAAO,CAAC,QAAQ,CAAC,eAAe,CAAgC;IAChE,OAAO,CAAC,QAAQ,CAAC,YAAY,CAA6B;IAC1D,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAwB;IAC/C,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAAoB;IAE7C,OAAO,CAAC,YAAY,CAAS;IAE7B,IAAI,IAAI,IAAI;IAsBZ,OAAO,CAAC,cAAc;IA2DtB,OAAO,CAAC,UAAU;yCA3FT,oBAAoB;;CAmIhC"}

package/dist/app/services/prism-url-state.service.js

@@ -8,10 +8,25 @@ import * as i0 from "@angular/core";
 const PARAM_COMPONENT = 'component';
 const PARAM_PAGE = 'page';
 const PARAM_VARIANT = 'variant';
+const PARAM_STATE = 'state';
 const PARAM_VIEW = 'view';
 const DEFAULT_VIEW = 'renderer';
 const PARAM_PANEL = 'panel';
 const DEFAULT_PANEL = 'controls';
+/** The index a `variant` parameter addresses in a list of `count` variants, `0` for anything that is not one. */
+function parseVariantIndex(param, count) {
+    if (param === null)
+        return 0;
+    const index = parseInt(param, 10);
+    return !Number.isNaN(index) && index >= 0 && index < count ? index : 0;
+}
+/** The index a `state` parameter addresses in a list of `count` states, `null` for anything that is not one. */
+function parseStateIndex(param, count) {
+    if (param === null || !/^\d+$/.test(param))
+        return null;
+    const index = Number(param);
+    return index < count ? index : null;
+}
 export class PrismUrlStateService {
     manifestService = inject(PrismManifestService);
     navigationService = inject(PrismNavigationService);
@@ -27,11 +42,12 @@ export class PrismUrlStateService {
         effect(() => {
             const item = this.navigationService.activeItem();
             const variantIndex = this.rendererService.activeVariantIndex();
+            const stateIndex = this.rendererService.activeStateIndex();
             const viewId = this.panelService.activeViewId();
             const panelId = this.panelService.activePanelId();
             if (this.suppressSync)
                 return;
-            this.writeToUrl(item, variantIndex, viewId, panelId);
+            this.writeToUrl(item, variantIndex, stateIndex, viewId, panelId);
         }, { injector: this.injector });
         window.addEventListener('popstate', () => this.restoreFromUrl());
     }
@@ -40,21 +56,32 @@ export class PrismUrlStateService {
         const componentClassName = params.get(PARAM_COMPONENT);
         const pageTitle = params.get(PARAM_PAGE);
         const variantParam = params.get(PARAM_VARIANT);
+        const stateParam = params.get(PARAM_STATE);
         const viewId = params.get(PARAM_VIEW);
         const panelId = params.get(PARAM_PANEL);
+        let stateIndex = null;
         this.suppressSync = true;
         try {
             if (componentClassName) {
                 const comp = this.manifestService.components().find((c) => c.meta.className === componentClassName);
                 if (comp) {
+                    const previousClassName = this.navigationService.activeComponent()?.meta.className;
                     this.navigationService.select(comp);
-                    if (variantParam !== null) {
-                        const index = parseInt(variantParam, 10);
-                        const maxIndex = (comp.meta.showcaseConfig.variants?.length ?? 1) - 1;
-                        if (!Number.isNaN(index) && index >= 0 && index <= maxIndex) {
-                            this.rendererService.activeVariantIndex.set(index);
-                        }
+                    // Switching to another component resets the variant and the state
+                    // once `PrismRendererService` follows the navigation, after this
+                    // restore. Starting the component here makes it the current one
+                    // before the indexes below are set, so that reset, and the renderer
+                    // mounting it, keep them (a popstate between components). Not for
+                    // the component already on screen: a popstate that addresses it (a
+                    // hash link inside it fires one) must keep the control overrides.
+                    if (previousClassName !== comp.meta.className) {
+                        this.rendererService.resetForComponent(comp);
                     }
+                    const variantIndex = parseVariantIndex(variantParam, comp.meta.showcaseConfig.variants?.length ?? 1);
+                    if (variantIndex !== this.rendererService.activeVariantIndex()) {
+                        this.rendererService.selectVariant(variantIndex);
+                    }
+                    stateIndex = parseStateIndex(stateParam, comp.meta.showcaseConfig.states?.length ?? 0);
                 }
             }
             else if (pageTitle) {
@@ -63,6 +90,7 @@ export class PrismUrlStateService {
                     this.navigationService.selectPage(page);
                 }
             }
+            this.rendererService.selectState(stateIndex);
             if (viewId) {
                 this.panelService.activeViewId.set(viewId);
             }
@@ -74,7 +102,7 @@ export class PrismUrlStateService {
             this.suppressSync = false;
         }
     }
-    writeToUrl(item, variantIndex, viewId, panelId) {
+    writeToUrl(item, variantIndex, stateIndex, viewId, panelId) {
         // Built from scratch, never from the current search string: parameters the
         // app does not own must not survive a navigation. `?capture=1` relies on
         // this; the "capture flag" specs pin the guarantee.
@@ -84,6 +112,9 @@ export class PrismUrlStateService {
             if (variantIndex > 0) {
                 params.set(PARAM_VARIANT, String(variantIndex));
             }
+            if (stateIndex !== null) {
+                params.set(PARAM_STATE, String(stateIndex));
+            }
         }
         else if (item?.kind === 'page') {
             params.set(PARAM_PAGE, item.data.title);

package/dist/app/theme/prism-default-theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-default-theme.d.ts","sourceRoot":"","sources":["../../../src/app/theme/prism-default-theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyCnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyCpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA0DpD,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAAmB,CAAC"}
+{"version":3,"file":"prism-default-theme.d.ts","sourceRoot":"","sources":["../../../src/app/theme/prism-default-theme.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyCnD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAyCpD,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CA2DpD,CAAC;AAEF,eAAO,MAAM,mBAAmB,wBAAmB,CAAC"}

package/dist/app/theme/prism-default-theme.js

@@ -91,13 +91,14 @@ export const PRISM_BASE_TOKENS = {
     '--dur-base': '0.2s',
     '--dur-slow': '0.3s',
     /**
-     * Chrome density. Set on the shell host, so a consuming app can compact or
-     * loosen the entire interface from CSS alone:
+     * Chrome density. A consuming app compacts or loosens the entire interface
+     * with one token in ng-prism.config.ts:
      *
-     *   prism-shell { --density: .8 }
+     *   theme: { '--density': '0.8' }
      *
-     * There is no signal, service or menu behind this. The whole
-     * control surface is the custom property.
+     * The band heights below resolve it on <html>, where every token is set,
+     * so a --density on a descendant such as prism-shell doesn't reach them.
+     * There is no signal, service or menu behind this.
      */
     '--density': '1',
     '--band-header': 'calc(40px * var(--density))',

package/dist/builder/config-loader/deprecated-options.d.ts

@@ -0,0 +1,7 @@
+import type { NgPrismConfig } from '../../plugin/plugin.types.js';
+/**
+ * One notice per deprecated option the config or one of its plugins sets.
+ * They never had an effect, so the notice only asks to remove them.
+ */
+export declare function describeDeprecatedOptions(config: NgPrismConfig, configFile: string): string[];
+//# sourceMappingURL=deprecated-options.d.ts.map

package/dist/builder/config-loader/deprecated-options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated-options.d.ts","sourceRoot":"","sources":["../../../src/builder/config-loader/deprecated-options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAOlE;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,CAe7F"}

package/dist/builder/config-loader/deprecated-options.js

@@ -0,0 +1,23 @@
+/** Config options declared since the first release that nothing has ever read. */
+const DEPRECATED_CONFIG_OPTIONS = ['ui', 'themeStylesheet', 'headless', 'appComponent'];
+const NEVER_HAD_AN_EFFECT = 'which is deprecated and will be removed in 23.0.0. It has never had an effect; remove it.';
+/**
+ * One notice per deprecated option the config or one of its plugins sets.
+ * They never had an effect, so the notice only asks to remove them.
+ */
+export function describeDeprecatedOptions(config, configFile) {
+    const notices = [];
+    for (const option of DEPRECATED_CONFIG_OPTIONS) {
+        if (config[option] !== undefined)
+            notices.push(`${configFile} sets "${option}", ${NEVER_HAD_AN_EFFECT}`);
+    }
+    for (const plugin of config.plugins ?? []) {
+        if (plugin.wrapComponent !== undefined)
+            notices.push(`plugin "${plugin.name}" sets wrapComponent, ${NEVER_HAD_AN_EFFECT}`);
+        for (const panel of plugin.panels ?? []) {
+            if (panel.position !== undefined)
+                notices.push(`plugin "${plugin.name}" sets position on panel "${panel.id}", ${NEVER_HAD_AN_EFFECT}`);
+        }
+    }
+    return notices;
+}

package/dist/builder/manifest/runtime-manifest.generator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhF,MAAM,WAAW,sBAAsB;IACnC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAoHD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB,GAAG,MAAM,CAkF/E"}
+{"version":3,"file":"runtime-manifest.generator.d.ts","sourceRoot":"","sources":["../../../src/builder/manifest/runtime-manifest.generator.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,EAAa,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAGhF,MAAM,WAAW,sBAAsB;IACnC,UAAU,EAAE,gBAAgB,EAAE,CAAC;IAC/B,iBAAiB,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAClC;AAqHD,wBAAgB,uBAAuB,CAAC,OAAO,EAAE,sBAAsB,GAAG,MAAM,CAkF/E"}

package/dist/builder/manifest/runtime-manifest.generator.js

@@ -68,8 +68,9 @@ function generateWrapperClass(comp) {
         attrs = '';
         importsArray = `[${comp.className}]`;
     }
-    const inputBindings = bindableInputs.map((i) => ` [${i.name}]="${i.name}()"`).join('');
-    const outputBindings = comp.outputs.map((o) => ` (${o.name})="${o.name}.emit($event)"`).join('');
+    // The wrapper declares its inputs and outputs under the member names and binds the directive's public ones.
+    const inputBindings = bindableInputs.map((i) => ` [${i.alias ?? i.name}]="${i.name}()"`).join('');
+    const outputBindings = comp.outputs.map((o) => ` (${o.alias ?? o.name})="${o.name}.emit($event)"`).join('');
     const template = `<${tag}${attrs} ${directiveAttr}${inputBindings}${outputBindings}>{{ __prismContent__() }}</${tag}>`;
     const members = [];
     for (const i of bindableInputs) {

package/dist/builder/scanner/component.scanner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAiDrE;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,EAAE,WAAW,GAAE,MAAM,EAAO,EAAE,OAAO,cAAoB,GAAG,gBAAgB,EAAE,CAsEzJ"}
+{"version":3,"file":"component.scanner.d.ts","sourceRoot":"","sources":["../../../src/builder/scanner/component.scanner.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAkDrE;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,CAAC,WAAW,EAAE,WAAW,GAAE,MAAM,EAAO,EAAE,OAAO,cAAoB,GAAG,gBAAgB,EAAE,CAsEzJ"}