@ng-doc/app 22.0.0 → 22.2.0

package/fesm2022/ng-doc-app-demo-app.mjs

@@ -0,0 +1,779 @@
+import { isPlatformBrowser, NgComponentOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, PLATFORM_ID, DOCUMENT, DestroyRef, ElementRef, ChangeDetectionStrategy, ViewEncapsulation, Component, provideZoneChangeDetection, provideZonelessChangeDetection } from '@angular/core';
+import { RouterOutlet, ActivatedRoute, provideRouter } from '@angular/router';
+import { NG_DOC_STORE_THEME_KEY } from '@ng-doc/app/constants';
+import { provideClientHydration, withNoIncrementalHydration } from '@angular/platform-browser';
+
+/**
+ * The `source` of every message the demo application sends to the page that embeds it.
+ * @internal
+ */
+const ɵNG_DOC_DEMO_MESSAGE_SOURCE = 'ng-doc-demo';
+/**
+ * Whether a message is a size message of the demo application.
+ * @param value - The data of a `message` event.
+ * @internal
+ */
+function ɵisNgDocDemoSizeMessage(value) {
+    const message = value;
+    return (typeof message === 'object' &&
+        message !== null &&
+        message.source === ɵNG_DOC_DEMO_MESSAGE_SOURCE &&
+        message.version === 1 &&
+        message.type === 'size' &&
+        typeof message.height === 'number' &&
+        Number.isFinite(message.height) &&
+        message.height >= 0);
+}
+/**
+ * Whether a message is a background message of the demo application.
+ * @param value - The data of a `message` event.
+ * @internal
+ */
+function ɵisNgDocDemoBackgroundMessage(value) {
+    const message = value;
+    return (typeof message === 'object' &&
+        message !== null &&
+        message.source === ɵNG_DOC_DEMO_MESSAGE_SOURCE &&
+        message.version === 1 &&
+        message.type === 'background' &&
+        typeof message.color === 'string' &&
+        message.color.length > 0 &&
+        message.color.length <= 200 &&
+        (message.dots === undefined ||
+            (typeof message.dots === 'string' && message.dots.length <= 200)) &&
+        (message.scheme === undefined ||
+            (typeof message.scheme === 'string' && message.scheme.length <= 50)));
+}
+
+/** The fragment parameter that sets the theme of a demo page; an input name never starts with `~`. */
+const THEME = '~theme';
+/**
+ * The theme that the URL fragment of a demo page sets, or `undefined` when it sets none and the
+ * page follows the theme of the site.
+ * @param fragment - The fragment, with or without the leading `#`.
+ * @internal
+ */
+function ɵdemoThemeFromFragment(fragment) {
+    for (const parameter of fragment.replace(/^#/, '').split('&')) {
+        if (!parameter.startsWith(`${THEME}=`))
+            continue;
+        try {
+            return decodeURIComponent(parameter.slice(THEME.length + 1)) || undefined;
+        }
+        catch {
+            return undefined;
+        }
+    }
+    return undefined;
+}
+/**
+ * A fragment (without `#`) with the theme parameter set, after the other parameters, or without it
+ * when there is no theme. `undefined` when nothing is left.
+ * @param fragment - The fragment without the theme, or none.
+ * @param theme - The theme of the demo page, or none to follow the site.
+ * @internal
+ */
+function ɵwithDemoTheme(fragment, theme) {
+    const parameters = (fragment ?? '')
+        .split('&')
+        .filter((parameter) => parameter && !parameter.startsWith(`${THEME}=`));
+    if (theme)
+        parameters.push(`${THEME}=${encodeURIComponent(theme)}`);
+    return parameters.length ? parameters.join('&') : undefined;
+}
+/**
+ * Whether a parameter of a fragment is the theme of the demo page, which the state of a
+ * playground leaves to the demo application.
+ * @param name - The decoded name of the parameter.
+ * @internal
+ */
+function ɵisDemoThemeParameter(name) {
+    return name === THEME;
+}
+
+/**
+ * The root of the demo application, which shows one demo per page with only Angular and that
+ * demo loaded. In an iframe it reports the height of its content to the page that embeds it (a
+ * `ResizeObserver` on its border box), and it follows the theme the reader picks on the
+ * documentation site, which stores it in `localStorage`, unless its URL fragment sets a theme
+ * (`~theme=dark`, the `theme` option of a demo or a playground, or the theme button beside it).
+ * In an iframe its page is transparent, so the canvas of the documentation page shows through, and
+ * it reports its theme's background, dots and color scheme whenever they change, so that the
+ * embedding page can paint the canvas in the demo's own theme.
+ */
+class NgDocDemoAppComponent {
+    constructor() {
+        if (!isPlatformBrowser(inject(PLATFORM_ID)))
+            return;
+        const document = inject(DOCUMENT);
+        const window = document.defaultView;
+        const destroyRef = inject(DestroyRef);
+        if (!window)
+            return;
+        const embedded = window.parent !== window;
+        let reportedBackground = '';
+        // The page's background: the body's, or the document's when the body has none. Reported only
+        // when it changes, and once the page has one (its styles may still be loading).
+        const reportBackground = () => {
+            if (!embedded)
+                return;
+            // The theme's background and dots, from its variables: the page itself is transparent in
+            // an iframe, so its computed background is not the theme's.
+            const style = window.getComputedStyle(document.documentElement);
+            const color = style.getPropertyValue('--ng-doc-background').trim();
+            const dots = style.getPropertyValue('--ng-doc-base-5').trim();
+            // A transparent iframe shows its page only while the iframe element has the page's color
+            // scheme; otherwise the browser paints an opaque backdrop behind it.
+            const scheme = style.colorScheme && style.colorScheme !== 'normal' ? style.colorScheme : '';
+            const key = `${color}|${dots}|${scheme}`;
+            if (!color || key === reportedBackground)
+                return;
+            reportedBackground = key;
+            const message = {
+                source: ɵNG_DOC_DEMO_MESSAGE_SOURCE,
+                version: 1,
+                type: 'background',
+                color,
+                ...(dots ? { dots } : {}),
+                ...(scheme ? { scheme } : {}),
+            };
+            window.parent.postMessage(message, window.location.origin);
+        };
+        if (embedded) {
+            // The page is transparent in an iframe, so the canvas of the documentation page, dots and
+            // all, shows through around and behind the demo.
+            document.documentElement.classList.add('ng-doc-demo-embedded');
+            const host = inject(ElementRef).nativeElement;
+            let reported = -1;
+            const observer = new ResizeObserver(() => {
+                const height = Math.ceil(host.getBoundingClientRect().height);
+                // Styles that load after the first report change the background too.
+                reportBackground();
+                if (height === reported)
+                    return;
+                reported = height;
+                const message = {
+                    source: ɵNG_DOC_DEMO_MESSAGE_SOURCE,
+                    version: 1,
+                    type: 'size',
+                    height,
+                };
+                // Only a page of the same origin may receive it: the demo pages are part of the site.
+                window.parent.postMessage(message, window.location.origin);
+            });
+            observer.observe(host, { box: 'border-box' });
+            destroyRef.onDestroy(() => observer.disconnect());
+        }
+        // An empty id is the light theme, as in the restore script that applies the stored theme
+        // before the application starts; so is `light`, which the `theme` option uses.
+        const apply = (theme) => {
+            if (theme && theme !== 'light') {
+                document.documentElement.setAttribute('data-theme', theme);
+            }
+            else {
+                document.documentElement.removeAttribute('data-theme');
+            }
+            reportBackground();
+        };
+        const pinned = () => ɵdemoThemeFromFragment(window.location.hash);
+        const site = () => {
+            try {
+                return window.localStorage.getItem(NG_DOC_STORE_THEME_KEY);
+            }
+            catch {
+                return null;
+            }
+        };
+        // The documentation page and the demo page share the origin, so a theme the reader picks
+        // reaches this page as a storage event; a theme of the fragment wins over it.
+        const onStorage = (event) => {
+            if (event.key !== NG_DOC_STORE_THEME_KEY || event.newValue === null || pinned())
+                return;
+            apply(event.newValue);
+        };
+        // The documentation page changes the fragment with `location.replace`, without a reload.
+        const onHashChange = () => apply(pinned() ?? site());
+        // The `auto` theme follows the system's color scheme.
+        const scheme = window.matchMedia?.('(prefers-color-scheme: dark)');
+        if (pinned())
+            apply(pinned());
+        reportBackground();
+        window.addEventListener('storage', onStorage);
+        window.addEventListener('hashchange', onHashChange);
+        scheme?.addEventListener?.('change', reportBackground);
+        destroyRef.onDestroy(() => {
+            window.removeEventListener('storage', onStorage);
+            window.removeEventListener('hashchange', onHashChange);
+            scheme?.removeEventListener?.('change', reportBackground);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoAppComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: NgDocDemoAppComponent, isStandalone: true, selector: "ng-doc-demo-app", ngImport: i0, template: '<router-outlet />', isInline: true, styles: ["ng-doc-demo-app{display:flow-root}ng-doc-demo-host,ng-doc-playground-host{display:flex;justify-content:center;min-width:0}html.ng-doc-demo-embedded,html.ng-doc-demo-embedded body{background-color:transparent}\n"], dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoAppComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ng-doc-demo-app', imports: [RouterOutlet], template: '<router-outlet />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["ng-doc-demo-app{display:flow-root}ng-doc-demo-host,ng-doc-playground-host{display:flex;justify-content:center;min-width:0}html.ng-doc-demo-embedded,html.ng-doc-demo-embedded body{background-color:transparent}\n"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Shows the demo of a demo page: the component in the route's `ngDocDemo` data, with the inputs
+ * of the `inputs` query parameter (the JSON of the `inputs` option of the `demo` action).
+ *
+ * The demo application hydrates its server-rendered page, but not the demo: a demo is the user's
+ * component and need not be hydration-safe, and the server renders it without the inputs of the
+ * query, which only the browser has. So the host skips hydration, as documentation pages do for
+ * their content, and the browser renders the demo again.
+ */
+class NgDocDemoHostComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        /** The demo component, or undefined on the page of a demo that does not exist. */
+        this.demo = this.route.snapshot.data['ngDocDemo'];
+        /** The inputs of the demo. */
+        this.inputs = demoInputs(this.route.snapshot.queryParamMap.get('inputs'));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoHostComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: NgDocDemoHostComponent, isStandalone: true, selector: "ng-doc-demo-host", host: { attributes: { "ngSkipHydration": "true" } }, ngImport: i0, template: `
+    @if (demo) {
+      <ng-container *ngComponentOutlet="demo; inputs: inputs" />
+    } @else {
+      <p role="alert">This demo does not exist.</p>
+    }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: NgDocDemoHostComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ng-doc-demo-host',
+                    imports: [NgComponentOutlet],
+                    template: `
+    @if (demo) {
+      <ng-container *ngComponentOutlet="demo; inputs: inputs" />
+    } @else {
+      <p role="alert">This demo does not exist.</p>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: { ngSkipHydration: 'true' },
+                }]
+        }] });
+/**
+ * The inputs of the `inputs` query parameter: a JSON object, or none.
+ * @param value - The parameter.
+ */
+function demoInputs(value) {
+    if (!value)
+        return {};
+    try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : {};
+    }
+    catch {
+        return {};
+    }
+}
+
+/**
+ * The configuration of the demo application: change detection, the router with the demo pages
+ * (and a page for unknown demos), hydration, and the providers of `demoProviders`. The generated entries of
+ * the demo application bootstrap `NgDocDemoAppComponent` with it, in the browser and on the server.
+ * @param routes - The generated demo routes.
+ * @param demoProviders - The generated import of the `demoProviders` module, if any.
+ * @param options - How the application starts.
+ * @internal
+ */
+async function ɵngDocDemoApplicationConfig(routes, demoProviders, options = {}) {
+    const providers = demoProviders ? (await demoProviders()).default : [];
+    return {
+        providers: [
+            options.zone ? provideZoneChangeDetection() : provideZonelessChangeDetection(),
+            ...(options.hydration ? [provideClientHydration(withNoIncrementalHydration())] : []),
+            provideRouter([...routes, { path: '**', component: NgDocDemoHostComponent }]),
+            ...providers,
+            ...(options.providers ?? []),
+        ],
+    };
+}
+
+/** The key of a tagged value: a value JSON has no form for (`undefined`, `NaN`, a `Date`, …). */
+const TAG = '$ngdoc';
+/** Deeper values are refused: a playground input never needs them, and a cycle would recurse. */
+const MAX_DEPTH = 32;
+/**
+ * The longest encoded state an "Open in a new tab" URL carries; a longer one is left out.
+ * @internal
+ */
+const ɵNG_DOC_PLAYGROUND_STATE_URL_LIMIT = 8192;
+/**
+ * Encodes a value for the frame of an isolated playground. Only plain data is accepted:
+ * strings, numbers (`NaN`, the infinities and `-0` included), booleans, `null`, `undefined`, `Date`s,
+ * arrays and plain objects (prototype `Object.prototype` or `null`, own enumerable data
+ * properties). Anything else (a function, a symbol, a `bigint`, a class instance such as a
+ * `TemplateRef`, a `Map` or a signal, a getter, a cycle) is refused rather than sent changed: a
+ * structured clone would turn a class instance into a plain object without its behaviour, and
+ * the demo would then run with a value that isn't the one the inspector shows.
+ * @param value - The value of a playground input.
+ * @internal
+ */
+function ɵencodePlaygroundValue(value) {
+    try {
+        return { ok: true, value: encode(value, '', 0, new Set()) };
+    }
+    catch (error) {
+        if (error instanceof Unencodable)
+            return { ok: false, path: error.path, reason: error.reason };
+        throw error;
+    }
+}
+/**
+ * Decodes a value that {@link ɵencodePlaygroundValue} encoded. Throws on anything it can't have
+ * produced, so a malformed message or URL never reaches the demo half-decoded.
+ * @param value - An encoded value.
+ * @internal
+ */
+function ɵdecodePlaygroundValue(value) {
+    return decode(value, '', 0);
+}
+/**
+ * The encoded values of an "Open in a new tab" URL: base64url of their JSON, or `undefined`
+ * when it would be longer than {@link ɵNG_DOC_PLAYGROUND_STATE_URL_LIMIT}.
+ * @param values - Encoded values, by input name.
+ * @internal
+ */
+function ɵplaygroundStateToUrl(values) {
+    const bytes = new TextEncoder().encode(JSON.stringify(values));
+    let binary = '';
+    for (const byte of bytes)
+        binary += String.fromCharCode(byte);
+    const text = btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+    return text.length > ɵNG_DOC_PLAYGROUND_STATE_URL_LIMIT ? undefined : text;
+}
+/**
+ * The encoded values of an "Open in a new tab" URL, or `undefined` when the parameter isn't one
+ * that {@link ɵplaygroundStateToUrl} wrote.
+ * @param text - The `state` query parameter.
+ * @internal
+ */
+function ɵplaygroundStateFromUrl(text) {
+    if (!/^[A-Za-z0-9_-]*$/.test(text) || text.length > ɵNG_DOC_PLAYGROUND_STATE_URL_LIMIT) {
+        return undefined;
+    }
+    try {
+        const binary = atob(text.replace(/-/g, '+').replace(/_/g, '/'));
+        const bytes = Uint8Array.from(binary, (character) => character.charCodeAt(0));
+        const parsed = JSON.parse(new TextDecoder('utf-8', { fatal: true }).decode(bytes));
+        if (!isPlainObject(parsed))
+            return undefined;
+        // Every value must decode; the decoded form is computed again where it is used.
+        for (const value of Object.values(parsed))
+            decode(value, '', 0);
+        return parsed;
+    }
+    catch {
+        return undefined;
+    }
+}
+class Unencodable extends Error {
+    constructor(path, reason) {
+        super(`${path || 'value'}: ${reason}`);
+        this.path = path;
+        this.reason = reason;
+    }
+}
+/**
+ *
+ * @param value
+ */
+function isPlainObject(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value))
+        return false;
+    const prototype = Object.getPrototypeOf(value);
+    return prototype === Object.prototype || prototype === null;
+}
+/**
+ *
+ * @param path
+ * @param key
+ */
+function child(path, key) {
+    if (typeof key === 'number')
+        return `${path}[${key}]`;
+    return /^[A-Za-z_$][\w$]*$/.test(key)
+        ? path
+            ? `${path}.${key}`
+            : key
+        : `${path}[${JSON.stringify(key)}]`;
+}
+/**
+ *
+ * @param tag
+ * @param value
+ */
+function tagged(tag, value) {
+    return value === undefined ? { [TAG]: tag } : { [TAG]: tag, value };
+}
+/**
+ *
+ * @param value
+ * @param path
+ * @param depth
+ * @param ancestors
+ */
+function encode(value, path, depth, ancestors) {
+    switch (typeof value) {
+        case 'string':
+        case 'boolean':
+            return value;
+        case 'number':
+            // JSON writes -0 as 0, so -0 is tagged like the numbers JSON has no form for.
+            return Number.isFinite(value) && !Object.is(value, -0)
+                ? value
+                : tagged('number', Object.is(value, -0) ? '-0' : String(value));
+        case 'undefined':
+            return tagged('undefined');
+        case 'function':
+            throw new Unencodable(path, 'a function');
+        case 'symbol':
+            throw new Unencodable(path, 'a symbol');
+        case 'bigint':
+            throw new Unencodable(path, 'a bigint');
+    }
+    if (value === null)
+        return null;
+    if (depth >= MAX_DEPTH)
+        throw new Unencodable(path, `nested deeper than ${MAX_DEPTH} levels`);
+    if (value instanceof Date) {
+        const time = value.getTime();
+        return tagged('date', Number.isNaN(time) ? 'Invalid Date' : value.toISOString());
+    }
+    const object = value;
+    if (ancestors.has(object))
+        throw new Unencodable(path, 'a cyclic reference');
+    ancestors.add(object);
+    try {
+        if (Array.isArray(object)) {
+            // A hole reads as `undefined`, as the code view prints it.
+            return Array.from(object, (item, index) => encode(item, child(path, index), depth + 1, ancestors));
+        }
+        if (!isPlainObject(object)) {
+            const name = object.constructor?.name;
+            throw new Unencodable(path, typeof name === 'string' && name ? `an instance of ${name}` : 'not a plain object');
+        }
+        if (Object.getOwnPropertySymbols(object).length) {
+            throw new Unencodable(path, 'an object with symbol keys');
+        }
+        const entries = [];
+        for (const key of Object.keys(object)) {
+            const descriptor = Object.getOwnPropertyDescriptor(object, key);
+            if (descriptor && !('value' in descriptor)) {
+                throw new Unencodable(child(path, key), 'a getter');
+            }
+            entries.push([key, encode(descriptor?.value, child(path, key), depth + 1, ancestors)]);
+        }
+        const encoded = Object.fromEntries(entries);
+        // An object of the user's that has the tag's key is wrapped, so it never reads as a tag.
+        return Object.prototype.hasOwnProperty.call(object, TAG) ? tagged('object', encoded) : encoded;
+    }
+    finally {
+        ancestors.delete(object);
+    }
+}
+/**
+ *
+ * @param value
+ * @param path
+ * @param depth
+ */
+function decode(value, path, depth) {
+    if (value === null || typeof value === 'string' || typeof value === 'boolean')
+        return value;
+    if (typeof value === 'number') {
+        if (!Number.isFinite(value))
+            throw new Error(`${path || 'value'}: not a finite number`);
+        return value;
+    }
+    if (depth >= MAX_DEPTH)
+        throw new Error(`${path || 'value'}: nested too deep`);
+    if (Array.isArray(value)) {
+        return value.map((item, index) => decode(item, child(path, index), depth + 1));
+    }
+    if (!isPlainObject(value))
+        throw new Error(`${path || 'value'}: not an encoded value`);
+    if (Object.prototype.hasOwnProperty.call(value, TAG)) {
+        const keys = Object.keys(value).sort().join(',');
+        const tag = value[TAG];
+        const content = value['value'];
+        if (tag === 'undefined' && keys === TAG)
+            return undefined;
+        if (tag === 'number' && keys === `${TAG},value`) {
+            if (content === 'NaN')
+                return Number.NaN;
+            if (content === 'Infinity')
+                return Number.POSITIVE_INFINITY;
+            if (content === '-Infinity')
+                return Number.NEGATIVE_INFINITY;
+            if (content === '-0')
+                return -0;
+        }
+        if (tag === 'date' && keys === `${TAG},value` && typeof content === 'string') {
+            const date = new Date(content === 'Invalid Date' ? Number.NaN : content);
+            if (content === 'Invalid Date' || !Number.isNaN(date.getTime()))
+                return date;
+        }
+        if (tag === 'object' && keys === `${TAG},value` && isPlainObject(content)) {
+            return decodeObject(content, path, depth);
+        }
+        throw new Error(`${path || 'value'}: not an encoded value`);
+    }
+    return decodeObject(value, path, depth);
+}
+/**
+ *
+ * @param value
+ * @param path
+ * @param depth
+ */
+function decodeObject(value, path, depth) {
+    return Object.fromEntries(Object.keys(value).map((key) => [key, decode(value[key], child(path, key), depth + 1)]));
+}
+
+/** Fragment parameters of the playground itself; an input name never starts with `~`. */
+const INPUTS = '~inputs';
+const CONTENT = '~content';
+const RECREATE = '~recreate';
+const VALUES = '~v';
+const DATA = '~data';
+/** The text JSON gives a number, which a readable string value must not look like. */
+const NUMBER = /^-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?$/;
+/**
+ * Writes a state as a URL fragment (without `#`). A string, a finite number or a boolean is its
+ * own readable parameter (`label=Save&size=2&disabled=true`; a string that would read as another
+ * type is quoted as JSON). Every other value goes into one `~v` parameter, encoded by
+ * {@link ɵencodePlaygroundValue}. The frame reads the fragment with
+ * {@link ɵplaygroundStateFromFragment}, and the same fragment opens the page in a new tab.
+ * @param state - The state of the playground.
+ * @internal
+ */
+function ɵplaygroundStateToFragment(state) {
+    const parameters = [`${INPUTS}=${state.inputs.map(encodeURIComponent).join(',')}`];
+    const encoded = {};
+    for (const [name, value] of Object.entries(state.properties)) {
+        const readable = readableText(value);
+        if (readable !== undefined) {
+            parameters.push(`${encodeURIComponent(name)}=${encodeURIComponent(readable)}`);
+            continue;
+        }
+        const result = ɵencodePlaygroundValue(value);
+        if (!result.ok) {
+            return {
+                ok: false,
+                path: result.path ? `${name}.${result.path}` : name,
+                reason: result.reason,
+            };
+        }
+        encoded[name] = result.value;
+    }
+    if (Object.keys(encoded).length) {
+        const text = ɵplaygroundStateToUrl(encoded);
+        if (text === undefined)
+            return tooLong();
+        parameters.push(`${VALUES}=${text}`);
+    }
+    if (state.content.length) {
+        parameters.push(`${CONTENT}=${state.content.map(encodeURIComponent).join(',')}`);
+    }
+    if (state.recreate)
+        parameters.push(`${RECREATE}=1`);
+    if (state.data && Object.keys(state.data).length) {
+        const data = {};
+        for (const [name, value] of Object.entries(state.data)) {
+            const result = ɵencodePlaygroundValue(value);
+            if (!result.ok) {
+                return {
+                    ok: false,
+                    path: ['data', name, result.path].filter(Boolean).join('.'),
+                    reason: result.reason,
+                };
+            }
+            data[name] = result.value;
+        }
+        const text = ɵplaygroundStateToUrl(data);
+        if (text === undefined)
+            return tooLong();
+        parameters.push(`${DATA}=${text}`);
+    }
+    const fragment = parameters.join('&');
+    return fragment.length > ɵNG_DOC_PLAYGROUND_STATE_URL_LIMIT ? tooLong() : { ok: true, fragment };
+}
+/**
+ * Reads a state that {@link ɵplaygroundStateToFragment} wrote. Throws on a fragment it can't
+ * have written, so a malformed URL never reaches the target half-read.
+ * @param fragment - The fragment, with or without the leading `#`.
+ * @internal
+ */
+function ɵplaygroundStateFromFragment(fragment) {
+    const text = fragment.replace(/^#/, '');
+    const properties = {};
+    let inputs;
+    let content = [];
+    let recreate = false;
+    let data;
+    if (text.length > ɵNG_DOC_PLAYGROUND_STATE_URL_LIMIT)
+        throw new Error('The state is too long.');
+    for (const parameter of text ? text.split('&') : []) {
+        const separator = parameter.indexOf('=');
+        if (separator < 1)
+            throw new Error(`Malformed parameter: ${parameter}`);
+        const name = decodeURIComponent(parameter.slice(0, separator));
+        const value = parameter.slice(separator + 1);
+        if (name === INPUTS)
+            inputs = list(value);
+        else if (name === CONTENT)
+            content = list(value);
+        else if (name === RECREATE)
+            recreate = value === '1';
+        else if (name === VALUES) {
+            const values = ɵplaygroundStateFromUrl(value);
+            if (!values)
+                throw new Error('Malformed encoded values.');
+            for (const [key, item] of Object.entries(values))
+                properties[key] = ɵdecodePlaygroundValue(item);
+        }
+        else if (name === DATA) {
+            const values = ɵplaygroundStateFromUrl(value);
+            if (!values)
+                throw new Error('Malformed data.');
+            data = {};
+            for (const [key, item] of Object.entries(values))
+                data[key] = ɵdecodePlaygroundValue(item);
+        }
+        else if (ɵisDemoThemeParameter(name)) {
+            // The demo application applies the theme; it is not part of the playground's state.
+        }
+        else if (name.startsWith('~')) {
+            throw new Error(`Unknown parameter: ${name}`);
+        }
+        else {
+            properties[name] = readValue(decodeURIComponent(value));
+        }
+    }
+    if (!inputs)
+        throw new Error('The state names no inputs.');
+    return { inputs, properties, content, recreate, ...(data ? { data } : {}) };
+}
+/**
+ *
+ */
+function tooLong() {
+    return { ok: false, path: '', reason: 'the values are too long for the URL of the frame' };
+}
+/**
+ *
+ * @param value
+ */
+function list(value) {
+    return value ? value.split(',').map(decodeURIComponent) : [];
+}
+/**
+ * The readable text of a value, or `undefined` when it goes into the encoded parameter.
+ * @param value
+ */
+function readableText(value) {
+    if (typeof value === 'boolean')
+        return String(value);
+    if (typeof value === 'number') {
+        return Number.isFinite(value) && !Object.is(value, -0) ? JSON.stringify(value) : undefined;
+    }
+    if (typeof value !== 'string')
+        return undefined;
+    return value === 'true' || value === 'false' || NUMBER.test(value) || value.startsWith('"')
+        ? JSON.stringify(value)
+        : value;
+}
+/**
+ *
+ * @param text
+ */
+function readValue(text) {
+    if (text === 'true')
+        return true;
+    if (text === 'false')
+        return false;
+    if (NUMBER.test(text))
+        return Number(text);
+    if (text.startsWith('"')) {
+        const parsed = JSON.parse(text);
+        if (typeof parsed !== 'string')
+            throw new Error(`Malformed string: ${text}`);
+        return parsed;
+    }
+    return text;
+}
+
+/**
+ *
+ * @param value
+ * @param type
+ */
+function header(value, type) {
+    const message = value;
+    return (typeof message === 'object' &&
+        message !== null &&
+        message['source'] === ɵNG_DOC_DEMO_MESSAGE_SOURCE &&
+        message['version'] === 1 &&
+        message['type'] === type);
+}
+/**
+ *
+ * @param value
+ */
+function isRecord(value) {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+/**
+ * Whether every value of a record decodes: a malformed value is a malformed message.
+ * @param value
+ */
+function isEncodedRecord(value) {
+    if (!isRecord(value))
+        return false;
+    try {
+        for (const item of Object.values(value))
+            ɵdecodePlaygroundValue(item);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Whether a message comes from the frame of an isolated playground, and is one it sends.
+ * @param value - The data of a `message` event.
+ * @internal
+ */
+function ɵisNgDocPlaygroundFrameMessage(value) {
+    if (header(value, 'playground-ready')) {
+        const uncloneable = value['uncloneable'];
+        return (isEncodedRecord(value['defaults']) &&
+            Array.isArray(uncloneable) &&
+            uncloneable.every((name) => typeof name === 'string'));
+    }
+    if (header(value, 'playground-applied'))
+        return typeof value['fragment'] === 'string';
+    if (header(value, 'playground-error')) {
+        return ((value['phase'] === 'create' || value['phase'] === 'apply') &&
+            typeof value['message'] === 'string');
+    }
+    return false;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { NgDocDemoAppComponent, NgDocDemoHostComponent, ɵNG_DOC_DEMO_MESSAGE_SOURCE, ɵNG_DOC_PLAYGROUND_STATE_URL_LIMIT, ɵdecodePlaygroundValue, ɵdemoThemeFromFragment, ɵencodePlaygroundValue, ɵisDemoThemeParameter, ɵisNgDocDemoBackgroundMessage, ɵisNgDocDemoSizeMessage, ɵisNgDocPlaygroundFrameMessage, ɵngDocDemoApplicationConfig, ɵplaygroundStateFromFragment, ɵplaygroundStateFromUrl, ɵplaygroundStateToFragment, ɵplaygroundStateToUrl, ɵwithDemoTheme };
+//# sourceMappingURL=ng-doc-app-demo-app.mjs.map