@dignite/ng.site 0.0.0-stage → 1.0.1

package/fesm2022/dignite-ng.site-content-editor.component-iFWDeYJ9.mjs

@@ -0,0 +1,782 @@
+import * as i4 from '@abp/ng.core';
+import { LocalizationService, CoreModule } from '@abp/ng.core';
+import { ToasterService, ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i0 from '@angular/core';
+import { inject, signal, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { FlexFieldControlComponent } from '@dignite/ng.flex-fields';
+import { forkJoin, of, switchMap, catchError } from 'rxjs';
+import { C as ContentAdminService, c as ContentTypeAdminService, P as PageAdminService, S as SiteReferenceDataService, d as ContentStatus } from './dignite-ng.site-dignite-ng.site-CsKxqjY9.mjs';
+import * as i3 from '@ngx-validate/core';
+
+/**
+ * Maps a mounted flex field's own control errors to the same localized text, regardless of which
+ * field type produced them or how deep the control is nested (top-level, a Table column, a Matrix
+ * sub-field): every built-in field type only ever raises `required`/`min`/`max`/`maxlength`, since
+ * that's the full set `NumberControlComponent`/`TextControlComponent`/etc. push in `@dignite/ng.flex-fields`.
+ * Gated on `touched` so a fresh, still-empty required field doesn't show red before the user reaches it.
+ */
+function flexFieldErrorMessage(control, localization) {
+    const errors = control?.touched ? control.errors : null;
+    if (!errors) {
+        return null;
+    }
+    if (errors['required']) {
+        return localization.instant('AbpValidation::ThisFieldIsRequired');
+    }
+    if (errors['min']) {
+        return localization.instant('FlexFieldsSite::Validate:MinValue', String(errors['min'].min));
+    }
+    if (errors['max']) {
+        return localization.instant('FlexFieldsSite::Validate:MaxValue', String(errors['max'].max));
+    }
+    if (errors['maxlength']) {
+        return localization.instant('FlexFieldsSite::Validate:MaxLength', String(errors['maxlength'].requiredLength));
+    }
+    return null;
+}
+
+const MAX_SLUG_LENGTH = 256;
+const OPTIONAL_SLUG_TOKEN = '{slug?}';
+const REQUIRED_SLUG_TOKEN = '{slug}';
+/** Mirrors `SlugNormalizer.AllowedCharactersPattern` (`src/Dignite.Site.Domain.Shared/SlugNormalizer.cs`). */
+const SLUG_PATTERN = /^[\p{L}\p{Nd}_-]*$/u;
+/**
+ * Creating and editing one content, as a page of its own rather than a dialog.
+ *
+ * The two halves answer different questions and are sized accordingly: the left is the content itself -
+ * however many fields its content type defines, which can be a long form - and the right is the handful
+ * of system fields that place and schedule it. A dialog forced both into one scrolling column.
+ *
+ * Switching the content type rebuilds the left half, because the fields *are* the content type's
+ * definition. Values already typed under fields the new type does not have are dropped, which is the
+ * honest outcome: they have nowhere to be stored.
+ *
+ * **Deliberately no CKEditor theme bridge here.** This component used to carry a global
+ * `::ng-deep :root` block remapping CKEditor 5's `--ck-color-base-*` tokens onto the host theme -
+ * CKEditor ships one fixed light palette with no dark-mode switch, so the editor stayed light in a
+ * dark-themed host. `@dignite/ng.flex-fields-ckeditor` >= 10.0.0-rc.13 ships that bridge itself, with
+ * a longer fallback chain than this copy had (LeptonX token -> the Bootstrap 5.3 token every ABP
+ * Angular theme defines -> CKEditor's own stock literal) plus fixes this copy never had. Re-adding a
+ * copy here would not add anything and would fight it at equal `:root` specificity, decided by style
+ * injection order alone.
+ */
+class ContentEditorComponent {
+    constructor() {
+        this.contentService = inject(ContentAdminService);
+        this.contentTypeService = inject(ContentTypeAdminService);
+        this.pageService = inject(PageAdminService);
+        this.referenceData = inject(SiteReferenceDataService);
+        this.route = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.fb = inject(FormBuilder);
+        this.toaster = inject(ToasterService);
+        this.localization = inject(LocalizationService);
+        this.ContentStatus = ContentStatus;
+        this.statuses = [ContentStatus.Draft, ContentStatus.Published, ContentStatus.Archived];
+        this.contentId = this.route.snapshot.paramMap.get('id');
+        this.isEdit = !!this.contentId;
+        // State that changes in an HTTP callback is a signal, not a plain field: the host layout's ancestors
+        // (`abp-router-outlet`, the LeptonX layouts) are OnPush, and a plain-field write in a response
+        // callback never marks them for check, so the form would stay blank (or go stale) until some
+        // unrelated event happened to.
+        this.page = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
+        this.contentTypes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTypes" }] : /* istanbul ignore next */ []));
+        this.languages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+        this.defaultLanguage = '';
+        /**
+         * Whether the page's own address (an empty slug) is already taken by another content, for the
+         * currently selected language - only meaningful, and only checked, when {@link slugState} is
+         * `'optional'`. Read by the template to decide whether the "use the page's own address" checkbox is
+         * offered at all.
+         */
+        this.emptySlotTaken = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emptySlotTaken" }] : /* istanbul ignore next */ []));
+        this.fieldsById = new Map();
+        this.arrangementByContentType = new Map();
+        /**
+         * The current content type's fields, as stable `FlexFieldValue`s. Rebuilt only when the content type
+         * changes - `ff-flex-field-control` compares this input by object reference, and handing it a freshly
+         * allocated array on every change-detection pass would make it tear down and recreate its dynamic
+         * child forever (`NG0103`).
+         */
+        this.fields = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
+        this.isBusy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isBusy" }] : /* istanbul ignore next */ []));
+        this.isLoading = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        const pageId = this.route.snapshot.queryParamMap.get('pageId');
+        forkJoin({
+            schema: this.referenceData.getSchema(),
+            fieldsById: this.referenceData.getFieldsById(),
+            content: this.contentId ? this.contentService.get(this.contentId) : of(undefined),
+        })
+            .pipe(switchMap(loaded => {
+            const languages = loaded.schema.enabledLanguages ?? [];
+            this.languages.set(languages);
+            this.defaultLanguage = loaded.schema.defaultLanguage ?? languages[0] ?? '';
+            this.fieldsById = loaded.fieldsById;
+            this.content = loaded.content;
+            const resolvedPageId = loaded.content?.pageId ?? pageId ?? '';
+            return forkJoin({
+                page: resolvedPageId ? this.pageService.get(resolvedPageId) : of(undefined),
+                contentTypes: resolvedPageId
+                    ? this.contentTypeService.getListByPage(resolvedPageId)
+                    : of({ items: [] }),
+            });
+        }))
+            .subscribe(({ page, contentTypes }) => {
+            this.page.set(page);
+            this.contentTypes.set(contentTypes.items ?? []);
+            this.rebuildArrangements();
+            this.form = this.buildForm();
+            this.rebuildFields();
+            this.isLoading.set(false);
+            this.refreshEmptySlotAvailability();
+        });
+    }
+    get hasMultipleContentTypes() {
+        return this.contentTypes().length > 1;
+    }
+    /**
+     * What this page's route (总体设计 §3.3) says about the slug beneath it - the front-end mirror of
+     * `PageRoute.HasSlug`/`PageRoute.IsSlugOptional`. `'forbidden'`: no `{slug}`/`{slug?}` at all, so this
+     * page has nothing beneath it but its own address. `'required'`: `{slug}` or `{slug:REGEX}`, so every
+     * content needs one. `'optional'`: `{slug?}`, so an empty slug is also allowed, subject to
+     * {@link emptySlotTaken}.
+     */
+    get slugState() {
+        const route = this.page()?.route ?? '';
+        if (route.includes(OPTIONAL_SLUG_TOKEN)) {
+            return 'optional';
+        }
+        return route.includes(REQUIRED_SLUG_TOKEN) || this.hasSlugWithRegex(route) ? 'required' : 'forbidden';
+    }
+    /**
+     * Whether `route` carries `{slug:REGEX}` - a slug placeholder with a regex and no format, the one
+     * decorated form `PageRoute.HasSlug` recognizes. Whether a given slug matches that regex is left to the
+     * server (`PageRoute.IsSlugAllowed`): a .NET pattern does not always mean the same thing in JavaScript.
+     */
+    hasSlugWithRegex(route) {
+        for (let i = route.indexOf('{'); i >= 0; i = route.indexOf('{', i + 1)) {
+            const placeholder = this.readPlaceholder(route, i);
+            if (placeholder && placeholder.name.toLowerCase() === 'slug' && placeholder.format === null) {
+                return true;
+            }
+            if (placeholder) {
+                i = placeholder.end - 1;
+            }
+        }
+        return false;
+    }
+    get usePageOwnAddress() {
+        return !!this.form?.get('usePageOwnAddress')?.value;
+    }
+    /**
+     * The address this content will actually be served at, recomputed on every read so the template can
+     * bind it directly and have it track the slug field as the user types. An approximation, not the
+     * source of truth: {@link resolvePlaceholder} resolves every placeholder generically off the form and
+     * the loaded content, falling back to the raw token when it cannot - `Page.BuildContentPath` on the
+     * server is what actually decides the URL.
+     *
+     * The empty-slug branch mirrors `Page.BuildContentPath` itself, not a naming convention: an empty
+     * slug is short-circuited to the page's own path there regardless of what the rest of the route
+     * contains, so the preview has to do the same rather than run it through the placeholder replacement
+     * below.
+     */
+    get slugPreview() {
+        const route = this.page()?.route;
+        if (!route) {
+            return '';
+        }
+        const slug = (this.form?.get('slug')?.value ?? '').trim();
+        const path = slug ? this.buildPreviewPath(route) : this.pageOwnPath(route);
+        return this.applyCulturePrefix(path);
+    }
+    get isDraft() {
+        return this.form?.getRawValue().status === ContentStatus.Draft;
+    }
+    statusKeyOf(status) {
+        return `Site::Enum:ContentStatus:${ContentStatus[status]}`;
+    }
+    fieldErrorMessage(fieldValue) {
+        return flexFieldErrorMessage(this.form?.get('flexFields')?.get(fieldValue.field.name), this.localization);
+    }
+    rebuildArrangements() {
+        this.arrangementByContentType = new Map(this.contentTypes().map(contentType => [
+            contentType.id,
+            (contentType.fields ?? [])
+                .map(entry => {
+                const definition = entry.fieldId ? this.fieldsById.get(entry.fieldId) : undefined;
+                if (!definition) {
+                    return undefined;
+                }
+                const fieldData = {
+                    id: definition.id,
+                    name: definition.name,
+                    displayName: entry.displayName || definition.displayName,
+                    description: definition.description ?? undefined,
+                    fieldTypeName: definition.fieldTypeName,
+                    configuration: (definition.configuration ?? {}),
+                };
+                return {
+                    fieldId: definition.id,
+                    name: definition.name,
+                    displayName: fieldData.displayName,
+                    fieldTypeName: definition.fieldTypeName,
+                    required: !!entry.required,
+                    searchable: !!entry.searchable,
+                    showInList: !!entry.showInList,
+                    order: entry.order ?? 0,
+                    fieldData,
+                };
+            })
+                .filter((field) => !!field)
+                .sort((a, b) => a.order - b.order),
+        ]));
+    }
+    /** Called on load and whenever the content type changes. See {@link fields}. */
+    rebuildFields() {
+        const contentTypeId = this.form?.get('contentTypeId')?.value;
+        const arranged = this.arrangementByContentType.get(contentTypeId ?? '') ?? [];
+        const values = this.content?.fieldValues ?? {};
+        this.fields.set(arranged.map(field => ({
+            field: field.fieldData,
+            required: field.required,
+            searchable: field.searchable,
+            value: values[field.name],
+        })));
+    }
+    onContentTypeChange() {
+        // The value bag is keyed by field name, so controls for the old type's fields have to go before the
+        // new type's are registered - otherwise the payload carries both.
+        this.form?.setControl('flexFields', this.fb.group({}));
+        this.rebuildFields();
+    }
+    onStatusChange() {
+        this.applyPublishTimeAvailability();
+    }
+    onCultureNameChange() {
+        this.refreshEmptySlotAvailability();
+    }
+    onUsePageOwnAddressChange() {
+        this.applySlugAvailability();
+    }
+    save() {
+        if (!this.form || this.form.invalid || this.isBusy()) {
+            return;
+        }
+        this.isBusy.set(true);
+        const value = this.form.getRawValue();
+        const fieldValues = (this.form.get('flexFields')?.getRawValue() ?? {});
+        const slug = value.slug ?? '';
+        const request$ = this.content
+            ? this.contentService.update(this.content.id, {
+                contentTypeId: value.contentTypeId,
+                slug,
+                publishTime: value.publishTime,
+                status: value.status,
+                fieldValues,
+            })
+            : this.contentService.create({
+                contentTypeId: value.contentTypeId,
+                cultureName: value.cultureName,
+                slug,
+                publishTime: value.publishTime,
+                status: value.status,
+                fieldValues,
+            });
+        request$.subscribe({
+            next: () => {
+                this.isBusy.set(false);
+                this.toaster.success('AbpUi::SavedSuccessfully');
+                this.backToList();
+            },
+            error: () => this.isBusy.set(false),
+        });
+    }
+    backToList() {
+        this.router.navigate(['/site/contents']);
+    }
+    buildForm() {
+        const content = this.content;
+        const form = this.fb.group({
+            contentTypeId: [
+                content?.contentTypeId ?? this.contentTypes()[0]?.id ?? '',
+                Validators.required,
+            ],
+            cultureName: [
+                {
+                    value: content?.cultureName ??
+                        this.route.snapshot.queryParamMap.get('cultureName') ??
+                        this.languages()[0] ??
+                        '',
+                    // Fixed after creation: the language is half the natural key that groups a content's
+                    // translations, so changing it would silently move the content to another translation set.
+                    disabled: !!content,
+                },
+                Validators.required,
+            ],
+            // Editing a content that is already the page's own (an empty slug) starts the checkbox checked -
+            // otherwise applySlugAvailability would immediately overwrite its empty slug with a forced-required
+            // value the moment the form builds.
+            usePageOwnAddress: [!!content && !content.slug],
+            slug: [content?.slug ?? '', [Validators.maxLength(MAX_SLUG_LENGTH), Validators.pattern(SLUG_PATTERN)]],
+            publishTime: [this.toLocalDateTime(content?.publishTime), Validators.required],
+            status: [content?.status ?? ContentStatus.Published],
+            flexFields: this.fb.group({}),
+        });
+        this.form = form;
+        this.applySlugAvailability();
+        this.applyPublishTimeAvailability();
+        return form;
+    }
+    /**
+     * Enables/disables and (in)validates the `slug` control from {@link slugState} - and, in the
+     * `'optional'` case, from whether the "use the page's own address" checkbox is ticked. The same
+     * three-way split `ContentManager.CheckSlugRequirementAsync` enforces server-side; this only decides
+     * what the form looks like before that ever runs.
+     */
+    applySlugAvailability() {
+        const slug = this.form?.get('slug');
+        if (!slug) {
+            return;
+        }
+        const forceOwnAddress = this.slugState === 'forbidden' ||
+            (this.slugState === 'optional' && this.usePageOwnAddress);
+        if (forceOwnAddress) {
+            slug.setValue('');
+            slug.clearValidators();
+            slug.disable();
+        }
+        else {
+            slug.enable();
+            slug.setValidators([
+                Validators.required,
+                Validators.maxLength(MAX_SLUG_LENGTH),
+                Validators.pattern(SLUG_PATTERN),
+            ]);
+        }
+        slug.updateValueAndValidity();
+    }
+    /**
+     * Looks up whether this page's own address (an empty slug) is already taken for the selected
+     * language, so the "use the page's own address" option can be withheld before the editor ever submits
+     * and hits `Site:040001`. A no-op outside the `'optional'` state, where the question does not arise.
+     *
+     * Goes through `getList` rather than the more direct `findBySlug`, which exists for exactly this
+     * lookup - `IContentAdminAppService.FindBySlugAsync(pageId, cultureName, "")` is the same query
+     * `SiteRouteResolver` uses to resolve a bare page match. But ABP's `RestService.getParams` silently
+     * drops any query parameter whose value is an empty string, so a `slug` of `""` never reaches the
+     * request at all; the server then sees a *missing* parameter, not an intentionally empty one, and
+     * rejects it exactly as `Should_Reject_A_Null_Slug` says it must. Listing this page's contents for the
+     * language and filtering for an empty slug client-side sidesteps that without weakening the server's
+     * null-vs-empty distinction.
+     */
+    refreshEmptySlotAvailability() {
+        const pageId = this.page()?.id;
+        if (this.slugState !== 'optional' || !pageId) {
+            this.emptySlotTaken.set(false);
+            return;
+        }
+        const cultureName = this.form?.get('cultureName')?.value;
+        if (!cultureName) {
+            return;
+        }
+        this.contentService
+            .getList({ pageId, cultureName, maxResultCount: 1000 })
+            .pipe(catchError(() => of({ items: [], totalCount: 0 })))
+            .subscribe(result => {
+            const existing = (result.items ?? []).find(item => item.slug === '');
+            const taken = !!existing && existing.id !== this.content?.id;
+            this.emptySlotTaken.set(taken);
+            // The slot this checkbox promised is gone (e.g. the language was switched to one where it is
+            // already taken) - un-tick it rather than leave a checked box the next save would reject.
+            if (taken && this.usePageOwnAddress) {
+                this.form?.get('usePageOwnAddress')?.setValue(false);
+                this.applySlugAvailability();
+            }
+        });
+    }
+    /**
+     * A draft is never public, so a publish time on one is not a schedule anything acts on - the server
+     * rejects the combination outright (`Site:040003`). Scheduling is Published plus a future time.
+     */
+    applyPublishTimeAvailability() {
+        const publishTime = this.form?.get('publishTime');
+        const status = this.form?.get('status')?.value;
+        if (!publishTime) {
+            return;
+        }
+        if (status === ContentStatus.Draft) {
+            publishTime.setValue(this.toLocalDateTime());
+            publishTime.disable();
+        }
+        else {
+            publishTime.enable();
+        }
+    }
+    /** `<input type="datetime-local">` wants `yyyy-MM-ddTHH:mm`, not an ISO string with a zone. */
+    toLocalDateTime(value) {
+        const date = value ? new Date(value) : new Date();
+        const offset = date.getTimezoneOffset() * 60_000;
+        return new Date(date.getTime() - offset).toISOString().slice(0, 16);
+    }
+    /**
+     * Mirrors `SiteUrlContext.ApplyCulturePrefix` (总体设计 §5.5): every enabled language carries a
+     * `/cultureName` prefix except the default one, which is served unprefixed. `cultureName` here is
+     * already one of `languages` (or the loaded content's own, already-normalized value), so - unlike the
+     * server, which normalizes through `CultureNameNormalizer` first - a plain equality check against
+     * {@link defaultLanguage} is enough to tell the two apart.
+     */
+    applyCulturePrefix(path) {
+        const cultureName = this.form?.get('cultureName')?.value;
+        if (!cultureName || cultureName === this.defaultLanguage) {
+            return path;
+        }
+        return path === '/' ? `/${cultureName}` : `/${cultureName}${path}`;
+    }
+    /** Mirrors `PageRoute.GetPath`: everything up to the segment that first carries a placeholder. */
+    pageOwnPath(route) {
+        const index = route.indexOf('{');
+        if (index < 0) {
+            return route;
+        }
+        const boundary = route.lastIndexOf('/', index);
+        return boundary <= 0 ? '/' : route.slice(0, boundary);
+    }
+    /**
+     * A rough, client-side mirror of `PageRoute.Build` - see {@link slugPreview}'s remarks. Every
+     * placeholder, `{slug}` included, goes through the same generic {@link resolvePlaceholder} - no
+     * per-name branch here, deliberately: the server does not have one either, it reflects over `Content`
+     * (`Page.ResolveFieldValue`), and a name-by-name `if` ladder here would just be that same mistake
+     * moved to TypeScript instead of removed.
+     * <p>
+     * Placeholders are located with {@link readPlaceholder}'s brace-depth-aware scan, not a single regex -
+     * a `/\{...\}/` pattern cannot tell a placeholder's own closing brace apart from a balanced one inside
+     * its `:REGEX` segment (a quantifier like `\d{4}`, e.g. in `{publishTime:yyyy-MM:^\d{4}-(0[1-9]|1[0-2])$}`),
+     * the same reason `PageRoute.TryParseTemplate` on the server had to stop using ABP's own tokenizer.
+     */
+    buildPreviewPath(route) {
+        const canonical = route.replace(OPTIONAL_SLUG_TOKEN, REQUIRED_SLUG_TOKEN);
+        let result = '';
+        let i = 0;
+        while (i < canonical.length) {
+            if (canonical[i] !== '{') {
+                result += canonical[i];
+                i++;
+                continue;
+            }
+            const placeholder = this.readPlaceholder(canonical, i);
+            if (!placeholder) {
+                // Not a well-formed placeholder start - a route that reaches this component was already
+                // validated by `PageRoute.IsValid` when it was saved, so this is only ever a defensive fallback:
+                // treat '{' as a literal character rather than throwing out of what is meant to be a best-effort
+                // preview.
+                result += canonical[i];
+                i++;
+                continue;
+            }
+            result += this.resolvePlaceholder(placeholder.name, placeholder.format) ?? placeholder.token;
+            i = placeholder.end;
+        }
+        return result;
+    }
+    /**
+     * Reads one `{name}` / `{name:FORMAT}` / `{name:REGEX}` / `{name:FORMAT:REGEX}` placeholder starting at
+     * `route[start]` (must be `'{'`), mirroring `PageRoute.TryParseTemplate`'s single-placeholder case
+     * (`src/Dignite.Site.Domain.Shared/Pages/PageRoute.cs`): brace depth is tracked once inside the
+     * `:`-segment so an embedded, balanced `{`/`}` does not get mistaken for the placeholder's own closing
+     * brace, and a backslash escapes the next character so an explicitly-escaped `\{`/`\}` never perturbs
+     * the count either. Returns `null` for anything that does not parse as a well-formed placeholder -
+     * {@link buildPreviewPath} treats that as a literal `{` rather than failing the whole preview.
+     * <p>
+     * Only `name` and `format` are extracted, never the regex itself - a placeholder's regex constrains
+     * what may be read back out of a request path, and has nothing to say about a value being written into
+     * one, the same reason `PageRoute.Build` on the server discards it too (see that method's remarks).
+     */
+    readPlaceholder(route, start) {
+        let i = start + 1; // consume '{'
+        const nameStart = i;
+        // Mirrors `PageRoute.IsNameStartChar`/`IsNameChar`: every `IdentifierName` a field can have, plus
+        // uppercase for `Content`'s camel-cased system properties (`publishTime`).
+        if (i >= route.length || !/[a-zA-Z0-9]/.test(route[i])) {
+            return null;
+        }
+        i++;
+        while (i < route.length && /[a-zA-Z0-9_-]/.test(route[i])) {
+            i++;
+        }
+        const name = route.slice(nameStart, i);
+        if (i >= route.length) {
+            return null;
+        }
+        if (route[i] === '}') {
+            return { token: route.slice(start, i + 1), end: i + 1, name, format: null };
+        }
+        if (route[i] !== ':') {
+            return null;
+        }
+        i++; // consume ':'
+        const innerStart = i;
+        let depth = 0;
+        let closed = false;
+        while (i < route.length) {
+            const c = route[i];
+            if (c === '\\' && i + 1 < route.length) {
+                i += 2;
+                continue;
+            }
+            if (c === '{') {
+                depth++;
+            }
+            else if (c === '}') {
+                if (depth === 0) {
+                    closed = true;
+                    break;
+                }
+                depth--;
+            }
+            i++;
+        }
+        if (!closed) {
+            return null;
+        }
+        const inner = route.slice(innerStart, i);
+        const end = i + 1; // consume the closing '}'
+        return { token: route.slice(start, end), end, name, format: this.disambiguateFormat(inner) };
+    }
+    /**
+     * Mirrors `PageRoute.TryDisambiguate`, reduced to the half a preview needs: a placeholder's already
+     * brace-depth-isolated inner text (everything after the first `:`) splits into a `:FORMAT` prefix plus a
+     * regex remainder when the prefix is format-shaped (letters/digits/`.`/`_`/`-` only - a real format
+     * string, by construction, can never also look like a regex worth compiling, which is what keeps every
+     * `{name:FORMAT}` route classified exactly as it always was); otherwise the inner text is a bare format
+     * on its own if it matches that shape whole, or else it is a regex with no format at all.
+     */
+    disambiguateFormat(inner) {
+        const formatCharacters = /^[a-zA-Z0-9_.-]+$/;
+        const colon = inner.indexOf(':');
+        if (colon >= 0) {
+            const candidate = inner.slice(0, colon);
+            if (candidate && formatCharacters.test(candidate)) {
+                return candidate;
+            }
+        }
+        return formatCharacters.test(inner) ? inner : null;
+    }
+    /**
+     * Resolves one placeholder's preview text purely from *where* `name` is actually found, never from
+     * what it is called. Angular forms have no runtime type to reflect over the way `Content` does server
+     * side - `ContentDto` is a TypeScript interface, erased at compile time - so the nearest equivalent is
+     * a generic, case-insensitive walk of what is actually on the form and the loaded content, checked in
+     * the same order the server would find them: a real property first, `FlexFields` second.
+     * 1. A top-level form control - every system field the editor can change lives here (`cultureName`,
+     *    `status`, `publishTime`, `contentTypeId`, `slug`...), whatever it happens to be named.
+     * 2. A control inside `flexFields` - a content type's own business fields.
+     * 3. A property already on the loaded `this.content` DTO - covers the read-only audit trail
+     *    (`id`, `creationTime`, ...) `FullAuditedEntityDto` carries but no form control exists for.
+     *    Naturally empty until this content has actually been saved once - which is honest, since the
+     *    server has nothing to reflect there yet either.
+     *
+     * One deliberate, named exception to "no name-based branching": {@link usePageOwnAddress} is a UI-only
+     * control with no server-side counterpart, and step 1 cannot tell that apart from a real field by
+     * shape alone - a route that actually referenced `{usePageOwnAddress}` would resolve to "true"/"false"
+     * here. Excluding it by name would be exactly the kind of branch this method exists to avoid, and the
+     * failure mode is harmless: `Page.BuildContentPath` has no such property either, so a route that made
+     * this mistake for real still fails loudly server-side the first time a URL is actually built from it.
+     */
+    resolvePlaceholder(name, format) {
+        const raw = this.findValue(name);
+        if (raw === null || raw === undefined || raw === '') {
+            return null;
+        }
+        if (format) {
+            const formatted = this.tryFormatByShape(raw, format);
+            if (formatted !== null) {
+                return formatted;
+            }
+        }
+        return String(raw);
+    }
+    /**
+     * Applies `format` to `raw` purely from what `raw` looks like, never from which placeholder produced
+     * it - the same dispatch-by-shape rule {@link resolvePlaceholder} follows, extended to every shape
+     * this preview knows how to format. Mirrors `Page.FormatFieldValue`'s `value is IFormattable` check,
+     * just done by sniffing a form value's shape with a regex instead of asking the CLR for its runtime
+     * type - there is no such type to ask here, `raw` is already unwrapped to a plain JS value by the time
+     * it reaches this method.
+     * <p>
+     * Each shape is tried in turn; the first one whose regex matches `raw` owns the answer from there,
+     * whether or not it actually recognizes `format` - a date-shaped value with a nonsense format is a
+     * date that failed to format, not a number or a Guid that happened to also look like one. Recognizing
+     * the shape but not the specific `format` asked of it (a Guid's `X`, a numeric format outside
+     * {@link formatNumber}'s subset) returns null, same as a shape nothing here recognizes at all - both
+     * fall back to the unformatted value in {@link resolvePlaceholder}, deliberately: this is a preview,
+     * and a plausible but possibly-wrong guess at an unimplemented format would be worse than showing the
+     * plain value.
+     */
+    tryFormatByShape(raw, format) {
+        const date = this.tryParseDate(raw);
+        if (date) {
+            return this.formatDate(date, format);
+        }
+        const guid = this.tryParseGuid(raw);
+        if (guid) {
+            return this.formatGuid(guid, format);
+        }
+        const number = this.tryParseNumber(raw);
+        if (number !== null) {
+            return this.formatNumber(number, format);
+        }
+        return null;
+    }
+    findValue(name) {
+        const lowerName = name.toLowerCase();
+        const topLevelControls = this.form?.controls;
+        const topLevelKey = topLevelControls && Object.keys(topLevelControls).find(key => key.toLowerCase() === lowerName);
+        if (topLevelKey) {
+            return this.form.get(topLevelKey).value;
+        }
+        const flexFields = this.form?.get('flexFields');
+        if (flexFields instanceof FormGroup) {
+            const flexKey = Object.keys(flexFields.controls).find(key => key.toLowerCase() === lowerName);
+            if (flexKey) {
+                return flexFields.get(flexKey).value;
+            }
+        }
+        if (this.content) {
+            const contentRecord = this.content;
+            const contentKey = Object.keys(contentRecord).find(key => key.toLowerCase() === lowerName);
+            if (contentKey !== undefined) {
+                return contentRecord[contentKey];
+            }
+        }
+        return undefined;
+    }
+    /** Whether `value` is shaped like a `datetime-local` input's own output (`yyyy-MM-ddTHH:mm`). */
+    tryParseDate(value) {
+        if (typeof value !== 'string' || !/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(value)) {
+            return null;
+        }
+        const date = new Date(value);
+        return isNaN(date.getTime()) ? null : date;
+    }
+    /** Only the three specifiers a `:FORMAT` suffix may actually contain (总体设计 §3.3) - no '/' among them. */
+    formatDate(date, format) {
+        return format
+            .replace(/yyyy/g, String(date.getFullYear()))
+            .replace(/yy/g, String(date.getFullYear()).slice(-2))
+            .replace(/MM/g, String(date.getMonth() + 1).padStart(2, '0'))
+            .replace(/dd/g, String(date.getDate()).padStart(2, '0'));
+    }
+    /** Whether `value` is shaped like the canonical, hyphenated form of a Guid. */
+    tryParseGuid(value) {
+        return typeof value === 'string' &&
+            /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(value)
+            ? value
+            : null;
+    }
+    /**
+     * `Guid.ToString(format)`'s four straightforward specifiers - N (no separators), D (hyphenated, the
+     * shape already checked by {@link tryParseGuid}), B (braced) and P (parenthesized). `X` deliberately
+     * not implemented: it renders as a C#-syntax initializer list, not a URL-shaped string, and nothing
+     * about a route makes that a plausible thing to have ever asked for.
+     */
+    formatGuid(guid, format) {
+        const digits = guid.replace(/-/g, '').toLowerCase();
+        const dashed = `${digits.slice(0, 8)}-${digits.slice(8, 12)}-${digits.slice(12, 16)}-${digits.slice(16, 20)}-${digits.slice(20)}`;
+        switch (format.toUpperCase()) {
+            case 'N':
+                return digits;
+            case 'D':
+                return dashed;
+            case 'B':
+                return `{${dashed}}`;
+            case 'P':
+                return `(${dashed})`;
+            default:
+                return null;
+        }
+    }
+    /** Whether `value` is shaped like a plain, optionally negative, optionally decimal number. */
+    tryParseNumber(value) {
+        if (typeof value === 'number' && isFinite(value)) {
+            return value;
+        }
+        return typeof value === 'string' && /^-?\d+(\.\d+)?$/.test(value) ? Number(value) : null;
+    }
+    /**
+     * A representative slice of .NET's numeric format strings - the ones a URL path segment plausibly
+     * asks for. Custom zero-padding (`"0000"`, unchanged from before) plus four standard specifiers, each
+     * with an optional 1-2 digit precision: `D` (zero-padded, integers only - the standard-format spelling
+     * of the same thing `"0000"` does), `X`/`x` (hexadecimal, integers only, letter case controls digit
+     * case, negative not attempted - see {@link formatHex}'s remarks), `F` (fixed-point) and `N`
+     * (fixed-point with thousands grouping). Deliberately not `C`/`P` (currency/percent): both put a
+     * character that means something else in a URL - a locale-dependent currency symbol, or `%`, the URL
+     * escape character itself - into the path, which nothing about routing would ever actually want. Not
+     * `E`/`G`/`R` either: those are about round-trip print fidelity for an arbitrary number, not a shape
+     * any real route has a reason to ask for.
+     */
+    formatNumber(value, format) {
+        if (/^0+$/.test(format)) {
+            return Number.isInteger(value) ? this.padInteger(value, format.length) : null;
+        }
+        const standard = /^([DdXxFfNn])(\d{0,2})$/.exec(format);
+        if (!standard) {
+            return null;
+        }
+        const [, specifier, precisionText] = standard;
+        const precision = precisionText === '' ? null : Number(precisionText);
+        switch (specifier.toUpperCase()) {
+            case 'D':
+                return Number.isInteger(value) ? this.padInteger(value, precision ?? 0) : null;
+            case 'X':
+                return Number.isInteger(value) && value >= 0 ? this.formatHex(value, precision ?? 0, specifier === 'X') : null;
+            case 'F':
+                return value.toFixed(precision ?? 2);
+            case 'N':
+                return this.groupThousands(value.toFixed(precision ?? 2));
+            default:
+                return null;
+        }
+    }
+    padInteger(value, width) {
+        const negative = value < 0;
+        const padded = Math.abs(value).toString().padStart(width, '0');
+        return negative ? `-${padded}` : padded;
+    }
+    /**
+     * Negative values are rejected before this is ever called - .NET's `X` renders a negative signed
+     * integer as its two's-complement bit pattern, which depends on the source type's own width (`int` vs
+     * `long` vs `byte` produce different digits for the same value), information a form control's plain
+     * number does not carry. Guessing a width would risk a preview that looks plausible and is wrong;
+     * not attempting it is the same call already made for a Guid's `X` and for `C`/`P`/`E`/`G`/`R`.
+     */
+    formatHex(value, width, uppercase) {
+        const hex = value.toString(16).padStart(width, '0');
+        return uppercase ? hex.toUpperCase() : hex;
+    }
+    groupThousands(fixedValue) {
+        const negative = fixedValue.startsWith('-');
+        const [integerPart, fractionPart] = (negative ? fixedValue.slice(1) : fixedValue).split('.');
+        const grouped = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+        return `${negative ? '-' : ''}${grouped}${fractionPart ? '.' + fractionPart : ''}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: ContentEditorComponent, isStandalone: true, selector: "site-content-editor", ngImport: i0, template: "@if (!isLoading() && form) {\n  <form [formGroup]=\"form\" (submit)=\"save()\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div>\n        <h5 class=\"mb-0\">\n          {{ (isEdit ? 'Site::EditContent' : 'Site::NewContent') | abpLocalization }}\n        </h5>\n        @if (page(); as currentPage) {\n          <small class=\"text-muted\">{{ currentPage.displayName }}</small>\n        }\n      </div>\n      <div>\n        <a class=\"btn btn-secondary me-2\" [routerLink]=\"['/site/contents']\">\n          {{ 'AbpUi::Cancel' | abpLocalization }}\n        </a>\n        <!-- A plain submit button, not `abp-button`: that component declares its own `click` output,\n             so `(click)` binds to an EventEmitter instead of the DOM event, and it takes `buttonType`\n             rather than `type`. Both make it easy to end up with a button that quietly never submits.\n             Inside a form on a page, the native element says what it does. -->\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"!form.valid || isBusy()\">\n          @if (isBusy()) {\n            <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\"></span>\n          } @else {\n            <i class=\"fa fa-check me-1\"></i>\n          }\n          {{ 'AbpUi::Save' | abpLocalization }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"row g-3\">\n      <!-- Left: the content itself - whatever fields its content type defines. -->\n      <div class=\"col-lg-8\">\n        <div class=\"card h-100\">\n          <div class=\"card-body\">\n            @if (hasMultipleContentTypes) {\n              <div class=\"mb-3 pb-3 border-bottom\">\n                <label class=\"form-label\">\n                  {{ 'Site::DisplayName:Content.ContentType' | abpLocalization }}\n                </label>\n                <select\n                  class=\"form-select\"\n                  formControlName=\"contentTypeId\"\n                  (change)=\"onContentTypeChange()\"\n                >\n                  @for (contentType of contentTypes(); track contentType.id) {\n                    <option [value]=\"contentType.id\">{{ contentType.displayName }}</option>\n                  }\n                </select>\n                <small class=\"form-text text-muted\">\n                  {{ 'Site::ContentTypeSwitchHint' | abpLocalization }}\n                </small>\n              </div>\n            }\n\n            @if (fields().length > 0) {\n              @for (fieldValue of fields(); track fieldValue.field.name) {\n                <ff-flex-field-control\n                  [fields]=\"fieldValue\"\n                  [entity]=\"form\"\n                  parentFieldName=\"flexFields\"\n                  [selected]=\"fieldValue.value\"\n                ></ff-flex-field-control>\n                @if (fieldErrorMessage(fieldValue); as message) {\n                  <div class=\"invalid-feedback d-block mb-3\">{{ message }}</div>\n                }\n              }\n            } @else {\n              <p class=\"text-muted mb-0\">{{ 'Site::NoFieldsArranged' | abpLocalization }}</p>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right: the system fields that place and schedule the content. -->\n      <div class=\"col-lg-4\">\n        <div class=\"card\">\n          <div class=\"card-body\">\n            @if (!hasMultipleContentTypes && contentTypes().length === 1) {\n              <div class=\"mb-3\">\n                <label class=\"form-label\">\n                  {{ 'Site::DisplayName:Content.ContentType' | abpLocalization }}\n                </label>\n                <input type=\"text\" class=\"form-control\" [value]=\"contentTypes()[0].displayName\" disabled />\n              </div>\n            }\n\n            <div class=\"mb-3\">\n              <label class=\"form-label\">\n                {{ 'Site::DisplayName:Content.CultureName' | abpLocalization }}\n              </label>\n              <select class=\"form-select\" formControlName=\"cultureName\" (change)=\"onCultureNameChange()\">\n                @for (language of languages(); track language) {\n                  <option [value]=\"language\">{{ language }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- The page's route (\u603B\u4F53\u8BBE\u8BA1 \u00A73.3) decides this, not the editor: no {slug}/{slug?} at all\n                 means nothing is shown here - there is nothing to choose. -->\n            @if (slugState !== 'forbidden') {\n              <div class=\"mb-3\">\n                <label class=\"form-label\">{{ 'Site::DisplayName:Content.Slug' | abpLocalization }}</label>\n\n                @if (slugState === 'optional' && !emptySlotTaken()) {\n                  <div class=\"form-check mb-2\">\n                    <input\n                      type=\"checkbox\"\n                      class=\"form-check-input\"\n                      id=\"site-use-page-own-address\"\n                      formControlName=\"usePageOwnAddress\"\n                      (change)=\"onUsePageOwnAddressChange()\"\n                    />\n                    <label class=\"form-check-label\" for=\"site-use-page-own-address\">\n                      {{ 'Site::UsePageOwnAddress' | abpLocalization }}\n                    </label>\n                  </div>\n                }\n\n                @if (!usePageOwnAddress) {\n                  <input type=\"text\" class=\"form-control\" formControlName=\"slug\" />\n                  <small class=\"form-text text-muted d-block mt-1\">\n                    {{ 'Site::Description:Content.Slug' | abpLocalization }}\n                  </small>\n                }\n\n                @if (slugState === 'optional' && emptySlotTaken()) {\n                  <small class=\"form-text text-muted d-block mt-1\">\n                    {{ 'Site::SlugSlotTaken' | abpLocalization }}\n                  </small>\n                }\n\n                <small class=\"form-text text-muted d-block mt-1\">\n                  {{ 'Site::SlugPreview' | abpLocalization: slugPreview }}\n                </small>\n              </div>\n            }\n\n            <div class=\"mb-3\">\n              <label class=\"form-label\">{{ 'Site::DisplayName:Content.Status' | abpLocalization }}</label>\n              <select class=\"form-select\" formControlName=\"status\" (change)=\"onStatusChange()\">\n                @for (status of statuses; track status) {\n                  <option [ngValue]=\"status\">{{ statusKeyOf(status) | abpLocalization }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"mb-0\">\n              <label class=\"form-label\">\n                {{ 'Site::DisplayName:Content.PublishTime' | abpLocalization }}\n              </label>\n              <input type=\"datetime-local\" class=\"form-control\" formControlName=\"publishTime\" />\n              @if (isDraft) {\n                <small class=\"form-text text-muted\">\n                  {{ 'Site::DraftPublishTimeDisabledHint' | abpLocalization }}\n                </small>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { 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.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: ThemeSharedModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FlexFieldControlComponent, selector: "ff-flex-field-control", inputs: ["fields", "entity", "parentFieldName", "selected"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-content-editor', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CoreModule, ThemeSharedModule, ReactiveFormsModule, RouterLink, FlexFieldControlComponent], template: "@if (!isLoading() && form) {\n  <form [formGroup]=\"form\" (submit)=\"save()\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <div>\n        <h5 class=\"mb-0\">\n          {{ (isEdit ? 'Site::EditContent' : 'Site::NewContent') | abpLocalization }}\n        </h5>\n        @if (page(); as currentPage) {\n          <small class=\"text-muted\">{{ currentPage.displayName }}</small>\n        }\n      </div>\n      <div>\n        <a class=\"btn btn-secondary me-2\" [routerLink]=\"['/site/contents']\">\n          {{ 'AbpUi::Cancel' | abpLocalization }}\n        </a>\n        <!-- A plain submit button, not `abp-button`: that component declares its own `click` output,\n             so `(click)` binds to an EventEmitter instead of the DOM event, and it takes `buttonType`\n             rather than `type`. Both make it easy to end up with a button that quietly never submits.\n             Inside a form on a page, the native element says what it does. -->\n        <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"!form.valid || isBusy()\">\n          @if (isBusy()) {\n            <span class=\"spinner-border spinner-border-sm me-1\" role=\"status\"></span>\n          } @else {\n            <i class=\"fa fa-check me-1\"></i>\n          }\n          {{ 'AbpUi::Save' | abpLocalization }}\n        </button>\n      </div>\n    </div>\n\n    <div class=\"row g-3\">\n      <!-- Left: the content itself - whatever fields its content type defines. -->\n      <div class=\"col-lg-8\">\n        <div class=\"card h-100\">\n          <div class=\"card-body\">\n            @if (hasMultipleContentTypes) {\n              <div class=\"mb-3 pb-3 border-bottom\">\n                <label class=\"form-label\">\n                  {{ 'Site::DisplayName:Content.ContentType' | abpLocalization }}\n                </label>\n                <select\n                  class=\"form-select\"\n                  formControlName=\"contentTypeId\"\n                  (change)=\"onContentTypeChange()\"\n                >\n                  @for (contentType of contentTypes(); track contentType.id) {\n                    <option [value]=\"contentType.id\">{{ contentType.displayName }}</option>\n                  }\n                </select>\n                <small class=\"form-text text-muted\">\n                  {{ 'Site::ContentTypeSwitchHint' | abpLocalization }}\n                </small>\n              </div>\n            }\n\n            @if (fields().length > 0) {\n              @for (fieldValue of fields(); track fieldValue.field.name) {\n                <ff-flex-field-control\n                  [fields]=\"fieldValue\"\n                  [entity]=\"form\"\n                  parentFieldName=\"flexFields\"\n                  [selected]=\"fieldValue.value\"\n                ></ff-flex-field-control>\n                @if (fieldErrorMessage(fieldValue); as message) {\n                  <div class=\"invalid-feedback d-block mb-3\">{{ message }}</div>\n                }\n              }\n            } @else {\n              <p class=\"text-muted mb-0\">{{ 'Site::NoFieldsArranged' | abpLocalization }}</p>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Right: the system fields that place and schedule the content. -->\n      <div class=\"col-lg-4\">\n        <div class=\"card\">\n          <div class=\"card-body\">\n            @if (!hasMultipleContentTypes && contentTypes().length === 1) {\n              <div class=\"mb-3\">\n                <label class=\"form-label\">\n                  {{ 'Site::DisplayName:Content.ContentType' | abpLocalization }}\n                </label>\n                <input type=\"text\" class=\"form-control\" [value]=\"contentTypes()[0].displayName\" disabled />\n              </div>\n            }\n\n            <div class=\"mb-3\">\n              <label class=\"form-label\">\n                {{ 'Site::DisplayName:Content.CultureName' | abpLocalization }}\n              </label>\n              <select class=\"form-select\" formControlName=\"cultureName\" (change)=\"onCultureNameChange()\">\n                @for (language of languages(); track language) {\n                  <option [value]=\"language\">{{ language }}</option>\n                }\n              </select>\n            </div>\n\n            <!-- The page's route (\u603B\u4F53\u8BBE\u8BA1 \u00A73.3) decides this, not the editor: no {slug}/{slug?} at all\n                 means nothing is shown here - there is nothing to choose. -->\n            @if (slugState !== 'forbidden') {\n              <div class=\"mb-3\">\n                <label class=\"form-label\">{{ 'Site::DisplayName:Content.Slug' | abpLocalization }}</label>\n\n                @if (slugState === 'optional' && !emptySlotTaken()) {\n                  <div class=\"form-check mb-2\">\n                    <input\n                      type=\"checkbox\"\n                      class=\"form-check-input\"\n                      id=\"site-use-page-own-address\"\n                      formControlName=\"usePageOwnAddress\"\n                      (change)=\"onUsePageOwnAddressChange()\"\n                    />\n                    <label class=\"form-check-label\" for=\"site-use-page-own-address\">\n                      {{ 'Site::UsePageOwnAddress' | abpLocalization }}\n                    </label>\n                  </div>\n                }\n\n                @if (!usePageOwnAddress) {\n                  <input type=\"text\" class=\"form-control\" formControlName=\"slug\" />\n                  <small class=\"form-text text-muted d-block mt-1\">\n                    {{ 'Site::Description:Content.Slug' | abpLocalization }}\n                  </small>\n                }\n\n                @if (slugState === 'optional' && emptySlotTaken()) {\n                  <small class=\"form-text text-muted d-block mt-1\">\n                    {{ 'Site::SlugSlotTaken' | abpLocalization }}\n                  </small>\n                }\n\n                <small class=\"form-text text-muted d-block mt-1\">\n                  {{ 'Site::SlugPreview' | abpLocalization: slugPreview }}\n                </small>\n              </div>\n            }\n\n            <div class=\"mb-3\">\n              <label class=\"form-label\">{{ 'Site::DisplayName:Content.Status' | abpLocalization }}</label>\n              <select class=\"form-select\" formControlName=\"status\" (change)=\"onStatusChange()\">\n                @for (status of statuses; track status) {\n                  <option [ngValue]=\"status\">{{ statusKeyOf(status) | abpLocalization }}</option>\n                }\n              </select>\n            </div>\n\n            <div class=\"mb-0\">\n              <label class=\"form-label\">\n                {{ 'Site::DisplayName:Content.PublishTime' | abpLocalization }}\n              </label>\n              <input type=\"datetime-local\" class=\"form-control\" formControlName=\"publishTime\" />\n              @if (isDraft) {\n                <small class=\"form-text text-muted\">\n                  {{ 'Site::DraftPublishTimeDisabledHint' | abpLocalization }}\n                </small>\n              }\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n}\n" }]
+        }], ctorParameters: () => [] });
+
+export { ContentEditorComponent };
+//# sourceMappingURL=dignite-ng.site-content-editor.component-iFWDeYJ9.mjs.map