@ng-prism/core 22.4.1 → 22.6.0

package/dist/app/renderer/projectable-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"projectable-content.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/projectable-content.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,EAAE,EAAE,CAsCtF"}
+{"version":3,"file":"projectable-content.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/projectable-content.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAMH,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,kBAAkB,EAAE,SAAS,MAAM,EAAE,EAAE,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,GAAG,IAAI,EAAE,EAAE,CAcrK"}

package/dist/app/renderer/projectable-content.js

@@ -5,43 +5,54 @@
  * Shared by the Playground stage and the Overview cells: both project the same
  * developer-authored content, and the slot-selector handling is the one piece
  * of that neither wants to own twice.
+ *
+ * `createComponent` hands `projectableNodes[i]` to the i-th `<ng-content>` of
+ * the template and never looks at selectors, so the lists are ordered by the
+ * component's `ngContentSelectors` (`reflectComponentType`): `default` (or a
+ * plain string) goes to the `*` slot, every other key to the slot whose
+ * `select` it names. A key no slot takes is dropped and reported to
+ * `onUnmatchedKey`.
  */
 // SAFETY: `content` originates from `@Showcase({ variants: [{ content }] })`
 // in developer-authored source code. It is trusted by ng-prism's threat model
 // (see SECURITY.md). Sanitization would strip the Angular component/directive
 // selectors that variant content is meant to project.
