@dignite/ng.site 1.0.0 → 2.0.0

package/fesm2022/dignite-ng.site-theme-workbench.component-CA47DnTj.mjs

@@ -0,0 +1,1206 @@
+import * as i4 from '@abp/ng.core';
+import { PermissionService, LocalizationService, CoreModule } from '@abp/ng.core';
+import * as i2 from '@abp/ng.theme.shared';
+import { ConfirmationService, ToasterService, Confirmation, ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i0 from '@angular/core';
+import { input, output, viewChild, signal, effect, ChangeDetectionStrategy, Component, inject, computed, untracked, HostListener } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { forkJoin } from 'rxjs';
+import { h as SiteThemeFileStatus, g as SiteThemeAdminService, P as PageAdminService, i as FieldAdminService, j as SiteThemeIssueSeverity, e as eSitePolicyNames, k as SiteThemeUsageKindDto } from './dignite-ng.site-dignite-ng.site-BMcNABSG.mjs';
+import { css } from '@codemirror/lang-css';
+import { html } from '@codemirror/lang-html';
+import { javascript } from '@codemirror/lang-javascript';
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { basicSetup } from 'codemirror';
+import * as i1$1 from '@angular/common';
+
+/**
+ * A code editor over CodeMirror 6, used for the files of a theme.
+ *
+ * A template is highlighted as HTML, not Scriban: it is an HTML document with Scriban's `{{ }}` in it, and there is
+ * no Scriban grammar for CodeMirror, so the `{{ }}` parts are not highlighted - only the markup around them. A static
+ * file is highlighted by its extension ({@link language}).
+ *
+ * {@link documentKey} names the file being edited. When it changes, the editor starts a new editing state for the new
+ * file, so undo never reaches into another file. While it stays the same, the document is owned by CodeMirror as the
+ * user types; {@link value} only matters when it differs from the document (the file was reloaded, say), in which
+ * case the whole document is replaced. A value the editor itself just emitted therefore comes back as a no-op.
+ */
+class CodeEditorComponent {
+    constructor() {
+        this.value = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.readonly = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        this.language = input('html', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "language" }] : /* istanbul ignore next */ []));
+        this.documentKey = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "documentKey" }] : /* istanbul ignore next */ []));
+        this.valueChange = output();
+        this.host = viewChild.required('host', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []));
+        this.readOnlyCompartment = new Compartment();
+        this.languageCompartment = new Compartment();
+        // A signal, so the effects below run again once the view exists - it is created in ngAfterViewInit, after
+        // their first run.
+        this.view = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            const view = this.view();
+            const key = this.documentKey();
+            const value = this.value();
+            if (!view) {
+                return;
+            }
+            if (key !== this.currentKey) {
+                this.currentKey = key;
+                view.setState(this.createState(value));
+                return;
+            }
+            if (value !== view.state.doc.toString()) {
+                view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: value } });
+            }
+        });
+        effect(() => {
+            const view = this.view();
+            const readonly = this.readonly();
+            const language = this.language();
+            view?.dispatch({
+                effects: [
+                    this.readOnlyCompartment.reconfigure(readOnlyExtensions(readonly)),
+                    this.languageCompartment.reconfigure(languageExtension(language)),
+                ],
+            });
+        });
+    }
+    ngAfterViewInit() {
+        this.currentKey = this.documentKey();
+        this.view.set(new EditorView({ parent: this.host().nativeElement, state: this.createState(this.value()) }));
+    }
+    createState(doc) {
+        return EditorState.create({
+            doc,
+            extensions: [
+                basicSetup,
+                this.languageCompartment.of(languageExtension(this.language())),
+                EditorView.lineWrapping,
+                EDITOR_THEME,
+                this.readOnlyCompartment.of(readOnlyExtensions(this.readonly())),
+                EditorView.updateListener.of(update => {
+                    if (update.docChanged) {
+                        this.valueChange.emit(update.state.doc.toString());
+                    }
+                }),
+            ],
+        });
+    }
+    ngOnDestroy() {
+        this.view()?.destroy();
+    }
+    /** Puts the cursor at a 1-based line and column and scrolls it into view. Out-of-range values are clamped. */
+    goTo(line, column) {
+        const view = this.view();
+        if (!view) {
+            return;
+        }
+        const doc = view.state.doc;
+        const target = doc.line(Math.min(Math.max(Math.trunc(line) || 1, 1), doc.lines));
+        const position = Math.min(target.from + Math.max(Math.trunc(column) - 1, 0), target.to);
+        view.dispatch({
+            selection: { anchor: position },
+            effects: EditorView.scrollIntoView(position, { y: 'center' }),
+        });
+        view.focus();
+    }
+    /**
+     * Replaces the selection (or inserts at the cursor) with `text`, puts the cursor after it and focuses the editor. It
+     * is an ordinary transaction, so {@link valueChange} fires exactly as it does for typing. A read-only editor is left
+     * alone.
+     */
+    insert(text) {
+        const view = this.view();
+        if (!view || this.readonly()) {
+            return;
+        }
+        view.dispatch(view.state.update(view.state.replaceSelection(text), { scrollIntoView: true, userEvent: 'input' }));
+        view.focus();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: CodeEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.2.2", type: CodeEditorComponent, isStandalone: true, selector: "site-code-editor", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, documentKey: { classPropertyName: "documentKey", publicName: "documentKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "host", first: true, predicate: ["host"], descendants: true, isSignal: true }], ngImport: i0, template: '<div #host></div>', isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: CodeEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-code-editor', changeDetection: ChangeDetectionStrategy.OnPush, template: '<div #host></div>', styles: [":host{display:block}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], documentKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "documentKey", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], host: [{ type: i0.ViewChild, args: ['host', { isSignal: true }] }] } });
+function readOnlyExtensions(readonly) {
+    return [EditorState.readOnly.of(readonly), EditorView.editable.of(!readonly)];
+}
+function languageExtension(language) {
+    switch (language) {
+        case 'html':
+            return html();
+        case 'css':
+            return css();
+        case 'javascript':
+            return javascript();
+        default:
+            return [];
+    }
+}
+// The editor sits inside a Bootstrap card, so it inherits the card's colors rather than reading the body's:
+// in LeptonX Lite's dim theme --bs-body-bg is dark while the card stays light, and an editor painted with the
+// body tokens came out as a black box on a white card. Only the chrome (border, gutter, active line) reads
+// theme variables, with Bootstrap's light values as fallbacks.
+const EDITOR_THEME = EditorView.theme({
+    // The page that hosts the editor may size it: --site-code-editor-height fixes its height, and without it the
+    // editor grows with its text up to --site-code-editor-max-height.
+    '&': {
+        height: 'var(--site-code-editor-height, auto)',
+        minHeight: '24rem',
+        maxHeight: 'var(--site-code-editor-max-height, 75vh)',
+        border: '1px solid var(--bs-border-color, #dee2e6)',
+        borderRadius: 'var(--bs-border-radius, 0.375rem)',
+        backgroundColor: 'transparent',
+    },
+    '&.cm-focused': {
+        outline: 'none',
+        borderColor: 'var(--bs-primary, #0d6efd)',
+    },
+    '.cm-scroller': {
+        minHeight: '24rem',
+        fontFamily: 'var(--bs-font-monospace, monospace)',
+    },
+    '.cm-gutters': {
+        backgroundColor: 'transparent',
+        color: 'inherit',
+        opacity: '0.6',
+        border: 'none',
+        borderRight: '1px solid var(--bs-border-color, #dee2e6)',
+    },
+    '.cm-activeLine, .cm-activeLineGutter': {
+        backgroundColor: 'rgba(128, 128, 128, 0.12)',
+    },
+});
+
+/** Mirrors `SiteThemeConsts.PathPattern` (`src/Dignite.Site.Domain.Shared/Themes/SiteThemeConsts.cs`). */
+const THEME_PATH_PATTERN = /^(?:[A-Za-z0-9_][A-Za-z0-9_-]*\/)*[A-Za-z0-9_][A-Za-z0-9_-]*(?:\.[A-Za-z0-9_-]+)*$/;
+/** Mirrors `SiteThemeConsts.MaxPathLength`. */
+const THEME_MAX_PATH_LENGTH = 256;
+/** Mirrors the default `SiteThemeConsts.AssetExtensions`; a host may allow more, which the server then accepts. */
+const THEME_ASSET_EXTENSIONS = [
+    'css', 'js', 'mjs', 'json', 'map', 'txt', 'svg', 'xml', 'webmanifest', 'ics', 'csv',
+];
+/** The path as the server stores it: trimmed, without a leading slash. */
+function normalizeThemePath(path) {
+    return (path ?? '').trim().replace(/^\/+/, '');
+}
+/** The extension of the last segment, without the dot, or null - the server's `SiteThemePaths.GetExtension`. */
+function extensionOf(path) {
+    const name = path.slice(path.lastIndexOf('/') + 1);
+    const dot = name.lastIndexOf('.');
+    return dot <= 0 || dot === name.length - 1 ? null : name.slice(dot + 1).toLowerCase();
+}
+/**
+ * Whether `name` is a language the browser knows, spelled the way it spells it (`ja`, `zh-Hans`; not `zh-hans`) -
+ * the server's check for the extension of a language version, which it makes with the runtime's cultures.
+ */
+function isLanguageName(name) {
+    if (!/^[A-Za-z]{2,3}(?:-[A-Za-z0-9]{2,8})*$/.test(name)) {
+        return false;
+    }
+    try {
+        return (Intl.getCanonicalLocales(name)[0] === name &&
+            new Intl.DisplayNames(['en'], { type: 'language', fallback: 'none' }).of(name) !== undefined);
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Whether the path names the version of a template for one language - `blog/post.ja` is the Japanese version of
+ * `blog/post` - which is a template, not a static file: the last segment has exactly one dot, followed by a language
+ * that is not a static file's extension. Mirrors the server's `SiteThemePaths.TryGetLanguageVersion`.
+ */
+function isLanguageVersionPath(path) {
+    const name = path.slice(path.lastIndexOf('/') + 1);
+    const dot = name.indexOf('.');
+    if (dot <= 0 || dot !== name.lastIndexOf('.') || dot === name.length - 1) {
+        return false;
+    }
+    const extension = name.slice(dot + 1);
+    return !THEME_ASSET_EXTENSIONS.includes(extension.toLowerCase()) && isLanguageName(extension);
+}
+/** Whether the path names a static file (its last segment has an extension) rather than a Scriban template. */
+function isAssetPath(path) {
+    return extensionOf(path) !== null && !isLanguageVersionPath(path);
+}
+/**
+ * Why a path cannot be saved, as a localization key, or null when it can. The server decides in the end (a host may
+ * allow more extensions); this only spares a round trip for the common mistakes.
+ */
+function themePathProblem(path) {
+    const normalized = normalizeThemePath(path);
+    if (!normalized || normalized.length > THEME_MAX_PATH_LENGTH || !THEME_PATH_PATTERN.test(normalized)) {
+        return 'Site::ThemePathInvalid';
+    }
+    const extension = extensionOf(normalized);
+    if (extension !== null && !THEME_ASSET_EXTENSIONS.includes(extension) && !isLanguageVersionPath(normalized)) {
+        return 'Site::ThemePathExtensionNotAllowed';
+    }
+    return null;
+}
+function languageOf(path) {
+    if (isLanguageVersionPath(path)) {
+        return 'html';
+    }
+    switch (extensionOf(path)) {
+        case null:
+        case 'svg':
+        case 'xml':
+            return 'html';
+        case 'css':
+            return 'css';
+        case 'js':
+        case 'mjs':
+        case 'json':
+        case 'map':
+        case 'webmanifest':
+            return 'javascript';
+        default:
+            return 'text';
+    }
+}
+const LAYOUT_SKELETON = `<!DOCTYPE html>
+<html lang="{{ culture }}">
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{{ head?.meta_title ?? page.display_name }}</title>
+    {{ site_head }}
+</head>
+<body>
+{{ body }}
+</body>
+</html>
+`;
+const PAGE_SKELETON = `<h1>{{ page.display_name }}</h1>
+{{ if content }}
+    {{ for field in field_list }}
+    <section>
+        <h2>{{ field.display_name }}</h2>
+        {{ render_field field.name }}
+    </section>
+    {{ end }}
+{{ else }}
+    {{ list = contents { max: 20 } }}
+    <ul>
+    {{ for item in list.items }}
+        <li><a href="{{ item.url }}">{{ item.slug }}</a></li>
+    {{ end }}
+    </ul>
+{{ end }}
+`;
+const PARTIAL_SKELETON = `<div>
+    {{ page.display_name }}
+</div>
+`;
+/**
+ * What a new file starts with, guessed from the suggested conventions only - it is a starting point, not a type: a
+ * static file starts empty, a file under `layouts/` as a layout, a name starting with `_` as a partial, anything else
+ * as a page template.
+ */
+function skeletonFor(path) {
+    const normalized = normalizeThemePath(path);
+    const name = normalized.slice(normalized.lastIndexOf('/') + 1);
+    if (isAssetPath(normalized)) {
+        return '';
+    }
+    if (normalized.startsWith('layouts/')) {
+        return LAYOUT_SKELETON;
+    }
+    return name.startsWith('_') ? PARTIAL_SKELETON : PAGE_SKELETON;
+}
+/**
+ * The working copy's files as a tree: folders first, then files, each by name, ordinally. A folder exists only because
+ * a file is in it - the theme has no empty folders.
+ */
+function buildThemeTree(files) {
+    const root = {
+        path: '', name: '', isFolder: true, isAsset: false, status: SiteThemeFileStatus.Unchanged, children: [], hasChanges: false,
+    };
+    for (const file of files) {
+        const segments = (file.path ?? '').split('/');
+        let folder = root;
+        segments.slice(0, -1).forEach((segment, index) => {
+            const path = segments.slice(0, index + 1).join('/');
+            let child = folder.children.find(node => node.isFolder && node.path === path);
+            if (!child) {
+                child = {
+                    path, name: segment, isFolder: true, isAsset: false, status: SiteThemeFileStatus.Unchanged, children: [], hasChanges: false,
+                };
+                folder.children.push(child);
+            }
+            folder = child;
+        });
+        folder.children.push({
+            path: file.path ?? '',
+            name: segments[segments.length - 1],
+            isFolder: false,
+            isAsset: file.isAsset,
+            status: file.status,
+            children: [],
+            hasChanges: file.status !== SiteThemeFileStatus.Unchanged,
+        });
+    }
+    sortAndMark(root);
+    return root.children;
+}
+function sortAndMark(folder) {
+    folder.children.sort((a, b) => a.isFolder !== b.isFolder ? (a.isFolder ? -1 : 1) : a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
+    let changed = false;
+    for (const child of folder.children) {
+        if (child.isFolder) {
+            child.hasChanges = sortAndMark(child);
+        }
+        changed ||= child.hasChanges;
+    }
+    return changed;
+}
+/** Every folder on the way to `path`, outermost first: `blog`, `blog/archive` for `blog/archive/post`. */
+function foldersOf(path) {
+    const segments = path.split('/');
+    return segments.slice(0, -1).map((_, index) => segments.slice(0, index + 1).join('/'));
+}
+/** The message of an ABP error response, with its validation details. */
+function errorMessageOf(response) {
+    const error = response?.error?.error;
+    const details = (error?.validationErrors ?? []).map(entry => entry.message).filter(Boolean);
+    return [error?.message ?? response?.message, ...details].filter(Boolean).join('\n');
+}
+/** The theme path a page's `Template` renders through - the site's resolution: a trailing `.cshtml` is dropped. */
+function pageTemplatePath(template) {
+    const name = (template ?? '').trim();
+    return normalizeThemePath(name.toLowerCase().endsWith('.cshtml') ? name.slice(0, -'.cshtml'.length) : name);
+}
+/** The field type of a page's SEO block: edited in its own panel and written by `site_head`, never by hand. */
+const SEO_FIELD_TYPE = 'Seo';
+/** A field name Scriban can read as a member (`content.fields.title`); anything else needs the indexer form. */
+const SCRIBAN_MEMBER_NAME = /^[A-Za-z_][A-Za-z0-9_]*$/;
+/**
+ * The Scriban that prints a field of the current content. Plain values are read straight off `content.fields`; a date
+ * is formatted; everything composite or rich (editor text, matrix, table, a linked content, files) goes through
+ * `render_field`, which knows how to draw it. A name that is not a plain identifier (it may hold a hyphen) is read with
+ * the indexer, the only form Scriban parses for it.
+ */
+function snippetFor(fieldTypeName, name) {
+    const member = SCRIBAN_MEMBER_NAME.test(name) ? `content.fields.${name}` : `content.fields["${name}"]`;
+    switch (fieldTypeName) {
+        case 'Text':
+        case 'Number':
+        case 'Boolean':
+        case 'Select':
+        case 'Tree':
+            return `{{ ${member} }}`;
+        case 'DateTime':
+            return `{{ ${member} | date.to_string "%Y-%m-%d" }}`;
+        default:
+            return `{{ render_field "${name}" }}`;
+    }
+}
+/**
+ * One group per content type of `page`, its fields in arrangement order, named as the content type names them, without
+ * the SEO block; a content type left with no field is left out. Empty until both the page and the field library are
+ * there.
+ */
+function fieldGroupsFor(page, library) {
+    if (!page || !library) {
+        return [];
+    }
+    const fieldsById = new Map(library.map(field => [field.id, field]));
+    return (page.contentTypes ?? [])
+        .map(contentType => ({
+        id: contentType.id ?? contentType.name ?? '',
+        displayName: contentType.displayName || contentType.name || '',
+        fields: [...(contentType.fields ?? [])]
+            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+            .flatMap(arranged => {
+            const field = fieldsById.get(arranged.fieldId ?? '');
+            if (!field?.name || field.fieldTypeName === SEO_FIELD_TYPE) {
+                return [];
+            }
+            const fieldTypeName = field.fieldTypeName ?? '';
+            return [
+                {
+                    name: field.name,
+                    displayName: arranged.displayName || field.displayName || field.name,
+                    fieldTypeName,
+                    snippet: snippetFor(fieldTypeName, field.name),
+                },
+            ];
+        }),
+    }))
+        .filter(group => group.fields.length > 0);
+}
+
+/** `Site:090003`: the working copy changed since the check the publish was based on. */
+const CHANGED_SINCE_CHECK = 'Site:090003';
+/**
+ * The theme workbench: the working copy's files in a tree on the left, open files in an editor in the middle, the
+ * check on the right, and publishing, the release history and the theme's settings above.
+ *
+ * Saving writes one file of the working copy in place and changes nothing on the site; publishing freezes the whole
+ * working copy into a release and makes it live. See the Scriban Templates page of the documentation for the model.
+ *
+ * Deliberately no `<form (ngSubmit)>` around the editor: ABP's `FormSubmitDirective` (pulled in by `CoreModule`)
+ * submits a form on every Enter keyup that does not come from a `<textarea>`, and CodeMirror is a contenteditable.
+ */
+class ThemeWorkbenchComponent {
+    constructor() {
+        this.themeService = inject(SiteThemeAdminService);
+        this.pageService = inject(PageAdminService);
+        this.fieldService = inject(FieldAdminService);
+        this.permission = inject(PermissionService);
+        this.confirmation = inject(ConfirmationService);
+        this.toaster = inject(ToasterService);
+        this.localization = inject(LocalizationService);
+        this.statuses = SiteThemeFileStatus;
+        this.severities = SiteThemeIssueSeverity;
+        this.canEdit = this.permission.getGrantedPolicy(eSitePolicyNames.ThemesEdit);
+        this.canPublish = this.permission.getGrantedPolicy(eSitePolicyNames.ThemesPublish);
+        this.editor = viewChild(CodeEditorComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editor" }] : /* istanbul ignore next */ []));
+        // State that changes in an HTTP callback is a signal, not a plain field: the host layout's ancestors are OnPush,
+        // and a plain-field write in a response callback never marks them for check.
+        this.isLoading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.isBusy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this.theme = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []));
+        this.files = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+        this.collapsed = signal(new Set(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+        this.openFiles = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "openFiles" }] : /* istanbul ignore next */ []));
+        this.activePath = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []));
+        this.check = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "check" }] : /* istanbul ignore next */ []));
+        this.isChecking = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isChecking" }] : /* istanbul ignore next */ []));
+        this.tree = computed(() => buildThemeTree(this.files()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tree" }] : /* istanbul ignore next */ []));
+        /** The tree flattened into the rows the template shows, folders that are collapsed left closed. */
+        this.treeRows = computed(() => {
+            const rows = [];
+            const collapsed = this.collapsed();
+            const walk = (nodes, depth) => {
+                for (const node of nodes) {
+                    rows.push({ node, depth });
+                    if (node.isFolder && !collapsed.has(node.path)) {
+                        walk(node.children, depth + 1);
+                    }
+                }
+            };
+            walk(this.tree(), 0);
+            return rows;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "treeRows" }] : /* istanbul ignore next */ []));
+        this.activeFile = computed(() => this.openFiles().find(file => file.path === this.activePath()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeFile" }] : /* istanbul ignore next */ []));
+        /** Whether the file in front can be the default layout: the last check lists it among the layouts. */
+        this.isLayoutInFront = computed(() => {
+            const path = this.activePath();
+            return !!path && (this.check()?.layouts ?? []).includes(path);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLayoutInFront" }] : /* istanbul ignore next */ []));
+        /** Whether the file in front already is the default layout. */
+        this.isDefaultLayoutInFront = computed(() => {
+            const path = this.activePath();
+            return !!path && path === this.theme()?.defaultLayout;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isDefaultLayoutInFront" }] : /* istanbul ignore next */ []));
+        this.hasUnsavedFiles = computed(() => this.openFiles().some(file => isDirty(file)), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasUnsavedFiles" }] : /* istanbul ignore next */ []));
+        this.errorCount = computed(() => this.issuesOf(SiteThemeIssueSeverity.Error).length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errorCount" }] : /* istanbul ignore next */ []));
+        this.warningCount = computed(() => this.issuesOf(SiteThemeIssueSeverity.Warning).length, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "warningCount" }] : /* istanbul ignore next */ []));
+        // Dialogs.
+        this.isNewFileOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isNewFileOpen" }] : /* istanbul ignore next */ []));
+        this.newFilePath = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "newFilePath" }] : /* istanbul ignore next */ []));
+        this.newFileError = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "newFileError" }] : /* istanbul ignore next */ []));
+        this.isRenameOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRenameOpen" }] : /* istanbul ignore next */ []));
+        this.renameFrom = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renameFrom" }] : /* istanbul ignore next */ []));
+        this.renameTo = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renameTo" }] : /* istanbul ignore next */ []));
+        this.renameUpdatesReferences = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renameUpdatesReferences" }] : /* istanbul ignore next */ []));
+        this.renameError = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "renameError" }] : /* istanbul ignore next */ []));
+        this.isPublishOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isPublishOpen" }] : /* istanbul ignore next */ []));
+        this.publishCheck = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "publishCheck" }] : /* istanbul ignore next */ []));
+        this.publishComment = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "publishComment" }] : /* istanbul ignore next */ []));
+        this.publishError = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "publishError" }] : /* istanbul ignore next */ []));
+        this.isReleasesOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isReleasesOpen" }] : /* istanbul ignore next */ []));
+        this.releases = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "releases" }] : /* istanbul ignore next */ []));
+        /** The "more" menu of a file in the tree: the file, and where it opens (fixed, so the tree's scrolling does not clip it). */
+        this.rowMenu = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowMenu" }] : /* istanbul ignore next */ []));
+        /** The site's pages, to find those the template in front renders; empty without the Pages permission. */
+        this.pages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+        /** The active pages whose template is the file in front. */
+        this.templatePages = computed(() => {
+            const path = this.activePath();
+            if (!path || isAssetPath(path)) {
+                return [];
+            }
+            return this.pages()
+                .filter(page => page.isActive && pageTemplatePath(page.template) === path)
+                .map(page => ({ id: page.id ?? '', name: page.displayName || page.name }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "templatePages" }] : /* istanbul ignore next */ []));
+        // The field sidebar.
+        /** The page the author picked to list the fields of; the first page of the template in front otherwise. */
+        this.chosenFieldsPageId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "chosenFieldsPageId" }] : /* istanbul ignore next */ []));
+        /** Pages read in full, with their content types, by id; null for one that could not be read. */
+        this.pageDetails = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageDetails" }] : /* istanbul ignore next */ []));
+        /** The field library, read once; undefined until then, empty when it could not be read (no Fields permission). */
+        this.fieldLibrary = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldLibrary" }] : /* istanbul ignore next */ []));
+        this.fieldLibraryRequested = false;
+        this.requestedPageIds = new Set();
+        /** Whether the fields show: the file in front is the template of a page. The check shows whatever the file. */
+        this.showsFields = computed(() => this.templatePages().length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showsFields" }] : /* istanbul ignore next */ []));
+        this.fieldsPageId = computed(() => {
+            const ids = this.templatePages().map(page => page.id);
+            const chosen = this.chosenFieldsPageId();
+            return chosen && ids.includes(chosen) ? chosen : ids[0];
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldsPageId" }] : /* istanbul ignore next */ []));
+        this.fieldGroups = computed(() => {
+            const id = this.fieldsPageId();
+            return fieldGroupsFor((id && this.pageDetails().get(id)) || undefined, this.fieldLibrary());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fieldGroups" }] : /* istanbul ignore next */ []));
+        this.isLoadingFields = computed(() => {
+            const id = this.fieldsPageId();
+            return this.fieldLibrary() === undefined || (!!id && !this.pageDetails().has(id));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoadingFields" }] : /* istanbul ignore next */ []));
+        /** The number of the check asked for last: only its answer counts, so an older one arriving late cannot overwrite it. */
+        this.checkSequence = 0;
+        /** Callbacks waiting for the answer of the check asked for last, including those of checks it took over from. */
+        this.pendingAfter = [];
+        // Reads what the sidebar lists when it is shown: the library once, each page once.
+        effect(() => {
+            if (!this.showsFields()) {
+                return;
+            }
+            const id = this.fieldsPageId();
+            untracked(() => {
+                this.ensureFieldLibrary();
+                if (id) {
+                    this.ensurePageDetail(id);
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        forkJoin([this.themeService.get(), this.themeService.getFiles()]).subscribe({
+            next: ([theme, files]) => {
+                this.theme.set(theme);
+                this.files.set(files.items ?? []);
+                this.isLoading.set(false);
+                this.runCheck();
+            },
+            error: () => this.isLoading.set(false),
+        });
+        if (this.permission.getGrantedPolicy(eSitePolicyNames.Pages)) {
+            this.pageService.getList({}).subscribe(result => this.pages.set(result.items ?? []));
+        }
+    }
+    /** Inserts a field's snippet into the file in front, at the cursor. */
+    insertField(field) {
+        this.editor()?.insert(field.snippet);
+    }
+    ensureFieldLibrary() {
+        if (this.fieldLibraryRequested) {
+            return;
+        }
+        this.fieldLibraryRequested = true;
+        // skipHandleError: without the Fields permission the sidebar says it has nothing to list; no toast.
+        this.fieldService.getList({}, { skipHandleError: true }).subscribe({
+            next: result => this.fieldLibrary.set(result.items ?? []),
+            error: () => this.fieldLibrary.set([]),
+        });
+    }
+    ensurePageDetail(id) {
+        if (this.requestedPageIds.has(id)) {
+            return;
+        }
+        this.requestedPageIds.add(id);
+        this.pageService.get(id, { skipHandleError: true }).subscribe({
+            next: page => this.pageDetails.update(details => new Map(details).set(id, page)),
+            error: () => this.pageDetails.update(details => new Map(details).set(id, null)),
+        });
+    }
+    /** Opens the "more" menu of a file under its button, or closes it when it is already open for that file. */
+    toggleRowMenu(event, path) {
+        // Not on to the document listener below, which would close the menu at once.
+        event.stopPropagation();
+        if (this.rowMenu()?.path === path) {
+            this.rowMenu.set(null);
+            return;
+        }
+        const rect = event.currentTarget.getBoundingClientRect();
+        this.rowMenu.set({ path, top: rect.bottom, right: window.innerWidth - rect.right });
+    }
+    /** Closes the "more" menu on a click anywhere, on Escape, and when the tree scrolls from under it. */
+    closeRowMenu() {
+        if (this.rowMenu()) {
+            this.rowMenu.set(null);
+        }
+    }
+    renameFromMenu() {
+        const path = this.rowMenu()?.path;
+        this.rowMenu.set(null);
+        if (path) {
+            this.openRename(path);
+        }
+    }
+    deleteFromMenu() {
+        const path = this.rowMenu()?.path;
+        this.rowMenu.set(null);
+        if (path) {
+            this.deleteFile(path);
+        }
+    }
+    /** Asks before leaving the page while a file has unsaved changes. */
+    onBeforeUnload(event) {
+        if (this.hasUnsavedFiles()) {
+            event.preventDefault();
+        }
+    }
+    /** Ctrl+S / Cmd+S saves the file in front, instead of the browser's "save page". */
+    onEditorKeydown(event) {
+        if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+            event.preventDefault();
+            this.save();
+        }
+    }
+    isDirty(file) {
+        return isDirty(file);
+    }
+    statusKey(status) {
+        switch (status) {
+            case SiteThemeFileStatus.Modified:
+                return 'Site::ThemeFileStatus:Modified';
+            case SiteThemeFileStatus.Added:
+                return 'Site::ThemeFileStatus:Added';
+            case SiteThemeFileStatus.Deleted:
+                return 'Site::ThemeFileStatus:Deleted';
+            default:
+                return null;
+        }
+    }
+    /** Whether the working copy's default layout is not the one the live release froze. */
+    defaultLayoutChanged(check) {
+        return !!check?.liveReleaseNumber && (check.defaultLayout ?? '') !== (check.liveDefaultLayout ?? '');
+    }
+    issuesOf(severity) {
+        return (this.check()?.issues ?? []).filter(issue => issue.severity === severity);
+    }
+    toggleFolder(path) {
+        const next = new Set(this.collapsed());
+        if (next.has(path)) {
+            next.delete(path);
+        }
+        else {
+            next.add(path);
+        }
+        this.collapsed.set(next);
+    }
+    select(node) {
+        if (node.isFolder) {
+            this.toggleFolder(node.path);
+        }
+        else if (node.status !== SiteThemeFileStatus.Deleted) {
+            this.openFile(node.path);
+        }
+    }
+    openFile(path, then) {
+        this.expandTo(path);
+        if (this.openFiles().some(file => file.path === path)) {
+            this.activePath.set(path);
+            then?.();
+            return;
+        }
+        this.themeService.getFile(path).subscribe(file => {
+            // The tabs of files that were only looked at give way to this one.
+            this.openFiles.update(files => [...files.filter(f => f.pinned || isDirty(f)), toOpenFile(file)]);
+            this.activePath.set(file.path);
+            // After the editor has taken the new document.
+            setTimeout(() => then?.());
+        });
+    }
+    closeFile(path) {
+        const file = this.openFiles().find(f => f.path === path);
+        if (!file) {
+            return;
+        }
+        const close = () => {
+            const files = this.openFiles();
+            const index = files.findIndex(f => f.path === path);
+            const remaining = files.filter(f => f.path !== path);
+            this.openFiles.set(remaining);
+            if (this.activePath() === path) {
+                this.activePath.set(remaining[Math.min(index, remaining.length - 1)]?.path);
+            }
+        };
+        if (!isDirty(file)) {
+            close();
+            return;
+        }
+        this.confirmation
+            .warn('Site::CloseUnsavedConfirm', 'AbpUi::AreYouSure', { messageLocalizationParams: [path] })
+            .subscribe(status => {
+            if (status === Confirmation.Status.confirm) {
+                close();
+            }
+        });
+    }
+    onEdit(body) {
+        const path = this.activePath();
+        this.openFiles.update(files => files.map(file => (file.path === path ? { ...file, body, pinned: file.pinned || body !== file.savedBody } : file)));
+    }
+    save(overwrite = false) {
+        const file = this.activeFile();
+        if (!file || !this.canEdit || this.isBusy()) {
+            return;
+        }
+        this.isBusy.set(true);
+        this.themeService
+            .saveFile({ path: file.path, body: file.body, concurrencyStamp: overwrite ? undefined : file.concurrencyStamp }, { skipHandleError: true })
+            .subscribe({
+            next: saved => {
+                this.isBusy.set(false);
+                this.replaceOpenFile(file.path, {
+                    ...toOpenFile(saved),
+                    body: this.bodyOf(file.path) ?? saved.body ?? '',
+                    pinned: true,
+                });
+                this.toaster.success('Site::ThemeFileSaved');
+                this.refreshFiles();
+                this.runCheck();
+            },
+            error: (response) => {
+                this.isBusy.set(false);
+                if (response.status === 409) {
+                    this.resolveConflict(file.path);
+                    return;
+                }
+                this.toaster.error(errorMessageOf(response) || 'AbpUi::DefaultErrorMessage');
+            },
+        });
+    }
+    /** Someone saved the file after it was opened: overwrite their version with this one, or load theirs. */
+    resolveConflict(path) {
+        this.confirmation
+            .warn('Site::SaveConflictConfirm', 'AbpUi::AreYouSure', {
+            messageLocalizationParams: [path],
+            yesText: 'Site::Overwrite',
+            cancelText: 'Site::ReloadFile',
+        })
+            .subscribe(status => {
+            // Closing the dialog (Esc, the close button) decides neither: the edits stay, unsaved.
+            if (status === Confirmation.Status.confirm) {
+                this.save(true);
+            }
+            else if (status === Confirmation.Status.reject) {
+                this.reloadFile(path);
+            }
+        });
+    }
+    reloadFile(path) {
+        this.themeService.getFile(path).subscribe(file => {
+            this.replaceOpenFile(path, toOpenFile(file));
+            this.toaster.info('Site::ThemeFileReloaded', undefined, { messageLocalizationParams: [path] });
+        });
+    }
+    goToIssue(issue) {
+        if (!issue.path) {
+            return;
+        }
+        const line = issue.line;
+        const column = issue.column ?? 1;
+        this.openFile(issue.path, () => {
+            if (line) {
+                this.editor()?.goTo(line, column);
+            }
+        });
+    }
+    goToSyntaxError(error) {
+        this.editor()?.goTo(error.line, error.column);
+    }
+    /**
+     * Asks for the check of the working copy as it is saved now. Checks run after every change, so one can be asked for
+     * while another is still on its way; only the last one counts - the working copy it read is the newest. `after`
+     * runs with that answer, also when a later check took this one's place.
+     */
+    runCheck(after) {
+        const sequence = ++this.checkSequence;
+        if (after) {
+            this.pendingAfter.push(after);
+        }
+        this.isChecking.set(true);
+        this.themeService.check().subscribe({
+            next: check => {
+                if (sequence !== this.checkSequence) {
+                    return;
+                }
+                this.check.set(check);
+                this.isChecking.set(false);
+                const callbacks = this.pendingAfter;
+                this.pendingAfter = [];
+                callbacks.forEach(callback => callback(check));
+            },
+            error: () => {
+                if (sequence === this.checkSequence) {
+                    this.isChecking.set(false);
+                    this.pendingAfter = [];
+                }
+            },
+        });
+    }
+    // New file.
+    openNewFile(folder) {
+        this.newFilePath.set(folder ? folder + '/' : '');
+        this.newFileError.set(null);
+        this.isNewFileOpen.set(true);
+    }
+    createFile() {
+        const path = normalizeThemePath(this.newFilePath());
+        const problem = themePathProblem(path);
+        if (problem) {
+            this.newFileError.set(this.localization.instant(problem));
+            return;
+        }
+        if (this.files().some(file => file.path === path && file.status !== SiteThemeFileStatus.Deleted)) {
+            this.newFileError.set(this.localization.instant('Site::ThemeFileExists', path));
+            return;
+        }
+        this.isBusy.set(true);
+        this.themeService.saveFile({ path, body: skeletonFor(path) }, { skipHandleError: true }).subscribe({
+            next: saved => {
+                this.isBusy.set(false);
+                this.isNewFileOpen.set(false);
+                this.refreshFiles();
+                this.runCheck();
+                this.openFiles.update(files => [...files.filter(f => f.path !== saved.path), { ...toOpenFile(saved), pinned: true }]);
+                this.activePath.set(saved.path);
+                this.expandTo(saved.path ?? '');
+            },
+            error: (response) => {
+                this.isBusy.set(false);
+                this.newFileError.set(errorMessageOf(response));
+            },
+        });
+    }
+    // Rename.
+    openRename(path) {
+        this.renameFrom.set(path);
+        this.renameTo.set(path);
+        this.renameUpdatesReferences.set(true);
+        this.renameError.set(null);
+        this.isRenameOpen.set(true);
+    }
+    rename() {
+        const from = this.renameFrom();
+        const to = normalizeThemePath(this.renameTo());
+        const problem = themePathProblem(to);
+        if (problem) {
+            this.renameError.set(this.localization.instant(problem));
+            return;
+        }
+        if (this.openFiles().some(file => isDirty(file) && file.path === from)) {
+            this.renameError.set(this.localization.instant('Site::SaveBeforeRename'));
+            return;
+        }
+        this.isBusy.set(true);
+        this.themeService
+            .renameFile({ path: from, newPath: to, updateReferences: this.renameUpdatesReferences() }, { skipHandleError: true })
+            .subscribe({
+            next: result => {
+                this.isBusy.set(false);
+                this.isRenameOpen.set(false);
+                // The renamed file keeps its tab, under its new path; files whose references were rewritten are reloaded
+                // when they have no unsaved changes of their own.
+                this.openFiles.update(files => files.map(file => (file.path === from ? { ...toOpenFile(result.file), pinned: file.pinned } : file)));
+                if (this.activePath() === from) {
+                    this.activePath.set(result.file.path);
+                }
+                for (const path of result.updatedPaths ?? []) {
+                    const open = this.openFiles().find(file => file.path === path);
+                    if (open && !isDirty(open) && path !== result.file.path) {
+                        this.reloadFile(path);
+                    }
+                }
+                this.toaster.success('Site::ThemeFileRenamed', undefined, {
+                    messageLocalizationParams: [String(result.updatedPaths?.length ?? 0)],
+                });
+                if (result.pagesStillUsingOldPath?.length) {
+                    this.toaster.warn('Site::RenamePagesStillUsing', undefined, {
+                        messageLocalizationParams: [result.pagesStillUsingOldPath.join(', ')],
+                    });
+                }
+                this.refreshTheme();
+                this.refreshFiles();
+                this.runCheck();
+            },
+            error: (response) => {
+                this.isBusy.set(false);
+                this.renameError.set(errorMessageOf(response));
+            },
+        });
+    }
+    // Delete.
+    deleteFile(path) {
+        this.themeService.getFileUsages(path).subscribe(usages => {
+            const users = describeUsages(usages, kind => this.localization.instant('Site::ThemeUsage:' + SiteThemeUsageKindDto[kind]));
+            const confirm$ = users
+                ? this.confirmation.warn('Site::DeleteThemeFileUsedConfirm', 'AbpUi::AreYouSure', {
+                    messageLocalizationParams: [path, users],
+                })
+                : this.confirmation.warn('Site::DeleteThemeFileConfirm', 'AbpUi::AreYouSure', {
+                    messageLocalizationParams: [path],
+                });
+            confirm$.subscribe(status => {
+                if (status !== Confirmation.Status.confirm) {
+                    return;
+                }
+                this.themeService.deleteFile(path).subscribe(() => {
+                    this.openFiles.update(files => files.filter(file => file.path !== path));
+                    if (this.activePath() === path) {
+                        this.activePath.set(this.openFiles()[0]?.path);
+                    }
+                    this.toaster.success('AbpUi::SuccessfullyDeleted');
+                    this.refreshFiles();
+                    this.runCheck();
+                });
+            });
+        });
+    }
+    // Preview.
+    /**
+     * Opens the site's home page in a new tab with the working copy as saved, or with a release, for this browser only;
+     * the author follows the site's links from there. The tab is opened inside the click, so the browser lets it
+     * through, and pointed at the signed link once it arrives; it gets no handle on this page, since the theme's scripts
+     * run in it.
+     */
+    openPreview(releaseId) {
+        const tab = window.open('', '_blank');
+        if (!tab) {
+            this.toaster.warn('Site::PreviewPopupBlocked');
+            return;
+        }
+        tab.opener = null;
+        if (!releaseId && this.hasUnsavedFiles()) {
+            this.toaster.info('Site::PreviewUnsavedNotShown');
+        }
+        this.themeService.getPreviewLink(undefined, releaseId).subscribe({
+            next: link => tab.location.replace(link.url),
+            // The error itself is shown by the default handler.
+            error: () => tab.close(),
+        });
+    }
+    // Publish.
+    openPublish() {
+        this.publishComment.set('');
+        this.publishError.set(null);
+        this.publishCheck.set(undefined);
+        this.isPublishOpen.set(true);
+        this.runCheck(check => this.publishCheck.set(check));
+    }
+    /** Enter in the comment publishes, unless it only confirms a word in an input method (Chinese, Japanese). */
+    publishOnEnter(event) {
+        if (!event.isComposing) {
+            this.publish();
+        }
+    }
+    publish() {
+        const check = this.publishCheck();
+        if (!check?.fingerprint || check.hasErrors || !check.hasChanges || this.isBusy()) {
+            return;
+        }
+        this.isBusy.set(true);
+        this.themeService
+            .publish({ fingerprint: check.fingerprint, comment: this.publishComment() || undefined }, { skipHandleError: true })
+            .subscribe({
+            next: release => {
+                this.isBusy.set(false);
+                this.isPublishOpen.set(false);
+                this.toaster.success('Site::ThemePublished', undefined, { messageLocalizationParams: [String(release.number)] });
+                this.refreshTheme();
+                this.refreshFiles();
+                this.runCheck();
+            },
+            error: (response) => {
+                this.isBusy.set(false);
+                this.publishError.set(errorMessageOf(response));
+                if (response.error?.error?.code === CHANGED_SINCE_CHECK) {
+                    // Show what is there now; the author publishes again from the fresh check.
+                    this.runCheck(fresh => this.publishCheck.set(fresh));
+                }
+            },
+        });
+    }
+    // Releases.
+    openReleases() {
+        this.isReleasesOpen.set(true);
+        this.loadReleases();
+    }
+    loadReleases() {
+        this.themeService.getReleases().subscribe(result => this.releases.set(result.items ?? []));
+    }
+    makeLive(release) {
+        this.confirmation
+            .warn('Site::MakeReleaseLiveConfirm', 'AbpUi::AreYouSure', { messageLocalizationParams: [String(release.number)] })
+            .subscribe(status => {
+            if (status !== Confirmation.Status.confirm || !release.id) {
+                return;
+            }
+            this.themeService.setLiveRelease(release.id).subscribe(() => {
+                this.toaster.success('Site::ReleaseMadeLive', undefined, { messageLocalizationParams: [String(release.number)] });
+                this.loadReleases();
+                this.refreshTheme();
+                this.refreshFiles();
+                this.runCheck();
+            });
+        });
+    }
+    restore(release) {
+        this.confirmation
+            .warn('Site::RestoreReleaseConfirm', 'AbpUi::AreYouSure', { messageLocalizationParams: [String(release.number)] })
+            .subscribe(status => {
+            if (status !== Confirmation.Status.confirm || !release.id) {
+                return;
+            }
+            this.themeService.restoreRelease(release.id).subscribe(() => {
+                // Every open file may have changed; open tabs would show what is no longer there.
+                this.openFiles.set([]);
+                this.activePath.set(undefined);
+                this.isReleasesOpen.set(false);
+                this.toaster.success('Site::ReleaseRestored', undefined, { messageLocalizationParams: [String(release.number)] });
+                this.refreshTheme();
+                this.refreshFiles();
+                this.runCheck();
+            });
+        });
+    }
+    // Default layout.
+    /**
+     * Makes the file in front the default layout, from its own toolbar: it is offered only for a file the check lists as
+     * a layout, and the server judges again, from what is saved - what it writes and calls, through what it includes.
+     */
+    setAsDefaultLayout() {
+        const path = this.activePath();
+        if (!path || this.isBusy() || this.isDefaultLayoutInFront()) {
+            return;
+        }
+        this.isBusy.set(true);
+        this.themeService
+            .update({ defaultLayout: path, concurrencyStamp: this.theme()?.concurrencyStamp }, { skipHandleError: true })
+            .subscribe({
+            next: theme => {
+                this.isBusy.set(false);
+                this.theme.set(theme);
+                this.toaster.success('Site::DefaultLayoutSet', undefined, { messageLocalizationParams: [path] });
+                this.runCheck();
+            },
+            error: (response) => {
+                this.isBusy.set(false);
+                this.toaster.error(errorMessageOf(response) || 'AbpUi::DefaultErrorMessage');
+            },
+        });
+    }
+    languageOf(path) {
+        return languageOf(path);
+    }
+    refreshTheme() {
+        this.themeService.get().subscribe(theme => this.theme.set(theme));
+    }
+    refreshFiles() {
+        this.themeService.getFiles().subscribe(files => this.files.set(files.items ?? []));
+    }
+    replaceOpenFile(path, file) {
+        this.openFiles.update(files => files.map(f => (f.path === path ? { ...file, pinned: file.pinned || f.pinned } : f)));
+    }
+    bodyOf(path) {
+        return this.openFiles().find(file => file.path === path)?.body;
+    }
+    expandTo(path) {
+        const folders = foldersOf(path);
+        if (folders.some(folder => this.collapsed().has(folder))) {
+            const next = new Set(this.collapsed());
+            folders.forEach(folder => next.delete(folder));
+            this.collapsed.set(next);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ThemeWorkbenchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: ThemeWorkbenchComponent, isStandalone: true, selector: "site-theme-workbench", host: { listeners: { "document:click": "closeRowMenu()", "document:keydown.escape": "closeRowMenu()", "window:beforeunload": "onBeforeUnload($event)" } }, viewQueries: [{ propertyName: "editor", first: true, predicate: CodeEditorComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <div class=\"text-center py-5\">\n    <span class=\"spinner-border\" role=\"status\"></span>\n  </div>\n} @else {\n  <!-- Toolbar: the default layout, and the actions on the theme as a whole. The live release is marked in the history. -->\n  <div class=\"card mb-3\">\n    <div class=\"card-body d-flex flex-wrap align-items-center gap-2\">\n      <div class=\"me-auto\">\n        <h5 class=\"mb-0\">{{ 'Site::Theme' | abpLocalization }}</h5>\n        <small class=\"text-muted\">\n          {{ 'Site::DefaultLayout' | abpLocalization }}:\n          <code>{{ theme()?.defaultLayout || ('Site::NoDefaultLayout' | abpLocalization) }}</code>\n        </small>\n      </div>\n      <!-- Preview of the theme as a whole: the site's home page, from which the author follows the links. -->\n      <button\n        type=\"button\"\n        class=\"btn btn-outline-secondary\"\n        [title]=\"'Site::PreviewThemeHint' | abpLocalization\"\n        (click)=\"openPreview()\"\n      >\n        <i class=\"fa fa-eye me-1\"></i>{{ 'Site::PreviewTheme' | abpLocalization }}\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"openReleases()\">\n        <i class=\"fa fa-history me-1\"></i>{{ 'Site::Releases' | abpLocalization }}\n      </button>\n      @if (canPublish) {\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"openPublish()\">\n          <i class=\"fa fa-upload me-1\"></i>{{ 'Site::PublishTheme' | abpLocalization }}\n        </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"row g-3\">\n    <!-- Left: the working copy's files. -->\n    <div class=\"col-lg-3\">\n      <div class=\"card h-100\">\n        <div class=\"card-body\">\n          <div class=\"d-flex align-items-center mb-2\">\n            <h6 class=\"mb-0 me-auto\">{{ 'Site::ThemeFiles' | abpLocalization }}</h6>\n            @if (canEdit) {\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-outline-primary\"\n                (click)=\"openNewFile()\"\n                [title]=\"'Site::NewThemeFile' | abpLocalization\"\n              >\n                <i class=\"fa fa-plus\"></i>\n              </button>\n            }\n          </div>\n          <div class=\"theme-tree\" role=\"tree\" (scroll)=\"closeRowMenu()\">\n            @for (row of treeRows(); track row.node.path + row.node.isFolder) {\n              <div\n                class=\"theme-tree-row\"\n                [class.active]=\"!row.node.isFolder && row.node.path === activePath()\"\n                [class.deleted]=\"row.node.status === statuses.Deleted\"\n                [style.padding-left.rem]=\"0.25 + row.depth * 1\"\n              >\n                <button\n                  type=\"button\"\n                  class=\"theme-tree-main\"\n                  role=\"treeitem\"\n                  [title]=\"row.node.path\"\n                  (click)=\"select(row.node)\"\n                >\n                  @if (row.node.isFolder) {\n                    <i class=\"fa fa-fw\" [class.fa-folder]=\"collapsed().has(row.node.path)\" [class.fa-folder-open]=\"!collapsed().has(row.node.path)\"></i>\n                  } @else {\n                    <i class=\"fa fa-fw\" [class.fa-file-code]=\"row.node.isAsset\" [class.fa-file-lines]=\"!row.node.isAsset\"></i>\n                  }\n                  <span class=\"name\">{{ row.node.name }}</span>\n                  @if (!row.node.isFolder && statusKey(row.node.status); as key) {\n                    <span\n                      class=\"badge\"\n                      [class.text-bg-warning]=\"row.node.status === statuses.Modified\"\n                      [class.text-bg-success]=\"row.node.status === statuses.Added\"\n                      [class.text-bg-secondary]=\"row.node.status === statuses.Deleted\"\n                      [title]=\"key | abpLocalization\"\n                    >{{ (key + ':Short') | abpLocalization }}</span>\n                  } @else if (row.node.isFolder && row.node.hasChanges) {\n                    <span class=\"text-warning\" [title]=\"'Site::ThemeFolderHasChanges' | abpLocalization\">\u2022</span>\n                  }\n                </button>\n                <!-- Renaming and deleting are rare: behind a \"more\" button on the file, not in the editor's way. -->\n                @if (canEdit && !row.node.isFolder && row.node.status !== statuses.Deleted) {\n                  <button\n                    type=\"button\"\n                    class=\"theme-tree-more\"\n                    [class.open]=\"rowMenu()?.path === row.node.path\"\n                    [attr.aria-label]=\"'Site::MoreActions' | abpLocalization\"\n                    [attr.aria-expanded]=\"rowMenu()?.path === row.node.path\"\n                    [title]=\"'Site::MoreActions' | abpLocalization\"\n                    (click)=\"toggleRowMenu($event, row.node.path)\"\n                  >\n                    <i class=\"fa fa-ellipsis-vertical\"></i>\n                  </button>\n                }\n              </div>\n            } @empty {\n              <p class=\"text-muted small mb-0\">{{ 'Site::ThemeNoFiles' | abpLocalization }}</p>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Middle: the open files. -->\n    <div class=\"col-lg-6\">\n      <div class=\"card h-100\">\n        <div class=\"card-body\">\n          @if (openFiles().length > 0) {\n            <ul class=\"nav nav-tabs mb-2 flex-nowrap theme-tabs\">\n              @for (file of openFiles(); track file.path) {\n                <li class=\"nav-item\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    class=\"nav-link theme-tab\"\n                    [class.active]=\"file.path === activePath()\"\n                    [class.fst-italic]=\"!file.pinned && !isDirty(file)\"\n                    [title]=\"file.path\"\n                    (click)=\"activePath.set(file.path)\"\n                  >\n                    {{ file.path.split('/').pop() }}@if (isDirty(file)) { <span class=\"text-warning\" [title]=\"'Site::UnsavedChanges' | abpLocalization\">\u25CF</span> }\n                    <button\n                      type=\"button\"\n                      class=\"btn-close btn-sm ms-1 align-middle\"\n                      style=\"font-size: 0.6rem\"\n                      [attr.aria-label]=\"'AbpUi::Close' | abpLocalization\"\n                      (click)=\"$event.stopPropagation(); closeFile(file.path)\"\n                    ></button>\n                  </a>\n                </li>\n              }\n            </ul>\n\n            @if (activeFile(); as file) {\n              <div class=\"d-flex flex-wrap align-items-center gap-2 mb-2\">\n                <code class=\"me-auto\">{{ file.path }}</code>\n                @if (canEdit) {\n                  <!-- Only for a file the check lists as a layout; there is nothing to do when it already is the default. -->\n                  @if (isLayoutInFront()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-sm btn-outline-secondary\"\n                      [disabled]=\"isDefaultLayoutInFront() || isBusy()\"\n                      [title]=\"(isDefaultLayoutInFront() ? 'Site::IsDefaultLayoutHint' : 'Site::SetAsDefaultLayoutHint') | abpLocalization\"\n                      (click)=\"setAsDefaultLayout()\"\n                    >\n                      <i class=\"fa fa-star me-1\"></i>{{ 'Site::SetAsDefaultLayout' | abpLocalization }}\n                    </button>\n                  }\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary\"\n                    [disabled]=\"!isDirty(file) || isBusy()\"\n                    [title]=\"'Site::SaveShortcut' | abpLocalization\"\n                    (click)=\"save()\"\n                  >\n                    @if (isBusy()) {\n                      <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\"></span>\n                    } @else {\n                      <i class=\"fa fa-save me-1\"></i>\n                    }\n                    {{ 'AbpUi::Save' | abpLocalization }}\n                  </button>\n                }\n              </div>\n\n              <div (keydown)=\"onEditorKeydown($event)\">\n                <site-code-editor\n                  [documentKey]=\"file.path\"\n                  [value]=\"file.body\"\n                  [language]=\"languageOf(file.path)\"\n                  [readonly]=\"!canEdit\"\n                  (valueChange)=\"onEdit($event)\"\n                ></site-code-editor>\n              </div>\n\n              @if (file.syntaxErrors.length > 0) {\n                <div class=\"alert alert-danger mt-2 mb-0\" role=\"alert\">\n                  <strong class=\"d-block mb-1\">{{ 'Site::ThemeSyntaxErrors' | abpLocalization }}</strong>\n                  <ul class=\"list-unstyled mb-0\">\n                    @for (error of file.syntaxErrors; track $index) {\n                      <li>\n                        <!-- A button, not a link: it moves the editor's cursor, it does not navigate. -->\n                        <button type=\"button\" class=\"btn btn-link btn-sm p-0 align-baseline\" (click)=\"goToSyntaxError(error)\">\n                          {{ error.line }}:{{ error.column }}\n                        </button>\n                        {{ error.message }}\n                      </li>\n                    }\n                  </ul>\n                </div>\n              }\n            }\n          } @else {\n            <p class=\"text-muted mb-0\">{{ 'Site::ThemeNoFileOpen' | abpLocalization }}</p>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Right: the fields of a page the template in front renders, when it is one; the check below it, always. -->\n    <div class=\"col-lg-3\">\n      <div class=\"card h-100\">\n        <div class=\"card-body theme-issues\">\n          @if (showsFields()) {\n            <h6>{{ 'Site::ThemeFields' | abpLocalization }}</h6>\n            <div class=\"theme-fields\">\n            @if (templatePages().length > 1) {\n              <label class=\"form-label small mb-1\" for=\"site-theme-fields-page\">{{ 'Site::ThemeFieldsPage' | abpLocalization }}</label>\n              <select\n                id=\"site-theme-fields-page\"\n                class=\"form-select form-select-sm mb-2\"\n                [ngModel]=\"fieldsPageId()\"\n                (ngModelChange)=\"chosenFieldsPageId.set($event)\"\n              >\n                @for (page of templatePages(); track page.id) {\n                  <option [value]=\"page.id\">{{ page.name }}</option>\n                }\n              </select>\n            } @else {\n              <p class=\"small fw-bold mb-1\">{{ 'Site::ThemeFieldsOfPage' | abpLocalization: templatePages()[0].name }}</p>\n            }\n            <p class=\"small text-muted mb-2\">\n              {{ (canEdit ? 'Site::ThemeFieldsHint' : 'Site::ThemeFieldsReadOnlyHint') | abpLocalization }}\n            </p>\n            @if (isLoadingFields()) {\n              <div class=\"text-center py-3\"><span class=\"spinner-border spinner-border-sm\" role=\"status\"></span></div>\n            } @else {\n              @for (group of fieldGroups(); track group.id) {\n                <div class=\"small fw-bold mb-1\">{{ group.displayName }}</div>\n                <ul class=\"list-unstyled small mb-3\">\n                  @for (field of group.fields; track field.name) {\n                    <li class=\"mb-2\">\n                      <button\n                        type=\"button\"\n                        class=\"btn btn-link btn-sm p-0 align-baseline text-start\"\n                        [disabled]=\"!canEdit\"\n                        (click)=\"insertField(field)\"\n                      >\n                        {{ field.displayName }}\n                      </button>\n                      <span class=\"text-muted ms-1\">{{ field.fieldTypeName }}</span>\n                      <br />\n                      <code class=\"theme-field-snippet\">{{ field.snippet }}</code>\n                    </li>\n                  }\n                </ul>\n              } @empty {\n                <p class=\"small text-muted mb-0\">{{ 'Site::ThemeFieldsNone' | abpLocalization }}</p>\n              }\n            }\n            </div>\n            <hr class=\"my-3\" />\n          }\n\n          <!-- The check: runs by itself after every change; the button asks for the result as it is now, for what\n               happened elsewhere (another author, an AI over MCP, the Pages screen). -->\n          <div class=\"d-flex align-items-center mb-2\">\n            <h6 class=\"mb-0 me-auto\">{{ 'Site::ThemeCheck' | abpLocalization }}</h6>\n            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"runCheck()\" [disabled]=\"isChecking()\">\n              @if (isChecking()) {\n                <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\"></span>\n              } @else {\n                <i class=\"fa fa-stethoscope me-1\"></i>\n              }\n              {{ 'Site::CheckTheme' | abpLocalization }}\n            </button>\n          </div>\n            @if (check(); as current) {\n              @if (current.issues.length === 0) {\n                <p class=\"text-success small mb-2\"><i class=\"fa fa-check me-1\"></i>{{ 'Site::ThemeCheckClean' | abpLocalization }}</p>\n              }\n              @for (group of [severities.Error, severities.Warning]; track group) {\n                @if (issuesOf(group).length > 0) {\n                  <div class=\"small fw-bold mb-1\" [class.text-danger]=\"group === severities.Error\" [class.text-warning]=\"group === severities.Warning\">\n                    {{ (group === severities.Error ? 'Site::ThemeErrors' : 'Site::ThemeWarnings') | abpLocalization }}\n                    ({{ issuesOf(group).length }})\n                  </div>\n                  <ul class=\"list-unstyled small mb-3\">\n                    @for (issue of issuesOf(group); track $index) {\n                      <li class=\"mb-2\">\n                        @if (issue.path) {\n                          <button type=\"button\" class=\"btn btn-link btn-sm p-0 align-baseline\" (click)=\"goToIssue(issue)\">\n                            {{ issue.path }}@if (issue.line) {:{{ issue.line }}}\n                          </button>\n                          <br />\n                        }\n                        {{ issue.message }}\n                      </li>\n                    }\n                  </ul>\n                }\n              }\n              <p class=\"small text-muted mb-0\">\n                @if (current.changes.length > 0) {\n                  {{ 'Site::ThemeUnpublishedChanges' | abpLocalization: current.changes.length.toString() }}\n                }\n                @if (defaultLayoutChanged(current)) {\n                  {{ 'Site::ThemeDefaultLayoutUnpublished' | abpLocalization: (current.liveDefaultLayout || ('Site::NoDefaultLayout' | abpLocalization)) }}\n                }\n                @if (!current.hasChanges) {\n                  {{ 'Site::ThemeNoUnpublishedChanges' | abpLocalization }}\n                }\n              </p>\n            } @else {\n              <p class=\"text-muted small mb-0\">{{ 'Site::ThemeCheckNotRun' | abpLocalization }}</p>\n            }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- The \"more\" menu of a file in the tree. Fixed, under its button: the tree scrolls and would clip it. -->\n@if (rowMenu(); as menu) {\n  <div\n    class=\"dropdown-menu show\"\n    style=\"position: fixed\"\n    [style.top.px]=\"menu.top\"\n    [style.right.px]=\"menu.right\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <button type=\"button\" class=\"dropdown-item\" (click)=\"renameFromMenu()\">\n      <i class=\"fa fa-i-cursor fa-fw me-1\"></i>{{ 'Site::RenameThemeFile' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"dropdown-item text-danger\" (click)=\"deleteFromMenu()\">\n      <i class=\"fa fa-trash fa-fw me-1\"></i>{{ 'AbpUi::Delete' | abpLocalization }}\n    </button>\n  </div>\n}\n\n<!-- New file. -->\n<abp-modal [visible]=\"isNewFileOpen()\" (visibleChange)=\"isNewFileOpen.set($event)\" [busy]=\"isBusy()\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::NewThemeFile' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <label class=\"form-label\" for=\"site-theme-new-path\">{{ 'Site::ThemeFilePath' | abpLocalization }}</label>\n    <input\n      id=\"site-theme-new-path\"\n      type=\"text\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      [ngModel]=\"newFilePath()\"\n      (ngModelChange)=\"newFilePath.set($event); newFileError.set(null)\"\n      (keydown.enter)=\"createFile()\"\n    />\n    <small class=\"form-text text-muted\">{{ 'Site::ThemeFilePathHint' | abpLocalization }}</small>\n    @if (newFileError(); as message) {\n      <div class=\"alert alert-danger mt-2 mb-0\" style=\"white-space: pre-line\">{{ message }}</div>\n    }\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Cancel' | abpLocalization }}</button>\n    <abp-button iconClass=\"fa fa-check\" [loading]=\"isBusy()\" (click)=\"createFile()\">\n      {{ 'Site::CreateThemeFile' | abpLocalization }}\n    </abp-button>\n  </ng-template>\n</abp-modal>\n\n<!-- Rename. -->\n<abp-modal [visible]=\"isRenameOpen()\" (visibleChange)=\"isRenameOpen.set($event)\" [busy]=\"isBusy()\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::RenameThemeFile' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <p class=\"mb-2\"><code>{{ renameFrom() }}</code></p>\n    <label class=\"form-label\" for=\"site-theme-rename-path\">{{ 'Site::ThemeFileNewPath' | abpLocalization }}</label>\n    <input\n      id=\"site-theme-rename-path\"\n      type=\"text\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      [ngModel]=\"renameTo()\"\n      (ngModelChange)=\"renameTo.set($event); renameError.set(null)\"\n      (keydown.enter)=\"rename()\"\n    />\n    <div class=\"form-check mt-2\">\n      <input\n        id=\"site-theme-rename-references\"\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        [ngModel]=\"renameUpdatesReferences()\"\n        (ngModelChange)=\"renameUpdatesReferences.set($event)\"\n      />\n      <label class=\"form-check-label\" for=\"site-theme-rename-references\">\n        {{ 'Site::ThemeRenameUpdateReferences' | abpLocalization }}\n      </label>\n    </div>\n    @if (renameError(); as message) {\n      <div class=\"alert alert-danger mt-2 mb-0\" style=\"white-space: pre-line\">{{ message }}</div>\n    }\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Cancel' | abpLocalization }}</button>\n    <abp-button iconClass=\"fa fa-check\" [loading]=\"isBusy()\" (click)=\"rename()\">\n      {{ 'Site::RenameThemeFile' | abpLocalization }}\n    </abp-button>\n  </ng-template>\n</abp-modal>\n\n<!-- Publish. -->\n<abp-modal [visible]=\"isPublishOpen()\" (visibleChange)=\"isPublishOpen.set($event)\" [busy]=\"isBusy()\" [options]=\"{ size: 'lg' }\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::PublishThemeTitle' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    @if (publishCheck(); as current) {\n      @if (current.hasErrors) {\n        <div class=\"alert alert-danger\">\n          <strong class=\"d-block mb-1\">{{ 'Site::PublishThemeHasErrors' | abpLocalization }}</strong>\n          <ul class=\"mb-0\">\n            @for (issue of current.issues; track $index) {\n              @if (issue.severity === severities.Error) {\n                <li>\n                  @if (issue.path) { <code>{{ issue.path }}@if (issue.line) {:{{ issue.line }}}</code> }\n                  {{ issue.message }}\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      } @else if (!current.hasChanges) {\n        <div class=\"alert alert-info\">{{ 'Site::PublishThemeNoChanges' | abpLocalization }}</div>\n      } @else {\n        <h6>{{ 'Site::PublishThemeChanges' | abpLocalization }}</h6>\n        <ul class=\"list-unstyled small mb-3\">\n          @for (change of current.changes; track change.path) {\n            <li>\n              <span\n                class=\"badge me-1\"\n                [class.text-bg-warning]=\"change.status === statuses.Modified\"\n                [class.text-bg-success]=\"change.status === statuses.Added\"\n                [class.text-bg-secondary]=\"change.status === statuses.Deleted\"\n              >{{ statusKey(change.status)! | abpLocalization }}</span>\n              <code>{{ change.path }}</code>\n            </li>\n          }\n          @if (defaultLayoutChanged(current)) {\n            <li>\n              <span class=\"badge text-bg-warning me-1\">{{ 'Site::ThemeFileStatus:Modified' | abpLocalization }}</span>\n              {{ 'Site::DefaultLayout' | abpLocalization }}:\n              <code>{{ current.liveDefaultLayout || ('Site::NoDefaultLayout' | abpLocalization) }}</code>\n              \u2192\n              <code>{{ current.defaultLayout || ('Site::NoDefaultLayout' | abpLocalization) }}</code>\n            </li>\n          }\n        </ul>\n        @if (warningCount() > 0) {\n          <p class=\"small text-warning\">{{ 'Site::PublishThemeWarnings' | abpLocalization: warningCount().toString() }}</p>\n        }\n        <label class=\"form-label\" for=\"site-theme-publish-comment\">{{ 'Site::ReleaseComment' | abpLocalization }}</label>\n        <input\n          id=\"site-theme-publish-comment\"\n          type=\"text\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"256\"\n          [placeholder]=\"'Site::ReleaseCommentPlaceholder' | abpLocalization\"\n          [ngModel]=\"publishComment()\"\n          (ngModelChange)=\"publishComment.set($event)\"\n          (keydown.enter)=\"publishOnEnter($event)\"\n        />\n      }\n      @if (publishError(); as message) {\n        <div class=\"alert alert-danger mt-2 mb-0\" style=\"white-space: pre-line\">{{ message }}</div>\n      }\n    } @else {\n      <div class=\"text-center py-3\"><span class=\"spinner-border\" role=\"status\"></span></div>\n    }\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Cancel' | abpLocalization }}</button>\n    <abp-button\n      iconClass=\"fa fa-upload\"\n      [loading]=\"isBusy()\"\n      [disabled]=\"!publishCheck() || publishCheck()!.hasErrors || !publishCheck()!.hasChanges\"\n      (click)=\"publish()\"\n    >\n      {{ 'Site::PublishTheme' | abpLocalization }}\n    </abp-button>\n  </ng-template>\n</abp-modal>\n\n<!-- Releases. -->\n<abp-modal [visible]=\"isReleasesOpen()\" (visibleChange)=\"isReleasesOpen.set($event)\" [options]=\"{ size: 'xl' }\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::Releases' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <!-- The comment takes the room and wraps; the other columns keep their words on one line. -->\n    <div class=\"table-responsive\">\n      <table class=\"table table-sm align-middle mb-0\">\n        <thead>\n          <tr>\n            <th class=\"text-nowrap\">#</th>\n            <th class=\"w-100\">{{ 'Site::ReleaseComment' | abpLocalization }}</th>\n            <th class=\"text-nowrap\">{{ 'Site::ReleaseChangedFiles' | abpLocalization }}</th>\n            <th class=\"text-nowrap\">{{ 'Site::ReleaseTime' | abpLocalization }}</th>\n            <th class=\"text-end text-nowrap\">{{ 'AbpUi::Actions' | abpLocalization }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (release of releases(); track release.id) {\n            <tr>\n              <td class=\"text-nowrap\">\n                {{ release.number }}\n                @if (release.isLive) {\n                  <span class=\"badge text-bg-success ms-1\">{{ 'Site::ReleaseLive' | abpLocalization }}</span>\n                }\n              </td>\n              <td>{{ release.comment }}</td>\n              <td class=\"text-nowrap\">{{ release.changedFileCount }}</td>\n              <td class=\"text-nowrap\">{{ release.creationTime | date: 'short' }}</td>\n              <td class=\"text-end text-nowrap\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-sm btn-outline-secondary me-1\"\n                  [title]=\"'Site::PreviewReleaseHint' | abpLocalization\"\n                  (click)=\"openPreview(release.id)\"\n                >\n                  <i class=\"fa fa-eye me-1\"></i>{{ 'Site::PreviewTheme' | abpLocalization }}\n                </button>\n                @if (canPublish && !release.isLive) {\n                  <button type=\"button\" class=\"btn btn-sm btn-outline-primary me-1\" (click)=\"makeLive(release)\">\n                    {{ 'Site::MakeReleaseLive' | abpLocalization }}\n                  </button>\n                }\n                @if (canEdit) {\n                  <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"restore(release)\">\n                    {{ 'Site::RestoreRelease' | abpLocalization }}\n                  </button>\n                }\n              </td>\n            </tr>\n          } @empty {\n            <tr>\n              <td colspan=\"5\" class=\"text-muted\">{{ 'Site::NothingPublished' | abpLocalization }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Close' | abpLocalization }}</button>\n  </ng-template>\n</abp-modal>\n", styles: [":host{--site-code-editor-height: max(24rem, calc(100vh - 25rem) );--site-code-editor-max-height: none}.theme-tree{max-height:max(20rem,calc(100vh - 21rem));overflow-y:auto}.theme-tree-row{display:flex;align-items:center;width:100%;padding-right:.25rem;border-radius:var(--bs-border-radius-sm, .25rem)}.theme-tree-main{display:flex;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;border:none;background:transparent;text-align:start;padding:.15rem 0;color:inherit;white-space:nowrap}.theme-tree-row:hover{background-color:#8080801f}.theme-tree-more{flex:0 0 auto;border:none;background:transparent;color:inherit;padding:.1rem .4rem;opacity:0}.theme-tree-row:hover .theme-tree-more,.theme-tree-row:focus-within .theme-tree-more,.theme-tree-more.open{opacity:1}@media(hover:none){.theme-tree-more{opacity:1}}.theme-tree-row.active{background-color:rgba(var(--bs-primary-rgb, 13, 110, 253),.15)}.theme-tree-row .name{overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.theme-tree-row.deleted .name{text-decoration:line-through;opacity:.6}.theme-tab{white-space:nowrap}.theme-field-snippet{white-space:pre-wrap;word-break:break-all}.theme-tabs{overflow-x:auto;overflow-y:hidden}.theme-issues{max-height:max(20rem,calc(100vh - 17rem));overflow-y:auto}.theme-fields{max-height:max(10rem,38vh);overflow-y:auto}\n"], dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ThemeSharedModule }, { kind: "component", type: i2.ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: i2.ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: i2.ModalCloseDirective, selector: "[abpClose]" }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CodeEditorComponent, selector: "site-code-editor", inputs: ["value", "readonly", "language", "documentKey"], outputs: ["valueChange"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ThemeWorkbenchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-theme-workbench', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CoreModule, ThemeSharedModule, FormsModule, CodeEditorComponent], template: "@if (isLoading()) {\n  <div class=\"text-center py-5\">\n    <span class=\"spinner-border\" role=\"status\"></span>\n  </div>\n} @else {\n  <!-- Toolbar: the default layout, and the actions on the theme as a whole. The live release is marked in the history. -->\n  <div class=\"card mb-3\">\n    <div class=\"card-body d-flex flex-wrap align-items-center gap-2\">\n      <div class=\"me-auto\">\n        <h5 class=\"mb-0\">{{ 'Site::Theme' | abpLocalization }}</h5>\n        <small class=\"text-muted\">\n          {{ 'Site::DefaultLayout' | abpLocalization }}:\n          <code>{{ theme()?.defaultLayout || ('Site::NoDefaultLayout' | abpLocalization) }}</code>\n        </small>\n      </div>\n      <!-- Preview of the theme as a whole: the site's home page, from which the author follows the links. -->\n      <button\n        type=\"button\"\n        class=\"btn btn-outline-secondary\"\n        [title]=\"'Site::PreviewThemeHint' | abpLocalization\"\n        (click)=\"openPreview()\"\n      >\n        <i class=\"fa fa-eye me-1\"></i>{{ 'Site::PreviewTheme' | abpLocalization }}\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"openReleases()\">\n        <i class=\"fa fa-history me-1\"></i>{{ 'Site::Releases' | abpLocalization }}\n      </button>\n      @if (canPublish) {\n        <button type=\"button\" class=\"btn btn-primary\" (click)=\"openPublish()\">\n          <i class=\"fa fa-upload me-1\"></i>{{ 'Site::PublishTheme' | abpLocalization }}\n        </button>\n      }\n    </div>\n  </div>\n\n  <div class=\"row g-3\">\n    <!-- Left: the working copy's files. -->\n    <div class=\"col-lg-3\">\n      <div class=\"card h-100\">\n        <div class=\"card-body\">\n          <div class=\"d-flex align-items-center mb-2\">\n            <h6 class=\"mb-0 me-auto\">{{ 'Site::ThemeFiles' | abpLocalization }}</h6>\n            @if (canEdit) {\n              <button\n                type=\"button\"\n                class=\"btn btn-sm btn-outline-primary\"\n                (click)=\"openNewFile()\"\n                [title]=\"'Site::NewThemeFile' | abpLocalization\"\n              >\n                <i class=\"fa fa-plus\"></i>\n              </button>\n            }\n          </div>\n          <div class=\"theme-tree\" role=\"tree\" (scroll)=\"closeRowMenu()\">\n            @for (row of treeRows(); track row.node.path + row.node.isFolder) {\n              <div\n                class=\"theme-tree-row\"\n                [class.active]=\"!row.node.isFolder && row.node.path === activePath()\"\n                [class.deleted]=\"row.node.status === statuses.Deleted\"\n                [style.padding-left.rem]=\"0.25 + row.depth * 1\"\n              >\n                <button\n                  type=\"button\"\n                  class=\"theme-tree-main\"\n                  role=\"treeitem\"\n                  [title]=\"row.node.path\"\n                  (click)=\"select(row.node)\"\n                >\n                  @if (row.node.isFolder) {\n                    <i class=\"fa fa-fw\" [class.fa-folder]=\"collapsed().has(row.node.path)\" [class.fa-folder-open]=\"!collapsed().has(row.node.path)\"></i>\n                  } @else {\n                    <i class=\"fa fa-fw\" [class.fa-file-code]=\"row.node.isAsset\" [class.fa-file-lines]=\"!row.node.isAsset\"></i>\n                  }\n                  <span class=\"name\">{{ row.node.name }}</span>\n                  @if (!row.node.isFolder && statusKey(row.node.status); as key) {\n                    <span\n                      class=\"badge\"\n                      [class.text-bg-warning]=\"row.node.status === statuses.Modified\"\n                      [class.text-bg-success]=\"row.node.status === statuses.Added\"\n                      [class.text-bg-secondary]=\"row.node.status === statuses.Deleted\"\n                      [title]=\"key | abpLocalization\"\n                    >{{ (key + ':Short') | abpLocalization }}</span>\n                  } @else if (row.node.isFolder && row.node.hasChanges) {\n                    <span class=\"text-warning\" [title]=\"'Site::ThemeFolderHasChanges' | abpLocalization\">\u2022</span>\n                  }\n                </button>\n                <!-- Renaming and deleting are rare: behind a \"more\" button on the file, not in the editor's way. -->\n                @if (canEdit && !row.node.isFolder && row.node.status !== statuses.Deleted) {\n                  <button\n                    type=\"button\"\n                    class=\"theme-tree-more\"\n                    [class.open]=\"rowMenu()?.path === row.node.path\"\n                    [attr.aria-label]=\"'Site::MoreActions' | abpLocalization\"\n                    [attr.aria-expanded]=\"rowMenu()?.path === row.node.path\"\n                    [title]=\"'Site::MoreActions' | abpLocalization\"\n                    (click)=\"toggleRowMenu($event, row.node.path)\"\n                  >\n                    <i class=\"fa fa-ellipsis-vertical\"></i>\n                  </button>\n                }\n              </div>\n            } @empty {\n              <p class=\"text-muted small mb-0\">{{ 'Site::ThemeNoFiles' | abpLocalization }}</p>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Middle: the open files. -->\n    <div class=\"col-lg-6\">\n      <div class=\"card h-100\">\n        <div class=\"card-body\">\n          @if (openFiles().length > 0) {\n            <ul class=\"nav nav-tabs mb-2 flex-nowrap theme-tabs\">\n              @for (file of openFiles(); track file.path) {\n                <li class=\"nav-item\">\n                  <a\n                    href=\"javascript:void(0)\"\n                    class=\"nav-link theme-tab\"\n                    [class.active]=\"file.path === activePath()\"\n                    [class.fst-italic]=\"!file.pinned && !isDirty(file)\"\n                    [title]=\"file.path\"\n                    (click)=\"activePath.set(file.path)\"\n                  >\n                    {{ file.path.split('/').pop() }}@if (isDirty(file)) { <span class=\"text-warning\" [title]=\"'Site::UnsavedChanges' | abpLocalization\">\u25CF</span> }\n                    <button\n                      type=\"button\"\n                      class=\"btn-close btn-sm ms-1 align-middle\"\n                      style=\"font-size: 0.6rem\"\n                      [attr.aria-label]=\"'AbpUi::Close' | abpLocalization\"\n                      (click)=\"$event.stopPropagation(); closeFile(file.path)\"\n                    ></button>\n                  </a>\n                </li>\n              }\n            </ul>\n\n            @if (activeFile(); as file) {\n              <div class=\"d-flex flex-wrap align-items-center gap-2 mb-2\">\n                <code class=\"me-auto\">{{ file.path }}</code>\n                @if (canEdit) {\n                  <!-- Only for a file the check lists as a layout; there is nothing to do when it already is the default. -->\n                  @if (isLayoutInFront()) {\n                    <button\n                      type=\"button\"\n                      class=\"btn btn-sm btn-outline-secondary\"\n                      [disabled]=\"isDefaultLayoutInFront() || isBusy()\"\n                      [title]=\"(isDefaultLayoutInFront() ? 'Site::IsDefaultLayoutHint' : 'Site::SetAsDefaultLayoutHint') | abpLocalization\"\n                      (click)=\"setAsDefaultLayout()\"\n                    >\n                      <i class=\"fa fa-star me-1\"></i>{{ 'Site::SetAsDefaultLayout' | abpLocalization }}\n                    </button>\n                  }\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary\"\n                    [disabled]=\"!isDirty(file) || isBusy()\"\n                    [title]=\"'Site::SaveShortcut' | abpLocalization\"\n                    (click)=\"save()\"\n                  >\n                    @if (isBusy()) {\n                      <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\"></span>\n                    } @else {\n                      <i class=\"fa fa-save me-1\"></i>\n                    }\n                    {{ 'AbpUi::Save' | abpLocalization }}\n                  </button>\n                }\n              </div>\n\n              <div (keydown)=\"onEditorKeydown($event)\">\n                <site-code-editor\n                  [documentKey]=\"file.path\"\n                  [value]=\"file.body\"\n                  [language]=\"languageOf(file.path)\"\n                  [readonly]=\"!canEdit\"\n                  (valueChange)=\"onEdit($event)\"\n                ></site-code-editor>\n              </div>\n\n              @if (file.syntaxErrors.length > 0) {\n                <div class=\"alert alert-danger mt-2 mb-0\" role=\"alert\">\n                  <strong class=\"d-block mb-1\">{{ 'Site::ThemeSyntaxErrors' | abpLocalization }}</strong>\n                  <ul class=\"list-unstyled mb-0\">\n                    @for (error of file.syntaxErrors; track $index) {\n                      <li>\n                        <!-- A button, not a link: it moves the editor's cursor, it does not navigate. -->\n                        <button type=\"button\" class=\"btn btn-link btn-sm p-0 align-baseline\" (click)=\"goToSyntaxError(error)\">\n                          {{ error.line }}:{{ error.column }}\n                        </button>\n                        {{ error.message }}\n                      </li>\n                    }\n                  </ul>\n                </div>\n              }\n            }\n          } @else {\n            <p class=\"text-muted mb-0\">{{ 'Site::ThemeNoFileOpen' | abpLocalization }}</p>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Right: the fields of a page the template in front renders, when it is one; the check below it, always. -->\n    <div class=\"col-lg-3\">\n      <div class=\"card h-100\">\n        <div class=\"card-body theme-issues\">\n          @if (showsFields()) {\n            <h6>{{ 'Site::ThemeFields' | abpLocalization }}</h6>\n            <div class=\"theme-fields\">\n            @if (templatePages().length > 1) {\n              <label class=\"form-label small mb-1\" for=\"site-theme-fields-page\">{{ 'Site::ThemeFieldsPage' | abpLocalization }}</label>\n              <select\n                id=\"site-theme-fields-page\"\n                class=\"form-select form-select-sm mb-2\"\n                [ngModel]=\"fieldsPageId()\"\n                (ngModelChange)=\"chosenFieldsPageId.set($event)\"\n              >\n                @for (page of templatePages(); track page.id) {\n                  <option [value]=\"page.id\">{{ page.name }}</option>\n                }\n              </select>\n            } @else {\n              <p class=\"small fw-bold mb-1\">{{ 'Site::ThemeFieldsOfPage' | abpLocalization: templatePages()[0].name }}</p>\n            }\n            <p class=\"small text-muted mb-2\">\n              {{ (canEdit ? 'Site::ThemeFieldsHint' : 'Site::ThemeFieldsReadOnlyHint') | abpLocalization }}\n            </p>\n            @if (isLoadingFields()) {\n              <div class=\"text-center py-3\"><span class=\"spinner-border spinner-border-sm\" role=\"status\"></span></div>\n            } @else {\n              @for (group of fieldGroups(); track group.id) {\n                <div class=\"small fw-bold mb-1\">{{ group.displayName }}</div>\n                <ul class=\"list-unstyled small mb-3\">\n                  @for (field of group.fields; track field.name) {\n                    <li class=\"mb-2\">\n                      <button\n                        type=\"button\"\n                        class=\"btn btn-link btn-sm p-0 align-baseline text-start\"\n                        [disabled]=\"!canEdit\"\n                        (click)=\"insertField(field)\"\n                      >\n                        {{ field.displayName }}\n                      </button>\n                      <span class=\"text-muted ms-1\">{{ field.fieldTypeName }}</span>\n                      <br />\n                      <code class=\"theme-field-snippet\">{{ field.snippet }}</code>\n                    </li>\n                  }\n                </ul>\n              } @empty {\n                <p class=\"small text-muted mb-0\">{{ 'Site::ThemeFieldsNone' | abpLocalization }}</p>\n              }\n            }\n            </div>\n            <hr class=\"my-3\" />\n          }\n\n          <!-- The check: runs by itself after every change; the button asks for the result as it is now, for what\n               happened elsewhere (another author, an AI over MCP, the Pages screen). -->\n          <div class=\"d-flex align-items-center mb-2\">\n            <h6 class=\"mb-0 me-auto\">{{ 'Site::ThemeCheck' | abpLocalization }}</h6>\n            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"runCheck()\" [disabled]=\"isChecking()\">\n              @if (isChecking()) {\n                <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\"></span>\n              } @else {\n                <i class=\"fa fa-stethoscope me-1\"></i>\n              }\n              {{ 'Site::CheckTheme' | abpLocalization }}\n            </button>\n          </div>\n            @if (check(); as current) {\n              @if (current.issues.length === 0) {\n                <p class=\"text-success small mb-2\"><i class=\"fa fa-check me-1\"></i>{{ 'Site::ThemeCheckClean' | abpLocalization }}</p>\n              }\n              @for (group of [severities.Error, severities.Warning]; track group) {\n                @if (issuesOf(group).length > 0) {\n                  <div class=\"small fw-bold mb-1\" [class.text-danger]=\"group === severities.Error\" [class.text-warning]=\"group === severities.Warning\">\n                    {{ (group === severities.Error ? 'Site::ThemeErrors' : 'Site::ThemeWarnings') | abpLocalization }}\n                    ({{ issuesOf(group).length }})\n                  </div>\n                  <ul class=\"list-unstyled small mb-3\">\n                    @for (issue of issuesOf(group); track $index) {\n                      <li class=\"mb-2\">\n                        @if (issue.path) {\n                          <button type=\"button\" class=\"btn btn-link btn-sm p-0 align-baseline\" (click)=\"goToIssue(issue)\">\n                            {{ issue.path }}@if (issue.line) {:{{ issue.line }}}\n                          </button>\n                          <br />\n                        }\n                        {{ issue.message }}\n                      </li>\n                    }\n                  </ul>\n                }\n              }\n              <p class=\"small text-muted mb-0\">\n                @if (current.changes.length > 0) {\n                  {{ 'Site::ThemeUnpublishedChanges' | abpLocalization: current.changes.length.toString() }}\n                }\n                @if (defaultLayoutChanged(current)) {\n                  {{ 'Site::ThemeDefaultLayoutUnpublished' | abpLocalization: (current.liveDefaultLayout || ('Site::NoDefaultLayout' | abpLocalization)) }}\n                }\n                @if (!current.hasChanges) {\n                  {{ 'Site::ThemeNoUnpublishedChanges' | abpLocalization }}\n                }\n              </p>\n            } @else {\n              <p class=\"text-muted small mb-0\">{{ 'Site::ThemeCheckNotRun' | abpLocalization }}</p>\n            }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- The \"more\" menu of a file in the tree. Fixed, under its button: the tree scrolls and would clip it. -->\n@if (rowMenu(); as menu) {\n  <div\n    class=\"dropdown-menu show\"\n    style=\"position: fixed\"\n    [style.top.px]=\"menu.top\"\n    [style.right.px]=\"menu.right\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <button type=\"button\" class=\"dropdown-item\" (click)=\"renameFromMenu()\">\n      <i class=\"fa fa-i-cursor fa-fw me-1\"></i>{{ 'Site::RenameThemeFile' | abpLocalization }}\n    </button>\n    <button type=\"button\" class=\"dropdown-item text-danger\" (click)=\"deleteFromMenu()\">\n      <i class=\"fa fa-trash fa-fw me-1\"></i>{{ 'AbpUi::Delete' | abpLocalization }}\n    </button>\n  </div>\n}\n\n<!-- New file. -->\n<abp-modal [visible]=\"isNewFileOpen()\" (visibleChange)=\"isNewFileOpen.set($event)\" [busy]=\"isBusy()\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::NewThemeFile' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <label class=\"form-label\" for=\"site-theme-new-path\">{{ 'Site::ThemeFilePath' | abpLocalization }}</label>\n    <input\n      id=\"site-theme-new-path\"\n      type=\"text\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      [ngModel]=\"newFilePath()\"\n      (ngModelChange)=\"newFilePath.set($event); newFileError.set(null)\"\n      (keydown.enter)=\"createFile()\"\n    />\n    <small class=\"form-text text-muted\">{{ 'Site::ThemeFilePathHint' | abpLocalization }}</small>\n    @if (newFileError(); as message) {\n      <div class=\"alert alert-danger mt-2 mb-0\" style=\"white-space: pre-line\">{{ message }}</div>\n    }\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Cancel' | abpLocalization }}</button>\n    <abp-button iconClass=\"fa fa-check\" [loading]=\"isBusy()\" (click)=\"createFile()\">\n      {{ 'Site::CreateThemeFile' | abpLocalization }}\n    </abp-button>\n  </ng-template>\n</abp-modal>\n\n<!-- Rename. -->\n<abp-modal [visible]=\"isRenameOpen()\" (visibleChange)=\"isRenameOpen.set($event)\" [busy]=\"isBusy()\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::RenameThemeFile' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <p class=\"mb-2\"><code>{{ renameFrom() }}</code></p>\n    <label class=\"form-label\" for=\"site-theme-rename-path\">{{ 'Site::ThemeFileNewPath' | abpLocalization }}</label>\n    <input\n      id=\"site-theme-rename-path\"\n      type=\"text\"\n      class=\"form-control\"\n      autocomplete=\"off\"\n      [ngModel]=\"renameTo()\"\n      (ngModelChange)=\"renameTo.set($event); renameError.set(null)\"\n      (keydown.enter)=\"rename()\"\n    />\n    <div class=\"form-check mt-2\">\n      <input\n        id=\"site-theme-rename-references\"\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        [ngModel]=\"renameUpdatesReferences()\"\n        (ngModelChange)=\"renameUpdatesReferences.set($event)\"\n      />\n      <label class=\"form-check-label\" for=\"site-theme-rename-references\">\n        {{ 'Site::ThemeRenameUpdateReferences' | abpLocalization }}\n      </label>\n    </div>\n    @if (renameError(); as message) {\n      <div class=\"alert alert-danger mt-2 mb-0\" style=\"white-space: pre-line\">{{ message }}</div>\n    }\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Cancel' | abpLocalization }}</button>\n    <abp-button iconClass=\"fa fa-check\" [loading]=\"isBusy()\" (click)=\"rename()\">\n      {{ 'Site::RenameThemeFile' | abpLocalization }}\n    </abp-button>\n  </ng-template>\n</abp-modal>\n\n<!-- Publish. -->\n<abp-modal [visible]=\"isPublishOpen()\" (visibleChange)=\"isPublishOpen.set($event)\" [busy]=\"isBusy()\" [options]=\"{ size: 'lg' }\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::PublishThemeTitle' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    @if (publishCheck(); as current) {\n      @if (current.hasErrors) {\n        <div class=\"alert alert-danger\">\n          <strong class=\"d-block mb-1\">{{ 'Site::PublishThemeHasErrors' | abpLocalization }}</strong>\n          <ul class=\"mb-0\">\n            @for (issue of current.issues; track $index) {\n              @if (issue.severity === severities.Error) {\n                <li>\n                  @if (issue.path) { <code>{{ issue.path }}@if (issue.line) {:{{ issue.line }}}</code> }\n                  {{ issue.message }}\n                </li>\n              }\n            }\n          </ul>\n        </div>\n      } @else if (!current.hasChanges) {\n        <div class=\"alert alert-info\">{{ 'Site::PublishThemeNoChanges' | abpLocalization }}</div>\n      } @else {\n        <h6>{{ 'Site::PublishThemeChanges' | abpLocalization }}</h6>\n        <ul class=\"list-unstyled small mb-3\">\n          @for (change of current.changes; track change.path) {\n            <li>\n              <span\n                class=\"badge me-1\"\n                [class.text-bg-warning]=\"change.status === statuses.Modified\"\n                [class.text-bg-success]=\"change.status === statuses.Added\"\n                [class.text-bg-secondary]=\"change.status === statuses.Deleted\"\n              >{{ statusKey(change.status)! | abpLocalization }}</span>\n              <code>{{ change.path }}</code>\n            </li>\n          }\n          @if (defaultLayoutChanged(current)) {\n            <li>\n              <span class=\"badge text-bg-warning me-1\">{{ 'Site::ThemeFileStatus:Modified' | abpLocalization }}</span>\n              {{ 'Site::DefaultLayout' | abpLocalization }}:\n              <code>{{ current.liveDefaultLayout || ('Site::NoDefaultLayout' | abpLocalization) }}</code>\n              \u2192\n              <code>{{ current.defaultLayout || ('Site::NoDefaultLayout' | abpLocalization) }}</code>\n            </li>\n          }\n        </ul>\n        @if (warningCount() > 0) {\n          <p class=\"small text-warning\">{{ 'Site::PublishThemeWarnings' | abpLocalization: warningCount().toString() }}</p>\n        }\n        <label class=\"form-label\" for=\"site-theme-publish-comment\">{{ 'Site::ReleaseComment' | abpLocalization }}</label>\n        <input\n          id=\"site-theme-publish-comment\"\n          type=\"text\"\n          class=\"form-control\"\n          autocomplete=\"off\"\n          maxlength=\"256\"\n          [placeholder]=\"'Site::ReleaseCommentPlaceholder' | abpLocalization\"\n          [ngModel]=\"publishComment()\"\n          (ngModelChange)=\"publishComment.set($event)\"\n          (keydown.enter)=\"publishOnEnter($event)\"\n        />\n      }\n      @if (publishError(); as message) {\n        <div class=\"alert alert-danger mt-2 mb-0\" style=\"white-space: pre-line\">{{ message }}</div>\n      }\n    } @else {\n      <div class=\"text-center py-3\"><span class=\"spinner-border\" role=\"status\"></span></div>\n    }\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Cancel' | abpLocalization }}</button>\n    <abp-button\n      iconClass=\"fa fa-upload\"\n      [loading]=\"isBusy()\"\n      [disabled]=\"!publishCheck() || publishCheck()!.hasErrors || !publishCheck()!.hasChanges\"\n      (click)=\"publish()\"\n    >\n      {{ 'Site::PublishTheme' | abpLocalization }}\n    </abp-button>\n  </ng-template>\n</abp-modal>\n\n<!-- Releases. -->\n<abp-modal [visible]=\"isReleasesOpen()\" (visibleChange)=\"isReleasesOpen.set($event)\" [options]=\"{ size: 'xl' }\">\n  <ng-template #abpHeader>\n    <h3>{{ 'Site::Releases' | abpLocalization }}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    <!-- The comment takes the room and wraps; the other columns keep their words on one line. -->\n    <div class=\"table-responsive\">\n      <table class=\"table table-sm align-middle mb-0\">\n        <thead>\n          <tr>\n            <th class=\"text-nowrap\">#</th>\n            <th class=\"w-100\">{{ 'Site::ReleaseComment' | abpLocalization }}</th>\n            <th class=\"text-nowrap\">{{ 'Site::ReleaseChangedFiles' | abpLocalization }}</th>\n            <th class=\"text-nowrap\">{{ 'Site::ReleaseTime' | abpLocalization }}</th>\n            <th class=\"text-end text-nowrap\">{{ 'AbpUi::Actions' | abpLocalization }}</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (release of releases(); track release.id) {\n            <tr>\n              <td class=\"text-nowrap\">\n                {{ release.number }}\n                @if (release.isLive) {\n                  <span class=\"badge text-bg-success ms-1\">{{ 'Site::ReleaseLive' | abpLocalization }}</span>\n                }\n              </td>\n              <td>{{ release.comment }}</td>\n              <td class=\"text-nowrap\">{{ release.changedFileCount }}</td>\n              <td class=\"text-nowrap\">{{ release.creationTime | date: 'short' }}</td>\n              <td class=\"text-end text-nowrap\">\n                <button\n                  type=\"button\"\n                  class=\"btn btn-sm btn-outline-secondary me-1\"\n                  [title]=\"'Site::PreviewReleaseHint' | abpLocalization\"\n                  (click)=\"openPreview(release.id)\"\n                >\n                  <i class=\"fa fa-eye me-1\"></i>{{ 'Site::PreviewTheme' | abpLocalization }}\n                </button>\n                @if (canPublish && !release.isLive) {\n                  <button type=\"button\" class=\"btn btn-sm btn-outline-primary me-1\" (click)=\"makeLive(release)\">\n                    {{ 'Site::MakeReleaseLive' | abpLocalization }}\n                  </button>\n                }\n                @if (canEdit) {\n                  <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click)=\"restore(release)\">\n                    {{ 'Site::RestoreRelease' | abpLocalization }}\n                  </button>\n                }\n              </td>\n            </tr>\n          } @empty {\n            <tr>\n              <td colspan=\"5\" class=\"text-muted\">{{ 'Site::NothingPublished' | abpLocalization }}</td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  </ng-template>\n  <ng-template #abpFooter>\n    <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{ 'AbpUi::Close' | abpLocalization }}</button>\n  </ng-template>\n</abp-modal>\n", styles: [":host{--site-code-editor-height: max(24rem, calc(100vh - 25rem) );--site-code-editor-max-height: none}.theme-tree{max-height:max(20rem,calc(100vh - 21rem));overflow-y:auto}.theme-tree-row{display:flex;align-items:center;width:100%;padding-right:.25rem;border-radius:var(--bs-border-radius-sm, .25rem)}.theme-tree-main{display:flex;align-items:center;gap:.25rem;flex:1 1 auto;min-width:0;border:none;background:transparent;text-align:start;padding:.15rem 0;color:inherit;white-space:nowrap}.theme-tree-row:hover{background-color:#8080801f}.theme-tree-more{flex:0 0 auto;border:none;background:transparent;color:inherit;padding:.1rem .4rem;opacity:0}.theme-tree-row:hover .theme-tree-more,.theme-tree-row:focus-within .theme-tree-more,.theme-tree-more.open{opacity:1}@media(hover:none){.theme-tree-more{opacity:1}}.theme-tree-row.active{background-color:rgba(var(--bs-primary-rgb, 13, 110, 253),.15)}.theme-tree-row .name{overflow:hidden;text-overflow:ellipsis;flex:1 1 auto}.theme-tree-row.deleted .name{text-decoration:line-through;opacity:.6}.theme-tab{white-space:nowrap}.theme-field-snippet{white-space:pre-wrap;word-break:break-all}.theme-tabs{overflow-x:auto;overflow-y:hidden}.theme-issues{max-height:max(20rem,calc(100vh - 17rem));overflow-y:auto}.theme-fields{max-height:max(10rem,38vh);overflow-y:auto}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CodeEditorComponent), { isSignal: true }] }], closeRowMenu: [{
+                type: HostListener,
+                args: ['document:click']
+            }, {
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onBeforeUnload: [{
+                type: HostListener,
+                args: ['window:beforeunload', ['$event']]
+            }] } });
+function isDirty(file) {
+    return file.body !== file.savedBody;
+}
+function toOpenFile(file) {
+    return {
+        path: file.path ?? '',
+        isAsset: file.isAsset,
+        body: file.body ?? '',
+        savedBody: file.body ?? '',
+        pinned: false,
+        concurrencyStamp: file.concurrencyStamp,
+        syntaxErrors: file.syntaxErrors ?? [],
+    };
+}
+/** Who uses a file, in words: `Events (include), about (page)`; empty when nothing does. */
+function describeUsages(usages, kindName) {
+    return (usages.usages ?? [])
+        .map(usage => `${usage.pageName ?? usage.sourcePath ?? ''} (${kindName(usage.kind)})`.trim())
+        .join(', ');
+}
+
+export { ThemeWorkbenchComponent, describeUsages };
+//# sourceMappingURL=dignite-ng.site-theme-workbench.component-CA47DnTj.mjs.map