@dignite/ng.site 0.0.0-stage → 1.0.0

package/fesm2022/dignite-ng.site-contents.component-DKuel8w-.mjs

@@ -0,0 +1,604 @@
+import * as i4 from '@abp/ng.core';
+import { CoreModule, ListService, LIST_QUERY_DEBOUNCE_TIME, PermissionDirective } from '@abp/ng.core';
+import * as i2$1 from '@abp/ng.theme.shared';
+import { ConfirmationService, ToasterService, Confirmation, ThemeSharedModule } from '@abp/ng.theme.shared';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, EventEmitter, HostListener, Output, Input, ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/router';
+import { RouterLink } from '@angular/router';
+import { FlexFieldSearchComponent, FlexFieldViewComponent } from '@dignite/ng.flex-fields';
+import { forkJoin, switchMap, of, map } from 'rxjs';
+import { C as ContentAdminService, a as ContentQueryService, b as ContentListStateService, c as ContentTypeAdminService, P as PageAdminService, S as SiteReferenceDataService, e as eSitePolicyNames, d as ContentStatus, F as FlexFieldQueryOperator, f as FlexFieldValueType } from './dignite-ng.site-dignite-ng.site-CsKxqjY9.mjs';
+import * as i7 from '@abp/ng.components/tree';
+import { TreeAdapter, TreeModule } from '@abp/ng.components/tree';
+import * as i3 from '@ngx-validate/core';
+import * as i6 from '@swimlane/ngx-datatable';
+
+/**
+ * Picks one page, laid out as the page hierarchy rather than a flat list - a child page's name alone
+ * rarely says which section it sits under.
+ *
+ * Built like flex-fields' `ff-tree-search` - a `.form-select`-styled toggle over an `abp-tree` panel -
+ * because both render in the same content-list filter bar and should look and behave alike. That
+ * component's node renderer (`ff-tree-picker-nodes`) is not exported, hence `abp-tree` directly.
+ */
+class PageTreeSelectComponent {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        /** Emits only on an actual change, like a native `<select>`'s `change`. */
+        this.valueChange = new EventEmitter();
+        this.nodes = [];
+        this.expandedKeys = [];
+        this.isOpen = false;
+        this.nodesByKey = new Map();
+    }
+    /** Every page, flat - the hierarchy is rebuilt from `parentId`. */
+    set pages(pages) {
+        const ids = new Set(pages.map(page => page.id));
+        // `TreeAdapter` silently drops a node whose parent is not in the list, taking its whole subtree
+        // with it; such a page shows at the root instead.
+        const list = pages.map(page => ({
+            ...page,
+            id: page.id,
+            parentId: page.parentId && ids.has(page.parentId) ? page.parentId : null,
+        }));
+        this.nodes = new TreeAdapter(list).getTree();
+        this.nodesByKey = new Map();
+        this.index(this.nodes);
+        // Opens fully expanded, the same as the page form's parent picker (`nzDefaultExpandAll`).
+        this.expandedKeys = [...this.nodesByKey.values()].filter(node => !node.isLeaf).map(node => node.key);
+    }
+    /**
+     * Passed to `abp-tree` as `selectedNode`, whose default `isNodeSelected` matches on `id` - which a
+     * `TreeNode` carries as well as its entity. A stable reference from {@link nodesByKey}, so the
+     * OnPush tree only re-renders when the selection really changes.
+     */
+    get selectedNode() {
+        return this.value ? this.nodesByKey.get(this.value) : undefined;
+    }
+    toggle() {
+        this.isOpen = !this.isOpen;
+    }
+    /** `abp-tree` emits the clicked node's entity, i.e. the page. */
+    select(page) {
+        this.isOpen = false;
+        this.emit(page.id);
+    }
+    clear(event) {
+        // Keeps the click from reaching the toggle underneath it.
+        event.stopPropagation();
+        this.emit(null);
+    }
+    closeOnOutsideClick(event) {
+        if (this.isOpen && !event.composedPath().includes(this.elementRef.nativeElement)) {
+            this.isOpen = false;
+        }
+    }
+    close() {
+        this.isOpen = false;
+    }
+    emit(pageId) {
+        if (pageId !== (this.value ?? null)) {
+            this.valueChange.emit(pageId);
+        }
+    }
+    index(nodes) {
+        for (const node of nodes) {
+            this.nodesByKey.set(node.key, node);
+            this.index(node.children);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: PageTreeSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: PageTreeSelectComponent, isStandalone: true, selector: "site-page-tree-select", inputs: { pages: "pages", value: "value" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:click": "closeOnOutsideClick($event)", "keydown.escape": "close()" } }, ngImport: i0, template: `
+    <div class="page-tree-select">
+      <button
+        type="button"
+        class="form-select text-start page-tree-select-toggle"
+        [class.text-muted]="!selectedNode"
+        aria-haspopup="tree"
+        [attr.aria-expanded]="isOpen"
+        (click)="toggle()"
+      >
+        {{ selectedNode?.title ?? '--' }}
+      </button>
+      @if (selectedNode) {
+        <button
+          type="button"
+          class="btn btn-link page-tree-select-clear"
+          [title]="'AbpUi::Clear' | abpLocalization"
+          (click)="clear($event)"
+        >
+          <i class="fa fa-times" aria-hidden="true"></i>
+        </button>
+      }
+
+      @if (isOpen) {
+        <div class="page-tree-select-menu">
+          <abp-tree
+            [nodes]="nodes"
+            [(expandedKeys)]="expandedKeys"
+            [selectedNode]="selectedNode"
+            (selectedNodeChange)="select($event)"
+          >
+            <ng-template abpTreeNodeTemplate let-node>
+              <span class="page-tree-select-node">{{ node.title }}</span>
+            </ng-template>
+            <ng-template abpTreeExpandedIconTemplate let-node>
+              <i
+                class="fa"
+                [class.fa-minus]="node.isExpanded"
+                [class.fa-plus]="!node.isExpanded"
+                aria-hidden="true"
+              ></i>
+            </ng-template>
+          </abp-tree>
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".page-tree-select{position:relative}.page-tree-select-toggle{height:auto;min-height:calc(1.5em + 1.35rem + 2px);padding-right:3.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-tree-select-clear{position:absolute;top:50%;right:2rem;display:inline-flex;align-items:center;height:100%;padding:0 .375rem;line-height:1;color:var(--bs-secondary-color, #6c757d);text-decoration:none;transform:translateY(-50%);z-index:2}.page-tree-select-menu{position:absolute;z-index:1050;width:100%;max-height:18rem;margin-top:.25rem;padding:.375rem;overflow:auto;color:var(--bs-body-color);background-color:var(--lpx-content-bg, var(--bs-secondary-bg, #fff));border:1px solid var(--bs-border-color, rgba(0, 0, 0, .12));border-radius:.375rem;box-shadow:0 .125rem .25rem #00000013}.page-tree-select-node{display:inline-block;min-height:1.75rem;padding:.125rem .375rem;border-radius:.25rem}:host ::ng-deep .ant-tree{background:transparent!important}:host ::ng-deep .ant-tree-node-content-wrapper,:host ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:transparent!important}:host ::ng-deep .ant-tree-node-content-wrapper>.selected .page-tree-select-node{background-color:var(--lpx-brand, var(--bs-primary));color:var(--bs-white, #fff)}:host ::ng-deep .ant-tree-node-content-wrapper:hover>div:not(.selected) .page-tree-select-node{background-color:var(--bs-secondary-bg, #f5f5f5)}\n"], dependencies: [{ kind: "ngmodule", type: CoreModule }, { 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: PageTreeSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-page-tree-select', changeDetection: ChangeDetectionStrategy.Eager, imports: [CoreModule, TreeModule], template: `
+    <div class="page-tree-select">
+      <button
+        type="button"
+        class="form-select text-start page-tree-select-toggle"
+        [class.text-muted]="!selectedNode"
+        aria-haspopup="tree"
+        [attr.aria-expanded]="isOpen"
+        (click)="toggle()"
+      >
+        {{ selectedNode?.title ?? '--' }}
+      </button>
+      @if (selectedNode) {
+        <button
+          type="button"
+          class="btn btn-link page-tree-select-clear"
+          [title]="'AbpUi::Clear' | abpLocalization"
+          (click)="clear($event)"
+        >
+          <i class="fa fa-times" aria-hidden="true"></i>
+        </button>
+      }
+
+      @if (isOpen) {
+        <div class="page-tree-select-menu">
+          <abp-tree
+            [nodes]="nodes"
+            [(expandedKeys)]="expandedKeys"
+            [selectedNode]="selectedNode"
+            (selectedNodeChange)="select($event)"
+          >
+            <ng-template abpTreeNodeTemplate let-node>
+              <span class="page-tree-select-node">{{ node.title }}</span>
+            </ng-template>
+            <ng-template abpTreeExpandedIconTemplate let-node>
+              <i
+                class="fa"
+                [class.fa-minus]="node.isExpanded"
+                [class.fa-plus]="!node.isExpanded"
+                aria-hidden="true"
+              ></i>
+            </ng-template>
+          </abp-tree>
+        </div>
+      }
+    </div>
+  `, styles: [".page-tree-select{position:relative}.page-tree-select-toggle{height:auto;min-height:calc(1.5em + 1.35rem + 2px);padding-right:3.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.page-tree-select-clear{position:absolute;top:50%;right:2rem;display:inline-flex;align-items:center;height:100%;padding:0 .375rem;line-height:1;color:var(--bs-secondary-color, #6c757d);text-decoration:none;transform:translateY(-50%);z-index:2}.page-tree-select-menu{position:absolute;z-index:1050;width:100%;max-height:18rem;margin-top:.25rem;padding:.375rem;overflow:auto;color:var(--bs-body-color);background-color:var(--lpx-content-bg, var(--bs-secondary-bg, #fff));border:1px solid var(--bs-border-color, rgba(0, 0, 0, .12));border-radius:.375rem;box-shadow:0 .125rem .25rem #00000013}.page-tree-select-node{display:inline-block;min-height:1.75rem;padding:.125rem .375rem;border-radius:.25rem}:host ::ng-deep .ant-tree{background:transparent!important}:host ::ng-deep .ant-tree-node-content-wrapper,:host ::ng-deep .ant-tree-node-content-wrapper:hover{background-color:transparent!important}:host ::ng-deep .ant-tree-node-content-wrapper>.selected .page-tree-select-node{background-color:var(--lpx-brand, var(--bs-primary));color:var(--bs-white, #fff)}:host ::ng-deep .ant-tree-node-content-wrapper:hover>div:not(.selected) .page-tree-select-node{background-color:var(--bs-secondary-bg, #f5f5f5)}\n"] }]
+        }], propDecorators: { pages: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], closeOnOutsideClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }], close: [{
+                type: HostListener,
+                args: ['keydown.escape']
+            }] } });
+
+class ContentsComponent {
+    constructor() {
+        this.contentService = inject(ContentAdminService);
+        this.contentQuery = inject(ContentQueryService);
+        this.listState = inject(ContentListStateService);
+        this.contentTypeService = inject(ContentTypeAdminService);
+        this.pageService = inject(PageAdminService);
+        this.referenceData = inject(SiteReferenceDataService);
+        this.fb = inject(FormBuilder);
+        this.confirmation = inject(ConfirmationService);
+        this.toaster = inject(ToasterService);
+        this.list = inject(ListService);
+        this.policies = eSitePolicyNames;
+        this.ContentStatus = ContentStatus;
+        this.statuses = [ContentStatus.Draft, ContentStatus.Published, ContentStatus.Archived];
+        // Everything the template reads that changes in an HTTP callback is a signal, not a plain field: the
+        // host layout's ancestors (`abp-router-outlet`, the LeptonX layouts) are OnPush, and a plain-field
+        // write in a response callback never marks them for check, so the list would stay empty until some
+        // unrelated event happened to.
+        this.data = signal({ items: [], totalCount: 0 }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.filters = {};
+        this.pages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+        this.languages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+        this.contentTypes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTypes" }] : /* istanbul ignore next */ []));
+        /**
+         * Every content type across every page, for resolving a row's display name. Deliberately separate
+         * from {@link contentTypes}, which is scoped to the selected page and drives the filter dropdown and
+         * field arrangements - a row's own page is not necessarily the one currently filtered on.
+         */
+        this.contentTypesById = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "contentTypesById" }] : /* istanbul ignore next */ []));
+        this.fieldsById = new Map();
+        /** Each content type's arrangement, joined with the field library. Keyed by content type id. */
+        this.arrangementByContentType = new Map();
+        /** Union of `showInList` fields across the page's content types, deduped by field. */
+        this.columns = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        /** Union of searchable fields, deduped by field. */
+        this.searchFields = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchFields" }] : /* istanbul ignore next */ []));
+        // --- stable-reference caches --------------------------------------------------------------------
+        //
+        // `ff-flex-field-*` decide whether to re-render by comparing their `fields` input's *object
+        // reference*. Binding `[fields]="someMethodCall(row, column)"` in a template calls that method - and
+        // allocates a new object - on every change-detection pass. The child sees a changed input, tears
+        // down and recreates its dynamic sub-component, which itself triggers change detection: Angular
+        // reports `NG0103: Infinite change detection` and the page never finishes rendering. So both caches
+        // hold stable references, rebuilt only when the underlying data actually changes.
+        /** Per field definition, for the search bar. Keyed by field name. */
+        this.definitionValues = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "definitionValues" }] : /* istanbul ignore next */ []));
+        /** Per row then field name, for the list cells. */
+        this.rowValues = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowValues" }] : /* istanbul ignore next */ []));
+        this.searchForm = this.fb.group({ flexFieldSearch: this.fb.group({}) });
+        this.appliedConditions = [];
+        /** Raw `flexFieldSearch` value restored from {@link ContentListStateService}, keyed by field name. */
+        this.searchValues = {};
+        const cached = this.listState.restore();
+        if (cached) {
+            this.filters = cached.filters;
+            this.appliedConditions = cached.appliedConditions;
+            this.searchValues = cached.searchValues;
+            this.list.page = cached.page;
+            this.list.sortKey = cached.sortKey;
+            this.list.sortOrder = cached.sortOrder;
+            this.list.maxResultCount = cached.maxResultCount;
+        }
+        this.pageService.getList({}).subscribe(result => {
+            this.pages.set(result.items ?? []);
+        });
+        // Restores the content-type dropdown, columns and search fields for a restored `pageId` - a no-op
+        // when there is none, same as a fresh visit.
+        this.fetchContentTypes().subscribe();
+        forkJoin({
+            schema: this.referenceData.getSchema(),
+            fields: this.referenceData.getFieldsById(),
+            contentTypes: this.referenceData.getContentTypesById(),
+        }).subscribe(({ schema, fields, contentTypes }) => {
+            // The schema projection is name-keyed, so it is used only for the site-level settings; field
+            // resolution goes through the Guid-keyed library below.
+            this.languages.set(schema.enabledLanguages ?? []);
+            this.fieldsById = fields;
+            this.contentTypesById.set(contentTypes);
+            this.rebuildArrangements();
+        });
+        // Waits for the schema before querying: on a first visit the reference data is uncached and
+        // routinely outlasts `ListService`'s 300ms debounce, so the first query would otherwise go out
+        // with no `cultureName` and list every language under a dropdown already showing one.
+        const getData = (query) => this.referenceData.getSchema().pipe(switchMap(schema => {
+            this.filters.cultureName ??=
+                schema.defaultLanguage ?? schema.enabledLanguages?.[0] ?? null;
+            // Snapshot on every real query, not just on `applyFilters()` - this is the one point
+            // every filter, search and paging change already funnels through.
+            this.listState.save({
+                filters: this.filters,
+                appliedConditions: this.appliedConditions,
+                searchValues: this.searchForm.get('flexFieldSearch')?.value ?? {},
+                page: this.list.page,
+                sortKey: this.list.sortKey,
+                sortOrder: this.list.sortOrder,
+                maxResultCount: this.list.maxResultCount,
+            });
+            return this.contentQuery.getList({
+                ...query,
+                ...this.filters,
+                flexFieldConditions: this.appliedConditions,
+            });
+        }));
+        const setData = (result) => {
+            this.data.set(result);
+            this.rebuildRowValues();
+        };
+        this.list.hookToQuery(getData).subscribe(setData);
+    }
+    // --- filters ------------------------------------------------------------------------------------
+    onPageChange(pageId) {
+        this.filters.pageId = pageId;
+        this.filters.contentTypeId = null;
+        this.clearSearch();
+        this.loadContentTypes();
+    }
+    applyFilters() {
+        this.appliedConditions = this.buildConditions();
+        this.list.page = 0;
+        this.list.get();
+    }
+    /**
+     * Resets each existing control rather than replacing the `flexFieldSearch` group.
+     *
+     * Every `ff-flex-field-search` keeps its own reference to the group it registered its control on
+     * (`FieldTypeControlBase.valuesGroup`), captured when its inputs were first set. Swapping in a new
+     * group would not change the identity of anything those children can see - `searchForm` itself is
+     * unchanged - so none of them would re-register. They would keep writing into the old, detached
+     * group while `buildConditions()` read the new, permanently empty one.
+     */
+    clearSearch() {
+        const group = this.searchForm.get('flexFieldSearch');
+        Object.values(group.controls).forEach(control => control.reset(''));
+        this.appliedConditions = [];
+        this.searchValues = {};
+    }
+    clearFiltersAndSearch() {
+        const cultureName = this.filters.cultureName;
+        this.filters = { cultureName };
+        this.clearSearch();
+        this.contentTypes.set([]);
+        this.rebuildArrangements();
+        this.applyFilters();
+    }
+    loadContentTypes() {
+        this.fetchContentTypes().subscribe(() => this.applyFilters());
+    }
+    /** Loads `contentTypes` for the current `filters.pageId` and rebuilds the derived arrangements. */
+    fetchContentTypes() {
+        if (!this.filters.pageId) {
+            this.contentTypes.set([]);
+            this.rebuildArrangements();
+            return of(undefined);
+        }
+        return this.contentTypeService.getListByPage(this.filters.pageId).pipe(map(result => {
+            this.contentTypes.set(result.items ?? []);
+            this.rebuildArrangements();
+        }));
+    }
+    // --- arrangement, columns, search fields ---------------------------------------------------------
+    /**
+     * Recomputes everything derived from "which content types are in play": the per-type arrangements,
+     * the column union and the searchable union. Runs on page change and whenever the field library
+     * arrives, never per change-detection pass.
+     */
+    rebuildArrangements() {
+        this.arrangementByContentType = new Map(this.contentTypes().map(contentType => [
+            contentType.id,
+            (contentType.fields ?? [])
+                .map(entry => this.toArrangedField(entry.fieldId, entry))
+                .filter((field) => !!field)
+                .sort((a, b) => a.order - b.order),
+        ]));
+        this.rebuildColumns();
+        this.rebuildSearchFields();
+        this.rebuildRowValues();
+    }
+    toArrangedField(fieldId, usage) {
+        const definition = fieldId ? this.fieldsById.get(fieldId) : undefined;
+        if (!definition) {
+            return undefined;
+        }
+        const fieldData = {
+            id: definition.id,
+            name: definition.name,
+            displayName: usage.displayName || definition.displayName,
+            description: definition.description ?? undefined,
+            fieldTypeName: definition.fieldTypeName,
+            configuration: (definition.configuration ?? {}),
+        };
+        return {
+            fieldId: definition.id,
+            name: definition.name,
+            displayName: fieldData.displayName,
+            fieldTypeName: definition.fieldTypeName,
+            required: !!usage.required,
+            searchable: !!usage.searchable,
+            showInList: !!usage.showInList,
+            order: usage.order ?? 0,
+            fieldData,
+        };
+    }
+    /**
+     * A field earns a column when a content type marks it `showInList` - that flag is the whole answer.
+     *
+     * No capability check on top of it: whether a field type ships a view component is not a reason to
+     * drop a column the arrangement explicitly asked for. Silently omitting it would leave the editor
+     * looking at a setting that appears to do nothing.
+     */
+    rebuildColumns() {
+        const columns = new Map();
+        for (const [contentTypeId, fields] of this.arrangementByContentType) {
+            for (const field of fields) {
+                if (!field.showInList) {
+                    continue;
+                }
+                const existing = columns.get(field.fieldId);
+                if (existing) {
+                    existing.contentTypeIds.add(contentTypeId);
+                }
+                else {
+                    columns.set(field.fieldId, {
+                        fieldId: field.fieldId,
+                        name: field.name,
+                        displayName: field.displayName,
+                        fieldTypeName: field.fieldTypeName,
+                        contentTypeIds: new Set([contentTypeId]),
+                    });
+                }
+            }
+        }
+        this.columns.set([...columns.values()]);
+    }
+    /**
+     * A field is filterable when a content type marks it `searchable` - again, that flag is the whole
+     * answer. The field arrangement editor already refuses to set it on a type the server reports as
+     * non-indexable, so the check belongs there, where it can explain itself, rather than here where it
+     * would quietly drop a filter someone had configured.
+     *
+     * `ff-flex-field-search` renders nothing for a type with no search component (`DateTime` today); that
+     * is the library's documented behaviour, not something to pre-empt by hiding the field.
+     */
+    rebuildSearchFields() {
+        const fields = new Map();
+        for (const arranged of this.arrangementByContentType.values()) {
+            for (const field of arranged) {
+                if (fields.has(field.fieldId) || !field.searchable) {
+                    continue;
+                }
+                fields.set(field.fieldId, field);
+            }
+        }
+        const searchFields = [...fields.values()];
+        this.searchFields.set(searchFields);
+        this.definitionValues.set(new Map(searchFields.map(field => [
+            field.name,
+            { field: field.fieldData, required: field.required, searchable: true, value: undefined },
+        ])));
+    }
+    rebuildRowValues() {
+        this.rowValues.set(new Map((this.data().items ?? []).map(content => [
+            content.id,
+            new Map((this.arrangementByContentType.get(content.contentTypeId ?? '') ?? []).map(field => [
+                field.name,
+                {
+                    field: field.fieldData,
+                    required: field.required,
+                    searchable: field.searchable,
+                    value: content.fieldValues?.[field.name],
+                },
+            ])),
+        ])));
+    }
+    /** The stable value for one cell, or `undefined` when this row's type does not use the field. */
+    rowValueOf(content, column) {
+        return this.rowValues().get(content.id)?.get(column.name);
+    }
+    /** The stable value for one search widget. See {@link definitionValues}. */
+    definitionValueOf(field) {
+        return this.definitionValues().get(field.name);
+    }
+    /** What one search widget should redisplay on restore - see {@link ContentListStateService}. */
+    selectedValueOf(field) {
+        return this.searchValues[field.name] ?? '';
+    }
+    // --- search conditions ---------------------------------------------------------------------------
+    /**
+     * Turns what each `ff-flex-field-search` wrote into the conditions the server understands. The
+     * mapping depends on each field type's storage shape, not on anything generic the search form knows.
+     */
+    buildConditions() {
+        const raw = (this.searchForm.get('flexFieldSearch')?.value ?? {});
+        return this.searchFields().flatMap(field => this.toConditions(field, raw[field.name]));
+    }
+    toConditions(field, value) {
+        switch (field.fieldTypeName) {
+            case 'Text':
+                return this.isBlank(value)
+                    ? []
+                    : [
+                        this.condition(field, FlexFieldQueryOperator.Contains, String(value), FlexFieldValueType.String),
+                    ];
+            case 'Number': {
+                // `ff-number-search` writes one "min-max" string; the executor composes two conditions on the
+                // same field as a range rather than a conflict.
+                const range = typeof value === 'string' ? value.split('-') : [];
+                if (range.length !== 2 || range.some(part => part === '')) {
+                    return [];
+                }
+                return [
+                    this.condition(field, FlexFieldQueryOperator.GreaterThanOrEqual, range[0], FlexFieldValueType.Number),
+                    this.condition(field, FlexFieldQueryOperator.LessThanOrEqual, range[1], FlexFieldValueType.Number),
+                ];
+            }
+            case 'Boolean':
+                // A plain `<option [value]>` binding always stringifies, so this arrives as "true"/"false".
+                return value === 'true' || value === 'false'
+                    ? [this.condition(field, FlexFieldQueryOperator.Equals, value, FlexFieldValueType.Boolean)]
+                    : [];
+            case 'Select':
+            case 'Tree': {
+                const values = Array.isArray(value) ? value : this.isBlank(value) ? [] : [value];
+                return values.length === 0
+                    ? []
+                    : [
+                        this.condition(field, FlexFieldQueryOperator.In, values.join(','), FlexFieldValueType.String),
+                    ];
+            }
+            default:
+                return [];
+        }
+    }
+    /** Both `fieldId` and `fieldName` are required by the server - always send the pair. */
+    condition(field, operator, value, valueType) {
+        return { fieldId: field.fieldId, fieldName: field.name, operator, value, valueType };
+    }
+    isBlank(value) {
+        return value === null || value === undefined || value === '';
+    }
+    // --- display helpers -----------------------------------------------------------------------------
+    statusKeyOf(status) {
+        return `Site::Enum:ContentStatus:${ContentStatus[status ?? ContentStatus.Draft]}`;
+    }
+    contentTypeNameOf(contentTypeId) {
+        return (contentTypeId ? this.contentTypesById().get(contentTypeId)?.displayName : undefined) ?? '---';
+    }
+    pageNameOf(pageId) {
+        return this.pages().find(page => page.id === pageId)?.displayName ?? '---';
+    }
+    // --- create / edit -------------------------------------------------------------------------------
+    //
+    // Editing happens on its own page (`/site/contents/create`, `/site/contents/:id/edit`), so this
+    // component only links there. Deleting stays here because it needs no form.
+    /** Creating needs a page picked, since a content type belongs to one. */
+    get canCreate() {
+        return !!this.filters.pageId && this.contentTypes().length > 0;
+    }
+    delete(content) {
+        this.confirmation
+            .warn('AbpUi::ItemWillBeDeletedMessage', 'AbpUi::AreYouSure', {
+            messageLocalizationParams: [content.slug || this.pageNameOf(content.pageId)],
+        })
+            .subscribe((status) => {
+            if (status === Confirmation.Status.confirm) {
+                this.contentService.delete(content.id).subscribe(() => {
+                    this.list.get();
+                    this.toaster.success('AbpUi::SuccessfullyDeleted');
+                });
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.2", type: ContentsComponent, isStandalone: true, selector: "site-contents", providers: [ListService, { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 300 }], ngImport: i0, template: "<div class=\"card mb-3\">\n  <div class=\"card-body\">\n    <div class=\"row align-items-end g-2 mb-3\">\n      <div class=\"col-md-3\">\n        <label class=\"form-label\">{{ 'Site::Menu:Pages' | abpLocalization }}</label>\n        <site-page-tree-select\n          [pages]=\"pages()\"\n          [value]=\"filters.pageId\"\n          (valueChange)=\"onPageChange($event)\"\n        ></site-page-tree-select>\n      </div>\n      <div class=\"col-md-2\">\n        <label class=\"form-label\">{{ 'Site::DisplayName:Content.ContentType' | abpLocalization }}</label>\n        <select\n          class=\"form-select\"\n          [(ngModel)]=\"filters.contentTypeId\"\n          (change)=\"applyFilters()\"\n          [disabled]=\"!filters.pageId\"\n        >\n          <option [ngValue]=\"null\">--</option>\n          @for (contentType of contentTypes(); track contentType.id) {\n            <option [ngValue]=\"contentType.id\">{{ contentType.displayName }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"col-md-2\">\n        <label class=\"form-label\">{{ 'Site::DisplayName:Content.CultureName' | abpLocalization }}</label>\n        <select class=\"form-select\" [(ngModel)]=\"filters.cultureName\" (change)=\"applyFilters()\">\n          @for (language of languages(); track language) {\n            <option [ngValue]=\"language\">{{ language }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"col-md-2\">\n        <label class=\"form-label\">{{ 'Site::DisplayName:Content.Status' | abpLocalization }}</label>\n        <select class=\"form-select\" [(ngModel)]=\"filters.status\" (change)=\"applyFilters()\">\n          <option [ngValue]=\"null\">--</option>\n          @for (status of statuses; track status) {\n            <option [ngValue]=\"status\">{{ statusKeyOf(status) | abpLocalization }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"col-md-3\">\n        <label class=\"form-label\">{{ 'AbpUi::Search' | abpLocalization }}</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          [(ngModel)]=\"filters.filter\"\n          (keyup.enter)=\"applyFilters()\"\n          [placeholder]=\"'AbpUi::Search' | abpLocalization\"\n        />\n      </div>\n    </div>\n\n    @if (searchFields().length > 0) {\n      <hr />\n      <h6>{{ 'Site::FilterByFieldValue' | abpLocalization }}</h6>\n      <form [formGroup]=\"searchForm\">\n        <div class=\"row g-2\">\n          @for (field of searchFields(); track field.fieldId) {\n            <!-- No label here: each search widget renders the field's own label. -->\n            <div class=\"col-md-3\">\n              <ff-flex-field-search\n                [fields]=\"definitionValueOf(field)\"\n                [selected]=\"selectedValueOf(field)\"\n                [entity]=\"searchForm\"\n                parentFieldName=\"flexFieldSearch\"\n              ></ff-flex-field-search>\n            </div>\n          }\n        </div>\n      </form>\n    }\n\n    <div class=\"mt-3\">\n      <button type=\"button\" class=\"btn btn-primary me-2\" (click)=\"applyFilters()\">\n        <i class=\"fa fa-search me-1\"></i>{{ 'AbpUi::Search' | abpLocalization }}\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"clearFiltersAndSearch()\">\n        {{ 'AbpUi::Clear' | abpLocalization }}\n      </button>\n    </div>\n  </div>\n</div>\n\n<div class=\"card\">\n  <div class=\"card-body\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <h5 class=\"mb-0\">{{ 'Site::Contents' | abpLocalization }}</h5>\n      <a\n        *abpPermission=\"policies.ContentsCreate\"\n        class=\"btn btn-primary\"\n        [class.disabled]=\"!canCreate\"\n        [routerLink]=\"canCreate ? ['/site/contents/create'] : null\"\n        [queryParams]=\"{ pageId: filters.pageId, cultureName: filters.cultureName }\"\n      >\n        <i class=\"fa fa-plus me-1\"></i>{{ 'Site::NewContent' | abpLocalization }}\n      </a>\n    </div>\n\n    @if (!filters.pageId) {\n      <p class=\"text-muted\">{{ 'Site::PageFilterRequiredForFieldColumns' | abpLocalization }}</p>\n    }\n\n    <!-- `[list]` drives paging through `ListService` (server-side: `skipCount`/`maxResultCount`) and\n         renders the localized total, loading spinner and empty message; `default` is ABP's stock\n         table look, including the horizontal scrollbar a wide field-column union needs. Every column\n         is unsortable, keeping the server's default `PublishTime desc, Id desc` - a deterministic\n         order, so pages never overlap or skip rows. Field columns could not sort anyway: `sorting`\n         is a dynamic-LINQ order over entity properties, and field values live in JSON. -->\n    <ngx-datatable default [rows]=\"data().items\" [count]=\"data().totalCount\" [list]=\"list\">\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.Slug' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ row.slug || ('Site::SlugIsPageOwnAddress' | abpLocalization) }}\n        </ng-template>\n      </ngx-datatable-column>\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.ContentType' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ contentTypeNameOf(row.contentTypeId) }}\n        </ng-template>\n      </ngx-datatable-column>\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.Status' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ statusKeyOf(row.status) | abpLocalization }}\n        </ng-template>\n      </ngx-datatable-column>\n      @for (column of columns(); track column.fieldId) {\n        <ngx-datatable-column [name]=\"column.displayName\" [sortable]=\"false\">\n          <ng-template let-row=\"row\" ngx-datatable-cell-template>\n            <!-- Columns are the union across the page's content types, so a row whose type does not\n                 use this field has nothing to show here. -->\n            @if (rowValueOf(row, column); as fieldValue) {\n              <ff-flex-field-view\n                [showInList]=\"true\"\n                [type]=\"column.fieldTypeName\"\n                [fields]=\"fieldValue\"\n                [value]=\"fieldValue.value\"\n              ></ff-flex-field-view>\n            } @else {\n              ---\n            }\n          </ng-template>\n        </ngx-datatable-column>\n      }\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.PublishTime' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ row.publishTime | shortDateTime }}\n        </ng-template>\n      </ngx-datatable-column>\n      <ngx-datatable-column\n        [name]=\"'AbpUi::Actions' | abpLocalization\"\n        [sortable]=\"false\"\n        [width]=\"130\"\n        [maxWidth]=\"130\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          <a\n            *abpPermission=\"policies.ContentsUpdate\"\n            class=\"btn btn-sm btn-light me-1\"\n            [routerLink]=\"['/site/contents', row.id, 'edit']\"\n            [title]=\"'AbpUi::Edit' | abpLocalization\"\n          >\n            <i class=\"fa fa-pencil\"></i>\n          </a>\n          <button\n            *abpPermission=\"policies.ContentsDelete\"\n            type=\"button\"\n            class=\"btn btn-sm btn-light\"\n            (click)=\"delete(row)\"\n            [title]=\"'AbpUi::Delete' | abpLocalization\"\n          >\n            <i class=\"fa fa-trash text-danger\"></i>\n          </button>\n        </ng-template>\n      </ngx-datatable-column>\n    </ngx-datatable>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: i3.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i4.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "ngmodule", type: ThemeSharedModule }, { 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.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i2$1.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: i2$1.NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: FlexFieldSearchComponent, selector: "ff-flex-field-search", inputs: ["fields", "entity", "parentFieldName", "selected"] }, { kind: "component", type: FlexFieldViewComponent, selector: "ff-flex-field-view", inputs: ["showInList", "fields", "type", "value"] }, { kind: "component", type: PageTreeSelectComponent, selector: "site-page-tree-select", inputs: ["pages", "value"], outputs: ["valueChange"] }, { kind: "pipe", type: i4.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: i4.ShortDateTimePipe, name: "shortDateTime" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.2", ngImport: i0, type: ContentsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'site-contents', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        CoreModule,
+                        ThemeSharedModule,
+                        ReactiveFormsModule,
+                        PermissionDirective,
+                        RouterLink,
+                        FlexFieldSearchComponent,
+                        FlexFieldViewComponent,
+                        PageTreeSelectComponent,
+                    ], providers: [ListService, { provide: LIST_QUERY_DEBOUNCE_TIME, useValue: 300 }], template: "<div class=\"card mb-3\">\n  <div class=\"card-body\">\n    <div class=\"row align-items-end g-2 mb-3\">\n      <div class=\"col-md-3\">\n        <label class=\"form-label\">{{ 'Site::Menu:Pages' | abpLocalization }}</label>\n        <site-page-tree-select\n          [pages]=\"pages()\"\n          [value]=\"filters.pageId\"\n          (valueChange)=\"onPageChange($event)\"\n        ></site-page-tree-select>\n      </div>\n      <div class=\"col-md-2\">\n        <label class=\"form-label\">{{ 'Site::DisplayName:Content.ContentType' | abpLocalization }}</label>\n        <select\n          class=\"form-select\"\n          [(ngModel)]=\"filters.contentTypeId\"\n          (change)=\"applyFilters()\"\n          [disabled]=\"!filters.pageId\"\n        >\n          <option [ngValue]=\"null\">--</option>\n          @for (contentType of contentTypes(); track contentType.id) {\n            <option [ngValue]=\"contentType.id\">{{ contentType.displayName }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"col-md-2\">\n        <label class=\"form-label\">{{ 'Site::DisplayName:Content.CultureName' | abpLocalization }}</label>\n        <select class=\"form-select\" [(ngModel)]=\"filters.cultureName\" (change)=\"applyFilters()\">\n          @for (language of languages(); track language) {\n            <option [ngValue]=\"language\">{{ language }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"col-md-2\">\n        <label class=\"form-label\">{{ 'Site::DisplayName:Content.Status' | abpLocalization }}</label>\n        <select class=\"form-select\" [(ngModel)]=\"filters.status\" (change)=\"applyFilters()\">\n          <option [ngValue]=\"null\">--</option>\n          @for (status of statuses; track status) {\n            <option [ngValue]=\"status\">{{ statusKeyOf(status) | abpLocalization }}</option>\n          }\n        </select>\n      </div>\n      <div class=\"col-md-3\">\n        <label class=\"form-label\">{{ 'AbpUi::Search' | abpLocalization }}</label>\n        <input\n          type=\"text\"\n          class=\"form-control\"\n          [(ngModel)]=\"filters.filter\"\n          (keyup.enter)=\"applyFilters()\"\n          [placeholder]=\"'AbpUi::Search' | abpLocalization\"\n        />\n      </div>\n    </div>\n\n    @if (searchFields().length > 0) {\n      <hr />\n      <h6>{{ 'Site::FilterByFieldValue' | abpLocalization }}</h6>\n      <form [formGroup]=\"searchForm\">\n        <div class=\"row g-2\">\n          @for (field of searchFields(); track field.fieldId) {\n            <!-- No label here: each search widget renders the field's own label. -->\n            <div class=\"col-md-3\">\n              <ff-flex-field-search\n                [fields]=\"definitionValueOf(field)\"\n                [selected]=\"selectedValueOf(field)\"\n                [entity]=\"searchForm\"\n                parentFieldName=\"flexFieldSearch\"\n              ></ff-flex-field-search>\n            </div>\n          }\n        </div>\n      </form>\n    }\n\n    <div class=\"mt-3\">\n      <button type=\"button\" class=\"btn btn-primary me-2\" (click)=\"applyFilters()\">\n        <i class=\"fa fa-search me-1\"></i>{{ 'AbpUi::Search' | abpLocalization }}\n      </button>\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"clearFiltersAndSearch()\">\n        {{ 'AbpUi::Clear' | abpLocalization }}\n      </button>\n    </div>\n  </div>\n</div>\n\n<div class=\"card\">\n  <div class=\"card-body\">\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\n      <h5 class=\"mb-0\">{{ 'Site::Contents' | abpLocalization }}</h5>\n      <a\n        *abpPermission=\"policies.ContentsCreate\"\n        class=\"btn btn-primary\"\n        [class.disabled]=\"!canCreate\"\n        [routerLink]=\"canCreate ? ['/site/contents/create'] : null\"\n        [queryParams]=\"{ pageId: filters.pageId, cultureName: filters.cultureName }\"\n      >\n        <i class=\"fa fa-plus me-1\"></i>{{ 'Site::NewContent' | abpLocalization }}\n      </a>\n    </div>\n\n    @if (!filters.pageId) {\n      <p class=\"text-muted\">{{ 'Site::PageFilterRequiredForFieldColumns' | abpLocalization }}</p>\n    }\n\n    <!-- `[list]` drives paging through `ListService` (server-side: `skipCount`/`maxResultCount`) and\n         renders the localized total, loading spinner and empty message; `default` is ABP's stock\n         table look, including the horizontal scrollbar a wide field-column union needs. Every column\n         is unsortable, keeping the server's default `PublishTime desc, Id desc` - a deterministic\n         order, so pages never overlap or skip rows. Field columns could not sort anyway: `sorting`\n         is a dynamic-LINQ order over entity properties, and field values live in JSON. -->\n    <ngx-datatable default [rows]=\"data().items\" [count]=\"data().totalCount\" [list]=\"list\">\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.Slug' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ row.slug || ('Site::SlugIsPageOwnAddress' | abpLocalization) }}\n        </ng-template>\n      </ngx-datatable-column>\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.ContentType' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ contentTypeNameOf(row.contentTypeId) }}\n        </ng-template>\n      </ngx-datatable-column>\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.Status' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ statusKeyOf(row.status) | abpLocalization }}\n        </ng-template>\n      </ngx-datatable-column>\n      @for (column of columns(); track column.fieldId) {\n        <ngx-datatable-column [name]=\"column.displayName\" [sortable]=\"false\">\n          <ng-template let-row=\"row\" ngx-datatable-cell-template>\n            <!-- Columns are the union across the page's content types, so a row whose type does not\n                 use this field has nothing to show here. -->\n            @if (rowValueOf(row, column); as fieldValue) {\n              <ff-flex-field-view\n                [showInList]=\"true\"\n                [type]=\"column.fieldTypeName\"\n                [fields]=\"fieldValue\"\n                [value]=\"fieldValue.value\"\n              ></ff-flex-field-view>\n            } @else {\n              ---\n            }\n          </ng-template>\n        </ngx-datatable-column>\n      }\n      <ngx-datatable-column\n        [name]=\"'Site::DisplayName:Content.PublishTime' | abpLocalization\"\n        [sortable]=\"false\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          {{ row.publishTime | shortDateTime }}\n        </ng-template>\n      </ngx-datatable-column>\n      <ngx-datatable-column\n        [name]=\"'AbpUi::Actions' | abpLocalization\"\n        [sortable]=\"false\"\n        [width]=\"130\"\n        [maxWidth]=\"130\"\n      >\n        <ng-template let-row=\"row\" ngx-datatable-cell-template>\n          <a\n            *abpPermission=\"policies.ContentsUpdate\"\n            class=\"btn btn-sm btn-light me-1\"\n            [routerLink]=\"['/site/contents', row.id, 'edit']\"\n            [title]=\"'AbpUi::Edit' | abpLocalization\"\n          >\n            <i class=\"fa fa-pencil\"></i>\n          </a>\n          <button\n            *abpPermission=\"policies.ContentsDelete\"\n            type=\"button\"\n            class=\"btn btn-sm btn-light\"\n            (click)=\"delete(row)\"\n            [title]=\"'AbpUi::Delete' | abpLocalization\"\n          >\n            <i class=\"fa fa-trash text-danger\"></i>\n          </button>\n        </ng-template>\n      </ngx-datatable-column>\n    </ngx-datatable>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [] });
+
+export { ContentsComponent };
+//# sourceMappingURL=dignite-ng.site-contents.component-DKuel8w-.mjs.map