@dignite/ng.site 0.0.0-stage → 1.0.0

package/fesm2022/dignite-ng.site-dignite-ng.site-CsKxqjY9.mjs

@@ -0,0 +1,2464 @@
+import * as i4 from '@abp/ng.core';
+import { RestService, CoreModule, EnvironmentService, ListService, LIST_QUERY_DEBOUNCE_TIME, mapEnumToOptions, authGuard, permissionGuard, RouterOutletComponent } from '@abp/ng.core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, Injectable, ChangeDetectionStrategy, Component, signal, Input, ElementRef, EventEmitter, ViewChild, HostListener, Output, Pipe } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { ReactiveFormsModule, Validators, FormGroup, FormControl, FormArray, FormsModule, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
+import { FieldTypeConfigBase, FieldTypeControlBase, readStringList } from '@dignite/ng.flex-fields';
+import * as i3 from '@ngx-validate/core';
+import { forkJoin, of, tap, map, finalize, shareReplay } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import * as i2$1 from '@angular/cdk/drag-drop';
+import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2 from '@abp/ng.theme.shared';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i7 from '@abp/ng.components/tree';
+import { TreeModule } from '@abp/ng.components/tree';
+import * as i6 from '@swimlane/ngx-datatable';
+
+/**
+ * Mirrors `SiteAdminPermissions` (`src/Dignite.Site.Admin.Application.Contracts/Permissions/SiteAdminPermissions.cs`).
+ *
+ * Note the group name is the bare string `SiteAdmin`, not `Site.Admin` - these are the exact strings the
+ * server checks, so they cannot be prefixed further here.
+ */
+// A plain enum, not `const enum`: templates reference these through a component property, and a
+// `const enum` is erased at compile time so it has no value to read at runtime.
+var eSitePolicyNames;
+(function (eSitePolicyNames) {
+    eSitePolicyNames["Pages"] = "SiteAdmin.Pages";
+    eSitePolicyNames["PagesCreate"] = "SiteAdmin.Pages.Create";
+    eSitePolicyNames["PagesUpdate"] = "SiteAdmin.Pages.Update";
+    eSitePolicyNames["PagesDelete"] = "SiteAdmin.Pages.Delete";
+    eSitePolicyNames["ContentTypes"] = "SiteAdmin.ContentTypes";
+    eSitePolicyNames["ContentTypesCreate"] = "SiteAdmin.ContentTypes.Create";
+    eSitePolicyNames["ContentTypesUpdate"] = "SiteAdmin.ContentTypes.Update";
+    eSitePolicyNames["ContentTypesDelete"] = "SiteAdmin.ContentTypes.Delete";
+    eSitePolicyNames["Fields"] = "SiteAdmin.Fields";
+    eSitePolicyNames["FieldsCreate"] = "SiteAdmin.Fields.Create";
+    eSitePolicyNames["FieldsUpdate"] = "SiteAdmin.Fields.Update";
+    eSitePolicyNames["FieldsDelete"] = "SiteAdmin.Fields.Delete";
+    /** Separate from update on purpose: renaming a field migrates every stored value. */
+    eSitePolicyNames["FieldsRename"] = "SiteAdmin.Fields.Rename";
+    eSitePolicyNames["FieldGroups"] = "SiteAdmin.FieldGroups";
+    eSitePolicyNames["FieldGroupsCreate"] = "SiteAdmin.FieldGroups.Create";
+    eSitePolicyNames["FieldGroupsUpdate"] = "SiteAdmin.FieldGroups.Update";
+    eSitePolicyNames["FieldGroupsDelete"] = "SiteAdmin.FieldGroups.Delete";
+    eSitePolicyNames["Contents"] = "SiteAdmin.Contents";
+    eSitePolicyNames["ContentsCreate"] = "SiteAdmin.Contents.Create";
+    eSitePolicyNames["ContentsUpdate"] = "SiteAdmin.Contents.Update";
+    eSitePolicyNames["ContentsDelete"] = "SiteAdmin.Contents.Delete";
+})(eSitePolicyNames || (eSitePolicyNames = {}));
+
+class ContentTypeAdminService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.create = (input, config) => this.restService.request({
+            method: 'POST',
+            url: '/api/site-admin/content-types',
+            body: input,
+        }, { apiName: this.apiName, ...config });
+        this.delete = (id, config) => this.restService.request({
+            method: 'DELETE',
+            url: `/api/site-admin/content-types/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.findByName = (pageId, name, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/content-types/by-page/${pageId}/by-name`,
+            params: { name },
+        }, { apiName: this.apiName, ...config });
+        this.get = (id, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/content-types/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.getList = (config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/content-types',
+        }, { apiName: this.apiName, ...config });
+        this.getListByPage = (pageId, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/content-types/by-page/${pageId}`,
+        }, { apiName: this.apiName, ...config });
+        this.update = (id, input, config) => this.restService.request({
+            method: 'PUT',
+            url: `/api/site-admin/content-types/${id}`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentTypeAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentTypeAdminService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentTypeAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Configuration of a `Content` field, shaped for `FormBuilder.group()`. Mirrors `ContentConfiguration`
+ * (`src/Dignite.FlexFields.Site/Dignite/FlexFields/Site/Content/ContentConfiguration.cs`).
+ *
+ * The property names are the **stored** configuration keys, not a naming choice.
+ */
+class ContentConfiguration {
+    constructor() {
+        /** Restricts the picker to Content of this content type. `null` = unrestricted. */
+        this['Content.ContentTypeId'] = [null];
+        this['Content.Multiple'] = [false];
+        this['Content.Placeholder'] = [''];
+    }
+}
+
+/** Designer-side editor for a `Content` field's configuration: which content type to restrict to (if
+ * any), single- vs. multi-select, and a placeholder. */
+class ContentConfigComponent extends FieldTypeConfigBase {
+    constructor() {
+        super(...arguments);
+        this.contentTypeAdminService = inject(ContentTypeAdminService);
+        this.contentTypes = [];
+    }
+    configurationDefaults() {
+        return new ContentConfiguration();
+    }
+    ngOnInit() {
+        this.contentTypeAdminService.getList().subscribe(result => {
+            this.contentTypes = result.items ?? [];
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentConfigComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.2", type: ContentConfigComponent, isStandalone: true, selector: "site-content-config", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"formEntity\">\n  <div formGroupName=\"configuration\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Content:ContentTypeId' | abpLocalization }}</label>\n      <select class=\"form-select\" formControlName=\"Content.ContentTypeId\">\n        <option [ngValue]=\"null\">{{ 'FlexFieldsSite::Content:AnyContentType' | abpLocalization }}</option>\n        <option *ngFor=\"let item of contentTypes\" [ngValue]=\"item.id\">{{ item.displayName }}</option>\n      </select>\n    </div>\n    <div class=\"form-check mb-3\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        id=\"content-config-multiple\"\n        formControlName=\"Content.Multiple\"\n      />\n      <label class=\"form-check-label\" for=\"content-config-multiple\">\n        {{ 'FlexFieldsSite::Content:Multiple' | abpLocalization }}\n      </label>\n    </div>\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Content:Placeholder' | abpLocalization }}</label>\n      <input type=\"text\" class=\"form-control\" formControlName=\"Content.Placeholder\" />\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-content-config', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, CommonModule, ReactiveFormsModule], template: "<form [formGroup]=\"formEntity\">\n  <div formGroupName=\"configuration\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Content:ContentTypeId' | abpLocalization }}</label>\n      <select class=\"form-select\" formControlName=\"Content.ContentTypeId\">\n        <option [ngValue]=\"null\">{{ 'FlexFieldsSite::Content:AnyContentType' | abpLocalization }}</option>\n        <option *ngFor=\"let item of contentTypes\" [ngValue]=\"item.id\">{{ item.displayName }}</option>\n      </select>\n    </div>\n    <div class=\"form-check mb-3\">\n      <input\n        type=\"checkbox\"\n        class=\"form-check-input\"\n        id=\"content-config-multiple\"\n        formControlName=\"Content.Multiple\"\n      />\n      <label class=\"form-check-label\" for=\"content-config-multiple\">\n        {{ 'FlexFieldsSite::Content:Multiple' | abpLocalization }}\n      </label>\n    </div>\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Content:Placeholder' | abpLocalization }}</label>\n      <input type=\"text\" class=\"form-control\" formControlName=\"Content.Placeholder\" />\n    </div>\n  </div>\n</form>\n" }]
+        }] });
+
+class ContentAdminService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.create = (input, config) => this.restService.request({
+            method: 'POST',
+            url: '/api/site-admin/contents',
+            body: input,
+        }, { apiName: this.apiName, ...config });
+        this.delete = (id, config) => this.restService.request({
+            method: 'DELETE',
+            url: `/api/site-admin/contents/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.findBySlug = (pageId, cultureName, slug, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/contents/by-slug',
+            params: { pageId, cultureName, slug },
+        }, { apiName: this.apiName, ...config });
+        this.get = (id, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/contents/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.getList = (input, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/contents',
+            params: { pageId: input.pageId, cultureName: input.cultureName, contentTypeId: input.contentTypeId, status: input.status, publishedBefore: input.publishedBefore, publishedAfter: input.publishedAfter, filter: input.filter, flexFieldConditions: input.flexFieldConditions, sorting: input.sorting, skipCount: input.skipCount, maxResultCount: input.maxResultCount },
+        }, { apiName: this.apiName, ...config });
+        this.update = (id, input, config) => this.restService.request({
+            method: 'PUT',
+            url: `/api/site-admin/contents/${id}`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentAdminService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Edits the value of a `Content` field: a picker over other Content, restricted to
+ * `Content.ContentTypeId` when set. The value is always a flat array of ids, even in single-select mode
+ * - matching the server's `ContentFieldType`, which always stores `List<Guid>`.
+ *
+ * The picker list is fetched once, in {@link ngOnInit} - `Content.ContentTypeId` is fixed for the
+ * lifetime of one rendered control (it belongs to the field's own definition, not something this
+ * component's own inputs can change), so there is nothing to react to afterward.
+ */
+class ContentControlComponent extends FieldTypeControlBase {
+    constructor() {
+        super(...arguments);
+        this.contentAdminService = inject(ContentAdminService);
+        /**
+         * A signal, not a plain field: it is filled by an HTTP callback, and this control renders in the content
+         * editor's page flow, under the host layout's OnPush ancestors - a plain-field write there never marks
+         * them for check, so the options (and a stored selection) would stay blank until an unrelated event.
+         */
+        this.options = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    }
+    get multiple() {
+        return !!this.fieldValue?.field.configuration['Content.Multiple'];
+    }
+    get placeholder() {
+        return this.fieldValue?.field.configuration['Content.Placeholder'] ?? '';
+    }
+    configurationDefaults() {
+        return new ContentConfiguration();
+    }
+    createControl() {
+        const validators = [];
+        if (this.fieldValue.required) {
+            validators.push(Validators.required);
+        }
+        const stored = readStringList(this.selectedValue).filter(value => value !== '');
+        return this.fb.control(this.multiple ? stored : (stored[0] ?? ''), validators);
+    }
+    ngOnInit() {
+        const contentTypeId = this.fieldValue?.field.configuration['Content.ContentTypeId'];
+        this.contentAdminService
+            .getList({ contentTypeId: contentTypeId || null, skipCount: 0, maxResultCount: 100 })
+            .subscribe(result => {
+            this.options.set(result.items ?? []);
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: ContentControlComponent, isStandalone: true, selector: "site-content-control", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"entityForm\">\n  <div [formGroupName]=\"parentField\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\" *ngIf=\"fieldValue.field.displayName\">\n        {{ fieldValue.field.displayName }}\n      </label>\n      @if (multiple) {\n        <select\n          class=\"form-select\"\n          multiple\n          [attr.data-flex-field-name]=\"fieldValue.field.name\"\n          [formControlName]=\"fieldValue.field.name\"\n        >\n          <option *ngFor=\"let item of options()\" [value]=\"item.id\">{{ item.slug }}</option>\n        </select>\n      } @else {\n        <select\n          class=\"form-select\"\n          [attr.data-flex-field-name]=\"fieldValue.field.name\"\n          [formControlName]=\"fieldValue.field.name\"\n        >\n          <option value=\"\">{{ placeholder }}</option>\n          <option *ngFor=\"let item of options()\" [value]=\"item.id\">{{ item.slug }}</option>\n        </select>\n      }\n      <small class=\"form-text text-muted d-block\" *ngIf=\"fieldValue.field.description\">\n        {{ fieldValue.field.description }}\n      </small>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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$1.SelectMultipleControlValueAccessor, selector: "select[multiple]:not([ngNoCva])[formControlName],select[multiple]:not([ngNoCva])[formControl],select[multiple]:not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-content-control', changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, ReactiveFormsModule], template: "<div [formGroup]=\"entityForm\">\n  <div [formGroupName]=\"parentField\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\" *ngIf=\"fieldValue.field.displayName\">\n        {{ fieldValue.field.displayName }}\n      </label>\n      @if (multiple) {\n        <select\n          class=\"form-select\"\n          multiple\n          [attr.data-flex-field-name]=\"fieldValue.field.name\"\n          [formControlName]=\"fieldValue.field.name\"\n        >\n          <option *ngFor=\"let item of options()\" [value]=\"item.id\">{{ item.slug }}</option>\n        </select>\n      } @else {\n        <select\n          class=\"form-select\"\n          [attr.data-flex-field-name]=\"fieldValue.field.name\"\n          [formControlName]=\"fieldValue.field.name\"\n        >\n          <option value=\"\">{{ placeholder }}</option>\n          <option *ngFor=\"let item of options()\" [value]=\"item.id\">{{ item.slug }}</option>\n        </select>\n      }\n      <small class=\"form-text text-muted d-block\" *ngIf=\"fieldValue.field.description\">\n        {{ fieldValue.field.description }}\n      </small>\n    </div>\n  </div>\n</div>\n" }]
+        }] });
+
+/**
+ * Displays the value of a `Content` field read-only: the referenced Content, resolved by id. An id
+ * that no longer resolves (deleted since picked) is silently dropped rather than shown as an error -
+ * the same "fail open" stance the server's own `Content.cshtml` partial takes.
+ */
+class ContentViewComponent {
+    constructor() {
+        this.contentAdminService = inject(ContentAdminService);
+        this.showInList = false;
+        this.value = '';
+        /**
+         * A signal, not a plain field: it is filled by an HTTP callback, and this view renders in the content
+         * list's page flow, under the host layout's OnPush ancestors - a plain-field write there never marks
+         * them for check, so the cell would stay at `-` until an unrelated event.
+         */
+        this.resolved = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    }
+    get summaryText() {
+        const resolved = this.resolved();
+        return resolved.length === 0 ? '-' : resolved.map(item => item.slug).join(', ');
+    }
+    ngOnChanges() {
+        const ids = readStringList(this.value).filter(id => id !== '');
+        if (ids.length === 0) {
+            this.resolved.set([]);
+            return;
+        }
+        forkJoin(ids.map(id => this.contentAdminService.get(id).pipe(catchError(() => of(null))))).subscribe(results => {
+            this.resolved.set(results.filter((item) => item !== null));
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: ContentViewComponent, isStandalone: true, selector: "site-content-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, usesOnChanges: true, ngImport: i0, template: "@if (showInList) {\n  {{ summaryText }}\n} @else {\n  <div class=\"flex-field flex-field-view flex-field-view-content\">\n    <span class=\"flex-field-label\" *ngIf=\"fields?.field?.displayName\">{{ fields.field.displayName }}</span>\n    @if (resolved().length === 0) {\n      <span class=\"flex-field-value\">-</span>\n    } @else {\n      <ul class=\"flex-field-value flex-field-value-content\">\n        <li *ngFor=\"let item of resolved()\">{{ item.slug }}</li>\n      </ul>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-content-view', changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule], template: "@if (showInList) {\n  {{ summaryText }}\n} @else {\n  <div class=\"flex-field flex-field-view flex-field-view-content\">\n    <span class=\"flex-field-label\" *ngIf=\"fields?.field?.displayName\">{{ fields.field.displayName }}</span>\n    @if (resolved().length === 0) {\n      <span class=\"flex-field-value\">-</span>\n    } @else {\n      <ul class=\"flex-field-value flex-field-value-content\">\n        <li *ngFor=\"let item of resolved()\">{{ item.slug }}</li>\n      </ul>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+/** The registration key. Must equal `ContentFieldType.ControlName` on the server. */
+const CONTENT_FIELD_TYPE_NAME = 'Content';
+/**
+ * Site's 8th field type, alongside the six the flex-fields library ships and Site's own `Seo` (the
+ * 7th). The server registers `ContentFieldType` through DI automatically; the client has no equivalent
+ * discovery, so it is registered here and wired in through `provideSite()` (GitHub issue #49).
+ *
+ * Named "Content" rather than DynamicForms' own "Entry" - Site's domain has no "Entry" concept, only
+ * `Content`, so the field type is named after what it actually references.
+ *
+ * **No search component.** `ContentFieldType.IndexValueType` is `Guid` on the server (so a future
+ * filter UI is possible), but no `searchComponent` ships this round - same state CKEditor/the file field
+ * are currently in.
+ */
+const CONTENT_FIELD_TYPE = {
+    name: CONTENT_FIELD_TYPE_NAME,
+    displayNameKey: 'FlexFieldsSite::FieldType:Content',
+    configComponent: ContentConfigComponent,
+    controlComponent: ContentControlComponent,
+    viewComponent: ContentViewComponent,
+};
+
+/**
+ * Site's file containers - the server's `SiteFileContainerNames`. The file library works in these only;
+ * a file field names one of them. `images` takes pictures, `attachments` documents only.
+ */
+const SITE_FILE_CONTAINER_NAMES = ['images', 'attachments'];
+/** Pictures only (raster formats, no SVG) - what a share image or an image field uses. */
+const SITE_IMAGES_CONTAINER_NAME = 'images';
+
+var _a, _b;
+/**
+ * The configuration keys of the file field type. **Persisted data**: every field (and every Matrix
+ * block's nested configuration) stores them under these names, which date from when the field type was
+ * `Dignite.Abp.FlexFields`' - the same keys as the server's `FileFieldConfigurationNames`.
+ */
+const FILE_FIELD_CONFIGURATION_NAMES = {
+    fileContainerName: 'FileExplorer.FileContainerName',
+    uploadFileMultiple: 'FileExplorer.UploadFileMultiple',
+};
+/** Configuration of a file field, shaped for `FormBuilder.group()`. */
+class FileFieldConfiguration {
+    constructor() {
+        // No fallback container anywhere downstream (the control prompts instead of guessing), so this has to
+        // be required here - the point where a misconfiguration is cheapest to catch.
+        this[_a] = ['', [Validators.required]];
+        this[_b] = [false];
+    }
+    static { _a = FILE_FIELD_CONFIGURATION_NAMES.fileContainerName, _b = FILE_FIELD_CONFIGURATION_NAMES.uploadFileMultiple; }
+}
+
+/** Designer-side editor for a file field's configuration: which of Site's containers, one file or many. */
+class FileConfigComponent extends FieldTypeConfigBase {
+    constructor() {
+        super(...arguments);
+        this.containerNames = SITE_FILE_CONTAINER_NAMES;
+        this.names = FILE_FIELD_CONFIGURATION_NAMES;
+    }
+    configurationDefaults() {
+        return new FileFieldConfiguration();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileConfigComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FileConfigComponent, isStandalone: true, selector: "site-file-config", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"formEntity\">\n  <div formGroupName=\"configuration\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\" for=\"siteFileFieldContainerName\">\n        {{ 'FlexFieldsSite::File:FileContainerName' | abpLocalization }}\n      </label>\n      <select class=\"form-select\" id=\"siteFileFieldContainerName\" [formControlName]=\"names.fileContainerName\">\n        <option value=\"\"></option>\n        @for (containerName of containerNames; track containerName) {\n          <option [value]=\"containerName\">{{ containerName }}</option>\n        }\n      </select>\n    </div>\n    <div class=\"mb-3\">\n      <div class=\"form-check form-check-inline\">\n        <input\n          class=\"form-check-input\"\n          type=\"checkbox\"\n          [formControlName]=\"names.uploadFileMultiple\"\n          id=\"siteFileFieldUploadFileMultiple\"\n        />\n        <label class=\"form-check-label\" for=\"siteFileFieldUploadFileMultiple\">\n          {{ 'FlexFieldsSite::File:UploadFileMultiple' | abpLocalization }}\n        </label>\n      </div>\n    </div>\n    <button type=\"submit\" style=\"display: none\" #submitclick></button>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-config', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, ReactiveFormsModule], template: "<form [formGroup]=\"formEntity\">\n  <div formGroupName=\"configuration\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\" for=\"siteFileFieldContainerName\">\n        {{ 'FlexFieldsSite::File:FileContainerName' | abpLocalization }}\n      </label>\n      <select class=\"form-select\" id=\"siteFileFieldContainerName\" [formControlName]=\"names.fileContainerName\">\n        <option value=\"\"></option>\n        @for (containerName of containerNames; track containerName) {\n          <option [value]=\"containerName\">{{ containerName }}</option>\n        }\n      </select>\n    </div>\n    <div class=\"mb-3\">\n      <div class=\"form-check form-check-inline\">\n        <input\n          class=\"form-check-input\"\n          type=\"checkbox\"\n          [formControlName]=\"names.uploadFileMultiple\"\n          id=\"siteFileFieldUploadFileMultiple\"\n        />\n        <label class=\"form-check-label\" for=\"siteFileFieldUploadFileMultiple\">\n          {{ 'FlexFieldsSite::File:UploadFileMultiple' | abpLocalization }}\n        </label>\n      </div>\n    </div>\n    <button type=\"submit\" style=\"display: none\" #submitclick></button>\n  </div>\n</form>\n" }]
+        }] });
+
+class ValidatorsService {
+    constructor(toaster, localizationService) {
+        this.toaster = toaster;
+        this.localizationService = localizationService;
+    }
+    isCheckForm(input, module = 'AbpValidation') {
+        const keys = Object.keys(input);
+        for (const element of keys) {
+            if (input[element] === false) {
+                const displayName = element.charAt(0).toUpperCase() + element.slice(1);
+                let info = `"${this.localizationService.instant(`${module}::${displayName}`)}" `;
+                if (element.includes('.') && !element.includes('].')) {
+                    const parts = element.split('.');
+                    info = `"${this.localizationService.instant(`${module}::${parts[0]}`)}.${this.localizationService.instant(`${module}::${parts[1]}`)}"`;
+                }
+                if (element.includes('].')) {
+                    const parts = element.split('].');
+                    const arrayStart = parts[0].split('[');
+                    info = `"${this.localizationService.instant(`${module}::${arrayStart[0]}`)}[${arrayStart[1]}].${this.localizationService.instant(`${module}::${parts[1]}`)}"`;
+                }
+                this.toaster.warn(info + this.localizationService.instant('AbpValidation::ThisFieldIsNotValid.'));
+                return true;
+            }
+        }
+        return false;
+    }
+    getFormValidationStatus(formEntity) {
+        const validationStatus = {};
+        const traverseForm = (form, prefix = '') => {
+            if (form instanceof FormGroup) {
+                Object.keys(form.controls).forEach(key => {
+                    const control = form.controls[key];
+                    const fullKey = prefix ? `${prefix}.${key}` : key;
+                    if (control instanceof FormControl) {
+                        validationStatus[fullKey] = control.valid;
+                    }
+                    else if (control instanceof FormArray || control instanceof FormGroup) {
+                        traverseForm(control, fullKey);
+                    }
+                });
+            }
+            else {
+                form.controls.forEach((control, index) => {
+                    const fullKey = prefix ? `${prefix}[${index}]` : `[${index}]`;
+                    if (control instanceof FormControl) {
+                        validationStatus[fullKey] = control.valid;
+                    }
+                    else if (control instanceof FormArray || control instanceof FormGroup) {
+                        traverseForm(control, fullKey);
+                    }
+                });
+            }
+        };
+        traverseForm(formEntity);
+        return validationStatus;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ValidatorsService, deps: [{ token: i2.ToasterService }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ValidatorsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ValidatorsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i2.ToasterService }, { type: i4.LocalizationService }] });
+
+class DirectoryAdminService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.create = (input, config) => this.restService.request({
+            method: 'POST',
+            url: '/api/site-admin/files/directories',
+            body: input,
+        }, { apiName: this.apiName, ...config });
+        this.delete = (id, config) => this.restService.request({
+            method: 'DELETE',
+            url: `/api/site-admin/files/directories/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.get = (id, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/files/directories/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.getList = (input, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/files/directories',
+            params: { containerName: input.containerName },
+        }, { apiName: this.apiName, ...config });
+        this.move = (id, input, config) => this.restService.request({
+            method: 'PUT',
+            url: `/api/site-admin/files/directories/${id}/move`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+        this.update = (id, input, config) => this.restService.request({
+            method: 'PUT',
+            url: `/api/site-admin/files/directories/${id}`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: DirectoryAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: DirectoryAdminService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: DirectoryAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class FileAdminService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.create = (input, config) => this.restService.request({
+            method: 'POST',
+            url: '/api/site-admin/files',
+            params: { containerName: input.containerName, directoryId: input.directoryId },
+            body: input.file,
+        }, { apiName: this.apiName, ...config });
+        this.delete = (id, config) => this.restService.request({
+            method: 'DELETE',
+            url: `/api/site-admin/files/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.get = (id, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/files/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.getContainerConfiguration = (containerName, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/files/containers/${containerName}`,
+        }, { apiName: this.apiName, ...config });
+        this.getList = (input, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/files',
+            params: { containerName: input.containerName, directoryId: input.directoryId, creatorId: input.creatorId, filter: input.filter, sorting: input.sorting, skipCount: input.skipCount, maxResultCount: input.maxResultCount },
+        }, { apiName: this.apiName, ...config });
+        this.update = (id, input, config) => this.restService.request({
+            method: 'PUT',
+            url: `/api/site-admin/files/${id}`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileAdminService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+var index$h = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    DirectoryAdminService: DirectoryAdminService,
+    FileAdminService: FileAdminService
+});
+
+/* eslint-disable @angular-eslint/component-selector */
+const MY_FILES_NODE_KEY = '__site-my-files__';
+const isMyFilesNode = (node) => node?.key === MY_FILES_NODE_KEY;
+class FileDirectoryTreeComponent {
+    constructor(directoryAdminService, fb, confirmation, localizationService) {
+        this.directoryAdminService = directoryAdminService;
+        this.fb = fb;
+        this.confirmation = confirmation;
+        this.localizationService = localizationService;
+        this.hostElement = inject((ElementRef));
+        this.directoryTree = [];
+        this.expandedNodeKeys = [MY_FILES_NODE_KEY];
+        this._fileContainerName = '';
+        this.nodeClick = new EventEmitter();
+        this.treeNodeData = new EventEmitter();
+        this.isMyFilesNode = isMyFilesNode;
+        /** Dragged-directory highlight state, tracked globally so it clears even if the drop lands outside the tree. */
+        this.isDirectoryDragging = false;
+        this.beforeDrop = (arg) => {
+            const { pos, dragNode, node } = arg;
+            if (![0, 1, -1].includes(pos) || this.isMyFilesNode(dragNode)) {
+                return of(false);
+            }
+            // "My Files" is the virtual root; a directory can't be dropped before or after it.
+            if (this.isMyFilesNode(node) && pos !== 0) {
+                return of(false);
+            }
+            const targetParent = node.parentNode;
+            // The indent guide to the right of an expanded directory is technically "before its first
+            // child", but the intended drop target there is still "the sibling slot after that directory" -
+            // not a second way to create a child.
+            const isIndentedFirstChildGap = pos === -1 &&
+                !!targetParent &&
+                !this.isMyFilesNode(targetParent) &&
+                targetParent.children?.[0]?.key === node.key;
+            if (isIndentedFirstChildGap) {
+                const grandParentKey = targetParent.parentNode?.key;
+                const parentId = !grandParentKey || grandParentKey === MY_FILES_NODE_KEY ? null : grandParentKey;
+                const order = targetParent.origin.order + 1;
+                return this.directoryAdminService.move(dragNode.key, { parentId, order }).pipe(tap(() => this.loadDirectoryTree()), 
+                // Refresh from the server's own reordering instead of letting ng-zorro also apply its
+                // "before the first child" move locally.
+                map(() => false));
+            }
+            const parentKey = node.parentNode?.key;
+            const parentId = pos === 0
+                ? this.isMyFilesNode(node)
+                    ? null
+                    : node.key
+                : !parentKey || parentKey === MY_FILES_NODE_KEY
+                    ? null
+                    : parentKey;
+            const order = pos === 0
+                ? (node.origin.children || []).length + 1
+                : pos === 1
+                    ? node.origin.order + 1
+                    : node.origin.order;
+            return this.directoryAdminService.move(dragNode.key, { parentId, order }).pipe(tap(() => this.loadDirectoryTree()), map(() => true));
+        };
+        this.isNodeSelected = (node) => {
+            return !!this.selectedTreeNode && node.key === this.selectedTreeNode.key;
+        };
+        this.directoryFormModalOpen = false;
+        this.directoryFormBusy = false;
+        this.validatorsService = inject(ValidatorsService);
+    }
+    set theSelectedTreeNode(v) {
+        this.selectedTreeNode = v;
+    }
+    set fileContainerName(v) {
+        if (v) {
+            this._fileContainerName = v;
+        }
+    }
+    get fileContainerName() {
+        return this._fileContainerName;
+    }
+    ngAfterContentInit() {
+        if (this.fileContainerName) {
+            this.loadData();
+        }
+    }
+    loadData() {
+        if (this.fileContainerName) {
+            this.loadDirectoryTree();
+        }
+    }
+    loadDirectoryTree() {
+        this.directoryAdminService
+            .getList({ containerName: this.fileContainerName })
+            .subscribe(res => {
+            const directories = this.buildNodeTree(res.items);
+            this.directoryTree = [this.createMyFilesNode(directories)];
+            this.treeNodeData.emit(this.directoryTree);
+        });
+    }
+    createMyFilesNode(children) {
+        const title = this.localizationService.instant('Site::Files:MyFiles');
+        return {
+            id: MY_FILES_NODE_KEY,
+            key: MY_FILES_NODE_KEY,
+            name: title,
+            title,
+            parentId: null,
+            children,
+            expanded: this.expandedNodeKeys.includes(MY_FILES_NODE_KEY),
+            isLeaf: children.length === 0,
+            isVirtualRoot: true,
+        };
+    }
+    /** Reshapes the flat, parent-referencing directory list into the nested tree `abp-tree` renders. */
+    buildNodeTree(items, parentId = null) {
+        const result = items
+            .filter(item => item.parentId === parentId)
+            .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+        result.forEach((node, index) => {
+            node.title = node.name ?? '';
+            node.key = node.id ?? '';
+            node.expanded = this.expandedNodeKeys.includes(node.key);
+            node.isFirstChildOfDirectory = parentId !== null && index === 0;
+            node.children = (node.children ?? []);
+            node.children.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+            if (node.children.length > 0) {
+                this.buildNodeTree(node.children, node.id);
+            }
+        });
+        return result;
+    }
+    onDirectoryDragStart(event) {
+        if (event.target instanceof Node && this.hostElement.nativeElement.contains(event.target)) {
+            this.isDirectoryDragging = true;
+        }
+    }
+    onDirectoryDragEnd() {
+        this.isDirectoryDragging = false;
+    }
+    /**
+     * The node icon itself stops propagation via `(click)="$event.stopPropagation()"`, so a click on
+     * it never reaches here - no need to distinguish where the click came from.
+     */
+    activeNode(node) {
+        if (this.selectedTreeNode && this.selectedTreeNode.key === node.key)
+            return;
+        this.selectedTreeNode = node;
+        this.nodeClick.emit(node);
+    }
+    onExpandChange(event) {
+        const key = event.node.key;
+        this.expandedNodeKeys = this.expandedNodeKeys.includes(key)
+            ? this.expandedNodeKeys.filter(k => k !== key)
+            : [...this.expandedNodeKeys, key];
+    }
+    openDirectoryForm(parentNode, editing = false) {
+        this.directoryFormModalOpen = true;
+        this.directoryForm = this.fb.group({
+            containerName: [this.fileContainerName || '', Validators.required],
+            name: ['', Validators.required],
+            parentId: [
+                parentNode && !this.isMyFilesNode(parentNode) ? parentNode.key : null,
+            ],
+        });
+        if (editing && parentNode) {
+            this.nodeBeingEdited = parentNode;
+            this.directoryForm.patchValue({ name: parentNode.name });
+        }
+    }
+    deleteDirectory(node) {
+        this.confirmation
+            .warn('Site::Files:DeletionConfirmationMessage', 'Site::Files:DeletionConfirmationTitle', {
+            messageLocalizationParams: [node.title],
+        })
+            .subscribe((status) => {
+            if (status !== 'confirm')
+                return;
+            this.directoryAdminService.delete(node.key).subscribe(() => {
+                this.directoryFormModalOpen = false;
+                if (this.nodeBeingEdited && this.nodeBeingEdited.key === node.key) {
+                    this.nodeBeingEdited = undefined;
+                }
+                this.loadDirectoryTree();
+            });
+        });
+    }
+    onDirectoryFormVisibleChange(visible) {
+        if (!visible) {
+            this.directoryForm = undefined;
+            this.nodeBeingEdited = undefined;
+        }
+    }
+    saveDirectoryForm() {
+        if (!this.directoryForm)
+            return;
+        const input = this.directoryForm.value;
+        const validationStatus = this.validatorsService.getFormValidationStatus(this.directoryForm);
+        if (this.validatorsService.isCheckForm(validationStatus, 'Site'))
+            return;
+        if (!this.directoryForm.valid || this.directoryFormBusy)
+            return;
+        this.directoryFormBusy = true;
+        const request = this.nodeBeingEdited
+            ? this.directoryAdminService.update(this.nodeBeingEdited.key, input)
+            : this.directoryAdminService.create(input);
+        request.pipe(finalize(() => (this.directoryFormBusy = false))).subscribe(() => {
+            this.directoryFormModalOpen = false;
+            this.onDirectoryFormVisibleChange(false);
+            this.loadDirectoryTree();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileDirectoryTreeComponent, deps: [{ token: DirectoryAdminService }, { token: i1$1.FormBuilder }, { token: i2.ConfirmationService }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FileDirectoryTreeComponent, isStandalone: true, selector: "site-file-directory-tree", inputs: { theSelectedTreeNode: "theSelectedTreeNode", fileContainerName: "fileContainerName" }, outputs: { nodeClick: "nodeClick", treeNodeData: "treeNodeData" }, host: { listeners: { "document:dragstart": "onDirectoryDragStart($event)", "document:dragend": "onDirectoryDragEnd()" } }, viewQueries: [{ propertyName: "directoryFormSubmit", first: true, predicate: ["directoryFormSubmit"], descendants: true }], ngImport: i0, template: "<div class=\"file-tree-panel\">\n  <abp-tree class=\"mb-2\" [class.directory-dragging]=\"isDirectoryDragging\" [nodes]=\"directoryTree\" (nzExpandChange)=\"onExpandChange($event)\" [draggable]=\"true\"\n    [beforeDrop]=\"beforeDrop\" (selectedNodeChange)=\"activeNode($event)\"\n    [changeCheckboxWithNode]=\"true\" [isNodeSelected]=\"isNodeSelected\"\n    (contextmenu)=\"$event.preventDefault()\">\n\n    <ng-template #menu let-node>\n      <button type=\"button\" class=\"dropdown-item\" (click.stop)=\"openDirectoryForm(node)\"><i\n        class=\"me-1 fa fa-plus\"></i>{{'Site::Files:NewDirectory' | abpLocalization}}</button>\n      @if (!isMyFilesNode(node)) {\n        <button type=\"button\" class=\"dropdown-item\" (click.stop)=\"openDirectoryForm(node, true)\"><i\n          class=\"me-1 fa fa-pencil\"></i>{{'AbpUi::Edit' | abpLocalization}}</button>\n        <button type=\"button\" class=\"dropdown-item\" (click.stop)=\"deleteDirectory(node)\"><i\n          class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' | abpLocalization}}</button>\n      }\n    </ng-template>\n\n    <ng-template abpTreeNodeTemplate let-node>\n      <div class=\"file-tree-node-drop-target\" [class.my-files-node]=\"isMyFilesNode(node)\"\n        [class.first-child-of-directory]=\"node.origin?.isFirstChildOfDirectory\">\n        <i class=\"fa me-1\" [class.fa-home]=\"isMyFilesNode(node)\" [class.fa-folder]=\"!isMyFilesNode(node)\"\n          aria-hidden=\"true\" (click)=\"$event.stopPropagation()\"></i>\n        <span>{{node.title}}</span>\n      </div>\n    </ng-template>\n\n    <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\n      @if (node.children.length>0 && !isMyFilesNode(node)) {\n        <i aria-hidden=\"true\">\n          <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\n        }\n      </ng-template>\n\n      <ng-template #minusIcon>\n        <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n      </ng-template>\n\n        <ng-template #plusIcon>\n          <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n        </ng-template>\n  </abp-tree>\n</div>\n      <abp-modal [(visible)]=\"directoryFormModalOpen\" [busy]=\"directoryFormBusy\"\n        (visibleChange)=\"onDirectoryFormVisibleChange($event)\">\n        <ng-template #abpHeader>\n          <h3>{{nodeBeingEdited?('AbpUi::Edit' | abpLocalization):('Site::Files:NewDirectory' | abpLocalization)}}\n          </h3>\n        </ng-template>\n        <ng-template #abpBody>\n          @if (directoryForm) {\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"directoryForm\"\n              (keydown.enter)=\"$event.preventDefault()\" (submit)=\"saveDirectoryForm()\">\n              <button type=\"submit\" #directoryFormSubmit style=\"display: none\"></button>\n              <div class=\"mb-3\">\n                <label class=\"form-label\">{{'Site::Files:DirectoryName' | abpLocalization}}</label>\n                <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n              </div>\n            </form>\n          } @else {\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n          }\n        </ng-template>\n        <ng-template #abpFooter>\n          <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n          <abp-button iconClass=\"fa fa-check\" [loading]=\"directoryFormBusy\"\n          (click)=\"directoryFormSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n        </ng-template>\n      </abp-modal>\n", styles: [".file-tree-panel abp-tree{display:block}::ng-deep .file-tree-panel abp-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-tree-panel abp-tree .ant-tree-node-content-wrapper .ng-star-inserted[title]{padding:0 10px}::ng-deep .file-tree-panel abp-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-tree-panel abp-tree .selected{background-color:var(--lpx-brand)!important;color:var(--bs-white)}.file-tree-node-drop-target{width:100%;border:1px solid transparent;border-radius:.25rem}::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over nz-tree-drop-indicator,::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over .ant-tree-drop-indicator{display:none!important}::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over .file-tree-node-drop-target{border-color:var(--bs-primary);background-color:var(--bs-primary-bg-subtle)}::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over-gap-top:has(.file-tree-node-drop-target.first-child-of-directory) nz-tree-drop-indicator,::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over-gap-top:has(.file-tree-node-drop-target.first-child-of-directory) .ant-tree-drop-indicator{left:-20px!important}::ng-deep .file-tree-panel abp-tree:not(.directory-dragging) nz-tree-drop-indicator,::ng-deep .file-tree-panel abp-tree:not(.directory-dragging) .ant-tree-drop-indicator{display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: i4.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { 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: TreeModule }, { kind: "component", type: i7.TreeComponent, selector: "abp-tree", inputs: ["noAnimation", "draggable", "checkable", "checkStrictly", "checkedKeys", "nodes", "expandedKeys", "selectedNode", "changeCheckboxWithNode", "isNodeSelected", "beforeDrop"], outputs: ["checkedKeysChange", "expandedKeysChange", "selectedNodeChange", "dropOver", "nzExpandChange"] }, { kind: "directive", type: i7.TreeNodeTemplateDirective, selector: "[abpTreeNodeTemplate],[abp-tree-node-template]" }, { kind: "directive", type: i7.ExpandedIconTemplateDirective, selector: "[abpTreeExpandedIconTemplate],[abp-tree-expanded-icon-template]" }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileDirectoryTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-directory-tree', changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, FormsModule, ReactiveFormsModule, CoreModule, ThemeSharedModule, TreeModule], template: "<div class=\"file-tree-panel\">\n  <abp-tree class=\"mb-2\" [class.directory-dragging]=\"isDirectoryDragging\" [nodes]=\"directoryTree\" (nzExpandChange)=\"onExpandChange($event)\" [draggable]=\"true\"\n    [beforeDrop]=\"beforeDrop\" (selectedNodeChange)=\"activeNode($event)\"\n    [changeCheckboxWithNode]=\"true\" [isNodeSelected]=\"isNodeSelected\"\n    (contextmenu)=\"$event.preventDefault()\">\n\n    <ng-template #menu let-node>\n      <button type=\"button\" class=\"dropdown-item\" (click.stop)=\"openDirectoryForm(node)\"><i\n        class=\"me-1 fa fa-plus\"></i>{{'Site::Files:NewDirectory' | abpLocalization}}</button>\n      @if (!isMyFilesNode(node)) {\n        <button type=\"button\" class=\"dropdown-item\" (click.stop)=\"openDirectoryForm(node, true)\"><i\n          class=\"me-1 fa fa-pencil\"></i>{{'AbpUi::Edit' | abpLocalization}}</button>\n        <button type=\"button\" class=\"dropdown-item\" (click.stop)=\"deleteDirectory(node)\"><i\n          class=\" me-1 fa fa-remove\"></i>{{'AbpUi::Delete' | abpLocalization}}</button>\n      }\n    </ng-template>\n\n    <ng-template abpTreeNodeTemplate let-node>\n      <div class=\"file-tree-node-drop-target\" [class.my-files-node]=\"isMyFilesNode(node)\"\n        [class.first-child-of-directory]=\"node.origin?.isFirstChildOfDirectory\">\n        <i class=\"fa me-1\" [class.fa-home]=\"isMyFilesNode(node)\" [class.fa-folder]=\"!isMyFilesNode(node)\"\n          aria-hidden=\"true\" (click)=\"$event.stopPropagation()\"></i>\n        <span>{{node.title}}</span>\n      </div>\n    </ng-template>\n\n    <ng-template abpTreeExpandedIconTemplate let-node let-origin=\"origin\">\n      @if (node.children.length>0 && !isMyFilesNode(node)) {\n        <i aria-hidden=\"true\">\n          <ng-container *ngTemplateOutlet=\"node.isExpanded ? minusIcon : plusIcon\"></ng-container></i>\n        }\n      </ng-template>\n\n      <ng-template #minusIcon>\n        <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n      </ng-template>\n\n        <ng-template #plusIcon>\n          <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n        </ng-template>\n  </abp-tree>\n</div>\n      <abp-modal [(visible)]=\"directoryFormModalOpen\" [busy]=\"directoryFormBusy\"\n        (visibleChange)=\"onDirectoryFormVisibleChange($event)\">\n        <ng-template #abpHeader>\n          <h3>{{nodeBeingEdited?('AbpUi::Edit' | abpLocalization):('Site::Files:NewDirectory' | abpLocalization)}}\n          </h3>\n        </ng-template>\n        <ng-template #abpBody>\n          @if (directoryForm) {\n            <form class=\"sites-modal-form\" #myForm=\"ngForm\" [formGroup]=\"directoryForm\"\n              (keydown.enter)=\"$event.preventDefault()\" (submit)=\"saveDirectoryForm()\">\n              <button type=\"submit\" #directoryFormSubmit style=\"display: none\"></button>\n              <div class=\"mb-3\">\n                <label class=\"form-label\">{{'Site::Files:DirectoryName' | abpLocalization}}</label>\n                <input type=\"text\" class=\"form-control\" formControlName=\"name\">\n              </div>\n            </form>\n          } @else {\n            <div class=\"text-center\"><i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i></div>\n          }\n        </ng-template>\n        <ng-template #abpFooter>\n          <button type=\"button\" class=\"btn btn-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n          <abp-button iconClass=\"fa fa-check\" [loading]=\"directoryFormBusy\"\n          (click)=\"directoryFormSubmit.nativeElement.click()\">{{'AbpUi::Save' | abpLocalization}}</abp-button>\n        </ng-template>\n      </abp-modal>\n", styles: [".file-tree-panel abp-tree{display:block}::ng-deep .file-tree-panel abp-tree .ant-tree-node-content-wrapper{padding:0}::ng-deep .file-tree-panel abp-tree .ant-tree-node-content-wrapper .ng-star-inserted[title]{padding:0 10px}::ng-deep .file-tree-panel abp-tree .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color:transparent}::ng-deep .file-tree-panel abp-tree .selected{background-color:var(--lpx-brand)!important;color:var(--bs-white)}.file-tree-node-drop-target{width:100%;border:1px solid transparent;border-radius:.25rem}::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over nz-tree-drop-indicator,::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over .ant-tree-drop-indicator{display:none!important}::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over .file-tree-node-drop-target{border-color:var(--bs-primary);background-color:var(--bs-primary-bg-subtle)}::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over-gap-top:has(.file-tree-node-drop-target.first-child-of-directory) nz-tree-drop-indicator,::ng-deep .file-tree-panel abp-tree.directory-dragging .drag-over-gap-top:has(.file-tree-node-drop-target.first-child-of-directory) .ant-tree-drop-indicator{left:-20px!important}::ng-deep .file-tree-panel abp-tree:not(.directory-dragging) nz-tree-drop-indicator,::ng-deep .file-tree-panel abp-tree:not(.directory-dragging) .ant-tree-drop-indicator{display:none!important}\n"] }]
+        }], ctorParameters: () => [{ type: DirectoryAdminService }, { type: i1$1.FormBuilder }, { type: i2.ConfirmationService }, { type: i4.LocalizationService }], propDecorators: { theSelectedTreeNode: [{
+                type: Input
+            }], fileContainerName: [{
+                type: Input
+            }], nodeClick: [{
+                type: Output
+            }], treeNodeData: [{
+                type: Output
+            }], onDirectoryDragStart: [{
+                type: HostListener,
+                args: ['document:dragstart', ['$event']]
+            }], onDirectoryDragEnd: [{
+                type: HostListener,
+                args: ['document:dragend']
+            }], directoryFormSubmit: [{
+                type: ViewChild,
+                args: ['directoryFormSubmit', { static: false }]
+            }] } });
+
+/** Fallback icon by MIME type (or file extension, for the few types MIME can't distinguish). */
+const IMAGE_TYPE_OPTIONS = [
+    { type: 'image/jpeg', icon: '' },
+    { type: 'image/webp', icon: '' },
+    { type: 'image/gif', icon: '' },
+    { type: 'image/png', icon: '' },
+    { type: 'image/bmp', icon: '' },
+    { type: 'audio/ogg', icon: '' },
+    { type: 'video/mp4', icon: '' },
+    { type: 'application/pdf', icon: 'fa fa-file-pdf-o' },
+    { type: 'application/msword', icon: 'fa fa-file-word-o' },
+    {
+        type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+        icon: 'fa fa-file-word-o',
+    },
+    { type: 'application/vnd.ms-powerpoint', icon: 'fa fa-file-powerpoint-o' },
+    {
+        type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+        icon: 'fa fa-file-powerpoint-o',
+    },
+    { type: 'application/vnd.ms-excel', icon: 'fa fa-file-excel-o' },
+    {
+        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        icon: 'fa fa-file-excel-o',
+    },
+    { type: 'application/x-zip-compressed', icon: 'fa fa-file-archive-o' },
+    { type: '7z', icon: 'fa fa-file-archive-o' },
+    { type: 'text/plain', icon: 'fa fa-file-text-o' },
+    { type: '', icon: 'fa fa-file-o' },
+];
+
+/**
+ * The path every Site file is served under - the server's `SiteFileUrl.RoutePrefix`. The admin API hands
+ * out addresses relative to it (`FileDescriptorDto.url`, `/api/site-public/files/...?__tenant=`), and that
+ * relative address is what a field stores: no host is written into content. The public site resolves it
+ * against its own origin; this admin UI, served from another origin, shows it from its `SiteAdmin` API
+ * host (`SiteFileUrlService`).
+ */
+const SITE_FILE_PATH = '/api/site-public/files/';
+/** Whether `url` addresses a file Site serves (and so can be resized), as opposed to an external image. */
+function isSiteFileUrl(url) {
+    return !!url && url.toLowerCase().includes(SITE_FILE_PATH);
+}
+/**
+ * `url` asked for at `width` x `height` (`?Width=&Height=`, the server crops to fill when both are given),
+ * keeping every other query parameter - `__tenant` in particular. Anything that is not a Site file address
+ * (a local `blob:` URL, an external image) comes back unchanged, as does a call without a size. Mirrors the
+ * server's `SiteFileUrl.Sized`.
+ */
+function sizedFileUrl(url, width, height) {
+    const value = url ?? '';
+    if (!isSiteFileUrl(value) || (!width && !height)) {
+        return value;
+    }
+    const queryStart = value.indexOf('?');
+    const base = queryStart < 0 ? value : value.substring(0, queryStart);
+    const kept = queryStart < 0
+        ? []
+        : value
+            .substring(queryStart + 1)
+            .split('&')
+            .filter(parameter => {
+            const name = parameter.split('=')[0].toLowerCase();
+            return parameter && name !== 'width' && name !== 'height';
+        });
+    const size = [width ? `Width=${width}` : '', height ? `Height=${height}` : ''].filter(Boolean);
+    return `${base}?${[...kept, ...size].join('&')}`;
+}
+/**
+ * `url` on `apiBase` when it is a relative Site file address; anything else - an absolute address, a local
+ * `blob:`/`data:` URL, an external image - comes back unchanged, as does every address when `apiBase` is
+ * empty (an admin UI served from its API's own origin). Mirrors the server's `SiteFileUrl.Absolutize`.
+ */
+function absoluteFileUrl(url, apiBase) {
+    const value = url ?? '';
+    const base = trimBase(apiBase);
+    return base && value.toLowerCase().startsWith(SITE_FILE_PATH) ? base + value : value;
+}
+function trimBase(apiBase) {
+    return (apiBase ?? '').trim().replace(/\/+$/, '');
+}
+
+/**
+ * Where this admin UI shows Site's files from. A stored address is relative (`/api/site-public/files/...`,
+ * see `SITE_FILE_PATH`), and this UI is served from an origin of its own, so the previews
+ * (`site-file-preview`: the file picker and modal, a file field, the SEO share image) put the `SiteAdmin`
+ * API's host - `environment.apis.SiteAdmin.url`, where the file library's admin API lives - in front of it.
+ * The CKEditor field does the same inside the editor (`siteCKEditorConfigContributor`). Nothing that is
+ * saved carries that host.
+ */
+class SiteFileUrlService {
+    constructor() {
+        this.environment = inject(EnvironmentService);
+    }
+    /** The `SiteAdmin` API's base URL, with no trailing slash; empty when the UI shares its API's origin. */
+    get apiBase() {
+        // getApiUrl itself, guarded: it dereferences `apis` unchecked, and an environment without them (a test
+        // bed, say) means there is no other origin to show files from.
+        const apis = this.environment.getEnvironment()?.apis;
+        return apis ? (this.environment.getApiUrl('SiteAdmin') ?? '').replace(/\/+$/, '') : '';
+    }
+    /** A stored file address as this UI loads it - see `absoluteFileUrl`. */
+    toDisplay(url) {
+        return absoluteFileUrl(url, this.apiBase);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteFileUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteFileUrlService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteFileUrlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * A thumbnail (image) or type icon (anything else) for one file. Site's file containers are publicly
+ * readable, so an image is shown straight from its public address (`/api/site-public/files/...`), asked
+ * for at the thumbnail's size so the browser does not download the full upload. The address is stored
+ * relative; it is shown - and linked - from the `SiteAdmin` API's host (`SiteFileUrlService`).
+ */
+class FilePreviewComponent {
+    constructor() {
+        this.fileUrls = inject(SiteFileUrlService);
+        this.width = '100px';
+        /** The file's address: the public read endpoint's, or a local `blob:`/`data:` URL for a file not uploaded yet. */
+        this.src = '';
+        this.type = '';
+        this.name = '';
+        this.className = '';
+        this.isImage = true;
+        this.isAudio = false;
+        this.isVideo = false;
+        this.displaySrc = '';
+        /** {@link src} where this UI can reach it - the download link. */
+        this.linkHref = '';
+    }
+    ngOnChanges() {
+        this.updateFileType();
+        this.linkHref = this.fileUrls.toDisplay(this.src);
+        this.displaySrc = this.isImage ? sizedFileUrl(this.linkHref, this.resizeWidth, this.resizeHeight) : this.linkHref;
+    }
+    updateFileType() {
+        const fileName = this.name || '';
+        const fileType = this.type || '';
+        if (!this.type) {
+            this.type = fileName.includes('.7z') ? '7z' : '';
+        }
+        this.isImage = fileType.includes('image/');
+        this.isAudio = fileType.includes('audio/');
+        this.isVideo = fileType.includes('video/');
+    }
+    /** Falls back to a generic file icon when the type has no dedicated one. */
+    getFileIconClass() {
+        return IMAGE_TYPE_OPTIONS.find(item => item.type === this.type)?.icon || 'fa fa-file-o';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FilePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FilePreviewComponent, isStandalone: true, selector: "site-file-preview", inputs: { width: "width", src: "src", type: "type", name: "name", className: "className", resizeWidth: "resizeWidth", resizeHeight: "resizeHeight" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"image_box\" [style]=\"{ width: width, maxWidth: '100%' }\">\n  <a class=\"file-preview-link\" [href]=\"linkHref\" [download]=\"name\" [attr.aria-label]=\"name\">\n    @if (isImage) {\n      <div class=\"img_box\" [class]=\"className\">\n        <img [src]=\"displaySrc\" [alt]=\"name\" />\n      </div>\n    }\n    @if (isAudio) {\n      <i class=\"file-type-icon fa fa-file-audio-o fs-4\" aria-hidden=\"true\"></i>\n    }\n    @if (isVideo) {\n      <i class=\"file-type-icon fa fa-file-video-o fs-4\" aria-hidden=\"true\"></i>\n    }\n    @if (!(isImage||isAudio||isVideo)) {\n      <i class=\"file-type-icon fs-4\" [ngClass]=\"getFileIconClass()\" aria-hidden=\"true\"></i>\n    }\n  </a>\n</div>\n", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.file-preview-link{display:block;color:inherit;text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FilePreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-preview', changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule], template: "<div class=\"image_box\" [style]=\"{ width: width, maxWidth: '100%' }\">\n  <a class=\"file-preview-link\" [href]=\"linkHref\" [download]=\"name\" [attr.aria-label]=\"name\">\n    @if (isImage) {\n      <div class=\"img_box\" [class]=\"className\">\n        <img [src]=\"displaySrc\" [alt]=\"name\" />\n      </div>\n    }\n    @if (isAudio) {\n      <i class=\"file-type-icon fa fa-file-audio-o fs-4\" aria-hidden=\"true\"></i>\n    }\n    @if (isVideo) {\n      <i class=\"file-type-icon fa fa-file-video-o fs-4\" aria-hidden=\"true\"></i>\n    }\n    @if (!(isImage||isAudio||isVideo)) {\n      <i class=\"file-type-icon fs-4\" [ngClass]=\"getFileIconClass()\" aria-hidden=\"true\"></i>\n    }\n  </a>\n</div>\n", styles: [".image_box{text-align:center;position:relative}.image_box img{width:100%}.file-preview-link{display:block;color:inherit;text-decoration:none}\n"] }]
+        }], propDecorators: { width: [{
+                type: Input
+            }], src: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], resizeWidth: [{
+                type: Input
+            }], resizeHeight: [{
+                type: Input
+            }] } });
+
+const UNITS = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+class FormatFileSizePipe {
+    transform(bytes) {
+        let size = bytes;
+        let unitIndex = 0;
+        while (size >= 1024 && unitIndex < UNITS.length - 1) {
+            size /= 1024;
+            unitIndex++;
+        }
+        return `${size.toFixed(1)} ${UNITS[unitIndex]}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FormatFileSizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.2.2", ngImport: i0, type: FormatFileSizePipe, isStandalone: true, name: "formatFileSize" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FormatFileSizePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'formatFileSize',
+                    standalone: true,
+                }]
+        }] });
+
+class FileModalComponent {
+    constructor(fileService, toaster, list, confirmation, localizationService) {
+        this.fileService = fileService;
+        this.toaster = toaster;
+        this.list = list;
+        this.confirmation = confirmation;
+        this.localizationService = localizationService;
+        // The file list uses the opposite visual convention for sort arrows.
+        // Keep the direction sent by ListService unchanged and only swap the icons.
+        this.tableSortIcons = {
+            sortAscending: 'datatable-icon-down',
+            sortDescending: 'datatable-icon-up',
+        };
+        this.createDirectoryPermissionName = '';
+        this._fileContainerName = '';
+        this.multiple = false;
+        this.sizeLimit = 1048576;
+        this.visibleChange = new EventEmitter();
+        this.modalOpen = false;
+        /**
+         * The two secondary dialogs' open/busy flags are signals, not plain fields: they are written after an
+         * HTTP call returns (rename, move), and bound on `<abp-modal>` elements that sit in this component's own
+         * view - under the host layout's OnPush ancestors (`abp-router-outlet`, the LeptonX layouts), where a
+         * plain-field write in a response callback never marks the view for check, so the dialog would stay open
+         * until some unrelated event happened to. What renders *inside* a dialog (header/body/footer) is attached
+         * to the application root by `NgbModal` and refreshed on every tick, so the plain fields it reads
+         * (`data`, `uploadingFiles`, `isRenaming`, ...) are not affected.
+         */
+        this.fileNameModalOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fileNameModalOpen" }] : /* istanbul ignore next */ []));
+        this.hasQueryHook = false;
+        /** Flattened directory list from the tree, for the breadcrumb-style path lookups below. */
+        this.flattenedDirectories = [];
+        this.uploadingFiles = [];
+        this.data = {
+            items: [],
+            totalCount: 0,
+        };
+        this.filters = {};
+        this.selectFilefn = new EventEmitter();
+        this.moveModalOpen = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "moveModalOpen" }] : /* istanbul ignore next */ []));
+        this.moveModalBusy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "moveModalBusy" }] : /* istanbul ignore next */ []));
+        this.selectedFiles = [];
+        this.isAllSelected = false;
+        this.isRowSelected = (id) => {
+            return this.selectedFiles.some(item => item.id === id);
+        };
+        this.isRenaming = false;
+    }
+    loadContainerConfiguration() {
+        this.fileService.getContainerConfiguration(this.fileContainerName).subscribe(res => {
+            this.createDirectoryPermissionName = res?.createDirectoryPermissionName;
+            // Reflect the container's actual server-side limit (FileSizeLimitHandler.MaxFileSize) once
+            // it's known, instead of leaving the pre-fetch default of 1MB as the permanent client cap.
+            if (res?.maxBlobSize > 0) {
+                this.sizeLimit = res.maxBlobSize;
+            }
+            this.scheduleTableRecalculation();
+        });
+    }
+    /** No default: an unconfigured container is a caller bug, not implicitly "Images". */
+    set fileContainerName(v) {
+        if (v) {
+            this._fileContainerName = v;
+        }
+    }
+    get fileContainerName() {
+        return this._fileContainerName;
+    }
+    set limit(v) {
+        this.sizeLimit = v;
+    }
+    set visible(v) {
+        this.modalOpen = v;
+        if (v) {
+            this.loadData();
+        }
+    }
+    onFileNameModalVisibleChange(visible) {
+        this.fileNameModalOpen.set(visible);
+        if (!visible) {
+            this.fileNameForm = undefined;
+            this.editingFileRow = undefined;
+        }
+    }
+    onModalVisibleChange(visible) {
+        if (visible)
+            return;
+        this.modalOpen = false;
+        this.visibleChange.emit(visible);
+        this.createDirectoryPermissionName = '';
+        this.selectedTreeNode = undefined;
+        this.selectedFiles = [];
+        this.uploadingFiles = [];
+        this.onCancelFileNameEdit();
+    }
+    /** Recomputes the table's column widths once the modal has finished its open transition. */
+    onModalInit() {
+        this.scheduleTableRecalculation();
+    }
+    scheduleTableRecalculation() {
+        if (!this.modalOpen)
+            return;
+        if (typeof requestAnimationFrame === 'undefined') {
+            setTimeout(() => this.fileTable?.recalculate());
+            return;
+        }
+        if (this.tableRecalculationFrame !== undefined) {
+            cancelAnimationFrame(this.tableRecalculationFrame);
+        }
+        this.tableRecalculationFrame = requestAnimationFrame(() => {
+            this.tableRecalculationFrame = requestAnimationFrame(() => {
+                this.tableRecalculationFrame = undefined;
+                if (this.modalOpen) {
+                    this.fileTable?.recalculate();
+                }
+            });
+        });
+    }
+    modalSave() {
+        if (this.selectedFiles.length === 0)
+            return;
+        const selected = structuredClone(this.selectedFiles);
+        this.selectFilefn.emit(selected);
+        this.onModalVisibleChange(false);
+    }
+    loadData() {
+        if (this.modalOpen && this.fileContainerName) {
+            this.list.maxResultCount = 50;
+            this.loadContainerConfiguration();
+            if (!this.hasQueryHook) {
+                this.hookToQuery();
+                this.hasQueryHook = true;
+            }
+            else {
+                this.list.get();
+            }
+        }
+    }
+    getSelectedDirectoryId() {
+        const key = this.selectedTreeNode?.key;
+        return key && key !== MY_FILES_NODE_KEY ? key : undefined;
+    }
+    onTreeNodeData(nodes) {
+        this.flattenedDirectories = this.flattenTree(nodes);
+    }
+    getDirectoryPath(node) {
+        const path = [];
+        const visitedKeys = new Set();
+        let currentKey = node?.key;
+        while (currentKey && !visitedKeys.has(currentKey)) {
+            visitedKeys.add(currentKey);
+            const currentNode = this.flattenedDirectories.find(item => item.key === currentKey);
+            if (!currentNode)
+                break;
+            path.unshift(currentNode);
+            currentKey = currentNode.parentId ?? undefined;
+        }
+        return path;
+    }
+    getFileDirectoryPath(directoryId) {
+        if (!directoryId)
+            return '';
+        return this.getDirectoryPath({ key: directoryId })
+            .map(node => node.name || node.title)
+            .filter(Boolean)
+            .join(' / ');
+    }
+    flattenTree(nodes) {
+        const result = [];
+        const visit = (items) => {
+            for (const item of items) {
+                result.push(item);
+                if (item.children?.length) {
+                    visit(item.children);
+                }
+            }
+        };
+        visit(nodes);
+        return result;
+    }
+    onTreeNodeClick(node) {
+        this.filters.skipCount = 0;
+        this.selectedTreeNode = node;
+        this.list.get();
+    }
+    async onFileInputChange(event) {
+        const input = event.target;
+        const files = Array.from(input.files ?? []);
+        this.uploadingFiles = files;
+        // Uploaded one at a time: concurrent creates against the same container can race inside
+        // the blob storage provider (e.g. Volo.Abp.BlobStoring.Database) and surface as a spurious
+        // AbpDbConcurrencyException (409) on one of the files. Sequential requests avoid that race.
+        for (const file of files) {
+            if (file.size > this.sizeLimit) {
+                this.setUploadStatus(file, 2);
+                continue;
+            }
+            try {
+                await this.uploadFile(file);
+                this.setUploadStatus(file, 1);
+            }
+            catch {
+                this.setUploadStatus(file, 2);
+            }
+        }
+        this.list.get();
+        const allSucceeded = !this.uploadingFiles.some(file => file.status === 2);
+        if (allSucceeded) {
+            setTimeout(() => {
+                this.uploadingFiles = [];
+            }, 4000);
+        }
+    }
+    setUploadStatus(file, status) {
+        for (const uploading of this.uploadingFiles) {
+            if (uploading === file)
+                uploading.status = status;
+        }
+    }
+    uploadFile(file) {
+        return new Promise((resolve, reject) => {
+            const formData = new FormData();
+            formData.append('file', file, file.name);
+            this.fileService
+                .create({
+                file: formData,
+                containerName: this.fileContainerName,
+                directoryId: this.getSelectedDirectoryId() ?? null,
+            })
+                .subscribe({ next: resolve, error: reject });
+        });
+    }
+    hookToQuery() {
+        const getData = (query) => this.fileService.getList({
+            ...query,
+            ...this.filters,
+            containerName: this.fileContainerName,
+            directoryId: this.getSelectedDirectoryId(),
+        });
+        const setData = (list) => {
+            this.data = list;
+            this.selectedFiles = [];
+            this.isAllSelected = false;
+            this.scheduleTableRecalculation();
+        };
+        this.list.hookToQuery(getData).subscribe(setData);
+    }
+    deleteSelectedFiles() {
+        this.confirmation
+            .warn('Site::Files:BatchDeletionConfirmationMessage', 'Site::Files:BatchDeletionConfirmationTitle', {
+            messageLocalizationParams: [String(this.selectedFiles.length)],
+        })
+            .subscribe(async (status) => {
+            if (status !== 'confirm')
+                return;
+            const result = await this.batchDeleteFiles(this.selectedFiles);
+            if (result.success) {
+                this.toaster.success(result.message);
+            }
+            else {
+                this.toaster.error(result.message);
+            }
+            this.list.get();
+        });
+    }
+    async batchDeleteFiles(files) {
+        const results = await Promise.allSettled(files.map(file => new Promise((resolve, reject) => {
+            this.fileService.delete(file.id).subscribe({ next: () => resolve(), error: () => reject(file) });
+        })));
+        const failedCount = results.filter(result => result.status === 'rejected').length;
+        return {
+            success: failedCount === 0,
+            message: failedCount === 0
+                ? this.localizationService.instant('Site::Files:DeletedSuccessfully')
+                : this.localizationService.instant('Site::Files:ItemsFailedToDelete', String(failedCount)),
+        };
+    }
+    openMoveModal() {
+        if (this.selectedFiles.length === 0 || !this.createDirectoryPermissionName)
+            return;
+        this.moveTargetDirectoryNode = undefined;
+        this.moveModalOpen.set(true);
+    }
+    onMoveTargetDirectoryChange(node) {
+        this.moveTargetDirectoryNode = node;
+    }
+    onMoveModalVisibleChange(visible) {
+        this.moveModalOpen.set(visible);
+        if (!visible) {
+            this.moveModalBusy.set(false);
+            this.moveTargetDirectoryNode = undefined;
+        }
+    }
+    async moveSelectedFiles() {
+        const targetNode = this.moveTargetDirectoryNode;
+        if (!targetNode?.key || this.selectedFiles.length === 0 || this.moveModalBusy())
+            return;
+        const targetDirectoryId = isMyFilesNode(targetNode) ? null : targetNode.key;
+        this.moveModalBusy.set(true);
+        const results = await Promise.allSettled(this.selectedFiles.map(file => new Promise((resolve, reject) => {
+            this.fileService
+                .update(file.id, { directoryId: targetDirectoryId })
+                .subscribe({ next: () => resolve(), error: reject });
+        })));
+        this.moveModalBusy.set(false);
+        const failedCount = results.filter(result => result.status === 'rejected').length;
+        if (failedCount > 0) {
+            this.toaster.error(this.localizationService.instant('Site::Files:MoveFailed'));
+            return;
+        }
+        this.toaster.success(this.localizationService.instant('Site::Files:MovedSuccessfully'));
+        this.selectedFiles = [];
+        this.isAllSelected = false;
+        this.list.get();
+        this.moveModalOpen.set(false);
+    }
+    closeFileStatusModal() {
+        this.uploadingFiles = [];
+    }
+    ngOnChanges(changes) {
+        const selectPickerFileChange = changes['selectPickerFile'];
+        if (!selectPickerFileChange) {
+            return;
+        }
+        this.selectedFiles = structuredClone(selectPickerFileChange.currentValue ?? []);
+    }
+    onRowCheckboxChange(event, row, rows) {
+        const checked = event.target.checked;
+        let selected = [...this.selectedFiles];
+        if (this.multiple) {
+            if (checked) {
+                selected.push(row);
+            }
+            else {
+                selected = selected.filter(item => item.id !== row.id);
+            }
+            this.isAllSelected = this.areAllSelected(rows, selected);
+        }
+        else {
+            selected = checked ? [row] : [];
+        }
+        this.selectedFiles = this.removeDuplicatesById(selected);
+    }
+    areAllSelected(rows, selected = []) {
+        if (rows.length === 0)
+            return false;
+        return rows.every(row => selected.some(item => item.id === row.id));
+    }
+    onSelectAllChange(event, rows) {
+        const checked = event.target.checked;
+        this.selectedFiles = checked
+            ? this.removeDuplicatesById([...this.selectedFiles, ...rows])
+            : this.selectedFiles.filter(item => !rows.some(row => row.id === item.id));
+        this.isAllSelected = checked;
+    }
+    removeDuplicatesById(files) {
+        const seenIds = new Set();
+        return files.filter(file => {
+            if (seenIds.has(file.id))
+                return false;
+            seenIds.add(file.id);
+            return true;
+        });
+    }
+    onSubmitFileName() {
+        if (!this.fileNameForm?.valid || this.isRenaming)
+            return;
+        const input = this.fileNameForm.value;
+        this.isRenaming = true;
+        this.fileService
+            .update(input.id, { name: input.fileName })
+            .pipe(finalize(() => (this.isRenaming = false)))
+            .subscribe(() => {
+            const row = this.data.items.find(item => item.id === this.editingFileRow?.id);
+            if (row) {
+                row.name = input.fileName;
+            }
+            this.fileNameForm = undefined;
+            this.editingFileRow = undefined;
+            this.fileNameModalOpen.set(false);
+            this.toaster.success(this.localizationService.instant('Site::Files:SavedSuccessfully'));
+        });
+    }
+    onEditFileName(row) {
+        this.fileNameForm = new FormGroup({
+            fileName: new FormControl(row.name, [Validators.required]),
+            id: new FormControl(row.id, [Validators.required]),
+        });
+        this.editingFileRow = row;
+        this.fileNameModalOpen.set(true);
+    }
+    onCancelFileNameEdit() {
+        this.fileNameModalOpen.set(false);
+        this.editingFileRow = undefined;
+        this.fileNameForm = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileModalComponent, deps: [{ token: FileAdminService }, { token: i2.ToasterService }, { token: i4.ListService }, { token: i2.ConfirmationService }, { token: i4.LocalizationService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FileModalComponent, isStandalone: true, selector: "site-file-modal", inputs: { fileContainerName: "fileContainerName", multiple: "multiple", limit: "limit", visible: "visible", selectPickerFile: "selectPickerFile" }, outputs: { visibleChange: "visibleChange", selectFilefn: "selectFilefn" }, providers: [
+            ListService,
+            { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
+        ], viewQueries: [{ propertyName: "fileTable", first: true, predicate: ["fileTable"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<abp-modal [(visible)]=\"modalOpen\" (visibleChange)=\"onModalVisibleChange($event)\" (init)=\"onModalInit()\"\n  [options]=\"{ size: 'xl', scrollable: false, windowClass: 'file-modal-window' }\">\n  <ng-template #abpHeader>\n    <h3>{{'Site::Files:Files' | abpLocalization}}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    @if (modalOpen) {\n        <div class=\"row file-modal-body file-modal\">\n        @if (createDirectoryPermissionName) {\n          <div class=\"col-3\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n            <site-file-directory-tree [theSelectedTreeNode]=\"selectedTreeNode\" (nodeClick)=\"onTreeNodeClick($event)\"\n              (treeNodeData)=\"onTreeNodeData($event)\"\n            [fileContainerName]=\"fileContainerName\"></site-file-directory-tree>\n          </div>\n        }\n        <div [class]=\"createDirectoryPermissionName ? 'col-9 file-browser-content' : 'col-12 file-browser-content'\">\n          <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n            <div class=\"file-list-actions d-flex align-items-center gap-3\" style=\"flex: 2\">\n              @if (selectedFiles.length > 0) {\n                <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click.stop)=\"deleteSelectedFiles()\"\n                  [attr.aria-label]=\"'Site::Files:Delete' | abpLocalization\"\n                  [title]=\"'Site::Files:Delete' | abpLocalization\">\n                  <i class=\"fa fa-trash\" aria-hidden=\"true\"></i>\n                </button>\n                @if (createDirectoryPermissionName) {\n                  <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click.stop)=\"openMoveModal()\"\n                    [attr.aria-label]=\"'Site::Files:Move' | abpLocalization\"\n                    [title]=\"'Site::Files:Move' | abpLocalization\">\n                    <i class=\"fa fa-folder-open-o\" aria-hidden=\"true\"></i>\n                  </button>\n                }\n              }\n            </div>\n          <div class=\"input-group form-file\" style=\"flex: 2\">\n            <input type=\"file\" class=\"form-control\" #fileUploadInput [multiple]=\"true\" (change)=\"onFileInputChange($event)\" />\n          </div>\n        </div>\n          <div class=\"file-table-container\">\n          <ngx-datatable #fileTable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\"\n            [cssClasses]=\"tableSortIcons\" columnMode=\"flex\"\n            [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\" [scrollbarVDynamic]=\"true\"\n            [virtualization]=\"false\"\n            [externalPaging]=\"true\" [count]=\"data.totalCount\">\n            <ngx-datatable-column [flexGrow]=\"0.6\" prop=\"id\" [sortable]=\"false\" [draggable]=\"false\"\n              [resizeable]=\"false\">\n              <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n                let-selectFn=\"selectFn\">\n                @if (multiple) {\n                  <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"isAllSelected\"\n                    (change)=\"onSelectAllChange($event,data.items)\" />\n                }\n              </ng-template>\n              <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"isRowSelected(value)\"\n                  (change)=\"onRowCheckboxChange($event,row,data.items)\" />\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column [name]=\"'Site::Files:FileName' | abpLocalization\" prop=\"name\" [sortable]=\"false\"\n                [flexGrow]=\"4\">\n                <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                  <div class=\"file-name-cell\">\n                    <div class=\"file-name-content\">\n                      @if (getFileDirectoryPath(row.directoryId)) {\n                        <div class=\"file-directory-path\" [title]=\"getFileDirectoryPath(row.directoryId)\">\n                          <i class=\"fa fa-folder-o me-1\" aria-hidden=\"true\"></i>{{ getFileDirectoryPath(row.directoryId) }}\n                        </div>\n                      }\n                      <div>{{ value }}</div>\n                    </div>\n                    <div class=\"file-name-preview\" [attr.title]=\"row.name\">\n                      <site-file-preview [width]=\"'48px'\" [src]=\"row.url\" [resizeWidth]=\"96\" [resizeHeight]=\"96\"\n                        [name]=\"row.name\" [type]=\"row.mimeType\"></site-file-preview>\n                    </div>\n                  </div>\n                </ng-template>\n              </ngx-datatable-column>\n                <ngx-datatable-column [name]=\"'Site::Files:FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n                  <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                    {{(value|formatFileSize) }}\n                  </ng-template>\n                </ngx-datatable-column>\n                <ngx-datatable-column [name]=\"'Site::Files:CreationTime' | abpLocalization\" prop=\"creationTime\"\n                  [flexGrow]=\"2\">\n                  <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                    {{ value | date : 'short' }}\n                  </ng-template>\n                </ngx-datatable-column>\n                <ngx-datatable-column [name]=\"'AbpUi::Edit' | abpLocalization\" [flexGrow]=\"1\" [sortable]=\"false\">\n                  <ng-template let-row=\"row\" ngx-datatable-cell-template>\n                    <button type=\"button\" class=\"btn btn-sm btn-secondary p-0\" (click.stop)=\"onEditFileName(row)\"\n                      [attr.aria-label]=\"'AbpUi::Edit' | abpLocalization\">\n                      <i class=\"fas fa-edit p-2\" aria-hidden=\"true\"></i>\n                    </button>\n                  </ng-template>\n                </ngx-datatable-column>\n              </ngx-datatable>\n            </div>\n            @if (uploadingFiles.length > 0) {\n              <div\n                class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal   m-5\" style=\"border-radius: 10px\">\n                <div class=\"card p-1\">\n                  <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n                    <div>{{'Site::Files:UploadFiles' | abpLocalization}}</div>\n                    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n                  </div>\n                  <div class=\"card-body\">\n                    <table class=\"table\">\n                      <thead>\n                        <tr>\n                          <th scope=\"col\">{{'Site::Files:FileName' | abpLocalization}}</th>\n                          <th scope=\"col\">{{'Site::Files:FileSize' | abpLocalization}}</th>\n                          <th scope=\"col\"></th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (item of uploadingFiles; track item; let i = $index) {\n                          <tr>\n                            <th scope=\"row\">\n                              <div>{{ item.name }}</div>\n                              @if (item.size > sizeLimit) {\n                                <div class=\"form-text text-danger\">\n                                  {{'Site::Files:ExceedsMaximumSize' |\n                                  abpLocalization:(sizeLimit|formatFileSize)}}\n                                </div>\n                              }\n                            </th>\n                            <td>{{ item.size | formatFileSize }}</td>\n                            <td>\n                              @if (item.status === 1) {\n                                <i class=\"fas fa-check text-primary\"></i>\n                              }\n                              @if (item.status === 2) {\n                                <i class=\"fas fa-times-circle text-danger\"></i>\n                              }\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-outline-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n      <abp-button iconClass=\"fa fa-check\" [disabled]=\"selectedFiles.length === 0\" (click)=\"modalSave()\">\n        <span>{{'Site::Files:Confirm' | abpLocalization}}</span>\n        <span class=\"selected-file-count\" [class.d-none]=\"selectedFiles.length === 0\">\n          ({{selectedFiles.length}})\n        </span>\n      </abp-button>\n    </ng-template>\n  </abp-modal>\n\n  <abp-modal [(visible)]=\"fileNameModalOpen\" (visibleChange)=\"onFileNameModalVisibleChange($event)\">\n    <ng-template #abpHeader>\n      <h3>{{'AbpUi::Edit' | abpLocalization}} {{'Site::Files:FileName' | abpLocalization}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n      @if (fileNameForm) {\n        <form id=\"file-name-edit-form\" [formGroup]=\"fileNameForm\" (ngSubmit)=\"onSubmitFileName()\">\n          <div class=\"mb-3\">\n            <label class=\"form-label\" for=\"file-name-edit-input\">\n              {{'Site::Files:FileName' | abpLocalization}}\n            </label>\n            <input id=\"file-name-edit-input\" class=\"form-control\" type=\"text\" formControlName=\"fileName\" />\n          </div>\n        </form>\n      }\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancelFileNameEdit()\">\n        {{'AbpUi::Cancel' | abpLocalization}}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" form=\"file-name-edit-form\"\n        [disabled]=\"isRenaming || fileNameForm?.invalid\">\n        @if (isRenaming) {\n          <i class=\"fa-spin fa fa-spinner me-1\" aria-hidden=\"true\"></i>\n        }\n        {{'AbpUi::Save' | abpLocalization}}\n      </button>\n    </ng-template>\n  </abp-modal>\n\n  <abp-modal [(visible)]=\"moveModalOpen\" [busy]=\"moveModalBusy()\"\n    (visibleChange)=\"onMoveModalVisibleChange($event)\">\n    <ng-template #abpHeader>\n      <h3>{{'Site::Files:Move' | abpLocalization}}</h3>\n    </ng-template>\n      <ng-template #abpBody>\n      @if (moveModalOpen()) {\n        <div class=\"move-directory-tree\">\n          <site-file-directory-tree [theSelectedTreeNode]=\"moveTargetDirectoryNode\"\n            (nodeClick)=\"onMoveTargetDirectoryChange($event)\" [fileContainerName]=\"fileContainerName\">\n          </site-file-directory-tree>\n        </div>\n      }\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-secondary\" abpClose>\n        {{'AbpUi::Cancel' | abpLocalization}}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"moveModalBusy() || !moveTargetDirectoryNode\"\n        (click)=\"moveSelectedFiles()\">\n        @if (moveModalBusy()) {\n          <i class=\"fa-spin fa fa-spinner me-1\" aria-hidden=\"true\"></i>\n        }\n        {{'AbpUi::Save' | abpLocalization}}\n      </button>\n    </ng-template>\n  </abp-modal>\n", styles: ["::ng-deep .file-modal .container-height{height:100%;min-height:0}::ng-deep .file-modal .file-browser-content{display:flex;flex-direction:column;height:calc(100vh - 240px);min-height:0}::ng-deep .file-modal .file-table-container{flex:1 1 auto;min-height:0}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}::ng-deep .file-modal input[type=checkbox]{cursor:pointer}::ng-deep .file-modal .file-directory-path{color:var(--bs-secondary-color);font-size:.75rem;font-weight:400;line-height:1.25;margin-bottom:.25rem;overflow-wrap:anywhere}::ng-deep .file-modal .file-name-cell{display:flex;align-items:start;gap:.75rem;min-width:0}::ng-deep .file-modal .file-name-content{flex:1 1 auto;min-width:0}::ng-deep .file-modal .file-name-preview{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:start;justify-content:center;overflow:hidden}::ng-deep .file-modal .file-name-preview ::ng-deep .image_box{width:48px!important;height:48px;display:flex;align-items:center;justify-content:center}::ng-deep .file-modal .file-name-preview ::ng-deep .image_box img{width:100%;height:100%;object-fit:cover}::ng-deep .file-modal .file-name-preview ::ng-deep .image_box a{line-height:1}::ng-deep .file-modal-window .modal-body{padding-bottom:.5rem!important}::ng-deep .file-modal-window .modal-footer{padding-top:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: i4.FormSubmitDirective, selector: "form[ngSubmit][formGroup]", inputs: ["debounce", "notValidateOnSubmit", "markAsDirtyWhenSubmit"], outputs: ["ngSubmit"] }, { kind: "directive", type: i4.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { 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: "component", type: i6.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i6.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i6.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i6.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i2.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "component", type: FileDirectoryTreeComponent, selector: "site-file-directory-tree", inputs: ["theSelectedTreeNode", "fileContainerName"], outputs: ["nodeClick", "treeNodeData"] }, { kind: "component", type: FilePreviewComponent, selector: "site-file-preview", inputs: ["width", "src", "type", "name", "className", "resizeWidth", "resizeHeight"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-modal', changeDetection: ChangeDetectionStrategy.Eager, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        CoreModule,
+                        ThemeSharedModule,
+                        FileDirectoryTreeComponent,
+                        FilePreviewComponent,
+                        FormatFileSizePipe,
+                    ], providers: [
+                        ListService,
+                        { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 500 },
+                    ], template: "<abp-modal [(visible)]=\"modalOpen\" (visibleChange)=\"onModalVisibleChange($event)\" (init)=\"onModalInit()\"\n  [options]=\"{ size: 'xl', scrollable: false, windowClass: 'file-modal-window' }\">\n  <ng-template #abpHeader>\n    <h3>{{'Site::Files:Files' | abpLocalization}}</h3>\n  </ng-template>\n  <ng-template #abpBody>\n    @if (modalOpen) {\n        <div class=\"row file-modal-body file-modal\">\n        @if (createDirectoryPermissionName) {\n          <div class=\"col-3\" style=\"overflow: auto; height: calc(100vh - 240px)\">\n            <site-file-directory-tree [theSelectedTreeNode]=\"selectedTreeNode\" (nodeClick)=\"onTreeNodeClick($event)\"\n              (treeNodeData)=\"onTreeNodeData($event)\"\n            [fileContainerName]=\"fileContainerName\"></site-file-directory-tree>\n          </div>\n        }\n        <div [class]=\"createDirectoryPermissionName ? 'col-9 file-browser-content' : 'col-12 file-browser-content'\">\n          <div class=\"mb-3 d-flex justify-content-between align-items-center\">\n            <div class=\"file-list-actions d-flex align-items-center gap-3\" style=\"flex: 2\">\n              @if (selectedFiles.length > 0) {\n                <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click.stop)=\"deleteSelectedFiles()\"\n                  [attr.aria-label]=\"'Site::Files:Delete' | abpLocalization\"\n                  [title]=\"'Site::Files:Delete' | abpLocalization\">\n                  <i class=\"fa fa-trash\" aria-hidden=\"true\"></i>\n                </button>\n                @if (createDirectoryPermissionName) {\n                  <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\" (click.stop)=\"openMoveModal()\"\n                    [attr.aria-label]=\"'Site::Files:Move' | abpLocalization\"\n                    [title]=\"'Site::Files:Move' | abpLocalization\">\n                    <i class=\"fa fa-folder-open-o\" aria-hidden=\"true\"></i>\n                  </button>\n                }\n              }\n            </div>\n          <div class=\"input-group form-file\" style=\"flex: 2\">\n            <input type=\"file\" class=\"form-control\" #fileUploadInput [multiple]=\"true\" (change)=\"onFileInputChange($event)\" />\n          </div>\n        </div>\n          <div class=\"file-table-container\">\n          <ngx-datatable #fileTable class=\"material container-height\" [rows]=\"data.items\" [list]=\"list\"\n            [cssClasses]=\"tableSortIcons\" columnMode=\"flex\"\n            [headerHeight]=\"50\" [footerHeight]=\"50\" rowHeight=\"auto\" [scrollbarV]=\"true\" [scrollbarVDynamic]=\"true\"\n            [virtualization]=\"false\"\n            [externalPaging]=\"true\" [count]=\"data.totalCount\">\n            <ngx-datatable-column [flexGrow]=\"0.6\" prop=\"id\" [sortable]=\"false\" [draggable]=\"false\"\n              [resizeable]=\"false\">\n              <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\n                let-selectFn=\"selectFn\">\n                @if (multiple) {\n                  <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"isAllSelected\"\n                    (change)=\"onSelectAllChange($event,data.items)\" />\n                }\n              </ng-template>\n              <ng-template ngx-datatable-cell-template let-row=\"row\" let-value=\"value\">\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"isRowSelected(value)\"\n                  (change)=\"onRowCheckboxChange($event,row,data.items)\" />\n                </ng-template>\n              </ngx-datatable-column>\n              <ngx-datatable-column [name]=\"'Site::Files:FileName' | abpLocalization\" prop=\"name\" [sortable]=\"false\"\n                [flexGrow]=\"4\">\n                <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                  <div class=\"file-name-cell\">\n                    <div class=\"file-name-content\">\n                      @if (getFileDirectoryPath(row.directoryId)) {\n                        <div class=\"file-directory-path\" [title]=\"getFileDirectoryPath(row.directoryId)\">\n                          <i class=\"fa fa-folder-o me-1\" aria-hidden=\"true\"></i>{{ getFileDirectoryPath(row.directoryId) }}\n                        </div>\n                      }\n                      <div>{{ value }}</div>\n                    </div>\n                    <div class=\"file-name-preview\" [attr.title]=\"row.name\">\n                      <site-file-preview [width]=\"'48px'\" [src]=\"row.url\" [resizeWidth]=\"96\" [resizeHeight]=\"96\"\n                        [name]=\"row.name\" [type]=\"row.mimeType\"></site-file-preview>\n                    </div>\n                  </div>\n                </ng-template>\n              </ngx-datatable-column>\n                <ngx-datatable-column [name]=\"'Site::Files:FileSize' | abpLocalization\" prop=\"size\" [flexGrow]=\"1.5\">\n                  <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                    {{(value|formatFileSize) }}\n                  </ng-template>\n                </ngx-datatable-column>\n                <ngx-datatable-column [name]=\"'Site::Files:CreationTime' | abpLocalization\" prop=\"creationTime\"\n                  [flexGrow]=\"2\">\n                  <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\n                    {{ value | date : 'short' }}\n                  </ng-template>\n                </ngx-datatable-column>\n                <ngx-datatable-column [name]=\"'AbpUi::Edit' | abpLocalization\" [flexGrow]=\"1\" [sortable]=\"false\">\n                  <ng-template let-row=\"row\" ngx-datatable-cell-template>\n                    <button type=\"button\" class=\"btn btn-sm btn-secondary p-0\" (click.stop)=\"onEditFileName(row)\"\n                      [attr.aria-label]=\"'AbpUi::Edit' | abpLocalization\">\n                      <i class=\"fas fa-edit p-2\" aria-hidden=\"true\"></i>\n                    </button>\n                  </ng-template>\n                </ngx-datatable-column>\n              </ngx-datatable>\n            </div>\n            @if (uploadingFiles.length > 0) {\n              <div\n                class=\"position-fixed bottom-0 end-0 shadow-lg file-status-modal   m-5\" style=\"border-radius: 10px\">\n                <div class=\"card p-1\">\n                  <div class=\"card-header d-flex align-items-center justify-content-between p-0 py-1 border-bottom\">\n                    <div>{{'Site::Files:UploadFiles' | abpLocalization}}</div>\n                    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click.stop)=\"closeFileStatusModal()\"></button>\n                  </div>\n                  <div class=\"card-body\">\n                    <table class=\"table\">\n                      <thead>\n                        <tr>\n                          <th scope=\"col\">{{'Site::Files:FileName' | abpLocalization}}</th>\n                          <th scope=\"col\">{{'Site::Files:FileSize' | abpLocalization}}</th>\n                          <th scope=\"col\"></th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (item of uploadingFiles; track item; let i = $index) {\n                          <tr>\n                            <th scope=\"row\">\n                              <div>{{ item.name }}</div>\n                              @if (item.size > sizeLimit) {\n                                <div class=\"form-text text-danger\">\n                                  {{'Site::Files:ExceedsMaximumSize' |\n                                  abpLocalization:(sizeLimit|formatFileSize)}}\n                                </div>\n                              }\n                            </th>\n                            <td>{{ item.size | formatFileSize }}</td>\n                            <td>\n                              @if (item.status === 1) {\n                                <i class=\"fas fa-check text-primary\"></i>\n                              }\n                              @if (item.status === 2) {\n                                <i class=\"fas fa-times-circle text-danger\"></i>\n                              }\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-outline-secondary\" abpClose>{{'AbpUi::Close' | abpLocalization}}</button>\n      <abp-button iconClass=\"fa fa-check\" [disabled]=\"selectedFiles.length === 0\" (click)=\"modalSave()\">\n        <span>{{'Site::Files:Confirm' | abpLocalization}}</span>\n        <span class=\"selected-file-count\" [class.d-none]=\"selectedFiles.length === 0\">\n          ({{selectedFiles.length}})\n        </span>\n      </abp-button>\n    </ng-template>\n  </abp-modal>\n\n  <abp-modal [(visible)]=\"fileNameModalOpen\" (visibleChange)=\"onFileNameModalVisibleChange($event)\">\n    <ng-template #abpHeader>\n      <h3>{{'AbpUi::Edit' | abpLocalization}} {{'Site::Files:FileName' | abpLocalization}}</h3>\n    </ng-template>\n    <ng-template #abpBody>\n      @if (fileNameForm) {\n        <form id=\"file-name-edit-form\" [formGroup]=\"fileNameForm\" (ngSubmit)=\"onSubmitFileName()\">\n          <div class=\"mb-3\">\n            <label class=\"form-label\" for=\"file-name-edit-input\">\n              {{'Site::Files:FileName' | abpLocalization}}\n            </label>\n            <input id=\"file-name-edit-input\" class=\"form-control\" type=\"text\" formControlName=\"fileName\" />\n          </div>\n        </form>\n      }\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancelFileNameEdit()\">\n        {{'AbpUi::Cancel' | abpLocalization}}\n      </button>\n      <button type=\"submit\" class=\"btn btn-primary\" form=\"file-name-edit-form\"\n        [disabled]=\"isRenaming || fileNameForm?.invalid\">\n        @if (isRenaming) {\n          <i class=\"fa-spin fa fa-spinner me-1\" aria-hidden=\"true\"></i>\n        }\n        {{'AbpUi::Save' | abpLocalization}}\n      </button>\n    </ng-template>\n  </abp-modal>\n\n  <abp-modal [(visible)]=\"moveModalOpen\" [busy]=\"moveModalBusy()\"\n    (visibleChange)=\"onMoveModalVisibleChange($event)\">\n    <ng-template #abpHeader>\n      <h3>{{'Site::Files:Move' | abpLocalization}}</h3>\n    </ng-template>\n      <ng-template #abpBody>\n      @if (moveModalOpen()) {\n        <div class=\"move-directory-tree\">\n          <site-file-directory-tree [theSelectedTreeNode]=\"moveTargetDirectoryNode\"\n            (nodeClick)=\"onMoveTargetDirectoryChange($event)\" [fileContainerName]=\"fileContainerName\">\n          </site-file-directory-tree>\n        </div>\n      }\n    </ng-template>\n    <ng-template #abpFooter>\n      <button type=\"button\" class=\"btn btn-secondary\" abpClose>\n        {{'AbpUi::Cancel' | abpLocalization}}\n      </button>\n      <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"moveModalBusy() || !moveTargetDirectoryNode\"\n        (click)=\"moveSelectedFiles()\">\n        @if (moveModalBusy()) {\n          <i class=\"fa-spin fa fa-spinner me-1\" aria-hidden=\"true\"></i>\n        }\n        {{'AbpUi::Save' | abpLocalization}}\n      </button>\n    </ng-template>\n  </abp-modal>\n", styles: ["::ng-deep .file-modal .container-height{height:100%;min-height:0}::ng-deep .file-modal .file-browser-content{display:flex;flex-direction:column;height:calc(100vh - 240px);min-height:0}::ng-deep .file-modal .file-table-container{flex:1 1 auto;min-height:0}::ng-deep .file-modal .file-status-modal{background:#fff}::ng-deep .file-modal .file-status-modal .card-body{max-height:300px;overflow-y:auto}::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.single-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-selection .datatable-body-row.active .datatable-row-group,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active,::ng-deep .file-modal .ngx-datatable.material.multi-click-selection .datatable-body-row.active .datatable-row-group{background-color:transparent!important}::ng-deep .file-modal .ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell,::ng-deep .file-modal .ngx-datatable.material .datatable-body .datatable-body-row .datatable-body-cell{overflow:initial;line-break:anywhere}::ng-deep .file-modal input[type=checkbox]{cursor:pointer}::ng-deep .file-modal .file-directory-path{color:var(--bs-secondary-color);font-size:.75rem;font-weight:400;line-height:1.25;margin-bottom:.25rem;overflow-wrap:anywhere}::ng-deep .file-modal .file-name-cell{display:flex;align-items:start;gap:.75rem;min-width:0}::ng-deep .file-modal .file-name-content{flex:1 1 auto;min-width:0}::ng-deep .file-modal .file-name-preview{flex:0 0 48px;width:48px;height:48px;display:flex;align-items:start;justify-content:center;overflow:hidden}::ng-deep .file-modal .file-name-preview ::ng-deep .image_box{width:48px!important;height:48px;display:flex;align-items:center;justify-content:center}::ng-deep .file-modal .file-name-preview ::ng-deep .image_box img{width:100%;height:100%;object-fit:cover}::ng-deep .file-modal .file-name-preview ::ng-deep .image_box a{line-height:1}::ng-deep .file-modal-window .modal-body{padding-bottom:.5rem!important}::ng-deep .file-modal-window .modal-footer{padding-top:.5rem}\n"] }]
+        }], ctorParameters: () => [{ type: FileAdminService }, { type: i2.ToasterService }, { type: i4.ListService }, { type: i2.ConfirmationService }, { type: i4.LocalizationService }], propDecorators: { fileTable: [{
+                type: ViewChild,
+                args: ['fileTable']
+            }], fileContainerName: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], limit: [{
+                type: Input
+            }], visible: [{
+                type: Input
+            }], visibleChange: [{
+                type: Output
+            }], selectFilefn: [{
+                type: Output
+            }], selectPickerFile: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @angular-eslint/component-selector */
+class FilePickerComponent {
+    constructor() {
+        this.multiple = false;
+        /** No default: a caller that never specifies a container has a configuration bug, not an "Images" one. */
+        this.fileContainerName = '';
+        this.selectFormFile = [];
+        this.selectedFileChange = new EventEmitter();
+        /** This component's single source of truth; also passed straight to the modal to reselect what's already picked. */
+        this.fileShowTable = [];
+        this.modalOpen = false;
+    }
+    ngOnChanges(changes) {
+        const selectFormFileChange = changes['selectFormFile'];
+        if (selectFormFileChange?.currentValue?.length > 0) {
+            this.fileShowTable = selectFormFileChange.currentValue;
+        }
+    }
+    onSelectFile(files) {
+        this.fileShowTable = structuredClone(files);
+        this.selectedFileChange.emit(this.fileShowTable);
+    }
+    deleteFileTableItem(index) {
+        this.fileShowTable.splice(index, 1);
+        this.selectedFileChange.emit(this.fileShowTable);
+    }
+    drop(event) {
+        moveItemInArray(this.fileShowTable, event.previousIndex, event.currentIndex);
+        this.selectedFileChange.emit(this.fileShowTable);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FilePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FilePickerComponent, isStandalone: true, selector: "site-file-picker", inputs: { multiple: "multiple", fileContainerName: "fileContainerName", selectFormFile: "selectFormFile" }, outputs: { selectedFileChange: "selectedFileChange" }, usesOnChanges: true, ngImport: i0, template: "@if (fileContainerName) {\n  <button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\n  (click.stop)=\"modalOpen = true\">{{'Site::Files:SelectFile' | abpLocalization}}</button>\n\n  <site-file-modal [(visible)]=\"modalOpen\" [selectPickerFile]=\"fileShowTable\" [multiple]=\"multiple\"\n  (selectFilefn)=\"onSelectFile($event)\" [fileContainerName]=\"fileContainerName\"></site-file-modal>\n  @if (fileShowTable.length>0) {\n    <table class=\"table\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n      <thead>\n        <tr>\n          <th scope=\"col\" style=\"width: 50px;\">{{'Site::Files:RowNumber' | abpLocalization}}</th>\n          <th scope=\"col\">{{'Site::Files:FileName' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 120px;\">{{'Site::Files:FileSize' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 50px;\"></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of fileShowTable; track item; let i = $index) {\n          <tr cdkDrag cdkDragLockAxis=\"y\" [cdkDragData]=\"item\">\n            <td>{{ i + 1 }}</td>\n            <td>\n                  <div class=\"d-flex\">\n                    <div class=\"flex-grow-1 file-name-drag-handle\" cdkDragHandle\n                      [title]=\"'Site::Files:DragFileNameToReorder' | abpLocalization\"\n                      [attr.aria-label]=\"'Site::Files:DragFileNameToReorder' | abpLocalization\">\n                      <div>{{ item.name }}</div>\n                    </div>\n                    <div class=\"\" [attr.title]=\"item.name\">\n                      <site-file-preview [width]=\"'60px'\" [src]=\"item.url\" [resizeWidth]=\"120\" [resizeHeight]=\"120\"\n                        [name]=\"item.name\" [type]=\"item.mimeType\"></site-file-preview>\n                    </div>\n                  </div>\n            </td>\n            <td>{{(item.size)|formatFileSize}}</td>\n            <td>\n              <button class=\"btn btn-sm btn-outline-secondary p-0\" (click.stop)=\"deleteFileTableItem(i)\">\n                <i class=\"fas fa-trash p-2\"></i>\n              </button>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    <div class=\"no-file-hint text-muted small mt-2\">{{ 'Site::Files:NoFileSelected' | abpLocalization }}</div>\n  }\n} @else {\n  <div class=\"alert alert-warning py-2 px-3 mb-0\">\n    {{ 'Site::Files:ContainerNotConfigured' | abpLocalization }}\n  </div>\n}\n", styles: [":host{display:block}.table{border-collapse:collapse;table-layout:fixed}.no-file-hint{clear:both}.file-name-drag-handle{cursor:grab;-webkit-user-select:none;user-select:none}.file-name-drag-handle:active{cursor:grabbing}\n"], dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2$1.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: FileModalComponent, selector: "site-file-modal", inputs: ["fileContainerName", "multiple", "limit", "visible", "selectPickerFile"], outputs: ["visibleChange", "selectFilefn"] }, { kind: "component", type: FilePreviewComponent, selector: "site-file-preview", inputs: ["width", "src", "type", "name", "className", "resizeWidth", "resizeHeight"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FilePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-picker', changeDetection: ChangeDetectionStrategy.Eager, imports: [
+                        CoreModule,
+                        DragDropModule,
+                        FileModalComponent,
+                        FilePreviewComponent,
+                        FormatFileSizePipe,
+                    ], template: "@if (fileContainerName) {\n  <button class=\"btn btn-sm btn-dark soft ms-2 float-end\" type=\"button\"\n  (click.stop)=\"modalOpen = true\">{{'Site::Files:SelectFile' | abpLocalization}}</button>\n\n  <site-file-modal [(visible)]=\"modalOpen\" [selectPickerFile]=\"fileShowTable\" [multiple]=\"multiple\"\n  (selectFilefn)=\"onSelectFile($event)\" [fileContainerName]=\"fileContainerName\"></site-file-modal>\n  @if (fileShowTable.length>0) {\n    <table class=\"table\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n      <thead>\n        <tr>\n          <th scope=\"col\" style=\"width: 50px;\">{{'Site::Files:RowNumber' | abpLocalization}}</th>\n          <th scope=\"col\">{{'Site::Files:FileName' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 120px;\">{{'Site::Files:FileSize' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 50px;\"></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of fileShowTable; track item; let i = $index) {\n          <tr cdkDrag cdkDragLockAxis=\"y\" [cdkDragData]=\"item\">\n            <td>{{ i + 1 }}</td>\n            <td>\n                  <div class=\"d-flex\">\n                    <div class=\"flex-grow-1 file-name-drag-handle\" cdkDragHandle\n                      [title]=\"'Site::Files:DragFileNameToReorder' | abpLocalization\"\n                      [attr.aria-label]=\"'Site::Files:DragFileNameToReorder' | abpLocalization\">\n                      <div>{{ item.name }}</div>\n                    </div>\n                    <div class=\"\" [attr.title]=\"item.name\">\n                      <site-file-preview [width]=\"'60px'\" [src]=\"item.url\" [resizeWidth]=\"120\" [resizeHeight]=\"120\"\n                        [name]=\"item.name\" [type]=\"item.mimeType\"></site-file-preview>\n                    </div>\n                  </div>\n            </td>\n            <td>{{(item.size)|formatFileSize}}</td>\n            <td>\n              <button class=\"btn btn-sm btn-outline-secondary p-0\" (click.stop)=\"deleteFileTableItem(i)\">\n                <i class=\"fas fa-trash p-2\"></i>\n              </button>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  } @else {\n    <div class=\"no-file-hint text-muted small mt-2\">{{ 'Site::Files:NoFileSelected' | abpLocalization }}</div>\n  }\n} @else {\n  <div class=\"alert alert-warning py-2 px-3 mb-0\">\n    {{ 'Site::Files:ContainerNotConfigured' | abpLocalization }}\n  </div>\n}\n", styles: [":host{display:block}.table{border-collapse:collapse;table-layout:fixed}.no-file-hint{clear:both}.file-name-drag-handle{cursor:grab;-webkit-user-select:none;user-select:none}.file-name-drag-handle:active{cursor:grabbing}\n"] }]
+        }], propDecorators: { multiple: [{
+                type: Input
+            }], fileContainerName: [{
+                type: Input
+            }], selectFormFile: [{
+                type: Input
+            }], selectedFileChange: [{
+                type: Output
+            }] } });
+
+/** Edits a file field's value: picks one or more files from Site's file library. */
+class FileControlComponent extends FieldTypeControlBase {
+    get multiple() {
+        return !!this.fieldValue?.field.configuration[FILE_FIELD_CONFIGURATION_NAMES.uploadFileMultiple];
+    }
+    get containerName() {
+        return this.fieldValue?.field.configuration[FILE_FIELD_CONFIGURATION_NAMES.fileContainerName] ?? '';
+    }
+    /** No fallback container: an unconfigured field is a misconfiguration to surface, not paper over. */
+    get isContainerConfigured() {
+        return this.containerName.length > 0;
+    }
+    configurationDefaults() {
+        return new FileFieldConfiguration();
+    }
+    createControl() {
+        const validators = [];
+        if (this.fieldValue.required) {
+            validators.push(Validators.required);
+        }
+        const stored = Array.isArray(this.selectedValue) ? this.selectedValue : [];
+        return this.fb.control(stored, validators);
+    }
+    onSelectedFileChange(files) {
+        this.fieldControl?.setValue(files);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FileControlComponent, isStandalone: true, selector: "site-file-control", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"entityForm\">\n  <div [formGroupName]=\"parentField\">\n    <label class=\"form-label\" *ngIf=\"fieldValue.field.displayName\">\n      {{ fieldValue.field.displayName }}\n    </label>\n    @if (isContainerConfigured) {\n      <site-file-picker\n        [selectFormFile]=\"fieldControl?.value\"\n        [multiple]=\"multiple\"\n        [fileContainerName]=\"containerName\"\n        (selectedFileChange)=\"onSelectedFileChange($event)\"\n      />\n    } @else {\n      <div class=\"alert alert-warning py-2 px-3 mb-0\">\n        {{ 'FlexFieldsSite::File:ContainerNotConfigured' | abpLocalization }}\n      </div>\n    }\n    <small class=\"form-text text-muted d-block\" *ngIf=\"fieldValue.field.description\">\n      {{ fieldValue.field.description }}\n    </small>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FilePickerComponent, selector: "site-file-picker", inputs: ["multiple", "fileContainerName", "selectFormFile"], outputs: ["selectedFileChange"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-control', changeDetection: ChangeDetectionStrategy.Eager, imports: [CommonModule, CoreModule, ReactiveFormsModule, FilePickerComponent], template: "<div [formGroup]=\"entityForm\">\n  <div [formGroupName]=\"parentField\">\n    <label class=\"form-label\" *ngIf=\"fieldValue.field.displayName\">\n      {{ fieldValue.field.displayName }}\n    </label>\n    @if (isContainerConfigured) {\n      <site-file-picker\n        [selectFormFile]=\"fieldControl?.value\"\n        [multiple]=\"multiple\"\n        [fileContainerName]=\"containerName\"\n        (selectedFileChange)=\"onSelectedFileChange($event)\"\n      />\n    } @else {\n      <div class=\"alert alert-warning py-2 px-3 mb-0\">\n        {{ 'FlexFieldsSite::File:ContainerNotConfigured' | abpLocalization }}\n      </div>\n    }\n    <small class=\"form-text text-muted d-block\" *ngIf=\"fieldValue.field.description\">\n      {{ fieldValue.field.description }}\n    </small>\n  </div>\n</div>\n" }]
+        }] });
+
+/** Displays a file field's value read-only: the first file's preview, plus a count. */
+class FileViewComponent {
+    constructor() {
+        /** Renders bare, without the label wrapper, for use inside a table cell. */
+        this.showInList = false;
+        this.value = '';
+    }
+    get files() {
+        return Array.isArray(this.value) ? this.value : [];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FileViewComponent, isStandalone: true, selector: "site-file-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if (showInList) {\n  @if (files.length > 0) {\n    <div class=\"d-flex align-items-center\">\n      <site-file-preview\n        width=\"60px\"\n        className=\"overflow-hidden me-1\"\n        [src]=\"files[0].url ?? ''\"\n        [resizeWidth]=\"120\"\n        [resizeHeight]=\"120\"\n        [name]=\"files[0].name ?? ''\"\n        [type]=\"files[0].mimeType ?? ''\"\n      />\n      @if (files.length - 1 > 0) {\n        <span>+{{ files.length - 1 }}</span>\n      }\n    </div>\n  } @else {\n    <span>&mdash;</span>\n  }\n} @else {\n  <div class=\"mb-3\">\n    @if (fields?.field?.displayName) {\n      <label class=\"form-label\">{{ fields?.field?.displayName }}</label>\n    }\n    @if (files.length > 0) {\n      <div class=\"d-flex align-items-center\">\n        <site-file-preview\n          width=\"60px\"\n          className=\"overflow-hidden me-1\"\n          [src]=\"files[0].url ?? ''\"\n          [resizeWidth]=\"120\"\n          [resizeHeight]=\"120\"\n          [name]=\"files[0].name ?? ''\"\n          [type]=\"files[0].mimeType ?? ''\"\n        />\n        @if (files.length - 1 > 0) {\n          <span>+{{ files.length - 1 }}</span>\n        }\n      </div>\n    } @else {\n      <div>&mdash;</div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "component", type: FilePreviewComponent, selector: "site-file-preview", inputs: ["width", "src", "type", "name", "className", "resizeWidth", "resizeHeight"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-view', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, FilePreviewComponent], template: "@if (showInList) {\n  @if (files.length > 0) {\n    <div class=\"d-flex align-items-center\">\n      <site-file-preview\n        width=\"60px\"\n        className=\"overflow-hidden me-1\"\n        [src]=\"files[0].url ?? ''\"\n        [resizeWidth]=\"120\"\n        [resizeHeight]=\"120\"\n        [name]=\"files[0].name ?? ''\"\n        [type]=\"files[0].mimeType ?? ''\"\n      />\n      @if (files.length - 1 > 0) {\n        <span>+{{ files.length - 1 }}</span>\n      }\n    </div>\n  } @else {\n    <span>&mdash;</span>\n  }\n} @else {\n  <div class=\"mb-3\">\n    @if (fields?.field?.displayName) {\n      <label class=\"form-label\">{{ fields?.field?.displayName }}</label>\n    }\n    @if (files.length > 0) {\n      <div class=\"d-flex align-items-center\">\n        <site-file-preview\n          width=\"60px\"\n          className=\"overflow-hidden me-1\"\n          [src]=\"files[0].url ?? ''\"\n          [resizeWidth]=\"120\"\n          [resizeHeight]=\"120\"\n          [name]=\"files[0].name ?? ''\"\n          [type]=\"files[0].mimeType ?? ''\"\n        />\n        @if (files.length - 1 > 0) {\n          <span>+{{ files.length - 1 }}</span>\n        }\n      </div>\n    } @else {\n      <div>&mdash;</div>\n    }\n  </div>\n}\n" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+/**
+ * The registration key. **Persisted data** (every field definition of this type, Matrix block
+ * configurations included) - unchanged from when the field type was `Dignite.Abp.FlexFields`'; must equal
+ * the server's `FileFieldType.ControlName`.
+ */
+const FILE_FIELD_TYPE_NAME = 'FileExplorer';
+/**
+ * The file field type: picks one or more files from Site's file library. Registered by `provideSite()`
+ * like `Seo` and `Content` - the client has no equivalent of the server's DI discovery.
+ *
+ * **No search component.** `FileFieldType.IndexValueType` is null - the value is an array of file
+ * objects with no typed index column to project into.
+ */
+const FILE_FIELD_TYPE = {
+    name: FILE_FIELD_TYPE_NAME,
+    displayNameKey: 'FlexFieldsSite::FieldType:File',
+    configComponent: FileConfigComponent,
+    controlComponent: FileControlComponent,
+    viewComponent: FileViewComponent,
+};
+
+/**
+ * Configuration of a `Seo` field, shaped for `FormBuilder.group()`. Mirrors `SeoConfiguration`
+ * (`src/Dignite.Site.Domain/Seo/SeoConfiguration.cs`).
+ *
+ * The property names are the **stored** configuration keys, not a naming choice.
+ *
+ * Both limits are **advisory**. `SeoFieldType.Validate` does not reject an over-length value, because a
+ * search engine truncates an over-long title or description rather than rejecting it. They are a
+ * threshold for an editing UI (or AI-generated content) to aim for, so the control renders them as a
+ * counter and never as a `Validators.maxLength`.
+ */
+class SeoConfiguration {
+    constructor() {
+        /** 60 - Google's practical truncation point for a search result title. */
+        this['Seo.MetaTitleCharLimit'] = [60];
+        /** 160 - the conventional SERP snippet length. */
+        this['Seo.MetaDescriptionCharLimit'] = [160];
+    }
+}
+
+/**
+ * Designer-side editor for a `Seo` field's configuration: the two advisory character limits.
+ *
+ * They are thresholds the value editor counts against, not validation - see {@link SeoConfiguration}.
+ */
+class SeoConfigComponent extends FieldTypeConfigBase {
+    configurationDefaults() {
+        return new SeoConfiguration();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SeoConfigComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.2", type: SeoConfigComponent, isStandalone: true, selector: "site-seo-config", usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"formEntity\">\n  <div formGroupName=\"configuration\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Seo:MetaTitleCharLimit' | abpLocalization }}</label>\n      <input type=\"number\" class=\"form-control\" formControlName=\"Seo.MetaTitleCharLimit\" min=\"1\" />\n    </div>\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Seo:MetaDescriptionCharLimit' | abpLocalization }}</label>\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        formControlName=\"Seo.MetaDescriptionCharLimit\"\n        min=\"1\"\n      />\n    </div>\n    <div class=\"alert alert-light border py-2 mb-0\">\n      <small class=\"text-muted\">{{ 'FlexFieldsSite::Seo:CharLimitAdvisoryHint' | abpLocalization }}</small>\n    </div>\n  </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number]:not([ngNoCva])[formControlName],input[type=number]:not([ngNoCva])[formControl],input[type=number]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SeoConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-seo-config', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, ReactiveFormsModule], template: "<form [formGroup]=\"formEntity\">\n  <div formGroupName=\"configuration\">\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Seo:MetaTitleCharLimit' | abpLocalization }}</label>\n      <input type=\"number\" class=\"form-control\" formControlName=\"Seo.MetaTitleCharLimit\" min=\"1\" />\n    </div>\n    <div class=\"mb-3\">\n      <label class=\"form-label\">{{ 'FlexFieldsSite::Seo:MetaDescriptionCharLimit' | abpLocalization }}</label>\n      <input\n        type=\"number\"\n        class=\"form-control\"\n        formControlName=\"Seo.MetaDescriptionCharLimit\"\n        min=\"1\"\n      />\n    </div>\n    <div class=\"alert alert-light border py-2 mb-0\">\n      <small class=\"text-muted\">{{ 'FlexFieldsSite::Seo:CharLimitAdvisoryHint' | abpLocalization }}</small>\n    </div>\n  </div>\n</form>\n" }]
+        }] });
+
+/**
+ * Where the share image is picked from and the size it is shared at (GitHub issue #72).
+ *
+ * The container mirrors `SiteFileContainerNames.Images` on the server - fixed, not a field setting: the
+ * share image is always a picture, and `images` is the container whose policy is pictures only.
+ * The size mirrors `OpenGraphConsts`: the server emits a file-library `og:image` cropped to exactly
+ * this, so previewing it at the same crop shows the editor what a shared link will look like.
+ */
+const OG_IMAGE_CONTAINER_NAME = 'images';
+const OG_IMAGE_WIDTH = 1200;
+const OG_IMAGE_HEIGHT = 630;
+
+/**
+ * Edits the value of a `Seo` field.
+ *
+ * Unlike every built-in field type, this binds a **`FormGroup`** rather than a single control: the
+ * value is a composite object, and the group's shape is exactly `SeoFieldValue`, so what the form
+ * produces round-trips back to the server unchanged.
+ *
+ * **No sub-field is individually required, even when the field usage is.** The server's
+ * `SeoFieldType.Validate` only rejects a *missing bundle*; SEO fields are supplementary and the
+ * platform falls back to defaults for whatever is left blank (总体设计 §5.3). Since a `FormGroup`
+ * always produces an object, a required Seo field is satisfied by being rendered at all - adding
+ * `Validators.required` to the parts would enforce something the server does not.
+ *
+ * **The share image is picked, not typed** (GitHub issue #72): the file library's modal, fixed to the
+ * `images` container, uploads or selects one file and its `url` is what `ogImage` stores - still a
+ * plain string, so a value an MCP client wrote (an external address included) shows and can be replaced
+ * or removed the same way.
+ */
+class SeoControlComponent extends FieldTypeControlBase {
+    constructor() {
+        super(...arguments);
+        this.ogImageContainerName = OG_IMAGE_CONTAINER_NAME;
+        this.ogImageWidth = OG_IMAGE_WIDTH;
+        this.ogImageHeight = OG_IMAGE_HEIGHT;
+        this.ogImagePickerOpen = false;
+    }
+    configurationDefaults() {
+        return new SeoConfiguration();
+    }
+    /**
+     * Untyped on purpose. `FieldTypeControlBase.createControl` is declared to return
+     * `AbstractControl<any, any, any>`, and a typed `FormGroup<{...}>` is not assignable to it - typed
+     * forms fix `TRawValue` to the group's own shape. Every built-in field type returns a single
+     * control, so this is the first one to hit it.
+     */
+    createControl() {
+        const value = this.currentValue();
+        return new UntypedFormGroup({
+            metaTitle: new UntypedFormControl(value.metaTitle ?? ''),
+            metaDescription: new UntypedFormControl(value.metaDescription ?? ''),
+            ogImage: new UntypedFormControl(value.ogImage ?? ''),
+            noIndex: new UntypedFormControl(value.noIndex ?? false),
+        });
+    }
+    /** The bound group, for the template's counters. */
+    get seoGroup() {
+        return this.fieldControl;
+    }
+    /** The stored share image address, or '' when there is none. */
+    get ogImage() {
+        return String(this.seoGroup?.get('ogImage')?.value ?? '');
+    }
+    onOgImagePicked(files) {
+        const url = files[0]?.url;
+        if (url) {
+            this.setOgImage(url);
+        }
+    }
+    removeOgImage() {
+        this.setOgImage('');
+    }
+    get metaTitleLength() {
+        return String(this.seoGroup?.get('metaTitle')?.value ?? '').length;
+    }
+    get metaDescriptionLength() {
+        return String(this.seoGroup?.get('metaDescription')?.value ?? '').length;
+    }
+    get metaTitleCharLimit() {
+        return Number(this.fieldValue?.field.configuration['Seo.MetaTitleCharLimit'] ?? 60);
+    }
+    get metaDescriptionCharLimit() {
+        return Number(this.fieldValue?.field.configuration['Seo.MetaDescriptionCharLimit'] ?? 160);
+    }
+    setOgImage(url) {
+        const control = this.seoGroup?.get('ogImage');
+        control?.setValue(url);
+        control?.markAsDirty();
+    }
+    /**
+     * A fresh value is a live object; one that has round-tripped through storage arrives as parsed JSON.
+     * Anything else - the base class seeds `''` when there is no value - means "nothing stored yet".
+     */
+    currentValue() {
+        const value = this.selectedValue;
+        return value && typeof value === 'object' ? value : {};
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SeoControlComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: SeoControlComponent, isStandalone: true, selector: "site-seo-control", usesInheritance: true, ngImport: i0, template: "<div [formGroup]=\"entityForm\">\n  <div [formGroupName]=\"parentField\">\n    <fieldset class=\"mb-3\" [formGroupName]=\"fieldValue.field.name\">\n      <legend class=\"form-label h6\" *ngIf=\"fieldValue.field.displayName\">\n        {{ fieldValue.field.displayName }}\n      </legend>\n      <small class=\"form-text text-muted d-block mb-2\" *ngIf=\"fieldValue.field.description\">\n        {{ fieldValue.field.description }}\n      </small>\n\n      <div class=\"mb-3\">\n        <label class=\"form-label\" [for]=\"fieldValue.field.name + '-meta-title'\">\n          {{ 'FlexFieldsSite::Seo:MetaTitle' | abpLocalization }}\n        </label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          formControlName=\"metaTitle\"\n          [id]=\"fieldValue.field.name + '-meta-title'\"\n        />\n        <small\n          class=\"form-text d-block\"\n          [class.text-muted]=\"metaTitleLength <= metaTitleCharLimit\"\n          [class.text-warning]=\"metaTitleLength > metaTitleCharLimit\"\n        >\n          {{ metaTitleLength }} / {{ metaTitleCharLimit }}\n          <ng-container *ngIf=\"metaTitleLength > metaTitleCharLimit\">\n            \u2014 {{ 'FlexFieldsSite::Seo:OverCharLimitHint' | abpLocalization }}\n          </ng-container>\n        </small>\n      </div>\n\n      <div class=\"mb-3\">\n        <label class=\"form-label\" [for]=\"fieldValue.field.name + '-meta-description'\">\n          {{ 'FlexFieldsSite::Seo:MetaDescription' | abpLocalization }}\n        </label>\n        <textarea\n          class=\"form-control\"\n          formControlName=\"metaDescription\"\n          rows=\"3\"\n          [id]=\"fieldValue.field.name + '-meta-description'\"\n        ></textarea>\n        <small\n          class=\"form-text d-block\"\n          [class.text-muted]=\"metaDescriptionLength <= metaDescriptionCharLimit\"\n          [class.text-warning]=\"metaDescriptionLength > metaDescriptionCharLimit\"\n        >\n          {{ metaDescriptionLength }} / {{ metaDescriptionCharLimit }}\n          <ng-container *ngIf=\"metaDescriptionLength > metaDescriptionCharLimit\">\n            \u2014 {{ 'FlexFieldsSite::Seo:OverCharLimitHint' | abpLocalization }}\n          </ng-container>\n        </small>\n      </div>\n\n      <div class=\"mb-3\">\n        <label class=\"form-label d-block\">\n          {{ 'FlexFieldsSite::Seo:OgImage' | abpLocalization }}\n        </label>\n        @if (ogImage) {\n          <div class=\"mb-2\">\n            <site-file-preview\n              width=\"240px\"\n              type=\"image/*\"\n              [src]=\"ogImage\"\n              [name]=\"'FlexFieldsSite::Seo:OgImage' | abpLocalization\"\n              [resizeWidth]=\"ogImageWidth\"\n              [resizeHeight]=\"ogImageHeight\"\n            ></site-file-preview>\n          </div>\n        }\n        <div>\n          <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"ogImagePickerOpen = true\">\n            <i class=\"fa fa-image me-1\" aria-hidden=\"true\"></i>\n            {{ 'FlexFieldsSite::Seo:SelectOgImage' | abpLocalization }}\n          </button>\n          @if (ogImage) {\n            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary ms-2\" (click)=\"removeOgImage()\">\n              <i class=\"fa fa-trash me-1\" aria-hidden=\"true\"></i>\n              {{ 'FlexFieldsSite::Seo:RemoveOgImage' | abpLocalization }}\n            </button>\n          }\n        </div>\n        <small class=\"form-text text-muted d-block\">\n          {{ 'FlexFieldsSite::Seo:OgImageHint' | abpLocalization }}\n        </small>\n        <site-file-modal\n          [(visible)]=\"ogImagePickerOpen\"\n          [multiple]=\"false\"\n          [fileContainerName]=\"ogImageContainerName\"\n          (selectFilefn)=\"onOgImagePicked($event)\"\n        ></site-file-modal>\n      </div>\n\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          formControlName=\"noIndex\"\n          [id]=\"fieldValue.field.name + '-no-index'\"\n        />\n        <label class=\"form-check-label\" [for]=\"fieldValue.field.name + '-no-index'\">\n          {{ 'FlexFieldsSite::Seo:NoIndex' | abpLocalization }}\n        </label>\n        <small class=\"form-text text-muted d-block\">\n          {{ 'FlexFieldsSite::Seo:NoIndexHint' | abpLocalization }}\n        </small>\n      </div>\n    </fieldset>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.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$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FileModalComponent, selector: "site-file-modal", inputs: ["fileContainerName", "multiple", "limit", "visible", "selectPickerFile"], outputs: ["visibleChange", "selectFilefn"] }, { kind: "component", type: FilePreviewComponent, selector: "site-file-preview", inputs: ["width", "src", "type", "name", "className", "resizeWidth", "resizeHeight"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SeoControlComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-seo-control', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, ReactiveFormsModule, FileModalComponent, FilePreviewComponent], template: "<div [formGroup]=\"entityForm\">\n  <div [formGroupName]=\"parentField\">\n    <fieldset class=\"mb-3\" [formGroupName]=\"fieldValue.field.name\">\n      <legend class=\"form-label h6\" *ngIf=\"fieldValue.field.displayName\">\n        {{ fieldValue.field.displayName }}\n      </legend>\n      <small class=\"form-text text-muted d-block mb-2\" *ngIf=\"fieldValue.field.description\">\n        {{ fieldValue.field.description }}\n      </small>\n\n      <div class=\"mb-3\">\n        <label class=\"form-label\" [for]=\"fieldValue.field.name + '-meta-title'\">\n          {{ 'FlexFieldsSite::Seo:MetaTitle' | abpLocalization }}\n        </label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          formControlName=\"metaTitle\"\n          [id]=\"fieldValue.field.name + '-meta-title'\"\n        />\n        <small\n          class=\"form-text d-block\"\n          [class.text-muted]=\"metaTitleLength <= metaTitleCharLimit\"\n          [class.text-warning]=\"metaTitleLength > metaTitleCharLimit\"\n        >\n          {{ metaTitleLength }} / {{ metaTitleCharLimit }}\n          <ng-container *ngIf=\"metaTitleLength > metaTitleCharLimit\">\n            \u2014 {{ 'FlexFieldsSite::Seo:OverCharLimitHint' | abpLocalization }}\n          </ng-container>\n        </small>\n      </div>\n\n      <div class=\"mb-3\">\n        <label class=\"form-label\" [for]=\"fieldValue.field.name + '-meta-description'\">\n          {{ 'FlexFieldsSite::Seo:MetaDescription' | abpLocalization }}\n        </label>\n        <textarea\n          class=\"form-control\"\n          formControlName=\"metaDescription\"\n          rows=\"3\"\n          [id]=\"fieldValue.field.name + '-meta-description'\"\n        ></textarea>\n        <small\n          class=\"form-text d-block\"\n          [class.text-muted]=\"metaDescriptionLength <= metaDescriptionCharLimit\"\n          [class.text-warning]=\"metaDescriptionLength > metaDescriptionCharLimit\"\n        >\n          {{ metaDescriptionLength }} / {{ metaDescriptionCharLimit }}\n          <ng-container *ngIf=\"metaDescriptionLength > metaDescriptionCharLimit\">\n            \u2014 {{ 'FlexFieldsSite::Seo:OverCharLimitHint' | abpLocalization }}\n          </ng-container>\n        </small>\n      </div>\n\n      <div class=\"mb-3\">\n        <label class=\"form-label d-block\">\n          {{ 'FlexFieldsSite::Seo:OgImage' | abpLocalization }}\n        </label>\n        @if (ogImage) {\n          <div class=\"mb-2\">\n            <site-file-preview\n              width=\"240px\"\n              type=\"image/*\"\n              [src]=\"ogImage\"\n              [name]=\"'FlexFieldsSite::Seo:OgImage' | abpLocalization\"\n              [resizeWidth]=\"ogImageWidth\"\n              [resizeHeight]=\"ogImageHeight\"\n            ></site-file-preview>\n          </div>\n        }\n        <div>\n          <button type=\"button\" class=\"btn btn-sm btn-outline-primary\" (click)=\"ogImagePickerOpen = true\">\n            <i class=\"fa fa-image me-1\" aria-hidden=\"true\"></i>\n            {{ 'FlexFieldsSite::Seo:SelectOgImage' | abpLocalization }}\n          </button>\n          @if (ogImage) {\n            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary ms-2\" (click)=\"removeOgImage()\">\n              <i class=\"fa fa-trash me-1\" aria-hidden=\"true\"></i>\n              {{ 'FlexFieldsSite::Seo:RemoveOgImage' | abpLocalization }}\n            </button>\n          }\n        </div>\n        <small class=\"form-text text-muted d-block\">\n          {{ 'FlexFieldsSite::Seo:OgImageHint' | abpLocalization }}\n        </small>\n        <site-file-modal\n          [(visible)]=\"ogImagePickerOpen\"\n          [multiple]=\"false\"\n          [fileContainerName]=\"ogImageContainerName\"\n          (selectFilefn)=\"onOgImagePicked($event)\"\n        ></site-file-modal>\n      </div>\n\n      <div class=\"form-check\">\n        <input\n          type=\"checkbox\"\n          class=\"form-check-input\"\n          formControlName=\"noIndex\"\n          [id]=\"fieldValue.field.name + '-no-index'\"\n        />\n        <label class=\"form-check-label\" [for]=\"fieldValue.field.name + '-no-index'\">\n          {{ 'FlexFieldsSite::Seo:NoIndex' | abpLocalization }}\n        </label>\n        <small class=\"form-text text-muted d-block\">\n          {{ 'FlexFieldsSite::Seo:NoIndexHint' | abpLocalization }}\n        </small>\n      </div>\n    </fieldset>\n  </div>\n</div>\n" }]
+        }] });
+
+/**
+ * Displays the value of a `Seo` field read-only.
+ *
+ * In a list cell there is room for one thing, so it shows the meta title and flags `noindex` - the one
+ * part of the bundle with a platform-recognized consequence.
+ */
+class SeoViewComponent {
+    constructor() {
+        this.ogImageWidth = OG_IMAGE_WIDTH;
+        this.ogImageHeight = OG_IMAGE_HEIGHT;
+        /** Renders bare, without the label wrapper, for use inside a table cell. */
+        this.showInList = false;
+        this.value = '';
+    }
+    get seo() {
+        return this.value && typeof this.value === 'object' ? this.value : {};
+    }
+    get hasValue() {
+        const { metaTitle, metaDescription, ogImage, noIndex } = this.seo;
+        return !!(metaTitle || metaDescription || ogImage || noIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SeoViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: SeoViewComponent, isStandalone: true, selector: "site-seo-view", inputs: { showInList: "showInList", fields: "fields", type: "type", value: "value" }, ngImport: i0, template: "@if (showInList) {\n  @if (hasValue) {\n    <span>{{ seo.metaTitle || ('FlexFieldsSite::Seo:NoMetaTitle' | abpLocalization) }}</span>\n    @if (seo.noIndex) {\n      <span class=\"badge bg-warning text-dark ms-1\">{{ 'FlexFieldsSite::Seo:NoIndex' | abpLocalization }}</span>\n    }\n  } @else {\n    ---\n  }\n} @else {\n  <div class=\"mb-3\">\n    <label class=\"form-label\" *ngIf=\"fields?.field?.displayName\">\n      {{ fields.field.displayName }}\n    </label>\n    <dl class=\"row mb-0\">\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:MetaTitle' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">{{ seo.metaTitle || '---' }}</dd>\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:MetaDescription' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">{{ seo.metaDescription || '---' }}</dd>\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:OgImage' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">\n        @if (seo.ogImage) {\n          <site-file-preview\n            width=\"160px\"\n            type=\"image/*\"\n            [src]=\"seo.ogImage\"\n            [name]=\"'FlexFieldsSite::Seo:OgImage' | abpLocalization\"\n            [resizeWidth]=\"ogImageWidth\"\n            [resizeHeight]=\"ogImageHeight\"\n          ></site-file-preview>\n        } @else {\n          ---\n        }\n      </dd>\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:NoIndex' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">\n        {{ (seo.noIndex ? 'AbpUi::Yes' : 'AbpUi::No') | abpLocalization }}\n      </dd>\n    </dl>\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FilePreviewComponent, selector: "site-file-preview", inputs: ["width", "src", "type", "name", "className", "resizeWidth", "resizeHeight"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SeoViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-seo-view', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, FilePreviewComponent], template: "@if (showInList) {\n  @if (hasValue) {\n    <span>{{ seo.metaTitle || ('FlexFieldsSite::Seo:NoMetaTitle' | abpLocalization) }}</span>\n    @if (seo.noIndex) {\n      <span class=\"badge bg-warning text-dark ms-1\">{{ 'FlexFieldsSite::Seo:NoIndex' | abpLocalization }}</span>\n    }\n  } @else {\n    ---\n  }\n} @else {\n  <div class=\"mb-3\">\n    <label class=\"form-label\" *ngIf=\"fields?.field?.displayName\">\n      {{ fields.field.displayName }}\n    </label>\n    <dl class=\"row mb-0\">\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:MetaTitle' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">{{ seo.metaTitle || '---' }}</dd>\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:MetaDescription' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">{{ seo.metaDescription || '---' }}</dd>\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:OgImage' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">\n        @if (seo.ogImage) {\n          <site-file-preview\n            width=\"160px\"\n            type=\"image/*\"\n            [src]=\"seo.ogImage\"\n            [name]=\"'FlexFieldsSite::Seo:OgImage' | abpLocalization\"\n            [resizeWidth]=\"ogImageWidth\"\n            [resizeHeight]=\"ogImageHeight\"\n          ></site-file-preview>\n        } @else {\n          ---\n        }\n      </dd>\n      <dt class=\"col-sm-4\">{{ 'FlexFieldsSite::Seo:NoIndex' | abpLocalization }}</dt>\n      <dd class=\"col-sm-8\">\n        {{ (seo.noIndex ? 'AbpUi::Yes' : 'AbpUi::No') | abpLocalization }}\n      </dd>\n    </dl>\n  </div>\n}\n" }]
+        }], propDecorators: { showInList: [{
+                type: Input
+            }], fields: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
+
+/** The registration key. Must equal `SeoFieldNames.FieldTypeName` on the server. */
+const SEO_FIELD_TYPE_NAME = 'Seo';
+/**
+ * Site's seventh field type, alongside the six the flex-fields library ships. The server registers
+ * `SeoFieldType` through DI automatically; the client has no equivalent discovery, so it is registered
+ * here and wired in through `provideSite()`.
+ *
+ * This is not optional wiring: `seo` is a platform-preset seeded field, so a fresh install already has
+ * one. Without this registration `FieldTypeResolver.get('Seo')` throws and both the field designer and
+ * the content editor break on first use.
+ *
+ * **No search component.** `SeoFieldType.IndexValueType` is null - the value is a composite object with
+ * no typed index column to project into - so a `Seo` field can never be searched and must not offer a
+ * filter control.
+ *
+ * `displayNameKey` reads `FlexFieldsSite::...`, not `Site::...`: `SeoFieldType` moved from
+ * `Dignite.Site.Domain` into `Dignite.FlexFields.Site` alongside Content/Matrix/Table (GitHub issue
+ * #49), and its `LocalizationResource` moved with it.
+ */
+const SEO_FIELD_TYPE = {
+    name: SEO_FIELD_TYPE_NAME,
+    displayNameKey: 'FlexFieldsSite::FieldType:Seo',
+    configComponent: SeoConfigComponent,
+    controlComponent: SeoControlComponent,
+    viewComponent: SeoViewComponent,
+};
+
+/**
+ * Creates a short-lived object URL for a Blob so previews can reference the
+ * browser-managed blob instead of holding a base64 copy in memory. Callers own
+ * the returned URL and must revoke it (URL.revokeObjectURL) when it is no longer
+ * needed to avoid leaking the underlying blob.
+ */
+class ObjectUrlService {
+    get(file) {
+        return URL.createObjectURL(file);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ObjectUrlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ObjectUrlService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ObjectUrlService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/* eslint-disable @angular-eslint/component-selector */
+class FileUploadComponent {
+    constructor(formatFileSizePipe, objectUrlService, fileAdminService) {
+        this.formatFileSizePipe = formatFileSizePipe;
+        this.objectUrlService = objectUrlService;
+        this.fileAdminService = fileAdminService;
+        this._fileContainerName = '';
+        this.multiple = true;
+        this.fileDataChange = new EventEmitter();
+        /**
+         * A signal, not a plain field: the container's real limit arrives in an HTTP callback, and a plain-field
+         * write there never marks a host's OnPush ancestors for check, so the "exceeds the maximum size" hint
+         * would keep showing the pre-fetch 1MB default until an unrelated event.
+         */
+        this.sizeLimit = signal(1048576, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sizeLimit" }] : /* istanbul ignore next */ []));
+        this.filesTableData = [];
+        this.previewObjectUrls = new Set();
+        this.deletedUploadedFiles = [];
+    }
+    /**
+     * No default: an unconfigured container is not silently treated as any particular one - the
+     * upload input just doesn't render until a container is set (see the template).
+     */
+    set fileContainerName(v) {
+        this._fileContainerName = v ?? '';
+        if (!v)
+            return;
+        // Reflects the container's actual server-side limit once known, replacing the pre-fetch
+        // default of 1MB below.
+        this.fileAdminService.getContainerConfiguration(v).subscribe(res => {
+            if (res?.maxBlobSize > 0) {
+                this.sizeLimit.set(res.maxBlobSize);
+            }
+        });
+    }
+    get fileContainerName() {
+        return this._fileContainerName;
+    }
+    /** Already-uploaded files to show pre-populated in the table, e.g. when editing an existing record. */
+    set fileData(files) {
+        if (files?.length > 0) {
+            void this.addFiles(files);
+        }
+    }
+    set limit(v) {
+        this.sizeLimit.set(v);
+    }
+    async onFileInputChange(event) {
+        const input = event.target;
+        await this.addFiles(Array.from(input.files ?? []));
+        this.emitChange();
+    }
+    deleteFileTableItem(index, item) {
+        this.filesTableData.splice(index, 1);
+        this.releasePreviewUrl(item.src);
+        if (item.id) {
+            this.deletedUploadedFiles.push(item);
+        }
+        this.emitChange();
+    }
+    async addFiles(files) {
+        for (const file of files) {
+            file.fileSize = this.formatFileSizePipe.transform(file.size);
+            // Use a browser-managed object URL instead of retaining a base64 copy in memory.
+            if (!file.src && file instanceof Blob) {
+                const objectUrl = this.objectUrlService.get(file);
+                file.src = objectUrl;
+                this.previewObjectUrls.add(objectUrl);
+            }
+        }
+        this.filesTableData.push(...files);
+    }
+    emitChange() {
+        const theFilesToBeUploaded = this.filesTableData.filter(item => !item.id);
+        const isSubmit = !this.filesTableData.some(item => item.size > this.sizeLimit());
+        this.fileDataChange.emit({
+            theFilesToBeUploaded,
+            deleteTheUploadedFiles: this.deletedUploadedFiles,
+            isSubmit,
+        });
+    }
+    ngOnDestroy() {
+        for (const objectUrl of this.previewObjectUrls) {
+            URL.revokeObjectURL(objectUrl);
+        }
+        this.previewObjectUrls.clear();
+    }
+    releasePreviewUrl(url) {
+        if (!url || !this.previewObjectUrls.delete(url)) {
+            return;
+        }
+        URL.revokeObjectURL(url);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileUploadComponent, deps: [{ token: FormatFileSizePipe }, { token: ObjectUrlService }, { token: FileAdminService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: FileUploadComponent, isStandalone: true, selector: "site-file-upload", inputs: { fileContainerName: "fileContainerName", multiple: "multiple", fileData: "fileData", limit: "limit" }, outputs: { fileDataChange: "fileDataChange" }, providers: [FormatFileSizePipe], viewQueries: [{ propertyName: "fileUploadInput", first: true, predicate: ["fileUploadInput"], descendants: true, static: true }], ngImport: i0, template: "@if (fileContainerName) {\n  <div class=\"input-group mb-3\">\n    <input type=\"file\" class=\"form-control\" #fileUploadInput [multiple]=\"multiple\" (change)=\"onFileInputChange($event)\">\n  </div>\n\n  @if (filesTableData.length>0) {\n    <table class=\"table\">\n      <thead>\n        <tr>\n          <th scope=\"col\">{{'Site::Files:FileName' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 120px;\">{{'Site::Files:FileSize' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 50px;\"></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of filesTableData; track item; let i = $index) {\n          <tr>\n            <td>\n              <div class=\"d-flex\">\n                <div class=\"flex-grow-1\">\n                  {{item.name}}\n                  @if (item.size > sizeLimit()) {\n                    <div class=\"form-text text-danger\">\n                      {{'Site::Files:ExceedsMaximumSize' |\n                    abpLocalization:(sizeLimit()|formatFileSize)}}</div>\n                  }\n                </div>\n                <div class=\"\" [attr.title]=\"item.name\">\n                  <site-file-preview [width]=\"'60px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\"></site-file-preview>\n                </div>\n              </div>\n            </td>\n            <td>{{item.fileSize}}</td>\n            <td>\n              <button class=\"btn btn-sm p-0 btn-outline-secondary \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                <i class=\"fas fa-trash p-2\"></i>\n              </button>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n} @else {\n  <div class=\"alert alert-warning py-2 px-3 mb-0\">\n    {{ 'Site::Files:ContainerNotConfigured' | abpLocalization }}\n  </div>\n}\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i4.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }, { kind: "component", type: FilePreviewComponent, selector: "site-file-preview", inputs: ["width", "src", "type", "name", "className", "resizeWidth", "resizeHeight"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: FormatFileSizePipe, name: "formatFileSize" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FileUploadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-file-upload', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, FilePreviewComponent, FormatFileSizePipe], providers: [FormatFileSizePipe], template: "@if (fileContainerName) {\n  <div class=\"input-group mb-3\">\n    <input type=\"file\" class=\"form-control\" #fileUploadInput [multiple]=\"multiple\" (change)=\"onFileInputChange($event)\">\n  </div>\n\n  @if (filesTableData.length>0) {\n    <table class=\"table\">\n      <thead>\n        <tr>\n          <th scope=\"col\">{{'Site::Files:FileName' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 120px;\">{{'Site::Files:FileSize' | abpLocalization}}</th>\n          <th scope=\"col\" style=\"width: 50px;\"></th>\n        </tr>\n      </thead>\n      <tbody>\n        @for (item of filesTableData; track item; let i = $index) {\n          <tr>\n            <td>\n              <div class=\"d-flex\">\n                <div class=\"flex-grow-1\">\n                  {{item.name}}\n                  @if (item.size > sizeLimit()) {\n                    <div class=\"form-text text-danger\">\n                      {{'Site::Files:ExceedsMaximumSize' |\n                    abpLocalization:(sizeLimit()|formatFileSize)}}</div>\n                  }\n                </div>\n                <div class=\"\" [attr.title]=\"item.name\">\n                  <site-file-preview [width]=\"'60px'\" [src]=\"item.src\" [name]=\"item.name\" [type]=\"item.type\"></site-file-preview>\n                </div>\n              </div>\n            </td>\n            <td>{{item.fileSize}}</td>\n            <td>\n              <button class=\"btn btn-sm p-0 btn-outline-secondary \" (click.stop)=\"deleteFileTableItem(i,item)\">\n                <i class=\"fas fa-trash p-2\"></i>\n              </button>\n            </td>\n          </tr>\n        }\n      </tbody>\n    </table>\n  }\n} @else {\n  <div class=\"alert alert-warning py-2 px-3 mb-0\">\n    {{ 'Site::Files:ContainerNotConfigured' | abpLocalization }}\n  </div>\n}\n" }]
+        }], ctorParameters: () => [{ type: FormatFileSizePipe }, { type: ObjectUrlService }, { type: FileAdminService }], propDecorators: { fileContainerName: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], fileData: [{
+                type: Input
+            }], fileDataChange: [{
+                type: Output
+            }], limit: [{
+                type: Input
+            }], fileUploadInput: [{
+                type: ViewChild,
+                args: ['fileUploadInput', { static: true }]
+            }] } });
+
+const IMAGE_TYPES = ['imageBlock', 'imageInline'];
+/**
+ * Lets a CKEditor field work with Site's images on the `SiteAdmin` API's host while storing them relative.
+ * A stored address is relative (`<img src="/api/site-public/files/...">`, see `SITE_FILE_PATH`), and this
+ * admin UI is served from another origin, where it does not resolve.
+ *
+ * So the editor's **model** holds the absolute address, and only the data the editor hands out is
+ * relative: a plugin converts an image's `src` (`imageBlock`/`imageInline`) on the way in (upcast:
+ * `setData()`, the initial value, a paste) from relative to absolute, and on the way out (data downcast:
+ * `getData()` - the form value that is saved, the Source view, a copy) from absolute back to relative.
+ * Everything CKEditor itself does with the model's `src` then just works: the editing view shows it, and
+ * `ImageUtils.setImageNaturalSizeAttributes` reads an uploaded image's size from it (`width`/`height`).
+ * HTML and Markdown fields alike: both load images into the same model. Links (`<a href>`) are left alone.
+ * The upload provider hands the editor the absolute address for the same reason.
+ *
+ * Registered by `provideSite()` under `CKEDITOR_CONFIG_CONTRIBUTORS` (with `useFactory`, so it can inject);
+ * the pattern is the one in `@dignite/ng.flex-fields-ckeditor`'s README, "Customizing the editor
+ * configuration".
+ */
+function siteCKEditorConfigContributor() {
+    const fileUrls = inject(SiteFileUrlService);
+    return config => {
+        const apiBase = fileUrls.apiBase;
+        if (!apiBase) {
+            // The UI shares its API's origin: a relative address already loads.
+            return;
+        }
+        const absolutePrefix = apiBase + SITE_FILE_PATH;
+        const toModel = (src) => (src.startsWith(SITE_FILE_PATH) ? apiBase + src : src);
+        const toData = (src) => (src.startsWith(absolutePrefix) ? src.substring(apiBase.length) : src);
+        // A CKEditor 5 plugin can be a plain function of the editor.
+        function SiteFileAddresses(editor) {
+            // In: the image plugin creates the model image, src included, in its own `element:img` converter
+            // (`upcastImg`, normal priority; a <figure> converts its <img> through the same event). This listener
+            // runs after it ('low') and corrects the src of the image it produced.
+            editor.conversion.for('upcast').add(upcastDispatcher => {
+                upcastDispatcher.on('element:img', (evt, data, conversionApi) => {
+                    if (!data.modelRange) {
+                        return;
+                    }
+                    for (const item of data.modelRange.getItems({ shallow: true })) {
+                        if (!IMAGE_TYPES.some(type => item.is('element', type))) {
+                            continue;
+                        }
+                        const src = item.getAttribute('src');
+                        if (typeof src === 'string' && src !== toModel(src)) {
+                            conversionApi.writer.setAttribute('src', toModel(src), item);
+                        }
+                    }
+                }, { priority: 'low' });
+            });
+            // Out: the image plugin's own src converter (`downcastImageAttribute`, registered for both downcast
+            // pipelines) writes the model's src as it is. In the data pipeline only, this one runs first ('high')
+            // and consumes the change, so that one skips it; the editing view keeps the absolute address.
+            editor.conversion.for('dataDowncast').add(downcastDispatcher => {
+                for (const imageType of IMAGE_TYPES) {
+                    downcastDispatcher.on(`attribute:src:${imageType}`, (evt, data, conversionApi) => {
+                        if (!conversionApi.consumable.consume(data.item, evt.name)) {
+                            return;
+                        }
+                        const view = conversionApi.mapper.toViewElement(data.item);
+                        const img = view && editor.plugins.get('ImageUtils').findViewImgElement(view);
+                        if (img) {
+                            const src = data.attributeNewValue ?? '';
+                            conversionApi.writer.setAttribute('src', toData(src), img);
+                        }
+                    }, { priority: 'high' });
+                }
+            });
+        }
+        // The casts to Emitter above: both dispatchers are Emitters (EmitterMixin), but this workspace compiles
+        // without strictNullChecks, under which ckeditor5's EmitterMixinConstructor<undefined> resolves to the
+        // wrong branch and their types lose `on`.
+        config.extraPlugins = [...(config.extraPlugins ?? []), SiteFileAddresses];
+    };
+}
+
+/**
+ * Lets the read-only rich-text view (`ff-ckeditor-view`: a content list cell, say) show Site's images on the
+ * `SiteAdmin` API's host. The stored HTML holds relative addresses (`<img src="/api/site-public/files/...">`,
+ * see `SITE_FILE_PATH`), which do not resolve when this admin UI is served from another origin. The editor
+ * itself is handled by `siteCKEditorConfigContributor`; this is its counterpart for the view, which has no
+ * editor to convert in.
+ *
+ * Only `src` is rewritten, in the double- and single-quoted spellings; links (`<a href>`) are left alone, as
+ * in the editor. The result is for display only: the view never hands HTML back, so nothing saved carries the
+ * host. When the UI shares its API's origin (`apiBase` empty) the HTML comes back untouched.
+ *
+ * Registered by `provideSite()` under `CKEDITOR_DISPLAY_CONTRIBUTORS` (with `useFactory`, so it can inject);
+ * the pattern is the one in `@dignite/ng.flex-fields-ckeditor`'s README, "Customizing the read-only view".
+ */
+function siteCKEditorDisplayContributor() {
+    const fileUrls = inject(SiteFileUrlService);
+    const relativeSrc = new RegExp(String.raw `(\ssrc\s*=\s*["'])(${escapeRegExp(SITE_FILE_PATH)})`, 'gi');
+    return html => {
+        const apiBase = fileUrls.apiBase;
+        return apiBase ? html.replace(relativeSrc, (_match, prefix, path) => prefix + apiBase + path) : html;
+    };
+}
+function escapeRegExp(value) {
+    return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+/**
+ * Uploads an image inserted into a CKEditor field into Site's file library and hands the editor the
+ * file's public address to embed - the same `/api/site-public/files/...` address a file field stores, so
+ * the image is served to visitors like any other site file. Registered as the `CKEDITOR_UPLOAD_PROVIDER`
+ * by `provideSite()`; the field's `CKEditor.ImagesContainerName` names the container (normally
+ * `images`).
+ *
+ * The editor gets the address on the `SiteAdmin` API's host: its model holds absolute addresses, so it can
+ * show the image and read its size (`width`/`height`); `siteCKEditorConfigContributor` turns it back into
+ * the relative address the server handed out when the editor's data is read and saved.
+ */
+class SiteCKEditorUploadProvider {
+    constructor() {
+        this.fileAdminService = inject(FileAdminService);
+        this.fileUrls = inject(SiteFileUrlService);
+    }
+    upload(file, containerName) {
+        const body = new FormData();
+        body.append('file', file, file.name);
+        return this.fileAdminService
+            .create({
+            containerName,
+            directoryId: null,
+            // The generated proxy sends `file` as the request body; FormData makes it multipart.
+            file: body,
+        })
+            .pipe(map(result => {
+            if (!result?.url) {
+                throw new Error('The upload succeeded but the server returned no file address.');
+            }
+            return this.fileUrls.toDisplay(result.url);
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteCKEditorUploadProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteCKEditorUploadProvider, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteCKEditorUploadProvider, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+// Site's file library UI: the picker a file field and the SEO share image use, the browsing modal behind
+// it, and the pieces they are built from. There is no stand-alone file-management screen - files are
+// managed where they are used.
+
+var FlexFieldQueryOperator;
+(function (FlexFieldQueryOperator) {
+    FlexFieldQueryOperator[FlexFieldQueryOperator["Equals"] = 0] = "Equals";
+    FlexFieldQueryOperator[FlexFieldQueryOperator["NotEquals"] = 1] = "NotEquals";
+    FlexFieldQueryOperator[FlexFieldQueryOperator["Contains"] = 2] = "Contains";
+    FlexFieldQueryOperator[FlexFieldQueryOperator["GreaterThan"] = 3] = "GreaterThan";
+    FlexFieldQueryOperator[FlexFieldQueryOperator["GreaterThanOrEqual"] = 4] = "GreaterThanOrEqual";
+    FlexFieldQueryOperator[FlexFieldQueryOperator["LessThan"] = 5] = "LessThan";
+    FlexFieldQueryOperator[FlexFieldQueryOperator["LessThanOrEqual"] = 6] = "LessThanOrEqual";
+    FlexFieldQueryOperator[FlexFieldQueryOperator["In"] = 7] = "In";
+})(FlexFieldQueryOperator || (FlexFieldQueryOperator = {}));
+const flexFieldQueryOperatorOptions = mapEnumToOptions(FlexFieldQueryOperator);
+
+var FlexFieldValueType;
+(function (FlexFieldValueType) {
+    FlexFieldValueType[FlexFieldValueType["String"] = 0] = "String";
+    FlexFieldValueType[FlexFieldValueType["Number"] = 1] = "Number";
+    FlexFieldValueType[FlexFieldValueType["DateTime"] = 2] = "DateTime";
+    FlexFieldValueType[FlexFieldValueType["Boolean"] = 3] = "Boolean";
+    FlexFieldValueType[FlexFieldValueType["Guid"] = 4] = "Guid";
+})(FlexFieldValueType || (FlexFieldValueType = {}));
+const flexFieldValueTypeOptions = mapEnumToOptions(FlexFieldValueType);
+
+var index$g = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get FlexFieldQueryOperator () { return FlexFieldQueryOperator; },
+    get FlexFieldValueType () { return FlexFieldValueType; },
+    flexFieldQueryOperatorOptions: flexFieldQueryOperatorOptions,
+    flexFieldValueTypeOptions: flexFieldValueTypeOptions
+});
+
+var index$f = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FlexFields: index$g
+});
+
+var index$e = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ContentTypeAdminService: ContentTypeAdminService
+});
+
+var index$d = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ContentAdminService: ContentAdminService
+});
+
+class FieldAdminService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.create = (input, config) => this.restService.request({
+            method: 'POST',
+            url: '/api/site-admin/fields',
+            body: input,
+        }, { apiName: this.apiName, ...config });
+        this.delete = (id, config) => this.restService.request({
+            method: 'DELETE',
+            url: `/api/site-admin/fields/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.findByName = (name, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/fields/by-name',
+            params: { name },
+        }, { apiName: this.apiName, ...config });
+        this.get = (id, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/fields/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.getFieldTypes = (config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/fields/field-types',
+        }, { apiName: this.apiName, ...config });
+        this.getList = (input, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/fields',
+            params: { filter: input.filter },
+        }, { apiName: this.apiName, ...config });
+        this.rename = (id, input, config) => this.restService.request({
+            method: 'POST',
+            url: `/api/site-admin/fields/${id}/rename`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+        this.update = (id, input, config) => this.restService.request({
+            method: 'PUT',
+            url: `/api/site-admin/fields/${id}`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FieldAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FieldAdminService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: FieldAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+var index$c = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    FieldAdminService: FieldAdminService
+});
+
+class PageAdminService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.create = (input, config) => this.restService.request({
+            method: 'POST',
+            url: '/api/site-admin/pages',
+            body: input,
+        }, { apiName: this.apiName, ...config });
+        this.delete = (id, config) => this.restService.request({
+            method: 'DELETE',
+            url: `/api/site-admin/pages/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.findByName = (name, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/pages/by-name',
+            params: { name },
+        }, { apiName: this.apiName, ...config });
+        this.get = (id, config) => this.restService.request({
+            method: 'GET',
+            url: `/api/site-admin/pages/${id}`,
+        }, { apiName: this.apiName, ...config });
+        this.getList = (input, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/pages',
+            params: { isActive: input.isActive, filter: input.filter },
+        }, { apiName: this.apiName, ...config });
+        this.update = (id, input, config) => this.restService.request({
+            method: 'PUT',
+            url: `/api/site-admin/pages/${id}`,
+            body: input,
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: PageAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: PageAdminService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: PageAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+var index$b = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PageAdminService: PageAdminService
+});
+
+class SiteSchemaAdminService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.get = (config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/schema',
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteSchemaAdminService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteSchemaAdminService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteSchemaAdminService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+var index$a = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    SiteSchemaAdminService: SiteSchemaAdminService
+});
+
+var index$9 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ContentTypes: index$e,
+    Contents: index$d,
+    Fields: index$c,
+    Files: index$h,
+    Pages: index$b,
+    Schema: index$a
+});
+
+var index$8 = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+var ContentStatus;
+(function (ContentStatus) {
+    ContentStatus[ContentStatus["Draft"] = 0] = "Draft";
+    ContentStatus[ContentStatus["Published"] = 1] = "Published";
+    ContentStatus[ContentStatus["Archived"] = 2] = "Archived";
+})(ContentStatus || (ContentStatus = {}));
+const contentStatusOptions = mapEnumToOptions(ContentStatus);
+
+var index$7 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get ContentStatus () { return ContentStatus; },
+    contentStatusOptions: contentStatusOptions
+});
+
+var index$6 = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+var index$5 = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+var index$4 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Admin: index$9,
+    ContentTypes: index$8,
+    Contents: index$7,
+    Fields: index$6,
+    Pages: index$5
+});
+
+var index$3 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Abp: index$f,
+    Site: index$4
+});
+
+var index$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null
+});
+
+var index$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Content: index$2
+});
+
+var index = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Abp: index$1
+});
+
+/**
+ * Flattens a content-list query into the shape ASP.NET Core's model binder actually reads.
+ *
+ * `GET /api/site-admin/contents` binds `GetContentListInput` from the query string, and that input
+ * carries `FlexFieldConditions: List<FlexFieldQueryCondition>` - a collection of complex objects.
+ * ASP.NET Core binds those only from indexed keys (`flexFieldConditions[0].fieldId=...`), whereas the
+ * generated proxy hands the array straight to `RestService`, which builds an `HttpParams` via
+ * `{ fromObject }`. Angular stringifies each element, so the server receives
+ * `flexFieldConditions=[object Object]` and every condition is silently dropped - no error, just
+ * unfiltered results. Hence this translation rather than using the generated `getList`.
+ *
+ * The flex-fields demo does not need an equivalent because its list endpoint is a POST with a body
+ * (`/api/app/product/search`); Site's is a GET, so the conditions have to survive the query string.
+ */
+function toContentListParams(input) {
+    const { flexFieldConditions, ...rest } = input;
+    const params = { ...rest };
+    (flexFieldConditions ?? []).forEach((condition, index) => {
+        const prefix = `flexFieldConditions[${index}]`;
+        params[`${prefix}.fieldId`] = condition.fieldId;
+        params[`${prefix}.fieldName`] = condition.fieldName;
+        params[`${prefix}.operator`] = condition.operator;
+        params[`${prefix}.value`] = condition.value;
+        params[`${prefix}.valueType`] = condition.valueType;
+    });
+    return params;
+}
+
+/**
+ * Remembers the content list's filters, search conditions and paging across a round trip to the
+ * create/edit page and back.
+ *
+ * `ContentsComponent` is destroyed on every route change - editing a content is a full page
+ * (`content-editor.component.ts`), not a dialog - so without this, `filters`, the applied flex-field
+ * search and the `ListService` it owns would all reset to their defaults every time an admin finishes
+ * editing and returns to the list.
+ *
+ * In-memory rather than the URL: `flexFieldConditions` covers arbitrary per-content-type fields, and
+ * round-tripping that shape through query params would need close to as much code as the search feature
+ * itself. Losing the snapshot on a hard refresh is an acceptable trade for an admin filter, unlike a
+ * shareable resource link.
+ */
+class ContentListStateService {
+    save(state) {
+        this.snapshot = state;
+    }
+    restore() {
+        return this.snapshot;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentListStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentListStateService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentListStateService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Stands in for `ContentAdminService.getList` alone. Everything else on the generated proxy is used
+ * directly - only the list call needs `flexFieldConditions` flattened before it reaches `RestService`
+ * (see {@link toContentListParams}). Kept here rather than patched into `proxy/` so that re-running
+ * `abp generate-proxy` cannot quietly revert the fix.
+ */
+class ContentQueryService {
+    constructor() {
+        this.restService = inject(RestService);
+        this.apiName = 'SiteAdmin';
+        this.getList = (input, config) => this.restService.request({
+            method: 'GET',
+            url: '/api/site-admin/contents',
+            params: toContentListParams(input),
+        }, { apiName: this.apiName, ...config });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentQueryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentQueryService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentQueryService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * The reference data every screen needs but none of them owns: the site's enabled languages, the whole
+ * field library, and which field types can be indexed. Each is fetched once and replayed; call the
+ * matching `invalidate*` after a write that would change it.
+ *
+ * **On the schema endpoint.** `GET /api/site-admin/schema` is keyed by *name* all the way down -
+ * `SiteSchemaContentTypeDto` and `SiteSchemaFieldDto` carry no id. That shape exists for MCP, which
+ * addresses everything by name. The admin UI cannot resolve a content type's fields through it, because
+ * a `ContentDto` identifies its type only by `contentTypeId` (a Guid) and there is nothing to join a
+ * Guid to a name on. So the schema is used here for site-level settings only; field resolution goes
+ * through {@link getFieldsById}, joined against `ContentTypeDto.fields[].fieldId`.
+ */
+class SiteReferenceDataService {
+    constructor() {
+        this.schemaService = inject(SiteSchemaAdminService);
+        this.fieldService = inject(FieldAdminService);
+        this.contentTypeService = inject(ContentTypeAdminService);
+    }
+    /** Site-level settings. `enabledLanguages[0]` is the default language. */
+    getSchema() {
+        this.schemaCache ??= this.schemaService
+            .get()
+            .pipe(shareReplay({ bufferSize: 1, refCount: false }));
+        return this.schemaCache;
+    }
+    /** The whole field library keyed by id - `ContentTypeFieldDto` carries only `fieldId`. */
+    getFieldsById() {
+        this.fieldsCache ??= this.fieldService
+            .getList({})
+            .pipe(map(result => new Map((result.items ?? []).map(field => [field.id, field]))), shareReplay({ bufferSize: 1, refCount: false }));
+        return this.fieldsCache;
+    }
+    /**
+     * Whether a field type has a query-index slot at all, keyed by field type name. Straight from the
+     * server: the answer is `IFieldType.IndexValueType`, and the Angular flex-fields library deliberately
+     * does not restate it. A type that answers `false` can never be searched however its `searchable` flag
+     * is set - `FlexFieldIndexManagerBase.GetIndexableFieldsAsync` skips it regardless.
+     */
+    getIndexableByFieldType() {
+        this.indexableCache ??= this.fieldService
+            .getFieldTypes()
+            .pipe(map(result => new Map((result.items ?? []).map(type => [type.name ?? '', type.indexable ?? true]))), shareReplay({ bufferSize: 1, refCount: false }));
+        return this.indexableCache;
+    }
+    /**
+     * Every content type, across every page, keyed by id - `ContentDto` carries only `contentTypeId`, and
+     * `ContentTypeAdminService.getListByPage` alone cannot resolve a name for a row whose page is not the
+     * one currently selected in a filter.
+     */
+    getContentTypesById() {
+        this.contentTypesCache ??= this.contentTypeService
+            .getList()
+            .pipe(map(result => new Map((result.items ?? []).map(type => [type.id, type]))), shareReplay({ bufferSize: 1, refCount: false }));
+        return this.contentTypesCache;
+    }
+    invalidateFields() {
+        this.fieldsCache = undefined;
+    }
+    invalidateSchema() {
+        this.schemaCache = undefined;
+    }
+    invalidateContentTypes() {
+        this.contentTypesCache = undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteReferenceDataService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteReferenceDataService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: SiteReferenceDataService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * No `admin` path segment (unlike Dignite.Cms's `/cms/admin/...`): the public tier has no Angular UI,
+ * so every route here is an admin route and the extra segment would carry no information.
+ *
+ * The parent deliberately has no `pathMatch: 'full'`. It did while this library was a stub, which
+ * would have stopped any child route from ever matching.
+ */
+const SITE_ROUTES = [
+    {
+        path: '',
+        component: RouterOutletComponent,
+        canActivate: [authGuard, permissionGuard],
+        children: [
+            {
+                path: '',
+                pathMatch: 'full',
+                redirectTo: 'contents',
+            },
+            {
+                path: 'contents',
+                loadComponent: () => import('./dignite-ng.site-contents.component-DKuel8w-.mjs').then(c => c.ContentsComponent),
+                data: { requiredPolicy: eSitePolicyNames.Contents },
+            },
+            {
+                // Editing a content is a page, not a dialog: the left half is a form as long as the content
+                // type defines, which a dialog could only scroll.
+                path: 'contents/create',
+                loadComponent: () => import('./dignite-ng.site-content-editor.component-iFWDeYJ9.mjs').then(c => c.ContentEditorComponent),
+                data: { requiredPolicy: eSitePolicyNames.ContentsCreate },
+            },
+            {
+                path: 'contents/:id/edit',
+                loadComponent: () => import('./dignite-ng.site-content-editor.component-iFWDeYJ9.mjs').then(c => c.ContentEditorComponent),
+                data: { requiredPolicy: eSitePolicyNames.ContentsUpdate },
+            },
+            {
+                path: 'pages',
+                loadComponent: () => import('./dignite-ng.site-pages.component-S9BEgC4W.mjs').then(c => c.PagesComponent),
+                data: { requiredPolicy: eSitePolicyNames.Pages },
+            },
+            {
+                path: 'pages/:pageId/content-types',
+                loadComponent: () => import('./dignite-ng.site-content-types.component-D2jMSSq6.mjs').then(c => c.ContentTypesComponent),
+                data: { requiredPolicy: eSitePolicyNames.ContentTypes },
+            },
+            {
+                path: 'fields',
+                loadComponent: () => import('./dignite-ng.site-fields.component-By_YyfIx.mjs').then(c => c.FieldsComponent),
+                data: { requiredPolicy: eSitePolicyNames.Fields },
+            },
+        ],
+    },
+];
+
+/*
+ * Public API Surface of @dignite/ng.site
+ *
+ * Screen components are intentionally absent: every one of them is reached through `SITE_ROUTES`'
+ * `loadComponent`, and exporting them here would pull all of them into whatever chunk imports this
+ * barrel, undoing the lazy loading.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { sizedFileUrl as $, FormatFileSizePipe as A, SEO_FIELD_TYPE as B, ContentAdminService as C, SEO_FIELD_TYPE_NAME as D, SITE_FILE_CONTAINER_NAMES as E, FlexFieldQueryOperator as F, SITE_FILE_PATH as G, SITE_IMAGES_CONTAINER_NAME as H, IMAGE_TYPE_OPTIONS as I, SITE_ROUTES as J, SeoConfigComponent as K, SeoConfiguration as L, MY_FILES_NODE_KEY as M, SeoControlComponent as N, ObjectUrlService as O, PageAdminService as P, SeoViewComponent as Q, SiteCKEditorUploadProvider as R, SiteReferenceDataService as S, SiteFileUrlService as T, index as U, ValidatorsService as V, absoluteFileUrl as W, isMyFilesNode as X, isSiteFileUrl as Y, siteCKEditorConfigContributor as Z, siteCKEditorDisplayContributor as _, ContentQueryService as a, toContentListParams as a0, ContentListStateService as b, ContentTypeAdminService as c, ContentStatus as d, eSitePolicyNames as e, FlexFieldValueType as f, FieldAdminService as g, CONTENT_FIELD_TYPE as h, CONTENT_FIELD_TYPE_NAME as i, ContentConfigComponent as j, ContentConfiguration as k, ContentControlComponent as l, ContentViewComponent as m, index$3 as n, FILE_FIELD_CONFIGURATION_NAMES as o, FILE_FIELD_TYPE as p, FILE_FIELD_TYPE_NAME as q, FileConfigComponent as r, FileControlComponent as s, FileDirectoryTreeComponent as t, FileFieldConfiguration as u, FileModalComponent as v, FilePickerComponent as w, FilePreviewComponent as x, FileUploadComponent as y, FileViewComponent as z };
+//# sourceMappingURL=dignite-ng.site-dignite-ng.site-CsKxqjY9.mjs.map