-export function parseContentToNodes(content) {
-    if (typeof content === 'string') {
-        return [htmlToNodes(content)];
+export function parseContentToNodes(content, ngContentSelectors, onUnmatchedKey) {
+    const byKey = typeof content === 'string' ? { default: content } : content;
+    const slotKeys = ngContentSelectors.map((selector) => (selector.trim() === '*' ? 'default' : selector.trim()));
+    for (const key of Object.keys(byKey)) {
+        if (!slotKeys.includes(key))
+            onUnmatchedKey?.(key);
     }
-    const defaultNodes = content['default'] ? htmlToNodes(content['default']) : [];
-    const result = [defaultNodes];
-    for (const [selector, html] of Object.entries(content)) {
-        if (selector === 'default')
-            continue;
-        const wrapper = document.createElement('div');
-        // SAFETY: trusted developer-authored HTML, see SECURITY.md.
-        wrapper.innerHTML = html;
-        const nodes = [];
-        for (const child of Array.from(wrapper.childNodes)) {
-            const el = document.createElement('div');
-            // SAFETY: trusted developer-authored HTML (see SECURITY.md).
-            el.innerHTML = child.outerHTML ?? child.textContent ?? '';
-            const projected = el.firstChild;
-            if (projected && projected instanceof Element) {
-                applySelector(projected, selector);
-                nodes.push(projected);
-            }
-            else if (projected) {
-                const span = document.createElement('span');
-                applySelector(span, selector);
-                span.textContent = child.textContent;
-                nodes.push(span);
-            }
+    return slotKeys.map((key) => {
+        const html = byKey[key];
+        if (html === undefined)
+            return [];
+        return key === 'default' ? htmlToNodes(html) : namedSlotNodes(html, key);
+    });
+}
+// SAFETY: trusted developer-authored HTML, see SECURITY.md.
+function namedSlotNodes(html, selector) {
+    const wrapper = document.createElement('div');
+    wrapper.innerHTML = html;
+    const nodes = [];
+    for (const child of Array.from(wrapper.childNodes)) {
+        const el = document.createElement('div');
+        // SAFETY: trusted developer-authored HTML (see SECURITY.md).
+        el.innerHTML = child.outerHTML ?? child.textContent ?? '';
+        const projected = el.firstChild;
+        if (projected && projected instanceof Element) {
+            applySelector(projected, selector);
+            nodes.push(projected);
+        }
+        else if (projected) {
+            const span = document.createElement('span');
+            applySelector(span, selector);
+            span.textContent = child.textContent;
+            nodes.push(span);
         }
-        result.push(nodes);
     }
-    return result;
+    return nodes;
 }
 // SAFETY: see `parseContentToNodes` above and SECURITY.md. `html` is trusted
 // developer-authored variant content from the `@Showcase` decorator.

package/dist/app/renderer/rendered-key.d.ts

@@ -0,0 +1,38 @@
+import type { RuntimeComponent } from '../../plugin/plugin.types.js';
+import type { ForcedPseudoStates } from '../../shared/pseudo-state.type.js';
+import type { AppliedPseudoStates } from '../pseudo/pseudo-state-marker.js';
+export interface RenderedKeyInput {
+    component: RuntimeComponent | null;
+    variantIndex: number;
+    /** The component-level state on the canvas, `null` when none is active. */
+    stateIndex: number | null;
+    /** The rendered component's host element, `null` while nothing is rendered. */
+    element: Element | null;
+    /** The pseudo states the variant forces, `null` when it forces none. */
+    pseudo: ForcedPseudoStates | null;
+    /** The active state's pseudo, `null` when no state applies to the variant. */
+    state: ForcedPseudoStates | null;
+    /** What the canvas marker has the states in place for. */
+    pseudoApplied: AppliedPseudoStates | null;
+}
+/**
+ * The value of `data-prism-rendered` on `.demo-wrap`, or `null` while the
+ * variant is not ready to be inspected: `<className>:<variantIndex>`, with
+ * `:<stateIndex>` while a component-level state is active.
+ *
+ * Screenshot runners wait on this marker, so a variant that forces pseudo
+ * states, or has a state layer, only gets it once those exact objects are in
+ * place on this exact element. A runner then captures the forced state with no
+ * change on its side. A variant without forced states is not held back. The
+ * index is there for an opted-out variant too (`state` is `null`), so a runner
+ * waiting for its cell finds it.
+ */
+export declare function resolveRenderedKey({ component, variantIndex, stateIndex, element, pseudo, state, pseudoApplied }: RenderedKeyInput): string | null;
+/**
+ * The value of `data-prism-excluded` on `.demo-wrap`, or `null` when the cell
+ * shows what it was asked for: why the active state is not part of this
+ * variant, either because the variant opted out (`exclusion`) or because the
+ * marker found the state does not fit the rendered component.
+ */
+export declare function resolveExcludedReason(stateIndex: number | null, exclusion: string | null, applied: AppliedPseudoStates | null): string | null;
+//# sourceMappingURL=rendered-key.d.ts.map

package/dist/app/renderer/rendered-key.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rendered-key.d.ts","sourceRoot":"","sources":["../../../src/app/renderer/rendered-key.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACrE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC;AAC5E,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAG5E,MAAM,WAAW,gBAAgB;IAC7B,SAAS,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACnC,YAAY,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,+EAA+E;IAC/E,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;IACxB,wEAAwE;IACxE,MAAM,EAAE,kBAAkB,GAAG,IAAI,CAAC;IAClC,8EAA8E;IAC9E,KAAK,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACjC,0DAA0D;IAC1D,aAAa,EAAE,mBAAmB,GAAG,IAAI,CAAC;CAC7C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,gBAAgB,GAAG,MAAM,GAAG,IAAI,CAOlJ;AAED;;;;;GAKG;AACH,wBAAgB,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,mBAAmB,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAI7I"}

package/dist/app/renderer/rendered-key.js

@@ -0,0 +1,34 @@
+import { forcesAnyState } from '../pseudo/pseudo-targets.js';
+/**
+ * The value of `data-prism-rendered` on `.demo-wrap`, or `null` while the
+ * variant is not ready to be inspected: `<className>:<variantIndex>`, with
+ * `:<stateIndex>` while a component-level state is active.
+ *
+ * Screenshot runners wait on this marker, so a variant that forces pseudo
+ * states, or has a state layer, only gets it once those exact objects are in
+ * place on this exact element. A runner then captures the forced state with no
+ * change on its side. A variant without forced states is not held back. The
+ * index is there for an opted-out variant too (`state` is `null`), so a runner
+ * waiting for its cell finds it.
+ */
+export function resolveRenderedKey({ component, variantIndex, stateIndex, element, pseudo, state, pseudoApplied }) {
+    if (!element || !component)
+        return null;
+    if ((forcesAnyState(pseudo) || state !== null) && (pseudoApplied?.root !== element || pseudoApplied.states !== pseudo || pseudoApplied.state !== state))
+        return null;
+    const key = `${component.meta.className}:${variantIndex}`;
+    return stateIndex === null ? key : `${key}:${stateIndex}`;
+}
+/**
+ * The value of `data-prism-excluded` on `.demo-wrap`, or `null` when the cell
+ * shows what it was asked for: why the active state is not part of this
+ * variant, either because the variant opted out (`exclusion`) or because the
+ * marker found the state does not fit the rendered component.
+ */
+export function resolveExcludedReason(stateIndex, exclusion, applied) {
+    if (stateIndex === null)
+        return null;
+    if (exclusion !== null)
+        return exclusion;
+    return applied?.fit?.fits === false ? applied.fit.reason : null;
+}

package/dist/app/renderer/snippet-generator.js

@@ -35,7 +35,7 @@ export function generateSnippet(selector, inputs, values, explicitKeys, content,
         // that defaults to `true` has to show its explicit `false`.
         if (input.defaultValue === undefined && typeof value === 'boolean' && !value)
             continue;
-        pushAttribute(attributes, input.name, value);
+        pushAttribute(attributes, input.alias ?? input.name, value);
     }
     for (const [name, value] of Object.entries(values)) {
         if (processed.has(name))
@@ -112,7 +112,7 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
         // that defaults to `true` has to show its explicit `false`.
         if (input.defaultValue === undefined && typeof value === 'boolean' && !value)
             continue;
-        pushAttribute(attributes, input.name, value);
+        pushAttribute(attributes, input.alias ?? input.name, value);
     }
     for (const [name, value] of Object.entries(values)) {
         if (processed.has(name))
@@ -124,7 +124,9 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
         pushAttribute(attributes, name, value);
     }
     const projectedContent = content ?? (typeof values['__prismContent__'] === 'string' ? values['__prismContent__'] : undefined);
-    const allAttrs = [...hostAttrs, directiveAttr, ...attributes].join(' ');
+    // An input aliased to the directive's own selector already puts the directive on the host.
+    const selectorAttrs = attributes.some((a) => a.startsWith(`${directiveAttr}=`) || a.startsWith(`[${directiveAttr}]=`)) ? [] : [directiveAttr];
+    const allAttrs = [...hostAttrs, ...selectorAttrs, ...attributes].join(' ');
     const contentHtml = resolveContentHtml(projectedContent);
     if (!contentHtml) {
         if (!allAttrs)
@@ -132,7 +134,7 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
         const singleLine = `<${tag} ${allAttrs} />`;
         if (singleLine.length <= 80)
             return singleLine;
-        const indented = [...hostAttrs, directiveAttr, ...attributes].map((a) => `  ${a}`).join('\n');
+        const indented = [...hostAttrs, ...selectorAttrs, ...attributes].map((a) => `  ${a}`).join('\n');
         return `<${tag}\n${indented} />`;
     }
     const openTag = `<${tag} ${allAttrs}>`;
@@ -140,7 +142,7 @@ function generateDirectiveSnippet(selector, inputs, values, explicitKeys, conten
     const singleLine = `${openTag}${contentHtml}${closeTag}`;
     if (singleLine.length <= 80)
         return singleLine;
-    const allAttrsList = [...hostAttrs, directiveAttr, ...attributes];
+    const allAttrsList = [...hostAttrs, ...selectorAttrs, ...attributes];
     if (allAttrsList.length <= 2) {
         return `${openTag}\n  ${contentHtml}\n${closeTag}`;
     }

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

@@ -3,6 +3,8 @@ import * as i0 from "@angular/core";
 export declare const CAPTURE_PARAM = "capture";
 /** Attribute set on `<html>` while capture mode is active. */
 export declare const CAPTURE_ATTRIBUTE = "data-prism-capture";
+/** Room in px capture mode leaves around a component that forces pseudo states, for a focus ring drawn outside its box. */
+export declare const CAPTURE_PSEUDO_ROOM = 8;
 /**
  * Everything capture mode makes see-through for `bg: 'transparent'`.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,4BAA4B,QAE4H,CAAC;AA2FtK;;;;;;;;;;;;;;;GAeG;AACH,qBACa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA6F;IAErH,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAVd,mBAAmB;;CAoB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAKzD"}
+{"version":3,"file":"prism-capture.service.d.ts","sourceRoot":"","sources":["../../../src/app/services/prism-capture.service.ts"],"names":[],"mappings":";AAEA,sFAAsF;AACtF,eAAO,MAAM,aAAa,YAAY,CAAC;AAEvC,8DAA8D;AAC9D,eAAO,MAAM,iBAAiB,uBAAuB,CAAC;AAItD,2HAA2H;AAC3H,eAAO,MAAM,mBAAmB,IAAI,CAAC;AAErC;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,4BAA4B,QAE4H,CAAC;AAkHtK;;;;;;;;;;;;;;;GAeG;AACH,qBACa,mBAAmB;IAC5B,OAAO,CAAC,QAAQ,CAAC,OAAO,CAA6F;IAErH,kEAAkE;IAClE,QAAQ,CAAC,MAAM,0CAA6B;;IAM5C,OAAO,CAAC,eAAe;yCAVd,mBAAmB;;CAoB/B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAKzD"}

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

@@ -5,6 +5,8 @@ export const CAPTURE_PARAM = 'capture';
 /** Attribute set on `<html>` while capture mode is active. */
 export const CAPTURE_ATTRIBUTE = 'data-prism-capture';
 const STYLE_ELEMENT_ID = 'ng-prism-capture-styles';
+/** Room in px capture mode leaves around a component that forces pseudo states, for a focus ring drawn outside its box. */
+export const CAPTURE_PSEUDO_ROOM = 8;
 /**
  * Everything capture mode makes see-through for `bg: 'transparent'`.
  *
@@ -68,6 +70,19 @@ const CAPTURE_CANVAS_ONLY_SELECTOR = `[${CAPTURE_ATTRIBUTE}] ` + `:is(.prism-she
  * padding gone it sits flush against the component, so capture mode removes the
  * paint and keeps the geometry. {@link CAPTURE_TRANSPARENT_SELECTOR} does not
  * cover this: an outline is not a background.
+ *
+ * A variant that forces pseudo states (`.demo-wrap[data-pseudo]`) gets 8px of
+ * room around the component. `.demo-wrap` hugs the component's box, but a focus
+ * ring is drawn outside it (an `outline` with an offset, a `box-shadow` halo),
+ * so a screenshot of the bare box would crop it. The negative margin takes the
+ * padding back out of layout, so the component sits and sizes exactly as
+ * without it, and `content-box` keeps the padding outside a `stretch` variant's
+ * width. That width gives up the room where the canvas is narrower than
+ * `max-width` plus the room, so the room stays inside the canvas instead of
+ * being clipped on one side and scrolling on the other; from there on
+ * `max-width` clamps it to the width it has without the room. Only these
+ * variants: any other change to `.demo-wrap`'s box would move every existing
+ * baseline.
  */
 const CAPTURE_STYLES = `
 [${CAPTURE_ATTRIBUTE}] *,
@@ -106,6 +121,16 @@ ${CAPTURE_CANVAS_ONLY_SELECTOR} {
 [${CAPTURE_ATTRIBUTE}] .prism-canvas-wrap:has(.prism-canvas-stage) {
   grid-template-rows: minmax(0, 1fr) !important;
 }
+
+[${CAPTURE_ATTRIBUTE}] .demo-wrap[data-pseudo] {
+  box-sizing: content-box !important;
+  padding: ${CAPTURE_PSEUDO_ROOM}px !important;
+  margin: -${CAPTURE_PSEUDO_ROOM}px !important;
+}
+
+[${CAPTURE_ATTRIBUTE}] .demo-wrap[data-pseudo][data-canvas-layout='stretch'] {
+  width: calc(100% - ${2 * CAPTURE_PSEUDO_ROOM}px) !important;
+}
 `;
 /**
  * Capture-isolation mode, for external screenshot runners.

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

@@ -0,0 +1,93 @@
+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;
+}
+/**
+ * The variant's and the active state's pseudo states with the user's toggles
+ * from the tools menu on top.
+ *
+ * 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 splitLayers(variantPseudo: ForcedPseudoStates | null, statePseudo: ForcedPseudoStates | null, override: PseudoStateOverride, stateFits?: boolean): PseudoLayers;
+/**
+ * The pseudo states the canvas forces on the active variant and the active
+ * component-level state.
+ *
+ * `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
+ * Overview cell asks first.
+ */
+export declare class PrismPseudoStateService {
+    private readonly navigation;
+    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>>>;
+    /**
+     * 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 or state declares drops the toggle. */
+    toggle(state: PseudoState): void;
+    clearOverride(): void;
+    /** A marker for one rendered component, sharing this app's rewritten stylesheets. */
+    createMarker(): PseudoStateMarker;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrismPseudoStateService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+//# sourceMappingURL=prism-pseudo-state.service.d.ts.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,155 @@
+import { DOCUMENT } from '@angular/common';
+import { computed, effect, inject, Injectable, signal } from '@angular/core';
+import { PSEUDO_STATES } from '../../shared/pseudo-state.type.js';
+import { PseudoStateMarker } from '../pseudo/pseudo-state-marker.js';
+import { PseudoStyleSheets } from '../pseudo/pseudo-stylesheets.js';
+import { PrismCaptureService } from './prism-capture.service.js';
+import { PrismNavigationService } from './prism-navigation.service.js';
+import { PrismRendererService } from './prism-renderer.service.js';
+import * as i0 from "@angular/core";
+/**
+ * The variant's and the active state's pseudo states with the user's toggles
+ * from the tools menu on top.
+ *
+ * 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 splitLayers(variantPseudo, statePseudo, override, stateFits = true) {
+    if (Object.keys(override).length === 0)
+        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;
+    }
+    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 and the active
+ * component-level state.
+ *
+ * `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
+ * Overview cell asks first.
+ */
+export class PrismPseudoStateService {
+    navigation = inject(PrismNavigationService);
+    renderer = inject(PrismRendererService);
+    capture = inject(PrismCaptureService);
+    stylesheets = new PseudoStyleSheets(inject(DOCUMENT));
+    activeVariant = computed(() => {
+        const comp = this.navigation.activeComponent();
+        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();
+    /**
+     * 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) {
+        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 || (this.stateFits() && this.statePseudo()?.[state] !== undefined);
+    }
+    /** 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) => {
+            const next = { ...override };
+            if (forced === this.isDeclared(state))
+                delete next[state];
+            else
+                next[state] = forced;
+            return next;
+        });
+    }
+    clearOverride() {
+        this._override.set({});
+    }
+    /** A marker for one rendered component, sharing this app's rewritten stylesheets. */
+    createMarker() {
+        return new PseudoStateMarker(this.stylesheets);
+    }
+    static ɵfac = function PrismPseudoStateService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismPseudoStateService)(); };
+    static ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PrismPseudoStateService, factory: PrismPseudoStateService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismPseudoStateService, [{
+        type: Injectable,
+        args: [{ providedIn: 'root' }]
+    }], () => [], null); })();

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"}